/* ================================================================
   balance.css — SG OverGearGaming Wallet & Balance System
   ================================================================ */

/* ── Wallet Modal ── */
.wallet-hero {
  background: linear-gradient(135deg, rgba(0,245,212,.1), rgba(0,180,216,.06));
  border: 1px solid rgba(0,245,212,.18);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 1.4rem;
  position: relative;
  overflow: hidden;
}
.wallet-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,245,212,.12), transparent 70%);
  pointer-events: none;
}
.wallet-hero-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--t3); margin-bottom: 6px;
}
.wallet-hero-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.6rem; font-weight: 700;
  color: var(--acc); line-height: 1;
  margin-bottom: 4px;
}
.wallet-hero-sub { font-size: .72rem; color: var(--t3); }

/* Quick topup amounts */
.topup-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 1rem;
}
.topup-amount-btn {
  padding: 9px 4px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--t2); font-size: .8rem; font-weight: 700;
  cursor: pointer; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  transition: all .18s;
}
.topup-amount-btn:hover { border-color: rgba(0,245,212,.3); color: var(--acc); background: rgba(0,245,212,.05); }
.topup-amount-btn.selected { border-color: var(--acc); background: rgba(0,245,212,.1); color: var(--acc); }

.topup-custom-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 1rem;
}
.topup-custom-input {
  flex: 1; padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 9px; color: var(--t1);
  font-family: 'JetBrains Mono', monospace;
  font-size: .9rem; outline: none;
  transition: border-color .2s;
}
.topup-custom-input:focus { border-color: rgba(0,245,212,.35); }
.topup-custom-input::placeholder { color: var(--t3); font-family: 'Outfit', sans-serif; }
.topup-sgd-prefix {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem; color: var(--t3); white-space: nowrap;
}

/* Topup method tabs */
.topup-method-tabs {
  display: flex; gap: 8px; margin-bottom: 1rem;
}
.topup-tab {
  flex: 1; padding: 8px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--t3); font-size: .74rem; font-weight: 700;
  cursor: pointer; text-align: center;
  transition: all .18s;
  font-family: 'Outfit', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.topup-tab:hover { border-color: rgba(0,245,212,.2); color: var(--t2); }
.topup-tab.active { border-color: var(--acc); background: rgba(0,245,212,.08); color: var(--acc); }

/* Transaction history */
.tx-list { max-height: 220px; overflow-y: auto; margin-top: .6rem; }
.tx-list::-webkit-scrollbar { width: 3px; }
.tx-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

.tx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tx-item:last-child { border-bottom: none; }
.tx-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tx-icon.topup      { background: rgba(0,245,212,.1);  border: 1px solid rgba(0,245,212,.2); }
.tx-icon.topup svg  { color: #00f5d4; }
.tx-icon.purchase   { background: rgba(255,62,108,.08); border: 1px solid rgba(255,62,108,.2); }
.tx-icon.purchase svg { color: #ff3e6c; }
.tx-icon.sale       { background: rgba(255,233,78,.08); border: 1px solid rgba(255,233,78,.2); }
.tx-icon.sale svg   { color: #ffe94e; }
.tx-icon.refund     { background: rgba(0,245,212,.06); border: 1px solid rgba(0,245,212,.15); }
.tx-icon.refund svg { color: #00f5d4; }
.tx-icon.withdrawal { background: rgba(123,130,168,.1); border: 1px solid rgba(123,130,168,.2); }
.tx-icon.withdrawal svg { color: #7b82a8; }

.tx-info { flex: 1; min-width: 0; }
.tx-desc { font-size: .78rem; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-time { font-size: .63rem; color: var(--t3); margin-top: 2px; }
.tx-amt  { font-family: 'JetBrains Mono', monospace; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.tx-amt.credit { color: #00f5d4; }
.tx-amt.debit  { color: #ff3e6c; }

.tx-empty {
  text-align: center; padding: 1.5rem 0;
  color: var(--t3); font-size: .78rem;
}

/* ── Balance display in checkout ── */
.balance-checkout-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,245,212,.06);
  border: 1px solid rgba(0,245,212,.18);
  border-radius: 11px;
  padding: 13px 16px;
  margin-bottom: 1.2rem;
  cursor: default;
}
.balance-checkout-left { display: flex; align-items: center; gap: 10px; }
.balance-checkout-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(0,245,212,.12); border: 1px solid rgba(0,245,212,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.balance-checkout-icon svg { color: var(--acc); }
.balance-checkout-label { font-size: .67rem; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; }
.balance-checkout-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; font-weight: 700; color: var(--acc);
  margin-top: 1px;
}
.balance-topup-link {
  font-size: .72rem; color: var(--acc); font-weight: 700; cursor: pointer;
  text-decoration: none; transition: opacity .2s; white-space: nowrap;
}
.balance-topup-link:hover { opacity: .7; }

/* Insufficient balance warning */
.balance-insufficient {
  background: rgba(255,62,108,.06);
  border: 1px solid rgba(255,62,108,.2);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 1.2rem;
  display: none;
}
.balance-insufficient.show { display: flex; align-items: flex-start; gap: 10px; }
.balance-insufficient svg { color: #ff3e6c; flex-shrink: 0; margin-top: 1px; }
.balance-insuf-text { font-size: .78rem; color: #ff3e6c; line-height: 1.5; }
.balance-insuf-text strong { font-weight: 800; }

/* Confirm with balance button state */
.btn-balance-pay {
  background: linear-gradient(135deg, #00f5d4, #00b4d8) !important;
  color: #000 !important;
}
.btn-balance-pay:disabled {
  background: rgba(255,255,255,.06) !important;
  color: var(--t3) !important;
  cursor: not-allowed !important;
}

/* ── Wallet balance pill in navbar ── */
.wallet-nav-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,245,212,.08);
  border: 1px solid rgba(0,245,212,.2);
  border-radius: 9px;
  padding: 5px 11px;
  cursor: pointer;
  transition: all .2s;
}
.wallet-nav-pill:hover { background: rgba(0,245,212,.14); }
.wallet-nav-pill svg  { color: var(--acc); flex-shrink: 0; }
.wallet-nav-pill-val  {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem; font-weight: 700; color: var(--acc);
}