/* One border value for the dark theme (owner 2026-09-28): 22 percent white on every screen, 35 on
   iOS, where the same line reads fainter ("more in iphone safari"). Every border on the site reads
   var(--bv-line) (or --bv-line-solid where a solid grey is needed), so this is the one place to move it. */
:root { --bv-line: rgba(255,255,255,0.15); --bv-line-solid: #35354f; --bv-lift: 0 1px 3px rgba(255,255,255,0.06); }
/* One value on every device (owner 2026-09-28): the stronger iPhone line of 2026-09-27 answered a Safari extension (Noir) darkening the page, not the phone. */
/* ============================================================
   Sports Bar AI — Frontpage Styles
   Dark theme, glassmorphism, neon accents, mobile-first
   ============================================================ */

/* --- Reset & Custom Properties --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #161622;
  --bg-glass: rgba(255,255,255,0.04);
  --bg-glass-hover: rgba(255,255,255,0.08);
  --border-glass: var(--bv-line);
  --border-glow: rgba(74,161,217,0.15);
  --brand-blue: #4aa1d9;
  --brand-blue-dim: rgba(74,161,217,0.15);
  --brand-blue-glow: rgba(74,161,217,0.25);
  --brand-orange: #f39322;
  --brand-orange-dim: rgba(243,147,34,0.15);
  --accent: #4aa1d9;
  --accent-dim: rgba(74,161,217,0.15);
  --accent2: #7c3aed;
  --accent2-dim: rgba(124,58,237,0.15);
  --live: #ff3b5c;
  --live-dim: rgba(255,59,92,0.15);
  --success: #10b981;
  --warning: #f59e0b;
  --text: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-glow: 0 0 30px rgba(74,161,217,0.08);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-condensed: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --nav-height: 46px;  /* owner 2026-08-23: thin top bar; every spacer keys off this token */
  --bottom-nav-height: 72px;
  --container: 1200px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html { overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,59,92,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(255,59,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger-children .animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.stagger-children .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.stagger-children .animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.stagger-children .animate-on-scroll:nth-child(5) { transition-delay: 0.4s; }
.stagger-children .animate-on-scroll:nth-child(6) { transition-delay: 0.5s; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.06) 50%, var(--bg-card) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ============================================================
   PAGE CONTAINER (below fixed navbar)
   ============================================================ */
.page-container {
  margin-top: var(--nav-height);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Near-opaque (owner 2026-08-23): content scrolling under the bar was too
     visible at 0.85. Blur stays for the little that still shows through. */
  background: rgba(10,10,15,0.97);
  border-bottom: 1px solid var(--border-glass);
  transition: background var(--transition), box-shadow var(--transition);
}

.navbar.scrolled {
  background: rgba(10,10,15,0.95);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav-brand .brand-logo {
  height: 26px;
  width: auto;
}

/* Nav buttons (Fixtures, Bookings, Locations, Login) */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  cursor: pointer;
}
.nav-btn:hover {
  color: var(--text);
  background: var(--bg-glass-hover);
  border-color: var(--accent);
}
.nav-btn svg { flex-shrink: 0; opacity: 0.7; }
.nav-btn:hover svg { opacity: 1; }
.nav-btn span { display: none; }
@media (min-width: 640px) {
  .nav-btn span { display: inline; }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  /* The bell's count is positioned OUTSIDE the button box. Anything clipping
     here takes it off the screen at narrow widths, which is exactly where it
     matters most. */
  overflow: visible;
}

/* Optical centering — symmetric padding + .tb-trim utility (see
   bookvelt-textcenter.css). Trim handles cap-height / baseline math. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #00c4cc);
  color: #000;
  box-shadow: 0 0 20px rgba(0,240,255,0.2);
}

.btn-primary:hover {
  box-shadow: 0 0 30px rgba(0,240,255,0.4);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 0 15px rgba(0,240,255,0.3);
}

.btn-secondary {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--bg-glass-hover);
  border-color: var(--accent);
}
.btn-secondary:active {
  transform: scale(0.97);
  background: rgba(255,255,255,0.12);
}

.btn-ghost {
  color: var(--text-secondary);
  padding: 8px 12px;
}

.btn-ghost:hover {
  color: var(--text);
}
.btn-ghost:active {
  opacity: 0.7;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.8rem;
  line-height: 1;
}

/* --- Nav User Button (logged in) --- */
/* The same form as the search, bell and menu buttons (owner 2026-09-28): a 32px-high
   rounded rectangle, radius 8, the photo filling a 40px-wide placeholder edge to edge,
   cropped equally top and bottom (object-position center). Initials when there is no photo. The
   name shows beside the photo from 640px up, inside the same rectangle. */
.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 0;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-secondary);
  font-size: 0.825rem;
  font-weight: 500;
}
.nav-user-btn:hover {
  background: var(--bg-glass-hover);
  border-color: var(--accent);
  color: var(--text);
}
.nav-avatar-circle {
  width: 40px;
  height: 30px;
  border-radius: 0;
  background: var(--accent);
  color: #0a0a0f;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.nav-avatar-circle img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.nav-user-name { display: none; }
@media (min-width: 640px) {
  .nav-user-name { display: inline; padding: 0 12px 0 8px; }
}

/* --- Language Selector --- */
.nav-lang-wrap {
  position: relative;
  display: flex; align-items: center;
}
.nav-lang-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer; border: none; background: none;
  transition: background var(--transition);
  padding: 0;
}
.nav-lang-btn:hover { background: var(--bg-glass-hover); }
.nav-flag { font-size: 1.3rem; line-height: 1; }
.nav-lang-dropdown {
  display: none; position: absolute; top: 100%; right: 0;
  background: var(--bg-card, #1a1a2e); border: 1px solid var(--border, var(--bv-line-solid));
  border-radius: var(--radius-sm, 8px); padding: 4px 0;
  min-width: 0; z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nav-lang-dropdown.open { display: block; }
.nav-lang-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 14px; border: none; background: none;
  color: var(--text); font-size: 0.85rem; cursor: pointer;
  text-align: left; white-space: nowrap;
}
.nav-lang-opt:hover { background: var(--bg-glass-hover); }
.nav-lang-opt span { font-size: 1.1rem; }

/* --- Nav Menu (Burger) Button --- */
.nav-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 32px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
  transition: background var(--transition);
}
.nav-menu-btn:hover { background: var(--bg-glass-hover); }
.nav-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 1px;
  transition: all var(--transition);
}
.nav-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-menu-btn.open span:nth-child(2) { opacity: 0; }
.nav-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================================
   SITE MENU (Universal — right slide panel)
   ============================================================ */
.site-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.site-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1101;
  background: rgba(14,14,22,0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--border-glass);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.site-menu.open {
  transform: translateX(0);
}

.site-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-glass);
  flex-shrink: 0;
}
.site-menu-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.site-menu-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.site-menu-close:hover {
  background: var(--bg-glass-hover);
  color: var(--text);
}

.site-menu-body {
  flex: 1 1 0;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
}

/* Menu nav links */
.menu-nav-links {
  padding: 0 12px 8px;
}
.menu-nav-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.menu-nav-links a:hover {
  color: var(--text);
  background: var(--bg-glass);
}
.menu-nav-links a svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* Sports section divider */
.menu-sports-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.menu-sports-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-glass);
}

/* Sport item (accordion header) */
.menu-sport-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  transition: background var(--transition);
}
.menu-sport-item:hover {
  background: var(--bg-glass);
}
.menu-sport-badge {
  width: 28px;
  height: 28px;
  border-radius: 0;
  object-fit: contain;
  flex-shrink: 0;
}
.menu-sport-badge-fallback {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.menu-sport-name {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition);
}
.menu-sport-item:hover .menu-sport-name {
  color: var(--text);
}
.menu-sport-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition);
}
.menu-sport-toggle:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
.menu-sport-toggle:hover .menu-sport-chevron {
  color: #000;
}
.menu-sport-chevron {
  width: 16px;
  height: 16px;
  color: var(--brand-blue);
  transition: transform 0.25s ease, color 0.2s ease;
}
.menu-sport-item.open .menu-sport-chevron {
  transform: rotate(180deg);
}
.menu-sport-item.open .menu-sport-toggle {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
.menu-sport-item.open .menu-sport-toggle .menu-sport-chevron {
  color: #000;
}

/* League sub-list */
.menu-league-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0,0,0,0.15);
}
.menu-sport-item.open + .menu-league-list {
  max-height: 2000px;
}
.menu-league-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px 8px 48px;
  transition: background var(--transition);
}
.menu-league-item:hover {
  background: var(--bg-glass);
}
.menu-league-badge {
  width: 22px;
  height: 22px;
  border-radius: 0;
  object-fit: contain;
  flex-shrink: 0;
}
.menu-league-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.menu-league-item:hover .menu-league-name {
  color: var(--text);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: 80px 0 40px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,240,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(124,58,237,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,59,92,0.04) 0%, transparent 60%);
  animation: gradientShift 15s ease infinite;
  background-size: 200% 200%;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg-primary) 100%);
}

/* Grid pattern overlay */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.hero-content {
  text-align: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 24px;
  animation: fadeInUp 0.6s ease;
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--brand-blue);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.hero-title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  animation: fadeInUp 0.6s ease 0.1s both;
}

.hero-title .gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.6;
  animation: fadeInUp 0.6s ease 0.2s both;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  animation: fadeInUp 0.6s ease 0.3s both;
}

.hero-stats {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 48px;
  animation: fadeInUp 0.6s ease 0.4s both;
}

.hero-stat {
  text-align: center;
}

.hero-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.hero-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Hero preview card */
.hero-preview {
  animation: fadeInUp 0.8s ease 0.4s both;
}
#heroPreview {
  min-height: 480px;
  overflow: hidden;
}
.hero-preview-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, var(--brand-blue) 40%, var(--brand-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
  padding: 0 0 10px 2px;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, var(--brand-blue), var(--brand-orange), transparent) 1;
  text-shadow: 0 0 40px rgba(74,161,217,0.3);
}

/* Hero Spotlight */
.hero-spotlight-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 0 4px;
}
.hero-spotlight-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  position: relative;
}
.hero-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--brand-blue);
}
.hero-dot:hover:not(.active) {
  background: var(--bv-line);
}
.hero-more-btn {
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid var(--brand-blue);
  border-radius: 8px;
  color: var(--brand-blue);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.hero-more-btn:hover {
  background: var(--brand-blue);
  color: #fff;
}

/* ============================================================
   FIXTURE BROWSER (Date + Sport Filters + Fixtures)
   ============================================================ */
.fixture-browser {
  padding: 0 0 80px;
  position: relative;
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-title .accent {
  color: var(--accent);
}

.section-link {
  font-size: 0.875rem;
  color: var(--accent);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}

.section-link:hover { gap: 8px; }

.fixture-status-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.status-pill-live .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live, #ef4444);
  animation: pulse-live 1.5s infinite;
}

.section-subheader {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

/* Date Ribbon */
/* The date ribbon moved to bookvelt-components.css so the PANEL can use the
   SAME ribbon as the public calendar, markup and all. Both layouts load
   that file. Do not redefine .date-ribbon / .date-item here. (2026-09-01) */


@media (max-width: 768px) {
  .date-ribbon-today {
    width: 52px;
    height: 60px;
  }
  .drt-day { font-size: 1rem; }
  .date-item {
    min-width: 52px;
    width: 52px;
    height: 60px;
    padding: 6px 6px;
  }
  .date-ribbon-arrow {
    width: 20px;
    height: 60px;
  }
  .date-item-day { font-size: 1rem; }
}

/* --- Sport & League Filter --- */
.sport-filter {
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(74,161,217,0.05) 0%, rgba(15,15,25,0.6) 50%, rgba(243,147,34,0.03) 100%);
  border: 1px solid rgba(74,161,217,0.1);
  border-radius: var(--radius-sm);
  padding: 8px;
}

/* Tier 1: Sport Rail */
.sport-rail {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.sport-rail::-webkit-scrollbar { display: none; }

.sport-rail-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  background: none;
  border: none;
  color: inherit;
}
.sport-rail-item:hover {
  background: var(--bg-glass-hover);
}
.sport-rail-item.active {
  background: var(--brand-blue-dim);
}
.sport-rail-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--brand-blue);
  border-radius: 2px;
}

.sport-rail-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1.5px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all var(--transition);
}
.sport-rail-item.active .sport-rail-badge {
  border-color: var(--brand-blue);
  box-shadow: 0 0 12px var(--brand-blue-glow);
}
.sport-rail-badge img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.sport-rail-badge svg {
  width: 18px;
  height: 18px;
}

/* Labels removed — icon-only rail */

