/* ============================================
   FIFA World Cup 2026 - Vanilla CSS Styles
   (Optimized, Merged & Expanded)
   ============================================ */

/* CSS Variables */
:root {
  /* Colors */
  --color-bg: #0A0E1A;
  --color-surface: #111827;
  --color-gold: #C9A84C;
  --color-blue: #1D9BF0;
  --color-green: #22C55E;
  --color-white: #F9FAFB;
  --color-muted: #6B7280;
  --color-border: #1F2937;
  --color-red: #E5383B;

  --color-bg-light: #0d1117;
  --color-bg-lighter: #1F2937;
  --color-accent: var(--color-blue);
  --color-accent-light: #58B7F6;
  --color-accent-dark: #0F6FB3;
  --color-accent-alt: var(--color-gold);
  --color-accent-alt-light: #D8BC69;
  --color-accent-alt-dark: #A8862C;
  --color-accent-rgb: 29, 155, 240;
  --color-accent-light-rgb: 88, 183, 246;
  --color-accent-dark-rgb: 15, 111, 179;
  --color-surface-rgb: 17, 24, 39;
  --color-surface-strong-rgb: 10, 14, 26;
  --color-danger: var(--color-red);
  --color-gold-light: #D8BC69;
  --color-gold-dark: #A8862C;
  --color-text: var(--color-white);
  --color-text-muted: var(--color-muted);
  --color-text-dim: #9CA3AF;
  --color-text-subtle: var(--color-muted);
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-gold: 0 10px 28px rgba(201, 168, 76, 0.22);
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Matches Theme */
  --fwc26-accent: #1D9BF0;
  --fwc26-accent-alt: #C9A84C;
  --fwc26-accent-complement: #22C55E;
  --fwc26-text-strongest: #FFFFFF;
  --fwc26-text-strong: #F9FAFB;
  --fwc26-text-medium: #9CA3AF;
  --fwc26-text-subtle: #6B7280;
  --fwc26-bg-card: #111827;
  --fwc26-bg-main: #0A0E1A;
  --glass-bg: rgba(17, 24, 39, 0.92);
  --glass-bg-strong: rgba(10, 14, 26, 0.9);
  --glass-border: rgba(31, 41, 55, 0.95);
  --accent-soft-bg: rgba(29, 155, 240, 0.12);
  --accent-soft-bg-strong: rgba(29, 155, 240, 0.18);
  --accent-soft-border: rgba(29, 155, 240, 0.32);
}

/* ============================================
   SHARED & MERGED UTILITIES
   ============================================ */

/* Common Section Backgrounds */
.overview, 
.news, 
.host-cities, 
.faq {
  background: linear-gradient(to bottom, var(--color-bg), var(--color-bg-light), var(--color-bg));
}

.standings, 
.fan-essentials {
  background: linear-gradient(to bottom, var(--color-bg), var(--color-bg-light), var(--color-bg));
}

/* Glassmorphism Card Base */
.conf-card, 
.news-card, 
.standings-table, 
.essential-card, 
.faq-item {
  background-color: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

.news-card, 
.standings-table, 
.faq-item {
  overflow: hidden;
}

.conf-card, 
.news-card, 
.essential-card {
  transition: all var(--transition-base);
}

/* Hover States for Border Highlight Cards */
.news-card:hover, 
.host-city-card:hover::after, 
.faq-item.active {
  border-color: rgba(var(--color-accent-rgb), 0.5);
}

/* Hover States for Elevated Gold Cards */
.conf-card:hover, 
.essential-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  transform: translateY(-8px);
  box-shadow: var(--shadow-gold);
}

/* Common Grid Layouts */
.qualification-grid, 
.news-grid, 
.standings-grid, 
.host-cities-grid, 
.essentials-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.qualification-grid, 
.news-grid, 
.host-cities-grid, 
.essentials-grid {
  gap: var(--space-lg);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid-2 > .essential-card {
  height: 100%;
}

/* Home Social Share Buttons */
.site-share {
  background: linear-gradient(to bottom, var(--color-bg), var(--color-bg-light), var(--color-bg));
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.social-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
}

.social-share-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-width: 14rem;
  border: 0;
  border-radius: 0.75rem;
  color: #f9fafb;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
  overflow: hidden;
}

.social-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.26);
  filter: saturate(1.08);
}

.social-share-icon {
  position: relative;
  background: #111827;
  width: 4.65rem;
  min-height: 3.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-share-logo {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
  object-fit: contain;
}

.social-share-icon::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #111827;
}

.social-share-text {
  min-height: 3.35rem;
  padding: 0 1.55rem;
  display: inline-flex;
  align-items: center;
  flex: 1;
  font-size: 1.45rem;
  font-weight: 700;
}

.social-facebook .social-share-text { background: #3b5998; }
.social-x .social-share-text {
  background: #53a9ea;
  justify-content: center;
}
.social-linkedin .social-share-text { background: #0a66c2; }
.social-pinterest .social-share-text { background: #e60023; }
.social-whatsapp .social-share-text { background: #1f9c4d; }

@media (max-width: 767px) {
  .social-share-btn {
    min-width: min(100%, 21rem);
  }

  .social-share-text {
    font-size: 1.2rem;
    padding: 0 1.2rem;
  }
}

/* Common Text Links */
.view-all-link, 
.host-city-link, 
.essential-link, 
.news-readmore {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 500;
  color: var(--color-gold);
  transition: color var(--transition-base);
}

.news-readmore {
  font-size: var(--font-size-sm);
}

.view-all-link:hover, 
.host-city-link:hover, 
.essential-link:hover, 
.news-readmore:hover {
  color: var(--color-gold-light);
}

/* Common SVG Links */
.view-all-link svg, 
.news-readmore svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-base);
}

.view-all-link:hover svg, 
.news-readmore:hover svg {
  transform: translateX(4px);
}

/* Nav & Mobile Link Icons */
.nav-link svg, 
.nav-link i svg, 
.nav-mobile-link svg, 
.nav-mobile-link i svg {
  flex-shrink: 0;
  stroke: currentColor;
  transition: stroke var(--transition-base);
}

.nav-link svg, 
.nav-link i svg {
  width: 14px;
  height: 14px;
}

.nav-mobile-link svg, 
.nav-mobile-link i svg {
  width: 20px;
  height: 20px;
}

.nav-link:hover svg, 
.nav-link:hover i svg,
.nav-mobile-link:hover svg, 
.nav-mobile-link:hover i svg {
  stroke: var(--color-gold);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container & Sections */
.container, 
.nav-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .container, 
  .nav-container {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}

.section {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  position: relative;
}

.team-page .content-article {
  padding: 1rem var(--space-md);
}

.team-page .content-article p {
  margin: 1em 0;
}

.team-page .content-article h2 {
  margin: 0.83em 0;
}

.team-page .content-article h3 {
  margin: 1em 0;
}

@media (max-width: 768px) {
  .section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color var(--transition-base), padding var(--transition-base), box-shadow var(--transition-base);
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar.scrolled {
  background-color: rgba(var(--color-surface-strong-rgb), 0.95);
  backdrop-filter: blur(12px);
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: var(--shadow-lg);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-logo-icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-gold);
  transition: transform var(--transition-base);
}

.nav-logo:hover .nav-logo-icon {
  transform: scale(1.1);
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
}

.nav-logo-main {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.02em;
}

.nav-logo-sub {
  font-size: 0.625rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-lg);
}

.nav-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
  padding: var(--space-sm) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-link:hover {
  color: var(--color-gold);
}

.nav-cta {
  display: none;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-accent-alt);
  color: var(--color-bg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.nav-cta:hover {
  background-color: var(--color-accent-alt-light);
  transform: scale(1.05);
}

.nav-mobile-toggle {
  display: block;
  padding: var(--space-sm);
  color: var(--color-white);
}

.nav-hamburger, 
.nav-close {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-close {
  display: none;
}

.nav-mobile-toggle.active .nav-hamburger {
  display: none;
}

.nav-mobile-toggle.active .nav-close {
  display: block;
}

.nav-mobile-menu {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--color-surface-strong-rgb), 0.98);
  backdrop-filter: blur(12px);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.nav-mobile-menu.active {
  opacity: 1;
  visibility: visible;
}

.nav-mobile-link {
  font-size: var(--font-size-lg);
  color: var(--color-white);
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color var(--transition-base);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-mobile-link:hover {
  color: var(--color-gold);
}

.nav-mobile-cta {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background-color: var(--color-accent-alt);
  color: var(--color-bg);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-align: center;
  transition: background-color var(--transition-base);
}

.nav-mobile-cta:hover {
  background-color: var(--color-accent-alt-light);
}

@media (min-width: 1024px) {
  .nav-links,
  .nav-cta {
    display: flex;
  }
  .nav-mobile-toggle, 
  .nav-mobile-menu {
    display: none;
  }
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurns 20s ease-in-out infinite;
}

@keyframes kenBurns {
  0%, 
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--color-surface-strong-rgb), 0.28) 0%, rgba(var(--color-accent-rgb), 0.1) 38%, rgba(var(--color-surface-strong-rgb), 0.92) 100%);
}

.hero-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8rem;
  background: linear-gradient(to top, var(--color-bg), transparent);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--space-4xl) var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.hero-trophy {
  margin-bottom: var(--space-lg);
}

