/************* Headlines Start *************/

/* Label Text Effect */
.label-effect {
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.025rem;
  font-style: normal;
  text-transform: uppercase;
  color: #ffffff;
  border-radius: 18px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  padding: 0.6rem 1rem;
  border-style: inset;
  border-width: 0.2rem;
  border-color: #111111;
}
/* label Text Effect */

/* Label Colors */

.skyline {
  background: #1488CC;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2B32B2, #1488CC);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2B32B2, #1488CC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.orangeTube {
  background: #ffe259;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ffa751, #ffe259);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #212121;
}

.redTube {
  background: #e52d27;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #b31217, #e52d27);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #b31217, #e52d27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.easyGreen {
  background: #DCE35B;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #45B649, #DCE35B);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #45B649, #DCE35B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.pinkTube {
  background: #f953c6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #b91d73, #f953c6);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #b91d73, #f953c6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.coolSky {
  background: #2980B9;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #2B32B2;
}

/* SLIDE 1 */

#slide-1 {
  width: 100%;
  min-height: 500px;
  /* min-width: 1296px; */
}

#slide-1 img.logo1 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
}

#slide-1 img.logo2 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
}

#slide-1 img.sportsLeague {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-1 .vs {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-1 h5.gameDateTime {
  background: #ffffff;
  background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.8));
  font-size: 1rem;
  font-weight: bolder;
  text-align: center;
}

#slide-1 img.tvBrand {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  right: 20px;
  bottom: 20px;
  height: 30px;
}




@media (max-width: 600px) {

  #slide-1 img.sportsLeague {
    margin: 30px 0px;
    width: 80px;
  }

  #slide-1 img.logo1 {
    margin-bottom: 30px;
    width: 80px;
  }
  
  #slide-1 img.logo2 {
    margin-bottom: 30px;
    width: 80px;
  }

  #slide-1 .vs {
    width: 80px;
  }

  #slide-1 h5.gameDateTime {
    margin-top: 30px;
  }

  #slide-1 img.tvBrand {
   filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
   right: 20px;
   bottom: 10px;
   height: 30px;
}

}

/* SLIDE 2 */

#slide-2 {
  width: 100%;
  min-height: 500px;
  /* min-width: 1296px; */
}

#slide-2 img.logo1 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  max-width: 140px;
  max-height: 140px;
}

#slide-2 img.logo2 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  max-width: 140px;
  max-height: 140px;
}

#slide-2 img.sportsLeague {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-2 .vs {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-2 h5.gameDateTime {
  background: #ffffff;
  background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.8));
  font-size: 1rem;
  font-weight: bolder;
  text-align: center;
}


#slide-2 img.tvBrand {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  right: 20px;
  bottom: 50px;
  height: 30px;
}



@media (max-width: 600px) {

  #slide-2 img.sportsLeague {
    margin: 30px 0px;
    width: 80px;
  }

  #slide-2 img.logo1 {
    margin-bottom: 30px;
    width: 80px;
  }
  
  #slide-2 img.logo2 {
    margin-bottom: 30px;
    width: 80px;
  }

  #slide-2 .vs {
    width: 80px;
  }

  #slide-2 h5.gameDateTime {
    margin-top: 30px;
    bottom: 10px;
  }

  #slide-2 img.tvBrand {
   filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
   right: 20px;
   bottom: 50px;
   height: 30px;
}


}

/* SLIDE 3 */

#slide-3 {
  width: 100%;
  min-height: 500px;
  /* min-width: 1296px; */
}

#slide-3 img.logo1 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  height: 120px;
}

#slide-3 img.logo2 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  height: 120px;
}

#slide-3 img.sportsLeague {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-3 .vs {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-3 h5.gameDateTime {
  background: #ffffff;
  background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.8));
  font-size: 1rem;
  font-weight: bolder;
  text-align: center;
}

#slide-3 img.tvBrand {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  right: 20px;
  bottom: 150px;
}

