/* LEAP lead capture forms.
 *
 * Neutral by design — it inherits the theme's font and picks up an accent from
 * a CSS variable, so it looks like the site rather than like a plugin.
 * Override --leaplc-accent in your theme to match your brand.
 */

.leaplc-wrap {
    --leaplc-accent: #2563eb;
    --leaplc-accent-hover: #1d4ed8;
    --leaplc-border: #d4d8dd;
    --leaplc-error: #b91c1c;
    --leaplc-muted: #6b7280;
    max-width: 640px;
}

.leaplc-title {
    margin: 0 0 .25em;
    font-size: 1.5rem;
    line-height: 1.25;
}

.leaplc-subtitle {
    margin: 0 0 1.5em;
    color: var(--leaplc-muted);
    line-height: 1.5;
}

.leaplc-field { margin-bottom: 1.15rem; }

.leaplc-label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
    font-size: .9375rem;
}

.leaplc-required { color: var(--leaplc-error); margin-left: .15em; }

.leaplc-input {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .85rem;
    border: 1px solid var(--leaplc-border);
    border-radius: 8px;
    /* 16px so iOS does not zoom the page when a field is focused. */
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.leaplc-input:focus {
    outline: none;
    border-color: var(--leaplc-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.leaplc-has-error .leaplc-input { border-color: var(--leaplc-error); }

.leaplc-error {
    margin: .35rem 0 0;
    color: var(--leaplc-error);
    font-size: .8125rem;
}

.leaplc-checkboxes {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}

.leaplc-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    cursor: pointer;
    /* 44px minimum touch target — the quote wizard's 36px controls are below
       the threshold and are noticeably fiddly on a phone. */
    min-height: 44px;
}

.leaplc-checkbox input { width: 18px; height: 18px; flex: none; }

.leaplc-consent {
    padding-top: .5rem;
    border-top: 1px solid var(--leaplc-border);
    color: var(--leaplc-muted);
    font-size: .875rem;
}

.leaplc-submit {
    display: inline-block;
    padding: .8rem 1.6rem;
    border: 0;
    border-radius: 8px;
    background: var(--leaplc-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    min-height: 48px;
    transition: background .15s;
}

.leaplc-submit:hover:not(:disabled) { background: var(--leaplc-accent-hover); }
.leaplc-submit:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .45);
    outline-offset: 2px;
}
.leaplc-submit:disabled { opacity: .65; cursor: default; }

.leaplc-status {
    margin: 1rem 0 0;
    font-size: .9375rem;
    color: var(--leaplc-muted);
}
.leaplc-status-error { color: var(--leaplc-error); }

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden fields — and none of them can see. */
.leaplc-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.leaplc-done {
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--leaplc-border);
    border-radius: 12px;
    background: #f8fafc;
}
.leaplc-done:focus { outline: none; }

.leaplc-done-mark {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    font-size: 1.5rem;
    line-height: 48px;
}

.leaplc-done-message { margin: 0; font-size: 1.0625rem; line-height: 1.5; }

.leaplc-admin-note {
    padding: 1rem;
    border: 1px dashed #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: .875rem;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .leaplc-title { font-size: 1.3125rem; }
    .leaplc-submit { width: 100%; }
    .leaplc-checkboxes { flex-direction: column; gap: 0; }
}


/* ── The card ────────────────────────────────────────────────────────────
   The form used to sit as bare inputs directly on the page, which reads as
   unfinished next to any modern site and gives the eye nothing to land on.
   A surface with its own edge makes it an object you interact with.

   `--leaplc-surface: transparent` in a theme turns this back off for anyone
   who was relying on the old flush look. */
.leaplc-wrap {
    --leaplc-surface: #fff;
    --leaplc-surface-border: #e6e8eb;
    --leaplc-radius: 14px;
    --leaplc-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                     0 8px 24px -8px rgba(16, 24, 40, .10);
    --leaplc-text: #111827;

    background: var(--leaplc-surface);
    border: 1px solid var(--leaplc-surface-border);
    border-radius: var(--leaplc-radius);
    box-shadow: var(--leaplc-shadow);
    padding: 1.75rem;
    color: var(--leaplc-text);
}

/* Flush inside a coloured band or a narrow column — a card inside a card is
   noise. */
.leaplc-wrap.leaplc-flush {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.leaplc-title { letter-spacing: -0.02em; font-weight: 650; }

/* ── Inputs ──────────────────────────────────────────────────────────────
   Subtler resting state, obvious focus. The old 3px ring was the only
   feedback; this adds a border shift so the change is visible to someone who
   cannot distinguish the ring colour. */
.leaplc-input {
    background: #fcfcfd;
    border-color: #dfe3e8;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.leaplc-input:hover:not(:focus) { border-color: #c6ccd3; }
.leaplc-input:focus {
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaplc-accent) 16%, transparent);
}
/* color-mix is unsupported in older Safari/Firefox; the rgba below is the
   fallback and is overridden by the rule above where it works. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .leaplc-input:focus { box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }
}

.leaplc-input::placeholder { color: #9aa1a9; }

/* ── Choices ─────────────────────────────────────────────────────────────
   Checkboxes were a bare control and a label. As tappable chips they read as
   choices rather than as a legal agreement, and the 44px target is kept. */