/* Tier 2: League Tray */
.league-tray {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
.league-tray.open {
  max-height: 56px;
  opacity: 1;
}

.league-tray-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0 4px;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.league-tray-scroll::-webkit-scrollbar { display: none; }

.league-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1.5px solid var(--border-glass);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.league-pill:hover {
  background: var(--bg-glass-hover);
}
.league-pill.active {
  background: var(--brand-blue-dim);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  box-shadow: 0 0 10px var(--brand-blue-glow);
}
.league-pill img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.league-pill svg {
  width: 16px;
  height: 16px;
}
.league-pill-letter {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .sport-rail-item {
    width: 42px;
    height: 42px;
  }
  .sport-rail-badge {
    width: 32px;
    height: 32px;
  }
  .sport-rail-badge img {
    width: 20px;
    height: 20px;
  }
  .league-pill {
    width: 32px;
    height: 32px;
  }
  .league-pill img {
    width: 18px;
    height: 18px;
  }
}

/* Date Status Bar */
/* date-status removed — calendar icon now lives in day separator bars */

/* Calendar Popup */
/* The date picker moved to bookvelt-components.css so the panel can use
   the SAME component as the public calendar. Both layouts load that file.
   Do not redefine .calendar-* here. (2026-09-01) */

/* ============================================================
   FIXTURE CARDS
   ============================================================ */
/* --- Date & Week Separators --- */
.big-games { margin: 4px 0 16px; }
.big-games-title {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px; margin-bottom: 10px;
  border: 1px solid var(--border, var(--bv-line-solid)); border-radius: var(--radius-sm, 8px);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--live, #ef4444);
}
.big-games-strip {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory; padding-bottom: 4px;
}
.big-games-strip::-webkit-scrollbar { display: none; }
.big-games-strip .fixture-card {
  flex: 0 0 340px; max-width: 340px; margin: 0; scroll-snap-align: start;
}
@media (max-width: 480px) {
  .big-games-strip .fixture-card { flex-basis: 300px; max-width: 300px; }
}

.date-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 12px;
  margin-bottom: 8px;
  padding: 0;
  background: none;
  border: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.date-separator::-webkit-scrollbar { display: none; }
.date-separator > * { flex: 0 0 auto; }
.date-separator .date-separator-btn {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
}
/* The date is a button, and a long date in a long language (or a narrow phone)
   no longer fits it. The label travels inside the button, right and back, so the
   whole date can be read without the row growing or the text being cut. JS
   measures the overrun and sets --marq; the calendar icon never moves. */
.date-separator-btn .dsb-track { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.date-separator-btn .dsb-text { display: inline-block; white-space: nowrap; will-change: transform; }
.date-separator-btn.is-marquee .dsb-text {
  animation: dsb-marquee var(--marq-time, 6s) ease-in-out infinite;
}
/* It rests at both ends, so the start and the end of the date are both readable. */
@keyframes dsb-marquee {
  0%, 16%  { transform: translateX(0); }
  50%, 66% { transform: translateX(calc(-1 * var(--marq, 0px))); }
  100%     { transform: translateX(0); }
}
.date-separator-btn:hover .dsb-text { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .date-separator-btn.is-marquee .dsb-text { animation: none; }
}
.date-separator .date-separator-count { margin-left: 0; }
.date-separator .view-switcher { display: inline-flex; gap: 6px; margin: 0 0 0 auto; }
.date-separator:first-child { margin-top: 0; }

/* This has to LOOK like a button. It never did: --border and --bg-hover are
   defined nowhere on this site, so `border: 1px solid var(--border)` was invalid
   at computed-value time and the whole declaration was dropped - width 0, style
   none - which is why the date read as bare text next to three bordered pills.
   Every token here carries a fallback, the way .view-pill already did. */
.date-separator-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  gap: 6px;
  background: var(--surface-2, #14141f);
  border: 1px solid var(--border, var(--bv-line-solid));
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.date-separator-btn:hover {
  background: var(--bg-hover, rgba(255,255,255,.06));
  border-color: var(--text-muted, #9aa0b4);
}
.date-separator-btn:active {
  transform: scale(0.97);
}
.date-separator-btn svg, .date-separator-btn i { color: var(--text-muted, #9aa0b4); }
.date-separator-btn svg { width: 12px; height: 12px; }
.date-separator.today .date-separator-btn {
  border-color: #66b32e; color: #66b32e; background: rgba(102, 179, 46, .12);
}
.date-separator.today .date-separator-btn:hover { background: rgba(102, 179, 46, .2); }
.date-separator.today .date-separator-btn svg,
.date-separator.today .date-separator-btn i { color: #66b32e; }
.date-separator.tomorrow .date-separator-btn {
  border-color: var(--accent, #4aa1d9); color: var(--accent, #4aa1d9);
  background: rgba(74, 161, 217, .12);
}
.date-separator.tomorrow .date-separator-btn:hover { background: rgba(74, 161, 217, .2); }
.date-separator.tomorrow .date-separator-btn svg,
.date-separator.tomorrow .date-separator-btn i { color: var(--accent, #4aa1d9); }
.date-separator-count {
  display: inline-flex !important; gap: 8px !important; align-items: center !important;
  background: none !important; border: none !important; padding: 0 !important;
  border-radius: 0 !important;
}
.date-separator-count .status-pill {
  font-size: 12px; font-weight: 700;
  padding: 0 8px; border-radius: var(--radius-sm, 8px);
  display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap; line-height: 1; height: 28px; min-width: 28px; box-sizing: border-box;
}
.date-separator-count .status-pill-live {
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
  color: var(--live, #ef4444);
}
.date-separator-count .status-pill-live .live-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--live, #ef4444);
  animation: pulse-live 1.5s infinite;
}
.date-separator-count .status-pill-upcoming,
.date-separator-count .status-pill-results {
  background: rgba(255,255,255,0.05); border: 1px solid var(--bv-line);
  color: var(--text-muted);
}

.week-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  margin-top: 12px;
}
.week-separator span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 16px;
  position: relative;
}
.week-separator span::before,
.week-separator span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: var(--border-glass);
}
.week-separator span::before { right: 100%; }
.week-separator span::after { left: 100%; }

.league-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px 4px;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.league-group-header img {
  border-radius: 4px;
  object-fit: contain;
}
.league-group-count {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.6;
}
.date-separator + .league-group-header { margin-top: 0; padding-top: 6px; }

.fixture-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fixture-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin-bottom: 20px;
  background: transparent;
  border: 0;
}

.fixture-card-main {
  display: grid;
  /* ONE side-column width for every card shape, so the chevron sits in the same
     place whatever the sport. Motorsport has three columns instead of five and
     used to hardcode its own 60px, which stayed 60px on mobile while the team
     card dropped to 32px: the F1 chevron then sat well left of every other one.
     minmax(0, 1fr) rather than 1fr because a long pair of team names pushed the
     grid past its own padding box at ~400px and the chevron overflowed the card
     to the RIGHT, which was the same misalignment seen from the other side. */
  --fx-side: 60px;
  grid-template-columns: var(--fx-side) minmax(0, 1fr) auto minmax(0, 1fr) var(--fx-side);
  align-items: center;
  padding: 16px 20px;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  /* Roboto Condensed for all text inside the fixture card head — team names,
     date, time, round, score, period, status — uniform tight UI display. */
  font-family: var(--font-condensed);
}
.fixture-card-main,
.fixture-card-main *:not(i):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-thin):not(.fa-light):not(.fa-sharp):not(.fa-duotone):not([class*="fa-"]) { font-family: var(--font-condensed); }

/* When the card has a footer (the blue "Watch at N" strip) the main row
   loses its bottom radius/border so the two visually merge into ONE card.
   Only applies when the card is CLOSED — once opened, the footer is hidden
   and the main row recovers its full rounded shape. */
.fixture-card:not(.card-open) .fixture-card-main:has(+ .fixture-card-footer) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

/* When the card has a .fixture-card-bottom strip (used on location-detail
   event lists for TV pills + tables + seats + BOOK), the chevron toggles
   its visibility. CLOSED = strip hidden, full rounded card. OPEN = strip
   visible, main row loses bottom radius/border so they merge into ONE card. */
.fixture-card.card-open .fixture-card-main:has(+ .fixture-card-bottom) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.fixture-card-bottom {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-top: 0;
  border-left: 3px solid var(--accent);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.fixture-card.card-open .fixture-card-bottom {
  display: flex;
}
.fixture-card-bottom .ev-footer-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fixture-card-bottom > .bookvelt-btn,
.fixture-card-bottom > .ev-footer-ticket-btn {
  margin-left: auto;
}
/* TV count pill = default visible. When hovered (desktop) or tapped (mobile
   via .is-expanded), the colored TV 1..N pills (sibling .tvs-list) appear
   on a NEW ROW under the count-pill row. flex-basis: 100% forces its own
   line inside the parent flex-wrap. Works under ANY parent (fixture-card
   strips, .fixture-opener rows, etc.) — selector is parent-agnostic. */
.tvs-pill-wrap {
  display: inline-flex;
  outline: none;
}
.tvs-list { display: none; }
/* Opening a fixture card with its chevron reveals the exact screens the event
   is on, and closing it takes them away with the rest of the strip. The hover
   and tap routes above still work while the card is closed. */
.fixture-card.tvs-open .tvs-list,
:has(> .tvs-pill-wrap:hover) > .tvs-list,
:has(> .tvs-pill-wrap:focus-within) > .tvs-list,
:has(> .tvs-pill-wrap.is-expanded) > .tvs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-basis: 100%;
  width: 100%;
  margin-top: 4px;
}

.fixture-card:hover .fixture-card-main {
  border-color: var(--border-glow);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}
.fixture-card:active .fixture-card-main {
  transform: scale(0.985);
  box-shadow: none;
}

/* Motorsport card: 3-column layout (league | event+info | status). It reads the
   SAME --fx-side as the team card, so the two can never drift apart again. */
.fixture-card-main.fixture-motorsport {
  grid-template-columns: var(--fx-side) minmax(0, 1fr) var(--fx-side);
}
.fixture-motor-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.fixture-motor-event {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.fixture-motor-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fixture-league {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fixture-league img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.fixture-league-name {
  display: none;
}

.fixture-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
/* The badge and the name sit in inline links, and an inline link around an image
   keeps a descender line box under it: the name sat 18px under the badge when the
   gap said 6. Flex links have no line box (owner 2026-09-21: "move team name text
   closer to badges, all cards"). */
.fixture-team > a { display: flex; justify-content: center; line-height: 0; }
.fixture-team > a .fixture-team-name { line-height: 1.2; }

.fixture-team img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.fixture-team-name {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.2;
  max-width: 100px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.fixture-status-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* With an age chip the column carries two controls, so it stacks: chip on top
   of the opener, both centred on the card's right edge. Without one it has a
   single child and a column reads exactly like a row, so this is safe for
   every list that sends no age. */
.fixture-status-col {
  flex-direction: column;
  gap: 6px;
}
/* The age chip stacks ON TOP of the chevron, centred on it. Both open the card,
   so both carry the pointer. */
.fixture-status-col .status-pill {
  flex-direction: column; gap: 8px; justify-content: center;
}
/* An upcoming card's dot is transparent, so in a column it was pure dead space
   above the chip and pushed the pair off the card's centre line. */
.fixture-status-col .status-pill > .status-dot:not(.live):not(.ft) { display: none; }
.fixture-age-chip { display: block; line-height: 1; }
.fixture-age-chip .age-chip { cursor: pointer; }
.ed-footer-age { margin-top: 10px; }
.ed-age-note {
  margin: 8px 0 0; font-size: 0.82rem; color: var(--text-muted);
}

.status-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  background: none;
}
/* Hide the redundant dot — bookable state is already conveyed by the
   chevron's blue glow + sweep animation. The dot was creating a vertical
   stack that pushed the chevron to the bottom of the card, where its
   pulse ring would bleed into the blue footer strip. */
.status-pill .status-dot { display: none; }

.status-pill .status-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  position: relative;
}
.status-pill .status-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.status-pill .status-dot.live::after {
  background: #ef4444;
  animation: pulse-live 1.5s ease-in-out infinite;
}
.status-pill .status-dot.ft::after { background: var(--text-muted); }
.status-pill .status-dot.cancelled::after { background: var(--brand-orange); }

/* Bookable fixtures: orange pulsating dot, blue pulsating chevron.
   Live always wins — keep red dot for live games even when bookable. */
.fixture-card.card-bookable .status-dot:not(.live)::after,
.fixture-card.card-live-bookable .status-dot:not(.live)::after,
.fixture-card.card-starting-bookable .status-dot:not(.live)::after {
  background: var(--brand-orange);
  animation: pulse-bookable 2s ease-in-out infinite;
}
/* Removed pulse-chevron 2s background flash + chevron-pulse 3.5s box-shadow ring
   — both produced offset blue arc artifacts on certain devices. Chevron is now
   static; clickability/openness are conveyed by the chevron-up icon + card-open
   rotation alone. */

.status-pill .status-dot {
  transition: background 0.2s ease;
}
.status-pill .status-dot:hover {
  background: rgba(255,255,255,0.12);
}

.status-chevron-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* No background: the regular/circle-chevron icon draws its own outline. The
     solid weight is a FILLED disc, which reads as a grey blob on a dark card
     and fights the age chip stacked above it. */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}
.status-chevron-wrap > i {
  font-size: 26px;
  line-height: 1;
}
/* Placeholder where a past card's dead chevron used to be. It reserves the same
   36px so a list of past and future cards still has one right edge. */
.card-opener-empty { display: inline-block; width: 36px; height: 36px; }
/* W / D / L chip in the opener slot of a team's Results row (2026-09-21) */
.fixture-outcome { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 5px; border-radius: 7px; font-weight: 800; font-size: .8rem; color: #fff; background: #3b4252; letter-spacing: 0; }
.fixture-outcome.W { background: #22c55e; }
.fixture-outcome.L { background: #ef4444; }

/* LIVE dot, in place of the chevron on a live card (owner 2026-09-03). Sized to
   the 36px the opener occupied so the right edge of every card still lines up.
   The ring is a separate ::after so the core stays solid while it breathes. */
.fixture-live-dot {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* The CORE stays solid. Reusing pulse-live here faded it to 0.4 opacity for half
   of every cycle, which made the dot read as dim red on a dark card rather than
   as a live indicator. It breathes by SIZE instead, so it is full strength in
   every frame, and the ring below carries the pulse. */
.fixture-live-dot::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--live, #ff3b5c);
  animation: live-dot-core 1.8s ease-in-out infinite;
}
@keyframes live-dot-core {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.fixture-live-dot::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: live-dot-ring 1.8s ease-out infinite;
}
@keyframes live-dot-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(255, 59, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fixture-live-dot::before { animation: none; transform: none; }
  .fixture-live-dot::after { animation: none; box-shadow: 0 0 0 3px rgba(255, 59, 92, 0.25); }
}

/* CARD OPENER (Stage 47 rebuild — single clean button, no nested wrappers, no
   stray status-dot). The icon carries its own circle outline (FA
   solid/circle-chevron-down) and is never rotated or recoloured by open state. */
.card-opener {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.card-opener > i {
  font-size: 28px;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.card-opener:hover { color: var(--brand-blue); }

/* ONE chevron, the same closed and open (owner 2026-09-03).
   It used to be three different things at once: the icon flipped (down when
   shut, up when open), the colour changed (muted, then brand blue), and a
   `opener-pulse` ring ran on bookable cards and stopped the moment one opened.
   So the same control had four appearances depending on card state, which is
   what the owner was looking at. The glyph is now `circle-chevron-down` in the
   markup, never rotated, never recoloured by state: it points at the drawer,
   which is below it whether the drawer is out or not. Openness is carried by
   the drawer itself being visible, which is the honest signal. */
.card-opener > i { transform: none; }

/* Reversed 2026-09-07: the owner asked for the open card to read differently
   from a shut one. Only the ROTATION comes back, not the colour change and not
   the pulse ring, because those were the three-things-at-once the 2026-09-03
   rule was about. The chevron points down at a closed drawer and up at an open
   one, which is the one honest thing it can say. */
.fixture-card.card-open .card-opener > i { transform: rotate(180deg); }

/* A card that HAS something to open is blue, one that does not is muted. That
   is a property of the card, not of whether it happens to be open. */
.fixture-card.card-bookable .card-opener,
.fixture-card.card-live-bookable .card-opener,
.fixture-card.card-starting-bookable .card-opener,
.fixture-card:has(.fixture-card-bottom) .card-opener,
.fixture-card:has(.fixture-card-body) .card-opener {
  color: var(--brand-blue, #4aa1d9);
}
@media (prefers-reduced-motion: reduce) {
  .status-chevron-wrap { animation: none; box-shadow: none; }
}

/* Down when closed, up when open, and the two CROSS-FADE. Never a 180deg flip:
   a rotating chevron reads as a spinner mid-turn, and the owner ruled it out
   twice. Both icons are stacked on the same spot and only opacity moves, so
   nothing shifts by a pixel as the card opens. A wrap that carries only one
   chevron, which is most of the site, is untouched by these rules. */
.status-chevron {
  color: var(--text-muted, #9aa0b4);
  transition: color 0.2s ease, opacity 0.18s ease;
}
.status-chevron-wrap:hover .status-chevron { color: var(--brand-blue, #4aa1d9); }

/* The swap fades: opacity out, the class changes, opacity in. Never absolute
   positioning, because the glyph's advance is far wider than its element box
   and centring the box does not centre the painted circle. */
.status-chevron.is-swapping { opacity: 0; }
.card-open .status-chevron { color: var(--brand-blue, #4aa1d9); }

.fixture-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}

.fixture-time {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  font-family: var(--font-condensed);
}

.fixture-date-sm {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.fixture-date {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.fixture-score {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.05em;
  display: block;
}

.fixture-score.live { color: #fff; }

.fixture-status {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fixture-status.live { color: var(--live); }
.fixture-status.finished { color: var(--text-secondary); }
.fixture-status.cancelled { color: var(--brand-orange); }

.fixture-period {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
}

.fixture-extra {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.fixture-sets {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.status-dot.cancelled { background: var(--brand-orange); }

.fixture-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

.fixture-status-badge.live {
  background: var(--live-dim);
  color: var(--live);
}

.fixture-status-badge.live .live-dot {
  width: 6px;
  height: 6px;
  background: var(--live);
  border-radius: 50%;
  animation: livePulse 1.5s infinite;
}

.fixture-status-badge.ft {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}

.fixture-status-badge.upcoming {
  background: var(--accent-dim);
  color: var(--accent);
}

.fixture-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding-left: 8px;
}

/* Bookable strip — visible when card is CLOSED, hidden once the card is open
   (the openers below replace it as the visible CTA). */
.fixture-card-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--brand-blue);
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-top: 0;
  border-left: 3px solid var(--accent);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
/* Diagonal glide shine across the blue strip — moved here from the chevron
   opener (Stage 47). Self-contained: overflow:hidden on the parent keeps the
   gradient inside. Skips when prefers-reduced-motion. */
.fixture-card-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 38%,
    var(--bv-line) 50%,
    transparent 62%) 200% 0 / 250% 100% no-repeat;
  animation: footer-shine 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.fixture-card-footer > * { position: relative; z-index: 1; }
@keyframes footer-shine {
  0%   { background-position: 200% 0; }
  55%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fixture-card-footer::before { animation: none; opacity: 0; }
}
.fixture-card.card-open .fixture-card-footer {
  display: none;
}
/* Space between the merged head (main+footer) and the openers below. */
.fixture-card-footer + .fixture-card-body,
.fixture-card-main + .fixture-card-body {
  margin-top: 8px;
}
.fixture-card-footer svg {
  color: #000;
  flex-shrink: 0;
}
.fixture-card-footer:hover {
  background: #3a91c9;
}

/* Fixture card body — transparent container; the openers inside carry their own boxes */
.fixture-card-body {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  background: transparent;
  border-top: none;
  cursor: default;
  font-size: 0.75rem;
}
.fixture-card.card-open .fixture-card-body {
  display: flex;
}

.fixture-card-body .footer-text {
  color: var(--text-muted);
  font-weight: 500;
  padding: 2px 0;
}

.fixture-card-body.footer-bookable .footer-text {
  color: var(--accent);
}

.fixture-card-body.footer-live .footer-text,
.fixture-card-body.footer-starting .footer-text {
  color: var(--brand-orange);
}

/* No venue is showing this one yet. It used to be one italic muted sentence
   under the card, styled like an error and offering nothing. It is a panel now,
   and it carries the way out: Request Event, which opens Coach with the game,
   the date, the time and the fixture's link. */
.fx-demand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-secondary, rgba(255,255,255,.04));
  border: 1px solid var(--border, var(--bv-line-solid));
}
.fx-demand-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--text-muted, #9aa0b4);
}
.fx-demand-text {
  flex: 1 1 140px; min-width: 0;
  color: var(--text-muted, #9aa0b4);
  font-size: .74rem; font-weight: 500; line-height: 1.35;
}
.fx-demand-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 30px; padding: 0 13px; border-radius: 8px;
  background: var(--accent, #4aa1d9); color: #0b0b14;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .12s;
}
.fx-demand-btn:hover { background: #3a91c9; transform: translateY(-1px); }
.fx-demand-btn:active { transform: none; }
.fx-demand-btn i { font-size: 13px; line-height: 1; }
/* Narrow cards: the button takes the second line rather than squeezing the text. */
@media (max-width: 420px) {
  .fx-demand { gap: 8px; padding: 9px 10px; }
  .fx-demand-btn { flex: 1 1 100%; justify-content: center; }
}

.footer-watch-text {
  color: var(--text-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  padding-bottom: 0 !important;
}
.footer-bookable-text {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

.flr-sep {
  border-top: 1px solid var(--border-glass);
  margin: 0;
}

.footer-location-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.flr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flr-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flr-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
}

.flr-loc svg {
  color: var(--accent);
  flex-shrink: 0;
}

.flr-geo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.flr-geo svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.flr-avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.flr-avail svg {
  color: var(--accent);
  flex-shrink: 0;
}

.footer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--accent-dim);
  border: 1px solid var(--border-glow);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  transition: background var(--transition);
  margin-left: auto;
}

.footer-action-btn svg, .ev-footer-ticket-btn svg {
  flex-shrink: 0;
  vertical-align: middle;
}

.footer-action-btn:hover {
  background: rgba(74,161,217,0.25);
}

/* Event card footer — hidden by default, shown on card-open */
.fixture-card-body.ev-footer {
  gap: 0;
}

/* Single strip — flexbox row on desktop, wraps on mobile */
.ev-footer-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}

.ev-footer-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.ev-footer-loc svg {
  color: var(--accent);
  flex-shrink: 0;
}

.ev-footer-geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ev-footer-geo svg {
  color: var(--accent);
  flex-shrink: 0;
}

.ev-footer-pills {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.ev-cat-pill {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
}

.ev-footer-avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ev-footer-avail svg {
  color: var(--accent);
  flex-shrink: 0;
}
.ev-footer-avail strong {
  color: var(--text);
  font-weight: 600;
}

.ev-footer-ticket-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent);
  border-radius: 6px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.2s;
}
.ev-footer-ticket-btn:hover {
  background: #3a8bc2;
}

/* Desktop: single row — location | city | pills | avail | tickets */
@media (min-width: 640px) {
  .ev-footer-strip {
    flex-wrap: nowrap;
  }
}

/* Mobile: multi-row */
@media (max-width: 639px) {
  .ev-footer-strip {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    align-items: center;
  }
  .ev-footer-loc { grid-column: 1; }
  .ev-footer-geo { grid-column: 2; justify-self: end; }
  .ev-footer-pills { grid-column: 1 / -1; }
  .ev-footer-avail { grid-column: 1; }
  .ev-footer-ticket-btn { grid-column: 2; justify-self: end; margin-left: 0; }
}

/* Fixture card state classes — unified accent border */
.fixture-card.card-past {
  opacity: 1;
}

.fixture-card.card-bookable .fixture-card-main,
.fixture-card.card-live .fixture-card-main,
.fixture-card.card-live-bookable .fixture-card-main,
.fixture-card.card-starting .fixture-card-main,
.fixture-card.card-starting-bookable .fixture-card-main,
.fixture-card.card-unavailable .fixture-card-main {
  border-left-color: var(--accent);
}

/* Empty state — compact single line */
.fixture-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  color: var(--text-secondary);
  font-size: 0.82rem;
}
.fixture-empty svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.next-fixtures-section {
  margin-top: 8px;
}

.next-fixtures-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 0 8px;
  border-top: 1px solid var(--bv-line);
}

.more-events-section {
  margin-top: 8px;
}
.more-events-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 0 8px;
  border-top: 1px solid var(--bv-line);
}

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  background: none;
  border-radius: 0;
  padding: 0;
  border: none;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all var(--transition);
  white-space: nowrap;
  min-width: fit-content;
  background: linear-gradient(135deg, rgba(74,161,217,0.06) 0%, rgba(15,15,25,0.8) 50%, rgba(243,147,34,0.04) 100%);
  border: 1px solid rgba(74,161,217,0.1);
}

.tab:hover {
  color: var(--text);
  border-color: rgba(74,161,217,0.25);
}
.tab:active {
  transform: scale(0.95);
}

/* The selected tab is the brand blue button, white ink (owner 2026-09-28, "make better button
   for selected": the tinted box read the same as its neighbours). */
.tab.active {
  background: var(--accent, #4aa1d9);
  color: #fff;
  border-color: var(--accent, #4aa1d9);
  box-shadow: var(--bv-lift);
}
.tab.active i { color: #fff; }

.tab .tab-count {
  font-size: 0.7rem;
  background: var(--accent-dim);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 6px;
}

.tab.active .tab-count {
  background: #fff;
  color: var(--accent, #4aa1d9);
}

.tab .live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 4px;
  vertical-align: middle;
  animation: pulse-live 1.5s ease-in-out infinite;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes pulse-bookable {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(243,147,34,0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 6px 2px rgba(243,147,34,0.3); }
}

@keyframes pulse-chevron {
  0%, 100% { background: rgba(74,161,217,0.2); }
  50% { background: rgba(74,161,217,0.4); }
}

/* ============================================================
   BROWSE SPORTS & LEAGUES
   ============================================================ */
.browse-section {
  padding: 60px 0;
  scroll-margin-top: var(--nav-height);
}

/* Browse groups (World Sports, Soccer Leagues, Made in the USA) */
.browse-group {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-bottom: 12px;
}

.browse-group-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px 0;
}
.browse-group-title .accent {
  color: var(--brand-blue);
}
.browse-group-title .usa-u { color: #B31942; }
.browse-group-title .usa-s { color: #FFFFFF; }
.browse-group-title .usa-a { color: var(--brand-blue);
}

.browse-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* equal spacing on both axes; left-packed: centering left huge empty gutters on short rows and floated the
     orphan row of a wrapped group in the middle */
  justify-content: flex-start;
}

.browse-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 52px;
  cursor: pointer;
  transition: transform var(--transition);
}
.browse-badge:hover {
  transform: translateY(-2px);
}
.browse-badge:active {
  transform: scale(0.92);
}

.browse-badge-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.browse-badge-img img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.browse-badge-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}

.browse-badge-name {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.15;
  max-width: 52px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
  .browse-section { padding: 40px 0; }
  .browse-group { padding: 12px 14px 16px; }
  .browse-soccer-leagues .browse-badge:nth-child(n+17) { display: none; }
  .browse-group-title { font-size: 1.1rem; margin-bottom: 10px; }
  /* left-packed like desktop: the old 4-column grid stretched each cell far wider
     than the 38px badge, leaving big gaps between crests */
  .browse-badges-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
  .browse-badge { width: 54px; }
  .browse-badge-img {
    width: 42px;
    height: 42px;
    border-radius: 9px;
  }
  .browse-badge-img img {
    width: 30px;
    height: 30px;
  }
  .browse-badge-name {
    font-size: 0.5rem;
    max-width: 54px;
  }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-section {
  padding: 60px 0;
  position: relative;
  scroll-margin-top: var(--nav-height);
}

.how-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(124,58,237,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.how-tracks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

/* Force equal column widths regardless of intrinsic content size */
@media (min-width: 640px) {
  .how-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.how-track {
  position: relative;
}

.how-track-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.how-track-title .icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.how-track-title .icon.is-fans {
  background: var(--accent-dim);
}

.how-track-title .icon.bars {
  background: var(--accent2-dim);
}

.how-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.how-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.how-step:hover {
  border-color: var(--border-glow);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.how-step-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 2rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: hiw-float 3.6s ease-in-out infinite;
}

.is-fans .how-step-icon {
  background: linear-gradient(135deg, rgba(74,161,217,0.25), rgba(74,161,217,0.08));
  color: var(--accent, #4aa1d9);
  box-shadow: inset 0 0 0 1px rgba(74,161,217,0.25), 0 4px 16px rgba(74,161,217,0.15);
}

.is-bars .how-step-icon {
  background: linear-gradient(135deg, rgba(243,146,32,0.25), rgba(243,146,32,0.08));
  color: var(--accent2, #f39220);
  box-shadow: inset 0 0 0 1px rgba(243,146,32,0.25), 0 4px 16px rgba(243,146,32,0.15);
}

/* Stagger float so icons don't bob in sync */
.how-steps .how-step:nth-child(1) .how-step-icon { animation-delay: 0s; }
.how-steps .how-step:nth-child(2) .how-step-icon { animation-delay: 0.6s; }
.how-steps .how-step:nth-child(3) .how-step-icon { animation-delay: 1.2s; }

@keyframes hiw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.how-step:hover .how-step-icon {
  animation-play-state: paused;
  transform: scale(1.08);
}

.how-step-content {
  flex: 1;
  min-width: 0;
}

.how-step-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: normal;
}

.how-step-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
  .how-step-icon { animation: none; }
}

/* ============================================================
   FEATURED BARS
   ============================================================ */
.bars-section {
  padding: 60px 0;
  scroll-margin-top: var(--nav-height);
}

.bars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.bar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}

.bar-card:hover {
  border-color: var(--border-glow);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.bar-card:active {
  transform: scale(0.98);
  box-shadow: none;
}

.bar-card-image {
  height: 160px;
  background: var(--bg-glass);
  position: relative;
  overflow: hidden;
}

.bar-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bar-card-image .bar-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--border-glow);
}

.bar-card-body {
  padding: 16px;
}

.bar-card-name {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.bar-card-location {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

.bar-card-sports {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.bar-card-sport-tag {
  padding: 3px 8px;
  background: var(--bg-glass);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.bar-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.bar-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   UPCOMING EVENTS (homepage)
   ============================================================ */
.events-home-section {
  padding: 60px 0;
  scroll-margin-top: var(--nav-height);
}
.events-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.ev-home-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s, transform 0.2s;
}
.ev-home-card:hover {
  border-color: var(--brand-blue-dim);
  transform: translateY(-2px);
}
.ev-home-card-league {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ev-home-card-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.ev-home-card-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}
.ev-home-card-vs {
  font-size: 0.75rem;
  color: var(--text-muted, #9aa0b4);
  text-transform: uppercase;
  font-weight: 700;
}
/* Motorsport has no teams. This grid drew the team layout anyway, so an F1
   session came out as two empty badge slots either side of a bare "vs" with the
   session name nowhere on the card. It gets the event name instead, filling the
   same vertical space the two badge columns would have. */
.ev-home-card-solo {
  flex-direction: column;
  gap: 8px;
  text-align: center;
  min-height: 96px;
  padding: 0 8px;
}
.ev-home-card-event {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #e4e4e7);
  line-height: 1.3;
}
.ev-home-card-round {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #9aa0b4);
}
.ev-home-card-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--brand-blue);
  font-weight: 500;
}
.ev-home-card-venue {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}

/* ============================================================
   FAVORITES TEASER
   ============================================================ */
.favorites-section {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  scroll-margin-top: var(--nav-height);
}

.favorites-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,240,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.favorites-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.favorites-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.favorites-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.favorites-badges {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.favorites-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  animation: float 3s ease infinite;
}

.favorites-badge:nth-child(2) { animation-delay: 0.3s; }
.favorites-badge:nth-child(3) { animation-delay: 0.6s; }
.favorites-badge:nth-child(4) { animation-delay: 0.9s; }
.favorites-badge:nth-child(5) { animation-delay: 1.2s; }
.favorites-badge:nth-child(6) { animation-delay: 1.5s; }

.favorites-badge:hover {
  border-color: var(--accent);
  transform: scale(1.15);
}
.favorites-badge:active {
  transform: scale(0.9);
}

.favorites-badge img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  padding: 60px 0;
  scroll-margin-top: var(--nav-height);
}

.cta-box {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 0%, rgba(0,240,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 70% 100%, rgba(124,58,237,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.cta-box > * { position: relative; z-index: 1; }

.cta-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.cta-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.social-logins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  transition: all var(--transition);
}

.social-btn:hover {
  background: var(--bg-glass-hover);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}
.social-btn:active {
  transform: scale(0.96);
}

.social-btn svg {
  width: 18px;
  height: 18px;
}

.cta-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.cta-divider::before,
.cta-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-glass);
}

.signup-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.signup-buttons .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.signup-buttons .btn svg { flex-shrink: 0; }
.signup-buttons .btn-whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.signup-buttons .btn-whatsapp:hover {
  background: #1ebe57;
  border-color: #1ebe57;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 48px 0 24px;
  border-top: 1px solid var(--border-glass);
  padding-bottom: calc(var(--bottom-nav-height) + 24px);
  background: var(--bg-secondary);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-logo-link { display: inline-block; }

.footer-brand-img {
  height: 28px;
  width: auto;
}

.footer-brand-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  transition: all var(--transition);
}

.footer-social a:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue-dim);
  background: var(--brand-blue-dim);
}

.footer-link-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}

.footer-col a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.footer-col a:hover { color: var(--brand-blue); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--border-glass);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-startivent-logo {
  height: 14px;
  width: auto;
  opacity: 0.5;
}

/* ============================================================
   STATIC PAGES (About, Partners)
   ============================================================ */
.static-hero {
  position: relative;
  padding: 120px 0 60px;
  overflow: hidden;
}

.static-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(74,161,217,0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(124,58,237,0.08) 0%, transparent 50%);
  z-index: 0;
}

.static-hero .container { position: relative; z-index: 1; }

.static-hero-content {
  max-width: 680px;
}

.static-hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 20px;
  letter-spacing: -0.02em;
}

.static-hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 560px;
}

.static-page {
  padding: 24px 0 60px;
}

.sp-section {
  margin-bottom: 64px;
}

.sp-section-header {
  text-align: center;
  margin-bottom: 40px;
}

.sp-section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sp-section-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 12px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.accent { color: var(--brand-blue); }

.sp-grid {
  display: grid;
  gap: 20px;
}

.sp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Ultra plan feature-grid. 3 columns on desktop, stacks to 1 on mobile.
   Column separators become a bottom-border when stacked. */
.sp-ultra-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.sp-ultra-grid > div {
  padding: 28px 32px;
  border-right: 1px solid rgba(74, 161, 217, 0.1);
}
.sp-ultra-grid > div:last-child { border-right: 0; }
@media (max-width: 860px) {
  .sp-ultra-grid { grid-template-columns: 1fr; }
  .sp-ultra-grid > div {
    padding: 24px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(74, 161, 217, 0.1);
  }
  .sp-ultra-grid > div:last-child { border-bottom: 0; }
}

/* Ultra header + CTA bar mobile padding. The desktop values (52px/40px /
   28px 40px) feel cramped under 480px. */
@media (max-width: 640px) {
  .sp-ultra-head { padding: 48px 20px 28px !important; }
  .sp-ultra-head > span { font-size: 1.6rem !important; }
  .sp-ultra-head > p { font-size: 0.95rem !important; }
  .sp-ultra-cta { padding: 20px !important; gap: 14px !important; }
  .sp-ultra-cta > a { width: 100%; text-align: center; }
}

.sp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color var(--transition), transform var(--transition);
}

.sp-card:hover {
  border-color: var(--bv-line);
  transform: translateY(-2px);
}

.sp-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 16px 0 10px;
}

.sp-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.sp-card-accent {
  border-color: var(--brand-blue-dim);
  background: linear-gradient(135deg, rgba(74,161,217,0.06) 0%, var(--bg-card) 60%);
}

.sp-card-accent2 {
  border-color: var(--accent2-dim);
  background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, var(--bg-card) 60%);
}

.sp-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-blue-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
}

.sp-icon-circle.accent2 {
  background: var(--accent2-dim);
  color: var(--accent2);
}

/* Features with number */
.sp-feature {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  transition: border-color var(--transition);
}

.sp-feature:hover {
  border-color: var(--bv-line);
}

.sp-feature-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-blue);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 12px;
}

.sp-feature h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.sp-feature p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Feature cards (icon + text side by side) */
.sp-feature-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  transition: border-color var(--transition);
}

.sp-feature-card:hover {
  border-color: var(--bv-line);
}

.sp-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--brand-blue-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-feature-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.sp-feature-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Stats bar */
.sp-stats-bar {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(74,161,217,0.08) 0%, rgba(124,58,237,0.08) 100%);
  border: 1px solid var(--border-glass);
  flex-wrap: wrap;
}

