/* ==========================================================================
   Restock - Waitlist Form (storefront)
   Modern, accessible, Core-Web-Vitals-native styles.

   - Themeable via CSS custom properties (override --restock-* in your theme,
     with sensible fallbacks that inherit the surrounding theme's currentColor).
   - No layout shift: the status message reserves no space until shown, and the
     form never reflows on submit (the button keeps its width while busy). The
     confirmation glow is painted with box-shadow/pseudo-elements only, so it
     never changes box size, so there is zero CLS.
   - Tasteful transitions gated behind prefers-reduced-motion.
   - Native dark-mode support via prefers-color-scheme.
   - Designed to sit inside WooCommerce themes without fighting them.
   ========================================================================== */

.restock-waitlist {
    /* Tokens - override these in your theme to re-skin the form. */
    --restock-radius: 14px;
    --restock-radius-sm: 9px;
    --restock-gap: clamp(0.6rem, 0.4rem + 0.6vw, 0.85rem);
    --restock-pad-block: clamp(1rem, 0.8rem + 0.8vw, 1.35rem);
    --restock-pad-inline: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);

    --restock-surface: #fbf7f3;
    --restock-surface-2: #ffffff;
    --restock-border: rgba(80, 44, 18, 0.14);
    --restock-border-strong: rgba(80, 44, 18, 0.26);
    --restock-text: inherit;
    --restock-muted: #6b5847;

    /* Signal-amber accent used for the waitlist confirmation flow.
       Both stops are deep enough that white text clears WCAG AA (4.5:1):
       --restock-accent-soft #c2410c = 5.18:1, --restock-accent #9a3412 = 7.31:1. */
    --restock-accent: #9a3412;
    --restock-accent-soft: #c2410c;
    --restock-ember: #f59e0b;

    --restock-ok-bg: rgba(194, 65, 12, 0.08);
    --restock-ok-border: rgba(194, 65, 12, 0.42);
    --restock-ok-text: #9a3412;
    --restock-err-bg: rgba(190, 30, 36, 0.08);
    --restock-err-border: rgba(190, 30, 36, 0.4);
    --restock-err-text: #b91c1c;

    margin-block-start: 1.5em;
    padding-block: var(--restock-pad-block);
    padding-inline: var(--restock-pad-inline);
    /* A thin warm hairline on the inline-start edge reinforces the accent. */
    border: 1px solid var(--restock-border);
    border-inline-start: 3px solid color-mix(in srgb, var(--restock-accent) 55%, transparent);
    border-radius: var(--restock-radius);
    background: var(--restock-surface);
    color: var(--restock-text);
    font-size: 0.95em;
}

.restock-waitlist__heading {
    margin-block: 0 0.5em;
    font-size: 1.05em;
    font-weight: 650;
    line-height: 1.3;
}

.restock-waitlist__intro {
    margin-block: 0 0.9em;
    color: var(--restock-muted);
    line-height: 1.5;
}

/* Form */

.restock-waitlist-form {
    display: flex;
    flex-direction: column;
    gap: var(--restock-gap);
    margin: 0;
}

.restock-waitlist-form label:not(.restock-waitlist__privacy) {
    display: block;
}

.restock-waitlist-form input[type="email"] {
    display: block;
    inline-size: 100%;
    box-sizing: border-box;
    padding-block: 0.6em;
    padding-inline: 0.85em;
    border: 1px solid var(--restock-border-strong);
    border-radius: var(--restock-radius-sm);
    font-size: 1em;
    line-height: 1.4;
    background: var(--restock-surface-2);
    color: inherit;
}

.restock-waitlist-form input[type="email"]::placeholder {
    color: var(--restock-muted);
    opacity: 0.8;
}

.restock-waitlist-form input[type="email"]:focus-visible {
    outline: 2px solid var(--restock-accent);
    outline-offset: 1px;
    border-color: var(--restock-accent);
}

/* Privacy checkbox */

.restock-waitlist__privacy {
    display: flex;
    gap: 0.5em;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.875em;
    color: var(--restock-muted);
    line-height: 1.45;
}

.restock-waitlist__privacy input[type="checkbox"] {
    flex-shrink: 0;
    inline-size: 1.05em;
    block-size: 1.05em;
    margin-block-start: 0.12em;
    accent-color: var(--restock-accent);
    cursor: pointer;
}

/* Submit button */

.restock-waitlist-form button[type="submit"] {
    align-self: flex-start;
    /* Reserve width so the "busy" label swap never reflows the layout. */
    min-inline-size: 11ch;
    text-align: center;
    /* Warm signal-amber button treatment. */
    border: 0;
    color: #fff;
    background: linear-gradient(180deg,
        var(--restock-accent-soft) 0%,
        var(--restock-accent) 100%);
}

.restock-waitlist-form button[type="submit"]:hover {
    /* Keep the hover lightening modest so the top stop still clears AA with
       white text (color-mix 92% = #c7501f = 4.57:1). */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--restock-accent-soft) 92%, #fff) 0%,
        var(--restock-accent) 100%);
}

.restock-waitlist-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--restock-accent);
    outline-offset: 2px;
}

.restock-waitlist-form button[type="submit"]:disabled {
    opacity: 0.65;
    cursor: progress;
}

/* Status message */

.restock-waitlist__message {
    margin: 0;
    padding-block: 0.55em;
    padding-inline: 0.8em;
    border-radius: var(--restock-radius-sm);
    font-size: 0.9em;
    line-height: 1.45;
    border: 1px solid var(--restock-border);
    background: var(--restock-surface-2);
}

/* When hidden the element is removed from the box model, so it reserves no
   space and never causes layout shift before the first submit. */
.restock-waitlist__message[hidden] {
    display: none;
}

