/**
 * Strategy-call form panel — local-area CTA landing pages only
 * (/new-malden-kt3/, /fulham-sw6/, /wimbledon-sw19/, via [aa_strategy_form]).
 *
 * The shared form partial (sections/strategy-call-form.php) is styled in
 * main.css / strategy-form.css to hang off the bottom of a dark-green
 * .hero as a translucent "glass" panel, positioned absolute. These CTA
 * pages have no .hero — they embed the form inside their own white
 * .ms-booking-section (.ms-* design system: green #144633, pink #D92E79).
 * Without this file the panel is invisible glass, out of document flow,
 * overlapping the section's own content.
 *
 * EVERY rule in this file is scoped under .aa-cta-form — the wrapper
 * awesome_agents_strategy_form_shortcode() (functions.php) adds around the
 * shortcode's output only. The hero forms on home/sales/lettings render the
 * exact same partial WITHOUT that wrapper, so nothing here can ever reach
 * them. Loaded after strategy-form.css (functions.php) so it wins the
 * cascade; main.css's rules are heavily !important, so matching properties
 * here use !important too, purely to win specificity — not to fight it.
 */

/* --- Panel: out of the hero's absolute/glass treatment, into normal flow --- */

.aa-cta-form {
    display: block;
    width: 100%;
    margin: 36px auto 0;
}

.aa-cta-form .property-search-container {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    z-index: auto !important;
    cursor: default !important;

    /* Visible on white, instead of the glass-over-green look.
       !important throughout this rule: a stray unclosed @media block in
       main.css (line ~2383 — pre-existing, out of scope, not touched)
       leaks a `.property-search-container { ... !important }` rule so it
       applies unconditionally at every width, not just the narrow
       breakpoint it was written for. Matching !important here, backed by
       our higher .aa-cta-form specificity, is what wins that fight. */
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(20, 70, 51, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 16px 40px rgba(217, 46, 121, 0.08) !important;
    padding: 32px !important;
    height: auto !important;
    text-align: left;
}

/* Top accent bar, matching the .ms-card / .ms-step-card treatment
   elsewhere on these pages. No overflow:hidden on the panel (it would
   clip the address-autocomplete dropdown), so the bar carries its own
   matching corner radius instead of relying on clipping. */
.aa-cta-form .property-search-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #144633, #427059, #D92E79);
    pointer-events: none;
}

/* Single consistent card width across all steps — avoids jarring shrink on
   step 2/3 and gives the vertical form enough room at every breakpoint. */
.aa-cta-form .property-search-container:has(.form-step[data-step="1"].active),
.aa-cta-form .property-search-container:has(.form-step[data-step="2"].active),
.aa-cta-form .property-search-container:has(.form-step[data-step="3"].active),
.aa-cta-form .property-search-container:has(.form-step[data-step="4"].active),
.aa-cta-form .property-search-container.step-1-active,
.aa-cta-form .property-search-container.step-2-active,
.aa-cta-form .property-search-container.step-3-active,
.aa-cta-form .property-search-container.step-4-active {
    max-width: 620px !important;
    margin: 0 auto !important;
}

/* --- Neutralise the hero-only floating "compact pill" behaviour ---
 * gsap-animations.js drives .compact via a ScrollTrigger anchored to
 * ".hero", which doesn't exist on these pages, so the class is never
 * added in practice (confirmed live). Kept as a defensive no-op: if it
 * were ever added here, this keeps the panel a normal in-flow white card
 * instead of the hero's fixed pink pill, rather than doing nothing.
 */
.aa-cta-form .property-search-container.compact {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 620px !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(20, 70, 51, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 16px 40px rgba(217, 46, 121, 0.08) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    cursor: default !important;
}

.aa-cta-form .property-search-container.compact .search-tabs,
.aa-cta-form .property-search-container.compact .search-content {
    display: block !important;
}

.aa-cta-form .property-search-container.compact .compact-button {
    display: none !important;
}

/* --- Readability: labels/status text authored white for the dark glass ---
 * need to be dark on this white card. Outer panel + positioning is all
 * that was supposed to change, but these two rules are a direct
 * consequence of that background flip (white-on-white is unreadable, not
 * a stylistic choice) — selectors chosen to just out-specificity the
 * originals (#strategy-form .foo) without touching those files.
 */
.aa-cta-form #strategy-form .sc-intent-label,
.aa-cta-form #strategy-form .sc-dates-label {
    color: #144633;
    text-shadow: none;
}

.aa-cta-form #strategy-form .sc-slots-loading {
    color: rgba(20, 70, 51, 0.75);
    text-shadow: none;
}

