/*
========================================================
AP WORLDCUP BRACKET
Release 2.0
========================================================
*/

:root{

    --apwc-card-width:130px;
    --apwc-card-height:96px;

    --apwc-column-gap:70px;

    --apwc-title:#D6A354;

    --apwc-card:#1B1B1B;

    --apwc-border:#343434;

    --apwc-text:#FFFFFF;

    --apwc-soft:#A4A4A4;

    --apwc-radius:12px;

}


/*========================================*/

.apwc-bracket-wrapper{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    padding:40px 20px;

}

.apwc-bracket-wrapper *{

    box-sizing:border-box;

}


/*========================================*/

.apwc-bracket-grid{

    display:grid;

    grid-template-columns:

    repeat(9,var(--apwc-card-width));

    column-gap:30px;

    width:max-content;

    min-height:1180px;

    position:relative;

}


/*========================================*/

.apwc-column{

    position:relative;

}


/*========================================*/

.apwc-round{

    position:relative;

    width:var(--apwc-card-width);

    height:1040px;

}


/*========================================*/

.apwc-round-title{

    text-align:center;

    color:var(--apwc-title);

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:30px;

}


/*========================================*/

.apwc-round-body{

    position:relative;

    width:100%;

    height:980px;

}


/*========================================*/

.apwc-match-slot{

    position:absolute;

    width:100%;

    left:0;

}


/******************************************

16AVOS

******************************************/

.apwc-round-dieciseisavos .apwc-match-slot-1{

    top:0;

}

.apwc-round-dieciseisavos .apwc-match-slot-2{

    top:122px;

}

.apwc-round-dieciseisavos .apwc-match-slot-3{

    top:244px;

}

.apwc-round-dieciseisavos .apwc-match-slot-4{

    top:366px;

}

.apwc-round-dieciseisavos .apwc-match-slot-5{

    top:488px;

}

.apwc-round-dieciseisavos .apwc-match-slot-6{

    top:610px;

}

.apwc-round-dieciseisavos .apwc-match-slot-7{

    top:732px;

}

.apwc-round-dieciseisavos .apwc-match-slot-8{

    top:854px;

}


/******************************************

OCTAVOS

******************************************/

.apwc-round-octavos .apwc-match-slot-1{

    top:61px;

}

.apwc-round-octavos .apwc-match-slot-2{

    top:305px;

}

.apwc-round-octavos .apwc-match-slot-3{

    top:549px;

}

.apwc-round-octavos .apwc-match-slot-4{

    top:793px;

}


/******************************************

CUARTOS

******************************************/

.apwc-round-cuartos .apwc-match-slot-1{

    top:183px;

}

.apwc-round-cuartos .apwc-match-slot-2{

    top:671px;

}


/******************************************

SEMIFINAL

******************************************/

.apwc-round-semifinal .apwc-match-slot-1{

    top:427px;

}


/******************************************

FINAL

******************************************/

.apwc-column-center{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:130px;

}

.apwc-round-final{

    height:auto;

}

.apwc-round-final .apwc-round-body{

    height:120px;

}

.apwc-round-final .apwc-match-slot-1{

    top:0;

}


/******************************************

TERCER PUESTO

******************************************/

.apwc-round-tercer_puesto{

    height:auto;

}

.apwc-round-tercer_puesto .apwc-round-body{

    height:120px;

}

.apwc-round-tercer_puesto .apwc-match-slot-1{

    top:0;

}

/*====================================================

MATCH CARD

====================================================*/

.apwc-match-card{

    width:100%;

    height:var(--apwc-card-height);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:var(--apwc-card);

    border:1px solid var(--apwc-border);

    border-radius:var(--apwc-radius);

    overflow:hidden;

}

.apwc-match-card:hover{

    transform:translateY(-2px);

    border-color:var(--apwc-title);

    box-shadow:0 14px 30px rgba(0,0,0,.35);

}


/*====================================================

HEADER

====================================================*/

.apwc-card-header{

    height:26px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 12px;

    background:#242424;

    color:var(--apwc-soft);

    font-size:10px;

}

.apwc-match-date{

    font-weight:600;

}

.apwc-match-time{

    opacity:.8;

}


/*====================================================

TEAMS

====================================================*/

.apwc-team{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex:1;

    padding:0 10px;

    color:var(--apwc-text);

}

.apwc-team + .apwc-team{

    border-top:1px solid rgba(255,255,255,.05);

}

.apwc-team-left{

    display:flex;

    align-items:center;

    gap:6px;

    min-width:0;

}


/*====================================================

FLAG

====================================================*/

.apwc-flag{

    width:20px;

    height:20px;

    border-radius:50%;

    background:#555;

    overflow:hidden;

    flex-shrink:0;

}

.apwc-flag img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*====================================================

TEAM NAME

====================================================*/

.apwc-team-name{

    font-size:14px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


/*====================================================

SCORE

====================================================*/

.apwc-score{

    font-size:18px;

    font-weight:700;

    flex-shrink:0;

}


/*====================================================

STATUS

====================================================*/

.apwc-card-status{

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-top:1px solid var(--apwc-border);

    color:var(--apwc-title);

    font-size:10px;

}


/*====================================================

SCROLL

====================================================*/

.apwc-bracket-wrapper::-webkit-scrollbar{

    height:10px;

}

.apwc-bracket-wrapper::-webkit-scrollbar-track{

    background:#1f1f1f;

}

.apwc-bracket-wrapper::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}

.apwc-bracket-wrapper::-webkit-scrollbar-thumb:hover{

    background:#777;

}


/*====================================================

RESPONSIVE

====================================================*/

@media(max-width:1400px){

    .apwc-bracket-wrapper{

        padding:25px 15px;

    }

}

@media(max-width:1024px){

    .apwc-bracket-grid{

        column-gap:45px;

    }

}

@media(max-width:768px){

    .apwc-bracket-wrapper{

        padding:20px 10px;

    }

}


/*====================================================

UTILIDADES

====================================================*/

.apwc-hidden{

    display:none !important;

}

/*====================================================

V1.1
FLAGS
STATUS
WINNER

====================================================*/

.apwc-flag{

    width:18px;

    height:18px;

    border-radius:50%;

    overflow:hidden;

    background:#2a2a2a;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.apwc-flag img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*====================================================

TEAM

====================================================*/

.apwc-team.winner{

    background:rgba(214,163,84,.08);

}

.apwc-team.winner .apwc-team-name{

    color:#F2C46C;

    font-weight:700;

}

.apwc-team.winner .apwc-score{

    color:#F2C46C;

    font-weight:700;

}


/*====================================================

STATUS

====================================================*/

.apwc-card-status{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

}

.apwc-status-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#8a8a8a;

}

.status-pending .apwc-status-dot{

    background:#8d8d8d;

}

.status-live .apwc-status-dot{

    background:#28C840;

    box-shadow:0 0 8px rgba(40,200,64,.55);

}

.status-finished .apwc-status-dot{

    background:#E0B04F;

}


/*====================================================

FLAGS

====================================================*/

.apwc-team-name{

    font-weight:600;

    letter-spacing:.4px;

}


/*====================================================

SCORE

====================================================*/

.apwc-score{

    min-width:18px;

    text-align:center;

}

.apwc-empty-team{
    display:inline-block;
    width:32px;
}