/* =========================================================
   OTP SHOP — MODERN UI
   ตัวแปรสีหลักถูกฉีดจาก _theme.php (settings ใน DB)
========================================================= */

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  color: var(--txt);
  min-height: 100vh;
  font-family: 'Sarabun','Prompt',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--neon); font-weight: 800; text-decoration: none; transition: color .15s; }
a:hover{ color: var(--neon3); }

.text-muted{ color: var(--muted) !important; }
.small-muted{ color: var(--muted); font-size: 13px; }

::selection{
  background: rgba(var(--neon-rgb),.30);
  color: inherit;
}

/* scrollbar สวยขึ้น */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(var(--neon-rgb),.30);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(var(--neon-rgb),.55); }

/* =========================================================
   NAVBAR
========================================================= */
.glass-nav{
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(var(--neon-rgb),.18);
  box-shadow: 0 10px 26px rgba(15,18,25,.08);
}

.navbar .navbar-brand{
  color: var(--txt) !important;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 1.15rem;
}
.brand-dot{
  width:11px;height:11px;border-radius:999px;
  background: linear-gradient(135deg, var(--neon), var(--neon2));
  box-shadow: var(--glow);
  display:inline-block;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.18); opacity: .82; }
}

.navbar .nav-link{
  color: var(--txt) !important;
  opacity: .80;
  font-weight: 800;
  border-radius: 999px;
  padding: .45rem .9rem;
  transition: .18s cubic-bezier(.4,0,.2,1);
}
.navbar .nav-link:hover{
  opacity: 1;
  background: rgba(var(--neon-rgb),.10);
  color: var(--neon3) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(var(--neon-rgb),.14);
}
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link{
  opacity: 1;
  background: rgba(var(--neon-rgb),.14);
  border: 1px solid rgba(var(--neon-rgb),.24);
  color: var(--neon3) !important;
  box-shadow: var(--glow);
}

.nav-right{ gap:.5rem; }
.nav-balance{
  background: linear-gradient(135deg, rgba(var(--neon-rgb),.16), rgba(var(--neon2-rgb),.16)) !important;
  color: var(--neon3) !important;
  border: 1px solid rgba(var(--neon-rgb),.26) !important;
  font-weight: 950;
  box-shadow: var(--glow);
  padding: .42rem .75rem;
  border-radius: 999px;
}
.nav-hello{
  color: var(--txt) !important;
  opacity: .75;
  font-weight: 800;
  font-size: 14px;
}
.nav-logout{ font-weight: 900; }

.navbar .badge.text-bg-light{
  background: rgba(var(--neon-rgb),.14) !important;
  color: var(--neon3) !important;
  border: 1px solid rgba(var(--neon-rgb),.22) !important;
  font-weight: 950;
  box-shadow: var(--glow);
}

/* toggler */
.navbar-toggler{
  width: 50px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(var(--neon-rgb),.30) !important;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(var(--neon-rgb),.10);
  background: var(--glass);
  transition: .15s;
}
.navbar-toggler:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--neon-rgb),.18); }
.navbar-toggler:focus{ box-shadow: var(--ring) !important; }

.navbar-toggler-icon{
  width: 24px;
  height: 16px;
  display: block;
  background-image:
    linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon),var(--neon));
  background-size: 24px 2px;
  background-position: center 0px, center 7px, center 14px;
  background-repeat: no-repeat;
}

