/* ============================================================================
 * CF7 contact form — FunZone styling (glass + neon variant)
 * Scope: every rule starts from `.wpcf7-form` so this file is inert outside
 * of the contact form context.
 *
 * Direction:
 *   - Glassmorphism: translucent dark card with backdrop-filter blur so the
 *     section photo stays visible behind, but inputs remain readable.
 *   - Neon edge: amber outer glow + cyan focus accent (arcade palette).
 *   - Error UI: solid red callout with white text + warning icon — high
 *     contrast, only revealed when CF7 reports a real submit failure.
 *   - Companion JS (js/contact-form.js) sets form.noValidate = true + injects
 *     `.fz-check` and `.fz-char-counter` indicators; styled below.
 *
 * Specificity notes:
 *   - Flatsome's base CSS is aggressive on form elements (forces bold,
 *     centered, white-on-white). Many rules below use `!important`
 *     deliberately to win against it.
 * ========================================================================== */

/* ── Section title "Contact Us" — left-aligned, matches form width ─────── *
 * Flatsome's text block defaults to centred + inline `<style>` via an ID
 * selector, so we use `!important` to win. Adds a Dancing Script tagline
 * above and a fading amber underline below — distinctive but understated.
 * Same max-width as the form card (560px) so the title and form align
 * horizontally instead of the title floating off-centre. */
.contact-us-section .col-inner > .text {
    max-width: 560px !important;
    margin: 0 auto 30px !important;
    text-align: left !important;
}

.contact-us-section .col-inner > .text h2 {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    /* Standardised with the Family Fun + Activities desktop scale so
       every section title reads at the same visual weight site-wide. */
    font-family: "Lato", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(2.2rem, 5.5vw, 4.5rem) !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* Desktop: keep the form's wider max-width so the title and form align
 * horizontally on big screens. The h2 size now scales via the global
 * clamp so no font-size override needed here. */
@media (min-width: 1024px) {
    .contact-us-section .col-inner > .text {
        max-width: 644px !important;
    }
}

/* Mobile + tablet — match the family-fun + activities title override at
 * the same breakpoint so every section title reads identical on every
 * device. Same clamp, tighter line-height + letter-spacing for the
 * hero-scale treatment. */
@media (max-width: 1280px) {
    .contact-us-section .col-inner > .text h2 {
        font-size: clamp(3.2rem, 11.5vw, 6.5rem) !important;
        line-height: 0.92 !important;
        letter-spacing: 0.015em !important;
    }
}

/* Fading amber underline accent below the heading */
.contact-us-section .col-inner > .text h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, #fcb900 0%, transparent 100%);
    border-radius: 2px;
}

/* Mobile size now scales via the shared clamp above — no override needed. */

/* ── Kill the white gap + smooth transitions to neighbour sections ──────── *
 * Flatsome leaves a small margin between sections which exposes the body's
 * white bg. Zero the margin and paint a dark fallback bg.
 * Then layer gradient fades on top & bottom of the section so the photo
 * doesn't terminate in a hard horizontal line against whatever's above/
 * below — it dissolves into the section's dark tone, giving a smooth
 * cinematic transition.
 *
 * Pseudo-elements sit ABOVE the section-bg (z-index 1) but BELOW the
 * section-content which establishes its own stacking context. */
.contact-us-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #0a0a14 !important;
    position: relative;
    overflow: hidden;             /* contains the parallax-overscanned bg */
}

.contact-us-section::before,
.contact-us-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 2;
    pointer-events: none;
}

