/**
 * Campingkompas – Design-system normalisatie (restyle-laag)
 *
 * Doel: één samenhangend uiterlijk over de hele site zonder de HTML-structuur
 * of functionaliteit te wijzigen. Deze laag wordt als laatste geladen (na het
 * theme en de plugin-CSS) en normaliseert de meest herhaalde componenten:
 * statistiektegels, kaarten, zoekbalk en pagina-koppen.
 *
 * Gekozen richting = "mengvorm": de rust en consistentie van een strakke,
 * roomige opzet met behoud van het warme merk (groen/crème, Playfair-serif,
 * zachte gekleurde icoonaccenten).
 *
 * Tokens (afgestemd op de bestaande --cc-* variabelen):
 *   wit/surface   #ffffff
 *   border        #e8e3d8 (hairline)
 *   schaduw       0 1px 3px rgba(31,45,34,.06)
 *   radius        16px (tegels/kaarten), 14px (zoekbalk)
 *   serif-cijfer  #1f3d2e (donkergroen)
 *   label         #6b7280 (gedempt)
 *   icoon-chip    groen #e7f3ec · blauw #e7f0fd · donker #ecedf1 · oranje #fdefda
 */

:root {
    --cc-rs-surface:    #ffffff;
    --cc-rs-border:     #e8e3d8;
    --cc-rs-schaduw:    0 1px 3px rgba(31, 45, 34, .06);
    --cc-rs-radius:     16px;
    --cc-rs-getal:      #1f3d2e;
    --cc-rs-label:      #6b7280;
}

/* Donkere modus: zelfde tokens, donkere waarden — zo kleuren
   alle restyle-oppervlakken (snelstats, zoekpill, taalkiezer)
   automatisch mee en glimmen ze niet wit op. */
:root.cc-dark {
    --cc-rs-surface:    #232630;
    --cc-rs-border:     #3a3f4c;
    --cc-rs-schaduw:    0 1px 3px rgba(0, 0, 0, .4);
    --cc-rs-getal:      #f0ede8;
    --cc-rs-label:      #9ca3af;
    /* Donkere modus gebruikte een fel/neon groen (#4ade80) dat opgloeide op
       de donkere achtergrond. Terug naar een rustiger, natuurlijker groen dat
       overal matcht (knoppen, chips, accenten) en witte tekst leesbaar houdt. */
    --cc-groen:         #3e8e63 !important;
    --cc-groen-licht:   #4f9d76 !important;
    --cc-accent:        #3e8e63 !important;
}

/* ════════════════════════════════════════
   STATISTIEKTEGELS – home, kaart, paklijst (.cc-stat-card)
   Gekleurde app-stijl tegels (gebruikerswens 2026-07-02:
   "de kleuren die wij hadden"): elke tegel zijn eigen kleur
   uit het bestaande mobiele app-palet, met icoon, cijfer en
   label gecentreerd op één as zodat alles strak uitlijnt.
   Tegels zonder kleur-modifier (bijv. "Bekijk kaart") vallen
   terug op groen.
════════════════════════════════════════ */

/* Tegelrij — één consistente layout op ELKE pagina (de compacte
   look van de Statistieken-pagina): flex-rij die NOOIT afbreekt.
   Elke tegel groeit tot max 180px (zo blijven ze op profiel niet
   opgeblazen) en krimpt mee op smalle schermen zodat ook op een
   iPhone alle 4 (of 5) tegels netjes op ÉÉN rij staan. De rij
   wordt gecentreerd en de oude 660px-cap is opgeheven. */
