/* ==========================================================================
   F1 POOL 2026 - MASTER STYLESHEET
   --------------------------------------------------------------------------
   Samengevoegd uit: classic, complete_theme, mobile, f1predict.
   Versie: 2.0 (Geconsolideerd + Verbeterd)
   ========================================================================== */

/* ---------------------------------------------------------
   1. VARIABELEN & RESET
--------------------------------------------------------- */
:root {
    --primary: #ff1a1a;       /* F1 Rood */
    --primary-hover: #d81414;
    --bg-body: #0e0e0e;       /* Diep zwart/grijs */
    --bg-card: #1a1a1a;       /* Iets lichter voor kaarten */
    --bg-input: #111;
    --text-main: #e5e5e5;
    --text-muted: #ccc;
    --border: #333;
    --border-light: #444;
    
    /* Status Kleuren */
    --success: #2ecc71;
    --danger: #e74c3c;
    --glow-green: #7CFF7C;
    --glow-red: #FF7C7C;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--bg-body);
    color: var(--text-main);
    font-family: Arial, sans-serif;
    min-height: 100vh;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: bold;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: 0.2s ease;
}

a:hover {
    color: #fff;
}

/* ---------------------------------------------------------
   2. LAYOUT & CARDS
--------------------------------------------------------- */
.page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px;
}

.page-card,
.card,
.home-card,
.auth-card {
    background: var(--bg-card);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 0 12px rgba(0,0,0,0.45);
}

