/* ============================================
   RAN FINAL — Top-up Page Theme
   Matches main site dark / gold branding
   ============================================ */

:root {
  --gold:    #D4AF37;
  --gold-lt: #F0C040;
  --gold-dk: #8B6A14;
  --dark:    #050505;
  --dark2:   #0a0806;
  --dark3:   #0f0c07;
  --cream:   #e5dfc8;
}

body {
  font-family: 'Prompt', 'Kanit', sans-serif;
  background:
    linear-gradient(180deg, rgba(5,5,5,.88), rgba(5,5,5,.94)),
    url('img/bg.png') center / cover no-repeat fixed;
  color: var(--cream);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: var(--gold-dk); border-radius: 4px; }

/* Card */
.card {
  background: rgba(10,8,6,.92);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 30px rgba(212,175,55,.06);
  color: var(--cream);
}
.card-header {
  background: rgba(212,175,55,.08);
  border-bottom: 1px solid rgba(212,175,55,.25);
  color: var(--gold-lt);
}
.card-header h5, .card-header h6 { color: var(--gold-lt); margin: 0; }
.card-header h5 { letter-spacing: .03em; margin-bottom: .25rem; }
.card-header h6 { font-weight: 400; font-size: .85rem; color: var(--cream); opacity: .85; }
.card-footer {
  background: rgba(212,175,55,.04);
  border-top: 1px solid rgba(212,175,55,.2);
}
.card-body { color: var(--cream); }

/* Navbar */
.navbar.bg-dark {
  background: var(--dark2) !important;
  border-bottom: 1px solid rgba(212,175,55,.2);
}
.navbar-dark .navbar-nav .nav-link {
  color: var(--cream);
  font-size: .9rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--gold-lt);
}
.navbar-toggler { border-color: rgba(212,175,55,.3); }
.dropdown-menu {
  background: var(--dark3) !important;
  border: 1px solid rgba(212,175,55,.25);
}
.dropdown-item {
  color: var(--cream) !important;
  opacity: 1 !important;
  font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(212,175,55,.16) !important;
  color: var(--gold-lt) !important;
}
.dropdown-item.disabled, .dropdown-item.disabled:hover, .dropdown-item.disabled:focus {
  color: rgba(229,223,200,.35) !important;
  opacity: .55 !important;
  background: transparent !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Inputs */
.input-group-text {
  background: var(--dark3);
  border: 1px solid rgba(212,175,55,.25);
  color: var(--gold-lt);
}
.form-control {
  background: var(--dark3);
  border: 1px solid rgba(212,175,55,.25);
  color: var(--cream);
}
.form-control:focus {
  background: var(--dark3);
  border-color: var(--gold-lt);
  color: var(--cream);
  box-shadow: 0 0 0 .2rem rgba(212,175,55,.15);
}
.form-control::placeholder { color: rgba(229,223,200,.55); }
.form-control[readonly] { opacity: 1; }

/* Buttons */
.btn-primary, .btn-topup {
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  border: none;
  color: #1a1208;
  font-weight: 700;
  letter-spacing: .02em;
}
.btn-primary:hover, .btn-topup:hover {
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
  color: #1a1208;
}
.btn-success {
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  border: none;
  color: #1a1208;
  font-weight: 700;
}
.btn-success:hover {
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
  color: #1a1208;
}
.btn-outline-danger {
  color: #f87171;
  border-color: rgba(248,113,113,.5);
}
.btn-outline-danger:hover {
  background: rgba(248,113,113,.12);
  color: #f87171;
  border-color: #f87171;
}

/* Tables */
.table { color: var(--cream); }
.table thead th {
  color: var(--gold-lt);
  border-color: rgba(212,175,55,.2);
  font-weight: 600;
}
.table td, .table th { border-color: rgba(212,175,55,.12); }
.table-hover tbody tr:hover {
  background: rgba(212,175,55,.08);
  color: var(--cream);
}

.online  { color: #4ade80; font-weight: 600; }
.offline { color: #f87171; font-weight: 600; }

/* Disclaimer box */
#exchangeTMTZ.bg-danger {
  background: rgba(120,20,20,.35) !important;
  border: 1px solid rgba(248,113,113,.3);
}

/* QR preview */
#promptpay_qr {
  background: var(--dark3);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 10px;
  padding: 1rem;
}

.text-loader { color: var(--gold-lt); }

/* Prominent "เติมเงิน" CTA in navbar */
.btn-topup-nav,
.btn-redeem-nav {
  background: linear-gradient(90deg, var(--gold), var(--gold-lt)) !important;
  color: #1a1208 !important;
  border-radius: 8px !important;
  padding: .5rem 1.1rem !important;
  font-weight: 700;
  margin: .4rem .5rem;
  box-shadow: 0 4px 14px rgba(212,175,55,.4);
}
.btn-topup-nav:hover,
.btn-topup-nav:focus,
.btn-redeem-nav:hover,
.btn-redeem-nav:focus {
  background: linear-gradient(90deg, var(--gold-lt), var(--gold)) !important;
  color: #1a1208 !important;
}

/* Metric cards (point balance / accumulated total) */
.metric-card {
  background: rgba(212,175,55,.06);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 10px;
  padding: 1rem;
  height: 100%;
}
.metric-label {
  font-size: .8rem;
  color: rgba(229,223,200,.7);
  margin: 0 0 .35rem;
}
.metric-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-lt);
  margin: 0;
}

/* SweetAlert2 popups (confirm / success / error dialogs) */
.swal2-popup {
  background: var(--dark3) !important;
  border: 1px solid rgba(212,175,55,.3);
  color: var(--cream) !important;
}
.swal2-title { color: var(--gold-lt) !important; }
.swal2-html-container, .swal2-content { color: var(--cream) !important; }
.swal2-confirm.swal2-styled {
  background: linear-gradient(90deg, var(--gold), var(--gold-lt)) !important;
  color: #1a1208 !important;
  font-weight: 700;
  box-shadow: none !important;
}
.swal2-cancel.swal2-styled {
  background: rgba(229,223,200,.12) !important;
  color: var(--cream) !important;
  box-shadow: none !important;
}