/* deposits.css — deposit-overlay-specific styling for 1gambling.online games.
 *
 * Companion to shared/modal/modal.css (chrome) and shared/auth/auth.css
 * (form chassis used on the card screen + the .gam-form-link / -submit
 * variants used across navigation buttons). Stab N port: extracted
 * verbatim from 7X3 game.css :969-978 + 1352-1711 with .dep-* /
 * .deposit-* → .gam-dep-* renames.
 *
 * Independent versioning: import as ?v=deposits-1.0.0.
 *
 * Reuses chrome selectors from modal.css; do NOT redefine .gam-modal-*
 * here. The lighter backdrop variant for deposit (.gam-dep-ov scope on
 * .gam-modal-backdrop) is the one chrome-overriding rule, and matches
 * 7X3's pattern of "auth-modal stronger, deposit-modal lighter".
 */

/* CSS custom properties — defensive declaration so deposits.css renders
 * correctly when imported into a game whose own :root doesn't define
 * the luxury palette. Adds --gam-cyan-pale and --gam-amber that the
 * deposit screens uniquely need (confirm chips line + stub-mode badge
 * + status-pill background). */
:root {
  --gam-cyan-soft:  #8fcdff;
  --gam-cyan-pale:  #c8e6ff;
  --gam-cyan:       #5fb7ff;
  --gam-gold:       #c98f1f;
  --gam-gold-lt:    #f0c252;
  --gam-gold-glow:  #ffe39a;
  --gam-cream:      #fff5d8;
  --gam-amber:      #ffb24a;
}

/* ── Lighter backdrop for deposit overlay ──────────────────────────
   Game underneath stays clearly visible while the deposit flow is
   open — auth login/signup keep their stronger backdrop because those
   forms need full focus. */
.gam-dep-ov .gam-modal-backdrop {
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(95, 183, 255, 0.10) 0%, transparent 70%),
    rgba(2, 6, 15, 0.30);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
          backdrop-filter: blur(3px) saturate(1.05);
}

/* Slightly tighter card padding — deposit footer adds its own bottom
   padding so the card itself can breathe a little less. */
.gam-dep-ov .gam-modal-card { padding-bottom: 14px; }

/* ── Footer (legal links) ─────────────────────────────────────────── */
.gam-dep-footer {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(240, 194, 82, 0.20);
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  justify-content: center;
  font-size: 11.5px;
}
.gam-dep-footer a {
  color: var(--gam-gold-lt); text-decoration: none; opacity: 0.85; letter-spacing: 0.04em;
}
.gam-dep-footer a:hover { opacity: 1; color: var(--gam-cream); text-shadow: 0 0 8px rgba(255, 227, 154, 0.45); }
.gam-dep-footer .dot { color: var(--gam-cyan-soft); opacity: 0.45; }

/* ── Secondary button (used on welcome + instructions screens) ────── */
.gam-dep-secondary {
  margin-top: 8px;
  padding: 11px 0;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--gam-cream);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(95, 183, 255, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 42, 100, 0.65) 0%, rgba(10, 24, 56, 0.85) 100%);
  border: 1px solid rgba(240, 194, 82, 0.55);
  border-radius: 100px;
  cursor: pointer; outline: none;
  font-family: inherit;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(200, 230, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
}
.gam-dep-secondary:active   { transform: translateY(1px); }
.gam-dep-secondary[disabled]{ opacity: 0.45; cursor: default; }

/* ── Section labels + notes + link rows ───────────────────────────── */
.gam-dep-section-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gam-cyan-soft);
  margin: 6px 0 8px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.gam-dep-note {
  margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.45;
  color: rgba(234, 242, 255, 0.70);
}
.gam-dep-link-row {
  display: flex; gap: 14px; justify-content: center;
  margin-top: 10px;
}

