:root{
  --white:#ffffff;
  --bg:#fafafa;
  --text:#1a1a1a;
  --text-soft:#6b7280;
  --border:#e5e7eb;
  --red:#e02020;
  --red-dark:#b81818;
  --gold:#c9a227;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

/* ---------- HEADER ---------- */
.site-header{
  background:var(--white); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:42px;width:42px;object-fit:contain;border-radius:8px;}
.brand-name{font-weight:700;font-size:20px;letter-spacing:.3px;}
.header-actions{display:flex;align-items:center;gap:14px;}

/* ---------- HAMBURGER MENU ---------- */
.hamburger-btn{
  background:transparent;border:1px solid var(--border);border-radius:10px;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--text);
  flex-shrink:0;
}
.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.25s;z-index:200;
}
.nav-overlay.open{opacity:1;visibility:visible;}
.nav-drawer{
  position:fixed;top:0;right:0;height:100%;width:260px;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);
  transform:translateX(100%);transition:.25s;z-index:201;padding:20px;
}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer-close{display:flex;justify-content:flex-end;margin-bottom:10px;color:var(--text-soft);cursor:pointer;}
.nav-user-name{display:flex;align-items:center;gap:10px;font-weight:700;padding:12px 8px;border-bottom:1px solid var(--border);margin-bottom:10px;}
.nav-link{display:flex;align-items:center;gap:12px;padding:14px 8px;font-weight:600;color:var(--text);border-radius:10px;}
.nav-link:hover{background:var(--bg);}
.nav-link.nav-logout{color:var(--red);}

/* ---------- ICON BUTTONS (real SVG, used in live watch/broadcast) ---------- */
.icon-btn{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.icon-btn:hover{background:rgba(255,255,255,.28);}
.icon-btn.off{background:var(--red);}
.icon-btn.leave-btn{background:var(--red);}

/* ---------- COUNTDOWN ---------- */
.countdown-badge{
  position:absolute;top:14px;right:14px;background:rgba(0,0,0,.6);color:#fff;padding:6px 12px;
  border-radius:999px;font-size:13px;font-weight:700;
}

/* ---------- PAUSED OVERLAY ---------- */
.paused-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.75);color:#fff;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;padding:20px;
}
.paused-overlay.show{display:flex;}
.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- ADMIN LIVE CHAT PANEL ---------- */
.admin-chat-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-top:18px;}
.admin-chat-messages{max-height:320px;overflow-y:auto;padding:14px;}
.admin-chat-msg{padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;cursor:pointer;}
.admin-chat-msg:hover{background:var(--bg);}
.admin-chat-msg.from-admin{color:var(--red);}
.admin-chat-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);}
.admin-chat-input-row input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:20px;}