.sp-stat {
  text-align: center;
}

.sp-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.sp-stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Steps */
.sp-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
}

.sp-step {
  display: flex;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
}

.sp-step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-step-content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.sp-step-content p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Company card */
.sp-company-card {
  display: flex;
  gap: 24px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  align-items: flex-start;
  max-width: 640px;
  margin: 0 auto;
}

.sp-company-logo {
  height: 24px;
  width: auto;
  flex-shrink: 0;
  margin-top: 4px;
}

.sp-company-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.sp-company-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.sp-company-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Pricing card */
.sp-pricing-card {
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--brand-blue-dim);
  overflow: hidden;
}

.sp-pricing-header {
  padding: 32px;
  text-align: center;
  background: linear-gradient(135deg, rgba(74,161,217,0.1) 0%, rgba(74,161,217,0.03) 100%);
  border-bottom: 1px solid var(--border-glass);
}

.sp-pricing-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
  font-weight: 600;
}

.sp-pricing-value {
  margin-top: 8px;
}

.sp-pricing-amount {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sp-pricing-plus {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.sp-pricing-list {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sp-pricing-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* CTA block */
.sp-cta {
  text-align: center;
  padding: 48px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(74,161,217,0.1) 0%, rgba(124,58,237,0.08) 100%);
  border: 1px solid var(--border-glass);
}

.sp-cta h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 12px;
}

.sp-cta p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.sp-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tier cards */
.sp-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sp-tier-card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-glass); padding: 28px 24px; display: flex; flex-direction: column; position: relative; }
.sp-tier-featured { border-color: var(--brand-blue); box-shadow: 0 0 24px rgba(74,161,217,0.1); }
.sp-tier-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--brand-blue); color: #fff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 14px; border-radius: 20px; white-space: nowrap; }
.sp-tier-header { margin-bottom: 8px; }
.sp-tier-name { display: block; font-size: 1.1rem; font-weight: 700; color: #fff; }
.sp-tier-price { display: block; font-size: 1.6rem; font-weight: 800; color: var(--brand-blue); margin-top: 4px; }
.sp-tier-desc { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 20px; }
.sp-tier-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sp-tier-features li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary); }
.sp-tier-disabled { opacity: 0.45; }
.sp-tier-btn { width: 100%; text-align: center; margin-top: auto; }

@media (max-width: 900px) { .sp-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sp-tiers { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .sp-stats-bar { gap: 24px; padding: 28px 20px; }
  .sp-stat-value { font-size: 1.5rem; }
  .sp-company-card { flex-direction: column; }
  .sp-feature-card { flex-direction: column; gap: 12px; }
  .static-hero { padding: 100px 0 40px; }
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}

.faq-item[open] {
  border-color: rgba(74,161,217,0.3);
}

.faq-question {
  padding: 18px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
  transition: color var(--transition);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-question::after {
  transform: rotate(-135deg);
}

.faq-question:hover { color: var(--brand-blue); }

.faq-answer {
  padding: 0 24px 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ============================================================
   HELP / SUPPORT CARDS
   ============================================================ */
.help-topic-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), transform var(--transition);
}

a.help-topic-card:hover {
  border-color: rgba(74,161,217,0.3);
  transform: translateY(-2px);
}

.help-topic-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.help-topic-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.help-guide-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
}

.help-guide-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-blue-dim);
  color: var(--brand-blue);
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-guide-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.help-guide-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.help-link-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-link-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.help-link-list a::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-blue);
  opacity: 0.5;
  flex-shrink: 0;
}

.help-link-list a:hover { color: var(--brand-blue); }

/* ============================================================
   KB SIDEBAR LAYOUT
   ============================================================ */
.kb-page.static-page {
  display: grid !important;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 80px;
}

.kb-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 16px 0;
  border-right: 1px solid var(--border-glass);
}

.kb-sidebar::-webkit-scrollbar { width: 3px; }
.kb-sidebar::-webkit-scrollbar-thumb { background: var(--border-glass); border-radius: 3px; }

.kb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 16px;
}

.kb-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
  border-left: 2px solid transparent;
}

.kb-nav-link:hover {
  color: var(--text);
  background: var(--bg-glass);
}

.kb-nav-link.active {
  color: var(--brand-blue);
  background: rgba(74,161,217,0.06);
  border-left-color: var(--brand-blue);
  font-weight: 600;
}

.kb-nav-link svg {
  flex-shrink: 0;
  opacity: 0.4;
}

.kb-nav-link.active svg {
  opacity: 1;
}

.kb-content {
  min-width: 0;
  max-width: 800px;
}

.kb-section {
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--border-glass);
  scroll-margin-top: 80px;
}

.kb-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.kb-section > h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.kb-section-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 28px;
}

.kb-section .faq-list {
  max-width: none;
}

.kb-article {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 14px;
  transition: border-color var(--transition);
}

.kb-article:hover {
  border-color: var(--bv-line);
}

.kb-article h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #fff;
}

.kb-article-body {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.kb-article-body strong {
  color: var(--text);
  font-weight: 600;
}

.kb-article-body a {
  color: var(--brand-blue);
  text-decoration: none;
}

.kb-article-body a:hover {
  text-decoration: underline;
}

/* Tablet */
@media (max-width: 960px) {
  .kb-page.static-page {
    grid-template-columns: 200px 1fr;
    gap: 32px;
    padding: 24px 20px 60px;
  }
}

/* Mobile: sidebar becomes horizontal scroll strip */
@media (max-width: 768px) {
  .kb-page.static-page {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px 16px 40px;
  }

  .kb-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 16px;
    margin-bottom: 24px;
    border-right: none;
    border-bottom: 1px solid var(--border-glass);
  }

  .kb-nav {
    flex-direction: row;
    gap: 4px;
    min-width: max-content;
    padding-right: 0;
  }

  .kb-nav-link {
    font-size: 0.75rem;
    padding: 7px 12px;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .kb-nav-link.active {
    border-left-color: transparent;
    border-bottom-color: var(--brand-blue);
  }

  .kb-nav-link svg { display: none; }

  .kb-content { max-width: none; }

  .kb-section { padding-bottom: 32px; margin-bottom: 32px; }

  .kb-article { padding: 18px 20px; }
}

/* ============================================================
   HELP SEARCH
   ============================================================ */
.help-step-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
  margin-bottom: 16px;
  text-align: center;
}

.help-search-wrap {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

.help-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.help-search-box:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(74,161,217,0.15);
}

.help-search-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.help-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--text);
  font-family: inherit;
}

.help-search-input::placeholder {
  color: var(--text-muted);
}

.help-search-kbd {
  font-size: 0.65rem;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  flex-shrink: 0;
}

.help-search-results {
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  overflow: hidden;
}

.help-result-item {
  display: block;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-glass);
  transition: background var(--transition);
}

.help-result-item:last-child { border-bottom: none; }

.help-result-item:hover {
  background: rgba(74,161,217,0.06);
}

.help-result-item strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.help-result-item span {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.help-no-results {
  padding: 20px 18px;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

.help-contact-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--brand-blue);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.help-contact-link:hover {
  text-decoration: underline;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(74,161,217,0.15);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-muted);
}

.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.contact-form select option {
  background: var(--bg-surface);
  color: var(--text);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  display: flex;
  justify-content: flex-start;
}

.form-status {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
}

.form-status-success {
  background: rgba(102,179,46,0.1);
  border: 1px solid rgba(102,179,46,0.3);
  color: #66b32e;
}

.form-status-error {
  background: rgba(238,50,46,0.1);
  border: 1px solid rgba(238,50,46,0.3);
  color: #ee322e;
}

/* ============================================================
   BOTTOM NAV (Mobile)
   ============================================================ */
.bottom-nav {
  /* The app's floating glass capsule, same recipe (src/theme/chrome.ts +
     app/(tabs)/_layout.tsx): inset from the edges rather than spanning them,
     translucent over the content instead of a solid docked bar. */
  display: flex;
  position: fixed;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  right: 20px;
  margin-inline: auto;
  max-width: 480px;
  z-index: 1000;
  height: 50px;
  border-radius: 14px;
  background: rgba(10,10,16,0.22);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 8px 28px rgba(0,0,0,0.38);
  align-items: stretch;
  /* Every tab is the same box (owner 2026-08-30), and the capsule's padding is
     one number on all four sides, so the first and last tab clear the capsule
     by exactly what the top and bottom clear it by. */
  gap: 4px;
  padding: 4px;
  overflow: hidden;
}

.bottom-nav-item {
  /* Equal boxes: basis 0 so the label length cannot make one tab wider. */
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  color: var(--text-muted);
  white-space: nowrap;
  /* Equal boxes divide the bar five ways, so the longest label in the longest
     locale (Dutch Evenementen) has to give a little on a narrow phone rather
     than run past its own tab. */
  font-size: clamp(0.5rem, 1.9vw, 0.62rem);
  font-weight: 600;
  min-width: 0;
}
.bottom-nav-item.sai-nav-btn {
  color: var(--text-muted);
  background: none;
  /* Transparent, not none: a button with no border came out 2px narrower than
     the four links and broke the equal boxes. */
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

/* ONE geometry for all five tabs. The Coach tab draws an inline SVG and a
   gradient-clipped label instead of a Font Awesome glyph, and both measured
   differently: its icon box came out 23px against the others' 20px and its
   label sat 4px lower, so the row read as misaligned. Pin the icon box and
   the label line-height and every tab lands on the same two lines. */
.bottom-nav-item .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 1.25rem;
  line-height: 1;
}
.bottom-nav-item .nav-icon svg { display: block; }
.bottom-nav-item > span:last-child {
  display: block;
  line-height: 1.15;
}

.bottom-nav-item:hover { color: var(--text); }
/* The active tab carries the brand blue, exactly as in the app: a black or a
   white fill both vanish against this dark glass. */
.bottom-nav-item.active {
  color: var(--accent);
  background: rgba(74,161,217,0.22);
  border-color: rgba(74,161,217,0.45);
}
.bottom-nav-item:active {
  transform: scale(0.9);
}


/* ============================================================
   FIXTURES PAGE
   ============================================================ */

.calendar-page, .fixtures-page {
  padding-top: 16px;
}

.page-header {
  margin-bottom: 16px;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.legal-page {
  padding-top: 40px;
  padding-bottom: 80px;
  min-height: 100vh;
}

.legal-header {
  text-align: center;
  margin-bottom: 48px;
}

.legal-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
}

.legal-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto 48px;
}

.legal-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition);
}

.legal-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.legal-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.legal-card-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.legal-card-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.legal-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
}

.legal-contact {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding-top: 32px;
  border-top: 1px solid var(--border-glass);
}

.legal-contact a {
  color: var(--accent);
  text-decoration: underline;
}

/* Legal Policy Detail */
.container-narrow {
  max-width: 780px;
}

/* Legal: audience tabs + section headings */
.legal-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  max-width: 900px;
  margin: 40px auto 16px;
}

.legal-grid + .legal-section-title { margin-top: 8px; }

.legal-audience-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--border-glass);
}

.legal-audience-tabs a,
.legal-audience-tabs button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 18px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--text-secondary);
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.legal-audience-tabs a:hover,
.legal-audience-tabs button:hover { color: var(--text-primary); }

.legal-audience-tabs a.is-active,
.legal-audience-tabs button.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.legal-policy-nav {
  margin-bottom: 32px;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  transition: opacity var(--transition);
}

.legal-back:hover { opacity: 0.7; }

/* Prose styles for markdown content */
.prose {
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 0.9rem;
}

.prose h1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.3;
}

.prose h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 32px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border-glass);
}

.prose h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
}

.prose p { margin: 0 0 16px; }

.prose ul, .prose ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.prose li { margin-bottom: 6px; }

.prose strong { color: var(--text); font-weight: 600; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.85rem;
}

.prose th, .prose td {
  padding: 10px 12px;
  border: 1px solid var(--border-glass);
  text-align: left;
}

.prose th {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-weight: 600;
}

@media (min-width: 640px) {
  .legal-grid { grid-template-columns: 1fr 1fr; }
}

/* Legal pages render their body in a box (owner, 2026-09-09). One rule for all
   three views on the legal shell, so every policy changes together and none can
   drift: legal-policy (every markdown policy), legal-updates, legal-admission.

   The measure widens with it. 780px of bare text on a black page was a column
   floating in space; a panel needs room to be a panel, and the padding keeps
   the line length comfortable inside it. */
/* One width on the page: the box lines up with the annex below it. A narrower
   panel floating over full-width cards is what this replaced. */
.legal-policy-page .container-narrow { max-width: var(--container); }


.legal-policy-page .legal-content,
.legal-policy-page .legal-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 36px 40px 32px;
}

/* The first heading inside the box has the box edge above it already. */
.legal-policy-page .legal-content > h1:first-child,
.legal-policy-page .legal-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 720px) {
  .legal-policy-page .legal-content,
  .legal-policy-page .legal-panel { padding: 24px 20px 20px; border-radius: 12px; }
}

/* LEGAL TEXT IS WHITE (owner directive, 2026-09-09).
   Nothing on a legal page is supporting text: every sentence is a term, and
   grey reads as small print. Scoped to the legal pages and to the modal that
   renders the same documents, so the rest of the site keeps its hierarchy.
   The marks, the ALLOWED / NOT ALLOWED labels and links keep their colours,
   because those carry meaning. Grey did not. */
.legal-page .prose,
.legal-page .legal-content,
.legal-page .legal-content p,
.legal-page .legal-content li,
.legal-page .legal-content td,
.legal-page .legal-card-desc,
.legal-page .age-legend-v,
.legal-page .age-line,
.legal-page .age-card-foot,
.legal-page .legal-updated,
.legal-modal-body .prose,
.legal-modal-body .prose p,
.legal-modal-body .prose li { color: var(--text); }

.legal-updated {
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-glass);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Legal Modal */
.legal-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* Above the login modal (2000) and the legal-update popup (10050): a policy
     opened from inside either must land on top or it cannot be read. */
  z-index: 12000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.legal-modal-overlay.open {
  display: flex;
}

.legal-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.2s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-glass);
  flex-shrink: 0;
}

.legal-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.legal-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}

.legal-modal-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.legal-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.legal-modal-body .prose h1 {
  display: none;
}

/* The Admission Policy inside the modal. The article's page card is gone with
   its .legal-policy-page ancestor, but three things still bring the page's
   spacing along: the first h2 after the hidden h1 keeps its 32px margin, 24px
   padding and divider, so the document opened on 56px of nothing; the annex
   keeps its own card (border, background, 20px padding) inside the body's
   padding, so on a phone the territory cards were a 256px column; and 24px of
   body padding is the desktop figure. */
.legal-modal-body .legal-content > h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-modal-body .legal-annex {
  margin: 24px 0 0; padding: 0; background: none; border: 0; border-radius: 0;
}
@media (max-width: 720px) {
  .legal-modal-body { padding: 16px; }
}

/* ============================================================
   LOGIN MODAL
   ============================================================ */
.login-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.login-modal-overlay.open { display: flex; }

html.modal-open {
  overflow: hidden !important;
  height: 100% !important;
}
html.modal-open body {
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
}

.login-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  width: 100%;
  max-width: 420px;
  padding: 32px;
  position: relative;
  animation: modalIn 0.2s ease;
  text-align: center;
  margin: auto 0;
}

.login-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}
.login-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.login-modal-logo {
  display: block;
  margin: 0 auto 12px;
  width: 48px;
  height: 48px;
  border-radius: 11px;
}

.login-modal-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 4px;
}
.login-modal-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 24px;
}

.login-modal .social-logins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.login-modal .social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.login-modal .social-btn:hover {
  background: var(--bg-glass-hover);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}
.login-modal .social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 16px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-glass);
}

.login-method-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.login-method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem;
  opacity: 0.55;
  filter: grayscale(0.3);
}
.login-method-btn.active {
  opacity: 1;
  filter: none;
}
.login-method-btn.btn-whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.login-method-btn.btn-whatsapp:hover {
  background: #1ebe57;
  border-color: #1ebe57;
}
.login-method-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.login-method-btn.btn-whatsapp.active {
  border-color: #25D366;
  box-shadow: 0 0 0 1px #25D366;
}

/* Login form */
.login-form {
  text-align: left;
}
.login-form input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.15s;
}
.login-form input:focus { border-color: var(--accent); }
.login-form input::placeholder { color: var(--text-muted); }

/* Phone input with country code */
.phone-input-wrap {
  display: flex;
  position: relative;
  margin-bottom: 10px;
}
.phone-input-wrap input[type="tel"] {
  flex: 1;
  border-radius: 0 8px 8px 0;
  border-left: none;
  margin-bottom: 0;
}
.phone-code-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 8px 0 0 8px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.phone-code-btn:hover { border-color: var(--accent); }
.phone-code-btn svg { stroke: var(--text-muted); flex-shrink: 0; }
.phone-code-btn img { flex-shrink: 0; }
.phone-code-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 220px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.phone-code-dropdown.open { display: block; }
.phone-code-search {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-glass);
  border: none;
  border-bottom: 1px solid var(--border-glass);
  border-radius: 8px 8px 0 0;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  margin-bottom: 0;
}
.phone-code-search::placeholder { color: var(--text-muted); }
.phone-code-list {
  max-height: 170px;
  overflow-y: auto;
}
.phone-code-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
  transition: background 0.1s;
}
.phone-code-item:hover { background: rgba(255,255,255,0.05); }
.phone-code-item.active { background: rgba(74,161,217,0.15); }
.phone-code-item img { flex-shrink: 0; }
.phone-code-item-name { flex: 1; }
.phone-code-item-dial { color: var(--text-muted); font-size: 0.8rem; }

.login-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.login-error {
  color: #ef4444;
  font-size: 0.8rem;
  margin-bottom: 6px;
}
.login-error:empty { display: none; }
.login-actions-row { display: flex; gap: 10px; }
.login-actions-row .login-submit { flex: 1 1 0; width: auto; }
#loginCodeWrap { flex: 1 1 0; display: flex; }
#loginCodeWrap .login-submit { width: 100%; }

/* Not an error: the popup saying what it did (no account found, continuing to
   sign-up with the identifier already filled in). */
.login-notice {
  color: var(--text-muted, #9ca3af);
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.login-submit {
  width: 100%;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
}

.login-toggle {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}
.login-toggle button {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  margin-left: 4px;
}
.login-toggle button:hover { text-decoration: underline; }

/* Forgot password */
.login-forgot {
  text-align: right;
  margin: -4px 0 8px;
}
.login-forgot button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
}
.login-forgot button:hover { color: var(--accent); }
.login-sendpw-text { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
.forgot-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 16px;
  text-align: center;
  line-height: 1.4;
}
.forgot-form input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.15s;
}
.forgot-form input:focus { border-color: var(--accent); }
.forgot-form input::placeholder { color: var(--text-muted); }
.forgot-success {
  color: #22c55e;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 8px;
}

/* Panel inline login */
.panel-login-gate {
  max-width: 420px;
  margin: 60px auto;
  padding: 0 16px;
}
.panel-login-gate .login-modal {
  position: static;
  animation: none;
  margin: 0 auto;
}

/* ============================================================
   NAVBAR AUTH (User Menu)
   ============================================================ */
.nav-user-menu {
  position: relative;
}

/* legacy .nav-avatar kept for reference, replaced by .nav-user-btn + .nav-avatar-circle */

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  min-width: 180px;
  padding: 6px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nav-dropdown.open { display: block; }

