/* =====================================================
   DARKMODE.CSS — Complete Fix
   Drop-in replacement for your old darkmode.css.

   HOW IT WORKS:
   1. Override CSS variables at body.dark-mode level
      → every element using var(--...) auto-switches.
   2. Override hardcoded hex colors for each component
      → catches all the #fff / #0a0e1e / #555 etc.
   3. Remove generic/wrong selectors (.card, .box,
      .container, .section) that conflict with layout.
===================================================== */


/* =========================
   Theme Toggle Button
========================= */
.toggle-track,
.toggle-thumb,
.toggle-icon {
    display: none !important;
}

.theme-toggle-item {
    display: flex;
    align-items: center;
    margin-left: 12px;
    list-style: none;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: all .3s ease;
    padding: 0;
}

.theme-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.theme-toggle:active {
    transform: scale(.95);
}

body.dark-mode .theme-toggle {
    background: #374151;
    color: #FFD54F;
}


/* =========================
   LIGHT THEME (base)
========================= */
body {
    background: #ffffff;
    color: #222222;
    transition: background .3s, color .3s;
}


/* =====================================================
   DARK THEME
   Step 1: CSS variable overrides — handles all
   elements that correctly use var(--...)
===================================================== */
body.dark-mode {
    background: #0f1117;
    color: #e2e8f0;

    /* Neutrals → dark equivalents */
    --ink-900:  #f1f5f9;
    --ink-800:  #e2e8f0;
    --ink-700:  #cbd5e1;
    --ink-600:  #94a3b8;
    --ink-500:  #64748b;
    --ink-400:  #475569;
    --ink-300:  #334155;
    --ink-200:  #1e293b;
    --ink-100:  #162032;
    --ink-50:   #0f1829;
    --white:    #1a2332;

    /* Navy — stays navy-ish, just slightly lighter */
    --navy-50:  #0d1a2e;
    --navy-100: #1a2d4a;

    /* Shadows — deepen them */
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.25);
    --shadow-sm: 0 4px 16px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.2);
    --shadow:    0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.55), 0 6px 20px rgba(0,0,0,0.3);
    --shadow-xl: 0 32px 80px rgba(0,0,0,0.6),  0 12px 32px rgba(0,0,0,0.35);
}


/* =====================================================
   DARK THEME
   Step 2: Component-by-component overrides for
   every hardcoded color that doesn't use var(--...)
===================================================== */

/* --- NAVIGATION --- */
body.dark-mode nav {
    background: rgba(15, 17, 23, 0.96) !important;
    border-bottom-color: rgba(255,255,255,0.07);
}

