/*
 * 1. GLOBAL VARIABLES
 */
:root {
    /* Global Colors */
    --color-primary: #9d2166;
    --color-primary-dark: var(--color-primary); /* identical today; kept as a seam for a darker hover shade */
    --color-primary-tint: color-mix(in srgb, var(--color-primary) 10%, transparent); /* selected-option tint */
    --color-secondary: #155eef;

    --color-error: #CB3837;

    --color-bg: hsl(240 3% 98%);
    --color-surface: white;
    --color-surface-dark: hsl(60 3% 95%);
    
    --color-border: hsl(240 3% 88% / 1);
    --color-border-hover: hsl(240 3% 72.5% / 1);
    --color-border-active: var(--color-primary);

    --color-text: hsl(240 3% 25% / 1);
    --color-text-strong: hsl(240 3% 12.5% / 1);
    --color-text-placeholder: hsl(240 3% 50% / 1);
    --color-text-light: hsl(240 3% 62.5% / 1);
    --color-text-hover: transparent;
    --color-text-active: transparent;

    /* Global Typography */
    --font-content: 'Hanken Grotesk', sans-serif;

    /* Form Layout */
    --form-padding: 1.25rem;
    --form-border: 1px solid var(--color-border);
    --form-border-bottom: none;
    --form-border-radius: 1.5rem;
    --form-box-shadow: 0 6px 16px -2px rgb(0,0,0,0.1875);

    /* Field Wrapper */
    --field-wrapper-gap: 1rem;
    --fields-container-min-height: 20rem; /* stops slide-to-slide height jumps */
    --field-enter-duration: 0.3s;
    --container-height-duration: 0.3s;

    /* Labels */
    --label-gap: 0.375rem;
    --label-font-size: 14.5px;
    --label-font-weight: 500;

    /* Inputs */
    --input-padding: 0.5rem;
    --input-phone-padding-left: 3rem; /* room for country flag/prefix */
    --input-font-size: 1rem;
    --input-border-width: 1px;
    --input-border-style: solid;
    --input-border-radius: 0.5rem;
    --input-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    --input-focus-visible-box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent), var(--input-box-shadow);
    /*
     * Never `all`, and never the `border` shorthand — both include border-WIDTH, which
     * then animates on load: GHL paints its own thicker border first, our value lands a
     * frame later, and the transition plays the difference as a visible thick -> thin
     * shrink. Nothing here needs a size animated, only colour, so list the properties.
     * `border-color` transitions perfectly well on its own, which is the whole point:
     * you keep the colour fade and lose the width animation.
     */
    --input-transition: box-shadow 0.2s ease, border-color 0.2s ease;

    /* Radios */
    --radio-gap: 0.5rem;
    --radio-label-font-size: 14.5px;
    --radio-label-font-weight: 400;
    --radio-border-width: 1px;
    --radio-border-style: solid;
    --radio-border-radius: 0.625rem;
    --radio-box-shadow: none;
    /* The four properties the radio states actually change (hover, :focus-visible,
     * checked). See the note on --input-transition for why not `all`. */
    --radio-transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;

    /* Checkboxes */
    --checkbox-border-width: 1px;
    --checkbox-border-style: solid;
    --checkbox-border-radius: 1rem;

    /* Footer */
    --footer-height: fit-content;
    --footer-padding: calc(var(--form-padding) / 2);
    --footer-bg: white; 
    --footer-border: 1px solid var(--color-border);
    --footer-border-top: var(--footer-border);
    --footer-border-radius: var(--form-border-radius);

    /* Buttons Base */
    --btn-padding: 0.625em 0.875em; 
    --btn-gap: 0.25rem;
    --btn-border-radius: 1em;
    /* Buttons swap background/border/box-shadow on hover; the border stays 1px, so only
     * the colour needs to move. Same reasoning as --input-transition. */
    --btn-transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    --btn-line-height: 1.5;
    --btn-text-transform: capitalize;
    --btn-font-size: 1rem;
    --btn-letter-spacing: normal;
    --btn-font-weight: 500;
    --btn-arrow-next-display: none;
    --btn-arrow-path-fill: white;
    
    /* Button Primary (Next) */
    --btn-border: 1px solid var(--color-primary);
    --btn-box-shadow: none;
    --btn-bg: var(--color-primary);

    --btn-hover-border: 1px solid var(--color-primary-hover, var(--color-primary));
    --btn-hover-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --btn-hover-bg: var(--btn-bg);
    --btn-hover-filter: brightness(105%);

    --btn-active-border: 1px solid var(--color-primary-active, var(--color-primary));
    --btn-active-box-shadow: none;
    --btn-active-bg: var(--btn-bg);
    --btn-active-filter: brightness(97.5%);

    --btn-focus-visible-border: 1px solid var(--color-primary);
    --btn-focus-visible-box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent), var(--btn-hover-box-shadow);
    --btn-focus-visible-bg: var(--btn-bg);

    /* Button Submit */
    --btn-submit-border: var(--btn-border);
    --btn-submit-box-shadow: var(--btn-box-shadow);
    --btn-submit-bg: var(--btn-bg);
    --btn-submit-color: #ffffff;

    --btn-submit-hover-border: var(--btn-hover-border);
    --btn-submit-hover-box-shadow: var(--btn-hover-box-shadow);
    --btn-submit-hover-bg: var(--btn-hover-bg);
    --btn-submit-hover-filter: var(--btn-hover-filter);

    --btn-submit-active-border: var(--btn-active-border);
    --btn-submit-active-box-shadow: var(--btn-active-box-shadow);
    --btn-submit-active-bg: var(--btn-active-bg);
    --btn-submit-active-filter: var(--btn-active-filter);

    --btn-submit-focus-visible-border: var(--btn-focus-visible-border);
    --btn-submit-focus-visible-box-shadow: var(--btn-focus-visible-box-shadow);
    --btn-submit-focus-visible-bg: var(--btn-focus-visible-bg);

    /* Dropdown */
    --dropdown-bg: var(--color-surface);
    --dropdown-color: var(--color-text);
    --dropdown-border-width: var(--input-border-width);
    --dropdown-border-style: var(--input-border-style);
    --dropdown-border-radius: var(--input-border-radius);
    --dropdown-box-shadow: var(--input-box-shadow);
    --dropdown-scrollbar-width: 14px;   /* total gutter thickness — TWEAK for a fatter/thinner thumb */
    --dropdown-scrollbar-gap: 4px;      /* identical gap on all 4 sides — TWEAK for more/less spacing */
    --dropdown-scrollbar-color: var(--color-border-hover); /* visible at the thin default width */
    --dropdown-scrollbar-radius: 999px;
    --dropdown-offset: 4px;
    --dropdown-item-padding: calc(var(--input-padding) * 1.5) var(--input-padding);
    --dropdown-item-font-size: 0.9375rem;

    --dropdown-hover-bg: var(--color-surface-dark);
    --dropdown-hover-color: var(--color-primary-dark);
    --dropdown-scrollbar-hover-color: var(--color-text-light);

    --dropdown-selected-bg: var(--color-primary-tint);

    /* Button Alternative (Back) */
    --btn-alt-arrow-path-fill: currentColor;
    --btn-alt-border: 1px solid var(--color-border);
    --btn-alt-box-shadow: none;
    --btn-alt-bg: transparent;

    --btn-alt-hover-border: 1px solid var(--color-border-hover);
    --btn-alt-hover-box-shadow: var(--btn-hover-box-shadow);
    --btn-alt-hover-bg: var(--color-surface-dark);
    --btn-alt-hover-filter: none;

    --btn-alt-active-border: 1px solid var(--color-border-hover);
    --btn-alt-active-box-shadow: none;
    --btn-alt-active-bg: var(--color-surface-dark);
    --btn-alt-active-filter: var(--btn-active-filter);

    --btn-alt-focus-visible-border: 1px solid var(--color-border-active);
    --btn-alt-focus-visible-box-shadow: var(--btn-focus-visible-box-shadow);
    --btn-alt-focus-visible-bg: transparent;

    /* Submission Dialog */
    --dialog-title-font-size: 1.5rem;
    --dialog-title-line-height: 1.4;
    --dialog-text-font-size: 0.9375rem;
    --dialog-btn-gap: 0.75rem;
    --dialog-body-gap: 0.5rem;
    --dialog-header-padding: var(--form-padding);
    --dialog-footer-padding: var(--footer-padding);
}

