:root{
  /* ===== LIGHT RED/WHITE NEON THEME ===== */
  --bg1:#ffffff;
  --bg2:#f6f7fb;

  --neon:#ff2b3a;
  --neon2:#ff6b7a;

  --glass:rgba(255,255,255,.86);
  --stroke:rgba(0,0,0,.08);

  --txt:rgba(15,18,25,.92);
  --muted:rgba(15,18,25,.60);

  --glow: 0 0 14px rgba(255,43,58,.22), 0 0 40px rgba(255,43,58,.12);
  --shadow: 0 14px 30px rgba(15,18,25,.10);

  --shadow2: 0 10px 24px rgba(15,18,25,.08);
  --ring: 0 0 0 .2rem rgba(255,43,58,.16);

  --ok:#22c55e;
  --info:#3b82f6;
  --warn:#f59e0b;
}

/* =========================================================
   BASE
========================================================= */
*{ box-sizing:border-box; }
body{
  background:
    radial-gradient(1100px 520px at 18% 12%, rgba(255,43,58,.10), transparent 60%),
    radial-gradient(900px 460px at 82% 28%, rgba(255,107,122,.08), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--txt);
  min-height: 100vh;
}

a{ color: var(--neon); font-weight: 800; }
a:hover{ color: #c90012; }

.text-muted{ color: var(--muted) !important; }
.small-muted{ color: rgba(10,12,18,.55); font-size: 13px; }

/* =========================================================
   NAVBAR (RED/WHITE NEON)
========================================================= */
.glass-nav{
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,43,58,.18);
  box-shadow: 0 10px 26px rgba(15,18,25,.08);
}

.navbar .navbar-brand{
  color: rgba(15,18,25,.92) !important;
  font-weight: 950;
  letter-spacing: .2px;
}
.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--neon);
  box-shadow: var(--glow);
  display:inline-block;
}

.navbar .nav-link{
  color: rgba(15,18,25,.74) !important;
  font-weight: 900;
  border-radius: 999px;
  padding: .45rem .85rem;
  transition: .15s ease;
}
.navbar .nav-link:hover{
  background: rgba(255,43,58,.10);
  color: #b00014 !important;
  box-shadow: 0 10px 18px rgba(255,43,58,.10);
}
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link{
  background: rgba(255,43,58,.14);
  border: 1px solid rgba(255,43,58,.22);
  color: #b00014 !important;
  box-shadow: var(--glow);
}

/* เวอร์ชัน navbar ของคุณที่ใช้ class nav-right/nav-balance/nav-hello/nav-logout */
.nav-right{ gap:.5rem; }
.nav-balance{
  background: rgba(255,43,58,.14) !important;
  color: #b00014 !important;
  border: 1px solid rgba(255,43,58,.22) !important;
  font-weight: 950;
  box-shadow: var(--glow);
}
.nav-hello{
  color: rgba(15,18,25,.70) !important;
  font-weight: 800;
}
.nav-logout{ font-weight: 900; }

/* ถ้าใช้ badge text-bg-light แบบเดิมก็รองรับ */
.navbar .badge.text-bg-light{
  background: rgba(255,43,58,.14) !important;
  color: #b00014 !important;
  border: 1px solid rgba(255,43,58,.22) !important;
  font-weight: 950;
  box-shadow: var(--glow);
}

/* toggler */
.navbar-toggler{
  border: 1px solid rgba(255,43,58,.30) !important;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(255,43,58,.10);
}
.navbar-toggler:focus{ box-shadow: var(--ring) !important; }

