/* ============================================================
   QuickPlay88 — Q Coins deposit flow
   From the Figma frames: Deposit Payment (1499:331, header 1499:231/159),
   Deposit Success (1499:411) and Deposit Failed (1499:426). A neutral,
   payment-page look (Roboto, #0059af) on purpose, distinct from the arcade.
   ============================================================ */
.dep {
  --dep-blue: #0059af; --dep-red: #e53935; --dep-bg: #f4f4f4;
  --dep-ink: #333; --dep-mid: #666; --dep-soft: #888; --dep-line: #e7e7e7;
  position: absolute; inset: 0; z-index: 88; display: none; flex-direction: column;
  background: var(--dep-bg); color: var(--dep-ink); font-family: 'Roboto', system-ui, sans-serif;
}
.dep.active { display: flex; }
.dep-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dep button { font-family: inherit; }
.dep button:focus-visible, .dep input:focus-visible { outline: 2px solid var(--dep-blue); outline-offset: 1px; }

/* Header */
.dep-head { position: relative; flex: none; height: 47px; background: #fff; display: flex; align-items: center; justify-content: center; }
.dep-head h1 { font-size: 20px; font-weight: 400; color: var(--dep-mid); }
.dep-back { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); padding: 10px; border: none; background: none; cursor: pointer; display: flex; }
.dep-back img { display: block; }
.dep-hline { flex: none; display: block; width: 100%; height: 1px; }

.dep-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 5px 10px 12px; }

