/* LPD V2 — project-glue (NIET uit de design-handoff).
   De handoff-CSS bevat bewust geen media query; het stappenplan vraagt de
   omschakeling top-nav (>=768px) <-> bottom-nav (<768px) hier te implementeren. */

/* Mobiel: verberg de top-nav, toon de bottom-tab-bar (vast onderaan). */
@media (max-width: 767.98px) {
    .lpd-topnav {
        display: none;
    }

    .lpd-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    /* Ruimte zodat de vaste bottom-nav de inhoud/footer niet overlapt. */
    body.lpd-has-bottomnav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Desktop: verberg de bottom-tab-bar, toon de top-nav. */
@media (min-width: 768px) {
    .lpd-bottomnav {
        display: none;
    }

    /* Gedeelde shell-breedte: nav én inhoud tot 1200px op grote schermen. */
    .lpd-topnav .inner {
        flex-wrap: nowrap;
        max-width: 1200px;
        gap: 14px;
    }

    .lpd-shell {
        max-width: 1200px;
    }

    .lpd-topnav nav {
        flex-wrap: nowrap;
    }

    /* Merknaam mag krimpen i.p.v. de nav naar een tweede regel te duwen. */
    .lpd-topnav .brand {
        min-width: 0;
    }

    .lpd-topnav-actions {
        flex-shrink: 0;
    }
}

/* Rechter cluster in de top-nav (seizoen-keuze, Meer, auth-knoppen). */
.lpd-topnav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dropdown-menu's in de nav mogen NIET de nav-link/pill-styling erven.
   (.lpd-topnav nav a en .lpd-bottomnav a zetten kleur/opmaak op alle <a>.) */
.lpd-topnav .dropdown-menu .dropdown-item,
.lpd-bottomnav .dropdown-menu .dropdown-item {
    color: var(--t-body);
    background: none;
    border-radius: 0;
    padding: 6px 16px;
    font-size: .95rem;
    font-weight: 500;
}

    .lpd-topnav .dropdown-menu .dropdown-item:hover,
    .lpd-bottomnav .dropdown-menu .dropdown-item:hover {
        color: var(--c-accent-deep);
        background: var(--c-tint);
    }

    .lpd-topnav .dropdown-menu .dropdown-item i,
    .lpd-bottomnav .dropdown-menu .dropdown-item i {
        width: 18px;
        margin-right: 6px;
        color: var(--t-subtle);
    }

/* Icoon in de top-nav pills van de tekst houden — de design-CSS zet hier geen
   marge, waardoor icoon en label tegen elkaar plakten. */
.lpd-topnav nav a i {
    margin-right: 7px;
}

    /* Home is enkel een icoon (zie _TopNav): dan geen naloop-marge. */
    .lpd-topnav nav a i:only-child {
        margin-right: 0;
    }

/* Speeldag = het belangrijkste nav-item: in rust een gekleurde accent-OUTLINE
   zodat het opvalt tussen de vlakke pills. Zit je op de speeldag-pagina, dan vult
   .active het pill met accent — zo blijft "belangrijk item" vs "huidige pagina"
   zichtbaar. Outline via inset box-shadow → geen layout-shift t.o.v. de andere pills. */
.lpd-topnav nav a.nav-primary {
    box-shadow: inset 0 0 0 1.5px var(--c-accent);
    color: var(--c-accent-deep);
    font-weight: 700;
}

    .lpd-topnav nav a.nav-primary i {
        color: var(--c-accent);
    }

    .lpd-topnav nav a.nav-primary:not(.active):hover {
        background: var(--c-tint);
    }

    /* Actieve pagina: gevuld accent i.p.v. enkel de outline. */
    .lpd-topnav nav a.nav-primary.active {
        background: var(--c-accent);
        color: var(--c-on-accent);
        box-shadow: var(--sh-accent);
    }

        .lpd-topnav nav a.nav-primary.active i {
            color: inherit;
        }

/* Winnaar in een matchrow (kalender + wedstrijdformulier) duidelijker maken:
   de handoff zette enkel 700 vs 600 — te subtiel volgens de klant. Winnaar krijgt
   de accentkleur; in een beslist duel wordt de verliezer gedempt (:has → niet bij
   nog-te-spelen of gelijkspel, waar geen kant .won heeft). */
.lpd-matchrow .home.won,
.lpd-matchrow .away.won {
    color: var(--c-accent-deep);
    font-weight: 700;
}

.lpd-matchrow:has(.won) .home:not(.won),
.lpd-matchrow:has(.won) .away:not(.won) {
    color: var(--t-muted);
    font-weight: 500;
}

/* ── Speeldag (V2) ─────────────────────────────────────────────
   Smalle, leesbare kolom (lijstweergave) binnen de bredere shell. */
.spd-wrap {
    max-width: 720px;
    margin: 0 auto;
}

.spd-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin-top: 16px;
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
}

    .spd-header .spd-center {
        flex: 1;
        text-align: center;
        min-width: 0;
    }

    .spd-header .spd-title {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        color: var(--t-strong);
    }

        .spd-header .spd-title i {
            color: var(--c-accent);
            margin-right: 8px;
        }

    .spd-header .spd-meta {
        font-size: 11px;
        color: var(--t-muted);
        margin-top: 2px;
    }