/* แก้ icon toggler ให้เห็นในธีมสว่าง */
.navbar-toggler-icon{
  background-image:
    linear-gradient(#ff2b3a,#ff2b3a),
    linear-gradient(#ff2b3a,#ff2b3a),
    linear-gradient(#ff2b3a,#ff2b3a);
  background-size: 24px 2px;
  background-position: center 7px, center, center 17px;
  background-repeat: no-repeat;
}

/* =========================================================
   HERO / CARD
========================================================= */
.hero{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 18px 0;
}

.glass-card,
.card-dark{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

/* =========================================================
   BUTTONS
========================================================= */
.btn-soft{
  background: rgba(255,43,58,.12);
  border: 1px solid rgba(255,43,58,.28);
  color: rgba(10,12,18,.92);
  font-weight: 950;
  box-shadow: var(--glow);
}
.btn-soft:hover{
  background: rgba(255,43,58,.18);
  filter: brightness(1.02);
}

.btn-outline-light{
  border-color: rgba(0,0,0,.12) !important;
  color: rgba(10,12,18,.88) !important;
  font-weight: 900;
}
.btn-outline-light:hover{
  background: rgba(0,0,0,.04) !important;
}

.btn:focus{ box-shadow: var(--ring) !important; }

/* =========================================================
   INPUTS
========================================================= */
input, select, textarea{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: rgba(10,12,18,.92) !important;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,43,58,.55) !important;
  box-shadow: var(--ring) !important;
}
input::placeholder{ color: rgba(10,12,18,.45) !important; }

/* =========================================================
   FLAG
========================================================= */
.flag-emoji{
  display:inline-flex;
  width: 34px;
  height: 34px;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 18px;
}

/* =========================================================
   OTP TABLE (Card Mode)
========================================================= */
.table-otp{ width:100%; border-collapse:separate; border-spacing:0 12px; }
.table-otp thead{ display:none; }
.table-otp tbody tr{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.table-otp tbody td{ padding:0 !important; border:0 !important; background:transparent !important; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,43,58,.08);
  border: 1px solid rgba(255,43,58,.18);
  font-weight: 950;
  line-height: 1;
  color: rgba(10,12,18,.90);
}
.chip .flag-emoji{ width:28px;height:28px;font-size:16px;border-radius:10px; }

.btn-copy{ border-radius: 12px !important; padding: .28rem .55rem !important; }

/* ===== BADGE ===== */
.badge-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .75rem;
  border-radius:999px;
  font-weight:950;
  letter-spacing:.2px;
  border:1px solid rgba(0,0,0,.08);
  color: rgba(10,12,18,.90) !important;
  background: rgba(0,0,0,.03);
}
.badge-x.success{ background: rgba(34,197,94,.14) !important; border-color: rgba(34,197,94,.20) !important; }
.badge-x.info{ background: rgba(59,130,246,.14) !important; border-color: rgba(59,130,246,.20) !important; }
.badge-x.timeout, .badge-x.timeoutx{ background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.10) !important; }
.badge-x.danger{
  background: rgba(255,43,58,.14) !important;
  border-color: rgba(255,43,58,.25) !important;
  box-shadow: var(--glow);
}
.badge-x.warning{ background: rgba(245,158,11,.16) !important; border-color: rgba(245,158,11,.22) !important; }
.badge-x.cancel, .badge-x.cancelx{ background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.10) !important; }
.badge-x.light{ background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.08) !important; color: rgba(10,12,18,.70) !important; }