.contact-us-section::before {
    top: 0;
    background: linear-gradient(to bottom, #0a0a14 0%, transparent 100%);
}

.contact-us-section::after {
    bottom: 0;
    background: linear-gradient(to top, #0a0a14 0%, transparent 100%);
}

/* The section-content must clearly sit above the gradient overlays */
.contact-us-section .section-content {
    position: relative;
    z-index: 3;
}

/* Pre-warm the bg layer for parallax — pure CSS hint so the GPU has the
 * transform layer ready even before JS attaches the scroll listener. */
.contact-us-section .section-bg {
    will-change: transform;
    transform: translate3d(0, 0, 0) scale(1.15);
    transform-origin: center center;
}

/* ── Mobile: claw back the form width that Flatsome eats ────────────────── *
 * The row has `max-width: 90%` and the col-inner adds 2rem (32px) padding
 * each side — together they steal ~64px+ on a 360px viewport, which is why
 * the card looked claustrophobic. On mobile we drop both nearly to zero so
 * the card breathes wider, and tighten the card's own inner padding too. */
@media (max-width: 600px) {
    .contact-us-section .row {
        max-width: 100% !important;
    }
    .contact-us-section .col-inner {
        padding: 0 8px !important;
    }
    .contact-us-section .wpcf7-form {
        max-width: 100%;
        padding: 24px 16px 22px;
    }
}

/* ── Card container — glass on photo background ─────────────────────────── */
.wpcf7-form {
    max-width: 560px;     /* tablet default */
    margin: 0 auto;
    padding: 40px 44px 36px;

    /* Apple-style neutral glass — lighter blur + more transparency so the
     * background photo reads through more clearly. */
    background: rgba(20, 20, 22, 0.28);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    backdrop-filter: blur(7px) saturate(140%);

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top: 3px solid #00f0ff;          /* neon cyan accent */
    border-radius: 16px;

    /* Drop shadow + cyan neon halo */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 48px rgba(0, 240, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    font-family: "Lato", Arial, sans-serif;
    color: #f4f3ff;
    position: relative;
    overflow: hidden;
}

/* Subtle light gradient highlight in the top-left — adds depth */
.wpcf7-form::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

.wpcf7-form > * {
    position: relative;
    z-index: 1;
}

/* Fallback: browsers without backdrop-filter get a more opaque bg */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .wpcf7-form {
        background: rgba(20, 20, 22, 0.78);
    }
}

/* Desktop: form gets +15% width compared to tablet for breathing room */
@media (min-width: 1024px) {
    .wpcf7-form {
        max-width: 644px;
    }
}

@media (max-width: 600px) {
    .wpcf7-form {
        padding: 30px 22px 26px;
        border-radius: 12px;
    }
}

/* ── Tame CF7 template wrappers ──────────────────────────────────────────── */
.wpcf7-form p {
    margin: 0 0 14px !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

.wpcf7-form p:last-of-type {
    margin-bottom: 0 !important;
}

/* Kill literal <br> CF7 inserts between label text and input span — block
 * layout already gives us a line break, and the <br>s cause inconsistent
 * spacing (especially the leading one on the Subject field). */
.wpcf7-form label br,
.wpcf7-form .form-wrapper br,
.wpcf7-form .contact_us_form_section br {
    display: none !important;
}

.wpcf7-form .form-wrapper,
.wpcf7-form .contact_us_form_section {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */
.wpcf7-form label {
    display: block !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #7dd3fc !important;          /* lighter cyan — readable on dark glass */
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    line-height: 1.4 !important;
    background: transparent !important;
}

.wpcf7-form label > span {
    color: #ef4444;
    margin-left: 2px;
}

.wpcf7-form .wpcf7-form-control-wrap {
    display: block !important;
    margin-top: 2px !important;
    position: relative !important;
}

/* ── Inputs / select / textarea — translucent glass surface ────────────── */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    font: 400 15px/1.5 "Lato", Arial, sans-serif !important;
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    background-image: none;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease !important;
    box-sizing: border-box !important;
    appearance: none;
    -webkit-appearance: none;
    text-align: left !important;
    text-transform: none !important;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: rgba(244, 243, 255, 0.4) !important;
    opacity: 1 !important;
    font-style: italic;
}

/* Pad input right when ✓ indicator is present */
.wpcf7-form .wpcf7-form-control-wrap.is-valid input,
.wpcf7-form .wpcf7-form-control-wrap.is-valid select {
    padding-right: 44px !important;
}

/* ── Hover (subtle) ──────────────────────────────────────────────────────── */
.wpcf7-form input:hover:not(:focus),
.wpcf7-form select:hover:not(:focus),
.wpcf7-form textarea:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.09) !important;
}

/* ── Webkit autofill override ────────────────────────────────────────────── *
 * Chrome/Edge paint a yellow-ish opaque bg on autofilled inputs. Painting a
 * solid colour over it (box-shadow inset trick) gives the input a different
 * colour than the rest — bad for glass consistency. Instead we just delay
 * the yellow indefinitely via a 600s transition so the user never sees it,
 * and the input keeps its translucent glass look. */
.wpcf7-form input:-webkit-autofill,
.wpcf7-form input:-webkit-autofill:hover,
.wpcf7-form input:-webkit-autofill:focus,
.wpcf7-form input:-webkit-autofill:active,
.wpcf7-form textarea:-webkit-autofill,
.wpcf7-form select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 600s ease-in-out 0s, color 600s ease-in-out 0s !important;
}