/*
 * 2. INDIVIDUAL OVERRIDES
 */
 /* 2 column layout for fields on slides 1 and 5 */
.slide-no-11 .fields-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--field-wrapper-gap);
}

.slide-no-11 .fields-container > *:not(:nth-child(1)):not(:nth-child(2)) {
    grid-column: span 2;
}

@media (max-width: 539px) {
    .slide-no-11 .fields-container {
        display: flex !important;
        flex-direction: column;
    }
}

#_builder-form input[type="checkbox"]:checked {
    background-color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
}

#_builder-form input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-secondary) !important;
}

/*
 * 3. ROOT CONTAINERS & FORM BASE
 */
.hl_form-builder--main {
    position: relative !important;
    height: fit-content !important;
}

.survey-progress-bar-mobile {
    display: none !important;
}

.ghl-form-wrap {
    border-radius: var(--form-border-radius) var(--form-border-radius) var(--footer-border-radius) var(--footer-border-radius) !important;
    box-shadow: var(--form-box-shadow) !important;
    margin-bottom: 0 !important;
}

form#_builder-form {
    position: relative !important;
    padding: var(--form-padding) !important;
    background-color: var(--color-bg) !important;
    border: var(--form-border) !important;
    border-bottom: var(--form-border-bottom) !important;
    border-radius: var(--form-border-radius) var(--form-border-radius) 0 0 !important;
    z-index: 10 !important;
}

