/* ===== iNUKUBz SMS — Nova Blue/Purple Glass Theme ===== */
:root{
  --bg:#0b102a;
  --bg2:#0f1640;
  --glass:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.18);
  --primary:#7c4dff;
  --primary-2:#4f46e5;
  --accent:#22d3ee;
  --green:#34d399;
  --text:#eaf0ff;
  --muted:#b8c0e6;
  --ring1:#6d28d9;
  --ring2:#22d3ee;
  --radius:18px;
}

/* page bg gradient */
body{
  background:
    radial-gradient(1200px 800px at -10% -20%, #15205a 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, #1a1f63 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color:var(--text);
  font-family:"Kanit",system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans Thai","Noto Sans",sans-serif;
  padding-top:80px; /* ถ้า navbar fixed */
}

/* navbar style (ถ้า header.php ใส่ .navbar) */
.navbar{ background:rgba(10,14,36,.35) !important; backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06); transition:.25s; }
.navbar.scrolled{ background:rgba(10,14,36,.6) !important; box-shadow:0 6px 20px rgba(0,0,0,.35); }

/* ===== HERO ===== */
.hero-nova{
  position:relative;
  border-radius:var(--radius);
  padding-top:20px;
  padding-bottom:0;
}
.hero-nova::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(124,77,255,.30), transparent 60%),
    radial-gradient(800px 500px at 85% 30%, rgba(34,211,238,.28), transparent 65%);
  filter:blur(24px);
  z-index:-1;
}

