/* =========================================================
   SMART TICKET — Purple Entertainment Theme
   ========================================================= */
:root{
  --purple-50:#f5f3ff;
  --purple-100:#ede9fe;
  --purple-200:#ddd6fe;
  --purple-400:#a78bfa;
  --purple-500:#8b5cf6;
  --purple-600:#7c3aed;
  --purple-700:#6d28d9;
  --purple-900:#3b0764;
  --pink-500:#d946ef;
  --grad-main: linear-gradient(135deg, var(--purple-600) 0%, var(--pink-500) 100%);
  --grad-dark: linear-gradient(160deg, #1e1033 0%, #3b0764 60%, #6d28d9 100%);
  --bg: #faf9ff;
  --text: #1f1330;
  --text-muted: #6b6478;
  --border: #e9e3fb;
  --radius: 16px;
  --shadow-sm: 0 2px 8px rgba(109,40,217,.08);
  --shadow-md: 0 8px 24px rgba(109,40,217,.14);
  --shadow-lg: 0 16px 40px rgba(109,40,217,.20);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
body{
  margin:0; font-family:'Noto Sans Thai','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); padding-bottom:72px;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit}

.container{max-width:1200px; margin:0 auto; padding:0 20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; border:none; cursor:pointer;
  font-weight:700; font-size:15px; transition:transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad-main); color:#fff; box-shadow:var(--shadow-md)}
.btn-primary:hover{box-shadow:var(--shadow-lg)}
.btn-outline{background:#fff; color:var(--purple-600); border:2px solid var(--purple-200)}
.btn-outline:hover{border-color:var(--purple-500)}
.btn-ghost{background:transparent; color:var(--purple-700)}
.btn-block{width:100%}
.btn-sm{padding:8px 16px; font-size:13px}
.btn-danger{background:#ef4444; color:#fff}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- Top navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.navbar-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1200px; margin:0 auto}
.brand{font-weight:800; font-size:20px; background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-links{display:none; gap:28px; font-weight:600; color:var(--text-muted)}
.nav-links a:hover{color:var(--purple-600)}
.nav-actions{display:flex; align-items:center; gap:10px}
@media(min-width:900px){ .nav-links{display:flex} }

/* ---------- Language switcher ---------- */
.lang-switch{display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--text-muted)}
.lang-switch a{padding:4px 6px; border-radius:6px; color:var(--text-muted)}
.lang-switch a.active{color:var(--purple-600); background:var(--purple-50)}
.lang-switch span{opacity:.4}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--grad-dark); color:#fff; overflow:hidden; border-radius:0 0 28px 28px}
.hero-slide{display:flex; flex-direction:column; justify-content:flex-end; min-height:380px; padding:32px 20px; position:relative}
.hero-slide::before{content:"";position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(10,5,20,.85), rgba(10,5,20,.15)); }
.hero-slide img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero-content{position:relative; z-index:2; max-width:640px}
.hero-tag{display:inline-block; background:rgba(255,255,255,.15); padding:4px 12px; border-radius:999px; font-size:12px; margin-bottom:10px}
.hero-title{font-size:28px; font-weight:800; margin:0 0 8px}
.hero-meta{opacity:.85; font-size:14px; margin-bottom:18px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.hero-dots{display:flex; gap:6px; justify-content:center; padding:12px 0}
.hero-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35)}
.hero-dots span.active{background:#fff}

/* ---------- Category pills ---------- */
.categories{display:flex; gap:10px; overflow-x:auto; padding:18px 20px; scrollbar-width:none}
.categories::-webkit-scrollbar{display:none}
.cat-pill{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 18px; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-sm); font-size:12px; font-weight:700; color:var(--text-muted); min-width:84px}
.cat-pill .icon{font-size:22px}
.cat-pill.active, .cat-pill:hover{background:var(--grad-main); color:#fff; border-color:transparent}

/* ---------- Section header ---------- */
.section-head{display:flex; align-items:center; justify-content:space-between; padding:20px 20px 6px}
.section-head h2{font-size:19px; margin:0}
.section-head a{font-size:13px; font-weight:700; color:var(--purple-600)}

/* ---------- Event grid / cards ---------- */
.event-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:12px 20px}
@media(min-width:640px){ .event-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .event-grid{grid-template-columns:repeat(4,1fr)} }

.event-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:box-shadow .2s, transform .2s; position:relative}
.event-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}
.event-card .thumb{position:relative; aspect-ratio:3/4; background:var(--purple-100)}
.event-card .thumb img{width:100%; height:100%; object-fit:cover}
.event-card .badge{position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; color:#fff}
.badge-green{background:#16a34a} .badge-orange{background:#f97316} .badge-blue{background:#3b82f6}
.badge-red{background:#dc2626} .badge-gray{background:#6b7280}
.event-card .body{padding:10px 12px 14px}
.event-card .cat{font-size:11px; color:var(--purple-600); font-weight:700; text-transform:uppercase}
.event-card h3{font-size:14px; margin:4px 0 6px; line-height:1.35; min-height:38px}
.event-card .meta{font-size:12px; color:var(--text-muted); display:flex; gap:4px; align-items:center; margin-bottom:2px}
.event-card .price{font-weight:800; color:var(--purple-700); font-size:14px; margin-top:6px}
.event-card.sold-out .thumb img{filter:grayscale(1) brightness(.7)}
.event-card.sold-out{pointer-events:none}
.event-card.sold-out .body{opacity:.6}

/* ---------- Cards / panels ---------- */
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px}
.glass{background:rgba(255,255,255,.65); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.4)}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px}
.form-group label{display:block; font-weight:700; font-size:13px; margin-bottom:6px; color:var(--text)}
.form-control{width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border); font-size:15px; background:#fff}
.form-control:focus{outline:none; border-color:var(--purple-500); box-shadow:0 0 0 3px var(--purple-100)}
.form-help{font-size:12px; color:var(--text-muted); margin-top:4px}
.form-error{font-size:12px; color:#dc2626; margin-top:4px}
.auth-wrap{max-width:420px; margin:40px auto; padding:0 20px}
.auth-card{padding:28px}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px; border-radius:12px; font-size:14px; margin-bottom:16px}
.alert-success{background:#dcfce7; color:#166534}
.alert-error{background:#fee2e2; color:#991b1b}
.alert-info{background:var(--purple-50); color:var(--purple-700)}

/* ---------- Seat map ---------- */
.seatmap-wrap{position:relative; overflow:hidden; background:#0f0a1e; border-radius:var(--radius); touch-action:none}
.seatmap-canvas{position:relative; transform-origin:0 0; cursor:grab}
.seatmap-canvas img{width:100%; display:block; pointer-events:none; user-select:none}
.seat-dot{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:6px; cursor:pointer; border:2px solid rgba(255,255,255,.6); transition:transform .1s}
.seat-dot:hover{transform:scale(1.2)}
.seat-dot.available{background:#22c55e}
.seat-dot.selected{background:var(--purple-500); box-shadow:0 0 0 3px rgba(139,92,246,.5)}
.seat-dot.sold{background:#ef4444; cursor:not-allowed; opacity:.7}
.seat-dot.blocked{background:#9ca3af; cursor:not-allowed; opacity:.5}
.seat-dot.held_by_other{background:#f59e0b; cursor:not-allowed; opacity:.8}
.seatmap-legend{display:flex; gap:16px; flex-wrap:wrap; padding:12px 4px; font-size:12px; color:var(--text-muted)}
.seatmap-legend span{display:inline-flex; align-items:center; gap:6px}
.legend-dot{width:12px; height:12px; border-radius:3px; display:inline-block}
.seatmap-controls{display:flex; gap:8px; position:absolute; right:12px; bottom:12px; z-index:5}
.seatmap-controls button{width:38px; height:38px; border-radius:50%; border:none; background:#fff; box-shadow:var(--shadow-md); font-size:18px; font-weight:800; color:var(--purple-700)}

.hold-timer{position:sticky; bottom:64px; z-index:20; background:var(--purple-900); color:#fff; padding:12px 16px; border-radius:14px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-lg)}
.hold-timer strong{font-variant-numeric:tabular-nums; font-size:16px}

.bottom-sheet{position:fixed; left:0; right:0; bottom:0; background:#fff; border-radius:20px 20px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.15); padding:18px 20px calc(18px + var(--safe-bottom)); z-index:150; transform:translateY(100%); transition:transform .25s ease}
.bottom-sheet.open{transform:translateY(0)}
.bottom-sheet-handle{width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 12px}

/* ---------- Cart / order summary ---------- */
.order-line{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--border); font-size:14px}
.order-total{display:flex; justify-content:space-between; padding:14px 0 0; font-weight:800; font-size:18px; color:var(--purple-700)}

/* ---------- E-Ticket ---------- */
.ticket{background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); max-width:420px; margin:0 auto; position:relative}
.ticket-top{background:var(--grad-dark); color:#fff; padding:20px}
.ticket-notch{height:24px; background:
  radial-gradient(circle 12px at 0 0, transparent 12px, #fff 13px) top left,
  radial-gradient(circle 12px at 100% 0, transparent 12px, #fff 13px) top right;
  background-repeat:no-repeat; background-size:50% 100%;
  border-top:2px dashed var(--border);
}
.ticket-body{padding:20px; text-align:center}
.ticket-qr{width:200px; height:200px; margin:0 auto 14px; border:8px solid var(--purple-50); border-radius:16px}
.ticket-meta{display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; margin-top:16px; font-size:13px}
.ticket-meta div span{display:block; color:var(--text-muted); font-size:11px}

/* ---------- Bottom navigation (mobile app style) ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; background:#fff; border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(109,40,217,.10);
  padding-bottom:var(--safe-bottom);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:10px 0 8px; font-size:11px; font-weight:700; color:var(--text-muted);
}
.bottom-nav a .ic{font-size:20px}
.bottom-nav a.active{color:var(--purple-600)}
@media(min-width:900px){ .bottom-nav{display:none} body{padding-bottom:0} }

/* ---------- Footer (desktop) ---------- */
.site-footer{display:none}
@media(min-width:900px){
  .site-footer{display:block; background:var(--purple-900); color:#e9d9ff; margin-top:40px; padding:40px 20px}
  .site-footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px}
}

/* ---------- Popup modal ---------- */
.popup-overlay{position:fixed; inset:0; background:rgba(15,10,30,.6); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px}
.popup-modal{background:#fff; border-radius:20px; max-width:380px; width:100%; overflow:hidden; box-shadow:var(--shadow-lg)}
.popup-modal img{width:100%}
.popup-modal .body{padding:20px}
.popup-close{position:absolute; top:12px; right:12px; background:rgba(0,0,0,.4); color:#fff; border:none; width:30px; height:30px; border-radius:50%; font-size:16px; cursor:pointer}

/* ---------- Admin ---------- */
.admin-shell{display:flex; min-height:100vh; background:#f4f1fb}
.admin-sidebar{width:230px; background:var(--grad-dark); color:#fff; padding:20px 14px; position:sticky; top:0; height:100vh; flex-shrink:0}
.admin-sidebar .brand{color:#fff; margin-bottom:24px; display:block}
.admin-sidebar a{display:block; padding:10px 12px; border-radius:10px; color:#d8c9fb; font-size:14px; margin-bottom:2px; font-weight:600}
.admin-sidebar a.active, .admin-sidebar a:hover{background:rgba(255,255,255,.12); color:#fff}
.admin-main{flex:1; padding:24px; min-width:0}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:24px}
.stat-card{background:#fff; border-radius:16px; padding:18px; box-shadow:var(--shadow-sm)}
.stat-card .num{font-size:26px; font-weight:800; color:var(--purple-700)}
.stat-card .lbl{font-size:12px; color:var(--text-muted)}
table.admin-table{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm)}
table.admin-table th, table.admin-table td{padding:12px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--border)}
table.admin-table th{background:var(--purple-50); color:var(--purple-700); font-weight:700}
@media(max-width:800px){ .admin-sidebar{position:fixed; left:-230px; transition:left .2s; z-index:150} .admin-sidebar.open{left:0} }

.empty-state{text-align:center; padding:60px 20px; color:var(--text-muted)}
.empty-state .ic{font-size:44px; margin-bottom:10px}
#reviewSpinner{animation:spin 1.6s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,#eee,#f5f5f5,#eee); background-size:200% 100%; animation:shine 1.2s infinite; border-radius:12px}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}