/* assets/css/style.css - DCM Comprehensive Robust Styles & Fallbacks */
:root {
    --bg-dark: #090D16;
    --bg-light: #F8FAFC;
    --primary-orange: #EA580C;
    --primary-orange-hover: #F97316;
    --secondary-blue: #1D4ED8;
    --secondary-blue-hover: #2563EB;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Base Theme Defaults - PRIORITY DARK */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* =========================================
   DARK MODE (DEFAULT & UTAMA)
   ========================================= */
html.dark, html.dark body {
    background-color: #090D16 !important;
    color: #E2E8F0 !important;
}

html.dark .glass {
    background: rgba(15, 22, 38, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* =========================================
   LIGHT MODE (KONDISIONAL KETIKA TOGGLE AKTIF)
   ========================================= */
html:not(.dark), html:not(.dark) body {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

html:not(.dark) nav {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-color: #E2E8F0 !important;
}

html:not(.dark) .glass,
html:not(.dark) .bento-card,
html:not(.dark) .glass-panel {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .text-white {
    color: #0F172A !important;
}

html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300 {
    color: #334155 !important;
}

html:not(.dark) .text-slate-400 {
    color: #64748B !important;
}

html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/95,
html:not(.dark) .bg-slate-950\/60 {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/90 {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #94A3B8 !important;
}

html:not(.dark) #mobile-menu-drawer {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}

html:not(.dark) #mobile-menu-drawer .bg-\[\#090D16\] {
    background-color: #FFFFFF !important;
}

html:not(.dark) footer,
html:not(.dark) .bg-\[\#070A11\] {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

/* Image Guards */
img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

header img, nav img {
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
    object-fit: contain;
}

footer img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #090D16;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 88, 12, 0.6);
}

/* Modal Popup Core Styles */
#checkout-modal.flex {
    display: flex !important;
}

#checkout-modal.hidden {
    display: none !important;
}

#checkout-modal {
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}