/* =========================
   MATCH GLOBAL WRAPPER
========================= */

.np-wrapper{
    max-width:1100px;
    margin:auto;
}

/* =========================
   MATCH HOME (SCHEDULE + RESULT)
========================= */

.match-home{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:20px;
}

.match-col{
    background:#fff;
    padding:15px;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

.match-card{
    display:block;
    text-decoration:none;
    color:#111;
    background:#fafafa;
    padding:12px;
    border-radius:10px;
    margin-bottom:10px;
    transition:.2s;
}

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

/* TEAM ROW */
.match-teams{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.team{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:15px;
}

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

.vs{
    font-size:20px;
    color:#888;
}

.score{
    font-weight:700;
}

/* META */
.match-meta{
    margin-top:6px;
    font-size:12px;
    color:#666;
}

.stadium{
    display:flex;
    align-items:center;
    gap:5px;
    justify-content:center;
}

.stadium i{
    color:#e53935;
}

/* BUTTON */
.btn-all{
    display:block;
    margin-top:10px;
    text-align:right;
    font-size:13px;
    color:#ffffff;
    text-decoration:none;
}

.btn-all:hover{
    color:#e53935;
}

/* =========================
   MATCH DETAIL HEADER
========================= */

.match-header-detail{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    margin-bottom:30px;
    gap:20px;
}

/* TEAM SIDE */
.team-side{
    text-align:center;
}

.team-side a{
    text-decoration:none;
    color:#111;
}

.team-side img{
    width:75px;
    height:75px;
    object-fit:cover;
    border-radius:12px;
    background:#fff;
    padding:5px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.team-side h3{
    margin-top:10px;
    font-size:15px;
}

/* CENTER */
.center-box{
    text-align:center;
}

.score{
    font-size:40px;
    font-weight:700;
}

.meta{
    font-size:13px;
    color:#666;
    margin-top:6px;
}

/* =========================
   SECTION BOX
========================= */

.match-section{
    background:#fff;
    padding:18px;
    border-radius:14px;
    margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

.match-section h3{
    font-size:15px;
    margin-bottom:12px;
}

/* =========================
   TIMELINE
========================= */

.timeline{
    position:relative;
    padding:10px 0;
}

.timeline::before{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:2px;
    background:#eee;
    transform:translateX(-50%);
}

.timeline-row{
    display:flex;
    margin:14px 0;
}

.timeline-row.left{
    justify-content:flex-start;
}
.timeline-row.right{
    justify-content:flex-end;
}

.event-box{
    width:45%;
    background:#fafafa;
    padding:10px 14px;
    border-radius:12px;
    position:relative;
}

.event-box::after{
    content:'';
    position:absolute;
    top:12px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#03a800;
}

.timeline-row.left .event-box::after{
    right:-16px;
}
.timeline-row.right .event-box::after{
    left:-16px;
}

.minute{
    font-size:12px;
    color:#999;
}

.event{
    font-size:14px;
}

.event small{
    display:block;
    font-size:12px;
    color:#777;
}

/* =========================
   LINEUP
========================= */

.lineup-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.lineup-box{
    background:#fff;
    padding:12px;
    border-radius:10px;
}

.lineup-box h4{
    margin-bottom:8px;
}

.lineup-box ul{
    list-style:none;
    padding:0;
}

/* PLAYER ITEM */
.player-item{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
    padding:6px 8px;
    border-radius:8px;
    transition:.2s;
}

.player-item:hover{
    background:#f5f5f5;
}

/* FOTO */
.player-photo{
    width:30px;
    height:30px;
    border-radius:50%;
    object-fit:cover;
}

/* JERSEY */
.jersey{
    min-width:28px;
    height:28px;
    background:#111;
    color:#fff;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
}

/* NAME */
.player-name{
    text-decoration:none;
    color:#111;
    font-size:13px;
}

.player-name:hover{
    color:#e53935;
}

/* POSITION */
.posisi{
    margin-left:auto;
    font-size:11px;
    color:#888;
    background:#eee;
    padding:2px 6px;
    border-radius:6px;
}

/* =========================
   STATS
========================= */

.stat-row{
    display:grid;
    grid-template-columns:50px 1fr 50px;
    gap:10px;
    margin:10px 0;
}

.stat-bar{
    height:6px;
    background:#eee;
    border-radius:6px;
    margin-top:4px;
}

.stat-bar-inner{
    height:100%;
    background:#e53935;
}

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

@media(max-width:768px){

    .match-home{
        grid-template-columns:1fr;
    }

    .match-header-detail{
        grid-template-columns:1fr;
        text-align:center;
    }

    .timeline::before{
        left:12px;
    }

    .timeline-row{
        justify-content:flex-start !important;
    }

    .event-box{
        width:100%;
        margin-left:30px;
    }

    .event-box::after{
        left:-18px !important;
    }

    .lineup-grid{
        grid-template-columns:1fr;
    }
}
/* =========================
   FIX SAME HEIGHT CARD
========================= */

.match-home{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

/* kolom jadi flex */
.match-col{
    display:flex;
    flex-direction:column;
}

/* semua card tinggi sama */
.match-card{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
/* ================= MATCH HOME ================= */

.match-home{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.match-col{
    display:flex;
    flex-direction:column;
}

.match-card{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:#fafafa;
    padding:12px;
    border-radius:10px;
    text-decoration:none;
    color:#111;
    margin-bottom:10px;
    transition:.2s;
}

.match-card:hover{
    background:#f1f1f1;
    transform:translateY(-2px);
}

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

.match-group{
    font-size:11px;
    font-weight:600;
    color:#666;
}

/* STATUS */
.match-status{
    font-size:12px;
    font-weight:700;
    padding:3px 8px;
    border-radius:20px;
}

/* STATUS COLORS */
.match-status.finished{
    background:#eee;
    color:#555;
}

.match-status.scheduled{
    background:#e3f2fd;
    color:#1976d2;
}

.match-status.live{
    background:#ffebee;
    color:#e53935;
    animation:blink 1s infinite;
}

@keyframes blink{
    0%{opacity:1;}
    50%{opacity:0.4;}
    100%{opacity:1;}
}

/* TEAMS */
.match-teams{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.team{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
}

.team img{
    width:28px;
    height:28px;
}

.score{
    font-weight:700;
}

/* META */
.match-meta{
    font-size:12px;
    color:#666;
    margin-top:6px;
}

.stadium{
    display:flex;
    align-items:center;
    gap:5px;
}

/* BUTTON (SAFE) */
.match-home .match-btn{
    text-align:right;
    font-size:13px;
    text-decoration:none;
    color:#111;
}

.match-home .match-btn:hover{
    color:#e53935;
}

/* ================= MATCH DETAIL ================= */

.match-status{
    margin-top:8px;
    display:inline-block;
}

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

@media(max-width:768px){
    .match-home{
        grid-template-columns:1fr;
    }
}
.stadium a{
    text-decoration:none;
    color:#888;
}

.stadium a:hover{
    color:#e53935;
}
.stat-bar{
    position:relative;
    height:8px;
    background:#eee;
    border-radius:6px;
    overflow:hidden;
    display:flex;
}

/* TEAM 1 */
.bar-left{
    background:#e53935;
}

/* TEAM 2 */
.bar-right{
    background:#2196f3;
}
.match-group.knockout{
    color:#e53935;
    font-weight:600;
}
/* SCORE WRAPPER */
.score{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* SCORE UTAMA */
.main-score{
    font-size:20px;
    font-weight:700;
}

/* PENALTY (KECIL DI BAWAH) */
.penalty-score{
    font-size:11px;
    color:#777;
    margin-top:2px;
}

.skor-match{
    font-size:40px;
    font-weight:700;
}
.section-icon{
    width:21px;
    height:21px;
    object-fit:contain;
    vertical-align:middle;
    margin-right:8px;
    display:inline-block;
}

.match-section h3,
.match-section h4{
    display:flex;
    align-items:center;
    gap:8px;
}
.lineup-divider{
    margin:14px 0 10px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.12);
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:black;
}
.lineup-team{
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}
/* =============================
MATCH DETAIL - FINAL OVERRIDE
SCOPED (AMAN DARI GLOBAL)
============================= */

.match-detail-page{
    max-width:1100px;
    margin:auto;
}

/* ================= HEADER ================= */
.match-detail-page .match-header-detail{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:20px;
    padding:35px;
    border-radius:18px;

    background:linear-gradient(135deg,#8b0000,#d50000);
    color:#fff;

    position:relative;
    overflow:hidden;
}

/* glow / depth */
.match-detail-page .match-header-detail::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 60%);
}

/* team */
.match-detail-page .team-side{
    text-align:center;
}

.match-detail-page .team-side img{
    width:70px;
    height:70px;
    object-fit:contain;
    margin-bottom:8px;
}

/* center */
.match-detail-page .center-box{
    text-align:center;
}

.match-detail-page .skor-match{
    font-size:48px;
    font-weight:700;
    letter-spacing:2px;
    text-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.match-detail-page .meta{
    font-size:13px;
    opacity:.9;
    margin-top:6px;
}

.match-detail-page .stadium{
    font-size:12px;
    opacity:.8;
}

/* status */
.match-detail-page .match-status{
    margin-top:8px;
    display:inline-block;
    padding:5px 12px;
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    background:rgba(255,255,255,0.2);
}

/* ================= SECTION ================= */
.match-detail-page .match-section{
    background:#fff;
    border-radius:14px;
    padding:20px;
    margin-top:20px;
    box-shadow:0 6px 16px rgba(0,0,0,0.05);
}

.match-detail-page h3,
.match-detail-page h4{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    margin-bottom:15px;
}

/* ================= STATS ================= */
.match-detail-page .stat-row{
    display:grid;
    grid-template-columns:50px 1fr 50px;
    align-items:center;
    margin:14px 0;
    transition:.2s;
}

.match-detail-page .stat-row:hover{
    transform:scale(1.01);
}

.match-detail-page .stat-label{
    font-size:12px;
    color:#555;
    margin-bottom:4px;
}

.match-detail-page .stat-bar{
    height:10px;
    background:#eee;
    border-radius:10px;
    overflow:hidden;
    display:flex;
}

.match-detail-page .bar-left{
    background:linear-gradient(90deg,#00c853,#69f0ae);
}

.match-detail-page .bar-right{
    background:linear-gradient(90deg,#ff5252,#ff8a80);
}

.match-detail-page .stat-row span{
    font-weight:700;
    font-size:13px;
}

/* ================= TIMELINE ================= */
.match-detail-page .timeline{
    position:relative;
    padding:25px 0;
}

.match-detail-page .timeline::before{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(#ddd,#bbb);
}

.match-detail-page .timeline-row{
    display:flex;
    margin:16px 0;
}

.match-detail-page .timeline-row.left{
    justify-content:flex-start;
}
.match-detail-page .timeline-row.right{
    justify-content:flex-end;
}

.match-detail-page .event-box{
    width:45%;
    background:#fff;
    border:1px solid #eee;
    border-left:4px solid #e53935;
    border-radius:10px;
    padding:12px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    transition:.2s;
}

.match-detail-page .event-box:hover{
    transform:translateY(-2px);
}

.match-detail-page .minute{
    font-size:12px;
    font-weight:700;
    color:#e53935;
}

.match-detail-page .event{
    font-size:14px;
    font-weight:600;
}

.match-detail-page .event small{
    font-size:12px;
    color:#777;
}

/* ================= LINEUP ================= */
.match-detail-page .lineup-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.match-detail-page .lineup-box{
    background:#fff;
    border-radius:12px;
    padding:14px;
    border:1px solid #eee;
    transition:.2s;
}

.match-detail-page .lineup-box:hover{
    transform:translateY(-3px);
}

.match-detail-page .lineup-team{
    font-weight:700;
    text-align:center;
    margin-bottom:10px;
}

.match-detail-page .lineup-divider{
    font-size:12px;
    margin:12px 0;
    color:#e53935;
    font-weight:700;
    letter-spacing:.5px;
}

/* player */
.match-detail-page .player-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px;
    border-radius:8px;
}

.match-detail-page .player-item:hover{
    background:#f5f5f5;
}

.match-detail-page .player-photo{
    width:28px;
    height:28px;
    border-radius:50%;
}

.match-detail-page .jersey{
    background:#e53935;
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:4px 6px;
    border-radius:6px;
}

.match-detail-page .player-name{
    font-size:13px;
    color:#111;
}

.match-detail-page .posisi{
    margin-left:auto;
    font-size:11px;
    color:#666;
}

/* ================= MOBILE ================= */
@media(max-width:768px){

    .match-detail-page .match-header-detail{
        grid-template-columns:1fr;
        text-align:center;
    }

    .match-detail-page .timeline::before{
        left:10px;
    }

    .match-detail-page .timeline-row{
        justify-content:flex-start !important;
    }

    .match-detail-page .event-box{
        width:100%;
        margin-left:30px;
    }

    .match-detail-page .lineup-grid{
        grid-template-columns:1fr;
    }
}
/* =============================
MATCH DETAIL TEXT FIX (FINAL)
============================= */

/* ===== FORCE HEADER TEXT ===== */
.match-detail-page .match-header-detail,
.match-detail-page .match-header-detail *{
    color:#fff !important;
}

/* ===== TEAM NAME ===== */
.match-detail-page .match-header-detail .team-side a,
.match-detail-page .match-header-detail .team-side h3{
    color:#fff !important;
    font-weight:600;
}

/* ===== SCORE ===== */
.match-detail-page .skor-match{
    color:#fff !important;
    text-shadow:0 3px 10px rgba(0,0,0,0.4);
}

/* ===== STATUS BADGE ===== */
.match-detail-page .match-status{
    color:#fff !important;
    background:rgba(255,255,255,0.2) !important;
}

/* ===== META (tanggal & jam) ===== */
.match-detail-page .meta{
    color:rgba(255,255,255,0.9) !important;
}

/* ===== STADIUM ===== */
.match-detail-page .stadium,
.match-detail-page .stadium a{
    color:rgba(255,255,255,0.85) !important;
}

/* ===== PENALTY ===== */
.match-detail-page .penalty-score{
    color:rgba(255,255,255,0.75) !important;
}

/* ===== ICON (fontawesome dll) ===== */
.match-detail-page .match-header-detail i{
    color:#fff !important;
}

/* ===== FIX LINK HOVER ===== */
.match-detail-page .match-header-detail a:hover{
    color:#fff !important;
    opacity:0.85;
}

/* =============================
OPTIONAL (BIAR LEBIH ENAK DILIHAT)
============================= */

/* kurangi merah terlalu terang */
.match-detail-page .match-header-detail{
    background:linear-gradient(135deg,#b30000,#e60000) !important;
}

/* logo tanpa kotak putih */
.match-detail-page .team-side img{
    background:transparent !important;
    box-shadow:none !important;
}
/* =============================
FIX TEAM ALIGN HEADER
============================= */

.match-detail-page .match-header-detail{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
}

/* pastikan center bener */
.match-detail-page .team-side{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/* nama club */
.match-detail-page .team-side h3{
    margin-top:8px;
    text-align:center;
    width:100%;
}
/* kiri tetap ke kanan */
.match-detail-page .team-side:first-child{
    align-items:center;
}

/* kanan tetap ke kiri */
.match-detail-page .team-side:last-child{
    align-items:center;
}
@media(max-width:768px){

    .match-detail-page .team-side img{
        width:55px;
        height:55px;
    }

}
@media(max-width:768px){

    .match-detail-page .score{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:6px;
    }

}
.match-detail-page .match-header-detail::after{
    pointer-events:none;
}

.match-detail-page .match-header-detail::before{
    pointer-events:none;
}
@media(max-width:768px){

    /* pakai grid, bukan flex */
    .match-detail-page .timeline{
        display:grid;
        grid-template-columns:1fr 20px 1fr;
        gap:10px 0;
        position:relative;
    }

    /* garis tengah */
    .match-detail-page .timeline::before{
        left:50%;
        transform:translateX(-50%);
        width:2px;
        background:#ccc;
    }

    /* row jadi full grid */
    .match-detail-page .timeline-row{
        display:contents;
    }

    /* BOX UMUM */
    .match-detail-page .event-box{
        width:100%;
        margin:0;
    }

    /* TEAM KIRI */
    .match-detail-page .timeline-row.left .event-box{
        grid-column:1;
        text-align:right;
    }

    /* TEAM KANAN */
    .match-detail-page .timeline-row.right .event-box{
        grid-column:3;
        text-align:left;
    }

    /* titik di tengah */
    .match-detail-page .event-box::after{
        left:50% !important;
        transform:translateX(-50%);
    }

}
.lazy-img{
    opacity:0;
    transition:.3s;
}
.lazy-img.loaded{
    opacity:1;
}
/* =============================
FIX SCORE MOBILE (MATCH DETAIL)
============================= */

@media(max-width:768px){

    /* wrapper header biar lebih rapat */
    .match-header-red{
        padding: 25px 12px;
    }

    /* score utama */
    .match-header-red .main-score,
    .match-header-red .skor-match{
        font-size: 28px !important; /* 🔥 sebelumnya 40-46 kegedean */
        letter-spacing: 1px;
    }

    /* penalty */
    .match-header-red .penalty-score{
        font-size: 11px;
    }

    /* status */
    .match-header-red .match-status{
        font-size: 10px;
        padding: 4px 10px;
    }

    /* meta (tanggal) */
    .match-header-red .meta{
        font-size: 12px;
    }

    /* stadium */
    .match-header-red .stadium{
        font-size: 11px;
    }

    /* logo tim */
    .match-header-red .team-side img{
        width: 55px;
        height: 55px;
    }

    /* nama tim */
    .match-header-red .team-side h3{
        font-size: 12px;
    } 
}
.match-header-red .penalty-score{
    font-size: 12px;
    opacity: .7;
}
/* =============================
FIX STAT RIGHT ALIGN
============================= */

/* angka kanan */
.stat-row > span:last-child{
    text-align: right;
    justify-self: end;
}

/* container tengah tetap center */
.stat-center{
    text-align: center;
}

/* bar kanan tetap dari kanan */
.stat-bar{
    display: flex;
}

/* 🔥 penting: bar kanan isi dari kanan */
.bar-right{
    margin-left: auto;
}

/* kalau masih belum rapih (fallback kuat) */
.stat-row{
    align-items: center;
}

/* optional: biar angka kiri & kanan seimbang */
.stat-row span{
    display: block;
}