/* Quote artwork: 650 × approximately 780 at the 1920px design baseline.
 * Scale with the viewport and cap at the shared large-screen layout unit.
 * All rules are scoped to the header dialog; sidebar forms are unchanged.
 */
#mh-quote {
    --quote-unit: min(.052083333vw, .0625rem);
    width: calc(650 * var(--quote-unit));
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: calc(26 * var(--quote-unit));
    background: #fff;
    color: #111;
    box-shadow: none;
    font-family: 'Google Sans Flex', Arial, sans-serif;
    overflow: auto;
}
#mh-quote::backdrop { background: rgb(0 0 0 / 12%); }
#mh-quote #mh-quote-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(112 * var(--quote-unit));
    margin: 0;
    padding: calc(24 * var(--quote-unit)) calc(58 * var(--quote-unit));
    border-radius: 0;
    background: linear-gradient(100deg, #c48337, #f4ca8c);
    color: #fff;
    font: 700 calc(40 * var(--quote-unit))/1.2 'Google Sans Flex', Arial, sans-serif;
    letter-spacing: .015em;
    text-transform: uppercase;
    text-shadow: 0 2px 2px #0003;
}
#mh-quote .mh-dialog-close {
    top: calc(14 * var(--quote-unit));
    right: calc(14 * var(--quote-unit));
    z-index: 2;
    width: calc(42 * var(--quote-unit));
    height: calc(42 * var(--quote-unit));
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: 400 calc(38 * var(--quote-unit))/1 Arial, sans-serif;
    box-shadow: none;
}
#mh-quote > .wpcf7 { padding: calc(42 * var(--quote-unit)) calc(65 * var(--quote-unit)) calc(60 * var(--quote-unit)); }
#mh-quote .mh-quote-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(38 * var(--quote-unit)) calc(44 * var(--quote-unit));
}
#mh-quote .mh-quote-fields > * { min-width: 0; margin: 0; }
#mh-quote .mh-field-visible {
    display: block;
    margin: 0 0 calc(8 * var(--quote-unit));
    color: #111;
    font: 400 calc(20 * var(--quote-unit))/1 'Google Sans Flex', Arial, sans-serif;
}
#mh-quote .mh-required { color: #dc2929; }
#mh-quote .wpcf7-form-control-wrap { display: block; min-width: 0; }
#mh-quote input:not([type=submit]):not([type=hidden]),
#mh-quote textarea {
    display: block;
    width: 100%;
    min-height: 0;
    height: calc(46 * var(--quote-unit));
    margin: 0;
    padding: calc(8 * var(--quote-unit)) calc(12 * var(--quote-unit));
    border: 0;
    border-radius: calc(7 * var(--quote-unit));
    background: #eaeaea;
    color: #222;
    box-shadow: none;
    font: 400 calc(20 * var(--quote-unit))/1.2 'Google Sans Flex', Arial, sans-serif;
}
#mh-quote textarea { height: calc(114 * var(--quote-unit)); resize: vertical; }
#mh-quote .mh-quote-fields > div:not(.mh-form-submit) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(88 * var(--quote-unit));
    column-gap: calc(12 * var(--quote-unit));
    align-items: center;
}
#mh-quote .mh-quote-fields > div:not(.mh-form-submit) > label { display: contents; }
#mh-quote .mh-quote-fields > div:not(.mh-form-submit) .mh-field-visible { grid-column: 1 / -1; }
#mh-quote .wpcf7-captchac {
    width: 100%;
    height: calc(46 * var(--quote-unit));
    max-width: 100%;
    object-fit: contain;
    border-radius: 0;
}
#mh-quote .mh-quote-fields input[type=file] {
    font-size: calc(14 * var(--quote-unit)) !important;
    padding: calc(12 * var(--quote-unit)) calc(10 * var(--quote-unit)) !important;
}
#mh-quote input[type=file]::file-selector-button {
    margin: 0 calc(6 * var(--quote-unit)) 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777;
    font: inherit;
}
#mh-quote .mh-form-submit { grid-column: 1 / -1; margin: 0; }
#mh-quote input[type=submit] {
    display: block;
    width: 100%;
    min-height: 0;
    height: calc(49 * var(--quote-unit));
    padding: 0 calc(16 * var(--quote-unit));
    border: 0;
    border-radius: calc(8 * var(--quote-unit));
    background: linear-gradient(100deg, #c48337, #f4ca8c);
    color: #fff !important;
    font: 500 calc(22 * var(--quote-unit))/1.2 'Google Sans Flex', Arial, sans-serif;
    cursor: pointer;
    box-shadow: none;
}
#mh-quote input[type=submit]:hover { filter: brightness(1.06); }
#mh-quote input:focus-visible, #mh-quote textarea:focus-visible { outline: 2px solid #c48337; outline-offset: 2px; }
#mh-quote .mh-dialog-close:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
#mh-quote .wpcf7-not-valid-tip, #mh-quote .wpcf7-response-output { font: 400 max(12px, calc(18 * var(--quote-unit)))/1.4 'Google Sans Flex', Arial, sans-serif; }
#mh-quote .mh-quote-file { display: block; position: relative; height: calc(46 * var(--quote-unit)); border-radius: calc(7 * var(--quote-unit)); background: #eaeaea; }
#mh-quote .mh-quote-file-caption { display: flex; align-items: center; gap: calc(6 * var(--quote-unit)); height: 100%; padding-inline: calc(16 * var(--quote-unit)); white-space: nowrap; color: #777; font: 400 calc(17 * var(--quote-unit))/1 'Google Sans Flex', Arial, sans-serif; }
#mh-quote .mh-quote-file-caption small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: calc(12 * var(--quote-unit)); }
#mh-quote .mh-quote-file input[type=file] { position: absolute; inset: 0; height: 100%; opacity: 0; cursor: pointer; }
#mh-quote .mh-quote-file:focus-within { outline: 2px solid #c48337; outline-offset: 2px; }
@media (max-width:767px) {
    #mh-quote { --quote-unit: .75px; width: 487.5px; }
    #mh-quote > .wpcf7 { padding: 24px 24px 28px; }
    #mh-quote #mh-quote-title { min-height: 78px; font-size: clamp(20px, 5.5vw, 27px); padding-inline: 34px; }
    #mh-quote .mh-quote-fields { gap: 22px 18px; }
    #mh-quote .mh-field-visible { font-size: 13px; }
    #mh-quote input:not([type=submit]):not([type=hidden]), #mh-quote textarea { font-size: 16px; }
    #mh-quote .mh-quote-fields input[type=file] { font-size: 10px !important; }
    #mh-quote .mh-quote-fields > div:not(.mh-form-submit) { grid-template-columns: minmax(0, 1fr) 46px; gap: 0 6px; }
    #mh-quote .mh-dialog-close { width: 32px; height: 32px; }
}
