/* ============================================
   MULTI-THEME CSS — TopUp Store
   Themes: gaming (default), minimalist, neon, pastel
   ============================================ */

/* === GAMING THEME (DEFAULT) === */
[data-theme="gaming"], :root {
    --bg-primary: #0a1628;
    --bg-secondary: #0f1d32;
    --bg-card: #162236;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --accent: #00d4ff;
    --accent-secondary: #7c3aed;
    --gradient: linear-gradient(135deg, #00d4ff, #7c3aed);
    --border: rgba(255,255,255,0.06);
    --card-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --glow: 0 0 20px rgba(0,212,255,0.15);
}

/* === MINIMALIST THEME === */
[data-theme="minimalist"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --accent: #3b82f6;
    --accent-secondary: #1d4ed8;
    --gradient: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --border: rgba(0,0,0,0.08);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --glow: none;
}
[data-theme="minimalist"] body { background: #f8fafc; color: #0f172a; }
[data-theme="minimalist"] .navbar { background: #fff; border-bottom: 1px solid #e2e8f0; }
[data-theme="minimalist"] .card { border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* === NEON THEME === */
[data-theme="neon"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --accent: #39ff14;
    --accent-secondary: #ff00ff;
    --gradient: linear-gradient(135deg, #39ff14, #ff00ff);
    --border: rgba(57,255,20,0.15);
    --card-shadow: 0 4px 24px rgba(0,0,0,0.5);
    --glow: 0 0 30px rgba(57,255,20,0.2);
}
[data-theme="neon"] .navbar { border-bottom: 1px solid rgba(57,255,20,0.2); }
[data-theme="neon"] .game-card:hover { box-shadow: 0 0 25px rgba(57,255,20,0.3); }
[data-theme="neon"] .btn-primary { background: linear-gradient(135deg, #39ff14, #00ff88); color: #000; }

/* === PASTEL THEME === */
[data-theme="pastel"] {
    --bg-primary: #fdf2f8;
    --bg-secondary: #fce7f3;
    --bg-card: #ffffff;
    --text-primary: #4a1d63;
    --text-secondary: #9333ea;
    --accent: #f472b6;
    --accent-secondary: #a855f7;
    --gradient: linear-gradient(135deg, #f472b6, #a855f7);
    --border: rgba(244,114,182,0.2);
    --card-shadow: 0 4px 16px rgba(244,114,182,0.15);
    --glow: 0 0 20px rgba(244,114,182,0.15);
}
[data-theme="pastel"] body { background: #fdf2f8; color: #4a1d63; }
[data-theme="pastel"] .navbar { background: rgba(255,255,255,0.8); backdrop-filter: blur(20px); }
[data-theme="pastel"] .card { border: 1px solid rgba(244,114,182,0.2); }

/* === SEASONAL AUTO-SWITCH === */
/* Ramadhan (March-April) */
[data-season="ramadhan"] {
    --accent: #fbbf24;
    --accent-secondary: #059669;
    --gradient: linear-gradient(135deg, #fbbf24, #059669);
}

/* Christmas (December) */
[data-season="christmas"] {
    --accent: #ef4444;
    --accent-secondary: #22c55e;
    --gradient: linear-gradient(135deg, #ef4444, #22c55e);
}

/* Independence Day (August) */
[data-season="merdeka"] {
    --accent: #ef4444;
    --accent-secondary: #ffffff;
    --gradient: linear-gradient(135deg, #ef4444, #ffffff);
}

/* === PRICE TICKER MARQUEE === */
.price-ticker {
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 500;
}

.price-ticker-wrap {
    display: inline-block;
    animation: ticker 30s linear infinite;
}

.price-ticker-item {
    display: inline-block;
    padding: 0 20px;
}

.price-ticker-item.up { color: #ef4444; }
.price-ticker-item.down { color: #22c55e; }

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === THEME SWITCHER === */
.theme-switcher {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.theme-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
}

.theme-dot:hover { transform: scale(1.2); }
.theme-dot.active { border-color: white; box-shadow: 0 0 8px rgba(255,255,255,0.3); }

.theme-dot[data-theme="gaming"] { background: linear-gradient(135deg, #00d4ff, #7c3aed); }
.theme-dot[data-theme="minimalist"] { background: linear-gradient(135deg, #f8fafc, #3b82f6); }
.theme-dot[data-theme="neon"] { background: linear-gradient(135deg, #39ff14, #ff00ff); }
.theme-dot[data-theme="pastel"] { background: linear-gradient(135deg, #f472b6, #a855f7); }

/* === COMPARISON PANEL === */
.compare-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 2px solid var(--accent);
    padding: 14px 20px;
    display: none;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    backdrop-filter: blur(20px);
}

.compare-panel.show { display: flex; }
.compare-items { display: flex; gap: 10px; }
.compare-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}