.hero-trophy-img {
  width: 6rem;
  height: 9rem;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.hero-script {
  font-size: var(--font-size-sm);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: var(--space-md);
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 900;
  color: var(--color-white);
  margin-bottom: var(--space-xl);
  letter-spacing: -0.02em;
}

.hero-countdown {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-box {
  background-color: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  min-width: 70px;
}

.countdown-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gold);
}

.countdown-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-sm);
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-3xl);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.btn-primary,
.btn-primary:visited {
  background-color: var(--color-accent-alt);
  color: var(--color-bg);
  border-color: rgba(var(--color-accent-rgb), 0.5);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-accent-alt-light);
  color: var(--color-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(var(--color-accent-rgb), 0.35);
}

.btn-primary:active {
  color: var(--color-bg);
  transform: translateY(0);
}

.ticket-portal-btn,
.ticket-portal-btn:visited {
  background-color: transparent;
  color: var(--color-accent-alt);
  border-color: rgba(var(--color-accent-rgb), 0.6);
}

.ticket-portal-btn:hover,
.ticket-portal-btn:focus-visible {
  background-color: rgba(var(--color-accent-rgb), 0.14);
  color: var(--color-accent-alt-light);
}

.ticket-portal-btn:active {
  color: var(--color-accent-alt);
}

.timezone-converter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}

.timezone-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.timezone-select {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  padding: 0.6rem 0.8rem;
  min-width: 240px;
  width: min(100%, 320px);
  max-width: 100%;
}

.timezone-select:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid rgba(var(--color-accent-rgb), 0.45);
  outline-offset: 2px;
}

.sources-section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.sources-note {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sources-note p {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-text-dim);
}

.sources-cta,
.sources-cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary {
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  background-color: transparent;
}

.btn-secondary:hover {
  background-color: var(--color-gold);
  color: var(--color-bg);
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
}

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

.hero-stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-white);
}

.hero-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media (min-width: 640px) {
  .hero-buttons {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .hero-trophy-img {
    width: 8rem;
    height: 12rem;
  }
  .hero-title {
    font-size: var(--font-size-6xl);
  }
  .hero-countdown {
    gap: var(--space-lg);
  }
  .countdown-box {
    padding: var(--space-lg) var(--space-xl);
    min-width: 100px;
  }
  .countdown-value, 
  .hero-stat-value {
    font-size: var(--font-size-4xl);
  }
  .hero-stats {
    gap: var(--space-4xl);
  }
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-header-row {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3xl);
}

.section-script {
  font-size: var(--font-size-sm);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-sm);
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-white);
}

.section-description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  max-width: 800px;
  margin: var(--space-md) auto 0;
}

.view-all-link {
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .section-header-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .section-title {
    font-size: var(--font-size-4xl);
  }
  .view-all-link {
    margin-top: 0;
  }
}

/* ============================================
   ARTICLE & PAGE HEADER STYLES
   ============================================ */
/* Default page header (non-team pages) */
.page-header {
  padding: 160px 0 80px;
  background: linear-gradient(180deg, rgba(var(--color-surface-strong-rgb), 0.8) 0%, var(--color-bg) 100%);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
  line-height: 1.1;
  font-weight: 800;
}

.page-header p {
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  letter-spacing: 0.05em;
}

/* Team pages only: custom hero header */
.team-page .page-header {
  position: relative;
  overflow: hidden;
  padding: 92px 0 42px;
  background:
    linear-gradient(115deg, rgba(8, 13, 24, 0.95) 0%, rgba(10, 18, 33, 0.82) 42%, rgba(var(--color-surface-strong-rgb), 0.75) 100%),
    var(--page-hero-image, url('/images/fwcumc.webp')) center/cover no-repeat;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.team-page .page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0) 58%, var(--color-bg) 100%);
  pointer-events: none;
}

.team-page .page-header .container {
  position: relative;
  z-index: 1;
}

.team-page .team-header-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(430px, 1.45fr);
  align-items: center;
  gap: 1.15rem;
}

.team-page .team-header-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.25rem 0;
}

.team-page .team-header-title {
  color: var(--color-white);
  font-size: clamp(2.1rem, 5vw, 4.1rem);
  line-height: 1.02;
  margin: 0;
  font-weight: 800;
}

.team-page .team-header-subtitle {
  margin: 0;
  color: rgba(240, 246, 255, 0.92);
  font-size: clamp(0.9rem, 1.15vw, 1.25rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}

.team-page .team-header-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 0.7rem;
}

.team-page .team-stat-card {
  min-height: 128px;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.09));
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.55rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.team-page .team-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);
  border-color: rgba(255, 255, 255, 0.28);
}

.team-page .team-stat-card--highlight {
  border-color: var(--color-gold);
  background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.2), rgba(255, 255, 255, 0.1));
  box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.34) inset, 0 8px 22px rgba(0, 0, 0, 0.26);
}

.team-page .team-stat-icon {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: 0.4rem;
}

.team-page .team-stat-value {
  font-size: clamp(1.12rem, 1.55vw, 1.45rem);
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}

.team-page .team-stat-label {
  margin-top: 0.35rem;
  color: rgba(237, 243, 255, 0.9);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.team-page .team-stat-meta {
  margin-top: 0.22rem;
  color: rgba(232, 238, 250, 0.74);
  font-size: 0.82rem;
}

@media (max-width: 1200px) {
  .team-page .team-header-layout {
    grid-template-columns: 1fr;
    gap: 0.95rem;
  }
  .team-page .team-header-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.content-article {
  max-width: 850px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
  animation: fadeInUp 0.8s ease-out;
}

.content-article p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* Venue pages: keep paragraph spacing close to default browser paragraph rhythm */
.stadium-page .content-article p {
  margin: 1em 0;
}

.stadium-page .content-article h2 {
  margin: 0.83em 0;
}

.stadium-page .content-article h3 {
  margin: 1em 0;
}


.content-article h2 {
  font-size: var(--font-size-2xl);
  color: var(--color-white);
  margin: var(--space-sm) 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gold);
  display: inline-block;
}

.content-article h3 {
  font-size: var(--font-size-xl);
  color: var(--color-gold-light);
  margin: var(--space-2xl) 0 var(--space-md);
}

.content-article a {
  color: var(--color-gold);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.content-article a:hover {
  color: var(--color-gold-light);
  text-decoration: underline;
}

.content-article ul, 
.content-article ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-lg);
}

.content-article ul li {
  list-style: none;
  position: relative;
  margin-bottom: 0.75rem;
  color: var(--color-text-muted);
  font-size: 1.125rem;
}

.content-article ul li::before {
  content: "•";
  position: absolute;
  left: -1.2rem;
  color: var(--color-gold);
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1rem;
  top: 0.2rem;
}

.article-table-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin: var(--space-2xl) 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.article-table-card .table-wrapper {
  max-height: 600px;
  overflow-y: auto;
}

.article-table-card .table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg-lighter) !important;
  border-bottom: 2px solid var(--color-gold);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ux-callout {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  margin: var(--space-2xl) 0;
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
  background: rgba(var(--color-accent-rgb), 0.05);
}

.ux-callout.warning {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}

.ux-callout h3 {
  margin-top: 0;
  color: var(--color-gold);
}

.ux-callout.warning h3 {
  color: #ef4444;
}

.ux-callout ul li::before {
  content: "→";
  font-size: 1.125rem;
  top: 0;
}

.ux-callout.warning ul li::before {
  color: #ef4444;
}

@media (max-width: 768px) {
  .page-header {
    padding: 120px 0 60px;
  }
  .team-page .page-header {
    padding: 82px 0 30px;
  }
  .team-page .team-header-layout {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .team-page .team-header-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
  .team-page .team-stat-card {
    min-height: 112px;
  }
  .team-page .team-header-subtitle {
    font-size: 0.96rem;
    padding: 0.38rem 0.62rem;
    border-radius: 0.85rem;
  }
  .content-article p, 
  .content-article ul li {
    font-size: 1rem;
  }
}

/* ============================================
   OVERVIEW SECTION
   ============================================ */
.overview-content {
  max-width: 900px;
  margin: 0 auto;
}

.overview-text {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

.highlight {
  color: var(--color-gold);
  font-weight: 600;
}

@media (min-width: 768px) {
  .overview-text {
    font-size: var(--font-size-lg);
  }
}

/* ============================================
   QUALIFICATION SECTION
   ============================================ */
.qualification {
  background-color: var(--color-bg);
  position: relative;
}

.qualification::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
}

@media (min-width: 640px) {
  .qualification-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .qualification-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.conf-card {
  position: relative;
  padding: var(--space-xl);
}

.conf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.conf-name {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.conf-fullname {
  font-size: var(--font-size-sm);
  color: var(--color-text-dim);
}

.conf-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.conf-stats {
  display: flex;
  gap: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-border);
}

.conf-stat {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.conf-stat svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-dim);
}

.conf-stat strong {
  color: var(--color-white);
  font-weight: 600;
}

/* Place confederation CTA link inside conf-stats and keep it centered */
#qualifiers .conf-card .conf-stats {
  flex-wrap: wrap;
}

