/* ============================================
   VFT MODERN — Liga VFT
   Dark Sports-Editorial Design System
   Glassmorphism + Bebas Neue + Red/Black

   LOAD ORDER:
   1. bootstrap.min.css
   2. assets/css/main.css (~26000 lines, core theme)
   3. THIS FILE (css/vft-modern.css)
   4. css/swiper-bundle.min.css (loaded in menu.php AFTER this)

   Because swiper CSS loads AFTER this file,
   ALL swiper-related overrides MUST use !important.
   ============================================ */

/* --- DESIGN TOKENS --- */
:root {
  /* Brand colors */
  --vft-primary: #CC0000;
  --vft-secondary: #111111;
  --vft-base: #FFFFFF;
  --vft-accent: #FF3333;

  /* Extended palette */
  --vft-red: #CC0000;
  --vft-red-dark: #8b1515;
  --vft-red-light: #e53935;
  --vft-gold: #e8a817;
  --vft-gold-light: #f5c542;

  /* Dark surfaces */
  --vft-dark-bg: #0a0a0f;
  --vft-dark-surface: #111118;
  --vft-dark-card: #16161f;

  /* Glassmorphism tokens */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(16px);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Semantic */
  --success: #07CA6B;
  --warning: #E89558;
  --danger: #EA2143;

  /* Layout */
  --vft-radius: 16px;
  --vft-radius-sm: 10px;
  --vft-ease: cubic-bezier(0.4, 0, 0.2, 1);
}


/* --- KEYFRAMES --- */
@keyframes vftGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes vftKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@keyframes vftGlowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

@keyframes vftPulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(204, 0, 0, 0.3); }
  50% { box-shadow: 0 0 40px rgba(204, 0, 0, 0.5), 0 0 80px rgba(232, 168, 23, 0.15); }
}


/* ============================================
   GLOBAL — Dark body, dark everything
   ============================================ */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--vft-dark-bg) !important;
  color: var(--vft-base) !important;
  font-family: 'Barlow', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Subtle dot grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(204, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Hide empty particle divs */
.vft-particles { display: none !important; }

#vft-particles-canvas {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* Content layers above canvas */
header, main, section, .banner, .vft-index, .vft-section,
.rts-gallery-section, .rts-features-section,
.rts-match-highlights-section, .rts-sponsors-section,
.rts-ad-section-area, .rts-counter-up-section,
#news, .section-title-area, .footer, .float,
.vft-whatsapp {
  position: relative;
  z-index: 1;
}


/* ============================================
   HEADER — menu.php sets gradient inline
   ============================================ */
#rtsHeader .navbar-sticky {
  z-index: 9999 !important;
}

#rtsHeader.rts-header1 .sticky-menu .navbar-part .navbar-inner {
  background: linear-gradient(135deg, rgba(196, 30, 30, 0.95) 0%, rgba(26, 26, 26, 0.97) 100%) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

.rts-header1 .nav-link {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition: color 0.25s var(--vft-ease) !important;
}

.rts-header1 .nav-link:hover {
  color: var(--vft-gold) !important;
}

/* Dropdowns — Glass */
.rts-header1 .dropdown-menu {
  background: rgba(10, 10, 15, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--vft-radius) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  padding: 8px !important;
}

.rts-header1 .dropdown-item {
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: var(--vft-radius-sm) !important;
  transition: all 0.2s var(--vft-ease) !important;
  padding: 8px 16px !important;
}

.rts-header1 .dropdown-item:hover {
  background: rgba(204, 0, 0, 0.15) !important;
  color: var(--vft-accent) !important;
}

/* ===== KILL template sidebar on ALL pages ===== */
.slide-bar {
  display: none !important;
  visibility: hidden !important;
}
.anywere {
  display: none !important;
  visibility: hidden !important;
}
/* Hide template hamburger */
.hamburger-menu,
a.hamburger-menu,
a.aitem.d-block {
  display: none !important;
  visibility: hidden !important;
}

/* ===== VFT CUSTOM MOBILE MENU (all pages) ===== */
.vft-mob-btn {
  display: none;
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 100000;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  background: rgba(17,17,20,0.85);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (max-width: 1090px) {
  .vft-mob-btn { display: flex !important; visibility: visible !important; }
}
@media (min-width: 1091px) {
  .vft-mob-btn { display: none !important; }
  .vft-mob-menu { display: none !important; }
}
.vft-mob-btn span,
.vft-mob-btn span::before,
.vft-mob-btn span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}
.vft-mob-btn span { position: relative; }
.vft-mob-btn span::before,
.vft-mob-btn span::after {
  content: '';
  position: absolute;
  left: 0;
}
.vft-mob-btn span::before { top: -6px; }
.vft-mob-btn span::after { top: 6px; }
.vft-mob-btn.open span { background: transparent; }
.vft-mob-btn.open span::before { top: 0; transform: rotate(45deg); }
.vft-mob-btn.open span::after { top: 0; transform: rotate(-45deg); }

.vft-mob-menu {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: #0e0e11 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 80px 30px 40px !important;
  flex-direction: column !important;
  margin: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}
