/* =====================================================
   NUSANTARA GAMES — LIGHT THEME (PUBLIC)
   Override HANYA aktif saat <html data-theme="light">.
   Tema default (gelap) tidak diubah sama sekali.
   ===================================================== */

/* =====================================================
   SISTEM CSS VARIABLE (dark default + light override)
   Dipakai komponen baru (mis. games.php) agar mengikuti
   tema tanpa menulis override per-selector. Nilai dark =
   tampilan asli; light dioverride saat data-theme="light".
   ===================================================== */
:root{
    --ng-bg:#0f1220;
    --ng-surface:#131a2e;
    --ng-surface-2:#141a2e;
    --ng-hero-a:#1b2440;
    --ng-hero-b:#0f1424;
    --ng-border:#1f2740;
    --ng-border-2:#2a3358;
    --ng-text:#e8ebf5;
    --ng-heading:#ffffff;
    --ng-muted:#9aa2c0;
    --ng-brand:#5b7cff;
    --ng-brand-hover:#6f8bff;
    --ng-accent:#ffd43b;
    --ng-chip:#141a2e;
    --ng-chip-text:#c9cfe6;
    --ng-input:#0f1220;
    --ng-shadow:rgba(91,124,255,.7);
    /* palet style.css (nilai dark = warna asli -> tampilan gelap tidak berubah) */
    --ng-page:#0d1224;
    --ng-slide:#0b1220;
    --ng-panel:#111827;
    --ng-elev:#0f172a;
    --ng-elev-2:#1e293b;
    --ng-hover:#1f2937;
    --ng-info:#38bdf8;
    --ng-scroll:#334155;
    --ng-dot:#666666;
    --ng-btn:#2563eb;
    --ng-muted-2:#cbd5e1;
    /* footer (palet biru/emas; dark = warna asli) */
    --ng-foot-accent:#F5C842;
    --ng-foot-accent-hover:#f0bc1e;
    --ng-foot-surface:#0f2035;
    --ng-foot-border:#1e3a5f;
    --ng-foot-text:#8ab4d4;
    --ng-foot-dim:#4a6a8a;
    --ng-foot-icon:#3a7fd4;
    --ng-foot-ink:#0a1628;
    --ng-foot-input:#0a1628;
    --ng-foot-strong:#ffffff;
    --ng-foot-danger:#e24b4a;
    /* tdetail + nick + status (dark = warna asli) */
    --ng-line:#1f2937;
    --ng-success:#22c55e;
    --ng-success-2:#16a34a;
    --ng-nick-surface:#1f2b3d;
    --ng-ok:#00d26a;
    --ng-error:#ff3d3d;
    /* invoice + status pembayaran (dark = warna asli) */
    --ng-inv-bg:#10131a;
    --ng-inv-surface:#1b2330;
    --ng-inv-border:#333333;
    --ng-warning:#f5b400;
    --ng-paid:#00c853;
    --ng-danger:#e53935;
    --ng-danger-soft:#ff6b6b;
    /* ml.css (field/input & item; dark = warna asli) */
    --ng-field:#1f2937;
    --ng-field-text:#ffffff;
    --ng-item-active:#2b3548;
    --ng-btn-hover:#1d4ed8;
}
html[data-theme="light"]{
    --ng-bg:#eef1f7;
    --ng-surface:#ffffff;
    --ng-surface-2:#ffffff;
    --ng-hero-a:#e7ecfb;
    --ng-hero-b:#f4f6fc;
    --ng-border:#e2e8f0;
    --ng-border-2:#cbd5e1;
    --ng-text:#1a2233;
    --ng-heading:#1a2233;
    --ng-muted:#5b6b7f;
    --ng-brand:#4f6bff;
    --ng-brand-hover:#3f5cf0;
    --ng-accent:#d97706;
    --ng-chip:#f1f4f9;
    --ng-chip-text:#475569;
    --ng-input:#f4f6fc;
    --ng-shadow:rgba(79,107,255,.28);
    --ng-page:#eef1f7;
    --ng-slide:#e5e9f0;
    --ng-panel:#ffffff;
    --ng-elev:#e2e8f0;
    --ng-elev-2:#cbd5e1;
    --ng-hover:#f1f4f9;
    --ng-info:#2563eb;
    --ng-scroll:#cbd5e1;
    --ng-dot:#c2ccdb;
    --ng-btn:#2563eb;
    --ng-muted-2:#475569;
    --ng-foot-accent:#b26a00;
    --ng-foot-accent-hover:#a85f00;
    --ng-foot-surface:#eef2f8;
    --ng-foot-border:#d3ddea;
    --ng-foot-text:#5b7089;
    --ng-foot-dim:#94a3b8;
    --ng-foot-icon:#3a7fd4;
    --ng-foot-ink:#0a1628;
    --ng-foot-input:#ffffff;
    --ng-foot-strong:#1a2233;
    --ng-foot-danger:#dc2626;
    --ng-line:#e2e8f0;
    --ng-success:#16a34a;
    --ng-success-2:#15803d;
    --ng-nick-surface:#1f2b3d;
    --ng-ok:#059669;
    --ng-error:#dc2626;
    --ng-inv-bg:#eef1f7;
    --ng-inv-surface:#ffffff;
    --ng-inv-border:#e2e8f0;
    --ng-warning:#b45309;
    --ng-paid:#059669;
    --ng-danger:#dc2626;
    --ng-danger-soft:#dc2626;
    --ng-field:#f1f4f9;
    --ng-field-text:#1a2233;
    --ng-item-active:#e2e8f0;
    --ng-btn-hover:#1d4ed8;
}

