/**
 * Modern Shop Theme — dark mode overrides
 * ------------------------------------------------------------------
 * Loaded alongside style.css when:
 *   - color_mode = 'dark'  → body gets .dark-mode class
 *   - color_mode = 'auto'  → JS toggles .dark-mode based on prefers-color-scheme
 *
 * This file overrides the design tokens under :root and applies the
 * structural tweaks that differ from the light theme (e.g. header has
 * a bottom border, hero uses a different gradient, badges get borders).
 * ------------------------------------------------------------------
 */

body.dark-mode,
.dark-mode {
    /* Brand stays the same primary, but secondary is cyan */
    --secondary:         #00ADB5;
    --secondary-gradient:linear-gradient(135deg, #00ADB5 0%, #00FFF5 100%);

    /* Surfaces (dark) */
    --bg-body:           #0B0F17;
    --card-bg:           #161C28;
    --card-border:       #232D3F;
    --card-border-strong:#2A3548;
    --header-bg:         rgba(22, 28, 40, 0.85);
    --header-blur:       blur(16px);
    --input-bg:          #0F141C;
    --input-bg-focus:    #161C28;
    --input-border:      var(--card-border);
    --input-focus-ring:  0 0 15px rgba(255, 46, 99, 0.2);
    --thumb-bg:          #0F141C;
    --timer-bg:           #0F141C;
    --timer-color:        var(--secondary);

    /* Text */
    --text-main:         #E2E8F0;
    --text-muted:        #94A3B8;
    --text-strong:       #FFFFFF;
    --text-heading:      #FFFFFF;
    --text-white:        #FFFFFF;
    --footer-text:       #94A3B8;
    --footer-text-muted: #94A3B8;
    --footer-divider:    var(--card-border);
    --footer-bg:         #080C14;
    --mobile-bar-bg:     var(--card-bg);
    --mobile-bar-shadow: 0 -4px 25px rgba(0,0,0,0.4);
    --mobile-item-color:var(--text-muted);

    /* Shadows */
    --shadow-soft:       0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-glow:       0 0 25px rgba(255, 46, 99, 0.35);
    --shadow-cyan-glow:  0 0 25px rgba(0, 173, 181, 0.3);
    --shadow-hover-card: 0 10px 30px rgba(0,0,0,0.5);

    /* Hero card — dark version */
    --hero-bg:           linear-gradient(135deg, #1F112D 0%, #111B2E 100%);
    --hero-glow:         rgba(255, 46, 99, 0.25);
    --hero-tag-bg:       rgba(255, 46, 99, 0.15);
    --hero-tag-color:    #FF6B6B;
    --hero-btn-bg:       var(--primary-gradient);
    --hero-btn-color:    #FFFFFF;
    --hero-btn-shadow:   var(--shadow-glow);

    /* Flash sale side card */
    --side-card-border:  rgba(255, 46, 99, 0.3);
    --badge-flash-bg:    rgba(255, 46, 99, 0.15);
    --badge-flash-color: var(--primary);
    --side-buy-bg:       var(--secondary-gradient);
    --side-buy-color:    #0F141C;
    --side-buy-shadow:   var(--shadow-cyan-glow);

    /* Feature icon — cyan accent in dark */
    --feature-icon-bg:   rgba(0, 173, 181, 0.12);
    --feature-icon-color:var(--secondary);

    /* Article thumb / link — cyan accent */
    --article-thumb-bg:  linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --article-thumb-icon:var(--secondary);
    --article-link-color:var(--secondary);

    /* View-all chip */
    --view-all-bg:       rgba(255, 46, 99, 0.1);

    /* Cart add-to-cart button */
    --btn-add-cart-bg:   #0F141C;
    --btn-add-cart-color:#FFFFFF;
}

/* ----------------------------------------------------------------- */
/* Structural tweaks unique to dark mode                            */
/* ----------------------------------------------------------------- */

/* Top banner: multi-color cyan/magenta gradient */
body.dark-mode .top-banner {
    background: linear-gradient(90deg, #FF2E63, #7928CA, #00ADB5);
    background-size: 200% 200%;
    animation: gradientBG 6s ease infinite;
}

/* Header: dark uses border-bottom + the header bg variable */
body.dark-mode header {
    border-bottom: 1px solid var(--card-border);
    box-shadow: none;
}

/* Search box dark: text color + placeholder */
body.dark-mode .search-box input {
    color: var(--text-white);
    border: 1px solid var(--card-border);
}
body.dark-mode .search-box input::placeholder { color: var(--text-muted); }

/* Auth button: dark bg */
body.dark-mode .btn-auth {
    border: 1px solid var(--card-border);
    background: var(--input-bg);
    color: var(--text-white);
}
body.dark-mode .btn-auth:hover {
    box-shadow: 0 0 15px rgba(255, 46, 99, 0.15);
}

/* Cart button hover */
body.dark-mode .cart-btn:hover {
    box-shadow: 0 0 30px rgba(255, 46, 99, 0.5);
}

/* Theme toggle */
body.dark-mode .theme-toggle {
    background: var(--input-bg);
    color: var(--text-white);
}

/* Header nav: dark border-top + card bg */
body.dark-mode .header-nav {
    border-top: 1px solid var(--card-border);
    background: var(--card-bg);
}
body.dark-mode .nav-item { color: var(--text-muted); }

/* nav active underline gets a glow */
body.dark-mode .nav-item.active::after,
body.dark-mode .section-title::before {
    box-shadow: var(--shadow-glow);
}

/* Hero card glow positioning */
body.dark-mode .hero-main-card::before {
    top: -40%;
    left: -20%;
    width: 320px;
    height: 320px;
    filter: blur(60px);
}

/* Hero card border in dark */
body.dark-mode .hero-main-card { border: 1px solid #332347; }

/* Hero btn hover */
body.dark-mode .hero-btn:hover {
    box-shadow: 0 0 35px rgba(255, 46, 99, 0.6);
    color: #fff;
}

/* Badge flash border */
body.dark-mode .badge-flash {
    border: 1px solid rgba(255, 46, 99, 0.3);
}

/* Timer unit border + cyan glow */
body.dark-mode .timer-unit {
    border: 1px solid var(--card-border);
    box-shadow: 0 0 10px rgba(0, 173, 181, 0.15);
}

/* Side price glow */
body.dark-mode .side-price .current {
    text-shadow: 0 0 12px rgba(255, 46, 99, 0.3);
}

/* Progress bar */
body.dark-mode .progress-bar {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
}
body.dark-mode .progress-fill { box-shadow: var(--shadow-glow); }

/* Categories: hover uses cyan accent */
body.dark-mode .cat-card { border: 1px solid var(--card-border); }
body.dark-mode .cat-icon {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    color: var(--secondary);
}
body.dark-mode .cat-card:hover {
    border-color: var(--secondary);
    box-shadow: var(--shadow-cyan-glow);
}
body.dark-mode .cat-card:hover .cat-icon {
    background: var(--secondary-gradient);
    color: #0F141C;
}

/* Feature box hover */
body.dark-mode .feature-box { border: 1px solid var(--card-border); }
body.dark-mode .feature-box:hover {
    border-color: rgba(0, 173, 181, 0.4);
}
body.dark-mode .feature-icon {
    border: 1px solid rgba(0, 173, 181, 0.3);
}

/* View-all chip */
body.dark-mode .view-all {
    border: 1px solid rgba(255, 46, 99, 0.2);
}
body.dark-mode .view-all:hover { box-shadow: var(--shadow-glow); }

/* Product card */
body.dark-mode .product-card { border: 1px solid var(--card-border); }
body.dark-mode .product-card:hover {
    border-color: rgba(255, 46, 99, 0.4);
    box-shadow: var(--shadow-hover-card);
}
body.dark-mode .product-thumb {
    background: var(--thumb-bg);
    border: 1px solid var(--card-border);
}
body.dark-mode .product-thumb i { color: #334155; }
body.dark-mode .product-card:hover .product-thumb i {
    filter: drop-shadow(0 0 15px rgba(255, 46, 99, 0.4));
}

/* Article card */
body.dark-mode .article-card { border: 1px solid var(--card-border); }
body.dark-mode .article-card:hover {
    border-color: rgba(0, 173, 181, 0.4);
    box-shadow: var(--shadow-hover-card);
}
body.dark-mode .article-thumb { border-bottom: 1px solid var(--card-border); }
body.dark-mode .article-card:hover .article-thumb i {
    filter: drop-shadow(0 0 15px rgba(0, 173, 181, 0.5));
}
body.dark-mode .article-link:hover { color: var(--primary); }

/* Add-to-cart button dark */
body.dark-mode .btn-add-cart {
    border: 1px solid var(--card-border);
    background: var(--btn-add-cart-bg);
    color: var(--btn-add-cart-color);
}
body.dark-mode .btn-add-cart:hover { border-color: transparent; }

/* Footer */
body.dark-mode footer {
    border-top: 1px solid var(--card-border);
}
body.dark-mode .footer-col h3::after { box-shadow: var(--shadow-glow); }
body.dark-mode .footer-links a:hover { color: var(--primary); }

/* Mobile bar */
body.dark-mode .mobile-bottom-bar {
    background: var(--mobile-bar-bg);
    border-top: 1px solid var(--card-border);
}

/* Generic components */
body.dark-mode .btn-secondary-large {
    background: var(--input-bg);
    color: var(--text-white);
}
body.dark-mode .qty-input { color: var(--text-white); }
body.dark-mode .payment-option { color: var(--text-white); }
body.dark-mode select option { background: var(--card-bg); color: var(--text-white); }

/* Auto mode: when color_mode=auto and the OS prefers dark, JS adds
   the .dark-mode class to <body>. CSS-only fallback is intentionally
   omitted to avoid duplicating the entire rule-set above. */