/*
|--------------------------------------------------------------------------
| Aanmelden
|--------------------------------------------------------------------------
*/
.wk-signup-card{
max-width:800px;
margin:0 auto 30px;
}

.wk-signup-header{
text-align:center;
}

.wk-signup-icon{
font-size:48px;
margin-top: 10px;
margin-bottom: 30px;
}

.wk-signup-form{
margin-top:30px;
display:flex;
flex-direction:column;
gap:20px;
}

.wk-signup-group label{
display:block;
margin-bottom:8px;
font-weight:600;
color:#111827;
}

.wk-signup-group input{
width:100%;
padding:14px 16px;
border:1px solid #d1d5db;
border-radius:10px;
font-size:16px;
}

.wk-signup-group input:focus{
outline:none;
border-color:#0062ad;
box-shadow:0 0 0 3px rgba(0,98,173,.10);
}

.wk-signup-submit{
width:100%;
padding:16px;
background:#0062ad;
color:#fff;
border:none;
border-radius:10px;
font-size:18px;
font-weight:700;
cursor:pointer;
}

.wk-signup-submit:hover{
background:#004f8c;
}

.wk-steps{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
margin-top:25px;
}

.wk-step{
background:#f8fafc;
border-radius:10px;
padding:20px;
text-align:center;
}

.wk-step-number{
font-size:24px;
margin-bottom:10px;
}

.wk-step-text{
font-size:14px;
font-weight:600;
}

@media(max-width:768px){

.wk-steps{
    grid-template-columns:1fr;
}

}

/*

Dashboard

–––––––––––––––––––––––––––––––––––––

*/

.wk-container{
max-width:1200px;
margin:0 auto;
padding-bottom:40px;
}

/*

Algemene kaarten

–––––––––––––––––––––––––––––––––––––

*/

.wk-card{
background:#fff;
border-radius:12px;
padding:30px;
margin-bottom:30px;
box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.wk-card h2{
margin-top:0;
margin-bottom:20px;
}

/*

Dashboard header

–––––––––––––––––––––––––––––––––––––

*/

.wk-title{
font-size:42px;
margin-bottom:10px;
color:#111827;
}

.wk-subtitle{
font-size:18px;
color:#6b7280;
margin-bottom:25px;
}

.wk-input{
min-width:300px;
padding:12px 15px;
border:1px solid #d1d5db;
border-radius:8px;
background:#fff;
font-size:16px;
}

/*

Dashboard statistieken

–––––––––––––––––––––––––––––––––––––

*/

.wk-dashboard-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin:50px 0;
}

.wk-stat-card{
text-align:center;
padding:25px;
margin-bottom:0;
}

.wk-stat-card h3{
font-size:18px;
font-weight:500;
color:#6b7280;
margin:0 0 15px;
}

.wk-stat-number{
font-size:52px;
font-weight:700;
color:#0062ad;
line-height:1;
}

/*

Bonus status

–––––––––––––––––––––––––––––––––––––

*/

.wk-alert{
padding:15px 20px;
border-radius:8px;
margin-bottom:15px;
}

.wk-alert-success{
background:#ecfdf5;
border:1px solid #10b981;
color:#065f46;
}

.wk-alert-warning{
background:#fff8d7;
border:1px solid #e6cf6d;
color:#8a6d00;
}

/*

Acties

–––––––––––––––––––––––––––––––––––––

*/

.wk-action-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:20px;
}

.wk-action-card{
display:block;
text-align:center;
padding:20px;
background:#f8fafc;
border-radius:10px;
text-decoration:none;
font-weight:600;
color:#0062ad;
box-shadow:0 2px 8px rgba(0,0,0,.05);
transition:.2s ease;
}

.wk-action-card:hover{
background:#0062ad;
color:#fff;
transform:translateY(-2px);
}

/*

Volgende wedstrijd

–––––––––––––––––––––––––––––––––––––

*/

