/* =========================================================
   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);
}

.deposit-promotion-notice-v73 {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 11px 0 0;
  padding: 10px;
  border: 1px solid #ffd47a;
  border-radius: 13px;
  background: #fff8e7;
  color: #68430a;
}
.deposit-registered-account-note-v735{grid-column:2 / -1;color:rgba(255,255,255,.9);font-size:9px;font-weight:700}
.deposit-form.is-promotion-deposit-locked-v735{opacity:.58;pointer-events:none}
.deposit-form input[readonly]{background:#eef5f9;color:#0b74ae;font-weight:900;cursor:not-allowed}
.deposit-promotion-notice-v73[hidden] { display: none !important; }
.deposit-promotion-notice-v73 > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #ffe7ad; color: #bd7200; }
.deposit-promotion-notice-v73 strong { display: block; font-size: 12px; }
.deposit-promotion-notice-v73 p { margin: 2px 0 0; font-size: 10px; line-height: 1.35; }
.deposit-promotion-notice-v73 a { padding: 7px 9px; border: 1px solid #e8b84f; border-radius: 8px; color: #9a5b00; background: #fff; font-size: 9px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.deposit-cashback-turnover-v713 {
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;
  margin:11px 0 0;padding:10px;border:1px solid #8bd1ee;border-radius:13px;background:#effaff;color:#174d69;
}
.deposit-cashback-turnover-v713[hidden]{display:none!important}
.deposit-cashback-turnover-v713>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#d8f2ff;color:#1188c2}
.deposit-cashback-turnover-v713 strong{display:block;font-size:12px}.deposit-cashback-turnover-v713 p{margin:2px 0 0;font-size:10px}
.deposit-cashback-turnover-v713 a{padding:7px 9px;border:1px solid #74c5e8;border-radius:8px;color:#0874a8;background:#fff;font-size:9px;font-weight:900;text-decoration:none}
@media (max-width: 390px) {
  .deposit-promotion-notice-v73 { grid-template-columns: 34px minmax(0, 1fr); }
  .deposit-promotion-notice-v73 > a { grid-column: 2; justify-self: start; }
}

/* 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-rows: 56px !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;
  grid-template-rows: 13px 24px 13px;
  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;
}

/* Keep the automatic badge readable on the orange TrueMoney card. */
.deposit-page-body #walletProcessBadge.wallet-mode-badge-v49[data-mode="automatic"] {
  color: #fff !important;
  border-color: rgba(255,255,255,.72) !important;
  background: rgba(72,25,5,.30) !important;
  text-shadow: 0 1px 2px rgba(45,14,2,.42);
}