.spd-disabled {
    opacity: .35;
    pointer-events: none;
}

.spd-afdeling {
    margin-top: 14px;
    animation: lpd-rise .5s var(--ease, ease) both;
}

/* Volledige kalender: speeldag-scheiding + afdelinggroep (zonder entree-animatie
   omdat de lijst lang kan zijn). */
.cal-sd {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 22px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--c-accent);
}

.cal-sd-naam {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--t-strong);
}

.cal-sd-datum {
    margin-left: auto;
    font-size: 11px;
    color: var(--t-muted);
}

.cal-afd {
    margin-top: 12px;
}

/* Uitblinkers — volledige lijst per categorie, in V2-stijl. */
.spd-stats {
    display: flex;
    gap: 10px;
}

.spd-stat {
    flex: 1;
    min-width: 0;
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
    padding: 10px 12px;
}

.spd-stat-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--c-accent-deep);
    margin-bottom: 8px;
}

    .spd-stat-cat i {
        color: var(--c-accent);
    }

.spd-stat-row {
    padding: 5px 0;
    border-top: 1px solid var(--b-hairline);
}

    .spd-stat-row:first-of-type {
        border-top: none;
    }

.spd-stat-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--t-strong);
}

.spd-stat-team {
    font-size: 10.5px;
    color: var(--t-muted);
}

.spd-stat-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--c-accent-deep);
}

@media (max-width: 767.98px) {
    .spd-stats {
        flex-direction: column;
    }
}

/* ── Wedstrijdformulier (V2) ───────────────────────────────── */
.wf-wrap {
    max-width: 720px; /* gelijk aan de speeldag (.spd-wrap) — consistente breedte + meer ruimte voor de dichtere formulier-rijen */
    margin: 0 auto;
}

.wf-header {
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
    padding: 12px 16px;
    margin-top: 16px;
}

.wf-headtop {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wf-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--c-accent);
    background: var(--c-tint);
    color: var(--c-accent-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s var(--ease, ease), color .15s, border-color .15s;
}

    .wf-back:hover {
        background: var(--c-accent);
        border-color: var(--c-accent);
        color: #fff;
    }

    .wf-back i {
        font-size: 11px;
    }

/* Score bovenaan het wedstrijdformulier: kleur de LEIDER i.p.v. vast de thuisploeg.
   De design-CSS zette .big op accent en enkel .uit op donker → altijd thuis gekleurd.
   Nu: beide standaard donker, en het accent gaat naar de kant met de leider-klasse
   (bij gelijke stand krijgt geen van beide de klasse → allebei neutraal). */
