/* ============================================================ LIGHT MODE THEME — UniqueTopup Applied when has class="light" ============================================================ */ /* ─── TRANSITION FOR SMOOTH TOGGLE ─── */ html.light *, html.light *::before, html.light *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ─── ROOT COLOR OVERRIDES ─── */ html.light { --warna_1: #e5e7eb; --warna_2: #f3f4f6; --warna_3: #f97316; --warna_4: #f9fafb; } /* ─── BODY ─── */ html.light body { background-color: #f3f4f6 !important; color: #1f2937 !important; } /* ─── NAVBAR ─── */ html.light .blurred-navbar, html.light nav.navbar { background-color: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid #e5e7eb !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } html.light nav.navbar a, html.light nav.navbar span, html.light nav.navbar .text-white { color: #1f2937 !important; } html.light nav.navbar a:hover { color: #7c3aed !important; } html.light nav.navbar .bg-primary-500, html.light nav.navbar .bg-primary-600 { color: #ffffff !important; } /* ─── MOBILE MENU ─── */ html.light #mobile-menu { background-color: #ffffff !important; border-top: 1px solid #e5e7eb; } html.light #mobile-menu a { color: #1f2937 !important; } html.light #mobile-menu a:hover { background-color: #f3f4f6 !important; color: #7c3aed !important; } html.light #mobile-menu .bg-murky-800\/95, html.light #mobile-menu .border-murky-700 { background-color: #f9fafb !important; border-color: #e5e7eb !important; } html.light #mobile-menu .text-gray-400 { color: #6b7280 !important; } html.light #mobile-menu .text-primary-200 { color: #7c3aed !important; } /* ─── SEARCH BAR ─── */ html.light #searchInput { background-color: #f3f4f6 !important; color: #1f2937 !important; border: 1px solid #d1d5db !important; } html.light #searchInput::placeholder { color: #9ca3af !important; } html.light #searchInput:focus { background-color: #ffffff !important; border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important; } /* ─── MURKY BACKGROUNDS → LIGHT ─── */ html.light .bg-murky-900 { background-color: #f3f4f6 !important; } html.light .bg-murky-800 { background-color: #e5e7eb !important; } html.light .bg-murky-700 { background-color: #d1d5db !important; } html.light .bg-murky-200 { background-color: #f9fafb !important; } html.light .border-murky-800, html.light .border-murky-700, html.light .border-murky-600, html.light .border-murky-400 { border-color: #e5e7eb !important; } /* ─── SECONDARY BACKGROUNDS ─── */ html.light .bg-secondary-950 { background-color: #f9fafb !important; } /* ─── TEXT COLOR OVERRIDES ─── */ html.light .text-white { color: #1f2937 !important; } html.light .text-murky-300 { color: #6b7280 !important; } html.light .text-murky-200 { color: #4b5563 !important; } html.light .text-murky-800 { color: #1f2937 !important; } html.light .text-gray-400 { color: #6b7280 !important; } html.light .text-gray-500 { color: #6b7280 !important; } html.light .text-foreground { color: #1f2937 !important; } /* ─── HOME PAGE: PRODUCT CARDS ─── */ html.light .bg-muted { background-color: #ffffff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } html.light .bg-muted h2, html.light .bg-muted p { color: #1f2937 !important; } html.light .hover\:ring-offset-murky-900:hover { --tw-ring-offset-color: #f3f4f6 !important; } /* ─── HOME PAGE: TAB BUTTONS ─── */ html.light .tab-button { background-color: #e5e7eb !important; color: #374151 !important; } html.light .tab-button:hover { background-color: #d1d5db !important; } html.light .tab-button.active, html.light .tab-button:focus, html.light .tab-button.bg-primary-600 { background-color: #7c3aed !important; color: #ffffff !important; } /* ─── HOME: BACKGROUND ANIMATION ─── */ html.light .area.bg-gray-900 { background-color: #ede9fe !important; } html.light .area .circles li { background: rgba(124, 58, 237, 0.06) !important; border: 1px solid rgba(124, 58, 237, 0.08) !important; } /* ─── NOTICE BOARD ─── */ html.light .text-yellow-200 { color: #92400e !important; } /* ─── FOOTER ─── */ html.light footer, html.light footer.bg-murky-800 { background-color: #1f2937 !important; } html.light footer .text-white { color: #f3f4f6 !important; } html.light footer a.text-white { color: #f3f4f6 !important; } html.light footer .text-murky-300 { color: #9ca3af !important; } html.light footer .border-murky-800 { border-color: #374151 !important; } /* Footer wave SVG */ html.light .path-0 { fill: #1f2937 !important; } /* ─── DASHBOARD: STATS CARDS ─── */ html.light .stats-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%) !important; border: 1px solid #e5e7eb !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } html.light .stats-card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important; border-color: #d1d5db !important; } html.light .stats-card .text-white { color: #1f2937 !important; } html.light .stats-card .text-gray-400 { color: #6b7280 !important; } /* ─── DASHBOARD: PROFILE CARD ─── */ html.light .profile-card { background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%) !important; border: 1px solid #e5e7eb !important; } html.light .profile-card .text-white { color: #1f2937 !important; } html.light .profile-card .text-gray-400 { color: #6b7280 !important; } /* ─── DASHBOARD: FORM CARDS ─── */ html.light .form-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%) !important; border: 1px solid #e5e7eb !important; } html.light .form-card-header { background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(59, 130, 246, 0.04) 100%) !important; border-bottom: 1px solid #e5e7eb !important; } html.light .form-card-header .text-white, html.light .form-card-header h3 { color: #1f2937 !important; } html.light .form-input { background: #f9fafb !important; border: 1px solid #d1d5db !important; color: #1f2937 !important; } html.light .form-input:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important; background: #ffffff !important; } html.light .form-input::placeholder { color: #9ca3af !important; } html.light .form-label { color: #4b5563 !important; } /* ─── DASHBOARD: QUICK ACTION CARDS ─── */ html.light .quick-action-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%) !important; border: 1px solid #e5e7eb !important; } html.light .quick-action-card:hover { border-color: #c4b5fd !important; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.08) !important; } html.light .quick-action-card .text-white { color: #1f2937 !important; } /* ─── DASHBOARD: BACKGROUND BLURS ─── */ html.light .bg-purple-500\/10 { background-color: rgba(139, 92, 246, 0.04) !important; } html.light .bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.04) !important; } html.light .bg-violet-500\/5 { background-color: rgba(139, 92, 246, 0.02) !important; } /* ─── ORDER / VOUCHER / TRANSACTION PAGES ─── */ html.light .bg-murky-800\/50, html.light .bg-murky-800\/80 { background-color: rgba(255, 255, 255, 0.95) !important; } html.light table thead { background-color: #f3f4f6 !important; } html.light table thead th { color: #374151 !important; border-bottom: 2px solid #e5e7eb !important; } html.light table tbody td { color: #374151 !important; border-bottom: 1px solid #f3f4f6 !important; } html.light table tbody tr:hover { background-color: #f9fafb !important; } /* ─── FUND PAGE ─── */ html.light .border-primary-500\/20 { border-color: #c4b5fd !important; } /* ─── TOPUP / PRODUCT DETAIL PAGE ─── */ html.light .bg-murky-800, html.light [class*="bg-murky-800"] { background-color: #ffffff !important; } html.light .ring-murky-700 { --tw-ring-color: #e5e7eb !important; } /* ─── PAGINATION ─── */ html.light .pagination .page-link { background-color: #ffffff !important; border-color: #e5e7eb !important; color: #374151 !important; } html.light .pagination .page-item.active .page-link { background-color: #7c3aed !important; border-color: #7c3aed !important; color: #ffffff !important; } /* ─── BADGES / ALERTS ─── */ html.light .bg-green-500\/10 { background-color: rgba(16, 185, 129, 0.08) !important; } html.light .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.08) !important; } /* ─── SCROLLBAR STYLING ─── */ html.light ::-webkit-scrollbar { width: 8px; } html.light ::-webkit-scrollbar-track { background: #f3f4f6; } html.light ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } html.light ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* ─── THEME TOGGLE BUTTON ─── */ .theme-toggle { position: relative; width: 44px; height: 24px; border-radius: 9999px; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; transition: background-color 0.3s ease; flex-shrink: 0; } html.dark .theme-toggle { background: linear-gradient(135deg, #312e81, #4c1d95); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } html.light .theme-toggle { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); } .theme-toggle-knob { position: absolute; width: 18px; height: 18px; border-radius: 50%; top: 3px; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 10px; } html.dark .theme-toggle-knob { transform: translateX(3px); background-color: #a78bfa; color: #312e81; box-shadow: 0 2px 6px rgba(167, 139, 250, 0.5); } html.light .theme-toggle-knob { transform: translateX(23px); background-color: #ffffff; color: #f59e0b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } /* ─── SWEETALERT2 in light mode ─── */ html.light .swal2-popup { background: #ffffff !important; color: #1f2937 !important; } html.light .swal2-title { color: #1f2937 !important; } html.light .swal2-html-container { color: #4b5563 !important; } /* ─── TOASTR in light mode ─── */ html.light .toast { background-color: #ffffff !important; color: #1f2937 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } /* ─── REFERRAL PAGE ─── */ html.light .bg-gradient-to-r.from-murky-800.to-murky-900 { background: linear-gradient(to right, #ffffff, #f9fafb) !important; } /* ─── GENERAL CARD SHADOWS for light mode ─── */ html.light .shadow-2xl { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; } /* ─── KEEP PRIMARY BUTTONS WHITE TEXT ─── */ html.light .bg-primary-500, html.light .bg-primary-600, html.light .btn-primary, html.light .bg-gradient-to-r.from-red-500, html.light .bg-gradient-to-r.from-blue-500, html.light a.bg-primary-500 { color: #ffffff !important; } /* ─── MOBILE MENU BUTTON ─── */ html.light #mobile-menu-button { background-color: #7c3aed !important; color: #ffffff !important; } /* ─── ORDERS V2: SIDEBAR ─── */ html.light .orders-v2-sidebar { background: rgba(255, 255, 255, 0.98) !important; border: 1px solid #e5e7eb !important; } html.light .orders-v2-sidebar-menu a { color: #374151 !important; } html.light .orders-v2-sidebar-menu a .orders-v2-sidebar-icon { background: #f3f4f6 !important; } html.light .orders-v2-sidebar-menu a:hover { background: #f3f4f6 !important; color: #1f2937 !important; } html.light .orders-v2-sidebar-menu li.active a { color: #ffffff !important; } /* ─── ORDERS V2: FILTER CARD ─── */ html.light .orders-v2-filter-card { background: rgba(243, 244, 246, 0.95) !important; border: 1px solid #e5e7eb !important; } html.light .orders-v2-filter-card .searchstatus, html.light .orders-v2-filter-card .searchbox { background: #ffffff !important; color: #1f2937 !important; border: 1px solid #d1d5db !important; } /* ─── ORDERS V2: ORDER ITEMS ─── */ html.light .orders-v2-item { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid #e5e7eb !important; } html.light .orders-v2-item-header { color: #6b7280 !important; } html.light .orders-v2-item-code { background: #f3f4f6 !important; color: #374151 !important; } html.light .orders-v2-item-info-title { color: #1f2937 !important; } html.light .orders-v2-item-info-sub { color: #6b7280 !important; } html.light .orders-v2-item-info-player { color: #9ca3af !important; } html.light .orders-v2-item-amount-label { color: #9ca3af !important; } html.light .orders-v2-item-amount { color: #1f2937 !important; } html.light .orders-v2-detail { color: #374151 !important; border-top: 1px dashed #d1d5db !important; } /* ─── ORDERS V2: PAGINATION ─── */ html.light .orders-v2-pagination a, html.light .orders-v2-pagination span { background: #ffffff !important; border: 1px solid #e5e7eb !important; color: #374151 !important; } html.light .orders-v2-pagination a:hover, html.light .orders-v2-pagination .active span { color: #ffffff !important; } /* ─── ORDERS V2: TABLE CARD ─── */ html.light .orders-v2-table-card { background: #ffffff !important; } html.light .orders-v2-table-card thead tr { background: #f3f4f6 !important; } html.light .orders-v2-table-card tbody tr:hover { background: rgba(249, 115, 22, 0.04) !important; } /* ─── VOUCHER CARDS ─── */ html.light .voucher-card { background: #f9fafb !important; border: 1px solid #e5e7eb !important; } html.light .voucher-code-item { background: linear-gradient(90deg, #f9fafb, #ffffff) !important; border: 1px solid #d1d5db !important; } html.light .voucher-code-item:hover { background: linear-gradient(90deg, #f3f4f6, #f9fafb) !important; border-color: #7c3aed !important; } html.light .voucher-code-item span { color: #b45309 !important; } /* ─── TRANSACTION CARDS ─── */ html.light .transaction-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%) !important; border: 1px solid #e5e7eb !important; } html.light .transaction-card:hover { border-color: #c4b5fd !important; } html.light .transaction-card .text-white { color: #1f2937 !important; } html.light .summary-card { background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(59, 130, 246, 0.04) 100%) !important; border: 1px solid #e5e7eb !important; } /* ─── TRANSACTION PAGINATION ─── */ html.light .pagination a, html.light .pagination span { background: #ffffff !important; border: 1px solid #e5e7eb !important; color: #374151 !important; } html.light .pagination a:hover { background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0.15) 100%) !important; border-color: #c4b5fd !important; color: #7c3aed !important; } html.light .pagination .active span { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important; border-color: #7c3aed !important; color: #ffffff !important; } /* ─── FUND PAGE ─── */ html.light .payment-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%) !important; border: 2px solid #e5e7eb !important; } html.light .payment-card:hover { border-color: #c4b5fd !important; } html.light .payment-card .text-white { color: #1f2937 !important; } html.light .amount-chip { background: #f3f4f6 !important; border: 1px solid #d1d5db !important; color: #374151 !important; } html.light .amount-chip:hover { border-color: #c4b5fd !important; background: rgba(124, 58, 237, 0.05) !important; } html.light .amount-chip.selected { color: #ffffff !important; } html.light .form-input-lg { background: #f9fafb !important; border: 2px solid #d1d5db !important; color: #1f2937 !important; } html.light .form-input-lg:focus { border-color: #7c3aed !important; background: #ffffff !important; } html.light .info-card { background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(37, 99, 235, 0.04) 100%) !important; border: 1px solid #dbeafe !important; } html.light .info-card .text-white { color: #1f2937 !important; } html.light .info-card .text-gray-300 { color: #4b5563 !important; } /* ─── TOPUP / PRODUCT PAGE ─── */ html.light .product-list { background: #f9fafb !important; border-color: #e5e7eb !important; } html.light .product-list:hover { border-color: #c4b5fd !important; } html.light .product-list .text-white { color: #1f2937 !important; } html.light .product-list.selected_variation { background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(118, 75, 162, 0.05) 100%) !important; } html.light .method-list { background: #f9fafb !important; border-color: #e5e7eb !important; } html.light .method-list:hover { border-color: #c4b5fd !important; } html.light .method-list .text-white { color: #1f2937 !important; } html.light .method-list.selected { background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(118, 75, 162, 0.05) 100%) !important; } /* ─── TOPUP PAGE: INPUTS ─── */ html.light .bg-murky-900 input, html.light input.bg-murky-900 { background: #f9fafb !important; color: #1f2937 !important; border-color: #d1d5db !important; } html.light .bg-murky-900 input:focus, html.light input.bg-murky-900:focus { background: #ffffff !important; border-color: #7c3aed !important; } /* ─── TOPUP PAGE: ORDER SUMMARY ─── */ html.light .from-murky-900.to-murky-800, html.light .bg-gradient-to-br.from-murky-900 { background: linear-gradient(135deg, #ffffff, #f9fafb) !important; border: 1px solid #e5e7eb !important; } html.light .content-title-ms { color: #1f2937 !important; } html.light .content-box-no-padding { background: #ffffff !important; } /* ─── LOGIN/REGISTER PAGES ─── */ html.light .bg-murky-900.min-h-screen, html.light section.min-h-screen { background-color: transparent !important; } /* ─── KEEP COLORED TEXT IN LIGHT MODE ─── */ html.light .text-green-400, html.light .text-purple-400, html.light .text-amber-400, html.light .text-blue-400, html.light .text-red-400, html.light .text-primary-400, html.light .text-primary-200, html.light .text-primary-300 { /* Keep accent colors — override the global .text-white rule */ color: inherit; } /* ─── EMPTY STATE ─── */ html.light .bg-gradient-to-br.from-murky-800\/95 { background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98)) !important; border: 1px solid #e5e7eb !important; } /* ─── SELECT DROPDOWNS ─── */ html.light select { background-color: #ffffff !important; color: #1f2937 !important; border: 1px solid #d1d5db !important; } html.light select option { background-color: #ffffff !important; color: #1f2937 !important; }