.nav-dropdown a,
.nav-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  color: var(--text);
  font-size: 0.85rem;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-dropdown a:hover,
.nav-dropdown button:hover {
  background: rgba(255,255,255,0.06);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (min-width: 640px) {
  .bars-grid { grid-template-columns: repeat(2, 1fr); }
  .how-tracks { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
  .fixture-card-main { gap: 16px; }
}

/* Desktop */
@media (min-width: 768px) {
  .container { padding: 0 24px; }

  .hero {
    min-height: 100vh;
    padding: 40px 0 60px;
  }

  .hero .container {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .hero-content { text-align: left; }
  .hero-subtitle { margin: 0 0 32px; }
  .hero-cta { justify-content: flex-start; }
  .hero-stats { justify-content: flex-start; }


  .bars-grid { grid-template-columns: repeat(3, 1fr); }

  .bottom-nav {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: auto;
    /* The phone capsule is capped at 480px; the row layout sizes to its own
       five tabs, so the cap has to come off or it squeezes them. */
    max-width: none;
    margin-inline: 0;
    bottom: 16px;
    border-radius: 16px;
    border: 1px solid var(--border-glass);
    /* One number on all four sides here too. */
    padding: 4px;
    gap: 4px;
    height: auto;
    background: rgba(10,10,15,0.85);
  }
  .bottom-nav-item {
    flex-direction: row;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.72rem;
  }

  .footer-top { grid-template-columns: 1fr 2fr; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Large Desktop */
@media (min-width: 1024px) {
  .container { padding: 0 32px; }

  .fixture-card-main {
    padding: 18px 24px;
    gap: 20px;
  }

  .fixture-team-name { font-size: 0.6rem; }
  .fixture-time { font-size: 1.2rem; }

  /* Cards stay stacked vertically inside each track (no 3-across squish) */
}

@media (min-width: 1440px) {
  :root { --container: 1320px; }
}

/* --- Mobile fixture card adaptation --- */
@media (max-width: 639px) {
  .fixture-card-main {
    /* Only the side width changes; both grids above follow it. */
    --fx-side: 32px;
    grid-template-columns: var(--fx-side) minmax(0, 1fr) auto minmax(0, 1fr) var(--fx-side);
    padding: 10px 10px;
    gap: 4px;
  }

  .fixture-league img { width: 26px; height: 26px; }

  .fixture-team img { width: 32px; height: 32px; }
  .fixture-team-name { font-size: 0.42rem; max-width: 64px; }
  .fixture-center { min-width: 56px; }
  .fixture-time { font-size: 0.78rem; }
  .fixture-date-sm { font-size: 0.62rem; }
  .fixture-extra { font-size: 0.58rem; }
  .fixture-score { font-size: 0.85rem; }
  .status-pill .status-dot { width: 20px; height: 20px; }
  .status-pill .status-dot::after { width: 5px; height: 5px; }
  .status-chevron-wrap { width: 20px; height: 20px; }
  .status-chevron { width: 10px; height: 10px; }
  /* Watch strip */
  .fixture-card-footer { padding: 6px 12px; font-size: 0.65rem; }
  .fixture-card-bottom { padding: 8px 10px; gap: 8px; font-size: 0.7rem; }
}

/* --- Loading States --- */
.loading-fixture {
  height: 80px;
  margin-bottom: 8px;
}

.loading-sport {
  height: 100px;
}

.loading-bar {
  height: 260px;
}

/* --- Utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --- Events Page --- */
.events-page { padding-top: 24px; padding-bottom: 80px; }

/* ═══ Events Header ═══ */
.ev-header {
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
}
.ev-header h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.ev-header p {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: #b8bfcc;
  font-weight: 400;
}
.ev-header-b, .ph-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
}
.ev-header-b-left, .ph-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ev-header-b-accent, .ph-bar-accent {
  width: 4px;
  height: 48px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-orange));
  flex-shrink: 0;
}
.ev-header-b h1, .ph-bar h1 { font-size: 1.5rem; }
.ev-header-b p, .ph-bar p { margin-top: 2px; font-size: 0.8rem; }
.ev-header-b-search, .ph-bar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  min-width: 240px;
  transition: border-color 0.2s;
}
.ev-header-b-search:focus-within, .ph-bar-search:focus-within {
  border-color: var(--brand-blue);
}
.ev-header-b-search svg, .ph-bar-search svg {
  color: var(--text-muted);
  flex-shrink: 0;
}
.ev-header-b-search input, .ph-bar-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.82rem;
  width: 100%;
}
.ev-header-b-search input::placeholder, .ph-bar-search input::placeholder {
  color: var(--text-muted);
}
@media (max-width: 639px) {
  .ev-header-b, .ph-bar { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px; }
  .ev-header-b-search, .ph-bar-search { width: 100%; min-width: 0; }
}

.ev-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 0;
}
.ev-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.ev-tab:hover { color: var(--text); }
.ev-tab.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ev-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.ev-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-blue-dim);
  box-shadow: var(--shadow-glow);
}

.ev-card-cover {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-secondary);
  position: relative;
}
.ev-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-card-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.ev-card-cover-sports {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
}
.ev-sports-league-badge {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 8px;
  opacity: 0.6;
}
.ev-sports-teams {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ev-sports-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ev-sports-team img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.ev-sports-team span {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  max-width: 80px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-sports-vs {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.ev-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.ev-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ev-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
}
.ev-badge-sports {
  background: var(--brand-blue-dim);
  color: var(--brand-blue);
}
.ev-badge-general {
  background: var(--accent2-dim);
  color: var(--accent2);
}
.ev-league-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 500;
}
.ev-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ev-card-date, .ev-card-venue {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ev-card-date svg, .ev-card-venue svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.ev-card-org {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--border-glass);
}

.ev-load-more {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
.ev-load-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--brand-blue);
  padding: 12px 32px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.ev-load-btn:hover {
  background: var(--bg-glass-hover);
  border-color: var(--brand-blue-dim);
}

.ev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}
.ev-empty h3 { font-size: 1.1rem; color: var(--text-secondary); }
.ev-empty p { font-size: 0.85rem; }

@media (max-width: 900px) {
  .ev-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .ev-grid { grid-template-columns: 1fr; gap: 12px; }
  .ev-sports-team img { width: 36px; height: 36px; }
  .ev-sports-teams { gap: 12px; }
}

/* ─── Locations Page ─────────────────────────────────── */

.locations-page { padding-top: 1px; padding-bottom: 80px; }
.locations-page .page-header { margin-bottom: 16px; }
.locations-page .page-title { font-size: 1.5rem; font-weight: 700; }

.loc-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 16px;
  transition: border-color var(--transition);
}
.loc-search:focus-within {
  border-color: var(--brand-blue-dim);
}
.loc-search svg { color: var(--text-muted); flex-shrink: 0; }
.loc-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--font);
}
.loc-search-input::placeholder { color: var(--text-muted); }

.loc-map-wrap { position: relative; margin-bottom: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bv-line); }
.loc-map { height: clamp(320px, 44vh, 430px); width: 100%; background: var(--bg-card); z-index: 1; }
@media (max-width: 720px) { .loc-map { height: 48vh; min-height: 320px; max-height: 520px; } }
.loc-map-locate-btn { position: absolute; top: 12px; right: 12px; z-index: 500; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: rgba(18,18,30,0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; color: #fff; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.loc-map-locate-btn:hover { border-color: var(--accent); color: var(--accent); }
.loc-map-locate-btn.active { border-color: var(--accent); color: var(--accent); }
.loc-map-locate-btn.denied { opacity: 0.4; cursor: default; }
.loc-map-locate-btn svg { flex-shrink: 0; }
.loc-map-popup .leaflet-popup-content-wrapper { background: rgba(18,18,30,0.95); color: #e4e4e7; border: 1px solid var(--bv-line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.loc-map-popup .leaflet-popup-tip { background: rgba(18,18,30,0.95); border: 1px solid var(--bv-line); }
.loc-map-popup .leaflet-popup-close-button { color: rgba(255,255,255,0.5); }
.loc-map-popup .leaflet-popup-close-button:hover { color: #fff; }

.loc-marker-logo {
  background: none !important;
  border: none !important;
}
.loc-marker-logo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--bg-card);
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.loc-marker-dot {
  background: none !important;
  border: none !important;
}
.loc-marker-dot span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

@media (max-width: 600px) { .loc-map { height: 220px; } }

.loc-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.loc-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.loc-tab:hover { color: var(--text); }
.loc-tab.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* --- Location Cards (Premium) --- */
.loc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.loc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(74,161,217,0.3);
  box-shadow: 0 8px 32px rgba(74,161,217,0.12), 0 4px 16px rgba(0,0,0,0.3);
}

/* Cover with overlay */
.loc-card-cover {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}
.loc-card-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.loc-card:hover .loc-card-cover > img {
  transform: scale(1.05);
}
.loc-card-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.loc-card-initial {
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(74,161,217,0.2);
  user-select: none;
}

/* Overlay: gradient + name + location on cover */
.loc-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.loc-card-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 3px;
}
.loc-card-overlay-text {
  min-width: 0;
}
.loc-card-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-card-location {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.loc-card-location svg { flex-shrink: 0; opacity: 0.7; }

/* Body: meta bar + description */
.loc-card-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.loc-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.loc-card-rating {
  font-size: 0.72rem;
  color: var(--brand-orange);
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.loc-card-rating svg { width: 12px; height: 12px; }
.loc-card-rating span { color: var(--text-muted); font-size: 0.65rem; font-weight: 400; }
.loc-feature {
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  padding: 2px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.loc-feature svg { width: 10px; height: 10px; opacity: 0.5; }
.loc-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.loc-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  color: var(--accent, #4aa1d9);
  background: rgba(74, 161, 217, 0.08);
  border: 1px solid rgba(74, 161, 217, 0.15);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}
.loc-pill svg { opacity: 0.7; }
.loc-card-desc {
  font-size: 0.73rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loc-load-more {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
.loc-load-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--brand-blue);
  padding: 10px 28px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.loc-load-btn:hover {
  background: var(--bg-glass-hover);
  border-color: var(--brand-blue-dim);
}

.loc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}
.loc-empty h3 { font-size: 1.1rem; color: var(--text-secondary); }
.loc-empty p { font-size: 0.85rem; }

.loc-geo-prompt {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .loc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .loc-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ─── Location Detail (Premium) ──────────────────────── */

.ld-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.ld-breadcrumb a { color: var(--brand-blue); text-decoration: none; }
.ld-breadcrumb a:hover { text-decoration: underline; }

/* Hero */
.ld-hero {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  isolation: isolate;
}
.ld-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05);
}
.ld-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.92) 100%),
    radial-gradient(120% 80% at 10% 100%, rgba(74,161,217,0.25) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 20px 22px;
}
.ld-hero-content {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
}
.ld-hero-logo {
  /* Match the height of the 3 hero text lines (name / area / stars) */
  width: 96px;
  height: 96px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 4px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.ld-hero-text { flex: 1; min-width: 0; }
.ld-hero-name {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ld-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 4px;
}
.ld-hero-meta .badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.ld-hero-meta .badge-active { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.4); color: #6ee7a4; }
.ld-type-pill {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--brand-blue);
  color: #fff;
}
.ld-hero-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
}
.ld-hero-location svg { width: 14px; height: 14px; }
.ld-hero-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--brand-orange);
  font-weight: 600;
}
.ld-hero-rating svg { width: 14px; height: 14px; }
.ld-hero-price {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.ld-hero-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.4;
}

/* The venue tagline, under the cover and above the tabs (owner 2026-09-07).
   It used to sit inside the hero overlay, where it competed with the name and
   the rating and was hidden outright on a phone. On its own line it is the
   first thing read after the picture, at every width. */
