/* ═══════════════════════════════════════════════════════════════════
   ZEEDTOPUP — Front Polish
   ────────────────────────────────────────────────────────────────
   ปรับหน้าตาหน้าเว็บฝั่งลูกค้าให้ดูดีขึ้น (ไม่ใช่เรื่อง responsive)
   • responsive อยู่ที่ responsive-polish.css
   • เอฟเฟกต์ตกแต่งอยู่ที่ reactbits.css
   • ห้ามแก้ app.css / mobile-fixes.css เดิม
   โหลดลำดับ: app → mobile-fixes → reactbits → front-polish → responsive-polish
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   หน้าเติมเงิน Wallet (/topup)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. ตัวเลือกวิธีเติมเงิน — การ์ดเลือกได้ มีสีประจำวิธี ═══════════
   ⚠️ เดิมปุ่มพวกนี้เขียน inline style ไว้ทั้งหมด และ JS ยังเขียน
      background/borderColor ทับตอนคลิกอีก → CSS แก้หน้าตาไม่ได้เลย
      รอบนี้ถอด inline style ออกจาก view + ให้ JS สลับแค่ class .active */
.tw-method-grid{
  display:grid;
  grid-template-columns:repeat(var(--tw-methods,4),minmax(0,1fr));
  gap:10px;
  margin:14px 0 2px;
}

.topup-method-btn{
  position:relative; z-index:0; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:18px 10px 15px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);
  color:#fff; cursor:pointer;
  font-family:'Prompt',sans-serif;
  transition:transform .22s cubic-bezier(.22,1,.36,1),
             border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

/* แสงเรืองมุมบนขวา — โผล่ตอน hover / active */
.topup-method-btn::after{
  content:""; position:absolute; inset:-45% -45% auto auto;
  width:85%; height:85%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle,var(--tw-accent-soft,rgba(227,24,55,.18)),transparent 62%);
  opacity:0; transition:opacity .25s ease;
}