.cc-stats-rij,
.cc-trips-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 14px !important;
    max-width: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
}
.cc-stats-rij > .cc-stat-card,
.cc-stats-rij .cc-stat-card,
.cc-trips-stats > .cc-stat-card,
.cc-trips-stats .cc-stat-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 156px !important;
    width: auto !important;
}
/* Compacter op smalle schermen zodat 4-5 tegels leesbaar op één rij passen */
@media (max-width: 560px) {
    .cc-stats-rij,
    .cc-trips-stats { gap: 8px !important; }
    .cc-stats-rij .cc-stat-card,
    .cc-trips-stats .cc-stat-card { padding: 12px 8px !important; }
    .cc-stat-card__icon { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
    .cc-stat-card__getal { font-size: 1.25rem !important; }
    .cc-stat-card__label { font-size: .66rem !important; }
}

.cc-stat-card,
.cc-stat-card--groen,
.cc-stat-card--blauw,
.cc-stat-card--donker,
.cc-stat-card--oranje {
    background: #2d6a4f !important;
    border: 0 !important;
    border-radius: var(--cc-rs-radius) !important;
    box-shadow: 0 6px 16px rgba(31, 45, 34, .14) !important;
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    color: #ffffff !important;
}

.cc-stat-card--groen  { background: #2d6a4f !important; }
.cc-stat-card--blauw  { background: #2563eb !important; }
.cc-stat-card--donker { background: #1e1e2e !important; }
.cc-stat-card--oranje { background: #d97706 !important; }

.cc-stat-card__icon,
.cc-stat-card--groen  .cc-stat-card__icon,
.cc-stat-card--blauw  .cc-stat-card__icon,
.cc-stat-card--donker .cc-stat-card__icon,
.cc-stat-card--oranje .cc-stat-card__icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
}

.cc-stat-card__info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.cc-stat-card__getal,
.cc-stat-card--groen  .cc-stat-card__getal,
.cc-stat-card--blauw  .cc-stat-card__getal,
.cc-stat-card--donker .cc-stat-card__getal,
.cc-stat-card--oranje .cc-stat-card__getal {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.75rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #ffffff !important;
}

.cc-stat-card__label,
.cc-stat-card--groen  .cc-stat-card__label,
.cc-stat-card--blauw  .cc-stat-card__label,
.cc-stat-card--donker .cc-stat-card__label,
.cc-stat-card--oranje .cc-stat-card__label {
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, .85) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* ════════════════════════════════════════
   STATISTIEKTEGELS – profiel (.cc-profiel-snelstat)
   Zelfde oppervlak en typografie als hierboven,
   zodat de stats overal hetzelfde ogen.
════════════════════════════════════════ */

.cc-profiel-snelstat {
    background: var(--cc-rs-surface) !important;
    border: 1px solid var(--cc-rs-border) !important;
    border-radius: var(--cc-rs-radius) !important;
    box-shadow: var(--cc-rs-schaduw) !important;
    padding: 16px 18px !important;
}

.cc-profiel-snelstat__getal {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--cc-rs-getal) !important;
}

.cc-profiel-snelstat__label {
    font-size: .84rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    color: var(--cc-rs-label) !important;
}

/* ════════════════════════════════════════
   CAMPINGKAARTEN (.cc-kaart) & ZOEKBALK (.cc-zoekpill)
   Rustigere, consistente randen en schaduwen.
════════════════════════════════════════ */

.cc-kaart {
    border: 1px solid var(--cc-rs-border) !important;
    border-radius: var(--cc-rs-radius) !important;
    box-shadow: var(--cc-rs-schaduw) !important;
}

.cc-zoekpill {
    border: 1px solid var(--cc-rs-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(31, 45, 34, .05) !important;
}

/* ════════════════════════════════════════
   PAGINA-KOPPEN (.cc-home-header)
   Consistente, iets rustigere serif-titel.
════════════════════════════════════════ */

.cc-home-header__titel {
    font-size: clamp(2.4rem, 5.2vw, 3.8rem) !important;
    letter-spacing: -.01em !important;
}

.cc-home-header__sub {
    color: var(--cc-rs-label) !important;
    font-size: 1rem !important;
}

/* ════════════════════════════════════════
   RESPONSIVE – één set tegelbreakpoints
   Vier op breed, twee op tablet, één op telefoon.
════════════════════════════════════════ */

@media (max-width: 760px) {
    .cc-stat-card__getal,
    .cc-profiel-snelstat__getal { font-size: 1.55rem !important; }
    .cc-stat-card,
    .cc-stat-card--groen,
    .cc-stat-card--blauw,
    .cc-stat-card--donker,
    .cc-stat-card--oranje { padding: 15px 12px 14px !important; gap: 6px !important; }
}

/* ════════════════════════════════════════
   CAMPINGKAART – snelle sterren-beoordeling
   De tikbare sterren stonden in een box met rand/vulling,
   waardoor een ongewaardeerde kaart op een leeg invoerveld
   leek. Box weg → leest als beoordeling. Functionaliteit
   (tikbaar) blijft volledig intact; gouden actieve sterren
   blijven goud, alleen lege sterren krijgen een zachte tint.
════════════════════════════════════════ */

.cc-kaart__snel-ster {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 2px 0 !important;
}

.cc-snel-ster:not(.actief) { color: #d8d2c6 !important; }
.cc-snel-ster.actief        { color: #b45309 !important; }

/* ════════════════════════════════════════
   CAMPING TOEVOEGEN – zwevende opslaan-knop
   Was een zwevende pill (position:fixed) die over de
   formuliervelden viel. Wordt nu een nette onderbalk over
   de volle breedte (desktop) en een gewone knop onderaan
   het formulier op mobiel, zodat hij niet met de mobiele
   tabbalk botst. Geen functionele wijziging.
════════════════════════════════════════ */

.cc-toevoegen-wrap { padding-bottom: 104px !important; }

.cc-form-acties {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: rgba(247, 245, 240, .97) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border-top: 1px solid var(--cc-rs-border) !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .06) !important;
    z-index: 9000 !important;
}

.cc-form-acties .cc-submit--opslaan-zwevend {
    width: 100% !important;
    max-width: 440px !important;
}

@media (max-width: 760px) {
    .cc-toevoegen-wrap { padding-bottom: 0 !important; }
    .cc-form-acties {
        position: static !important;
        width: auto !important;
        padding: 16px 0 0 !important;
        background: transparent !important;
        border-top: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .cc-form-acties .cc-submit--opslaan-zwevend { max-width: none !important; }
}

/* ════════════════════════════════════════
   NAVIGATIEMENU – dropdown
   Cohesie met de nieuwe stijl: groene icoon-accenten i.p.v.
   grijs, zachtgroene hover, consistente ronding en ruimte.
════════════════════════════════════════ */

.cc-topnav__dropdown {
    border-radius: 16px !important;
    border: 1px solid var(--cc-rs-border) !important;
    box-shadow: 0 12px 34px rgba(31, 45, 34, .14) !important;
    padding: 8px !important;
}

.cc-dropdown__groep {
    color: #9aa0a6 !important;
    padding: 10px 12px 4px !important;
}

.cc-dropdown__item {
    border-radius: 10px !important;
    padding: 10px 12px !important;
    gap: 11px !important;
}

.cc-dropdown__item:hover,
.cc-dropdown__item:focus-visible {
    background: #eef6f0 !important;
    color: #17201b !important;
}

.cc-dropdown__icon { color: var(--cc-groen, #2d6a4f) !important; }

/* Actieve pagina markeren ("je bent hier") */
.cc-dropdown__item--actief {
    background: #eef6f0 !important;
    color: #17201b !important;
    font-weight: 600 !important;
}
.cc-dropdown__item--actief .cc-dropdown__icon { color: var(--cc-groen, #2d6a4f) !important; }

.cc-dropdown__sep {
    margin: 6px 8px !important;
    background: #eee8de !important;
}

/* ════════════════════════════════════════
   REISPLANNER – statkaart-labels
   Sentence-case i.p.v. hoofdletters, conform de
   geünificeerde tegel-labels in de rest van de app.
════════════════════════════════════════ */

.cc-trips-stat__label {
    text-transform: none !important;
    letter-spacing: .01em !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    color: var(--cc-rs-label) !important;
}

/* ════════════════════════════════════════
   TAALKIEZER in de bovenbalk
   Compacte wereldbol-icoonknop (i.p.v. de vlag-dropdown
   die rommelig in het menu stond), in stijl van de
   dag/nacht-knop. Opties klappen eronder uit.
════════════════════════════════════════ */

.cc-taalwisselaar--topbar { position: relative !important; display: inline-flex !important; }

.cc-taalwisselaar--topbar .cc-taalwisselaar__huidig {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--cc-rs-border) !important;
    border-radius: 12px !important;
    background: var(--cc-rs-surface, #fff) !important;
    cursor: pointer !important;
}
.cc-taalwisselaar--topbar .cc-taalwisselaar__huidig:hover { background: #f3f5f2 !important; }
.cc-taalwisselaar--topbar .cc-taalwisselaar__icoon {
    display: inline-flex !important;
    color: var(--cc-groen, #2d6a4f) !important;
}

.cc-taalwisselaar--topbar .cc-taalwisselaar__menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 8px) !important;
    min-width: 190px !important;
    background: var(--cc-rs-surface, #fff) !important;
    border: 1px solid var(--cc-rs-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(31, 45, 34, .14) !important;
    padding: 6px !important;
    display: none !important;
    z-index: 10000 !important;
}
.cc-taalwisselaar--topbar .cc-taalwisselaar__menu.open { display: block !important; }

.cc-taalwisselaar--topbar .cc-taalwisselaar__optie {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    color: var(--cc-tekst, #17201b) !important;
    text-decoration: none !important;
    font-size: .9rem !important;
}
.cc-taalwisselaar--topbar .cc-taalwisselaar__optie:hover { background: #eef6f0 !important; }
.cc-taalwisselaar--topbar .cc-taalwisselaar__optie.actief { background: #eef6f0 !important; font-weight: 600 !important; }

/* ════════════════════════════════════════
   EMOJI CONSISTENT MUTEN (v3.7.250)
   Gekleurde emoji (voorzieningen op kaarten, voorzieningen-
   telling op Statistieken, schakelaars in het formulier en
   lege-staat-iconen) worden gedempt zodat ze niet vloeken
   met de lijniconen. Structuur en betekenis blijven intact.
════════════════════════════════════════ */

.cc-kaart__vz-item,
.cc-vz-tegel__icoon,
.cc-toggle-item > span:first-child,
.cc-leeg__icoon {
    filter: grayscale(1) opacity(.78) !important;
}

/* ════════════════════════════════════════
   FOOTER – KvK als platte tekst (v3.7.250)
   De pill oogde als knop maar is niet klikbaar.
════════════════════════════════════════ */

.cc-app-footer__pill {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #9aa0a6 !important;
    font-weight: 500 !important;
}

/* ════════════════════════════════════════
   PAKLIJST – voortgangsbalk zichtbaar op 0% (v3.7.250)
   Het lege spoor kreeg te weinig contrast op de crème
   achtergrond; nu een duidelijk spoor met rand.
════════════════════════════════════════ */

.cc-checklist-progress__bar {
    background: #e9e3d6 !important;
    border: 1px solid #ddd5c4 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    min-height: 10px !important;
}
.cc-checklist-progress__bar span {
    background: var(--cc-groen, #2d6a4f) !important;
    border-radius: 999px !important;
    display: block !important;
    min-height: 8px !important;
}
:root.cc-dark .cc-checklist-progress__bar {
    background: #2a2f3a !important;
    border-color: #3a3f4c !important;
}

/* ════════════════════════════════════════
   DONKERE MODUS – hoverkleuren (v3.7.250)
   Menu-items en taalkiezer-opties hielden lichte hovers.
════════════════════════════════════════ */

:root.cc-dark .cc-dropdown__item:hover,
:root.cc-dark .cc-dropdown__item:focus-visible,
:root.cc-dark .cc-dropdown__item--actief,
:root.cc-dark .cc-taalwisselaar--topbar .cc-taalwisselaar__optie:hover,
:root.cc-dark .cc-taalwisselaar--topbar .cc-taalwisselaar__optie.actief {
    background: #2a2f3a !important;
    color: #f0ede8 !important;
}
:root.cc-dark .cc-taalwisselaar--topbar .cc-taalwisselaar__huidig:hover { background: #2a2f3a !important; }
:root.cc-dark .cc-taalwisselaar--topbar .cc-taalwisselaar__optie { color: #d5d9d4 !important; }
:root.cc-dark .cc-dropdown__sep { background: #3a3f4c !important; }

/* ════════════════════════════════════════
   EXPORT-MODAL (v3.7.251)
   1) Sluitknop rechtsboven werd een brede pil doordat de
      generieke knop-padding (15px 30px) doorlekte. Terug naar
      een net rond 38px-knopje zoals de andere sluitknoppen.
   2) Nieuwe opties: reisfilter, live zoekveld en veldselectie.
════════════════════════════════════════ */

.cc-export-modal .cc-modal-core__close,
.cc-export-modal__close,
.cc-export-modal .cc-export-modal__close {
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
}

.cc-export-field-label {
    display: block !important;
    margin: 4px 0 4px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    color: var(--cc-grijs, #6b7280) !important;
}
.cc-export-trip,
.cc-export-search {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 12px !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--cc-border, #e5e7eb) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--cc-tekst, #17201b) !important;
    font-size: .92rem !important;
}
.cc-export-search { margin-top: 8px !important; }
.cc-export-trip:focus,
.cc-export-search:focus {
    outline: none !important;
    border-color: var(--cc-groen, #2d6a4f) !important;
    box-shadow: 0 0 0 3px rgba(45, 106, 79, .14) !important;
}
.cc-export-fields-basis {
    margin: 4px 0 10px !important;
    font-size: .8rem !important;
    color: var(--cc-grijs, #6b7280) !important;
    line-height: 1.4 !important;
}
.cc-export-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
.cc-export-veld {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border: 1px solid var(--cc-border, #e5e7eb) !important;
    border-radius: 12px !important;
    background: #f8faf9 !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.cc-export-veld input { accent-color: var(--cc-groen, #2d6a4f); }

@media (max-width: 640px) {
    .cc-export-fields { grid-template-columns: 1fr !important; }
}

/* Donkere modus voor de nieuwe export-elementen */
:root.cc-dark .cc-export-trip,
:root.cc-dark .cc-export-search {
    background: #232630 !important;
    border-color: #3a3f4c !important;
    color: #f0ede8 !important;
}
:root.cc-dark .cc-export-veld {
    background: #232630 !important;
    border-color: #3a3f4c !important;
    color: #e7e4de !important;
}

/* ════════════════════════════════════════
   ZOEKBALK MOBIEL (v3.7.254)
   Op mobiel stonden zoekveld + landenfilter onder elkaar. Het
   thema (style.css @media ≤600px) zet .cc-zoekbalk op
   flex-direction:column en de velden op width:100%. Die regels
   overrulen we hier zodat de velden ALTIJD naast elkaar op één
   rij staan, met procentuele breedtes zodat het meeschaalt van
   smalle telefoon tot tablet.
════════════════════════════════════════ */
@media (max-width: 700px) {
    .cc-zoekbalk {
        display: flex !important;
        flex-direction: row !important;   /* thema zette dit op column bij ≤600px */
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .cc-zoekbalk .cc-zoekbalk__input-wrap {
        flex: 1 1 62% !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .cc-zoekbalk .cc-zoekbalk__input {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    /* Landenfilter: op mobiel de native select, als vaste smalle kolom ernaast */
    .cc-zoekbalk .cc-zoekbalk__select--land-native,
    .cc-zoekbalk .cc-land-dropdown--home + .cc-zoekbalk__select--land-native {
        position: static !important;
        display: block !important;
        flex: 0 0 38% !important;
        width: 38% !important;
        min-width: 0 !important;
        max-width: 190px !important;
        height: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    /* De custom (vlaggen)dropdown blijft op mobiel verborgen; de native select doet het werk */
    .cc-zoekbalk .cc-land-dropdown--home { display: none !important; }
}

/* ════════════════════════════════════════
   EXPORT-MODAL VOLLEDIG BREEDTE-ADAPTIEF (v3.7.258)
   Op mobiel liep de inhoud horizontaal buiten het scherm (optie-
   teksten, reisfilter en lange campingnamen werden rechts afgekapt).
   Oorzaak: het paneel/de kaarten hadden geen box-sizing/min-width-0,
   en grid-tracks + lange, niet-brekende namen ("Saxnäs/Ölands…")
   duwden de breedte voorbij de viewport. Hier: alles begrensd tot de
   schermbreedte en lange tekst mag breken.
════════════════════════════════════════ */
.cc-export-modal .cc-modal-core__panel,
.cc-export-modal__panel {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
.cc-export-modal .cc-export-grid { min-width: 0 !important; }
.cc-export-modal .cc-export-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Optie-kaarten: het tekstblok mag krimpen en breken i.p.v. duwen */
.cc-export-modal .cc-export-option { min-width: 0 !important; }
.cc-export-modal .cc-export-option > span { min-width: 0 !important; }
.cc-export-modal .cc-export-option small { overflow-wrap: anywhere !important; }
/* Campingkeuzelijst: lange namen breken netjes af */
.cc-export-modal .cc-export-camping { min-width: 0 !important; }
.cc-export-modal .cc-export-camping span,
.cc-export-modal .cc-export-camping small {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
/* Reisfilter-pulldown: vult de breedte, past altijd */
.cc-export-modal .cc-export-trip { max-width: 100% !important; }

/* ════════════════════════════════════════
   PROFIEL: COMPACTE KOP OP MOBIEL (v3.7.256)
   Het thema stapelt de profielkop op mobiel (column) waardoor het
   blok erg hoog wordt. Avatar + naam blijven naast elkaar; de
   actieknoppen komen compact op een tweede regel.
════════════════════════════════════════ */
@media (max-width: 700px) {
    .cc-profiel-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }
    .cc-profiel-avatar {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }
    .cc-profiel-naam  { font-size: 1.02rem !important; }
    .cc-profiel-email { font-size: .78rem !important; }
    .cc-profiel-lid   { font-size: .72rem !important; }
    .cc-profiel-header__acties {
        width: 100% !important;
        gap: 8px !important;
    }
    .cc-profiel-header__acties .cc-btn-secondary,
    .cc-profiel-header__acties .cc-btn-uitloggen {
        padding: 6px 12px !important;
        font-size: .78rem !important;
    }
}

/* ════════════════════════════════════════
   PROFIEL: VOLGORDE BEHEERKAARTEN (v3.7.256)
   Kleine knop bij de sectiekop zet de kaarten in volgorde-modus;
   elke kaart krijgt dan ↑/↓-knoppen (werkt op touch én desktop).
════════════════════════════════════════ */
.cc-profiel-section-head { position: relative; }
.cc-profiel-volgorde-btn {
    margin-top: 10px;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px !important;
    font-size: .78rem !important;
    border-radius: 999px !important;
    cursor: pointer;
}
.cc-profiel-volgorde-btn.is-active {
    background: var(--cc-groen, #2d6a4f) !important;
    border-color: var(--cc-groen, #2d6a4f) !important;
    color: #fff !important;
}
.cc-profiel-volgorde-hint {
    margin: 8px 0 0 !important;
    font-size: .78rem !important;
    color: var(--cc-grijs, #6b7280) !important;
}
.cc-profiel-actions.is-ordering .cc-profiel-action-card {
    cursor: default;
    position: relative;
    box-shadow: 0 0 0 2px rgba(45, 106, 79, .18);
}
.cc-profiel-actions.is-ordering .cc-profiel-action-card__arrow { visibility: hidden; }
.cc-kaart-orde {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-kaart-orde__btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    min-width: 0 !important;
    border: 1px solid var(--cc-border, #e5e7eb) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--cc-groen, #2d6a4f) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.cc-kaart-orde__btn:hover {
    background: var(--cc-groen, #2d6a4f) !important;
    color: #fff !important;
}
:root.cc-dark .cc-kaart-orde__btn {
    background: #232630 !important;
    border-color: #3a3f4c !important;
    color: #7fc8a2 !important;
}

/* ════════════════════════════════════════
   EXPORT-MODAL BINNEN HET SCHERM (v3.7.257)
   Het paneel werd hoger dan het zichtbare scherm: een oud thema-blok
   (≤800px) zet max-height:100vh (op mobiel hoger dan het zichtbare
   deel door de browserbalk) en de inhoud scrolde onzichtbaar in het
   paneel. Hier: harde cap op de ZICHTBARE schermhoogte (svh, met
   vh-terugval), compactere kop, en op desktop scrollen de twee
   kolommen zelf zodat de knoppen altijd in beeld blijven.
════════════════════════════════════════ */
.cc-export-modal .cc-modal-core__panel,
.cc-export-modal__panel {
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100svh - 24px) !important;
}
.cc-export-modal__head {
    margin-bottom: 12px !important;
}
.cc-export-modal__head h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
    margin: 0 0 4px !important;
}
.cc-export-modal__head p { font-size: .88rem !important; }

@media (min-width: 801px) {
    .cc-export-modal .cc-modal-core__panel,
    .cc-export-modal__panel {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .cc-export-modal .cc-export-grid {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }
    .cc-export-modal .cc-export-card {
        overflow-y: auto !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .cc-export-modal .cc-export-card > * { flex: 0 0 auto; }
    .cc-export-modal .cc-export-card--preview .cc-export-actions {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--cc-wit, #fff) 35%);
        padding-top: 16px;
        padding-bottom: 2px;
    }
}
:root.cc-dark .cc-export-modal .cc-export-card--preview .cc-export-actions {
    background: linear-gradient(180deg, rgba(30, 38, 51, 0), var(--cc-card, #1e2633) 35%);
}

/* ════════════════════════════════════════
   KENTEKENVELDEN ALS ECHTE GELE KENTEKENPLAAT (v3.7.259)
   De kentekeninvoer (.cc-vehicle-plate) was een bleekgeel tekstveld.
   Nu krijgt de wrapper (.cc-vehicle-plate-row) het uiterlijk van een
   Nederlandse plaat: plaatgeel, zwarte vette letters, zwarte rand met
   plaat-radius, en links de blauwe EU-band met sterrenring + "NL"
   (als SVG-achtergrond op ::before). Het input-veld zelf wordt
   transparant zodat de plaat erdoorheen komt; blijft volledig
   bewerkbaar. Plaat blijft geel/zwart in dark mode (zoals in het echt).
════════════════════════════════════════ */
.cc-vehicle-plate-row {
    position: relative !important;
    display: block !important;
    max-width: 280px !important;
    border: 2px solid #0b0b0b !important;
    border-radius: 8px !important;
    background: #f4ce00 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .12) !important;
    overflow: hidden !important;
}
.cc-vehicle-plate-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    border-right: 1px solid rgba(0, 0, 0, .25);
    background: #003399 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2062'%3E%3Cg%20fill='%23ffcc00'%3E%3Ccircle%20cx='20'%20cy='10'%20r='1.5'/%3E%3Ccircle%20cx='27'%20cy='11.9'%20r='1.5'/%3E%3Ccircle%20cx='32.1'%20cy='17'%20r='1.5'/%3E%3Ccircle%20cx='34'%20cy='24'%20r='1.5'/%3E%3Ccircle%20cx='32.1'%20cy='31'%20r='1.5'/%3E%3Ccircle%20cx='27'%20cy='36.1'%20r='1.5'/%3E%3Ccircle%20cx='20'%20cy='38'%20r='1.5'/%3E%3Ccircle%20cx='13'%20cy='36.1'%20r='1.5'/%3E%3Ccircle%20cx='7.9'%20cy='31'%20r='1.5'/%3E%3Ccircle%20cx='6'%20cy='24'%20r='1.5'/%3E%3Ccircle%20cx='7.9'%20cy='17'%20r='1.5'/%3E%3Ccircle%20cx='13'%20cy='11.9'%20r='1.5'/%3E%3C/g%3E%3Ctext%20x='20'%20y='55'%20fill='%23ffffff'%20font-family='Arial,sans-serif'%20font-size='15'%20font-weight='700'%20text-anchor='middle'%3ENL%3C/text%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.cc-vehicle-plate {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #0b0b0b !important;
    /* Kentekenplaat-uiterlijk: breed en zwaar (zoals de RDW-plaatletters),
       niet het smalle Arial Narrow. De streepjes verzorgen de groepering. */
    font-family: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.6rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px 8px 42px !important;
}
.cc-vehicle-plate::placeholder {
    color: rgba(11, 11, 11, .42) !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}
.cc-vehicle-plate:focus { outline: none !important; }
.cc-vehicle-plate-row:focus-within {
    box-shadow: 0 0 0 3px rgba(45, 106, 79, .35), 0 1px 2px rgba(0, 0, 0, .3) !important;
}
:root.cc-dark .cc-vehicle-plate { color: #0b0b0b !important; }