/* Specifieke Home/Auth tweaks */
.home-card, .auth-card {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.intro-text {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------
   3. HEADER & NAVIGATIE
--------------------------------------------------------- */
.site-header {
    background: #111;
    border-bottom: 3px solid var(--primary);
    padding: 12px 0;
    margin-bottom: 25px;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    position: relative; /* Context voor dropdowns */
}
.site-header {
    /* Dit maakt hem sticky */
    position: sticky; 
    top: 0;
    
    /* Zorg dat hij boven de rest zweeft */
    z-index: 1000; 
    
    /* Belangrijk: Geef het menu een achtergrondkleur, 
       anders zie je de tekst van de pagina er dwars doorheen gaan */
    background-color: #111; /* Of de kleur die je balk nu heeft */
    border-bottom: 2px solid #ff1801; /* Optioneel: rood lijntje onder het menu */
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.logo a { color: #fff; }

/* --- Navigatie Basis --- */
.main-nav {
    display: flex;
    gap: 15px;
    align-items: center;
}

.main-nav a {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #fff;
    font-size: 0.95rem;
}

.main-nav a:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* --- Hamburger Menu (Mobiel) --- */
.hamburger {
    display: none; /* Verborgen op desktop */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    width: 30px;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transition: 0.3s;
}

/* Active State Hamburger */
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translateY(6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }

/* --- Admin Dropdown --- */
.admin-menu {
    position: relative;
    display: inline-block;
}

.admin-btn {
    /* Erft styles van .main-nav a */
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
}

.admin-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.admin-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 120%; /* Iets onder de knop */
    background: #111;
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 180px;
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
}

.admin-menu.open .admin-dropdown {
    display: flex;
}

.admin-dropdown a {
    border: none;
    border-radius: 0;
    text-align: left;
    background: transparent;
    border-bottom: 1px solid #222;
}

.admin-dropdown a:hover {
    background: #222;
    color: var(--primary);
}
.split-image {
    /* ... je bestaande code (background-image etc.) ... */
    
    /* DIT IS DE BELANGRIJKE REGEL: */
    min-height: 400px; 
    
    /* Zorg ook dat hij op mobiel niet te klein wordt */
    width: 100%; 
}

/* Voor grotere schermen (naast elkaar) */
@media (min-width: 768px) {
    .split-header {
        display: flex;
        align-items: stretch; /* Rek de plaat uit tot dezelfde hoogte als de tekst */
    }
    
    .split-image {
        min-height: auto; /* Laat de hoogte bepalen door de tekst ernaast */
        width: 50%; /* Helft van het scherm */
    }
}
/* ---------------------------------------------------------
   4. FORMS, BUTTONS & INPUTS
--------------------------------------------------------- */
/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Labels */
label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Checkboxes (speciale styling) */
input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

/* Buttons */
.button, .btn, .btn-small, .home-button {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    transition: background 0.2s;
}

.button:hover, .btn:hover, .home-button:hover {
    background: var(--primary-hover);
    color: #fff;
}

.button-small, .btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.button-danger {
    background: var(--danger);
}
.button-danger:hover {
    background: #c0392b;
}

.home-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   5. TABELLEN (Admin & Stand)
--------------------------------------------------------- */
.table-wrapper {
    overflow-x: auto;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #111;
    min-width: 600px; /* Zorgt dat tabel niet te klein wordt op mobiel */
}

th, td {
    padding: 12px 15px;
    border-bottom: 1px solid #222;
    text-align: left;
}

th {
    background: #222;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

tr:hover td {
    background: #1d1d1d;
}
/* Zorg voor een handje bij sorteerbare tabellen */
.admin-table th {
    cursor: pointer;
}

.admin-table th:hover {
    background-color: #eee; /* Optioneel: licht effectje bij hover */
    color: #000;
}
/* Forceer een handje bij ELKE tabelkop waar je op kunt klikken */
th[onclick] {
    cursor: pointer !important;
}

/* Hover effect voor deze aanklikbare koppen */
th[onclick]:hover {
    background-color: #333; /* Donkergrijs */
    color: #fff;
}
/* --- Speciale Standen Tabel (Sticky Columns & Scroll Fix) --- */
.standings-table {
    border-collapse: separate; /* Nodig voor sticky borders */
    border-spacing: 0;
}

.standings-table th, .standings-table td {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #222;
    background: #111; /* Standaard achtergrond voor alle cellen */
}

/* Sticky Header (Bovenste rij) */
.standings-table thead th {
    position: sticky;
    top: 0;
    z-index: 20; /* Hoger dan de rest */
    background: #222; /* Iets lichter dan de body */
    border-bottom: 2px solid #444;
}

/* Sticky Kolommen (Positie & Naam) */
.col-rank, .col-name {
    position: sticky;
    z-index: 10; /* Hoger dan gewone cellen, lager dan header */
    background: #111; /* Cruciaal: dekkende achtergrond! */
}

/* Positie (#) blijft links plakken */
.col-rank {
    left: 0;
    width: 30px;
    border-right: 1px solid #333;
}

/* Naam blijft rechts van Positie plakken */
.col-name {
    left: 30px; /* Moet gelijk zijn aan breedte col-rank */
    text-align: left;
    min-width: 150px;
    border-right: 2px solid #444;
    background: #111 !important; /* Forceer achtergrondkleur */
    z-index: 10;
    
    /* DE FIX: Een "kitrandje" aan de linkerkant */
    /* Dit blokkeert het gaatje tussen de # en de Naam */
    box-shadow: -2px 0 0 #111; 
}
/* Intersection: Waar Header en Sticky Kolom elkaar kruisen */
.standings-table thead th.col-rank,
.standings-table thead th.col-name {
    z-index: 30; /* ALLERHOOGSTE: Dit blokje moet altijd bovenop blijven */
    background: #222;
}

/* Totaal kolom (Rechts vastzetten - Optioneel, anders gewoon mee laten scrollen) */
/* --- Totaal kolom (Rechts vastzetten) --- */
.col-total {
    position: sticky;
    right: 0;
    z-index: 10; /* Bovenop de scrollende content */
    background: #111 !important; /* Dekkend zwart/donkergrijs */
    font-weight: bold;
    border-left: 2px solid #444; /* Scheidingslijn aan de linkerkant */
    color: #e10600; /* Optioneel: Totaalscore lekker rood maken */
    
    /* Schaduwtje om te laten zien dat de rest eronderdoor schuift */
    box-shadow: -5px 0 10px rgba(0,0,0,0.5); 
}

/* De Header van de Totaal kolom (Het woord 'Totaal') */
.standings-table thead th.col-total {
    z-index: 30; /* ALLERHOOGSTE: Moet boven de rijen én de andere headers blijven */
    background: #222; /* Iets lichter, net als de rest van de header */
    border-bottom: 2px solid #444;
}

/* Fix voor hover effect op de totaal kolom */
tr:hover .col-total {
    background: #1d1d1d !important;
}
/* Hover effecten (moeten ook sticky cellen kleuren!) */
tr:hover td {
    background: #1d1d1d !important; /* Forceer kleurverandering bij hover */
}
tr:hover .col-rank, tr:hover .col-name {
    background: #1d1d1d !important;
}
/* Achtergrond fix voor sticky rows bij hover */
tr:hover .col-rank, tr:hover .col-name, tr:hover .col-total {
    background: #1d1d1d;
}

///* --- CEL STATUSSEN (STAND) - NEON STYLE --- */

/* Zorg dat de variabelen beschikbaar zijn (voor de zekerheid) */
:root {
    --glow-green: #7CFF7C;
    --glow-red: #FF7C7C;
}

/* 1. GOED (Punten gescoord) - Groene Neon */
.correct-cell { 
    color: var(--glow-green) !important; /* Forceer neon groen */
    font-weight: bold;
    background: rgba(0, 255, 0, 0.1); /* Subtiele groene achtergrond */
    cursor: help;
    transition: all 0.2s;
}

/* De mooie groene gloed bij hover */
.correct-cell:hover {
    background: rgba(0, 255, 0, 0.25);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6); /* HIER ZIT DE GLOED */
    z-index: 50; /* Zorgt dat de gloed over de randjes mag vallen */
}

/* 2. FOUT (Wel voorspeld, 0 punten) - Rode Neon */
.score-zero {
    color: var(--glow-red) !important; /* Forceer neon rood */
    font-weight: bold;
    background: rgba(255, 0, 0, 0.1);
    cursor: help;
    transition: all 0.2s;
}

/* De rode gloed bij hover */
.score-zero:hover {
    background: rgba(255, 0, 0, 0.25);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6); /* RODE GLOED */
    z-index: 50;
}

/* 3. GEMIST (Niet voorspeld) - Donker/Kruisje */
.missed-cell {
    color: #555 !important; /* Donkergrijs */
    background: #050505; /* Bijna zwart */
    cursor: help;
    font-size: 0.8em;
}

.missed-cell:hover {
    color: #aaa !important;
    background: #222;
    box-shadow: inset 0 0 5px #000; /* Geen gloed, maar diepte naar binnen */
}

/* 4. NEUTRAAL (Toekomst) */
.neutral-cell {
    color: #444;
}
/* Compact modus (via JS toggle) */
.table-wrapper.compact .race-col { display: none; }


/* --- SCROLLBAR STYLING (Voor Tabel & Rest van de site) --- */

/* 1. WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px; /* Breedte van verticale scrollbar */
    height: 10px; /* Hoogte van horizontale scrollbar */
}

/* De achtergrond van de scrollbar (de 'baan') */
::-webkit-scrollbar-track {
    background: #111; /* Zwart/Donkergrijs, net als je tabellen */
    border-radius: 4px;
}

/* Het schuifje zelf (de 'duim') */
::-webkit-scrollbar-thumb {
    background: #444; /* Donkergrijs */
    border-radius: 4px;
    border: 2px solid #111; /* Randje eromheen voor mooi effect */
}

/* Als je eroverheen gaat met de muis */
::-webkit-scrollbar-thumb:hover {
    background: #e10600; /* F1 Rood (of gebruik #00d2be voor MOM-blauw als je dat liever hebt) */
}

/* 2. Firefox (Heeft andere syntax) */
* {
    scrollbar-width: thin;          /* Maak hem dunner */
    scrollbar-color: #444 #111;     /* Duim-kleur  Baan-kleur */
}

/* ---------------------------------------------------------
   6. VOORSPELLEN & SPECIFIEKE PAGINA'S
--------------------------------------------------------- */
/* Fieldsets */
.fieldset-block {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    background: #161616;
    margin-bottom: 25px;
}

.fieldset-block legend {
    padding: 0 10px;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: bold;
}

/* Driver Preview Box (JS populate) */
.preview-box {
    margin-top: 10px;
    padding: 10px;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 6px;
    min-height: 50px; /* Voorkomt verspringen */
}

.preview-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.preview-driver { width: 60px; border-radius: 4px; border: 1px solid #333; }
.preview-car { width: 100px; opacity: 0.9; }

/* Status Labels */
.status-open { color: var(--success); font-weight: bold; }
.status-closed { color: var(--danger); font-weight: bold; }

/* Alerts */
.alert { padding: 15px; border-radius: 6px; margin-bottom: 20px; }
.alert-success { background: #1e4d2b; border: 1px solid #2ecc71; color: #fff; }
.alert-error { background: #5c1818; border: 1px solid #e74c3c; color: #fff; }

/* Tooltip (Custom JS) */
#customTooltip {
    position: absolute;
    background: rgba(0,0,0,0.95);
    border: 1px solid var(--border-light);
    padding: 15px;
    border-radius: 8px;
    z-index: 9999;
    pointer-events: none; /* Muis gaat erdoorheen */
    display: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
    font-size: 0.9rem;
    max-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
}

.tt-title { color: var(--primary); font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #333; padding-bottom: 5px;}
.tt-line.good { color: var(--glow-green); }
.tt-line.wrong { color: var(--glow-red); }
.tt-line.neutral { color: #aaa; }
.tt-sep { border-top: 1px solid #333; margin: 8px 0; }
.tt-total { font-weight: bold; color: #fff; margin-top: 5px; }

/* ---------------------------------------------------------
   7. MEDIA QUERIES (RESPONSIVE)
--------------------------------------------------------- */

@media (max-width: 1150px) {
    
    /* --- HEADER & MENU AANPASSINGEN --- */
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    /* Hamburger tonen */
    .hamburger { 
        display: flex !important; 
        margin-left: auto; 
        position: absolute; 
        right: 25px; 
        top: 20px; 
    }

    /* Desktop Menu verbergen en omzetten naar mobiele kolom */
    .main-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        padding-top: 10px;
    }

    /* Menu openen als JS 'open' class toevoegt */
    .main-nav.open { display: flex; }

    .main-nav a { text-align: center; margin-bottom: 5px; }

    /* --- DROPDOWNS OP MOBIEL --- */
    /* Admin & Stand menu's blokkig maken */
    .admin-menu, .stand-menu { width: 100%; display: block; margin-top: 5px; }
    .admin-btn, .stand-btn { width: 100%; text-align: center; display: block; }
    
    .admin-dropdown, .stand-dropdown {
        position: static; /* Geen zwevend menu meer */
        width: 100%;
        background: #0e0e0e;
        border: none;
        border-top: 1px solid #333;
        box-shadow: none;
    }
    
    .admin-dropdown a, .stand-dropdown a {
        padding-left: 20px;
        text-align: center;
    }

    /* --- OVERIGE KLEINE SCHERM TWEAKS --- */
    /* Tabel fonts kleiner zodat het past */
    th, td { padding: 8px; font-size: 0.9rem; }
    
    /* Previews (bij voorspellen) onder elkaar */
    .preview-row { flex-direction: column; text-align: center; }
    
    /* Betaalbalk onder elkaar */
    .payment-alert-bar { flex-direction: column; }
    
    /* Zoekbalk volle breedte */
    .search-wrapper { max-width: 100%; }
}/* ---------------------------------------------------------
   8. FOOTER
--------------------------------------------------------- */
.site-footer {
    margin-top: 50px;
    padding: 20px 0;
    background: #111;           /* Zelfde donkere kleur als header */
    border-top: 1px solid #333; /* Subtiel lijntje erboven */
    color: #888;
    font-size: 0.9rem;
}

.footer-inner {
    max-width: 1200px;          /* Zelfde breedte als de rest van de site */
    margin: 0 auto;             /* Centreert het blok zelf op het scherm */
    text-align: center;         /* Centreert de tekst IN het blok */
    padding: 0 25px;
}

.hero-header {
    /* Het pad naar jouw afbeelding uit het screenshot */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://f1-pool.nl/img/Max_Las_Vegas.jpg');
    
    /* Zorgt dat de foto het hele blok vult en gecentreerd blijft */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Hoogte instellen: 60% van het scherm (viewport height) */
    height: 60vh; 
    
    /* Flexbox om de tekst netjes in het midden te zetten */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white; /* Witte tekst voor contrast */
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px #000000; /* Zwarte schaduw voor leesbaarheid */
}

.hero-content p {
    font-size: 1.5em;
    text-shadow: 1px 1px 3px #000000;
}

/* In je style.css plakken */

/* De blokken met een randje eromheen */
.fieldset-block {
    border: 1px solid #333; /* Subtiele rand */
    background: rgba(255, 255, 255, 0.02); /* Heel licht lichter dan de achtergrond */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.fieldset-block legend {
    padding: 0 10px;
    color: #aaa; /* Lichte tekst kleur voor de titel */
    font-weight: 600;
}

/* Het speciale info blokje bij de sponsor keuze */
.sponsor-info-box {
    background: rgba(var(--primary-rgb), 0.1); /* Vleugje van je rode kleur */
    border-left: 3px solid var(--primary, #e10600); /* Rood balkje links */
    padding: 12px;
    margin-top: -10px; /* Iets dichter op de select */
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: #ccc;
    border-radius: 0 4px 4px 0;
}

/* Het i-tje voor info */
.info-icon {
    cursor: help;
    color: var(--primary, #e10600);
    font-weight: bold;
    margin-left: 5px;
}

/* Zorg dat dropdowns (select) net zo mooi zijn als inputs */
select {
    width: 100%;
    padding: 12px;
    background-color: #111;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    appearance: none; /* Verwijdert standaard browser pijl */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

select:focus {
    outline: none;
    border-color: var(--primary, #e10600);
}
/* GRID LAYOUT VOOR VOORSPELLEN */
.prediction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

/* DE KAART (P1, P2 etc) */
.pred-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pred-card:hover {
    border-color: var(--primary, #e10600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(225, 6, 0, 0.2);
}

.pred-pos-label {
    font-size: 0.9em;
    color: #888;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 5px;
}

.pred-driver-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    border: 2px solid #333;
    background: #000;
}

.pred-driver-name {
    font-weight: bold;
    color: #fff;
    margin-top: 5px;
    font-size: 0.95em;
}

.pred-team-name {
    font-size: 0.8em;
    color: #aaa;
}

.pred-empty-state {
    color: #555;
    font-style: italic;
    margin-top: 20px;
}

/* MAX VERSTAPPEN BLOK APART */
.max-pred-block {
    background: linear-gradient(135deg, rgba(225,6,0,0.1) 0%, rgba(0,0,0,0) 100%);
    border: 1px solid var(--primary, #e10600);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* MODAL (POPUP) STYLING */
.driver-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none; /* Verborgen tot klik */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.driver-modal.active {
    display: flex;
}

.modal-content {
    background: #111;
    border: 1px solid #444;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1a1a;
    position: sticky;
    top: 0;
}

.driver-list-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #222;
    cursor: pointer;
    transition: background 0.1s;
}

.driver-list-item:hover {
    background: #222;
}

.driver-list-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

/* --- STYLING VOOR STANDEN DROPDOWN --- */

/* De container van de dropdown */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* De knop zelf (ziet eruit als een link) */
.nav-dropbtn {
    background: none;
    border: none;
    color: #ccc; /* Zelfde kleur als je andere links */
    font-size: 1rem;
    cursor: pointer;
    padding: 10px 15px;
    font-family: inherit;
    text-transform: uppercase;
    font-weight: bold;
    transition: color 0.2s;
}

.nav-dropbtn:hover, .nav-dropdown:hover .nav-dropbtn {
    color: #e10600; /* Je rode hover kleur */
}

/* De uitklaplijst (verborgen) */
.nav-dropdown-content {
    display: none;
    position: absolute;
    background-color: #222; /* Donkere achtergrond */
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1000;
    border-top: 2px solid #e10600;
    border-radius: 0 0 4px 4px;
}

/* De links in de dropdown */
.nav-dropdown-content a {
    color: #fff !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    border-bottom: 1px solid #333;
    font-size: 0.9em;
}

.nav-dropdown-content a:last-child {
    border-bottom: none;
}

.nav-dropdown-content a:hover {
    background-color: #333;
    color: #e10600 !important;
}

/* Toon menu bij hover */
.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

/* --- MOBIELE AANPASSINGEN --- */
@media (max-width: 768px) {
    .nav-dropdown {
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .nav-dropbtn {
        width: 100%;
        text-align: center;
        padding: 15px;
        border-bottom: 1px solid #333;
    }
    
    .nav-dropdown-content {
        position: static; /* Niet meer absoluut, duwt content naar beneden */
        display: none; /* Standaard dicht */
        width: 100%;
        box-shadow: none;
        border-top: none;
        background-color: #1a1a1a; /* Iets donkerder voor contrast */
    }
    
    .nav-dropdown:hover .nav-dropdown-content {
        display: block;
    }
    
    .nav-dropdown-content a {
        padding-left: 30px; /* Iets inspringen op mobiel */
        color: #aaa !important;
    }
}

/* --- Stand Dropdown --- */
.stand-menu {
    position: relative;
    display: inline-block;
}

.stand-btn {
    /* Erft styles van .main-nav a */
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
}

.stand-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.stand-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%; /* Iets onder de knop */
    background: #111;
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 180px;
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
}

.stand-menu.open .stand-dropdown {
    display: flex;
}

.stand-dropdown a {
    border: none;
    border-radius: 0;
    text-align: left;
    background: transparent;
    border-bottom: 1px solid #222;
}

.stand-dropdown a:hover {
    background: #222;
    color: var(--primary);
}

/* Voeg dit toe onderaan je CSS bestand */
.stand-menu:hover .stand-dropdown {
    display: flex;
}
/* =========================================
   MOBIEL SPECIFIEKE REGELS VOOR DE STAND KNOP
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. De container moet de hele breedte pakken */
    .stand-menu {
        display: block;
        width: 100%;
        margin-top: 5px;
    }

    /* 2. De knop zelf moet uitrekken tot 100% */
    .stand-btn {
        width: 100%;           /* Vul de hele breedte */
        display: block;        /* Gedraag je als een blok */
        text-align: center;    /* Tekst in het midden */
        box-sizing: border-box; /* Zorg dat padding meetelt in de breedte */
    }

    /* 3. Het uitklapmenu moet niet zweven, maar de rest naar beneden duwen */
    .stand-dropdown {
        position: static;      /* Niet meer absolute/zwevend */
        width: 100%;           /* Volle breedte */
        box-shadow: none;      /* Geen schaduw op mobiel */
        border: none;          /* Randje weg */
        border-top: 1px solid #333; /* Alleen randje boven */
        background: #0e0e0e;   /* Iets donkerder achtergrond */
    }
    
    /* 4. Linkjes in het menu iets inspringen */
    .stand-dropdown a {
        padding-left: 20px;    /* Laat zien dat het een submenu is */
        text-align: center;
    }
}

/* =========================================
   MOBIELE STAND (CARD LAYOUT)
   ========================================= */

/* Standaard: Verberg de mobiele kaarten op desktop */
.mobile-standings {
    display: none;
}

@media (max-width: 900px) {
    
    /* 1. Verberg de grote tabel */
    .standings-card .table-wrapper {
        display: none;
    }
    
    /* 2. Toon de mobiele kaarten */
    .mobile-standings {
        display: block;
    }

    /* 3. Styling van de kaarten */
    .stand-card {
        background: #1a1a1a;
        border: 1px solid #333;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden; /* Zorgt dat de uitklap netjes binnen boord blijft */
        transition: border-color 0.2s;
    }

    .stand-card.active {
        border-color: var(--primary, #e10600);
    }

    /* Header (altijd zichtbaar) */
    .stand-card-header {
        display: flex;
        align-items: center;
        padding: 15px;
        cursor: pointer;
        background: #161616;
    }

    .stand-rank {
        font-size: 1.2rem;
        font-weight: bold;
        color: #666;
        width: 40px;
        text-align: center;
        border-right: 1px solid #333;
        margin-right: 15px;
    }

    /* Top 3 kleurtjes */
    .stand-card:nth-child(1) .stand-rank { color: #FFD700; text-shadow: 0 0 5px rgba(255,215,0,0.3); } /* Goud */
    .stand-card:nth-child(2) .stand-rank { color: #C0C0C0; } /* Zilver */
    .stand-card:nth-child(3) .stand-rank { color: #CD7F32; } /* Brons */

    .stand-info {
        flex: 1; /* Neemt resterende ruimte in */
    }

    .stand-name {
        font-weight: bold;
        font-size: 1.1rem;
        color: #fff;
    }

    .missed-crosses {
        font-size: 0.7em;
        margin-left: 5px;
    }

    .stand-details-hint {
        font-size: 0.75rem;
        color: #555;
        margin-top: 2px;
    }

    .stand-total {
        font-size: 1.4rem;
        font-weight: bold;
        color: var(--primary, #e10600);
        text-align: right;
    }

    /* Body (verborgen tot klik) */
    .stand-card-body {
        display: none; /* Verborgen */
        padding: 15px;
        background: #111;
        border-top: 1px solid #333;
    }

    .stand-card.active .stand-card-body {
        display: block; /* Zichtbaar bij active class */
        animation: slideDown 0.2s ease-out;
    }

    /* Grid voor de race puntjes */
    .race-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 10px;
    }

    .race-item {
        background: #222;
        padding: 5px;
        border-radius: 4px;
        text-align: center;
        border: 1px solid #333;
    }

    .race-name {
        display: block;
        font-size: 0.7em;
        color: #888;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .race-score {
        display: block;
        font-weight: bold;
        color: #fff;
    }

    .score-good { color: #2ecc71; } /* Groen voor punten */
    .score-neutral { color: #555; } /* Grijs voor 0 */
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobiele Tooltip Styling */
.race-item {
    cursor: pointer; /* Laat zien dat je kunt klikken */
    /* ... je bestaande styles ... */
}

/* Wanneer de tooltip op mobiel actief is (via JS klasse) */
#customTooltip.mobile-popup {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%); /* Precies in het midden */
    width: 90%;
    max-width: 350px;
    max-height: 80vh;
    overflow-y: auto;
    background: #111;
    border: 2px solid #e10600; /* Rood randje voor de focus */
    box-shadow: 0 0 50px rgba(0,0,0,0.9);
    z-index: 10000; /* Boven alles */
    padding: 20px;
    border-radius: 12px;
}
#customTooltip.mobile-popup {
    /* ... je bestaande regels ... */
    
    /* Voeg deze toe voor de zekerheid: */
    z-index: 999999 !important; /* Altijd boven alles */
    visibility: visible !important;
    opacity: 1 !important;
}

#tooltip-overlay {
    /* ... je bestaande regels ... */
    z-index: 999998 !important; /* Net onder de popup, maar boven de rest */
}
/* Een donkere achtergrond achter de popup */
#tooltip-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    backdrop-filter: blur(2px);
}

#tooltip-overlay.active {
    display: block;
}


/* --- ZOEKBALK STIJL --- */
.search-wrapper {
    position: relative;
    max-width: 400px; /* Niet te breed op desktop */
}

.search-input {
    width: 100%;
    padding: 12px 15px;
    padding-left: 40px; /* Ruimte voor het icoontje als je die met CSS zou doen, of gewoon ruim */
    background: #111;
    border: 1px solid #333;
    border-radius: 25px; /* Mooie ronde hoeken */
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--primary, #e10600);
    box-shadow: 0 0 10px rgba(225, 6, 0, 0.2);
    outline: none;
    background: #0e0e0e;
}

/* Op mobiel mag hij de volle breedte pakken */
@media (max-width: 768px) {
    .search-wrapper {
        max-width: 100%;
    }
}    
/* --- BETAAL MELDING (HEADER) --- */
.payment-alert-bar {
    background-color: #d35400; /* Duidelijk oranje */
    color: #fff;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    display: flex;
    flex-direction: column; /* Op mobiel onder elkaar */
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e67e22;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    position: relative;
    z-index: 900;
}

.pay-button {
    background-color: #fff;
    color: #d35400;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pay-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
    color: #d35400; 
}

@media (min-width: 768px) {
    .payment-alert-bar {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }
}

/* OUDE JOKER STIJL VERVANGEN DOOR DEZE: */
    .joker-toggle { 
        cursor: pointer; 
        display: flex; 
        align-items: center; 
        gap: 10px; 
        /* Elektrisch thema: Donkerblauw/Zwart met Neon Cyaan */
        background: linear-gradient(90deg, #0b1a26 0%, #000 100%); 
        border: 1px solid #00d2be; /* Mercedes/Electric Blue kleur */
        padding: 12px; 
        border-radius: 6px; 
        width: 100%; 
        transition: all 0.3s ease;
        box-shadow: 0 0 5px rgba(0, 210, 190, 0.2);
    }
    .joker-toggle:hover { 
        box-shadow: 0 0 15px rgba(0, 210, 190, 0.6);
        border-color: #fff;
    }
    .joker-toggle input:checked + span { 
        color: #00d2be; 
        font-weight: bold; 
        text-shadow: 0 0 8px rgba(0, 210, 190, 0.8);
    }
    .joker-icon {
        font-size: 1.2em;
    }
    
    /* Als hij verbruikt is */
    .joker-disabled {
        background: #222; 
        border: 1px solid #444; 
        color: #666; 
        padding: 10px; 
        border-radius: 6px; 
        width: 100%; 
        text-align: center;
        font-style: italic;
    }