#qualifiers .conf-card .conf-stat--cta {
  width: 100%;
  justify-content: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--glass-border);
}

#qualifiers .conf-card .conf-stat--cta .view-all-link {
  margin-top: 0;
}


    /* ============================================
       RESPONSIVE MATCH CARDS OVERRIDE
       ============================================ */
    
    .matches-grid {
      display: grid;
      /* Super responsive fluid grid: Starts at 1 column for smallest screens */
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 20px;
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 40px;
    }

    /* Tablet and up */
    @media (min-width: 600px) {
      .matches-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    /* Small Desktop and up */
    @media (min-width: 992px) {
      .matches-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
    }

    /* Large Desktop and up */
    @media (min-width: 1400px) {
      .matches-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .match-card {
      background: var(--fwc26-bg-card);
      border-radius: 16px;
      padding: clamp(16px, 4vw, 24px); /* Fluid padding */
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: all 0.3s ease;
      overflow: hidden;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }

    .match-card:hover {
      transform: translateY(-5px);
      border-color: var(--fwc26-accent);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .match-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--fwc26-accent), var(--fwc26-accent-complement));
    }

    .match-header {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      font-size: clamp(0.7rem, 2.5vw, 0.8rem); /* Fluid text */
      color: var(--fwc26-text-medium);
      margin-bottom: 15px;
      font-weight: 600;
    }

    .match-header .chip:not(.match-status-badge) {
      margin-left: auto;
    }

    .chip {
      background: rgba(var(--color-accent-rgb), 0.1);
      color: var(--fwc26-accent);
      padding: 4px 10px;
      border-radius: 20px;
      font-size: clamp(0.65rem, 2vw, 0.75rem);
      text-transform: uppercase;
      font-weight: bold;
      text-align: center;
    }

    .match-status-badge {
      background: rgba(var(--color-accent-rgb), 0.18);
      border: 1px solid rgba(var(--color-accent-rgb), 0.45);
      color: var(--color-accent-light);
      letter-spacing: 0.02em;
    }

    .match-teams {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 16px 0;
      width: 100%;
      gap: 8px; /* Buffer between teams and score */
    }

    .team {
      flex: 1;
      display: flex;
      flex-direction: column; /* Stack Flag on top of Text for better space management */
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      min-width: 0; /* Important: Prevents long names from breaking the flex container */
    }

    .team-name {
      font-size: clamp(0.85rem, 3.5vw, 1.1rem); /* Fluid typography */
      font-weight: 800;
      color: var(--fwc26-text-strongest);
      text-align: center;
      line-height: 1.2;
      width: 100%;
      /* Break long team/placeholder names securely */
      word-break: break-word;
      hyphens: auto;
    }

    .vs {
      flex-shrink: 0;
      font-size: clamp(1rem, 4vw, 1.25rem);
      font-weight: 900;
      color: var(--fwc26-accent);
      padding: 0 clamp(8px, 2vw, 16px);
      white-space: nowrap;
    }

    .match-footer {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: clamp(0.7rem, 2.5vw, 0.8rem);
      color: var(--fwc26-text-subtle);
      line-height: 1.4;
    }

    .match-footer .venue-link {
      color: inherit;
      text-decoration: none;
    }

    .match-footer .venue-link:hover {
      text-decoration: underline;
    }

    .venue-icon {
      margin-right: 6px;
      color: var(--fwc26-accent);
      font-size: clamp(0.8rem, 3vw, 1rem);
    }

    .flag-icon, .flag-placeholder {
      width: clamp(36px, 10vw, 48px);
      height: clamp(24px, 6.5vw, 32px);
      object-fit: cover;
      border-radius: 4px;
      display: block;
      margin: 0; /* Reset margins since we use flex gap now */
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }

.flag-placeholder {
  background: linear-gradient(45deg, #374151, #1f2937);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

/* Featured scorecard (matches page) */
.featured-scorecard-section {
  padding-top: var(--space-xl);
}

.featured-scorecard-section .section-header-row {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.featured-scorecard {
  margin-top: var(--space-lg);
  padding: clamp(16px, 2vw, 24px);
  border-radius: 18px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.35);
  background:
    radial-gradient(circle at top right, rgba(var(--color-accent-rgb), 0.14), rgba(var(--color-accent-rgb), 0) 42%),
    linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.96));
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.45);
}

.featured-scorecard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--fwc26-text-medium);
}

.featured-chip {
  border: 1px solid rgba(var(--color-accent-rgb), 0.4);
}

.featured-scorecard-headline {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-md);
  align-items: center;
}

.featured-team {
  display: flex;
  align-items: center;
  gap: 12px;
}

.featured-team h3 {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  color: var(--fwc26-text-strongest);
}

.featured-team-left {
  justify-self: start;
}

.featured-team-right {
  justify-self: end;
}

.featured-score {
  text-align: center;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1;
  color: var(--fwc26-text-strongest);
  font-weight: 800;
}

.featured-score-dash {
  color: var(--fwc26-text-medium);
}

.featured-score p {
  margin: 0 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fwc26-accent);
  font-weight: 700;
}

.featured-tabs {
  margin-top: var(--space-lg);
  display: inline-flex;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: var(--radius-full);
  padding: 4px;
  background: rgba(15, 23, 42, 0.65);
}

.featured-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--fwc26-text-medium);
  letter-spacing: 0.02em;
}

.featured-tab.is-active {
  background: rgba(var(--color-accent-rgb), 0.18);
  color: var(--fwc26-text-strongest);
}

.featured-pane {
  margin-top: var(--space-lg);
}

.featured-pane .featured-lineups {
  margin-top: 0;
}

.featured-lineups {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.featured-panel {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.62);
}

.featured-panel h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fwc26-accent);
}

.event-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.event-list li {
  display: grid;
  grid-template-columns: 44px 1fr 2fr;
  gap: 10px;
  align-items: baseline;
  font-size: 0.86rem;
}

.event-minute {
  font-weight: 700;
  color: var(--fwc26-accent-alt);
}

.event-team-name {
  font-weight: 600;
  color: var(--fwc26-text-strong);
}

.event-text {
  color: var(--color-text-muted);
}

.featured-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

.featured-stat-row strong {
  color: var(--fwc26-text-strongest);
  font-weight: 700;
}

.lineup-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .featured-scorecard-headline {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .featured-team,
  .featured-team-left,
  .featured-team-right {
    justify-self: center;
    justify-content: center;
  }

  .featured-score {
    justify-content: center;
  }

  .featured-lineups {
    grid-template-columns: 1fr;
  }

  .event-list li {
    grid-template-columns: 38px 1fr;
  }

  .event-text {
    grid-column: 2;
  }
}

/* Live Stream Styles */
.stream-upcoming-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.34);
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.85rem;
  max-width: 430px;
}

.stream-upcoming-message {
  margin: 0;
  color: var(--color-accent-light);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: right;
}

.stream-upcoming-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: right;
}

.stream-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  margin-top: 2rem;
}

.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.stream-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.stream-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.stream-status-msg {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.34);
  color: var(--color-accent-light);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.play-btn {
  width: 80px;
  height: 80px;
  background: var(--color-accent);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  margin-bottom: 1rem;
}

.play-btn svg {
  width: 40px;
  height: 40px;
}

.play-btn:hover {
  transform: scale(1.1);
}

.stream-sidebar {
  background-color: rgba(var(--color-surface-rgb), 0.86);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.stream-sidebar:hover {
  border-color: rgba(var(--color-accent-rgb), 0.55);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}

.sidebar-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--color-white);
  border-left: 3px solid var(--color-gold);
  padding-left: 0.6rem;
}

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

.broadcaster-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.55);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.broadcaster-item:hover {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  transform: translateY(-2px);
}

.broadcaster-item .country {
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.35);
}

.broadcaster-item .channel {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.stream-alert {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-dim);
  font-style: italic;
  border-top: 1px solid rgba(var(--color-accent-light-rgb), 0.18);
  padding-top: 10px;
}

.stream-alert svg {
  width: 16px;
  flex-shrink: 0;
}

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

@media (max-width: 992px) {
  .stream-container {
    grid-template-columns: 1fr;
  }

  .stream-upcoming-status {
    max-width: none;
    width: 100%;
    align-items: flex-start;
  }

  .stream-upcoming-message,
  .stream-upcoming-note {
    text-align: left;
  }
}

