.matches-section__filters .nav-item{
border-radius: 6px;
border: 1px solid var(--Mapping-Borders-Structural-Borders-border-neutral-default);
background: var(--mapping-surfaces-system-layout-surfaces-surface-neutral-lowest);

}
.matches-section__filters .nav-item a{
color: #19421F !important;
font-weight: 600;
font-size: 14px;
line-height: 20px;
height: 44px;
width: 67px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
}
.matches-section__filters .nav-item a.active{
color:#fff !important;
background: var(--Mapping-Surfaces-Action-Surfaces-surface-action-secondary-selected, #6D937A);
}

.matches-section__filters .nav-item.active ,
.matches-section__filters .nav-item:hover ,
 .matches-section__filters .nav-link.active{
border-radius: 4px;
font-size: 14px;
font-weight: 600 !important;
line-height: 20px;
}


.matches-section__filters .nav-link.active{
  font-weight: 700;
  color: #14351F;
}
.match-card{
padding: 20px !important;
border-radius: 16px;
border: 1px solid #E2E8DC;
background: #FFF;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.03);
height: 100%;
}

.match-card .rounded-pill{
height: 26px;
    font-size: 12px;
    font-weight: 600 !important;
    color: #6D937A !important;
    line-height: 18px !important;
}
.match-card__league{
  color: var(--Mapping-Text-Body-Text-text-body-muted, #6B7A6F);
  font-size: 12px;
  font-weight: 600 !important;
  line-height: 16px !important;
}


.match-card__team-name{
  color: #14351F;
  font-size: 12px;
  font-weight: 700;
}


.status-upcoming .rounded-pill{
border-radius: 100px;
background: #E0E8E3 !important;
}
.status-finished .rounded-pill{
background: #E0E8E3 !important;   
color: #45684F !important;

}

.status-live .rounded-pill{
  background: #FFF0F2 !important;
  color: #FF4A4A !important;
}


/*match section */
.matches-section__filters{
  margin-top:12px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}



.match-card{
  padding: 20px !important;
  border-radius: 16px;
border: 1px solid #E2E8DC;
background: #FFF;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.03);
}
.match-card__league{
  color: #8DA394;
  font-size: 12px;
  font-weight: 700;
}

.match-card__score , .match-card__time{
color: var(--Mapping-Text-Heading-text-heading-primary, #0E391C);
border-radius: 12px !important;
background: #F2F4F0;
display: flex;
width: 92px;
height: 60px;
padding: 10px 16px;
    align-items: center;
    justify-content: center;
}

.match-card__score{
  width: 90px !important;

}
.match-card__team-name{
  color: #14351F;
  font-size: 12px;
  font-weight: 700;
}

.match-card__team img{
  height: 36px;
  width: 36px !important;
  object-fit: contain;
}

.status-upcoming .status-text{
  color:#19421F !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;  
}

.match-card__body .match-card__team {
    width: 118px;
    align-items: flex-start !important;
}
.match-card__body .match-card__team.second-team{
   align-items: flex-end  !important;
}
@media (max-width: 992px) {
.matches-section__filters .nav-item{
  flex: 1 !important;
  text-align: center;
}
.matches-section__filters .nav-item a{
  width: 100% !important;
}
.matches-section__filters .nav-link.active{
  height: 48px !important;
}
.matches-section__filters{
  margin-top: 0 !important;
}
.matches-section__header{
  margin-bottom: 8px !important;
}
.match-card__score{
    width: 78px;
    height: 58px;
}
}

/* ---------- Clickable match card (the link covers the whole card) ---------- */
.match-card--link {
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.match-card--link:hover {
    border-color: #B9C6BD;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.06);
}

.match-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.match-card__link:focus-visible {
    outline: 2px solid var(--bs-primary, #294A34);
    outline-offset: 2px;
}
