/* ════════════════════════════════════════════════════════════════════════
   Theme A — "Thunder"  (dark thunder · blue-cyan + yellow, modern gaming)

   A whole-site skin selected by the "theme" A/B experiment. It only loads
   when this variant is active (admin toolbar → Theme → a). Everything is an
   override of the design tokens defined in base.css, scoped to
   html[data-theme="a"] so it can never leak into other themes.

   Design language: modern, clean, semi-futuristic, gaming.
   - Header font  : Space Grotesk (display)
   - Body font    : Nunito Sans
   - Palette      : near-black "dark thunder" navy, electric blue-cyan accent,
                    lightning-yellow secondary accent.
   - Effects      : frosted background blur, rounded corners, raised-on-hover
                    elements with soft shadows.

   To swap image assets for this theme, drop files under
   wwwroot/images/themes/a/ and reference them here.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800&display=swap');

html[data-theme="a"] {
    /* Surfaces — near-black "dark thunder" navy with a blue undertone */
    --bg-darkest: #05070f;
    --bg-dark: #070a15;
    --bg-primary: #0a0e1b;
    --bg-card: #0f1626;
    --border-dark: #05070f;

    /* Text */
    --text-primary: #eaf1ff;
    --text-muted: #93a3c2;

    /* Accents — electric blue-cyan (thunder) + lightning yellow */
    --accent-blue: #2ad4ff;
    --accent-magenta: #5b8cff;
    --accent-yellow: #ffd23f;
    --accent-green: #34d399;

    /* Typography */
    --font-body: 'Nunito Sans', 'Segoe UI', Tahoma, sans-serif;
    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;

    /* Local thunder helpers (used by the component skins below) */
    --thunder-glow: rgba(42, 212, 255, 0.35);
    --thunder-glow-soft: rgba(42, 212, 255, 0.14);
    --thunder-bolt: rgba(255, 210, 63, 0.4);
    --thunder-gradient: linear-gradient(120deg, #2ad4ff 0%, #5b8cff 100%);
}

/* Ambient backdrop: a couple of soft thunder glows behind everything */
html[data-theme="a"] body {
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(60% 50% at 12% -5%, rgba(42, 212, 255, 0.10), transparent 60%),
        radial-gradient(55% 45% at 100% 0%, rgba(91, 140, 255, 0.10), transparent 55%);
    background-attachment: fixed;
}