.vft-mob-menu.open { display: flex !important; }
.vft-mob-menu__logo { margin-bottom: 30px; }
.vft-mob-menu__logo img { max-width: 70px; height: auto; }
.vft-mob-menu__links { list-style: none; margin: 0; padding: 0; }
.vft-mob-menu__links li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.vft-mob-menu__links a {
  display: block;
  padding: 16px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.vft-mob-menu__links a:hover,
.vft-mob-menu__links a:active {
  color: #CC0000;
  padding-left: 8px;
}
.vft-mob-menu__links a i { margin-right: 8px; font-size: 0.9rem; }
.vft-mob-menu__social {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 20px;
}
.vft-mob-menu__social a {
  color: rgba(255,255,255,0.4);
  font-size: 1.2rem;
  text-decoration: none;
  transition: color 0.2s;
}
.vft-mob-menu__social a:hover { color: #CC0000; }
body.vft-menu-open { overflow: hidden !important; }

/* Logo glow */
.navbar-inner .logo img,
.navbar-inner .logo-sticky img {
  filter: drop-shadow(0 0 8px rgba(232, 168, 23, 0.2)) !important;
  transition: filter 0.4s var(--vft-ease) !important;
}

.navbar-inner .logo:hover img {
  filter: drop-shadow(0 0 20px rgba(232, 168, 23, 0.5)) !important;
}


/* ============================================
   BANNER / SLIDER
   ============================================ */
.banner.banner1 {
  overflow: visible !important;
}

.banner.banner1 .swiper,
.banner.banner1 .bannerSlide,
.banner.banner1 .swiper.bannerSlide {
  overflow: visible !important;
}

.banner.banner1 .swiper-slide img,
.banner.banner1 .swiper-slide img.banner-bg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  min-height: 350px !important;
  max-height: 600px !important;
  object-fit: cover !important;
}

.banner.banner1 .bannerSlide.swiper {
  min-height: 400px !important;
}

/* Gradient overlay at bottom */
.banner.banner1::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 40%;
  background: linear-gradient(to top, var(--vft-dark-bg), transparent);
  z-index: 2;
  pointer-events: none;
}

/* Ken Burns zoom */
.banner .swiper-slide img {
  transition: transform 12s ease !important;
}

.banner .swiper-slide-active img {
  animation: vftKenBurns 12s ease forwards !important;
}

@media (max-width: 768px) {
  .banner.banner1 .swiper-slide img,
  .banner.banner1 .swiper-slide img.banner-bg {
    min-height: 200px !important;
    max-height: 350px !important;
  }
  .banner.banner1 .bannerSlide.swiper {
    min-height: 250px !important;
  }
}


/* ============================================
   PAGINATION — Centered bottom pills
   ============================================ */
.banner.banner1 .slider-pagination-area {
  position: absolute !important;
  top: auto !important;
  bottom: 20px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.banner1 .slider-pagination-area .swiper-pagination,
.banner1 .slider-pagination-area .swiper-pagination.swiper-pagination-bullets,
.banner1 .slider-pagination-area .swiper-pagination.swiper-pagination-horizontal {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: auto !important;
  position: relative !important;
  top: auto !important; bottom: auto !important;
  left: auto !important; right: auto !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.banner1 .slider-pagination-area .swiper-pagination .swiper-pagination-bullet {
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  padding: 0 !important; margin: 0 !important;
  opacity: 1 !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  transition: all 0.3s var(--vft-ease) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.banner1 .slider-pagination-area .swiper-pagination .swiper-pagination-bullet::before {
  content: "" !important;
  position: absolute !important; inset: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.35) !important;
  transition: all 0.3s var(--vft-ease) !important;
}

.banner1 .slider-pagination-area .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before,
.banner1 .slider-pagination-area .swiper-pagination .swiper-pagination-bullet:hover::before {
  background: transparent !important;
}

.banner1 .slider-pagination-area .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--vft-gold) !important;
  box-shadow: 0 0 12px rgba(232, 168, 23, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.2) !important;
}

@media (max-width: 600px) {
  .banner.banner1 .slider-pagination-area {
    bottom: 10px !important;
  }
  .banner1 .slider-pagination-area .swiper-pagination .swiper-pagination-bullet {
    width: 22px !important; height: 22px !important;
  }
}


/* ============================================
   VFT INDEX — ULTRA-HIGH SPECIFICITY OVERRIDES
   These rules use .vft-index parent to beat main.css
   Every property uses !important to override the
   26,000-line main.css theme stylesheet.
   ============================================ */

/* --- Page wrapper: FORCE dark background --- */
.vft-index {
  background: #0a0a0f !important;
  background-color: #0a0a0f !important;
  position: relative !important;
  overflow: hidden !important;
  color: #FFFFFF !important;
}