/* ---------- Tombol toggle (dipakai kedua tema) ---------- */
.ng-theme-toggle{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1f2937;
    color:#ffd43b;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    transition:transform .2s ease, background .2s ease;
}
.ng-theme-toggle:hover{ transform:scale(1.08); }

html[data-theme="light"] .ng-theme-toggle{
    background:#ffffff;
    color:#d97706;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
}

/* ============= INDEX / GLOBAL ============= */
html[data-theme="light"] body{ background:#eef1f7; color:#1a2233; }

html[data-theme="light"] .navbar{
    background:rgba(255,255,255,.75);
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 8px 32px rgba(0,0,0,.06);
}
html[data-theme="light"] .brand-info h4{ color:#1a2233; }
html[data-theme="light"] .menu a{ color:#1a2233; }
html[data-theme="light"] .menu a:hover{ color:#d97706; }

html[data-theme="light"] .search-box input{ background:rgba(0,0,0,.05); color:#1a2233; }
html[data-theme="light"] .search-box input::placeholder{ color:#7a8699; }
html[data-theme="light"] .search-box button{ background:#e2e8f0; color:#1a2233; }
html[data-theme="light"] .search-box button:hover{ background:#cbd5e1; }

html[data-theme="light"] .slides{ background:#e5e9f0; }
html[data-theme="light"] .dot{ background:#c2ccdb; }
html[data-theme="light"] .dot.active{ background:#d97706; }

/* Sidebar (drawer) */
html[data-theme="light"] .sidebar{
    background:#ffffff;
    border-right:1px solid rgba(0,0,0,.08);
}
html[data-theme="light"] .sidebar a{ color:#1a2233; }
html[data-theme="light"] .sidebar a:hover{ background:#f1f4f9; }
html[data-theme="light"] .dropdown-btn{ color:#1a2233; }
html[data-theme="light"] .dropdown-btn:hover{ background:#f1f4f9; }
html[data-theme="light"] .dropdown-content{ background:#f6f8fc; }
html[data-theme="light"] .dropdown-content a{ color:#475569; }
html[data-theme="light"] .dropdown-content a:hover{ background:#eef2f7; color:#1a2233; }
html[data-theme="light"] .menu-toggle{ color:#1a2233; }
html[data-theme="light"] .menu-toggle:hover{ color:#d97706; }

/* Section & cards */
html[data-theme="light"] .section-header h2{ color:#1a2233; }
html[data-theme="light"] .section-header p{ color:#5b6b7f; }

html[data-theme="light"] .game-card{
    background:#ffffff;
    color:#1a2233;
    border:1px solid #e2e8f0;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
}
html[data-theme="light"] .game-card h3{ color:#1a2233; }
html[data-theme="light"] .game-card span{ color:#5b6b7f; }

html[data-theme="light"] .produk-title{ color:#1a2233; }
html[data-theme="light"] .produk-card{
    background:#ffffff;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
}
html[data-theme="light"] .produk-card img{ background:#e5e9f0; }
html[data-theme="light"] .produk-card h3{ color:#1a2233; }

/* ============= FOOTER ============= */
html[data-theme="light"] .ng-footer{
    background:#f5f7fb;
    border-top:2px solid #d97706;
}
html[data-theme="light"] .ng-logo{ color:#b26a00; }
html[data-theme="light"] .ng-brand-desc{ color:#5b7089; }
html[data-theme="light"] .ng-socials a{
    border:.5px solid #d3ddea;
    color:#5b7089;
    background:#eef2f8;
}
html[data-theme="light"] .ng-socials a:hover{ background:#d97706; color:#fff; border-color:#d97706; }
html[data-theme="light"] .ng-col h4{ color:#b26a00; }
html[data-theme="light"] .ng-col ul li a{ color:#5b7089; }
html[data-theme="light"] .ng-col ul li a i{ color:#3a7fd4; }
html[data-theme="light"] .ng-col ul li a:hover{ color:#1a2233; }
html[data-theme="light"] .ng-col ul li a:hover i{ color:#b26a00; }
html[data-theme="light"] .ng-marketing-box{ border-top-color:#d3ddea; }
html[data-theme="light"] .ng-marketing-item{ border-bottom-color:#d3ddea; }
html[data-theme="light"] .ng-marketing-icon{ color:#b26a00; }
html[data-theme="light"] .ng-marketing-item strong{ color:#1a2233; }
html[data-theme="light"] .ng-marketing-item div > span{ color:#5b7089; }
html[data-theme="light"] .ng-divider{ border-top:.5px solid #d3ddea; }
html[data-theme="light"] .ng-copyright{ color:#5b7089; }
html[data-theme="light"] .ng-copyright strong{ color:#1a2233; }
html[data-theme="light"] .ng-bottom-links a{ color:#5b7089; }
html[data-theme="light"] .ng-bottom-links a:hover{ color:#1a2233; }
html[data-theme="light"] .ng-tagline-strip{ background:rgba(58,127,212,.08); border:.5px solid #d3ddea; }
html[data-theme="light"] .ng-tagline-strip span{ color:#5b7089; }
html[data-theme="light"] .ng-tagline-strip strong{ color:#b26a00; }
html[data-theme="light"] .ng-dot{ background:#c2ccdb; }

/* ============= TOPUP DETAIL (tdetail.css) ============= */
html[data-theme="light"] .detail-wrapper{ color:#1a2233; }
html[data-theme="light"] .navbar{ } /* sudah di atas */
html[data-theme="light"] .game-info{ background:#ffffff; box-shadow:0 4px 14px rgba(0,0,0,.05); }
html[data-theme="light"] .game-info h2{ color:#1a2233; }
html[data-theme="light"] .game-info p{ color:#5b6b7f; }
html[data-theme="light"] .topup-box{ background:#ffffff; box-shadow:0 4px 14px rgba(0,0,0,.05); }
html[data-theme="light"] .step-title{ color:#1a2233; }
html[data-theme="light"] .form-input{ background:#f1f4f9; border:1px solid #dbe1ea; color:#1a2233; }
html[data-theme="light"] .form-input::placeholder{ color:#94a3b8; }
html[data-theme="light"] .nominal-card{ background:#f8fafc; border:2px solid #e2e8f0; }
html[data-theme="light"] .nominal-card h3{ color:#1a2233; }
html[data-theme="light"] .nominal-card.active{ background:#22c55e18; border-color:#22c55e; }
html[data-theme="light"] .payment-card{ background:#f8fafc; border:1px solid #e2e8f0; color:#1a2233; }
html[data-theme="light"] .payment-card.active{ background:#22c55e18; border:2px solid #22c55e; }

/* Nickname box (nick.css) */
html[data-theme="light"] .nickname-box{ background:#eef2f8; color:#1a2233; }

/* ============= INVOICE / CEK-TRANSAKSI (invoice.css) ============= */
html[data-theme="light"] .invoice-container{ background:#ffffff; color:#1a2233; box-shadow:0 6px 24px rgba(0,0,0,.08); }
html[data-theme="light"] .invoice-container table td{ border-bottom:1px solid #e5e9f0; color:#1a2233; }
html[data-theme="light"] .cek-form input{ background:#f1f4f9; border:1px solid #dbe1ea; color:#1a2233; }

/* ============= Jaring pengaman keterbacaan (light) ============= */
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{ color:#94a3b8; }

/* ============= Modal (SweetAlert2) mengikuti tema ============= */
html[data-theme="dark"] .swal2-popup{ background:#1b2233; color:#e8ebf5; }
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container{ color:#e8ebf5; }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea{ background:#0f1220; color:#e8ebf5; border-color:#2a3358; }
html[data-theme="light"] .swal2-popup{ background:#ffffff; color:#1a2233; }