/* Nạp tiền & checkout — đồng bộ Ritual Pro (load sau premium CSS) */

body.deposit-page,
body.dh-page,
body.nt-page,
body.dpay-page,
body.sepay-page,
body.checkout-page {
  --bg-deep: #faf9f7;
  --bg-base: #ffffff;
  --bg-raised: #ffffff;
  --bg-muted: #f5f3ef;
  --bg-hover: #eeede9;
  --text-primary: #12100e;
  --text-secondary: #3a3530;
  --text-muted: #524c44;
  --gold: #a67c1a;
  --gold-soft: #9a6b12;
  --gold-icon: #7d5e14;
  --gold-tint: rgba(166, 124, 26, 0.08);
  --terracotta: #a67c1a;
  --border: rgba(26, 24, 20, 0.08);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

body.deposit-page::before,
body.dh-page::before,
body.nt-page::before {
  background:
    radial-gradient(ellipse 70% 45% at 0% -8%, rgba(166, 124, 26, 0.07), transparent 52%),
    radial-gradient(ellipse 55% 40% at 100% 0%, rgba(166, 124, 26, 0.05), transparent 48%),
    linear-gradient(180deg, #faf9f7, #f5f3ef) !important;
}

/* ── Tiêu đề gradient → chữ đọc được ── */
body.deposit-page .dp-hero__accent,
body.dh-page .dp-hero__accent,
body.nt-page .nt-hero__accent,
body.nt-page .nt-hero h1 em {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: #7d5e14 !important;
}

body.deposit-page .dp-balance-pill__value,
body.nt-page .dp-balance-pill__value,
body.dh-page .dh-stat__value {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: #12100e !important;
  font-weight: 700;
}

/* ── Hero & thẻ phương thức ── */
body.deposit-page .dp-hero__shell.bezel-shell,
body.deposit-page .dp-hero__core.bezel-core,
body.dh-page .dp-hero__shell.bezel-shell,
body.dh-page .dp-hero__core.bezel-core,
body.nt-page .nt-hero__shell.bezel-shell,
body.nt-page .nt-hero__core.bezel-core {
  background: #ffffff !important;
  border-color: rgba(26, 24, 20, 0.08) !important;
  box-shadow: var(--rl-shadow, 0 1px 2px rgba(26, 24, 20, 0.04), 0 8px 24px rgba(26, 24, 20, 0.06)) !important;
}

body.deposit-page a.dp-method.bezel-shell,
body.deposit-page span.dp-method.bezel-shell,
body.deposit-page .dp-method,
body.nt-page a.dp-method.bezel-shell {
  background: #ffffff !important;
  border-color: rgba(26, 24, 20, 0.08) !important;
}

body.deposit-page .dp-method__inner,
body.deposit-page .dp-method--featured .dp-method__inner,
body.nt-page .dp-method__inner {
  background: #ffffff !important;
}

body.deposit-page .dp-method__name,
body.nt-page .dp-method__name,
body.deposit-page .dp-methods__title,
body.dh-page .dh-section__title {
  color: #12100e !important;
  font-family: var(--font-display) !important;
}

body.deposit-page .dp-method__desc,
body.deposit-page .dp-eyebrow,
body.dh-page .dp-eyebrow,
body.nt-page .nt-eyebrow {
  color: #524c44 !important;
}

body.deposit-page .dp-methods__history,
body.dh-page .dh-back,
body.nt-page .nt-back {
  color: #7d5e14 !important;
  background: rgba(166, 124, 26, 0.08) !important;
  border-color: rgba(125, 94, 20, 0.2) !important;
  font-weight: 600;
}

body.deposit-page .dp-nav .nav-island,
body.dh-page .dp-nav .nav-island,
body.nt-page .dp-nav .nav-island {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(26, 24, 20, 0.08) !important;
}

/* ── Lịch sử nạp ── */
body.dh-page .dp-hero__shell.bezel-shell::before {
  background: conic-gradient(
    from var(--dh-angle, 0deg),
    #a67c1a,
    #d4b86a,
    rgba(166, 124, 26, 0.25),
    #d4b86a,
    #a67c1a
  ) !important;
  opacity: 0.35 !important;
}

body.dh-page .dh-section.bezel-shell,
body.dh-page .dh-section__core.bezel-core,
body.dh-page .dh-item {
  background: #ffffff !important;
  border-color: rgba(26, 24, 20, 0.08) !important;
}

body.dh-page .dh-item__code {
  color: #7d5e14 !important;
  font-weight: 600;
}

body.dh-page .dh-item__amount {
  color: #12100e !important;
}

body.dh-page .dh-item__amount.is-credit {
  color: #7d5e14 !important;
}

body.dh-page .dh-item__meta {
  color: #524c44 !important;
}

body.dh-page .dh-stat {
  background: #ffffff !important;
  border-color: rgba(26, 24, 20, 0.08) !important;
}

body.dh-page .dh-stat__label {
  color: #524c44 !important;
}

/* ── SePay / deposit payment ── */
body.sepay-page,
body.dpay-page {
  --fx-gold: #a67c1a;
  --fx-green: #7d5e14;
}

body.sepay-page .sepay-fx-card,
body.sepay-page .sepay-fx-qr,
body.dpay-page .dpay-transfer.bezel-shell,
body.dpay-page .dpay-transfer__core.bezel-core {
  background: #ffffff !important;
  border-color: rgba(26, 24, 20, 0.08) !important;
}

body.sepay-page .sepay-fx-hero__shell::before,
body.sepay-page .sepay-fx-qr__ring::before {
  background: conic-gradient(
    from var(--sepay-angle, 0deg),
    #a67c1a,
    #d4b86a,
    rgba(166, 124, 26, 0.3),
    #d4b86a,
    #a67c1a
  ) !important;
}

body.sepay-page .sepay-fx-status--ok,
body.sepay-page .sepay-fx-timer--ok {
  color: #7d5e14 !important;
}

/* ── Nạp thẻ ── */
body.nt-page .nt-card,
body.nt-page .nt-form-card,
body.nt-page .nt-provider {
  background: #ffffff !important;
  border-color: rgba(26, 24, 20, 0.08) !important;
}

body.nt-page .nt-card__label,
body.nt-page .nt-form__label {
  color: #524c44 !important;
  font-weight: 600;
}

body.nt-page .nt-input,
body.nt-page .nt-select {
  background: #faf9f7 !important;
  border-color: rgba(26, 24, 20, 0.12) !important;
  color: #12100e !important;
}

body.nt-page .nt-input:focus,
body.nt-page .nt-select:focus {
  border-color: rgba(166, 124, 26, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(166, 124, 26, 0.12) !important;
}

/* ── Checkout ── */
body.checkout-page {
  --b0: #faf9f7;
  --b1: #ffffff;
  --b2: #ffffff;
  --b3: #f5f3ef;
  --bd: rgba(26, 24, 20, 0.08);
  --t1: #12100e;
  --t2: #3a3530;
  --t3: #524c44;
}

body.checkout-page .gc {
  background: #ffffff !important;
  border: 1px solid rgba(26, 24, 20, 0.08) !important;
  border-top-color: rgba(26, 24, 20, 0.06) !important;
  box-shadow: 0 1px 2px rgba(26, 24, 20, 0.04), 0 8px 24px rgba(26, 24, 20, 0.06) !important;
}

body.checkout-page .pay-card {
  background: #ffffff !important;
  border-color: rgba(26, 24, 20, 0.1) !important;
}

body.checkout-page .pay-card::before {
  background: linear-gradient(135deg, rgba(166, 124, 26, 0.08), rgba(212, 184, 106, 0.06)) !important;
}

body.checkout-page .pay-card:hover {
  border-color: rgba(166, 124, 26, 0.35) !important;
  box-shadow: 0 8px 24px rgba(26, 24, 20, 0.08) !important;
}

body.checkout-page .pay-card.sel {
  border-color: rgba(166, 124, 26, 0.55) !important;
  background: linear-gradient(145deg, rgba(166, 124, 26, 0.06), rgba(255, 255, 255, 0.98)) !important;
  box-shadow: 0 0 0 2px rgba(166, 124, 26, 0.18), 0 8px 24px rgba(26, 24, 20, 0.08) !important;
}

body.checkout-page .pay-grid__empty {
  background: rgba(166, 124, 26, 0.1) !important;
  border: 1px solid rgba(125, 94, 20, 0.2) !important;
  color: #3a3530 !important;
}

body.checkout-page .inp:focus {
  border-color: rgba(166, 124, 26, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(166, 124, 26, 0.12) !important;
}

body.checkout-page .card-hd-title,
body.checkout-page .pay-card-label {
  color: #12100e !important;
  font-family: var(--font-display) !important;
}

body.checkout-page .pay-card-desc,
body.checkout-page .lbl {
  color: #524c44 !important;
}

body.checkout-page .ico-ship,
body.checkout-page .ico-pay,
body.checkout-page .ico-sum,
body.checkout-page .ico-dig,
body.checkout-page .ico-con {
  background: linear-gradient(135deg, #a67c1a, #d4b86a) !important;
  box-shadow: 0 4px 14px rgba(166, 124, 26, 0.25) !important;
}

body.checkout-page .ritual-card-title {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #7d5e14 !important;
}

body.checkout-page .gc-ritual {
  background: #ffffff !important;
  border-color: rgba(166, 124, 26, 0.25) !important;
}

/* ── Dock ── */
body.deposit-page .dp-dock__item,
body.dh-page .dp-dock__item,
body.nt-page .dp-dock__item,
body.checkout-page .co-dock__item {
  color: #524c44 !important;
}

body.deposit-page .dp-dock__item.is-active,
body.dh-page .dp-dock__item.is-active,
body.nt-page .dp-dock__item.is-active,
body.checkout-page .co-dock__item.is-active {
  color: #7d5e14 !important;
}