.lpd-score .big .thuis {
    color: var(--t-strong);
}

.lpd-score .big.lead-thuis .thuis {
    color: var(--c-accent);
}

.lpd-score .big.lead-uit .uit {
    color: var(--c-accent);
}

.wf-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    min-width: 0;
}

.wf-phases {
    margin-top: 10px;
}

.wf-alert {
    margin-top: 12px;
}

.lpd-feats {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 12px 0 4px;
}

.wf-section {
    padding: 12px 0 5px;
}

.wf-section-accent {
    color: var(--c-accent-deep);
}

.wf-card-accent {
    border-color: var(--c-tint-border);
}

/* Game-rij op het formulier: index-nummer + de bestaande .lpd-matchrow opmaak. */
.lpd-matchrow .wf-nr {
    width: 18px;
    flex: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    color: var(--c-accent);
    text-align: center;
}

.lpd-matchrow .center.wf-center-actief {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.wf-actions {
    display: flex;
    gap: 5px;
    justify-content: center;
}

    .wf-actions .lpd-iconbtn {
        width: 26px;
        height: 26px;
    }

.wf-todo {
    font-style: italic;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--t-subtle);
    font-size: 11px;
}

.wf-dash {
    color: var(--t-subtle);
}

.wf-spelers {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
}

    .wf-spelers .lpd-btn {
        flex: 1;
    }

.wf-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--c-tint-soft);
    border: 1px solid var(--c-tint-border);
    border-radius: var(--r-ctl);
    font-size: 12px;
    color: var(--c-accent-deep);
}

    .wf-banner i {
        color: var(--c-accent);
    }

.wf-confirm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.wf-prestaties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.wf-prestatie {
    padding: 10px 12px;
}

.wf-prestatie-head {
    margin-bottom: 4px;
}

.wf-prestatie-empty {
    color: var(--t-subtle);
    font-size: 12px;
    padding: 4px 0;
}

.wf-prestatie-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-top: 1px solid var(--b-hairline);
    font-size: 12px;
}

.wf-prestatie-name {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    min-width: 0;
}

    .wf-prestatie-name i {
        color: var(--t-subtle);
        margin-right: 3px;
    }

.wf-prestatie-val {
    color: var(--t-secondary);
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
}

.wf-del {
    color: var(--err);
    font-size: 12px;
    cursor: pointer;
    flex: none;
}

@media (max-width: 767.98px) {
    .wf-prestaties {
        grid-template-columns: 1fr;
    }
}

/* GameScore — score ingeven (leg-picker) */
.wf-score-card {
    margin-top: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wf-scoreteam-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    margin-bottom: 8px;
    color: var(--t-strong);
}

.wf-scorevs {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--t-muted);
}

.wf-scoreactions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

/* Sub-formulieren (spelers kiezen / prestatie-ingave / bevestigen) */
.wf-form-card {
    margin-top: 14px;
    padding: 16px;
}

.wf-field {
    margin-bottom: 12px;
}

    .wf-field:last-child {
        margin-bottom: 0;
    }

    .wf-field label {
        display: block;
        margin-bottom: 5px;
    }

    .wf-field select.lpd-input + select.lpd-input {
        margin-top: 8px;
    }

.wf-of {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--t-muted);
    margin: 6px 0;
}

.wf-hint {
    font-size: 12px;
    color: var(--t-muted);
    margin-bottom: 12px;
}

select.lpd-input {
    cursor: pointer;
}

textarea.lpd-input {
    resize: vertical;
    min-height: 72px;
}

/* ── Ranking (V2) ──────────────────────────────────────────── */
.rnk-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

/* Selector-pills mogen over meerdere regels vallen i.p.v. de rij te laten overlopen.
   De design-CSS zet enkel display:flex (geen wrap), waardoor bv. de bekerranking met
   veel poules een horizontale scrollbalk gaf. De bestaande gap:8px vult meteen de
   verticale ruimte tussen de regels. Geldt voor alle pill-selectors (ranking/beker/ploegen);
   met weinig items verandert er niets (er valt dan niets te wrappen). */