form *, 
form *::before, 
form *::after, 
form *::placeholder {
    font-family: var(--font-content) !important;
    line-height: 1.5;
}

.ghl-form-wrap p {
    color: var(--color-text) !important;
}

/*
 * 4. FORM STRUCTURE & LAYOUT
 */
.fields-container {
    display: flex;
    gap: var(--field-wrapper-gap);
    min-height: var(--fields-container-min-height);
}

/* Motion: each slide (question) eases in as a whole (entrance-only).
   GHL unmounts the slide on change, so a pure-CSS exit/fade-out can't fire. */
@media (prefers-reduced-motion: no-preference) {
    .ghl-question {
        animation: field-enter var(--field-enter-duration) cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

@keyframes field-enter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.form-field-wrapper {
    margin: 0 !important;
}

.form-field-wrapper:has(.d-none) {
    display: none !important;
}

.form-builder--item {
    display: flex;
    flex-direction: column;
    gap: var(--label-gap);
    border: none !important;
}

/*
 * 5. LABELS & DESCRIPTIONS
 */
.item-description {
    display: none !important;
}

.label-alignment {
    margin: 0 !important;
    color: var(--color-text-strong) !important;
    text-wrap: pretty;
    order: -1;
}

.label-alignment span {
    color: var(--color-error) !important;
}

.terms-and-conditions label {
    margin: 0px !important;
}

/*
 * 6. STANDARD INPUTS & TEXTAREAS
 */
#_builder-form ::placeholder {
    color: var(--color-text-placeholder) !important;
}

textarea {
    resize: vertical;
    min-height: 5rem;
    max-height: 20rem;
}

#_builder-form .form-builder--item :is(
    input[type=text].form-control,
    textarea,
    input[type=number],
    input[type=email],
    input[type=tel],
    .multiselect .multiselect__tags,
    .date-picker-custom-style
) {
    padding: var(--input-padding) !important;
    background-color: var(--color-surface) !important;
    font-size: var(--input-font-size) !important;
    color: var(--color-text) !important;
    border-width: var(--input-border-width) !important;
    border-style: var(--input-border-style) !important;
    border-radius: var(--input-border-radius) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--input-box-shadow) !important;
    transition: var(--input-transition) !important;
}

#_builder-form .form-builder--item :is(
    input[type=text].form-control,
    textarea,
    input[type=number],
    input[type=email],
    input[type=tel],
    .multiselect .multiselect__tags,
    .date-picker-custom-style
):hover {
    border-color: var(--color-border-hover) !important;
}

#_builder-form .form-builder--item :is(
    input[type=text].form-control,
    textarea,
    input[type=number],
    input[type=email],
    input[type=tel],
    .multiselect .multiselect__tags,
    .date-picker-custom-style
):focus-visible {
    border-color: var(--color-border-active) !important;
    box-shadow: var(--input-focus-visible-box-shadow) !important;
}

/* Phone: leave room for the intl-tel-input flag. Extra classes needed to
   outrank the base input rule's :is() selector, which otherwise forces 8px.
   :has(> .iti__flag-container) > input pins the padding to the input whose iti
   actually renders a flag, so a phone field with no rendered flag never gets
   the empty left gutter. */
#_builder-form .form-builder--item .iti:has(> .iti__flag-container) > input.countryphone[type=tel] {
    padding-left: var(--input-phone-padding-left) !important;
}