/* ── Welcome screen ────────────────────────────────────────────── */
.gam-dep-welcome { text-align: center; padding: 8px 4px 4px; }
.gam-dep-check   { display: flex; justify-content: center; margin-bottom: 12px; filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.45)); }
.gam-dep-headline {
  font-size: 18px; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--gam-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 10px rgba(95, 183, 255, 0.20);
  margin-bottom: 8px;
}
.gam-dep-sub {
  font-size: 14px; line-height: 1.5;
  color: rgba(234, 242, 255, 0.78);
  margin-bottom: 20px;
}

/* DEPOSIT NOW — primary CTA on welcome screen. Full-width and
   slightly larger so it reads as THE action, not one of two equal
   options. (.gam-dep-primary alias kept for HTML readability.) */
.gam-dep-welcome .gam-dep-primary {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 17px 0;
  font-size: 16px;
  letter-spacing: 0.16em;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(255, 227, 154, 0.55),
    0 0 36px -4px rgba(95, 183, 255, 0.55),
    inset 0 1px 0 rgba(255, 245, 216, 0.55),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55);
}

/* CONTINUE FREE PLAY — secondary, ghost-style. Same width to keep
   alignment, but lighter font + soft gold rim + no glow so it does
   not compete with DEPOSIT NOW. */
.gam-dep-welcome .gam-dep-secondary {
  margin-top: 10px;
  padding: 8px 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(234, 242, 255, 0.72);
  background: transparent;
  border: 1px solid rgba(240, 194, 82, 0.32);
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.gam-dep-welcome .gam-dep-secondary:hover {
  color: var(--gam-cream);
  border-color: rgba(240, 194, 82, 0.50);
}

/* Balance display in deposit flow (chassis banner on amount/method/
   confirm, inline line on welcome). Both 17px gold-lt for visual
   consistency. */
.gam-dep-balance-banner {
  text-align: center;
  padding: 10px 14px 12px;
  font-size: 17px; font-weight: 700;
  color: var(--gam-gold-lt);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(240, 194, 82, 0.18);
}
.gam-dep-welcome .gam-dep-welcome-balance {
  margin-top: 10px;
  text-align: center;
  font-size: 17px; font-weight: 700;
  color: var(--gam-gold-lt);
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* ── Amount grid ──────────────────────────────────────────────── */
/* Stab 103: 3 columns × 2 rows = 6 tiles ($10 / $25 / $50 / $100 /
   $250 / "Another sum" custom input). On very narrow viewports the
   grid collapses to 2 columns × 3 rows so tiles stay legible. */
.gam-dep-amount-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-bottom: 6px;
}
@media (max-width: 339px) {
  .gam-dep-amount-grid { grid-template-columns: 1fr 1fr; }
}
.gam-dep-amount {
  position: relative;
  padding: 14px 10px;
  text-align: center;
  border-radius: 12px;
  cursor: pointer; outline: none;
  font-family: inherit;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(95, 183, 255, 0.20) 0%, transparent 70%),
    linear-gradient(180deg, #14306e 0%, #0a1a44 60%, #050d24 100%);
  border: 1px solid rgba(240, 194, 82, 0.45);
  color: var(--gam-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(200, 230, 255, 0.16),
    inset 0 -8px 16px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
}
.gam-dep-amount:active { transform: scale(0.98); }
.gam-dep-amount.selected {
  border-color: var(--gam-gold-glow);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 216, 0.30),
    inset 0 -8px 16px rgba(0, 0, 0, 0.40),
    0 0 16px rgba(255, 227, 154, 0.45),
    0 0 24px -4px rgba(95, 183, 255, 0.35);
}
.gam-dep-amount-usd {
  display: block;
  font-size: 22px; font-weight: 900; letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--gam-cream) 0%, var(--gam-gold-lt) 60%, var(--gam-gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(240, 194, 82, 0.30));
}
.gam-dep-amount-chips {
  display: block; margin-top: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gam-cyan-soft);
}

/* Stab 103: "Another sum" custom-amount tile. Shares the .gam-dep-
   amount chrome (border, padding, background, shadow) so the grid
   reads as six uniform tiles. The inner <input> fills the tile,
   strips its own border/background, and shows a placeholder that
   doubles as the label ("Another sum"). Auto-submits on Enter or
   on blur with a value ≥ 10 (handled in deposits.js). */
