/* === Your original style.php (unchanged) === */
:root{ --brand:#0d6efd; }
body{ background:#f6f7fb; }
.card-hover:hover{ transform:translateY(-2px); transition:all .2s; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.balance-badge{ font-size:1.05rem; padding:.6rem 1rem; border-radius:.8rem; }

/* === Additions (safe) — only new classes, nothing overwritten === */

/* App shell + glass look (used by hero/sections) */
.app-shell{ max-width: 430px; margin: 0 auto; }
.glass{ background: rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.06); border-radius:1rem; box-shadow:0 10px 24px rgba(0,0,0,.05); }

/* Money background option without touching body default */
.money-bg{
  background:
    radial-gradient(1200px 600px at 10% -10%, #0f4c7540, transparent 60%),
    radial-gradient(1200px 600px at 110% 110%, #14532d40, transparent 60%),
    linear-gradient(180deg,#0b1220 0%, #0a0f1a 100%) !important;
  color: #e8eef6;
}

/* Card base (non-hover) to pair with your .card-hover:hover */
.card-hover{
  border:1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  background: #fff;
}

/* Deposit method tiles */
.deposit-option{
  border:1px dashed rgba(0,0,0,.18);
  border-radius:1rem; padding:1rem; cursor:pointer;
  background:#fff;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.deposit-option:hover{
  transform: translateY(-3px);
  border-color: rgba(13,110,253,.45);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.badge-method{ font-size:.75rem; }

/* Small code-like pills (for USSD & wallet address) */
.code-pill{
  background: rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
  padding:.25rem .5rem; border-radius:.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.9rem;
}

/* FX mini tiles (optional; harmless if unused) */
.fx-tile{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:.75rem; padding:.75rem;
}
.fx-label{ font-size:.8rem; color:#6b7280; }
.fx-value{ font-weight:700; }

/* Live support chat */
.chat-pane{
  height: 50vh; overflow-y:auto;
  background: #ffffff; border:1px solid rgba(0,0,0,.08);
  border-radius:.75rem; padding:.75rem;
}
.chat-bubble{ border-radius: 1rem; padding:.5rem .75rem; margin:.25rem 0; max-width: 80%; }
.chat-bubble.user{ background: var(--brand); color:#fff; margin-left:auto; }
.chat-bubble.admin{ background:#343a40; color:#fff; margin-right:auto; }

/* Buttons: optional subtle glow on hover */
.btn-glow{ position:relative; overflow:hidden; }
.btn-glow::after{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(400px 120px at var(--mx,50%) 0%, rgba(13,110,253,.18), transparent 40%);
  opacity:0; transition: opacity .2s;
}
.btn-glow:hover::after{ opacity:1; }

/* Utility text */
.muted{ color:#6b7280; }

/* News ticker (if you enable it later) */
.news-ticker{ white-space: nowrap; overflow: hidden; }
.news-track{ display:inline-block; padding-left: 100%; animation: ticker 35s linear infinite; }
.news-track.paused{ animation-play-state: paused; }
@keyframes ticker{ from{ transform: translateX(0);} to{ transform: translateX(-100%);} }