/* =========================================================
   MY CASINO V61 — UNIFIED DEPOSIT EXPERIENCE
   Loaded after main.css. Only affects the member deposit page.
========================================================= */

.deposit-page-body {
  --deposit-card-height: 104px;
  --deposit-card-radius: var(--mt-card-radius, 18px);
  --deposit-surface: var(--mt-surface, #fff);
  --deposit-surface-alt: var(--mt-surface-alt, #eef9ff);
  --deposit-border: var(--mt-border, #c9e4f3);
  --deposit-heading: var(--mt-heading, #123459);
  --deposit-body: var(--mt-body, #35536b);
  --deposit-muted: var(--mt-muted, #7890a4);
}

/* One visual contract for bank, direct wallet and envelope cards. */
.deposit-page-body .deposit-account-unified-v61 {
  box-sizing: border-box;
  min-height: var(--deposit-card-height) !important;
  height: var(--deposit-card-height);
  margin: 0;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: var(--deposit-card-radius) !important;
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bank-color, #168ddd) 24%, transparent) !important;
}

.deposit-page-body .deposit-account-card.deposit-account-unified-v61 {
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.20), transparent 27%),
    linear-gradient(135deg, var(--bank-color, #168ddd), var(--bank-strong, #0875c8)) !important;
}

.deposit-page-body :is(.wallet-transfer-account-card-v52, .wallet-account-card-v49).deposit-account-unified-v61 {
  --bank-color: #f05b2d;
  --bank-strong: #a93815;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.19), transparent 27%),
    linear-gradient(135deg, var(--bank-color), var(--bank-strong)) !important;
}

.deposit-page-body .deposit-account-unified-v61 :is(
  .deposit-account-icon,
  .wallet-transfer-account-icon-v52,
  .wallet-account-logo-v49
) {
  box-sizing: border-box;
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 6px 14px rgba(22,49,74,.16) !important;
}

.deposit-page-body .deposit-account-unified-v61 :is(
  .deposit-account-icon img,
  .wallet-transfer-account-icon-v52 img,
  .wallet-account-logo-v49 img
) {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}

.deposit-page-body .deposit-account-unified-v61 :is(
  .deposit-account-detail,
  .wallet-transfer-account-detail-v52,
  .wallet-account-main-v49
) {
  min-width: 0;
  display: grid !important;
  align-content: center;
  gap: 3px !important;
}

.deposit-page-body .deposit-account-unified-v61 :is(
  .deposit-account-detail > span,
  .wallet-transfer-account-detail-v52 > span,
  .wallet-account-main-v49 > small
) {
  margin: 0 !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deposit-page-body .deposit-account-unified-v61 :is(
  .deposit-account-detail > strong,
  .wallet-transfer-account-detail-v52 > strong,
  .wallet-account-main-v49 > strong
) {
  margin: 0 !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .02em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deposit-page-body .deposit-account-unified-v61 :is(
  .deposit-account-detail > small,
  .wallet-transfer-account-detail-v52 > small,
  .wallet-account-main-v49 > span
) {
  margin: 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deposit-page-body .deposit-account-unified-v61 > :is(button, .wallet-mode-badge-v49) {
  min-width: 70px !important;
  min-height: 36px !important;
  height: 36px;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.58) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: rgba(32,20,20,.12) !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

/* Yellow Krungsri needs dark text for accessible contrast. */
.deposit-page-body .deposit-account-card.bank-theme-bay {
  --bank-color: #f1cf38;
  --bank-strong: #c49b13;
}
.deposit-page-body .deposit-account-card.bank-theme-bay :is(
  .deposit-account-detail > span,
  .deposit-account-detail > strong,
  .deposit-account-detail > small
) { color: #382b08 !important; }
.deposit-page-body .deposit-account-card.bank-theme-bay > button {
  color: #382b08 !important;
  border-color: rgba(56,43,8,.28) !important;
  background: rgba(255,255,255,.48) !important;
}

/* If the admin allows theme recoloring, all three cards still stay identical. */
html.member-theme-enabled[data-theme-bank-colors="theme"] body.deposit-page-body .deposit-account-unified-v61 {
  --bank-color: var(--mt-primary);
  --bank-strong: var(--mt-secondary);
  color: var(--mt-text-on-primary) !important;
  background: var(--mt-gradient) !important;
  border-color: var(--mt-border-strong) !important;
  box-shadow: var(--mt-shadow-strong) !important;
}
html.member-theme-enabled[data-theme-bank-colors="theme"] body.deposit-page-body .deposit-account-unified-v61 :is(span,strong,small) {
  color: var(--mt-text-on-primary) !important;
}

/* Make the three channel panels feel like one product. */
.deposit-page-body .deposit-panel {
  display: grid;
  gap: 10px;
}
.deposit-page-body .deposit-panel[hidden] { display: none !important; }
.deposit-page-body .deposit-panel > :is(.deposit-form, .wallet-envelope-form-v49) {
  margin-top: 0 !important;
  border-color: var(--deposit-border) !important;
  border-radius: var(--deposit-card-radius) !important;
  background: color-mix(in srgb, var(--deposit-surface) 96%, transparent) !important;
}
.deposit-page-body :is(.deposit-alert-card, .wallet-guide-bar-v49) {
  margin: 0 !important;
  min-height: 42px;
  box-sizing: border-box;
  border-color: var(--deposit-border) !important;
  border-radius: 12px !important;
  color: var(--deposit-body) !important;
  background: var(--deposit-surface-alt) !important;
}

/* Admin-uploaded visual guide below the 1-2-3 steps. */
.wallet-guide-media-v61 {
  margin: 10px 0 0;
  overflow: hidden;
  border: 1px solid var(--deposit-border);
  border-radius: 14px;
  background: var(--deposit-surface-alt);
}
.wallet-guide-media-v61[hidden] { display: none !important; }
.wallet-guide-media-v61 img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #fff;
}
.wallet-guide-media-v61 figcaption {
  padding: 8px 10px;
  color: var(--deposit-muted);
  background: var(--deposit-surface);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 370px) {
  .deposit-page-body .deposit-account-unified-v61 {
    grid-template-columns: 50px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 11px !important;
  }
  .deposit-page-body .deposit-account-unified-v61 :is(
    .deposit-account-icon,
    .wallet-transfer-account-icon-v52,
    .wallet-account-logo-v49
  ) { width: 50px !important; height: 50px !important; }
  .deposit-page-body .deposit-account-unified-v61 :is(
    .deposit-account-detail > strong,
    .wallet-transfer-account-detail-v52 > strong,
    .wallet-account-main-v49 > strong
  ) { font-size: 17px !important; }
  .deposit-page-body .deposit-account-unified-v61 > :is(button, .wallet-mode-badge-v49) {
    min-width: 62px !important;
    padding-inline: 7px !important;
  }
}