/* =============================================================
   THEME GLOBALS BOOST — Universal UI re-tint for active theme.
   Loaded AFTER the active theme CSS.
   Uses the CSS variables that each theme defines (--aurora-magenta,
   --aurora-violet, --aurora-cyan, --star-gold, --ink, --line-bright)
   so changes appear on EVERY page (home, transaksi, harga, akun,
   admin, dll) — not just the home page.
   ============================================================= */

/* === BRIDGE: alias per-page var naming convention (--c-*) ke theme vars.
   Per-page <style> sometimes re-defines --c-line-bright via :root which
   normally would override. Boost loads AFTER theme + AFTER page :root,
   so by using body.astra (higher specificity), our bridge ALWAYS wins. */
body.astra {
    --c-line:          var(--line, rgba(139, 92, 246, 0.15)) !important;
    --c-line-bright:   var(--line-bright, rgba(139, 92, 246, 0.4)) !important;
    --c-space-void:    var(--space-void, #050510) !important;
    --c-space-deep:    var(--space-deep, #0a0a1f) !important;
    --c-space-mid:     var(--space-mid, #131333) !important;
    --c-ink:           var(--ink, #f5f5ff) !important;
    --c-ink-dim:       var(--ink-dim, #c4c4e0) !important;
    --c-muted:         var(--muted, #8888aa) !important;
    --c-success:       #34d399 !important;
    --c-danger:        #f87171 !important;
    /* aurora vars locked at body.astra level so per-page :root overrides can't win.
       Must NOT self-reference (--foo: var(--foo) is cyclic → guaranteed-invalid in CSS).
       Light-mode block further below overrides these with indigo values. */
    --aurora-violet:  #8b5cf6;
    --aurora-magenta: #ec4899;
    --aurora-cyan:    #06b6d4;
    --star-gold:      #fbbf24;
    /* === Surface tokens — themes override --theme-surface-* to change card/panel bg.
       Dark themes leave these unset → fallback to transparent-black (current behaviour).
       Light/white themes set --theme-surface-card:#fff etc. in their CSS file. */
    --surface-card:     var(--theme-surface-card,     rgba(0,0,0,0.30)) !important;
    --surface-elevated: var(--theme-surface-elevated, rgba(0,0,0,0.18)) !important;
    --shadow-card:      var(--theme-shadow-card,      rgba(0,0,0,0.35)) !important;
    --surface-input:    var(--theme-surface-input,    rgba(0,0,0,0.35)) !important;
    --surface-nav:      var(--theme-surface-nav,      rgba(10,11,34,0.85)) !important;
}

/* === Light mode: force CSS vars to correct indigo/blue values.
   Specificity 0,0,2,1 beats per-page :root{} (0,0,1,0) even when the
   page <style> block comes later in source order. This ensures all
   var(--aurora-*), var(--ink) etc. in per-page inline CSS resolve to
   light-mode values instead of the hardcoded dark defaults. */
html[data-color-mode="light"] body.astra {
    --aurora-violet:  #4f46e5 !important;
    --aurora-magenta: #6366f1 !important;
    --aurora-cyan:    #818cf8 !important;
    --star-gold:      #f59e0b !important;
    --ink:            #0f172a !important;
    --ink-dim:        #334155 !important;
    --muted:          #64748b !important;
    --line:           rgba(79,70,229,0.10) !important;
    --line-bright:    rgba(79,70,229,0.25) !important;
    --space-void:     #f8fafc !important;
    --space-deep:     #f1f5f9 !important;
    --space-mid:      #e2e8f0 !important;
    --success:        #16a34a !important;
    --danger:         #dc2626 !important;
}

/* === Generic cards (Bootstrap & custom) — themed glassy bg with accent border === */
body.astra .card,
body.astra .ord-card,
body.astra .pv-card,
body.astra .pc-card,
body.astra .v-card,
body.astra .fs-card,
body.astra .lvl-card,
body.astra .cat-card,
body.astra .edit-card,
body.astra .modal-content {
    background: linear-gradient(135deg, var(--surface-card, rgba(0,0,0,0.30)), var(--surface-elevated, rgba(0,0,0,0.18))) !important;
    border: 1px solid var(--line-bright, rgba(168,85,247,0.30)) !important;
    box-shadow: 0 8px 22px var(--shadow-card, rgba(0,0,0,0.35)) !important;
    color: var(--ink, #f5f5ff) !important;
}

/* === Generic badges retint === */
body.astra .badge.bg-primary,
body.astra .badge.bg-info {
    background-color: var(--aurora-cyan, #06b6d4) !important;
    color: #fff !important;
}
body.astra .badge.bg-success {
    background-color: #34d399 !important;
    color: #0a0014 !important;
}
body.astra .badge.bg-warning {
    background-color: var(--star-gold, #fbbf24) !important;
    color: #0a0014 !important;
}
body.astra .badge.bg-danger {
    background-color: var(--aurora-magenta, #ec4899) !important;
    color: #fff !important;
}
body.astra .badge.bg-secondary {
    background-color: var(--aurora-violet, #8b5cf6) !important;
    color: #fff !important;
}

/* Text color helpers — re-tint */
body.astra .text-primary { color: var(--aurora-magenta, #ec4899) !important; }
body.astra .text-info { color: var(--aurora-cyan, #06b6d4) !important; }
body.astra .text-warning { color: var(--star-gold, #fbbf24) !important; }
body.astra .text-success { color: #34d399 !important; }
body.astra .text-danger { color: #f87171 !important; }
body.astra .text-muted { color: var(--muted, #7c8bbd) !important; opacity: 0.85; }

/* Generic h2 em accent (used in home, /price, etc.) */
body.astra h2 em {
    color: var(--aurora-magenta, #ec4899) !important;
    font-style: italic;
}

/* Section title eyebrow */
body.astra .eyebrow,
body.astra .section-intro .eyebrow,
body.astra .section-intro span.eyebrow {
    color: var(--aurora-cyan, #06b6d4) !important;
}

/* Game grid game-card hover accent (covers home & /price grids) */
body.astra .games-grid .game-card:hover,
body.astra .game-card:hover {
    border-color: var(--aurora-magenta, #ec4899) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,0.45), 0 0 18px var(--line-bright) !important;
}

/* /price-specific game card head re-tint */
body.astra .game-card-head { border-color: var(--line-bright) !important; }
body.astra .game-card-img-fallback {
    background: linear-gradient(135deg, var(--aurora-violet), var(--aurora-magenta)) !important;
}

/* Trending pill retint (home & elsewhere) */
body.astra .trending-pill {
    border-color: var(--line-bright) !important;
}
body.astra .trending-pill:hover {
    border-color: var(--aurora-magenta, #ec4899) !important;
    color: var(--ink, #fff) !important;
}

/* /transaksi search box accent */
body.astra .search-card { border-color: var(--line-bright) !important; }
body.astra .search-card::before {
    background: linear-gradient(90deg, transparent, var(--aurora-magenta), var(--aurora-cyan), var(--aurora-magenta), transparent) !important;
}

/* /transaksi detail card */
body.astra .detail-card.focus { border-color: var(--line-bright) !important; }

/* Notif banner left-edge color */
body.astra .notif-banner.success { border-left-color: #34d399 !important; }
body.astra .notif-banner.pending { border-left-color: var(--star-gold) !important; }
body.astra .notif-banner.info { border-left-color: var(--aurora-cyan) !important; }
body.astra .notif-banner.failed { border-left-color: #f87171 !important; }

/* /account stat cards */
body.astra .stat-card {
    background: linear-gradient(135deg, var(--surface-card, rgba(0,0,0,0.25)), var(--surface-elevated, rgba(0,0,0,0.10))) !important;
    border: 1px solid var(--line-bright) !important;
}
body.astra .stat-label { color: var(--muted, #a9b6e0) !important; }
body.astra .stat-value { color: var(--ink, #fff) !important; }
body.astra .level-badge {
    background: linear-gradient(135deg, var(--aurora-violet), var(--aurora-magenta)) !important;
}

/* Action card (account menu) */
body.astra .action-card {
    background: linear-gradient(135deg, var(--surface-card, rgba(0,0,0,0.25)), var(--surface-elevated, rgba(0,0,0,0.10))) !important;
    border: 1px solid var(--line-bright) !important;
    color: var(--ink, #fff) !important;
}
body.astra .action-card:hover {
    border-color: var(--aurora-magenta, #ec4899) !important;
    transform: translateY(-3px);
}

/* /buy/<slug> step-card */
body.astra .step-card {
    background: linear-gradient(135deg, var(--surface-card, rgba(0,0,0,0.30)), var(--surface-elevated, rgba(0,0,0,0.15))) !important;
    border: 1px solid var(--line, rgba(168,85,247,0.18)) !important;
}
body.astra .step-num span,
body.astra .pay-group-icon {
    background: linear-gradient(135deg, var(--aurora-violet), var(--aurora-magenta)) !important;
}
body.astra .nominal-item input:checked + .nominal-label,
body.astra .pay-option input:checked + .pay-label {
    border-color: var(--aurora-magenta) !important;
    box-shadow: 0 0 14px var(--line-bright) !important;
}
body.astra .nominal-amount,
body.astra .nominal-price {
    color: var(--ink) !important;
}
body.astra .nominal-price-old { color: var(--muted) !important; }

/* Footer-like utility */
body.astra .price-status.available::before { background: #34d399 !important; box-shadow: 0 0 5px #34d399 !important; }
body.astra .price-status.available { color: #34d399 !important; }

/* Admin layout — minor accent retint (avatar initials, sidebar active) */
body.astra .menu-item.active > .menu-link {
    color: var(--aurora-magenta, #ec4899) !important;
}

/* Pagination */
body.astra .pagination .page-item .page-link {
    background: var(--surface-card, rgba(0,0,0,0.30)) !important;
    border-color: var(--line-bright) !important;
    color: var(--ink-dim, #c4c4e0) !important;
}
body.astra .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--aurora-violet), var(--aurora-magenta)) !important;
    border-color: var(--aurora-magenta) !important;
    color: #fff !important;
}

/* Modals */
body.astra .modal-header, body.astra .modal-footer {
    background: transparent !important;
    border-color: var(--line-bright) !important;
}

/* Generic .bg-label-* used on admin: keep readable */
body.astra .bg-label-primary { background: rgba(168,85,247,0.15) !important; color: var(--aurora-magenta) !important; }
body.astra .bg-label-success { background: rgba(52,211,153,0.15) !important; color: #34d399 !important; }
body.astra .bg-label-warning { background: rgba(251,191,36,0.15) !important; color: var(--star-gold) !important; }
body.astra .bg-label-danger  { background: rgba(248,113,113,0.15) !important; color: #f87171 !important; }
body.astra .bg-label-info    { background: rgba(0,212,255,0.15) !important; color: var(--aurora-cyan) !important; }

/* === Per-page surface overrides (hero search, transaksi, buy, cs) ===
   These are inline <style> blocks in each view, but body.astra + !important wins. */

/* Home — hero search box */
body.astra .hero-search-box {
    background: linear-gradient(135deg, var(--surface-card, rgba(19,19,51,0.85)), var(--surface-elevated, rgba(10,10,31,0.70))) !important;
    box-shadow: 0 12px 40px var(--shadow-card, rgba(139,92,246,0.18)) !important;
}

/* Transaksi — search card panel */
body.astra .search-card {
    background: linear-gradient(135deg, var(--surface-card, rgba(20,20,50,0.7)), var(--surface-elevated, rgba(10,10,31,0.5))) !important;
    box-shadow: 0 16px 50px var(--shadow-card, rgba(139,92,246,0.2)) !important;
}

/* Transaksi — detail card */
body.astra .detail-card {
    background: linear-gradient(135deg, var(--surface-card, rgba(19,19,51,0.6)), var(--surface-elevated, rgba(10,10,31,0.4))) !important;
    color: var(--ink, #f5f5ff) !important;
}
body.astra .detail-label { color: var(--ink-dim, #c4c4e0) !important; }
body.astra .detail-value { color: var(--ink, #f5f5ff) !important; }
body.astra .detail-row   { border-bottom-color: var(--line, rgba(139,92,246,0.08)) !important; }

/* Transaksi — notif banners text */
body.astra .notif-banner h3 { color: var(--ink, #f5f5ff) !important; }
body.astra .notif-banner p  { color: var(--ink-dim, #c4c4e0) !important; }

/* Transaksi — eyebrow tag */
body.astra .tx-eyebrow {
    background: var(--surface-elevated, rgba(255,255,255,0.03)) !important;
    border-color: var(--line, rgba(139,92,246,0.2)) !important;
    color: var(--muted, #8888aa) !important;
}

/* Transaksi — page title & subtitle */
body.astra .tx-page-title { color: var(--ink, #f5f5ff) !important; }
body.astra .tx-page-subtitle { color: var(--ink-dim, #c4c4e0) !important; }

/* Transaksi — search input */
body.astra .search-input-fld {
    background: var(--surface-elevated, rgba(255,255,255,0.04)) !important;
    border-color: var(--line, rgba(139,92,246,0.2)) !important;
    color: var(--ink, #f5f5ff) !important;
}
body.astra .search-input-fld:focus {
    border-color: var(--aurora-magenta, #ec4899) !important;
}

/* Buy page — summary bar */
body.astra .summary-bar {
    background: var(--surface-card, rgba(10,10,31,0.85)) !important;
    border-color: var(--line-bright, rgba(139,92,246,0.4)) !important;
    box-shadow: 0 16px 48px var(--shadow-card, rgba(0,0,0,0.6)) !important;
}
body.astra .summary-label   { color: var(--muted, #8888aa) !important; }
body.astra .summary-product { color: var(--ink, #f5f5ff) !important; }

/* Buy page — modal card */
body.astra .modal-card {
    background: linear-gradient(180deg, var(--surface-elevated, rgba(20,20,50,0.98)), var(--surface-card, rgba(10,10,31,0.98))) !important;
    color: var(--ink, #f5f5ff) !important;
}
body.astra .modal-handle {
    background: var(--line-bright, rgba(255,255,255,0.2)) !important;
}

/* CS page — cs-card */
body.astra .cs-card {
    background: linear-gradient(135deg, var(--surface-card, rgba(139,92,246,0.10)), var(--surface-elevated, rgba(236,72,153,0.06))) !important;
    border-color: var(--line-bright, rgba(139,92,246,0.25)) !important;
    box-shadow: 0 12px 40px var(--shadow-card, rgba(0,0,0,0.25)) !important;
}
body.astra .cs-card-body p { color: var(--ink-dim, #c4c4e0) !important; }

/* Payment page — invoice top */
body.astra .inv-top-card,
body.astra .payment-wrap .card {
    background: linear-gradient(135deg, var(--surface-card, rgba(19,19,51,0.6)), var(--surface-elevated, rgba(10,10,31,0.4))) !important;
}