/* 
   RRVape.id Style CSS 
   Urutan: Root Variables -> Base Styles -> Theme Overrides -> Component Styles
*/

:root {
    --bg-main: #0f172a; 
    --bg-card: #1e293b; 
    --text-main: #f1f5f9; 
    --text-muted: #94a3b8; 
    --border-color: #334155; 
    --accent-blue: #3b82f6;
}

html[data-theme="light"] {
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --text-main: #020617; 
    --text-muted: #64748b;
    --border-color: #e2e8f0;
}

/* Base Styles */
html, body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Utility Classes */
.bg-main { background-color: var(--bg-main) !important; }
.text-main { color: var(--text-main) !important; }

/* 
   TAILWIND OVERRIDES (FORCE DARK)
*/
html[data-theme="dark"] .bg-white { background-color: var(--bg-card) !important; }
html[data-theme="dark"] .bg-gray-50 { background-color: var(--bg-main) !important; }
html[data-theme="dark"] .bg-gray-100, 
html[data-theme="dark"] .bg-gray-200 { background-color: #334155 !important; }

html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800 { color: var(--text-main) !important; }

html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-gray-600 { color: var(--text-muted) !important; }

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-slate-300 { border-color: var(--border-color) !important; }

/* Detail Pesanan Box */
html[data-theme="dark"] #order-details,
html[data-theme="dark"] .bg-slate-50.p-4.rounded-lg {
    background-color: #0f172a !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

/* 
   FORM ELEMENTS (WhatsApp Modal, etc)
*/
html[data-theme="dark"] label { color: var(--text-main) !important; }

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #0f172a !important;
    color: white !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #64748b !important;
}

/* 
   PRODUCT PAGE SPECIFIC 
*/
html[data-theme="dark"] #quantity {
    background-color: #0f172a !important;
    color: white !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] #decrease-qty, 
html[data-theme="dark"] #increase-qty {
    background-color: #334155 !important;
    color: white !important;
}

html[data-theme="dark"] #decrease-qty:hover, 
html[data-theme="dark"] #increase-qty:hover {
    background-color: #475569 !important;
}

/* 
   MODALS 
*/
html[data-theme="dark"] #cart-modal > div,
html[data-theme="dark"] #whatsapp-modal > div {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
}

/* 
   NAVBAR & FOOTER 
*/
html[data-theme="dark"] header {
    background: linear-gradient(to right, #1e293b, #0f172a) !important;
}

/* Dropdown Kategori */
html[data-theme="dark"] #categories-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] #categories-dropdown a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #categories-dropdown a:hover {
    background-color: #334155 !important;
    color: #38bdf8 !important;
}

/* Filter Buttons */
html[data-theme="dark"] .filter-buttons button {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .filter-buttons button.bg-blue-500 {
    background-color: #3b82f6 !important;
    color: white !important;
}

html[data-theme="dark"] .filter-buttons button:hover {
    background-color: #475569 !important;
    color: white !important;
}

/* Footer & Other components */
html[data-theme="dark"] footer {
    background-color: #1e293b !important;
    border-top: 1px solid var(--border-color);
}

/* Override untuk Kotak Detail Pesanan Biru */
html[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-color: #38bdf8 !important;
}

html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-700 {
    color: #38bdf8 !important;
}

/* Ikon Tema Otomatis */
#moon-icon, #sun-icon {
    transition: transform 0.3s ease;
}

html[data-theme="dark"] #moon-icon { display: none !important; }
html[data-theme="dark"] #sun-icon { display: inline-block !important; }

html[data-theme="light"] #moon-icon { display: inline-block !important; }
html[data-theme="light"] #sun-icon { display: none !important; }

/* Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 9999px;
    font-weight: bold;
    border: 2px solid white;
}
html[data-theme="dark"] .cart-badge { border-color: #1e293b; }