.iti {
    font-family: var(--font-content) !important;
}

.email-input svg path {
    color: var(--color-border-hover) !important;
}

/*
 * 7. RADIO BUTTONS
 */
.form-field-wrapper:has(.option-radio):not(:first-child) {
    margin-top: calc(var(--field-wrapper-gap) / 2) !important;
}

.option-radio {
    --input-left: 1.5rem;
    --padding: 0.6875rem;
    padding: 0;
}

.option-radio:not(:last-child) {
    margin-bottom: var(--radio-gap) !important;
}

.standard-radio-container {
    position: relative;
    margin: 0 !important;
}

.standard-radio-container input {
    position: absolute !important;
    left: var(--input-left);
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none !important;
    accent-color: var(--color-primary);
}

.standard-radio-container label {
    margin: 0 !important;
    padding: var(--padding) var(--padding) var(--padding) calc(var(--input-left)*2);
    width: 100%;
    font-size: var(--radio-label-font-size) !important;
    font-weight: var(--radio-label-font-weight) !important;
    background-color: transparent;
    border-width: var(--radio-border-width);
    border-style: var(--radio-border-style);
    border-radius: var(--radio-border-radius);
    border-color: var(--color-border);
    color: var(--color-text);
    transition: var(--radio-transition);
}

.standard-radio-container label:hover {
    background-color: var(--color-surface-dark);
    border-color: var(--color-border-hover);
    cursor: pointer;
}

.standard-radio-container:has(:focus-visible) label {
    background-color: var(--color-surface-dark);
    border-color: var(--color-border-active);
    box-shadow: var(--input-focus-visible-box-shadow);
}

.standard-radio-container:has(input[checked]) label {
    background-color: var(--color-primary-tint);
    border-color: var(--color-border-active);
    color: var(--color-primary-dark) !important;
}

/* Radio "Display Flex" Overrides (Custom Input Option) */
#_builder-form .option-radio.display-flex {
    width: 100% !important;
}

#_builder-form .option-radio.display-flex input[type=radio] {
    position: absolute !important;
    left: var(--input-left);
    top: 50%;
    transform: translate(-50%, calc(-50% + (var(--radio-gap) - var(--label-gap)) / 2));
    pointer-events: none !important;
    accent-color: var(--color-primary);
}

#_builder-form .option-radio.display-flex label {
    display: none;
}

#_builder-form .option-radio.display-flex input[type=text] {
    margin: 0 !important;
    margin-top: calc((var(--label-gap) * -1) + var(--radio-gap)) !important;
    padding: var(--padding) var(--padding) var(--padding) calc(var(--input-left)*2) !important;
    width: 100%;
    background-color: transparent !important;
    border-width: var(--radio-border-width);
    border-style: var(--radio-border-style);
    border-radius: var(--radio-border-radius);
    border-color: var(--color-border);
    font-size: var(--radio-label-font-size) !important;
    font-weight: var(--radio-label-font-weight) !important;
    color: var(--color-text) !important;
    transition: var(--radio-transition);
    box-shadow: var(--radio-box-shadow) !important;
}

#_builder-form .option-radio.display-flex input[type=text]:focus-visible {
    box-shadow: var(--radio-box-shadow) !important;
}

#_builder-form .option-radio.display-flex:has(input:checked) input[type=text] {
    background-color: var(--color-primary-tint) !important;
    border-color: var(--color-border-active) !important;
    color: var(--color-primary-dark) !important;
}

#_builder-form .option-radio.display-flex input[type=text]::placeholder {
    font-size: inherit;
}

/*
 * 8. MULTISELECT
 */
.multiselect__tags:hover {
    cursor: pointer;
}

.multiselect__select {
    display: flex;
    justify-content: center;
    align-items: center;
    width: unset;
    height: 100%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
}

.hl-app .multi_select_form span.multiselect__single {
    font-size: var(--input-font-size) !important;
    color: var(--color-text) !important;
}

.multiselect__select::before {
    display: none;
}

.multiselect__select::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 6px;
    background-color: var(--color-border-hover);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#_builder-form .multiselect--active.multi_select_form[aria-expanded="true"] div.multiselect__tags {
    transition: var(--input-transition), border-radius 0s ease !important;
    border-radius: var(--input-border-radius) var(--input-border-radius) !important;
}

#_builder-form .multiselect--active.multi_select_form[aria-expanded="true"] .multiselect__tags:has(:focus-visible) {
    border-color: var(--color-border-active) !important;
    box-shadow: var(--input-focus-visible-box-shadow) !important;
}

