/* ============================================================
   WALLET — balance cards, transaction history
   ============================================================ */

.wallet-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}

/* ---- Balance card ---- */
.balance-card {
  padding: 24px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.balance-card--xu {
  background: linear-gradient(135deg, #3A2B12, #5A3A12 60%, #6B4A18);
  border-color: rgba(255,200,87,.2);
}

.balance-card--xeng {
  background: linear-gradient(135deg, #10322B, #124A40 60%, #155A4A);
  border-color: rgba(67,232,216,.2);
}

.balance-card__glow {
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  pointer-events: none;
}
.balance-card--xu   .balance-card__glow { background: radial-gradient(circle, rgba(255,200,87,.5), transparent 70%); }
.balance-card--xeng .balance-card__glow { background: radial-gradient(circle, rgba(67,232,216,.45), transparent 70%); }

.balance-card--xu   .balance-card__label { color: #FFE6B0; font-size: 13px; font-weight: 600; position: relative; }
.balance-card--xeng .balance-card__label { color: #B6F0E6; font-size: 13px; font-weight: 600; position: relative; }

.balance-card__amount {
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 700;
  margin: 6px 0 2px;
  letter-spacing: -.5px;
  position: relative;
}
.balance-card__amount small { font-size: 18px; color: rgba(255,255,255,.7); }

.balance-card__hold {
  font-size: 12.5px;
  position: relative;
}
.balance-card--xu   .balance-card__hold { color: #F4C9DE; }
.balance-card--xeng .balance-card__hold { color: #BFEFE9; }

.balance-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  position: relative;
  flex-wrap: wrap;
}

.balance-card__note {
  font-size: 11.5px;
  margin-top: 12px;
  line-height: 1.5;
  position: relative;
}
.balance-card--xu   .balance-card__note { color: #F0DDB0; }
.balance-card--xeng .balance-card__note { color: #BFEFE9; }

/* ---- Transaction list ---- */
.tx-list { padding: 4px 0; }

.tx-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}
.tx-item:first-child { border-top: 0; }

.tx-item__icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}

.tx-item__title { font-weight: 600; font-size: 14px; }
.tx-item__date  { color: var(--faint); font-size: 12px; margin-top: 1px; }

.tx-item__amount {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
}
.tx-item__amount.is-plus  { color: var(--green); }
.tx-item__amount.is-hold  { color: var(--gold); }
.tx-item__amount.is-minus { color: var(--ink); }

@media (max-width: 760px) {
  .wallet-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TOPUP — package grid (lives here since no separate topup.css)
   ============================================================ */

.topup-pack {
  border-radius: 16px;
  border: 2px solid var(--line-soft);
  background: linear-gradient(180deg, var(--surface), var(--bg2));
  padding: 20px 16px 16px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.topup-pack:hover {
  transform: translateY(-4px);
  border-color: var(--violet);
  box-shadow: 0 16px 36px -14px rgba(155,107,255,.4);
}
.topup-pack.is-selected {
  border-color: var(--pink);
  box-shadow: 0 16px 36px -14px rgba(255,92,138,.45);
  background: linear-gradient(180deg, rgba(255,92,138,.08), var(--bg2));
}
.topup-pack.is-popular {
  border-color: var(--gold);
}

.topup-pack__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #3A2400;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.topup-pack__icon { font-size: 32px; margin-bottom: 8px; }

.topup-pack__xu {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 22px;
  color: var(--gold);
}
.topup-pack__xu small { font-size: 13px; color: var(--muted); }

.topup-pack__bonus {
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  margin: 3px 0;
}

.topup-pack__price {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
  font-family: var(--font-mono);
}

/* Pay method (used inside chip-pick) */
.pay-method {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line-soft);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: border-color var(--ease), color var(--ease);
  cursor: pointer;
}
.pay-method:hover { border-color: var(--cyan); color: var(--ink); }
.pay-method.is-active {
  border-color: var(--pink);
  color: var(--ink);
  background: linear-gradient(90deg, rgba(255,92,138,.1), transparent);
}