@media (max-width: 575.98px) {

  #slide-3 img.sportsLeague {
    margin: 30px 0px;
    width: 80px;
  }

  #slide-3 img.logo1 {
    margin-bottom: 30px;
    width: 80px;
  }
  
  #slide-3 img.logo2 {
    margin-bottom: 30px;
    width: 80px;
  }

  #slide-3 .vs {
    width: 80px;
  }

  #slide-3 h5.gameDateTime {
    margin-top: 30px;
  }

}

/* SLIDE 4 */

#slide-4 {
  width: 100%;
  min-height: 500px;
  /* min-width: 1296px; */
}

#slide-4 img.logo1 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  height: 120px;
}

#slide-4 img.logo2 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  height: 120px;
}

#slide-4 img.sportsLeague {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-4 .vs {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-4 h5.gameDateTime {
  background: #ffffff;
  background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.8));
  font-size: 1rem;
  font-weight: bolder;
  text-align: center;
}

#slide-4 img.tvBrand {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  right: 20px;
  bottom: 150px;
}

@media (max-width: 575.98px) {

  #slide-4 img.sportsLeague {
    margin: 30px 0px;
    width: 80px;
  }

  #slide-4 img.logo1 {
    margin-bottom: 30px;
    width: 80px;
  }
  
  #slide-4 img.logo2 {
    margin-bottom: 30px;
    width: 80px;
  }

  #slide-4 .vs {
    width: 80px;
  }

  #slide-4 h5.gameDateTime {
    margin-top: 30px;
  }

}

/* SLIDE 5 */

#slide-5 {
  width: 100%;
  min-height: 500px;
  /* min-width: 1296px; */
}

#slide-5 img.logo1 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  height: 120px;
}

#slide-5 img.logo2 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  height: 120px;
}

#slide-5 img.sportsLeague {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-5 .vs {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-5 h5.gameDateTime {
  background: #ffffff;
  background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.8));
  font-size: 1rem;
  font-weight: bolder;
  text-align: center;
}

#slide-5 img.tvBrand {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  right: 20px;
  bottom: 150px;
}

@media (max-width: 575.98px) {

  #slide-5 img.sportsLeague {
    margin: 30px 0px;
    width: 80px;
  }

  #slide-5 img.logo1 {
    margin-bottom: 30px;
    width: 80px;
  }
  
  #slide-5 img.logo2 {
    margin-bottom: 30px;
    width: 80px;
  }

  #slide-5 .vs {
    width: 80px;
  }

  #slide-5 h5.gameDateTime {
    margin-top: 30px;
  }

}

/* SLIDE 6 */

#slide-6 {
  width: 100%;
  min-height: 500px;
  /* min-width: 1296px; */
}

#slide-6 img.logo1 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  max-width: 140px;
  max-height: 140px;
}

#slide-6 img.logo2 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  max-width: 140px;
  max-height: 140px;
}

#slide-6 img.sportsLeague {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-6 .vs {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-6 h5.gameDateTime {
  background: #ffffff;
  background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.8));
  font-size: 1rem;
  font-weight: bolder;
  text-align: center;
}

#slide-6 img.tvBrand {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  right: 20px;
  bottom: 150px;
}

@media (max-width: 575.98px) {

  #slide-6 img.sportsLeague {
    margin: 30px 0px;
    width: 80px;
  }

  #slide-6 img.logo1 {
    margin-bottom: 30px;
    width: 80px;
  }
  
  #slide-6 img.logo2 {
    margin-bottom: 30px;
    width: 80px;
  }

  #slide-6 .vs {
    width: 80px;
  }

  #slide-6 h5.gameDateTime {
    margin-top: 30px;
  }

}

/* SLIDE 7 */

#slide-7 {
  width: 100%;
  min-height: 500px;
  /* min-width: 1296px; */
}

#slide-7 img.logo1 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 75px;
  height: 75px;
}

#slide-7 img.logo2 {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 75px;
  height: 75px;
}

#slide-7 img.sportsLeague {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-7 .vs {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  width: 120px;
}

