/* ========================================================================== SL PC Mode - Normal Mode (Light) / Dark Mode - Shared Theme Stylesheet Default = Dark Mode (site's original look). Adding class="light-mode" to switches the site into Normal (Light) Mode. ========================================================================== */ /* DARK MODE (Active when html does NOT have .light-mode) */ html:not(.light-mode) body, html.dark:not(.light-mode) body { background-color: #050811 !important; color: #f8fafc !important; } html:not(.light-mode) .bg-background, html.dark:not(.light-mode) .bg-background, html:not(.light-mode) .bg-deep-navy, html.dark:not(.light-mode) .bg-deep-navy { background-color: #050811 !important; color: #f8fafc !important; } html:not(.light-mode) .bg-surface-glass, html.dark:not(.light-mode) .bg-surface-glass { background-color: rgba(17, 19, 24, 0.85) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html:not(.light-mode) .faq-card, html.dark:not(.light-mode) .faq-card { background-color: #0f172a !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; } html:not(.light-mode) .faq-card h3, html.dark:not(.light-mode) .faq-card h3 { color: #ffffff !important; } html:not(.light-mode) .faq-answer, html.dark:not(.light-mode) .faq-answer { color: #cbd5e1 !important; border-top-color: rgba(255, 255, 255, 0.08) !important; } /* LIGHT MODE (Active when html has .light-mode) */ html.light-mode body { background-color: #f4f6f8 !important; color: #0f172a !important; } html.light-mode .bg-background, html.light-mode .bg-deep-navy { background-color: #f4f6f8 !important; color: #0f172a !important; } /* Header / Nav glass background */ html.light-mode .bg-surface-glass, html.light-mode .bg-surface-glass\/80 { background-color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Card / Panel surfaces */ html.light-mode .bg-surface-container, html.light-mode .bg-surface-container-low, html.light-mode .bg-surface-container-low\/95, html.light-mode .bg-surface-container-low\/90, html.light-mode .bg-surface-container-low\/80, html.light-mode .bg-surface-container-lowest, html.light-mode .bg-surface-container-high, html.light-mode .bg-surface-container-high\/10, html.light-mode .bg-surface-container-high\/20, html.light-mode .bg-surface-container-high\/30, html.light-mode .bg-surface-container-high\/50, html.light-mode .bg-surface-container-highest, html.light-mode .bg-surface-variant\/20, html.light-mode .bg-slate-gray\/10, html.light-mode .bg-slate-gray\/20, html.light-mode .bg-slate-gray\/30, html.light-mode .bg-white\/5, html.light-mode .bg-white\/10 { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.light-mode .faq-card { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.light-mode .faq-card h3 { color: #0f172a !important; } html.light-mode .faq-answer { color: #334155 !important; border-top-color: #e2e8f0 !important; } html.light-mode .glass-panel, html.light-mode .glass-card { background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(0, 0, 0, 0.12) !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12) !important; } /* ========================================================================== 🆕 Navigation Dropdowns & Mega Menu - Flawless Light & Dark Mode ========================================================================== */ /* DARK MODE (Default) */ .nav-dropdown-box { background-color: #0f172a !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important; color: #f8fafc !important; } .nav-dropdown-box a { color: #f8fafc !important; } .nav-dropdown-box a:hover { color: #00f0ff !important; background-color: rgba(255, 255, 255, 0.08) !important; } .nav-dropdown-box .text-electric-cyan { color: #00f0ff !important; } .nav-dropdown-box .text-amber-400 { color: #fbbf24 !important; } .nav-dropdown-box .text-emerald-400 { color: #34d399 !important; } .nav-dropdown-box .text-purple-400 { color: #c084fc !important; } .nav-dropdown-box .text-cyan-400 { color: #22d3ee !important; } .nav-dropdown-box .text-blue-400 { color: #60a5fa !important; } .nav-dropdown-box .text-indigo-400 { color: #818cf8 !important; } .nav-dropdown-box .text-pink-400 { color: #f472b6 !important; } /* LIGHT MODE OVERRIDES */ html.light-mode .nav-dropdown-box { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18) !important; color: #0f172a !important; } html.light-mode .nav-dropdown-box a { color: #1e293b !important; } html.light-mode .nav-dropdown-box a:hover { color: #0284c7 !important; background-color: #f1f5f9 !important; } html.light-mode .nav-dropdown-box h4 { color: #0f172a !important; } html.light-mode .nav-dropdown-box .text-electric-cyan { color: #0284c7 !important; } html.light-mode .nav-dropdown-box .text-amber-400 { color: #b45309 !important; } html.light-mode .nav-dropdown-box .text-emerald-400 { color: #047857 !important; } html.light-mode .nav-dropdown-box .text-purple-400 { color: #7e22ce !important; } html.light-mode .nav-dropdown-box .text-cyan-400 { color: #0e7490 !important; } html.light-mode .nav-dropdown-box .text-blue-400 { color: #1d4ed8 !important; } html.light-mode .nav-dropdown-box .text-indigo-400 { color: #4338ca !important; } html.light-mode .nav-dropdown-box .text-pink-400 { color: #be185d !important; } html.light-mode .nav-dropdown-box .border-white\/10, html.light-mode .nav-dropdown-box .border-b { border-color: #e2e8f0 !important; } /* Text Colors */ html.light-mode .text-on-surface, html.light-mode .text-background, html.light-mode .text-deep-navy, html.light-mode .text-slate-900, html.light-mode .text-slate-800 { color: #0f172a !important; } /* White text handling: keep white on dark buttons/badges, dark on light pages */ html.light-mode .text-white { color: #0f172a !important; } html.light-mode button.bg-electric-cyan, html.light-mode a.bg-electric-cyan, html.light-mode .bg-electric-cyan, html.light-mode .bg-electric-cyan * { color: #002022 !important; } html.light-mode .bg-red-500, html.light-mode .bg-red-600, html.light-mode .bg-emerald-500, html.light-mode .bg-emerald-600, html.light-mode .bg-primary, html.light-mode .bg-red-500 *, html.light-mode .bg-red-600 *, html.light-mode .bg-emerald-500 *, html.light-mode .bg-emerald-600 *, html.light-mode .bg-primary * { color: #ffffff !important; } /* Secondary & Muted Text */ html.light-mode .text-on-surface-variant, html.light-mode .text-gray-600, html.light-mode .text-gray-500, html.light-mode .text-slate-400, html.light-mode .text-slate-500, html.light-mode .text-slate-300, html.light-mode .text-slate-200, html.light-mode .text-slate-100, html.light-mode .text-slate-50 { color: #334155 !important; } html.light-mode .text-on-surface-variant\/40, html.light-mode .text-on-surface-variant\/50, html.light-mode .text-on-surface-variant\/60, html.light-mode .text-on-surface-variant\/70, html.light-mode .text-on-surface-variant\/80, html.light-mode .text-white\/40, html.light-mode .text-white\/50, html.light-mode .text-white\/60, html.light-mode .text-white\/70, html.light-mode .text-white\/80, html.light-mode .text-white\/90 { color: #64748b !important; } /* Borders */ html.light-mode .border-white\/5, html.light-mode .border-white\/10, html.light-mode .border-white\/15, html.light-mode .border-white\/20 { border-color: #cbd5e1 !important; } html.light-mode .border-outline-variant, html.light-mode .border-outline-variant\/20, html.light-mode .border-outline-variant\/30, html.light-mode .border-outline, html.light-mode .border-slate-gray, html.light-mode .border-slate-gray\/10, html.light-mode .border-slate-gray\/20, html.light-mode .border-slate-gray\/25, html.light-mode .border-slate-gray\/30, html.light-mode .border-slate-gray\/40, html.light-mode .border-slate-gray\/50, html.light-mode .border-slate-700, html.light-mode .border-slate-800 { border-color: #cbd5e1 !important; } /* Accent (Electric Cyan) - Darker shade for high contrast on light background */ html.light-mode .text-electric-cyan, html.light-mode .text-electric-cyan\/70, html.light-mode .text-electric-cyan\/80, html.light-mode .text-electric-cyan\/90 { color: #0284c7 !important; } /* Red / Discount / Error Badges & Text */ html.light-mode .text-error, html.light-mode .text-red-400, html.light-mode .text-red-300, html.light-mode .text-red-500 { color: #dc2626 !important; } html.light-mode .bg-error-container\/20, html.light-mode .bg-red-500\/10, html.light-mode .bg-red-500\/15, html.light-mode .bg-red-500\/20, html.light-mode .bg-red-500\/25, html.light-mode .bg-red-400\/10 { background-color: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; } /* Green / In Stock / Success Badges & Text */ html.light-mode .text-green-400, html.light-mode .text-emerald-400, html.light-mode .text-emerald-300, html.light-mode .text-emerald-500 { color: #059669 !important; } html.light-mode .bg-emerald-500\/10, html.light-mode .bg-emerald-500\/15, html.light-mode .bg-emerald-500\/20, html.light-mode .bg-green-500\/10, html.light-mode .bg-green-500\/20 { background-color: #d1fae5 !important; color: #047857 !important; border: 1px solid #6ee7b7 !important; } /* Amber / Warning / Urgent / Offer Badges & Text */ html.light-mode .text-amber-400, html.light-mode .text-amber-300, html.light-mode .text-yellow-400, html.light-mode .text-amber-500 { color: #d97706 !important; } html.light-mode .bg-amber-500\/10, html.light-mode .bg-amber-500\/15, html.light-mode .bg-amber-500\/20, html.light-mode .bg-yellow-500\/10 { background-color: #fef3c7 !important; color: #b45309 !important; border: 1px solid #fde68a !important; } /* Cyan / Blue Info & Loyalty Containers */ html.light-mode .bg-electric-cyan\/10, html.light-mode .bg-electric-cyan\/15, html.light-mode .bg-electric-cyan\/20, html.light-mode .bg-electric-cyan\/25, html.light-mode .bg-electric-cyan\/30 { background-color: #e0f2fe !important; color: #0369a1 !important; border: 1px solid #7dd3fc !important; } html.light-mode .bg-electric-cyan\/10 .text-electric-cyan, html.light-mode .bg-electric-cyan\/15 .text-electric-cyan, html.light-mode .bg-electric-cyan\/20 .text-electric-cyan, html.light-mode .bg-electric-cyan\/25 .text-electric-cyan, html.light-mode .bg-electric-cyan\/30 .text-electric-cyan { color: #0369a1 !important; } /* Form fields */ html.light-mode input, html.light-mode select, html.light-mode textarea { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; } html.light-mode ::placeholder { color: #94a3b8 !important; opacity: 1; } /* Live Search Suggestions Dropdown */ html.light-mode #searchSuggestions { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; } html.light-mode #searchSuggestions a { color: #0f172a !important; } html.light-mode #searchSuggestions a:hover { background-color: #f1f5f9 !important; } /* Table rows / dividers commonly used with divide-* utilities */ html.light-mode .divide-slate-gray\/10 > :not([hidden]) ~ :not([hidden]), html.light-mode .divide-slate-800 > :not([hidden]) ~ :not([hidden]), html.light-mode .divide-slate-700 > :not([hidden]) ~ :not([hidden]) { border-color: #cbd5e1 !important; } /* ========================================================================== Theme Toggle Switch (shared across all pages) ========================================================================== */ .theme-toggle-track { width: 46px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); position: relative; cursor: pointer; transition: background 0.3s, border-color 0.3s; display: flex; align-items: center; flex-shrink: 0; } html.light-mode .theme-toggle-track { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.2); } .theme-toggle-thumb { width: 18px; height: 18px; border-radius: 999px; background: #00F0FF; position: absolute; left: 3px; transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0, 240, 255, 0.6); } html:not(.light-mode) .theme-toggle-thumb, html.dark .theme-toggle-thumb { transform: translateX(22px); background-color: #00F0FF !important; box-shadow: 0 0 12px rgba(0, 240, 255, 0.8) !important; } html.light-mode .theme-toggle-thumb { transform: translateX(0px); background-color: #f59e0b !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.8) !important; } /* ========================================================================== 🆕 Admin Dashboard / Merchant Portal Dashboard - Extra Overrides (admin_dashboard.php, admin_login.php, merchant_login.php, merchant_portal_dashboard.php) ========================================================================== */ html.light-mode .text-slate-300, html.light-mode .text-slate-400, html.light-mode .text-slate-500 { color: #5b6670 !important; } html.light-mode .bg-black, html.light-mode .bg-black\/30, html.light-mode .bg-black\/40 { background-color: #ffffff !important; border-color: rgba(20, 24, 28, 0.15) !important; } html.light-mode .text-black { color: #14181c !important; } html.light-mode .border-slate-700, html.light-mode .border-slate-800 { border-color: rgba(20, 24, 28, 0.15) !important; } html.light-mode .bg-surface-variant, html.light-mode .bg-surface-variant\/10, html.light-mode .bg-surface-variant\/20, html.light-mode .bg-surface-variant\/30, html.light-mode .bg-surface-variant\/50 { background-color: #eef1f3 !important; } /* Light Mode Overrides for Slate & Deep Navy Containers */ html.light-mode body { background-color: #f8fafc !important; color: #0f172a !important; } html.light-mode .from-slate-950, html.light-mode .via-slate-900, html.light-mode .to-deep-navy, html.light-mode .bg-slate-950, html.light-mode .bg-slate-900, html.light-mode .bg-slate-900\/90, html.light-mode .bg-slate-900\/95, html.light-mode .bg-\[\#050811\], html.light-mode .bg-\[\#0c0e12\] { background-color: #ffffff !important; background-image: none !important; color: #0f172a !important; border-color: #cbd5e1 !important; } html.light-mode input, html.light-mode textarea, html.light-mode select { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; } html.light-mode input::placeholder, html.light-mode textarea::placeholder { color: #64748b !important; } /* ========================================================================== ✨ Cyberpunk & Gaming Animation System - High-Performance CSS3 Keyframes ========================================================================== */ /* Keyframe: Floating 3D Motion */ @keyframes floatCard { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(0.5deg); } } /* Keyframe: Pulsing Neon Cyan / Pink Glow */ @keyframes neonGlowPulse { 0% { box-shadow: 0 0 12px rgba(102, 252, 241, 0.3), inset 0 0 12px rgba(102, 252, 241, 0.1); border-color: rgba(102, 252, 241, 0.4); } 50% { box-shadow: 0 0 25px rgba(102, 252, 241, 0.7), 0 0 45px rgba(255, 0, 127, 0.3), inset 0 0 20px rgba(102, 252, 241, 0.2); border-color: rgba(102, 252, 241, 0.9); } 100% { box-shadow: 0 0 12px rgba(102, 252, 241, 0.3), inset 0 0 12px rgba(102, 252, 241, 0.1); border-color: rgba(102, 252, 241, 0.4); } } /* Keyframe: Shimmer Ray on Buttons & Hero CTA */ @keyframes shimmerSlide { 0% { transform: translateX(-100%) skewX(-15deg); } 100% { transform: translateX(200%) skewX(-15deg); } } /* Keyframe: Dynamic Gradient Text Shift */ @keyframes gradientTextShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Keyframe: Smooth Fade & Slide Entrance */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Keyframe: Pulsing Deal Badge */ @keyframes pulseBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 0, 80, 0.8)); } } /* Keyframe: Ambient Background Blob Drift */ @keyframes blobRotate { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -40px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } /* Utility Animations */ .animate-float { animation: floatCard 4s ease-in-out infinite; } .animate-neon-glow { animation: neonGlowPulse 3s infinite ease-in-out; } .animate-fade-up { animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .animate-badge-pulse { animation: pulseBadge 2s infinite ease-in-out; } .animate-blob-1 { animation: blobRotate 12s ease-in-out infinite; } .animate-blob-2 { animation: blobRotate 16s ease-in-out infinite reverse; } /* Gradient Text Effect */ .gradient-text-cyber { background: linear-gradient(135deg, #66fcf1 0%, #00dbe9 30%, #ff007f 70%, #9d4edd 100%); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientTextShift 6s ease infinite; } /* Shimmer Button Effect */ .btn-shimmer { position: relative; overflow: hidden; } .btn-shimmer::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 60deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70% ); transform: translateX(-100%) skewX(-15deg); transition: none; } .btn-shimmer:hover::after { animation: shimmerSlide 1.2s ease-in-out infinite; } /* Modern Card Hover Effects */ .card-hover-effect { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .card-hover-effect:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 15px 35px -10px rgba(102, 252, 241, 0.25), 0 0 15px rgba(102, 252, 241, 0.2); border-color: rgba(102, 252, 241, 0.6) !important; } /* Image Zoom on Hover */ .img-zoom-container { overflow: hidden; } .img-zoom-container img { transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .img-zoom-container:hover img { transform: scale(1.08) rotate(0.5deg); } /* Grid Cyber Overlay */ .cyber-grid-bg { background-image: linear-gradient(to right, rgba(102, 252, 241, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(102, 252, 241, 0.04) 1px, transparent 1px); background-size: 40px 40px; } /* ========================================================================== ✨ High-Performance 60fps Scroll Reveal System ========================================================================== */ .scroll-reveal { opacity: 0; transform: translateY(35px); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .scroll-reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .scroll-reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .scroll-reveal-zoom { opacity: 0; transform: scale(0.92); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } /* Active Revealed State */ .scroll-reveal.revealed, .scroll-reveal-left.revealed, .scroll-reveal-right.revealed, .scroll-reveal-zoom.revealed { opacity: 1; transform: translateY(0) translateX(0) scale(1); } /* Stagger Delays for Grid Cards */ .delay-1 { transition-delay: 0.08s; } .delay-2 { transition-delay: 0.16s; } .delay-3 { transition-delay: 0.24s; } .delay-4 { transition-delay: 0.32s; } .delay-5 { transition-delay: 0.40s; } /* 🎮 PC Game System Requirements High-Contrast Styles (Light & Dark Mode) */ .sys-req-box { background-color: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #f1f5f9 !important; } html.light-mode .sys-req-box { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; color: #0f172a !important; } .sys-req-box .sys-req-key { color: #94a3b8 !important; } html.light-mode .sys-req-box .sys-req-key { color: #475569 !important; } .sys-req-box .sys-req-val { color: #f8fafc !important; } html.light-mode .sys-req-box .sys-req-val { color: #0f172a !important; } .sys-req-delivery-banner { background-color: rgba(236, 72, 153, 0.15) !important; border: 1px solid rgba(236, 72, 153, 0.3) !important; } html.light-mode .sys-req-delivery-banner { background-color: #fdf2f8 !important; border: 1px solid #fbcfe8 !important; } html.light-mode .sys-req-delivery-banner .sys-req-delivery-title { color: #831843 !important; } html.light-mode .sys-req-delivery-banner .sys-req-delivery-text { color: #9d174d !important; } /* 🎮 Cyberpunk Gaming Template Mode Styles (Forced Dark Mode) */ body.game-mode-active, html.light-mode body.game-mode-active { background-color: #030712 !important; background-image: radial-gradient(circle at 15% 15%, rgba(255, 0, 127, 0.15) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(0, 240, 255, 0.15) 0%, transparent 45%), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important; background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px !important; color: #f8fafc !important; } body.game-mode-active header, html.light-mode body.game-mode-active header { background-color: rgba(3, 7, 18, 0.92) !important; border-bottom-color: rgba(255, 0, 127, 0.4) !important; box-shadow: 0 4px 30px rgba(255, 0, 127, 0.25) !important; } body.game-mode-active header a, html.light-mode body.game-mode-active header a, body.game-mode-active header span, html.light-mode body.game-mode-active header span { color: #f8fafc !important; } body.game-mode-active header input, html.light-mode body.game-mode-active header input { background-color: rgba(15, 23, 42, 0.9) !important; border-color: rgba(255, 0, 127, 0.4) !important; color: #ffffff !important; } body.game-mode-active .glass-card, html.light-mode body.game-mode-active .glass-card { background-color: rgba(15, 23, 42, 0.85) !important; border-color: rgba(255, 0, 127, 0.3) !important; color: #ffffff !important; } body.game-mode-active .glass-card:hover, html.light-mode body.game-mode-active .glass-card:hover { border-color: #ff007f !important; box-shadow: 0 0 35px rgba(255, 0, 127, 0.45) !important; } /* 🎮 Comprehensive Cyberpunk Dark Overrides for Game Mode Cards & Panels */ body.game-mode-active .glass-panel, html.light-mode body.game-mode-active .glass-panel, body.game-mode-active .sys-req-box, html.light-mode body.game-mode-active .sys-req-box, body.game-mode-active .bg-surface-container-high, html.light-mode body.game-mode-active .bg-surface-container-high, body.game-mode-active .bg-surface-container-high\/20, html.light-mode body.game-mode-active .bg-surface-container-high\/20, body.game-mode-active .bg-surface-container-low, html.light-mode body.game-mode-active .bg-surface-container-low, body.game-mode-active .bg-surface-container, html.light-mode body.game-mode-active .bg-surface-container, body.game-mode-active .bg-white, html.light-mode body.game-mode-active .bg-white { background-color: rgba(15, 23, 42, 0.88) !important; border-color: rgba(255, 0, 127, 0.3) !important; color: #f8fafc !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; } /* Override Text Colors in Game Mode */ body.game-mode-active h1, html.light-mode body.game-mode-active h1, body.game-mode-active h2, html.light-mode body.game-mode-active h2, body.game-mode-active h3, html.light-mode body.game-mode-active h3, body.game-mode-active h4, html.light-mode body.game-mode-active h4, body.game-mode-active .text-on-surface, html.light-mode body.game-mode-active .text-on-surface, body.game-mode-active .text-black, html.light-mode body.game-mode-active .text-black, body.game-mode-active .text-slate-900, html.light-mode body.game-mode-active .text-slate-900, body.game-mode-active .text-slate-800, html.light-mode body.game-mode-active .text-slate-800, body.game-mode-active .sys-req-val, html.light-mode body.game-mode-active .sys-req-val { color: #ffffff !important; } body.game-mode-active p, html.light-mode body.game-mode-active p, body.game-mode-active span, html.light-mode body.game-mode-active span, body.game-mode-active td, html.light-mode body.game-mode-active td, body.game-mode-active th, html.light-mode body.game-mode-active th, body.game-mode-active .text-on-surface-variant, html.light-mode body.game-mode-active .text-on-surface-variant, body.game-mode-active .text-slate-700, html.light-mode body.game-mode-active .text-slate-700, body.game-mode-active .text-slate-600, html.light-mode body.game-mode-active .text-slate-600, body.game-mode-active .sys-req-key, html.light-mode body.game-mode-active .sys-req-key { color: #cbd5e1 !important; } /* Notice & Delivery Banners in Game Mode */ body.game-mode-active .sys-req-delivery-banner, html.light-mode body.game-mode-active .sys-req-delivery-banner { background-color: rgba(236, 72, 153, 0.15) !important; border-color: rgba(236, 72, 153, 0.4) !important; color: #f472b6 !important; } body.game-mode-active .sys-req-delivery-banner .sys-req-delivery-title, html.light-mode body.game-mode-active .sys-req-delivery-banner .sys-req-delivery-title { color: #f472b6 !important; } body.game-mode-active .sys-req-delivery-banner .sys-req-delivery-text, html.light-mode body.game-mode-active .sys-req-delivery-banner .sys-req-delivery-text { color: #fbcfe8 !important; } /* Inputs, Textareas & Forms in Game Mode */ body.game-mode-active input, html.light-mode body.game-mode-active input, body.game-mode-active textarea, html.light-mode body.game-mode-active textarea, body.game-mode-active select, html.light-mode body.game-mode-active select { background-color: rgba(15, 23, 42, 0.9) !important; border-color: rgba(255, 0, 127, 0.4) !important; color: #ffffff !important; } body.game-mode-active ::placeholder, html.light-mode body.game-mode-active ::placeholder { color: #64748b !important; } /* Buttons in Game Mode */ body.game-mode-active button.glass-panel, html.light-mode body.game-mode-active button.glass-panel, body.game-mode-active a.glass-panel, html.light-mode body.game-mode-active a.glass-panel { background-color: rgba(30, 27, 75, 0.6) !important; border-color: rgba(0, 240, 255, 0.4) !important; color: #00f0ff !important; } body.game-mode-active button.glass-panel:hover, html.light-mode body.game-mode-active button.glass-panel:hover, body.game-mode-active a.glass-panel:hover, html.light-mode body.game-mode-active a.glass-panel:hover { background-color: rgba(0, 240, 255, 0.15) !important; border-color: #00f0ff !important; color: #ffffff !important; box-shadow: 0 0 20px rgba(0, 240, 255, 0.4) !important; } /* ============================================================ 🆕 LIGHT MODE: Order Stepper Timeline & Modal Adaptation ============================================================ */ /* 1. Modal Box Card & Overlay */ html.light-mode #dashboardOrderModal { background-color: rgba(15, 23, 42, 0.4) !important; } html.light-mode #dashboardOrderModal .modal-box-card { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important; } /* 2. Inline Tracker Container Sub-Row (Expands under order) */ html.light-mode [id^="inline-row-"] { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } html.light-mode [id^="inline-container-"] .stepper-bg-box, html.light-mode #dashboardOrderModal .stepper-bg-box, html.light-mode #dashboardOrderModal .modal-card-box { background-color: #f8fafc !important; border-color: #cbd5e1 !important; } /* 3. Header Text & Titles */ html.light-mode #dashboardOrderModal h3, html.light-mode #dashboardOrderModal h4 { color: #0f172a !important; } html.light-mode #modal-subtitle-display { color: #0284c7 !important; } /* 4. Order Reference Display Card */ html.light-mode .order-ref-card { background-color: #f0f9ff !important; border-color: #bae6fd !important; } html.light-mode #modal-order-number-display { color: #0284c7 !important; } /* 5. Stepper Background Timeline Bar */ html.light-mode .stepper-bg-line { background-color: #cbd5e1 !important; } /* 6. Stepper Description Box & Text */ html.light-mode .tracker-desc-box { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #334155 !important; } html.light-mode .tracker-desc-box p, html.light-mode .tracker-desc-box span { color: #334155 !important; } html.light-mode #modal-status-current-stage, html.light-mode [id^="inline-status-stage-"] { color: #0284c7 !important; } html.light-mode #modal-next-step-text, html.light-mode [id^="inline-next-text-"] { color: #475569 !important; } html.light-mode #modal-customer-name, html.light-mode #modal-total-amount { color: #0f172a !important; } /* ⚡ Container Layout & Full Width Header Spacing */ .max-w-container-max { max-width: 100% !important; width: 100% !important; } .px-margin-desktop { padding-left: 48px !important; padding-right: 48px !important; } .px-margin-mobile { padding-left: 16px !important; padding-right: 16px !important; } @media (max-width: 768px) { .px-margin-desktop { padding-left: 16px !important; padding-right: 16px !important; } } /* ⚡ Dark Overlay Card Text Contrast Fix (Light Mode Overrides) */ html.light-mode .style-white-text, html.light-mode .dark-card-overlay h2, html.light-mode .dark-card-overlay h3 { color: #ffffff !important; } html.light-mode .style-light-text, html.light-mode .dark-card-overlay p, html.light-mode .dark-card-overlay span { color: #e2e8f0 !important; } /* ⚡ Live Search Autocomplete Dropdown - Comprehensive Light & Dark Mode Overrides */ html.light-mode #headerSearchResults, html:not(.dark) #headerSearchResults, body.light-mode #headerSearchResults, .live-search-dropdown-box.light-override { background-color: #ffffff !important; background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important; color: #0f172a !important; } html.light-mode #headerSearchResults .search-item-title, html:not(.dark) #headerSearchResults .search-item-title { color: #0f172a !important; } html.light-mode #headerSearchResults .search-item-price, html:not(.dark) #headerSearchResults .search-item-price { color: #0284c7 !important; font-weight: 700 !important; } html.light-mode #headerSearchResults mark, html:not(.dark) #headerSearchResults mark { background-color: rgba(2, 132, 199, 0.15) !important; color: #0284c7 !important; padding: 0 2px !important; border-radius: 2px !important; } html.light-mode #headerSearchResults .search-item-hover, html:not(.dark) #headerSearchResults .search-item-hover { background-color: transparent !important; } html.light-mode #headerSearchResults .search-item-hover:hover, html:not(.dark) #headerSearchResults .search-item-hover:hover { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; } html.light-mode #headerSearchResultsFooter, html:not(.dark) #headerSearchResultsFooter { background-color: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; } html.light-mode #headerSearchResultsFooter button, html:not(.dark) #headerSearchResultsFooter button { background-color: #e0f2fe !important; color: #0284c7 !important; border-color: #7dd3fc !important; } html.light-mode #headerSearchResultsFooter button:hover, html:not(.dark) #headerSearchResultsFooter button:hover { background-color: #bae6fd !important; } /* Dark Mode Overrides for Live Search Dropdown */ html.dark:not(.light-mode) .live-search-dropdown-box { background-color: rgba(15, 23, 42, 0.96) !important; border-color: rgba(0, 240, 255, 0.4) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important; color: #ffffff !important; } html.dark:not(.light-mode) .live-search-dropdown-box .search-item-title { color: #f8fafc !important; } html.dark:not(.light-mode) .live-search-dropdown-box .search-item-price { color: #00f0ff !important; } html.dark:not(.light-mode) .live-search-dropdown-box .search-item-hover:hover { background-color: rgba(0, 240, 255, 0.1) !important; } /* ========================================================================== ⚡ SMART AUTO-PC BUILDER LIGHT MODE STYLES ========================================================================== */ html.light-mode #auto-pc-builder > div { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; } html.light-mode #auto-pc-builder h2 { color: #0f172a !important; } html.light-mode #auto-pc-builder p { color: #475569 !important; } html.light-mode #auto-pc-builder form#autoBuilderForm { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } html.light-mode #auto-pc-builder label { color: #1e293b !important; } html.light-mode #auto-pc-builder input[type="number"]#builder_budget { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.light-mode #auto-pc-builder .grid.grid-cols-2.gap-2.p-1\.5 { background-color: #e2e8f0 !important; border-color: #cbd5e1 !important; } html.light-mode #auto-pc-builder input[name="builder_purpose"]:not(:checked) + div { color: #475569 !important; } html.light-mode #auto-pc-builder button[onclick*="setBudgetPreset"] { background-color: #e2e8f0 !important; border-color: #cbd5e1 !important; color: #334155 !important; } html.light-mode #auto-pc-builder button[onclick*="setBudgetPreset"]:hover { background-color: #0284c720 !important; color: #0284c7 !important; } html.light-mode #auto-pc-builder label:has(#builder_peripherals) { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; } html.light-mode #auto-pc-builder label:has(#builder_peripherals) span { color: #1e293b !important; } /* Build Results Container Light Mode */ html.light-mode #builderResultsContainer .bg-slate-950\/60, html.light-mode #builderResultsContainer .bg-slate-950\/80, html.light-mode #builderResultsContainer .bg-slate-950\/90, html.light-mode #builderResultsContainer .bg-slate-900, html.light-mode #builderResultsContainer .bg-slate-900\/90 { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.light-mode #builderResultsContainer h2, html.light-mode #builderResultsContainer h3, html.light-mode #builderResultsContainer h4 { color: #0f172a !important; } html.light-mode #builderResultsContainer p, html.light-mode #builderResultsContainer span.text-slate-400, html.light-mode #builderResultsContainer span.text-slate-300 { color: #334155 !important; } /* Build Header summary card */ html.light-mode #builderResultsContainer .bg-slate-950\/80, html.light-mode #builderResultsContainer div[class*="bg-slate-900"] { background-color: #f8fafc !important; border-color: #cbd5e1 !important; } /* Light mode table header */ html.light-mode #builderResultsContainer table tr.bg-slate-900\/90, html.light-mode #builderResultsContainer table tr.border-b { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; } html.light-mode #builderResultsContainer table th { color: #475569 !important; } /* Light mode table rows */ html.light-mode #builderResultsContainer table tr.bg-slate-950\/60, html.light-mode #builderResultsContainer table tbody tr { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } html.light-mode #builderResultsContainer table tbody tr:hover { background-color: #f8fafc !important; } html.light-mode #builderResultsContainer table td span.text-white, html.light-mode #builderResultsContainer table td a.text-white { color: #0f172a !important; } html.light-mode #builderResultsContainer table td span.text-slate-400 { color: #64748b !important; } html.light-mode #builderResultsContainer .text-electric-cyan { color: #0284c7 !important; } /* Alternative Options panel in Light Mode */ html.light-mode #builderResultsContainer .bg-slate-950 { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } html.light-mode #builderResultsContainer .bg-slate-950 span.text-white { color: #0f172a !important; } /* Badges / Banner alerts in Light Mode */ html.light-mode #builderResultsContainer .bg-emerald-950\/40 { background-color: #f0fdf4 !important; border-color: #86efac !important; color: #166534 !important; } html.light-mode #builderResultsContainer .bg-emerald-950\/40 span, html.light-mode #builderResultsContainer .bg-emerald-950\/40 div { color: #15803d !important; } html.light-mode #builderResultsContainer .bg-rose-950\/60 { background-color: #fff1f2 !important; border-color: #fca5a5 !important; color: #991b1b !important; } html.light-mode #builderResultsContainer .bg-rose-950\/60 div { color: #991b1b !important; } /* Header Summary Card Light Mode */ html.light-mode #pcBuildHeaderSummary { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important; border-color: #cbd5e1 !important; } html.light-mode #pcBuildHeaderSummary .build-title { color: #0f172a !important; } html.light-mode #pcBuildHeaderSummary .build-badge { color: #0284c7 !important; } html.light-mode #pcBuildHeaderSummary .build-subtext { color: #475569 !important; } html.light-mode #pcBuildHeaderSummary .build-valtext { color: #1e293b !important; } html.light-mode #pcBuildHeaderSummary .build-totaltext { color: #0284c7 !important; } html.light-mode #pcBuildHeaderSummary .build-reset-btn { background-color: #fee2e2 !important; color: #dc2626 !important; border-color: #fca5a5 !important; } /* Savings Banner Light Mode */ html.light-mode #pcBuildSavingsBanner { background-color: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; } html.light-mode #pcBuildSavingsBanner span, html.light-mode #pcBuildSavingsBanner div { color: #15803d !important; } html.light-mode #pcBuildSavingsBanner .savings-badge { background-color: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; } /* Dedicated PC Build Store Hero Banner Light Mode */ html.light-mode section.max-w-container-max > div.bg-gradient-to-br.from-slate-950 { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important; } html.light-mode section.max-w-container-max > div.bg-gradient-to-br.from-slate-950 h1 { color: #0f172a !important; } html.light-mode section.max-w-container-max > div.bg-gradient-to-br.from-slate-950 p { color: #334155 !important; } html.light-mode section.max-w-container-max > div.bg-gradient-to-br.from-slate-950 div.bg-slate-950\/90 { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } html.light-mode section.max-w-container-max > div.bg-gradient-to-br.from-slate-950 div.bg-slate-950\/90 h3 { color: #0f172a !important; } html.light-mode section.max-w-container-max > div.bg-gradient-to-br.from-slate-950 div.bg-slate-950\/90 p { color: #475569 !important; } /* Undo & Redo Buttons Light Mode */ html.light-mode #btnUndoPcBuild, html.light-mode #btnRedoPcBuild { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.light-mode #btnUndoPcBuild:disabled, html.light-mode #btnRedoPcBuild:disabled { opacity: 0.35 !important; background-color: #f1f5f9 !important; color: #94a3b8 !important; } /* Upgrade Banner Light Mode */ html.light-mode #pcBuildUpgradeBanner { background: linear-gradient(135deg, #fffbe0 0%, #fef3c7 50%, #fff7ed 100%) !important; border-color: #f59e0b !important; box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15) !important; } html.light-mode #pcBuildUpgradeBanner .upgrade-offer-badge { background-color: #fef3c7 !important; border-color: #d97706 !important; color: #b45309 !important; } html.light-mode #pcBuildUpgradeBanner .upgrade-headline { color: #78350f !important; } html.light-mode #pcBuildUpgradeBanner .upgrade-subtext { color: #92400e !important; } html.light-mode #pcBuildUpgradeBanner .upgrade-highlights { background-color: #ffffff !important; border-color: #fde68a !important; } html.light-mode #pcBuildUpgradeBanner .upgrade-highlights li { color: #78350f !important; } html.light-mode #pcBuildUpgradeBanner .upgrade-switch-btn { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3) !important; } /* Tab Switcher Light Mode */ html.light-mode #pcBuildTabSwitcher { background-color: #ffffff !important; border-color: #cbd5e1 !important; } html.light-mode #pcBuildTabSwitcher .tab-btn-standard { color: #475569 !important; } html.light-mode #pcBuildTabSwitcher .tab-btn-standard.bg-electric-cyan { background-color: #0284c7 !important; color: #ffffff !important; } html.light-mode #pcBuildTabSwitcher .tab-btn-upgraded { color: #475569 !important; } html.light-mode #pcBuildTabSwitcher .tab-btn-upgraded.bg-gradient-to-r { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #ffffff !important; }