/* ============================================
   NEWS SECTION
   ============================================ */
.news-grid {
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.news-card {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(20, 33, 61, 0.78) 0%, rgba(12, 22, 42, 0.88) 100%);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.35);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  opacity: 0.75;
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-accent-rgb), 0.7);
  background:
    linear-gradient(180deg, rgba(24, 40, 73, 0.88) 0%, rgba(15, 27, 50, 0.94) 100%);
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.45);
}

.news-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.news-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 40%, rgba(2, 6, 23, 0.26) 100%);
  pointer-events: none;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.news-card:hover .news-image img {
  transform: scale(1.08);
}

.news-content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.news-category {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  background-color: rgba(var(--color-accent-rgb), 0.14);
  color: var(--color-accent-light);
  border: 1px solid rgba(var(--color-accent-light-rgb), 0.35);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  width: fit-content;
}

.news-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
  line-height: 1.4;
  transition: color var(--transition-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card:hover .news-title {
  color: var(--color-gold);
}

.news-excerpt {
  font-size: var(--font-size-sm);
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.news-date {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: #a8b5c9;
}

.news-date svg {
  width: 1rem;
  height: 1rem;
}

.news-readmore {
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================
   STANDINGS SECTION
   ============================================ */
.standings-grid {
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .standings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.standings-header {
  background-color: var(--color-bg-lighter);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
}

.standings-group {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gold);
}

.table-wrapper {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  background-color: rgba(15, 23, 42, 0.5);
  padding: var(--space-md) var(--space-sm);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.table th:nth-child(n+3), 
.table td:nth-child(n+3) {
  text-align: center;
}

.table td {
  padding: var(--space-md) var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(var(--color-accent-light-rgb), 0.14);
  white-space: nowrap;
}

.table tr:hover td {
  background-color: rgba(26, 35, 50, 0.5);
}

.position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--glass-border);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.position-badge.position-1, 
.position-badge.position-2 {
  background-color: var(--color-gold);
  color: var(--color-bg);
}

.points {
  font-weight: 700;
  color: var(--color-gold);
}

/* ============================================
   HOST CITIES SECTION
   ============================================ */
@media (min-width: 768px) {
  .host-cities-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.host-city-card {
  position: relative;
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
}

@media (min-width: 768px) {
  .host-city-card {
    height: 500px;
  }
}

.host-city-image {
  position: absolute;
  inset: 0;
}

.host-city-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.host-city-card:hover .host-city-image img {
  transform: scale(1.1);
}

.host-city-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-bg), rgba(var(--color-surface-strong-rgb), 0.5), transparent);
}

.host-city-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
}

.host-city-venues {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.host-city-venues svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-gold);
}

.host-city-venues strong {
  color: var(--color-gold);
}

.host-city-name {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.host-city-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.host-city-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-base);
  pointer-events: none;
}

/* ============================================
   FAN ESSENTIALS SECTION
   ============================================ */
@media (min-width: 768px) {
  .essentials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.essential-card {
  padding: var(--space-2xl);
}

.essential-icon {
  width: 4rem;
  height: 4rem;
  background-color: rgba(var(--color-accent-rgb), 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xl);
  transition: background-color var(--transition-base);
}

.essential-card:hover .essential-icon {
  background-color: rgba(var(--color-accent-rgb), 0.2);
}

.essential-icon svg {
  width: 2rem;
  height: 2rem;
  color: var(--color-gold);
}

.essential-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.essential-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

/* ============================================
   FAQ SECTION
   ============================================ */
.section.faq > h2 {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.faq-item {
  transition: border-color var(--transition-base);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  text-align: left;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-white);
  transition: background-color var(--transition-base);
}

.faq-question:hover {
  background-color: rgba(26, 35, 50, 0.5);
}

.faq-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gold);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

.faq-answer p {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ============================================
   FOOTER LAYOUT & BRANDING
   ============================================ */
.footer {
  background-color: var(--color-bg);
  border-top: 1px solid var(--glass-border);
  color: var(--color-white);
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
  .footer-content {
    grid-template-columns: 1fr 1.5fr;
  }
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.footer-logo-icon {
  width: 3.75rem;
  height: 3.75rem;
  color: var(--color-gold);
  object-fit: contain;
}

.footer-logo-main {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
}

.footer-logo-sub {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gold);
  letter-spacing: 0.1em;
}

.footer-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  max-width: 400px;
}

.footer-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  max-width: 400px;
}

.footer-social {
  display: flex;
  gap: var(--space-md);
}

.social-link {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background-color: var(--color-bg-light);
  border: 1px solid transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: transform var(--transition-base), filter var(--transition-base), box-shadow var(--transition-base);
}

.social-link:hover, 
.social-link:focus-visible {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.06);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
  outline: none;
}

.social-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

.social-link-logo {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  object-fit: contain;
}

.social-link-facebook { background-color: #1877f2; }
.social-link-x { background-color: var(--color-bg); }
.social-link-linkedin { background-color: #0a66c2; }
.social-link-whatsapp { background-color: #25d366; }

.footer-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 640px) {
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer-links-column h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-white);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

.footer-links-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-links-column[aria-labelledby="info-links-title"] ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
}

.footer-links-column[aria-labelledby="info-links-title"] h4 {
  text-align: left;
}

.footer-links-column[aria-labelledby="info-links-title"] {
  max-width: none;
  margin: 0;
}

.footer-links-column a {
  text-decoration: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.footer-links-column a:hover, 
.footer-links-column a:focus-visible {
  color: var(--color-gold);
  outline: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-border);
}

.footer-copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.back-to-top {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(var(--color-accent-light-rgb), 0.24);
  border-radius: 9999px;
  background-color: var(--color-bg-light);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), border-color var(--transition-base), color var(--transition-base), background-color var(--transition-base);
}

.back-to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--color-gold);
  border-color: rgba(var(--color-accent-rgb), 0.5);
  background-color: var(--accent-soft-bg);
  transform: translateY(-2px);
  outline: none;
}

@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .back-to-top {
    align-self: flex-end;
  }
}

/* ============================================
   ANIMATIONS & RESPONSIVE UTILITIES
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

.section-header-row.animate-on-scroll.visible {
  padding: 10px;
  margin: 10px;
}

.section-header.animate-on-scroll.visible {
  margin: 10px;
}

.animate-on-scroll:nth-child(1) {
  transition-delay: 0.1s;
}

.animate-on-scroll:nth-child(2) {
  transition-delay: 0.2s;
}

.animate-on-scroll:nth-child(3) {
  transition-delay: 0.3s;
}

.animate-on-scroll:nth-child(4) {
  transition-delay: 0.4s;
}

.animate-on-scroll:nth-child(5) {
  transition-delay: 0.5s;
}

.animate-on-scroll:nth-child(6) {
  transition-delay: 0.6s;
}

@media (max-width: 640px) {
  :root {
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.5rem;
    --font-size-6xl: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, 
  *::before, 
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   TEAMS PAGE STYLES
   ============================================ */

/* Filter Bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
}

#section-filter {
  margin-bottom: 10px;
}

#group-section-filter {
  margin-bottom: 10px;
}

.team-page .filter-bar {
  margin-bottom: 0.8rem;
}

.filter-btn {
  padding: var(--space-sm) var(--space-lg);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--transition-base);
  cursor: pointer;
}

.filter-btn:hover {
  background-color: rgba(var(--color-accent-rgb), 0.1);
  border-color: var(--color-gold);
  color: var(--color-white);
}

.filter-btn.active {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-bg);
  font-weight: 600;
}

/* Teams Grid Layout */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.squad-group-heading {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-left: 3px solid var(--color-gold);
  padding-left: 0.6rem;
}

/* Individual Team Card */
.team-card {
  background-color: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}

.team-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  transform: translateY(-8px);
  box-shadow: var(--shadow-gold);
}

/* Flag Section */
.team-flag {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
  border-bottom: 2px solid rgba(var(--color-accent-rgb), 0.2);
}

.team-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.team-card:hover .team-flag img {
  transform: scale(1.05);
}

/* Card Information */
.team-info {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.team-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background-color: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-gold);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.team-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.team-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-dim);
  margin-bottom: var(--space-lg);
  flex-grow: 1; /* Pushes the link to the bottom */
}

.teams-section .team-info .view-all-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-strong);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--transition-base);
}

.teams-section .team-info .view-all-link:hover {
  color: var(--color-gold);
  border-color: rgba(var(--color-accent-rgb), 0.5);
  background: rgba(var(--color-accent-rgb), 0.1);
  text-decoration: none;
}