/* Ambient red glow */
.vft-index::before {
  content: '' !important;
  position: absolute !important;
  top: -200px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 900px !important;
  height: 900px !important;
  background: radial-gradient(circle, rgba(204, 0, 0, 0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* --- Force dark on ALL sections inside .vft-index --- */
.vft-index section,
.vft-index .vft-section,
.vft-index .vft-section--tight {
  background: transparent !important;
  background-color: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

.vft-index .vft-section {
  padding: 80px 0 !important;
}

.vft-index .vft-section--tight {
  padding: 50px 0 !important;
}

/* --- Force container to not add white bg --- */
.vft-index .container {
  background: transparent !important;
  background-color: transparent !important;
}

/* --- Section heading — Bebas Neue, white on dark --- */
.vft-index .vft-heading-wrap {
  text-align: center !important;
  margin-bottom: 48px !important;
  background: transparent !important;
}

.vft-index .vft-heading,
.vft-index h1.vft-heading,
.vft-index .vft-section .vft-heading,
.vft-index .section-title-area .vft-heading {
  font-family: 'Bebas Neue', 'Arial Black', sans-serif !important;
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 10px !important;
  background: transparent !important;
  line-height: 1.1 !important;
}

.vft-index .vft-heading::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #CC0000, #FF3333) !important;
  border-radius: 2px !important;
}

.vft-index .vft-heading::before {
  content: none !important;
  display: none !important;
}

.vft-index .vft-subtitle,
.vft-index p.vft-subtitle {
  font-family: 'Barlow', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 1rem !important;
  text-align: center !important;
  margin-top: 16px !important;
  letter-spacing: 0.02em !important;
}


/* ============================================
   NEWS CARDS — Glassmorphism (high specificity)
   ============================================ */
.vft-index .vft-news-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 24px !important;
  background: transparent !important;
}

.vft-index .vft-news-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s, border-color 0.35s !important;
  cursor: pointer !important;
}

.vft-index .vft-news-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(204, 0, 0, 0.18), 0 8px 32px rgba(0,0,0,0.5) !important;
  border-color: rgba(204, 0, 0, 0.3) !important;
}

.vft-index .vft-news-card__img {
  position: relative !important;
  padding-top: 62% !important;
  overflow: hidden !important;
}

.vft-index .vft-news-card__img img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}

.vft-index .vft-news-card:hover .vft-news-card__img img {
  transform: scale(1.06) !important;
}

.vft-index .vft-news-card__img::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 100% !important; height: 50% !important;
  background: linear-gradient(to top, rgba(10,10,15,0.9), transparent) !important;
  pointer-events: none !important;
}

.vft-index .vft-news-card__body {
  padding: 20px 24px 24px !important;
  background: transparent !important;
}

.vft-index .vft-news-card__tag {
  display: inline-block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #CC0000 !important;
  background: rgba(204, 0, 0, 0.15) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
}

.vft-index .vft-news-card__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  transition: color 0.25s !important;
}

.vft-index .vft-news-card:hover .vft-news-card__title {
  color: #FF3333 !important;
}


/* ============================================
   CATEGORIES GRID (high specificity)
   ============================================ */
.vft-index .vft-categories-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  background: transparent !important;
}

.vft-index .vft-cat-card,
.vft-index a.vft-cat-card {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s, border-color 0.35s !important;
  display: block !important;
  text-decoration: none !important;
}

.vft-index .vft-cat-card:hover,
.vft-index a.vft-cat-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 16px 48px rgba(204, 0, 0, 0.15), 0 8px 32px rgba(0,0,0,0.5) !important;
  border-color: rgba(204, 0, 0, 0.25) !important;
}

.vft-index .vft-cat-card img {
  width: 100% !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

.vft-index .vft-cat-card:hover img {
  transform: scale(1.05) !important;
}

.vft-index .vft-cat-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(204, 0, 0, 0.08), transparent 70%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s !important;
  pointer-events: none !important;
}

.vft-index .vft-cat-card:hover::after {
  opacity: 1 !important;
}

@media (max-width: 992px) {
  .vft-index .vft-categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 576px) {
  .vft-index .vft-categories-grid { grid-template-columns: 1fr !important; }
}


/* ============================================
   VIDEO CARDS (high specificity)
   ============================================ */
.vft-index .vft-videos-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  background: transparent !important;
}

.vft-index .vft-video-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s !important;
}

.vft-index .vft-video-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 48px rgba(204, 0, 0, 0.12), 0 8px 32px rgba(0,0,0,0.5) !important;
}

.vft-index .vft-video-card__thumb {
  position: relative !important;
  padding-top: 56.25% !important;
  overflow: hidden !important;
}

.vft-index .vft-video-card__thumb img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s !important;
}

.vft-index .vft-video-card:hover .vft-video-card__thumb img {
  transform: scale(1.05) !important;
}

.vft-index .vft-video-card__thumb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.25) !important;
  transition: background 0.3s !important;
}

.vft-index .vft-video-card:hover .vft-video-card__thumb::after {
  background: rgba(0,0,0,0.15) !important;
}

/* Play button */
.vft-index .vft-video-card__play,
.vft-index .vft-video-card__play.popup-video {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 56px !important; height: 56px !important;
  background: rgba(204, 0, 0, 0.85) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  transition: background 0.3s, transform 0.3s !important;
  box-shadow: 0 4px 20px rgba(204, 0, 0, 0.4) !important;
  text-decoration: none !important;
}

.vft-index .vft-video-card__play i {
  color: white !important;
  font-size: 1.2rem !important;
  margin-left: 3px !important;
}

.vft-index .vft-video-card:hover .vft-video-card__play {
  background: #FF3333 !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}


/* ============================================
   BANNER SECTION (high specificity)
   ============================================ */
.vft-index .vft-banner-section {
  position: relative !important;
  z-index: 1 !important;
  padding: 40px 0 !important;
  background: transparent !important;
}

.vft-index .vft-banner-section img {
  width: 100% !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important;
}


/* ============================================
   SPONSORS (high specificity)
   ============================================ */
.vft-index .vft-sponsors,
.vft-index section.vft-sponsors {
  background: #111118 !important;
  background-color: #111118 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.vft-index .vft-sponsors-track {
  display: flex !important;
  gap: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  background: transparent !important;
}

.vft-index .vft-sponsor-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 80px !important;
  padding: 12px 20px !important;
  transition: opacity 0.3s, transform 0.3s !important;
  opacity: 0.6 !important;
}

