/**
 * Property Enquiry (3-step) and Schedule Viewing modals. Pulled from the
 * Figma "02 - Public Website" file's "Property Enquiry Experience" frames
 * (Desktop Modal, Mobile Fullscreen Form, Success State - node 29:1869 for
 * the enquiry flow, node 29:1953 for Schedule Viewing).
 *
 * Both flows share the same modal chrome (dark scrim, white card, header
 * badge/title, close button, field styling, buttons), so they're built
 * from one shared set of classes here (prefixed .eq-) rather than two
 * near-duplicate stylesheets - only the flow-specific pieces (option
 * chips + step indicator for enquiry; calendar/time pills for schedule)
 * get their own classes.
 *
 * ONE responsive markup, not two: Figma illustrates "Desktop Modal" and
 * "Mobile Fullscreen Form" as separate static frames, but (matching every
 * other page in this build) this is implemented as a single DOM tree that
 * reflows at the breakpoint below, not duplicated markup.
 *
 * Known, disclosed gap: the confirmed Mobile Schedule Card frame omits the
 * Viewing Type radio group entirely (only Date/Time/Name are shown) - since
 * that field is required data (leads.viewing_type) regardless of device,
 * it's kept visible at every width using the exact radio style confirmed
 * on the Desktop Schedule Modal, rather than silently dropping a required
 * field on mobile. Flagged here and in the build report, not silently
 * decided.
 */

/* ---------------------------------------------------------------------
 * Shared modal chrome: scrim, card, header, close button
 * --------------------------------------------------------------------- */

.eq-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow-y: auto;
}

.eq-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.eq-card {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    max-width: 560px;
    padding: 40px;
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0px 16px 20px 0px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: auto;
}

.eq-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.eq-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.eq-badge {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
}

.eq-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    color: var(--color-primary-green);
    margin: 0;
    overflow-wrap: break-word;
}

.eq-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 16px;
    background-color: var(--color-ivory);
    color: var(--color-charcoal);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

.eq-close:hover {
    background-color: var(--color-stone);
}

.eq-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Both .eq-form and .eq-success/.sv-confirm below set their own display,
   which (equal specificity to the browser's [hidden] { display: none })
   would otherwise win the cascade by appearing later and keep the element
   visibly rendered even while its `hidden` IDL property is true. The
   [hidden] variant here is more specific, so it correctly wins instead. */
.eq-form[hidden] {
    display: none;
}

.eq-step {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.eq-step.is-active {
    display: flex;
}

/* ---------------------------------------------------------------------
 * Step indicator + progress dots
 * --------------------------------------------------------------------- */

.eq-step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eq-step-indicator__label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-champagne-gold);
}

.eq-progress {
    display: flex;
    align-items: center;
    gap: 6px;
}

.eq-progress__dot {
    width: 8px;
    height: 6px;
    border-radius: 3px;
    background-color: var(--color-stone);
    transition: width 0.2s ease, background-color 0.2s ease;
}

.eq-progress__dot.is-active {
    width: 24px;
    background-color: var(--color-primary-green);
}

.eq-step-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-near-black);
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Field label - shared by chip groups, selects, text inputs, radio groups
 * --------------------------------------------------------------------- */

.eq-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Same reasoning as .eq-form[hidden]/.eq-success[hidden] below: .eq-field's
   own display:flex is an author rule, so it beats the browser's built-in
   [hidden] { display: none } regardless of selector specificity - an
   author stylesheet always outranks the user-agent stylesheet. Needed
   once a .eq-field itself (not just .eq-form/.eq-success as a whole
   step) started being toggled via the hidden attribute - the Request a
   Property modal's "Other" location free-text field - which otherwise
   stayed visibly rendered even while hidden was set. */
.eq-field[hidden] {
    display: none;
}

.eq-field__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-charcoal);
}

/* ---------------------------------------------------------------------
 * Option chips (single-select pill groups) - Interest Type, Property
 * Interest, Preferred Viewing Type on the enquiry flow.
 * --------------------------------------------------------------------- */

.eq-chip-group {
    display: flex;
    flex-wrap: wrap;
    /* Row gap was previously 0px - harmless for the 3-4 item groups this
       was originally built for (interest type, property interest, viewing
       type all fit on one row at modal width), but a group with enough
       chips to actually wrap - the Request a Property modal's Preferred
       Location(s) field, now 8 chips (7 locations + Other) - wrapped rows
       with no vertical gap and looked cramped/touching. 8px on both axes
       reads correctly whether a group wraps or not. */
    gap: 8px;
}