.teams-section .team-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.teams-section .team-kits-link {
  border-color: rgba(var(--color-accent-rgb), 0.35);
}

    /* Specific styles for flag alignment in the table */
        .team-cell {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .team-flag-small {
            width: 24px;
            height: 16px;
            object-fit: cover;
            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .flag-placeholder {
            width: 24px;
            height: 16px;
            background: linear-gradient(45deg, #374151, #1f2937);
            border-radius: 2px;
            display: inline-block;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
        }
        
            .flag-icon {
        width: 24px; 
        height: 16px; 
        object-fit: cover; 
        border-radius: 2px; 
        margin-right: 8px; 
        vertical-align: middle;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .flag-placeholder {
        display: inline-block;
        width: 24px;
        height: 16px;
        background: linear-gradient(45deg, #374151, #1f2937);
        border-radius: 2px;
        margin-right: 8px;
        vertical-align: middle;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
    }
    .team {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Venue Grid & Card Styles */
        .venues-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: var(--space-xl);
        }
        .venue-card {
            background-color: var(--glass-bg);
            backdrop-filter: blur(4px);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-xl);
            overflow: hidden;
            transition: all var(--transition-base);
            display: flex;
            flex-direction: column;
            text-decoration: none;
        }
        .venue-card:hover {
            border-color: rgba(var(--color-accent-rgb), 0.5);
            transform: translateY(-8px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.5), 0 0 15px rgba(var(--color-accent-rgb), 0.2);
        }
        .venue-image-wrapper {
            width: 100%;
            height: 200px;
            position: relative;
            background: linear-gradient(45deg, #1f2937, #111827);
            border-bottom: 2px solid rgba(var(--color-accent-rgb), 0.2);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .venue-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        /* Generic stadium placeholder styling */
        .venue-image-wrapper::before {
            content: "🏟️";
            font-size: 4rem;
            opacity: 0.2;
            position: absolute;
            display: none;
        }
        .venue-country-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            padding: 5px 10px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 2;
        }
        .venue-country-badge img {
            width: 18px;
            height: 12px;
            border-radius: 2px;
            object-fit: cover;
        }
        .venue-info {
            padding: var(--space-lg);
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .venue-city {
            font-size: var(--font-size-sm);
            color: var(--color-gold);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            margin-bottom: var(--space-xs);
        }
        .venue-name {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--color-white);
            margin-bottom: var(--space-sm);
        }
        .venue-name .chip-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 14px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--radius-full);
            background: rgba(255, 255, 255, 0.04);
            color: var(--color-text-strong);
            text-decoration: none;
            font-size: 1rem;
            line-height: 1.2;
            transition: all var(--transition-base);
        }
        .venue-name .chip-link:hover {
            color: var(--color-gold);
            border-color: rgba(var(--color-accent-rgb), 0.5);
            background: rgba(var(--color-accent-rgb), 0.1);
            text-decoration: none;
        }
        .venue-capacity {
            font-size: 0.9rem;
            color: var(--color-text-dim);
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: var(--space-md);
        }
        .venue-capacity svg {
            width: 16px;
            height: 16px;
            color: var(--color-text-muted);
        }
        .venue-footer {
            margin-top: auto;
            border-top: 1px solid rgba(255,255,255,0.05);
            padding-top: var(--space-md);
            font-size: 0.9rem;
            color: var(--color-text-muted);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .view-venue-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            padding: 8px 14px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--radius-full);
            background: rgba(255, 255, 255, 0.04);
            color: var(--color-text-strong);
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1.2;
            transition: all var(--transition-base);
        }
        .view-venue-btn:hover {
            color: var(--color-gold);
            border-color: rgba(var(--color-accent-rgb), 0.5);
            background: rgba(var(--color-accent-rgb), 0.1);
            text-decoration: none;
        }
/* ============================================
   EXTRA CSS: Player Cards & Utilities
   ============================================ */

/* Player Card Styles */
.fwc-player-card {
    width: 100%;
    max-width: 320px;
    background: var(--color-bg-light); /* Uses your main CSS variable */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    font-family: var(--font-family);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    margin: 0 auto;
}

.fwc-player-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--color-accent-rgb), 0.5); /* Gold highlight on hover */
    box-shadow: var(--shadow-gold);
}

/* Team kits cards */
.kit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

@media (min-width: 768px) {
    .kit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .kit-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.kit-card {
    background: rgba(17, 24, 39, 0.75);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.kit-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    box-shadow: var(--shadow-gold);
}

.kit-card-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    object-position: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
}

.kit-card-content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kit-card-title {
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.kit-sections-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin: var(--space-lg) 0 var(--space-xl);
}

.kit-section-block {
    background: rgba(17, 24, 39, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.kit-section-block h3 {
    margin: 0 0 var(--space-md);
    color: var(--color-white);
    font-size: var(--font-size-xl);
}

.kit-section-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.kit-section-text p {
    margin: 0 0 var(--space-md);
    color: var(--color-text-muted);
}

.kit-section-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 20px;
}

.kit-section-list li {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.kit-section-layout img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

@media (min-width: 900px) {
    .kit-section-layout {
        grid-template-columns: 1.2fr 1fr;
    }
    .kit-section-list {
        grid-template-columns: 1fr 1fr;
    }
}

.fwc-player-top {
    position: relative;
    background: linear-gradient(135deg, var(--color-bg-lighter), var(--color-bg-light));
    padding: 0;
    text-align: center;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.fwc-player-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

.fwc-player-content {
    padding: var(--space-lg);
}

.fwc-player-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fwc-player-name {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
}

.fwc-player-team {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

.fwc-flag {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.fwc-player-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.fwc-player-stats div {
    background: rgba(var(--color-surface-strong-rgb), 0.5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.fwc-player-stats strong {
    color: var(--color-text-dim);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.fwc-player-stats span {
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 700;
}

.fwc-player-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: all var(--transition-base);
}

.fwc-player-btn:hover {
    background: var(--color-gold);
    color: var(--color-bg);
}

/* ============================================
   Player Profile Pages
   ============================================ */
.player-profile-page .content-article {
    max-width: 980px;
}

.player-profile-page .player-hero {
    padding: 120px 0 30px;
    background:
      linear-gradient(160deg, rgba(4, 10, 22, 0.92) 0%, rgba(10, 20, 38, 0.84) 45%, rgba(10, 14, 26, 0.96) 100%);
    border-bottom: 1px solid var(--color-border);
}

.player-profile-page .player-hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.player-profile-page .player-hero-league {
    margin-top: 10px;
}

.player-profile-page .player-hero-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-profile-page .player-hero-number {
    min-width: 64px;
    height: 64px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0ea5a4;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.player-profile-page .player-hero-name {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
}

.player-profile-page .player-hero-sub {
    margin: 6px 0 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.player-profile-page .player-hero-image-wrap {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    padding: 12px;
}

.player-profile-page .player-hero-image {
    width: 100%;
    height: auto;
    max-height: 360px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 18%;
    border-radius: var(--radius-md);
    display: block;
}

.player-profile-page .player-bio-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    padding: 12px;
}

.player-profile-page .player-bio-card h2 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--color-white);
    border: 0;
    padding: 0;
}

.player-profile-page .player-bio-table {
    width: 100%;
    border-collapse: collapse;
}

.player-profile-page .player-bio-table th,
.player-profile-page .player-bio-table td {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
    vertical-align: top;
}

.player-profile-page .player-bio-table th {
    width: 45%;
    text-align: left;
    color: var(--color-text-muted);
    font-weight: 600;
}

.player-profile-page .player-bio-table td {
    color: var(--color-white);
}

.player-profile-page .player-style-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.player-profile-page .player-league-card {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(17, 24, 39, 0.6);
}

.player-profile-page .player-league-card + .player-league-card {
    margin-top: 10px;
}

.player-profile-page .player-league-head {
    background: #243140;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 10px;
    border-top: 8px solid #0ea5a4;
}

.player-profile-page .player-league-table th,
.player-profile-page .player-league-table td {
    text-align: left;
    white-space: nowrap;
}

.player-profile-page .player-style-item {
    background: rgba(17, 24, 39, 0.65);
    border: 1px solid rgba(55, 65, 81, 0.55);
    border-radius: var(--radius-md);
    padding: 10px;
}

.player-profile-page .player-style-item h3 {
    margin: 0 0 6px;
}

.player-profile-page .player-style-item p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
}

.player-profile-page .player-socials {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(17, 24, 39, 0.6);
    padding: 0;
}

.player-profile-page .player-socials.section {
    padding: 0;
}

.player-profile-page .player-hero-socials {
    margin-top: 10px;
}

.player-profile-page .player-socials h2 {
    margin: 0;
    background: #243140;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 10px;
    border-top: 8px solid #0ea5a4;
}

.player-profile-page .player-socials p {
    margin: 0;
    padding: 10px 10px 0;
    color: var(--color-text-muted);
}

.player-profile-page .player-social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}

.player-profile-page .player-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.35);
    text-decoration: none;
    font-weight: 600;
    color: var(--color-white);
    background: rgba(15, 23, 42, 0.7);
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.player-profile-page .player-social-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--color-accent-rgb), 0.55);
    background: rgba(30, 41, 59, 0.85);
}