.lpd-pills {
    flex-wrap: wrap;
}

.rnk-title {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

    .rnk-title h1 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.5rem;
        margin: 0;
    }

        .rnk-title h1 i {
            color: var(--c-accent);
            margin-right: 10px;
        }

    .rnk-title .lpd-pills {
        margin-left: auto;
    }

.rnk-afdeling {
    margin-top: 4px;
}

/* De kaart mag horizontaal scrollen op smalle schermen (brede tabel). */
.rnk-table {
    overflow-x: auto;
}

.rnk-team-row {
    display: grid;
    grid-template-columns: 44px 1fr 72px 66px 56px 56px 56px 62px 62px 62px 62px;
    align-items: center;
    text-align: center;
    min-width: 760px;
}

.rnk-ind-row {
    display: grid;
    grid-template-columns: 44px 1fr 76px 66px 56px 76px 76px 62px 62px;
    align-items: center;
    text-align: center;
    min-width: 680px;
}

.rnk-beker-row {
    display: grid;
    grid-template-columns: 44px 1fr 72px 66px 56px 56px 62px 62px 62px 62px;
    align-items: center;
    text-align: center;
    min-width: 700px;
}

.rnk-head {
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 8px 0;
}

.rnk-row {
    padding: 9px 0;
    border-bottom: 1px solid var(--b-hairline);
    font-size: 13px;
}

    .rnk-row.alt {
        background: var(--row-alt);
    }

    .rnk-row:last-child {
        border-bottom: none;
    }

.rnk-name-h {
    text-align: left;
    padding-left: 6px;
}

.rnk-name {
    text-align: left;
    padding-left: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
}

.rnk-ind-name {
    text-align: left;
    padding-left: 6px;
}

    .rnk-ind-name b {
        font-family: var(--font-display);
        font-size: 13.5px;
    }

.rnk-sub {
    color: var(--t-muted);
    font-size: 11.5px;
}

.rnk-nr {
    font-family: var(--font-display);
    font-weight: 700;
}

    .rnk-nr.top {
        color: var(--c-accent);
    }

    .rnk-nr.rest {
        color: var(--t-muted);
    }

.rnk-ok {
    color: var(--ok);
    font-weight: 700;
}

.rnk-err {
    color: var(--err);
}

.rnk-muted {
    color: var(--t-muted);
}

/* Podium-bekers voor top-3 (goud/zilver/brons) i.p.v. een gemarkeerde punten-cel. */
.rnk-cup {
    font-size: 15px;
}

.rnk-gold {
    color: #d4af37;
}

.rnk-silver {
    color: #9aa0a6;
}

.rnk-bronze {
    color: #cd7f32;
}

/* Mobiele rangchip toont de beker zonder het chip-kader/vulkleur. */
.lpd-rankrow .nr.cup {
    border: none;
    background: transparent;
    font-size: 16px;
}

/* Desktop-tabel vs mobiele uitklaprijen. */
.rnk-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .rnk-desktop {
        display: none;
    }

    .rnk-mobile {
        display: block;
    }

    /* De band welded normaal met de eerste .lpd-card; op mobiel is dat de (verborgen)
       desktop-kaart, dus laat de zichtbare mobiele kaart met de band versmelten. */
    .lpd-band + .rnk-desktop + .rnk-mobile {
        border-radius: 0 0 var(--r-card) var(--r-card);
        border-top: none;
    }
}

.rnk-m > summary {
    list-style: none;
    cursor: pointer;
}

    .rnk-m > summary::-webkit-details-marker {
        display: none;
    }

.rnk-m .rnk-m-chev {
    color: var(--c-accent);
    font-size: 11px;
    flex: none;
    transition: transform .2s var(--ease, ease);
}

