/* ============================================
   DARK MODE STYLES - GUBUG BANTUL
   Dark background + Pink accent combination
   ============================================ */

/* Base dark background */
html.dark body {
    background-color: #0d0d0d !important;
    color: #e2e8f0 !important;
}

/* Header */
html.dark header {
    background-color: #111111 !important;
    border-color: #2d2d2d !important;
}
html.dark header .border-t {
    border-color: #2d2d2d !important;
}
html.dark header a, html.dark header ul li a {
    color: #cbd5e1 !important;
}
html.dark header ul li a:hover,
html.dark header ul li a.text-pink-600 {
    color: #ec4899 !important;
}

/* Search bar */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
    background-color: #1e1e1e !important;
    border-color: #3d3d3d !important;
    color: #e2e8f0 !important;
}
html.dark input::placeholder {
    color: #6b7280 !important;
}
html.dark input:focus,
html.dark select:focus {
    border-color: #ec4899 !important;
}

/* Cards / White panels */
html.dark .bg-white {
    background-color: #181818 !important;
}
html.dark .bg-slate-50 {
    background-color: #111111 !important;
}
html.dark .bg-slate-100 {
    background-color: #0d0d0d !important;
}
html.dark .bg-slate-200 {
    background-color: #252525 !important;
}

/* Text colors */
html.dark .text-slate-800,
html.dark .text-slate-900 {
    color: #f1f5f9 !important;
}
html.dark .text-slate-700 {
    color: #e2e8f0 !important;
}
html.dark .text-slate-600 {
    color: #94a3b8 !important;
}
html.dark .text-slate-500 {
    color: #64748b !important;
}

/* Borders */
html.dark .border-slate-200 {
    border-color: #2d2d2d !important;
}
html.dark .border-slate-100 {
    border-color: #222222 !important;
}
html.dark .border-slate-300 {
    border-color: #3d3d3d !important;
}

/* Pink category bg in dark mode */
html.dark .bg-pink-50 {
    background-color: #2d1a24 !important;
}
html.dark .bg-pink-100 {
    background-color: #3d1f2f !important;
}

/* Hero gradient stays vivid */
html.dark .bg-gradient-to-r.from-pink-500 {
    /* stays bright in dark mode */
}

/* Footer */
html.dark footer {
    background-color: #111111 !important;
    border-color: #2d2d2d !important;
}

/* Accordion */
html.dark .accordion-content {
    background-color: #181818 !important;
}
html.dark button.w-full.flex {
    background-color: #181818 !important;
    color: #e2e8f0 !important;
}
html.dark button.w-full.flex:hover {
    background-color: #222222 !important;
}

/* Product/store card hover */
html.dark .hover\:shadow-md:hover {
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15) !important;
}

/* Store gradient banners - keep bright */
html.dark .bg-gradient-to-r.from-orange-400,
html.dark .bg-gradient-to-r.from-blue-400,
html.dark .bg-gradient-to-r.from-green-400,
html.dark .bg-gradient-to-r.from-purple-400,
html.dark .bg-gradient-to-r.from-yellow-400,
html.dark .bg-gradient-to-r.from-red-400 {
    opacity: 0.85;
}

/* Tab navigation */
html.dark .border-b.border-slate-200 {
    border-color: #2d2d2d !important;
}

/* Breadcrumb bg */
html.dark .bg-white.border-b {
    background-color: #111111 !important;
    border-color: #2d2d2d !important;
}

/* Stat section */
html.dark section.bg-white.py-12.border-y {
    background-color: #181818 !important;
    border-color: #2d2d2d !important;
}

/* FAQ section bright bg in dark */
html.dark .bg-gradient-to-r.from-pink-50 {
    background: linear-gradient(to right, #2d1a24, #3d1f2f) !important;
    border-color: #5d2d45 !important;
}
html.dark .border-pink-200 {
    border-color: #5d2d45 !important;
}

/* Green badge */
html.dark .bg-green-100 {
    background-color: #052e16 !important;
}
html.dark .text-green-600,
html.dark .text-green-700 {
    color: #4ade80 !important;
}

/* Scrollbar */
html.dark ::-webkit-scrollbar {
    width: 8px;
}
html.dark ::-webkit-scrollbar-track {
    background: #111111;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #ec4899;
    border-radius: 4px;
}

/* Transition for smooth mode switch */
body, header, footer, .bg-white, .bg-slate-100, .bg-slate-50,
input, select, .border-slate-200, .text-slate-800 {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}