.aa-cta-form .form-step[data-step="4"].active .recaptcha-info,
.aa-cta-form .form-step[data-step="4"].active .recaptcha-label {
    color: #6c757d !important;
}

/* --- Readability: interactive controls authored for the dark glass ---
 * Same underlying bug as the labels above: strategy-form.css / main.css
 * give the intent pills, slot pills, and generic form inputs a translucent
 * white fill + translucent white border (`rgba(255,255,255,.9)` /
 * `rgba(255,255,255,.3)`) so they read as chrome against dark green glass.
 * On this white card that's white-on-white — visible text with no button
 * chrome around it. Give them a real border + a faint tint that separates
 * them from the card, in the page's own green, without touching the pink
 * hover/active states those files already define.
 *
 * Every resting-state rule below excludes :hover, :focus and .active (and,
 * for the intent pills, the transient .sc-intent-missing validation state)
 * so it can never out-specify those existing pink states — verified live
 * that hover/active/focus still win after this file loads.
 */
.aa-cta-form #strategy-form .sc-intent-group:not(.sc-intent-missing) .sc-intent-btn:not(.active):not(:hover),
.aa-cta-form #strategy-form .sc-date-pill:not(.active):not(:hover),
.aa-cta-form #strategy-form .sc-time-btn:not(.active):not(:hover) {
    background: rgba(20, 70, 51, 0.045);
    border-color: rgba(20, 70, 51, 0.22);
}

.aa-cta-form .valuation-form input:not(:focus),
.aa-cta-form .valuation-form select:not(:focus) {
    border-color: rgba(20, 70, 51, 0.22);
}

/* --- Vertical form layout: override hero's horizontal step-1 bar ---
 * main.css lays step 1 out as a nowrap flex row (three fields + button) for
 * the ~1000px hero glass panel. Inside the 620px CTA card that squishes
 * fields below their content width and clips placeholders. Stack here only.
 */
.aa-cta-form .valuation-form {
    display: block !important;
}

.aa-cta-form .form-step[data-step="1"].active {
    display: block !important;
    overflow: visible !important;
}

.aa-cta-form .form-step[data-step="1"].active .form-group {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.aa-cta-form .form-step[data-step="1"].active .form-group .input-with-tooltip {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
}

.aa-cta-form .form-step[data-step="1"].active .form-group input {
    min-width: 0 !important;
    width: 100% !important;
}

.aa-cta-form .form-step[data-step="1"].active .form-buttons {
    margin-top: 4px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
}

.aa-cta-form .form-step[data-step="1"].active .form-buttons button {
    width: 100% !important;
    max-width: none !important;
}

/* Step 2/3/4 buttons span the card. */
.aa-cta-form .form-step[data-step="2"].active .form-buttons,
.aa-cta-form .form-step[data-step="3"].active .form-buttons,
.aa-cta-form .form-step[data-step="4"].active .form-buttons {
    width: 100% !important;
}

.aa-cta-form .form-step[data-step="2"].active .form-buttons button,
.aa-cta-form .form-step[data-step="3"].active .form-buttons button,
.aa-cta-form .form-step[data-step="4"].active .form-buttons button {
    width: 100% !important;
    max-width: none !important;
}

/* --- Responsive ---
 * No 1280px/1440px tier needed: the card (max 620px) always sits well
 * inside .ms-inner's content box at those widths, so it stays centred
 * with comfortable margins without any extra narrowing.
 */

@media (max-width: 768px) {
    .aa-cta-form {
        margin: 28px auto 0;
    }

    .aa-cta-form .property-search-container {
        max-width: 100% !important;
        padding: 24px !important;
        border-radius: 14px !important;
    }

    .aa-cta-form .property-search-container:has(.form-step[data-step="2"].active),
    .aa-cta-form .property-search-container:has(.form-step[data-step="3"].active),
    .aa-cta-form .property-search-container:has(.form-step[data-step="4"].active),
    .aa-cta-form .property-search-container.step-2-active,
    .aa-cta-form .property-search-container.step-3-active,
    .aa-cta-form .property-search-container.step-4-active,
    .aa-cta-form .property-search-container:has(.form-step[data-step="1"].active),
    .aa-cta-form .property-search-container.step-1-active {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .aa-cta-form .property-search-container {
        padding: 20px !important;
    }

    /* Stack bedroom/bathroom halves on narrow phones — two ~150px columns
       clip labels inside the padded card. */
    .aa-cta-form .form-step[data-step="3"].active .side-by-side-fields {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .aa-cta-form .form-step[data-step="3"].active .field-half {
        width: 100% !important;
    }
}