.wk-next-match{
background:#fff;
border-radius:12px;
padding:40px;
text-align:center;
margin:50px auto;
box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.wk-next-match h2{
margin-bottom:15px;
}

.wk-next-match-row{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
margin-bottom:30px;
}

.wk-next-team{
display:flex;
align-items:center;
gap:18px;
min-width:320px;
}

.wk-next-flag{
width:82px;
height:54px;
object-fit:cover;
border-radius:6px;
box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.wk-next-team-name{
font-size:42px;
font-weight:700;
color:#0f172a;
}

.wk-next-team-home{
justify-content:flex-end;
}

.wk-next-team-away{
justify-content:flex-start;
}
.wk-next-vs{
font-size:46px;
font-weight:700;
color:#0f172a;
}

.wk-next-date{
font-size:18px;
color:#64748b;
margin-bottom:12px;
}

.wk-next-venue{
font-size:16px;
color:#64748b;
}

@media(max-width:768px){

    .wk-next-match-row{

        display:flex;

        flex-direction:column;

        gap:5px;

        align-items:center;

    }

    .wk-next-team{

        min-width:auto;

        width:100%;

        justify-content:center !important;

    }

    .wk-next-team-home,

    .wk-next-team-away{

        justify-content:center !important;

    }

    .wk-next-team-home{

        flex-direction:column;

    }

    .wk-next-team-away{

        flex-direction:column;

    }

    .wk-next-vs{

        font-size:32px;

        display:block;

    }

    .wk-next-team-name{

        font-size:32px;

        text-align:center;

        margin-top:10px;

    }

    .wk-next-flag{

        width:90px;

        height:60px;

    }

}

/*

Buttons

–––––––––––––––––––––––––––––––––––––

*/

.wk-button,
.wk-button-secondary{
display:inline-block;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
font-weight:600;
}

.wk-button{
background:#0062ad;
color:#fff;
}

.wk-button:hover{
background:#004f8c;
}

.wk-button-secondary{
background:#666;
color:#fff;
}

/*

Responsive

–––––––––––––––––––––––––––––––––––––

*/

@media(max-width:900px){

.wk-dashboard-grid{
    grid-template-columns:repeat(2,1fr);
}
.wk-action-grid{
    grid-template-columns:repeat(2,1fr);
}
.wk-next-teams{
    font-size:32px;
}

}

@media(max-width:600px){

.wk-dashboard-grid{
    grid-template-columns:1fr;
}
.wk-action-grid{
    grid-template-columns:1fr;
}
.wk-title{
    font-size:32px;
}
.wk-input{
    width:100%;
    min-width:auto;
}
.wk-next-match{
    padding:25px;
}
.wk-next-teams{
    font-size:26px;
}
.wk-stat-number{
    font-size:42px;
}

}
/*
|--------------------------------------------------------------------------
| voorspellingen
|--------------------------------------------------------------------------
*/

.wk-predictions-page {
    max-width: 1180px;
    margin: 0 auto;
}

.wk-predictions-header {
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

.wk-title {
    font-size: 42px;
    margin-bottom: 8px;
    color: #111827;
}

.wk-subtitle {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 16px;
}

.wk-participant-form {
    text-align: center;
}

.wk-participant-form .wk-input {
    min-width: 230px;
    padding: 8px 14px;
    border: 1px solid #cfd4dc;
    border-radius: 6px;
    background: #fff;
    font-size: 16px;
}

.wk-round-title {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 28px 0 18px;
}

.wk-round-title span {
    flex: 1;
    height: 1px;
    background: #d1d5db;
}

.wk-round-title h2 {
    margin: 0;
    font-size: 30px;
    color: #111827;
    white-space: nowrap;
}

.wk-match-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 22px 12px;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.wk-match-prediction-row {
    display: grid;
    grid-template-columns: 130px 1fr 130px;
    align-items: center;
    gap: 18px;
}

.wk-flag-side {
    display: flex;
    align-items: center;
}

.wk-flag-home {
    justify-content: flex-end;
}

.wk-flag-away {
    justify-content: flex-start;
}

.wk-team-flag {
    width: 82px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

.wk-choice-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 18px;
    align-items: center;
}

.wk-choice-btn {
    cursor: pointer;
    display: block;
}

.wk-choice-btn input {
    display: none;
}

.wk-choice-btn span {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    transition: all 0.18s ease;
}

.wk-choice-btn:hover span {
    border-color: #0062ad;
    color: #0062ad;
}

.wk-choice-btn.is-selected span,
.wk-choice-btn input:checked + span {
    border-color: #0062ad;
    color: #0062ad;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(0, 98, 173, 0.09);
}

.wk-choice-btn input:disabled + span {
    cursor: not-allowed;
    background: #f9fafb;
}

.wk-match-meta {
    margin-top: 10px;
    text-align: center;
    color: #374151;
    font-size: 15px;
}

.wk-match-meta span {
    display: inline-block;
    margin: 0 8px;
}

.wk-meta-separator {
    color: #9ca3af;
}

.wk-locked-text {
    margin-top: 8px;
    text-align: center;
    color: #b45309;
    font-size: 14px;
    font-weight: 600;
}

.wk-match-card.is-locked {
    opacity: 0.82;
}

.wk-save-card {
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

.wk-save-card .wk-button {
    border-radius: 999px;
    padding: 12px 28px;
    background: #0062ad;
    border: none;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.wk-save-card .wk-button:hover {
    background: #004f8c;
}

/* Tablet */

@media (max-width: 900px) {
    .wk-match-prediction-row {
        grid-template-columns: 90px 1fr 90px;
        gap: 12px;
    }

    .wk-team-flag {
        width: 68px;
        height: 45px;
    }

    .wk-choice-buttons {
        gap: 10px;
    }
}

/* Mobiel */

@media (max-width: 700px) {
    .wk-title {
        font-size: 32px;
    }

    .wk-subtitle {
        font-size: 16px;
    }

    .wk-round-title {
        gap: 14px;
    }

    .wk-round-title h2 {
        font-size: 24px;
    }

    .wk-match-card {
        padding: 16px;
    }

    .wk-match-prediction-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wk-flag-home,
    .wk-flag-away {
        justify-content: center;
    }

    .wk-choice-buttons {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wk-team-flag {
        width: 86px;
        height: 56px;
    }

    .wk-match-meta span {
        display: block;
        margin: 5px 0;
    }

    .wk-meta-separator {
        display: none !important;
    }
}

/*
|--------------------------------------------------------------------------
| Bonusvragen
|--------------------------------------------------------------------------
*/

.wk-bonus-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

@media(max-width:768px){

    .wk-bonus-grid{

        grid-template-columns:1fr;

    }

}

/*
|--------------------------------------------------------------------------
| Klassement
|--------------------------------------------------------------------------
*/

.wk-stand-table{
    width:100%;
    border-collapse:collapse;
}

.wk-stand-table th,
.wk-stand-table td{
    padding:12px;
    border-bottom:1px solid #eee;
}

.wk-stand-table th{
    text-align:left;
    background:#f5f5f5;
}

.wk-podium{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.wk-podium-card{
    background:#f5f5f5;
    padding:20px;
    border-radius:8px;
    text-align:center;
}

.wk-podium-position{
    font-size:24px;
    font-weight:bold;
    color:#0062ad;
}

.wk-podium-name{
    margin-top:10px;
    font-weight:600;
}

.wk-podium-points{
    margin-top:10px;
}

.wk-points-table{
    width:100%;
}

.wk-points-table td{
    padding:10px;
    border-bottom:1px solid #eee;
}

@media(max-width:768px){

    .wk-podium{
        grid-template-columns:1fr;
    }

}

/*
Uitslagen
–––––––––––––––––––––––––––––––––––––
*/

.wk-round-title{
margin:40px 0 20px;
}

.wk-round-title h2{
font-size:42px;
font-weight:700;
color:#0f172a;
margin:0;
}

.wk-result-row{
background:#fff;
border-radius:10px;
padding:12px 18px;
margin-bottom:8px;
box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.wk-result-teams{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:15px;
}

.wk-result-home{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}

.wk-result-away{
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
}

.wk-result-home span,
.wk-result-away span{
font-size:18px;
font-weight:600;
color:#111827;
}

.wk-result-flag{
width:42px;
height:28px;
object-fit:cover;
border-radius:3px;
box-shadow:0 1px 3px rgba(0,0,0,.15);
}

.wk-result-score{
font-size:28px;
font-weight:700;
min-width:90px;
text-align:center;
margin:0;
}

.wk-result-meta{
margin-top:4px;
text-align:center;
color:#6b7280;
font-size:13px;
}

.wk-result-penalties{
margin-top:6px;
text-align:center;
color:#b45309;
font-size:13px;
}

.wk-result-winner{
margin-top:6px;
text-align:center;
font-size:13px;
}

.wk-result-winner strong{
color:#0062ad;
}

/*

Mobiel

–––––––––––––––––––––––––––––––––––––

*/

@media(max-width:768px){

.wk-round-title h2{
    font-size:34px;
}
.wk-result-row{
    padding:16px;
}
.wk-result-teams{
    grid-template-columns:1fr;
    gap:10px;
}
.wk-result-home,
.wk-result-away{
    justify-content:center;
    flex-direction:column;
    gap:8px;
}
.wk-result-home span,
.wk-result-away span{
    text-align:center;
}
.wk-result-score{
    font-size:30px;
}
.wk-result-flag{
    width:72px;
    height:48px;
}
.wk-result-meta{
    margin-top:10px;
}

}

/*
|--------------------------------------------------------------------------
| Spelregels
|--------------------------------------------------------------------------
*/

/*

Spelregels

–––––––––––––––––––––––––––––––––––––

*/

.wk-rules-section{
margin-top:30px;
}

.wk-rules-section .wk-card{
margin-bottom:25px;
}

.wk-rules-section h2{
margin-top:0;
margin-bottom:20px;
color:#111827;
}

.wk-rules-section p{
color:#6b7280;
line-height:1.7;
}

.wk-rules-section ul{
margin:0;
padding-left:20px;
}

.wk-rules-section li{
margin-bottom:12px;
color:#374151;
}

/*

Tabellen

–––––––––––––––––––––––––––––––––––––

*/

.wk-rules-table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

.wk-rules-table th,
.wk-rules-table td{
padding:14px 16px;
border-bottom:1px solid #e5e7eb;
text-align:left;
}

.wk-rules-table th{
width:320px;
background:#f8fafc;
color:#111827;
font-weight:600;
}

.wk-rules-table td{
color:#0062ad;
font-weight:600;
}

/*

Voorbeelden

–––––––––––––––––––––––––––––––––––––

*/

.wk-example-box{
background:#f8fafc;
border-left:4px solid #0062ad;
border-radius:6px;
padding:18px 20px;
margin:15px 0;
color:#111827;
line-height:1.6;
}

/*

Highlight cards

–––––––––––––––––––––––––––––––––––––

*/

.wk-rules-highlight{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
}

.wk-rules-highlight-item{
background:#f8fafc;
border-radius:10px;
padding:20px;
text-align:center;
}

.wk-rules-highlight-item strong{
display:block;
font-size:22px;
color:#0062ad;
margin-bottom:8px;
}

/*

Mobiel

–––––––––––––––––––––––––––––––––––––

*/

@media(max-width:768px){

.wk-rules-table{
    display:block;
    overflow-x:auto;
}
.wk-rules-table th{
    min-width:220px;
}
.wk-rules-highlight{
    grid-template-columns:1fr;
}
.wk-rules-section h2{
    font-size:28px;
}

}