.eq-chip {
    padding: 10px 16px;
    background-color: var(--color-warm-white);
    border: 1px solid var(--color-stone);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.eq-chip.is-selected {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
    color: var(--color-white);
}

/* ---------------------------------------------------------------------
 * Text / date / select / textarea inputs - the modal's own Input-Container
 * spec (48px, radius 6px) is distinct from forms.css's general-purpose
 * .field-control (44px, radius 4px), so this modal uses its own field
 * classes rather than forcing a mismatch onto the shared library.
 * --------------------------------------------------------------------- */

.eq-input,
.eq-select,
.eq-textarea {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--color-warm-white);
    border: 1px solid var(--color-stone);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-near-black);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.eq-input::placeholder,
.eq-textarea::placeholder {
    color: #717171;
}

.eq-input:focus,
.eq-select:focus,
.eq-textarea:focus {
    outline: none;
    border-color: var(--color-primary-green);
}

.eq-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 36px;
    cursor: pointer;
}

.eq-select.is-placeholder {
    color: #717171;
}

.eq-textarea {
    height: 96px;
    padding: 14px 16px;
    resize: vertical;
    font-family: var(--font-body);
}

.eq-date-time-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.eq-date-time-row .eq-field {
    flex: 1 0 0;
    min-width: 0;
}

/* Phone field - fixed +234 prefix ahead of a plain, borderless inner input. */
.eq-phone {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eq-phone__prefix {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-charcoal);
}

.eq-phone__input {
    flex: 1 0 0;
    min-width: 0;
    height: 100%;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-near-black);
}

.eq-phone__input::placeholder {
    color: #717171;
}

.eq-phone__input:focus {
    outline: none;
}

/* ---------------------------------------------------------------------
 * Radio group - Preferred Contact Method (enquiry), Viewing Type
 * (schedule). Custom-drawn to match Figma's solid-fill dot exactly
 * (confirmed via its actual SVG assets: a plain stroked circle unselected,
 * a fully solid-filled circle selected - not forms.css's thick-ring style).
 * --------------------------------------------------------------------- */

.eq-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.eq-radio {
    /* Establishes the containing block for .eq-radio__input below - without
       this, an absolutely-positioned element with no top/left falls back to
       the nearest ancestor that DOES have a position set, which used to be
       .eq-overlay itself (position: fixed). That made the browser's native
       "scroll the focused control into view" behavior scroll the entire
       modal overlay by whatever distance the radio's static-position
       calculation happened to produce, instead of correctly recognizing the
       small, already-visible radio dot needed no scrolling at all - the
       "modal jumps when I pick a contact method" bug (reproduced and
       confirmed via a headless-browser scrollTop diff before this fix). */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.eq-radio__input {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.eq-radio__dot {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--color-stone);
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.eq-radio__label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-charcoal);
}

.eq-radio__input:checked ~ .eq-radio__dot {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
}

.eq-radio__input:focus-visible ~ .eq-radio__dot {
    outline: 2px solid var(--color-primary-green);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Modal action buttons
 * --------------------------------------------------------------------- */

.eq-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.eq-button-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.eq-btn {
    flex: 1 0 0;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.eq-btn--full {
    width: 100%;
    padding: 14px 32px;
}

.eq-btn--back {
    background-color: transparent;
    border: 1px solid var(--color-stone);
    color: var(--color-charcoal);
}

.eq-btn--back:hover {
    background-color: var(--color-ivory);
}

.eq-btn--primary {
    background-color: var(--color-primary-green);
    border: 1px solid var(--color-primary-green);
    color: var(--color-white);
}

.eq-btn--primary:hover {
    background-color: var(--color-dark-green);
}

.eq-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.eq-disclaimer {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: #717171;
    text-align: center;
    margin: 0;
}

.eq-form-error {
    display: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-error);
    text-align: center;
    margin: 0;
}

.eq-form-error.is-visible {
    display: block;
}

.eq-field-error {
    display: none;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--color-error);
    margin-top: -4px;
}