.rnk-m[open] .rnk-m-chev {
    transform: rotate(180deg);
}

.rnk-m[open] > summary {
    background: var(--c-tint-soft);
}

.rnk-m:last-child > summary {
    border-bottom: none;
}

.rnk-m-body {
    padding: 8px 14px 12px;
    background: var(--c-tint-soft);
    border-bottom: 1px solid var(--b-hairline);
}

.rnk-m:last-child .rnk-m-body {
    border-bottom: none;
}

.rnk-m-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12.5px;
    border-top: 1px solid var(--b-hairline);
}

    .rnk-m-stat:first-child {
        border-top: none;
    }

    .rnk-m-stat > span:first-child {
        color: var(--t-muted);
    }

    .rnk-m-stat > span:last-child {
        font-family: var(--font-display);
        font-weight: 600;
    }

/* ── Ploegen (overzicht) + Ploeg (detail) V2 ──────────────── */
.pl-wrap {
    max-width: 560px;
    margin: 0 auto;
}

.pl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
}

    .pl-header .pl-title {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 16px;
    }

        .pl-header .pl-title i {
            color: var(--c-accent);
            margin-right: 8px;
        }

.pl-pills-wrap {
    margin-top: 12px;
    overflow-x: auto;
}

.pl-section {
    padding: 16px 0 5px;
}

.pl-speeldag {
    margin-top: 12px;
}

/* Uitklapbare ploegkaart (native <details>) */
.pl-team > summary {
    list-style: none;
    cursor: pointer;
}

    .pl-team > summary::-webkit-details-marker {
        display: none;
    }

.pl-team .pl-chevron {
    color: var(--c-accent);
    font-size: 11px;
    flex: none;
    transition: transform .2s var(--ease, ease);
}

.pl-team[open] > summary {
    background: var(--c-tint-soft);
}

.pl-team[open] .pl-chevron {
    transform: rotate(180deg);
}

.pl-team-body {
    padding: 0 14px 12px;
    background: var(--c-tint-soft);
    border-bottom: 1px solid var(--b-hairline);
}

.pl-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    padding-top: 8px;
}

.pl-ic {
    color: var(--c-accent);
    width: 16px;
    margin-top: 2px;
    flex: none;
}

.pl-grow {
    flex: 1;
    line-height: 1.4;
    min-width: 0;
}

.pl-muted {
    color: var(--t-muted);
}

.pl-phone {
    color: var(--c-accent-deep);
    font-weight: 600;
    white-space: nowrap;
}

.pl-team-body .lpd-btn {
    margin-top: 10px;
}

/* Ploeg-detail */
.pld-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
}

.pld-titleblock {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.pld-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
}

.pld-meta {
    font-size: 11px;
    color: var(--t-muted);
    margin-top: 2px;
}

.pld-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.pl-loc-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 8px;
    font-size: 12.5px;
}

.pl-card-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--b-hairline);
}

.pl-cap-row {
    background: var(--c-tint-soft);
}

.pl-cap-sub {
    color: var(--c-accent-deep) !important;
    font-weight: 600;
}

/* Bottom-nav "Meer" (dropup) — boven de vaste balk laten uitklappen. */
.lpd-bottomnav .dropup {
    display: flex;
    align-items: center;
}

.lpd-bottomnav .dropdown-toggle-no-caret {
    cursor: pointer;
}

.lpd-bottomnav .dropdown-menu {
    z-index: 1031;
    font-size: 1rem;
}

/* ── Footer-sectie "Dit seizoen" ───────────────────────────────
   Vervangt de oude "Wist je dit al?"-trivia-carousel. Staat in de donkere footer,
   dus lichte tekst met accent-highlights. Gevoed door SeizoenInfoViewComponent. */