/* ── Frosted, blurred header with a thunder underline glow ── */
html[data-theme="a"] .site-header {
    background: rgba(10, 14, 27, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(42, 212, 255, 0.22);
    box-shadow: 0 6px 30px -12px rgba(42, 212, 255, 0.30);
    position: sticky;
    top: 0;
    z-index: 1030;
}
/* Landing page: the bar overlays the hero and is fully transparent at the top, then turns
   into the solid frosted bar (same as other pages) once the page is scrolled (JS toggles
   .is-scrolled). It stays fixed so it behaves like the sticky header elsewhere. */
html[data-theme="a"] .site-header--transparent {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
html[data-theme="a"] .site-header--transparent.is-scrolled {
    background: rgba(10, 14, 27, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: rgba(42, 212, 255, 0.22);
    box-shadow: 0 6px 30px -12px rgba(42, 212, 255, 0.30);
}

/* Landing intro: the brand, menu links and account actions cascade in on first load,
   so the page entrance begins right from the header. One-shot CSS animation. */
@keyframes ha-header-intro { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
html[data-theme="a"] .site-header--intro .navbar-brand,
html[data-theme="a"] .site-header--intro .navbar-toggler,
html[data-theme="a"] .site-header--intro .main-nav .nav-item,
html[data-theme="a"] .site-header--intro .header-actions .nav-item {
    animation: ha-header-intro 0.55s ease both;
}
html[data-theme="a"] .site-header--intro .navbar-brand { animation-delay: 0.05s; }
html[data-theme="a"] .site-header--intro .main-nav .nav-item:nth-child(1) { animation-delay: 0.14s; }
html[data-theme="a"] .site-header--intro .main-nav .nav-item:nth-child(2) { animation-delay: 0.20s; }
html[data-theme="a"] .site-header--intro .main-nav .nav-item:nth-child(3) { animation-delay: 0.26s; }
html[data-theme="a"] .site-header--intro .main-nav .nav-item:nth-child(4) { animation-delay: 0.32s; }
html[data-theme="a"] .site-header--intro .header-actions .nav-item:nth-child(1) { animation-delay: 0.34s; }
html[data-theme="a"] .site-header--intro .header-actions .nav-item:nth-child(2) { animation-delay: 0.40s; }
html[data-theme="a"] .site-header--intro .header-actions .nav-item:nth-child(3) { animation-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) {
    html[data-theme="a"] .site-header--intro .navbar-brand,
    html[data-theme="a"] .site-header--intro .navbar-toggler,
    html[data-theme="a"] .site-header--intro .main-nav .nav-item,
    html[data-theme="a"] .site-header--intro .header-actions .nav-item { animation: none; }
}

html[data-theme="a"] .navbar-brand { font-family: var(--font-display); letter-spacing: -0.02em; }
html[data-theme="a"] .brand-accent { color: var(--accent-blue); }
html[data-theme="a"] .nav-link { font-weight: 600; }
html[data-theme="a"] .nav-link:hover { color: var(--accent-blue) !important; }

/* Slightly taller bar for breathing room */
html[data-theme="a"] .site-header .navbar { padding-top: 0.85rem; padding-bottom: 0.85rem; }
html[data-theme="a"] .navbar-brand { margin-right: 2rem; }

/* ── Main nav (left, near the logo) with a glowing active-page indicator ── */
html[data-theme="a"] .main-nav { gap: 0.35rem; }
html[data-theme="a"] .main-nav .nav-item { display: flex; align-items: stretch; }
html[data-theme="a"] .main-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
/* Active page: glowing blue text */
html[data-theme="a"] .main-nav .nav-link.active {
    color: var(--accent-blue) !important;
    text-shadow: 0 0 16px rgba(42, 212, 255, 0.7);
}
/* Glowing line pinned to the very top edge of the header (cancels the navbar's top padding). */
html[data-theme="a"] .main-nav .nav-link.active::before {
    content: "";
    position: absolute;
    top: -0.85rem;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-blue) 50%, transparent);
    box-shadow: 0 0 16px 1px rgba(42, 212, 255, 0.85);
    pointer-events: none;
}
/* Soft radial glow under the line so it blends into the background. */
html[data-theme="a"] .main-nav .nav-link.active::after {
    content: "";
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 40px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(42, 212, 255, 0.38), transparent 72%);
    pointer-events: none;
}

/* ── Right side actions: balance chip · bell · profile ── */
html[data-theme="a"] .header-actions { gap: 1rem; }

/* Credit balance chip with a + buy button */
html[data-theme="a"] .credit-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem 0.25rem 0.85rem;
    border-radius: 9999px;
    background: rgba(8, 12, 22, 0.65);
    border: 1px solid rgba(42, 212, 255, 0.20);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html[data-theme="a"] .credit-amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease;
}
html[data-theme="a"] .credit-amount:hover { color: var(--accent-blue); }
html[data-theme="a"] .credit-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    color: #1a1300;
    background: var(--accent-yellow);
    box-shadow: 0 0 0 1px rgba(255, 210, 63, 0.5), 0 0 14px rgba(255, 210, 63, 0.6);
    transition: transform 0.15s ease, filter 0.15s ease;
}
html[data-theme="a"] .credit-plus:hover { transform: translateY(-1px); filter: brightness(1.08); color: #1a1300; }

/* Notifications bell */
html[data-theme="a"] .bell-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
html[data-theme="a"] .bell-toggle svg { width: 16px; height: 16px; transition: fill 0.15s ease, filter 0.15s ease; }
html[data-theme="a"] .bell-toggle:hover,
html[data-theme="a"] .bell-toggle[aria-expanded="true"] {
    background: transparent;
    color: var(--accent-blue) !important;
}
/* Hover/open: fill the bell instead of drawing a circle around it */
html[data-theme="a"] .bell-toggle:hover svg,
html[data-theme="a"] .bell-toggle[aria-expanded="true"] svg {
    fill: currentColor;
    filter: drop-shadow(0 0 8px rgba(42, 212, 255, 0.6));
}
html[data-theme="a"] .bell-toggle::after { display: none; }
html[data-theme="a"] .profile-toggle { font-weight: 700; }
/* Outline chevron caret (instead of Bootstrap's filled triangle) */
html[data-theme="a"] .profile-toggle.dropdown-toggle::after {
    border: 0;
    width: 0.46em;
    height: 0.46em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 0.55em;
    margin-top: -0.18em;
    vertical-align: middle;
    transition: transform 0.15s ease;
}
html[data-theme="a"] .profile-toggle.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 0.12em;
}

