/* ========================================================================
   AFW MATCHES PAGES
   templates:
   - matches
   - matches-live
   - matches-finished
   - matches-tomorrow
   - matches-yesterday
   - matches-country
   ======================================================================== */

/* ========================================================================
   Layout
   ======================================================================== */

.afw-matchesLayout{
  display:flex;
  gap:24px;
  align-items:flex-start;
  width:100%;
  max-width:100%;
  min-width:0;
}

.afw-matchesSidebar{
  width:280px;
  min-width:280px;
  flex:0 0 280px;
  max-width:100%;
}

.afw-matchesLayout__main{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
}

/* ========================================================================
   Mobile sidebar
   ======================================================================== */

.afw-matchesSidebarToggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:10px 14px;
  margin:0 0 14px 0;
  border:0;
  background:rgba(255,255,255,.08);
  color:var(--color-content-heading);
  font-family:var(--h1-font-family);
  font-size:14px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  max-width:100%;
}

.afw-matchesSidebarToggle__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}

.afw-matchesSidebarToggle__text{
  display:inline-block;
  line-height:1;
}

.afw-matchesSidebarOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
  z-index:9998;
}

.afw-matchesSidebarOverlay[hidden]{
  display:block;
}

.afw-matchesSidebarOverlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.afw-matchesSidebar__mobileHead{
  display:none;
}

.afw-matchesSidebar__mobileTitle{
  font-family:var(--h1-font-family);
  font-size:18px;
  line-height:1.2;
  font-weight:600;
  color:var(--color-content-heading);
}

.afw-matchesSidebar__mobileClose{
  width:40px;
  height:40px;
  min-width:40px;
  border:0;
  background:rgba(255,255,255,.08);
  color:var(--color-content-heading);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.afw-matchesSidebar__scroll{
  min-height:0;
  max-width:100%;
}

/* ========================================================================
   Sidebar blocks
   ======================================================================== */

.afw-sideBlock{
  margin-bottom:18px;
  padding:5px;
  background:rgba(255,255,255,.04);
  max-width:100%;
  min-width:0;
}

.afw-sideBlock__title{
  margin:10px 0 10px 10px;
  font-size:14px;
  line-height:1.2;
  font-weight:600;
  opacity:.9;
  min-width:0;
}

.afw-sideGroup{
  margin-top:12px;
}

.afw-sideGroup__title{
  margin:10px 0 8px;
  font-size:13px;
  line-height:1.2;
  opacity:.75;
}

.afw-sideList{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  max-width:100%;
}

.afw-sideList--compact{
  gap:4px;
}

.afw-sideItemRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  max-width:100%;
}

.afw-sideItemRow > a.afw-sideItem,
.afw-sideItemRow > .afw-sideItem{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
}

.afw-sideItemRow--noPin .afw-sideItem{
  width:100%;
}

.afw-sideItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 8px;
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,.02);
  min-width:0;
  max-width:100%;
}

.afw-sideItem:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
}

.afw-sideItem.is-active,
.afw-sideItemRow.is-active > .afw-sideItem{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}

.afw-sideItem__flag{
  display: block;
    min-width: 26px;
    min-height: 16px;
    max-height: 26px;
    object-fit: contain;
    border-radius: 2px;
    flex: 0 0 28px;
}

.afw-sideItem__text{
  min-width:0;
  flex:1 1 auto;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
  font-size:12px;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.afw-sideCount{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
  padding-left:8px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.afw-sideCount__live{
  color:#e53935;
}

.afw-sideCount__sep,
.afw-sideCount__total{
  color:rgba(255,255,255,.78);
}

.afw-sideEmpty{
  padding:8px 10px;
  font-size:13px;
  color:rgba(255,255,255,.55);
}

/* ========================================================================
   Pins
   ======================================================================== */

.afw-pinBtn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:rgba(255,255,255,.72);
  transition:background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

.afw-pinBtn.is-active,
.afw-pinBtn--admin{
  color:#fff;
}

.afw-pinBtn.is-disabled{
  cursor:default;
  pointer-events:none;
  opacity:.70;
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.05);
}

.afw-pinBtn i{
  font-size:14px;
  line-height:1;
}

/* ========================================================================
   Country accordion
   ======================================================================== */

.afw-acc{
  display:block;
  min-width:0;
  max-width:100%;
}

.afw-acc__body{
  margin-top:4px;
  padding-left:10px;
  display:grid;
  gap:4px;
  min-width:0;
  max-width:100%;
}

.afw-sideItem--countryRow{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  min-width:0;
  max-width:100%;
}

.afw-sideCountryMain{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  max-width:100%;
}

.afw-sideCountryAll{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 8px;
  font-size:10px;
  font-weight:700;
  line-height:1;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.04);
  letter-spacing:.04em;
}

.afw-sideCountryAll:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}

.afw-sideCountryToggle{
  flex:0 0 auto;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative;
}

.afw-sideCountryToggle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid rgba(255,255,255,.55);
  border-bottom:2px solid rgba(255,255,255,.55);
  transform:translate(-50%,-60%) rotate(45deg);
  transition:transform .18s ease;
}