.ftr-info {
    color: rgba(255, 255, 255, .85);
    /* De footer staat op een DONKERE achtergrond (merkkleur-donker; bij het HDV-thema
       zelfs zwart). De normale --c-accent (= merkkleur) is daar te donker → onleesbaar.
       Lokaal een lichte, thema-onafhankelijke accentkleur zetten; alle .ftr-* iconen en
       randen erven die via var(--c-accent). */
    --c-accent: #f6a96b;
}

    .ftr-info h2 {
        color: #fff;
    }

.ftr-info-leeg {
    color: rgba(255, 255, 255, .6);
    font-style: italic;
}

.ftr-next {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 460px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
}

    .ftr-next:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

    .ftr-next > i {
        color: var(--c-accent);
        font-size: 18px;
        flex-shrink: 0;
    }

.ftr-next-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
}

.ftr-next-val {
    display: block;
    font-weight: 700;
}

.ftr-aankondiging {
    display: flex;
    gap: 10px;
    max-width: 480px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border-left: 3px solid var(--c-accent);
}

    .ftr-aankondiging > i {
        color: var(--c-accent);
        margin-top: 3px;
        flex-shrink: 0;
    }

.ftr-aankondiging-body {
    font-size: 14px;
    line-height: 1.4;
}

    /* Wit + onderstreept: leesbare, klikbare link op elke (donkere) footer-achtergrond. */
    .ftr-aankondiging-body a {
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
    }

.ftr-feiten {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 480px;
}

    .ftr-feiten li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        font-size: 14px;
    }

        .ftr-feiten li:last-child {
            border-bottom: none;
        }

        .ftr-feiten li > i {
            color: var(--c-accent);
            width: 18px;
            text-align: center;
            flex-shrink: 0;
        }

    .ftr-feiten strong {
        color: #fff;
    }

/* ── Spelers zoeken (V2) ───────────────────────────────────────
   Vervangt de oude spz-* uit site.css. Zoekformulier = .lpd-inputgroup;
   resultaten = klikbare rijen (rij → teampagina) in een .lpd-card. */
.spz-form {
    margin-top: 14px;
}

.spz-count {
    margin: 12px 2px 6px;
    font-size: 12px;
    color: var(--t-muted);
}

.spz-note {
    margin-top: 12px;
    padding: 16px 18px;
    text-align: center;
    color: var(--t-muted);
}

    .spz-note strong {
        color: var(--t-strong);
    }

.spz-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--b-hairline);
    text-decoration: none;
    color: inherit;
}

    .spz-row:last-child {
        border-bottom: none;
    }

    .spz-row:hover {
        background: var(--c-tint-soft);
    }

.spz-ico {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-tint-soft);
    color: var(--t-muted);
}

    .spz-ico.kap {
        background: var(--c-tint);
        color: var(--c-accent-deep);
    }

.spz-nm {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    color: var(--t-body);
}

    .spz-nm strong {
        color: var(--t-strong);
        font-weight: 700;
    }

.spz-team {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-accent-deep);
    white-space: nowrap;
}

    .spz-team i {
        margin-right: 4px;
    }

/* ── Reglementen (V2) ──────────────────────────────────────────
   De reglement-HTML (CKEditor) leesbaar renderen binnen een V2-kaart. */
.reg-content {
    margin-top: 14px;
    padding: 20px 22px;
    line-height: 1.6;
    color: var(--t-body);
}

    .reg-content > :first-child {
        margin-top: 0;
    }

    .reg-content h1,
    .reg-content h2,
    .reg-content h3,
    .reg-content h4 {
        font-family: var(--font-display);
        color: var(--t-strong);
        margin-top: 1.3em;
    }

    .reg-content a {
        color: var(--c-accent-deep);
    }

    .reg-content ul,
    .reg-content ol {
        padding-left: 1.4em;
    }

    .reg-content img {
        max-width: 100%;
        height: auto;
    }

    .reg-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1em 0;
    }

    .reg-content th,
    .reg-content td {
        border: 1px solid var(--b-1);
        padding: 6px 8px;
        text-align: left;
    }