/* dropdown */
.dropdown-menu{
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  margin-top: 6px !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.dropdown-item{
  border-radius: calc(var(--radius) - 6px);
  padding: 8px 12px;
  font-weight: 700;
  color: var(--txt);
  transition: .12s;
}
.dropdown-item:hover, .dropdown-item.active{
  background: rgba(var(--neon-rgb),.10);
  color: var(--neon3);
}
.dropdown-divider{ border-top-color: var(--stroke); }

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

.glass-card,
.card-dark{
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.card-dark{ padding: 18px; }

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  border-radius: var(--radius-sm);
  font-weight: 850;
  transition: .18s cubic-bezier(.4,0,.2,1);
}
.btn-soft{
  background: linear-gradient(135deg, rgba(var(--neon-rgb),.14), rgba(var(--neon2-rgb),.14));
  border: 1px solid rgba(var(--neon-rgb),.30);
  color: var(--neon3);
  font-weight: 950;
  box-shadow: var(--glow);
}
.btn-soft:hover{
  background: linear-gradient(135deg, rgba(var(--neon-rgb),.22), rgba(var(--neon2-rgb),.22));
  color: var(--neon3);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(var(--neon-rgb),.22), var(--glow);
}

.btn-primary, .btn-soft-strong{
  background: linear-gradient(135deg, var(--neon), var(--neon3));
  border: 0;
  color: #fff !important;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(var(--neon-rgb),.28);
}
.btn-primary:hover, .btn-soft-strong:hover{
  background: linear-gradient(135deg, var(--neon3), var(--neon));
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(var(--neon-rgb),.34);
  color: #fff !important;
}

.btn-outline-light{
  border: 1px solid var(--stroke) !important;
  color: var(--txt) !important;
  font-weight: 900;
  background: transparent !important;
}
.btn-outline-light:hover{
  background: rgba(var(--neon-rgb),.06) !important;
  border-color: rgba(var(--neon-rgb),.30) !important;
  transform: translateY(-1px);
}

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

/* =========================================================
   INPUTS
========================================================= */
.form-control, .form-select,
input, select, textarea{
  background: var(--input-bg) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--txt) !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: .15s;
}
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus{
  border-color: rgba(var(--neon-rgb),.55) !important;
  box-shadow: var(--ring) !important;
  outline: none;
}
input::placeholder, textarea::placeholder{
  color: var(--muted) !important;
  opacity: .6;
}
.form-label{
  font-weight: 800;
  font-size: 13px;
  color: var(--txt);
  opacity: .85;
  margin-bottom: 6px;
}

/* =========================================================
   FLAG
========================================================= */
.flag-emoji{
  display:inline-flex;
  width: 34px;
  height: 34px;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(var(--neon-rgb),.06);
  border: 1px solid var(--stroke);
  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 12px;
  border-radius: 999px;
  background: rgba(var(--neon-rgb),.08);
  border: 1px solid rgba(var(--neon-rgb),.18);
  font-weight: 950;
  line-height: 1;
  color: var(--txt);
}
.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 var(--stroke);
  color: var(--txt) !important;
  background: rgba(var(--neon-rgb),.04);
  font-size: 12px;
}
.badge-x.success{ background: rgba(34,197,94,.14) !important; border-color: rgba(34,197,94,.24) !important; color:#15803d !important; }
.badge-x.info{ background: rgba(59,130,246,.14) !important; border-color: rgba(59,130,246,.24) !important; color:#1d4ed8 !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(var(--neon-rgb),.14) !important;
  border-color: rgba(var(--neon-rgb),.26) !important;
  color: var(--neon3) !important;
  box-shadow: var(--glow);
}
.badge-x.warning{ background: rgba(245,158,11,.16) !important; border-color: rgba(245,158,11,.26) !important; color:#b45309 !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; opacity: .7; }

/* =========================================================
   OTP CARD
========================================================= */
.otp-card{
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: .25s cubic-bezier(.4,0,.2,1);
}
.otp-card:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--neon-rgb),.28);
  box-shadow: 0 22px 40px rgba(15,18,25,.14), var(--glow);
}
.otp-card::before{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width:260px; height:260px;
  background: radial-gradient(circle, rgba(var(--neon-rgb),.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 var(--stroke);
}
.otp-order{ font-weight:950; letter-spacing:.3px; color: var(--txt); opacity: .86; }
.otp-order span{ opacity: 1; }

.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: var(--muted); margin-bottom:6px; }
.otp-value{ color: var(--txt); 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; }

.otp-icon{
  width:74px; height:74px;
  border-radius:18px;
  background: rgba(var(--neon-rgb),.08);
  border:1px solid rgba(var(--neon-rgb),.18);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow: 0 10px 18px rgba(var(--neon-rgb),.10);
  flex: 0 0 auto;
}
.otp-icon img{ width:58px; height:58px; object-fit:contain; }

.otp-title{ font-weight:950; font-size:18px; color: var(--txt); line-height:1.15; }
.otp-code{ color: var(--muted); font-size:13px; font-weight:800; }

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

.otp-price-label{ color: var(--muted); font-size:12px; font-weight:900; }
.otp-price{
  font-size:24px;
  font-weight:950;
  color: var(--neon3);
  text-shadow: 0 0 18px rgba(var(--neon-rgb),.20);
  background: linear-gradient(135deg, var(--neon3), var(--neon));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.otp-price small{ font-size:12px; color: var(--muted); font-weight:900; -webkit-text-fill-color: initial; }

.otp-country{
  background: var(--input-bg) !important;
  color: var(--txt) !important;
  border:1px solid var(--stroke) !important;
}
.otp-country:focus{ box-shadow: var(--ring) !important; }
.otp-country option{ color:#111827; }

.otp-buy{
  border-radius: var(--radius-sm);
  font-weight:950;
}

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

.topup-summary{
  background: var(--card-bg);
  color: var(--txt);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--neon-rgb),.22);
  box-shadow: var(--shadow), var(--glow);
  padding: 18px;
  margin-bottom: 16px;
}
.topup-summary__title{ font-size: 20px; font-weight: 950; margin-bottom: 4px; }
.topup-summary__sub{ font-size: 13px; color: var(--muted); 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: var(--neon3); font-size: 18px; }

.topup-hero{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  margin-bottom: 14px;
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  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(var(--neon-rgb),.24), transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(var(--neon2-rgb),.18), transparent 62%);
  opacity: .95;
  transform: rotate(10deg);
  pointer-events:none;
}
.topup-hero > *{ position:relative; z-index:1; }
.topup-title{ font-weight: 950; margin: 0; color: var(--txt); }
.topup-sub{ color: var(--muted); font-size: 13px; font-weight:800; }

