/* ─────────────────────────────────────────────────────────────────────────
   supra-stream shared theme — the site-wide modern UI layer.
   Loaded LAST in each page's <head> so its cosmetic overrides win over the
   page's own inline <style>. Keep overrides cosmetic (color, background,
   border, radius, shadow, blur, transition) — no layout/positioning changes —
   so it reskins every page without breaking functionality.

   Libraries: Open Props (design tokens) + Google Montserrat, imported here so a
   page only needs a single <link> to opt in.
   ───────────────────────────────────────────────────────────────────────── */
@import url('https://unpkg.com/open-props');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --primary: #e50914;
  --primary-2: #ff3b44;
  --dark: #0a0a0c;
  --darker: #000;
  --light: #f5f5f7;
  --gray: #9aa0a6;
  --muted: #9aa0a6;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09);
  --radius: 16px;
  --ease: cubic-bezier(.25, .8, .35, 1);
  --shadow-card: 0 12px 28px -10px rgba(0, 0, 0, .6);
}

/* ── Background: gradient mesh on every page ── */
body {
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(229, 9, 20, 0.18), transparent 60%),
    radial-gradient(900px 520px at -5% 0%, rgba(70, 80, 130, 0.15), transparent 55%),
    var(--dark) !important;
  background-attachment: fixed !important;
  color: var(--light);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
::selection { background: rgba(229, 9, 20, 0.35); }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), #7b0810); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Glass nav (site uses .navbar) ── */
.navbar {
  background: rgba(10, 10, 12, 0.55) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--border) !important;
}
.navbar.scrolled { background: rgba(10, 10, 12, 0.78) !important; }
.logo { letter-spacing: -0.02em; }

/* ── Brand buttons/links ── */
.multi-link, .btn-primary {
  background: linear-gradient(135deg, var(--primary-2), var(--primary)) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px -8px rgba(229, 9, 20, 0.7);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s !important;
}
.multi-link:hover, .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 26px -8px rgba(229, 9, 20, 0.85); }

/* ── Cards site-wide: softer corners + glow-lift on hover ── */
.match-card, .tv-card, .sport-card {
  border-radius: 14px !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card) !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s !important;
}
.match-card:hover, .tv-card:hover, .sport-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(229, 9, 20, 0.5) !important;
  box-shadow: 0 22px 45px -14px rgba(229, 9, 20, 0.45), 0 10px 24px rgba(0, 0, 0, .6) !important;
}
.section-title { letter-spacing: -0.02em; }

/* ── Reusable components ── */
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; font-weight: 800; color: var(--primary-2); margin-bottom: .35rem; }
.eyebrow i { width: 15px; height: 15px; }
.pill { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: .5rem .85rem; border-radius: 999px; }
.pill .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-2); animation: pulse 1.7s infinite; }
.badge-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(229, 9, 20, 0.18); border: 1px solid rgba(229, 9, 20, 0.5); color: #ff8b8f; font-size: .6rem; font-weight: 800; letter-spacing: .12em; padding: 4px 8px; border-radius: 999px; }
.badge-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-2); animation: pulse 1.7s infinite; }

/* ── Form controls: glassy + consistent (admin, login, chat).
   Note: radius is left alone so flush input+button groups (e.g. the chat box)
   keep their shape. ── */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--light) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18) !important;
}

/* ── Login / admin-login card → glass ── */
.login-box, .auth-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 24px 64px -20px rgba(0, 0, 0, 0.75) !important;
}
.login-box button, .auth-box button {
  background: linear-gradient(135deg, var(--primary-2), var(--primary)) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px -8px rgba(229, 9, 20, 0.7);
}

/* ── Admin panel polish ── */
.admin-panel .section, .container .section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(8px);
}
.section > button, .form-group button, .modal-content button {
  background: linear-gradient(135deg, var(--primary-2), var(--primary)) !important;
  border-radius: 10px !important;
}

/* ── Mobile: shrink the navbar logo so it isn't oversized on small screens ── */
@media (max-width: 768px) {
  .logo { font-size: 1.15rem !important; }
}

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 68, .6); } 70% { box-shadow: 0 0 0 7px rgba(255, 59, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 68, 0); } }