.afw-acc--country .afw-acc__body{
  display:none;
  margin-top:4px;
  padding-left:10px;
  gap:4px;
}

.afw-acc--country.is-open .afw-acc__body{
  display:grid;
}

.afw-acc--country.is-open .afw-sideCountryToggle::before{
  transform:translate(-50%,-30%) rotate(-135deg);
}

.afw-sideLoading{
  padding:7px 8px;
  color:rgba(255,255,255,.58);
  font-size:13px;
  line-height:1.35;
}

.afw-sideLoading--empty{
  color:rgba(255,255,255,.42);
}

/* ========================================================================
   League header
   ======================================================================== */

.afw-league{
  content-visibility:auto;
  contain-intrinsic-size:220px;
}

.afw-league--lazy{
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.afw-loadMoreLeague{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 16px;
  border:2px solid var(--afw-red);
  background:transparent;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.afw-league--lazy[aria-busy="true"] .afw-loadMoreLeague{
  opacity:.6;
  pointer-events:none;
}

.afw-league--lazy[aria-busy="true"] .afw-loadMoreLeague::after{
  content:"...";
}

.afw-league__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 2px;
  margin-top:28px;
  margin-bottom:18px;
  width:100%;
  max-width:100%;
}

.afw-league__left{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
  width:100%;
  max-width:100%;
  flex:1 1 auto;
}

.afw-league__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  flex:0 0 auto;
  min-width:0;
  max-width:none;
  width:auto;
}

.afw-league__right--inline{
  flex-direction:row;
  align-items:center;
}

.afw-league__logo{
  width:80px;
  height:80px;
  border-radius:999px;
  background-color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  line-height:0;
  overflow:hidden;
}

.afw-league__logo picture{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.afw-league__logo img{
  width:auto;
  height:auto;
  max-width:82%;
  max-height:82%;
  object-fit:contain;
  padding:0;
  display:block;
}

.afw-league__title{
  min-width:0;
  max-width:100%;
}

.afw-league__name{
  font-family:var(--h1-font-family);
  font-size:18px;
  line-height:1.2;
  font-weight:600;
  color:var(--color-content-heading);
  margin:0;
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  max-width:100%;
}

.afw-league__name a{
  color:inherit;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:100%;
}

.afw-league__link{
  color:inherit;
  text-decoration:none;
}

.afw-league__meta{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--h5-font-family);
  font-size:16px;
  line-height:var(--h5-line-height);
  font-weight:500;
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}

.afw-country{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:100%;
}

.afw-country img{
  width:20px;
  height:14px;
  flex:0 0 auto;
}

.afw-league__round{
  display:block;
  margin:0;
  font-family:var(--h5-font-family, var(--h1-font-family));
  font-size:13px;
  line-height:1.25;
  font-weight:600;
  color:rgba(255,255,255,.62);
  text-align:right;
  white-space:nowrap;
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:220px;
}

/* ========================================================================
   Match cards
   ======================================================================== */

.afw-h2h-list{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  margin-top:14px;
}

.afw-h2h-card{
  display:block;
  color:inherit;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  padding:10px 14px;
  max-width:100%;
}

.no-touch .afw-h2h-card:hover{
  background:rgba(255,255,255,.10);
}

.afw-h2h-card__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-width:0;
  max-width:100%;
}

.afw-h2h-card__venue{
  margin-top:8px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  line-height:1.35;
  text-align:center;
}

/* ========================================================================
   Teams
   ======================================================================== */

.afw-h2h-team{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:100%;
}

.afw-h2h-team--home{
  grid-column:1;
  justify-self:end;
}

.afw-h2h-team--away{
  grid-column:3;
  justify-self:start;
}