.player-profile-page .player-social-btn.social-facebook {
    border-color: rgba(96, 165, 250, 0.45);
}

.player-profile-page .player-social-btn.social-instagram {
    border-color: rgba(232, 121, 249, 0.45);
}

.player-profile-page .player-social-btn.social-x {
    border-color: rgba(148, 163, 184, 0.45);
}

.player-profile-page .player-social-btn.social-youtube {
    border-color: rgba(248, 113, 113, 0.45);
}

.player-profile-page .player-actions {
    text-align: center;
}

.player-profile-page .btn-primary,
.player-profile-page .btn-primary:visited {
    background-color: transparent;
    color: var(--color-accent-alt);
    border: 2px solid var(--color-accent-alt);
}

.player-profile-page .btn-primary:hover,
.player-profile-page .btn-primary:focus-visible {
    background-color: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent-alt-light);
    box-shadow: 0 4px 20px rgba(var(--color-accent-rgb), 0.3);
    transform: translateY(-2px);
}

@media (min-width: 900px) {
    .player-profile-page .player-hero-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "title title"
            "image bio";
        gap: 10px;
        align-items: start;
    }
    .player-profile-page .player-hero-title-wrap {
        grid-area: title;
    }
    .player-profile-page .player-hero-image-wrap {
        grid-area: image;
    }
    .player-profile-page .player-bio-card {
        grid-area: bio;
    }
    .player-profile-page .player-hero-image-wrap {
        width: 100%;
    }
    .player-profile-page .player-hero-image {
        width: 100%;
        object-fit: cover;
    }
    .player-profile-page .player-style-grid {
        grid-template-columns: 1fr 1fr;
    }
    .player-profile-page .player-social-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* BMO Field venue page */
.stadium-page .stadium-hero  {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(1, 8, 22, 0.22) 0%, rgba(1, 8, 22, 0.82) 72%, rgba(1, 8, 22, 0.94) 100%),
    var(--stadium-hero-image, url("/images/venues/bmo-field-hero.webp")) center/cover no-repeat;
  border-bottom: none;
}
.stadium-page .stadium-hero-content  {
  width: 100%;
  padding: 2.5rem 0 2rem;
}
.stadium-page .stadium-chip  {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  padding: 0.36rem 0.72rem;
  border-radius: 999px;
  color: #ffe082;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(var(--color-accent-rgb), 0.4);
  margin-bottom: 0.9rem;
}
.stadium-page .stadium-hero h1  {
  margin: 0;
  font-size: clamp(2rem, 4.7vw, 3.4rem);
  line-height: 1.05;
}
.stadium-page .stadium-hero p  {
  margin: 0.55rem 0 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 840px;
}

/* Page-wide compact spacing: keep paddings at 10px */
.stadium-page .container  {
  padding-left: 10px;
  padding-right: 10px;
}

.stadium-page .content-article,
.stadium-page .stadium-stat,
.stadium-page .seating-map-box,
.stadium-page .seating-zone,
.stadium-page .location-card,
.stadium-page .faq-item,
.stadium-page .match-card {
  padding: 10px;
}
.stadium-page .faq-answer  {
  padding: 0;
}
.stadium-page .faq-item .faq-answer  {
  max-height: 0;
  overflow: hidden;
  padding: 0;
}
.stadium-page .faq-item.active .faq-answer  {
  max-height: 500px;
}
.stadium-page .stadium-grid  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin: 1.25rem 0 2rem;
}
.stadium-page .stadium-stat  {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.stadium-page .stadium-stat h3  {
  margin: 0 0 0.35rem;
  color: var(--color-gold);
  font-size: 1rem;
}
.stadium-page .stadium-stat p  {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.stadium-page .seating-map-box  {
  background: linear-gradient(180deg, rgba(20, 28, 44, 0.95), rgba(12, 19, 34, 0.95));
  border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin: 1rem 0 2rem;
}
.stadium-page .seating-map-layout  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: 1rem;
}
.stadium-page .seating-visual  {
  margin-top: 1rem;
  padding: 0.95rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.24);
}
.stadium-page .seating-visual svg  {
  width: 100%;
  height: auto;
  display: block;
}
.stadium-page .seating-zone  {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.stadium-page .location-card  {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-top: 1rem;
}
.stadium-page .location-card p  {
  margin: 0 0 0.75rem;
}

/* Keep venue fixtures visually aligned with team-page cards */
.stadium-page #schedule .matches-grid  {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 2rem;
  width: min(1280px, calc(100vw - 3rem));
  margin-left: 50%;
  transform: translateX(-50%);
}
.stadium-page #schedule .match-teams  {
  gap: 14px;
}
.stadium-page #schedule .team  {
  min-width: 110px;
}
.stadium-page #schedule .team-name  {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  white-space: normal;
  line-height: 1.25;
}
.stadium-page #schedule .vs  {
  min-width: 58px;
  text-align: center;
}

@media (max-width: 1199px) {
  .stadium-page #schedule .matches-grid  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}

@media (max-width: 768px) {
  .stadium-page .stadium-hero  {
    min-height: 300px;
  }
  .stadium-page .stadium-hero-content  {
    padding: 2rem 0 1.4rem;
  }
  .stadium-page #schedule .matches-grid  {
    grid-template-columns: 1fr;
  }
  .stadium-page .seating-map-layout  {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   GROUP PAGES
   ============================================ */
.group-page .group-intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xl);
}

.group-page .group-intro p {
  margin-bottom: var(--space-md);
}

.group-page .group-shell {
  margin-bottom: var(--space-4xl);
}

.group-page .section-anchor-title {
  margin-bottom: var(--space-lg);
}

.group-page .team-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.group-page .team-detail-card {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.group-page .team-simple-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--color-text-strong);
  font-weight: 700;
}

.group-page .team-simple-title a {
  color: inherit;
  text-decoration: none;
}

.group-page .team-simple-title a:hover {
  text-decoration: underline;
}

.group-page .team-detail-card p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}

.group-page .matches-grid.single-group {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .group-page .matches-grid.single-group {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) {
  .group-page .matches-grid.single-group {
    grid-template-columns: 1fr;
  }
}

.group-page #standings .standings-grid {
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
}

/* ============================================
   GROUPS LIST PAGE
   ============================================ */
.groups-page .intro-text-large {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.groups-page .mb-0 {
  margin-bottom: 0;
}

.groups-page .mb-4xl {
  margin-bottom: var(--space-4xl);
}

.groups-page .mt-4xl {
  margin-top: var(--space-4xl);
}

.groups-page .content-article .group-card-title {
  margin: 0;
  padding: var(--space-sm) 0;
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-border);
}

.groups-page .content-article .group-card-title a {
  color: inherit;
  text-decoration: none;
}

.groups-page .content-article .group-card-title a:hover {
  text-decoration: underline;
}

.groups-page .group-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: var(--space-md) auto 0;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--color-text-strong);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.groups-page .group-view-btn:hover {
  color: var(--color-gold);
  border-color: rgba(var(--color-accent-rgb), 0.45);
  background: rgba(var(--color-accent-rgb), 0.08);
  text-decoration: none;
}

.groups-page .teams-grid .conf-card {
  padding: var(--space-lg);
}

.groups-page .group-team-item {
  display: flex;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 1.05rem;
  color: var(--color-text-strong);
}

.groups-page .group-team-item a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.groups-page .group-team-item a:hover {
  text-decoration: underline;
}

.groups-page .group-team-item:last-child {
  border-bottom: none;
}

.groups-page .group-team-item.unconfirmed {
  color: var(--color-text-subtle);
}

.groups-page .seed-number {
  color: var(--color-gold);
  font-weight: 700;
  margin-right: var(--space-md);
  width: 15px;
}

.groups-page .host-tag {
  font-size: 0.7rem;
  background: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-gold);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
  text-transform: uppercase;
  font-weight: 600;
}

.groups-page .host-tag:hover {
  text-decoration: underline;
}

/* ============================================
   HOST CITIES PAGE
   ============================================ */
.host-cities-page .intro-text-large {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.host-cities-page .mb-0 {
  margin-bottom: 0;
}

.host-cities-page .mt-4xl {
  margin-top: var(--space-4xl);
}

.host-cities-page .region-title {
  color: var(--color-gold);
  font-size: var(--font-size-3xl);
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-xl);
  margin-top: var(--space-4xl);
}

.host-cities-page .city-card {
  background-color: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}

.host-cities-page .city-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  transform: translateY(-8px);
  box-shadow: var(--shadow-gold);
}

.host-cities-page .city-name {
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: var(--space-sm);
}

.host-cities-page .country-tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
  width: fit-content;
}

.host-cities-page .tag-usa {
  background-color: rgba(var(--color-accent-rgb), 0.12);
  color: var(--color-accent-light);
  border: 1px solid rgba(var(--color-accent-rgb), 0.24);
}

