/* ============================================================================
   FRENZY96 — Deep-Sea Redesign · DEPOSIT  (fz-deposit.css)
   ----------------------------------------------------------------------------
   Reskin of the deposit modal (#modal-deposit.dep-v2, built by deposit-v2.js).
   PURE UI: no markup, no handlers, no fetch touched. Two moves:
     1. Re-point the modal's LOCAL --dp-* tokens (declared in deposit-v2.css
        :root) to deep-sea --fz-* values. Authored later → wins by source order,
        NO !important.
     2. "Ocean-ify" the header + panel per handoff §8.2 (shallow-cyan top →
        abyss bottom gradient, light beams + rising bubbles + gold coin badge).
   ============================================================================ */

/* ── 1 · Token remap (clean, source-order win) ───────────────────────────── */
:root {
  --dp-bg:       var(--fz-navy-deep);   /* abyss base */
  --dp-surface:  var(--fz-surface);
  --dp-surface2: var(--fz-surface-2);
  --dp-border:   var(--fz-line);
  --dp-border2:  var(--fz-line-faint);
  --dp-gold:     var(--fz-gold);
  --dp-gold-bg:  var(--fz-gold-soft);
  --dp-blue:     var(--fz-cyan);        /* accent → electric cyan */
  --dp-blue-bg:  var(--fz-cyan-soft);
  --dp-green:    var(--fz-green);
  --dp-red:      var(--fz-danger);
  --dp-text:     var(--fz-text);
  --dp-text2:    var(--fz-text-2);
  --dp-text3:    var(--fz-text-3);
  --dp-text4:    var(--fz-line-2);
}

/* ── 2 · Panel: shallow-cyan top → abyss bottom (handoff §8.2) ───────────── */
#modal-deposit.dep-v2 .dpw {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(41, 182, 232, 0.14) 0%, rgba(41, 182, 232, 0) 60%),
    linear-gradient(180deg, var(--fz-teal-2) 0%, var(--fz-navy) 34%, var(--fz-navy-deep) 100%);
}

/* ── Header: light-sea band + beams + rising bubbles + gold coin badge ───── */
#modal-deposit.dep-v2 .dp-hd {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-bottom: 1px solid var(--fz-teal-line);
  background:
    linear-gradient(180deg, rgba(12, 192, 255, 0.10) 0%, rgba(12, 192, 255, 0) 100%);
}
/* light beams sweeping down from the surface */
#modal-deposit.dep-v2 .dp-hd::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 160%;
  background:
    linear-gradient(74deg, transparent 42%, rgba(12, 192, 255, 0.10) 46%, transparent 50%),
    linear-gradient(88deg, transparent 60%, rgba(245, 200, 66, 0.08) 64%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
/* rising bubbles */
#modal-deposit.dep-v2 .dp-hd::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.28) 40%, transparent 42%),
    radial-gradient(circle, rgba(41, 182, 232, 0.32) 40%, transparent 42%),
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 40%, transparent 42%);
  background-size: 5px 5px, 7px 7px, 4px 4px;
  background-position: 18% 70%, 62% 40%, 84% 78%;
  background-repeat: no-repeat;
  animation: fz-dep-bubbles 6s var(--fz-ease-in-out) infinite;
}
@keyframes fz-dep-bubbles {
  0%   { transform: translateY(6px);  opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}
/* keep header content above the decoration */
#modal-deposit.dep-v2 .dp-hd > * { position: relative; z-index: 1; }
/* balance amount → mono gold */
#modal-deposit.dep-v2 .dp-bal .a { color: var(--fz-gold); }

/* ── Refinements ─────────────────────────────────────────────────────────── */
/* method left-rail active = cyan spine */
#modal-deposit.dep-v2 .dp-nav-i.on { border-left-color: var(--fz-cyan); }
#modal-deposit.dep-v2 .dp-nav-i.on .ic { background: var(--fz-cyan-soft); color: var(--fz-cyan); }

/* quick-amount chips → pill, cyan-on when selected */
#modal-deposit.dep-v2 .dp-quick button {
  border-radius: var(--fz-r-full);
  transition: all var(--fz-dur-fast) var(--fz-ease-out);
}
#modal-deposit.dep-v2 .dp-quick button.on {
  background: var(--fz-cyan-soft);
  border-color: var(--fz-cyan);
  color: var(--fz-cyan);
}