/* Stab 104: the custom-amount tile is now flex-column with the input
   on top and a small explicit Continue button below it (Stab 103's
   blur-auto-submit was undiscoverable on mobile). Tile keeps the same
   .gam-dep-amount chrome so the grid reads as 6 uniform tiles. */
.gam-dep-amount-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  min-height: 96px;
}
/* Stab 106: the white background moved from the input to a new
   .gam-dep-custom-wrap parent so a gold "$" prefix can sit
   permanently to the input's left (Stab 105 used the placeholder
   text alone — invisible on iOS once the user started typing). The
   input itself is transparent inside the wrap; the wrap owns the
   pill chrome (border, padding, background, focus ring). */
.gam-dep-amount-custom .gam-dep-custom-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  gap: 4px;
  cursor: text;
}
.gam-dep-amount-custom:focus-within .gam-dep-custom-wrap {
  border-color: #d4a93b;
  box-shadow: 0 0 0 2px rgba(212, 169, 59, 0.25);
}
.gam-dep-amount-custom .gam-dep-currency {
  color: #d4a93b;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.gam-dep-amount-custom .gam-dep-custom-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 4px 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  background: transparent;
  border: 0;
  outline: none;
  text-align: left;
  -webkit-appearance: none; appearance: none;
  -moz-appearance: textfield;
}
.gam-dep-amount-custom .gam-dep-custom-input::placeholder { color: rgba(0, 0, 0, 0.35); }
.gam-dep-custom-input::-webkit-outer-spin-button,
.gam-dep-custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Stab 105: ::placeholder rule moved up next to the .gam-dep-custom-input
   block above for visual co-location. The cyan-soft variant below was
   superseded by the dark-on-white pair when the input switched to a
   white background. */
.gam-dep-custom-input:focus {
  outline: none;
}
.gam-dep-amount-custom:focus-within {
  border-color: var(--gam-gold-glow);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 216, 0.30),
    inset 0 -8px 16px rgba(0, 0, 0, 0.40),
    0 0 16px rgba(255, 227, 154, 0.45);
}

/* Stab 104: Continue button inside the Another sum tile. Disabled
   while the input is empty or < $10; toggled live by onBodyInput.
   Sized to be obviously tappable but smaller than a primary action
   button — its visual weight signals "submit-within-tile" rather
   than "main CTA". */
.gam-dep-custom-continue {
  flex: 0 0 auto;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gam-cream);
  background:
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 227, 154, 0.30) 0%, transparent 70%),
    linear-gradient(180deg, #1f4ea8 0%, #0e1f4a 60%, #050d24 100%);
  border: 1px solid rgba(255, 227, 154, 0.85);
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.gam-dep-custom-continue:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.gam-dep-custom-continue:not(:disabled):active { transform: translateY(1px); }

/* ── Method list ──────────────────────────────────────────────── */
.gam-dep-method-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.gam-dep-method {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  border-radius: 12px;
  cursor: pointer; outline: none;
  font-family: inherit;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(95, 183, 255, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 42, 100, 0.65) 0%, rgba(10, 24, 56, 0.85) 100%);
  border: 1px solid rgba(240, 194, 82, 0.45);
  color: var(--gam-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(200, 230, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
}
.gam-dep-method:active { transform: scale(0.99); }
.gam-dep-method.selected {
  border-color: var(--gam-gold-glow);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 216, 0.22),
    0 0 14px rgba(255, 227, 154, 0.40);
}
.gam-dep-method[disabled] {
  cursor: default; opacity: 0.55;
}
.gam-dep-method-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--gam-cyan-soft);
}
.gam-dep-method-name { flex: 1; font-weight: 800; letter-spacing: 0.04em; }
.gam-dep-method-badge {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--gam-cyan-soft);
  background: rgba(95, 183, 255, 0.10);
  border: 1px solid rgba(95, 183, 255, 0.30);
  border-radius: 100px;
}