/* Dropdown list wrapper */
.multiselect__content-wrapper {
    margin-top: var(--dropdown-offset) !important;
    margin-bottom: var(--dropdown-offset) !important;
    background-color: var(--dropdown-bg) !important;
    border: var(--dropdown-border-width) var(--dropdown-border-style) var(--color-border) !important;
    border-radius: var(--dropdown-border-radius) !important;
    box-shadow: var(--dropdown-box-shadow) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 10 !important;
}

/* Custom scrollbar */
/* Shared floating scrollbar for both dropdowns — see section 8c */

/* Option items */
.multiselect__content-wrapper .multiselect__content .multiselect__option {
    padding: var(--dropdown-item-padding) !important;
}

.multiselect__content-wrapper .multiselect__content .multiselect__option span {
    display: block;
    font-size: var(--dropdown-item-font-size) !important;
    color: var(--dropdown-color) !important;
}

/* Highlighted/hovered option */
#_builder-form .multiselect__content-wrapper .multiselect__content .multiselect__option:hover,
#_builder-form .multiselect__option:hover,
.multiselect__content-wrapper .multiselect__content .multiselect__option--highlight,
.multiselect__content-wrapper .multiselect__content .multiselect__option--highlight::after {
    background-color: var(--dropdown-hover-bg) !important;
    color: var(--dropdown-hover-color) !important;
}

/* Selected option */
.multiselect__content-wrapper .multiselect__content .multiselect__option--selected,
.multiselect__content-wrapper .multiselect__content .multiselect__option--selected::after {
    background-color: var(--dropdown-selected-bg) !important;
    color: var(--dropdown-hover-color) !important;
    font-weight: var(--label-font-weight) !important;
}

/*
 * 8b. PHONE COUNTRY PICKER (intl-tel-input) — match dropdown styling
 */
/* Lift the whole phone field above later fields so the open dropdown isn't
   painted over by the terms-and-conditions text that follows it in the DOM. */
#_builder-form .form-field-wrapper:has(.iti) {
    position: relative !important;
    z-index: 5 !important;
}

.iti__country-list {
    margin-top: var(--dropdown-offset) !important;
    padding: 0 !important;
    background-color: var(--dropdown-bg) !important;
    border: var(--dropdown-border-width) var(--dropdown-border-style) var(--color-border) !important;
    border-radius: var(--dropdown-border-radius) !important;
    box-shadow: var(--dropdown-box-shadow) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 20 !important; /* above the TnC text below it */
}

.iti__country {
    padding: var(--dropdown-item-padding) !important;
}

.iti__country-name,
.iti__dial-code {
    font-size: var(--dropdown-item-font-size) !important;
    color: var(--dropdown-color) !important;
}

.iti__country.iti__highlight,
.iti__country.iti__active {
    background-color: var(--dropdown-hover-bg) !important;
}

.iti__country.iti__highlight .iti__country-name,
.iti__country.iti__highlight .iti__dial-code,
.iti__country.iti__active .iti__country-name,
.iti__country.iti__active .iti__dial-code {
    color: var(--dropdown-hover-color) !important;
}

/*
 * 8c. SHARED DROPDOWN SCROLLBAR (multiselect + phone country picker)
 * NOTE: deliberately no `scrollbar-width`/`scrollbar-color` on these elements —
 * when Chrome sees the standard props it renders the native scrollbar and ignores
 * every ::-webkit-scrollbar rule (including the track margin that floats the thumb).
 * Firefox, which lacks the pseudo-elements, gets the standard props via @supports.
 */
.multiselect__content-wrapper::-webkit-scrollbar,
.iti__country-list::-webkit-scrollbar {
    width: var(--dropdown-scrollbar-width);
}

.multiselect__content-wrapper::-webkit-scrollbar-track,
.iti__country-list::-webkit-scrollbar-track {
    background: transparent;
    margin: var(--dropdown-scrollbar-gap) 0; /* top/bottom gap */
}

.multiselect__content-wrapper::-webkit-scrollbar-thumb,
.iti__country-list::-webkit-scrollbar-thumb {
    background-color: var(--dropdown-scrollbar-color);
    background-clip: padding-box; /* transparent border becomes the side gap — same value as track margin */
    border: var(--dropdown-scrollbar-gap) solid transparent;
    border-radius: var(--dropdown-scrollbar-radius);
}

