/*
  ╔══════════════════════════════════════════════════════╗
  ║           XCARD BRAND THEME                         ║
  ║   Add in MainLayout.razor to apply XCard branding   ║
  ╚══════════════════════════════════════════════════════╝
*/

/* ── 1. ROOT VARIABLES ── */
:root {
  --accent: #6C63FF;
  --accent-light: #A89BFF;
  --accent-glow: rgba(108, 99, 255, 0.22);
  --bg: #07070F;
  --surface: rgba(255,255,255,0.035);
  --surface-hover: rgba(255,255,255,0.065);
  --border: rgba(255,255,255,0.07);
  --border-accent: rgba(108, 99, 255, 0.35);
  --text-primary: #F0EEFF;
  --text-secondary: rgba(240, 238, 255, 0.45);
  --text-muted: rgba(240, 238, 255, 0.22);
  --card-bg: linear-gradient(135deg, #0D0D2B 0%, #1A0A2E 40%, #1F0A14 100%);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

/* ── 2. AMBIENT BACKGROUND GLOWS ── */
body::before {
  background: radial-gradient(ellipse, rgba(108,99,255,0.09) 0%, transparent 70%);
}
body::after {
  background: radial-gradient(ellipse, rgba(255,60,110,0.07) 0%, transparent 70%);
}

/* ── 3. BALANCE CURRENCY SYMBOL ── */
.balance-currency {
  background: linear-gradient(90deg, #6C63FF, #FF3C6E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 4. SPLASH PROGRESS BAR ── */
.splash-bar-fill {
  background: linear-gradient(90deg, #6C63FF 0%, #FF3C6E 100%);
}

/* ── 5. AVATAR BUTTON ── */
.avatar-btn {
  background: linear-gradient(135deg, #6C63FF 0%, #FF3C6E 100%);
  color: #F0EEFF;
}

/* ── 6. PHYSICAL CARD GLOWS ── */
.wallet-card.main-card::after {
  background: radial-gradient(ellipse, rgba(108,99,255,0.3) 0%, transparent 70%);
}
.wallet-card.main-card::before {
  background: radial-gradient(ellipse at bottom left, rgba(255,60,110,0.18) 0%, transparent 60%);
  opacity: 1;
}

/* ── 7. CARD BALANCE CURRENCY SYMBOL ── */
.card-balance-currency {
  background: linear-gradient(90deg, #6C63FF, #FF3C6E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 16px;
}

/* ── 8. BALANCE CHANGE BADGE ── */
.badge {
  background: rgba(108,99,255,0.12);
  color: #A89BFF;
  border: 1px solid rgba(108,99,255,0.2);
}

/* ── 9. PRIMARY BUTTONS ── */
.submit-btn,
.receive-btn.primary,
.modal-confirm {
  background: linear-gradient(135deg, #6C63FF 0%, #FF3C6E 100%);
  color: #F0EEFF;
}

/* ── 10. CTA BANNER ── */
.cta-banner {
  background: linear-gradient(135deg, rgba(108,99,255,0.08) 0%, rgba(255,60,110,0.05) 100%);
  border-color: rgba(108,99,255,0.3);
}
.cta-banner:hover {
  background: linear-gradient(135deg, rgba(108,99,255,0.14) 0%, rgba(255,60,110,0.1) 100%);
}
.cta-icon {
  background: rgba(108,99,255,0.15);
  border-color: rgba(108,99,255,0.3);
  color: #6C63FF;
}
.cta-text .cta-title { color: #A89BFF; }
.cta-arrow { color: #6C63FF; }

/* ── 11. CONFIRM MODAL AMOUNT BOX ── */
.confirm-amount {
  background: rgba(108,99,255,0.1);
  border-color: rgba(108,99,255,0.25);
}
.confirm-amount-ticker { color: #6C63FF; }
.confirm-val.highlight  { color: #A89BFF; }
.fee-row.total .fee-value { color: #A89BFF; }