.ld-tagline {
  margin: 16px 0 18px;
  padding: 14px 18px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  /* The same surface a sidebar card header wears: the blue-to-orange brand
     gradient, the blue hairline, the inset highlight, and the 3px accent edge
     the fixture cards carry. Not a new treatment, the page's own one, so the
     line belongs to the family instead of floating between the cover and the
     cards as loose grey text. */
  background: linear-gradient(135deg, rgba(74,161,217,0.12) 0%, rgba(74,161,217,0.03) 50%, rgba(243,147,34,0.04) 100%);
  border: 1px solid rgba(74,161,217,0.15);
  border-left: 3px solid var(--brand-blue, #4aa1d9);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Action bar */
.ld-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.ld-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
  background: var(--brand-blue);
  color: #fff;
}
.ld-action-btn:hover { background: #3b8ec5; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(74,161,217,0.3); }
.ld-action-btn-secondary {
  background: var(--bg-card);
  color: var(--brand-blue);
  border: 1px solid var(--border-glass);
}
.ld-action-btn-secondary:hover { background: var(--bg-glass-hover); border-color: var(--brand-blue-dim); }

/* Two-column layout */
.ld-columns {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

/* Main column sections */
.ld-col-main { display: flex; flex-direction: column; gap: 24px; }

/* Card layout mirrors the event-detail .ed-about-card pattern: outer box has
   no padding, a gradient header bar with bottom-border + top accent line, and
   a padded body. */
.ld-section {
  background: var(--bg-card);
  border: 1px solid rgba(74,161,217,0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(74,161,217,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
}
.ld-card-header {
  background: linear-gradient(135deg, rgba(74,161,217,0.12) 0%, rgba(74,161,217,0.03) 50%, rgba(243,147,34,0.04) 100%);
  border-bottom: 1px solid rgba(74,161,217,0.15);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.ld-card-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74,161,217,0.4), rgba(243,147,34,0.2), transparent);
}
.ld-section-title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ld-section-title svg,
.ld-section-title i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
.ld-section-body {
  padding: 20px;
}
.ld-section-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.ld-section-text svg { vertical-align: -3px; margin-right: 4px; opacity: 0.6; }

/* Reservation widget */
.ld-reserve-widget { background: var(--bg-card, #12121e); border: 1px solid var(--border-glass, var(--bv-line-solid)); border-radius: 12px; padding: 20px; }
.ld-res-form { display: flex; flex-direction: column; gap: 12px; }
.ld-res-row { display: flex; gap: 10px; }
.ld-res-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ld-res-field label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted, #9ca3af); text-transform: uppercase; letter-spacing: 0.05em; }
.ld-res-input { background: var(--bg-glass, #1a1a2e); color: var(--text, #e4e4e7); border: 1px solid var(--border-glass, var(--bv-line-solid)); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; width: 100%; box-sizing: border-box; }
.ld-res-input:focus { outline: none; border-color: var(--brand-blue, #4aa1d9); }
.ld-res-slots-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-res-slot { padding: 8px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--border-glass, var(--bv-line-solid)); background: var(--bg-glass, #1a1a2e); color: var(--text, #e4e4e7); cursor: pointer; transition: 0.15s; }
.ld-res-slot-open:hover { border-color: var(--brand-blue, #4aa1d9); background: rgba(74,161,217,0.1); }
.ld-res-slot-selected { border-color: var(--brand-blue, #4aa1d9) !important; background: rgba(74,161,217,0.2) !important; color: var(--brand-blue, #4aa1d9) !important; }
.ld-res-slot-full { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.ld-res-slot-event { opacity: 0.3; cursor: not-allowed; background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: var(--danger, #ef4444); }
.ld-res-confirm { margin-top: 16px; border-top: 1px solid var(--border-glass, var(--bv-line-solid)); padding-top: 16px; }
.ld-res-confirm-header { margin-bottom: 12px; }
.ld-res-confirm-header strong { display: block; font-size: 0.95rem; }
.ld-res-confirm-header span { font-size: 0.82rem; color: var(--text-muted, #9ca3af); }
.ld-res-confirm-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ld-res-submit { width: 100%; padding: 12px; border: none; border-radius: 8px; background: var(--brand-blue, #4aa1d9); color: #fff; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: 0.15s; }
.ld-res-submit:hover { opacity: 0.9; }
.ld-res-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.ld-res-success { text-align: center; padding: 20px 0; }
.ld-res-success h3 { color: #22c55e; margin: 12px 0 8px; }
.ld-res-success p { color: var(--text-muted, #9ca3af); font-size: 0.85rem; margin: 4px 0; }
.ld-res-ref { font-family: monospace; color: var(--brand-blue, #4aa1d9) !important; font-weight: 700; font-size: 0.9rem !important; margin-top: 12px !important; }
@media (max-width: 600px) { .ld-res-row { flex-direction: column; } }

.ld-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ld-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: var(--bg-glass);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}
.ld-feature-item svg { color: var(--brand-blue); opacity: 0.8; flex-shrink: 0; }

.ld-capacity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.ld-capacity svg { opacity: 0.6; }

.ld-packages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ld-package-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-glass);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
}
.ld-package-tag svg { color: var(--brand-blue); opacity: 0.8; }
.ld-package-tag .ld-pkg-logo {
  height: 18px;
  width: auto;
  max-width: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Sports & Leagues */










/* Sidebar cards */
.ld-col-side { display: flex; flex-direction: column; gap: 16px; }

/* Sidebar cards mirror the .ld-section header pattern: gradient header bar
   with bottom-border, top accent line, and a padded body. */
.ld-sidebar-card {
  background: var(--bg-card);
  border: 1px solid rgba(74,161,217,0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(74,161,217,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 0;
}
.ld-sidebar-card > h3 {
  background: linear-gradient(135deg, rgba(74,161,217,0.12) 0%, rgba(74,161,217,0.03) 50%, rgba(243,147,34,0.04) 100%);
  border-bottom: 1px solid rgba(74,161,217,0.15);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}
.ld-sidebar-card > h3::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74,161,217,0.4), rgba(243,147,34,0.2), transparent);
}
.ld-sidebar-card > h3 svg,
.ld-sidebar-card > h3 i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
/* Body wrapper — every direct child of the sidebar card except the h3 gets
   horizontal/vertical padding, so existing markup keeps working without JS
   restructuring. */
.ld-sidebar-card > *:not(h3) {
  padding: 0 20px;
}
.ld-sidebar-card > *:not(h3):first-of-type { padding-top: 16px; }
.ld-sidebar-card > *:not(h3):last-child { padding-bottom: 16px; }

.ld-addr-line {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 2px;
}
.ld-addr-region { color: var(--text-muted); font-size: 0.78rem; }

.ld-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.ld-sidebar-actions .ld-action-btn {
  justify-content: center;
  font-size: 0.78rem;
  padding: 8px 16px;
}

/* Hours */
.ld-hours-list { display: flex; flex-direction: column; gap: 6px; }
.ld-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 4px 0;
}
.ld-hours-day { color: var(--text-secondary); }
.ld-hours-time { color: var(--text); font-weight: 500; }
.ld-hours-today { background: var(--brand-blue-dim); margin: 0 -12px; padding: 6px 12px; border-radius: 6px; }
.ld-hours-today .ld-hours-day { color: var(--text); font-weight: 600; }
.ld-today-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--brand-blue);
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* Contact rows */
.ld-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--brand-blue);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--transition);
}
.ld-contact-row:hover { color: #3b8ec5; }
.ld-contact-row svg { opacity: 0.7; flex-shrink: 0; }

/* Map */
.ld-map {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-sm);
  margin: 12px 0;
  border: 1px solid var(--border-glass);
  overflow: hidden;
}
.ld-map-marker { background: none; border: none; }
.leaflet-container { background: var(--bg-card) !important; }

/* Error state */
.ld-error {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}
.ld-error svg { margin-bottom: 16px; opacity: 0.4; }
.ld-error h3 { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 8px; }
.ld-error p { font-size: 0.85rem; margin-bottom: 16px; }
.ld-error-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.ld-error-btn:hover { text-decoration: underline; }

/* Location Events */
.ld-events-list { display: flex; flex-direction: column; gap: 8px; }
.ld-events-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
/* Tighten the gap between the heading and the first event card —
   parent .ld-col-main has gap: 24px which is too much. */
.ld-events-heading + .ld-events-list,
.ld-events-heading + #ldEvents { margin-top: -16px; }
.ld-events-heading svg,
.ld-events-heading i { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; }

@media (max-width: 900px) {
  .ld-columns { grid-template-columns: 1fr; }
  .ld-hero { height: 260px; }
  .ld-hero-name { font-size: 1.3rem; }
  .ld-hero-logo { width: 84px; height: 84px; }
}
@media (max-width: 600px) {
  .ld-hero { height: 220px; border-radius: var(--radius); }
  .ld-hero-overlay { padding: 16px; }
  .ld-hero-name { font-size: 1.1rem; }
  .ld-hero-logo { width: 76px; height: 76px; }
  .ld-hero-meta { gap: 6px; }
  .ld-hero-desc { display: none; }
  .ld-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ld-feature-item { font-size: 0.75rem; padding: 8px 10px; gap: 6px; }
  .ld-actions { flex-direction: column; }
  .loc-card-logo { width: 30px; height: 30px; }
  .loc-card-name { font-size: 0.82rem; }
  .loc-card-overlay { padding: 24px 10px 10px; }
}

.text-accent { color: var(--accent); }
.text-live { color: var(--live); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ─── Hold Timer (rounded red banner — sticky under fixed navbar, visible during checkout hold) ─── */
#holdTimerSlot {
  /* Now lives INSIDE the navbar — flex child, no fixed positioning */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.navbar #holdTimerSlot:empty { display: flex; visibility: hidden; }
body > #holdTimerSlot:empty { display: none; }
.hold-timer { pointer-events: auto; }
/* Push page content down by the banner height when visible */
body.has-hold-banner .page-container { /* hold banner now lives inside navbar */ }
body.has-hold-banner main#app { /* hold banner now lives inside navbar */ }
.hold-timer {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 14px);
  width: auto;
  margin: 0 auto;
  background: #f39322;
  color: #fff;
  padding: clamp(10px, 2.2vw, 14px) clamp(12px, 3vw, 24px);
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: 10px;
  animation: holdBannerPulse 3.5s ease-out infinite;
  transition: background 0.6s ease;
}
.hold-timer > * { display: inline-flex; align-items: center; line-height: 1; }
.hold-timer i, .hold-timer svg { color: #fff; flex-shrink: 0; line-height: 1; font-size: 18px; }
.hold-timer-label,
.hold-timer-text { font-weight: 700; font-size: 1em; font-family: inherit; }
/* Color ramp: starts ORANGE → ramps to RED as the hold expires.
   warn (last 2 min) = red, urgent (last 1 min) = deep red. */
.hold-timer-warn   { background: #e53e3e; animation: holdBannerPulseWarn 2.5s ease-out infinite; }
.hold-timer-urgent { background: #dc2626; animation: holdBannerPulseUrgent 1.4s ease-out infinite; }
.hold-timer-expired { background: #7f1d1d; box-shadow: 0 2px 16px rgba(127,29,29,0.7); animation: none; }
@keyframes holdBannerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(243,147,34,0.7); }
  60%  { box-shadow: 0 0 0 14px rgba(243,147,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(243,147,34,0); }
}
@keyframes holdBannerPulseWarn {
  0%   { box-shadow: 0 0 0 0 rgba(229,62,62,0.75); }
  60%  { box-shadow: 0 0 0 14px rgba(229,62,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,62,62,0); }
}
@keyframes holdBannerPulseUrgent {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.85); }
  60%  { box-shadow: 0 0 0 16px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hold-timer { animation: none; box-shadow: none; }
}
@media (max-width: 480px) { .hold-timer { gap: 6px; padding: 9px 10px; font-size: 0.78rem; } }

/* ── Uber Panel + Map Buttons (shared across event/location detail) ── */
.ed-uber-panel { margin: 12px 0; }
.ed-uber-btn, .ed-uber-placeholder { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #000; border-radius: 12px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; border: none; height: 80px; box-sizing: border-box; }
.ed-uber-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.ed-uber-btn:active { transform: scale(0.98); }
.ed-uber-loading { opacity: 0.6; }
.ed-uber-badge { width: 40px; height: 40px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ed-uber-img { width: 26px; height: auto; }
.ed-uber-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ed-uber-title { font-size: 0.95rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.ed-uber-sub { font-size: 0.78rem; color: rgba(255,255,255,0.5); letter-spacing: 0.01em; }
.ed-uber-chevron { width: 20px; height: 20px; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.ed-uber-placeholder .ed-uber-sub-blur { filter: blur(5px); }
.ed-uber-placeholder.ed-uber-loading .ed-uber-sub-blur { filter: none; }
.ed-uber-placeholder.ed-uber-loading .ed-uber-activate { display: none; }
.ed-uber-activate { display: inline-flex; align-items: center; gap: 5px; padding: 0; margin-top: 2px; background: none; border: none; color: #4aa1d9; font-size: 0.75rem; font-weight: 600; cursor: pointer; pointer-events: auto; }
.ed-map-btns { display: flex; gap: 8px; margin-top: 12px; }
.ed-map-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--radius-sm, 8px); font-size: 0.78rem; font-weight: 600; text-decoration: none; transition: background 0.2s, border-color 0.2s; flex: 1; justify-content: center; }
.ed-map-btn svg { width: 14px; height: 14px; }
.ed-map-apple { background: rgba(255,255,255,0.06); color: #e4e4e7; border: 1px solid var(--bv-line); }
.ed-map-apple:hover { background: rgba(255,255,255,0.1); }
.ed-map-google { background: rgba(255,255,255,0.06); color: #e4e4e7; border: 1px solid var(--bv-line); }
.ed-map-google:hover { background: rgba(255,255,255,0.1); }


/* ============================================================
   .fd-venue-card-v2 — UNIFIED venue row used site-wide
   (Watch This Game / events / calendar / home — single format)
   ============================================================ */
.fd-venue-card-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fd-venue-card-v2:hover {
  border-color: var(--brand-blue, #4aa1d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74,161,217,0.12);
}
.fd-venue-card-v2 .fd-venue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.fd-venue-card-v2 .fd-venue-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fd-venue-card-v2 .fd-venue-line > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-venue-card-v2 .fd-venue-line-name {
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
}
.fd-venue-card-v2 .fd-venue-line-name i {
  color: var(--brand-blue, #4aa1d9);
}
.fd-venue-card-v2 .fd-venue-line-geo {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.fd-venue-card-v2 .fd-venue-line-geo i {
  color: var(--text-muted);
  opacity: 0.8;
}
.fd-venue-card-v2 .fd-venue-time {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.fd-venue-card-v2 .fd-venue-tz {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fd-venue-card-v2 .fd-venue-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fd-venue-card-v2 .fd-venue-row-pills {
  margin-top: 2px;
}
@media (max-width: 600px) {
  .fd-venue-card-v2 { padding: 12px 14px; gap: 6px; }
  .fd-venue-card-v2 .fd-venue-line-name { font-size: 0.92rem; }
  .fd-venue-card-v2 .fd-venue-time { font-size: 1rem; }
  .fd-venue-card-v2 .fd-venue-line-geo { font-size: 0.78rem; }
}



/* ============================================================
   .fixture-opener — canonical site-wide venue opener row.
   ONE element, ONE format. Used on every page that lists venues
   under a fixture (Watch This Game, /events, /calendar, /, etc).
   ============================================================ */
.fixture-opener {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-left: 3px solid var(--accent);  /* the fixture card's stripe on every venue row too (owner 2026-09-29, "add accent for events as in app") */
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--font-condensed);
}
.fixture-opener,
.fixture-opener *:not(i):not([class*="fa-"]) { font-family: var(--font-condensed); }
.fixture-opener:hover {
  border-color: var(--brand-blue, #4aa1d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74,161,217,0.12);
}
.fixture-opener-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.fixture-opener-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fixture-opener-line > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fixture-opener-name {
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
}
.fixture-opener-name i { color: var(--brand-blue, #4aa1d9); }
.fixture-opener-geo {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.fixture-opener-geo i { color: var(--text-muted); opacity: 0.8; }
.fixture-opener-time {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  font-family: var(--font-condensed);
}
.fixture-opener-tz {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fixture-opener-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fixture-opener-row-pills { margin-top: 2px; }
@media (max-width: 600px) {
  .fixture-opener { padding: 10px 12px; gap: 4px; }
  .fixture-opener-name { font-size: 0.78rem; }
  .fixture-opener-time { font-size: 0.85rem; }
  .fixture-opener-geo  { font-size: 0.68rem; }
  .fixture-opener-tz   { font-size: 0.6rem; }
  /* Tighten pills + BOOK button so they fit comfortably on phone */
  .fixture-opener .bookvelt-pill { height: 22px; padding: 0 8px; gap: 4px; font-size: 10px; }
  .fixture-opener .bookvelt-pill > i,
  .fixture-opener .bookvelt-pill > span,
  .fixture-opener .bookvelt-pill > span > strong { font-size: 10px; }
  .fixture-opener .bookvelt-btn { padding: 6px 12px; font-size: 0.7rem; }
  .fixture-opener .bookvelt-btn > i { font-size: 11px; }
  .fixture-opener-pills { gap: 4px; }
}

/* Navbar: logo + lang grouped left, login + menu right */
.navbar .container .nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Hold timer pill — compact size (the checkout's inline slot) */
.hold-timer {
  gap: clamp(4px, 1vw, 8px);
  padding: clamp(4px, 1vw, 8px) clamp(8px, 2vw, 14px);
  font-size: clamp(0.6rem, 1.6vw, 0.8rem);
  letter-spacing: 0.02em;
}
.hold-timer i, .hold-timer svg { font-size: 12px; }

/* ── The hold bar (owner 2026-09-04) ──────────────────────────────────────
   In the strip the countdown has the whole band, so it stops being the pill it
   had to be beside the logo and says what is actually held: a pulsing table
   icon, the matchup in the site's own idiom (badge, league badge, badge), the
   words in full, the clock, and a chevron back to the cart.

   Dark, not orange. Team badges are designed for a dark ground and a solid
   orange band under the top bar for five minutes is shouting, not informing.
   The colour ramp lives in --hold-c instead: the rail, the pulse and the clock
   carry it from orange to red as the hold runs out. */
.bv-notice-hold { padding: 0; }
.bv-notice-hold .container { padding-top: 0; padding-bottom: 0; }

.hold-timer.hold-bar {
  --hold-c: #f39322;
  /* ONE padding, used after the opening rail, either side of the divider, and
     before the cart chip. Every gap in the left half is this value. */
  --hold-pad: clamp(10px, 1.8vw, 16px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--hold-pad);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px clamp(12px, 3vw, 22px) 9px var(--hold-pad);
  border: 0;
  border-left: 3px solid var(--hold-c);
  border-radius: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hold-c) 16%, transparent), rgba(0,0,0,0));
  color: var(--text);
  text-decoration: none;
  animation: none;
  box-shadow: none;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.6s ease, border-color 0.6s ease;
}
a.hold-timer.hold-bar:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--hold-c) 26%, transparent), rgba(0,0,0,0)); }
.hold-timer.hold-bar.hold-timer-warn   { --hold-c: #e53e3e; }
.hold-timer.hold-bar.hold-timer-urgent { --hold-c: #dc2626; }
.hold-timer.hold-bar.hold-timer-expired { --hold-c: #7f1d1d; }

/* The diagonal glide (owner 2026-09-04, replacing the pulsing dot): a sheen
   crossing the WHOLE bar rather than one element throbbing in the corner. It
   says the clock is running without a second thing on the page competing for
   the eye. */
.hold-timer.hold-bar::after {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%; left: 0; width: 55%;
  background: linear-gradient(100deg,
    transparent 0%,
    color-mix(in srgb, var(--hold-c) 20%, transparent) 45%,
    color-mix(in srgb, var(--hold-c) 34%, transparent) 50%,
    color-mix(in srgb, var(--hold-c) 20%, transparent) 55%,
    transparent 100%);
  transform: skewX(-18deg) translateX(-160%);
  animation: holdGlide 4.2s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
  z-index: 0;
}
.hold-timer-urgent::after { animation-duration: 1.8s; }
.hold-timer-expired::after { animation: none; opacity: 0; }
@keyframes holdGlide {
  0%       { transform: skewX(-18deg) translateX(-160%); }
  55%,100% { transform: skewX(-18deg) translateX(360%); }
}
/* Everything rides above the sheen. */
.hold-bar-match, .hold-bar-right, .hold-bar-go { position: relative; z-index: 1; }

/* LEFT: league badge, then the pair, then what is held. It takes the free
   space, and that IS the elastic separator holding the two ends apart. */
.hold-bar-match {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 0;
  /* Ellipses long team names. It also clips vertically, which is why the
     closing rule had to move out of this row. */
  overflow: hidden;
}
.hold-bar-league { flex: none; display: inline-flex; align-items: center; }
.hold-bar-league .hold-bar-badge { width: 28px; height: 28px; }
.hold-bar-pair {
  /* TEAM A-TEAM B, tight (owner 2026-09-04: "no need for spaces"). */
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 0;
}
/* The rule between the league badge and the pair. Rendered only when there
   IS a pair, so a Grand Prix shows the league badge and stops. */
.hold-bar-rule {
  flex: none;
  /* The same orange rail the bar opens with: same width, same colour, and the
     SAME LINE, edge to edge. The bar's vertical padding is cancelled with
     negative margins, because align-self only ever reaches the content box and
     the opening rail is a border on the bar itself, which spans the lot. */
  width: 3px;
  align-self: stretch;
  /* Overshoot far past the bar top and bottom and let the bar's own
     `overflow: hidden` cut it to exactly its box. Arithmetic against the
     padding was breaking at every breakpoint that changed it; this cannot. */
  margin-top: -60px;
  margin-bottom: -60px;
  margin-left: 0;
  margin-right: 0;
  background: var(--hold-c);
}
.hold-bar-side { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.hold-bar-badge { width: 26px; height: 26px; object-fit: contain; flex: none; }
.hold-bar-team {
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
}
/* `vs` is a word, `@` is a mark: both sit tight between the badges, and the
   word needs a touch of air the mark does not. */
.hold-bar-sep { flex: none; font-size: 0.82rem; font-weight: 700; color: #fff; padding: 0 2px; }
/* A character, not a rule: it reads as part of the line. */
.hold-bar-pipe { margin: 0 7px; opacity: 0.5; font-weight: 400; }
.hold-bar-cart {
  flex: none;
  padding: 3px 9px; margin-left: var(--hold-pad);
  border: 1px solid var(--border-glass); border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* RIGHT: table icon, the words, the clock. */
.hold-bar-right { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.hold-bar-tableico { display: inline-flex; align-items: center; color: var(--hold-c); }
.hold-bar-tableico i, .hold-bar-tableico svg { color: var(--hold-c); font-size: 16px; }
.hold-bar .hold-timer-label {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.hold-bar .hold-timer-text {
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--hold-c);
}
.hold-bar-go { flex: none; color: var(--text-muted); display: inline-flex; align-items: center; }
a.hold-timer.hold-bar:hover .hold-bar-go { color: var(--hold-c); }

/* Phones: the badges and the clock survive, the team names go. A name that
   ellipses to three letters tells the reader nothing the badge did not. */
@media (max-width: 640px) {
  /* The one padding token still rules the left half on a phone: the shorthand
     used to set padding-left to 12 while the gap stayed 9, so the space after
     the rail and the space either side of the divider disagreed. */
  .hold-timer.hold-bar { --hold-pad: 10px; gap: var(--hold-pad); padding: 8px 12px 8px var(--hold-pad); }
  .hold-bar-rule { margin-left: 0; margin-right: 0; }
  .hold-bar-team { display: none; }
  .hold-bar-cart { display: none; }
  .hold-bar .hold-timer-label { font-size: 1.15rem; letter-spacing: 0.02em; }
  .hold-bar .hold-timer-text { font-size: 1.15rem; }
  .hold-bar-right { gap: 8px; }
}
@media (max-width: 380px) {
  .hold-bar .hold-timer-label { font-size: 1rem; letter-spacing: 0; }
  .hold-bar-sep { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hold-timer.hold-bar::after { animation: none; opacity: 0; }
}

/* Hold timer slot inside the navbar */
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.navbar .nav-brand { margin-right: 4px; }
.navbar .nav-lang-wrap { margin-right: 0; }
.navbar .nav-actions { margin-left: auto; }
.nav-hold-slot {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* Keep slot present even when empty — preserves flex spacer so flag stays glued to logo */
.nav-hold-slot:empty { visibility: hidden; }
.nav-hold-slot .hold-timer { animation: none; box-shadow: none; }

/* Force HELD pill to render inside navbar bar, vertically centered, no overflow */
.navbar { overflow: visible; }
.navbar .nav-hold-slot {
  height: var(--nav-height);
  align-items: center;
}
.navbar .nav-hold-slot .hold-timer {
  position: relative;
  margin: 0;
  max-height: calc(var(--nav-height) - 16px);
}

/* Hold-timer pill — bigger size in navbar */
.navbar .hold-timer {
  gap: clamp(6px, 1.5vw, 10px);
  padding: clamp(7px, 1.6vw, 12px) clamp(12px, 3vw, 20px);
  font-size: clamp(0.78rem, 2.2vw, 1rem);
  letter-spacing: 0.04em;
}
.navbar .hold-timer i, .navbar .hold-timer svg { font-size: 16px; }

/* === BV brand-aware site menu (rendered by app.js renderSiteMenu on bookvelt.com host) === */
.bv-menu-list { list-style: none; padding: 0; margin: 0; }
.bv-menu-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; color: rgba(228,228,231,.85);
  font-size: .98rem; font-weight: 500; text-decoration: none;
  transition: background .15s, color .15s;
  border-left: 2px solid transparent;
}
.bv-menu-link:hover { background: rgba(255,255,255,.04); color: #fff; border-left-color: #4aa1d9; }
.bv-menu-link-sm { font-size: .85rem; color: rgba(228,228,231,.55); padding-top: 8px; padding-bottom: 8px; }
.bv-menu-link-sm:hover { color: rgba(228,228,231,.85); }
.bv-menu-cta {
  color: #07070b !important; background: linear-gradient(135deg, #4aa1d9, #5fb8ee);
  margin: 8px 22px 12px; padding: 12px 18px; border-radius: 999px;
  justify-content: center; font-weight: 600;
  border-left: none;
}
.bv-menu-cta:hover { background: linear-gradient(135deg, #5fb8ee, #4aa1d9); border-left: none; transform: translateY(-1px); }
.bv-menu-divider { height: 1px; background: rgba(255,255,255,.06); margin: 10px 22px; list-style: none; }
.bv-menu-section-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(228,228,231,.4); padding: 8px 22px 4px; list-style: none;
}

/* Venue info panel — slides up from bottom of map on click, shows venue details + CTA */
.map-location-info-box {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 600;
  background: rgba(18,18,30,0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--bv-line);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
  /* The card scrolled because 60% of a short map is less than its own content
     (owner 2026-08-31). Taller cap plus the tighter metrics below, so it fits
     without a scrollbar; the scroll stays only as the last resort on a very
     short viewport. */
  max-height: 76%;
  overflow-y: auto;
}
.map-location-info-box:not([hidden]) { opacity: 1; pointer-events: auto; transform: translateY(0); }
.map-location-info-box-close {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,0.08); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.map-location-info-box-close:hover { background: rgba(255,255,255,0.18); }
.map-loc-info-head { display: flex; gap: 12px; align-items: center; padding-right: 36px; }
.map-loc-info-logo { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: 0 0 56px; background: rgba(255,255,255,0.06); }
.map-loc-info-name { font-size: 1.05rem; font-weight: 700; line-height: 1.2; margin: 0;
  display: flex; align-items: center; gap: 8px; }
.map-loc-info-area { font-size: 0.78rem; opacity: 0.65; }
.map-loc-info-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.map-loc-info-row { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; line-height: 1.35; }
.map-loc-info-row .map-loc-info-ico { flex: 0 0 18px; opacity: 0.6; }
.map-loc-info-cta {
  display: inline-flex; justify-content: center; align-items: center;
  gap: 6px;
  margin-top: 14px; margin-left: auto;
  padding: 11px 18px;
  background: var(--accent, #4aa1d9);
  color: #fff;
  font-weight: 700; font-size: 0.92rem;
  border-radius: 10px;
  text-decoration: none;
}
.map-loc-info-cta:hover { filter: brightness(1.1); }
@media (max-width: 600px) {
  .map-location-info-box { left: 8px; right: 8px; bottom: 8px; padding: 12px; max-height: 50%; }
  .map-loc-info-logo { width: 48px; height: 48px; flex: 0 0 48px; }
}


/* iOS no-zoom-on-focus: any input under 16px font triggers auto-zoom. Force >= 16px on mobile. */
@media (max-width: 720px) {
  input, textarea, select, .ph-bar-search input, .ev-header-b-search input {
    font-size: 16px !important;
  }
}


/* 3-tab row: Locations / Near Me / List — equal 33.33% width */
.loc-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 14px;
  background: rgba(255,255,255,0.04);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
}
.loc-tabs .loc-tab {
  flex: 1 1 33.333%;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.loc-tabs .loc-tab.active {
  background: var(--bg-card);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.loc-tabs .loc-tab:not(.active):hover { color: var(--text); }
@media (max-width: 480px) {
  .loc-tabs .loc-tab { font-size: 0.82rem; padding: 10px 4px; }
}

/* Near Me overlay — blurred map underneath + centered card on top */
.loc-nearme-overlay {
  position: absolute; inset: 0;
  z-index: 700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,18,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.loc-nearme-overlay[hidden] { display: none; }
.loc-nearme-overlay-card {
  background: rgba(18,18,30,0.96);
  border: 1px solid var(--bv-line);
  border-radius: 16px;
  padding: 28px;
  max-width: 380px;
  width: calc(100% - 24px);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}
.loc-nearme-overlay-card svg { color: var(--accent, #4aa1d9); }
.loc-nearme-overlay-card h3 { margin: 12px 0 8px; font-size: 1.15rem; }
.loc-nearme-overlay-card p { margin: 0 0 20px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
.loc-nearme-overlay-card button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--accent, #4aa1d9);
  color: #fff; border: none; border-radius: 10px;
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.loc-nearme-overlay-card button:hover { filter: brightness(1.1); }

.map-location-info-box.closing { opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; }

/* Venue info panel — extended */
.map-loc-info-logo { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; border-radius: 8px !important; }
.map-loc-info-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.map-loc-info-badges-sm img { width: 22px !important; height: 22px !important; }
.map-loc-info-bdg { width: 28px; height: 28px; object-fit: contain; border-radius: 5px; background: rgba(255,255,255,0.06); padding: 3px; }
.map-loc-info-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 0.85rem; }
.map-loc-info-stat { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255,255,255,0.05); border-radius: 8px; }
.map-loc-info-stat b { font-weight: 700; color: #fff; }
.map-loc-info-booking { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.map-loc-info-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.map-loc-info-pill-ok   { background: rgba(102, 179, 46, 0.18); color: #8fd95a; border: 1px solid rgba(102, 179, 46, 0.35); }
.map-loc-info-pill-no   { background: rgba(229, 62, 62, 0.15); color: #f47373; border: 1px solid rgba(229, 62, 62, 0.3); }
.map-loc-info-pill-info { background: rgba(74, 161, 217, 0.15); color: #7fc1e5; border: 1px solid rgba(74, 161, 217, 0.35); }

/* Even smaller logo + name */
.map-loc-info-logo { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border-radius: 6px !important; }
.map-loc-info-name { font-size: 0.92rem !important; }
.map-loc-info-area { font-size: 0.72rem !important; }

/* 2 rows of square icon buttons inside venue panel */
.map-loc-info-row1, .map-loc-info-row2 {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.map-loc-info-btn {
  flex: 1 1 0;
  aspect-ratio: 1.6 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bv-line);
  border-radius: 10px;
  padding: 6px;
  gap: 2px;
  min-height: 44px;
}
.map-loc-info-btn-ico { display: flex; align-items: center; justify-content: center; opacity: 0.85; }
.map-loc-info-btn-num { font-size: 0.92rem; font-weight: 700; line-height: 1; }
.map-loc-info-btn-ok   { background: rgba(102, 179, 46, 0.16); border-color: rgba(102, 179, 46, 0.4); color: #8fd95a; }
.map-loc-info-btn-ok .map-loc-info-btn-ico { opacity: 1; }
.map-loc-info-btn-no   { background: rgba(229, 62, 62, 0.14); border-color: rgba(229, 62, 62, 0.35); color: #f47373; }
.map-loc-info-btn-no .map-loc-info-btn-ico { opacity: 1; }
.map-loc-info-btn-info { background: rgba(74, 161, 217, 0.14); border-color: rgba(74, 161, 217, 0.35); color: #7fc1e5; }
.map-loc-info-btn-info .map-loc-info-btn-ico { opacity: 1; }


/* CTA aligned right */
.map-location-info-box-body { display: flex; flex-direction: column; }
.map-loc-info-cta { align-self: flex-end; }

/* 2-column layout inside venue panel: left = 2x3 grid of icon buttons, right = big square CTA */
.map-loc-info-2col {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: stretch;
}
.map-loc-info-col-icons {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-loc-info-col-icons .map-loc-info-row1,
.map-loc-info-col-icons .map-loc-info-row2 { margin-top: 0; }
.map-loc-info-cta-square {
  align-self: stretch !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  width: auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: var(--accent, #4aa1d9);
  color: #fff;
  transition: filter 0.15s;
}
.map-loc-info-cta-square:hover { filter: brightness(1.12); }
.map-loc-info-cta-square svg { width: 28px; height: 28px; }

/* Small inline pills for TVs/tables/seats */
.map-loc-info-row1 { display: flex; flex-wrap: wrap; gap: 6px; }
.map-loc-info-pill-stat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bv-line);
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  line-height: 1;
}
.map-loc-info-pill-stat svg { opacity: 0.7; }
.map-loc-info-pill-stat b { font-weight: 700; color: #fff; }

/* Color variants for small stat pills */
.map-loc-info-pill-stat.map-loc-info-pill-ok   { background: rgba(102, 179, 46, 0.16); border-color: rgba(102, 179, 46, 0.4); color: #8fd95a; }
.map-loc-info-pill-stat.map-loc-info-pill-no   { background: rgba(229, 62, 62, 0.14); border-color: rgba(229, 62, 62, 0.35); color: #f47373; }
.map-loc-info-pill-stat.map-loc-info-pill-info { background: rgba(74, 161, 217, 0.14); border-color: rgba(74, 161, 217, 0.35); color: #7fc1e5; }
.map-loc-info-pill-stat.map-loc-info-pill-ok svg,
.map-loc-info-pill-stat.map-loc-info-pill-no svg,
.map-loc-info-pill-stat.map-loc-info-pill-info svg { opacity: 1; }
.map-loc-info-row2 { display: flex; flex-wrap: wrap; gap: 6px; }


/* CTA hard-square */
.map-loc-info-cta-square {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  flex: 0 0 56px !important;
  aspect-ratio: 1 / 1 !important;
}
.map-loc-info-2col { align-items: center !important; }

/* Mobile: allow 1-finger page scroll over the map (pan-y), 2-finger pan goes to map */
@media (hover: none) and (pointer: coarse) {
  .loc-map { touch-action: pan-y !important; touch-action: manipulation; }
}

/* 2-finger hint overlay */
.map-touch-info-box {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(18,18,30,0.92);
  color: #fff;
  padding: 18px 22px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 800;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.map-touch-info-box.show { opacity: 1; }
.map-touch-info-box svg { color: var(--accent, #4aa1d9); }
/* Tilt the 2-finger hint icon for a casual feel */
.map-touch-info-box svg { transform: rotate(-20deg); }

/* Force two-finger SVG to render white regardless of source fills */
.map-touch-info-box img { filter: brightness(0) invert(1); }

/* 2-finger hint — 3 rows layout */
.map-touch-info-box { gap: 14px; padding: 20px 22px; }
.map-touch-info-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.map-touch-info-ico {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  filter: brightness(0) invert(1);
}
.map-touch-info-text { text-align: left; line-height: 1.2; }
.map-touch-info-title { font-size: 0.95rem; font-weight: 700; }
.map-touch-info-sub   { font-size: 0.72rem; opacity: 0.65; margin-top: 2px; }
/* Override the older invert filter for the new row icons (already applied) */
.map-touch-info-box img { filter: brightness(0) invert(1); }

/* Override: pills as rounded rectangles, not capsules */
.map-loc-info-pill-stat { border-radius: 8px !important; padding: 5px 10px !important; }

/* Search container under List tab */
.loc-list-search { margin: 14px 0; }
.loc-list-search .ph-bar-search { width: 100%; min-width: 0; }

/* Venue card on order confirmation page */
.oc-venue-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 16px;
  margin: 20px 0;
}
.oc-venue-head { display: flex; align-items: center; gap: 12px; }
.oc-venue-logo {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
}
.oc-venue-name { font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.oc-venue-addr {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.oc-venue-btns {
  display: flex; gap: 8px;
  margin-top: 14px;
}
.oc-venue-btn {
  flex: 1 1 33.333%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bv-line);
  border-radius: 10px;
  color: #fff;
  font-weight: 600; font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.15s;
}
.oc-venue-btn:hover { background: rgba(255,255,255,0.12); }
.oc-venue-btn img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.oc-venue-map {
  margin-top: 14px;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

/* Location type filter chips */
.loc-type-filters {
  display: flex; flex-wrap: nowrap; gap: 6px;
  margin: 0 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.loc-type-filters::-webkit-scrollbar { display: none; }
.loc-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bv-line);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.loc-chip:hover { color: var(--text); }
.loc-chip.active { background: var(--accent, #4aa1d9); color: #fff; border-color: var(--accent, #4aa1d9); }

/* Hide POI filter chips on /locations for now — re-enable when food/sports/leagues filters land */
.loc-type-filters { display: none !important; }

/* ── Location detail: tabs (mobile shows one, desktop shows both) ── */
.ld-tabs-nav {
  display: flex;
  gap: 4px;
  position: sticky;
  top: 56px;
  z-index: 30;
  background: var(--bg, #0f0f1a);
  padding: 8px 0 0;
  margin: 0 -16px 12px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid var(--border, var(--bv-line-solid));
}
.ld-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 12px 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .15s, border-color .15s;
}
.ld-tab-btn:hover { color: var(--text); }
.ld-tab-btn.active { color: #4aa1d9; border-bottom-color: #4aa1d9; }
.ld-tabs-wrap { display: flex; flex-direction: column; gap: 16px; }
.ld-tab { display: none; flex-direction: column; gap: 16px; }
.ld-tab.active { display: flex; }
.ld-empty-state { padding: 40px 20px; text-align: center; color: var(--text-muted); }

/* Desktop: hide tab nav, show both panels stacked OR side-by-side via grid. */
@media (min-width: 900px) {
  .ld-tabs-nav { display: none; }
  .ld-tabs-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
  .ld-tab { display: flex !important; }
  .ld-tab[data-tab=events] { grid-column: 1; }
  .ld-tab[data-tab=about]  { grid-column: 2; }
}

/* Broadcaster grid inside About tab */
.ld-broadcaster-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ld-broadcaster {
  display: flex; align-items: center; justify-content: center;
  padding: 5px; border-radius: 6px;
  background: var(--bg-secondary, rgba(255,255,255,.04));
  border: 1px solid var(--border, var(--bv-line-solid));
  aspect-ratio: 1 / 1; min-height: 36px;
  transition: transform .12s, border-color .15s;
}
.ld-broadcaster:hover { transform: translateY(-1px); border-color: #4aa1d9; }
.ld-broadcaster img { width: 28px; height: 28px; object-fit: contain; }

/* Sports & Leagues chips on location profile — logos only, no text */
.ld-sports-row, .ld-leagues-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ld-sport-chip, .ld-league-chip {
  display: flex; align-items: center; justify-content: center;
  padding: 5px; border-radius: 6px;
  background: var(--bg-secondary, rgba(255,255,255,.04));
  border: 1px solid var(--border, var(--bv-line-solid));
  aspect-ratio: 1 / 1; min-height: 36px;
  transition: transform .12s, border-color .15s;
}
.ld-sport-chip:hover, .ld-league-chip:hover { transform: translateY(-1px); border-color: #4aa1d9; }
.ld-sport-chip img, .ld-league-chip img { width: 28px; height: 28px; object-fit: contain; }

/* Force 6 per row */
.ld-sports-row, .ld-leagues-grid, .ld-broadcaster-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* Verified venue badge — X/Instagram style starburst */
.ld-verified { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; }
.ld-verified svg { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(74,161,217,.5)); }

.ld-verified i { color: #4aa1d9 !important; filter: drop-shadow(0 0 4px rgba(74,161,217,.5)); }

/* ── Language / Country selector (offcanvas + footer) ── */
.menu-lc { margin-bottom: 8px; }
.menu-lc-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; margin: 10px 4px 6px; }
.menu-lc-langs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.menu-lc-lang { width: 34px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: rgba(255,255,255,.04); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; }
.menu-lc-lang img { width: 20px; height: 15px; border-radius: 2px; display: block; }
.menu-lc-lang:hover { background: rgba(255,255,255,.1); }
.menu-lc-lang.active { border-color: var(--brand-primary, #4aa1d9); background: rgba(74,161,217,.18); }
.menu-lc-areas { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.menu-lc-area { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: #e4e4e7; font-size: 14px; cursor: pointer; text-align: left; transition: background .12s; }
.menu-lc-area img { width: 20px; height: 15px; border-radius: 2px; flex: 0 0 auto; }
.menu-lc-area span:nth-child(2) { flex: 1; }
.menu-lc-area:hover { background: rgba(255,255,255,.06); }
.menu-lc-area.active { background: rgba(74,161,217,.16); font-weight: 600; }
.menu-lc-count { font-size: 11px; color: #9ca3af; background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 10px; }
/* Footer variant */
.footer-lc { margin-top: 14px; }
.footer-lc .menu-lc-label { color: #6b7280; }
.footer-lc-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--bv-line); border-radius: 8px; background: rgba(255,255,255,.03); color: #e4e4e7; font-size: 13px; cursor: pointer; }
.footer-lc-toggle img { width: 20px; height: 15px; border-radius: 2px; }
.site-menu-close{margin-left:auto}

/* ── Area badge next to logo (YouTube-region style) ── */
.nav-area-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;margin-left:10px;border:1px solid var(--bv-line);border-radius:8px;background:rgba(255,255,255,.04);cursor:pointer;color:var(--text,#e4e4e7);transition:background .12s,border-color .12s}
.nav-area-badge:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.nav-area-flag{width:22px;height:16px;border-radius:3px;display:block;object-fit:cover}
.nav-area-code{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.nav-area-caret{opacity:.6;flex:0 0 auto}
/* ── Apple-style "Change country?" confirmation ── */
.sb-cc-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s}
.sb-cc-overlay.open{opacity:1}
.sb-cc-dialog{width:min(380px,90vw);background:#16161f;border:1px solid var(--bv-line);border-radius:18px;padding:28px 26px 22px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6);transform:translateY(8px) scale(.98);transition:transform .18s}
.sb-cc-overlay.open .sb-cc-dialog{transform:translateY(0) scale(1)}
.sb-cc-flag{display:flex;justify-content:center;margin-bottom:14px}
.sb-cc-flag img{width:48px;height:36px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.5);object-fit:cover}
.sb-cc-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#fff}
.sb-cc-text{margin:0 0 20px;font-size:14px;line-height:1.5;color:#9ca3af}
.sb-cc-text strong{color:#e4e4e7}
.sb-cc-btns{display:flex;gap:10px}
.sb-cc-btns button{flex:1;padding:11px 0;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .12s}
.sb-cc-cancel{background:rgba(255,255,255,.06);color:#e4e4e7;border-color:var(--bv-line)}
.sb-cc-cancel:hover{background:rgba(255,255,255,.12)}
.sb-cc-go{background:var(--brand-primary,#4aa1d9);color:#fff}
.sb-cc-go:hover{filter:brightness(1.08)}

/* ── Apple-style top country/region banner ── */
.sb-area-bar{position:fixed;top:0;left:0;right:0;z-index:99998;background:#1c1c1e;border-bottom:1px solid var(--bv-line);transform:translateY(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sb-area-bar.open{transform:translateY(0)}
.sb-area-bar-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 22px}
.sb-area-bar-text{flex:1;color:#d2d2d7;font-size:14px;line-height:1.4}
.sb-area-bar-ctrl{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.sb-area-pill{position:relative;display:flex;align-items:center;gap:10px;min-width:240px;padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.06);cursor:pointer;color:#f5f5f7;font-size:15px;font-weight:500;user-select:none}
.sb-area-pill:hover{background:rgba(255,255,255,.1)}
.sb-area-check{color:#fff;font-size:13px;width:14px;flex:0 0 auto}
.sb-area-pill-flag{width:24px;height:17px;border-radius:3px;object-fit:cover;flex:0 0 auto}
.sb-area-pill-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-area-pill-caret{opacity:.6;transition:transform .15s;flex:0 0 auto}
.sb-area-pill.open .sb-area-pill-caret{transform:rotate(180deg)}
.sb-area-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:340px;overflow-y:auto;background:#2c2c2e;border:1px solid var(--bv-line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5);padding:6px;display:none;z-index:5}
.sb-area-pill.open .sb-area-menu{display:block}
.sb-area-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:transparent;color:#f5f5f7;font-size:14px;cursor:pointer;text-align:left;border-radius:8px}
.sb-area-opt:hover{background:rgba(255,255,255,.08)}
.sb-area-opt.active{background:rgba(74,161,217,.2)}
.sb-area-opt img{width:22px;height:16px;border-radius:2px;object-fit:cover;flex:0 0 auto}
.sb-area-opt span:nth-child(2){flex:1}
.sb-area-opt .sb-area-opt-count{font-size:11px;color:#98989d;background:rgba(255,255,255,.08);padding:1px 7px;border-radius:10px}
.sb-area-continue{padding:10px 22px;border:none;border-radius:10px;background:#f5f5f7;color:#1c1c1e;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.sb-area-continue:hover{background:#fff}
.sb-area-x{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#d2d2d7;cursor:pointer;border-radius:8px;font-size:20px}
.sb-area-x:hover{background:rgba(255,255,255,.08)}
@media(max-width:720px){.sb-area-bar-inner{flex-wrap:wrap;gap:12px;padding:14px 16px;position:relative}.sb-area-bar-text{flex:1 1 100%;padding-right:40px;font-size:15px}.sb-area-bar-ctrl{flex:1 1 100%;gap:10px}.sb-area-pill{min-width:0;flex:1}.sb-area-continue{flex:0 0 auto}.sb-area-x{position:absolute;top:8px;right:8px}}

/* ── Flag glide (light sweep) on the area badge ── */
.nav-area-badge{padding:5px 10px}
.nav-area-flagwrap{position:relative;display:inline-block;overflow:hidden;border-radius:3px;line-height:0}
.nav-area-flag{display:block;border-radius:3px}
.nav-area-flagwrap::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:flagGlide 3.2s ease-in-out infinite}
@keyframes flagGlide{0%,72%{left:-120%}88%,100%{left:140%}}
@media(prefers-reduced-motion:reduce){.nav-area-flagwrap::after{animation:none}}
.nav-area-badge:hover .nav-area-flagwrap::after{animation-duration:1s}

/* ── Language/Country compact selects (offcanvas + footer) ── */
.menu-lc-row{display:flex;flex-direction:column;gap:5px;padding:8px 4px}
.menu-lc-row label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9ca3af}
.menu-lc-select{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#16161f;color:#e4e4e7;font-size:14px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.menu-lc-select:focus{outline:none;border-color:var(--brand-primary,#4aa1d9)}

/* ── One-line Country | Language (flag + select each) ── */
.menu-lc-line{display:flex;gap:8px;padding:6px 4px}
.menu-lc-field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#16161f}
.menu-lc-field:focus-within{border-color:var(--brand-primary,#4aa1d9)}
.menu-lc-fieldflag{width:22px;height:16px;border-radius:3px;object-fit:cover;flex:0 0 auto}
.menu-lc-field .menu-lc-select{flex:1;min-width:0;border:none;background:transparent;padding:2px 18px 2px 0;border-radius:0;font-size:14px;background-position:right 0 center}
.menu-lc-field .menu-lc-select:focus{border:none}

/* ── Custom flag dropdowns (Country | Language) one line ── */
.menu-lc-line{display:flex;gap:8px;padding:6px 4px}
.lc-dd{position:relative;flex:1;min-width:0}
.lc-dd-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#16161f;color:#e4e4e7;font-size:14px;cursor:pointer}
.lc-dd-btn:hover{border-color:rgba(255,255,255,.26)}
.lc-dd.open .lc-dd-btn{border-color:var(--brand-primary,#4aa1d9)}
.lc-dd-flag{width:22px;height:16px;border-radius:3px;object-fit:cover;flex:0 0 auto}
.lc-dd-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.lc-dd-caret{opacity:.55;flex:0 0 auto;transition:transform .15s}
.lc-dd.open .lc-dd-caret{transform:rotate(180deg)}
.lc-dd-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;max-height:300px;overflow-y:auto;background:#1c1c26;border:1px solid rgba(255,255,255,.14);border-radius:11px;box-shadow:0 14px 36px rgba(0,0,0,.55);padding:5px;display:none;z-index:50}
.lc-dd.open .lc-dd-menu{display:block}
.lc-dd-opt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:none;background:transparent;color:#e4e4e7;font-size:13.5px;cursor:pointer;text-align:left;border-radius:7px}
.lc-dd-opt:hover{background:rgba(255,255,255,.08)}
.lc-dd-opt.active{background:rgba(74,161,217,.2);font-weight:600}
.lc-dd-opt span:nth-of-type(1){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-dd-count{flex:0 0 auto;font-size:11px;color:#9ca3af;background:rgba(255,255,255,.08);padding:1px 7px;border-radius:10px}

/* ── Area flag badge: no box, logo-sized, tight to logo ── */
.nav-area-badge{padding:0;border:none;background:transparent;margin-left:6px;gap:0}
.nav-area-badge:hover{background:transparent;border:none}
.nav-area-badge .nav-area-caret{display:none}
.nav-area-flagwrap{border-radius:5px}
.nav-area-flag{height:28px;width:auto;border-radius:5px}

/* flag smaller than logo */
.nav-area-flag{height:20px;width:auto;border-radius:4px}

/* flag tighter to logo */
.nav-area-badge{margin-left:2px}

/* ── Country/Language columns with labels, aligned to sports rows ── */
.menu-lc-line{padding:4px 12px 8px 16px;gap:10px}
.menu-lc-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.menu-lc-collabel{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9ca3af;padding-left:2px}
.menu-lc-col .lc-dd-btn{padding:8px 10px;font-size:13px}
.menu-lc-col .lc-dd-flag{width:20px;height:14px}

/* Region group header in area dropdown */
.lc-dd-group{padding:8px 10px 4px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}

/* Monogram avatar fallback for venues without a logo */
.loc-monogram{display:flex !important;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:Inter,system-ui,sans-serif;text-transform:uppercase}
.loc-card-logo.loc-monogram{font-size:16px}
.map-loc-info-logo.loc-monogram{font-size:14px}

/* Cluster label floats below badge, visual-only (not part of clickable hit box) */
.sb-cluster-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;pointer-events:none}

/* Zoom-aware city badge scaling (small dots at wide zoom, full size up close) */
.sb-cluster-city{transform:scale(var(--mk-city-scale,1));transform-origin:center;transition:transform .15s ease}
.sb-cluster-city .sb-cluster-label{font-size:calc(8.5px * var(--mk-city-scale,1));opacity:var(--mk-city-scale,1)}


.loc-tab-count{display:inline-block;margin-left:10px;padding:3px 12px;border-radius:12px;background:#f59e0b;color:#0a0a0a;font-size:.78rem;font-weight:800;line-height:1.2;vertical-align:middle;letter-spacing:.02em;min-width:24px;text-align:center}

/* Search bar (replaces World/Near Me tabs) */
/* Locations tabs (2026-08-29): the segmented .loc-tabs styles further up
   render the row; here only the bits the two-tab rework added. The [hidden]
   guards exist because display:flex in author CSS beats the hidden attribute. */
.loc-searchbar[hidden] { display: none; }
/* City picked: the search tab is a BUTTON (pin + "Madrid, Spain"), tap
   re-centers the map, only the X resets it into a search box. */
.loc-tabs .loc-tab-search.city-set { cursor: pointer; }
.loc-tabs .loc-tab-search.city-set .loc-searchbar-input { cursor: pointer; color: #fff; }

/* Real buttons (owner 2026-08-29: "make them real buttons, highlight one
   active"). Overrides the legacy segmented look: each tab is its own button,
   the ACTIVE one is unmistakably blue, and the browser focus ring no longer
   fakes an active state on the Near Me <button>. */
.loc-tabs {
  background: none;
  border: none;
  padding: 0;
  gap: 10px;
}
.loc-tabs .loc-tab {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  color: var(--text-secondary, #9aa3b2);
  box-shadow: none;
}
.loc-tabs .loc-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }
.loc-tabs .loc-tab.active {
  background: rgba(74,161,217,0.20);
  border-color: rgba(74,161,217,0.65);
  color: #fff;
  box-shadow: none;
}
.loc-tabs .loc-tab.active i { color: #4aa1d9; }
/* Near Me active = GREEN (matches its map dot); Search active stays blue. */
.loc-tabs #locTabNearme.active {
  background: rgba(102,179,46,0.20);
  border-color: rgba(102,179,46,0.65);
}
.loc-tabs #locTabNearme.active i { color: #66b32e; }
.loc-tabs .loc-tab:focus { outline: none; }
.loc-tabs .loc-tab:focus-visible { outline: 2px solid rgba(74,161,217,0.8); outline-offset: 2px; }
/* The Search tab IS the search box: an input living inside the segmented tab */
.loc-tabs .loc-tab-search { cursor: text; justify-content: flex-start; }
.loc-tabs .loc-tab-search .loc-searchbar-input-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  position: relative;
  background: none;
  border: none;
  padding: 0;
}
.loc-tabs .loc-tab-search .loc-searchbar-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0;
}
.loc-tabs .loc-tab-search .loc-searchbar-input::placeholder {
  color: inherit;
  opacity: 0.85;
  font-weight: 600;
}
/* The dropdown should span the whole tab, not just the input */
.loc-tabs .loc-tab-search { position: relative; }
.loc-tabs .loc-tab-search .loc-search-suggest {
  left: -34px;
  right: -44px;
  top: calc(100% + 12px);
  z-index: 60;
}
.loc-empty-retry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 16px;
  background: rgba(74,161,217,0.16);
  border: 1px solid rgba(74,161,217,0.55);
  border-radius: 12px;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.loc-empty-retry:hover { background: rgba(74,161,217,0.28); }

.loc-searchbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 16px 0 14px;
}
.loc-searchbar-input-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 0 12px;
  transition: border-color 0.15s, background 0.15s;
}
.loc-searchbar-input-wrap:focus-within {
  border-color: var(--brand-primary, #4aa1d9);
  background: rgba(255,255,255,0.06);
}
.loc-searchbar-search-icon {
  flex: 0 0 auto;
  opacity: 0.55;
  margin-right: 10px;
}
.loc-searchbar-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text, #fff);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 14px 0;
  min-width: 0;
}
.loc-searchbar-input::placeholder { color: var(--text-muted); opacity: 0.7; }
.loc-searchbar-input::-webkit-search-cancel-button { display: none; }
.loc-searchbar-clear {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.loc-searchbar-clear:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.loc-searchbar-center {
  flex: 0 0 auto;
  width: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.loc-searchbar-center:hover {
  color: var(--text, #fff);
  background: rgba(255,255,255,0.08);
  border-color: var(--brand-primary, #4aa1d9);
}
.loc-searchbar-center.active {
  color: #66b32e;
  border-color: #66b32e;
}
@media (max-width: 480px) {
  .loc-searchbar-input { font-size: 0.88rem; padding: 12px 0; }
  .loc-searchbar-center { width: 44px; }
}
/* Search suggestion dropdown */
.loc-search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-card, #1a1a24);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.loc-search-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text);
  border-bottom: 1px solid var(--border-glass);
  font-size: 0.9rem;
}
.loc-search-suggest-item:last-child { border-bottom: none; }
.loc-search-suggest-item:hover,
.loc-search-suggest-item.focused { background: rgba(255,255,255,0.06); }
.loc-search-suggest-kind {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-left: auto;
}
.loc-search-suggest-sub { color: var(--text-muted); font-size: 0.78rem; }


/* Role-based offcanvas menu module */
.menu-role-module { margin-bottom: 4px; }
.menu-role-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  color: var(--text, #fff); text-decoration: none;
  font-size: 0.95rem; font-weight: 600;
  border-radius: 8px;
  transition: background 0.15s;
}
.menu-role-item:hover { background: rgba(255,255,255,0.06); }
.menu-role-item .bookvelt-icon { opacity: 0.75; }
.menu-role-badge {
  margin-left: auto; padding: 2px 8px; border-radius: 8px;
  background: var(--brand-primary, #4aa1d9); color: #fff;
  font-size: 0.7rem; font-weight: 700;
}
.menu-role-managed {
  margin-left: 8px; padding: 2px 8px; border-radius: 8px;
  background: rgba(243,146,32,0.18); color: #f39220;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; vertical-align: middle;
}

/* Venue tier badge (next to the name): free=grey, listed=orange, paid=blue, managed=green */
.ld-tier-badge { display: inline-flex; vertical-align: middle; }
.ld-tier-free { color: #6b7280; }
.ld-tier-listed { color: #f39220; }
.ld-tier-paid { color: #4aa1d9; }
.ld-tier-managed { color: #22c55e; }


/* Report / Claim card on location pages */
.ld-report-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 20px 18px; }
.ld-report-actions .btn { font-size: 0.85rem; }


/* Suggest an edit / Claim this venue — quiet links under About */
.ld-edit-links { display: flex; gap: 20px; padding: 14px 4px 4px; flex-wrap: wrap; }
.ld-edit-links a { color: var(--text-muted); font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ld-edit-links a:hover { color: var(--text); }

/* Login modal: order-page style method cards */
.lm-methods { display: flex; gap: 8px; margin: 16px 0 14px; }
.lm-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 4px; min-height: 56px; border-radius: 10px;
  background: var(--surface-2, #1a1a25); border: 1px solid var(--border, var(--bv-line-solid));
  color: #fff; cursor: pointer; font-family: inherit;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.lm-btn:hover { background: var(--surface-3, #25253a); }
.lm-btn:active { transform: scale(0.97); }
.lm-btn.is-active { border-width: 2px; padding: 9px 3px; }
.lm-btn-whatsapp.is-active { border-color: #25d366; background: rgba(37, 211, 102, 0.12); }
.lm-btn-email.is-active { border-color: var(--accent, #4aa1d9); background: rgba(74, 161, 217, 0.12); }
.lm-btn-sms.is-active { border-color: var(--accent, #4aa1d9); background: rgba(74, 161, 217, 0.12); }
.lm-btn-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; }
.lm-btn img, .lm-btn svg { width: 20px; height: 20px; }
.lm-btn i { color: #fff; font-size: 20px; line-height: 1; }
.lm-btn-email i, .lm-btn-email img, .lm-btn-google img, .lm-btn-google i {
  font-size: 16px !important; width: 20px !important; height: 20px !important;
  display: inline-flex !important; align-items: center; justify-content: center; padding: 2px; box-sizing: border-box;
}
/* Modal fields: black order-page style */
.login-modal input[type="text"], .login-modal input[type="email"],
.login-modal input[type="tel"], .login-modal input[type="password"] {
  background: #000 !important; color: #fff !important;
  border: 1px solid var(--border, var(--bv-line-solid)) !important; border-radius: 10px !important;
}
.login-modal input:focus { border-color: var(--accent, #4aa1d9) !important; }
@media (max-width: 380px) { .lm-btn { padding: 8px 2px; min-height: 48px; } .lm-btn-label { font-size: 0.58rem; } }

.sp-tier-per { font-size: 0.65em; font-weight: 600; color: var(--text-muted); margin-left: 2px; }

/* Footer language/country: shared menu-lc module, dropdowns open UPWARD near the page bottom */
.footer-lc { display: flex; justify-content: center; }
.footer-lc .menu-lc { max-width: 480px; width: 100%; padding: 0; }
.footer-lc .menu-lc-line { justify-content: center; }
.footer-lc .lc-dd-menu { top: auto; bottom: calc(100% + 6px); }

/* Footer brandmark: small Bookvelt wide logo under the copyright line */
.footer-brandmark { display: flex; justify-content: center; margin-top: 22px; padding-bottom: 4px; }
.footer-brandmark img { height: 20px; width: auto; opacity: 0.85; transition: opacity 0.15s; }
.footer-brandmark a:hover img { opacity: 1; }

/* Near-black league crests would disappear on the dark browse background: give
   them a light chip so the artwork stays readable. Flagged by badge_dark in DB. */
.browse-badge-img.on-light {
  background: rgba(255,255,255,0.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.browse-badge-img.on-light img { padding: 3px; }

/* View switcher (Main / Local / All) — sits above the sport rail on browser pages */
.view-switcher { display: flex; gap: 8px; margin: 0 0 12px; }
.view-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: var(--radius-sm, 8px); font-size: 12px; font-weight: 600;
  letter-spacing: .02em; cursor: pointer; border: 1px solid var(--border, var(--bv-line-solid));
  background: transparent; color: var(--text-muted, #9aa0b4);
  transition: background .15s, color .15s, border-color .15s;
}
.view-pill img, .view-pill-flag { display: block; width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }

/* Local can be pointed at another country. The menu opens from the Local pill
   itself once Local is the active view; it carried a caret until 2026-09-03. */
.view-pill-wrap { position: relative; display: inline-flex; }
.view-country-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  display: none; flex-direction: column; min-width: 190px; padding: 6px;
  border-radius: var(--radius-sm, 8px); border: 1px solid var(--border, var(--bv-line-solid));
  background: var(--surface-2, #14141f);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.view-pill-wrap.open .view-country-menu { display: flex; }
.view-country-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-muted, #9aa0b4); font-size: 12.5px; font-weight: 600;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.view-country-opt:hover { background: rgba(255,255,255,.06); color: var(--text, #e9e9f2); }
.view-country-opt.active { color: var(--brand-blue, #4aa1d9); }
.view-country-flag { display: block; width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.view-pill i { font-size: 13px; line-height: 1; }
.view-pill, .date-separator-btn { white-space: nowrap; }
/* LOCAL, TOP, ALL. Uppercase in the markup would have to be done in 16 languages
   and would reach the aria-label too, so it is done here. */
.view-pill { text-transform: uppercase; }
/* Once the row runs out of width, only the ACTIVE view keeps its word: the other
   two are their icon alone, which is what the flag and the star and the globe are
   there for. Above this width all three read in full. */
@media (max-width: 700px) {
  .view-pill:not(.active) > span { display: none; }
  .view-pill:not(.active) { padding: 0 9px; }
}
/* Narrow phones: tighten the date line so date + the three views + the count
   chip all fit without the row having to scroll. */
@media (max-width: 480px) {
  .date-separator { gap: 5px; }
  .view-pill { padding: 0 8px; font-size: 11px; gap: 5px; }
  .view-pill img, .view-pill-flag { width: 16px; height: 12px; }
  .date-separator-btn { padding: 0 8px; font-size: 11px; gap: 5px; }
  .date-separator-count .status-pill { font-size: 11px; padding: 0 7px; min-width: 26px; }
}
/* Smaller phones: keep shrinking rather than letting the row scroll. */
@media (max-width: 400px) {
  .date-separator { gap: 4px; }
  .view-pill { padding: 0 7px; font-size: 10.5px; gap: 4px; height: 26px; }
  .view-pill i { font-size: 11px; }
  .view-pill img, .view-pill-flag { width: 15px; height: 11px; }
  .date-separator-btn { padding: 0 6px; font-size: 10.5px; gap: 4px; height: 26px; }
  .date-separator-btn i { font-size: 11px; }
  .date-separator-count .status-pill { font-size: 10.5px; height: 26px; padding: 0 6px; min-width: 24px; }
}
/* iPhone SE class. The flag alone carries Local; a 320px row cannot hold three
   labels, a date and a count, and the flag is the clearer marker anyway. */
@media (max-width: 360px) {
  .date-separator { gap: 3px; }
  .view-pill { padding: 0 6px; font-size: 10px; gap: 3px; height: 24px; }
  .view-pill img, .view-pill-flag { width: 16px; height: 12px; }
  .date-separator-btn { padding: 0 5px; font-size: 10px; gap: 3px; height: 24px; }
  .date-separator-count .status-pill { font-size: 10px; height: 24px; padding: 0 5px; min-width: 22px; }
}
.view-pill:hover { color: var(--text, #e4e4e7); border-color: var(--text-muted, #9aa0b4); }
.view-pill.active {
  background: var(--accent, #4aa1d9); border-color: var(--accent, #4aa1d9);
  color: #0b0b14;
}

/* Picked-country Featured Locations: featured grid + one titled row per big city */
.bars-groups { display: block; }
.bars-groups .bars-grid { margin-bottom: 8px; }
.bars-city-title {
  margin: 26px 0 14px; font-size: 1.05rem; font-weight: 700;
  color: var(--text, #e4e4e7); letter-spacing: .01em;
}


/* ─── Consumer legal acceptance (2026-08-28) ─── */
.register-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: var(--text-secondary, #9ca3af); margin: 2px 0 4px; cursor: pointer; text-align: left; }
.register-agree input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent, #4aa1d9); width: 16px; height: 16px; flex: none; cursor: pointer; }
.register-agree a { color: var(--accent, #4aa1d9); text-decoration: underline; }
/* ============================================================
   NOTICES — the strip between the top bar and the page
   Owner directive 2026-09-02: no more intrusive popups. A notice states its
   business in one line, carries its own buttons and can be closed, and it
   never covers the page or blocks what the visitor came to do.
   The strip carries the navbar offset while it has something to say, so the
   page container drops its own and the geometry is unchanged either way.
   ============================================================ */
/* Stuck under the top bar (owner 2026-09-04). The navbar is fixed at
   z-index 1000, so the strip rides directly beneath it and STAYS there as the
   page scrolls: a countdown that scrolls away is a countdown nobody sees. */
.bv-notices {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  z-index: 999;
}
/* position:sticky does NOT work here: html and body both carry
   `overflow-x: hidden`, which makes the scrolling ancestor the viewport while
   the strip's containing block still scrolls with the page, so it slides away.
   Fixed, and the page is offset by the measured strip height instead. */
body.has-bv-notice .page-container {
  margin-top: calc(var(--nav-height) + var(--bv-notice-h, 0px));
}

.bv-notice {
  /* Opaque, because it now sits OVER the page rather than above it. */
  background: linear-gradient(180deg, var(--accent-dim), rgba(0,0,0,0)), var(--bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-glass);
}

.bv-notice-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.bv-notice-ico {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  color: var(--accent);
}

.bv-notice-text {
  flex: 1 1 auto;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.bv-notice-text strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}

.bv-notice-text a { color: var(--accent); text-decoration: underline; }

.bv-notice-more { white-space: nowrap; }

.bv-notice-actions { flex: none; display: flex; gap: 8px; flex-wrap: wrap; }

.bv-notice-x {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--transition), border-color var(--transition);
}

.bv-notice-x:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 720px) {
  .bv-notice-inner { flex-wrap: wrap; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  /* The icon is decoration; on a phone it costs a whole row. */
  .bv-notice-ico { display: none; }
  .bv-notice-text { order: 1; flex: 1 1 0; min-width: 0; }
  .bv-notice-x { order: 2; }
  .bv-notice-actions { order: 3; flex: 1 1 100%; }
}


/* ─── Login methods as a 2x3 grid (owner 2026-08-28): Apple | WhatsApp | Email,
   Google | SMS | Passkey. Smaller labels so every cell fits. ─── */
.lm-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lm-methods .lm-btn { width: 100%; min-width: 0; }
.lm-methods .lm-btn-label { font-size: 0.72rem; letter-spacing: 0; }
#loginCodeWrap { display: flex; flex-direction: column; gap: 10px; }
#codeInputWrap { display: flex; flex-direction: column; gap: 10px; }
#loginCodeInput { text-align: center; font-size: 1.3rem; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }

.passkey-login-btn { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }


/* Audience tabs inside the legal modal (2026-08-28) */
#legalModalBody .legal-audience-tabs { position: sticky; top: 0; background: var(--bg-card, #16202c); padding: 6px 0 10px; margin-bottom: 12px; z-index: 1; }

.login-code-resend { background: none; border: none; color: var(--text-secondary, #9ca3af); font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin: 8px auto 0; padding: 4px 8px; }
.login-code-resend-wrap { text-align: right; margin: -4px 0 8px; }
.login-code-resend-wrap .login-code-resend { margin: 0; padding: 0; }
.login-code-resend:disabled { opacity: 0.55; cursor: default; }
.login-code-resend:not(:disabled) { color: var(--accent, #4aa1d9); }

/* Controls for the shared Apple MapKit venue map (js/venue-map.js): the same
   zoom pair and recentre button on the location, order and event pages. */
.bv-map-ctrls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bv-map-ctrl {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(12,14,20,0.86);
  color: #fff;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s;
}
.bv-map-ctrl:hover { background: rgba(30,34,44,0.94); border-color: rgba(255,255,255,0.28); }
.bv-map-ctrl:active { transform: scale(0.94); }
.bv-map-ctrl i { color: #fff; font-size: 13px; }

/* Compact metrics for the map info card, so it fits inside the map (owner
   2026-08-31). Sizes only: nothing here changes what the card contains. */
.map-location-info-box { padding: 12px 14px; max-height: 76%; }
.map-location-info-box-body { gap: 8px; }
.map-loc-info-logo { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; border-radius: 8px !important; }
.map-loc-info-name { font-size: 1rem; }
.map-loc-info-bdg { width: 26px; height: 26px; }
.map-loc-info-badges { gap: 6px; }
@media (max-height: 720px) {
  .map-location-info-box { max-height: 82%; padding: 10px 12px; }
  .map-loc-info-logo { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; }
  .map-loc-info-bdg { width: 22px; height: 22px; }
}

/* Sport badges now ride in the chip row beside the counts, and the big play
   square became an INFO chip the same size as Closed and Bookings
   (owner 2026-08-31). */
/* Matched to the count chips: their 13px icon inside 4px padding is ~21px
   tall, so the badge is 14px with the same padding. */
.map-loc-info-pill-sport { padding: 4px 7px; }
.map-loc-info-chip-bdg { width: 14px; height: 14px; object-fit: contain; display: block; }
.map-loc-info-action {
  margin-left: auto;
  flex: 0 0 auto;
  text-decoration: none;
  gap: 6px;
}
.map-loc-info-action span { font-weight: 700; letter-spacing: 0.02em; }
/* Both chip rows wrap as one flow now that the CTA joined the second. */
.map-loc-info-row1, .map-loc-info-row2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Nothing sits in the right-hand column any more. */
.map-loc-info-2col { display: block; }

/* The count chips carried a 0.08 border that read as no border at all next to
   the coloured Closed / Bookings / INFO ones (owner 2026-08-31). The neutral
   chips now show their edge; the coloured ones keep their own. */
.map-loc-info-row1 .map-loc-info-pill-stat,
.map-loc-info-pill-info,
.map-loc-info-pill-sport {
  border-color: rgba(255,255,255,0.45);
}

/* The action row keeps its state chips left and the button hard right. */
.map-loc-info-row2 { flex-wrap: wrap; align-items: center; }
.map-loc-info-sports { display: flex; gap: 6px; margin-left: auto; flex: 0 0 auto; }

/* ---- notifications bell, badge and panel (owner 2026-09-04) --------------
   The bell sits in .nav-actions beside search. Anonymous visitors never see
   it: initNotifications() hides the wrapper when there is no token. */
/* A class rule that sets `display` beats the user agent's `[hidden]` at equal
   specificity, so a bare `.nav-bell-wrap { display: inline-flex }` left the bell
   on screen for anonymous visitors however often the JS set el.hidden. Every
   element that hides itself with the attribute has to say so in its own rules.
   Third time this bit today: --border, .nav-bell-badge, and this. */
.nav-bell-wrap { position: relative; display: inline-flex; }
.nav-bell-wrap[hidden] { display: none; }
.nav-bell-btn { position: relative; overflow: visible; flex: none; }
.nav-bell-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  /* Grey is the resting state. Red is a claim on the reader's attention and a
     zero has none to make (owner 2026-09-04). */
  background: #3f3f4a; color: #a1a1aa;
  font: 800 10.5px/17px var(--font, 'Inter', system-ui, sans-serif);
  text-align: center; box-shadow: 0 0 0 2px var(--nav-bg, #0f0f17);
  pointer-events: none;
}
.nav-bell-badge.has-unread { background: #ef4444; color: #fff; }
/* `.nav-btn span { display: inline }` (0,1,1) beats `[hidden]` (0,1,0),
   so this badge cannot hide itself with the attribute. Say what it does. */
/* The badge is a <span> inside a .nav-btn, and `.nav-btn span { display: none }`
   (0,1,1) hides every one of those below 640px. A bare `.nav-bell-badge`
   rule is (0,1,0) and LOSES, so the count vanished on exactly the screens
   that need it most. Qualified to (0,2,1) so it wins at every width.
   FOURTH time this trap has bitten today: --border, the badge, the bell
   wrapper, and now the badge again on mobile. */
.nav-btn .nav-bell-badge { display: block; }
.nav-btn .nav-bell-badge[hidden] { display: none; }
.nav-bell-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--card, #14141f);
  border: 1px solid var(--border, var(--bv-line-solid)); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 60; overflow: hidden;
}
.nbell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border, var(--bv-line-solid));
}
.nbell-head b { font: 700 14px/1 var(--font, 'Inter', system-ui, sans-serif); color: var(--text, #e4e4e7); }
.nbell-head a { font-size: 12px; color: var(--brand-blue, #4aa1d9); text-decoration: none; cursor: pointer; }
.nbell-head a:hover { text-decoration: underline; }
.nbell-list { max-height: 60vh; overflow-y: auto; }
.nbell-row {
  display: flex; gap: 10px; width: 100%; text-align: left; align-items: flex-start;
  padding: 11px 14px; background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--bv-line);
}
.nbell-row:hover { background: rgba(255,255,255,.04); }
.nbell-row.unread { background: rgba(74,161,217,.07); }
.nbell-ico { flex: none; color: var(--brand-blue, #4aa1d9); margin-top: 1px; }
.nbell-ico img { display: block; width: 16px; height: 16px; object-fit: contain; border-radius: 0; }   /* the timeline's own event icons (owner 2026-09-30) */
.nbell-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nbell-t { font: 600 13px/1.35 var(--font, 'Inter', system-ui, sans-serif); color: var(--text, #e4e4e7); }
.nbell-b {
  font: 400 12.5px/1.4 var(--font, 'Inter', system-ui, sans-serif);
  color: var(--text-secondary, #a1a1aa);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nbell-w { font-size: 11px; color: var(--text-muted, #71717a); }
.nbell-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-blue, #4aa1d9); margin-top: 6px;
}
.nbell-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 16px; color: var(--text-muted, #71717a); font-size: 13px;
}
.nbell-foot {
  padding: 10px 14px; border-top: 1px solid var(--border, var(--bv-line-solid)); text-align: center;
}
.nbell-foot a { font-size: 12.5px; color: var(--brand-blue, #4aa1d9); text-decoration: none; }
.nbell-foot a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .nav-bell-panel { position: fixed; left: 12px; right: 12px; width: auto; top: calc(var(--nav-height, 56px) + 8px); }
}


/* ── /favorites ───────────────────────────────────────────────────────────
   ONE section per TYPE, in the account page's order, always rendered; an empty
   one shows the Add card rather than vanishing. The app has carried this shape
   since 2026-08-23 and is the spec. */
.favorites-page { padding: 24px 0 64px; }
.fav-head { margin-bottom: 22px; }

.fav-sec { margin: 0 0 30px; }
.fav-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-glass);
}
.fav-sec-head h2 {
  margin: 0; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted);
}
.fav-sec-edit {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  border: 1px solid var(--border-glass); color: var(--text-muted);
  text-decoration: none; transition: color var(--transition), border-color var(--transition);
}
.fav-sec-edit:hover { color: var(--accent); border-color: var(--accent); }

.fav-strip { margin: 0 0 18px; }
.fav-strip-head {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  font-size: 0.9rem; font-weight: 700; color: var(--text);
}
/* The two arrows that step the strip, on the heading's own line, hard right
   (owner 2026-09-04). margin-left:auto is what pushes them there; the heading
   text keeps its natural width beside the badge. */
.fav-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.fav-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border-glass); border-radius: 8px;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), opacity var(--transition);
}
.fav-nav-btn:hover:not(:disabled) {
  background: var(--surface-2, rgba(255,255,255,.06));
  color: var(--text); border-color: var(--text-muted);
}
.fav-nav-btn:disabled { opacity: .3; cursor: default; }
.fav-strip-head img { width: 26px; height: 26px; object-fit: contain; }

/* The Add rectangle an empty section shows, the same green as the editor's. */
.fav-add {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px; border-radius: 12px;
  border: 1px dashed rgba(34,197,94,.45); background: rgba(34,197,94,.06);
  color: #22c55e; text-decoration: none; font-weight: 600; font-size: 0.88rem;
  transition: background var(--transition), border-color var(--transition);
}
.fav-add:hover { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.7); }

.fav-places { display: flex; flex-wrap: wrap; gap: 10px; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 10px;
  background: var(--surface); border: 1px solid var(--border-glass);
  border-radius: 999px; color: var(--text); text-decoration: none;
  font-size: 0.85rem; font-weight: 600;
  transition: border-color var(--transition), background var(--transition);
}
.fav-chip:hover { border-color: var(--accent); background: var(--accent-dim); }
.fav-chip img { width: 24px; height: 24px; object-fit: contain; border-radius: 0; }

.fav-gate {
  text-align: center; padding: 64px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fav-gate i, .fav-gate svg { color: var(--accent); opacity: 0.7; }
.fav-gate h1 { margin: 4px 0 0; font-size: 1.15rem; color: var(--text); }
.fav-gate p { margin: 0 0 8px; color: var(--text-secondary); max-width: 34ch; }


/* Every section body is a horizontal slider (owner 2026-09-04: "all must be
   shown in every section as slider"). Nothing is capped by the layout: the
   row scrolls, and the cards keep the widths the rest of the site uses. */
.fav-slider {
  /* The active card is the one being read, so it keeps very nearly the full
     width it has everywhere else on the site. The peek is a SLIVER: enough for
     the next card's accent and a few pixels of its body, no more (owner
     2026-09-04, "make the active cards bigger, normal size"). */
  --fav-peek: 12px;
  --fav-gutter: 10px;
  /* NO gap. A slide has to be EXACTLY one page: with a 12px gap the step was
     406px against a 398px viewport and every swipe landed a few pixels off,
     drifting further with each one. The breathing room is padding INSIDE the
     slide instead, so the step and the page are the same number. */
  display: flex; row-gap: 0; column-gap: var(--fav-gutter);
  /* Each slide keeps its own height: flex stretches children by default, so
     one player card with three competitions was padding every other card in
     the row out to match it. */
  align-items: flex-start;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* NO horizontal padding. It made the slider's client width 4px wider than
     its children, so a slide was never exactly one page and the snap drifted
     a little further with every swipe. */
  padding: 2px 0 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* ONE CARD PER VIEW (owner 2026-09-04: "slides. one page at a time"). Every
   child is exactly the slider's width and the snap is MANDATORY, so a swipe
   lands on the next card and never between two. Widths are set here rather
   than per card type, or an event card renders full-bleed and breaks out. */
.fav-slider > * {
  /* A slide is one page MINUS the peek, so the next card's accent stays on
     screen and the reader can see there is another one (owner 2026-09-04,
     matching the app). The peek is the 12px gutter plus a sliver of card, so
     what shows is the coloured left border and a little of its body. */
  flex: 0 0 calc(100% - var(--fav-peek) - var(--fav-gutter));
  width: calc(100% - var(--fav-peek) - var(--fav-gutter)); max-width: none; min-width: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-snap-align: start; scroll-snap-stop: always;
}
/* No padding-left here. See --fav-gutter above: it belongs to the container,
   outside every card's border, or the accent line of a card that HAS a border
   lands in a different place from one that draws its accent inside. */
/* Room for the LAST slide to snap flush left. Without it the scroller runs out
   of travel one peek early and the final card can never be read in full. */
.fav-slider::after { content: ''; flex: 0 0 calc(var(--fav-peek) - var(--fav-gutter)); }
.fav-slider::-webkit-scrollbar { height: 6px; }
.fav-slider::-webkit-scrollbar-thumb { background: var(--border-glass); border-radius: 3px; }

/* A place card carries the GREEN accent, the way it does everywhere else on
   the site and in the app (owner 2026-09-04). Blue is for fixtures, green is
   for venues; the two must not be told apart by reading them. */
.fav-slider .bar-card { border-left: 3px solid #66b32e; }
.fav-slider .bar-card .bar-card-image { height: 150px; background: var(--surface); }
.fav-slider .bar-card .bar-card-image img { width: 100%; height: 100%; object-fit: cover; }

/* Statistics is its own titled block, not one more strip: a page-level
   heading, then Leagues / Teams / Players, each a slider of full cards. */
.fav-stats { margin: 34px 0 30px; }
.fav-stats-title { margin: 0 0 16px; font-size: 1.5rem; font-weight: 800; color: var(--text); }
.fav-stats-sub {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 10px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted);
}
.fav-stats-sub i, .fav-stats-sub svg { color: var(--text-muted); }
.fav-stats-sub .fav-nav i { color: inherit; }

.fav-stat-card {
  width: min(420px, 88vw); padding: 14px 16px 8px;
  background: var(--surface); border: 1px solid var(--border-glass);
  border-left: 3px solid var(--accent-orange, #f39322);
  border-radius: 12px;
}
.fav-stat-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-glass);
}
/* NEVER round a badge (owner 2026-09-04). A crest is artwork with its own
   silhouette; a corner radius crops it. */
.fav-stat-head > img { width: 46px; height: 46px; object-fit: contain; border-radius: 0; flex: none; }
.fav-stat-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fav-stat-id b { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.fav-stat-id span { font-size: 0.8rem; color: var(--text-muted); }
.fav-stat-kind {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04); color: var(--text-muted);
}
.fav-stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--bv-line);
  font-size: 0.92rem; color: var(--text-secondary);
}
.fav-stat-row:last-child { border-bottom: 0; }
.fav-stat-row b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.fav-stat-row b.accent { color: var(--brand-blue, #4aa1d9); }

/* A player's stats are per competition, each under its own badge. */
.fav-comp {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 2px; font-size: 0.86rem; font-weight: 600; color: var(--text);
}
.fav-comp img { width: 20px; height: 20px; object-fit: contain; }

/* A league is a standings table, columns and all. */
.fav-tbl { font-variant-numeric: tabular-nums; }
.fav-tbl-h, .fav-tbl-r {
  display: grid; grid-template-columns: 22px 1fr 34px 34px 42px;
  align-items: center; gap: 6px; padding: 8px 0;
  font-size: 0.9rem;
}
.fav-tbl-h { font-size: 0.76rem; color: var(--text-muted); border-bottom: 1px solid var(--border-glass); }
.fav-tbl-r { border-bottom: 1px solid var(--bv-line); color: var(--text-muted); }
.fav-tbl-r:last-child { border-bottom: 0; }
.fav-tbl-r .nm { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-tbl-h span, .fav-tbl-r span { text-align: right; }
.fav-tbl-h .nm, .fav-tbl-r .nm { text-align: left; }
.fav-tbl-h .pts, .fav-tbl-r .pts { color: var(--brand-blue, #4aa1d9); font-weight: 700; }

/* /age, the Age Suitability page: a muted line under a card and the closing
   entity footnote. The legal name closes the page, it never opens it. */
.sp-muted { color: var(--text-muted); font-size: 0.9rem; }
.sp-muted a { color: var(--accent); }
.sp-footnote {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 8px 0 40px;
}

/* Admission Policy (/legal/admission). It renders on the standard legal shell,
   so .prose does the typography. Only three things need their own rules. */

/* 2. The territory annex. NOT a clause: it sits outside the article and
      outside the narrow container, so it gets full container width without any
      negative-margin trick. Its heading is outside .prose and needs its own
      rule. */
.legal-annex {
  margin: 24px 0 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 36px 40px 32px;
}
.legal-annex > h2 {
  margin: 0 0 20px; font-size: 1.15rem; font-weight: 700; color: var(--text);
}

@media (max-width: 720px) {
  .legal-annex { padding: 24px 20px 20px; border-radius: 12px; }
}

/* 3. The marks, in clause 7 and on every card in the schedule. Standalone, so
      the same three classes work on a venue page, an event page and at
      checkout. */
.age-legend { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 8px; }
.age-legend li { display: flex; align-items: flex-start; gap: 14px; }
.age-legend .age-chip { min-width: 52px; text-align: center; flex: none; }
.age-legend-v { line-height: 1.6; }

/* /age, one card per territory: 51 US states, 13 Canadian provinces, all 27 of
   the EU, plus the UK and Australia.

   The card has to read as a BLOCK on a phone, where 93 of them run down one
   column. A hairline border on a near-black page does not do that, so the card
   carries a lighter surface and a border you can actually see.

   Each rule is ONE line: a coloured label inline with its text, not a label
   stacked above it. That halves the height of every card, which is what makes
   the column scannable. Green available alone, orange needs an adult, red not
   at all. */
.age-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
/* One rule between the regions: United States, Canada, Australia, the United
   Kingdom, Europe. It spans every column of the grid. */
.age-sep {
  grid-column: 1 / -1; margin: 10px 0; border: 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.age-card {
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  padding: 16px 18px 14px;
}

.age-card-top {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--bv-line);
}
.age-flag {
  display: inline-block; width: 32px; height: 24px; flex: none;
  border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.age-card-name {
  font-size: 1.1rem; font-weight: 800; line-height: 1.15; flex: 1 1 auto;
  letter-spacing: -0.01em;
}
/* The chip is standalone: it carries its own colour through a modifier, so the
   same three classes work on a venue page, an event page and at checkout, not
   only inside a card here.
     --free   they may go in on their own
     --adult  they may go in with a parent or another adult
     --none   the minimum is above 16, so they may not go in at all */
.age-chip {
  display: inline-block; flex: none; border-radius: 8px; padding: 5px 11px;
  font-size: 0.88rem; font-weight: 800; white-space: nowrap; color: #fff;
  /* Caps live in the STRING, never here: the mobile apps read the same
     catalogue and never see this stylesheet, so a label capitalised by CSS was
     upper case on the web and sentence case in the app. Owner 2026-09-09. */
  letter-spacing: 0.02em;
}
.age-card-top .age-chip { margin-left: auto; }
/* Blue is the territory's own floor. It is deliberately NOT one of the three
   rule colours, so the header can never be read as a mark a location set. */
.age-chip--info { background: #4aa1d9; }
/* The territory chip carries words now ("16 with food"), so the name has to
   be allowed to give way instead of pushing the card open. */
.age-card-name { min-width: 0; overflow-wrap: anywhere; }
.legal-annex-note { margin: -4px 0 20px; font-size: 0.92rem; }
.age-chip--free  { background: #66b32e; }
.age-chip--adult { background: #f18318; }
.age-chip--none  { background: #ee322e; }
/* No age given. Grey is neither a rule nor our accent, so a reader cannot
   mistake it for a limit the location set. */
.age-chip--unknown { background: #5c6673; }

.age-legend-title { margin: 0 0 14px; font-size: 1.05rem; }
.age-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.age-legend li {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--bv-line);
}
.age-legend li:last-child { border-bottom: 0; padding-bottom: 0; }
.age-legend .age-chip { min-width: 86px; text-align: center; }  /* fits ANY AGE, so every sentence starts on the same column */
.age-legend-v { font-size: 0.92rem; line-height: 1.5; color: var(--text-muted); }

.age-lines { display: grid; gap: 9px; }
.age-line {
  margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted);
}
/* Each rule leads with a small age chip in its own colour, then the text. The
   word labels are gone: a chip carries an age and nothing else. */
.age-line { display: flex; align-items: flex-start; gap: 9px; }
.age-line-v { flex: 1 1 auto; min-width: 0; }
.age-chip--sm {
  font-size: 0.7rem; padding: 3px 8px; border-radius: 6px; flex: none;
  margin-top: 1px;
}

.age-card-foot {
  margin: 13px 0 0; padding-top: 11px; font-size: 0.78rem; color: var(--text-muted);
  border-top: 1px solid var(--bv-line);
}

.age-enforced { margin-top: 10px; }
.age-checked { margin-top: 14px; }

@media (max-width: 560px) {
  .age-cards { grid-template-columns: 1fr; gap: 14px; }
  /* On a phone the card sat on almost the same black as the page behind it, so
     93 of them read as one wall of text with no edges. Lift the surface, the
     border and a shadow so each card is a block again. */
  .age-card {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  }
  .age-card-name { flex: 1 1 60%; }
  .legal-annex { padding: 22px 16px 20px; }
}

/* Claim form: who you admit. Same row card as the opening-hours editor, so the
   two blocks read as one form instead of two. No native select and no native
   time input: both open a white panel over a black page. */
.cw-age { margin-top: 20px; }
.cw-age-h {
  margin: 0 0 4px; font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
}
.cw-age-intro { margin: 0 0 12px; color: var(--text-muted); font-size: 0.85rem; }
.cw-age-row { align-items: center; gap: 14px; flex-wrap: wrap; }
.cw-age-when { min-width: 132px; display: flex; align-items: center; }
.cw-age-from { font-size: 0.9rem; font-weight: 700; }
.cw-age-ctl {
  display: flex; align-items: center; gap: 14px; flex: 1 1 auto;
  justify-content: flex-end; flex-wrap: wrap;
}
.cw-age-seg {
  display: inline-flex; border: 1px solid var(--border-glass);
  border-radius: 10px; overflow: hidden;
}
.cw-age-opt {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.02em;
  padding: 8px 14px; transition: background 0.15s ease, color 0.15s ease;
}
.cw-age-opt + .cw-age-opt { border-left: 1px solid var(--border-glass); }
.cw-age-opt:hover { color: var(--text); }
/* The picked age wears the mark's own colour, so the form looks like the
   result. 18 and 21 stay red whatever the adult toggle says. */
.cw-age-opt.is-on { color: #fff; }
.cw-age-seg[data-tone="free"]  .cw-age-opt.is-on { background: #66b32e; }
.cw-age-seg[data-tone="adult"] .cw-age-opt.is-on { background: #f18318; }
.cw-age-seg[data-tone="none"]  .cw-age-opt.is-on { background: #ee322e; }
.cw-age-acc {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
  color: var(--text-muted);
}
.cw-age-spacer { width: 32px; }
@media (max-width: 640px) {
  .cw-age-ctl { justify-content: flex-start; }
}

/* Admission, its own box under the event details. The chip alone answers
   nothing: whether an adult has to come is in the sentence beside it. */
.fd-admission-card { padding: 18px 20px; }
.fd-admission-card .age-line { font-size: 0.92rem; }
.fd-age-note {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--bv-line);
  font-size: 0.82rem; color: var(--text-muted);
}

/* The same box on a LOCATION page, where it holds the whole night rather than
   one kick-off: one row per band, in night order, each stating its rule IN
   FULL. Every chip sits in one fixed slot so the rows read as a column of ages
   rather than a ragged edge, and the time leads the text beside it. */
.ld-adm-list { display: block; }
.ld-admission-card .ld-adm-row {
  display: flex; align-items: flex-start; gap: 13px; padding: 13px 0;
  border-top: 1px solid var(--bv-line);
}
.ld-admission-card .ld-adm-row:first-child { border-top: 0; padding-top: 0; }
.ld-admission-card .ld-adm-row:last-child { padding-bottom: 0; }
.ld-admission-card .age-chip {
  min-width: 104px; text-align: center; flex: none; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ld-adm-v { flex: 1 1 auto; min-width: 0; }
.ld-adm-when {
  display: block; font-size: 0.85rem; font-weight: 800; color: var(--text);
  letter-spacing: 0.02em; margin-bottom: 2px;
}
.ld-adm-text { font-size: 0.86rem; line-height: 1.5; color: var(--text-muted); }
.ld-adm-row--unknown .ld-adm-ask { font-size: 0.86rem; color: var(--text-muted); }
.ld-age-note {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--bv-line);
  font-size: 0.82rem; color: var(--text-muted);
}

/* Narrow phones: the chip keeps its slot but stops eating the sentence. */
@media (max-width: 400px) {
  .ld-admission-card .age-chip { min-width: 92px; font-size: 0.64rem; }
}

/* The opener on the event hero: the circle is a BORDER, the glyph is a plain
   chevron. The circle-chevron glyph reports a 55.25px advance inside a 32.5px
   element box, so its painted circle sits off-centre from its own box and no
   flex centring can line it up with the age chip above it. */
.fixture-status-col .status-chevron-wrap {
  width: 30px; height: 30px; flex: none;
  border: 1.5px solid var(--text-muted, #9aa0b4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fixture-status-col .status-chevron-wrap > i {
  font-size: 13px; line-height: 1; width: auto;
}
.fixture-status-col .status-chevron-wrap:hover,
.card-open .fixture-status-col .status-chevron-wrap {
  border-color: var(--brand-blue, #4aa1d9);
}

/* The link to the Admission Policy. It opens the legal modal, never a
   navigation: someone reading a venue's rule is mid-decision and must not lose
   the page. On an event it sits at the end of the sentence; on a location it is
   the last line under the whole schedule. */
.age-policy-read { white-space: nowrap; }
.age-policy-link {
  color: var(--brand-blue); font-weight: 700; text-decoration: none;
}
.age-policy-link:hover { text-decoration: underline; }
.ld-adm-policy {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--bv-line);
  font-size: 0.84rem;
}
/* When a note is already there the schedule has its own divider, so the link
   line does not draw a second one right under it. */
.ld-age-note + .ld-adm-policy { border-top: 0; padding-top: 0; margin-top: 8px; }

/* Sold-out pill on venue rows (replaces the tables and seats pills) */
.bookvelt-pill.pill-soldout { background: #e53e3e; border-color: #e53e3e; color: #fff; }
.bookvelt-pill.pill-soldout strong { color: #fff; }
.pill-soldout-text { color: #e53e3e; font-weight: 700; }
.bookvelt-pill.pill-walkin { background: #66b32e; border-color: #66b32e; color: #fff; }
.bookvelt-pill.pill-walkin strong { color: #fff; }
.pill-walkin-text { color: #66b32e; font-weight: 700; }

/* Back to top (2026-09-20) */
.bv-top{position:fixed;right:16px;bottom:24px;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-glass,var(--bv-line));background:var(--bg-card,#161622);color:var(--text,#fff);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1200;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.bv-top.on{opacity:1;pointer-events:auto;transform:none}
.bv-top:hover{background:var(--accent,#4aa1d9);border-color:var(--accent,#4aa1d9);color:#fff}

/* Country / Language menus as wide as their longest name (owner 2026-09-26:
   "United King..." was cut). The right-hand column opens leftwards. */
.lc-dd-menu{right:auto;min-width:100%;width:max-content;max-width:calc(100vw - 32px)}
.menu-lc-col:last-child:not(:first-child) .lc-dd-menu{left:auto;right:0}

/* Locations page, the city row like the fixture page (owner 2026-09-27): the
   field takes the width, Near Me is exactly as wide as its word. */
.loc-tabs .loc-tab-search { flex: 1 1 auto; min-width: 0; padding: 13px 12px; }
.loc-tabs .loc-tab-search .loc-searchbar-input { font-size: 1.02rem; }
.loc-tabs #locTabNearme { flex: 0 0 auto; width: auto; padding: 13px 16px; white-space: nowrap; }
/* The highlight pin shows the logo, or the initials on a disc. */
.sb-pin-highlight .sb-pin-ini { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; background: #161622; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }

/* The verified check sits on the logo's corner, like the shirt number on a player's
   photo (.drv-num in entity.css), never beside the name (owner 2026-09-27). One
   wrap around the logo, the badge absolute on its top right, a dark ring so it
   reads on any logo. Map info card (fixture page + Locations) and the venue hero. */
.sb-logo-wrap { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; }
.sb-logo-wrap .ld-tier-badge { position: absolute; right: -6px; top: -6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #12121e; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.sb-logo-wrap .ld-tier-badge i { font-size: 14px !important; line-height: 1; }
.map-loc-info-head .sb-logo-wrap { flex: 0 0 auto; }
.ld-hero-logo-wrap { flex-shrink: 0; }
.ld-hero-logo-wrap .ld-tier-badge { right: -8px; top: -8px; width: 26px; height: 26px; }
.ld-hero-logo-wrap .ld-tier-badge i { font-size: 22px !important; }
@media (max-width: 600px) {
  .ld-hero-logo-wrap .ld-tier-badge { width: 24px; height: 24px; }
  .ld-hero-logo-wrap .ld-tier-badge i { font-size: 20px !important; }
}
.ed-loc-head .sb-logo-wrap .ld-tier-badge { width: 22px; height: 22px; }
.ed-loc-head .sb-logo-wrap .ld-tier-badge i { font-size: 18px !important; }
.loc-card-overlay .sb-logo-wrap { flex-shrink: 0; }
.loc-card-overlay .sb-logo-wrap .ld-tier-badge { width: 16px; height: 16px; right: -5px; top: -5px; }
.loc-card-overlay .sb-logo-wrap .ld-tier-badge i { font-size: 12px !important; }

/* The interest box on a past game's card (owner 2026-09-28): heart over the number,
   bordered, in the right column where a live card has its dot and an upcoming card its
   opener. Chip rule: equal padding, the icon drawn at the number's cap height (0.79em). */
.fx-interest { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px; min-width: 40px; border: 1px solid var(--bv-line); border-radius: 8px; background: rgba(255,255,255,0.04); color: #f5f5f7; font-family: var(--font-condensed); font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fx-interest > i { font-size: 0.79em !important; line-height: 1; color: #ee322e; }
.fx-interest > strong { font-weight: 800; transform: translateY(0.02em); }
@media (max-width: 600px) { .fx-interest { font-size: 13px; padding: 6px; min-width: 34px; } }

/* A light shadow under every box that sits on the page background, so it lifts off it (owner 2026-09-28). One value, --bv-lift, declared at the top. */
.fixture-card-main, .bar-card, .ev-home-card, .cta-box, .how-step, .browse-group, .ph-bar, .loc-card, .loc-map-wrap, .ev-header, .fixture-opener, .loc-tabs .loc-tab, .loc-tabs .loc-tab.active, .hero-eyebrow { box-shadow: var(--bv-lift); }

/* Top bar icon buttons are SQUARES (owner 2026-09-28) */
/* Search, bell, menu and, on the phone, the log-in and account buttons: 36 by 36, radius 8, the
   glyph centred. The account photo fills the 34px inner square; from 640px the account button
   keeps the name beside the photo and the log-in button its label, both 36 high. */
.nav-actions .nav-search-btn, .nav-actions .nav-bell-btn, .nav-actions .nav-menu-btn {
  width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); box-sizing: border-box;
}
.nav-actions .nav-menu-btn { flex-direction: column; gap: 4px; }
/* The burger's three lines are a glyph the size of the other icons, 18 by 2, never the width of the box. */
.nav-actions .nav-menu-btn span { width: 18px; height: 2px; }
.nav-actions .nav-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav-actions .nav-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
.nav-actions .nav-user-btn { height: 36px; }
.nav-actions .nav-avatar-circle { width: 34px; height: 34px; }
@media (max-width: 639px) {
  .nav-actions .nav-user-btn { width: 36px; padding: 0; justify-content: center; }
  .nav-actions #navAuthBtn { width: 36px; height: 36px; padding: 0; justify-content: center; }
}
@media (min-width: 640px) {
  .nav-actions #navAuthBtn { height: 36px; padding: 0 14px; }
}

/* Game rows in the bell and the inbox (owner 2026-09-30): the game first, badges bare, then the
   event icon, the minute or period with the phrase, one line of data. */
.nbell-row .nb-pair { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; font: 700 13px/1 'Roboto Condensed', Roboto, sans-serif; color: #fff; white-space: nowrap; }
.nbell-row .nb-pair img { width: 20px; height: 20px; object-fit: contain; border-radius: 0; background: none; }
.nbell-row .nb-pair b { font: 700 13px/1 'Roboto Condensed', Roboto, sans-serif; letter-spacing: .02em; }
.nbell-row .nb-mark { flex: none; display: inline-flex; align-items: center; margin-top: 1px; }
.nbell-row .nb-mark img { width: 34px; height: 20px; object-fit: contain; border-radius: 0; background: none; }
.nbell-row .nb-min { color: #94a3b8; font-weight: 500; }
.nbell-row .nb-in { color: #66b32e; }
.nbell-row .nb-out { color: #ee322e; }
.nbell-row .nb-tag { display: block; font-size: .9em; color: #94a3b8; }
.nbell-row .nbell-b:has(.nb-venue), .nbell-row .nbell-b:has(.nb-pod) { display: block; }
.nbell-row .nb-venue { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.nbell-row .nb-venue img { width: 18px; height: 18px; flex: none; object-fit: contain; border-radius: 0; background: none; }
.nbell-row .nb-venue span { overflow: hidden; text-overflow: ellipsis; }
.nbell-row .nb-pod { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nbell-row .nb-pod span { display: inline-flex; align-items: center; gap: 4px; }
.nbell-row .nb-pod img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }   /* faces of people are the only round images */
.nbell-row .nb-pod i { font-style: normal; color: #94a3b8; font-weight: 500; }
.nbell-row.nbell-game .nbell-ico { width: 16px; display: inline-flex; justify-content: center; }   /* one column for the icon, glyph or svg, so every title starts at the same x */

.nbell-row .nb-type { flex: none; width: 44px; display: inline-flex; justify-content: center; margin-top: 1px; color: #e4e4e7; }   /* a table booking's type icon leads (owner 2026-09-30) */
.nbell-row .nbell-ico.nb-ok { color: #66b32e; }
.nbell-row .nbell-ico.nb-no { color: #ee322e; }
.nbell-row.nbell-game > .nb-pair, .nbell-row.nbell-game > .nb-mark, .nbell-row.nbell-game > .nb-type { width: 104px; min-width: 104px; justify-content: center; }   /* one lead column on every row, so every icon and title starts at the same x (owner 2026-09-30, same format) */