/* pill badges */
.pillbar .pill{
  display:inline-flex; align-items:center;
  padding:.45rem .9rem; margin-right:.4rem;
  border-radius:999px;
  color:#e7e8ff; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.pillbar .pill-green{ background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.28); color:#d7fff1; }

/* gradient text */
.txt-grad{
  background:linear-gradient(90deg,#c4b5fd 0%,#22d3ee 50%,#a78bfa 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-neo-muted{ color:var(--muted); }

/* Glass card + neon ring */
.card.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.ring{
  position:relative;
}
.ring::before{
  content:""; position:absolute; inset:-1px;
  border-radius:calc(var(--radius) + 6px);
  padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(125,78,255,.7), rgba(34,211,238,.7));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  box-shadow:0 0 60px rgba(124,77,255,.25);
}

/* facts */
.fact-box{
  display:flex; gap:.8rem; align-items:center;
  padding:.75rem .8rem; border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.icon-circle{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #9a7cff, #5bd8ff);
  box-shadow:0 0 18px rgba(124,77,255,.55);
}

/* buttons */
.btn-neo{
  border:none;
  color:#fff;
  background:linear-gradient(90deg,#7c4dff,#22d3ee);
  box-shadow:0 10px 26px rgba(124,77,255,.4);
  border-radius:14px; font-weight:700;
}
.btn-neo:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-neo-lg{ padding:.9rem 1.3rem; font-size:1.05rem; }

.btn-ghost-white{
  color:#eaf0ff; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  border-radius:14px; font-weight:700;
}
.btn-ghost-white:hover{ background:rgba(255,255,255,.08); }

/* small embellishments */
.badge-dot{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #8b5cf6, #22d3ee);
  box-shadow:0 0 18px rgba(34,211,238,.6);
}
.hover-float{ transition:transform .18s ease, box-shadow .18s ease; }
.hover-float:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.35); }

/* headings weight */
.fw-800{ font-weight:800; }

/* responsive tweak */
@media (max-width: 576px){
  .pillbar .pill{ padding:.4rem .75rem; }
  .btn-neo-lg, .btn-ghost-white.btn-neo-lg{ width:100%; justify-content:center; }
}
/* ========== iNUSHOPz — Glass Neo Theme (drop-in) ========== */
:root{
  /* พาเล็ตหลัก */
  --bg: #0b1020;
  --bg2:#0e1433;
  --surface:#121833;
  --glass: rgba(255,255,255,.06);
  --glass-bd: rgba(255,255,255,.14);
  --text:#ecf2ff;
  --muted:#9fb0d6;
  --primary:#7c4dff;
  --accent:#22d3ee;
  --success:#10b981; --warning:#f59e0b; --danger:#ef4444;
  --radius:16px;
  --ring: rgba(124,77,255,.35);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

html,body{height:100%}
body{
  background:
    radial-gradient(1000px 500px at 10% -10%, #14207a 0%, transparent 40%),
    radial-gradient(1200px 600px at 100% 0%, #0a153d 0%, transparent 50%),
    linear-gradient(180deg, #0a0f22 0%, #090d1a 100%);
  color:var(--text);
  font-family:'Kanit',system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans Thai',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ===== Navbar ===== */
.navbar.inu{
  background: rgba(12,20,61,.72)!important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease;
}
.navbar.inu.scrolled{ background: rgba(12,20,61,.9)!important; box-shadow:0 10px 30px rgba(10,12,28,.35); }
.navbar.inu .navbar-brand{ color:#fff!important; font-weight:800; letter-spacing:.2px }
.navbar.inu .navbar-brand i{ color:#b18bff }
.navbar.inu .nav-link{ color:#fff!important; font-weight:500; padding:.55rem .9rem; }
.navbar.inu .nav-link:hover,.navbar.inu .nav-link.active{ color:#a78bfa!important; text-shadow:0 0 6px rgba(167,139,250,.6); }
.navbar.inu .navbar-toggler{ border:none!important; box-shadow:none!important }
.navbar.inu .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 3px rgba(255,255,255,.6));
}
@media (max-width: 991.98px){
  .navbar.inu .navbar-collapse{
    background: rgba(12,20,61,.94);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px; padding:.75rem 1rem; margin-top:.6rem;
    backdrop-filter: blur(14px);
    box-shadow:0 8px 32px rgba(10,12,28,.6);
    animation: navDrop .18s ease-out;
  }
}
@keyframes navDrop{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* ===== Cards / Surfaces ===== */
.card, .card-surface, .panel{
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.card-hover{
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover{
  transform: translateY(-6px);
  border-color: rgba(56,189,248,.28);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.section-title{ font-weight:800; letter-spacing:.2px; }

/* ===== Buttons ===== */
.btn-neo{
  background: linear-gradient(90deg,#6f7dff,#8b5cff 55%,#22d3ee);
  border:none; color:#fff; font-weight:700; border-radius:12px;
  box-shadow:0 8px 24px rgba(139,92,255,.35);
  min-height:44px;
}
.btn-ghost{
  background: transparent; color:#cfe3ff; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; min-height:44px;
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); color:#fff; border-color: rgba(255,255,255,.28) }

/* ===== Forms ===== */
.form-control,.form-select,.form-check-input{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#fff; border-radius:12px;
}
.form-control:focus,.form-select:focus{
  box-shadow:0 0 0 .22rem var(--ring); border-color:rgba(124,77,255,.55);
  background:rgba(255,255,255,.08); color:#fff;
}

/* ===== Tables ===== */
.table-glass{
  width:100%;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid var(--glass-bd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.table-glass thead th{
  background:rgba(255,255,255,.06);
  color:#cbd5e1; font-weight:600;
}
.table-glass tbody td{
  background:rgba(255,255,255,.02);
  color:#f1f5f9;
}
.table-glass tbody tr:hover td{ background:rgba(255,255,255,.07); }

/* ===== Badges ===== */
.badge-soft{ background:rgba(255,255,255,.08); border:1px solid var(--glass-bd); color:#fff; }
.badge-soft.success{ background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.35); }
.badge-soft.warning{ background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.35); }
.badge-soft.danger{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.35); }
.badge-soft.info{ background:rgba(56,189,248,.18); border-color:rgba(56,189,248,.35); }

/* ===== Utilities ===== */
.text-muted-2{ color:var(--muted)!important }
.hr-soft{ border-color: rgba(255,255,255,.12); opacity:.5 }
.shadow-neo{ box-shadow: 0 24px 64px rgba(0,0,0,.55); }
.round-12{ border-radius:12px }
.round-16{ border-radius:16px }