/* Expandable's established Popup Maker appearance, scoped to Mirador Modals. */
.mie-modal {
    --mirador-modal-font: "Open Sans", sans-serif;
    --mirador-modal-ink: var(--black, #13262d);
    --mirador-modal-accent: var(--gold, #e1a525);
    --mirador-modal-field-background: #e8ebed;
    --mirador-modal-hover-background: #e8ebed;
    --mirador-modal-button-radius: 0px;
    --mirador-modal-focus: var(--blue-1, #325c75);
    --mirador-modal-scrollbar: var(--blue-1, #325c75);
    width: calc(100% - 40px);
    max-width: 800px;
    max-height: calc(100dvh - 40px);
    padding: 50px 25px 25px;
    border: 0;
    border-radius: 50px;
    background: #fff;
    color: var(--black, #13262d);
    box-shadow: 0 0 30px rgb(0 0 0 / 35%);
    font: 400 16px/1.5 "Open Sans", sans-serif;
}
.mie-modal::backdrop { background: rgb(19 38 45 / 70%); }
.mie-modal .mie-modal-scroll {
    max-height: calc(100dvh - 115px);
    padding: 0 25px 25px;
    scrollbar-gutter: auto;
}
.mie-modal h2 {
    margin: 0 0 15px;
    font: 800 30px/1.5 "Open Sans", sans-serif;
    text-transform: none;
    letter-spacing: normal;
}
.mie-modal .mie-modal-close {
    top: 21px;
    right: 21px;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    text-indent: -9999px;
    overflow: hidden;
}
.mie-modal .mie-modal-close::before {
    content: "";
    position: absolute;
    inset: 10px;
    background: url('../images/icon-close.svg') no-repeat center / contain;
    transition: transform 300ms ease-out;
    pointer-events: none;
}
.mie-modal .mie-modal-close:hover { background: transparent; }
.mie-modal .mie-modal-close:is(:hover, :focus-visible)::before { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .mie-modal .mie-modal-close::before { transition: none; }
}
.mie-modal .mie-modal-intro { margin-bottom: 20px; }
.mie-modal .mie-modal-intro p { margin-bottom: 15px; }
.mie-modal .mie-modal-form {
    --hsf-field-input__border-radius: 2px;
    --hsf-field-input__padding: 10px;
    --hsf-field-textarea__border-radius: 2px;
    --hsf-button__color: var(--black, #13262d);
    --hsf-button__font-family: "Chaney", sans-serif;
    --hsf-button__font-weight: 400;
    --hsf-button__padding: 12px 19px;
    --hsf-row__vertical-spacing: 20px;
}
.mie-modal .mie-modal-hubspot { gap: 20px; }
.mie-modal .mie-modal-hubspot .hs-form-field { margin-bottom: 0; }
.mie-modal .mie-modal-hubspot fieldset.form-columns-2 .hs-form-field {
    flex: 1;
    min-width: 0;
}
/* Lazy-loaded forms cannot rely on the old DOMContentLoaded floating-label
   initializer. Keep labels visible above fields, including autofilled inputs. */
.mie-modal .mie-modal-hubspot .hs-form-field > label,
.mie-modal .mie-modal-hubspot .hs-form-field.active > label {
    position: static;
    display: block;
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black, #13262d);
    opacity: 1;
}
.mie-modal .mie-modal-hubspot .hs-fieldtype-select { margin-top: 0; }
.mie-modal .mie-modal-hubspot :is(input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
    border-radius: 2px;
    padding: 10px;
    font: 400 16px/1.5 "Open Sans", sans-serif;
}
.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-form-required) { color: #b42318; }
.mie-modal .mie-modal-hubspot :is(input[type=submit], button[type=submit]),
.mie-modal .mie-modal-retry {
    background: var(--gold, #e1a525) url('../images/icon-arrow-small-right.svg') no-repeat calc(100% - 15px) center / 27px auto;
    color: var(--black, #13262d);
    border: 0;
    border-radius: 0;
    padding: 12px 55px 12px 19px;
    max-width: 100%;
    white-space: normal;
    font: 400 16px/1.5 "Chaney", sans-serif;
    letter-spacing: 3px;
    cursor: pointer;
}
.mie-modal .mie-modal-hubspot :is(input[type=submit], button[type=submit]):hover,
.mie-modal .mie-modal-retry:hover { background-color: var(--green, #37bb98); }
/* Override the old global form stylesheet's outline: 0. */
.mie-modal :is(input, select, textarea, button, a):focus-visible {
    outline: 3px solid var(--blue-1, #325c75);
    outline-offset: 3px;
}
@media (max-width: 768px) {
    .mie-modal { padding: 50px 10px 25px; }
    .mie-modal .mie-modal-scroll { max-height: calc(100dvh - 115px); padding-inline: 15px; }
    .mie-modal .mie-modal-close { top: 13px; right: 13px; }
}
@media (max-width: 480px) {
    .mie-modal .mie-modal-hubspot fieldset.form-columns-2 { flex-direction: column; }
    .mie-modal .mie-modal-hubspot fieldset.form-columns-2 .hs-form-field { width: 100%; }
}
