/* ============================================================
   TOPUP (Nạp Xu) — lớp áo Nebula. Neon BYTE-NGUYÊN (mọi rule gate
   :root[data-theme="nebula"]). Base .topup-pack / .tq-* ở wallet.css.
   1:1 mockup "GamerLink Nap Xu": layout rộng 1000px, lưới gói kính
   auto-fit + badge %, click gói mở QR trực tiếp (2 card inline ẩn).
   ============================================================ */

/* Phần tử chỉ-Nebula (base ẩn ở Neon) */
.tp-sub,
.tp-hint { display: none; }

/* ---- Layout & tiêu đề ---- */
:root[data-theme="nebula"] #topup .form-wrap { max-width: 1000px; margin: 0 auto; padding: 26px 30px 90px; }
@media (max-width: 720px) {
  :root[data-theme="nebula"] #topup .form-wrap { padding: 22px 16px 60px; }
}

:root[data-theme="nebula"] #topup .eyebrow {
  color: var(--n-label);
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 6px;
}
:root[data-theme="nebula"] #topup .screen-title { margin: 0 0 6px; }
:root[data-theme="nebula"] #topup .sub { display: none; }
:root[data-theme="nebula"] #topup .tp-sub {
  display: block; font-size: 14px; color: var(--muted); margin: 0 0 24px;
}

/* ---- Lưới gói: auto-fit như mockup ---- */
:root[data-theme="nebula"] #topupGrid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-top: 4px !important;
}

/* Thẻ gói = bề mặt kính */
:root[data-theme="nebula"] #topupGrid .topup-pack {
  background: rgba(var(--hl-rgb), .04);
  border: 1px solid rgba(var(--hl-rgb), .08);
  border-radius: 16px;
  padding: 20px 16px !important;
}
:root[data-theme="nebula"] #topupGrid .topup-pack:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--violet-rgb), .5);
  box-shadow: 0 18px 38px -20px rgba(var(--violet-rgb), .5);
}
:root[data-theme="nebula"] #topupGrid .topup-pack.is-selected {
  background: rgba(var(--violet-rgb), .12);
  border: 2px solid var(--violet);
  box-shadow: none;
}
:root[data-theme="nebula"] #topupGrid .topup-pack.is-popular { border-color: rgba(var(--hl-rgb), .08); }
:root[data-theme="nebula"] #topupGrid .topup-pack.is-popular.is-selected { border-color: var(--violet); }

/* Badge % — góc phải trên (Nebula); màu theo mức bonus */
:root[data-theme="nebula"] #topupGrid .topup-pack__badge {
  top: 12px; left: auto; right: 12px; transform: none;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 100px;
}
:root[data-theme="nebula"] .topup-pack__badge.is-cyan   { background: var(--cyan);   color: var(--on-cyan); }
:root[data-theme="nebula"] .topup-pack__badge.is-violet { background: var(--violet); color: #fff; }
:root[data-theme="nebula"] .topup-pack__badge.is-gold   { background: var(--gold);   color: var(--on-gold); }

/* Nội dung thẻ: icon → số Xu (ink) → giá (gold) */
:root[data-theme="nebula"] #topupGrid .topup-pack__icon { font-size: 32px !important; margin-bottom: 0 !important; }
:root[data-theme="nebula"] #topupGrid .topup-pack__xu {
  font-size: 22px !important; font-weight: 700; color: var(--ink); margin-top: 8px;
}
:root[data-theme="nebula"] #topupGrid .topup-pack__xu small { color: var(--faint); }
:root[data-theme="nebula"] #topupGrid .topup-pack__bonus { display: none; } /* thay bằng badge % */
:root[data-theme="nebula"] #topupGrid .topup-pack__price {
  font-size: 15px !important; color: var(--gold); margin-top: 4px !important;
}

/* Dòng gợi ý dưới lưới */
:root[data-theme="nebula"] #topup .tp-hint {
  display: flex; align-items: center; gap: 9px;
  margin-top: 20px; font-size: 12.5px; color: var(--n-label);
}

/* Ẩn 2 card inline (phương thức + xác nhận) — mockup mở QR trực tiếp khi chọn gói */
:root[data-theme="nebula"] #topup .tp-legacy { display: none; }

/* ============================================================
   MODAL QR chuyển khoản (#topupQrModal) — kính tối Nebula.
   Base .story-create__box / .tq-* ở home.css + wallet.css.
   ============================================================ */
:root[data-theme="nebula"] #topupQrModal .story-create__box {
  width: 400px;
  background: #141033;
  border: 1px solid rgba(var(--hl-rgb), .1);
  border-radius: 20px;
}
/* Bố cục DỌC như mockup: QR căn giữa trên · các hàng bên dưới.
   Ẩn Ngân hàng / Số TK / Chủ TK (đã nằm trong mã QR — mockup không hiện). */
:root[data-theme="nebula"] #topupQrModal .tq-grid { grid-template-columns: 1fr; }
:root[data-theme="nebula"] #topupQrModal .tq-qr { margin: 0 auto; }
:root[data-theme="nebula"] #topupQrModal .tq-row:has(#tqBank),
:root[data-theme="nebula"] #topupQrModal .tq-row:has(#tqAccount),
:root[data-theme="nebula"] #topupQrModal .tq-row:has(#tqHolder) { display: none; }
:root[data-theme="nebula"] #topupQrModal .story-create__close {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .1);
  color: var(--ink-soft); font-size: 14px;
}
:root[data-theme="nebula"] #topupQrModal .tq-row,
:root[data-theme="nebula"] #topupQrModal .tq-status {
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .1);
}
:root[data-theme="nebula"] #topupQrModal .tq-qr { border-color: rgba(var(--hl-rgb), .12); }
:root[data-theme="nebula"] #topupQrModal .tq-row--memo .btn {
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .16); color: var(--ink);
}
/* Nút xác nhận = violet như mockup (thay .btn--gold) */
:root[data-theme="nebula"] #topupQrModal #tqCheckBtn {
  background: var(--violet2); color: #fff; box-shadow: none;
}