/* 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; }

/* V71 — service/channel closed media */
.deposit-page-body .deposit-maintenance-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}
.deposit-page-body .deposit-maintenance-card[hidden] { display: none !important; }
.deposit-page-body .deposit-maintenance-card > img {
  width: calc(100% + 28px);
  max-height: 300px;
  margin: -14px -14px 2px;
  grid-column: 1 / -1;
  object-fit: cover;
  background: #fff;
}
.deposit-page-body .deposit-maintenance-card > img:not([hidden]) ~ #depositMaintenanceIcon { align-self: start; }
.deposit-channel-tabs button.is-unavailable { opacity: .68; }
.deposit-channel-tabs button.is-unavailable::after {
  content: "ปิด";
  position: absolute;
  top: 4px;
  right: 5px;
  padding: 1px 5px;
  border-radius: 99px;
  color: #fff;
  background: #e05260;
  font-size: 7px;
  font-weight: 900;
}
.deposit-channel-tabs button { position: relative; }
.deposit-channel-closed-v71 {
  margin: 10px 12px;
  padding: 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #f0c7cc;
  border-radius: 17px;
  color: #71333b;
  background: linear-gradient(145deg,#fff8f8,#fff1f3);
  box-shadow: 0 7px 18px rgba(111,42,51,.08);
}
.deposit-channel-closed-v71[hidden] { display: none !important; }
.deposit-channel-closed-v71 > img {
  width: calc(100% + 26px);
  max-height: 310px;
  margin: -13px -13px 2px;
  grid-column: 1 / -1;
  object-fit: cover;
  background: #fff;
}
.deposit-channel-closed-v71 > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #d84756; background: #fff; box-shadow: 0 3px 10px rgba(92,31,39,.1); }
.deposit-channel-closed-v71 small { display: block; color: #b05762; font-size: 9px; font-weight: 800; }
.deposit-channel-closed-v71 strong { display: block; margin-top: 2px; color: #742e38; font-size: 15px; }
.deposit-channel-closed-v71 p { margin: 4px 0 0; color: #8a4d55; font-size: 10px; line-height: 1.5; }
.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: 46px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .deposit-page-body .deposit-account-unified-v61 :is(
    .deposit-account-icon,
    .wallet-transfer-account-icon-v52,
    .wallet-account-logo-v49
  ) { width: 46px !important; height: 46px !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: 16px !important; }
  .deposit-page-body .deposit-account-unified-v61 > :is(button, .wallet-mode-badge-v49) {
    grid-column: auto !important;
    width: auto !important;
    min-width: 54px !important;
    padding-inline: 7px !important;
    justify-self: end !important;
  }
}

/* P04.4.0 — Fix 5: bank-card-canonical geometry for all deposit channels.
   The pre-Fix-4 bank card is the source of truth. Wallet channels adapt their
   inner wrappers to this contract; wallet-specific styles never redefine the
   bank card. */
.deposit-page-body .deposit-account-canonical-v75 {
  min-height: 104px !important;
  height: 104px !important;
  padding: 14px !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  grid-template-rows: 56px !important;
  gap: 12px !important;
  align-items: center !important;
}
.deposit-page-body .deposit-account-canonical-v75 :is(.deposit-account-icon,.wallet-transfer-account-icon-v52,.wallet-account-logo-v49) {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 16px !important;
}
.deposit-page-body .deposit-account-canonical-v75 :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-canonical-v75 :is(.deposit-account-detail,.wallet-transfer-account-detail-v52,.wallet-account-main-v49) {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 13px 24px 13px !important;
  align-content: center !important;
  gap: 3px !important;
}
.deposit-page-body .deposit-account-canonical-v75 :is(.deposit-account-detail > span,.wallet-transfer-account-detail-v52 > span,.wallet-account-main-v49 > small),
.deposit-page-body .deposit-account-canonical-v75 :is(.deposit-account-detail > strong,.wallet-transfer-account-detail-v52 > strong,.wallet-account-main-v49 > strong),
.deposit-page-body .deposit-account-canonical-v75 :is(.deposit-account-detail > small,.wallet-transfer-account-detail-v52 > small,.wallet-account-main-v49 > span) {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.deposit-page-body .deposit-account-canonical-v75 > :is(button,.wallet-mode-badge-v49) {
  width: 70px !important;
  min-width: 70px !important;
  height: 36px !important;
  min-height: 36px !important;
  justify-self: end !important;
  cursor: pointer;
}
@media (max-width: 390px) {
  .deposit-page-body .deposit-account-canonical-v75 {
    min-height: 86px !important;
    height: 86px !important;
    padding: 10px !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    grid-template-rows: 46px !important;
    gap: 8px !important;
  }
  .deposit-page-body .deposit-account-canonical-v75 :is(.deposit-account-icon,.wallet-transfer-account-icon-v52,.wallet-account-logo-v49) {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 13px !important;
  }
  .deposit-page-body .deposit-account-canonical-v75 :is(.deposit-account-icon img,.wallet-transfer-account-icon-v52 img,.wallet-account-logo-v49 img) { width: 36px !important; height: 36px !important; }
  .deposit-page-body .deposit-account-canonical-v75 :is(.deposit-account-detail,.wallet-transfer-account-detail-v52,.wallet-account-main-v49) { grid-template-rows: 11px 20px 11px !important; gap: 2px !important; }
  .deposit-page-body .deposit-account-canonical-v75 :is(.deposit-account-detail > strong,.wallet-transfer-account-detail-v52 > strong,.wallet-account-main-v49 > strong) { font-size: 16px !important; }
  .deposit-page-body .deposit-account-canonical-v75 > :is(button,.wallet-mode-badge-v49) { width: 58px !important; min-width: 58px !important; height: 32px !important; min-height: 32px !important; padding-inline: 5px !important; font-size: 8px !important; }
}