.leaplc-checkboxes .leaplc-checkbox {
    border: 1px solid var(--leaplc-border);
    border-radius: 10px;
    padding: .5rem .85rem;
    transition: border-color .15s ease, background .15s ease;
}
.leaplc-checkboxes .leaplc-checkbox:hover { border-color: var(--leaplc-accent); }
.leaplc-checkboxes .leaplc-checkbox:has(input:checked) {
    border-color: var(--leaplc-accent);
    background: color-mix(in srgb, var(--leaplc-accent) 8%, transparent);
}
.leaplc-checkbox input { accent-color: var(--leaplc-accent); }

/* ── Submit ──────────────────────────────────────────────────────────────
   A button that reacts. Nothing gratuitous — a press needs to feel like a
   press, especially on a phone where there is no cursor to confirm the hit. */
.leaplc-submit {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    transition: background .15s ease, transform .06s ease, box-shadow .15s ease;
}
.leaplc-submit:hover:not(:disabled) {
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--leaplc-accent) 45%, transparent);
}
.leaplc-submit:active:not(:disabled) { transform: translateY(1px); }

/* Sending. The label is swapped by the script; this is the spinner beside it
   so a slow network does not look like a dead button. */
.leaplc-submit[aria-busy="true"]::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: .5rem;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: leaplc-spin .6s linear infinite;
}
@keyframes leaplc-spin { to { transform: rotate(360deg); } }

/* ── Errors ──────────────────────────────────────────────────────────────
   The message alone is easy to miss on a long form. */
.leaplc-error::before { content: '⚠ '; }
.leaplc-has-error .leaplc-input {
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .10);
}

/* ── Done ────────────────────────────────────────────────────────────────
   This replaces the form on success, so it is the only thing on screen and
   should feel like an arrival rather than an empty box. */
.leaplc-done {
    background: linear-gradient(180deg, #fbfefc 0%, #f6faf7 100%);
    border-color: #cfe8d8;
    animation: leaplc-rise .3s ease both;
}
.leaplc-done-mark { animation: leaplc-pop .35s cubic-bezier(.2, .9, .3, 1.4) both .06s; }
@keyframes leaplc-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes leaplc-pop  { from { opacity: 0; transform: scale(.6); } }

/* Motion is decoration here; anybody who has asked for less should get none. */
@media (prefers-reduced-motion: reduce) {
    .leaplc-done, .leaplc-done-mark, .leaplc-submit,
    .leaplc-input, .leaplc-checkbox { animation: none !important; transition: none !important; }
    .leaplc-submit:active:not(:disabled) { transform: none; }
}

/* ── Dark mode ───────────────────────────────────────────────────────────
   Only when the THEME has not already set a background on the wrapper —
   guessing over a theme's own dark styling makes it worse, not better. */
@media (prefers-color-scheme: dark) {
    .leaplc-wrap:not([data-leaplc-theme="light"]) {
        --leaplc-surface: #15181d;
        --leaplc-surface-border: #262b33;
        --leaplc-border: #333a44;
        --leaplc-muted: #98a2b3;
        --leaplc-text: #e8eaed;
    }
    .leaplc-wrap:not([data-leaplc-theme="light"]) .leaplc-input {
        background: #1b1f26;
        color: #e8eaed;
    }
    .leaplc-wrap:not([data-leaplc-theme="light"]) .leaplc-input:focus { background: #1f242c; }
    .leaplc-wrap:not([data-leaplc-theme="light"]) .leaplc-done {
        background: #16211a;
        border-color: #24402f;
    }
}

@media (max-width: 640px) {
    .leaplc-wrap { padding: 1.25rem; }
}

/* ── Intro line ──────────────────────────────────────────────────────────
   A way through that does not depend on the form working. Somebody who wants
   to phone should not have to fill in six boxes to find the number. */
.leaplc-intro {
    margin: 0 0 1.5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--leaplc-border);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--leaplc-muted);
    font-size: .9375rem;
    line-height: 1.5;
}
.leaplc-intro a { color: var(--leaplc-accent); }

/* ── Two-up fields ───────────────────────────────────────────────────────
   First and last name side by side on anything wider than a phone. Stacks
   below 520px, where two boxes in a row are each too narrow to type in. */
.leaplc-wrap:has(.leaplc-half) .leaplc-form { display: block; }
@media (min-width: 520px) {
    .leaplc-half { display: inline-block; width: calc(50% - .5rem); vertical-align: top; }
    .leaplc-half + .leaplc-half { margin-left: 1rem; }
}

/* ── Radio choices ───────────────────────────────────────────────────────
   Stacked rather than chips: these are mutually exclusive and often long
   ("Allen and Heath authorized repair"), so a row of pills wraps into
   something unreadable. */
.leaplc-choices { display: flex; flex-direction: column; gap: .5rem; }

.leaplc-choice {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    padding: .5rem .85rem;
    border: 1px solid var(--leaplc-border);
    border-radius: 10px;
    font-size: .9375rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.leaplc-choice:hover { border-color: var(--leaplc-accent); }
.leaplc-choice input { width: 18px; height: 18px; flex: none; accent-color: var(--leaplc-accent); }
.leaplc-choice:has(input:checked) {
    border-color: var(--leaplc-accent);
    background: color-mix(in srgb, var(--leaplc-accent) 8%, transparent);
}
@supports not (selector(:has(*))) {
    /* :has is unsupported in older Firefox — the hover and checked states are
       an enhancement, and the control is fully usable without them. */
    .leaplc-choice { border-color: var(--leaplc-border); }
}

@media (prefers-color-scheme: dark) {
    .leaplc-wrap:not([data-leaplc-theme="light"]) .leaplc-intro {
        background: #1b1f26;
        border-color: #333a44;
    }
}