.afw-h2h-team__logo{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.afw-h2h-team__logo img{
  width:44px;
  height:44px;
  padding:5px;
  object-fit:contain;
  display:block;
}

.afw-h2h-team__text{
  min-width:0;
  max-width:150px;
  display:flex;
  align-items:center;
}

.afw-h2h-team--home .afw-h2h-team__text{
  justify-content:flex-end;
  text-align:right;
}

.afw-h2h-team--away .afw-h2h-team__text{
  justify-content:flex-start;
  text-align:left;
}

.afw-h2h-team__name{
  font-family:var(--h1-font-family);
  font-size:12px;
  line-height:1.15;
  font-weight:600;
  color:var(--color-content-heading);
  min-width:0;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  overflow-wrap:anywhere;
  word-break:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* ========================================================================
   Shared center blocks — one style for all pages
   ======================================================================== */

.afw-h2h-score,
.afw-live-score{
    grid-column: 2;
    margin: 0 auto;
    min-width: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 0 18px;
    line-height: 1.1;
}

.afw-h2h-score::before,
.afw-h2h-score::after,
.afw-live-score::before,
.afw-live-score::after{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  width:1px;
  background:rgba(255,255,255,.16);
}

.afw-h2h-score::before,
.afw-live-score::before{
  left:0;
}

.afw-h2h-score::after,
.afw-live-score::after{
  right:0;
}

.afw-h2h-score__top,
.afw-live-score__top{
  display:flex;
  align-items:center;
  justify-content:center;
}

.afw-h2h-score__val,
.afw-live-score__val{
  font-family:var(--h1-font-family);
  font-size:20px;
  line-height:1;
  font-weight:700;
  color:#fff;
}

.afw-h2h-score__bottom,
.afw-live-score__bottom{
  min-height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.afw-h2h-score__num,
.afw-h2h-score__sep,
.afw-live-score__num,
.afw-live-score__sep{
  color:inherit;
}

.afw-h2h-score__num,
.afw-h2h-score__sep{
  transition:color .2s ease, font-weight .2s ease, opacity .2s ease;
}

.afw-live-score__num,
.afw-live-score__sep{
  transition:color .2s ease, opacity .2s ease;
}

/* ========================================================================
   Result score colors
   ======================================================================== */

.afw-h2h-score.is-home-win .afw-h2h-score__num--home{
  color:#fff;
  font-weight:700;
}

.afw-h2h-score.is-home-win .afw-h2h-score__num--away{
  color:#fff;
  font-weight:700;
}

.afw-h2h-score.is-away-win .afw-h2h-score__num--away{
  color:#fff;
  font-weight:700;
}

.afw-h2h-score.is-away-win .afw-h2h-score__num--home{
  color:#fff;
  font-weight:700;
}

.afw-h2h-score.is-draw .afw-h2h-score__num--home,
.afw-h2h-score.is-draw .afw-h2h-score__num--away{
  color:#fff;
  font-weight:700;
}

/* ========================================================================
   Live score colors
   ======================================================================== */

.afw-live-score.is-home-win .afw-live-score__num--home{
  color:#f13031;
}

.afw-live-score.is-home-win .afw-live-score__num--away{
  color:#eeeeee;
}

.afw-live-score.is-away-win .afw-live-score__num--away{
  color:#f13031;
}

.afw-live-score.is-away-win .afw-live-score__num--home{
  color:#eeeeee;
}

.afw-live-score.is-draw .afw-live-score__num--home,
.afw-live-score.is-draw .afw-live-score__num--away{
  color:#f13031;
}

/* ========================================================================
   Statuses
   ======================================================================== */

.afw-status,
.afw-live-time{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:12px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:0;
  color:#eeeeee;
}

.afw-status.is-live{
  color:#f13031;
}

.afw-status.is-ft{
  color:#929ca5;
}

.afw-status.is-cancelled{
  color:#d8a23a;
}

.afw-status.is-scheduled{
  color:#eeeeee;
}

.afw-match-status{
  display:inline-block;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:0;
  color:rgba(255,255,255,.70);
}

.afw-match-status.is-live{
  color:#ff4d4f;
}

.afw-match-status.is-ft{
  color:rgba(255,255,255,.72);
}

.afw-match-status.is-cancelled{
  color:#ff7a7a;
}

.afw-match-status.is-scheduled{
  color:rgba(255,255,255,.60);
}

.afw-h2h-score__bottom .afw-status,
.afw-h2h-score__bottom .afw-match-status,
.afw-live-score__bottom .afw-match-status{
  max-width:100%;
}

.afw-h2h-score__bottom .afw-status.is-ft,
.afw-h2h-score__bottom .afw-match-status.is-ft{
  color:#929ca5;
}

.afw-h2h-score__bottom .afw-status.is-cancelled,
.afw-h2h-score__bottom .afw-match-status.is-cancelled{
  color:#d8a23a;
}

.afw-h2h-score__bottom .afw-status.is-scheduled,
.afw-h2h-score__bottom .afw-match-status.is-scheduled{
  color:#eeeeee;
}

/* ========================================================================
   Live special states
   ======================================================================== */

.afw-match-status.afw-match-status--liveBlink{
  color:#f13031;
  font-weight:700;
  animation:afwLiveBlink 1s infinite;
}

.afw-match-status.afw-match-status--liveMeta{
  color:#f13031;
  font-weight:700;
}

.afw-live-time{
  color:#f13031;
  animation:afwLiveBlink 1s infinite;
}

@keyframes afwLiveBlink{
  0%, 100% { opacity:1; }
  50% { opacity:.45; }
}

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

@media (max-width: 900px){
  .afw-league__header{
    align-items:flex-start;
  }

  .afw-league__right{
    align-items:flex-end;
  }

  .afw-league__round{
    white-space:normal;
  }
}

@media (max-width: 767px){
  .afw-league__header{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .afw-league__right{
    width:100%;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .afw-league__round{
    text-align:left;
  }
}

@media (max-width: 520px){
  .afw-league__left{
    gap:12px;
  }

  .afw-league__round{
    font-size:12px;
  }

  .afw-match-status,
  .afw-match-status--liveBlink,
  .afw-match-status--liveMeta{
    font-size:12px;
  }
}