.topup-method-btn__ico{
  width:48px; height:48px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  background:var(--tw-accent-soft,rgba(227,24,55,.14));
  border:1px solid var(--tw-accent-line,rgba(227,24,55,.20));
  color:var(--tw-accent,#E31837);
  font-size:1.34rem; flex-shrink:0;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.topup-method-btn strong{font-size:.88rem; font-weight:700; line-height:1.2; text-align:center}
.topup-method-btn__sub{
  font-size:.72rem; line-height:1.3; text-align:center;
  color:var(--text-muted,#666);
  transition:color .22s ease;
}

/* ติ๊กถูกมุมขวาบน บอกว่าเลือกอยู่ — ชัดกว่าดูจากสีขอบอย่างเดียว */
.topup-method-btn__check{
  position:absolute; top:9px; right:9px;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--red,#E31837); color:#fff; font-size:.64rem;
  box-shadow:0 4px 10px rgba(227,24,55,.4);
  opacity:0; scale:.4;
  transition:opacity .2s ease, scale .24s cubic-bezier(.22,1,.36,1);
}

.topup-method-btn:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.15);
  box-shadow:0 14px 30px rgba(0,0,0,.26);
}
.topup-method-btn:hover::after{opacity:1}
.topup-method-btn:hover .topup-method-btn__ico{transform:scale(1.06)}
.topup-method-btn:active{transform:translateY(-1px) scale(.985)}

.topup-method-btn.active{
  background:linear-gradient(180deg,rgba(227,24,55,.17),rgba(227,24,55,.05));
  border-color:rgba(227,24,55,.48);
  box-shadow:0 14px 32px rgba(227,24,55,.16), inset 0 0 26px rgba(227,24,55,.06);
  transform:translateY(-2px);
}
.topup-method-btn.active::after{opacity:1}
.topup-method-btn.active .topup-method-btn__check{opacity:1; scale:1}
.topup-method-btn.active .topup-method-btn__sub{color:#d3d3dc}
.topup-method-btn.active .topup-method-btn__ico{
  box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
}

/* สีประจำแต่ละวิธี — คุมผ่านตัวแปร ไม่ต้องเขียนกฎซ้ำ */
.topup-method-btn[data-accent="bank"]     {--tw-accent:#ff5875;--tw-accent-soft:rgba(227,24,55,.16);--tw-accent-line:rgba(227,24,55,.26)}
.topup-method-btn[data-accent="promptpay"]{--tw-accent:#5aa2ff;--tw-accent-soft:rgba(26,115,232,.16);--tw-accent-line:rgba(26,115,232,.28)}
.topup-method-btn[data-accent="truemoney"]{--tw-accent:#ff9147;--tw-accent-soft:rgba(243,112,33,.16);--tw-accent-line:rgba(243,112,33,.28)}
.topup-method-btn[data-accent="redeem"]   {--tw-accent:#2fd98a;--tw-accent-soft:rgba(0,200,100,.15);--tw-accent-line:rgba(0,200,100,.26)}

/* ตัวเล็กสำหรับฝั่งมือถือ */
.topup-method-btn--sm{padding:13px 6px 11px; border-radius:14px; gap:7px}
.topup-method-btn--sm .topup-method-btn__ico{width:38px; height:38px; border-radius:12px; font-size:1.06rem}
.topup-method-btn--sm strong{font-size:.78rem}
.topup-method-btn--sm .topup-method-btn__check{width:17px; height:17px; top:7px; right:7px; font-size:.56rem}
.tw-method-grid--sm{gap:8px; margin:10px 0 2px}

/* ═══ 2. หัวข้อการ์ด — เพิ่มแถบแดงนำสายตา ═══════════════════════ */
.tw-card-label{position:relative; padding-left:14px; font-size:1.12rem; margin-bottom:10px}
.tw-card-label::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px;
  width:3px; border-radius:99px;
  background:linear-gradient(180deg,#ff5875,#E31837);
}

/* ═══ 3. กล่องเลขบัญชี — ทำให้เป็น "การ์ดใบเสร็จ" อ่านง่าย ═════════ */
.tw-bank-box{
  position:relative; overflow:hidden;
  padding:22px 22px 20px; border-radius:20px;
  background:
    linear-gradient(152deg,rgba(227,24,55,.11),rgba(255,255,255,.02) 46%,rgba(255,255,255,.012));
  border:1px solid rgba(227,24,55,.16);
}
/* จุดตารางจาง ๆ มุมบนขวา ให้ผิวไม่แบน */
.tw-bank-box::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1.1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 76% 92% at 84% 0%,#000 0%,transparent 76%);
  mask-image:radial-gradient(ellipse 76% 92% at 84% 0%,#000 0%,transparent 76%);
}
.tw-bank-box > *{position:relative}

/* ชื่อธนาคารเป็น chip แทนบรรทัดข้อความธรรมดา */
.tw-bank-name{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  font-size:.82rem; font-weight:700; color:#e9e9f0;
  margin-bottom:14px;
}

/* เลขบัญชี — tabular-nums ทำให้ตัวเลขกว้างเท่ากันทุกตัว อ่าน/เทียบง่าย */
.tw-account-number{
  font-size:clamp(1.85rem,4.2vw,2.45rem);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  letter-spacing:.055em;
  margin-bottom:10px;
}
.tw-account-holder{
  display:flex; align-items:center; gap:8px;
  font-size:.9rem; color:#c8c8d2; margin-bottom:0;
}
/* จุดแดงเล็ก ๆ นำหน้า — ใช้รูปทรงล้วน ไม่พึ่ง codepoint ของ icon font
   (ถ้าเดา \F.... ผิด จะกลายเป็นตัวอักษรมั่วหรือกล่องเปล่า) */
.tw-account-holder::before{
  content:""; flex:0 0 auto;
  width:6px; height:6px; border-radius:50%;
  background:var(--rl,#FF3D5A);
  box-shadow:0 0 8px rgba(255,61,90,.6);
}
/* เส้นประคั่นก่อนคำแนะนำ — ให้ความรู้สึกเป็นสลิป */
.tw-bank-hint{
  border-top:1px dashed rgba(255,255,255,.11);
  margin-top:15px; padding-top:13px;
}
.tw-copy-btn{padding:11px 22px; font-weight:700}
.tw-copy-btn:active{transform:scale(.97)}

/* ═══ 4. ประวัติการเติมเงิน — แถวมีชีวิตขึ้น ════════════════════ */
.tw-h-row{transition:background .2s ease, border-color .2s ease, transform .2s ease}
.tw-h-row:hover{
  background:rgba(255,255,255,.035);
  border-color:rgba(227,24,55,.20);
  transform:translateX(2px);
}
.tw-h-body strong{font-size:.95rem; font-weight:800; letter-spacing:-.01em}

/* ประวัติเกาะตามตอนสกรอลล์ (เฉพาะจอกว้างที่คอลัมน์ขวายังอยู่) */
@media (min-width:1025px){
  .tw-side{position:sticky; top:78px}
}

/* ═══ 5. Hero ของหน้า account/shop/premium/likes — เพิ่มมิติ ═══════
   .rb-hero-fx ถูกใส่โดย reactbits.js (จุดจาง ๆ โทน ROII)
   ต้อง clip ตามมุมโค้ง และดันเนื้อหาให้อยู่เหนือเลเยอร์ */
.account-shop-hero{position:relative; overflow:hidden}
.account-shop-hero > .rb-hero-fx{border-radius:inherit}
.account-shop-hero > *:not(.rb-hero-fx){position:relative; z-index:1}

/* ═══════════════ โหมดสว่าง ═══════════════ */
body.light .topup-method-btn{
  background:linear-gradient(180deg,#fff,#fafafb);
  border-color:rgba(15,23,42,.08);
  color:#111;
}
body.light .topup-method-btn.active{
  background:linear-gradient(180deg,rgba(227,24,55,.10),rgba(227,24,55,.03));
  border-color:rgba(227,24,55,.42);
  box-shadow:0 12px 26px rgba(227,24,55,.12);
}
body.light .tw-bank-box{
  background:linear-gradient(152deg,rgba(227,24,55,.07),#fff 48%,#fff);
  border-color:rgba(227,24,55,.14);
}
body.light .tw-bank-box::before{
  background-image:radial-gradient(circle,rgba(227,24,55,.12) 1px,transparent 1.1px);
}
body.light .tw-bank-name{background:rgba(15,23,42,.04); border-color:rgba(15,23,42,.08); color:#222}
body.light .tw-account-holder{color:#555}
body.light .tw-bank-hint{border-top-color:rgba(15,23,42,.10)}
body.light .tw-h-row:hover{background:rgba(15,23,42,.03)}

/* ═══════════════ Guards ═══════════════ */
@media (prefers-reduced-motion:reduce){
  .topup-method-btn,
  .topup-method-btn__ico,
  .topup-method-btn__check,
  .tw-h-row{transition:none !important}
  .topup-method-btn:hover,
  .topup-method-btn.active{transform:none}
  .tw-h-row:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   BRAND GRADIENT — ชื่อแบรนด์ "ZEEDTOPUP" ทุกจุดไล่สีเหมือนกันหมด
   ────────────────────────────────────────────────────────────────
   เดิม: navbar ใช้ .red สีทึบ, footer ใช้ #fff/#aaa, maintenance ใช้ #fff
         → แต่ละหน้าเห็นแบรนด์คนละสี
   ตอนนี้: ใช้ gradient ตัวเดียวกัน (--brand-grad) ทุกที่ + ไล่สีช้า ๆ
   💡 ฝั่ง admin ใช้ตัวแปรชุดเดียวกันที่ admin-redesign.css
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --brand-grad:linear-gradient(100deg,#FF7A90 0%,#E31837 38%,#FF4D6D 66%,#FFA9B9 100%);
  --brand-grad-glow:drop-shadow(0 2px 12px rgba(227,24,55,.3));
}
body.light{
  /* จอสว่าง: ตัดปลายชมพูอ่อนออก ไม่งั้นอ่านไม่ออก */
  --brand-grad:linear-gradient(100deg,#B00F26 0%,#E31837 45%,#FF4D6D 100%);
  --brand-grad-glow:drop-shadow(0 1px 6px rgba(227,24,55,.18));
}

.navbar-logo-text,
.zt-footer__brand-name,
.zt-footer__bottom-name,
.maintenance-logo-text span,
.why-title .text-red,
#globalLoadingOverlay .global-loading-logo-text{
  background:var(--brand-grad);
  background-size:220% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:var(--brand-grad-glow);
  animation:brandGradFlow 8s ease-in-out infinite;
}

/* ลูกใน navbar (ZEED / TOPUP) ต้องไม่ทาสีตัวเอง ไม่งั้นทับ gradient ของ parent */
.navbar-logo-text span,
.navbar-logo .red{
  color:inherit;
  -webkit-text-fill-color:transparent;
}

@keyframes brandGradFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

@media (prefers-reduced-motion:reduce){
  .navbar-logo-text,
  .zt-footer__brand-name,
  .zt-footer__bottom-name,
  .maintenance-logo-text span,
  .why-title .text-red,
  #globalLoadingOverlay .global-loading-logo-text{animation:none;background-position:0% 50%}
}

/* inline-flex + background-clip:text บางเบราว์เซอร์ตัดตัวอักษรเพี้ยน — ใช้ inline-block แทน
   (ลูกเป็น span inline ทั้งคู่ ผลลัพธ์หน้าตาเหมือนเดิม) */
.navbar-logo-text{display:inline-block}

/* 🛟 กันจอที่ไม่รองรับ background-clip:text — ถ้าไม่รองรับต้องไม่กลายเป็นตัวหนังสือใส */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .navbar-logo-text,
  .navbar-logo-text span,
  .navbar-logo .red,
  .zt-footer__brand-name,
  .zt-footer__bottom-name,
  .maintenance-logo-text span,
  .why-title .text-red,
  #globalLoadingOverlay .global-loading-logo-text{
    background:none;
    -webkit-text-fill-color:currentColor;
    color:var(--r,#E31837);
    filter:none;
    animation:none;
  }
}