/* ── Focus — cyan neon glow (arcade palette) ─────────────────────────────── */
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none !important;
    border-color: #00f0ff !important;
    background-color: rgba(0, 240, 255, 0.06) !important;
    box-shadow:
        0 0 0 3px rgba(0, 240, 255, 0.18),
        0 0 24px rgba(0, 240, 255, 0.25) !important;
}

/* ── Select — custom cyan arrow, white options ───────────────────────────── */
.wpcf7-form select {
    min-height: 44px !important;
    line-height: 1.4 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%2300f0ff' d='M7 9L0 0h14z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 14px 9px !important;
    padding-right: 46px !important;
    cursor: pointer !important;
}

.wpcf7-form select::-ms-expand {
    display: none !important;
}

.wpcf7-form select option {
    color: #1a0f4f;
    background: #ffffff;
}

.wpcf7-form select option:disabled {
    color: #9ca3af;
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
.wpcf7-form textarea {
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.55 !important;
}

/* ── ✓ Valid / ✕ Invalid indicator (injected by js/contact-form.js) ──────── *
 * State machine:
 *   - no .is-touched      → hidden (don't nag before user has interacted)
 *   - .is-touched + empty → hidden (CF7 handles required-on-submit)
 *   - .is-touched + filled + .is-valid     → green ✓
 *   - .is-touched + filled + NOT .is-valid → red ✕
 * .is-touched is set by JS on the field's first blur event.
 * The icon character (✓ / ✕) is set as textContent by JS in refreshFieldState. */
.wpcf7-form .fz-check {
    position: absolute;
    /* Fixed pixel offset (centre of a 42px input) instead of 50% — the wrap
     * grows when an error tooltip is added below the input, and 50% would
     * follow that growth, sliding the check off-centre. 21px stays put. */
    top: 21px;
    right: 14px;
    transform: translateY(-50%) scale(0.5);
    width: 24px;
    height: 24px;
    /* Outline style: subtle bg tint + bordered ring + crisp SVG icon inside.
     * SVG (background-image) centers pixel-perfect regardless of font metrics. */
    background-color: rgba(16, 185, 129, 0.10);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
    border: 1.5px solid #10b981;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        background-image 0s,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

/* Reveal when user has blurred AND the field has content */
.wpcf7-form .wpcf7-form-control-wrap.is-touched.is-filled .fz-check {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Invalid state — swap green outline + ✓ for red outline + ✕ */
.wpcf7-form .wpcf7-form-control-wrap.is-touched.is-filled:not(.is-valid) .fz-check {
    background-color: rgba(239, 68, 68, 0.10);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* After a failed submit, CF7 already shows its red border + error tooltip
 * on the bad field. Hide our redundant ✕ indicator (keep ✓ for valid fields)
 * so the user sees one clear error signal instead of two competing ones. */
.wpcf7-form[data-status="invalid"] .wpcf7-form-control-wrap.is-touched.is-filled:not(.is-valid) .fz-check,
.wpcf7-form[data-status="failed"] .wpcf7-form-control-wrap.is-touched.is-filled:not(.is-valid) .fz-check,
.wpcf7-form[data-status="spam"] .wpcf7-form-control-wrap.is-touched.is-filled:not(.is-valid) .fz-check,
.wpcf7-form[data-status="unaccepted"] .wpcf7-form-control-wrap.is-touched.is-filled:not(.is-valid) .fz-check {
    opacity: 0 !important;
}

/* Textarea is taller — pin indicator to top, not vertically centered */
.wpcf7-form .wpcf7-form-control-wrap:has(textarea) .fz-check {
    top: 14px;
    transform: scale(0.5);
}

.wpcf7-form .wpcf7-form-control-wrap:has(textarea).is-touched.is-filled .fz-check {
    transform: scale(1);
}

/* ── Char counter under textarea (injected by js/contact-form.js) ───────── */
.wpcf7-form .fz-char-counter {
    display: block;
    margin-top: 6px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: rgba(244, 243, 255, 0.45);
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.wpcf7-form .fz-char-counter.is-near-limit {
    color: #fcb900;
}

/* ── Submit button — cyan neon gradient (high-contrast CTA on glass card) ─ */
/* Use flex on the wrapping container so the button is reliably right-aligned
 * regardless of what Flatsome's CSS does to <p>. */
.wpcf7-form .button-form {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
}

.wpcf7-form .button-form p {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    text-align: right !important;
}

.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type="submit"] {
    display: inline-block !important;
    margin: 0 !important;
    padding: 12px 36px !important;
    width: auto !important;
    min-width: 160px !important;
    height: auto !important;
    font: 700 13px/1 "Lato", Arial, sans-serif !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #0a0e27 !important;
    background: linear-gradient(135deg, #00f0ff 0%, #0099ff 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    text-align: center !important;
    text-shadow: none !important;
    box-shadow:
        0 4px 16px rgba(0, 240, 255, 0.35),
        0 0 24px rgba(0, 240, 255, 0.2) !important;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        filter 0.15s ease !important;
    box-sizing: border-box !important;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form input[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        0 8px 26px rgba(0, 240, 255, 0.5),
        0 0 40px rgba(0, 240, 255, 0.3) !important;
    filter: brightness(1.06) !important;
}

.wpcf7-form .wpcf7-submit:active,
.wpcf7-form input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(0, 240, 255, 0.4) !important;
    filter: brightness(0.96) !important;
}

.wpcf7-form .wpcf7-submit:focus-visible,
.wpcf7-form input[type="submit"]:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;
}

@media (max-width: 600px) {
    .wpcf7-form .wpcf7-submit,
    .wpcf7-form input[type="submit"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* CF7 spinner — always hidden. By default it takes layout width even when
 * invisible, which pushes the submit button leftward from the form's right
 * edge. The `disabled` state CF7 adds to the submit button during AJAX is
 * enough visual feedback. */
.wpcf7-form .wpcf7-spinner {
    display: none !important;
}

/* ── Validation timing fix — unbeatable hide before submit ──────────────── *
 * CF7's `wpcf7-not-valid-tip` spans appear via JS during real-time
 * validation. We hide them aggressively (offscreen + visibility hidden +
 * opacity 0 + zero dimensions) so even inline `style.display = "block"`
 * from CF7's JS doesn't reveal them.
 *
 * They are only shown when CF7 has reported a real submit failure, signalled
 * by data-status="invalid" / "failed" / "spam" / "unaccepted" on the form.
 * ────────────────────────────────────────────────────────────────────────── */

.wpcf7-form .wpcf7-not-valid-tip {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Neutralize .wpcf7-not-valid border by default (before submit) */
.wpcf7-form .wpcf7-not-valid {
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

/* ── After submit failure: show readable error callouts ─────────────────── */
.wpcf7-form[data-status="invalid"] .wpcf7-not-valid-tip,
.wpcf7-form[data-status="failed"] .wpcf7-not-valid-tip,
.wpcf7-form[data-status="spam"] .wpcf7-not-valid-tip,
.wpcf7-form[data-status="unaccepted"] .wpcf7-not-valid-tip {
    position: static !important;
    left: auto !important;
    top: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
    overflow: visible !important;

    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: 6px !important;
    box-shadow:
        0 3px 10px rgba(239, 68, 68, 0.3),
        0 0 14px rgba(239, 68, 68, 0.18) !important;
    animation: fz-error-slide-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Warning icon ! inside a circle, prepended to every error message */
.wpcf7-form[data-status="invalid"] .wpcf7-not-valid-tip::before,
.wpcf7-form[data-status="failed"] .wpcf7-not-valid-tip::before,
.wpcf7-form[data-status="spam"] .wpcf7-not-valid-tip::before,
.wpcf7-form[data-status="unaccepted"] .wpcf7-not-valid-tip::before {
    content: "!";
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.wpcf7-form[data-status="invalid"] .wpcf7-not-valid,
.wpcf7-form[data-status="failed"] .wpcf7-not-valid,
.wpcf7-form[data-status="spam"] .wpcf7-not-valid,
.wpcf7-form[data-status="unaccepted"] .wpcf7-not-valid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

@keyframes fz-error-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Belt-and-suspenders: kill native browser :invalid styling */
.wpcf7-form :where(input, textarea, select):invalid {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

/* ── Response output ─────────────────────────────────────────────────────── *
 * CF7's default bottom-of-form banner is hidden — feedback now lives inside
 * the loading overlay (sending → sent ✓ / failed ✕). Keeps the visual flow
 * inside one place. Aria-live region is preserved for screen readers via
 * CF7's `.screen-reader-response` (separate from .wpcf7-response-output). */
.wpcf7-form .wpcf7-response-output {
    display: none !important;
}

/* ── Defensive: kill decorative pseudo-elements from Flatsome / plugins ─── *
 * Flatsome (and some plugins) add `::before` / `::after` triangle pointers,
 * arrows, or status indicators on wrap / label / p elements when a field
 * is in :invalid or [aria-invalid="true"] state. They conflict with our
 * minimal styling — kill them while preserving our own pseudos which live
 * on .wpcf7-form, .wpcf7-not-valid-tip, .fz-loading-*. */
.wpcf7-form .wpcf7-form-control-wrap::before,
.wpcf7-form .wpcf7-form-control-wrap::after,
.wpcf7-form .form-wrapper::before,
.wpcf7-form .form-wrapper::after,
.wpcf7-form .contact_us_form_section::before,
.wpcf7-form .contact_us_form_section::after,
.wpcf7-form p::before,
.wpcf7-form p::after,
.wpcf7-form label::before,
.wpcf7-form label::after,
.wpcf7-form input::before,
.wpcf7-form input::after,
.wpcf7-form textarea::before,
.wpcf7-form textarea::after,
.wpcf7-form select::before,
.wpcf7-form select::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
}

/* ── Loading overlay — appears while CF7 is submitting ─────────────────── *
 * CF7 sets data-status="submitting" on the form during AJAX submit. We
 * use that to fade in a glassy overlay with a spinning neon ring and an
 * animated "Sending your message..." caption.
 *
 * Pure CSS animations — no JS state machine needed beyond the one-time
 * overlay injection in js/contact-form.js. */
.wpcf7-form .fz-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 18, 0.72);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.wpcf7-form[data-status="submitting"] .fz-loading-overlay,
.wpcf7-form .fz-loading-overlay.is-success,
.wpcf7-form .fz-loading-overlay.is-failed {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Overlay state machine — sending / sent / failed ─────────────────────── */
.wpcf7-form .fz-state {
    display: none;
}

.wpcf7-form[data-status="submitting"] .fz-loading-overlay:not(.is-success):not(.is-failed) .fz-state-sending {
    display: block;
    animation: fz-state-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpcf7-form .fz-loading-overlay.is-success .fz-state-sent {
    display: block;
    animation: fz-state-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpcf7-form .fz-loading-overlay.is-failed .fz-state-failed {
    display: block;
    animation: fz-state-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fz-state-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Result icon — outlined ring with SVG checkmark or X inside ────────── */
.wpcf7-form .fz-result-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 36px 36px;
}

.wpcf7-form .fz-result-success {
    background-color: rgba(16, 185, 129, 0.12);
    border: 2px solid #10b981;
    box-shadow:
        0 0 30px rgba(16, 185, 129, 0.5),
        inset 0 0 14px rgba(16, 185, 129, 0.15);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.wpcf7-form .fz-result-error {
    background-color: rgba(239, 68, 68, 0.12);
    border: 2px solid #ef4444;
    box-shadow:
        0 0 30px rgba(239, 68, 68, 0.5),
        inset 0 0 14px rgba(239, 68, 68, 0.15);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Result-state text colour matches the icon */
.wpcf7-form .fz-loading-overlay.is-success .fz-loading-text {
    color: #10b981;
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

.wpcf7-form .fz-loading-overlay.is-failed .fz-loading-text {
    color: #ef4444;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}

.wpcf7-form .fz-loading-inner {
    text-align: center;
    padding: 0 20px;
}

/* Spinning neon ring — uses conic-gradient + mask for a "fading arc" feel.
 * Fallback for browsers without mask support: a plain bordered ring still
 * spins and reads as a loader. */
.wpcf7-form .fz-loading-spinner {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border: 3px solid rgba(0, 240, 255, 0.18);
    border-top-color: #00f0ff;
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(0, 240, 255, 0.5),
                inset 0 0 18px rgba(0, 240, 255, 0.15);
    animation: fz-spin 0.85s linear infinite;
}

/* Small inner pulsing dot for extra "magical" touch */
.wpcf7-form .fz-loading-spinner::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    background: #00f0ff;
    border-radius: 50%;
    box-shadow: 0 0 12px #00f0ff;
    animation: fz-pulse 1.4s ease-in-out infinite;
}

.wpcf7-form .fz-loading-text {
    color: #00f0ff;
    font: 700 13px/1.4 "Lato", Arial, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

/* Animated trailing dots — content swaps via CSS animation steps */
.wpcf7-form .fz-loading-dots::after {
    display: inline-block;
    width: 1.4em;       /* reserve space so the text doesn't shift */
    text-align: left;
    content: "";
    animation: fz-dots 1.4s steps(4, end) infinite;
}

@keyframes fz-spin {
    to { transform: rotate(360deg); }
}

@keyframes fz-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.6);
        opacity: 0.5;
    }
}

@keyframes fz-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

/* Reduced-motion handled globally in inc/setup/a11y.php */

/* ── Honeypot — keep invisible to humans + non-rendering bots ──────────── */
.wpcf7-form .wpcf7-form-control-wrap[data-name^="honeypot"],
.wpcf7-form .wpcf7-honeypot-text,
.wpcf7-form .honeypot-550-wrap,
.wpcf7-form span[class*="honeypot"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ── LastPass icon injected into email/phone fields — hide it ────────────── *
 * The host element has inline `style="display: initial !important"` so
 * `display: none !important` loses (inline !important beats author !important).
 * `opacity` is not in the inline style and propagates across the closed
 * shadow root, so it hides the SVG inside too. */
.wpcf7-form [data-lastpass-icon-root],
.wpcf7-form [data-lastpass-icon-root] * {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The old inline `.fz-faq-hint` paragraph (still present in the CF7 form
 * definition) is hidden — replaced by the modal below. CF7 markup can be
 * removed in WP admin at any time; this rule keeps it invisible until then. */
.wpcf7-form .fz-faq-hint { display: none; }

/* ── FAQ modal — opens when Subject = "I have a question" ────────────────
 * Lazy-injected into <body> by wireFaqModal() in contact-form.js. Glass
 * card matching the form's cyan-neon aesthetic, amber pill for the primary
 * CTA (Browse FAQs), cyan ghost pill for the dismiss. Backdrop blur focuses
 * attention; ESC + click outside + X close all close the modal.
 */
body.fz-modal-open {
    overflow: hidden;
}

/* :not([hidden]) so the styles don't override the HTML hidden attribute —
 * a plain `.fz-modal { display: flex }` would keep the modal visible even
 * when `modal.hidden = true` (author CSS beats the UA `[hidden]{display:none}`
 * at the same specificity). With the negation, hidden=true → display: none
 * comes through cleanly. */
.fz-modal:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fzModalIn 0.2s ease-out;
}

.fz-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 12, 0.78);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.fz-modal-content {
    position: relative;
    max-width: 410px; /* ~15% smaller than the previous 480 */
    width: 100%;
    background: rgba(10, 10, 20, 0.92); /* fallback */
    background: linear-gradient(160deg, rgba(10, 10, 20, 0.94), rgba(19, 19, 37, 0.94));
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 14px;
    padding: 28px 24px 22px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.55),
        0 0 32px rgba(0, 240, 255, 0.18),
        inset 0 0 0 1px rgba(0, 240, 255, 0.06);
    color: #fff;
    animation: fzModalContentIn 0.24s ease-out;
}

.fz-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

.fz-modal-close:hover,
.fz-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #00f0ff;
    outline: none;
}
.fz-modal-close:focus-visible {
    /* Icon-only close button — without a dedicated ring the focus state
       is indistinguishable from hover (background tint + colour swap
       are shared). Cyan box-shadow gives keyboard users a clear stop. */
    box-shadow: 0 0 0 2px #00f0ff;
}

.fz-modal-icon {
    font-size: 32px;
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

.fz-modal-title {
    color: #00f0ff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 10px;
}

.fz-modal-body {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    margin: 0 0 20px;
}

/* Buttons stacked, equal width, browse-FAQs on top per UX hierarchy. */
.fz-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 280px;
    margin: 0 auto;
}

.fz-modal-primary,
.fz-modal-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 9px 16px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease, border-color 0.18s ease;
}

/* Primary CTA — filled cyan, same family as the submit button. Uses brand
 * #04bbd3 (cyan teal) as the fill and #0078ff (mid blue) for the glow. */
.fz-modal-primary {
    background: #04bbd3;
    color: #0a0e27;
    border: 1px solid transparent;
    box-shadow:
        0 4px 16px rgba(0, 120, 255, 0.30),
        0 0 22px rgba(4, 187, 211, 0.22);
}

.fz-modal-primary:hover,
.fz-modal-primary:focus-visible {
    background: #04bbd3;
    color: #0a0e27;
    transform: translateY(-1px);
    box-shadow:
        0 8px 26px rgba(0, 120, 255, 0.45),
        0 0 36px rgba(4, 187, 211, 0.32);
    filter: brightness(1.08);
    outline: none;
}

/* Secondary CTA — outlined cyan, ghost feel. Hover mirrors the form fields'
 * focus state (subtle tint + brighter border + soft cyan ring) so it feels
 * consistent with the rest of the form's interactions. */
.fz-modal-secondary {
    background: transparent;
    color: #04bbd3;
    border: 1px solid rgba(4, 187, 211, 0.55);
}

.fz-modal-secondary:hover,
.fz-modal-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    color: #04bbd3;
    border-color: #04bbd3;
    box-shadow: 0 0 0 3px rgba(4, 187, 211, 0.15);
    outline: none;
}

@keyframes fzModalIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fzModalContentIn {
    from { opacity: 0; transform: scale(0.96) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 480px) {
    .fz-modal-content {
        padding: 24px 18px 18px;
    }
    .fz-modal-title {
        font-size: 18px;
    }
    .fz-modal-actions {
        max-width: none; /* fill the smaller mobile modal */
    }
}