/* amount field focus glow */
#modal-deposit.dep-v2 .dp-amt { border-radius: var(--fz-r-lg); }
#modal-deposit.dep-v2 .dp-amt.foc { border-color: var(--fz-cyan); box-shadow: var(--fz-glow-cyan); }
#modal-deposit.dep-v2 .dp-amt .pfx { color: var(--fz-gold); }
/* single-frame amount (2026-07-12): #dp-amt-wrap is the one navy r12 1.5px box
   (deposit-v2.js inline); the input's inline border:0 is overridden by a generic
   .modal-backdrop input[type=text] !important rule → re-flatten it here. */
#modal-deposit.dep-v2 #dp-amt {
  border: 0 !important; background: transparent !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
}

/* primary CTA = gold gradient with the casino pop */
#modal-deposit.dep-v2 .dp-confirm:not(:disabled) {
  background: var(--fz-grad-gold);
  color: var(--fz-on-gold);
  border-radius: var(--fz-r-xl);
  box-shadow: var(--fz-glow-gold);
}
#modal-deposit.dep-v2 .dp-confirm:not(:disabled):hover {
  box-shadow: var(--fz-glow-gold-hover);
  transform: translateY(-1px);
}

/* rollover / notice card = gold-spined info panel */
#modal-deposit.dep-v2 .dp-notice { border-left-color: var(--fz-gold); border-radius: var(--fz-r-lg); }

/* pill / recommended tag */
#modal-deposit.dep-v2 .dp-pill {
  color: var(--fz-on-gold);
  background: var(--fz-grad-gold);
  border: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   2-STEP WIZARD (handoff §8.2) — reuses existing renderNav/onConfirm/openSheet.
   Method rail → top GRID: pure-CSS reflow of .dp-body/.dp-nav/.dp-nav-i, the
   renderNav markup + data-mk wiring are untouched. Single-method still hides the
   grid (JS sets .dp-nav display:none inline → wins), so no empty grid appears.
   Prefixed selectors (#modal-deposit.dep-v2 …) win by specificity — no !important.
   ══════════════════════════════════════════════════════════════════════════ */
#modal-deposit.dep-v2 .dp-body { flex-direction: column; }

#modal-deposit.dep-v2 .dp-nav {
  width: auto;
  border-right: 0;
  border-bottom: 1px solid var(--fz-line);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(88px, 1fr);
  gap: 8px;
  padding: 12px 14px;
  overflow-x: auto;
}
#modal-deposit.dep-v2 .dp-nav-i {
  flex-direction: column;
  border: 1px solid var(--fz-line);
  border-radius: var(--fz-r-lg);
  background: var(--fz-surface);
  padding: 12px 8px;
  gap: 7px;
  transition: border-color var(--fz-dur-fast) var(--fz-ease-out),
              box-shadow var(--fz-dur-fast) var(--fz-ease-out);
}
#modal-deposit.dep-v2 .dp-nav-i.on {
  border-color: var(--fz-cyan);
  background: var(--fz-cyan-soft);
  box-shadow: var(--fz-glow-cyan);
}

/* ── Step 1 / 2 indicator (rendered for the manual 2-step flow) ──────────────
   NOTE: the step-2 receipt sheet (.dp-sov) is appended to <body>, OUTSIDE
   #modal-deposit — so these .dp-* classes (which exist only in this deposit
   component) are styled UNPREFIXED so they reach BOTH the in-modal step 1 and
   the body-level step-2 sheet. --dp-*/--fz-* are :root so they resolve anywhere. */