/* Profile / bell / notification dropdowns — themed dark glass menu */
html[data-theme="a"] .navbar .dropdown-toggle::after { vertical-align: 0.15em; }
html[data-theme="a"] .navbar .dropdown-menu {
    background: rgba(15, 22, 38, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(42, 212, 255, 0.18);
    border-radius: 0.75rem;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
    padding: 0.35rem;
    margin-top: 0.5rem;
}
html[data-theme="a"] .navbar .dropdown-item {
    color: var(--text-primary);
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
}
html[data-theme="a"] .navbar .dropdown-item:hover,
html[data-theme="a"] .navbar .dropdown-item:focus {
    background: rgba(42, 212, 255, 0.14);
    color: var(--accent-blue);
}
html[data-theme="a"] .navbar .dropdown-header {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}
/* Notifications menu (empty state) */
html[data-theme="a"] .notif-menu { min-width: 15rem; }
html[data-theme="a"] .notif-menu .notif-empty {
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 0.6rem 0.85rem 0.7rem;
    text-align: center;
}

/* ── Buttons: gradient thunder fill, pill, raised-on-hover with soft glow ── */
html[data-theme="a"] .btn-get-started,
html[data-theme="a"] .btn-signin {
    background: var(--thunder-gradient);
    color: #04121b !important;
    border: none;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-weight: 700;
    box-shadow: 0 10px 24px -10px var(--thunder-glow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
html[data-theme="a"] .btn-get-started:hover,
html[data-theme="a"] .btn-signin:hover {
    color: #04121b !important;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 18px 34px -12px var(--thunder-glow);
}

/* Outline CTA uses the yellow lightning accent */
html[data-theme="a"] .btn-cta-outline {
    border: 2px solid rgba(255, 210, 63, 0.7);
    color: var(--accent-yellow);
    border-radius: 9999px;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
html[data-theme="a"] .btn-cta-outline:hover {
    background: var(--accent-yellow);
    color: #1a1300;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px var(--thunder-bolt);
}

/* ── Cards: rounded, glassy, raise + soft shadow on hover ── */
html[data-theme="a"] .content-card,
html[data-theme="a"] .card {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.65), rgba(12, 19, 34, 0.75));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(42, 212, 255, 0.14);
    border-radius: 1.1rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="a"] .content-card--highlight {
    border-color: rgba(42, 212, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(42, 212, 255, 0.12), 0 20px 44px -22px var(--thunder-glow);
}
html[data-theme="a"] .content-card--interactive:hover {
    transform: translateY(-4px);
    border-color: rgba(42, 212, 255, 0.55);
    box-shadow: 0 22px 48px -20px var(--thunder-glow);
}
html[data-theme="a"] .content-card h5,
html[data-theme="a"] .content-card .content-card-title {
    font-family: var(--font-display);
}

/* ── Page header band: thunder radial wash ── */
html[data-theme="a"] .page-header {
    background:
        radial-gradient(110% 120% at 50% -10%, rgba(42, 212, 255, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, #0c1424 0%, var(--bg-primary) 70%);
    border-bottom: 1px solid rgba(42, 212, 255, 0.12);
}
html[data-theme="a"] .page-header h1 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ── Footer (Thunder): single row — copyright left, Support/Privacy right ── */
html[data-theme="a"] .site-footer {
    background: linear-gradient(180deg, transparent, rgba(5, 7, 15, 0.6));
    border-top: 1px solid rgba(42, 212, 255, 0.12);
}
html[data-theme="a"] .footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}
html[data-theme="a"] .footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
html[data-theme="a"] .footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; }
html[data-theme="a"] .footer-links a:hover { color: var(--accent-blue); }
html[data-theme="a"] .footer-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
html[data-theme="a"] .footer-copy a { color: var(--text-muted); text-decoration: none; font-weight: 700; }
html[data-theme="a"] .footer-copy a:hover { color: var(--accent-blue); }

/* ── Mobile header: square hamburger, bell beside it, full-page overlay menu ── */
html[data-theme="a"] .navbar-toggler { border: 0; border-radius: 0; padding: 0.25rem 0.4rem; box-shadow: none; }
html[data-theme="a"] .navbar-toggler:focus { box-shadow: none; outline: none; }

@media (max-width: 767.98px) {
    /* Bell + hamburger grouped at the top-right, above the overlay */
    html[data-theme="a"] .header-mobile-bar {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-left: auto;
        position: relative;
        z-index: 5;
    }
    html[data-theme="a"] .navbar-brand { position: relative; z-index: 5; }
    html[data-theme="a"] .header-mobile-bar .bell-toggle svg { width: 20px; height: 20px; }

    /* Expanded menu covers the page */
    html[data-theme="a"] .site-header .navbar-collapse {
        position: fixed;
        inset: 0;
        height: auto !important;
        z-index: 4;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 5.5rem 1.5rem 2.5rem;
        background: rgba(6, 9, 18, 0.98);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        overflow-y: auto;
    }
    html[data-theme="a"] .site-header .navbar-collapse.show,
    html[data-theme="a"] .site-header .navbar-collapse.collapsing {
        display: flex !important;
    }
    html[data-theme="a"] .site-header .navbar-collapse.collapsing { transition: none !important; }
    html[data-theme="a"] .site-header .navbar-collapse.show { animation: ha-menu-in 0.2s ease; }

    /* Big stacked nav links */
    html[data-theme="a"] .navbar-collapse .main-nav { width: 100%; gap: 0.1rem; }
    html[data-theme="a"] .navbar-collapse .main-nav .nav-link {
        font-family: var(--font-display);
        font-size: 1.5rem;
        padding: 0.55rem 0;
    }
    html[data-theme="a"] .navbar-collapse .main-nav .nav-link.active::before,
    html[data-theme="a"] .navbar-collapse .main-nav .nav-link.active::after { display: none; }

    /* Account actions stack below the menu */
    html[data-theme="a"] .navbar-collapse .header-actions {
        width: 100%;
        gap: 1rem;
        margin-top: 1.75rem;
        align-items: flex-start;
    }
    html[data-theme="a"] .navbar-collapse .credit-chip { font-size: 1.05rem; }

    /* Profile becomes a section after the menu, with its links expanded */
    html[data-theme="a"] .header-profile-section {
        width: 100%;
        margin-top: 0.75rem;
        padding-top: 1.4rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    html[data-theme="a"] .header-profile-name {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--text-primary);
        margin-bottom: 0.4rem;
    }
    html[data-theme="a"] .header-profile-link {
        display: block;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 1.05rem;
        padding: 0.5rem 0;
        transition: color 0.15s ease;
    }
    html[data-theme="a"] .header-profile-link:hover { color: var(--accent-blue); }
}

@keyframes ha-menu-in { from { opacity: 0; } to { opacity: 1; } }