/*.container-background{*/
/*    background-image: url("../images/displayBackground.png");*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-position: center;*/

/*    min-height: calc(100vh - 180px);*/

/*    padding-top: 40px;*/
/*    padding-bottom: 40px;*/
/*}*/

.container-background{
    background-image: url("../images/displayBackground.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    min-height: 100vh;
}

.schedule-background {

    background-image: url("../images/displayBackground.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    width:100%;
    min-height: calc(100vh - 200px);

    padding-top:50px;
    padding-bottom:50px;
}

.raspored-utakmica {
    width: 60%;
    max-width: 1000px;

    background: rgba(182,181,207,0.35);
    border: 5px solid #B6B5CF;
    border-radius: 20px;

    padding: 35px;

    box-shadow: 0 8px 25px rgba(0,0,0,.25);

    margin-bottom: 30px;
}

.groups-container, .knockout-container, .sponsors-container{
    background: rgba(182,181,207,0.35);
    /*backdrop-filter: blur(10px);*/
    /*-webkit-backdrop-filter: blur(10px);*/
    border: 5px solid #B6B5CF;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 8px 25px rgba(0,0,0,.25);
}

.groups-title{
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 35px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 6px rgba(0,0,0,.6);
}

.knockout-container {
    width:100%;
    overflow:hidden;
}

.bracket {

    display: grid;

    grid-template-columns:
        1.2fr 1fr 0.9fr 2fr 0.9fr 1fr 1.2fr;

    gap: 12px;

    align-items: center;

    width: max-content;

    min-width: 1200px;

}



/* Svaka runda */

.round {

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-align:center;
}



/* Kartica utakmice */

.match {

    background:white;

    border-radius:8px;

    padding:6px;

    margin:10px 0;

    font-size:12px;

    min-height:45px;

    box-shadow:
            0 2px 6px rgba(0,0,0,.25);

    border:1px solid #ddd;

}



/* Timovi */

.match span {

    display:block;

    font-weight:600;

}



/* Linija između ekipa */

.match hr {

    margin:4px 0;

    border-top:1px solid black;

}



/*
    Razmak između rundi
*/


.small-gap {

    margin:25px 0;

}



.big-gap {

    margin:65px 0;

}



.semi-gap {

    margin:150px 0;

}



/*
    FINALNI DEO
*/


.final-area {

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

}



.trophy {

    width:150px;

    margin-bottom:20px;

}



.final{

    /*padding:20px;*/

    width:200px;

    border:3px solid #d4af37;

}

.thirdPlace{

    /*padding:20px;*/

    width:200px;

    border:3px solid #C0C0C0;

}



.third-title {

    margin-top:40px;

}



/*
    Naslovi rundi
*/


.bracket-title {

    /*display:grid;*/
    /*grid-template-columns:*/
    /*    1.2fr 1fr 0.9fr 2fr 0.9fr 1fr 1.2fr;*/
    /*gap:12px;*/
    /*text-align:center;*/
    /*color:white;*/
    /*font-weight:bold;*/
    /*font-size:16px;*/
    /*margin-bottom:15px;*/
    /*-webkit-text-stroke:*/
    /*        1px black;*/

    display: grid;

    grid-template-columns:
        1.2fr 1fr 0.9fr 2fr 0.9fr 1fr 1.2fr;

    gap: 12px;

    width: max-content;

    min-width: 1200px;

    align-items: center;

    text-align: center;

    color:white;

    font-weight:bold;
    -webkit-text-stroke:
               1px black;
    }

    .bracket-title h3 {

        margin:0;

        white-space:nowrap;

    }

    .final-and-third-title {
        color:white;
        font-weight:bold;
        -webkit-text-stroke:
                1px black;

    }

    /*
        Glavni kontejner
    */


.knockout-container {
    width:100%;
    padding:20px;

}
/*
    Responsive za manje ekrane
*/


@media(max-width:1200px){
    .match {
        font-size:10px;
    }

    .final {
        width:120px;
    }

    .trophy {
        width:70px;
    }
}



/*@media(max-width:900px){*/

/*    .bracket {*/
/*        transform:scale(.8);*/
/*        transform-origin:top center;*/
/*        width:125%;*/
/*    }*/


/*}*/



/*@media(max-width:600px){*/


/*    .bracket {*/

/*        transform:scale(.6);*/

/*        transform-origin:top center;*/

/*        width:160%;*/

/*    }*/


/*}*/

.carousel-additional-text{
    /* Core typography */
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    -webkit-text-stroke: 1px black; /* black border */
    /* Tight letter spacing & compressed layout */
    letter-spacing: -2px;
    line-height: 0.85;
    /* Vertically stretch the font to make it taller */
    transform: scaleY(1.3);
    transform-origin: top left;
    /* Optional: Simple CSS inner-shadow/overlay to mimic texture */
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    display: inline-block;
    margin: 20px;
}

footer {
    border-top: 3px solid #ffc107;
    width: 100%;
    margin-top: auto;
}

footer h6 {
    color: #ffc107;
    margin-bottom: 15px;
}

footer a:hover {
    color: #ffc107 !important;
}

footer img {
    background: white;
    border-radius: 8px;
    padding: 5px;
}

.sponsors-title{
    color:white;
    font-size:3rem;
    font-weight:bold;
    text-shadow:3px 3px 8px black;
}

.main-sponsor-title{
    color:#FFD700;
    font-weight:bold;
    letter-spacing:2px;
    -webkit-text-stroke:
            1px black;
}

.main-sponsor-box{
    width:520px;
    max-width:100%;
    margin:auto;
    padding:35px;
    background:rgba(255,255,255,.08);
    border:2px solid rgba(255,215,0,.6);
    border-radius:20px;
}

.main-sponsor-logo{
    max-width:100%;
    max-height:220px;
    object-fit:contain;
}

.sponsor-box{
    height:170px;
    background:rgba(255,255,255,.08);
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    transition:.25s;
    border:1px solid rgba(255,255,255,.15);
}

.sponsor-box:hover{
    background:rgba(255,255,255,.15);
    transform:scale(1.05);
}

.sponsor-logo{
    max-width:90%;
    max-height:90px;
    object-fit:contain;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}

.text-start{
    font-weight: bold;
}


/* ======================================================
   RASPORED UTAKMICA
====================================================== */

.raspored-utakmica{
    width:85%;
    margin:auto;
}

.matches-list{

    display:flex;
    flex-direction:column;
    gap:22px;

}

.match-row{

    display:flex;
    align-items:center;
    justify-content:center;

}

/* ==========================================
   LEVO - VREME
========================================== */

.match-time{

    width:170px;
    height:86px;

    background:#d50000;
    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:34px;
    font-weight:700;

    clip-path:polygon(
            0 0,
            88% 0,
            100% 50%,
            88% 100%,
            0 100%
    );

    box-shadow:0 6px 18px rgba(0,0,0,.25);

    z-index:2;

    flex-shrink:0;

}

/* ==========================================
   SREDINA
========================================== */

.match-teams{

    flex:1;

    height:86px;

    background:#fff;

    border-top:2px solid #d50000;
    border-bottom:2px solid #d50000;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:28px;

    margin-left:-15px;
    margin-right:-15px;

    z-index:1;

    font-size:30px;
    font-weight:700;

}

.team-home{

    width:42%;

    text-align:right;

    color:#1c1c1c;

}

.team-away{

    width:42%;

    text-align:left;

    color:#1c1c1c;

}

.match-separator{

    color:#d50000;

    font-size:34px;

    font-weight:900;

}

/* ==========================================
   DESNO - DATUM
========================================== */

.match-date{

    width:170px;
    height:86px;

    background:#d50000;
    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:24px;
    font-weight:700;

    clip-path:polygon(
            12% 0,
            100% 0,
            100% 100%,
            12% 100%,
            0 50%
    );

    box-shadow:0 6px 18px rgba(0,0,0,.25);

    z-index:2;

    flex-shrink:0;

}

/* ==========================================
   HOVER
========================================== */

.match-row:hover .match-time,
.match-row:hover .match-date{

    background:#b90000;

    transition:.25s;

}

.match-row:hover .match-teams{

    box-shadow:0 0 18px rgba(0,0,0,.18);

    transition:.25s;

}

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

@media(max-width:992px){

    .match-time{

        width:135px;
        font-size:28px;

    }

    .match-date{

        width:135px;
        font-size:18px;

    }

    .match-teams{

        font-size:22px;
        gap:15px;

    }

}

@media(max-width:768px){

    .match-row{

        flex-direction:column;
        gap:0;

    }

    .match-time{

        width:100%;
        height:65px;

        clip-path:none;

        border-radius:12px 12px 0 0;

    }

    .match-teams{

        width:100%;

        height:auto;

        padding:18px;

        margin:0;

        flex-direction:column;

        gap:10px;

        font-size:22px;

    }

    .team-home,
    .team-away{

        width:100%;

        text-align:center;

    }

    .match-date{

        width:100%;
        height:60px;

        clip-path:none;

        border-radius:0 0 12px 12px;

        font-size:18px;

    }

    .raspored-utakmica{
        width:95%;
        padding:15px;
    }

    .container-background, .schedule-background{
        background-image:url("../images/mobileBackground.png");
    }

    .bracket {

        min-width:1100px;

    }

    .knockout-container {

        margin-left:0;
        margin-right:0;

    }

}

.team-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding: 15px;

    /*width: 200px;*/
}


.team-row span {

    text-align:left;

    flex:1;

}


.team-row strong {

    width:25px;

    text-align:center;

    font-size:14px;

}


.groups-title, .sponsors-title{
    font-weight:bold;
    font-size:30px;
    color:white;
    -webkit-text-stroke:
            1px black;
}

.main-carousel {
    width: 100%;
    overflow: hidden;
}


.main-carousel .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

.schedule-background .card {
    background: rgba(255, 255, 255, 0.25); /* bela sa 25% providnosti */
    backdrop-filter: blur(5px); /* blago zamućenje pozadine */
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 20px;
}


.schedule-background .card-body {
    background: transparent;
}


.schedule-background .card-header {
    background: rgba(0,0,0,0.65) !important;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

.knockout-scroll {

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding-bottom:20px;

    -webkit-overflow-scrolling:touch;
}

.knockout-scroll {

    /*width:100%;*/

    /*overflow-x:auto;*/
    /*overflow-y:hidden;*/

    /*padding-bottom:20px;*/

    width:max-content;

    margin:0 auto;

}

.knockout-container {

    overflow:hidden;

    padding-left:20px;
    padding-right:20px;

}