.card-option{
  display:flex; align-items:center; gap:14px;
  background: var(--card-bg);
  color: var(--txt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  padding: 16px;
  cursor:pointer;
  user-select:none;
  transition: .2s cubic-bezier(.4,0,.2,1);
}
.card-option:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--neon-rgb),.28);
  box-shadow: 0 22px 40px rgba(15,18,25,.14), var(--glow);
}
.card-option__img{
  width: 68px; height: 68px;
  border-radius: 16px;
  background: rgba(var(--neon-rgb),.04);
  border: 1px solid var(--stroke);
  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: var(--muted); font-weight:800; }
.card-option__arrow{
  margin-left:auto;
  font-size: 28px;
  line-height: 1;
  color: var(--neon);
  font-weight: 950;
  transition: .2s;
}
.card-option:hover .card-option__arrow{ transform: translateX(4px); }

.topup-formwrap{ margin-top: 10px; }
.btn-back{
  background: rgba(var(--neon-rgb),.10);
  border: 1px solid rgba(var(--neon-rgb),.22);
  color: var(--txt);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 950;
  box-shadow: var(--glow);
  margin-bottom: 12px;
}
.btn-back:hover{
  background: rgba(var(--neon-rgb),.18);
  transform: translateX(-3px);
}

.card-surface{
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card-surface__head{ margin-bottom: 12px; }
.card-surface__title{ font-weight: 950; font-size: 18px; color: var(--txt); }
.card-surface__sub{ color: var(--muted); font-size: 13px; font-weight:800; }

.bank-box{
  display:flex; gap:12px; align-items:center;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(var(--neon-rgb),.04);
  margin-bottom: 14px;
}
.bank-logo{
  width:64px; height:64px;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  box-shadow: 0 0 18px rgba(var(--neon-rgb),.10);
}
.bank-logo img{ width:46px;height:46px; object-fit:contain; }
.bank-info{ color: var(--txt); 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 var(--stroke);
  background: rgba(var(--neon-rgb),.04);
  box-shadow: 0 0 18px rgba(var(--neon-rgb),.08);
}
.alert-soft{
  background: rgba(var(--neon-rgb),.10);
  border: 1px solid rgba(var(--neon-rgb),.22);
  color: var(--txt);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 13px;
  font-weight:800;
}

/* =========================================================
   ANIMATIONS
========================================================= */
.fadein{ animation: fadein .25s cubic-bezier(.4,0,.2,1); }
@keyframes fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.slide-up{ animation: slideUp .35s cubic-bezier(.4,0,.2,1); }
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

.scale-in{ animation: scaleIn .25s cubic-bezier(.4,0,.2,1); }
@keyframes scaleIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }

/* page transition (เดิม) */
body{opacity:0;transform:translateY(6px);transition:.35s cubic-bezier(.4,0,.2,1);}
body.page-ready{opacity:1;transform:none}

/* =========================================================
   TABLES
========================================================= */
.table{
  color: var(--txt);
}
.table > thead > tr > th{
  font-weight: 900;
  border-bottom: 2px solid var(--stroke);
  color: var(--txt);
  background: transparent;
}
.table > tbody > tr > td{
  border-bottom: 1px solid var(--stroke);
  vertical-align: middle;
}
.table > :not(caption) > * > *{
  background: transparent !important;
  color: var(--txt);
}

/* =========================================================
   MODAL / SWAL fix
========================================================= */
.modal-content{
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  color: var(--txt);
}
.modal-header, .modal-footer{ border-color: var(--stroke); }

.swal2-popup{
  border-radius: var(--radius-lg) !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@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; }
  .otp-card{ padding: 14px; }
}

/* utility */
.text-gradient{
  background: linear-gradient(135deg, var(--neon), var(--neon3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}