#slide-7 h5.gameDateTime {
  background: #ffffff;
  background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.8));
  font-size: 1rem;
  font-weight: bolder;
  text-align: center;
}

#slide-7 img.tvBrand {
  filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.4));
  right: 20px;
  bottom: 150px;
}

@media (max-width: 575.98px) {

  #slide-7 img.sportsLeague {
    margin: 30px 0px;
    width: 80px;
  }

  #slide-7 img.logo1 {
    margin-bottom: 30px;
    width: 80px;
  }
  
  #slide-7 img.logo2 {
    margin-bottom: 30px;
    width: 80px;
  }

  #slide-7 .vs {
    width: 80px;
  }

  #slide-7 h5.gameDateTime {
    margin-top: 30px;
  }

}

/************* Headlines End *************/

@media (max-width: 575.98px) {
  .logo {
    max-height: 24px;
  }

  .swiper img.bgdHeadline {
    max-width: 100%;
    min-height: 300px;
  }

.label-effect {
  font-size: 0.9rem;
  letter-spacing: 0.015rem;
}
}


/************* Featured-event readability layer — Option B (scrim + plates) *************/
/* Keeps league / team / TV logos and the date-venue line legible over busy photo
   backgrounds: a dark scrim is laid over each slide photo, and every logo + the
   date/venue line sits on its own translucent "plate". Applies to all slide variants
   (#slide-1..7) with no change to slidetemplates.js or the JSON feed. */

/* (1) Scrim over the photo — darker at the top (league) and bottom (date/TV) bands.
   Slide content is lifted above it via z-index. */
/* foreground content sits above the static background layers */
.swiper-slide { position: relative; }
.swiper-slide > * { position: relative; z-index: 2; }
.swiper-wrapper { position: relative; z-index: 2; }

/* Static background layers behind the sliding content. Only the active image is
   shown; layers cross-fade when the image changes and stay put (no-op) when
   adjacent slides share the same image -- so a repeated background never slides,
   only the foreground tiles/text do. */
.slider-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  background-color: #000;
  background-image: radial-gradient(120% 130% at 50% 0%, #2b4d85 0%, #0c1119 62%);  /* fallback when a game has no bg image */
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.slider-bg-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.46) 0%,
      rgba(0, 0, 0, 0.16) 30%,
      rgba(0, 0, 0, 0.15) 62%,
      rgba(0, 0, 0, 0.58) 100%);
}

