/* ============================================= DARK MODE — Global Styles Activated by toggling the .dark-mode class on (see dark-mode.js) ============================================= */ body.dark-mode { --bg-dm: #1a1a1a; --bg-secondary-dm: #2d2d2d; --text-dm: #f0f0f0; --text-secondary-dm: #b0b0b0; --border-dm: #444; background-color: var(--bg-dm) !important; color: var(--text-dm) !important; } body.dark-mode .navbar, body.dark-mode .footer, body.dark-mode .section-padding { background-color: var(--bg-secondary-dm) !important; } /* Fix Typography without aggressively overriding all spans */ body.dark-mode p, body.dark-mode li { color: var(--text-secondary-dm) !important; } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode strong { color: var(--text-dm) !important; } /* Target specific inline color styles used across index.html to ensure dark mode visibility */ body.dark-mode [style*="color: #2c2520"], body.dark-mode [style*="color: #3d352e"], body.dark-mode [style*="color:#2c2520"] { color: var(--text-dm) !important; } body.dark-mode [style*="color: #5a5045"], body.dark-mode [style*="color: #6d645a"], body.dark-mode [style*="color: #7a7065"], body.dark-mode [style*="color: #8a8075"], body.dark-mode [style*="color:#5a5045"] { color: var(--text-secondary-dm) !important; } /* Component Backgrounds */ body.dark-mode .stat-card, body.dark-mode .trust-item, body.dark-mode .faq-item, body.dark-mode .review-card, body.dark-mode .product-card, body.dark-mode .contact-card, body.dark-mode .interactive-card, body.dark-mode .plan-card, body.dark-mode .flip-card-front, body.dark-mode .flip-card-back, body.dark-mode .fssai-box, body.dark-mode .wholesale-cta-card, body.dark-mode #contactForm, body.dark-mode .cookie-box, body.dark-mode .modal-content, body.dark-mode .bot-popup, body.dark-mode #splash-screen, body.dark-mode #spiceChatWidget, body.dark-mode #bulkCalcPanel, body.dark-mode #stickyCartBar, body.dark-mode #reorderBanner, body.dark-mode #exitPopup > div { background-color: var(--bg-secondary-dm) !important; border-color: var(--border-dm) !important; color: var(--text-dm) !important; } /* Bulk Price Calculator & Sticky Cart Bar Specific Overrides */ body.dark-mode #bulkCalcPanel strong, body.dark-mode #bulkCalcPanel label, body.dark-mode #stickyProductName { color: var(--text-dm) !important; } body.dark-mode #bulkCalcProduct, body.dark-mode #bulkCalcQty { background-color: var(--bg-dm) !important; color: var(--text-dm) !important; border-color: var(--border-dm) !important; } body.dark-mode #bulkCalcResult > div { background-color: var(--bg-dm) !important; color: var(--text-dm) !important; border-color: var(--border-dm) !important; } body.dark-mode #bulkCalcClose, body.dark-mode #stickyCloseBtn { color: var(--text-secondary-dm) !important; } /* Reorder Banner & Exit Popup Specific Overrides */ body.dark-mode #reorderBanner p[style*="color:#2c2520"], body.dark-mode #exitPopup h2 { color: var(--text-dm) !important; } body.dark-mode #reorderBanner p[style*="color:#888"], body.dark-mode #exitPopup p { color: var(--text-secondary-dm) !important; } body.dark-mode #exitPopup div[style*="background:#f5f5f5"] { background-color: var(--bg-dm) !important; color: #81c784 !important; /* Brighter green for dark mode readability */ } body.dark-mode #reorderBanner button[style*="color:#999"], body.dark-mode #exitPopup button[style*="color:#999"] { color: var(--text-secondary-dm) !important; } /* Chat Widget specific fixes */ body.dark-mode #aiChatMessages { background-color: var(--bg-dm) !important; color: var(--text-dm) !important; } body.dark-mode #aiChatMessages > div[style*="background:#fff"] { background-color: var(--bg-secondary-dm) !important; color: var(--text-dm) !important; border-color: var(--border-dm) !important; } body.dark-mode #spiceChatWidget > div:last-child { background-color: var(--bg-secondary-dm) !important; border-color: var(--border-dm) !important; } /* Fix Tables, Trackers, and Inline Backgrounds */ body.dark-mode .table-responsive, body.dark-mode table tr, body.dark-mode [style*="background-color: #faf7f2"], body.dark-mode [style*="background-color: #faf6f0"], body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background:#fff"] { background-color: var(--bg-secondary-dm) !important; color: var(--text-dm) !important; } body.dark-mode .track-step::before { border-color: var(--bg-dm) !important; } /* Keep table header dark in dark mode */ body.dark-mode tr[style*="background-color: #2a201a"] { background-color: #1a1a1a !important; } /* Form Inputs */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background-color: var(--bg-dm) !important; color: var(--text-dm) !important; border-color: var(--border-dm) !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: var(--text-secondary-dm) !important; } /* The hero keeps its original light photo background in dark mode, so its text must stay in its original colors */ body.dark-mode .hero-title { color: var(--primary-green) !important; } body.dark-mode .hero-brand-drop { color: #c59b27 !important; } body.dark-mode .hero-desc { color: #333 !important; /* Ensure it's dark enough against the light background */ } body.dark-mode .hero-title span { color: var(--primary-red) !important; } /* Dynamic Status, Pilles & Warning Boxes */ body.dark-mode span[style*="background:#e8f5e9"], body.dark-mode div[style*="background:#e8f5e9"] { background-color: rgba(42, 122, 67, 0.2) !important; color: #81c784 !important; } body.dark-mode [style*="background:#fff8e1"] { background-color: rgba(245, 127, 23, 0.15) !important; color: #ffb300 !important; border-color: rgba(245, 127, 23, 0.3) !important; } body.dark-mode [style*="background:#fce4ec"] { background-color: rgba(198, 40, 40, 0.15) !important; color: #ef5350 !important; border-color: rgba(198, 40, 40, 0.3) !important; } body.dark-mode [style*="background:linear-gradient(135deg,#fafbfc,#f0f7f0)"] { background: var(--bg-secondary-dm) !important; border-color: var(--border-dm) !important; } body.dark-mode .nav-links a { color: var(--text-dm) !important; } /* Hover States and Shadows (Visibility Fixes) */ body.dark-mode .product-card:hover, body.dark-mode .stat-card:hover { border-color: #c59b27 !important; /* Gold */ } body.dark-mode .trust-item:hover, body.dark-mode .contact-card:hover { border-color: #4CAF50 !important; /* Lighter Green for visibility */ } body.dark-mode .product-card:hover, body.dark-mode .stat-card:hover, body.dark-mode .trust-item:hover, body.dark-mode .contact-card:hover, body.dark-mode .interactive-card:hover, body.dark-mode .plan-card:hover, body.dark-mode .faq-item:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(197, 155, 39, 0.2) !important; } /* Smooth Transition */ body, .navbar, .footer, .section-padding, .stat-card, .trust-item, .faq-item, .review-card, .product-card, .contact-card, .interactive-card, .plan-card, .flip-card-front, .flip-card-back, .fssai-box, .wholesale-cta-card, #contactForm, .cookie-box, .modal-content, input, textarea, select, #bulkCalcPanel, #stickyCartBar, #reorderBanner, #exitPopup > div { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }