/* ==========================================================================
   XPLOROO · Wallet page (Phase 3)
   wallet.css — Premium fintech-style wallet UI (balance card, deposit,
   transaction history). Reuses this codebase's established cinematic
   glass/titanium-edge visual language (Featured Experiences, Trending
   Packages, Login/Signup Benefits) at the SAME restrained intensity level
   those were corrected to (~0.03-0.05 gradient alpha) — not the original
   too-eye-catching version. Scoped entirely under `.wallet-*` — never
   touches auth/header/footer.
   ========================================================================== */

.wallet-page {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--section-gap);
}
.wallet-page__container {
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------------
   Signed-out guard
   ------------------------------------------------------------------------- */
.wallet-guard {
  text-align: center;
  max-width: 26rem;
  margin: clamp(2rem, 1.5rem + 2vw, 4rem) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.wallet-guard__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--violet-300);
  margin-bottom: var(--space-2);
}
.wallet-guard__icon svg { width: 1.75rem; height: 1.75rem; }
.wallet-guard__title { margin: 0; font-size: var(--fs-2xl); }
.wallet-guard__desc { margin: 0 0 var(--space-3); color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   Head
   ------------------------------------------------------------------------- */
.wallet-head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}
.wallet-head__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.wallet-head__title { margin: 0; font-size: var(--fs-3xl); }
.wallet-head__subtitle { margin: var(--space-2) 0 0; color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   Banners (offline / restricted status)
   ------------------------------------------------------------------------- */
.wallet-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.wallet-banner svg { flex: none; width: 1.1rem; height: 1.1rem; }
.wallet-banner--offline {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
  color: var(--color-text-strong);
}
.wallet-banner--status {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 32%, transparent);
  color: var(--color-text-strong);
}

/* -------------------------------------------------------------------------
   Balance card — the hero element. Deep glass surface, one static thin
   titanium/glass edge, a very faint atmospheric wash (~0.04 alpha — same
   corrected intensity as Trending Packages).
   ------------------------------------------------------------------------- */
.wallet-balance {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(124, 58, 237, 0.045) 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 100% 100%, rgba(37, 99, 235, 0.035) 0%, transparent 70%),
    var(--surface-panel);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card), 0 0 60px -30px rgba(124, 58, 237, 0.16);
}
.wallet-balance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(107, 114, 128, 0.85) 0%,
    rgba(203, 213, 225, 0.9) 22%,
    rgba(147, 197, 253, 0.5) 42%,
    rgba(196, 181, 253, 0.5) 58%,
    rgba(203, 213, 225, 0.9) 78%,
    rgba(75, 79, 86, 0.85) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
:root[data-theme="light"] .wallet-balance {
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(124, 58, 237, 0.03) 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 100% 100%, rgba(37, 99, 235, 0.025) 0%, transparent 70%),
    var(--glass-bg-light, rgba(17, 17, 23, 0.03)), var(--surface-panel);
  box-shadow: var(--shadow-card), 0 0 50px -30px rgba(124, 58, 237, 0.12);
}

.wallet-balance__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.wallet-balance__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.wallet-balance__amount-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.wallet-balance__amount {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
  line-height: 1;
}
.wallet-balance__unit {
  font-size: var(--fs-md, var(--fs-base));
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.wallet-balance__inr {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}
.wallet-balance__meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}
.wallet-balance__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-semibold);
  color: var(--color-success);
}
.wallet-balance__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}
.wallet-balance__live.is-flashing .wallet-balance__live-dot {
  animation: wallet-live-pulse 900ms ease-out 1;
}
@keyframes wallet-live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 55%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .wallet-balance__live.is-flashing .wallet-balance__live-dot { animation: none; }
}

.wallet-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding-inline: 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider, var(--ls-wide));
  text-transform: uppercase;
  border: 1px solid transparent;
}
.wallet-status--active {
  color: #6ee7a8;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.4);
}
:root[data-theme="light"] .wallet-status--active { color: #047857; background: rgba(5, 150, 105, 0.1); border-color: rgba(5, 150, 105, 0.3); }
.wallet-status--frozen {
  color: #ffb199;
  background: rgba(251, 90, 90, 0.16);
  border-color: rgba(251, 90, 90, 0.5);
}
:root[data-theme="light"] .wallet-status--frozen { color: var(--coral-600); background: rgba(226, 59, 59, 0.12); border-color: rgba(226, 59, 59, 0.4); }

/* -------------------------------------------------------------------------
   Deposit section
   ------------------------------------------------------------------------- */
.wallet-deposit {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: opacity 200ms ease;
}
.wallet-deposit.is-disabled { opacity: 0.55; pointer-events: none; }

.wallet-deposit__head { margin-bottom: var(--space-4); }
.wallet-deposit__title { margin: 0; font-size: var(--fs-xl); }
.wallet-deposit__subtitle { margin: var(--space-1, 0.25rem) 0 0; font-size: var(--fs-xs); color: var(--color-text-subtle); }

.wallet-quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
}
.wallet-quick-amount {
  height: 2.5rem;
  padding-inline: 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-inset);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}
.wallet-quick-amount:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.wallet-quick-amount.is-active {
  border-color: transparent;
  background-image: var(--gradient-brand);
  color: #fff;
}

.wallet-deposit__form {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.wallet-deposit__field { flex: 1 1 12rem; min-width: 0; }
.wallet-deposit__field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.wallet-deposit__input-wrap {
  display: flex;
  align-items: center;
  height: 3rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-inset);
  padding-inline: 1rem;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.wallet-deposit__input-wrap:focus-within {
  border-color: var(--color-border-brand);
  box-shadow: var(--glow-focus);
}
.wallet-deposit__input-prefix { color: var(--color-text-subtle); font-weight: var(--fw-semibold); margin-right: 0.35rem; }
.wallet-deposit__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--color-text-strong);
  font-size: var(--fs-base);
  font-family: inherit;
}
.wallet-deposit__input:focus { outline: none; }
.wallet-deposit__input::-webkit-outer-spin-button,
.wallet-deposit__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wallet-deposit__submit { flex: none; height: 3rem; }

.wallet-deposit__message {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  min-height: 1.2em;
}
.wallet-deposit__message:empty { margin: 0; }
.wallet-deposit__message--success { color: var(--color-success); }
.wallet-deposit__message--error { color: var(--color-danger); }

@media (max-width: 480px) {
  .wallet-deposit__form { flex-direction: column; align-items: stretch; }
  .wallet-deposit__submit { width: 100%; }
}

/* -------------------------------------------------------------------------
   Transactions
   ------------------------------------------------------------------------- */
.wallet-transactions__head { margin-bottom: var(--space-4); }
.wallet-transactions__title { margin: 0; font-size: var(--fs-xl); }

.wallet-tx-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.wallet-tx-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .wallet-tx-row:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
}
.wallet-tx-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.wallet-tx-row__icon svg { width: 1.1rem; height: 1.1rem; }
.wallet-tx-row__icon--credit { background: rgba(16, 185, 129, 0.14); color: #6ee7a8; }
.wallet-tx-row__icon--debit { background: rgba(251, 90, 90, 0.14); color: #ffb199; }
:root[data-theme="light"] .wallet-tx-row__icon--credit { background: rgba(5, 150, 105, 0.1); color: #047857; }
:root[data-theme="light"] .wallet-tx-row__icon--debit { background: rgba(226, 59, 59, 0.1); color: var(--coral-600); }

.wallet-tx-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.wallet-tx-row__title { font-weight: var(--fw-semibold); color: var(--color-text-strong); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-tx-row__time { font-size: var(--fs-xs); color: var(--color-text-subtle); }

.wallet-tx-row__amounts { flex: none; text-align: right; display: flex; flex-direction: column; gap: 0.15rem; }
.wallet-tx-row__amount { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.wallet-tx-row__amount--credit { color: #22c55e; }
.wallet-tx-row__amount--debit { color: var(--color-text-strong); }
.wallet-tx-row__running { font-size: var(--fs-2xs); color: var(--color-text-subtle); }

.wallet-tx-load-more {
  display: block;
  width: 100%;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.wallet-tx-load-more:hover { background: var(--color-surface-hover); }
.wallet-tx-load-more:disabled { opacity: 0.6; cursor: default; }

/* Loading skeleton */
.wallet-tx-skeleton { display: flex; flex-direction: column; gap: 0.6rem; }
.wallet-tx-skeleton__row {
  height: 4.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-inset) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: wallet-skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes wallet-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wallet-tx-skeleton__row { animation: none; }
}

/* Error state */
.wallet-tx-error {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  color: var(--color-text-strong);
}
.wallet-tx-error p { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.wallet-tx-retry {
  height: 2.25rem;
  padding-inline: 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* Empty state */
.wallet-empty {
  text-align: center;
  padding: clamp(2rem, 1.6rem + 2vw, 3rem) var(--space-4);
  border-radius: var(--radius-2xl);
  border: 1px dashed var(--color-border);
}
.wallet-empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-surface-inset);
  color: var(--color-text-subtle);
}
.wallet-empty__icon svg { width: 1.5rem; height: 1.5rem; }
.wallet-empty__title { margin: 0; font-size: var(--fs-lg); }
.wallet-empty__desc { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 26rem; margin-inline: auto; }

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .wallet-balance__top { flex-direction: column; gap: var(--space-3); }
  .wallet-tx-row__title { max-width: 9rem; }
}