.multiselect__content-wrapper::-webkit-scrollbar-thumb:hover,
.iti__country-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--dropdown-scrollbar-hover-color);
}

/* Firefox / non-webkit fallback (no floating inset available there) */
@supports not selector(::-webkit-scrollbar) {
    .multiselect__content-wrapper,
    .iti__country-list {
        scrollbar-width: thin;
        scrollbar-color: var(--dropdown-scrollbar-color) transparent;
    }
}

/*
 * 9. FOOTNOTES & ERRORS
 */
.short-label {
    margin: 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0.025em;
    text-wrap: pretty;
    color: var(--color-text-placeholder) !important;
    transform: translateY( calc( var(--label-gap) * -1 ) );
    order: -1;
}

.error {
    margin: 0 !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.error::after {
    content: ".";
}

/*
 * 10. FOOTER & NAVIGATION BUTTONS
 */
.ghl-footer {
    padding: var(--footer-padding) !important;
    height: var(--footer-height) !important;
    background-color: var(--footer-bg) !important;
    border: var(--footer-border) !important;
    border-top: var(--footer-border-top) !important;
    border-radius: 0 0 var(--footer-border-radius) var(--footer-border-radius) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    font-family: var(--font-content) !important;
}

.ghl-footer-buttons {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: fit-content !important;
    max-height: 100% !important;
    overflow: hidden !important;
    background-color: transparent !important;
}

.ghl-mobile-step-indicator {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ghl-mobile-step-text {
    font-size: 0.875rem !important;
    color: var(--color-text) !important;
    user-select: none;
}

/* Base Button Properties */
.ghl-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--btn-gap) !important;
    padding: var(--btn-padding) !important;
    width: fit-content !important;
    height: fit-content !important;
    min-width: unset !important;
    border-radius: var(--btn-border-radius) !important;
    transition: var(--btn-transition) !important;
    
    font-size: var(--btn-font-size) !important;
    line-height: var(--btn-line-height) !important;
    text-transform: var(--btn-text-transform) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    font-weight: var(--btn-font-weight) !important;
    
    cursor: pointer !important;
    outline: none !important;
}

.ghl-btn-placeholder {
    height: unset !important;
    padding: unset !important;
}

/* Button Icons / Arrows */
.ghl-footer-next-arrow, 
.ghl-footer-back-arrow {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
}

.ghl-footer-back-arrow {
    fill: var(--btn-alt-arrow-path-fill) !important;
    stroke: var(--btn-alt-arrow-path-fill) !important;
    color: var(--btn-alt-arrow-path-fill) !important;
}

.ghl-footer-next-arrow {
    display: var(--btn-arrow-next-display) !important;
    fill: var(--btn-arrow-path-fill) !important;
    stroke: var(--btn-arrow-path-fill) !important;
    color: var(--btn-arrow-path-fill) !important;
}

/* Alternative "Back" Button States */
.ghl-footer-back {
    background-color: var(--btn-alt-bg) !important;
    border: var(--btn-alt-border) !important;
    box-shadow: var(--btn-alt-box-shadow) !important;
    color: var(--color-text) !important;
}

.ghl-footer-back:hover {
    background-color: var(--btn-alt-hover-bg) !important;
    border: var(--btn-alt-hover-border) !important;
    box-shadow: var(--btn-alt-hover-box-shadow) !important;
    filter: var(--btn-alt-hover-filter) !important;
}

.ghl-footer-back:active {
    background-color: var(--btn-alt-active-bg) !important;
    border: var(--btn-alt-active-border) !important;
    box-shadow: var(--btn-alt-active-box-shadow) !important;
    filter: var(--btn-alt-active-filter) !important;
}

.ghl-footer-back:focus-visible {
    background-color: var(--btn-alt-focus-visible-bg) !important;
    border: var(--btn-alt-focus-visible-border) !important;
    box-shadow: var(--btn-alt-focus-visible-box-shadow) !important;
}

/* Primary "Next" Button States */
.ghl-footer-next {
    background-color: var(--btn-bg) !important;
    border: var(--btn-border) !important;
    box-shadow: var(--btn-box-shadow) !important;
    color: #ffffff !important;
}

.ghl-footer-next:hover {
    background-color: var(--btn-hover-bg) !important;
    border: var(--btn-hover-border) !important;
    box-shadow: var(--btn-hover-box-shadow) !important;
    filter: var(--btn-hover-filter) !important;
}

