/* ─── Prime Day theme ───────────────────────────────────────────────────────
   Overrides the CSS custom properties defined in globals.css.
   Background turns deep "squid ink" navy, primary becomes Prime blue and the
   secondary takes the iconic Amazon orange.
   Adds Prime Day components: neon glow overlay with rising sparkles, animated
   banner, deal card accents, badge, price highlight and stock progress bar.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
    /* Deep navy background */
    --background: oklch(0.17 0.03 260);
    --foreground: oklch(0.95 0.015 248);

    --card: oklch(0.22 0.038 263);
    --card-foreground: oklch(0.95 0.015 248);

    --popover: oklch(0.22 0.038 263);
    --popover-foreground: oklch(0.95 0.015 248);

    /* Prime blue primary */
    --primary: oklch(0.69 0.14 232);
    --primary-foreground: oklch(0.15 0.03 260);

    /* Amazon orange secondary */
    --secondary: oklch(0.77 0.17 65);
    --secondary-foreground: oklch(0.15 0.03 260);

    --muted: oklch(0.27 0.045 264);
    --muted-foreground: oklch(0.71 0.047 257);

    /* Bright cyan accent */
    --accent: oklch(0.80 0.12 225);
    --accent-foreground: oklch(0.15 0.03 260);

    --destructive: oklch(0.60 0.245 27.325);

    --border: oklch(0.72 0.09 235 / 20%);
    --input: oklch(1 0 0 / 12%);
    --ring: oklch(0.69 0.14 232);

    --radius: 0.625rem;

    --sidebar: oklch(0.20 0.035 262);
    --sidebar-foreground: oklch(0.95 0.015 248);
    --sidebar-primary: oklch(0.69 0.14 232);
    --sidebar-primary-foreground: oklch(0.15 0.03 260);
    --sidebar-accent: oklch(0.27 0.045 264);
    --sidebar-accent-foreground: oklch(0.95 0.015 248);
    --sidebar-border: oklch(0.72 0.09 235 / 15%);
    --sidebar-ring: oklch(0.69 0.14 232);
}

/* ── Logo on dark background ────────────────────────────────────────────── */
.logo-on-light {
    display: none;
}

.logo-on-dark {
    display: block;
}

/* ── Neon glow overlay + rising sparkles ────────────────────────────────── */
@keyframes prime-glow-pulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 0.95;
    }
}

@keyframes prime-spark-rise {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    15% {
        opacity: 0.9;
    }
    85% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(-110vh) scale(0.6);
        opacity: 0;
    }
}

/* Glow container — only visible with the Prime Day theme */
.theme-prime-glow-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.theme-prime-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 45% at 50% -10%, oklch(0.69 0.14 232 / 22%), transparent 70%),
        radial-gradient(45% 35% at 85% 105%, oklch(0.77 0.17 65 / 10%), transparent 70%),
        radial-gradient(50% 40% at 10% 100%, oklch(0.69 0.14 232 / 10%), transparent 70%);
    animation: prime-glow-pulse 7s ease-in-out infinite;
}

.theme-prime-spark {
    position: absolute;
    bottom: -5vh;
    color: oklch(0.80 0.12 225);
    user-select: none;
    animation: prime-spark-rise linear infinite;
    text-shadow: 0 0 6px oklch(0.69 0.14 232 / 80%);
}

.theme-prime-spark-orange {
    color: oklch(0.77 0.17 65);
    text-shadow: 0 0 6px oklch(0.77 0.17 65 / 70%);
}

/* ── Animated promo banner ──────────────────────────────────────────────── */
@keyframes prime-sheen {
    0% {
        transform: translateX(-120%) skewX(-15deg);
    }
    60%,
    100% {
        transform: translateX(320%) skewX(-15deg);
    }
}

.theme-prime-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,
        oklch(0.38 0.12 255) 0%,
        oklch(0.62 0.14 238) 50%,
        oklch(0.45 0.13 250) 100%);
    border-bottom: 2px solid oklch(0.69 0.14 232 / 60%);
    box-shadow: 0 6px 24px oklch(0.69 0.14 232 / 25%);
}

.theme-prime-banner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(90deg,
        transparent,
        oklch(1 0 0 / 25%),
        transparent);
    animation: prime-sheen 5s ease-in-out infinite;
    pointer-events: none;
}

/* ── Prime Day badge ────────────────────────────────────────────────────── */
@keyframes prime-badge-glow {
    0%,
    100% {
        box-shadow: 0 0 10px oklch(0.69 0.14 232 / 45%);
    }
    50% {
        box-shadow: 0 0 18px oklch(0.69 0.14 232 / 80%);
    }
}

.theme-prime-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: linear-gradient(135deg,
        oklch(0.85 0.11 215) 0%,
        oklch(0.69 0.14 232) 100%);
    color: oklch(0.15 0.03 260);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    animation: prime-badge-glow 3s ease-in-out infinite;
}

/* ── Deal card accents ──────────────────────────────────────────────────── */
.theme-prime-card {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.theme-prime-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        oklch(0.80 0.12 225) 0%,
        oklch(0.69 0.14 232) 50%,
        oklch(0.77 0.17 65) 100%);
}

.theme-prime-card:hover {
    box-shadow:
        0 0 0 1px oklch(0.69 0.14 232 / 35%),
        0 8px 30px oklch(0.69 0.14 232 / 20%);
    transform: translateY(-2px);
}

/* ── Deal price highlight ───────────────────────────────────────────────── */
.theme-prime-price {
    color: oklch(0.85 0.11 215);
    font-weight: 700;
    text-shadow: 0 0 12px oklch(0.69 0.14 232 / 55%);
}

/* ── Stock progress bar ─────────────────────────────────────────────────── */
@keyframes prime-stripes {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 24px 0, 0 0;
    }
}

.theme-prime-progress {
    position: relative;
    height: 0.5rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background: oklch(0.27 0.045 264);
}

.theme-prime-progress-bar {
    height: 100%;
    border-radius: 9999px;
    background-image:
        repeating-linear-gradient(45deg,
            oklch(1 0 0 / 18%) 0 6px,
            transparent 6px 12px),
        linear-gradient(90deg,
            oklch(0.85 0.11 215) 0%,
            oklch(0.69 0.14 232) 70%,
            oklch(0.77 0.17 65) 100%);
    background-size: 24px 24px, 100% 100%;
    animation: prime-stripes 1s linear infinite;
}

/* ── CTA pill ───────────────────────────────────────────────────────────── */
.theme-prime-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background: oklch(1 0 0 / 95%);
    color: oklch(0.30 0.11 250);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.theme-prime-cta:hover {
    background: oklch(0.97 0.015 248);
    transform: translateY(-1px);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .theme-prime-glow,
    .theme-prime-badge,
    .theme-prime-progress-bar,
    .theme-prime-banner::after {
        animation: none;
    }

    .theme-prime-spark {
        display: none;
    }
}

/* ── Brevo newsletter widget ────────────────────────────────────────────── */
/* The Brevo form markup hard-codes dark text colors in inline styles; on
   this dark theme they must be lightened to stay readable. The email field
   keeps Brevo's white background, so its input text stays dark. */
#sib-form .sib-form-block,
#sib-form .entry__label,
#sib-form .entry__choice span {
    color: var(--foreground) !important;
}

#sib-form .entry__specification {
    color: var(--muted-foreground) !important;
}

#sib-form .entry__field .input {
    color: #3c4858;
}