/**
 * Aurline storefront — dark theme layer inspired by CO2line (carbon + mint glow).
 * Load after main.css. Scoped to [data-bs-theme=dark].
 */

[data-bs-theme="dark"] {
    --nx-co2-mint: #68f4bd;
    --nx-co2-mint-soft: rgba(104, 244, 189, 0.14);
}

/* --- Top info bar: carbon gradient instead of flat brand green --- */
[data-bs-theme="dark"] .ghead-topbar.bg-primary,
[data-bs-theme="dark"] .ghead-topbar.bg-meat-primary {
    background: linear-gradient(
        115deg,
        #05080c 0%,
        #0b1a17 24%,
        #081420 52%,
        #0b1a17 76%,
        #05080c 100%
    ) !important;
    background-size: 240% 240%;
    animation: nx-co2-bar-flow 26s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

[data-bs-theme="dark"] .ghead-topbar.bg-primary::after,
[data-bs-theme="dark"] .ghead-topbar.bg-meat-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(104, 244, 189, 0.07) 48%,
        transparent 100%
    );
    animation: nx-co2-shimmer 11s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nx-co2-bar-flow {
    0%,
    100% {
        background-position: 0% 40%;
    }
    50% {
        background-position: 100% 60%;
    }
}

@keyframes nx-co2-shimmer {
    0%,
    100% {
        opacity: 0.25;
        transform: translateX(-35%);
    }
    50% {
        opacity: 0.9;
        transform: translateX(35%);
    }
}

/* --- Main navbar: glass card --- */
[data-bs-theme="dark"] .gshop-navbar.bg-white {
    background: rgba(15, 23, 42, 0.58) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    border: 1px solid rgba(104, 244, 189, 0.14);
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .gshop-navbar-right::before {
    background-color: rgba(104, 244, 189, 0.12) !important;
}

[data-bs-theme="dark"] .gshop-navmenu ul li a {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .gshop-navmenu ul li a:hover {
    color: var(--nx-co2-mint) !important;
}

[data-bs-theme="dark"] .gshop-navbar .category-dropdown-btn {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .gshop-navbar .gshop-header-search path,
[data-bs-theme="dark"] .gshop-navbar .gshop-header-user path,
[data-bs-theme="dark"] .gshop-navbar .gshop-header-cart path {
    fill: #cbd5e1;
    stroke: #cbd5e1;
}

[data-bs-theme="dark"] .gshop-navbar .gshop-header-contact .text-muted {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .gshop-navbar .gshop-header-contact h6 {
    color: #f1f5f9 !important;
}

/* --- Breadcrumb / page title band --- */
[data-bs-theme="dark"] .gstore-breadcrumb {
    background: #070b11 !important;
    position: relative;
    overflow: hidden;
}

[data-bs-theme="dark"] .gstore-breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
            ellipse 110% 85% at 14% 22%,
            rgba(104, 244, 189, 0.15),
            transparent 58%
        ),
        radial-gradient(
            ellipse 80% 65% at 88% 78%,
            rgba(56, 189, 248, 0.09),
            transparent 52%
        ),
        linear-gradient(168deg, #04070c 0%, #0f172a 40%, #162a3d 100%);
    animation: nx-co2-breadcrumb-drift 30s ease-in-out infinite alternate;
}

[data-bs-theme="dark"] .gstore-breadcrumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.42;
    background-image: linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.028) 1px,
            transparent 1px
        );
    background-size: 52px 52px;
    mask-image: radial-gradient(
        ellipse 78% 68% at 50% 36%,
        #000 12%,
        transparent 72%
    );
    pointer-events: none;
}

@keyframes nx-co2-breadcrumb-drift {
    0% {
        transform: scale(1) translate(-1%, -1%);
    }
    100% {
        transform: scale(1.04) translate(2%, 1.5%);
    }
}

[data-bs-theme="dark"] .gstore-breadcrumb .container {
    position: relative;
    z-index: 1;
}

[data-bs-theme="dark"] .gstore-breadcrumb img {
    display: none !important;
}

/* Theme attribute is set on <html> (see app.js setDarkMode); hide grocery SVG/raster decor on desktop too */
html[data-bs-theme="dark"] .gstore-breadcrumb img,
html[data-bs-theme="dark"] .gstore-breadcrumb .vector-shape {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

[data-bs-theme="dark"] .gstore-breadcrumb h2 {
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
    letter-spacing: -0.02em;
}

[data-bs-theme="dark"] .gstore-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(226, 232, 240, 0.45);
}

[data-bs-theme="dark"] .gstore-breadcrumb .breadcrumb-item a {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .gstore-breadcrumb .breadcrumb-item a:hover {
    color: var(--nx-co2-mint);
}

/* Cart badge */
[data-bs-theme="dark"] .cart-counter.badge.bg-primary {
    background: linear-gradient(145deg, #68f4bd, #3ecfae) !important;
    color: #041016 !important;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95);
}

/* Sticky header */
[data-bs-theme="dark"] .header-sticky.sticky-on {
    background-color: rgba(8, 12, 18, 0.92) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.42) !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-bs-theme="dark"] .ghead-topbar.bg-primary,
    [data-bs-theme="dark"] .ghead-topbar.bg-meat-primary,
    [data-bs-theme="dark"] .ghead-topbar.bg-primary::after,
    [data-bs-theme="dark"] .ghead-topbar.bg-meat-primary::after,
    [data-bs-theme="dark"] .gstore-breadcrumb::before {
        animation: none !important;
    }

    [data-bs-theme="dark"] .ghead-topbar.bg-primary,
    [data-bs-theme="dark"] .ghead-topbar.bg-meat-primary {
        background-size: 100% 100% !important;
    }
}