.vft-index .vft-sponsor-item:hover {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

.vft-index .vft-sponsor-item img {
  max-height: 60px !important;
  max-width: 140px !important;
  object-fit: contain !important;
  filter: grayscale(100%) brightness(1.5) !important;
  transition: filter 0.3s !important;
}

.vft-index .vft-sponsor-item:hover img {
  filter: grayscale(0%) brightness(1) !important;
}

/* Legacy sponsor section (if still used in other pages) */
.rts-sponsors-section {
  background: var(--vft-dark-surface) !important;
}

.rts-sponsors-section .sponsors-logo img {
  filter: grayscale(100%) brightness(1.5) !important;
  opacity: 0.5 !important;
  transition: all 0.4s var(--vft-ease) !important;
}

.rts-sponsors-section .sponsor-single:hover .sponsors-logo img {
  filter: grayscale(0%) brightness(1) !important;
  opacity: 1 !important;
}


/* ============================================
   WHATSAPP FLOAT
   ============================================ */
.vft-whatsapp {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 56px; height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
  z-index: 100;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none !important;
}

.vft-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

.vft-whatsapp i {
  color: white;
  font-size: 1.6rem;
}

/* Legacy float button */
.float {
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35) !important;
  z-index: 100 !important;
}


/* ============================================
   FOOTER — Dark with animated gradient line
   ============================================ */
.footer.footer1 {
  background: linear-gradient(180deg, var(--vft-dark-bg) 0%, #050508 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Animated gradient line at top */
.footer.footer1::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--vft-red), var(--vft-gold), var(--vft-red), transparent) !important;
  background-size: 200% 100% !important;
  animation: vftGradientFlow 6s ease infinite !important;
}

/* Ambient glow */
.footer.footer1::before {
  content: '' !important;
  position: absolute !important;
  top: -40% !important; right: -10% !important;
  width: 50% !important; height: 60% !important;
  background: radial-gradient(ellipse, rgba(204, 0, 0, 0.05) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.footer-widget-title {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--vft-base) !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.06em !important;
}

.footer-widget-title .decorator {
  background: linear-gradient(180deg, var(--vft-red), var(--vft-gold)) !important;
}

.footer-text,
.footer p {
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer .widget-list-item,
.footer .widget-list-item span {
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer .widget-list-item a {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color 0.25s var(--vft-ease) !important;
}

.footer .widget-list-item a:hover {
  color: var(--vft-accent) !important;
}

.footer .widget-list-item i {
  color: var(--vft-primary) !important;
}

.footer .social-links .platform {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.3s var(--vft-ease) !important;
  border-radius: var(--vft-radius-sm) !important;
}

.footer .social-links .platform:hover {
  background: var(--vft-red) !important;
  border-color: var(--vft-red) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(204, 0, 0, 0.4) !important;
}

.footer-bottom-area {
  background: rgba(0, 0, 0, 0.3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.footer-bottom-area .copyright {
  color: rgba(255, 255, 255, 0.35) !important;
}

.footer-bottom-area p,
.footer-bottom-area a {
  color: rgba(255, 255, 255, 0.35) !important;
}


/* ============================================
   LEGACY SECTION TITLES (other pages)
   ============================================ */
.section-title-area .section-title,
h1.section-title {
  color: var(--vft-base) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 12px !important;
}

.section-title-area .section-title::before,
h1.section-title::before {
  content: none !important;
}

.section-title-area .section-title::after,
h1.section-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important; height: 3px !important;
  background: linear-gradient(90deg, var(--vft-primary), var(--vft-accent)) !important;
  border-radius: 2px !important;
}

.section-title-area p {
  color: rgba(255, 255, 255, 0.55) !important;
}


/* ============================================
   LEGACY SECTIONS — Dark overrides for other pages
   ============================================ */

/* Gallery / Noticias (old style) */
.rts-gallery-section .container .gallery-area {
  align-items: stretch !important;
}

.rts-gallery-section .container .gallery-area .gallery-item {
  border-radius: var(--vft-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--glass-shadow) !important;
  transition: flex 0.5s var(--vft-ease), box-shadow 0.4s var(--vft-ease) !important;
  border: 1px solid var(--glass-border) !important;
}

.rts-gallery-section .container .gallery-area .gallery-item:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(204, 0, 0, 0.2) !important;
}

.gallery-title,
.rts-gallery-section .gallery-title a {
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}

/* Features / Categorias (old style) */
.rts-features-section {
  background: transparent !important;
}

.rts-features-section .features-section-inner .item {
  border-radius: var(--vft-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--glass-shadow) !important;
  transition: all 0.4s var(--vft-ease) !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg) !important;
}

.rts-features-section .features-section-inner .item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(204, 0, 0, 0.15) !important;
  border-color: rgba(204, 0, 0, 0.25) !important;
}

/* Videos (old style) */
section.rts-match-highlights-section,
.rts-match-highlights-section.nfl {
  background: linear-gradient(135deg, #0a0a0f 0%, #1a0a1e 30%, #150a0a 60%, #0a0a0f 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.rts-match-highlights-section .section-title {
  color: #fff !important;
}

/* Ad banner */
.rts-ad-section-area {
  background: transparent !important;
}

.rts-ad-section-area .section-inner {
  border-radius: var(--vft-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Counter section */
.rts-counter-up-section {
  position: relative !important;
  overflow: hidden !important;
}

/* #news override */
#news {
  background: transparent !important;
}


/* ============================================
   MODALS — Glass header
   ============================================ */
.modal-content {
  border-radius: var(--vft-radius) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5) !important;
  background: var(--vft-dark-card) !important;
}

.modal-header {
  background: linear-gradient(135deg, rgba(204, 0, 0, 0.9) 0%, var(--vft-dark-bg) 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 24px !important;
}

.modal-title {
  color: #fff !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.04em !important;
}

.modal-header .btn-close {
  background-color: var(--vft-red) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  color: #fff !important;
  padding: 8px !important;
  font-size: 12px !important;
}

.modal-body {
  padding: 24px !important;
  background: var(--vft-dark-card) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.modal-body label {
  color: rgba(255, 255, 255, 0.75) !important;
}

.modal-body .form-control {
  border-radius: var(--vft-radius-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--vft-base) !important;
  transition: all 0.25s var(--vft-ease) !important;
}

.modal-body .form-control:focus {
  border-color: var(--vft-red) !important;
  box-shadow: 0 0 0 4px rgba(204, 0, 0, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.modal-body .form-control::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 24px !important;
  background: var(--vft-dark-card) !important;
}


/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--vft-red) 0%, var(--vft-red-dark) 100%) !important;
  border: none !important;
  border-radius: var(--vft-radius-sm) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  transition: all 0.25s var(--vft-ease) !important;
  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.25) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--vft-red-light) 0%, var(--vft-red) 100%) !important;
  box-shadow: 0 8px 24px rgba(204, 0, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}