/* ---------- STATUS TABS (bookings) ---------- */
.status-tabs{display:flex;gap:10px;margin-bottom:16px;}
.status-tab{padding:8px 18px;border-radius:999px;border:1px solid var(--border);background:#fff;font-weight:600;font-size:14px;}
.status-tab.active{background:var(--text);color:#fff;border-color:var(--text);}
.badge{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;}
.badge-pending{background:#fef3c7;color:#92400e;}
.badge-approved{background:#dcfce7;color:#166534;}
.badge-rejected{background:#fee2e2;color:#991b1b;}

/* ---------- CUSTOMER SUPPORT WIDGET ---------- */
.support-fab{
  position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;
  background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);border:none;z-index:150;
}
.support-fab .fab-badge{
  position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:11px;font-weight:800;
  border-radius:999px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.support-panel{
  position:fixed;bottom:0;right:0;left:0;max-width:420px;margin:0 auto;height:78vh;background:#fff;
  border-radius:20px 20px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.2);transform:translateY(100%);
  transition:.25s;z-index:250;display:flex;flex-direction:column;
}
.support-panel.open{transform:translateY(0);}
.support-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border);}
.support-panel-header h3{margin:0;font-size:16px;}
.support-panel-close{color:var(--text-soft);cursor:pointer;}
.support-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.support-bubble{max-width:78%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.4;}
.support-bubble.from-user{align-self:flex-end;background:var(--text);color:#fff;border-bottom-right-radius:4px;}
.support-bubble.from-admin{align-self:flex-start;background:var(--bg);border:1px solid var(--border);border-bottom-left-radius:4px;}
.support-bubble img{max-width:100%;border-radius:10px;margin-top:6px;display:block;}
.support-bubble video{max-width:100%;border-radius:10px;margin-top:6px;display:block;}
.support-bubble .pdf-link{display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.15);}
.support-bubble.from-admin .pdf-link{background:#fff;border:1px solid var(--border);}
.support-input-area{border-top:1px solid var(--border);padding:10px;}
.support-file-preview{display:none;align-items:center;gap:8px;padding:6px 10px;background:var(--bg);border-radius:10px;margin-bottom:8px;font-size:13px;}
.support-file-preview.show{display:flex;}
.support-input-row{display:flex;gap:8px;align-items:center;}
.support-input-row input[type=text]{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:20px;}
.support-attach-btn, .support-send-btn{
  width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.support-attach-btn{background:var(--bg);color:var(--text);}
.support-send-btn{background:var(--text);color:#fff;}
.support-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.25s;z-index:249;}
.support-overlay.open{opacity:1;visibility:visible;}

/* ---------- ADMIN SUPPORT PAGE ---------- */
.support-user-list{max-height:260px;overflow-y:auto;}
.support-user-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--border);cursor:pointer;}
.support-user-item:hover{background:var(--bg);}
.support-user-item.active{background:var(--bg);font-weight:700;}
.support-unread-badge{background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:999px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:999px;border:1px solid var(--border);
  background:var(--white);font-weight:600;font-size:14px;transition:.2s;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.btn-primary{background:var(--text);color:var(--white);border-color:var(--text);}
.btn-red{background:var(--red);color:var(--white);border-color:var(--red);}
.btn-red:hover{background:var(--red-dark);}
.btn-outline{background:transparent;}

/* ---------- HERO / LIVE VIDEO ---------- */
.hero{max-width:900px;margin:24px auto;padding:0 16px;}
.hero-video-wrap{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow); background:#000; aspect-ratio:16/9;
}
.hero-video-wrap video{width:100%;height:100%;object-fit:cover;}
.viewer-badge{
  position:absolute;top:14px;left:14px;background:#fff;color:var(--red-dark);
  padding:7px 14px 7px 10px;border-radius:999px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:7px;box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.viewer-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite;flex-shrink:0;}
.viewer-badge .sep{color:var(--border);font-weight:400;}
.viewer-badge .flame-icon{color:#f97316;display:flex;flex-shrink:0;}
@keyframes pulse{0%{opacity:1;}50%{opacity:.3;}100%{opacity:1;}}
.tap-join-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;color:var(--red-dark);padding:14px 26px 14px 18px;border-radius:999px;
  font-weight:800;font-size:15px;border:2px solid var(--red);box-shadow:0 6px 24px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:10px;
}
.tap-join-btn .tap-icon{color:var(--red);display:flex;flex-shrink:0;}
.live-now-strip{
  margin-top:14px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,#7a0d0d,#c11c1c);color:#fff;padding:15px;border-radius:var(--radius);
  font-weight:800;letter-spacing:.4px;box-shadow:0 6px 18px rgba(185,28,28,.35);
}
.live-now-strip .signal-icon{display:flex;color:#fff;opacity:.9;flex-shrink:0;}
.live-now-strip .blink{width:10px;height:10px;border-radius:50%;background:#fff;animation:pulse 1s infinite;flex-shrink:0;}

/* ---------- SHOW GRID ---------- */
.section{max-width:1100px;margin:36px auto;padding:0 16px;}
.section-title{font-size:22px;font-weight:800;margin-bottom:16px;}
.shows-section-header{text-align:center;max-width:600px;margin:36px auto 20px;padding:0 16px;}
.shows-section-header h2{font-size:26px;font-weight:800;margin:0 0 8px;}
.shows-section-header p{color:var(--text-soft);font-size:15px;margin:0;}
.category-block{margin-bottom:32px;}
.category-title{
  display:inline-block;padding:6px 16px;border-radius:999px;font-weight:700;
  font-size:13px;color:#fff;margin-bottom:14px;
}
.show-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.show-card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  transition:.2s;
}
.show-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.show-card img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#f3f4f6;}
.show-card-body{padding:14px;}
.show-card-title{font-weight:700;font-size:16px;margin:0 0 6px;}
.show-card-desc{color:var(--text-soft);font-size:13px;margin:0 0 10px;height:36px;overflow:hidden;}
.show-card-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-soft);margin-bottom:12px;}
.show-fee{font-weight:800;color:var(--text);}

/* ---------- REVIEWS SLIDER ---------- */
.reviews-title{text-align:center;font-size:22px;font-weight:800;margin-bottom:22px;}
.reviews-track-wrap{overflow:hidden;}
.reviews-track{display:flex;gap:18px;animation:slideLeft 30s linear infinite;}
.reviews-track:hover{animation-play-state:paused;}
@keyframes slideLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.review-card{
  min-width:280px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;flex-shrink:0;
}
.review-stars{color:var(--gold);margin-bottom:8px;}
.review-name{font-weight:700;margin-top:10px;display:flex;align-items:center;gap:10px;}
.review-name img{width:36px;height:36px;border-radius:50%;object-fit:cover;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--white);border-top:1px solid var(--border);margin-top:50px;padding:26px 16px;text-align:center;}
.footer-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:14px;font-size:14px;color:var(--text-soft);}
.footer-socials{display:flex;justify-content:center;gap:16px;margin-bottom:14px;}
.footer-socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.footer-copy{font-size:13px;color:var(--text-soft);}