/* Cards */
.dep-card { background: #fff; border-radius: 8px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); margin-top: 8px; overflow: hidden; }
.dep-card .dep-hline { width: 100%; }
.dep-label { font-size: 10px; color: var(--dep-soft); }

/* Rate + converter */
.dep-rate { padding: 6px 9px 8px; }
.dep-conv { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; margin-top: 5px; }
.dep-field { position: relative; display: block; height: 38px; border: 1px solid var(--dep-line); border-radius: 8px; }
.dep-field span { position: absolute; left: 6px; top: 4px; font-size: 10px; color: var(--dep-soft); pointer-events: none; }
.dep-field input {
  position: absolute; inset: 0; width: 100%; padding: 13px 7px 0 30px; border: none; border-radius: 8px;
  background: transparent; text-align: right; font: 400 16px 'Roboto', sans-serif; color: var(--dep-ink);
}
.dep-field input:focus { outline: 2px solid var(--dep-blue); outline-offset: -1px; }
.dep-swap {
  width: 20px; height: 20px; background: var(--dep-blue);
  -webkit-mask: url(../assets/deposit/swap-mask.png) center / 20px 20px no-repeat;
          mask: url(../assets/deposit/swap-mask.png) center / 20px 20px no-repeat;
}
.dep-err { margin-top: 6px; font-size: 11px; color: var(--dep-red); }
.dep-err:empty { display: none; }

/* Collapsible card header */
.dep-card-head {
  width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 9px; border: none; background: none; cursor: pointer; text-align: left;
}
.dep-card-head .dep-label { text-transform: capitalize; }
.dep-chev { margin-left: auto; flex: none; transform: rotate(-90deg); transition: transform .2s; }
.dep-card.collapsed .dep-chev { transform: rotate(180deg); }
.dep-card.collapsed .dep-collapse { display: none; }
.dep-secure { padding: 0 5px; border-radius: 8px; background: #afffbb; color: #00712d; font-size: 10px; line-height: 11px; text-transform: capitalize; }
.dep-all { margin-left: auto; font-size: 10px; color: var(--dep-soft); text-transform: capitalize; }
.dep-all + .dep-chev { margin-left: 6px; }

/* Description rows */
.dep-rows { display: grid; grid-template-columns: 1fr auto; padding: 9px 10px 10px; font-size: 12px; line-height: 18px; color: var(--dep-soft); }
.dep-rows dt { text-transform: capitalize; }
.dep-rows dd { text-align: right; font-variant-numeric: tabular-nums; }
.dep-rows .total { font-size: 16px; }
.dep-rows dd.total.blue { color: var(--dep-blue); }
.dep-rows .gap { grid-column: 1 / -1; height: 18px; }

/* Payment merchants */
.dep-merchants { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px 8px; }
.dep-merchant {
  width: 100%; height: 61px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 9px;
  border: none; border-radius: 8px; background: var(--dep-bg); cursor: pointer; text-align: left;
}
.dep-logo { position: relative; flex: none; width: 36px; height: 36px; }
.dep-logo > img { display: block; }
.dep-logo i { position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; }
.dep-logo .duitnow {
  background: url(../assets/deposit/duitnow-logo.png) -8.883px -0.249px / 37.031px 21.663px no-repeat;
  -webkit-mask: url(../assets/deposit/duitnow-mask.svg) 0 0 / 20px 20px no-repeat;
          mask: url(../assets/deposit/duitnow-mask.svg) 0 0 / 20px 20px no-repeat;
}
.dep-logo .ibank {
  background: var(--dep-blue);
  -webkit-mask: url(../assets/deposit/ibank-mask.svg) 0 0 / 20px 20px no-repeat;
          mask: url(../assets/deposit/ibank-mask.svg) 0 0 / 20px 20px no-repeat;
}
.dep-mtext { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.dep-mtext b { font-weight: 400; color: var(--dep-ink); }
.dep-mtext small { font-size: 14px; color: var(--dep-soft); }
.dep-radio { flex: none; display: block; }

/* Secure note + bottom bar */
.dep-note {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 10px 10px; font-size: 10px; color: var(--dep-soft); text-transform: capitalize;
}
.dep-shield {
  flex: none; width: 12px; height: 12px; background: var(--dep-blue);
  -webkit-mask: url(../assets/deposit/shield-mask.png) 0 0 / 12px 12px no-repeat;
          mask: url(../assets/deposit/shield-mask.png) 0 0 / 12px 12px no-repeat;
}
.dep-bar { flex: none; display: flex; height: calc(48px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.1); }
.dep-total { position: relative; flex: 1; }
.dep-total small { position: absolute; left: 11.5px; top: 2px; font-size: 10px; font-weight: 600; color: var(--dep-soft); }
.dep-total b { position: absolute; right: 11px; top: 4px; font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--dep-blue); font-variant-numeric: tabular-nums; }
.dep-total em { position: absolute; right: 11px; bottom: 3px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--dep-blue); white-space: pre; }
.dep-pay { flex: none; width: 127px; border: none; background: var(--dep-blue); color: #fff; font-size: 20px; font-weight: 500; cursor: pointer; }
.dep-pay:disabled { background: #8eaacb; cursor: default; }

/* Result: success / failed */
.dep-result { overflow-y: auto; padding: 38px 10px 0; }
.dep-result-icon { position: relative; flex: none; width: 70px; height: 70px; margin: 0 auto; }
.dep-result-icon img { position: absolute; display: block; }
.dep-result-icon .circle { left: 0; top: 0; }
.dep-result-icon .check { left: 18.9px; top: 21.7px; }
.dep-result-icon .cross { left: 26px; top: 26px; }
.dep-result h2 { margin-top: 10px; text-align: center; font-size: 20px; font-weight: 400; line-height: 30px; color: var(--dep-ink); }
.dep-result .sub { margin-top: 1px; text-align: center; font-size: 12px; line-height: 18px; color: #6d6d6d; }
.dep-result .dep-card { margin-top: 9px; }
.dep-result .dep-card-head { cursor: default; }
.dep-result-spacer { flex: 1; min-height: 24px; }
.dep-done {
  flex: none; height: 48px; margin: 0 0 calc(7px + env(safe-area-inset-bottom)); border: none; border-radius: 8px;
  background: var(--dep-blue); color: #fff; font-size: 20px; font-weight: 500; cursor: pointer;
}
.dep-result.is-failed .dep-done { background: var(--dep-red); }