.eq-field.is-error .eq-input,
.eq-field.is-error .eq-select,
.eq-field.is-error .eq-textarea,
.eq-field.is-error .eq-phone {
    border-color: var(--color-error);
}

.eq-field.is-error .eq-field-error {
    display: block;
}

/* ---------------------------------------------------------------------
 * Enquiry Success State - centered icon/text/CTA stack
 * --------------------------------------------------------------------- */

.eq-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 0;
    text-align: center;
}

.eq-success[hidden] {
    display: none;
}

.eq-success__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background-color: var(--color-primary-green);
    border: 2px solid var(--color-champagne-gold);
}

.eq-success__icon {
    width: 24px;
    height: 24px;
    background-color: var(--color-white);
    -webkit-mask-image: url('/assets/images/icons/icon-enquiry-success.svg');
    mask-image: url('/assets/images/icons/icon-enquiry-success.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.eq-success__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    color: var(--color-primary-green);
    margin: 0;
}

.eq-success__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-charcoal);
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Schedule Viewing - Quick Calendar (day pills) + Time Slots (range pills)
 * --------------------------------------------------------------------- */

.sv-section-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-charcoal);
    margin: 0 0 12px;
}

.sv-days-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.sv-day-pill {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    background-color: var(--color-ivory);
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-charcoal);
    cursor: pointer;
}

.sv-day-pill.is-selected {
    background-color: var(--color-primary-green);
    color: var(--color-white);
}

.sv-time-pills-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.sv-time-pill {
    flex: 1 0 0;
    padding: 10px 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-charcoal);
    cursor: pointer;
    text-align: center;
}

.sv-time-pill.is-selected {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
    color: var(--color-white);
    font-weight: 600;
}

.sv-advisor-note {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    color: var(--color-champagne-gold);
    text-align: center;
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Schedule Confirmation State - icon + meta side-by-side
 * --------------------------------------------------------------------- */

.sv-confirm {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sv-confirm[hidden] {
    display: none;
}

.sv-confirm__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background-color: var(--color-primary-green);
    border: 2px solid var(--color-champagne-gold);
}

.sv-confirm__icon {
    width: 20px;
    height: 20px;
    background-color: var(--color-white);
    -webkit-mask-image: url('/assets/images/icons/icon-schedule-success.svg');
    mask-image: url('/assets/images/icons/icon-schedule-success.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.sv-confirm__meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 0 0;
    min-width: 0;
    padding-top: 4px;
}

.sv-confirm__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-primary-green);
    margin: 0;
}

.sv-confirm__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background-color: var(--color-ivory);
    border-radius: 6px;
}

.sv-confirm__details p {
    margin: 0;
}

.sv-confirm__date {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-charcoal);
}

.sv-confirm__time,
.sv-confirm__location {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: #717171;
}

.sv-confirm__calendar-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-champagne-gold);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Mobile fullscreen takeover - matches Figma's confirmed 390px mobile
 * frame (no scrim, no rounded card, no drop shadow - the form fills the
 * whole viewport like a native full-screen sheet).
 * --------------------------------------------------------------------- */

@media (max-width: 640px) {
    .eq-overlay {
        padding: 0;
        /* .eq-card below becomes its own full-screen scrollable sheet at
           this width - if .eq-overlay (its scrollable parent) also keeps
           its own overflow-y: auto, a form tall enough to scroll produces
           two independent, simultaneously-scrollable boxes (confirmed via
           a headless-browser check: both .eq-overlay and .eq-card reported
           scrollHeight > clientHeight at once) - the "2 scrollbars" bug.
           Only .eq-card should scroll at this breakpoint. */
        overflow-y: hidden;
    }

    .eq-card {
        max-width: none;
        height: 100%;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        padding: 24px;
        justify-content: flex-start;
        margin: 0;
        overflow-y: auto;
    }

    .eq-title {
        font-size: 20px;
    }

    .eq-chip {
        padding: 8px 14px;
        font-size: 12px;
    }

    .eq-step-title {
        font-size: 14px;
    }

    .eq-button-row {
        gap: 10px;
    }

    .eq-btn {
        height: 40px;
        font-size: 13px;
    }

    .eq-btn--full {
        padding: 12px 24px;
        font-size: 13px;
    }

    .eq-disclaimer {
        font-size: 11px;
    }

    .sv-day-pill {
        font-size: 12px;
    }
}