/* ========================================
   LANDEN PAGINA'S
======================================== */

body{

    margin:0;
    padding:0;

    min-height:100vh;

    font-family:Arial,sans-serif;

    color:white;

    background-image:url('../images/9.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

}

/* ========================================
   CONTAINER
======================================== */

.container{

    max-width:1450px;

    margin:0 auto;

    padding:25px;

}

/* ========================================
   TOP BUTTON
======================================== */

.top-buttons{

    display:flex;

    justify-content:center;

    margin:25px 0;

}

.home-button{

    display:inline-block;

    padding:12px 28px;

    border-radius:20px;

    text-decoration:none;

    font-weight:800;

    border:
    1px solid rgba(255,255,255,0.35);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    box-shadow:
    0 8px 24px rgba(0,0,0,0.18);

    transition:.3s;

}

.home-button:hover{

    transform:translateY(-3px);

    filter:brightness(1.08);

}

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

.team-info{

    display:block;

}

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

.team-top{

    max-width:900px;

    margin:0 auto 24px;

    padding:26px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.18);

    border:
    1px solid rgba(255,255,255,0.32);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
    0 8px 24px rgba(0,0,0,0.14);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    text-align:left;

}

/* ========================================
   FLAG / NAME
======================================== */

.team-flag{

    width:170px;

    max-width:100%;

    height:auto;

    border-radius:12px;

    box-shadow:
    0 8px 20px rgba(0,0,0,0.22);

}

.team-name{

    font-size:44px;

    font-weight:900;

    color:white;

    text-shadow:
    0 3px 10px rgba(0,0,0,0.75);

}

.team-confederation{

    margin-top:6px;

    font-size:20px;

    font-weight:800;

    letter-spacing:2px;

    color:#f5d77a;

    text-shadow:
    0 3px 8px rgba(0,0,0,0.75);

}

/* ========================================
   THREE COLUMNS
======================================== */

.team-stats{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:24px;

    align-items:start;

}

.team-content,
.players-section,
.points-section{

    margin:0;

    padding:26px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.18);

    border:
    1px solid rgba(255,255,255,0.32);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
    0 8px 24px rgba(0,0,0,0.14);

}

/* ========================================
   INFO COLUMN (Links en Rechts - Originele witte borders hersteld)
======================================== */

.team-content p,
.points-section p{

    margin:0 0 16px;

    padding:14px 16px;

    border-radius:16px;

    background:
    rgba(255,255,255,0.12);

    /* Dit blijft je mooie, subtiele witte glass-border */
    border: 1px solid rgba(255,255,255,0.16) !important;

    font-size:18px;

    font-weight:800;

    text-shadow:
    0 2px 6px rgba(0,0,0,0.55);

}

/* ========================================
   PLAYERS / MATCHES
======================================== */

.players-section h2,
.points-section h2{

    margin:0 0 18px;

    font-size:32px;

    font-weight:900;

    text-shadow:
    0 3px 8px rgba(0,0,0,0.55);

}

.players-list{

    list-style:none;

    margin:0;

    padding:0;

}

/* Spelerslijst items (Midden - Nu geüpgraded naar 2px zodat de lijn even dik toont!) */
.players-list li{

    margin:0 0 10px;

    padding:12px 15px;

    border-radius:14px;

    background:
    rgba(255,255,255,0.12);

    /* Verhoogd naar 2px solid, zodat de kleurlijn optisch exact even dik is als de witte lijnen links/rechts */
    border: 2px solid #b32d2d !important;

    font-size:17px;

    font-weight:800;

    text-shadow:
    0 2px 6px rgba(0,0,0,0.55);

}

/* ========================================
   FOOTER
======================================== */

footer{

    max-width:1400px;

    margin:35px auto;

    padding:24px;

    border-radius:22px;

    background:
    rgba(255,255,255,0.16);

    border:
    1px solid rgba(255,255,255,0.28);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
    0 8px 24px rgba(0,0,0,0.14);

}

footer p{

    font-size:16px;

    line-height:1.5;

    text-shadow:
    0 2px 6px rgba(0,0,0,0.55);

}

/* ========================================
   MOBILE (Aangepast voor Mobiel)
======================================== */

@media screen and (max-width:900px){

    body{

        background-attachment:scroll !important;
        background-image:none !important;
        background-color:#0d1b10 !important;

    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url('../images/9.png') !important;
        background-size: contain !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
    }

    .container{

        padding:15px;

    }

    .team-top{

        flex-direction:column;

        text-align:center;
        
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;

    }

    .team-name{

        font-size:36px;

    }

    .team-flag{

        width:150px;

    }

    .team-stats{

        grid-template-columns:
        1fr;

    }

    .team-content,
    .players-section,
    .points-section {
        
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        
    }

    .team-content p,
    .points-section p{

        font-size:16px;

    }

    .players-section h2,
    .points-section h2{

        font-size:28px;

    }

}