/* (2a) League logo -> light "well" so dark / transparent logos read clearly */
.swiper-slide img.sportsLeague {
  background: radial-gradient(circle at 50% 38%, #ffffff, #e9edf4);
  border-radius: 12px;
  padding: 9px 15px;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* (2b) Team logos -> rounded-square light "wells" (match the league / TV / bubble theme) */
.swiper-slide img.logo1,
.swiper-slide img.logo2 {
  object-fit: contain;
  background: radial-gradient(circle at 50% 38%, #ffffff, #e9edf4);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* keep the team-logo boxes square (rounded-square tiles) */
@media (min-width: 576px) {
  #slide-1 img.logo1, #slide-1 img.logo2, #slide-2 img.logo1, #slide-2 img.logo2,
  #slide-3 img.logo1, #slide-3 img.logo2, #slide-4 img.logo1, #slide-4 img.logo2,
  #slide-5 img.logo1, #slide-5 img.logo2, #slide-6 img.logo1, #slide-6 img.logo2,
  #slide-7 img.logo1, #slide-7 img.logo2 { width: 130px; height: 130px; }   /* standardized team coins */
}
@media (max-width: 575.98px) {
  .swiper-slide img.logo1,
  .swiper-slide img.logo2 { width: 80px; height: 80px; padding: 8px; }
  .swiper-slide img.sportsLeague { padding: 7px 11px; }
  /* phones: pin the date/venue + TV chip to the bottom of the slide (not under the teams) */
  .swiper-slide .gameInfo { position: absolute; left: 0; right: 0; bottom: 14px; margin-bottom: 0; }
  .swiper-slide > .row { min-height: 100%; }   /* row-split templates: let the abs date row reach the slide bottom */
}

/* (2c) Date / Time + Venue -> solid white text on a dark pill
   (overrides the transparent gradient-clipped text set per slide) */
#slide-1 h5.gameDateTime, #slide-2 h5.gameDateTime, #slide-3 h5.gameDateTime,
#slide-4 h5.gameDateTime, #slide-5 h5.gameDateTime, #slide-6 h5.gameDateTime,
#slide-7 h5.gameDateTime {
  display: inline-block;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: rgba(8, 12, 20, 0.62);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 0.5rem 1.1rem;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  filter: none;
}

/* (2d) TV / broadcaster mark -> light "well" so dark / transparent logos read clearly */
.swiper-slide img.tvBrand {
  background: radial-gradient(circle at 50% 38%, #ffffff, #e9edf4);
  border-radius: 10px;
  padding: 6px 11px;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/************* Featured-event readability layer — end *************/


/************* League filter bubbles + slider controls *************/
/* Square league-selection bubbles above the slider (built by featured-slider.js),
   plus the Swiper navigation arrows and the clickable pagination index. */

/* --- league filter bar --- */
.league-filter{
  display:flex; flex-wrap:nowrap; justify-content:safe center; align-items:flex-start;
  gap:12px; padding:4px 14px 12px; margin:0;
  overflow-x:auto; scrollbar-width:thin; scrollbar-color:#343a47 transparent;
  -webkit-overflow-scrolling:touch; user-select:none; -webkit-user-select:none;
}
.league-filter::-webkit-scrollbar{ height:6px; }
.league-filter::-webkit-scrollbar-thumb{ background:#343a47; border-radius:99px; }
.league-filter::-webkit-scrollbar-track{ background:transparent; }
.league-filter img{ -webkit-user-drag:none; user-drag:none; }

.lf-bub{
  background:none; border:0; cursor:pointer; padding:4px 2px; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:6px; width:74px;
  opacity:.5; transition:opacity .2s, transform .2s;
}
.lf-bub:hover{ opacity:1; transform:translateY(-2px); }
.lf-bub.active{ opacity:1; }
.lf-ic{
  width:54px; height:54px; border-radius:14px;          /* square (rounded) bubble */
  display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 50% 35%, #ffffff, #e9edf4);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.06);
  border:2px solid transparent; transition:border-color .2s, box-shadow .2s;
  font-family:"Oswald",sans-serif; font-weight:700; font-size:15px; color:#0b0c0f;
}
.lf-ic img{ max-width:64%; max-height:64%; object-fit:contain; }
.lf-ic.lf-all{ font-size:20px; }
.lf-bub.active .lf-ic{
  border-color:#ffc107;
  box-shadow:0 0 0 3px rgba(255,193,7,.30), 0 6px 16px -6px rgba(0,0,0,.7);
}
.lf-lbl{
  font-family:"Oswald",sans-serif; font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; color:#aeb6c4; text-align:center; line-height:1.1;
  max-width:74px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lf-bub.active .lf-lbl{ color:#fff; }

/* --- Swiper navigation arrows --- */
.swiper .swiper-button-prev,
.swiper .swiper-button-next{
  width:44px; height:44px; color:#fff; border-radius:50%;
  background:rgba(10,14,22,.55); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.7);
  transition:background .2s, color .2s, opacity .2s;
}
.swiper .swiper-button-prev{ left:14px; }
.swiper .swiper-button-next{ right:14px; }
.swiper .swiper-button-prev:hover,
.swiper .swiper-button-next:hover{ color:#ffc107; background:rgba(10,14,22,.85); }
.swiper .swiper-button-prev:after,
.swiper .swiper-button-next:after{ font-size:18px; font-weight:700; }

/* --- clickable pagination index (sits below the slider window) --- */
#slider-pagination{
  position: static;            /* flow below the slider instead of overlaying it */
  width: 100%;
  margin-top: 12px;
  text-align: center;
}
#slider-pagination .swiper-pagination-bullet{
  background:#9fb0c3; opacity:.55; width:9px; height:9px; margin:0 5px;
  transition:opacity .2s, width .2s, background .2s;
}
#slider-pagination .swiper-pagination-bullet:hover{ opacity:.9; }
#slider-pagination .swiper-pagination-bullet-active{
  opacity:1; background:#ffc107; width:26px; border-radius:5px;
}

@media (max-width:600px){
  .league-filter{ gap:8px; }
  .lf-bub{ width:62px; }
  .lf-ic{ width:46px; height:46px; border-radius:12px; }
  .lf-lbl{ font-size:10px; }
  .swiper .swiper-button-prev,
  .swiper .swiper-button-next{ width:38px; height:38px; }
  .swiper .swiper-button-prev{ left:8px; } .swiper .swiper-button-next{ right:8px; }
  .swiper .swiper-button-prev:after,
  .swiper .swiper-button-next:after{ font-size:15px; }
}
/************* League filter + slider controls — end *************/


/************* Icon size standardization + alignment *************/
/* One consistent size for the league logo, team coins, VS badge and TV mark
   across every slide template, the logo row vertically centred, and the
   date/venue pill lifted clear of the pagination index bubbles. */

/* league logo — bounded HEIGHT (width follows) so a tall logo (e.g. World Cup) can't change the slide height */
#slide-1 img.sportsLeague, #slide-2 img.sportsLeague, #slide-3 img.sportsLeague,
#slide-4 img.sportsLeague, #slide-5 img.sportsLeague, #slide-6 img.sportsLeague,
#slide-7 img.sportsLeague { height: 120px; width: auto; max-width: 200px; object-fit: contain; }

/* VS badge */
#slide-1 .vs, #slide-2 .vs, #slide-3 .vs, #slide-4 .vs,
#slide-5 .vs, #slide-6 .vs, #slide-7 .vs { width: 84px; }

/* TV / broadcaster mark — inline in the date row, matched to the DT/Venue box height */
#slide-1 img.tvBrand, #slide-2 img.tvBrand, #slide-3 img.tvBrand,
#slide-4 img.tvBrand, #slide-5 img.tvBrand, #slide-6 img.tvBrand,
#slide-7 img.tvBrand { height: auto; align-self: stretch; max-width: 132px; max-height: 64px; object-fit: contain; }

/* vertically centre the logo / name rows (both use justify-content-evenly) */
.swiper-slide .d-flex.justify-content-evenly { align-items: center; }
/* invisible spacer mirroring the VS column so each name pill sits centred under its team logo */
.swiper-slide .vsSpacer { width: 84px; flex: 0 0 auto; }

/* date row: centre the DT/Venue pill + TV chip as a group (same height), lifted clear of the index */
.swiper-slide .gameInfo { gap: 12px; margin-bottom: 30px; }
/* keep the DT/Venue pill at its content height and vertically centred in the row,
   so its text stays centred even when the TV chip is taller */
.swiper-slide .gameInfo .gameDateTime { margin: 0; align-self: center; white-space: nowrap; flex-shrink: 0; }
/* phones: stack the date/venue over the TV and let the venue wrap, so the bottom group fits the narrow width */
@media (max-width: 575.98px) {
  .swiper-slide .gameInfo { flex-direction: column; align-items: center; gap: 6px; }
  .swiper-slide .gameInfo .gameDateTime { white-space: normal; flex-shrink: 1; max-width: 94%; }
  .swiper-slide .gameInfo .tvBrand { margin: 0 auto; }   /* centre the TV below the date (auto margins beat the desktop align-self) */
}
/************* Icon standardization — end *************/


/************* Lock slider window size *************/
/* Fixed slide height + cover backgrounds, so every league/template renders the
   exact same slider window regardless of content or source-image dimensions. */
.swiper-slide {
  height: 550px;   /* fits the tallest content (~529); pagination index now sits below the slider */
}
/************* Lock slider window size — end *************/