/* ============================================
   FORM INPUTS
   ============================================ */
.form-control {
  border-radius: var(--vft-radius-sm) !important;
  transition: all 0.25s var(--vft-ease) !important;
}

.form-control:focus {
  border-color: var(--vft-red) !important;
  box-shadow: 0 0 0 4px rgba(204, 0, 0, 0.08) !important;
}


/* ============================================
   PRELOADER
   ============================================ */
#rts__preloader,
#rts__preloader .main-fader {
  background: var(--vft-dark-bg) !important;
}


/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-top-btn {
  background: linear-gradient(135deg, var(--vft-red), var(--vft-accent)) !important;
  box-shadow: 0 4px 20px rgba(204, 0, 0, 0.35) !important;
  border-radius: var(--vft-radius-sm) !important;
}


/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.vft-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--vft-ease), transform 0.7s var(--vft-ease);
}

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


/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--vft-dark-bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--vft-red), var(--vft-accent));
  border-radius: 4px;
}

::selection {
  background: var(--vft-red);
  color: #fff;
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .vft-index .vft-section { padding: 50px 0 !important; }
  .vft-index .vft-news-grid { grid-template-columns: 1fr !important; }
  .vft-index .vft-videos-grid { grid-template-columns: 1fr !important; }

  .section-title-area .section-title,
  h1.section-title {
    font-size: 22px !important;
  }

  .vft-index .vft-heading,
  .vft-index h1.vft-heading {
    font-size: 1.8rem !important;
  }
}


/* ============================================
   TOURNAMENT SUBPAGES — Global dark overrides
   These apply to ALL pages using head_torneo.php
   (torneo, fixture, posiciones, equipos, etc.)
   ============================================ */

/* Force dark body on all pages */
html body {
  background: #0a0a0f !important;
  color: #FFFFFF !important;
}

/* All sections transparent */
section,
.rts-team-section,
.rts-fixtures-section,
.rts-match-section,
.rts-blog-section,
.rts-point-table-section,
.section-gap {
  background: transparent !important;
}

/* Section titles — white Bebas Neue */
.section-title-area .section-title,
h1.section-title,
h2.section-title,
.section-title {
  color: #FFFFFF !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}

.section-title-area p,
.section-title-area .pretitle {
  color: rgba(255,255,255,0.5) !important;
}

/* ---- Tables — Card style matching posiciones ---- */

/* Table wrapper — rounded card, NO glow */
.table-area,
.table-area.table-full,
.table-full,
.table-full.inner,
.table-area.table-full.inner {
  background: #161619 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Kill drop-shadow on filter-button-group (champion section) */
.rts-champion-section .filter-button-group,
.filter-button-group {
  filter: none !important;
  -webkit-filter: none !important;
}

.table,
table {
  color: #FFFFFF !important;
  margin-bottom: 0 !important;
}

/* Header — subtle, matching posiciones */
.table thead th,
table thead th,
.table thead tr.head-tr th,
.table thead .head-tr th,
tr.head-tr th {
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.4) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.7rem !important;
  padding: 14px 16px !important;
}

/* Data cells */
.table tbody td,
table tbody td {
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.85) !important;
  vertical-align: middle !important;
  padding: 14px 16px !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem !important;
}

/* Alternating rows */
.table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.02) !important;
}