/* ---------- TOASTS ---------- */
#toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);
  padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateX(30px);
  transition:.3s;min-width:240px;
}
.toast.show{opacity:1;transform:translateX(0);}
.toast-success{border-left:4px solid #16a34a;}
.toast-success .toast-icon{color:#16a34a;}
.toast-error{border-left:4px solid var(--red);}
.toast-error .toast-icon{color:var(--red);}
.toast-info{border-left:4px solid #2563eb;}
.toast-info .toast-icon{color:#2563eb;}

/* ---------- MODAL (popup for hero show) ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1000;
}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:var(--radius);padding:24px;max-width:420px;width:90%;box-shadow:0 10px 40px rgba(0,0,0,.25);}
.modal-box h3{margin-top:0;}
.modal-close{float:right;cursor:pointer;font-size:20px;color:var(--text-soft);}
.modal-price{font-size:26px;font-weight:800;margin:16px 0;}

/* ---------- FORMS ---------- */
.form-card{max-width:420px;margin:60px auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
.form-card h2{margin-top:0;text-align:center;}
.input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;font-size:14px;}
.google-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;
  border:1px solid var(--border);border-radius:10px;background:#fff;font-weight:600;
}

/* ---------- LIVE WATCH PAGE ---------- */
.live-stage{max-width:1000px;margin:20px auto;padding:0 16px;display:grid;grid-template-columns:2fr 1fr;gap:16px;}
@media(max-width:800px){.live-stage{grid-template-columns:1fr;}}
.player-box{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;}
.player-box video{width:100%;height:100%;object-fit:cover;}
.controls-bar{
  position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:10px;
  padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.6));
}
.ctrl-btn{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
}
.ctrl-btn.off{background:var(--red);}
.chat-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;height:100%;max-height:520px;}
.chat-messages{flex:1;overflow-y:auto;padding:12px;font-size:14px;}
.chat-msg{margin-bottom:8px;}
.chat-msg b{margin-right:6px;}
.chat-input-row{display:flex;border-top:1px solid var(--border);padding:8px;gap:8px;}
.chat-input-row input{flex:1;border:1px solid var(--border);border-radius:20px;padding:8px 14px;}

/* ---------- ADMIN ---------- */
.admin-wrap{display:flex;min-height:100vh;}
.admin-sidebar{width:230px;background:#fff;border-right:1px solid var(--border);padding:20px 0;}
.admin-sidebar a{display:block;padding:12px 24px;color:var(--text-soft);font-weight:600;font-size:14px;}
.admin-sidebar a.active,.admin-sidebar a:hover{background:var(--bg);color:var(--text);}
.admin-content{flex:1;padding:28px;}
.admin-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:20px;}
table.admin-table{width:100%;border-collapse:collapse;}
table.admin-table th,table.admin-table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px;}

.payment-timer-card{display:flex;align-items:center;justify-content:center;gap:10px;max-width:260px;margin:0 auto 18px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#fafafa;font-size:13px;color:var(--text-soft);font-weight:600}.payment-timer-card strong{font-size:18px;color:var(--red);font-variant-numeric:tabular-nums}.payment-timer-card.expired{border-color:#fecaca;background:#fff1f2}.payment-timer-card.expired strong{color:#991b1b}.completed-show-btn{background:#f3f4f6;color:#374151;border-color:#d1d5db}

.live-elapsed-badge{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.72);color:#fff;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;z-index:3}