.host-cities-page .tag-mex {
  background-color: rgba(var(--color-accent-rgb), 0.15);
  color: var(--color-accent-light);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

.host-cities-page .tag-can {
  background-color: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.host-cities-page .stadium-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.host-cities-page .stadium-info strong {
  color: var(--color-gold-light);
}

.chip-link {
  color: inherit;
  text-decoration: none;
}

.chip-link:hover {
  text-decoration: underline;
}

/* ============================================
   VENUES ARTICLE SECTION
   ============================================ */
.venues-article-section {
  padding-top: 0;
  padding-bottom: 10px;
}

.venues-article h2 {
  margin: 10px 0;
}

.venues-article h2:first-child {
  margin-top: 0;
}

.venues-article h3 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-gold-light);
}

.venues-article .venue-guide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.venues-article .venue-highlight-card {
  background-color: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.venues-article .venue-highlight-card p {
  margin: 0;
  color: var(--color-text-muted);
}

.venues-article .article-table-card {
  margin: var(--space-xl) 0;
}

.venues-article .faq-list {
  max-width: 100%;
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .venues-article .venue-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .venues-article .venue-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================
   Utility Content Pages
   ============================================ */
.utility-page .content-article {
  max-width: 1100px;
}

.utility-card {
  background: rgba(var(--color-surface-rgb), 0.86);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xl);
}

.utility-kicker {
  display: inline-block;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold-light);
  margin-bottom: var(--space-sm);
}

