/* ============================================================
   EliteYTDeals — Premium Theme System (v2)
   4 themes selectable via body[data-theme] + dark mode via [data-mode]
   ============================================================ */

/* ---------- SHARED: PREMIUM BUTTONS ---------- */
.btn-elite,
.btn-buy,
.btn-primary-elite {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 22px; border: 0; border-radius: 999px;
  font-weight: 600; letter-spacing: .2px; color:#fff;
  background: linear-gradient(90deg, var(--btn-a, #ff2d55), var(--btn-b, #ff6b35));
  box-shadow: 0 8px 20px rgba(255,45,85,.28);
  cursor: pointer; text-decoration: none; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-elite:hover, .btn-buy:hover, .btn-primary-elite:hover {
  transform: translateY(-2px); filter: brightness(1.08); color:#fff;
  box-shadow: 0 14px 28px rgba(255,45,85,.38);
}
.btn-elite::after, .btn-buy::after {
  content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-elite:hover::after, .btn-buy:hover::after { transform: translateX(120%); }
.btn-elite i, .btn-buy i { font-size: 14px; }
.btn-ghost { background: transparent !important; color: var(--text) !important; border: 2px solid currentColor !important; box-shadow:none !important; }
.btn-ghost:hover { background: currentColor !important; color: var(--bg-elev) !important; }
.btn-danger-elite { --btn-a:#ef4444; --btn-b:#dc2626; box-shadow: 0 8px 20px rgba(239,68,68,.3); }
.btn-success-elite { --btn-a:#16a34a; --btn-b:#22c55e; box-shadow: 0 8px 20px rgba(22,163,74,.3); }
.btn-warning-elite { --btn-a:#f59e0b; --btn-b:#f97316; box-shadow: 0 8px 20px rgba(245,158,11,.3); }

/* ---------- THEME: elite-default (LIGHT) ---------- */
body[data-theme="elite-default"] {
  --bg:#f7f8fb; --bg-elev:#ffffff; --text:#0f172a; --muted:#64748b; --border:#e5e7eb;
  --accent:#ff2d55; --accent-2:#ff6b35;
  --btn-a:#ff2d55; --btn-b:#ff6b35;
  /* LIGHT hero — soft peach/pink wash on white; dark overlay only when dark mode is toggled */
  --hero-bg:
    radial-gradient(900px 500px at 15% 10%, rgba(255,45,85,.18), transparent),
    radial-gradient(800px 500px at 85% 30%, rgba(255,107,53,.22), transparent),
    linear-gradient(180deg, #fff7f2 0%, #ffffff 100%);
  --hero-text:#0f172a; --hero-muted:#475569;
  --nav-bg:#0b1220; --nav-text:#e2e8f0;
  --card-radius:14px; --card-shadow:0 8px 24px rgba(15,23,42,.08);
}
/* DARK hero variant for the default theme, activated when the user toggles dark mode */
body[data-theme="elite-default"][data-mode="dark"] {
  --hero-bg:
    radial-gradient(1000px 500px at 20% 10%, rgba(255,45,85,.28), transparent),
    radial-gradient(800px 400px at 80% 30%, rgba(255,107,53,.24), transparent),
    #0b1220;
  --hero-text:#ffffff; --hero-muted:#cbd5e1;
}
/* Light hero styles */
body[data-theme="elite-default"] .hero p { color: var(--hero-muted, #475569); }
body[data-theme="elite-default"] .hero .stat { background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.1); }
body[data-theme="elite-default"] .hero .stat .lbl { color:#475569; }
body[data-theme="elite-default"][data-mode="dark"] .hero p { color:#cbd5e1; }
body[data-theme="elite-default"][data-mode="dark"] .hero .stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
body[data-theme="elite-default"][data-mode="dark"] .hero .stat .lbl { color:#94a3b8; }

/* ---------- THEME: elite-dark ---------- */
body[data-theme="elite-dark"] {
  --bg:#0a0e1a; --bg-elev:#0f172a; --text:#f1f5f9; --muted:#94a3b8; --border:#1e293b;
  --accent:#f5c518; --accent-2:#ff6b35;
  --btn-a:#f5c518; --btn-b:#ff6b35;
  --hero-bg: radial-gradient(1200px 600px at 30% 20%, rgba(245,197,24,.18), transparent), radial-gradient(900px 500px at 80% 60%, rgba(255,107,53,.16), transparent), #0a0e1a;
  --hero-text:#ffffff; --nav-bg:#050810; --nav-text:#f1f5f9;
  --card-radius:16px; --card-shadow:0 10px 30px rgba(0,0,0,.5);
}
body[data-theme="elite-dark"] .channel-card { background:#0f172a; border-color:#1e293b; }
body[data-theme="elite-dark"] .channel-title { color:#f1f5f9; }
body[data-theme="elite-dark"] .price-inr { color:#f5c518; }
body[data-theme="elite-dark"] .admin-card, body[data-theme="elite-dark"] .detail-price-box,
body[data-theme="elite-dark"] .review-card, body[data-theme="elite-dark"] .dash-card,
body[data-theme="elite-dark"] .auth-wrap, body[data-theme="elite-dark"] .faq-item { background:#0f172a; border-color:#1e293b; color:#f1f5f9; }
body[data-theme="elite-dark"] .btn-outline-dark { color:#f5c518; border-color:#f5c518; }
body[data-theme="elite-dark"] .form-control, body[data-theme="elite-dark"] .form-select { background:#0a0e1a; border-color:#1e293b; color:#f1f5f9; }

/* ---------- THEME: elite-blue (Professional) ---------- */
body[data-theme="elite-blue"] {
  --bg:#f0f6ff; --bg-elev:#ffffff; --text:#0c2340; --muted:#5b7192; --border:#dbeafe;
  --accent:#1e40af; --accent-2:#0ea5e9;
  --btn-a:#1e40af; --btn-b:#0ea5e9;
  --hero-bg: linear-gradient(135deg,#0c2340 0%,#1e40af 60%,#0ea5e9 100%);
  --hero-text:#ffffff; --nav-bg:#0c2340; --nav-text:#e0f2fe;
  --card-radius:12px; --card-shadow:0 6px 18px rgba(30,64,175,.12);
}
body[data-theme="elite-blue"] .navbar-elite { background:#0c2340; }
body[data-theme="elite-blue"] .navbar-elite .brand-accent { background:linear-gradient(90deg,#0ea5e9,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; }
body[data-theme="elite-blue"] .price-inr { color:#1e40af; }

/* ---------- THEME: elite-purple ---------- */
body[data-theme="elite-purple"] {
  --bg:#faf5ff; --bg-elev:#ffffff; --text:#2e1065; --muted:#7c6aa6; --border:#e9d5ff;
  --accent:#9333ea; --accent-2:#ec4899;
  --btn-a:#9333ea; --btn-b:#ec4899;
  --hero-bg: radial-gradient(1000px 500px at 20% 10%, rgba(147,51,234,.35), transparent), radial-gradient(900px 500px at 80% 60%, rgba(236,72,153,.3), transparent), #1e1b4b;
  --hero-text:#ffffff; --nav-bg:#1e1b4b; --nav-text:#f5f3ff;
  --card-radius:20px; --card-shadow:0 10px 30px rgba(147,51,234,.15);
}
body[data-theme="elite-purple"] .navbar-elite { background:#1e1b4b; }
body[data-theme="elite-purple"] .price-inr { color:#9333ea; }

/* ---------- APPLY VARS ---------- */
body { background: var(--bg) !important; color: var(--text); }
.navbar-elite { background: var(--nav-bg) !important; }
.navbar-elite .nav-link { color: var(--nav-text) !important; }
.hero { background: var(--hero-bg) !important; color: var(--hero-text) !important; }
.channel-card, .admin-card, .detail-price-box, .review-card, .dash-card, .auth-wrap {
  background: var(--bg-elev); border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.section { background: var(--bg); }
.section:nth-child(even) { background: var(--bg-elev); }
footer.site-footer { background: var(--nav-bg); }

/* ---------- DARK MODE OVERLAY (inside any theme) ---------- */
body[data-mode="dark"] { --bg:#0a0e1a; --bg-elev:#0f172a; --text:#f1f5f9; --muted:#94a3b8; --border:#1e293b; }
body[data-mode="dark"] .channel-title { color:#f1f5f9; }
body[data-mode="dark"] .text-muted { color:#94a3b8 !important; }
body[data-mode="dark"] .form-control, body[data-mode="dark"] .form-select { background:#0a0e1a; border-color:#1e293b; color:#f1f5f9; }

/* ---------- DARK MODE TOGGLE ---------- */
.mode-toggle {
  position:fixed; top:80px; right:16px; z-index:998;
  background:var(--bg-elev); color:var(--text); border:1px solid var(--border);
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.12); cursor:pointer; font-size:16px;
}

/* ---------- VERIFICATION TIMER ---------- */
.verify-timer {
  background: linear-gradient(90deg,#fef3c7,#fef9c3);
  border:1px solid #fbbf24; border-radius:12px; padding:14px 18px;
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.verify-timer .icon { font-size:22px; color:#f59e0b; }
.verify-timer .count { font-weight:800; font-size:20px; color:#92400e; font-variant-numeric:tabular-nums; }
.verify-timer.expired { background: linear-gradient(90deg,#fee2e2,#fecaca); border-color:#ef4444; }
.verify-timer.expired .count { color:#991b1b; }
.verify-timer.verified { background: linear-gradient(90deg,#dcfce7,#bbf7d0); border-color:#22c55e; }
.verify-timer.verified .count { color:#166534; }

/* ---------- VIDEO SECTIONS ---------- */
.video-section { background: var(--bg-elev); padding: 40px 0; }
.video-frame { max-width:840px; margin:0 auto; border-radius:18px; overflow:hidden; box-shadow:var(--card-shadow); }

/* ---------- TICKET UI ---------- */
.ticket-chat { background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:20px; max-height:520px; overflow-y:auto; }
.chat-msg { display:flex; gap:10px; margin-bottom:14px; }
.chat-msg .bubble { padding:10px 14px; border-radius:14px; max-width:75%; }
.chat-msg.user .bubble { background:linear-gradient(90deg,var(--btn-a),var(--btn-b)); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.chat-msg.admin .bubble { background:var(--border); color:var(--text); border-bottom-left-radius:4px; }
.chat-msg .meta { font-size:11px; color:var(--muted); margin-top:4px; }

/* ---------- REFERRAL ---------- */
.ref-hero { background: linear-gradient(135deg,var(--btn-a),var(--btn-b)); color:#fff; border-radius:20px; padding:40px; text-align:center; }
.ref-link { background:rgba(255,255,255,.15); border:1px dashed rgba(255,255,255,.4); border-radius:10px; padding:12px 16px; font-family:monospace; word-break:break-all; }

/* ---------- INVOICE ---------- */
.invoice-page { background:#fff; color:#111; padding:40px; max-width:820px; margin:20px auto; box-shadow:0 8px 30px rgba(0,0,0,.1); }
.invoice-head { display:flex; justify-content:space-between; border-bottom:2px solid #eee; padding-bottom:20px; margin-bottom:20px; }
.invoice-table { width:100%; border-collapse:collapse; }
.invoice-table th, .invoice-table td { padding:12px; border-bottom:1px solid #eee; text-align:left; }
.invoice-total { font-size:22px; font-weight:800; color:var(--accent); }
@media print { .no-print { display:none !important; } .invoice-page { box-shadow:none; margin:0; } body { background:#fff; } }

/* ---------- MAINTENANCE PAGE (v2) ---------- */
.maint-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; color:#fff; }
.maint-card { max-width:640px; text-align:center; padding:40px 30px; background:rgba(255,255,255,.08); backdrop-filter:blur(10px); border-radius:22px; border:1px solid rgba(255,255,255,.12); }
.maint-icon { font-size:60px; margin-bottom:14px; color:var(--accent); }
.maint-countdown { display:flex; justify-content:center; gap:12px; margin:20px 0; font-variant-numeric:tabular-nums; }
.maint-countdown div { background:rgba(255,255,255,.1); border-radius:12px; padding:12px 18px; min-width:70px; }
.maint-countdown .val { font-size:28px; font-weight:800; }
.maint-countdown .lbl { font-size:11px; text-transform:uppercase; opacity:.7; }

/* ---------- HERO VARIATION per theme ---------- */
body[data-theme="elite-blue"] .hero { text-align:center; }
body[data-theme="elite-blue"] .hero h1 { font-size:52px; }
body[data-theme="elite-purple"] .hero h1 span { background: linear-gradient(90deg,#f5c518,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; }
body[data-theme="elite-dark"] .channel-thumb { border-bottom:1px solid #1e293b; }

/* PWA install banner */
.pwa-install-banner { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:14px 18px; box-shadow:0 12px 30px rgba(0,0,0,.15); z-index:1000; display:none; align-items:center; gap:12px; max-width:420px; width:90%; }
.pwa-install-banner.show { display:flex; }