@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #fff;
    color: #222;
    padding: 8px;
}

header {
    border-bottom: 1px solid #e5e5e5;
}

footer {
    border-top: 1px solid #e5e5e5;
}


/* CONTAINER */
.match-table {
    width: 100%;
    background: #fff;
    border: 1px solid #bfbfbf;
    /* darker outer border */
}

/* HEADER (EXACT GREEN) */
.table-title {
    background: #FFFF00;
    color: #000;
    text-align: center;
    font-size: 13px;
    padding: 6px 0;
    font-weight: 600;
}

/* ROW (IMPORTANT FIX: GREY NOT WHITE) */
.match-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eaeaea;
    /* EXACT row grey */
    padding: 0px 10px;
    border-bottom: 1px solid #cfcfcf;
    cursor: pointer;
    font-size: 13px;
}

/* HOVER */
.match-row:hover {
    background: #e3e3e3;
}

/* ACTIVE ROW (MATCHED GREEN SHADE) */
.match-row.active {
    background: #e9e974;
}

/* TIME BOX (FIXED BORDER + BG) */
.match-time {
    background: #f2f2f2;
    border: 1px solid #c6c6c6;
    /* softer border */
    padding: 1px 6px;
    font-size: 12px;
    border-radius: 3px;
    min-width: 48px;
    text-align: center;
    color: #222;
}

/* ICON */
.match-icon {
    display: block;
    position: relative;
    background-image: url(/spriteupdate8.png);
    background-repeat: no-repeat;
    height: 36px;
    width: 36px;
}


.LC .match-icon {
    background-position: -75px -720px
}

.VEN .match-icon {
    background-position: -38px -725px
}

.COL .match-icon {
    background-position: 0 0
}

.MEX .match-icon {
    background-position: -38px 0
}

.ES .match-icon {
    background-position: 0 -38px
}

.PE .match-icon {
    background-position: -38px -38px
}

.CAT .match-icon {
    background-position: 0 -685px
}

.ENG .match-icon {
    background-position: -76px 0
}

.FRA .match-icon {
    background-position: -76px -38px
}

.USA .match-icon {
    background-position: 0 -76px
}

.JA .match-icon {
    background-position: -38px -76px
}

.IT .match-icon {
    background-position: 0 -114px
}

.BRA .match-icon {
    background-position: -38px -114px
}

.ALE .match-icon {
    background-position: -76px -76px
}

.POR .match-icon {
    background-position: -76px -114px
}

.CH .match-icon {
    background-position: 0 -152px
}

.ECUA .match-icon {
    background-position: -38px -152px
}

.URU .match-icon {
    background-position: 0 -190px
}

.EURO .match-icon {
    background-position: -38px -190px
}

.AR .match-icon {
    background-position: -76px -152px
}

.AMERICA .match-icon {
    background-position: -76px -190px
}

.INDY .match-icon {
    background-position: 0 -228px
}

.NBA .match-icon {
    background-position: -38px -228px
}

.CHA .match-icon {
    background-position: 0 -266px
}

.UFC .match-icon {
    background-position: -38px -266px
}

.MOTOGP .match-icon {
    background-position: -76px -228px
}

.F1 .match-icon {
    background-position: -76px -266px
}

.FIFA .match-icon {
    background-position: 0 -306px
}

.MMA .match-icon {
    background-position: -38px -304px
}

.WWE .match-icon {
    background-position: 0 -342px
}

.FUT .match-icon {
    background-position: -38px -342px
}

.SUD .match-icon {
    background-position: -76px -304px
}

.CICLI .match-icon {
    background-position: -76px -342px
}

.LIB .match-icon {
    background-position: 0 -380px
}

.EUROAMERICANA .match-icon {
    background-position: -38px -380px
}

.BAS .match-icon {
    background-position: 0 -418px
}

.TE .match-icon {
    background-position: -38px -418px
}

.BOX .match-icon {
    background-position: -76px -380px
}

.UE .match-icon {
    background-position: -76px -418px
}

.ELIE .match-icon {
    background-position: 0 -456px
}

.UEC .match-icon {
    background-position: -38px -456px
}

.NFL .match-icon {
    background-position: -76px -456px
}

.ELI .match-icon {
    background-position: 0 -494px
}

.ORO .match-icon {
    background-position: -38px -494px
}

.INTER .match-icon {
    background-position: -76px -494px
}

.ELICON .match-icon {
    background-position: 0 -532px
}

.VOLEY .match-icon {
    background-position: -38px -532px
}

.RUG .match-icon {
    background-position: -76px -532px
}

.NAT .match-icon {
    background-position: 0 -570px
}

.MLB .match-icon {
    background-position: -38px -570px
}

.CON .match-icon {
    background-position: -76px -570px
}

.PAR .match-icon {
    background-position: 0 -608px
}

.HOL .match-icon {
    background-position: -38px -608px
}

.CONGOLD .match-icon {
    background-position: 0px -723px
}

.CONNAT .match-icon {
    background-position: -73px -687px
}

.AFCCHA .match-icon {
    background-position: 0px -764px
}

.CONCACAFCHA .match-icon {
    background-position: -38px -763px
}

.ARA .match-icon {
    background-position: -37px -687px
}

.BOL .match-icon {
    background-position: -76px -608px
}

.PARA .match-icon {
    background-position: 0 -646px
}

.OLY .match-icon {
    background-position: 0 -646px;
}

.SUPERCUP .match-icon {
    background-position: -38px -646px
}

.EUROCOPA .match-icon {
    background-position: -75px -764px
}

.NONE3 .match-icon {
    background-position: -76px -646px
}

.REC .match-icon {
    background-position: -74 -645px
}

/* TEXT */
.match-info {
    font-size: 13px;
    color: #111;
}

.league-name {
    font-weight: 600;
}

/* STREAM CONTAINER (IMPORTANT FIX) */
.match-streams {
    background: #f3f3f3;
    /* NOT white */
    border-bottom: 1px solid #cfcfcf;
}

/* STREAM ROW */
.stream-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    border-top: 1px solid #dcdcdc;
    text-decoration: none;
    color: #333;
    font-size: 13px;
}

/* STREAM HOVER */
.stream-item:hover {
    background: #e9e9e9;
}

/* LEFT */
.stream-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ARROW */
.stream-left::before {
    content: "▶";
    font-size: 10px;
    color: #555;
    margin-right: 5px;
}

/* QUALITY BADGE (FIXED EXACT LOOK) */
.stream-quality {
    background: #e6e6e6;
    border: 1px solid #c6c6c6;
    padding: 2px 10px;
    font-size: 11px;
    border-radius: 14px;
    color: #333;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .match-table {
        overflow-x: auto;
    }

    .match-row,
    .stream-item {
        min-width: 520px;
    }
}