.ghl-footer-next:active {
    background-color: var(--btn-active-bg) !important;
    border: var(--btn-active-border) !important;
    box-shadow: var(--btn-active-box-shadow) !important;
    filter: var(--btn-active-filter) !important;
}

.ghl-footer-next:focus-visible {
    background-color: var(--btn-focus-visible-bg) !important;
    border: var(--btn-focus-visible-border) !important;
    box-shadow: var(--btn-focus-visible-box-shadow) !important;
}

.ghl-footer-buttons:has(.ghl-mobile-step-indicator) .ghl-footer-next::before {
    content: "Siguiente";
}

/* Submit Button States */
.ghl-submit-btn {
    background-color: var(--btn-submit-bg) !important;
    border: var(--btn-submit-border) !important;
    box-shadow: var(--btn-submit-box-shadow) !important;
    color: var(--btn-submit-color) !important;
}

.ghl-submit-btn:hover {
    background-color: var(--btn-submit-hover-bg) !important;
    border: var(--btn-submit-hover-border) !important;
    box-shadow: var(--btn-submit-hover-box-shadow) !important;
    filter: var(--btn-submit-hover-filter) !important;
}

.ghl-submit-btn:active {
    background-color: var(--btn-submit-active-bg) !important;
    border: var(--btn-submit-active-border) !important;
    box-shadow: var(--btn-submit-active-box-shadow) !important;
    filter: var(--btn-submit-active-filter) !important;
}

.ghl-submit-btn:focus-visible {
    background-color: var(--btn-submit-focus-visible-bg) !important;
    border: var(--btn-submit-focus-visible-border) !important;
    box-shadow: var(--btn-submit-focus-visible-box-shadow) !important;
}

.ghl-footer-wrap.false {
    display: none;
}

/*
 * 11. SUBMISSION DIALOG POPUP
 */
@media (prefers-reduced-motion: no-preference) {
    .submission-dialog-overlay {
        animation: dialog-overlay-in var(--container-height-duration) ease both;
    }

    .submission-dialog-popup {
        animation: field-enter var(--field-enter-duration) ease both;
    }
}

@keyframes dialog-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.submission-dialog-popup {
    padding: 0 !important;
    background-color: var(--color-surface) !important;
    border: var(--form-border) !important;
    border-radius: var(--form-border-radius) !important;
    box-shadow: var(--form-box-shadow) !important;
    overflow: hidden !important; /* clip rows to the rounded corners */
}

.submission-dialog-popup,
.submission-dialog-popup * {
    font-family: var(--font-content) !important;
}

/* Top: icon + title + text on white */
.submission-dialog-popup .submission-dialog-header {
    padding: var(--dialog-header-padding) !important;
    border-bottom: none !important;
}

.submission-dialog-popup .submission-dialog-body {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--dialog-body-gap) !important;
}

.submission-dialog-popup .header,
.submission-dialog-popup .header div {
    font-size: var(--dialog-title-font-size) !important;
    line-height: var(--dialog-title-line-height) !important;
    font-weight: var(--label-font-weight) !important;
    color: var(--color-text-strong) !important;
}

/* Center the icon against the title line (it's a sibling of the whole text block) */
.submission-dialog-popup .submission-dialog-header {
    align-items: flex-start !important;
}

.submission-dialog-popup .icon-container {
    display: flex !important;
    align-items: center !important;
    min-height: calc(var(--dialog-title-font-size) * var(--dialog-title-line-height)) !important;
}

.submission-dialog-popup p {
    font-size: var(--dialog-text-font-size) !important;
    color: var(--color-text) !important;
}

/* Bottom row: mirrors the form footer — gray with a top border */
.submission-dialog-popup .button-section {
    justify-content: space-between !important;
    padding: var(--dialog-footer-padding) !important;
    gap: var(--dialog-btn-gap) !important;
    background-color: var(--color-bg) !important;
    border: none !important;
    border-top: var(--footer-border) !important;
}

/* Shared button base (mirrors .ghl-btn) */
.submission-dialog-popup .start-over-button,
.submission-dialog-popup .continue-button {
    padding: var(--btn-padding) !important;
    border-radius: var(--btn-border-radius) !important;
    transition: var(--btn-transition) !important;
    font-size: var(--btn-font-size) !important;
    line-height: var(--btn-line-height) !important;
    text-transform: var(--btn-text-transform) !important;
    font-weight: var(--btn-font-weight) !important;
    cursor: pointer !important;
    outline: none !important;
}