/* Hover */
.table tbody tr:hover td,
table tbody tr:hover td {
  background: rgba(204,0,0,0.08) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Override inline borders */
.table tbody tr[style],
.table tbody tr {
  border-color: rgba(255,255,255,0.04) !important;
}

/* Player names and product titles inside tables */
.table h4,
.table .player-name,
.table .product-title-area h4 {
  color: #fff !important;
  font-size: 0.9rem !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Points/stats in tables */
.table .pts-count {
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  background: rgba(204,0,0,0.15) !important;
  border: 1px solid rgba(204,0,0,0.25) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Position numbers */
.table .position-number {
  color: rgba(255,255,255,0.5) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
}

/* Section titles (Fecha 1, Fecha 2...) */
h2.product-title,
h5.product-title,
.product-title {
  color: #fff !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.04em !important;
  margin-top: 30px !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Table bordered — remove default borders */
.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: rgba(255,255,255,0.04) !important;
}

/* ---- Match/Fixture cards ---- */
.rts-fixtures-section .fixture-item,
.match-item,
.fixture-item {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.3s ease, box-shadow 0.3s !important;
}

.fixture-item:hover,
.match-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
  border-color: rgba(204,0,0,0.2) !important;
}

/* ---- Team cards ---- */
.team-item,
.rts-team-section .team-item,
.single-team {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s !important;
}

.team-item:hover,
.single-team:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
  border-color: rgba(204,0,0,0.2) !important;
}

.team-item .team-name,
.single-team .team-name,
.team-item h3,
.single-team h3 {
  color: #FFFFFF !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
}

/* ---- Breadcrumbs ---- */
.breadcrumb,
.breadcrumb-area {
  background: transparent !important;
}

.breadcrumb a,
.breadcrumb-item a {
  color: rgba(255,255,255,0.6) !important;
}

.breadcrumb .active,
.breadcrumb-item.active {
  color: #FFFFFF !important;
}

/* ---- Tabs (fixture phases, stats) ---- */
.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.nav-tabs .nav-link {
  color: rgba(255,255,255,0.6) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color 0.25s, border-color 0.25s !important;
}

.nav-tabs .nav-link:hover {
  color: rgba(255,255,255,0.9) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

.nav-tabs .nav-link.active {
  color: #FFFFFF !important;
  border-bottom-color: #CC0000 !important;
  background: transparent !important;
}

/* ---- Cards genéricos (noticias torneo, albums, etc.) ---- */
.card,
.blog-item,
.news-item {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
}

.card-body,
.card-title,
.card h5 {
  color: #FFFFFF !important;
}

.card-text,
.card p {
  color: rgba(255,255,255,0.65) !important;
}

/* ---- Pagination ---- */
.pagination .page-link {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
}

.pagination .page-item.active .page-link {
  background: #CC0000 !important;
  border-color: #CC0000 !important;
  color: #FFFFFF !important;
}

/* ---- Stats / Player list ---- */
.player-item,
.stat-item {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
}

.player-item:hover,
.stat-item:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ---- Photo gallery ---- */
.gallery-item img,
.album-item img {
  border-radius: 10px !important;
  transition: transform 0.4s ease !important;
}

.gallery-item:hover img,
.album-item:hover img {
  transform: scale(1.03) !important;
}

/* ---- Generic text elements ---- */
h1, h2, h3, h4, h5, h6 {
  color: #FFFFFF !important;
}

p {
  color: rgba(255,255,255,0.7) !important;
}

a {
  color: rgba(255,255,255,0.8) !important;
}

a:hover {
  color: #FF3333 !important;
}

label {
  color: rgba(255,255,255,0.7) !important;
}

/* ---- Alert overrides for dark ---- */
.alert-success {
  background: rgba(7,202,107,0.15) !important;
  border-color: rgba(7,202,107,0.3) !important;
  color: #07CA6B !important;
}

.alert-danger {
  background: rgba(234,33,67,0.15) !important;
  border-color: rgba(234,33,67,0.3) !important;
  color: #EA2143 !important;
}

.alert-info {
  background: rgba(23,162,184,0.15) !important;
  border-color: rgba(23,162,184,0.3) !important;
  color: #17a2b8 !important;
}

/* ---- Accordion/Collapse ---- */
.accordion-item {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.accordion-button {
  background: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
}

.accordion-button:not(.collapsed) {
  background: rgba(204,0,0,0.15) !important;
  color: #FFFFFF !important;
}

.accordion-body {
  background: rgba(255,255,255,0.02) !important;
  color: rgba(255,255,255,0.75) !important;
}


/* ============================================
   FIXTURE PAGE — Dark glass match cards
   ============================================ */

/* Page wrapper */
.rts-product-details-section,
.rts-product-details-section2 {
  background: transparent !important;
  padding-top: 40px !important;
}

.product-full-details-area,
.product-full-details-area2 {
  background: transparent !important;
}

/* Inner page banner — Dark VFT style */
.banner.banner1 {
  background: #0e0e11 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.inner-page-banner,
.inner-page-banner.banner-bg {
  background-image: none !important;
  background: linear-gradient(135deg, rgba(204,0,0,0.15) 0%, rgba(204,0,0,0.05) 30%, #111114 60%, #0e0e11 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  padding-top: 220px !important;
  padding-bottom: 60px !important;
  min-height: auto !important;
}
/* Diagonal texture on banner */
.inner-page-banner.banner-bg::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 60px,
    rgba(255,255,255,0.02) 60px, rgba(255,255,255,0.02) 61px
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
}
/* Bottom fade */
.inner-page-banner.banner-bg::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 100px !important;
  background: linear-gradient(to top, #0e0e11, transparent) !important;
  pointer-events: none !important;
  display: block !important;
  z-index: 1 !important;
}
.inner-page-banner .banner-content {
  position: relative;
  z-index: 2;
}
.inner-page-banner .banner-heading,
.banner-heading {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 4rem !important;
  color: #fff !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.inner-page-banner .banner-heading::after {
  content: '' !important;
  display: block !important;
  width: 60px !important;
  height: 4px !important;
  background: #CC0000 !important;
  border-radius: 2px !important;
  margin-top: 16px !important;
}
/* Red glow orb behind title */
.inner-page-banner .banner-content::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(204,0,0,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 768px) {
  .inner-page-banner.banner-bg { padding-top: 120px !important; padding-bottom: 20px !important; }
  .inner-page-banner .banner-heading, .banner-heading { font-size: 2.2rem !important; }
}
@media (max-width: 480px) {
  .inner-page-banner.banner-bg { padding-top: 100px !important; padding-bottom: 15px !important; }
  .inner-page-banner .banner-heading, .banner-heading { font-size: 1.8rem !important; }
}

.page-path a,
.page-path li {
  color: rgba(255,255,255,0.6) !important;
}

/* Filter tabs (Fase 1, Fase 2...) */
.details-filter-bar {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 30px !important;
  padding: 0 !important;
  background: transparent !important;
}

.details-filter-bar .filter-btn,
.details-filter-bar button {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.7) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.details-filter-bar .filter-btn:hover {
  background: rgba(204,0,0,0.15) !important;
  border-color: rgba(204,0,0,0.3) !important;
  color: #fff !important;
}

.details-filter-bar .filter-btn.active {
  background: linear-gradient(135deg, #CC0000, #FF3333) !important;
  border-color: #CC0000 !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(204,0,0,0.3) !important;
}

/* Fecha headers */
.blog-point-text,
h3.blog-point-text {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.5rem !important;
  color: #FFFFFF !important;
  letter-spacing: 0.04em !important;
  margin-top: 30px !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Match cards — glass dark style */
.table-area .table-inner,
li.table-inner {
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: transform 0.3s ease, border-color 0.3s !important;
  position: relative !important;
}

.table-area .table-inner:hover,
li.table-inner:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(204,0,0,0.25) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}

/* Remove old separator line */
.table-area .table-inner::before {
  display: none !important;
}

/* Team names in match card */
.table-area .table-inner .team-name .mode,
.table-area .table-inner .team-name p.mode {
  color: #CC0000 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
}

.table-area .table-inner .team-name .name,
.table-area .table-inner .team-name h3.name {
  color: rgba(255,255,255,0.5) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
}

.table-area .table-inner .team-name .time,
.table-area .table-inner .team-name p.time {
  background: rgba(204,0,0,0.15) !important;
  color: #FF3333 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  width: auto !important;
  display: inline-block !important;
}

/* Team logos and names */
.table-area .table-inner .team-logo-area a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.table-area .table-inner .team-logo-area .team {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  margin-top: 6px !important;
}

.table-area .table-inner .team-logo-area img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)) !important;
}

/* VS circle */
.table-area .table-inner .team-logo-area .versus {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #FFFFFF !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1rem !important;
}

/* Status badges (Finalizado / Por Jugar) */
.table-area .button-area a.btn-1[style*="green"],
.button-area a[style*="green"] {
  background: rgba(7,202,107,0.15) !important;
  color: #07CA6B !important;
  border: 1px solid rgba(7,202,107,0.3) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
}

.table-area .button-area a.btn-1[style*="red"],
.button-area a[style*="red"] {
  background: rgba(204,0,0,0.15) !important;
  color: #FF3333 !important;
  border: 1px solid rgba(204,0,0,0.3) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
}

/* Table list (remove default bullets) */
ul.table-area,
ul.table-full {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Full details panel */
.full-details,
.full-details-inner {
  background: transparent !important;
  color: #FFFFFF !important;
}

/* Coupon/empty state area */
.coupon-area {
  background: transparent !important;
}

.coupon-ask {
  background: rgba(232,168,23,0.1) !important;
  border: 1px solid rgba(232,168,23,0.2) !important;
  border-radius: 10px !important;
}

.coupon-ask span {
  color: rgba(255,255,255,0.7) !important;
}

/* Product items (used in some tournament pages) */
.product-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}

/* ============================================
   POSICIONES PAGE — Dark table
   ============================================ */
.rts-point-table-section {
  background: transparent !important;
}

/* Posiciones table — full redesign */
.table-area .table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
  background: transparent !important;
}

/* Header row */
.table-area .table .head-tr th {
  background: transparent !important;
  color: rgba(255,255,255,0.4) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border: none !important;
  padding: 12px 16px !important;
  white-space: nowrap !important;
}

/* Data rows */
.table-area .table tbody tr:not(.head-tr) {
  background: rgba(255,255,255,0.05) !important;
  transition: background 0.2s ease !important;
}

.table-area .table tbody tr:not(.head-tr):nth-child(odd) {
  background: rgba(255,255,255,0.08) !important;
}

.table-area .table tbody tr:not(.head-tr):hover {
  background: rgba(255,255,255,0.12) !important;
}

.table-area .table tbody tr:not(.head-tr) td {
  border: none !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Position number */
.table-area .table .position-number {
  color: rgba(255,255,255,0.6) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

/* Team name */
.table-area .table .player-name {
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
}

/* Points — highlighted */
.table-area .table .pts-count {
  color: #e8a817 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

/* Stat numbers */
.table-area .table .match-count,
.table-area .table .win-count,
.table-area .table .draw-count,
.table-area .table .lose-count,
.table-area .table .due-count {
  color: rgba(255,255,255,0.7) !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
}

/* Group titles */
.rts-point-table-section .title-area .title {
  color: #fff !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 16px !important;
}

/* ============================================
   VFT-POS-TABLE — Shared grid table (posiciones, estadísticas, tribunal)
   ============================================ */
.vft-pos-table {
  background: #161619;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 24px;
}
.vft-pos-header {
  display: grid;
  grid-template-columns: 60px 1fr 70px repeat(7, 48px);
  align-items: center;
  padding: 14px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vft-pos-header .vft-pos-col {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  text-align: center;
}
.vft-pos-header .vft-pos-col--team {
  text-align: left;
  padding-left: 8px;
}
.vft-pos-row {
  display: grid;
  grid-template-columns: 60px 1fr 70px repeat(7, 48px);
  align-items: center;
  padding: 0 20px;
  min-height: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s ease;
}
.vft-pos-row:last-child { border-bottom: none; }
.vft-pos-row--even { background: rgba(255,255,255,0.02); }
.vft-pos-row:hover { background: rgba(204,0,0,0.08); }
.vft-pos-row--classified { border-left: 3px solid #27ae60; }
.vft-pos-col--rank { text-align: center; }
.vft-pos-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
}
.vft-pos-rank--top {
  background: rgba(204,0,0,0.2);
  color: #fff;
  border: 1px solid rgba(204,0,0,0.3);
}
.vft-pos-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}
.vft-pos-badge--gold { background: #FFD700; color: #000; }
.vft-pos-badge--silver { background: #C0C0C0; color: #000; }
.vft-pos-badge--bronze { background: #cc6633; color: #fff; }
.vft-pos-col--team { text-align: left; padding-left: 8px; }
.vft-pos-team {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vft-pos-team__logo {
  width: 32px; height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  padding: 2px;
}
.vft-pos-team__name {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
}
.vft-pos-classified-icon {
  color: #27ae60;
  font-size: 0.75rem;
  margin-left: 4px;
}
.vft-pos-col--pts { text-align: center; }
.vft-pos-pts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px; height: 32px;
  background: rgba(204,0,0,0.15);
  border: 1px solid rgba(204,0,0,0.25);
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.vft-pos-col--stat {
  text-align: center;
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}
.vft-pos-col--dg { font-weight: 600; }
.vft-pos-penalties {
  padding: 12px 20px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.06);
  line-height: 1.6;
}
.vft-pos-penalties b { color: rgba(255,255,255,0.7); }

/* VFT-POS responsive */
@media (max-width: 768px) {
  .vft-pos-header, .vft-pos-row {
    padding: 0 10px;
  }
  .vft-pos-header { padding: 10px 10px; }
  .vft-pos-header .vft-pos-col { font-size: 0.6rem; }
  .vft-pos-team__logo { width: 24px; height: 24px; }
  .vft-pos-team__name { font-size: 0.8rem; }
  .vft-pos-team { gap: 8px; }
  .vft-pos-col--stat { font-size: 0.75rem; }
  .vft-pos-pts { min-width: 30px; height: 26px; font-size: 0.85rem; }
  .vft-pos-rank { width: 24px; height: 24px; font-size: 0.75rem; }
  .vft-pos-row { min-height: 46px; }
}
@media (max-width: 480px) {
  .vft-pos-header, .vft-pos-row {
    padding: 0 6px;
  }
  .vft-pos-header { padding: 8px 6px; }
  .vft-pos-header .vft-pos-col { font-size: 0.5rem; letter-spacing: 0.05em; }
  .vft-pos-team__logo { width: 20px; height: 20px; }
  .vft-pos-team__name { font-size: 0.72rem; }
  .vft-pos-col--stat { font-size: 0.65rem; }
  .vft-pos-pts { min-width: 26px; height: 22px; font-size: 0.75rem; border-radius: 5px; }
  .vft-pos-rank { width: 20px; height: 20px; font-size: 0.65rem; border-radius: 5px; }
}

/* ============================================
   EQUIPOS PAGE — Dark team cards
   ============================================ */
.rts-team-section {
  background: transparent !important;
}

/* Team grid items */
.product-item .product-thumb img {
  border-radius: 8px !important;
  transition: transform 0.4s ease !important;
}

.product-item:hover .product-thumb img {
  transform: scale(1.05) !important;
}

.product-item .product-name,
.product-item h3 {
  color: #FFFFFF !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
}

/* ============================================
   ESTADISTICAS PAGE — Dark stats
   ============================================ */

/* DataTables override */
.dataTables_wrapper {
  color: rgba(255,255,255,0.7) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_info {
  color: rgba(255,255,255,0.4) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #CC0000 !important;
  border-color: #CC0000 !important;
  color: #fff !important;
}

/* ============================================
   ALL SUBPAGES — Sticky header dark override
   ============================================ */
#rtsHeader.rts-header1.header-four .sticky-menu,
#rtsHeader.rts-header1.header-four .navbar-sticky.sticky-menu {
  background: rgba(10,10,15,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

#rtsHeader.rts-header1.header-four .sticky-menu .navbar-part,
#rtsHeader.rts-header1.header-four .sticky-menu .navbar-part .navbar-inner {
  background: transparent !important;
  background-image: none !important;
}