/* ─── Dark Mode Overrides ──────────────────────────────────────────────────── This file ONLY applies when data-theme="dark" is set on . It does not affect light mode at all. ─────────────────────────────────────────────────────────────────────────── */ /* === BACKGROUND === */ [data-theme="dark"] body { background: linear-gradient(180deg, #0d001a, #2a0a40, #4a1a6b); color: #ffffff; } /* === NAVBAR === */ [data-theme="dark"] .navbar { background-color: #0a0012; } [data-theme="dark"] .nav-link { color: #ffffff; } [data-theme="dark"] .nav-link:hover { color: #ffaa33; } [data-theme="dark"] .username-display { color: #ffffff; } /* === BASKET POPUP === */ [data-theme="dark"] .basket-popup { background: #1e1a2a; border: 1px solid #3a2a4a; } [data-theme="dark"] .basket-header { background: #0d001a; } [data-theme="dark"] .basket-item-name { color: #ffffff; } [data-theme="dark"] .basket-item-price { color: #ffaa33; } [data-theme="dark"] .basket-item-qty { color: #cccccc; } [data-theme="dark"] .basket-total { color: #ffffff; border-top-color: #3a2a4a; } /* === LOGIN POPUP === */ [data-theme="dark"] .login-popup { background: #1e1a2a; border: 1px solid #3a2a4a; } [data-theme="dark"] .login-header h3 { color: #ffffff; } [data-theme="dark"] .login-header { border-bottom-color: #3a2a4a; } [data-theme="dark"] .login-header .close-btn { color: #ffffff; } [data-theme="dark"] .login-form label { color: #ffffff; } [data-theme="dark"] .login-form input { background: #2a1f3a; border-color: #3a2a4a; color: #ffffff; } [data-theme="dark"] .login-form input:focus { border-color: #ffaa33; box-shadow: 0 0 6px rgba(255, 170, 51, 0.4); } /* === WELCOME POPUP === */ [data-theme="dark"] #popup { background: #1e1a2a !important; border-color: #3a2a4a !important; } [data-theme="dark"] #popup p { color: #ffffff !important; } [data-theme="dark"] #closePopup { background: #3a2a4a !important; color: #ffffff !important; } /* === CHAT WIDGET === */ [data-theme="dark"] #chat-window { background: #1e1a2a; color: #ffffff; border: 1px solid #3a2a4a; } [data-theme="dark"] #chat-categories { background: #1e1a2a; border-bottom-color: #3a2a4a; } [data-theme="dark"] .chat-category { background: #2a1f3a; color: #ffffff; } [data-theme="dark"] .chat-category:hover { background: #3a2a4a; } [data-theme="dark"] #chat-questions { background: #1e1a2a; border-top-color: #3a2a4a; } [data-theme="dark"] .chat-question { background: #2a1f3a; border-color: #3a2a4a; color: #ffffff; } [data-theme="dark"] .chat-question:hover { background: #3a2a4a; } [data-theme="dark"] #chat-messages { color: #ffffff; } /* === FOOTER === */ [data-theme="dark"] .site-footer { background: #0a0012; border-top-color: #3a2a4a; } [data-theme="dark"] .site-footer h3, [data-theme="dark"] .site-footer h4 { color: #ffaa33; } [data-theme="dark"] .site-footer p, [data-theme="dark"] .site-footer a { color: #cccccc; } [data-theme="dark"] .site-footer a:hover { color: #ffaa33; } [data-theme="dark"] .footer-bottom { background: rgba(0, 0, 0, 0.4); color: #aaaaaa; } /* === THEME TOGGLE BUTTON === */ .theme-toggle { background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: #ffffff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 1.1rem; transition: all 0.2s ease; min-width: 40px; text-align: center; } .theme-toggle:hover { background: #ff9600; border-color: #ff9600; }