/* Mirador's original contact-popup layout; isolated from other network themes. */
.mie-modal {
    --mirador-modal-font: "Lexend", sans-serif;
    --mirador-modal-ink: #000;
    --mirador-modal-accent: var(--blue-dark, #01003e);
    --mirador-modal-field-background: #e8ebed;
    --mirador-modal-focus: var(--blue-medium, #3c83f7);
    --mirador-modal-scrollbar: #c5c9ce;
    width: min(900px, calc(100% - 40px));
    max-height: calc(100dvh - 64px);
    margin: 44px auto 20px;
    padding: 0;
    border: 0;
    border-radius: 50px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    color: #000;
    font: 400 16px/1.5 "Lexend", sans-serif;
}
.mie-modal::backdrop { background: rgba(1, 0, 62, .78); }
.mie-modal .mie-modal-scroll {
    box-sizing: border-box;
    max-height: calc(100dvh - 64px);
    padding: 72px 80px 80px;
    border-radius: inherit;
    background: #fff;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: #c5c9ce #f5f5f6;
}
.mie-modal .mie-modal-scroll::-webkit-scrollbar { width: 8px; }
.mie-modal .mie-modal-scroll::-webkit-scrollbar-track { background: #f5f5f6; border-radius: 50px; margin-block: 45px; }
.mie-modal .mie-modal-scroll::-webkit-scrollbar-thumb { background: #c5c9ce; border-radius: 50px; }
.mie-modal h2 {
    margin: 0 0 20px;
    text-align: center;
    color: #000;
    font: 600 40px/1.2 "Lexend", sans-serif;
    letter-spacing: normal;
}
.mie-modal h2::after {
    content: "";
    display: block;
    width: 140px;
    height: 73px;
    margin: 10px auto 0;
    background: url('/wp-content/uploads/sites/2/2025/08/lets-chat.png') no-repeat center / contain;
}
.mie-modal .mie-modal-intro {
    margin: 0 0 48px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}
.mie-modal .mie-modal-intro p { margin: 0; }
.mie-modal .mie-modal-close {
    top: -44px;
    right: -10px;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: 300 52px/1 Arial, sans-serif;
}
.mie-modal .mie-modal-close:hover { background: transparent; color: var(--blue-light, #9ad0fc); }
.mie-modal .mie-modal-form {
    --hsf-global__color: #000;
    --hsf-field-input__border-radius: 100px;
    --hsf-field-input__padding: 10px 13px;
    --hsf-field-textarea__border-radius: 25px;
    --hsf-field-textarea__padding: 10px 13px;
    --hsf-row__vertical-spacing: 25px;
    --hsf-button__padding: 15px 25px;
}
/* The old theme's form gap and the shared field margins previously doubled. */
.mie-modal .mie-modal-hubspot { gap: 25px; color: #000; }
.mie-modal .mie-modal-hubspot .hs-form-field { margin: 0; }
.mie-modal .mie-modal-hubspot fieldset.form-columns-2 .hs-form-field { flex: 1; min-width: 0; }
.mie-modal .mie-modal-hubspot label { margin: 0; color: #000; font-size: 16px; line-height: 1.5; }
.mie-modal .mie-modal-hubspot :is(input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {
    min-height: 40px;
    padding: 10px 13px;
    border: 0;
    border-radius: 100px;
    background: #e8ebed;
    color: #000;
    font: 400 16px/1.25 "Lexend", sans-serif;
}
.mie-modal .mie-modal-hubspot textarea { min-height: 280px; border-radius: 25px; }
.mie-modal .mie-modal-hubspot .hs-fieldtype-text > label {
    position: absolute;
    top: 8px;
    left: 13px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    opacity: 1;
    pointer-events: none;
}
.mie-modal .mie-modal-hubspot .hs-fieldtype-text:focus-within > label,
.mie-modal .mie-modal-hubspot .hs-fieldtype-text.has-value > label,
.mie-modal .mie-modal-hubspot .hs-fieldtype-text:has(input:autofill) > label {
    top: -20px;
    left: 0;
    font-size: 14px;
    font-weight: 600;
    opacity: .7;
}
.mie-modal .mie-modal-hubspot .hs-fieldtype-text input::placeholder { color: transparent; }
.mie-modal .mie-modal-hubspot .hs-fieldtype-select { margin-top: 0; }
.mie-modal .mie-modal-hubspot .hs-fieldtype-select > label { position: static; font-size: 16px; opacity: 1; }
.mie-modal .mie-modal-hubspot :is(.hs-richtext, .hs-error-msgs, .hs-error-msgs label, .hs-form-booleancheckbox label span, small) { font-size: 14px; line-height: 1.5; }
.mie-modal .mie-modal-hubspot :is(.hs-error-msgs, .hs-error-msgs label, .hs-form-required) { color: #b42318; }
.mie-modal .mie-modal-hubspot :is(input[type=submit],button[type=submit]),
.mie-modal .mie-modal-retry {
    padding: 15px 25px;
    border: 0;
    border-radius: 100px;
    background: var(--blue-dark, #01003e);
    color: #fff;
    font: 600 16px/1.5 "Lexend", sans-serif;
}
.mie-modal .mie-modal-hubspot :is(input[type=submit],button[type=submit]):hover,
.mie-modal .mie-modal-retry:hover { background: var(--blue-medium, #3c83f7); }
.mie-modal :is(input,select,textarea,button,a):focus-visible { outline: 3px solid var(--blue-medium, #3c83f7); outline-offset: 3px; }
@media (max-width: 768px) {
    .mie-modal { border-radius: 25px; }
    .mie-modal .mie-modal-scroll { padding: 30px; }
    .mie-modal h2 { font-size: 32px; }
    .mie-modal .mie-modal-intro { margin-bottom: 32px; }
}
@media (max-width: 480px) {
    .mie-modal .mie-modal-scroll { padding: 30px 20px; }
    .mie-modal .mie-modal-hubspot fieldset.form-columns-2 { flex-direction: column; gap: 25px; }
    .mie-modal .mie-modal-hubspot fieldset.form-columns-2 .hs-form-field { width: 100%; }
}