/* ── Confirm screen ───────────────────────────────────────────── */
.gam-dep-confirm {
  text-align: center; padding: 14px 4px 6px;
  border: 1px solid rgba(240, 194, 82, 0.35);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 227, 154, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 42, 100, 0.45) 0%, rgba(5, 13, 36, 0.55) 100%);
}
.gam-dep-confirm-amount {
  font-size: 38px; font-weight: 900; letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--gam-cream) 0%, var(--gam-gold-lt) 60%, var(--gam-gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(240, 194, 82, 0.35));
}
.gam-dep-confirm-chips  { font-size: 14px; color: var(--gam-cyan-pale); letter-spacing: 0.06em; margin-top: 4px; }
.gam-dep-confirm-method { font-size: 13px; color: rgba(234, 242, 255, 0.78); margin-top: 8px; }

/* ── Instructions screen ──────────────────────────────────────── */
.gam-dep-stub-note {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 178, 74, 0.08);
  border: 1px solid rgba(255, 178, 74, 0.40);
  color: var(--gam-amber);
  font-size: 12px; line-height: 1.4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
.gam-dep-pay-amount {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 14px 8px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 227, 154, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 42, 100, 0.45) 0%, rgba(5, 13, 36, 0.55) 100%);
  border: 1px solid rgba(240, 194, 82, 0.45);
  margin-bottom: 10px;
}
.gam-dep-pay-amount-num {
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--gam-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
.gam-dep-pay-amount-asset {
  font-size: 14px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gam-gold-lt);
}
.gam-dep-pay-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 12px;
}
.gam-dep-pay-actions .gam-dep-secondary { flex: 1; min-width: 130px; padding: 9px 0; font-size: 11.5px; }
.gam-dep-qr {
  display: flex; justify-content: center;
  padding: 10px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(240, 194, 82, 0.45);
  margin: 8px 0 12px;
}
.gam-dep-qr img { display: block; width: 100%; max-width: 220px; height: auto; }
.gam-dep-address {
  word-break: break-all;
  padding: 10px 12px;
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 12.5px;
  color: var(--gam-cream);
  background: rgba(2, 6, 15, 0.55);
  border: 1px solid rgba(240, 194, 82, 0.35);
  border-radius: 10px;
  -webkit-user-select: all; user-select: all;
}
.gam-dep-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(31, 78, 168, 0.20);
  border: 1px solid rgba(95, 183, 255, 0.35);
  font-size: 13px; color: var(--gam-cyan-pale);
  text-align: center;
}

/* ── Card screen ──────────────────────────────────────────────────
   Looks production-ready, but the form has no submit handler and the
   Pay button is disabled. */
.gam-dep-card-summary { margin-bottom: 12px; }
.gam-dep-card-brands {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 12px;
  flex-wrap: wrap;
}
.gam-dep-card-brand {
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.10em;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(220,225,235,0.85));
  color: #142a64;
  border: 1px solid rgba(20, 42, 100, 0.35);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.gam-dep-card-form { display: flex; flex-direction: column; gap: 10px; }
.gam-dep-card-row3 { display: grid; grid-template-columns: 2fr 1.4fr 1.6fr; gap: 8px; }
.gam-dep-card-secure {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-top: 4px;
  font-size: 11.5px; line-height: 1.4;
  color: var(--gam-cyan-soft);
  background: rgba(95, 183, 255, 0.08);
  border: 1px solid rgba(95, 183, 255, 0.25);
  border-radius: 8px;
}
.gam-dep-card-lock { font-size: 13px; }
.gam-dep-card-pay { margin-top: 6px; }
.gam-dep-card-note {
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 11.5px; line-height: 1.4;
  color: rgba(234, 242, 255, 0.70);
  background: rgba(255, 178, 74, 0.06);
  border: 1px solid rgba(255, 178, 74, 0.30);
  border-radius: 8px;
}