body.dark-mode .logo-text    { color: #f1f5f9; }
body.dark-mode .logo-sub     { color: #7c9ee8; }
body.dark-mode .nav-links a  { color: #94a3b8; }
body.dark-mode .nav-links a:hover {
    color: #e2e8f0;
    background: rgba(255,255,255,0.06);
}

body.dark-mode .dropdown-menu {
    background: #161d2e;
    border-color: #1e293b;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
body.dark-mode .dropdown-menu a { color: #94a3b8; }
body.dark-mode .dropdown-menu a:hover {
    color: #e2e8f0;
    background: rgba(255,255,255,0.06);
}

body.dark-mode .hamburger { color: #e2e8f0; }

/* --- MOBILE NAV --- */
body.dark-mode #mobile-nav {
    background: rgba(15,17,23,0.98);
}
body.dark-mode #mobile-nav a {
    color: #e2e8f0;
    border-bottom-color: #1e293b;
}
body.dark-mode #mobile-nav a:hover { color: #7c9ee8; }
body.dark-mode #close-nav { color: #94a3b8; }


/* --- SECTION HEADERS --- */
body.dark-mode .section-tag {
    background: #161d2e;
    border-color: #2d3a52;
    color: #7c9ee8;
}
body.dark-mode .section-title  { color: #f1f5f9; }
body.dark-mode .section-titles { color: #f1f5f9; }
body.dark-mode .section-sub    { color: #64748b; }


/* --- HERO --- */
body.dark-mode .hero-wrapper {
    background: linear-gradient(160deg, #0d1117 0%, #111827 55%, #131020 100%);
}
body.dark-mode .hero h1 { color: #f1f5f9; }
body.dark-mode .hero-sub { color: #64748b; }
body.dark-mode .hero-stats { border-top-color: #1e293b; }
body.dark-mode .hero-stat-label { color: #475569; }

body.dark-mode .hero-img-badge {
    background: rgba(22, 29, 46, 0.97);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
body.dark-mode .big  { color: #f1f5f9; }
body.dark-mode .small { color: #64748b; }
body.dark-mode .badge-icon { background: #1e293b; }


/* --- PRODUCTS SECTION --- */
body.dark-mode #products {
    background: #0d1117;
    border-top-color: #1e293b;
    border-bottom-color: #1e293b;
}
body.dark-mode .product-card {
    background: #161d2e;
    border-color: #1e293b;
}
body.dark-mode .product-card:hover {
    border-color: #2d3a52;
}
body.dark-mode .product-card h3 { color: #f1f5f9; }
body.dark-mode .product-card p  { color: #64748b; }
body.dark-mode .product-card-icon {
    background: linear-gradient(135deg, #1e293b, #162032);
    border-color: #2d3a52;
}


/* --- FEATURES SECTION --- */
body.dark-mode #features { background: #0f1117; }
body.dark-mode .feature-card {
    background: #161d2e;
    border-color: #1e293b;
}
body.dark-mode .feature-card:hover {
    border-color: #2d3a52;
}
body.dark-mode .feature-card h4 { color: #f1f5f9; }
body.dark-mode .feature-card p  { color: #64748b; }
body.dark-mode .feature-icon {
    background: linear-gradient(135deg, #1e293b, #162032);
    border-color: #2d3a52;
}


/* --- WHY SECTION --- */
body.dark-mode #why {
    background: linear-gradient(160deg, #0d1117 0%, #111827 100%);
    border-top-color: #1e293b;
}
body.dark-mode .why-item {
    background: rgba(22, 29, 46, 0.8);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .why-item:hover {
    background: #161d2e;
}
body.dark-mode .why-item h4 { color: #f1f5f9; }
body.dark-mode .why-item p  { color: #64748b; }


/* --- TESTIMONIALS --- */
body.dark-mode .testi-card {
    background: #161b27;
    border-color: #2d3748;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
body.dark-mode .testi-text { color: #cbd5e1; }
body.dark-mode .testi-name { color: #f1f5f9; }
body.dark-mode .testi-biz  { color: #64748b; }


/* --- CONTACT SECTION --- */
body.dark-mode #contact { background: #0f1117; }

body.dark-mode .form-card {
    background: #161d2e;
    border-color: #1e293b;
}
body.dark-mode .form-title { color: #f1f5f9; }
body.dark-mode .form-sub   { color: #64748b; }
body.dark-mode .field label { color: #94a3b8; }

body.dark-mode .field input,
body.dark-mode .field select,
body.dark-mode .field textarea {
    background: #0f1117;
    border-color: #2d3a52;
    color: #e2e8f0;
}
body.dark-mode .field input:focus,
body.dark-mode .field select:focus,
body.dark-mode .field textarea:focus {
    background: #0f1117;
    border-color: #3b6ef0;
    box-shadow: 0 0 0 4px rgba(59,110,240,0.15);
}
body.dark-mode .field input::placeholder,
body.dark-mode .field textarea::placeholder { color: #334155; }
body.dark-mode .field select option {
    background: #161d2e;
    color: #e2e8f0;
}

body.dark-mode .contact-block,
body.dark-mode .office-hours {
    background: linear-gradient(135deg, #161d2e, #1a2540);
    border-color: #2d3a52;
}
body.dark-mode .contact-block h3 { color: #f1f5f9; }
body.dark-mode .contact-label    { color: #475569; }
body.dark-mode .contact-val      { color: #e2e8f0; }
body.dark-mode .contact-val a    { color: #7c9ee8; }
body.dark-mode .contact-icon {
    background: linear-gradient(135deg, #1e293b, #162032);
    border-color: #2d3a52;
}
body.dark-mode .office-hours .title { color: #7c9ee8; }
body.dark-mode .office-hours p      { color: #64748b; }
body.dark-mode .office-hours strong { color: #e2e8f0; }

body.dark-mode .wa-quick h3 { color: #f1f5f9; }


/* --- TOAST --- */
body.dark-mode #toast {
    background: #161d2e;
    border-color: #059669;
    color: #e2e8f0;
}


/* --- VISITOR POPUP --- */
body.dark-mode #visitor-popup {
    background: #161d2e;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
body.dark-mode .popup-text { color: #94a3b8; }


/* --- FLOATING QR --- */
body.dark-mode .floating-qr {
    background: #161d2e;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
body.dark-mode .qr-popup h4 { color: #f1f5f9; }
body.dark-mode .qr-popup p  { color: #64748b; }


/* --- FEATURED CARDS (brand logos grid) --- */
body.dark-mode .featured-card {
    background: #161d2e;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* --- ABOUT SECTION --- */
body.dark-mode .about-sec-wrap { background: #0f1117; }


/* --- MODAL --- */
body.dark-mode .modal-content {
    background: #161d2e;
    border-color: #2d3a52;
    color: #e2e8f0;
}
body.dark-mode .modal-header {
    border-bottom-color: #2d3a52;
    color: #f1f5f9;
}
body.dark-mode .form-label  { color: #94a3b8; }
body.dark-mode .form-field {
    background: #0f1117;
    border-color: #2d3a52;
    color: #e2e8f0;
}
body.dark-mode .form-field:focus {
    border-color: #3b6ef0;
    background: #0f1117;
}
body.dark-mode .input-icon { color: #475569; }


/* --- FEATURE LIST --- */
body.dark-mode .feature-list li { color: #94a3b8; }


/* --- LINKS --- */
body.dark-mode a { color: #e2e8f0; }
body.dark-mode a:hover { color: #ffffff; }

/* Buttons already use CSS vars or explicit colors —
   they look fine in dark mode. Only fix plain <button>: */
body.dark-mode button { color: #e2e8f0; }

/* =====================================================
   NOTE: Sections with dark backgrounds in main.css
   (#plans, footer, #cta-section, .ticker-wrap) are
   ALREADY dark — no overrides needed. They look the
   same in both modes, which is intentional.
===================================================== */