.utility-lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.utility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.utility-mini-card {
  background: rgba(26, 35, 50, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.utility-mini-card h3 {
  margin-top: 0;
}

.utility-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.utility-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.utility-table th,
.utility-table td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid rgba(55, 65, 81, 0.4);
}

.utility-table th {
  color: var(--color-gold-light);
  font-size: var(--font-size-sm);
  background: rgba(10, 14, 26, 0.7);
}

.utility-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.utility-links a {
  color: var(--color-text);
  background: rgba(26, 35, 50, 0.55);
  border: 1px solid rgba(55, 65, 81, 0.4);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.utility-links a:hover {
  border-color: rgba(var(--color-accent-rgb), 0.55);
  color: var(--color-gold-light);
  transform: translateX(2px);
}

.utility-note {
  background: rgba(10, 14, 26, 0.55);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .utility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .utility-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================
   Team Kits Pages
   ============================================ */
.team-kit-page .team-kit-link-card {
  padding: var(--space-xl);
}

.team-kit-page .team-kit-link-card h3 {
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

.team-kit-page .team-kit-link-card p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* Readability-first section rhythm for venue/team long-form pages */
.stadium-page .section,
.stadium-page .section.filterable-section,
.team-page .section:not(.faq),
.group-page .section,
.group-page .section.group-filter-section {
  padding-top: 16px;
  padding-bottom: 16px;
}

.stadium-page .section-header,
.stadium-page .section-header-row,
.team-page .section:not(.faq) .section-header,
.team-page .section:not(.faq) .section-header-row,
.group-page .section-header,
.group-page .section-header-row {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* INLINE STYLE MIGRATION START */
/* Auto-generated classes migrated from inline styles across HTML pages. */
.inl-09c51b36cd { --stadium-hero-image: url('/images/venues/heroes/bmo-field-hero.webp'); }
.inl-0d5a81627c { --page-hero-image: url('/images/flags/iran.webp'); }
.inl-0daffba74f { --page-hero-image: url('/images/flags/austria.webp'); }
.inl-0dc8cc6234 { margin-top: 0.5rem; }
.inl-0f630e64fb { --page-hero-image: url('/images/flags/ghana.webp'); }
.inl-13a8112937 { padding: 10px; margin: 10px; }
.inl-16b3edb4b9 { --page-hero-image: url('/images/flags/ecuador.webp'); }
.inl-1e23a6f743 { --stadium-hero-image: url('/images/venues/heroes/seattle-stadium-hero.webp'); }
.inl-209537865b { background-color: rgba(var(--color-accent-rgb), 0.05); }
.inl-21cfaf7340 { margin-top: 0; color: var(--color-gold); }
.inl-21ed360e5f { margin: 10px 0; }
.inl-22f61d20c1 { margin-left: 10px; }
.inl-24170d7820 { width: 3rem; height: 3rem; object-fit: contain; }
.inl-2441315fb0 { --page-hero-image: url('/images/flags/japan.webp'); }
.inl-24e48afd28 { --page-hero-image: url('/images/flags/germany.webp'); }
.inl-2ba84730cd { --page-hero-image: url('/images/flags/algeria.webp'); }
.inl-2bf0b191ed { --page-hero-image: url('/images/flags/united-states.webp'); }
.inl-2c9913fa4e { --page-hero-image: url('/images/flags/panama.webp'); }
.inl-2d98adf5c6 { margin-bottom: 10px; }
.inl-30801a236e { margin-top: var(--space-4xl); }
.inl-31c6883fad { --page-hero-image: url('/images/flags/switzerland.webp'); }
.inl-31de64e33f { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.inl-3a3655f22b { --stadium-hero-image: url('/images/venues/heroes/los-angeles-stadium-hero.webp'); }
.inl-3e3b8f5049 { border: 0; }
.inl-49c8fe8e67 { --page-hero-image: url('/images/flags/croatia.webp'); }
.inl-4a7ba01443 { --page-hero-image: url('/images/flags/cape-verde.webp'); }
.inl-4b8bf5cc4a { --stadium-hero-image: url('/images/venues/heroes/miami-stadium-hero.webp'); }
.inl-54d32d80db { margin-top: 10px; }
.inl-592565bc04 { --stadium-hero-image: url('/images/venues/heroes/san-francisco-bay-area-stadium-hero.webp'); }
.inl-5a77c4197c { --page-hero-image: url('/images/flags/haiti.webp'); }
.inl-63f234398f { --page-hero-image: url('/images/flags/uzbekistan.webp'); }
.inl-641a4612a0 { margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(var(--color-accent-light-rgb), 0.24); }
.inl-648149cea2 { margin-bottom: 0; }
.inl-64882b504b { padding-top: 0; }
.inl-6a7af0041d { --page-hero-image: url('/images/flags/colombia.webp'); }
.inl-71ea0d3fef { --page-hero-image: url('/images/flags/argentina.webp'); }
.inl-72a68ac344 { text-align: center; }
.inl-76c3805f34 { width: 100%; margin: 1rem 0; }
.inl-77200c4f5c { --page-hero-image: url('/images/flags/mexico.webp'); }
.inl-77baeec71e { text-align: center; margin: var(--space-3xl) 0; }
.inl-7ab115e6ae { --page-hero-image: url('/images/flags/france.webp'); }
.inl-7b3a864e98 { --page-hero-image: url('/images/flags/australia.webp'); }
.inl-7f33abdc9f { --stadium-hero-image: url('/images/venues/heroes/mexico-city-stadium-hero.webp'); }
.inl-80b6198fac { --page-hero-image: url('/images/flags/south-africa.webp'); }
.inl-83bde6d88b { color: var(--color-gold-light); }
.inl-86aa7c8ff6 { font-size: var(--font-size-sm); color: var(--color-text-subtle); }
.inl-92bdfd4d2f { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(var(--color-accent-light-rgb), 0.24); }
.inl-939056de57 { --page-hero-image: url('/images/flags/jordan.webp'); }
.inl-9601276d9b { font-size: var(--font-size-sm); color: var(--color-gold-light); margin-bottom: var(--space-sm); font-weight: 600; }
.inl-9be3143f02 { margin-bottom: 3rem; }
.inl-9e09749251 { --stadium-hero-image: url('/images/venues/heroes/houston-stadium-hero.webp'); }
.inl-9f359eed23 { --stadium-hero-image: url('/images/venues/heroes/vancouver-stadium-hero.webp'); }
.inl-a34ac31750 { --page-hero-image: url('/images/flags/tunisia.webp'); }
.inl-a8ec6c630b { gap: var(--space-lg); margin: var(--space-2xl) 0; }
.inl-af7e6914ab { --page-hero-image: url('/images/flags/spain.webp'); }
.inl-b032584dd2 { --stadium-hero-image: url('/images/venues/heroes/kansas-city-stadium-hero.webp'); }
.inl-b727109620 { --page-hero-image: url('/images/flags/belgium.webp'); }
.inl-b8fb4b3e94 { padding-bottom: 10px; }
.inl-b9a6462bdc { background-color: var(--color-bg-light); border-top: 1px solid var(--color-border); }
.inl-bbce427180 { --stadium-hero-image: url('/images/venues/heroes/atlanta-stadium-hero.webp'); }
.inl-be49e8003e { --page-hero-image: url('/images/flags/south-korea.webp'); }
.inl-bfb0fc3cde { --page-hero-image: url('/images/flags/portugal.webp'); }
.inl-bfda651445 { --page-hero-image: url('/images/flags/norway.webp'); }
.inl-c25a6bfb72 { --page-hero-image: url('/images/flags/qatar.webp'); }
.inl-c4c72e6fc1 { display: flex; gap: 10px; align-items: start; }
.inl-cbe99e9b59 { --page-hero-image: url('/images/flags/ivory-coast.webp'); }
.inl-cd14719f00 { --page-hero-image: url('/images/flags/uruguay.webp'); }
.inl-d1f37bf6c4 { --page-hero-image: url('/images/flags/curacao.webp'); }
.inl-d31f4bbb7b { --stadium-hero-image: url('/images/venues/heroes/monterrey-stadium-hero.webp'); }
.inl-d3c89d554b { color: var(--color-gold); }
.inl-d4741428ea { text-align: center; margin-top: 3rem; }
.inl-d499c1a897 { --stadium-hero-image: url('/images/venues/heroes/dallas-stadium-hero.webp'); }
.inl-d523c82346 { margin: var(--space-3xl) 0; }
.inl-d6b1522793 { --page-hero-image: url('/images/flags/new-zealand.webp'); }
.inl-d8a9b218ac { margin-top: 15px; line-height: 1.6; font-size: 1.1rem; color: var(--color-text-muted); }
.inl-d973405030 { color: var(--color-white); }
.inl-dab43fb936 { margin-top: 1rem; }
.inl-deb33ee0db { --stadium-hero-image: url('/images/venues/heroes/philadelphia-stadium-hero.webp'); }
.inl-e14d2c1316 { --page-hero-image: url('/images/flags/senegal.webp'); }
.inl-e19b432b47 { --stadium-hero-image: url('/images/venues/heroes/new-york-new-jersey-stadium-hero.webp'); }
.inl-e52ad0dbb1 { --stadium-hero-image: url('/images/venues/heroes/guadalajara-stadium-hero.webp'); }
.inl-e6c7db8440 { --page-hero-image: url('/images/flags/paraguay.webp'); }
.inl-ed5f442b2f { --page-hero-image: url('/images/flags/egypt.webp'); }
.inl-ef5006833a { --page-hero-image: url('/images/flags/scotland.webp'); }
.inl-f0b24eea08 { margin-bottom: 1.5rem; }
.inl-f444faff93 { --stadium-hero-image: url('/images/venues/heroes/boston-stadium-hero.webp'); }
.inl-f5f5e7fc8e { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.inl-f82e120592 { --page-hero-image: url('/images/flags/canada.webp'); }
.inl-f9c6351be6 { --page-hero-image: url('/images/flags/brazil.webp'); }
.inl-fb02c1c997 { --page-hero-image: url('/images/flags/england.webp'); }
.inl-fc6403b08c { --page-hero-image: url('/images/flags/morocco.webp'); }
.inl-fcc2b56857 { --page-hero-image: url('/images/flags/saudi-arabia.webp'); }
.inl-ffa2c1c222 { --page-hero-image: url('/images/flags/netherlands.webp'); }

/* Unified spacing for article sections */
.content-article > section,
.content-article > .section,
.venues-article > section,
.venues-article > .section {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* INLINE STYLE MIGRATION END */

/* ============================================
   GLOBAL UNIFORM SPACING (SCOPED)
   ============================================ */
body.stadium-page .container,
body.stadium-page .nav-container,
body.team-page .container,
body.team-page .nav-container,
body.team-kit-page .container,
body.team-kit-page .nav-container,
body.group-page .container,
body.group-page .nav-container,
body.groups-page .container,
body.groups-page .nav-container,
body.host-cities-page .container,
body.host-cities-page .nav-container,
body.utility-page .container,
body.utility-page .nav-container,
body:not([class]) .container,
body:not([class]) .nav-container {
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

body.stadium-page .section,
body.team-page .section,
body.team-kit-page .section,
body.group-page .section,
body.groups-page .section,
body.host-cities-page .section,
body.utility-page .section,
body:not([class]) .section {
  padding: 10px;
}

/* ============================================
   GOOGLE-FRIENDLY UX BASELINE
   ============================================ */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

a,
button,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

iframe,
video {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .btn,
  .filter-btn,
  .faq-question,
  .view-all-link,
  .nav-link,
  .nav-mobile-link {
    min-height: 44px;
    align-items: center;
  }
}

/* ============================================
   NIGHT STADIUM GLOBAL PALETTE OVERRIDES
   ============================================ */
html,
body {
  background-color: var(--color-bg);
  color: var(--color-white);
}

body > section.section:nth-of-type(even),
main > section.section:nth-of-type(even) {
  background: #0d1117;
}

body > section.section:nth-of-type(odd),
main > section.section:nth-of-type(odd) {
  background: var(--color-bg);
}

h1,
h2,
h3 {
  color: var(--color-gold);
}

p,
.content-article p,
li,
.content-article li {
  color: var(--color-white);
}

.hero-script,
.countdown-label,
.news-date,
.conf-fullname,
.conf-description,
.match-header,
.match-footer,
.match-footer .venue-link,
.sources-note p,
.stream-upcoming-note,
.footer-links-column a,
.footer-description,
.footer-disclaimer,
.footer-copyright,
.news-excerpt,
.faq-answer p,
.team-status {
  color: var(--color-muted) !important;
}

.navbar {
  background-color: transparent;
  border-top: 3px solid var(--color-gold);
  border-bottom: 1px solid transparent;
}

.navbar.scrolled {
  background-color: var(--color-surface);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav-logo-main,
.nav-logo-sub,
.nav-logo-icon {
  color: var(--color-gold);
}

.nav-link,
.nav-mobile-link {
  color: var(--color-white);
}

.nav-link:hover,
.nav-mobile-link:hover {
  color: var(--color-gold);
}

.nav-link.active,
.nav-link[aria-current="page"],
.nav-mobile-link.active,
.nav-mobile-link[aria-current="page"] {
  color: var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
}

.footer,
footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.footer-links-column a {
  color: var(--color-muted);
}

.footer-links-column a:hover,
.footer-links-column a:focus-visible {
  color: var(--color-gold);
}

.btn-primary,
.btn-primary:visited,
.nav-cta,
.nav-mobile-cta {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #0A0E1A;
  font-weight: 700;
}

.btn-secondary,
.btn-secondary:visited {
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
}

.btn:hover,
.btn:focus-visible,
button:hover,
button:focus-visible {
  opacity: 0.85;
}

.chip {
  background: rgba(29, 155, 240, 0.14);
  border: 1px solid rgba(29, 155, 240, 0.4);
  color: var(--color-blue);
}

.match-status-badge,
.upcoming-badge,
.chip.upcoming {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.live-badge,
.badge-live,
.chip.live,
.match-status-badge.live,
.live-indicator {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
}

.live-badge::before,
.badge-live::before,
.chip.live::before,
.match-status-badge.live::before,
.live-indicator::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-green);
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse 1.5s infinite;
}

.stage,
.group-label,
.standings-group a,
.chip-link[href*="/groups/group-"] {
  color: var(--color-blue) !important;
}

.groups-page .host-tag,
.host-tag,
.venue-country-badge {
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  background: transparent;
}

.conf-card,
.news-card,
.standings-table,
.essential-card,
.faq-item,
.team-card,
.venue-card,
.utility-card,
.article-table-card,
.match-card,
.featured-scorecard,
.featured-panel,
.stream-sidebar {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
}

.match-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.match-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.12), 0 0 12px rgba(201, 168, 76, 0.15);
}

.match-card .vs,
.match-score,
.score,
.featured-score {
  color: var(--color-gold);
  font-weight: 900;
}

.team-name {
  color: var(--color-white);
}

.match-footer,
.match-footer .venue-link,
.venue-icon {
  color: var(--color-muted);
}

.table {
  border: 1px solid var(--color-border);
}

.table th,
.article-table-card .table th {
  background: #1F2937 !important;
  color: var(--color-gold) !important;
  border-bottom: 1px solid var(--color-border);
}

.table td {
  background: var(--color-surface);
  color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.table tr:hover td {
  background: #1a2235;
}

.table tr:has(.position-badge.position-1) td:first-child {
  border-left: 3px solid var(--color-green);
}

.position-badge.position-1 {
  box-shadow: inset 3px 0 0 var(--color-green);
}

.conf-name {
  color: var(--color-gold);
}

.conf-stat strong {
  color: var(--color-white);
  font-weight: 700;
}

#qualifiers .conf-card .conf-stat--cta .view-all-link,
.conf-stat--cta .view-all-link {
  color: var(--color-blue);
}

.hero-overlay {
  background: linear-gradient(to bottom, rgba(10, 14, 26, 0.7) 0%, rgba(10, 14, 26, 0.95) 100%);
}

.countdown-value {
  color: var(--color-gold);
  font-weight: 900;
}

.countdown-label {
  color: var(--color-muted);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
}

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

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-green);
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse 1.5s infinite;
}