/* Continue → primary (Next) */
.submission-dialog-popup .continue-button {
    background-color: var(--btn-bg) !important;
    border: var(--btn-border) !important;
    box-shadow: var(--btn-box-shadow) !important;
    color: #ffffff !important;
}

.submission-dialog-popup .continue-button:hover {
    background-color: var(--btn-hover-bg) !important;
    border: var(--btn-hover-border) !important;
    box-shadow: var(--btn-hover-box-shadow) !important;
    filter: var(--btn-hover-filter) !important;
}

.submission-dialog-popup .continue-button:active {
    background-color: var(--btn-active-bg) !important;
    border: var(--btn-active-border) !important;
    filter: var(--btn-active-filter) !important;
}

.submission-dialog-popup .continue-button:focus-visible {
    border: var(--btn-focus-visible-border) !important;
    box-shadow: var(--btn-focus-visible-box-shadow) !important;
}

/* Start over → alternative (Back) */
.submission-dialog-popup .start-over-button {
    background-color: var(--btn-alt-bg) !important;
    border: var(--btn-alt-border) !important;
    box-shadow: var(--btn-alt-box-shadow) !important;
    color: var(--color-text) !important;
}

.submission-dialog-popup .start-over-button:hover {
    background-color: var(--btn-alt-hover-bg) !important;
    border: var(--btn-alt-hover-border) !important;
    box-shadow: var(--btn-alt-hover-box-shadow) !important;
}

.submission-dialog-popup .start-over-button:active {
    background-color: var(--btn-alt-active-bg) !important;
    border: var(--btn-alt-active-border) !important;
    filter: var(--btn-active-filter) !important;
}

.submission-dialog-popup .start-over-button:focus-visible {
    border: var(--btn-alt-focus-visible-border) !important;
    box-shadow: var(--btn-alt-focus-visible-box-shadow) !important;
}

/*
 * 12. ANTI-FOUC REVEAL
 * Pairs with the hide rule in the form's Custom CSS box:
 *   > *:not(#builderApp *) { visibility: hidden; opacity: 0; }
 * (GHL's sanitizer prefixes it into `#_builder-form > *:not(...)`.) The box
 * CSS ships inside the form config — no network — so children are hidden from
 * the very first paint; this file un-hides them the instant it loads, fading
 * in from the box's opacity: 0. The :not(#builderApp *) tail keeps the builder
 * preview unaffected — its document wraps the form in #builderApp, and the box
 * hide must never depend on this file loading (or being the right cached
 * version) inside the builder.
 * Only direct children are targeted: visibility inherits down, so components
 * that manage their own visibility deeper in the tree are untouched.
 */
#_builder-form > *,
#_builder-form + * {
    visibility: visible !important;
    opacity: 1 !important;
    transition: visibility 0.3s ease, opacity 0.3s ease !important;
    transition-delay: 0.1s !important;
}

@media (prefers-reduced-motion: reduce) {
    #_builder-form > * {
        transition: none !important;
    }
}

/*
 * 12b. PRE-HYDRATION SLIDE GATING — kills the "form is huge for a moment" jump.
 *
 * All 9 slides ship in the SSR markup, and the rule that shows only the current one
 * lives in GHL's OWN stylesheet (`useFormsEnv.*.css`,
 * `:where([data-ghl-form-element]) .ghl-question-set .ghl-question { display: none }`).
 * Measured on a live survey: that file lands at ~363ms while first paint is ~356ms, so
 * for one frame every slide is laid out at once — the form section goes 874x792 -> 889x438
 * (one layout shift, value 0.47, confirmed via PerformanceObserver 'layout-shift').
 *
 * The §12 visibility/opacity hide cannot fix this: neither property affects LAYOUT, so the
 * tall box still reserves the space and still collapses. Only `display` does. This rule
 * reproduces GHL's gating, and the SSR markup already tags slide 1 `ghl-page-current`, so
 * the first painted frame gets the settled height.
 *
 * Verified a no-op once hydrated (section height 407px with and without it), so it cannot
 * fight GHL's own gating — it only fills the gap before that stylesheet applies. Keep the
 * same two lines in the form's Custom CSS box: this file is not guaranteed to be
 * render-blocking, and at first paint is exactly where the rule has to exist.
 */
#_builder-form .ghl-question-set .ghl-question {
    display: none;
}

#_builder-form .ghl-question-set .ghl-question.ghl-page-current {
    display: block;
}