/* =========================================================
   OTP CARD UX + OTP SHOP CARD PARTS
========================================================= */
.otp-card{
  width: 100%;
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.otp-card::before{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width:260px; height:260px;
  background: radial-gradient(circle, rgba(255,43,58,.22), transparent 62%);
  transform: rotate(18deg);
  pointer-events:none;
}
.otp-card > *{ position:relative; z-index:1; }

.otp-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.otp-order{ font-weight:950; letter-spacing:.3px; color: rgba(10,12,18,.86); }
.otp-order span{ color: rgba(10,12,18,.96); }

.otp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:12px; }
.otp-item-full{ grid-column:1 / -1; }
.otp-label{ font-size:12px; font-weight:950; color: rgba(10,12,18,.55); margin-bottom:6px; }
.otp-value{ color: rgba(10,12,18,.92); font-weight:800; }
.otp-phone{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.otp-link{ color: var(--neon); font-weight:950; text-decoration:underline; word-break:break-all; }

/* shop card parts */
.otp-icon{
  width:74px; height:74px;
  border-radius:18px;
  background: rgba(255,43,58,.08);
  border:1px solid rgba(255,43,58,.18);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow: 0 10px 18px rgba(255,43,58,.08);
}
.otp-icon img{ width:58px; height:58px; object-fit:contain; }

.otp-title{ font-weight:950; font-size:18px; color: rgba(10,12,18,.92); line-height:1.1; }
.otp-code{ color: rgba(10,12,18,.55); font-size:13px; font-weight:800; }

.otp-badge{
  position:absolute; top:12px; right:12px;
  background: rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.22);
  color: #15803d;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.otp-price-label{ color: rgba(10,12,18,.55); font-size:12px; font-weight:900; }
.otp-price{
  font-size:22px;
  font-weight:950;
  color: #b00014;
  text-shadow: 0 0 18px rgba(255,43,58,.18);
}
.otp-price small{ font-size:12px; color: rgba(10,12,18,.55); font-weight:900; }

.otp-country{
  background: rgba(255,255,255,.96) !important;
  color: rgba(10,12,18,.92) !important;
  border:1px solid rgba(0,0,0,.12) !important;
}
.otp-country:focus{ box-shadow: var(--ring) !important; }
.otp-country option{ color:#111827; }

.otp-buy{ border-radius:14px; font-weight:950; }

/* =========================================================
   TOPUP UI (LIGHT)
========================================================= */
.topup-wrap{ position:relative; padding: 18px 0 40px; }
#select-section, #form-section{ position: relative; z-index: 3; }

.topup-summary{
  background: rgba(255,255,255,.96);
  color: rgba(10,12,18,.86);
  border-radius: 18px;
  border: 1px solid rgba(255,43,58,.22);
  box-shadow: var(--shadow), var(--glow);
  padding: 16px;
  margin-bottom: 16px;
}
.topup-summary__title{ font-size: 20px; font-weight: 950; margin-bottom: 4px; }
.topup-summary__sub{ font-size: 13px; color: rgba(10,12,18,.55); margin-bottom: 10px; }
.topup-summary__meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; font-size: 13px; font-weight:800;
}
.topup-summary__balance b{ color: #b00014; }

.topup-hero{
  position:relative; overflow:hidden;
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
.topup-hero::before{
  content:"";
  position:absolute;
  inset:-110px -140px auto auto;
  width: 380px;
  height: 380px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,43,58,.25), transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(255,107,122,.18), transparent 62%);
  opacity: .9;
  transform: rotate(10deg);
  pointer-events:none;
}
.topup-hero > *{ position:relative; z-index:1; }
.topup-title{ font-weight: 950; margin: 0; color: rgba(10,12,18,.90); }
.topup-sub{ color: rgba(10,12,18,.55); font-size: 13px; font-weight:800; }

.card-option{
  display:flex; align-items:center; gap:14px;
  background: rgba(255,255,255,.96);
  color: rgba(10,12,18,.90);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  padding: 14px;
  cursor:pointer;
  user-select:none;
  transition: .15s ease;
}
.card-option:hover{
  transform: translateY(-2px);
  border-color: rgba(255,43,58,.26);
  box-shadow: 0 18px 36px rgba(15,18,25,.12), var(--glow);
}
.card-option__img{
  width: 68px; height: 68px;
  border-radius: 16px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.card-option__img img{ width: 56px; height: 56px; object-fit: contain; }
.card-option__body h5{ margin:0; font-weight: 950; }
.card-option__body .small-muted{ color: rgba(10,12,18,.55); font-weight:800; }
.card-option__arrow{
  margin-left:auto;
  font-size: 28px;
  line-height: 1;
  color: rgba(255,43,58,.65);
  font-weight: 950;
}

.topup-formwrap{ margin-top: 10px; }
.btn-back{
  background: rgba(255,43,58,.10);
  border: 1px solid rgba(255,43,58,.22);
  color: rgba(10,12,18,.92);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 950;
  box-shadow: var(--glow);
  margin-bottom: 12px;
}

.card-surface{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.card-surface__head{ margin-bottom: 12px; }
.card-surface__title{ font-weight: 950; font-size: 18px; color: rgba(10,12,18,.90); }
.card-surface__sub{ color: rgba(10,12,18,.55); font-size: 13px; font-weight:800; }

.bank-box{
  display:flex; gap:12px; align-items:center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  margin-bottom: 14px;
}
.bank-logo{
  width:64px; height:64px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  box-shadow: 0 0 18px rgba(255,43,58,.10);
}
.bank-logo img{ width:46px;height:46px; object-fit:contain; }
.bank-info{ color: rgba(10,12,18,.88); font-weight:800; }
.bank-number{ margin-top: 4px; }

.slip-preview{
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 14px;
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  box-shadow: 0 0 18px rgba(255,43,58,.08);
}
.alert-soft{
  background: rgba(255,43,58,.10);
  border: 1px solid rgba(255,43,58,.18);
  color: rgba(10,12,18,.86);
  border-radius: 14px;
  padding: 12px;
  font-size: 13px;
  font-weight:800;
}

.fadein{ animation: fadein .18s ease; }
@keyframes fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

@media (max-width: 576px){
  .card-option{ padding: 14px; }
  .card-option__img{ width:62px;height:62px; }
  .card-option__img img{ width:52px;height:52px; }
  .otp-grid{ grid-template-columns:1fr; }
}