/* =====================================================
   MAIN WRAPPER
===================================================== */

#fifa-bracket-wrapper{

    max-width:1400px;

    margin:0 auto;

    padding:20px;

    color:#ffffff;

    box-sizing:border-box;
}

/* =====================================================
   TOP BAR
===================================================== */

.top-bar{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

    font-size:14px;

    font-weight:bold;
}

/* =====================================================
   DESKTOP BRACKET
===================================================== */

.bracket-grid{

    display:grid;

    grid-template-columns:
        0.8fr
        0.8fr
        1fr
        0.8fr
        0.8fr;

    gap:20px;

    align-items:center;

    width:100%;
}

/* =====================================================
   COLUMN
===================================================== */

.bracket-column{

    display:flex;

    flex-direction:column;

    position:relative;
}

/* =====================================================
   HEADINGS
===================================================== */

.bracket-column h2{

    color:#f24644;

    text-align:center;

    margin-bottom:20px;

    font-size:18px;

    text-transform:uppercase;

    letter-spacing:1px;
}

/* =====================================================
   HEADINGS ROW
===================================================== */

.bracket-headings{

    display:grid;

    grid-template-columns:
        0.8fr
        0.8fr
        1fr
        0.8fr
        0.8fr;

    gap:20px;

    margin-bottom:25px;

    align-items:center;
}

.bracket-headings h2{

    color:#f24644;

    text-align:center;

    margin:0;

    font-size:18px;

    text-transform:uppercase;

    letter-spacing:1px;
}

/* =====================================================
   QUARTER SPACING
===================================================== */

.quarter-column{

    gap:120px;
}

/* =====================================================
   SEMI SPACING
===================================================== */

.semi-column{

    gap:260px;

    justify-content:center;
}

/* =====================================================
   FINAL
===================================================== */

.final-column{

    justify-content:center;

}

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

.match-box{

    position:relative;

    background:
    linear-gradient(
        135deg,
        #0a1a34,
        #112546
    );

    border:1px solid #1f5f99;

    border-radius:14px;

    overflow:hidden;

    box-shadow:
    0 0 10px rgba(0,0,0,0.3);
}

/* =====================================================
   CONNECTOR LINES
===================================================== */

.match-box::after{

    content:"";

    position:absolute;

    top:50%;

    right:-20px;

    width:20px;

    height:2px;

    background:#ffffff;
}

/* RIGHT SIDE */

.right-side .match-box::after{

    left:-20px;

    right:auto;
}

/* FINAL */

.final-column .match-box::after{
    display:none;
}

/* =====================================================
   OPTION
===================================================== */

.poll-option{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px;

    border-bottom:1px solid rgba(255,255,255,0.08);

    transition:0.3s;

    cursor:pointer;
}

.poll-option:last-child{
    border-bottom:none;
}

.poll-option:hover{
    background:rgba(255,255,255,0.05);
}

.poll-option.selected{
    background:rgba(0,255,120,0.15);
}

/* =====================================================
   TEAM INFO
===================================================== */

.team-info{

    display:flex;

    align-items:center;

    gap:10px;
}

.team-info img{

    width:30px;

    height:30px;

    border-radius:5px;

    object-fit:cover;

}

.team-info span{

    font-size:16px;

    font-weight:700;

}

/* =====================================================
   VOTES
===================================================== */

.vote-count{

    font-size:14px;

    font-weight:bold;

    opacity:0.85;
}

/* =====================================================
   DISABLED
===================================================== */

.disabled-stage{

    opacity:0.35;

    pointer-events:none;

    filter:grayscale(100%);
}

/* =====================================================
   BUTTONS
===================================================== */

.submit-wrap{

    text-align:center;

    margin-top:30px;
}

.submit-wrap button{

    padding:12px 20px;

    border:none;

    border-radius:8px;

    margin:5px;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;
}

#submit-votes{

    background:#ffd700;

    color:#000000;
}

#reset-votes{

    background:#cccccc;

    color:#000000;
}

/* =====================================================
   FINAL COLUMN GLOW
===================================================== */

.final-column .match-box{

    border:2px solid #ffd700 !important;

    box-shadow:
        0 0 10px rgba(255,215,0,0.5),
        0 0 20px rgba(255,215,0,0.4),
        0 0 35px rgba(255,215,0,0.3);

    background:
    linear-gradient(
        135deg,
        #2d2200,
        #4b3900
    ) !important;
}

/* FINAL TITLE */

.heading-final h2{

    color:#ffd700 !important;

    text-shadow:
        0 0 8px rgba(255,215,0,0.8),
        0 0 16px rgba(255,215,0,0.5);
}

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

.mobile-tabs{
    display:none;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px){

    .bracket-grid{
        display:none;
    }

    .mobile-tabs{
        display:block;
    }

    .mobile-tab-buttons{

        display:flex;

        justify-content:center;

        gap:10px;

        margin-bottom:20px;

        flex-wrap:wrap;
    }

    .mobile-tab-btn{

        padding:10px 16px;

        background:#10203f;

        border:1px solid #1f5f99;

        color:#ffffff;

        border-radius:6px;

        font-size:13px;

        font-weight:bold;

        cursor:pointer;
    }

    .mobile-tab-btn.active{

        background:#f24644;
    }

    .mobile-tab-content{
        display:none;
    }

    .mobile-tab-content.active{
        display:block;
    }

    .mobile-stage h2{

        text-align:center;

        color:#f24644;

        margin-bottom:15px;
    }

    .mobile-stage .match-box{

        margin-bottom:15px;
    }

}