/* MATCHES */
/* =========================================================
   STATORIUM MATCHES WIDGET
========================================================= */

.matches-widget{
    font-family: "Google Sans", sans-serif;
    margin:0;
}

.matchday-block{
    background:#ffffff;
    border-radius:5px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    /* box-shadow:
        0 4px 14px rgba(0,0,0,.04),
        0 1px 3px rgba(0,0,0,.06); */
}

/* =========================================================
   HEADER
========================================================= */

.matchday-title{
    background:linear-gradient( 135deg, #0c83a4 180%, #2397b7 45%, #167b97 100% );
    color:#fff;
    padding:6px 18px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.3px;
}

/* =========================================================
   MATCH CARD
========================================================= */

.match-card{
    padding:10px;
    border-top:1px solid #f3f4f6;
    transition:background .2s ease;
}

.match-card:hover{
    background:#fafafa;
}

/* =========================================================
   TOP INFO
========================================================= */

.match-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.match-date{
    font-size:12px;
    color:#6b7280;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.match-meta{
    display:flex;
    align-items:center;
    gap:10px;
}

.match-time{
    font-size:12px;
    color:#374151;
    font-weight:600;
}

/* =========================================================
   STATUS BADGES
========================================================= */

.match-status{
    padding:5px 10px;
    border-radius:30px;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.match-status.live{
    background:#dc2626;
    color:#fff;
    animation:pulse 1s infinite;
}

.match-status.final{
    background:#111827;
    color:#fff;
}

.match-status.halftime{
    background:#f59e0b;
    color:#fff;
}

.match-status.scheduled{
    background:#eef2ff;
    color:#4338ca;
}

/* =========================================================
   MATCH ROW
========================================================= */

.match-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* =========================================================
   TEAMS
========================================================= */

.match-team{
    display:flex;
    align-items:center;
    gap:10px;
    width:42%;
}

.match-team.away{
    justify-content:flex-end;
    text-align:right;
}

.match-team img{
    width:24px;
    height:24px;
    object-fit:cover;
}

.match-team span{
    font-size:13px;
    color:#111827;
    font-weight:normal;
    line-height:1.2;
}

/* =========================================================
   SCORE
========================================================= */

.score-box{
    min-width:90px;
    text-align:center;
}

.score{
    font-size:20px;
    font-weight:600;
    color:#111827;
    line-height:1;
}

.vs{
    font-size:12px;
    font-weight:600;
    color:#9ca3af;
    letter-spacing:1px;
}

/* =========================================================
   VENUE
========================================================= */

.venue{
    margin-top:2px;
    padding-top:6px;
    border-top:1px dashed #e5e7eb;
    font-size:12px;
    color:#6b7280;
    text-align:center;
}

/* =========================================================
   LIVE ANIMATION
========================================================= */

@keyframes pulse{

    0%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.75;
        transform:scale(1.04);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .score-box{
        min-width:70px;
    }

    /* .match-top{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .match-meta{
        width:100%;
        justify-content:space-between;
    } */

}

.live-updated{
    font-size:11px;
    color:#9ca3af;
    text-align:right;
    padding:8px 14px;
}