/*
 * ===================================================================
 * TEMA GLOBAL — Sanggar Prestasi Aksa Swastika
 * Dibagikan ke semua halaman: index, jadwal, toko, game, dsb.
 * Tema disimpan di localStorage: 'as_theme' = 'cerah' | 'redup' | 'sesuaikan'
 * ===================================================================
 */

/* ── Animasi early-apply ── */
body { transition: background 0.4s ease, color 0.3s ease; }

/* ================================================================
   TEMA CERAH — putih bersih, elegan
   ================================================================ */
body.theme-cerah {
    background: #f1f5f9 !important;
    background-image: none !important;
    color: #0f172a !important;
}

/* Aurora & stars off */
body.theme-cerah .aurora      { opacity: 0.03 !important; }
body.theme-cerah #star-field  { opacity: 0    !important; }

/* Body overlay & radial bg reset */
body.theme-cerah::before { display: none; }

/* ── Navbar / Nav ── */
body.theme-cerah nav,
body.theme-cerah .top-nav,
body.theme-cerah .glass-nav {
    background: rgba(255,255,255,0.97) !important;
    border-bottom-color: #e2e8f0 !important;
}
body.theme-cerah nav a,
body.theme-cerah nav span,
body.theme-cerah .top-nav a,
body.theme-cerah .top-nav span {
    color: #0f172a !important;
}
body.theme-cerah nav .text-emerald-400,
body.theme-cerah .top-nav .text-emerald-400 { color: #059669 !important; }
body.theme-cerah nav .text-sky-400,
body.theme-cerah .top-nav .text-sky-400     { color: #0284c7 !important; }
body.theme-cerah nav .text-purple-400       { color: #7c3aed !important; }
body.theme-cerah nav .text-yellow-400       { color: #d97706 !important; }

/* ── Dropdown menus ── */
body.theme-cerah nav .absolute.bg-black\/80,
body.theme-cerah .bg-black\/80,
body.theme-cerah .bg-black\/95,
body.theme-cerah .bg-black\/90 {
    background: rgba(255,255,255,0.98) !important;
    border-color: #e2e8f0 !important;
}
body.theme-cerah nav .absolute a { color: #0f172a !important; }

/* ── Glass cards ── */
body.theme-cerah .glass,
body.theme-cerah .glass-premium,
body.theme-cerah .glass-card,
body.theme-cerah .glass-dark,
body.theme-cerah .schedule-card,
body.theme-cerah .zoom-card {
    background: rgba(255,255,255,0.95) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
}

/* Zoom aktif tetap hijau */
body.theme-cerah .zoom-card.aktif {
    background: rgba(5,150,105,0.08) !important;
    border-color: rgba(5,150,105,0.5) !important;
}

/* ── Section & footer ── */
body.theme-cerah section,
body.theme-cerah footer { background: #f8fafc !important; }
body.theme-cerah footer#lokasi { background: #f1f5f9 !important; border-top-color: #cbd5e1 !important; }

/* ── Card backgrounds ── */
body.theme-cerah .bg-black\/40,
body.theme-cerah .bg-black\/60,
body.theme-cerah .bg-black\/30,
body.theme-cerah .bg-black\/20,
body.theme-cerah .bg-black\/10 { background: rgba(241,245,249,0.9) !important; }
body.theme-cerah .bg-white\/5,
body.theme-cerah .bg-white\/10 { background: rgba(0,0,0,0.04) !important; }
body.theme-cerah .bg-slate-800,
body.theme-cerah .bg-slate-800\/50,
body.theme-cerah .bg-slate-900\/50,
body.theme-cerah .bg-slate-900\/80 { background: #f1f5f9 !important; }

/* ── Text ── */
body.theme-cerah .text-white  { color: #0f172a !important; }
body.theme-cerah .text-slate-300,
body.theme-cerah .text-slate-400,
body.theme-cerah .text-slate-500 { color: #64748b !important; }
body.theme-cerah h1, body.theme-cerah h2,
body.theme-cerah h3, body.theme-cerah h4,
body.theme-cerah h5, body.theme-cerah h6 { color: #0f172a !important; }
body.theme-cerah p { color: #334155 !important; }

/* ── Borders ── */
body.theme-cerah .border-white\/10,
body.theme-cerah .border-white\/5,
body.theme-cerah .border-white\/20 { border-color: #e2e8f0 !important; }

/* ── Floating menus ── */
body.theme-cerah #floating-menu {
    background: rgba(255,255,255,0.98) !important;
    border-color: #cbd5e1 !important;
}
body.theme-cerah #floating-menu a,
body.theme-cerah #floating-menu p { color: #0f172a !important; }

/* ── Floating buttons keep their brand colors ── */
body.theme-cerah #floating-menu-btn  { background: #0284c7 !important; }
body.theme-cerah #floating-jadwal-btn { background: #059669 !important; }
body.theme-cerah #floating-game-btn  { background: #7c3aed !important; }

/* ── Hero gradient reset ── */
body.theme-cerah .text-hero-main {
    background: linear-gradient(to bottom, #0f172a 30%, #0284c7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── Toko page specific ── */
body.theme-cerah .product-card {
    background: rgba(255,255,255,0.95) !important;
    border-color: #e2e8f0 !important;
}
body.theme-cerah .product-card:hover { border-color: #f59e0b !important; }
body.theme-cerah #cart-sidebar { background: #ffffff !important; }

/* ── Jadwal page specific ── */
body.theme-cerah .tab-pill        { color: #64748b !important; }
body.theme-cerah .tab-pill.active { background: #059669 !important; color: #fff !important; }

/* ── Mobile Banner ── */
body.theme-cerah .mobile-banner { background: linear-gradient(to right, #ecfdf5, #f0f9ff) !important; }

/* ================================================================
   TEMA REDUP — biru langit lembut, elegan
   ================================================================ */
body.theme-redup {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #bfdbfe 100%) !important;
    background-image: none !important;
    color: #1e3a5f !important;
}

body.theme-redup .aurora {
    background: linear-gradient(120deg, #93c5fd, #60a5fa, #3b82f6, #7dd3fc) !important;
    opacity: 0.15 !important;
    filter: blur(120px) !important;
}
body.theme-redup #star-field { opacity: 0.12 !important; }
body.theme-redup #star-field .star { background: #3b82f6 !important; }

/* ── Navbar ── */
body.theme-redup nav,
body.theme-redup .top-nav,
body.theme-redup .glass-nav {
    background: rgba(219,234,254,0.97) !important;
    border-bottom-color: #bfdbfe !important;
}
body.theme-redup nav a,
body.theme-redup nav span,
body.theme-redup .top-nav a,
body.theme-redup .top-nav span { color: #1e3a5f !important; }
body.theme-redup nav .text-emerald-400,
body.theme-redup .top-nav .text-emerald-400 { color: #059669 !important; }
body.theme-redup nav .text-sky-400,
body.theme-redup .top-nav .text-sky-400 { color: #2563eb !important; }

/* ── Dropdowns ── */
body.theme-redup nav .absolute.bg-black\/80,
body.theme-redup .bg-black\/80,
body.theme-redup .bg-black\/95,
body.theme-redup .bg-black\/90 {
    background: rgba(239,246,255,0.98) !important;
    border-color: #bfdbfe !important;
}
body.theme-redup nav .absolute a { color: #1e3a5f !important; }

/* ── Glass cards ── */
body.theme-redup .glass,
body.theme-redup .glass-premium,
body.theme-redup .glass-card,
body.theme-redup .glass-dark,
body.theme-redup .schedule-card,
body.theme-redup .zoom-card {
    background: rgba(239,246,255,0.90) !important;
    border-color: rgba(59,130,246,0.25) !important;
    box-shadow: 0 4px 24px rgba(59,130,246,0.1) !important;
}
body.theme-redup .zoom-card.aktif {
    background: rgba(5,150,105,0.1) !important;
    border-color: rgba(5,150,105,0.5) !important;
}

/* ── Sections & footer ── */
body.theme-redup section,
body.theme-redup footer { background: #eff6ff !important; }
body.theme-redup footer#lokasi { background: #dbeafe !important; border-top-color: #bfdbfe !important; }

/* ── Card backgrounds ── */
body.theme-redup .bg-black\/40,
body.theme-redup .bg-black\/60,
body.theme-redup .bg-black\/30,
body.theme-redup .bg-black\/20 { background: rgba(219,234,254,0.85) !important; }
body.theme-redup .bg-white\/5,
body.theme-redup .bg-white\/10 { background: rgba(59,130,246,0.06) !important; }
body.theme-redup .bg-slate-800,
body.theme-redup .bg-slate-800\/50,
body.theme-redup .bg-slate-900\/50 { background: #dbeafe !important; }

/* ── Text ── */
body.theme-redup .text-white  { color: #1e3a5f !important; }
body.theme-redup .text-slate-300,
body.theme-redup .text-slate-400,
body.theme-redup .text-slate-500 { color: #3b82f6 !important; }
body.theme-redup h1, body.theme-redup h2,
body.theme-redup h3, body.theme-redup h4,
body.theme-redup h5 { color: #1e3a5f !important; }
body.theme-redup p { color: #1d4ed8 !important; }

/* ── Borders ── */
body.theme-redup .border-white\/10,
body.theme-redup .border-white\/5,
body.theme-redup .border-white\/20 { border-color: #bfdbfe !important; }

/* ── Floating menu & buttons ── */
body.theme-redup #floating-menu {
    background: rgba(239,246,255,0.98) !important;
    border-color: #bfdbfe !important;
}
body.theme-redup #floating-menu a,
body.theme-redup #floating-menu p { color: #1e3a5f !important; }

/* ── Hero gradient reset ── */
body.theme-redup .text-hero-main {
    background: linear-gradient(to bottom, #1e3a5f 30%, #2563eb 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── Toko page specific ── */
body.theme-redup .product-card {
    background: rgba(239,246,255,0.92) !important;
    border-color: rgba(59,130,246,0.25) !important;
}
body.theme-redup #cart-sidebar { background: #eff6ff !important; }

/* ── Jadwal page ── */
body.theme-redup .tab-pill        { color: #3b82f6 !important; }
body.theme-redup .tab-pill.active { background: #2563eb !important; color: #fff !important; }

/* ================================================================
   TEMA CERIA 🎉 — Warna-warni, Cheerful, Semangat Belajar!
   Terinspirasi dari warna cerah biru langit + aksen kuning & pink
   ================================================================ */
body.theme-ceria {
    background: linear-gradient(160deg, #e0f2fe 0%, #f0f9ff 30%, #fef9c3 60%, #fdf2f8 100%) !important;
    background-image: none !important;
    color: #0c4a6e !important;
}

/* Aurora berubah jadi pelangi ceria */
body.theme-ceria .aurora {
    background: linear-gradient(120deg, #60a5fa, #fbbf24, #f472b6, #34d399, #818cf8) !important;
    opacity: 0.35 !important;
    filter: blur(100px) !important;
    animation: auroraMove 15s infinite ease-in-out !important;
}
body.theme-ceria #star-field { opacity: 0.2 !important; }
body.theme-ceria #star-field .star {
    background: #fbbf24 !important;
    opacity: 0.6 !important;
}

/* ── Navbar ── */
body.theme-ceria nav,
body.theme-ceria .top-nav,
body.theme-ceria .glass-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 2px solid rgba(251, 191, 36, 0.4) !important;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.15) !important;
}
body.theme-ceria nav a,
body.theme-ceria nav span,
body.theme-ceria .top-nav a,
body.theme-ceria .top-nav span { color: #0c4a6e !important; }
body.theme-ceria nav .text-emerald-400,
body.theme-ceria .top-nav .text-emerald-400 { color: #059669 !important; }
body.theme-ceria nav .text-sky-400,
body.theme-ceria .top-nav .text-sky-400 { color: #0284c7 !important; }
body.theme-ceria nav .text-purple-400 { color: #7c3aed !important; }
body.theme-ceria nav .text-yellow-400 { color: #d97706 !important; }

/* ── Dropdown menus ── */
body.theme-ceria nav .absolute.bg-black\/80,
body.theme-ceria .bg-black\/80,
body.theme-ceria .bg-black\/95,
body.theme-ceria .bg-black\/90 {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 8px 30px rgba(251, 191, 36, 0.1) !important;
}
body.theme-ceria nav .absolute a { color: #0c4a6e !important; }

/* ── Glass cards ── */
body.theme-ceria .glass,
body.theme-ceria .glass-premium,
body.theme-ceria .glass-card,
body.theme-ceria .glass-dark,
body.theme-ceria .schedule-card,
body.theme-ceria .zoom-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.12) !important;
}
body.theme-ceria .zoom-card.aktif {
    background: rgba(5, 150, 105, 0.08) !important;
    border-color: rgba(5, 150, 105, 0.5) !important;
}

/* Settings modal card */
body.theme-ceria #settings-modal-card {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    box-shadow: 0 20px 60px rgba(251, 191, 36, 0.2), 0 8px 30px rgba(244, 63, 94, 0.1) !important;
}

/* ── Sections & footer ── */
body.theme-ceria section,
body.theme-ceria footer { background: rgba(240, 249, 255, 0.8) !important; }
body.theme-ceria footer#lokasi {
    background: linear-gradient(135deg, #e0f2fe, #fef9c3) !important;
    border-top-color: rgba(251, 191, 36, 0.3) !important;
}

/* ── Card backgrounds ── */
body.theme-ceria .bg-black\/40,
body.theme-ceria .bg-black\/60,
body.theme-ceria .bg-black\/30,
body.theme-ceria .bg-black\/20,
body.theme-ceria .bg-black\/10 { background: rgba(224, 242, 254, 0.7) !important; }
body.theme-ceria .bg-white\/5,
body.theme-ceria .bg-white\/10 { background: rgba(255, 255, 255, 0.6) !important; }
body.theme-ceria .bg-slate-800,
body.theme-ceria .bg-slate-800\/50,
body.theme-ceria .bg-slate-900\/50,
body.theme-ceria .bg-slate-900\/80 { background: rgba(224, 242, 254, 0.7) !important; }

/* ── Text overrides ── */
body.theme-ceria .text-white { color: #0c4a6e !important; }
body.theme-ceria .text-slate-300,
body.theme-ceria .text-slate-400,
body.theme-ceria .text-slate-500 { color: #0369a1 !important; }
body.theme-ceria h1, body.theme-ceria h2,
body.theme-ceria h3, body.theme-ceria h4,
body.theme-ceria h5, body.theme-ceria h6 { color: #075985 !important; }
body.theme-ceria p { color: #0c4a6e !important; }

/* ── Accent color overrides ── */
body.theme-ceria .text-emerald-400, body.theme-ceria .text-emerald-300 { color: #059669 !important; }
body.theme-ceria .text-sky-400, body.theme-ceria .text-sky-300 { color: #0284c7 !important; }
body.theme-ceria .text-yellow-400, body.theme-ceria .text-yellow-300 { color: #d97706 !important; }
body.theme-ceria .text-rose-400, body.theme-ceria .text-rose-300 { color: #e11d48 !important; }
body.theme-ceria .text-purple-400, body.theme-ceria .text-purple-300 { color: #7c3aed !important; }
body.theme-ceria .text-pink-400, body.theme-ceria .text-pink-300 { color: #db2777 !important; }
body.theme-ceria .text-amber-400, body.theme-ceria .text-amber-300 { color: #d97706 !important; }
body.theme-ceria .text-cyan-400, body.theme-ceria .text-cyan-300 { color: #0891b2 !important; }
body.theme-ceria .text-indigo-400 { color: #4338ca !important; }
body.theme-ceria .text-orange-400 { color: #ea580c !important; }
body.theme-ceria .text-green-400, body.theme-ceria .text-green-300 { color: #15803d !important; }
body.theme-ceria .text-fuchsia-400 { color: #c026d3 !important; }

/* ── Borders ── */
body.theme-ceria .border-white\/10,
body.theme-ceria .border-white\/5,
body.theme-ceria .border-white\/20 { border-color: rgba(251, 191, 36, 0.25) !important; }

/* ── Floating menus ── */
body.theme-ceria #floating-menu {
    background: linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(255,249,235,0.97) 100%) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    box-shadow: 0 20px 50px rgba(251, 191, 36, 0.2), 0 8px 20px rgba(244, 63, 94, 0.08) !important;
}
body.theme-ceria #floating-menu a,
body.theme-ceria #floating-menu p { color: #0c4a6e !important; }

/* ── Floating buttons tetap cerah & colorful ── */
body.theme-ceria #floating-menu-btn {
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5) !important;
}
body.theme-ceria #floating-jadwal-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}
body.theme-ceria #floating-game-btn {
    background: linear-gradient(135deg, #8b5cf6, #d946ef) !important;
}

/* ── Mobile banner ── */
body.theme-ceria .mobile-banner {
    background: linear-gradient(to right, #e0f2fe, #fef9c3) !important;
}

/* ── Hero text ── */
body.theme-ceria .text-hero-main {
    background: linear-gradient(to bottom, #0c4a6e 0%, #0284c7 50%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── Produk & Toko ── */
body.theme-ceria .product-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}
body.theme-ceria .product-card:hover { border-color: #fbbf24 !important; }
body.theme-ceria #cart-sidebar { background: #f0f9ff !important; }

/* ── Jadwal page ── */
body.theme-ceria .tab-pill { color: #0369a1 !important; }
body.theme-ceria .tab-pill.active {
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6) !important;
    color: #fff !important;
}

/* ── Animasi khusus elemen ceria — confetti shimmer ── */
@keyframes shimmerCeria {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Accent bars & highlights dalam mode ceria */
body.theme-ceria .border-l-4.border-sky-400 { border-color: #fbbf24 !important; }
body.theme-ceria .border-b-8.border-yellow-400 { border-color: #f472b6 !important; }

/* Progress bars dan badge warna vivid */
body.theme-ceria .bg-sky-500 { background-color: #0ea5e9 !important; }
body.theme-ceria .bg-emerald-500 { background-color: #10b981 !important; }
body.theme-ceria .bg-yellow-500 { background-color: #f59e0b !important; }
body.theme-ceria .bg-rose-500 { background-color: #f43f5e !important; }
body.theme-ceria .bg-purple-500 { background-color: #8b5cf6 !important; }