/* Account surfaces: /wallet (mockup 09), /orders, /profile, inline login card.
   Composes cholo.css tokens only. */

/* JS toggles chrome with the `hidden` attribute; it must always beat any
   class that sets `display` (.btn, .card, .field, .bottom-sheet, …). */
.wallet [hidden],
.orders [hidden],
.order-detail [hidden],
.profile [hidden],
.sandbox-pay [hidden],
.login-card [hidden] {
  display: none !important;
}

/* ——— wallet hero card (deep green, wave, watermark) ——— */
.wallet-hero {
  position: relative;
  background: var(--c-primary);
  color: var(--c-n0);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.wallet-hero::before {
  /* wave shape in pressed green */
  content: "";
  position: absolute;
  right: -30%;
  top: -40%;
  width: 120%;
  height: 120%;
  background: var(--c-primary-600);
  border-radius: 45%;
  opacity: 0.55;
  pointer-events: none;
}
.wallet-hero__brand {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  height: 22px;
  opacity: 0.4;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.wallet-hero__label {
  position: relative;
  font-size: var(--fs-sm);
  opacity: 0.85;
}
.wallet-hero__amount {
  position: relative;
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin: var(--sp-1) 0 var(--sp-4);
}
.wallet-hero__actions {
  position: relative;
  display: flex;
  gap: var(--sp-3);
}
.wallet-hero__actions .btn--light {
  background: var(--c-n0);
  color: var(--c-primary);
}
.wallet-hero__actions .btn--light:active { background: var(--c-primary-50); }
.wallet-hero__actions .btn--outline-light {
  background: none;
  border: 1.5px solid rgb(255 255 255 / 0.7);
  color: var(--c-n0);
}
.wallet-hero__actions .btn--outline-light:active {
  background: rgb(255 255 255 / 0.12);
}

/* provider cash-debt strip (§7.4) */
.debt-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-warning-bg);
  color: var(--c-warning);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ——— transaction list (tinted icon circles, signed amounts) ——— */
.txn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.txn-icon svg, .txn-icon img { width: 20px; height: 20px; }
.txn-icon--mint { background: var(--c-primary-100); color: var(--c-primary); }
.txn-icon--info { background: var(--c-info-bg); color: var(--c-info); }
.txn-icon--pink { background: var(--c-accent-100); color: var(--c-accent-600); }
.txn-icon--warn { background: var(--c-warning-bg); color: var(--c-warning); }
.txn-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.txn-amount--credit { color: var(--c-success); }
.txn-amount--debit { color: var(--text-strong); }

.load-more { margin: var(--sp-4) auto; display: block; }

/* topup amount sheet */
.amount-presets { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.amount-presets .chip { font-variant-numeric: tabular-nums; }

/* result banner after gateway redirect */
.result-banner {
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.result-banner--success { background: var(--c-success-bg); color: var(--c-success); }
.result-banner--failed { background: var(--c-danger-bg); color: var(--c-danger); }

/* ——— orders history ——— */
.order-row__title { display: flex; align-items: center; gap: var(--sp-2); }
.order-state { white-space: nowrap; }
.reorder-btn { margin-top: var(--sp-2); }

/* segmented filter chips row (horizontal scroll on narrow) */
.filter-row {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }

/* ——— profile ——— */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.profile-head__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-primary-100);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  font-weight: 700;
  flex: 0 0 auto;
}
.profile-head__name { font-size: var(--fs-lg); font-weight: 700; }
.profile-head__phone {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.lang-toggle { display: flex; gap: var(--sp-2); }
.lang-toggle .chip { flex: 1; text-align: center; }

.addr-actions { display: flex; gap: var(--sp-2); }
.addr-actions .btn { padding: 4px 12px; }

.ticket-status { text-transform: none; }

/* danger zone / logout */
.btn--outline-danger {
  background: none;
  border: 1px solid var(--c-danger);
  color: var(--c-danger);
}
.btn--outline-danger:active { background: var(--c-danger-bg); }

/* ——— inline login card (shown when session missing) ——— */
.login-card { max-width: 420px; margin: var(--sp-6) auto; }
.login-card__logo { display: block; margin: 0 auto var(--sp-4); height: 40px; }
.login-card .field + .field { margin-top: var(--sp-3); }
.login-card__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}
.otp-input {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
}

/* sandbox checkout (dev-only page) */
.sandbox-pay { max-width: 420px; margin: var(--sp-6) auto; text-align: center; }
.sandbox-pay__amount {
  font-size: 2.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: var(--sp-3) 0 var(--sp-5);
}
.sandbox-pay__actions { display: flex; gap: var(--sp-3); }
.sandbox-pay__actions .btn { flex: 1; }