/* =========================================================
   VWTOTO / ZELMA - Color Theme Only (OCEAN GOLD VERSION)
   Hanya ganti warna. Struktur, class, ukuran, animasi
   SEMUA TETAP SAMA seperti file asli.
   Load file ini SETELAH CSS asli.
   ========================================================= */

:root {
  /* ===== WARNA UTAMA (Ocean Gold Theme) ===== */
  --gold: #FBBF24;
  --gold-light: #FCD34D;
  --gold-dark: #D97706;
  --gold-deep: #B45309;
  --gold-soft: #FEF3C7;
  --ocean: #0A1420;
  --ocean-soft: #0F1A2A;
  --ocean-card: #132233;
  --white: #FFFFFF;
  --white-soft: #F0F0F0;
  --red: #FF3B3B;
  --green: #00E676;
  --cyan: #22D3EE;
  --gray: #8A8A8A;
  --silver: #C0C0C0;

  /* ===== MAPPING KE VARIABLE ASLI (hanya warna) ===== */

  /* Background */
  --body-bg: #0A1420;
  --default: transparent;

  /* Login / Register */
  --login-panel-color: #F0F0F0;
  --forgot-password-link-hover-color: #FCD34D;
  --login-btn-bg: #FBBF24;
  --login-btn-border: #D97706;
  --login-btn-hover-bg: #FCD34D;
  --login-btn-hover-border: #FBBF24;
  --register-btn-bg: #D97706;
  --register-btn-border: #B45309;
  --register-btn-hover-bg: #F59E0B;
  --register-btn-hover-border: #D97706;

  /* User Info & Wallet */
  --username-color: #FCD34D;
  --wallet-cntr-bg: rgba(251, 191, 36, 0.08);
  --wallet-cntr-color: #FFFFFF;
  --wallet-cntr-border: rgba(251, 191, 36, 0.28);
  --balance-color: #FBBF24;
  --locked-balance-color: #FCD34D;
  --user-info-balance-after-border-top: #FBBF24;
  --user-info-menu-bg: #0F1A2A;
  --user-info-menu-item-bg: #132233;
  --user-info-menu-item-color: #FFFFFF;
  --user-info-menu-item-border: rgba(251, 191, 36, 0.22);
  --user-info-menu-item-hover-bg: rgba(251, 191, 36, 0.15);

  /* Game List */
  --game-list-bg: transparent;
  --game-name-color: #FFFFFF;
  --game-list-img-bg: #132233;
  --game-list-wrapper-cntr-hover-bg: rgba(251, 191, 36, 0.12);
  --game-list-favourite-btn-bg: rgba(0, 0, 0, 0.65);
  --game-list-favourite-btn-border: #FBBF24;
  --home-game-list-cntr-game-item-color: #F0F0F0;
  --play-now-bg: #FBBF24;
  --play-now-color: #FFFFFF;
  --play-now-hover-bg: #FCD34D;
  --free-play-bg: #0EA5E9;
  --free-play-color: #FFFFFF;
  --free-play-hover-bg: #38BDF8;

  /* Provider */
  --provider-page-bg: #132233;
  --provider-title-bg: #FBBF24;
  --provider-title-color: #0A1420;
  --provider-desc-color: #F0F0F0;
  --provider-info-border: rgba(251, 191, 36, 0.22);
  --provider-info-color: #8A8A8A;

  /* Hot Match */
  --hot-match-cntr-color: #FFFFFF;
  --hot-match-live-streaming-link-border: #FBBF24;
  --hot-match-live-streaming-link-color: #FBBF24;
  --hot-match-live-streaming-link-hover-bg: #FBBF24;
  --hot-match-live-streaming-link-hover-color: #0A1420;
  --hot-match-live-streaming-link-hover-border: #FBBF24;

  /* Loyalty */
  --loyalty-top-bar-bg: #0F1A2E;
  --loyalty-top-bar-main-text-color: #FFFFFF;
  --loyalty-top-bar-vr-color: rgba(251, 191, 36, 0.3);
  --loyalty-top-bar-inner-bg: rgba(0, 0, 0, 0.35);
  --loyalty-top-bar-inner-color: #FFFFFF;
  --loyalty-top-bar-xp-label-bg: rgba(251, 191, 36, 0.15);
  --loyalty-top-bar-xp-label-border-color: #FBBF24;
  --loyalty-top-bar-exp-progress-bar-bg: rgba(255, 255, 255, 0.1);
  --loyalty-top-bar-exp-amount-color: #FBBF24;
  --loyalty-top-bar-exp-message-color: #8A8A8A;
  --loyalty-top-bar-information-sign-bg: #FBBF24;
  --loyalty-top-bar-information-sign-color: #0A1420;

  /* Search */
  --search-container-bg: #132233;
  --search-cntr-primary-color: #FFFFFF;
  --search-cntr-secondary-color: #8A8A8A;
  --search-input-bg: #0F1A2A;
  --search-input-border-color: rgba(251, 191, 36, 0.3);
  --search-input-placeholder-color: #8A8A8A;
  --search-history-item-bg: rgba(251, 191, 36, 0.1);
  --search-history-item-color: #FCD34D;
  --search-result-section-title-bg: rgba(251, 191, 36, 0.12);
  --search-result-section-title-color: #FBBF24;

  /* Bonus */
  --bonus-sel-cntr-bg: #132233;
  --bonus-sel-cntr-border: rgba(251, 191, 36, 0.25);
  --bonus-sel-cntr-color: #FFFFFF;
  --bonus-sel-cntr-title-color: #FBBF24;
  --bonus-sel-cntr-bonus-amount-color: #00E676;
  --bonus-sel-cntr-cancel-btn-border: rgba(251, 191, 36, 0.4);
  --bonus-sel-cntr-cancel-btn-color: #FCD34D;
  --bonus-sel-list-card-bg: #0F1A2A;
  --bonus-sel-list-card-border: rgba(251, 191, 36, 0.15);
  --bonus-sel-list-card-selected-bg: rgba(251, 191, 36, 0.12);
  --bonus-sel-list-card-selected-border: #FBBF24;
  --bonus-sel-list-card-footer-bg: rgba(0, 0, 0, 0.4);
  --bonus-sel-list-card-select-footer-bg: rgba(251, 191, 36, 0.1);
  --bonus-sel-list-card-footer-end-color: #FBBF24;
  --bonus-sel-list-card-footer-terms-color: #F0F0F0;
  --bonus-selection-popup-bg: #132233;
  --bonus-selection-popup-color: #FFFFFF;

  /* Form & Modal */
  --modal-standard-header-color: #FBBF24;
  --form-cntr-label-color: #F0F0F0;
  --input-bg: #0F1A2A;
  --input-border: rgba(251, 191, 36, 0.25);
  --input-color: #FFFFFF;
  --input-readonly-bg: #1A2A40;
  --primary-btn-bg: #FBBF24;

  /* Lainnya */
  --scrollbar-thumb-bg: #D97706;
  --back-link-cntr-a-color: #FBBF24;
  --vendor-balances-cntr-bg: #132233;
  --vendor-balances-border: rgba(251, 191, 36, 0.25);
  --vendor-balances-color: #FFFFFF;
  --vendor-balances-header-balance-color: #FBBF24;
}