.restock-waitlist__message[data-state="success"] {
    position: relative;
    padding-inline-start: 2.1em;
    background: var(--restock-ok-bg);
    border-color: var(--restock-ok-border);
    color: var(--restock-ok-text);
    font-weight: 550;
}

/* Painted confirmation dot that reserves no extra box space. */
.restock-waitlist__message[data-state="success"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.85em;
    inset-block-start: 50%;
    inline-size: 0.5em;
    block-size: 0.5em;
    margin-block-start: -0.25em;
    border-radius: 50%;
    background: var(--restock-ember);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--restock-ember) 65%, transparent);
}

.restock-waitlist__message[data-state="error"] {
    background: var(--restock-err-bg);
    border-color: var(--restock-err-border);
    color: var(--restock-err-text);
}

/* Loading state */

.restock-waitlist-form[aria-busy="true"] {
    pointer-events: none;
}

/* Tasteful motion (opt-in, never for reduced-motion users) */

@media (prefers-reduced-motion: no-preference) {
    .restock-waitlist-form input[type="email"] {
        transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .restock-waitlist-form input[type="email"]:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--restock-accent) 22%, transparent);
    }

    .restock-waitlist-form button[type="submit"] {
        transition: opacity 0.16s ease;
    }

    .restock-waitlist__message {
        animation: restock-fade-in 0.22s ease both;
    }

    @keyframes restock-fade-in {
        from { opacity: 0; transform: translateY(-3px); }
        to   { opacity: 1; transform: none; }
    }

    /* One-shot success animation. Box-shadow/overlay only, so there is no
       layout shift. */
    .restock-waitlist__message--ignite {
        animation:
            restock-fade-in 0.22s ease both,
            restock-catch 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1 both;
    }

    .restock-waitlist__message--ignite::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(
            100deg,
            transparent 0%,
            color-mix(in srgb, var(--restock-ember) 38%, transparent) 45%,
            color-mix(in srgb, var(--restock-accent-soft) 30%, transparent) 55%,
            transparent 100%);
        background-size: 220% 100%;
        background-repeat: no-repeat;
        animation: restock-ember-sweep 0.9s ease-out 1 both;
    }

    /* The confirmation dot fires one expanding ring. */
    .restock-waitlist__message--ignite[data-state="success"]::before {
        animation: restock-beacon 0.95s ease-out 1 both;
    }

    @keyframes restock-catch {
        0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--restock-ember) 0%, transparent); }
        35%  { box-shadow: 0 0 20px 1px color-mix(in srgb, var(--restock-ember) 45%, transparent); }
        100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--restock-ember) 0%, transparent); }
    }

    @keyframes restock-ember-sweep {
        0%   { background-position: 160% 0; opacity: 0; }
        12%  { opacity: 1; }
        100% { background-position: -60% 0; opacity: 0; }
    }

    @keyframes restock-beacon {
        0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--restock-ember) 70%, transparent); }
        70%  { box-shadow: 0 0 0 0.7em color-mix(in srgb, var(--restock-ember) 0%, transparent); }
        100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--restock-ember) 0%, transparent); }
    }
}

/* Responsive: side-by-side on wider product columns */

@media (min-width: 30em) {
    .restock-waitlist-form {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .restock-waitlist-form label:not(.restock-waitlist__privacy) {
        flex: 1 1 12rem;
        min-inline-size: 0;
    }

    .restock-waitlist-form .restock-waitlist__privacy,
    .restock-waitlist-form .restock-waitlist__message {
        flex: 0 0 100%;
    }
}

/* Dark mode */

@media (prefers-color-scheme: dark) {
    .restock-waitlist {
        --restock-surface: rgba(255, 245, 235, 0.045);
        --restock-surface-2: rgba(255, 245, 235, 0.07);
        --restock-border: rgba(255, 255, 255, 0.14);
        --restock-border-strong: rgba(255, 255, 255, 0.24);
        --restock-muted: #b6a896;

        /* Brighter accent for dark mode contrast. */
        --restock-accent: #fb923c;
        --restock-accent-soft: #fdba74;
        --restock-ember: #fbbf24;

        --restock-ok-bg: rgba(251, 146, 60, 0.14);
        --restock-ok-border: rgba(251, 146, 60, 0.5);
        --restock-ok-text: #fdba74;
        --restock-err-bg: rgba(248, 113, 113, 0.14);
        --restock-err-border: rgba(248, 113, 113, 0.5);
        --restock-err-text: #f87171;
    }

    /* In dark mode the lit-button text needs deeper contrast on bright amber. */
    .restock-waitlist-form button[type="submit"] {
        color: #3a1c08;
    }
}

/* My Account waitlists */

.restock-account-waitlists__table {
    margin-block-start: 1em;
}

.restock-account-waitlists__empty {
    color: var(--restock-muted, #5b6472);
}

.restock-account-waitlists__unsubscribe {
    white-space: nowrap;
}

.restock-account-waitlists__message {
    margin-block-start: 1em;
}

.restock-account-waitlists__message[data-state="success"] {
    color: var(--restock-ok-text, #15803d);
}

.restock-account-waitlists__message[data-state="error"] {
    color: var(--restock-err-text, #b91c1c);
}

.restock-waitlist__variation-prompt {
    margin-block: 0 0.75em;
    color: var(--restock-muted);
    font-size: 0.9em;
    line-height: 1.45;
}

.restock-waitlist__social-proof {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-block: 0 0.75em;
    color: var(--restock-ok-text, #15803d);
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.4;
}

.restock-waitlist__social-proof-dot {
    inline-size: 0.55em;
    block-size: 0.55em;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    animation: restock-pulse 1.8s ease-in-out infinite;
}

@keyframes restock-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
    .restock-waitlist__social-proof-dot { animation: none; }
}