.dp-steps {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
}
.dp-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fz-text-2xs);
  font-weight: var(--fz-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--fz-track-caps);
  color: var(--fz-text-3);
}
.dp-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--fz-r-full);
  background: var(--fz-surface-2);
  color: var(--fz-text-3);
  font-size: var(--fz-text-2xs);
  line-height: 1;
  flex-shrink: 0;
}
.dp-step.on { color: var(--fz-cyan); }
.dp-step.on b { background: var(--fz-cyan); color: var(--fz-on-cyan); }
.dp-step.done { color: var(--fz-green); }
.dp-step.done b { background: var(--fz-green); color: var(--fz-on-green); }
.dp-arrow { display: inline-flex; flex-shrink: 0; color: var(--fz-text-3); }
.dp-arrow svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP DEPOSIT PANEL FIX (2026-07-12) — restore the design-source centered
   card. deposit-v2.css forces a FULL-SCREEN container (#modal-deposit.dep-v2
   align-items:stretch + opaque #0b0c10 bg + .dpw height:100%), which on desktop
   stretched the panel to full height (~40% empty board) and blacked out the
   whole page. This block (loads after deposit-v2.css, same specificity +
   !important) reverts to the spec: 440px auto-height card, translucent blurred
   scrim, deep-sea panel gradient. MOBILE (<980) keeps the full-page sheet.
   Pure presentation — field ids / handlers / submit flow untouched.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 980px) {
  #modal-deposit.dep-v2 {
    align-items: center !important;            /* was stretch → panel filled the screen */
    justify-content: center !important;
    background: rgba(4, 8, 12, 0.74) !important; /* was opaque #0b0c10 → page now shows through */
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    padding: 16px !important;                  /* was 0 → give the card breathing room */
  }
  #modal-deposit.dep-v2 .dpw {
    width: 100% !important;
    max-width: 440px !important;               /* was 480 */
    height: auto !important;                    /* was 100% → content drives height */
    max-height: 92dvh !important;
    margin: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;                /* clip the rounded corners; inner list scrolls */
    /* deep-sea panel: spec gradient over the underwater art, near-opaque at the
       bottom so labels read clearly (was flat #0b0c10 washed grey). */
    background:
      linear-gradient(180deg, rgba(10, 48, 60, 0.92) 0%, rgba(5, 16, 24, 0.97) 100%),
      url('../img/bg/underwater-modal.jpg') center / cover no-repeat, #05101B !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(41, 182, 232, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }
  /* the inner scroll region should ride the panel height, not a fixed 100% */
  #modal-deposit.dep-v2 .dpw > * { flex-shrink: 0; }

  /* ── amount: single-frame (spec) — the .bs-field IS the one navy r12 1.5px box
     holding $ prefix + input; the input drops its own inner border/bg. ── */
  #modal-deposit.dep-v2 .deposit-amount-block .bs-field {
    display: flex !important; align-items: center !important;
    background: var(--fz-navy, #0A1B26) !important;
    border: 1.5px solid var(--fz-line-2) !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
  }
  #modal-deposit.dep-v2 .deposit-amount-block .bs-field:focus-within {
    border-color: var(--fz-cyan) !important;
    box-shadow: 0 0 0 3px rgba(41,182,232,.14) !important;
  }
  #modal-deposit.dep-v2 .dep-amount-input {
    border: none !important; background: transparent !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 12px 0 !important;
  }

  /* ── quick-amount chips (spec): full pill, mono, navy tile, gold text ── */
  #modal-deposit.dep-v2 .dep-quick-amt {
    flex: 1 !important; padding: 8px 0 !important;
    border-radius: 999px !important;
    font-family: var(--fz-font-mono, "JetBrains Mono", monospace) !important;
    font-size: 12px !important; font-weight: 700 !important;
    color: var(--fz-gold, #F5C842) !important;
    background: rgba(18, 42, 51, 0.6) !important;
    border: 1px solid var(--fz-line, rgba(255,255,255,.08)) !important;
  }
  #modal-deposit.dep-v2 .dep-quick-amt.on {
    background: var(--fz-gold-soft, rgba(245,200,66,.14)) !important;
    border-color: var(--fz-gold, #F5C842) !important;
  }
}