/* ===== PAKSA WARNA KE ELEMEN PENTING (hanya color/background/border) ===== */

/* Body */
body {
  background-color: #0A1420 !important;
  color: #F0F0F0 !important;
}

/* Header / Top bar */
.header,
.top-header,
.navbar,
.main-header,
[class*="header"] {
  background: linear-gradient(180deg, #0EA5E9 0%, #0A1420 100%) !important;
}

/* Menu navigasi */
.nav-menu,
.main-menu,
.menu-bar,
.navbar-nav,
.top-menu,
[class*="menu-bar"],
[class*="nav-bar"] {
  background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%) !important;
}

.nav-menu a,
.main-menu a,
.menu-bar a,
.navbar-nav a {
  color: #0A1420 !important;
}

/* Tombol MASUK & DAFTAR */
.login-button,
.register-button,
.btn-login,
.btn-register,
[class*="masuk"],
[class*="daftar"],
.btn-primary {
  background: #FBBF24 !important;
  background-image: linear-gradient(135deg, #FDE68A, #FBBF24 40%, #D97706) !important;
  color: #0A1420 !important;
  border-color: #D97706 !important;
}

.login-button:hover,
.register-button:hover,
.btn-login:hover,
.btn-register:hover,
.btn-primary:hover {
  background: #FCD34D !important;
  background-image: linear-gradient(135deg, #FEF3C7, #FCD34D 40%, #F59E0B) !important;
  color: #0A1420 !important;
}

/* Tombol DAFTAR (lebih gelap) */
.register-button,
.btn-register,
[class*="daftar"] {
  background: #D97706 !important;
  background-image: linear-gradient(135deg, #FBBF24, #D97706 50%, #B45309) !important;
  border-color: #B45309 !important;
  color: #fff !important;
}

.register-button:hover,
.btn-register:hover {
  background: #F59E0B !important;
  background-image: linear-gradient(135deg, #FCD34D, #F59E0B 50%, #D97706) !important;
}

/* Card / Box hasil */
.card,
.result-card,
.result-box,
[class*="result"],
[class*="hasil"],
.panel {
  background-color: #132233 !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
}

/* Judul section */
h1, h2, h3, h4, h5,
.section-title,
[class*="title"] {
  color: #FBBF24 !important;
}

/* Link */
a {
  color: #FBBF24 !important;
}

a:hover {
  color: #FCD34D !important;
}

/* Tombol umum */
.btn,
.button,
[class*="btn-"],
button[type="button"],
button[type="submit"] {
  background-color: #FBBF24 !important;
  background-image: linear-gradient(135deg, #FDE68A, #FBBF24 40%, #D97706) !important;
  color: #0A1420 !important;
  border-color: #D97706 !important;
}

.btn:hover,
.button:hover,
button:hover {
  background-color: #FCD34D !important;
  background-image: linear-gradient(135deg, #FEF3C7, #FCD34D 40%, #F59E0B) !important;
}

/* Input */
input,
select,
textarea,
.form-control {
  background-color: #0F1A2A !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  color: #fff !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: #FBBF24 !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
  background: #D97706 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #FBBF24 !important;
}

/* Teks penting */
.balance,
.username,
[class*="balance"],
[class*="saldo"] {
  color: #FBBF24 !important;
}