/*
Theme Name: Campingkompas Child Safe
Template: astra
Description: Campingkompas child theme voor het bijhouden van bezochte campings.
Version: 3.7.267
Author: miesomedia
Text Domain: campingcompas
*/

/* Google Fonts wordt nu via <link rel="preload"> + <link rel="stylesheet"> in functions.php geladen i.p.v. via @import (parallel + non-blocking) */

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
    /* Kleuren */
    --cc-groen:       #2d6a4f;
    --cc-groen-2:     #3d8b68;
    --cc-groen-licht: #52b788;
    --cc-groen-pale:  #e8f5ee;
    --cc-bg:          #f7f5f0;
    --cc-bg-2:        #eeeae3;
    --cc-wit:         #ffffff;
    --cc-tekst:       #1a1a1a;
    --cc-tekst-2:     #4b5563;
    --cc-grijs:       #9ca3af;
    --cc-border:      #e5e1d8;
    --cc-goud:        #b45309;
    --cc-goud-pale:   #fef3c7;
    --cc-rood:        #b42318;
    --cc-rood-licht:  #f97066;
    --cc-rood-pale:   #fef3f2;

    /* Type */
    --cc-font-hoofd:  'Lora', Georgia, serif;
    --cc-font-body:   'DM Sans', system-ui, sans-serif;

    /* Ruimte & radius */
    --cc-radius-sm:   8px;
    --cc-radius:      14px;
    --cc-radius-lg:   20px;
    --cc-schaduw:     0 2px 12px rgba(0,0,0,.07);
    --cc-schaduw-lg:  0 8px 32px rgba(0,0,0,.12);
    --cc-chrome-height: 60px;
    --cc-mobile-subnav-height: 0px;
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--cc-font-body);
    background: var(--cc-bg);
    color: var(--cc-tekst);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ── CC full-page template: alles via body.cc-full-page ──
   page-cc.php voegt deze class toe via body_class()
   Hierdoor is geen Astra-header/footer/sidebar nodig
── */
body.cc-full-page {
    background: var(--cc-bg) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Astra reset – verwijder alle padding/margin die doorlekt */
body.cc-full-page #page,
body.cc-full-page #content,
body.cc-full-page .site-content,
body.cc-full-page .ast-container,
body.cc-full-page .entry-content,
body.cc-full-page .ast-article-post {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ── Verberg Astra footer op CC pagina's ── */
body.cc-full-page footer:not(.cc-app-footer),
body.cc-full-page .site-footer,
body.cc-full-page #colophon,
body.cc-full-page .footer-widget-area,
body.cc-full-page .footer-bar {
    display: none !important;
}

/* ── Verberg Astra/WordPress navigatiemenu op CC pagina's ── */
body.cc-full-page .ast-header-break-point,
body.cc-full-page .main-header-menu,
body.cc-full-page .main-navigation,
body.cc-full-page .ast-main-menu-wrap,
body.cc-full-page #ast-mobile-popup-wrapper,
body.cc-full-page .ast-mobile-menu-buttons,
body.cc-full-page nav.ast-flex,
body.cc-full-page nav[id*="navigation"],
body.cc-full-page .widget_nav_menu,
body.cc-full-page ul.menu,
body.cc-full-page ul.nav-menu,
body.cc-full-page .menu-primary-menu-container,
body.cc-full-page .cc-menu-user {
    display: none !important;
}


/* CC app shell */
.cc-app {
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - var(--cc-chrome-height));
    overflow-x: hidden;
}

/* ═══════════════════════════════════════
   CC APP SHELL
═══════════════════════════════════════ */
.cc-app {
    min-height: calc(100vh - var(--cc-chrome-height));
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

/* ═══════════════════════════════════════
   TOPNAVIGATIE
═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   CC TOPNAV
═══════════════════════════════════════ */
.cc-topnav {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--cc-wit);
    border-bottom: 1px solid var(--cc-border);
    height: var(--cc-chrome-height);
}
.cc-topnav__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Logo */
.cc-topnav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 8px;
}
.cc-topnav__logo-icon {
    width: 36px;
    height: 36px;
    background: var(--cc-groen);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.cc-topnav__logo-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.cc-topnav__logo-naam { font-family: var(--cc-font-hoofd); font-size: .95rem; font-weight: 700; color: var(--cc-tekst); }
.cc-topnav__logo-sub  { font-size: .62rem; color: var(--cc-grijs); text-transform: uppercase; letter-spacing: .5px; }

/* Hoofd nav */
.cc-topnav__nav { flex: 1; }
.cc-topnav__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
.cc-topnav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 500;
    color: var(--cc-grijs);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.cc-topnav__link:hover { background: var(--cc-bg); color: var(--cc-tekst); }
.cc-topnav__link.actief {
    background: var(--cc-groen-pale, #e8f5ef);
    color: var(--cc-groen);
    font-weight: 600;
}
.cc-topnav__link-icon { display: flex; align-items: center; opacity: .75; }
.cc-topnav__link.actief .cc-topnav__link-icon { opacity: 1; }

/* Rechts blok */
.cc-topnav__rechts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Secundaire mobiele header */
.cc-mobile-subnav { display: none; }
.cc-mobile-subnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cc-mobile-subnav__link {
    text-decoration: none;
}

/* Donkere modus SVG-iconen */
.cc-darkmode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 18px;
    height: 18px;
}
.cc-darkmode-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* + Toevoegen knop */
.cc-topnav__add {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--cc-groen);
    color: #fff !important;
    text-decoration: none;
    padding: 0 16px;
    height: 38px;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 600;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.cc-topnav__add:hover { background: #1f4f3a; }

/* Gebruiker dropdown */
.cc-topnav__user-wrap { position: relative; }
.cc-topnav__user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 10px;
    transition: background .15s;
}
.cc-topnav__user-btn:hover { background: var(--cc-bg); }

/* "Menu" knop — erft cc-topnav__add stijl, alleen tekst/chevron kleur overschrijven */
.cc-topnav__menu-btn {
    background: var(--cc-groen) !important;
    color: #fff !important;
    border: none !important;
    outline: none !important;
    padding: 0 16px !important;
    height: 38px !important;
    border-radius: 10px !important;
    gap: 6px !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}
.cc-topnav__menu-btn:hover,
.cc-topnav__menu-btn:focus { background: #1f4f3a !important; }
.cc-topnav__menu-btn .cc-topnav__username { color: #fff !important; font-size: .86rem !important; font-weight: 600 !important; }
.cc-topnav__menu-btn .cc-topnav__chevron  { color: rgba(255,255,255,.85) !important; }

.cc-topnav__avatar {
    width: 32px;
    height: 32px;
    background: var(--cc-groen);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cc-topnav__username { font-size: .86rem; font-weight: 500; color: var(--cc-tekst); }
.cc-topnav__chevron { color: var(--cc-grijs); transition: transform .2s; }
.cc-topnav__user-btn[aria-expanded="true"] .cc-topnav__chevron { transform: rotate(180deg); }

/* Taalwisselaar inline in dropdown */
.cc-taalwisselaar--dropdown { display: block; padding: 2px 6px 0; }
.cc-taalwisselaar--dropdown .cc-taalwisselaar__huidig {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--cc-tekst);
    background: none;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.cc-taalwisselaar--dropdown .cc-taalwisselaar__huidig:hover { background: var(--cc-bg); }
.cc-taalwisselaar--dropdown .cc-taalwisselaar__menu {
    position: static;
    display: none;
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    padding: 4px;
    margin: 2px 6px 4px;
    box-shadow: none;
}
.cc-taalwisselaar--dropdown .cc-taalwisselaar__menu.open { display: block; }

/* Dropdown menu */
.cc-topnav__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    min-width: 200px;
    padding: 6px;
    z-index: 1000;
}
.cc-topnav__dropdown.open { display: block; }
.cc-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: .86rem;
    color: var(--cc-tekst);
    transition: background .12s;
}
.cc-dropdown__item:hover { background: var(--cc-bg); }
.cc-dropdown__item--uitloggen { color: #ef4444; }
.cc-dropdown__item--uitloggen:hover { background: #fef2f2; }
.cc-dropdown__icon { display: flex; align-items: center; justify-content: center; width: 16px; color: var(--cc-grijs); flex-shrink: 0; }
.cc-dropdown__item--uitloggen .cc-dropdown__icon { color: #ef4444; }
.cc-dropdown__sep { height: 1px; background: var(--cc-border); margin: 4px 0; }

/* Mobiel: logo-tekst verbergen zodat knoppen ruimte krijgen */
@media (max-width: 700px) {
    .cc-topnav__logo-naam,
    .cc-topnav__logo-sub { display: none; }
    .cc-topnav__nav { display: none; } /* leeg maar neemt flex-ruimte in */
    .cc-topnav__inner { padding: 0 14px; }
    .cc-topnav__rechts { gap: 6px; }
    .cc-topnav__add { padding: 0 12px; font-size: .82rem; }
    .cc-topnav__user-wrap { display: flex; }
}

/* ═══════════════════════════════════════
   HOMEPAGE – PAGINA HEADER
═══════════════════════════════════════ */
.cc-home-header {
    text-align: center;
    padding: 52px 24px 36px;
    background: var(--cc-bg);
}

.cc-home-header__titel {
    font-family: var(--cc-font-hoofd);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    color: var(--cc-tekst) !important;
    margin: 0 0 10px;
    line-height: 1.15;
    font-weight: 700;
}

.cc-home-header__sub {
    font-size: 1rem;
    color: var(--cc-tekst-2);
    margin: 0;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ═══════════════════════════════════════
   STATS KAARTEN
═══════════════════════════════════════ */
.cc-stats-rij {
    display: flex;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 32px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cc-stats-rij::-webkit-scrollbar { display: none; }

.cc-stat-card {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 170px;
    box-shadow: var(--cc-schaduw);
    transition: box-shadow .18s, transform .18s;
}
.cc-stat-card:hover { box-shadow: var(--cc-schaduw-lg); transform: translateY(-2px); }

.cc-stat-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--cc-groen-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cc-stat-card__info { min-width: 0; flex: 1; }

.cc-stat-card__getal {
    font-family: var(--cc-font-hoofd);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cc-tekst);
    line-height: 1;
    margin-bottom: 3px;
}

.cc-stat-card__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cc-grijs);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}

/* ═══════════════════════════════════════
   ZOEK / FILTER BALK
═══════════════════════════════════════ */
.cc-zoekbalk {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}

.cc-zoekbalk__input-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.cc-zoekbalk__input-wrap::before {
    content: none;
}

.cc-zoekbalk__input-wrap::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d8b68' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    transition: transform .18s ease;
}

.cc-zoekbalk__input {
    width: 100%;
    min-height: 56px;
    padding: 0 18px 0 46px;
    text-indent: 0;
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,1) 100%);
    border: 1px solid var(--cc-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .04);
    font-family: var(--cc-font-body);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cc-tekst);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.cc-zoekbalk__input::-webkit-search-decoration,
.cc-zoekbalk__input::-webkit-search-cancel-button,
.cc-zoekbalk__input::-webkit-search-results-button,
.cc-zoekbalk__input::-webkit-search-results-decoration {
    display: none;
}

.cc-zoekbalk__input::placeholder {
    color: #8b93a3;
    opacity: 1;
    font-weight: 500;
}
.cc-zoekbalk__input:hover {
    border-color: #d8d2c6;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .06);
}
.cc-zoekbalk__input:focus {
    border-color: rgba(82,183,136,.55);
    box-shadow: 0 0 0 4px rgba(82,183,136,.14), 0 10px 28px rgba(17,24,39,.06);
}
.cc-zoekbalk__input-wrap:focus-within::after {
    transform: translateY(-50%) scale(1.08);
}

.cc-zoekbalk__select {
    min-height: 56px;
    padding: 0 42px 0 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,1) 100%);
    border: 1px solid var(--cc-border);
    border-radius: 18px;
    width: 190px;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .04);
    font-family: var(--cc-font-body);
    font-size: .92rem;
    font-weight: 500;
    color: var(--cc-tekst);
    cursor: pointer;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    box-sizing: border-box;
}
.cc-zoekbalk__select:hover {
    border-color: #d8d2c6;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .06);
}
.cc-zoekbalk__select:focus {
    border-color: rgba(82,183,136,.55);
    box-shadow: 0 0 0 4px rgba(82,183,136,.14), 0 10px 28px rgba(17,24,39,.06);
}

.cc-zoekbalk__count {
    display: none;
}

/* ── Custom landen-dropdown (vlaggen in alle browsers) ──────────────── */
.cc-land-dropdown {
    position: relative;
    flex-shrink: 0;
}
.cc-land-dropdown__knop {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 38px;
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    font-size: .88rem;
    font-family: var(--cc-font-body);
    color: var(--cc-tekst);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s;
    min-width: 130px;
    justify-content: space-between;
}
.cc-land-dropdown__knop:hover { border-color: var(--cc-groen-licht); }
.cc-land-dropdown__knop svg  { flex-shrink: 0; color: var(--cc-grijs); transition: transform .2s; }
.cc-land-dropdown--open .cc-land-dropdown__knop svg { transform: rotate(180deg); }
.cc-land-dropdown__lijst {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 200;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}
.cc-land-dropdown--open .cc-land-dropdown__lijst { display: block; }
.cc-land-dropdown__item {
    padding: 8px 14px;
    font-size: .88rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--cc-tekst);
    transition: background .1s;
}
.cc-land-dropdown__item:hover { background: var(--cc-bg); }
.cc-land-dropdown__item--actief {
    background: var(--cc-groen-pale);
    color: var(--cc-groen);
    font-weight: 600;
}
:root.cc-dark .cc-land-dropdown__knop {
    background: var(--cc-bg-2);
    border-color: rgba(255,255,255,.12);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-land-dropdown__lijst {
    background: #1e2d27;
    border-color: rgba(255,255,255,.12);
}
:root.cc-dark .cc-land-dropdown__item:hover { background: rgba(255,255,255,.06); }


/* ═══════════════════════════════════════
   CAMPING KAARTEN GRID
═══════════════════════════════════════ */
.cc-grid-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 48px;
}

.cc-home-kaart-sectie {
    padding: 0 0 48px;
}

.cc-home-kaart-head,
.cc-home-kaart-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.cc-home-kaart-head {
    padding-bottom: 16px;
}

.cc-home-kaart-label {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--cc-grijs);
}

.cc-home-kaart-titel {
    font-family: var(--cc-font-hoofd);
    font-size: 1.6rem;
    color: var(--cc-tekst);
    margin: 4px 0 0;
}

.cc-home-kaart {
    width: 100%;
    height: 520px;
    border: none;
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
}


.cc-kaarten-scroll-outer {
    position: relative;
}

.cc-kaarten-scroll {
    overflow: hidden;
}

/* Carrouselnavigatie: rechts boven de tegelrijen, in een eigen zone */
.cc-grid-nav {
    position: absolute;
    top: 8px;
    right: 0;
    z-index: 4;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 6px;
    border-radius: 999px;
    background: rgba(248, 245, 238, .78);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(17,24,39,.10);
}

.cc-kaarten-scroll-outer {
    position: relative;
    padding-top: 76px;
}

.cc-kaarten-scroll {
    overflow: hidden;
}

.cc-grid-nav__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f1ea 100%);
    color: #234f3d;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
    box-shadow: 0 10px 24px rgba(17,24,39,.12), inset 0 1px 0 rgba(255,255,255,.92);
}

.cc-grid-nav__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(35,79,61,.14);
    pointer-events: none;
}

.cc-grid-nav__btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.35;
    position: relative;
    z-index: 1;
}

.cc-grid-nav__btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffffff 0%, #edf5ef 100%);
    box-shadow: 0 14px 28px rgba(17,24,39,.16), 0 0 0 4px rgba(46,125,87,.08);
}

.cc-grid-nav__btn:active:not(:disabled) {
    transform: translateY(0) scale(.98);
}

.cc-grid-nav__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(46,125,87,.16), 0 14px 28px rgba(17,24,39,.14);
}

.cc-grid-nav__btn:disabled {
    opacity: .38;
    color: #9aa3a9;
    cursor: default;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

@media (max-width: 700px) {
    .cc-kaarten-scroll-outer {
        padding-top: 0;
    }

    .cc-grid-nav {
        position: relative;
        top: auto;
        right: auto;
        display: flex;
        justify-content: center;
        width: fit-content;
        margin: 0 auto 14px;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
    }

    .cc-grid-nav__btn {
        width: 44px;
        height: 44px;
    }

    .cc-grid-nav__btn svg {
        width: 18px;
        height: 18px;
    }
}

.cc-kaarten-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

/* Uitgelichte tegel: eerste kaart breed + grotere foto */
.cc-kaart--uitgelicht {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
}
.cc-kaart--uitgelicht .cc-kaart__foto-wrap {
    min-height: 280px;
    max-height: 340px;
    border-radius: var(--cc-radius-lg) 0 0 var(--cc-radius-lg);
}
.cc-kaart--uitgelicht .cc-kaart__foto {
    height: 100%;
    object-fit: cover;
}
.cc-kaart--uitgelicht .cc-kaart__foto-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.cc-kaart--uitgelicht .cc-kaart__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.cc-kaart--uitgelicht .cc-kaart__naam {
    font-size: 1.3rem;
}
.cc-kaart--uitgelicht .cc-kaart__share-btn {
    width: 34px;
    height: 34px;
}
@media (max-width: 700px) {
    .cc-kaart--uitgelicht {
        grid-template-columns: 1fr;
    }
    .cc-kaart--uitgelicht .cc-kaart__foto-wrap {
        min-height: 200px;
        max-height: 220px;
        border-radius: var(--cc-radius-lg) var(--cc-radius-lg) 0 0;
    }
}

/* Paginering: verborgen kaarten via klasse (betrouwbaarder dan inline style) */
.cc-kaart--verborgen {
    display: none !important;
}

/* Zorg dat losse kaarten op pagina 2 niet worden uitgerekt */
.cc-kaarten-grid .cc-kaart {
    min-width: 0;
    width: 100%;
}

@media (max-width: 900px) { .cc-kaarten-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .cc-kaarten-grid { grid-template-columns: 1fr; } }


.cc-kaart {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .22s, transform .22s;
    box-shadow: var(--cc-schaduw);
    position: relative;
}

.cc-kaart:hover {
    box-shadow: var(--cc-schaduw-lg);
    transform: translateY(-4px);
}

/* Foto */
.cc-kaart__foto-wrap {
    position: relative;
    height: 260px;
    background: var(--cc-bg-2);
    overflow: hidden;
}

.cc-kaart__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.cc-kaart:hover .cc-kaart__foto { transform: scale(1.04); }

.cc-kaart__foto-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--cc-bg-2) 0%, #e5e1d8 100%);
}

/* Badges over foto */
.cc-kaart__ster-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cc-tekst);
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.cc-kaart__ster-badge .ster { color: #f59e0b; }

.cc-kaart__aanbevolen-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--cc-groen);
    color: #fff;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 700;
}

/* Kaart body */
.cc-kaart__body {
    padding: 16px 18px 18px;
}

.cc-kaart__meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cc-kaart__land {
    font-size: .78rem;
    color: var(--cc-grijs);
    font-weight: 500;
}

.cc-kaart__nachten {
    font-size: .72rem;
    font-weight: 700;
    color: var(--cc-goud);
    background: var(--cc-goud-pale);
    border-radius: 6px;
    padding: 2px 8px;
}

.cc-kaart__naam {
    font-family: var(--cc-font-hoofd);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cc-tekst) !important;
    margin: 0 0 4px;
    line-height: 1.3;
}

.cc-kaart__sub {
    font-size: .8rem;
    color: var(--cc-grijs);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-kaart__dot { opacity: .4; }

.cc-kaart__vz {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.cc-kaart__vz-item {
    font-size: .95rem;
    line-height: 1;
    filter: grayscale(10%);
}

.cc-kaart__vz-meer {
    font-size: .7rem;
    color: var(--cc-grijs);
    font-weight: 600;
    background: var(--cc-bg);
    border-radius: 5px;
    padding: 1px 6px;
}

/* Delete knop */
.cc-kaart__delete {
    position: absolute;
    top: 10px;
    right: 44px;
    background: rgba(255,255,255,.9);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: .85rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.cc-kaart:hover .cc-kaart__delete { display: flex; }
.cc-kaart__delete:hover { background: #fee2e2; }

/* Leeg staat */
.cc-leeg {
    text-align: center;
    padding: 72px 24px;
    background: var(--cc-wit);
    border: 2px dashed var(--cc-border);
    border-radius: var(--cc-radius-lg);
}
.cc-leeg__icoon { font-size: 4rem; margin-bottom: 16px; }
.cc-leeg h3 { font-family: var(--cc-font-hoofd); color: var(--cc-tekst); margin-bottom: 8px; }
.cc-leeg p  { color: var(--cc-grijs); margin: 0; }

/* ═══════════════════════════════════════
   POPUP OVERLAY
═══════════════════════════════════════ */
.cc-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.45);
    padding: clamp(18px, 4vh, 32px) 20px;
    backdrop-filter: blur(4px);
    opacity: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    transition: opacity .25s ease;
}

.cc-popup-overlay.cc-popup-overlay--actief  { display: flex; align-items: center; justify-content: center; }
.cc-popup-overlay.cc-popup-overlay--zichtbaar { opacity: 1; }

.cc-popup {
    background: var(--cc-wit);
    border-radius: var(--cc-radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: min(90vh, 740px);
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
    transform: translateY(16px) scale(.98);
    transition: transform .25s ease;
    outline: none;
    overflow: hidden;
}
.cc-popup-overlay--zichtbaar .cc-popup { transform: translateY(0) scale(1); }

.cc-popup__sluiten {
    position: absolute; top: 12px; right: 12px; z-index: 10;
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .18s;
}
.cc-popup__sluiten:hover { background: rgba(0,0,0,.6); transform: scale(1.08); }

.cc-popup__foto-wrap {
    position: relative;
    height: 280px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--cc-radius-lg) var(--cc-radius-lg) 0 0;
    background: var(--cc-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.cc-popup__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.cc-popup__foto-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 65%);
    z-index: 1;
}

.cc-popup__foto-info {
    position: absolute;
    bottom: 24px;
    left: 22px;
    right: 56px;
    z-index: 2;
}

.cc-popup__naam {
    font-family: var(--cc-font-hoofd);
    font-size: 1.45rem;
    color: #fff !important;
    margin: 0 0 3px;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.cc-popup__land {
    font-size: .82rem;
    color: rgba(255,255,255,.82);
    font-weight: 500;
}

.cc-popup__ster-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,.9);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cc-tekst);
    z-index: 2;
    display: none;
}

.cc-popup__aanbevolen {
    position: absolute;
    top: 48px;
    left: 12px;
    background: var(--cc-groen);
    color: #fff;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .7rem;
    font-weight: 700;
    z-index: 2;
    display: none;
}

.cc-popup__body { padding: 20px 22px 24px; flex: 1; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }

.cc-popup__meta-rij {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 8px;
    font-size: .87rem;
    color: var(--cc-tekst);
}
.cc-popup__meta-rij.cc-verborgen { display: none; }
.cc-popup__meta-icoon { flex-shrink: 0; line-height: 1.5; }
.cc-popup__meta-rij a { color: var(--cc-groen); text-decoration: none; word-break: break-all; }
.cc-popup__meta-rij a:hover { text-decoration: underline; }

.cc-popup__sectie {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cc-border);
}
.cc-popup__sectie.cc-verborgen { display: none; }

.cc-popup__sectie-titel {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--cc-grijs);
    margin-bottom: 8px;
}

#cc-popup-kaart-wrap .cc-popup__sectie-titel,
#cc-popup-weer-wrap .cc-popup__sectie-titel,
#cc-popup-gallery-wrap .cc-popup__sectie-titel {
    margin-bottom: 10px;
}

#cc-popup-kaart,
#cc-popup-weer-inhoud,
#cc-popup-gallery {
    border-radius: 14px;
}

#cc-popup-kaart-wrap #cc-popup-kaart {
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
}


#cc-popup-weer-wrap .cc-weer-inhoud {
    background: linear-gradient(180deg, #fcfaf6 0%, #f5f2ea 100%);
    border: 1px solid rgba(45, 106, 79, .10);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

#cc-popup-weer-wrap .cc-weer-nu {
    align-items: center;
    gap: 12px;
}

#cc-popup-weer-wrap .cc-weer-nu__temp {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(232, 245, 238, .96);
    color: var(--cc-groen);
    box-shadow: inset 0 0 0 1px rgba(45, 106, 79, .08);
}

#cc-popup-weer-wrap .cc-weer-nu__label {
    color: var(--cc-tekst-2);
    font-weight: 500;
}

#cc-popup-weer-wrap .cc-weer-nu__details {
    color: var(--cc-tekst-2);
}

#cc-popup-weer-wrap .cc-weer-dagen {
    border-top: 1px solid rgba(45, 106, 79, .10);
    gap: 8px;
}

#cc-popup-weer-wrap .cc-weer-dag {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(45, 106, 79, .08);
    box-shadow: 0 4px 14px rgba(15,23,42,.03);
}

#cc-popup-weer-wrap .cc-max {
    color: var(--cc-groen);
}

#cc-popup-weer-wrap .cc-min {
    color: #7b8794;
}

#cc-popup-weer-wrap .cc-weer-dag__neersl {
    color: #5b8db8;
}

#cc-popup-gallery-wrap {
    margin-top: 20px;
}

.cc-popup__vz { display: flex; flex-wrap: wrap; gap: 6px; }

.cc-popup-vz-item {
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    font-size: .78rem;
    font-weight: 500;
    padding: 3px 10px;
    color: var(--cc-tekst-2);
}

/* Verblijven naast elkaar in de popup */
#cc-popup-verblijven {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 420px) {
    #cc-popup-verblijven { grid-template-columns: 1fr; }
}

.cc-popup-verblijf {
    background: var(--cc-bg);
    border-radius: var(--cc-radius-sm);
    padding: 10px 12px;
    margin-bottom: 0;
}
.cc-popup-verblijf__nr { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--cc-groen); margin-bottom: 3px; }
.cc-popup-verblijf__datum { font-size: .86rem; font-weight: 500; }
.cc-popup-verblijf__nachten { color: var(--cc-grijs); font-size: .78rem; }
.cc-popup-verblijf__ster { color: #f59e0b; font-size: .88rem; margin-top: 2px; }
.cc-popup-verblijf__meta { font-size: .78rem; color: var(--cc-grijs); margin-top: 2px; }
.cc-popup-verblijf__opmerkingen { font-size: .8rem; color: var(--cc-grijs); font-style: italic; margin-top: 4px; line-height: 1.5; }

.cc-popup__acties {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cc-border);
    flex-wrap: wrap;
}

/* Share icoon linksboven in popup foto */
.cc-popup__share-foto-btn {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(4px) !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #213041 !important;
    font-size: .95rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    transition: background .15s !important;
    z-index: 10 !important;
}
.cc-popup__share-foto-btn:hover { background: #fff !important; transform: none !important; }

/* Share knop op uitgelichte tegel — linksboven */
.cc-kaart__share-btn--uitgelicht {
    position: absolute;
    top: 10px;
    left: 52px;
    right: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .15s ease, background .15s ease;
    backdrop-filter: blur(4px);
    color: #2d6a4f;
}
.cc-kaart__share-btn--uitgelicht:hover {
    transform: scale(1.12);
    background: #fff;
}
.cc-kaart__share-btn--uitgelicht svg {
    width: 16px;
    height: 16px;
}

.cc-popup__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #213041 !important;
    border: 1px solid #d8d0c4;
    border-radius: 999px;
    padding: 10px 18px;
    min-height: 42px;
    min-width: 118px;
    font-family: var(--cc-font-body);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(17,24,39,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-decoration: none;
}
.cc-popup__share-btn:hover {
    transform: translateY(-1px);
    border-color: #b8cdbf;
    box-shadow: 0 10px 22px rgba(17,24,39,.08);
    background: #fff;
    color: #213041 !important;
}

.cc-popup__bewerk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #213041 !important;
    border: 1px solid #d8d0c4;
    border-radius: 999px;
    padding: 10px 18px;
    min-height: 42px;
    min-width: 118px;
    font-family: var(--cc-font-body);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(17,24,39,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cc-popup__bewerk-btn:hover {
    transform: translateY(-1px);
    border-color: #b8cdbf;
    box-shadow: 0 10px 22px rgba(17,24,39,.08);
    background: #fff;
}

.cc-popup__route-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #213041 !important;
    border: 1px solid #d8d0c4;
    border-radius: 999px;
    padding: 10px 18px;
    min-height: 42px;
    min-width: 118px;
    font-family: var(--cc-font-body);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(17,24,39,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-decoration: none;
    appearance: none;
}
.cc-popup__route-btn:hover,
.cc-popup__route-btn:focus-visible {
    transform: translateY(-1px);
    border-color: #b8cdbf;
    box-shadow: 0 10px 22px rgba(17,24,39,.08);
    background: #fff;
    outline: none;
}

/* Route-cirkel bovenop de popup-foto, naast de share-cirkel */
.cc-popup__route-foto-btn {
    position: absolute !important;
    top: 12px !important;
    left: 52px !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(4px) !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #1a6b3c !important;
    font-size: .95rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    transition: background .15s !important;
    z-index: 10 !important;
}
.cc-popup__route-foto-btn:hover { background: #fff !important; transform: none !important; }

/* .cc-popup__delete-btn styling merged into unified button group */

.cc-popup__sectie--compact + .cc-popup__sectie {
    margin-top: 14px;
}

/* Blur effect */
body.cc-popup-open { overflow: hidden; }
body.cc-popup-open .cc-blur-wrap { filter: blur(3px); pointer-events: none; }

/* ═══════════════════════════════════════
   TOEVOEGEN FORMULIER PAGINA
═══════════════════════════════════════ */
.cc-toevoegen-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.cc-form-wrap {
    background: transparent;
}

.cc-form-sectie {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-lg);
    padding: 22px 24px;
    margin-bottom: 16px;
}

.cc-form-sectie h3 {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--cc-grijs);
    margin: 0 0 16px;
    font-family: var(--cc-font-body);
}

.cc-form-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.cc-form-rij.vol { grid-template-columns: 1fr; }
.cc-form-rij:last-child { margin-bottom: 0; }
@media (max-width: 580px) { .cc-form-rij { grid-template-columns: 1fr; } }

.cc-veld { display: flex; flex-direction: column; gap: 5px; }

.cc-veld label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cc-tekst-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-veld input[type="text"],
.cc-veld input[type="number"],
.cc-veld input[type="date"],
.cc-veld input[type="url"],
.cc-veld input[type="email"],
.cc-veld input[type="tel"],
.cc-veld textarea,
.cc-veld select {
    padding: 9px 12px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    font-family: var(--cc-font-body);
    font-size: .9rem;
    background: var(--cc-bg);
    color: var(--cc-tekst);
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}

.cc-veld input:focus,
.cc-veld textarea:focus,
.cc-veld select:focus {
    border-color: var(--cc-groen-licht);
    outline: none;
    box-shadow: 0 0 0 3px rgba(82,183,136,.12);
    background: var(--cc-wit);
}

.cc-veld textarea { min-height: 80px; resize: vertical; }
.cc-veld--logboek textarea { min-height: 200px; }
.cc-veld--logboek label { font-weight: 600; }
.cc-input-prefix-wrap { display: flex; align-items: center; border: 1px solid var(--cc-rand,#ddd); border-radius: 8px; overflow: hidden; background: #fff; transition: border-color .2s; }
.cc-input-prefix-wrap:focus-within { border-color: var(--cc-groen,#2d6a4f); }
.cc-input-prefix { padding: 0 10px; font-size: .9rem; color: var(--cc-grijs,#888); background: var(--cc-achtergrond,#f8f8f6); border-right: 1px solid var(--cc-rand,#ddd); display: flex; align-items: center; align-self: stretch; user-select: none; }
.cc-input-prefix-wrap input { border: none !important; border-radius: 0 !important; box-shadow: none !important; flex: 1; padding: 10px 12px; outline: none; font-size: .95rem; }

/* Autocomplete */
.cc-autocomplete-wrap { position: relative; }
.cc-autocomplete-hint {
    display: block;
    font-size: .72rem;
    color: var(--cc-grijs);
    margin-top: 4px;
}

.cc-nominatim-dropdown {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 9999;
    background: var(--cc-wit);
    border: 1px solid var(--cc-groen-licht);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-schaduw-lg);
    margin-top: 4px;
    padding: 4px 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
}

.cc-nominatim-item {
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--cc-border);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cc-nominatim-item:last-child { border-bottom: none; }
.cc-nominatim-item:hover, .cc-nominatim-item--actief { background: var(--cc-groen-pale); }
.cc-nominatim-naam { font-weight: 600; font-size: .88rem; color: var(--cc-groen); }
.cc-nominatim-locatie { font-size: .75rem; color: var(--cc-grijs); }



.cc-veld input.cc-input--duplicate,
.cc-autocomplete-wrap--duplicate input,
.cc-autocomplete-wrap--duplicate input:focus {
    border-color: var(--cc-rood-licht) !important;
    box-shadow: 0 0 0 3px rgba(249,112,102,.14) !important;
    background: var(--cc-wit);
}

.cc-autocomplete-hint--duplicate {
    color: var(--cc-rood) !important;
    font-weight: 600;
}

.cc-autocomplete-wrap--duplicate .cc-nominatim-dropdown {
    border-color: var(--cc-rood-licht);
}

.cc-nominatim-item--duplicate {
    background: var(--cc-rood-pale);
}

.cc-nominatim-item--duplicate:hover,
.cc-nominatim-item--duplicate.cc-nominatim-item--actief {
    background: #fee4e2;
}

.cc-nominatim-naam--duplicate {
    color: var(--cc-rood);
}

.cc-nominatim-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.cc-nominatim-badge--duplicate {
    background: #fee4e2;
    color: var(--cc-rood);
}


/* Autofill badge */
.cc-autofill-badge { font-size: .75rem; }
.cc-autofill-badge--bezig::before { content: '✦'; color: var(--cc-groen-licht); animation: cc-knippert .4s step-start infinite; }
.cc-autofill-badge--klaar::before { content: '✦'; color: var(--cc-groen-licht); }
@keyframes cc-knippert { 0%,100%{opacity:1} 50%{opacity:0} }

/* Toggle voorzieningen */
.cc-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
}

.cc-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    padding: 8px 11px;
    font-size: .83rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.cc-toggle-item:has(input:checked) { border-color: var(--cc-groen-licht); background: var(--cc-groen-pale); color: var(--cc-groen); }
.cc-toggle-item input[type="checkbox"] { display: none; }

.cc-toggle-knop {
    width: 32px; height: 18px;
    background: var(--cc-border);
    border-radius: 9px;
    position: relative;
    transition: background .15s;
    flex-shrink: 0;
}
.cc-toggle-item:has(input:checked) .cc-toggle-knop { background: var(--cc-groen-licht); }
.cc-toggle-knop::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cc-toggle-item:has(input:checked) .cc-toggle-knop::after { left: 16px; }

/* Sterren */
.cc-sterren-wrap { display: flex; gap: 5px; font-size: 1.5rem; }
.cc-ster { cursor: pointer; color: var(--cc-border); transition: color .12s, transform .1s; line-height: 1; }
.cc-ster.actief, .cc-ster.hover { color: #f59e0b; transform: scale(1.1); }

/* Foto upload */
.cc-foto-zone {
    border: 2px dashed var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--cc-bg);
}
.cc-foto-zone:hover, .cc-foto-zone.over { border-color: var(--cc-groen-licht); background: var(--cc-groen-pale); }
.cc-foto-zone p { margin: 8px 0 0; color: var(--cc-grijs); font-size: .83rem; }
.cc-foto-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cc-foto-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--cc-radius-sm); border: 1px solid var(--cc-border); }

/* Verblijven */
.cc-verblijven-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cc-verblijven-header h3 { margin: 0; }

.cc-btn-verblijf-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--cc-groen);
    color: #fff;
    border: none;
    border-radius: var(--cc-radius-sm);
    padding: 6px 14px;
    font-family: var(--cc-font-body);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.cc-btn-verblijf-add:hover { background: #1f5438; }

.cc-verblijf-blok {
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.cc-verblijf-blok:last-child { margin-bottom: 0; }

.cc-verblijf-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cc-border);
}

.cc-verblijf-nr {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--cc-groen);
}

.cc-verblijf-verwijder {
    background: none;
    border: 1px solid #fca5a5;
    color: #ef4444;
    border-radius: 6px;
    width: 24px; height: 24px;
    font-size: .75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.cc-verblijf-verwijder:hover { background: #fee2e2; }

/* Submit knop */
.cc-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cc-groen);
    color: #fff;
    border: none;
    border-radius: var(--cc-radius-sm);
    padding: 12px 28px;
    font-family: var(--cc-font-body);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .12s;
    margin-top: 8px;
}
.cc-submit:hover { background: #1f5438; transform: translateY(-1px); }
.cc-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Berichten */
.cc-bericht {
    padding: 12px 16px;
    border-radius: var(--cc-radius-sm);
    margin-bottom: 16px;
    font-size: .88rem;
    font-weight: 500;
}
.cc-bericht.succes       { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.cc-bericht.fout         { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.cc-bericht.waarschuwing { background: #fef9c3; color: #713f12; border: 1px solid #fde047; }

/* ── Openbaar checkbox (formulier) ─────────────────────────────────── */
/* Override .cc-toggle-item input[type="checkbox"] { display:none } */
.cc-toggle-item--openbaar input[type="checkbox"] {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: #2d6a4f;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.cc-form-sectie--openbaar {
    background: var(--cc-groen-pale, #f0faf4);
    border: 1.5px solid var(--cc-groen-licht, #6ee7b7);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 8px;
}
.cc-checkbox-label--openbaar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-weight: normal;
}
.cc-checkbox-label--openbaar input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cc-checkbox-custom {
    flex-shrink: 0;
    margin-top: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cc-groen, #2d6a4f);
    border-radius: 5px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}
.cc-checkbox-label--openbaar input:checked ~ .cc-checkbox-custom {
    background: var(--cc-groen, #2d6a4f);
    border-color: var(--cc-groen, #2d6a4f);
}
.cc-checkbox-label--openbaar input:checked ~ .cc-checkbox-custom::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
}
.cc-checkbox-tekst strong {
    display: block;
    font-size: .95rem;
    color: var(--cc-groen-donker, #1b4332);
    margin-bottom: 3px;
}
.cc-checkbox-sub {
    font-size: .82rem;
    color: #4b7c5e;
    line-height: 1.45;
}

/* ── Openbare Leaflet popup ─────────────────────────────────────────── */
.cc-kaart-popup--openbaar {
    font-family: inherit;
    min-width: 140px;
}
.cc-kaart-popup__naam {
    font-weight: 700;
    font-size: .95rem;
    color: #1b2e22;
    margin-bottom: 3px;
}
.cc-kaart-popup__land {
    font-size: .82rem;
    color: #4b7c5e;
    margin-bottom: 4px;
}
.cc-kaart-popup__label {
    font-size: .78rem;
    color: #e07b39;
    font-weight: 600;
    margin-top: 4px;
}
.cc-kaart-popup__contact {
    font-size: .82rem;
    color: #4b5563;
    margin-top: 3px;
    line-height: 1.35;
}
.cc-kaart-popup__contact a {
    color: #2d6a4f;
    text-decoration: none;
}
.cc-kaart-popup__contact a:hover { text-decoration: underline; }

/* ── Halve sterren in openbare popup ───────────────────────────────── */
.cc-kaart-popup__sterren {
    display: flex;
    align-items: center;
    gap: 1px;
    margin: 4px 0 6px;
    font-size: 1rem;
    line-height: 1;
}
.cc-ster-vol  { color: #f59e0b; }
.cc-ster-leeg { color: #d1d5db; }
.cc-ster-half {
    position: relative;
    display: inline-block;
    color: #d1d5db;
}
.cc-ster-half__links {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: #f59e0b;
}
.cc-ster-half__rechts {
    color: #d1d5db;
}
.cc-kaart-popup__ster-getal {
    font-size: .78rem;
    color: #6b7280;
    margin-left: 3px;
    font-weight: 600;
}
.cc-leaflet-popup--openbaar .leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.13);
    border-top: 3px solid #e07b39;
}
.cc-leaflet-popup--openbaar .leaflet-popup-tip {
    background: #e07b39;
}

/* ── Dark mode aanpassingen ─────────────────────────────────────────── */
:root.cc-dark .cc-form-sectie--openbaar {
    background: rgba(45,106,79,.13);
    border-color: rgba(110,231,183,.25);
}
:root.cc-dark .cc-checkbox-tekst strong { color: #a7f3d0; }
:root.cc-dark .cc-checkbox-sub { color: #6ee7b7; }
:root.cc-dark .cc-checkbox-custom { background: #1e3a2f; border-color: #6ee7b7; }

/* ═══════════════════════════════════════
   OVERZICHT PAGINA
═══════════════════════════════════════ */
.cc-overzicht-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* ═══════════════════════════════════════
   AUTH PAGINA'S
═══════════════════════════════════════ */
body:has(.cc-auth-wrap) {
    background: linear-gradient(135deg, #1a4731 0%, #2d6a4f 50%, #3d8b68 100%);
    min-height: 100vh;
}

.cc-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.cc-auth-kaart {
    background: var(--cc-wit);
    border-radius: 20px;
    padding: 40px 44px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
}
@media (max-width: 480px) { .cc-auth-kaart { padding: 28px 20px; } }

.cc-auth-logo { font-size: 2.5rem; text-align: center; margin-bottom: 14px; line-height: 1; }

.cc-auth-titel {
    font-family: var(--cc-font-body);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cc-groen) !important;
    text-align: center;
    margin: 0 0 5px;
}

.cc-auth-subtitel { text-align: center; color: var(--cc-grijs); font-size: .88rem; margin: 0 0 24px; }

.cc-auth-form { display: flex; flex-direction: column; gap: 14px; }

.cc-auth-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .cc-auth-rij { grid-template-columns: 1fr; } }

.cc-auth-veld { display: flex; flex-direction: column; gap: 4px; }

.cc-auth-veld label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cc-tekst-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cc-auth-vergeten { font-weight: 400; color: var(--cc-grijs); font-size: .77rem; text-decoration: none; }
.cc-auth-vergeten:hover { color: var(--cc-groen); }

.cc-auth-veld input {
    padding: 10px 12px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    font-family: var(--cc-font-body);
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
    background: var(--cc-bg);
    color: var(--cc-tekst);
    width: 100%;
    box-sizing: border-box;
}
.cc-auth-veld input:focus { border-color: var(--cc-groen-licht); outline: none; box-shadow: 0 0 0 3px rgba(82,183,136,.12); background: var(--cc-wit); }

.cc-ww-wrap { position: relative; }
.cc-ww-wrap input { padding-right: 42px; }
.cc-ww-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: .95rem; padding: 4px; opacity: .5; transition: opacity .15s; }
.cc-ww-toggle:hover { opacity: 1; }

.cc-ww-meter { height: 3px; background: var(--cc-border); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.cc-ww-meter__balk { height: 100%; border-radius: 2px; width: 0%; transition: width .3s, background .3s; }

.cc-ww-eisen { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; }
.cc-ww-eisen li { font-size: .73rem; color: var(--cc-grijs); padding-left: 16px; position: relative; }
.cc-ww-eisen li::before { content: '✗'; position: absolute; left: 0; color: #fca5a5; font-size: .68rem; }
.cc-ww-eisen li.cc-eis-ok { color: #059669; }
.cc-ww-eisen li.cc-eis-ok::before { content: '✓'; color: #059669; }

.cc-auth-onthoud { display: flex; align-items: center; gap: 7px; font-size: .83rem; color: var(--cc-grijs); cursor: pointer; }

.cc-auth-btn { width: 100%; padding: 11px; background: var(--cc-groen); color: #fff; border: none; border-radius: var(--cc-radius-sm); font-family: var(--cc-font-body); font-size: .95rem; font-weight: 700; cursor: pointer; transition: background .15s, transform .12s; margin-top: 4px; }
.cc-auth-btn:hover { background: #1f5438; transform: translateY(-1px); }

.cc-auth-fout   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: var(--cc-radius-sm); padding: 10px 14px; font-size: .86rem; font-weight: 500; margin-bottom: 14px; }
.cc-auth-succes { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; border-radius: var(--cc-radius-sm); padding: 10px 14px; font-size: .86rem; font-weight: 500; margin-bottom: 14px; }

.cc-auth-wissel { text-align: center; margin: 18px 0 0; font-size: .85rem; color: var(--cc-grijs); }
.cc-auth-wissel a { color: var(--cc-groen); font-weight: 600; text-decoration: none; }
.cc-auth-wissel a:hover { text-decoration: underline; }

.cc-auth-info{background:#eef8f2;border:1px solid #cfe8d6;color:#24543d;border-radius:var(--cc-radius-sm);padding:10px 14px;font-size:.86rem;font-weight:500;margin-bottom:14px}
.cc-auth-info small{display:block;margin-top:4px;color:#4b6b58;font-weight:400}
.cc-auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.cc-auth-btn--secondary{background:#fff;color:var(--cc-groen);border:1px solid var(--cc-border);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.cc-auth-btn--secondary:hover{background:#f7fbf8}


/* ═══════════════════════════════════════
   STATISTIEKEN
═══════════════════════════════════════ */
.cc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.cc-stat-kaart {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--cc-schaduw);
}
.cc-stat-kaart .getal { font-family: var(--cc-font-hoofd); font-size: 2.2rem; color: var(--cc-groen); line-height: 1; margin-bottom: 5px; }
.cc-stat-kaart .label { font-size: .72rem; color: var(--cc-grijs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }

/* ═══════════════════════════════════════
   KAART PAGINA
═══════════════════════════════════════ */
#cc-kaart {
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    border-radius: var(--cc-radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--cc-border) !important;
    box-shadow: var(--cc-schaduw-lg) !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #e8e8e8 !important;
    display: block !important;
}

/* Leaflet containers nooit platdrukken */
.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    z-index: 1;
    background: #e8e8e8;
}

#cc-popup-kaart {
    height: 160px !important;
    min-height: 160px !important;
}

#cc-popup-kaart .leaflet-container {
    height: 160px !important;
    min-height: 160px !important;
}

/* v3.7.31 kaart: markers klikbaar houden + plugin opent popup weer via globale opener */
#cc-kaart .leaflet-marker-pane,
#cc-kaart .leaflet-marker-icon,
#cc-kaart .leaflet-marker-icon *,
#cc-kaart .leaflet-interactive {
    pointer-events: auto !important;
}

#cc-kaart .leaflet-marker-icon {
    cursor: pointer !important;
}

/* ═══════════════════════════════════════
   ANIMATIES
═══════════════════════════════════════ */
@keyframes cc-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cc-kaart { animation: cc-fade-up .4s ease both; }
.cc-kaart:nth-child(2) { animation-delay: .05s; }
.cc-kaart:nth-child(3) { animation-delay: .10s; }
.cc-kaart:nth-child(4) { animation-delay: .15s; }
.cc-kaart:nth-child(5) { animation-delay: .20s; }
.cc-kaart:nth-child(6) { animation-delay: .25s; }

/* ══════════════════════════════════════════════
   FOTO MANAGER – drag & drop volgorde
══════════════════════════════════════════════ */
.cc-foto-manager {
    margin-bottom: 4px;
}

.cc-foto-manager__hint {
    font-size: .78rem;
    color: var(--cc-grijs);
    margin: 0 0 10px;
}

.cc-foto-sorteer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}

.cc-foto-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--cc-radius-sm);
    overflow: visible;
    border: 2px solid var(--cc-border);
    background: var(--cc-bg);
    cursor: grab;
    transition: box-shadow .15s, transform .15s, opacity .15s;
    flex-shrink: 0;
}

.cc-foto-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--cc-radius-sm) - 2px);
    display: block;
    pointer-events: none;
    user-select: none;
}

.cc-foto-item:hover {
    border-color: var(--cc-groen-licht);
    box-shadow: 0 4px 16px rgba(45,106,79,.15);
    transform: translateY(-2px);
}

.cc-foto-item--sleept {
    opacity: .4;
    cursor: grabbing;
    transform: scale(.95);
}

/* Verwijder-knop */
.cc-foto-item__del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,.94);
    color: #d85a5f;
    border: 1px solid rgba(33,48,65,.08);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(17,24,39,.10);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
    z-index: 3;
    line-height: 1;
    font-size: 0;
    backdrop-filter: blur(6px);
    aspect-ratio: 1 / 1;
}
.cc-foto-item__del svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    pointer-events: none;
}
.cc-foto-item__del:hover,
.cc-foto-item__del:focus-visible {
    transform: translateY(-1px) scale(1.04);
    background: #fff;
    color: #bf3f46;
    box-shadow: 0 8px 16px rgba(17,24,39,.15);
    outline: none;
}
.cc-foto-item__del:focus-visible {
    box-shadow: 0 0 0 2px rgba(45,106,79,.18), 0 8px 16px rgba(17,24,39,.15);
}
.cc-foto-item__del:active {
    transform: scale(.97);
}

/* Grip icoon */
.cc-foto-item__grip {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .85rem;
    color: rgba(255,255,255,.9);
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    line-height: 1;
}

/* Hoofdfoto badge */
.cc-foto-item__hoofd {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cc-groen);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

/* Placeholder tijdens slepen */
.cc-foto-placeholder {
    width: 100px;
    height: 100px;
    border-radius: var(--cc-radius-sm);
    border: 2px dashed var(--cc-groen-licht) !important;
    background: var(--cc-groen-pale) !important;
}


/* ── Favoriet hartje ── */
.cc-hart-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .15s ease, background .15s ease;
    backdrop-filter: blur(4px);
}
.cc-hart-btn:hover {
    transform: scale(1.12);
    background: #fff;
}
.cc-hart-btn svg {
    width: 16px;
    height: 16px;
    color: #ef4444;
    transition: fill .2s ease, transform .2s ease;
}
.cc-hart-btn.actief svg {
    fill: #ef4444;
    transform: scale(1.15);
}
.cc-hart-btn:not(.actief) svg {
    fill: none;
}
/* Kleine animatie bij activeren */
.cc-hart-btn.actief {
    animation: cc-hart-pop .25s ease;
}
@keyframes cc-hart-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}


/* ── Popup weer-widget ── */
.cc-weer-laden {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--cc-grijs);
    padding: 8px 0;
}
.cc-weer-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--cc-border);
    border-top-color: var(--cc-groen);
    border-radius: 50%;
    animation: cc-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Vandaag */
.cc-weer-nu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.cc-weer-nu__icon  { font-size: 2rem; line-height: 1; }
.cc-weer-nu__temp  { font-size: 1.8rem; font-weight: 700; color: var(--cc-tekst); line-height: 1; }
.cc-weer-nu__label { font-size: .82rem; color: var(--cc-grijs); }
.cc-weer-nu__details {
    font-size: .78rem;
    color: var(--cc-grijs);
    margin-bottom: 14px;
}

/* Komende dagen */
.cc-weer-dagen {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    border-top: 1px solid var(--cc-border);
    padding-top: 12px;
}
.cc-weer-dag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--cc-bg);
    border-radius: 10px;
    padding: 8px 4px;
    text-align: center;
}
.cc-weer-dag__naam  { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--cc-grijs); letter-spacing: .5px; }
.cc-weer-dag__icon  { font-size: 1.3rem; line-height: 1; }
.cc-weer-dag__temp  { display: flex; gap: 4px; align-items: baseline; }
.cc-max             { font-size: .82rem; font-weight: 700; color: var(--cc-tekst); }
.cc-min             { font-size: .75rem; color: var(--cc-grijs); }
.cc-weer-dag__neersl { font-size: .65rem; color: #3b82f6; min-height: 12px; }

/* ═══════════════════════════════════════════
   RESPONSIVE – Tablet & Mobiel
═══════════════════════════════════════════ */

/* ── Tablet (max 900px) ── */
@media (max-width: 900px) {

    /* Stats */
    .cc-stats-rij { gap: 8px; padding: 0 16px 24px; }
    .cc-stat-card { padding: 12px 16px; min-width: 150px; }
    .cc-stat-card__getal { font-size: 1.2rem; }

    /* Grid: 2 kolommen */
    .cc-kaarten-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Zoekbalk */
    .cc-zoekbalk { padding: 0 16px 20px; gap: 8px; }
    .cc-zoekbalk__select { width: 140px; }

    /* Grid wrap */
    .cc-grid-wrap { padding: 0 16px 48px; }
    .cc-home-kaart-head,
    .cc-home-kaart-wrap { padding: 0 16px; }

    /* Home header */
    .cc-home-header { padding: 36px 16px 28px; }
    .cc-home-header__titel { font-size: 2.4rem; }
}

/* ── Mobiel (max 600px) ── */

@media (max-width: 900px) {
    .cc-trips-stats--geschiedenis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    /* Geen horizontale overflow */
    .cc-app { overflow-x: hidden; }

    /* Home header */
    .cc-home-header { padding: 24px 16px 20px; }
    .cc-home-header__titel { font-size: 1.8rem; }
    .cc-home-header__sub { font-size: .85rem; }

    /* Stats: 2-kolommen grid */
    .cc-stats-rij {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 16px 20px;
        overflow: visible;
    }
    .cc-stat-card { min-width: 140px; padding: 12px 14px; }
    .cc-stat-card__icon { width: 30px; height: 30px; font-size: .95rem; }
    .cc-stat-card__getal { font-size: 1.2rem; }
    .cc-stat-card__label { font-size: .65rem; white-space: nowrap; }

    /* Zoekbalk: gestapeld, netjes */
    .cc-zoekbalk {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0 16px 16px;
        gap: 8px;
        align-items: stretch;
        width: 100%;
        box-sizing: border-box;
    }
    .cc-zoekbalk__input-wrap {
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
    .cc-zoekbalk__input {
        min-height: 54px;
        padding-left: 46px;
        border-radius: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    .cc-zoekbalk__input-wrap::before {
        content: none;
    }
    .cc-zoekbalk__input-wrap::after {
        left: 16px;
    }
    .cc-zoekbalk__select {
        min-height: 54px;
        width: 100%;
        flex: none;
        border-radius: 16px;
        box-sizing: border-box;
    }
    .cc-zoekbalk__count { margin-left: 0; text-align: left; }
    .cc-submit { width: 100%; box-sizing: border-box; }

    /* Grid: 1 kolom, nooit breder dan scherm */
    .cc-kaarten-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .cc-grid-wrap { padding: 0 16px 40px; width: 100%; box-sizing: border-box; }
    .cc-home-kaart-head,
    .cc-home-kaart-wrap { padding: 0 16px; width: 100%; box-sizing: border-box; }
    .cc-home-kaart { height: 420px; }
    .cc-kaart { width: 100%; box-sizing: border-box; max-width: 100%; }
    .cc-kaart__foto-wrap { height: 200px; }

    /* Formulier */
    .cc-toevoegen-wrap { padding: 20px 12px 60px; }
    .cc-form-sectie { padding: 16px 14px; }
    .cc-form-rij { grid-template-columns: 1fr; }

    /* Popup */
    .cc-popup-overlay { padding: 0; align-items: flex-end; }
    .cc-popup { width: 100%; max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; transform: translateY(40px); }
    .cc-popup-overlay--zichtbaar .cc-popup { transform: translateY(0); }
    .cc-popup__foto-wrap { height: 200px; }
    .cc-popup__acties { flex-direction: column; }
    .cc-popup__bewerk-btn,
    .cc-popup__route-btn,
    .cc-popup__share-btn,
    .cc-popup__delete-btn,
    .cc-popup__dagboek-btn { width: 100%; justify-content: center; }
    #cc-popup-verblijven { grid-template-columns: 1fr !important; }

    /* Auth */
    .cc-auth-kaart { padding: 24px 16px; }
    .cc-auth-rij { grid-template-columns: 1fr; }
}

/* ── Klein mobiel (max 400px) ── */
@media (max-width: 400px) {
    .cc-home-header__titel { font-size: 1.6rem; }
    .cc-stat-card__getal { font-size: 1.1rem; }
}
/* ═══════════════════════════════════════════
   HAMBURGER MENU — uitgeschakeld
   (navigatie zit in het gebruikersdropdown)
═══════════════════════════════════════════ */

.cc-hamburger { display: none !important; }
.cc-mob-menu  { display: none !important; }

/* Open staat */
.cc-hamburger.open .cc-hamburger__lijn:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cc-hamburger.open .cc-hamburger__lijn:nth-child(2) { opacity: 0; transform: scaleX(0); }
.cc-hamburger.open .cc-hamburger__lijn:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiel menu overlay */
.cc-mob-menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    background: var(--cc-wit);
    border-bottom: 1px solid var(--cc-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 999;
    padding: 8px 0 16px;
}

.cc-mob-menu.open { display: block; }

.cc-mob-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-mob-menu li { border-bottom: 1px solid var(--cc-border); }
.cc-mob-menu li:last-child { border-bottom: none; }

.cc-mob-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: var(--cc-tekst) !important;
    text-decoration: none !important;
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s;
}
.cc-mob-menu a:hover { background: var(--cc-bg); }
.cc-mob-menu a.actief { color: var(--cc-groen) !important; background: var(--cc-groen-pale); }
.cc-mob-menu .mob-icon { font-size: 1.1rem; width: 24px; text-align: center; }

.cc-mob-menu__footer {
    margin-top: 8px;
    padding: 12px 24px 0;
    border-top: 1px solid var(--cc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cc-mob-menu__user { font-size: .85rem; color: var(--cc-grijs); }
.cc-mob-menu__logout {
    font-size: .82rem;
    color: #ef4444 !important;
    text-decoration: none !important;
    font-weight: 600;
}

@media (max-width: 700px) {
    :root { --cc-mobile-subnav-height: 62px; }

    .cc-topnav__user-wrap { display: flex !important; }

    .cc-mobile-subnav {
        display: block;
        position: sticky;
        top: var(--cc-chrome-height);
        z-index: 880;
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid var(--cc-border);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .cc-mobile-subnav__list {
        max-width: 1200px;
        margin: 0 auto;
        padding: 8px 16px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .cc-mobile-subnav__item { min-width: 0; }
    .cc-mobile-subnav__link {
        min-height: 46px;
        padding: 7px 6px;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--cc-grijs);
        font-size: .74rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        transition: background .15s, color .15s, transform .15s;
    }
    .cc-mobile-subnav__link svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.9;
    }
    .cc-mobile-subnav__link:hover {
        background: var(--cc-bg);
        color: var(--cc-tekst);
        transform: translateY(-1px);
    }
    .cc-mobile-subnav__link.actief {
        background: var(--cc-groen-pale);
        color: var(--cc-groen);
        box-shadow: inset 0 0 0 1px rgba(45,106,79,.08);
    }
    .cc-mob-menu {
        top: calc(var(--cc-chrome-height) + var(--cc-mobile-subnav-height));
    }
}

/* ═══════════════════════════════════════════
   TRIP ORGANIZER
═══════════════════════════════════════════ */

.cc-trips-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.cc-trips-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.cc-trips-titel {
    font-family: var(--cc-font-hoofd);
    font-size: 2rem;
    color: var(--cc-tekst);
    margin: 0 0 4px;
}
.cc-trips-sub { color: var(--cc-grijs); font-size: .9rem; margin: 0; }

.cc-trip-nieuw-btn {
    background: var(--cc-groen);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}
.cc-trip-nieuw-btn:hover { background: #1f4f3a; }

/* Stats */
.cc-trips-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
    align-items: stretch;
}
.cc-trips-stats--geschiedenis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cc-trips-stat {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cc-trips-stat__getal {
    font-family: var(--cc-font-hoofd);
    font-size: 2rem;
    font-weight: 700;
    color: var(--cc-groen);
    line-height: 1;
    margin-bottom: 6px;
}
.cc-trips-stat__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--cc-grijs);
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sectie header */
.cc-trips-sectie { margin-bottom: 32px; }
.cc-trips-sectie__titel {
    font-family: var(--cc-font-hoofd);
    font-size: 1.1rem;
    color: var(--cc-tekst);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cc-trips-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cc-grijs);
    flex-shrink: 0;
}
.cc-trips-dot.actief { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }

/* Trip rij */
.cc-trip-rij {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    border-left: 4px solid var(--cc-groen);
}
.cc-trip-rij.verleden { border-left-color: var(--cc-border); opacity: .85; }

.cc-trip-rij__hoofd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
}
.cc-trip-rij__naam {
    font-family: var(--cc-font-hoofd);
    font-size: 1.1rem;
    color: var(--cc-tekst);
    margin: 0 0 6px;
}
.cc-trip-rij__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cc-trip-rij__datum { font-size: .82rem; color: var(--cc-grijs); }
.cc-trip-rij__notitie {
    font-size: .82rem;
    color: var(--cc-grijs);
    margin: 6px 0 0;
    font-style: italic;
}
.cc-trip-rij__acties { display: flex; gap: 6px; flex-shrink: 0; }

.cc-trip-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.cc-trip-badge.verleden {
    background: var(--cc-bg);
    color: var(--cc-grijs);
    border-color: var(--cc-border);
}
.cc-trip-badge.camping-count {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.cc-icon-btn {
    background: none;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    padding: 5px 9px;
    cursor: pointer;
    font-size: .85rem;
    color: var(--cc-grijs);
    transition: all .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.cc-icon-btn:hover { background: var(--cc-bg); color: var(--cc-tekst); }

/* Campings in trip */
.cc-trip-campings {
    border-top: 1px solid var(--cc-border);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cc-trip-camping-rij {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    background: var(--cc-bg);
}
.cc-trip-camping-foto {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.cc-trip-camping-foto-placeholder {
    width: 56px; height: 42px;
    border-radius: 8px;
    background: var(--cc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.cc-trip-camping-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-trip-camping-naam { font-size: .88rem; font-weight: 600; color: var(--cc-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-trip-camping-land { font-size: .76rem; color: var(--cc-grijs); }
.cc-trip-camping-acties { display: flex; gap: 6px; flex-shrink: 0; }

.cc-trip-camping-add {
    margin: 8px 16px 12px;
    background: none;
    border: 1.5px dashed var(--cc-border);
    border-radius: 10px;
    padding: 9px 16px;
    font-size: .84rem;
    color: var(--cc-grijs);
    cursor: pointer;
    width: calc(100% - 32px);
    text-align: left;
    transition: all .15s;
}
.cc-trip-camping-add:hover {
    border-color: var(--cc-groen);
    color: var(--cc-groen);
    background: #f0fdf4;
}

/* Modal */
.cc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cc-modal-overlay.cc-verborgen { display: none; }
.cc-modal {
    background: var(--cc-wit);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
}
.cc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--cc-border);
}
.cc-modal__titel { font-family: var(--cc-font-hoofd); font-size: 1.3rem; color: var(--cc-tekst); margin: 0; }
.cc-modal__sluiten {
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
    transition: background .18s, transform .18s;
}
.cc-modal__sluiten:hover { background: rgba(0,0,0,.6); transform: scale(1.08); }
.cc-modal__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.cc-modal__acties { display: flex; gap: 10px; margin-top: 6px; }
.cc-form-rij-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cc-textarea { resize: vertical; min-height: 80px; }
.cc-btn-annuleren {
    background: none; border: 1px solid var(--cc-border);
    border-radius: 10px; padding: 10px 18px;
    font-size: .88rem; cursor: pointer; color: var(--cc-grijs);
    transition: all .15s;
}
.cc-btn-annuleren:hover { background: var(--cc-bg); }

@media (max-width: 600px) {
    .cc-trips-wrap { padding: 20px 16px 60px; }
    .cc-trips-header { flex-direction: column; }
    .cc-trip-nieuw-btn { width: 100%; text-align: center; }
    .cc-trips-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cc-trips-stats--geschiedenis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cc-form-rij-2 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   TIJDLIJN (Trips + Geschiedenis)
═══════════════════════════════════════════ */

.cc-tijdlijn-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.cc-tijdlijn-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}
.cc-tijdlijn-titel {
    font-family: var(--cc-font-hoofd);
    font-size: 2rem;
    color: var(--cc-tekst);
    margin: 0 0 4px;
}
.cc-tijdlijn-sub { color: var(--cc-grijs); font-size: .9rem; margin: 0; }

/* Maand / jaar labels */
.cc-tijdlijn-sectie { margin-bottom: 28px; }
.cc-tijdlijn-maand  { margin-bottom: 20px; }
.cc-tijdlijn-maand__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--cc-grijs);
    margin-bottom: 8px;
    padding-left: 4px;
}
.cc-tijdlijn-lijst { display: flex; flex-direction: column; gap: 10px; }
.cc-trips-jaar-count {
    font-family: var(--cc-font-body);
    font-size: .78rem;
    font-weight: 500;
    color: var(--cc-grijs);
    margin-left: 6px;
}

.cc-geschiedenis-jaar { margin-bottom: 18px; }
.cc-geschiedenis-jaar__panel {
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(215, 221, 216, .95);
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .05);
    overflow: hidden;
}
.cc-geschiedenis-jaar__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
}
.cc-geschiedenis-jaar__summary::-webkit-details-marker,
.cc-geschiedenis-trip__summary::-webkit-details-marker {
    display: none;
}
.cc-geschiedenis-jaar__summary-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cc-geschiedenis-jaar__labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-geschiedenis-jaar__summary .cc-trips-sectie__titel {
    margin: 0;
    font-size: 1.2rem;
}
.cc-geschiedenis-jaar__sub {
    margin: 0;
    color: var(--cc-grijs);
    font-size: .84rem;
}
.cc-geschiedenis-jaar__toggle,
.cc-geschiedenis-trip__toggle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--cc-border);
    background: var(--cc-bg);
    position: relative;
    flex-shrink: 0;
}
.cc-geschiedenis-jaar__toggle::before,
.cc-geschiedenis-trip__toggle::before {
    content: "⌄";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--cc-tekst-2);
    font-size: 1rem;
    transition: transform .2s ease;
}
.cc-geschiedenis-jaar__panel[open] .cc-geschiedenis-jaar__toggle::before,
.cc-geschiedenis-trip[open] .cc-geschiedenis-trip__toggle::before {
    transform: rotate(180deg);
}
.cc-geschiedenis-trips {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px 18px;
}

.cc-geschiedenis-trip {
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(215, 221, 216, .95);
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,250,248,.98) 100%);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .04);
    overflow: hidden;
}
.cc-geschiedenis-trip::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, var(--cc-groen-licht) 0%, var(--cc-groen) 100%);
}
.cc-geschiedenis-trip--winter::before { background: linear-gradient(180deg, #93c5fd 0%, #2563eb 100%); }
.cc-geschiedenis-trip--voorjaar::before { background: linear-gradient(180deg, #86efac 0%, #16a34a 100%); }
.cc-geschiedenis-trip--zomer::before { background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%); }
.cc-geschiedenis-trip--najaar::before { background: linear-gradient(180deg, #fdba74 0%, #c2410c 100%); }

.cc-geschiedenis-trip__summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 14px;
    padding: 16px 18px;
}
.cc-geschiedenis-trip__route {
    position: relative;
    display: flex;
    justify-content: center;
}
.cc-geschiedenis-trip__route::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: -6px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(82, 183, 136, .55) 0%, rgba(45, 106, 79, .08) 100%);
}
.cc-geschiedenis-trip:last-child .cc-geschiedenis-trip__route::before {
    bottom: 12px;
}
.cc-geschiedenis-trip__route-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cc-wit);
    border: 3px solid var(--cc-groen);
    margin-top: 4px;
}
.cc-geschiedenis-trip--winter .cc-geschiedenis-trip__route-dot { border-color: #2563eb; }
.cc-geschiedenis-trip--voorjaar .cc-geschiedenis-trip__route-dot { border-color: #16a34a; }
.cc-geschiedenis-trip--zomer .cc-geschiedenis-trip__route-dot { border-color: #f59e0b; }
.cc-geschiedenis-trip--najaar .cc-geschiedenis-trip__route-dot { border-color: #c2410c; }

.cc-geschiedenis-trip__content {
    min-width: 0;
}
.cc-geschiedenis-trip__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.cc-geschiedenis-trip__intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cc-geschiedenis-trip__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cc-geschiedenis-trip__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    border: 1px solid #bbf7d0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.cc-geschiedenis-trip__badge--nieuw {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fdba74;
}
.cc-geschiedenis-trip__titel {
    margin: 0;
    font-family: var(--cc-font-hoofd);
    font-size: 1.05rem;
    color: var(--cc-tekst);
    line-height: 1.35;
}
.cc-geschiedenis-trip__sub {
    margin: 0;
    color: var(--cc-grijs);
    font-size: .82rem;
}
.cc-geschiedenis-trip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(215, 221, 216, .8);
    padding-top: 12px;
}
.cc-geschiedenis-trip__pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--cc-bg);
    color: var(--cc-tekst);
    border: 1px solid var(--cc-border);
    font-size: .76rem;
    font-weight: 600;
}
.cc-geschiedenis-trip__body {
    padding: 0 18px 18px 58px;
}
.cc-tijdlijn-lijst--geschiedenis-trip {
    gap: 12px;
}

@media (max-width: 700px) {
    .cc-geschiedenis-jaar__summary {
        padding: 16px;
    }

    .cc-geschiedenis-trips {
        padding: 0 14px 14px;
    }

    .cc-geschiedenis-trip__summary {
        grid-template-columns: 20px 1fr;
        padding: 14px;
    }

    .cc-geschiedenis-trip__kop {
        flex-direction: column;
    }

    .cc-geschiedenis-trip__body {
        padding: 0 14px 14px 36px;
    }
}

/* Verblijf rij */
.cc-vr-rij {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    padding: 14px 16px;
    border-left: 4px solid var(--cc-groen);
    transition: box-shadow .15s;
}
.cc-vr-rij:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }

.cc-vr-link {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.cc-vr-rij--klikbaar { cursor: pointer; }

.cc-vr-rij--klikbaar .cc-vr-link:hover .cc-vr-naam,
.cc-vr-rij--klikbaar .cc-vr-link:focus-visible .cc-vr-naam {
    color: var(--cc-groen);
}

.cc-vr-link:focus-visible {
    outline: 2px solid var(--cc-groen);
    outline-offset: 4px;
    border-radius: 12px;
}

button.cc-vr-link {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

button.cc-vr-link::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.cc-vr-foto {
    width: 88px;
    height: 66px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.cc-vr-foto--leeg {
    width: 88px;
    height: 66px;
    border-radius: 10px;
    background: var(--cc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.cc-vr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-vr-naam {
    font-family: var(--cc-font-hoofd);
    font-size: 1.05rem;
    color: var(--cc-tekst);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-vr-locatie {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    color: var(--cc-grijs);
}
.cc-vr-datum {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .82rem;
    color: var(--cc-grijs);
}
.cc-vr-pijl { color: var(--cc-grijs); }
.cc-vr-nachten {
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--cc-tekst);
}
.cc-vr-ster { font-size: .85rem; }

/* Countdown badges */
.cc-vr-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
}
.cc-vr-badge.toekomst {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.cc-vr-badge.recent {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.cc-vr-badge.nu {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047;
}

.cc-vr-acties { flex-shrink: 0; display: flex; gap: 6px; }

@media (max-width: 600px) {
    .cc-tijdlijn-wrap { padding: 20px 16px 60px; }
    .cc-tijdlijn-header { flex-direction: column; }
    .cc-trip-nieuw-btn { width: 100%; text-align: center; }
    .cc-geschiedenis-trip { padding: 12px; border-radius: 16px; }
    .cc-geschiedenis-trip__kop { flex-direction: column; align-items: stretch; }
    .cc-geschiedenis-trip__meta { justify-content: flex-start; }
    .cc-geschiedenis-trip__titel { font-size: .92rem; }
    .cc-vr-foto, .cc-vr-foto--leeg { width: 64px; height: 48px; }
    .cc-vr-naam { font-size: .95rem; }
}

/* ═══════════════════════════════════════════
   DARKMODE
═══════════════════════════════════════════ */

/* Desktop: compacte ruimte tussen de zichtbare hoofdtaken */
@media (min-width: 701px) {
    .cc-topnav__items { gap: 6px; }
}

/* Darkmode knop */
.cc-darkmode-btn {
    appearance: none;
    background: #ffffff;
    border: 1px solid #d7ddd8;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cc-tekst);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    flex-shrink: 0;
    position: relative;
    font-size: 18px;
    line-height: 1;
}
.cc-darkmode-btn:hover {
    background: #f6faf8;
    border-color: #b9c9bf;
    color: var(--cc-groen);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}
.cc-darkmode-btn:focus-visible {
    outline: 3px solid rgba(46, 113, 81, .18);
    outline-offset: 2px;
}
:root.cc-dark .cc-darkmode-btn {
    background: #2c2c2c;
    border-color: #4a4a4a;
    color: #f3efe7;
    box-shadow: 0 1px 2px rgba(0,0,0,.28);
}
:root.cc-dark .cc-darkmode-btn:hover {
    background: #33443b;
    border-color: #4f8f6d;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* Standaard: toon maan (licht modus), verberg zon */
.cc-darkmode-icon--zon  { display: none; }
.cc-darkmode-icon--maan { display: inline-flex; }

/* In dark mode: toon zon, verberg maan */
:root.cc-dark .cc-darkmode-icon--zon  { display: inline-flex; }
:root.cc-dark .cc-darkmode-icon--maan { display: none; }

/* v3.7.221: forceer een zichtbaar dark-mode icoon. Op mobiel kon de knop
   z'n tekstkleur erven (wit op wit), waardoor de maan onzichtbaar werd.
   Expliciete kleur + stroke lost dit op, los van overerving. */
.cc-darkmode-btn .cc-darkmode-icon svg { stroke: #2d6a4f !important; fill: none !important; stroke-width: 2 !important; }
.cc-darkmode-btn .cc-darkmode-icon--maan svg { fill: rgba(45,106,79,.12) !important; }
:root.cc-dark .cc-darkmode-btn .cc-darkmode-icon svg { stroke: #ffd66b !important; }
:root.cc-dark .cc-darkmode-btn .cc-darkmode-icon--zon svg { fill: rgba(255,214,107,.16) !important; }

/* ── Dark mode variabelen ── */
:root.cc-dark {
    --cc-bg:         #111318;
    --cc-wit:        #1e2128;
    --cc-tekst:      #f0ede8;
    --cc-grijs:      #9ca3af;
    --cc-border:     #2e3340;
    --cc-groen:      #4ade80;
    --cc-groen-2:    #22c55e;
    --cc-groen-pale: #0f2a1a;
    --cc-accent:     #4ade80;
    --cc-input-bg:   #252830;
    --cc-schaduw:    0 2px 12px rgba(0,0,0,.5);
    --cc-schaduw-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* Specifieke dark mode overrides */
:root.cc-dark .cc-topnav {
    background: var(--cc-wit);
    border-bottom-color: var(--cc-border);
}
:root.cc-dark .cc-kaart {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-kaart__naam { color: #f0ede8; }
:root.cc-dark .cc-kaart__sub  { color: #9ca3af; }
:root.cc-dark .cc-kaart__foto-placeholder {
    background: #2a2d35;
}
:root.cc-dark .cc-popup {
    background: var(--cc-wit);
}
:root.cc-dark .cc-popup__foto-overlay {
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.9));
}
:root.cc-dark .cc-topnav__dropdown {
    background: #1e2128;
    border-color: var(--cc-border);
    box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
:root.cc-dark .cc-dropdown__item { color: #f0ede8; }
:root.cc-dark .cc-dropdown__item:hover { background: #2a2d35; color: #fff; }
:root.cc-dark .cc-stat-card,
:root.cc-dark .cc-form-sectie,
:root.cc-dark .cc-vr-rij,
:root.cc-dark .cc-trip-rij,
:root.cc-dark .cc-trips-stat,
:root.cc-dark .cc-modal {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-stat-card__getal { color: #f0ede8; }
:root.cc-dark .cc-stat-card__label { color: #9ca3af; }
:root.cc-dark .cc-input,
:root.cc-dark .cc-zoekbalk__input,
:root.cc-dark .cc-zoekbalk__select {
    background: var(--cc-input-bg);
    border-color: #3a3f4c;
    color: #f0ede8;
}
:root.cc-dark .cc-input::placeholder { color: #6b7280; }
:root.cc-dark .cc-label { color: #d1d5db; }
:root.cc-dark .cc-mob-menu {
    background: #1e2128;
    border-color: var(--cc-border);
}
:root.cc-dark .cc-mob-menu a { color: #f0ede8 !important; }
:root.cc-dark .cc-mob-menu a:hover { background: #2a2d35; }
:root.cc-dark .cc-mob-menu__uitloggen { color: #f87171 !important; }
:root.cc-dark .cc-trip-camping-rij { background: #252830; color: #f0ede8; }
:root.cc-dark .cc-weer-dag { background: #252830; color: #f0ede8; }
:root.cc-dark .cc-leaflet-kaart { border-color: var(--cc-border); }
:root.cc-dark body { background: var(--cc-bg); color: var(--cc-tekst); }
/* Betere contrast voor tekst over donkere achtergrond */
:root.cc-dark h1, :root.cc-dark h2, :root.cc-dark h3 { color: #f0ede8; }
:root.cc-dark p, :root.cc-dark span, :root.cc-dark li { color: #d1d5db; }
:root.cc-dark .cc-home-header__titel { color: #f0ede8; }
:root.cc-dark .cc-home-header__sub   { color: #9ca3af; }
:root.cc-dark .cc-zoekbalk__input::placeholder { color: #6b7280; }
/* Badges en pills */
:root.cc-dark .cc-badge { background: #2a2d35; color: #d1d5db; border-color: #3a3f4c; }
:root.cc-dark .cc-brandstof-pill { background: #252830; color: #d1d5db; border-color: #3a3f4c; }
:root.cc-dark .cc-brandstof-totaalvak { background: #252830; border-color: #3a3f4c; }
:root.cc-dark .cc-brandstof-totaalvak__waarde { color: #4ade80; }
/* Knoppen */
:root.cc-dark .cc-submit { background: #4ade80; color: #0a1a0f; }
:root.cc-dark .cc-submit:hover { background: #22c55e; }
:root.cc-dark .cc-btn-annuleren { color: #9ca3af; border-color: #3a3f4c; }
:root.cc-dark .cc-btn-annuleren:hover { background: #2a2d35; color: #f0ede8; }

/* Dark mode – checklist */
:root.cc-dark .cc-checklist-card {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-checklist-item {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-checklist-item:hover {
    border-color: #4a5a4a;
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
:root.cc-dark .cc-checklist-item.is-checked {
    background: #1a2e22;
    border-color: #2a5a3a;
}
:root.cc-dark .cc-checklist-item__box {
    background: #2c2c2c;
    border-color: #4a4a4a;
}
:root.cc-dark .cc-checklist-item--edit.is-enabled {
    background: #1a2e22;
    border-color: #2a5a3a;
}
:root.cc-dark .cc-checklist-progress__bar {
    background: #333;
}
:root.cc-dark .cc-checklist-scope {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-checklist-scope__select {
    background: #2c2c2c;
    border-color: var(--cc-border);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-checklist-btn--ghost {
    border-color: var(--cc-border);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-checklist-btn--ghost:hover {
    background: #2c2c2c;
}
:root.cc-dark .cc-checklist-switch__track {
    background: #3a3a3a;
}

/* Dark mode – trips checklist banner */
:root.cc-dark .cc-trips-checklist-banner {
    background: var(--cc-wit);
    border-color: var(--cc-border);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-trips-checklist-banner:hover {
    background: #2c2c2c;
}
:root.cc-dark .cc-trips-checklist-banner__bar {
    background: #3a3a3a;
}


/* ═══════════════════════════════════════
   CHECKLIST
═══════════════════════════════════════ */
.cc-checklist-wrap{
    max-width:1100px;
    margin:0 auto;
    padding:48px 24px 72px;
}
.cc-checklist-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}
.cc-checklist-title{
    margin:0;
    font-family:var(--cc-font-hoofd);
    font-size:clamp(2.2rem,4vw,3.2rem);
    line-height:1.05;
    color:var(--cc-tekst);
}
.cc-checklist-sub{
    margin:10px 0 0;
    max-width:720px;
    color:var(--cc-grijs);
    font-size:1.02rem;
}
.cc-checklist-head__actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.cc-checklist-btn{
    appearance:none;
    border:1px solid transparent;
    background:var(--cc-groen);
    color:#fff;
    border-radius:16px;
    padding:14px 18px;
    font-weight:700;
    font-size:.95rem;
    line-height:1;
    cursor:pointer;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    box-shadow:0 8px 22px rgba(45,106,79,.16);
}
.cc-checklist-btn:hover{
    transform:translateY(-1px);
    background:var(--cc-groen-2);
    color:#fff;
}
.cc-checklist-btn--ghost{
    background:var(--cc-wit);
    color:var(--cc-tekst);
    border-color:var(--cc-border);
    box-shadow:none;
}
.cc-checklist-btn--ghost:hover{
    background:var(--cc-bg-2);
    color:var(--cc-tekst);
}
.cc-stats-rij--checklist{
    padding:0;
    margin-bottom:22px;
}
.cc-checklist-progress{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}
.cc-checklist-progress__bar{
    flex:1;
    height:12px;
    border-radius:999px;
    background:#e4ece7;
    overflow:hidden;
}
.cc-checklist-progress__bar span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--cc-groen),var(--cc-groen-licht));
    transition:width .2s ease;
}
.cc-checklist-progress__text{
    min-width:145px;
    text-align:right;
    font-weight:700;
    color:var(--cc-tekst-2);
}
.cc-checklist-feedback{
    display:none;
    margin-bottom:18px;
    padding:12px 16px;
    border-radius:16px;
    border:1px solid rgba(82,183,136,.28);
    background:#eef8f2;
    color:var(--cc-groen);
    font-weight:600;
}
.cc-checklist-feedback.is-visible{ display:block; }
.cc-checklist-feedback.is-error{
    background:#fff1f2;
    border-color:#fecdd3;
    color:#be123c;
}
.cc-checklist-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.cc-checklist-card{
    background:var(--cc-wit);
    border:1px solid var(--cc-border);
    border-radius:28px;
    padding:24px;
    box-shadow:var(--cc-schaduw);
}
.cc-checklist-card__head{
    margin-bottom:18px;
}
.cc-checklist-card__title{
    display:flex;
    align-items:flex-start;
    gap:14px;
}
.cc-checklist-card__emoji{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:var(--cc-groen-pale);
    font-size:1.45rem;
}
.cc-checklist-card__title h2{
    margin:0;
    font-size:1.22rem;
    line-height:1.2;
    color:var(--cc-tekst);
}
.cc-checklist-card__title p{
    margin:6px 0 0;
    color:var(--cc-grijs);
    font-size:.92rem;
}
.cc-checklist-items{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.cc-checklist-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 14px;
    border:1px solid var(--cc-border);
    border-radius:18px;
    background:#fff;
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
    cursor:pointer;
}
.cc-checklist-item:hover{
    border-color:#d4ddcf;
    box-shadow:0 10px 22px rgba(17,24,39,.05);
    transform:translateY(-1px);
}
.cc-checklist-item.is-checked{
    background:#f3faf6;
    border-color:#cce6d7;
}
.cc-checklist-item__input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.cc-checklist-item__box{
    width:22px;
    height:22px;
    border-radius:7px;
    border:2px solid #cad4cb;
    background:#fff;
    flex:0 0 22px;
    position:relative;
    transition:all .18s ease;
}
.cc-checklist-item.is-checked .cc-checklist-item__box{
    background:var(--cc-groen);
    border-color:var(--cc-groen);
}
.cc-checklist-item.is-checked .cc-checklist-item__box::after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:6px;
    height:11px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.cc-checklist-item__label{
    color:var(--cc-tekst);
    font-weight:600;
    line-height:1.4;
}
.cc-checklist-item.is-checked .cc-checklist-item__label{
    color:var(--cc-tekst-2);
    text-decoration:line-through;
}
.cc-checklist-grid--edit .cc-checklist-item{
    align-items:center;
}
.cc-checklist-item--edit.is-enabled{
    background:#f6fbf8;
    border-color:#cce6d7;
}
.cc-checklist-switch{
    position:relative;
    flex:0 0 auto;
}
.cc-checklist-switch__input{
    position:absolute;
    opacity:0;
    inset:0;
    cursor:pointer;
}
.cc-checklist-switch__track{
    display:block;
    width:52px;
    height:32px;
    border-radius:999px;
    background:#d9ded7;
    position:relative;
    transition:background .18s ease;
}
.cc-checklist-switch__track::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(15,23,42,.16);
    transition:transform .18s ease;
}
.cc-checklist-switch__input:checked + .cc-checklist-switch__track{
    background:var(--cc-groen);
}
.cc-checklist-switch__input:checked + .cc-checklist-switch__track::after{
    transform:translateX(20px);
}
.cc-checklist-item:focus-within,
.cc-checklist-btn:focus-visible,
.cc-checklist-switch__input:focus-visible + .cc-checklist-switch__track{
    outline:none;
    box-shadow:0 0 0 4px rgba(82,183,136,.18);
}
/* ── Edit-modus checkbox (vervangt toggle switch) ── */
.cc-checklist-edit-check{
    position:relative;
    flex:0 0 auto;
    cursor:pointer;
    display:flex;
    align-items:center;
}
.cc-checklist-edit-check .cc-checklist-switch__input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.cc-checklist-edit-check__box{
    width:22px;
    height:22px;
    border-radius:7px;
    border:2px solid #cad4cb;
    background:#fff;
    flex:0 0 22px;
    position:relative;
    transition:all .18s ease;
}
.cc-checklist-edit-check .cc-checklist-switch__input:checked + .cc-checklist-edit-check__box{
    background:var(--cc-groen);
    border-color:var(--cc-groen);
}
.cc-checklist-edit-check .cc-checklist-switch__input:checked + .cc-checklist-edit-check__box::after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:6px;
    height:11px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.cc-checklist-edit-check .cc-checklist-switch__input:focus-visible + .cc-checklist-edit-check__box{
    outline:none;
    box-shadow:0 0 0 4px rgba(82,183,136,.18);
}
:root.cc-dark .cc-checklist-edit-check__box{
    background:#2c2c2c;
    border-color:#4a4a4a;
}
html.cc-dark .cc-checklist-btn--ghost{
    background:rgba(255,255,255,.06);
    color:#f5f5f4;
    border-color:rgba(255,255,255,.12);
}
html.cc-dark .cc-checklist-btn--ghost:hover{
    background:rgba(255,255,255,.1);
}
html.cc-dark .cc-checklist-progress__bar{
    background:rgba(255,255,255,.08);
}
html.cc-dark .cc-checklist-feedback{
    background:rgba(82,183,136,.14);
    border-color:rgba(82,183,136,.28);
}
html.cc-dark .cc-checklist-feedback.is-error{
    background:rgba(190,24,93,.14);
    border-color:rgba(244,114,182,.28);
}
html.cc-dark .cc-checklist-item,
html.cc-dark .cc-checklist-card{
    background:rgba(255,255,255,.03);
}
@media (max-width: 1100px){
    .cc-checklist-grid{
        grid-template-columns:1fr;
    }
}
@media (max-width: 768px){
    .cc-checklist-wrap{
        padding:28px 16px 48px;
    }
    .cc-checklist-head{
        flex-direction:column;
        align-items:stretch;
    }
    .cc-checklist-head__actions{
        justify-content:flex-start;
    }
    .cc-checklist-progress{
        flex-direction:column;
        align-items:stretch;
    }
    .cc-checklist-progress__text{
        min-width:0;
        text-align:left;
    }
    .cc-checklist-card{
        border-radius:22px;
        padding:18px;
    }
}


/* ═══════════════════════════════════════
   CHECKLIST — EIGEN ITEMS PER CATEGORIE
═══════════════════════════════════════ */
.cc-checklist-item__labelrow{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.cc-checklist-chip{
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(45,106,79,.16);
    background:var(--cc-bg-2);
    color:var(--cc-groen);
    border-radius:999px;
    padding:4px 9px;
    font-size:.72rem;
    font-weight:700;
    line-height:1;
}
.cc-checklist-add{
    margin-top:18px;
    padding-top:16px;
    border-top:1px dashed var(--cc-border);
}
.cc-checklist-add__row{
    display:flex;
    align-items:center;
    gap:10px;
}
.cc-checklist-add__input{
    flex:1;
    min-width:0;
    height:52px;
    border:1px solid var(--cc-border);
    border-radius:16px;
    background:var(--cc-bg);
    color:var(--cc-tekst);
    padding:0 16px;
    font-size:.96rem;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cc-checklist-add__input::placeholder{
    color:#9aa6ba;
}
.cc-checklist-add__input:focus{
    outline:none;
    border-color:rgba(45,106,79,.45);
    box-shadow:0 0 0 4px rgba(45,106,79,.12);
    background:var(--cc-wit);
}
.cc-checklist-btn--small{
    padding:13px 16px;
    border-radius:14px;
    white-space:nowrap;
    box-shadow:none;
}
.cc-checklist-add__hint{
    margin:8px 2px 0;
    font-size:.82rem;
    color:var(--cc-grijs);
}

/* ═══════════════════════════════════════
   CAMPINGKAART — FOTO PREVIEW STRIP
═══════════════════════════════════════ */
.cc-kaart{
    display:flex;
    flex-direction:column;
    height:100%;
}
.cc-kaart__body{
    display:flex;
    flex-direction:column;
    flex:1;
}
.cc-kaart__preview{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--cc-border);
}
.cc-kaart__preview-label{
    margin:0 0 10px;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#95a0b3;
}
.cc-kaart__preview-strip{
    display:flex;
    align-items:center;
    gap:8px;
}
.cc-kaart__preview-thumb{
    position:relative;
    width:56px;
    height:56px;
    flex:0 0 auto;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.24);
    background:var(--cc-bg-2);
    box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.cc-kaart__preview-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.cc-kaart__preview-thumb--more::after{
    content:attr(data-more);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.48);
    color:#fff;
    font-size:.94rem;
    font-weight:700;
    backdrop-filter:blur(2px);
}
:root.cc-dark .cc-checklist-chip{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.08);
}
:root.cc-dark .cc-checklist-add__input{
    background:#242424;
}
:root.cc-dark .cc-checklist-add__input:focus{
    background:#2a2a2a;
}
:root.cc-dark .cc-kaart__preview-thumb{
    border-color:rgba(255,255,255,.08);
}
@media (max-width: 680px){
    .cc-checklist-add__row{
        flex-direction:column;
        align-items:stretch;
    }
    .cc-checklist-btn--small{
        width:100%;
        text-align:center;
    }
    .cc-kaart__preview-thumb{
        width:48px;
        height:48px;
        border-radius:14px;
    }
}



/* ═══════════════════════════════════════
   CHECKLIST – PERSOONLIJK + REISAFHANKELIJK
═══════════════════════════════════════ */
.cc-checklist-context {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(82, 183, 136, .08);
    border: 1px solid rgba(82, 183, 136, .16);
    border-radius: 14px;
}
.cc-checklist-context__label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cc-grijs);
    font-weight: 700;
}
.cc-checklist-context strong {
    font-size: .92rem;
    color: var(--cc-tekst);
    line-height: 1.3;
}

.cc-checklist-scope {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: 18px;
    align-items: center;
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: 20px;
    padding: 20px 22px;
    margin: 0 0 22px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .04);
}
.cc-checklist-scope__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cc-groen);
    font-weight: 700;
}
.cc-checklist-scope__copy strong {
    display: block;
    font-size: 1rem;
    color: var(--cc-tekst);
    margin-bottom: 4px;
}
.cc-checklist-scope__copy p {
    margin: 0;
    color: var(--cc-tekst-2);
    font-size: .88rem;
    line-height: 1.6;
}
.cc-checklist-scope__control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cc-checklist-scope__label {
    font-size: .78rem;
    color: var(--cc-grijs);
    font-weight: 700;
}
.cc-checklist-scope__select {
    width: 100%;
    min-height: 50px;
    padding: 0 44px 0 16px;
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    background-color: var(--cc-wit);
    color: var(--cc-tekst);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cc-checklist-scope__select:focus {
    border-color: rgba(82,183,136,.55);
    box-shadow: 0 0 0 4px rgba(82,183,136,.14);
}
.cc-checklist-scope__hint {
    color: var(--cc-grijs);
    font-size: .78rem;
}

.cc-checklist-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    border-radius: 999px;
}
.cc-checklist-toggle__btn {
    border: none;
    background: transparent;
    color: var(--cc-tekst-2);
    border-radius: 999px;
    padding: 10px 14px;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}
.cc-checklist-toggle__btn:hover {
    background: rgba(82, 183, 136, .08);
    color: var(--cc-groen);
}
.cc-checklist-toggle__btn.is-active {
    background: var(--cc-groen);
    color: #fff;
    box-shadow: 0 8px 20px rgba(48, 121, 87, .22);
}

.cc-dropdown__item--checklist .cc-dropdown__icon,
.cc-dropdown__item--checklist {
    color: var(--cc-groen);
}
:root.cc-dark .cc-dropdown__item--checklist .cc-dropdown__icon,
:root.cc-dark .cc-dropdown__item--checklist {
    color: var(--cc-tekst);
}

@media (max-width: 900px) {
    .cc-checklist-scope {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .cc-checklist-head__actions {
        width: 100%;
        align-items: stretch;
    }
    .cc-checklist-toggle {
        width: 100%;
        justify-content: space-between;
    }
    .cc-checklist-toggle__btn {
        flex: 1;
        text-align: center;
    }
    .cc-checklist-scope {
        padding: 18px;
        border-radius: 18px;
    }
}


/* ═══════════════════════════════════════
   POPUP GALERIJ + LIGHTBOX
═══════════════════════════════════════ */
.cc-popup__gallery{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}
.cc-popup__gallery-btn{
    appearance:none;
    border:1px solid rgba(148,163,184,.24);
    border-radius:18px;
    padding:0;
    background:var(--cc-bg-2);
    overflow:hidden;
    cursor:zoom-in;
    position:relative;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    aspect-ratio:1 / 1;
}
.cc-popup__gallery-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 30px rgba(15,23,42,.12);
    border-color:rgba(45,106,79,.22);
}
.cc-popup__gallery-btn img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.cc-popup-lightbox{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(8,12,18,.56);
    backdrop-filter:blur(14px);
    opacity:0;
    transition:opacity .2s ease;
}
.cc-popup-lightbox.is-visible{
    opacity:1;
}
.cc-popup-lightbox__inner{
    max-width:min(92vw,1120px);
    max-height:86vh;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 28px 70px rgba(0,0,0,.32);
    background:rgba(255,255,255,.08);
}
.cc-popup-lightbox__img{
    display:block;
    max-width:100%;
    max-height:86vh;
    width:auto;
    height:auto;
}
.cc-popup-lightbox__sluiten {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.45); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: background .18s, transform .18s;
}
.cc-popup-lightbox__sluiten:hover { background: rgba(0,0,0,.7); transform: scale(1.08); }

@media (max-width: 680px){
    .cc-popup__gallery{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }
    .cc-popup__gallery-btn{
        border-radius:14px;
    }
    .cc-popup-lightbox{
        padding:16px;
    }
    .cc-popup-lightbox__inner{
        border-radius:20px;
    }
    .cc-popup-lightbox__sluiten{
        top:12px;
        right:12px;
        width:38px;
        height:38px;
    }
}

:root.cc-dark .cc-popup__gallery-btn{
    background:#242424;
    border-color:rgba(255,255,255,.08);
}
:root.cc-dark .cc-popup-lightbox{
    background:rgba(4,8,14,.72);
}


/* ═══════════════════════════════════════
   CHECKLIST FIXES 3.4.2
═══════════════════════════════════════ */
.cc-app--checklist-bewerken #cc-checklist-toggle-all,
.cc-app--checklist-bewerken .cc-checklist-toggle{
    display:none !important;
}
.cc-app--checklist .cc-checklist-head__actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
/* ── Compact action knoppen (checklist toolbar) ── */
.cc-checklist-action{
    appearance:none;
    border:1px solid var(--cc-border);
    background:var(--cc-wit);
    color:var(--cc-tekst);
    border-radius:14px;
    padding:10px 14px;
    font:inherit;
    font-weight:600;
    font-size:.82rem;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    white-space:nowrap;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.cc-checklist-action:hover{
    background:var(--cc-bg-2);
    border-color:#c4ccc0;
    transform:translateY(-1px);
}
.cc-checklist-action--primary{
    background:var(--cc-groen);
    color:#fff;
    border-color:transparent;
    box-shadow:0 4px 12px rgba(45,106,79,.2);
}
.cc-checklist-action--primary:hover{
    background:var(--cc-groen-2);
    color:#fff;
}
.cc-checklist-action svg{
    flex:0 0 auto;
}
:root.cc-dark .cc-checklist-action--pill{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.1);
    color:var(--cc-tekst);
}
:root.cc-dark .cc-checklist-action--pill:hover{
    background:rgba(255,255,255,.1);
}
@media (max-width: 520px){
    .cc-checklist-action span{
        display:none;
    }
    .cc-checklist-action--primary span{
        display:inline;
    }
    .cc-checklist-action{
        padding:10px;
    }
    .cc-checklist-action--primary{
        padding:10px 14px;
        flex:1 1 auto;
        justify-content:center;
    }
    .cc-checklist-head__actions{
        width:100%;
    }
}


.cc-checklist-head__actions:empty{
    display:none;
}
.cc-checklist-scope__actions{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-top:2px;
}
.cc-checklist-scope__create{
    width:100%;
    justify-content:center;
}
.cc-modal--checklist-create{
    max-width:560px;
}
@media (max-width: 700px) {
    .cc-checklist-scope__actions{
        width:100%;
    }
    .cc-checklist-scope__create{
        width:100%;
    }
}

/* ═══════════════════════════════════════
   TRIPS – CHECKLIST BANNER
═══════════════════════════════════════ */
.cc-trips-checklist-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    margin: 12px 0 4px;
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--cc-tekst);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cc-trips-checklist-banner:hover {
    background: #f7faf7;
    box-shadow: 0 4px 16px rgba(17,24,39,.07);
    transform: translateY(-1px);
}
.cc-trips-checklist-banner__left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cc-trips-checklist-banner__left svg {
    color: var(--cc-groen);
    flex: 0 0 auto;
}
.cc-trips-checklist-banner__left strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--cc-tekst);
    line-height: 1.3;
}
.cc-trips-checklist-banner__left span {
    display: block;
    font-size: .82rem;
    color: var(--cc-grijs);
    margin-top: 1px;
}
.cc-trips-checklist-banner__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.cc-trips-checklist-banner__bar {
    width: 100px;
    height: 6px;
    background: #e8ede8;
    border-radius: 999px;
    overflow: hidden;
}
.cc-trips-checklist-banner__fill {
    height: 100%;
    background: var(--cc-groen);
    border-radius: 999px;
    transition: width .3s ease;
}
.cc-trips-checklist-banner__pct {
    font-size: .82rem;
    font-weight: 700;
    color: var(--cc-groen);
    min-width: 32px;
    text-align: right;
}
.cc-trips-checklist-banner svg:last-child {
    color: var(--cc-grijs);
}
@media (max-width: 600px) {
    .cc-trips-checklist-banner__bar { width: 60px; }
    .cc-trips-checklist-banner__pct { display: none; }
}

/* ═══════════════════════════════════════
   CHECKLIST – RESET KNOP
═══════════════════════════════════════ */
.cc-checklist-head__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.cc-checklist-btn--reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    padding: 10px 16px;
}
.cc-checklist-btn--reset svg {
    flex: 0 0 auto;
}

/* ═══════════════════════════════════════
   STATISTIEKEN – VOLLEDIG DASHBOARD
═══════════════════════════════════════ */
.cc-statistieken-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}
.cc-statistieken-head { margin-bottom: 32px; }
.cc-statistieken-titel {
    font-family: var(--cc-font-hoofd);
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 6px;
    color: var(--cc-tekst);
}
.cc-statistieken-sub {
    color: var(--cc-grijs);
    font-size: 1rem;
    margin: 0;
}
.cc-statistieken-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 28px;
}
.cc-stat-blok {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--cc-schaduw);
}
.cc-stat-blok--vz { grid-column: 1 / -1; }
.cc-stat-blok__head {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--cc-border);
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.cc-stat-blok__head h2 {
    font-family: var(--cc-font-hoofd);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--cc-tekst);
}
.cc-stat-blok__sub {
    font-size: .8rem;
    color: var(--cc-grijs);
    font-weight: 400;
}
.cc-stat-blok__body { padding: 18px 20px; }
.cc-stat-blok__body--noPad { padding: 0; }

/* Jaar chart (horizontale bars) */
.cc-jaar-chart { display: flex; flex-direction: column; gap: 10px; }
.cc-jaar-chart__rij {
    display: grid;
    grid-template-columns: 48px 1fr 42px;
    align-items: center;
    gap: 10px;
}
.cc-jaar-chart__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cc-grijs);
    text-align: right;
}
.cc-jaar-chart__bar-wrap {
    height: 10px;
    background: #eef1ee;
    border-radius: 999px;
    overflow: hidden;
}
.cc-jaar-chart__bar {
    height: 100%;
    background: var(--cc-groen);
    border-radius: 999px;
    transition: width .5s ease;
}
.cc-jaar-chart__val {
    font-size: .82rem;
    font-weight: 700;
    color: var(--cc-tekst);
}

/* Maand chart (verticale kolommen) */
.cc-maand-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 110px;
    padding-bottom: 24px;
    position: relative;
}
.cc-maand-chart__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    position: relative;
}
.cc-maand-chart__val {
    font-size: .7rem;
    font-weight: 700;
    color: var(--cc-groen);
    line-height: 1;
    min-height: 14px;
}
.cc-maand-chart__bar-wrap {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: flex-end;
}
.cc-maand-chart__bar {
    width: 100%;
    background: #cce6d7;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height .4s ease;
}
.cc-maand-chart__col.is-top .cc-maand-chart__bar { background: var(--cc-groen); }
.cc-maand-chart__label {
    position: absolute;
    bottom: -20px;
    font-size: .65rem;
    color: var(--cc-grijs);
    white-space: nowrap;
}

/* Landen rijen */
.cc-land-rij {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cc-border);
}
.cc-land-rij:last-child { border-bottom: none; }
.cc-land-rij__vlag { font-size: 1.3rem; flex: 0 0 28px; text-align: center; }
.cc-land-rij__midden { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cc-land-rij__naam { font-size: .9rem; font-weight: 600; color: var(--cc-tekst); }
.cc-land-rij__bar-wrap {
    height: 5px;
    background: #eef1ee;
    border-radius: 999px;
    overflow: hidden;
}
.cc-land-rij__bar {
    height: 100%;
    background: var(--cc-groen);
    border-radius: 999px;
    transition: width .4s ease;
}
.cc-land-rij__rechts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
}
.cc-land-rij__campings { font-size: .82rem; font-weight: 700; color: var(--cc-tekst); }
.cc-land-rij__nachten  { font-size: .75rem; color: var(--cc-grijs); }

/* Top campings */
.cc-top-camping-rij {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--cc-border);
}
.cc-top-camping-rij:last-child { border-bottom: none; }
.cc-top-camping-rij__nr {
    font-size: .75rem;
    font-weight: 800;
    color: var(--cc-grijs);
    flex: 0 0 18px;
    text-align: center;
}
.cc-top-camping-rij__foto {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 40px;
    background: #eef1ee;
}
.cc-top-camping-rij__foto--leeg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.cc-top-camping-rij__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cc-top-camping-rij__info strong {
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-top-camping-rij__info span {
    font-size: .78rem;
    color: var(--cc-grijs);
}
.cc-top-camping-rij__ster { flex: 0 0 auto; font-size: .85rem; }

/* Voorzieningen grid */
.cc-vz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.cc-vz-tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: #f7faf7;
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    text-align: center;
}
.cc-vz-tegel__icoon { font-size: 1.5rem; }
.cc-vz-tegel__getal { font-size: 1.1rem; font-weight: 800; color: var(--cc-groen); }
.cc-vz-tegel__label { font-size: .75rem; color: var(--cc-grijs); }

/* Dark mode statistieken */
:root.cc-dark .cc-stat-blok { background: var(--cc-wit); border-color: var(--cc-border); }
:root.cc-dark .cc-jaar-chart__bar-wrap { background: #2c2c2c; }
:root.cc-dark .cc-land-rij__bar-wrap { background: #2c2c2c; }
:root.cc-dark .cc-maand-chart__bar { background: #2a5a3a; }
:root.cc-dark .cc-maand-chart__col.is-top .cc-maand-chart__bar { background: var(--cc-groen); }
:root.cc-dark .cc-vz-tegel { background: #2c2c2c; border-color: var(--cc-border); }
:root.cc-dark .cc-top-camping-rij { border-color: var(--cc-border); }

@media (max-width: 700px) {
    .cc-statistieken-grid { grid-template-columns: 1fr; }
    .cc-stat-blok--vz { grid-column: 1; }
    .cc-maand-chart__val { display: none; }
}

/* ═══════════════════════════════════════
   GALERIJ LIGHTBOX – NAVIGATIE
═══════════════════════════════════════ */
.cc-popup-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    width: 48px;
    height: 64px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .18s ease;
    backdrop-filter: blur(4px);
}
.cc-popup-lightbox__nav:hover { background: rgba(255,255,255,.28); }
.cc-popup-lightbox__prev { left: 12px; }
.cc-popup-lightbox__next { right: 12px; }
.cc-popup-lightbox__teller {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════
   CHECKLIST – EXPORT KNOP
═══════════════════════════════════════ */
.cc-checklist-btn--export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    padding: 10px 16px;
}
.cc-checklist-btn--export svg { flex: 0 0 auto; }

/* Dark mode – grid nav knoppen */
:root.cc-dark .cc-grid-nav__btn {
    background: var(--cc-wit);
    border-color: var(--cc-border);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-grid-nav__btn:hover {
    background: #2c2c2c;
}


/* ═══════════════════════════════════════
   WP ADMIN BAR VERBERGEN OP CC PAGINA'S
═══════════════════════════════════════ */
body.cc-full-page #wpadminbar {
    display: none !important;
}
html body.cc-full-page.admin-bar,
html body.cc-full-page.admin-bar #page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
html body.cc-full-page.admin-bar {
    --wp-admin--admin-bar--height: 0px !important;
}

/* ═══════════════════════════════════════
   GRID KOLOM KLASSEN — winnen altijd
   (na alle andere regels incl. media queries)
═══════════════════════════════════════ */
.cc-kaarten-grid.cc-cols-1 {
    grid-template-columns: 1fr !important;
}
.cc-kaarten-grid.cc-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
.cc-kaarten-grid.cc-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* ═══════════════════════════════════════
   DEEL KNOP — naast hartje op de foto
═══════════════════════════════════════ */
.cc-kaart__share-btn {
    position: absolute !important;
    top: 10px !important;
    left: 52px !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.92) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    line-height: 0 !important;
    z-index: 3 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    transition: transform .15s ease, background .15s ease !important;
    backdrop-filter: blur(4px) !important;
    color: #213041 !important;
}
.cc-kaart__share-btn:hover,
.cc-kaart__share-btn:focus-visible {
    transform: scale(1.12) !important;
    background: #fff !important;
    outline: none !important;
}
.cc-kaart__share-btn svg {
    width: 18px !important;
    height: 18px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    flex: 0 0 auto !important;
}
:root.cc-dark .cc-kaart__share-btn {
    background: rgba(36,36,36,.92) !important;
    color: #fff !important;
}



/* ═══════════════════════════════════════
   CHECKLIST – COMPACTE LIJSTPULLDOWN + BEWERKEN
═══════════════════════════════════════ */
.cc-checklist-scope-menu{
    position:relative;
    display:inline-flex;
    margin-top:14px;
    max-width:min(100%, 420px);
}
.cc-checklist-scope-menu__trigger{
    appearance:none;
    border:1px solid rgba(82, 183, 136, .18);
    background:rgba(82, 183, 136, .08);
    color:var(--cc-tekst);
    border-radius:18px;
    padding:12px 16px;
    min-width:280px;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 10px 24px rgba(17,24,39,.05);
    cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.cc-checklist-scope-menu__trigger:hover{
    transform:translateY(-1px);
    border-color:rgba(82, 183, 136, .3);
    background:rgba(82, 183, 136, .11);
}
.cc-checklist-scope-menu__trigger:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(82,183,136,.16);
}
.cc-checklist-scope-menu__eyebrow{
    flex:0 0 auto;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--cc-grijs);
    font-weight:700;
}
.cc-checklist-scope-menu__value{
    min-width:0;
    flex:1;
    font-size:.94rem;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
}
.cc-checklist-scope-menu__chevron{
    flex:0 0 auto;
    color:var(--cc-grijs);
    transition:transform .18s ease, color .18s ease;
}
.cc-checklist-scope-menu.is-open .cc-checklist-scope-menu__chevron{
    transform:rotate(180deg);
    color:var(--cc-groen);
}
.cc-checklist-scope-menu__panel{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    width:min(100vw - 48px, 380px);
    background:var(--cc-wit);
    border:1px solid var(--cc-border);
    border-radius:20px;
    padding:16px;
    box-shadow:0 18px 42px rgba(17,24,39,.12);
    z-index:45;
}
.cc-checklist-scope-menu__label{
    margin:0 0 10px;
    font-size:.76rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--cc-grijs);
}
.cc-checklist-scope-menu__select{
    width:100%;
    min-height:52px;
    padding:0 46px 0 16px;
    border:1px solid var(--cc-border);
    border-radius:15px;
    background-color:var(--cc-wit);
    color:var(--cc-tekst);
    font:inherit;
    font-size:.94rem;
    font-weight:600;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.cc-checklist-scope-menu__select:focus{
    outline:none;
    border-color:rgba(82,183,136,.55);
    box-shadow:0 0 0 4px rgba(82,183,136,.14);
}
.cc-checklist-scope-menu__create{
    width:100%;
    justify-content:center;
    margin-top:12px;
}
.cc-checklist-scope-menu__hint{
    margin:10px 2px 0;
    color:var(--cc-grijs);
    font-size:.79rem;
    line-height:1.5;
}
.cc-checklist-btn--edit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.cc-checklist-grid--edit .cc-checklist-item{
    cursor:pointer;
}
.cc-checklist-item__remove{
    appearance:none;
    border:none;
    background:transparent;
    color:#d14343;
    border-radius:8px;
    padding:6px;
    margin-left:auto;
    font:inherit;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    transition:background .18s ease, transform .18s ease;
}
.cc-checklist-item__remove:hover{
    background:rgba(239,68,68,.1);
    transform:translateY(-1px);
}
.cc-checklist-item__remove:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(239,68,68,.12);
}
.cc-checklist-item__remove:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}
.cc-checklist-item__remove svg{
    flex:0 0 auto;
}
.cc-checklist-grid--edit .cc-checklist-add{
    margin-top:16px;
}
:root.cc-dark .cc-checklist-scope-menu__trigger{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
}
:root.cc-dark .cc-checklist-scope-menu__panel{
    background:#1f1f1f;
    border-color:rgba(255,255,255,.08);
}
:root.cc-dark .cc-checklist-scope-menu__select{
    background-color:#242424;
    border-color:rgba(255,255,255,.08);
}
:root.cc-dark .cc-checklist-item__remove{
    color:#ff9494;
}
:root.cc-dark .cc-checklist-item__remove:hover{
    background:rgba(239,68,68,.15);
}
@media (max-width: 900px){
    .cc-checklist-scope-menu{
        display:flex;
        width:100%;
        max-width:none;
    }
    .cc-checklist-scope-menu__trigger{
        width:100%;
        min-width:0;
    }
}


/* ═══════════════════════════════════════
   CHECKLIST — GROEPEN BEHEREN
═══════════════════════════════════════ */
.cc-checklist-card__head--edit{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}
.cc-checklist-card__labelrow{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}
.cc-checklist-card__tools{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}
.cc-checklist-btn--danger{
    color:#b42318;
    border-color:#f0d5d1;
    background:#fff;
}
.cc-checklist-btn--danger:hover,
.cc-checklist-btn--danger:focus-visible{
    color:#fff;
    background:#b42318;
    border-color:#b42318;
    box-shadow:0 10px 24px rgba(180,35,24,.18);
}
.cc-checklist-empty-group{
    border:1px dashed var(--cc-border);
    border-radius:18px;
    padding:14px 16px;
    background:var(--cc-bg);
    color:var(--cc-grijs);
    font-size:.92rem;
}
.cc-checklist-head__actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}
.cc-checklist-head__actions .cc-checklist-btn{
    text-decoration:none;
}
.cc-checklist-grid--edit .cc-checklist-card.is-custom-group{
    border-color:rgba(45,106,79,.18);
    box-shadow:0 16px 36px rgba(45,106,79,.08);
}
@media (max-width: 900px){
    .cc-checklist-card__head--edit{
        flex-direction:column;
    }
    .cc-checklist-card__tools{
        width:100%;
        justify-content:flex-start;
    }
}


/* ═══════════════════════════════════════════
   MIJN TRIPS – BRANDSTOFKOSTEN
═══════════════════════════════════════════ */

.cc-tijdlijn-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cc-trip-brandstof-btn {
    appearance: none;
    border: 1px solid rgba(45, 106, 79, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
    color: var(--cc-groen);
    border-radius: 999px;
    padding: 11px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cc-trip-brandstof-btn:hover,
.cc-trip-brandstof-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(45, 106, 79, 0.32);
    box-shadow: 0 14px 28px rgba(17, 24, 39, 0.09);
    outline: none;
}
.cc-trip-brandstof-btn svg {
    flex-shrink: 0;
}

.cc-trips-empty__actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
}

.cc-brandstof-rij {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
    border: 1px solid rgba(45, 106, 79, 0.14);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.045);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cc-brandstof-rij:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 106, 79, 0.24);
    box-shadow: 0 16px 32px rgba(17, 24, 39, 0.08);
}

.cc-brandstof-icoon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e4f0e8;
    color: var(--cc-groen);
    flex-shrink: 0;
    align-self: flex-start;
}

.cc-brandstof-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-brandstof-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cc-brandstof-titel {
    margin: 0;
    color: var(--cc-tekst);
    font-size: .9rem;
    font-weight: 700;
}

.cc-brandstof-bedrag {
    color: var(--cc-groen);
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
}

.cc-brandstof-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cc-brandstof-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(228, 240, 232, .7);
    color: #355647;
    border: 1px solid rgba(45, 106, 79, 0.12);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
}

.cc-brandstof-acties {
    flex-shrink: 0;
}

/* ── Menugroep-koppen in dropdown + mobiel uitschuifmenu ── */
.cc-dropdown__groep,
.cc-mob-menu__groep {
    display: block;
    font-family: var(--cc-font-body);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cc-grijs);
    padding: 9px 16px 3px;
    pointer-events: none;
}
.cc-mob-menu__groep-li {
    list-style: none;
}
.cc-mob-menu__groep {
    padding: 12px 18px 4px;
}
:root.cc-dark .cc-dropdown__groep,
:root.cc-dark .cc-mob-menu__groep { color: #7c8a82; }

.cc-brandstof-delete {
    border-color: rgba(216, 208, 196, .8) !important;
    background: #fff !important;
}
.cc-brandstof-delete:hover,
.cc-brandstof-delete:focus-visible {
    border-color: rgba(229, 62, 62, .26) !important;
    color: #b42318 !important;
}

.cc-brandstof-samenvatting,
.cc-brandstof-overall {
    margin-top: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
    border: 1px solid rgba(45, 106, 79, 0.12);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
}

.cc-brandstof-overall {
    margin-top: 28px;
}

.cc-brandstof-samenvatting__kop,
.cc-brandstof-overall__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cc-brandstof-samenvatting__kop h3,
.cc-brandstof-overall__kop h2 {
    margin: 4px 0 0;
    color: var(--cc-tekst);
    font-family: var(--cc-font-hoofd);
    font-size: 1.1rem;
}

.cc-brandstof-samenvatting__eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cc-groen);
}

.cc-brandstof-samenvatting__status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e4f0e8;
    color: var(--cc-groen);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.cc-brandstof-samenvatting__status.is-empty {
    background: #f5f1eb;
    color: var(--cc-grijs);
}

.cc-brandstof-samenvatting__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cc-brandstof-samenvatting__item {
    background: #fff;
    border: 1px solid rgba(216, 208, 196, .9);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.cc-brandstof-samenvatting__item span {
    color: var(--cc-grijs);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cc-brandstof-samenvatting__item strong {
    color: var(--cc-tekst);
    font-size: 1.12rem;
    line-height: 1.1;
}

.cc-modal-overlay {
    background: rgba(236, 232, 224, .58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cc-modal {
    box-shadow: 0 30px 80px rgba(17, 24, 39, 0.18);
}

.cc-modal__sub {
    margin: 6px 0 0;
    color: var(--cc-grijs);
    font-size: .86rem;
}

.cc-modal--brandstof {
    max-width: 620px;
}

.cc-brandstof-modal-intro {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7fbf8 0%, #f0f6f2 100%);
    border: 1px solid rgba(45, 106, 79, 0.12);
}

.cc-brandstof-modal-intro__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e4f0e8;
    color: var(--cc-groen);
    flex-shrink: 0;
}

.cc-brandstof-modal-intro strong {
    display: block;
    margin-bottom: 4px;
    color: var(--cc-tekst);
}
.cc-brandstof-modal-intro span {
    display: block;
    color: var(--cc-grijs);
    font-size: .84rem;
    line-height: 1.55;
}

.cc-brandstof-totaalvak {
    border-radius: 16px;
    background: linear-gradient(135deg, #2d6a4f 0%, #3d8663 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 20px 40px rgba(45, 106, 79, 0.18);
}

.cc-brandstof-totaalvak__label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    opacity: .78;
}

.cc-brandstof-totaalvak__waarde {
    font-size: 1.55rem;
    line-height: 1;
}

@media (max-width: 900px) {
    .cc-tijdlijn-header__actions {
        justify-content: flex-start;
    }
    .cc-brandstof-samenvatting__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .cc-tijdlijn-header__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .cc-trip-brandstof-btn,
    .cc-trip-nieuw-btn {
        width: 100%;
        justify-content: center;
    }

    .cc-brandstof-rij {
        align-items: flex-start;
    }

    .cc-brandstof-kop {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }

    .cc-brandstof-acties {
        margin-left: auto;
    }

    .cc-brandstof-modal-intro {
        padding: 12px;
    }

    .cc-brandstof-totaalvak {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ------------------------------------------------------------------
   v3.7.22 trips: 4 stat cards in one row + compact brandstof totals
   ------------------------------------------------------------------ */
.cc-tijdlijn-wrap {
    max-width: 1100px;
}

.cc-trips-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cc-brandstof-samenvatting,
.cc-brandstof-overall {
    min-height: 104px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cc-brandstof-samenvatting__kop,
.cc-brandstof-overall__kop {
    margin-bottom: 0;
    flex: 0 0 250px;
}

.cc-brandstof-samenvatting__kop h3,
.cc-brandstof-overall__kop h2 {
    margin-top: 2px;
}

.cc-brandstof-samenvatting__grid {
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.cc-brandstof-samenvatting__item {
    min-height: 74px;
    justify-content: center;
}

@media (max-width: 900px) {
    .cc-tijdlijn-wrap {
        max-width: 960px;
    }

    .cc-trips-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-brandstof-samenvatting,
    .cc-brandstof-overall {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .cc-brandstof-samenvatting__kop,
    .cc-brandstof-overall__kop {
        flex: none;
    }

    .cc-brandstof-samenvatting__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .cc-brandstof-samenvatting__grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════
   v3.7.166 mobiel: cc-cols-1 = 1 kolom, cc-cols-2/3 = 2 kolommen op telefoon
═══════════════════════════════════════ */
@media (max-width: 600px) {
    #cc-kaarten-grid.cc-cols-1,
    .cc-kaarten-grid.cc-cols-1 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    #cc-kaarten-grid.cc-cols-2,
    #cc-kaarten-grid.cc-cols-3,
    .cc-kaarten-grid.cc-cols-2,
    .cc-kaarten-grid.cc-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}


/* ═══════════════════════════════════════
   APP FOOTER
═══════════════════════════════════════ */


.cc-app-footer {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    height: var(--cc-chrome-height);
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,245,239,.98) 100%);
    border-top: 1px solid var(--cc-border);
    box-shadow: 0 -8px 22px rgba(17, 24, 39, 0.04);
}

.cc-app-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cc-app-footer__brand {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-app-footer__title {
    font-family: var(--cc-font-hoofd);
    font-size: .95rem;
    font-weight: 700;
    color: var(--cc-tekst);
    line-height: 1;
}

.cc-app-footer__subtitle {
    color: var(--cc-grijs);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.1;
}

.cc-app-footer__meta {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cc-app-footer__meta::-webkit-scrollbar {
    display: none;
}

.cc-app-footer__pill,
.cc-app-footer__button {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.cc-app-footer__pill {
    color: var(--cc-groen);
    background: rgba(82, 183, 136, 0.10);
    border: 1px solid rgba(45, 106, 79, 0.14);
}

.cc-app-footer__button {
    border: 1px solid rgba(45, 106, 79, 0.14);
    background: rgba(180, 83, 9, 0.08);
    color: var(--cc-tekst-2);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.cc-app-footer__button:hover,
.cc-app-footer__button:focus-visible {
    background: rgba(180, 83, 9, 0.14);
    border-color: rgba(180, 83, 9, 0.20);
    transform: translateY(-1px);
    outline: none;
}

.cc-release-modal[hidden] {
    display: none !important;
}

.cc-release-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.cc-release-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(4px);
}

.cc-release-modal__dialog {
    position: absolute;
    right: 24px;
    bottom: calc(var(--cc-chrome-height) + 16px);
    width: min(420px, calc(100vw - 32px));
    background: var(--cc-wit);
    border: 1px solid rgba(215, 221, 216, .95);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
    padding: 18px;
}

.cc-release-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.cc-release-modal__eyebrow {
    margin: 0 0 4px;
    color: var(--cc-grijs);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cc-release-modal__title {
    margin: 0;
    font-family: var(--cc-font-hoofd);
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--cc-tekst);
}

.cc-release-modal__close {
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; line-height: 1;
    transition: background .18s, transform .18s;
}

.cc-release-modal__close:hover,
.cc-release-modal__close:focus-visible {
    background: rgba(0,0,0,.6); transform: scale(1.08); outline: none;
}

.cc-release-modal__versions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.cc-release-modal__version {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--cc-groen-pale);
    border: 1px solid rgba(45, 106, 79, 0.14);
    color: var(--cc-groen);
    font-size: .75rem;
    font-weight: 700;
}

.cc-release-modal__list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--cc-tekst-2);
    font-size: .9rem;
}

body.cc-release-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .cc-app-footer__inner {
        padding: 0 16px;
    }

    .cc-app-footer__button {
        padding: 0 10px;
    }
}

@media (max-width: 640px) {
    .cc-app-footer__title {
        font-size: .86rem;
    }

    .cc-app-footer__subtitle {
        display: none;
    }

    .cc-app-footer__meta {
        gap: 6px;
    }

    .cc-app-footer__pill,
    .cc-app-footer__button {
        min-height: 30px;
        padding: 0 10px;
        font-size: .7rem;
    }

    .cc-release-modal__dialog {
        right: 16px;
        left: 16px;
        width: auto;
        bottom: calc(var(--cc-chrome-height) + 12px);
    }
}


/* v3.7.29 kaart: klikbare markers hersteld op homekaart; footer release-info bijgewerkt */


/* v3.7.34 popup-weer: kaartstijl teruggezet, temperatuurkleuren afgestemd op de popup */


/* ═══════════════════════════════════════
   POPUP LIGHTBOX – GECENTREERDE FOTOFOCUS
═══════════════════════════════════════ */
.cc-popup__foto-wrap--klikbaar,
.cc-popup__gallery-btn {
    cursor: zoom-in;
}

.cc-popup__foto-wrap--klikbaar::after {
    content: "Vergroot foto";
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .45);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.cc-popup__foto-wrap--klikbaar:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.cc-popup-overlay--lightbox-open {
    background: rgba(6, 10, 16, .68);
    backdrop-filter: blur(18px) saturate(.9);
}

.cc-popup-overlay--lightbox-open .cc-popup {
    filter: blur(10px) saturate(.88);
    transform: scale(.985);
    pointer-events: none;
    user-select: none;
}

.cc-popup-lightbox {
    z-index: 100001;
    padding: clamp(18px, 4vw, 36px);
    background: rgba(6, 10, 16, .42);
    backdrop-filter: blur(10px);
}

.cc-popup-lightbox__inner {
    width: min(92vw, 1120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-popup-lightbox__img {
    margin: 0 auto;
    object-fit: contain;
}

.cc-popup-lightbox__sluiten,
.cc-popup-lightbox__nav {
    box-shadow: 0 16px 40px rgba(0,0,0,.24);
}

body.cc-popup-lightbox-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .cc-popup__foto-wrap--klikbaar::after {
        right: 12px;
        bottom: 12px;
        padding: 6px 10px;
        font-size: .68rem;
        opacity: 1;
        transform: none;
    }

    .cc-popup-overlay--lightbox-open .cc-popup {
        filter: blur(7px) saturate(.9);
    }
}


/* ═══════════════════════════════════════
   v3.7.37 mobiel: darkmode subheader + 4 geschiedenis-tegels op één rij
   - secundaire mobiele header volgt nu ook dark mode
   - geschiedenis stats blijven op mobiel 4 compacte tegels naast elkaar
═══════════════════════════════════════ */
:root.cc-dark .cc-mobile-subnav {
    background: rgba(20, 20, 20, .94);
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
}
:root.cc-dark .cc-mobile-subnav__link {
    color: rgba(255,255,255,.72);
}
:root.cc-dark .cc-mobile-subnav__link:hover {
    background: rgba(255,255,255,.06);
    color: #ffffff;
}
:root.cc-dark .cc-mobile-subnav__link.actief {
    background: rgba(45,106,79,.34);
    color: #9fe1bf;
    box-shadow: inset 0 0 0 1px rgba(82,183,136,.24);
}

@media (max-width: 700px) {
    .cc-trips-stats--geschiedenis {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat {
        padding: 14px 8px;
        min-height: 92px;
        border-radius: 12px;
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat__getal {
        font-size: clamp(1.15rem, 4.9vw, 1.55rem);
        margin-bottom: 4px;
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat__label {
        font-size: .58rem;
        line-height: 1.12;
        letter-spacing: .35px;
        min-height: 2.45em;
    }
}


/* ═══════════════════════════════════════
   v3.7.38 – geschiedenis dark mode + mobiele stats compact
═══════════════════════════════════════ */
:root.cc-dark .cc-geschiedenis-jaar__panel {
    background: linear-gradient(180deg, rgba(36,36,36,.98) 0%, rgba(28,28,28,.98) 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

:root.cc-dark .cc-geschiedenis-jaar__toggle,
:root.cc-dark .cc-geschiedenis-trip__toggle {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
}

:root.cc-dark .cc-geschiedenis-jaar__toggle::before,
:root.cc-dark .cc-geschiedenis-trip__toggle::before {
    color: rgba(255,255,255,.72);
}

:root.cc-dark .cc-geschiedenis-jaar__sub,
:root.cc-dark .cc-geschiedenis-trip__sub {
    color: rgba(255,255,255,.64);
}

:root.cc-dark .cc-geschiedenis-trip {
    background: linear-gradient(180deg, rgba(37,37,37,.98) 0%, rgba(24,24,24,.98) 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 14px 28px rgba(0,0,0,.26);
}

:root.cc-dark .cc-geschiedenis-trip__route::before {
    background: linear-gradient(180deg, rgba(159,225,191,.55) 0%, rgba(159,225,191,.06) 100%);
}

:root.cc-dark .cc-geschiedenis-trip__route-dot {
    background: #171717;
}

:root.cc-dark .cc-geschiedenis-trip__badge {
    background: rgba(82,183,136,.12);
    color: #9fe1bf;
    border-color: rgba(82,183,136,.28);
}

:root.cc-dark .cc-geschiedenis-trip__badge--nieuw {
    background: rgba(245,158,11,.12);
    color: #f6c56f;
    border-color: rgba(245,158,11,.28);
}

:root.cc-dark .cc-geschiedenis-trip__meta {
    border-top-color: rgba(255,255,255,.08);
}

:root.cc-dark .cc-geschiedenis-trip__pill {
    background: rgba(255,255,255,.05);
    color: #f3efe7;
    border-color: rgba(255,255,255,.10);
}

:root.cc-dark .cc-vr-rij {
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.cc-trips-stats,
.cc-trips-stat {
    min-width: 0;
}

@media (max-width: 700px) {
    .cc-trips-stats--geschiedenis {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat {
        min-width: 0;
        padding: 12px 6px;
        min-height: 88px;
        border-radius: 10px;
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat__getal {
        font-size: clamp(1.05rem, 4.4vw, 1.45rem);
        margin-bottom: 3px;
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat__label {
        font-size: .55rem;
        line-height: 1.08;
        letter-spacing: .28px;
        min-height: 2.55em;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }
}

@media (max-width: 420px) {
    .cc-trips-stats--geschiedenis {
        gap: 5px !important;
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat {
        padding: 10px 4px;
        min-height: 82px;
        border-radius: 9px;
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat__getal {
        font-size: clamp(.98rem, 4vw, 1.2rem);
    }

    .cc-trips-stats--geschiedenis .cc-trips-stat__label {
        font-size: .5rem;
        letter-spacing: .2px;
    }
}


/* ═══════════════════════════════════════
   v3.7.39 – mobiele footer opgefrist + dark mode footer
═══════════════════════════════════════ */
.cc-app-footer {
    height: auto;
    min-height: var(--cc-chrome-height);
    margin-top: 28px;
    padding: 16px 0 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,245,240,1) 100%);
}

.cc-app-footer__inner {
    height: auto;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.cc-app-footer__brand {
    gap: 4px;
}

.cc-app-footer__title {
    font-size: 1rem;
    line-height: 1.1;
}

.cc-app-footer__subtitle {
    font-size: .68rem;
    letter-spacing: .07em;
}

.cc-app-footer__meta {
    flex: 1 1 420px;
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
}

.cc-app-footer__pill,
.cc-app-footer__button {
    min-height: 34px;
}

.cc-app-footer__button {
    padding: 0 14px;
    border-radius: 14px;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(180,83,9,.10) 0%, rgba(180,83,9,.16) 100%);
    color: var(--cc-tekst);
}

.cc-app-footer__button:hover,
.cc-app-footer__button:focus-visible {
    background: linear-gradient(180deg, rgba(180,83,9,.16) 0%, rgba(180,83,9,.22) 100%);
}

:root.cc-dark .cc-app-footer {
    background: linear-gradient(180deg, rgba(18,18,18,.98) 0%, rgba(12,12,12,1) 100%);
    border-top-color: rgba(255,255,255,.08);
    box-shadow: 0 -16px 34px rgba(0,0,0,.22);
}

:root.cc-dark .cc-app-footer__title {
    color: #f7f4ee;
}

:root.cc-dark .cc-app-footer__subtitle {
    color: rgba(255,255,255,.62);
}

:root.cc-dark .cc-app-footer__pill {
    color: #9fe1bf;
    background: rgba(82, 183, 136, 0.12);
    border-color: rgba(82, 183, 136, 0.22);
}

:root.cc-dark .cc-app-footer__button {
    color: #f3efe7;
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.09) 100%);
    border-color: rgba(255,255,255,.10);
}

:root.cc-dark .cc-app-footer__button:hover,
:root.cc-dark .cc-app-footer__button:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.13) 100%);
    border-color: rgba(255,255,255,.16);
}

:root.cc-dark .cc-release-modal__dialog {
    background: #171717;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 28px 72px rgba(0,0,0,.42);
}

:root.cc-dark .cc-release-modal__eyebrow {
    color: rgba(255,255,255,.56);
}

:root.cc-dark .cc-release-modal__title {
    color: #f7f4ee;
}

:root.cc-dark .cc-release-modal__close {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.78);
}

:root.cc-dark .cc-release-modal__close:hover,
:root.cc-dark .cc-release-modal__close:focus-visible {
    background: rgba(255,255,255,.10);
}

:root.cc-dark .cc-release-modal__version {
    background: rgba(82, 183, 136, 0.12);
    border-color: rgba(82, 183, 136, 0.20);
    color: #9fe1bf;
}

:root.cc-dark .cc-release-modal__list {
    color: rgba(255,255,255,.76);
}

@media (max-width: 640px) {
    .cc-app-footer {
        padding: 14px 0 18px;
        margin-top: 22px;
    }

    .cc-app-footer__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .cc-app-footer__brand {
        width: 100%;
    }

    .cc-app-footer__title {
        font-size: 1rem;
    }

    .cc-app-footer__subtitle {
        display: block;
        font-size: .66rem;
        line-height: 1.35;
    }

    .cc-app-footer__meta {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, max-content));
        justify-content: start;
        gap: 8px;
    }

    .cc-app-footer__pill,
    .cc-app-footer__button {
        min-height: 36px;
        font-size: .72rem;
    }

    .cc-app-footer__button {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
        padding: 0 14px;
    }
}

@media (max-width: 420px) {
    .cc-app-footer__meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .cc-app-footer__pill,
    .cc-app-footer__button {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════
   v3.7.41 – trips dark mode + slimme brandstofblokken + compacte mobiele tegels
═══════════════════════════════════════ */
:root.cc-dark .cc-tijdlijn-maand__label {
    color: rgba(255,255,255,.54);
}

:root.cc-dark .cc-trip-brandstof-btn {
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.09) 100%);
    border-color: rgba(255,255,255,.10);
    color: #9fe1bf;
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

:root.cc-dark .cc-trip-brandstof-btn:hover,
:root.cc-dark .cc-trip-brandstof-btn:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.14) 100%);
    border-color: rgba(255,255,255,.16);
    color: #c9f0da;
}

:root.cc-dark .cc-brandstof-rij {
    background: linear-gradient(180deg, rgba(34,34,34,.98) 0%, rgba(24,24,24,.98) 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

:root.cc-dark .cc-brandstof-rij:hover {
    border-color: rgba(159,225,191,.18);
    box-shadow: 0 18px 34px rgba(0,0,0,.28);
}

:root.cc-dark .cc-brandstof-icoon {
    background: rgba(82,183,136,.12);
    color: #9fe1bf;
}

:root.cc-dark .cc-brandstof-titel {
    color: #f7f4ee;
}

:root.cc-dark .cc-brandstof-bedrag {
    color: #9fe1bf;
}

:root.cc-dark .cc-brandstof-pill {
    background: rgba(255,255,255,.05);
    color: #f3efe7;
    border-color: rgba(255,255,255,.10);
}

:root.cc-dark .cc-brandstof-samenvatting,
:root.cc-dark .cc-brandstof-overall {
    background: linear-gradient(180deg, rgba(36,36,36,.98) 0%, rgba(28,28,28,.98) 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

:root.cc-dark .cc-brandstof-samenvatting__kop h3,
:root.cc-dark .cc-brandstof-overall__kop h2 {
    color: #f7f4ee;
}

:root.cc-dark .cc-brandstof-samenvatting__eyebrow {
    color: #9fe1bf;
}

:root.cc-dark .cc-brandstof-samenvatting__status {
    background: rgba(82,183,136,.12);
    border: 1px solid rgba(82,183,136,.20);
    color: #9fe1bf;
}

:root.cc-dark .cc-brandstof-samenvatting__status.is-empty {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.64);
}

:root.cc-dark .cc-brandstof-samenvatting__item {
    background: linear-gradient(180deg, rgba(23,23,23,.98) 0%, rgba(17,17,17,.98) 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

:root.cc-dark .cc-brandstof-samenvatting__item span {
    color: rgba(255,255,255,.58);
}

:root.cc-dark .cc-brandstof-samenvatting__item strong {
    color: #f3efe7;
}

@media (max-width: 700px) {
    .cc-tijdlijn-wrap .cc-trips-stats:not(.cc-trips-stats--geschiedenis) {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .cc-tijdlijn-wrap .cc-trips-stats:not(.cc-trips-stats--geschiedenis) .cc-trips-stat {
        min-width: 0;
        padding: 12px 6px;
        min-height: 88px;
        border-radius: 10px;
    }

    .cc-tijdlijn-wrap .cc-trips-stats:not(.cc-trips-stats--geschiedenis) .cc-trips-stat__getal {
        font-size: clamp(1rem, 4vw, 1.35rem);
        margin-bottom: 4px;
    }

    .cc-tijdlijn-wrap .cc-trips-stats:not(.cc-trips-stats--geschiedenis) .cc-trips-stat__label {
        font-size: .52rem;
        line-height: 1.12;
        letter-spacing: .24px;
        min-height: 2.45em;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }

    .cc-brandstof-samenvatting,
    .cc-brandstof-overall {
        min-height: 0;
        padding: 14px 12px;
        gap: 12px;
        flex-direction: column;
        align-items: stretch;
        border-radius: 16px;
    }

    .cc-brandstof-samenvatting__kop,
    .cc-brandstof-overall__kop {
        flex: none;
        gap: 10px;
    }

    .cc-brandstof-samenvatting__kop h3,
    .cc-brandstof-overall__kop h2 {
        font-size: 1rem;
    }

    .cc-brandstof-samenvatting__grid {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .cc-brandstof-samenvatting__item {
        min-height: 82px;
        padding: 10px 6px;
        border-radius: 10px;
        gap: 5px;
        justify-content: center;
    }

    .cc-brandstof-samenvatting__item span {
        font-size: .54rem;
        line-height: 1.08;
        letter-spacing: .03em;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }

    .cc-brandstof-samenvatting__item strong {
        font-size: .98rem;
        line-height: 1.05;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 420px) {
    .cc-tijdlijn-wrap .cc-trips-stats:not(.cc-trips-stats--geschiedenis) {
        gap: 5px !important;
    }

    .cc-tijdlijn-wrap .cc-trips-stats:not(.cc-trips-stats--geschiedenis) .cc-trips-stat {
        padding: 10px 4px;
        min-height: 82px;
        border-radius: 9px;
    }

    .cc-tijdlijn-wrap .cc-trips-stats:not(.cc-trips-stats--geschiedenis) .cc-trips-stat__getal {
        font-size: clamp(.94rem, 3.8vw, 1.16rem);
    }

    .cc-tijdlijn-wrap .cc-trips-stats:not(.cc-trips-stats--geschiedenis) .cc-trips-stat__label {
        font-size: .48rem;
        letter-spacing: .18px;
    }

    .cc-brandstof-samenvatting__grid {
        gap: 5px !important;
    }

    .cc-brandstof-samenvatting__item {
        min-height: 78px;
        padding: 9px 5px;
        border-radius: 9px;
    }

    .cc-brandstof-samenvatting__item span {
        font-size: .5rem;
    }

    .cc-brandstof-samenvatting__item strong {
        font-size: .88rem;
    }
}


/* ═══════════════════════════════════════
   v3.7.42 – mobiele stats volledig binnen scherm
   - Geschiedenis: 4 jaartiles passen volledig binnen viewport
   - Home: 4 hoofdtellers naast elkaar op mobiel
═══════════════════════════════════════ */
@media (max-width: 700px) {
    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: hidden;
    }

    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis .cc-trips-stat {
        min-width: 0;
        max-width: 100%;
        padding: 12px 6px;
        min-height: 88px;
        border-radius: 12px;
    }

    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis .cc-trips-stat__getal {
        font-size: clamp(1rem, 4.2vw, 1.32rem);
        margin-bottom: 4px;
    }

    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis .cc-trips-stat__label {
        font-size: .52rem;
        line-height: 1.12;
        letter-spacing: .18px;
        min-height: 2.5em;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }

    .cc-stats-rij {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 0 16px 20px;
        overflow: hidden;
    }

    .cc-stat-card {
        min-width: 0;
        max-width: 100%;
        min-height: 92px;
        padding: 12px 6px;
        border-radius: 12px;
        gap: 6px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .cc-stat-card__icon {
        width: 28px;
        height: 28px;
        font-size: .9rem;
        border-radius: 9px;
    }

    .cc-stat-card__info {
        min-width: 0;
        width: 100%;
        text-align: center;
    }

    .cc-stat-card__getal {
        font-size: clamp(1rem, 4.2vw, 1.3rem);
        margin-bottom: 4px;
    }

    .cc-stat-card__label {
        font-size: .62rem;
        line-height: 1.2;
        letter-spacing: .2px;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis {
        gap: 5px !important;
    }

    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis .cc-trips-stat {
        padding: 10px 4px;
        min-height: 82px;
        border-radius: 10px;
    }

    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis .cc-trips-stat__getal {
        font-size: clamp(.94rem, 3.8vw, 1.14rem);
    }

    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis .cc-trips-stat__label,
    .cc-stat-card__label {
        font-size: .47rem;
        letter-spacing: .14px;
    }

    .cc-stats-rij {
        gap: 6px;
    }

    .cc-stat-card {
        min-height: 84px;
        padding: 10px 4px;
        border-radius: 10px;
    }

    .cc-stat-card__icon {
        width: 24px;
        height: 24px;
        font-size: .82rem;
        border-radius: 8px;
    }

    .cc-stat-card__getal {
        font-size: clamp(.92rem, 3.8vw, 1.12rem);
    }
}

/* ═══════════════════════════════════════
   v3.7.44 – geschiedenis mobiel: open panelen binnen scherm
═══════════════════════════════════════ */
@media (max-width: 700px) {
    .cc-tijdlijn-wrap {
        max-width: 100%;
        overflow-x: clip;
    }

    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis,
    .cc-tijdlijn-wrap .cc-geschiedenis-jaar,
    .cc-tijdlijn-wrap .cc-geschiedenis-jaar__panel {
        width: 100%;
        max-width: calc(100vw - 32px);
        min-width: 0;
    }

    .cc-tijdlijn-wrap .cc-geschiedenis-jaar__summary,
    .cc-tijdlijn-wrap .cc-geschiedenis-jaar__summary-main,
    .cc-tijdlijn-wrap .cc-geschiedenis-jaar__labels,
    .cc-tijdlijn-wrap .cc-geschiedenis-trips,
    .cc-tijdlijn-wrap .cc-geschiedenis-trip,
    .cc-tijdlijn-wrap .cc-geschiedenis-trip__summary,
    .cc-tijdlijn-wrap .cc-geschiedenis-trip__content,
    .cc-tijdlijn-wrap .cc-geschiedenis-trip__body,
    .cc-tijdlijn-wrap .cc-tijdlijn-lijst--geschiedenis-trip,
    .cc-tijdlijn-wrap .cc-vr-rij,
    .cc-tijdlijn-wrap .cc-vr-info {
        min-width: 0;
        max-width: 100%;
    }

    .cc-tijdlijn-wrap .cc-geschiedenis-jaar__summary-main,
    .cc-tijdlijn-wrap .cc-geschiedenis-jaar__labels {
        flex: 1 1 auto;
    }

    .cc-tijdlijn-wrap .cc-geschiedenis-jaar__sub,
    .cc-tijdlijn-wrap .cc-geschiedenis-trip__sub,
    .cc-tijdlijn-wrap .cc-vr-locatie,
    .cc-tijdlijn-wrap .cc-vr-datum {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .cc-tijdlijn-wrap .cc-vr-locatie {
        flex-wrap: wrap;
        min-width: 0;
    }

    .cc-tijdlijn-wrap .cc-vr-rij {
        gap: 12px;
        padding: 12px 14px;
        overflow: hidden;
    }

    .cc-tijdlijn-wrap .cc-vr-acties {
        align-self: flex-start;
    }
}

@media (max-width: 420px) {
    .cc-tijdlijn-wrap .cc-trips-stats--geschiedenis,
    .cc-tijdlijn-wrap .cc-geschiedenis-jaar,
    .cc-tijdlijn-wrap .cc-geschiedenis-jaar__panel {
        max-width: calc(100vw - 28px);
    }

    .cc-tijdlijn-wrap .cc-vr-rij {
        gap: 10px;
        padding: 12px;
    }
}


/* ------------------------------------------------------------------
   v3.7.44 mobiele brandstof-modal compacter + dark mode intro fix
   ------------------------------------------------------------------ */
.cc-modal--brandstof {
    max-width: 600px;
}

.cc-modal--brandstof .cc-modal__header {
    padding: 18px 22px 14px;
}

.cc-modal--brandstof .cc-modal__titel {
    font-size: 1.18rem;
    line-height: 1.15;
}

.cc-modal--brandstof .cc-modal__sub {
    font-size: .82rem;
    line-height: 1.45;
}

.cc-modal--brandstof .cc-modal__sluiten {
    align-self: flex-start;
}

.cc-modal--brandstof .cc-modal__body {
    padding: 16px 22px 20px;
    gap: 12px;
}

.cc-modal--brandstof .cc-modal__acties {
    margin-top: 2px;
}

.cc-modal--brandstof .cc-form-rij-2 {
    gap: 12px;
}

.cc-modal--brandstof .cc-label {
    font-size: .78rem;
    margin-bottom: 6px;
}

.cc-modal--brandstof .cc-input {
    min-height: 46px;
    padding: 10px 12px;
    font-size: .94rem;
}

.cc-modal--brandstof .cc-brandstof-modal-intro {
    gap: 12px;
    padding: 12px 13px;
    border-radius: 14px;
}

.cc-modal--brandstof .cc-brandstof-modal-intro__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.cc-modal--brandstof .cc-brandstof-modal-intro strong {
    font-size: .94rem;
    line-height: 1.3;
}

.cc-modal--brandstof .cc-brandstof-modal-intro span {
    font-size: .8rem;
    line-height: 1.45;
}

.cc-modal--brandstof .cc-brandstof-totaalvak {
    padding: 14px 16px;
    border-radius: 14px;
}

.cc-modal--brandstof .cc-brandstof-totaalvak__label {
    font-size: .76rem;
}

.cc-modal--brandstof .cc-brandstof-totaalvak__waarde {
    font-size: 1.4rem;
}

@media (max-width: 600px) {
    .cc-modal-overlay {
        align-items: flex-start;
        padding: 10px;
    }

    .cc-modal--brandstof {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 18px;
    }

    .cc-modal--brandstof .cc-modal__header {
        padding: 16px 16px 12px;
        gap: 12px;
    }

    .cc-modal--brandstof .cc-modal__body {
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px 16px;
        gap: 10px;
    }

    .cc-modal--brandstof .cc-form-rij-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .cc-modal--brandstof .cc-modal__acties {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .cc-modal--brandstof .cc-submit,
    .cc-modal--brandstof .cc-btn-annuleren {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        margin-top: 0;
        padding: 10px 14px;
    }

    .cc-modal--brandstof .cc-brandstof-modal-intro {
        padding: 11px 12px;
        gap: 10px;
    }

    .cc-modal--brandstof .cc-brandstof-totaalvak {
        padding: 13px 14px;
    }

    .cc-modal--brandstof .cc-brandstof-totaalvak__waarde {
        font-size: 1.28rem;
    }
}

@media (max-width: 380px) {
    .cc-modal--brandstof .cc-modal__header {
        padding: 14px 14px 12px;
    }

    .cc-modal--brandstof .cc-modal__body {
        padding: 12px 14px 14px;
    }

    .cc-modal--brandstof .cc-form-rij-2 {
        gap: 8px;
    }

    .cc-modal--brandstof .cc-input {
        min-height: 44px;
        padding: 9px 10px;
        font-size: .9rem;
    }
}

/* Dark mode – brandstof popup introkaart */
:root.cc-dark .cc-modal-overlay {
    background: rgba(8, 10, 14, .74);
}

:root.cc-dark .cc-modal--brandstof {
    background: #1f1f1f;
    box-shadow: 0 30px 80px rgba(0,0,0,.42);
}

:root.cc-dark .cc-modal--brandstof .cc-modal__header {
    border-bottom-color: rgba(255,255,255,.08);
}

:root.cc-dark .cc-brandstof-modal-intro {
    background: linear-gradient(180deg, rgba(22, 40, 31, .98) 0%, rgba(27, 48, 38, .98) 100%);
    border-color: rgba(104, 197, 141, .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

:root.cc-dark .cc-brandstof-modal-intro__icon {
    background: rgba(58, 138, 99, .18);
    color: #7fd2a8;
}

:root.cc-dark .cc-brandstof-modal-intro strong {
    color: #f3efe7;
}

:root.cc-dark .cc-brandstof-modal-intro span {
    color: #cfc8bc;
}

:root.cc-dark .cc-modal--brandstof .cc-btn-annuleren {
    background: #262626;
    border-color: rgba(255,255,255,.08);
    color: #d8d2c8;
}

:root.cc-dark .cc-modal--brandstof .cc-btn-annuleren:hover {
    background: #2d2d2d;
}

/* ═══════════════════════════════════════
   PROFIEL PAGINA (Mijn Compas)
═══════════════════════════════════════ */
.cc-profiel-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 56px;
    box-sizing: border-box;
}
.cc-profiel-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cc-profiel-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--cc-groen);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cc-profiel-header__info { flex: 1; min-width: 0; }
.cc-profiel-naam { margin: 0 0 2px; font-size: 1.2rem; font-weight: 700; color: var(--cc-tekst); }
.cc-profiel-email { margin: 0 0 2px; font-size: .875rem; color: var(--cc-tekst-2); }
.cc-profiel-lid   { margin: 0; font-size: .8rem; color: var(--cc-grijs); }
.cc-profiel-header__acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cc-btn-secondary {
    padding: 8px 16px; border-radius: 10px; font-size: .85rem; font-weight: 600;
    border: 1.5px solid var(--cc-border); color: var(--cc-tekst); text-decoration: none;
    background: var(--cc-bg); transition: background .15s;
}
.cc-btn-secondary:hover { background: var(--cc-bg-2); }
.cc-btn-uitloggen {
    padding: 8px 16px; border-radius: 10px; font-size: .85rem; font-weight: 600;
    border: 1.5px solid #fee2e2; color: #b42318; text-decoration: none;
    background: #fff5f5; transition: background .15s;
}
.cc-btn-uitloggen:hover { background: #fee2e2; }

/* Snelle stats balk */
.cc-profiel-snelstats {
    display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.cc-profiel-snelstat {
    flex: 1; min-width: 90px;
    background: var(--cc-wit); border: 1px solid var(--cc-border);
    border-radius: 16px; padding: 16px 18px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cc-profiel-snelstat__getal {
    font-family: var(--cc-font-hoofd, serif);
    font-size: 1.8rem; font-weight: 700;
    color: var(--cc-groen); line-height: 1;
}
.cc-profiel-snelstat__label {
    font-size: .7rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cc-grijs); margin-top: 5px; font-weight: 600;
}

/* Tabs */
.cc-profiel-tabs {
    display: flex; gap: 6px; margin-bottom: 24px;
    background: var(--cc-bg, #f5f3ee);
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), inset 0 1px 2px rgba(0,0,0,.04);
    flex-wrap: wrap;
}
.cc-profiel-tab {
    padding: 9px 18px;
    background: none; border: none;
    font-size: .88rem; font-weight: 600;
    color: var(--cc-tekst-2, #4b5563);
    cursor: pointer; border-radius: 8px;
    transition: color .15s, background .15s, box-shadow .15s;
    white-space: nowrap;
}
.cc-profiel-tab:hover {
    color: var(--cc-tekst);
    background: rgba(255,255,255,.7);
}
.cc-profiel-tab.actief {
    background: #fff;
    color: var(--cc-groen);
    box-shadow: 0 1px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(45,106,79,.15);
}

/* Tab panels — alle 4 even breed, 100% van de cc-profiel-wrap (1100px) */
.cc-profiel-tabpanel {
    padding: 4px 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.cc-profiel-tabpanel.cc-verborgen { display: none; }

/* Zorg dat directe inhoud van tabs ook volledige breedte pakt */
.cc-profiel-tabpanel > *:not(script):not(style) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Statistieken-grid in profieltab: zelfde 2-kolom layout als partners */
#cc-tab-stats .cc-statistieken-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    width: 100% !important;
}
@media (max-width: 700px) {
    #cc-tab-stats .cc-statistieken-grid { grid-template-columns: 1fr; }
}

/* Referral en Punten tab inhoud uitstrekken */
#cc-tab-referral > *,
#cc-tab-punten > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* cc-ref-widget en ccbp panels mogen geen smallere max-width houden */
#cc-tab-referral .cc-ref-widget,
#cc-tab-punten .ccbp-saldo-kaart,
#cc-tab-punten .ccbp-uitleg,
#cc-tab-punten .ccbp-log,
#cc-tab-punten .ccbp-mail-prefs {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Dark mode */
:root.cc-dark .cc-profiel-header,
:root.cc-dark .cc-profiel-snelstat {
    background: var(--cc-card, #1e2633);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-profiel-tabs {
    background: var(--cc-card, #1e2633);
    border-color: var(--cc-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.2), inset 0 1px 2px rgba(0,0,0,.1);
}
:root.cc-dark .cc-profiel-tab { color: #9ca3af; }
:root.cc-dark .cc-profiel-tab:hover { color: var(--cc-tekst); background: rgba(255,255,255,.06); }
:root.cc-dark .cc-profiel-tab.actief { background: #2a3748; color: var(--cc-groen-licht, #52b788); box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 1px rgba(82,183,136,.2); }
:root.cc-dark .cc-btn-secondary { background: #1e2633; border-color: var(--cc-border); color: var(--cc-tekst); }
:root.cc-dark .cc-btn-uitloggen { background: #2d1515; border-color: #5a1e1e; color: #f87171; }

@media (max-width: 600px) {
    .cc-profiel-header { flex-direction: column; align-items: flex-start; }
    .cc-profiel-snelstat__getal { font-size: 1.5rem; }
    .cc-profiel-tab { padding: 8px 14px; font-size: .82rem; }
}

/* ═══════════════════════════════════════
   AUTOSAVE TOAST
═══════════════════════════════════════ */
#cc-autosave-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.16);
    background: #1a1a1a;
    color: #fff;
}
#cc-autosave-toast.cc-autosave-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#cc-autosave-toast.cc-autosave-toast--saved {
    background: #2d6a4f;
    color: #fff;
}
#cc-autosave-toast.cc-autosave-toast--error {
    background: #be123c;
    color: #fff;
}
#cc-autosave-toast.cc-autosave-toast--saving {
    background: #1a1a1a;
    color: #fff;
}
.cc-autosave-toast__spin {
    width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: cc-spin .65s linear infinite;
    flex-shrink: 0;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Zorg dat toast boven mobiele subnav uitkomt */
@media (max-width: 700px) {
    #cc-autosave-toast {
        bottom: calc(var(--cc-mobile-subnav-height, 62px) + 16px);
        font-size: .8rem;
        padding: 9px 18px;
    }
}
:root.cc-dark #cc-autosave-toast.cc-autosave-toast--saving {
    background: #2a2a2a;
}

/* ═══════════════════════════════════════
   GROEP TOGGLE (bewerken-modus)
═══════════════════════════════════════ */
.cc-checklist-groep-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    border: 1.5px solid var(--cc-groen);
    background: var(--cc-groen);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
    white-space: nowrap;
}
.cc-checklist-groep-toggle:hover {
    background: #1f4f3a;
    border-color: #1f4f3a;
}
.cc-checklist-groep-toggle.is-off {
    background: transparent;
    border-color: var(--cc-border);
    color: var(--cc-grijs);
}
.cc-checklist-groep-toggle.is-off:hover {
    border-color: var(--cc-groen);
    color: var(--cc-groen);
}

/* Toggle track + thumb */
.cc-groep-toggle__track {
    width: 28px;
    height: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
    position: relative;
    flex-shrink: 0;
    transition: background .18s;
}
.cc-checklist-groep-toggle.is-off .cc-groep-toggle__track {
    background: var(--cc-bg-2, #eeeae3);
}
.cc-groep-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cc-checklist-groep-toggle:not(.is-off) .cc-groep-toggle__thumb {
    transform: translateX(12px);
}

/* Kaart inklapanimatie */
.cc-checklist-card .cc-checklist-items,
.cc-checklist-card .cc-checklist-add {
    transition: max-height .3s ease, opacity .25s ease, margin .25s ease;
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
}
.cc-checklist-card.is-group-off .cc-checklist-items,
.cc-checklist-card.is-group-off .cc-checklist-add {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.cc-checklist-card.is-group-off {
    opacity: .7;
}

/* Dark mode */
:root.cc-dark .cc-checklist-groep-toggle.is-off {
    border-color: var(--cc-border);
    color: var(--cc-grijs);
}
:root.cc-dark .cc-checklist-groep-toggle.is-off .cc-groep-toggle__track {
    background: #2a2a2a;
}

/* ── Upgrade knop in dropdown ── */
.cc-dropdown__item--upgrade {
    color: #92400e !important;
    background: #fffde0;
    font-weight: 700;
}
.cc-dropdown__item--upgrade .cc-dropdown__icon { color: inherit; }
.cc-dropdown__item--upgrade:hover { background: #fef3c7 !important; }
:root.cc-dark .cc-dropdown__item--upgrade { background: #2a2010; color: #fcd34d !important; }
:root.cc-dark .cc-dropdown__item--upgrade:hover { background: #33280a !important; }

/* ═══════════════════════════════════════
   FAQ PAGINA
═══════════════════════════════════════ */
.cc-faq-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 20px 56px;
}
.cc-faq-header {
    text-align: center;
    padding: 48px 24px 36px;
}
.cc-faq-titel {
    font-family: var(--cc-font-hoofd, serif);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--cc-tekst);
    margin: 0 0 10px;
    line-height: 1.15;
}
.cc-faq-sub {
    font-size: 1rem;
    color: var(--cc-tekst-2);
    margin: 0;
}
.cc-faq-sectie {
    margin-bottom: 36px;
}
.cc-faq-sectie__titel {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cc-groen);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cc-groen-pale, #e8f5ee);
}
.cc-faq-lijst {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cc-faq-item {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .18s;
}
.cc-faq-item[open] {
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.cc-faq-item__vraag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--cc-tekst);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.cc-faq-item__vraag::-webkit-details-marker { display: none; }
.cc-faq-item__vraag:hover { background: var(--cc-bg, #f7f5f0); }
.cc-faq-item__chevron {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--cc-bg, #f7f5f0);
    flex-shrink: 0;
    position: relative;
    transition: background .18s, transform .25s;
}
.cc-faq-item__chevron::before,
.cc-faq-item__chevron::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 1.5px;
    background: var(--cc-tekst-2);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.cc-faq-item__chevron::after {
    transform: translate(-1px, -50%) rotate(-45deg);
}
.cc-faq-item[open] .cc-faq-item__chevron {
    background: var(--cc-groen-pale, #e8f5ee);
    transform: rotate(180deg);
}
.cc-faq-item[open] .cc-faq-item__chevron::before,
.cc-faq-item[open] .cc-faq-item__chevron::after {
    background: var(--cc-groen);
}
.cc-faq-item__antwoord {
    padding: 0 20px 18px;
    border-top: 1px solid var(--cc-border);
}
.cc-faq-item__antwoord p {
    margin: 14px 0 0;
    font-size: .9rem;
    color: var(--cc-tekst-2);
    line-height: 1.7;
}
.cc-faq-footer {
    margin-top: 40px;
    text-align: center;
}

/* ── Footer nav FAQ-link ── */
.cc-app-footer__nav {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cc-app-footer__nav-link {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cc-groen, #2d6a4f);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--cc-groen-pale, #e8f5ee);
    background: var(--cc-groen-pale, #e8f5ee);
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.cc-app-footer__nav-link:hover {
    background: #d1ead9;
    border-color: #b8dcc4;
}

/* Dark mode */
:root.cc-dark .cc-faq-item {
    background: var(--cc-card, #1e2633);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-faq-item__vraag:hover { background: rgba(255,255,255,.04); }
:root.cc-dark .cc-app-footer__nav-link {
    background: #1a2d22;
    border-color: #2d4f39;
    color: var(--cc-groen-licht, #52b788);
}

@media (max-width: 600px) {
    .cc-faq-item__vraag { padding: 14px 16px; font-size: .88rem; }
    .cc-faq-item__antwoord { padding: 0 16px 14px; }
    .cc-app-footer__inner { flex-wrap: wrap; gap: 12px; }
}

/* ═══════════════════════════════════════════════════
   REFERRAL WIDGET (profielpagina)
═══════════════════════════════════════════════════ */

.cc-ref-banner {
    background: #d1fae5; color: #065f46;
    padding: 14px 20px; font-size: .92rem; font-weight: 600;
    text-align: center; border-bottom: 1px solid #6ee7b7;
}
.cc-ref-banner--verlopen { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.cc-ref-widget {
    background: var(--cc-wit, #fff);
    border: 1px solid var(--cc-border, #e5e1d8);
    border-radius: 20px; padding: 24px;
    margin: 16px 0;
}
.cc-ref-widget__header {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px;
}
.cc-ref-widget__icoon { font-size: 2rem; flex-shrink: 0; margin-top: 2px; }
.cc-ref-widget__header strong { font-size: 1rem; display: block; margin-bottom: 4px; }
.cc-ref-widget__header p { font-size: .85rem; color: var(--cc-tekst-2, #6b7280); margin: 0; line-height: 1.5; }

.cc-ref-link-wrap { display: flex; gap: 8px; margin-bottom: 12px; }
.cc-ref-link-input {
    flex: 1; min-width: 0;
    background: var(--cc-bg, #f7f5f0);
    border: 1px solid var(--cc-border, #e5e1d8);
    border-radius: 10px; padding: 10px 12px;
    font-size: .82rem; color: var(--cc-tekst-2);
    font-family: monospace;
}
.cc-ref-kopieer-btn {
    background: #2d6a4f; color: #fff;
    border: none; border-radius: 10px;
    padding: 10px 16px; font-size: .85rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: background .15s;
}
.cc-ref-kopieer-btn:hover { background: #245c43; }

.cc-ref-acties { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.cc-ref-wa-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #25d366; color: #fff !important;
    text-decoration: none; padding: 9px 16px;
    border-radius: 10px; font-size: .85rem; font-weight: 700;
    transition: background .15s;
}
.cc-ref-wa-btn:hover { background: #1da851; }

.cc-ref-stats {
    display: flex; gap: 16px;
    background: var(--cc-bg, #f7f5f0);
    border-radius: 12px; padding: 14px 16px;
    margin-top: 4px;
}
.cc-ref-stat { flex: 1; text-align: center; }
.cc-ref-stat__getal { display: block; font-size: 1.6rem; font-weight: 800; color: #2d6a4f; }
.cc-ref-stat__label { font-size: .75rem; color: var(--cc-tekst-2); line-height: 1.3; }

/* dark mode */
:root.cc-dark .cc-ref-widget { background: var(--cc-card); }
:root.cc-dark .cc-ref-link-input { background: var(--cc-bg); color: var(--cc-tekst-2); }
:root.cc-dark .cc-ref-stats { background: var(--cc-bg); }

/* ── Referral uitleg blok op landingspagina ── */
.cc-land-referral-uitleg {
    padding: 40px 28px;
    background: #f0fdf4;
    border-top: 1px solid #bbf7d0;
    border-bottom: 1px solid #bbf7d0;
}
.cc-land-ref-banner {
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 18px;
    background: #fff; border: 1.5px solid #86efac;
    border-radius: 18px; padding: 20px 24px;
    box-shadow: 0 4px 16px rgba(34,197,94,.1);
}
.cc-land-ref-banner__icoon { font-size: 2.2rem; flex-shrink: 0; }
.cc-land-ref-banner strong { display: block; font-size: .95rem; color: #065f46; margin-bottom: 4px; }
.cc-land-ref-banner p { margin: 0; font-size: .85rem; color: #4b7a60; line-height: 1.5; }
@media (max-width: 500px) {
    .cc-land-ref-banner { flex-direction: column; text-align: center; }
}


/* ═══════════════════════════════════════════════════
   LANDINGSPAGINA v2.1 — warm, persoonlijk, met foto
═══════════════════════════════════════════════════ */

:root {
    --land-groen-diep:  #1c3a28;
    --land-groen-mid:   #2d5a3d;
    --land-amber:       #d97c3a;
    --land-crème:       #f5f0e6;
    --land-crème-donk:  #ede6d8;
    --land-tekst:       #1a1a12;
    --land-tekst-2:     #5a5245;
    --land-serif:       'Lora', Georgia, serif;
    --land-sans:        'DM Sans', system-ui, sans-serif;
}

.cc-land-body {
    margin: 0;
    font-family: var(--land-sans);
    background: var(--land-crème);
    color: var(--land-tekst);
    -webkit-font-smoothing: antialiased;
}

/* Referral welkom */
.cc-land-ref-welkom {
    background: #fff8e8; border-bottom: 1px solid #e8c87a;
    padding: 11px 24px; text-align: center;
    font-size: .88rem; color: #7a5200;
}

/* ── Header ── */
.cc-land-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 36px;
    background: rgba(245,240,230,.95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.cc-land-logo {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--land-serif); font-size: 1.1rem; font-weight: 600;
    color: var(--land-groen-diep); text-decoration: none;
}
.cc-land-nav { display: flex; align-items: center; gap: 8px; }
.cc-land-nav__link {
    font-size: .85rem; color: var(--land-tekst-2);
    text-decoration: none; padding: 7px 12px; border-radius: 8px;
    transition: background .15s;
}
.cc-land-nav__link:hover { background: var(--land-crème-donk); }
.cc-land-nav__cta {
    font-size: .85rem; font-weight: 500;
    background: var(--land-groen-diep); color: #fff !important;
    text-decoration: none; padding: 9px 18px; border-radius: 10px;
    transition: background .15s;
}
.cc-land-nav__cta:hover { background: var(--land-groen-mid); }

/* Taalwisselaar */
.cc-land-taalswitch {
    display: flex; gap: 2px; align-items: center;
    background: var(--land-crème-donk); border-radius: 8px;
    padding: 3px;
}
.cc-land-taalswitch__btn {
    font-size: .95rem; line-height: 1;
    padding: 4px 6px; border-radius: 6px;
    text-decoration: none; opacity: .5;
    transition: opacity .15s, background .15s;
}
.cc-land-taalswitch__btn:hover { opacity: .85; }
.cc-land-taalswitch__btn.actief {
    opacity: 1; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ── Hero met foto ── */
.cc-land-hero {
    position: relative;
    min-height: 88vh;
    display: flex; flex-direction: column;
    background: linear-gradient(160deg, #d4e6d8 0%, #e8e0d0 60%, #f0ece2 100%);
    overflow: hidden;
}
.cc-land-hero--foto {
    background-image: var(--land-hero-foto);
    background-size: cover;
    background-position: center 30%;
}
.cc-land-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        100deg,
        rgba(15,30,18,.72) 0%,
        rgba(15,30,18,.45) 50%,
        rgba(15,30,18,.15) 100%
    );
}
/* Zonder foto: licht overlay zodat tekst altijd leesbaar is */
.cc-land-hero:not(.cc-land-hero--foto) .cc-land-hero__overlay {
    background: linear-gradient(
        160deg,
        rgba(200,230,210,.6) 0%,
        rgba(230,220,200,.3) 100%
    );
}

.cc-land-hero__inner {
    position: relative; z-index: 1;
    flex: 1; display: flex; align-items: center;
    max-width: 1100px; width: 100%; margin: 0 auto;
    padding: 100px 36px 72px;
}
.cc-land-hero__content { max-width: 600px; }

/* Animaties */
.cc-land-regel,
.cc-land-hero__sub,
.cc-land-hero__acties,
.cc-land-teller {
    opacity: 0; transform: translateY(16px);
    animation: cc-land-opkomen .65s ease forwards;
}
@keyframes cc-land-opkomen {
    to { opacity: 1; transform: translateY(0); }
}

.cc-land-hero__titel {
    font-family: var(--land-serif);
    font-size: clamp(2.8rem, 6vw, 4.4rem);
    font-weight: 700; line-height: 1.1;
    /* Altijd wit — leesbaar op foto én op licht achtergrond */
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
    margin: 0 0 24px;
    display: flex; flex-direction: column;
}
/* Zonder foto: donkere tekst */
.cc-land-hero:not(.cc-land-hero--foto) .cc-land-hero__titel {
    color: var(--land-groen-diep);
    text-shadow: none;
}
.cc-land-regel { display: block; }
.cc-land-regel:last-child { color: var(--land-amber); font-style: italic; }
.cc-land-hero:not(.cc-land-hero--foto) .cc-land-regel:last-child {
    color: var(--land-amber);
}

.cc-land-hero__sub {
    font-size: 1.05rem; line-height: 1.7;
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 6px rgba(0,0,0,.25);
    margin: 0 0 36px; max-width: 500px;
}
.cc-land-hero:not(.cc-land-hero--foto) .cc-land-hero__sub {
    color: var(--land-tekst-2); text-shadow: none;
}

.cc-land-hero__acties {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-bottom: 24px;
}

.cc-land-btn-primair {
    display: inline-flex; align-items: center;
    font-family: var(--land-sans); font-weight: 500; font-size: .95rem;
    background: var(--land-amber); color: #fff !important;
    text-decoration: none; padding: 13px 28px; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(217,124,58,.4);
    transition: background .15s, transform .12s;
}
.cc-land-btn-primair:hover { background: #c46e30; transform: translateY(-1px); }
.cc-land-btn-primair--groot { font-size: 1.05rem; padding: 15px 34px; }

.cc-land-btn-tekst {
    font-size: .88rem; color: rgba(255,255,255,.85);
    text-decoration: underline; text-underline-offset: 3px;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.cc-land-hero:not(.cc-land-hero--foto) .cc-land-btn-tekst {
    color: var(--land-tekst-2); text-shadow: none;
}

.cc-land-teller {
    font-size: .82rem; color: rgba(255,255,255,.7); margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.cc-land-hero:not(.cc-land-hero--foto) .cc-land-teller {
    color: var(--land-tekst-2); text-shadow: none;
}
.cc-land-teller strong { color: #fff; }
.cc-land-hero:not(.cc-land-hero--foto) .cc-land-teller strong {
    color: var(--land-groen-mid);
}

/* Golf */
.cc-land-hero__wave { position: relative; z-index: 1; margin-top: auto; }
.cc-land-hero__wave svg { display: block; width: 100%; height: 72px; }

/* ── Gedeeld ── */
.cc-land-inner { max-width: 1000px; margin: 0 auto; padding: 0 36px; }

/* ── Drie redenen ── */
.cc-land-redenen { background: var(--land-crème); padding: 80px 0 72px; }
.cc-land-sectie-titel {
    font-family: var(--land-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600;
    color: var(--land-groen-diep); text-align: center; margin: 0 0 52px;
}
.cc-land-redenen__grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.cc-land-reden {
    background: #fff; border-radius: 20px; padding: 32px 28px;
    border: 1px solid var(--land-crème-donk);
    transition: transform .2s, box-shadow .2s;
}
.cc-land-reden:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(28,58,40,.08); }
.cc-land-reden--accent {
    background: #fff;
    border: 2px solid var(--land-amber);
}
.cc-land-reden--accent .cc-land-reden__icoon { filter: none; }
.cc-land-reden--accent h3 { color: var(--land-groen-diep); }
.cc-land-reden--accent p  { color: var(--land-tekst-2); }
.cc-land-reden__icoon { font-size: 2rem; margin-bottom: 16px; }
.cc-land-reden h3 {
    font-family: var(--land-serif); font-size: 1.1rem; font-weight: 600;
    color: var(--land-groen-diep); margin: 0 0 10px;
}
.cc-land-reden p { font-size: .88rem; color: var(--land-tekst-2); line-height: 1.68; margin: 0; }

/* ── Samen ── */
.cc-land-samen {
    background: #f0ebe0; padding: 48px 0;
    border-top: 1px solid var(--land-crème-donk);
    border-bottom: 1px solid var(--land-crème-donk);
    text-align: center;
}
.cc-land-samen__inner { max-width: 640px; }
.cc-land-samen__tekst {
    font-family: var(--land-serif); font-size: 1.15rem; font-style: italic;
    color: var(--land-groen-mid); line-height: 1.65; margin: 0;
}

/* ── CTA ── */
/* ── SEO inhoud blok ── */
.cc-land-seo-blok {
    background: #f5f0e6;
    padding: 72px 0;
}
.cc-land-seo-blok__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
.cc-land-seo-blok__item h2 {
    font-family: var(--land-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1c3a28;
    margin: 0 0 12px;
}
.cc-land-seo-blok__item p {
    font-size: .88rem;
    color: #5a6b60;
    line-height: 1.75;
    margin: 0;
}

.cc-land-cta {
    background: linear-gradient(160deg, #1c3a28, #2d5a3d);
    padding: 88px 0; text-align: center;
}
.cc-land-cta__inner { max-width: 560px; }
.cc-land-cta h2 {
    font-family: var(--land-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700;
    color: #fff; margin: 0 0 14px;
}
.cc-land-cta p { font-size: .9rem; color: #a8c8b4; margin: 0 0 36px; line-height: 1.6; }

/* ── Footer ── */
.cc-land-footer {
    background: var(--land-groen-diep); padding: 24px 36px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.cc-land-footer__logo {
    font-family: var(--land-serif); font-size: .95rem;
    color: rgba(255,255,255,.5); font-style: italic;
}
.cc-land-footer__nav { display: flex; gap: 20px; }
.cc-land-footer__nav a {
    font-size: .82rem; color: rgba(255,255,255,.5);
    text-decoration: none; transition: color .15s;
}
.cc-land-footer__nav a:hover { color: rgba(255,255,255,.85); }
.cc-land-footer p { font-size: .78rem; color: rgba(255,255,255,.3); margin: 0; }

/* ── Responsive ── */
@media (max-width: 700px) {
    .cc-land-header { padding: 12px 18px; }
    .cc-land-nav__link { display: none; }
    .cc-land-hero__inner { padding: 72px 20px 56px; }
    .cc-land-redenen__grid { grid-template-columns: 1fr; }
    .cc-land-reden--accent { order: -1; }
    .cc-land-inner { padding: 0 20px; }
    .cc-land-footer { flex-direction: column; text-align: center; }
    .cc-land-taalswitch__btn { font-size: .82rem; }
}

/* FAQ publiek (niet-ingelogd) – genoeg ruimte onder de landing-header */
.cc-faq-wrap--publiek { padding-top: 20px; }
.cc-land-header--publiek { font-family: 'Lora', Georgia, serif; }

/* ═══════════════════════════════════════════════════
   WINKEL – Premium abonnement pagina
═══════════════════════════════════════════════════ */

.cc-winkel-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    font-family: var(--cc-font, -apple-system, sans-serif);
    min-height: 70vh;
}

/* Hero */
.cc-winkel-hero {
    text-align: center;
    margin-bottom: 56px;
}
.cc-winkel-hero__titel {
    font-family: var(--cc-font-hoofd, serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--cc-tekst);
    margin: 0 0 14px;
}
.cc-winkel-hero__sub {
    font-size: 1.05rem;
    color: var(--cc-tekst-2, #6b7280);
    max-width: 520px;
    margin: 0 auto 10px;
    line-height: 1.6;
}
.cc-winkel-hero__gebruik {
    font-size: .88rem;
    color: var(--cc-grijs, #9ca3af);
    margin: 0;
}

/* Al premium */
.cc-winkel-al-premium {
    text-align: center;
    background: var(--cc-groen-pale, #e8f5ee);
    border-radius: 24px;
    padding: 56px 32px;
    margin-bottom: 48px;
}
.cc-winkel-al-premium__icoon { font-size: 3rem; margin-bottom: 16px; }
.cc-winkel-al-premium h2 {
    font-size: 1.5rem; font-weight: 700;
    color: var(--cc-groen, #2d6a4f);
    margin: 0 0 28px;
}

/* Plannen */
.cc-winkel-plannen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.cc-winkel-plan {
    background: var(--cc-wit, #fff);
    border: 1.5px solid var(--cc-border, #e5e1d8);
    border-radius: 24px;
    padding: 32px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.cc-winkel-plan--uitgelicht {
    border-color: var(--cc-groen, #2d6a4f);
    box-shadow: 0 8px 32px rgba(45,106,79,.12);
}

/* Badge */
.cc-winkel-plan__badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 20px;
    align-self: flex-start;
    letter-spacing: .04em;
}
.cc-winkel-plan__badge--gratis {
    background: var(--cc-bg, #f7f5f0);
    color: var(--cc-tekst-2, #6b7280);
}
.cc-winkel-plan__badge--premium {
    background: var(--cc-groen-pale, #e8f5ee);
    color: var(--cc-groen, #2d6a4f);
}

/* Plan naam & prijs */
.cc-winkel-plan__naam {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cc-tekst);
    margin-bottom: 12px;
}
.cc-winkel-plan__prijs {
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.cc-winkel-plan__bedrag {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--cc-tekst);
    line-height: 1;
}
.cc-winkel-plan__periode {
    font-size: .85rem;
    color: var(--cc-tekst-2);
}
.cc-winkel-plan__alles {
    font-size: .8rem;
    color: var(--cc-grijs, #9ca3af);
    margin: 0 0 24px;
}

/* Features lijst */
.cc-winkel-plan__features {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    flex: 1;
}
.cc-winkel-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    padding: 7px 0;
    border-bottom: 1px solid var(--cc-border, #e5e1d8);
    color: var(--cc-tekst);
    line-height: 1.4;
}
.cc-winkel-feature:last-child { border-bottom: none; }
.cc-winkel-feature--nee { color: var(--cc-grijs, #9ca3af); }
.cc-winkel-feature__check {
    font-size: .85rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    margin-top: 1px;
}
.cc-winkel-feature--ok .cc-winkel-feature__check { color: var(--cc-groen, #2d6a4f); }
.cc-winkel-feature--nee .cc-winkel-feature__check { color: #d1d5db; }

/* CTA knoppen */
.cc-winkel-plan__cta { margin-top: auto; }
.cc-winkel-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 14px;
    font-weight: 600;
    font-size: .95rem;
    transition: background .15s, transform .1s;
}
.cc-winkel-btn--primair {
    background: var(--cc-groen, #2d6a4f);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(45,106,79,.2);
}
.cc-winkel-btn--primair:hover {
    background: #245c43;
    transform: translateY(-1px);
}
.cc-winkel-btn--ghost {
    background: transparent;
    color: var(--cc-tekst-2) !important;
    border: 1.5px solid var(--cc-border);
}
.cc-winkel-btn--ghost:hover { background: var(--cc-bg, #f7f5f0); }
.cc-winkel-huidig {
    display: block;
    text-align: center;
    font-size: .85rem;
    color: var(--cc-grijs);
    padding: 13px;
}

/* Garantie */
.cc-winkel-garantie {
    text-align: center;
    font-size: .85rem;
    color: var(--cc-tekst-2);
    margin-bottom: 56px;
    padding: 14px;
    background: var(--cc-bg, #f7f5f0);
    border-radius: 12px;
}

/* Feature vergelijkingstabel */
.cc-winkel-tabel-wrap {
    overflow-x: auto;
    margin-bottom: 48px;
    border-radius: 20px;
    border: 1px solid var(--cc-border);
}
.cc-winkel-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.cc-winkel-tabel thead th {
    padding: 16px 20px;
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    color: var(--cc-tekst);
    background: var(--cc-bg, #f7f5f0);
    border-bottom: 1px solid var(--cc-border);
}
.cc-winkel-tabel thead th:first-child { text-align: left; }
.cc-winkel-tabel__premium { background: var(--cc-groen-pale, #e8f5ee) !important; }
.cc-winkel-tabel tbody tr { border-bottom: 1px solid var(--cc-border); }
.cc-winkel-tabel tbody tr:last-child { border-bottom: none; }
.cc-winkel-tabel tbody td {
    padding: 13px 20px;
    color: var(--cc-tekst);
    vertical-align: middle;
}
.cc-winkel-tabel tbody tr:hover td { background: rgba(0,0,0,.02); }
.cc-winkel-tabel__cel { text-align: center; }
.cc-winkel-tabel__ja { color: var(--cc-groen, #2d6a4f); font-weight: 700; font-size: 1rem; }
.cc-winkel-tabel__nee { color: #d1d5db; font-size: 1.1rem; }

/* Footer */
.cc-winkel-footer {
    text-align: center;
    color: var(--cc-tekst-2);
    font-size: .88rem;
}
.cc-winkel-footer a {
    color: var(--cc-groen, #2d6a4f);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cc-winkel-terug {
    display: inline-block;
    margin-top: 16px;
    font-size: .85rem;
    color: var(--cc-tekst-2) !important;
    text-decoration: none;
}
.cc-winkel-terug:hover { color: var(--cc-groen) !important; }

/* Responsive */
@media (max-width: 640px) {
    .cc-winkel-plannen { grid-template-columns: 1fr; }
    .cc-winkel-plan--uitgelicht { order: -1; }
    .cc-winkel-tabel-wrap { display: none; } /* Kaarten zijn al voldoende op mobiel */
}

/* Dark mode */
:root.cc-dark .cc-winkel-plan {
    background: var(--cc-card, #1e2633);
}
:root.cc-dark .cc-winkel-tabel thead th {
    background: var(--cc-card);
}
:root.cc-dark .cc-winkel-garantie {
    background: var(--cc-card);
}

/* ═══════════════════════════════════════════════════
   TAALWISSELAAR — definitief (na WooCommerce)
═══════════════════════════════════════════════════ */

.cc-taalwisselaar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* De trigger-knop */
.cc-taalwisselaar__huidig,
.cc-taalwisselaar__huidig:link,
.cc-taalwisselaar__huidig:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--cc-border, rgba(0,0,0,.15)) !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    height: 38px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    color: var(--cc-tekst, #1a1a1a) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    transition: background .15s, border-color .15s !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
    width: auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
}
.cc-taalwisselaar__huidig:hover,
.cc-taalwisselaar__huidig:focus {
    background: rgba(0,0,0,.05) !important;
    background-color: rgba(0,0,0,.05) !important;
    border-color: var(--cc-groen, #2d6a4f) !important;
    color: var(--cc-tekst, #1a1a1a) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Dark mode */
:root.cc-dark .cc-taalwisselaar__huidig {
    border-color: #4a4a4a !important;
    color: #f3efe7 !important;
}
:root.cc-dark .cc-taalwisselaar__huidig:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: #4f8f6d !important;
}

/* Landing-header context */
.cc-land-header .cc-taalwisselaar__huidig,
.cc-land-header--publiek .cc-taalwisselaar__huidig {
    background: #ede6d8 !important;
    border-color: transparent !important;
}
.cc-land-header .cc-taalwisselaar__huidig:hover,
.cc-land-header--publiek .cc-taalwisselaar__huidig:hover {
    background: #e0d8cc !important;
}

.cc-taalwisselaar__code {
    font-weight: 600;
    letter-spacing: .04em;
}

/* Dropdown menu */
.cc-taalwisselaar__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    flex-direction: column !important;
    background: var(--cc-card, #fff);
    border: 1px solid var(--cc-border, rgba(0,0,0,.12));
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 160px;
    z-index: 99999;
    overflow: hidden;
    padding: 4px;
}
.cc-taalwisselaar__menu.open {
    display: flex !important;
    flex-direction: column !important;
}

/* Dropdown items — <a> links, reset all WooCommerce interference */
.cc-taalwisselaar__menu .cc-taalwisselaar__optie,
.cc-taalwisselaar__menu .cc-taalwisselaar__optie:link,
.cc-taalwisselaar__menu .cc-taalwisselaar__optie:visited {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: .85rem !important;
    font-weight: 400 !important;
    color: var(--cc-tekst, #1a1a1a) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background .12s !important;
    white-space: nowrap !important;
    min-height: 0 !important;
    height: auto !important;
}
.cc-taalwisselaar__menu .cc-taalwisselaar__optie:hover {
    background: rgba(0,0,0,.05) !important;
    color: var(--cc-tekst, #1a1a1a) !important;
    transform: none !important;
}
.cc-taalwisselaar__menu .cc-taalwisselaar__optie.actief {
    font-weight: 700 !important;
    color: var(--cc-groen, #2d6a4f) !important;
    background: var(--cc-groen-pale, #e8f5ee) !important;
}
.cc-taalwisselaar__vlag {
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   CHECKOUT PAGINA — schone opzet
═══════════════════════════════════════════════════ */

/* Wrap */
.cc-checkout-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 24px 80px;
}
.cc-checkout-terug {
    display: inline-block;
    font-size: .85rem;
    color: var(--cc-tekst-2, #6b7280);
    text-decoration: none;
    margin-bottom: 20px;
}
.cc-checkout-terug:hover { color: var(--cc-groen, #2d6a4f); }

/* Product hero boven de grid */
.cc-checkout-hero { margin-bottom: 24px; }
.cc-checkout-product-kaart {
    display: flex; align-items: center; gap: 16px;
    background: var(--cc-groen-pale, #e8f5ee);
    border: 1.5px solid var(--cc-groen, #2d6a4f);
    border-radius: 16px; padding: 18px 22px; margin-bottom: 14px;
}
.cc-checkout-product-kaart__icoon { font-size: 2rem; flex-shrink: 0; }
.cc-checkout-product-kaart__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cc-checkout-product-kaart__info strong { font-size: 1rem; font-weight: 700; color: var(--cc-groen, #2d6a4f); }
.cc-checkout-product-kaart__info span { font-size: .83rem; color: var(--cc-tekst-2, #6b7280); }
.cc-checkout-product-kaart__prijs { text-align: right; flex-shrink: 0; }
.cc-checkout-product-kaart__prijs .woocommerce-Price-amount { font-size: 1.4rem; font-weight: 800; color: var(--cc-groen, #2d6a4f); display: block; }
.cc-checkout-product-kaart__prijs small { font-size: .75rem; color: var(--cc-tekst-2); }
.cc-checkout-voordelen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cc-checkout-voordelen li { font-size: .82rem; color: var(--cc-groen, #2d6a4f); font-weight: 500; }

/* Formulier container */
.cc-checkout-formulier { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════
   CHECKOUT GRID — klassieke shortcode-checkout
   NAW links, 'Jouw bestelling' + betaalmethodes rechts
═══════════════════════════════════════════════════════════ */

/* Compactere WooCommerce checkout:
   NAW links, 'Jouw bestelling' + betaalmethodes rechts */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    grid-template-areas:
        "details order_title"
        "details order_box";
    gap: 24px 32px;
    align-items: start;
}
/* Linkerkolom: NAW / klantgegevens */
body.woocommerce-checkout #customer_details {
    grid-area: details;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0;
    width: 100%;
}
/* WooCommerce floats neutraliseren */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
    float: none;
    width: 100%;
    margin: 0;
}
/* Rechterkolom: titel + order review + betaalmethodes */
body.woocommerce-checkout #order_review_heading {
    grid-area: order_title;
    margin: 0 0 8px;
}
body.woocommerce-checkout #order_review {
    grid-area: order_box;
    margin: 0;
}
/* Optioneel: blok wat compacter maken */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-checkout-review-order {
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
}
/* Minder verticale ruimte */
body.woocommerce-checkout .form-row {
    margin-bottom: 12px;
}
body.woocommerce-checkout .wc_payment_methods {
    margin-top: 14px;
}
/* Mobiel weer onder elkaar */
@media (max-width: 980px) {
    body.woocommerce-checkout form.checkout.woocommerce-checkout {
        display: block;
    }
    body.woocommerce-checkout #order_review_heading {
        margin-top: 24px;
    }
}

/* ── Veldopmaak ── */
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout select {
    border: 1.5px solid var(--cc-border, #e5e1d8);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .92rem;
    background: var(--cc-bg, #f7f5f0);
    color: var(--cc-tekst);
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s;
}
body.woocommerce-checkout input:focus,
body.woocommerce-checkout select:focus {
    border-color: var(--cc-groen, #2d6a4f);
    outline: none;
}
body.woocommerce-checkout label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--cc-tekst);
    margin-bottom: 4px;
    display: block;
}
body.woocommerce-checkout h3 {
    font-family: var(--cc-font-hoofd, serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cc-tekst);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cc-border, #e5e1d8);
}

/* Verberg onnodige WooCommerce-elementen */
body.woocommerce-checkout .woocommerce-additional-fields { display: none !important; }
body.woocommerce-checkout .woocommerce-form-coupon-toggle { display: none !important; }
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { display: none !important; }

/* ── Betaalknop ── */
body.woocommerce-checkout #place_order {
    display: block !important;
    width: 100% !important;
    padding: 15px !important;
    background: var(--cc-groen, #2d6a4f) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 6px 20px rgba(45,106,79,.25) !important;
    transition: background .15s, transform .1s !important;
    margin-top: 16px !important;
    font-family: inherit !important;
}
body.woocommerce-checkout #place_order:hover {
    background: #245c43 !important;
    transform: translateY(-1px) !important;
}

/* ── Betaalmethoden ── */
body.woocommerce-checkout #payment ul.wc_payment_methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.woocommerce-checkout #payment li.wc_payment_method {
    background: var(--cc-bg, #f7f5f0) !important;
    border: 1.5px solid var(--cc-border, #e5e1d8) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    transition: border-color .15s, background .15s !important;
}
body.woocommerce-checkout #payment li.wc_payment_method:has(input:checked) {
    border-color: var(--cc-groen, #2d6a4f) !important;
    background: var(--cc-groen-pale, #e8f5ee) !important;
}
body.woocommerce-checkout #payment label {
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--cc-tekst) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}
body.woocommerce-checkout #payment li label img {
    height: 24px !important;
    width: auto !important;
    vertical-align: middle !important;
}
body.woocommerce-checkout #payment .payment_box {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 8px 28px !important;
    font-size: .85rem !important;
    color: var(--cc-tekst-2) !important;
}
body.woocommerce-checkout #payment .payment_box::before { display: none !important; }

/* Dark mode */
:root.cc-dark body.woocommerce-checkout .woocommerce-billing-fields,
:root.cc-dark body.woocommerce-checkout .woocommerce-checkout-review-order {
    background: var(--cc-card);
    border-color: var(--cc-border);
}

/* ════════════════════════════════════════
   CHECKOUT — Horizontaal: links billing, rechts bestelling
════════════════════════════════════════ */

body.cc-checkout-page { background: #f7f5f1; }

.cc-checkout-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 24px 80px;
}

.cc-checkout-terug {
    display: inline-block;
    font-size: .85rem;
    color: #6b7280;
    text-decoration: none;
    margin-bottom: 24px;
}
.cc-checkout-terug:hover { color: #2f7d57; }

/* ── Flex-container op de form ── */
body.cc-checkout-page form.checkout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Linkerkolom: factuurgegevens */
body.cc-checkout-page .cc-col-left {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Rechterkolom: besteloverzicht + iDEAL/betalen */
body.cc-checkout-page .cc-col-right {
    flex: 0 0 400px !important;
    width: 400px !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 20px !important;
}

/* WooCommerce interne floats neutraliseren */
body.cc-checkout-page #customer_details,
body.cc-checkout-page #customer_details .col-1,
body.cc-checkout-page #customer_details .col-2 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Kaarten ── */
body.cc-checkout-page .woocommerce-billing-fields {
    background: #fff;
    border: 1px solid #e6e0d8;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(25,40,30,.07);
    padding: 28px;
    margin-bottom: 16px;
}

body.cc-checkout-page #order_review_heading {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1f2a24 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
}

body.cc-checkout-page #order_review {
    background: #fff !important;
    border: 1px solid #e6e0d8 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(25,40,30,.07) !important;
    padding: 24px !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Velden ── */
body.cc-checkout-page .form-row { margin-bottom: 14px !important; }

body.cc-checkout-page label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    color: #1f2a24 !important;
}

body.cc-checkout-page input.input-text,
body.cc-checkout-page input[type="text"],
body.cc-checkout-page input[type="email"],
body.cc-checkout-page input[type="tel"],
body.cc-checkout-page select {
    width: 100% !important;
    height: 48px !important;
    border: 1.5px solid #e6e0d8 !important;
    border-radius: 10px !important;
    background: #faf9f6 !important;
    padding: 0 14px !important;
    font-size: .95rem !important;
    color: #1f2a24 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}

body.cc-checkout-page input:focus,
body.cc-checkout-page select:focus {
    outline: none !important;
    border-color: #2f7d57 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(47,125,87,.12) !important;
}

/* Voornaam + achternaam / postcode + plaats naast elkaar */
@media (min-width: 500px) {
    body.cc-checkout-page .woocommerce-billing-fields__field-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 14px !important;
    }
    body.cc-checkout-page #billing_email_field,
    body.cc-checkout-page #billing_country_field,
    body.cc-checkout-page #billing_address_1_field,
    body.cc-checkout-page #billing_phone_field {
        grid-column: 1 / -1 !important;
    }
}

/* Verberg onnodige WC-elementen */
body.cc-checkout-page .woocommerce-additional-fields,
body.cc-checkout-page .woocommerce-shipping-fields,
body.cc-checkout-page .woocommerce-form-coupon-toggle,
body.cc-checkout-page .woocommerce-privacy-policy-text,
body.cc-checkout-page .woocommerce-terms-and-conditions-wrapper { display: none !important; }

/* ── Bestellingtabel ── */
body.cc-checkout-page .shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 16px !important;
    font-size: .88rem !important;
}
body.cc-checkout-page .shop_table th,
body.cc-checkout-page .shop_table td {
    padding: 10px 0 !important;
    border-bottom: 1px solid #e6e0d8 !important;
    vertical-align: middle !important;
}
body.cc-checkout-page .shop_table th {
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
body.cc-checkout-page .shop_table td:last-child,
body.cc-checkout-page .shop_table th:last-child {
    text-align: right !important;
    white-space: nowrap !important;
}
body.cc-checkout-page .order-total th,
body.cc-checkout-page .order-total td {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1f2a24 !important;
    border-bottom: 0 !important;
    padding-top: 14px !important;
}

/* ── Betaalmethoden ── */
body.cc-checkout-page #payment {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-top: 12px !important;
    float: none !important;
}
body.cc-checkout-page #payment ul.payment_methods,
body.cc-checkout-page #payment ul.wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    border-top: 1px solid #e6e0d8 !important;
}
body.cc-checkout-page #payment ul.payment_methods > li,
body.cc-checkout-page #payment ul.wc_payment_methods > li {
    background: #faf9f6 !important;
    border: 1.5px solid #e6e0d8 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin: 10px 0 0 !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s, box-shadow .15s !important;
    list-style: none !important;
}
body.cc-checkout-page #payment ul.payment_methods > li:hover,
body.cc-checkout-page #payment ul.wc_payment_methods > li:hover {
    border-color: rgba(47,125,87,.5) !important;
    background: #fff !important;
}
body.cc-checkout-page #payment ul.payment_methods > li:has(input:checked),
body.cc-checkout-page #payment ul.wc_payment_methods > li:has(input:checked) {
    border-color: #2f7d57 !important;
    background: #f0fbf5 !important;
    box-shadow: 0 0 0 3px rgba(47,125,87,.1) !important;
}
body.cc-checkout-page #payment ul li label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: #1f2a24 !important;
    cursor: pointer !important;
    margin: 0 !important;
    width: 100% !important;
}
body.cc-checkout-page #payment ul li label img {
    height: 22px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}
body.cc-checkout-page #payment ul li input[type="radio"] {
    accent-color: #2f7d57 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
}
body.cc-checkout-page #payment div.payment_box {
    margin: 8px 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: #eef7f2 !important;
    color: #4b5563 !important;
    font-size: .83rem !important;
    border: 1px solid #c8e6d4 !important;
}
body.cc-checkout-page #payment div.payment_box::before { display: none !important; }

/* ── Bestelknop ── */
body.cc-checkout-page #place_order,
body.cc-checkout-page .place-order .button,
body.cc-checkout-page button[name="woocommerce_checkout_place_order"] {
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    background: #2f7d57 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(47,125,87,.25) !important;
    transition: background .15s, transform .1s !important;
    margin-top: 8px !important;
    text-align: center !important;
}
body.cc-checkout-page #place_order:hover,
body.cc-checkout-page .place-order .button:hover {
    background: #27694a !important;
    transform: translateY(-1px) !important;
}

/* Express checkout divider */
.cc-express-checkout-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: #9ca3af;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.cc-express-checkout-header::before,
.cc-express-checkout-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e6e0d8;
}

/* Validatie */
body.cc-checkout-page .woocommerce-invalid input,
body.cc-checkout-page .woocommerce-invalid select {
    border-color: #dc2626 !important;
}
body.cc-checkout-page .woocommerce-invalid label { color: #dc2626 !important; }

/* ── Mobiel: verticaal stapelen ── */
@media (max-width: 860px) {
    body.cc-checkout-page form.checkout {
        flex-direction: column !important;
    }
    body.cc-checkout-page .cc-col-left,
    body.cc-checkout-page .cc-col-right {
        width: 100% !important;
        flex: none !important;
        position: static !important;
    }
}

/* ── Winkelwagen pagina ── */
.cc-cart-wrap { max-width: 680px; margin: 0 auto; padding: 32px 24px 80px; }
.cc-cart-header { margin-bottom: 28px; }
.cc-cart-titel { font-family: var(--cc-font-hoofd, serif); font-size: 1.8rem; font-weight: 700; color: var(--cc-tekst); margin: 12px 0 0; }
.cc-cart-inhoud { background: var(--cc-wit, #fff); border: 1px solid var(--cc-border, #e5e1d8); border-radius: 20px; overflow: hidden; }
.cc-cart-item { display: flex; align-items: flex-start; gap: 18px; padding: 28px 28px 24px; border-bottom: 1px solid var(--cc-border, #e5e1d8); }
.cc-cart-item__icoon { font-size: 2.2rem; flex-shrink: 0; padding-top: 2px; }
.cc-cart-item__info { flex: 1; }
.cc-cart-item__info strong { display: block; font-size: 1.05rem; font-weight: 700; color: var(--cc-tekst); margin-bottom: 4px; }
.cc-cart-item__info > span { font-size: .82rem; color: var(--cc-tekst-2, #6b7280); display: block; margin-bottom: 12px; }
.cc-cart-item__features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cc-cart-item__features li { font-size: .8rem; color: var(--cc-groen, #2d6a4f); font-weight: 500; }
.cc-cart-item__prijs { text-align: right; flex-shrink: 0; }
.cc-cart-item__prijs .woocommerce-Price-amount { font-size: 1.5rem; font-weight: 800; color: var(--cc-tekst); display: block; }
.cc-cart-item__prijs small { font-size: .75rem; color: var(--cc-tekst-2); }
.cc-cart-totaal { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.cc-cart-totaal__rij { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; }
.cc-cart-totaal__rij strong { font-size: 1.3rem; color: var(--cc-groen, #2d6a4f); }
.cc-cart-checkout-btn { width: 100%; justify-content: center; font-size: 1rem !important; padding: 14px 24px !important; }
.cc-cart-annuleer { text-align: center; font-size: .85rem; color: var(--cc-tekst-2, #6b7280); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cc-cart-leeg { text-align: center; padding: 56px 24px; }
.cc-cart-leeg__icoon { font-size: 3rem; margin-bottom: 14px; }
.cc-cart-leeg h2 { font-size: 1.3rem; font-weight: 700; color: var(--cc-tekst); margin: 0 0 8px; }

/* ── WooCommerce notice vervangen ── */
.woocommerce-message, .woocommerce-info {
    background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important;
}

/* Verberg de standaard lelijke foutlijst bovenaan volledig */
.cc-checkout-page ul.woocommerce-error,
.cc-checkout-page .woocommerce-NoticeGroup > ul.woocommerce-error,
.cc-checkout-page .woocommerce-notices-wrapper ul.woocommerce-error {
    display: none !important;
}

/* ── Inline veld-validatie ── */

/* Rood kader + achtergrond op ongeldige velden */
.cc-checkout-page .woocommerce-invalid input[type="text"],
.cc-checkout-page .woocommerce-invalid input[type="email"],
.cc-checkout-page .woocommerce-invalid input[type="tel"],
.cc-checkout-page .woocommerce-invalid input[type="number"],
.cc-checkout-page .woocommerce-invalid select,
.cc-checkout-page .woocommerce-invalid textarea {
    border-color: var(--cc-rood, #b42318) !important;
    background-color: var(--cc-rood-pale, #fef3f2) !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08) !important;
}

/* Klein "Verplicht veld" label direct onder het input */
.cc-checkout-page .woocommerce-invalid .woocommerce-input-wrapper::after {
    content: '↑ Verplicht veld';
    display: block;
    color: var(--cc-rood, #b42318);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 5px;
    letter-spacing: 0.01em;
}

/* Label van ongeldig veld ook rood kleuren */
.cc-checkout-page .woocommerce-invalid label {
    color: var(--cc-rood, #b42318) !important;
}

/* ── Compacte foutbanner (bovenaan formulier, via JS ingevuld) ── */
.cc-checkout-foutbanner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cc-rood-pale, #fef3f2);
    border: 1.5px solid #fca5a5;
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 20px;
    animation: cc-fout-in .25s ease;
}
@keyframes cc-fout-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cc-checkout-foutbanner__icoon {
    font-size: 1.15rem;
    flex-shrink: 0;
    line-height: 1;
}
.cc-checkout-foutbanner__tekst {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cc-rood, #b42318);
    line-height: 1.4;
}
.cc-checkout-foutbanner__tekst small {
    display: block;
    font-weight: 400;
    color: #9b1c1c;
    font-size: 0.8rem;
    margin-top: 1px;
    opacity: .8;
}
.cc-cart-notice {
    position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
    background: var(--cc-groen, #2d6a4f); color: #fff;
    padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15); animation: cc-notice-in .3s ease;
}
@keyframes cc-notice-in { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cc-cart-notice__tekst { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; }
.cc-cart-notice__tekst span { opacity: .85; font-weight: 400; }
.cc-cart-notice__acties { display: flex; gap: 10px; flex-shrink: 0; }
.cc-cart-notice__btn { display: inline-flex; align-items: center; background: rgba(255,255,255,.2); color: #fff !important; text-decoration: none; padding: 7px 16px; border-radius: 8px; font-size: .85rem; font-weight: 600; border: 1.5px solid rgba(255,255,255,.4); transition: background .15s; white-space: nowrap; }
.cc-cart-notice__btn:hover { background: rgba(255,255,255,.3); }
.cc-cart-notice__btn--primair { background: #fff; color: var(--cc-groen, #2d6a4f) !important; border-color: #fff; }
.cc-cart-notice__btn--primair:hover { background: #f0fdf4; }
.cc-cart-notice__sluiten { background: transparent; border: none; color: rgba(255,255,255,.7); font-size: 1.3rem; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }

/* ── Bedankt-pagina ── */
.cc-checkout-bedankt { text-align: center; background: var(--cc-groen-pale, #e8f5ee); border: 2px solid var(--cc-groen, #2d6a4f); border-radius: 20px; padding: 40px 32px; margin: 0 auto 32px; max-width: 560px; }
.cc-checkout-bedankt__icoon { font-size: 3rem; margin-bottom: 12px; }
.cc-checkout-bedankt h2 { font-size: 1.5rem; font-weight: 700; color: var(--cc-groen, #2d6a4f); margin: 0 0 10px; }
.cc-checkout-bedankt p { color: var(--cc-tekst-2, #6b7280); margin: 0 0 24px; font-size: .95rem; }

@media (max-width: 560px) {
    .cc-cart-item { flex-wrap: wrap; }
    .cc-cart-item__prijs { width: 100%; text-align: left; }
    .cc-cart-notice { flex-wrap: wrap; }
    .cc-cart-notice__acties { width: 100%; }
}

/* Dark mode */
:root.cc-dark .cc-checkout-left { background: var(--cc-card); }
:root.cc-dark .cc-checkout-sidebar { background: var(--cc-card-2, #1a2030); }
:root.cc-dark .cc-cart-inhoud { background: var(--cc-card); }

/* Verberg betaalmethoden + knop op de originele plek */
.cc-checkout-left #payment ul.wc_payment_methods { display: none !important; }
.cc-checkout-left #payment .payment_box           { display: none !important; }
.cc-checkout-left #payment #place_order           { display: none !important; }

/* Betaalblok onder de sidebar */
.cc-betaal-sidebar {
    background: var(--cc-wit, #fff);
    border: 1px solid var(--cc-border, #e5e1d8);
    border-radius: 18px;
    padding: 20px;
    margin-top: 12px;
}

/* Betaalmethoden lijst */
.cc-betaal-sidebar ul.wc_payment_methods {
    list-style: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    display: block !important;
}
.cc-betaal-sidebar li.wc_payment_method {
    background: var(--cc-bg, #f7f5f0) !important;
    border: 1.5px solid var(--cc-border, #e5e1d8) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    transition: border-color .15s, background .15s !important;
}
.cc-betaal-sidebar li.wc_payment_method:has(input:checked) {
    border-color: var(--cc-groen, #2d6a4f) !important;
    background: var(--cc-groen-pale, #e8f5ee) !important;
}
.cc-betaal-sidebar li label {
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--cc-tekst) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}
.cc-betaal-sidebar li label img {
    height: 24px !important;
    width: auto !important;
    vertical-align: middle !important;
}
.cc-betaal-sidebar .payment_box {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 8px 28px !important;
    font-size: .85rem !important;
    color: var(--cc-tekst-2) !important;
}
.cc-betaal-sidebar .payment_box::before { display: none !important; }

/* Afrekenknop in sidebar */
.cc-betaal-sidebar #place_order {
    display: block !important;
    width: 100% !important;
    padding: 15px !important;
    background: var(--cc-groen, #2d6a4f) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 6px 20px rgba(45,106,79,.25) !important;
    transition: background .15s, transform .1s !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-top: 4px !important;
}
.cc-betaal-sidebar #place_order:hover {
    background: #245c43 !important;
    transform: translateY(-1px) !important;
}

/* Proxy bestelknop in sidebar */
.cc-proxy-order-btn {
    display: block !important;
    width: 100% !important;
    padding: 15px !important;
    background: var(--cc-groen, #2d6a4f) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 6px 20px rgba(45,106,79,.25) !important;
    transition: background .15s, transform .1s !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-top: 12px !important;
    font-family: inherit !important;
}
.cc-proxy-order-btn:hover:not(:disabled) {
    background: #245c43 !important;
    transform: translateY(-1px) !important;
}
.cc-proxy-order-btn:disabled {
    opacity: .7 !important;
    cursor: default !important;
}

/* Actieve betaalmethode in kloon */
.cc-betaal-kloon li.cc-actief {
    border-color: var(--cc-groen, #2d6a4f) !important;
    background: var(--cc-groen-pale, #e8f5ee) !important;
}

/* Echte knop: onzichtbaar maar WEL klikbaar voor jQuery/WooCommerce */
.cc-checkout-left #payment #place_order {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}

/* Verberg privacytekst WooCommerce checkout */
.cc-checkout-left .woocommerce-privacy-policy-text,
.cc-checkout-left .woocommerce-terms-and-conditions-wrapper { display: none !important; }

/* Verberg het lege payment_box restant op de originele plek */
.cc-checkout-left #payment .payment_box,
.cc-checkout-left #payment .woocommerce-checkout-payment { display: none !important; }

/* v3.7.92 checkout: haal resterende lijn/ruimte van het originele WooCommerce betaalblok volledig uit de layout */
.cc-checkout-left #order_review {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
}

.cc-checkout-left #payment {
    position: absolute !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cc-checkout-left #payment .form-row,
.cc-checkout-left #payment .place-order,
.cc-checkout-left #payment .payment_box,
.cc-checkout-left #payment .woocommerce-checkout-payment {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
}

/* ------------------------------------------------------------------
   v3.7.117 popup actieknoppen gelijkgetrokken + route-cirkel boven foto
   ------------------------------------------------------------------ */
.cc-popup__share-btn,
.cc-popup__route-btn,
.cc-popup__bewerk-btn,
.cc-popup__delete-btn,
.cc-popup__dagboek-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #fff !important;
    color: #213041 !important;
    border: 1px solid #d8d0c4 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    min-height: 42px !important;
    min-width: 118px !important;
    font-family: var(--cc-font-body, inherit) !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px rgba(17,24,39,.06) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.cc-popup__share-btn:hover,
.cc-popup__share-btn:focus-visible,
.cc-popup__route-btn:hover,
.cc-popup__route-btn:focus-visible,
.cc-popup__bewerk-btn:hover,
.cc-popup__bewerk-btn:focus-visible,
.cc-popup__delete-btn:hover,
.cc-popup__delete-btn:focus-visible,
.cc-popup__dagboek-btn:hover,
.cc-popup__dagboek-btn:focus-visible {
    transform: translateY(-1px) !important;
    border-color: #b8cdbf !important;
    box-shadow: 0 10px 22px rgba(17,24,39,.08) !important;
    background: #fff !important;
    color: #213041 !important;
    outline: none !important;
}

.cc-popup__share-btn svg,
.cc-popup__route-btn svg,
.cc-popup__share-foto-btn svg,
.cc-popup__route-foto-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
}

.cc-popup__share-foto-btn,
.cc-popup__route-foto-btn {
    position: absolute !important;
    top: 12px !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(4px) !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #213041 !important;
    font-size: .95rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    transition: background .15s ease, transform .15s ease !important;
    z-index: 10 !important;
}

.cc-popup__share-foto-btn {
    left: 12px !important;
}

.cc-popup__route-foto-btn {
    left: 52px !important;
}

.cc-popup__share-foto-btn:hover,
.cc-popup__share-foto-btn:focus-visible,
.cc-popup__route-foto-btn:hover,
.cc-popup__route-foto-btn:focus-visible {
    background: #fff !important;
    transform: none !important;
    outline: none !important;
}

/* ------------------------------------------------------------------
   v3.7.126 popup badges uit de weg van share/route-iconen
   ------------------------------------------------------------------ */
.cc-popup__foto-wrap .cc-popup__ster-badge {
    left: auto !important;
    right: 56px !important;
    top: 12px !important;
}

.cc-popup__foto-wrap .cc-popup__aanbevolen {
    left: auto !important;
    right: 56px !important;
}

/* ------------------------------------------------------------------
   v3.7.133 checkout: verberg terug-link en Besteloverzicht heading
   ------------------------------------------------------------------ */
.cc-checkout-terug { display: none !important; }
body.woocommerce-checkout #order_review_heading,
body.cc-checkout-page #order_review_heading { display: none !important; }

/* ------------------------------------------------------------------
   v3.7.134 mobiel: user/menu knop zichtbaar in topnav
   ------------------------------------------------------------------ */


/* Kosten badge in verblijf popup */
.cc-popup-verblijf__kosten { display: inline-block; margin-top: 4px; padding: 2px 8px; background: #e8f5e9; border-radius: 20px; font-size: .76rem; color: var(--cc-groen,#2d6a4f); font-weight: 500; }

/* Dagboek-knop in actiebalk */
.cc-popup__dagboek-btn.cc-verborgen { display: none; }

/* Logboek viewer */
.cc-logboek-viewer { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: clamp(16px,3vh,28px) 16px; pointer-events: none; }
.cc-logboek-viewer__kaart { background: var(--cc-wit); border-radius: var(--cc-radius-lg); width: 100%; max-width: 540px; max-height: min(88vh,720px); display: flex; flex-direction: column; box-shadow: 0 32px 80px rgba(0,0,0,.35); transform: translateX(40px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.34,1.1,.64,1), opacity .22s ease; overflow: hidden; pointer-events: none; flex-shrink: 0; }
.cc-logboek-viewer--open { pointer-events: auto; }
.cc-logboek-viewer--open .cc-logboek-viewer__kaart { transform: translateX(0) scale(1); opacity: 1; pointer-events: auto; }
.cc-logboek-viewer__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cc-rand,#e8e8e4); flex-shrink: 0; }
.cc-logboek-viewer__terug { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s, transform .18s; }
.cc-logboek-viewer__terug:hover { background: rgba(0,0,0,.6); transform: scale(1.08); }
.cc-logboek-viewer__titel { font-size: .95rem; font-weight: 700; color: var(--cc-tekst); line-height: 1.2; }
.cc-logboek-viewer__sub { font-size: .78rem; color: var(--cc-grijs,#888); margin-top: 2px; }
.cc-logboek-viewer__body { flex: 1; overflow-y: auto; padding: 0 20px 24px; -webkit-overflow-scrolling: touch; }

/* Dagboek reader */
.cc-dagboek-lezer { display: flex; flex-direction: column; }
.cc-dagboek-entry { padding: 20px 0; border-bottom: 1px solid var(--cc-rand,#e8e8e4); }
.cc-dagboek-entry:last-child { border-bottom: none; padding-bottom: 8px; }
.cc-dagboek-entry__meta { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-groen,#2d6a4f); margin-bottom: 5px; }
.cc-dagboek-entry__ster { font-size: .88rem; color: #f59e0b; letter-spacing: 2px; margin-bottom: 10px; }
.cc-dagboek-entry__tekst { font-family: Georgia,'Times New Roman',serif; font-size: .95rem; line-height: 1.8; color: var(--cc-tekst,#1a1a1a); white-space: pre-line; font-style: italic; }

@media (max-width: 600px) {
    .cc-logboek-viewer { padding: 0; align-items: flex-end; }
    .cc-logboek-viewer__kaart { max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; transform: translateY(40px); }
    .cc-logboek-viewer--open .cc-logboek-viewer__kaart { transform: translateY(0); }
}

/* ------------------------------------------------------------------
   v3.7.159 profiel-tabs: gelijke containerbreedte
   Statistieken, uitnodigen/referral en punten gebruiken nu dezelfde
   1100px containerbreedte als homepage en partner-tab.
   ------------------------------------------------------------------ */
body.cc-full-page .cc-profiel-wrap,
.cc-app > .cc-profiel-wrap {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

body.cc-full-page .cc-profiel-wrap .cc-profiel-header,
body.cc-full-page .cc-profiel-wrap .cc-profiel-snelstats,
body.cc-full-page .cc-profiel-wrap .cc-profiel-tabs,
body.cc-full-page .cc-profiel-wrap .cc-profiel-tabpanel,
.cc-app > .cc-profiel-wrap .cc-profiel-header,
.cc-app > .cc-profiel-wrap .cc-profiel-snelstats,
.cc-app > .cc-profiel-wrap .cc-profiel-tabs,
.cc-app > .cc-profiel-wrap .cc-profiel-tabpanel {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

body.cc-full-page .cc-profiel-wrap #cc-tab-stats .cc-statistieken-grid,
.cc-app > .cc-profiel-wrap #cc-tab-stats .cc-statistieken-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
}

body.cc-full-page .cc-profiel-wrap #cc-tab-referral .cc-ref-widget,
body.cc-full-page .cc-profiel-wrap #cc-tab-punten .ccbp-saldo-kaart,
body.cc-full-page .cc-profiel-wrap #cc-tab-punten .ccbp-uitleg,
body.cc-full-page .cc-profiel-wrap #cc-tab-punten .ccbp-log,
body.cc-full-page .cc-profiel-wrap #cc-tab-punten .ccbp-mail-prefs,
.cc-app > .cc-profiel-wrap #cc-tab-referral .cc-ref-widget,
.cc-app > .cc-profiel-wrap #cc-tab-punten .ccbp-saldo-kaart,
.cc-app > .cc-profiel-wrap #cc-tab-punten .ccbp-uitleg,
.cc-app > .cc-profiel-wrap #cc-tab-punten .ccbp-log,
.cc-app > .cc-profiel-wrap #cc-tab-punten .ccbp-mail-prefs {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    body.cc-full-page .cc-profiel-wrap #cc-tab-stats .cc-statistieken-grid,
    .cc-app > .cc-profiel-wrap #cc-tab-stats .cc-statistieken-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* ══════════════════════════════════════════════════════════
   MOBIELE HOMEPAGE LAYOUT  (v3.7.161)
   Gebaseerd op app-stijl ontwerp: 2×2 gekleurde stats,
   2-koloms kaartgrid met compacte foto's.
   Header blijft ongewijzigd.
══════════════════════════════════════════════════════════ */

/* Kleurvarianten stat-cards (desktop: subtiel, mobiel: volledig gekleurd) */
.cc-stat-card--groen  { border-color: rgba(45, 106, 79, .18); }
.cc-stat-card--blauw  { border-color: rgba(59, 130, 246, .18); }
.cc-stat-card--donker { border-color: rgba(30,  30,  46, .14); }
.cc-stat-card--oranje { border-color: rgba(234,135, 26, .18); }

@media (max-width: 600px) {

    /* ── Stats: 2×2 gekleurd raster ── */
    .cc-stats-rij {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 0 16px 24px !important;
        overflow: visible !important;
    }

    .cc-stat-card {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 6px !important;
        padding: 18px 12px 16px !important;
        min-width: 0 !important;
        border-radius: 18px !important;
    }

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

    .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 {
        background: rgba(255,255,255,.15) !important;
        font-size: 1.4rem !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    }

    .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-size: 1.8rem !important;
        color: #fff !important;
    }

    .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 {
        color: rgba(255,255,255,.80) !important;
        font-size: .68rem !important;
        letter-spacing: .8px !important;
    }

    /* ── Kaartengrid: 2 kolommen ── */
    .cc-kaarten-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Uitgelicht-kaart: normaal op mobiel */
    .cc-kaart--uitgelicht {
        grid-column: 1 / 2 !important;
        display: block !important;
    }
    .cc-kaart--uitgelicht .cc-kaart__foto-wrap {
        min-height: 130px !important;
        max-height: 150px !important;
        border-radius: var(--cc-radius-lg) var(--cc-radius-lg) 0 0 !important;
    }
    .cc-kaart--uitgelicht .cc-kaart__body {
        padding: 10px 12px 12px !important;
    }
    .cc-kaart--uitgelicht .cc-kaart__naam {
        font-size: .88rem !important;
    }

    /* Compacte kaart foto */
    .cc-kaart__foto-wrap {
        height: 140px !important;
    }

    /* Compacte kaart body */
    .cc-kaart__body {
        padding: 10px 12px 12px !important;
    }

    .cc-kaart__naam {
        font-size: .88rem !important;
        margin-bottom: 3px !important;
    }

    .cc-kaart__sub {
        font-size: .72rem !important;
        margin-bottom: 6px !important;
        gap: 4px !important;
    }

    /* Voorzieningen op mobiel verbergen voor ruimte */
    .cc-kaart__vz {
        display: none !important;
    }

    /* Hart/share knoppen kleiner */
    .cc-kaart__share-btn,
    .cc-hart-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: .8rem !important;
    }

    /* Padding grid-wrap minder op mobiel */
    .cc-grid-wrap {
        padding: 0 16px !important;
    }
}


/* ══════════════════════════════════════════════════════════
   STAT-CARDS: GEKLEURDE TEGELS ALTIJD ACTIEF  (v3.7.162)
   Desktop: 4 gelijke kolommen, verticaal gecentreerd.
   Mobiel: 4 op één rij (scrollbaar bij heel kleine schermen).
══════════════════════════════════════════════════════════ */

/* ── Desktop: gekleurde tegels ── */
.cc-stat-card--groen,
.cc-stat-card--blauw,
.cc-stat-card--donker,
.cc-stat-card--oranje {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 24px 16px 20px !important;
    min-width: 0 !important;
    border-radius: 20px !important;
    flex: 1 !important;
    min-width: 120px !important;
}

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

.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 {
    background: rgba(255,255,255,.15) !important;
    font-size: 1.5rem !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
}

.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-size: 2rem !important;
    color: #fff !important;
    margin-bottom: 2px !important;
}

.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 {
    color: rgba(255,255,255,.80) !important;
    font-size: .68rem !important;
    letter-spacing: .9px !important;
}

.cc-stat-card--groen:hover,
.cc-stat-card--blauw:hover,
.cc-stat-card--donker:hover,
.cc-stat-card--oranje:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

/* ── Mobiel: 4 op één rij ── */
@media (max-width: 600px) {
    .cc-stats-rij {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: unset !important;
        gap: 8px !important;
        padding: 0 16px 24px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    .cc-stats-rij::-webkit-scrollbar { display: none; }

    .cc-stat-card--groen,
    .cc-stat-card--blauw,
    .cc-stat-card--donker,
    .cc-stat-card--oranje {
        flex: 0 0 calc(25% - 6px) !important;
        min-width: 80px !important;
        padding: 16px 8px 14px !important;
        border-radius: 16px !important;
        gap: 6px !important;
    }

    .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: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
        border-radius: 10px !important;
    }

    .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-size: 1.4rem !important;
    }

    .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: .58rem !important;
        letter-spacing: .6px !important;
    }
}


/* ══════════════════════════════════════════════════════════
   STATS + ZOEKBALK: GELIJKE BREEDTE  (v3.7.163)
   Zoekbalk en landfilter krijgen exact dezelfde breedte
   als de vier gekleurde statistiektegels.
══════════════════════════════════════════════════════════ */

:root {
    --cc-stats-breedte: 660px;
}

/* Stats-rij: beperken tot eigen breedte (niet de volle 1100px) */
.cc-stats-rij {
    max-width: var(--cc-stats-breedte) !important;
}

/* Zoekbalk: zelfde breedte als de stats-rij */
.cc-zoekbalk {
    max-width: var(--cc-stats-breedte) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 700px) {
    .cc-zoekbalk {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cc-stats-rij {
        max-width: 100% !important;
    }
}


/* ══════════════════════════════════════════════════════════
   CC-UITLIJNING-WRAP  (v3.7.164)
   Gedeelde container voor stats + zoekbalk.
   Beide elementen erven exact dezelfde breedte en centrering.
══════════════════════════════════════════════════════════ */

.cc-uitlijning-wrap {
    max-width: var(--cc-stats-breedte, 660px);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
}

/* Kinderen gebruiken volle breedte van de wrapper */
.cc-uitlijning-wrap .cc-stats-rij {
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cc-uitlijning-wrap .cc-zoekbalk {
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 700px) {
    .cc-uitlijning-wrap {
        max-width: 100% !important;
        padding: 0 16px !important;
    }
}

/* ═══════════════════════════════════════════════
   v3.7.166 – 2-koloms kaartgrid op mobiel
   ═══════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Kaarten: 2 kolommen ook op smal scherm */
    .cc-kaarten-grid,
    #cc-kaarten-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .cc-kaart__foto-wrap {
        height: 130px !important;
    }
    /* Compactere kaart-body tekst */
    .cc-kaart__naam {
        font-size: .88rem !important;
        margin-bottom: 2px !important;
    }
    .cc-kaart__sub,
    .cc-kaart__land,
    .cc-kaart__nachten {
        font-size: .74rem !important;
    }
    .cc-kaart__body {
        padding: 10px 12px 12px !important;
    }
    /* Zoekpill: uitlijning in wrapper */
    .cc-uitlijning-wrap {
        padding: 0 16px !important;
    }
}

/* Campingkompas 3.7.172 / Plugin 3.6.321 - mobiele checklist UX */
.cc-checklist-head__actions--compact {
    align-self: flex-start;
}

.cc-checklist-actions-card {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cc-checklist-actions-card__title {
    display: none;
}

.cc-checklist-action--plain {
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid var(--cc-border);
    background: var(--cc-wit);
    color: var(--cc-tekst);
    box-shadow: 0 4px 14px rgba(26, 26, 26, .06);
}

.cc-checklist-action--plain:hover,
.cc-checklist-action--plain:focus-visible {
    background: #fbfaf7;
}

.cc-checklist-action--danger {
    color: var(--cc-rood);
}

.cc-profiel-tools {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 18px;
}

.cc-profiel-tool-btn {
    appearance: none;
    border: 1px solid var(--cc-border);
    background: var(--cc-wit);
    color: var(--cc-tekst);
    border-radius: 16px;
    min-height: 48px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 800;
    font-family: var(--cc-font-body);
    box-shadow: 0 8px 22px rgba(26, 26, 26, .08);
    cursor: pointer;
}

.cc-profiel-tool-btn:hover,
.cc-profiel-tool-btn:focus-visible {
    border-color: rgba(45, 106, 79, .28);
    color: var(--cc-groen);
}

@media (max-width: 700px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .cc-app--checklist .cc-checklist-wrap {
        width: 100%;
        max-width: 100%;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
        overflow-x: hidden;
    }

    .cc-app--checklist .cc-checklist-head {
        display: block;
    }

    .cc-app--checklist .cc-checklist-title,
    .cc-app--checklist .cc-checklist-sub {
        max-width: 100%;
    }

    .cc-app--checklist .cc-checklist-sub {
        overflow-wrap: anywhere;
    }

    .cc-checklist-scope-menu,
    .cc-checklist-scope-menu__trigger,
    .cc-checklist-scope-menu__panel {
        width: 100%;
        max-width: 100%;
    }

    .cc-checklist-scope-menu__trigger {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
        min-height: 64px;
    }

    .cc-checklist-scope-menu__value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cc-checklist-head__actions--compact {
        width: 100%;
        margin-top: 18px;
    }

    .cc-checklist-actions-card {
        width: 100%;
        display: block;
        padding: 18px;
        border: 1px solid var(--cc-border);
        border-radius: 22px;
        background: var(--cc-wit);
        box-shadow: 0 14px 34px rgba(26, 26, 26, .10);
    }

    .cc-checklist-actions-card__title {
        display: block;
        margin: 0 0 12px;
        font-weight: 900;
        color: var(--cc-tekst);
        font-size: 1rem;
    }

    .cc-checklist-actions-card .cc-checklist-action {
        width: 100%;
        min-height: 58px;
        justify-content: flex-start;
        padding: 0 8px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        font-size: 1rem;
    }

    .cc-checklist-actions-card .cc-checklist-action + .cc-checklist-action {
        border-top: 1px solid var(--cc-border);
        margin-top: 6px;
        padding-top: 6px;
    }

    .cc-app--checklist .cc-stats-rij--checklist {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        overflow-x: auto;
        scroll-padding-left: 0;
    }

    .cc-app--checklist .cc-stat-card {
        flex: 0 0 clamp(132px, 40vw, 168px);
        min-width: 0;
    }

    .cc-profiel-tools {
        justify-content: stretch;
    }

    .cc-profiel-tool-btn {
        width: 100%;
        min-height: 54px;
    }
}

/* ═══════════════════════════════════════
   BUGFIXES v3.7.173
   1. Checklist stats-tegels: label wrappen ipv afkappen
   2. Checklist acties-menu: kleiner op mobiel
═══════════════════════════════════════ */

/* Fix 1: tekst in gekleurde stats-tegels loopt niet meer buiten de tegel */
.cc-stat-card__label {
    white-space: normal !important;
    word-break: break-word;
    hyphens: auto;
    overflow: hidden;
    line-height: 1.2;
}

.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 {
    white-space: normal !important;
    word-break: break-word;
    hyphens: auto;
    overflow: hidden;
}

/* Fix 2: Checklist acties-menu minder prominent */
.cc-checklist-actions-card__title {
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cc-grijs) !important;
    margin: 0 0 6px !important;
}

@media (max-width: 700px) {
    .cc-checklist-actions-card {
        padding: 10px 14px !important;
    }

    .cc-checklist-actions-card .cc-checklist-action {
        min-height: 44px !important;
        font-size: .88rem !important;
    }

    .cc-checklist-actions-card .cc-checklist-action svg {
        width: 16px !important;
        height: 16px !important;
    }

    .cc-checklist-actions-card__title {
        font-size: .7rem !important;
        margin: 0 0 4px !important;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE FIX — Paklijst bewerken mobiel
   v3.7.182
═══════════════════════════════════════ */

/* Voorkom horizontale overflow op alle pagina's */
.cc-app--checklist-bewerken,
.cc-app--checklist {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 700px) {

    /* Wrap en padding */
    .cc-app--checklist-bewerken .cc-checklist-wrap {
        width: 100%;
        max-width: 100%;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-top: 24px;
        padding-bottom: 48px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Header: titel en knoppen onder elkaar */
    .cc-app--checklist-bewerken .cc-checklist-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    /* Titel kleiner op mobiel */
    .cc-app--checklist-bewerken .cc-checklist-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
        word-break: break-word;
    }

    /* Knoppen naast elkaar, volledige breedte */
    .cc-app--checklist-bewerken .cc-checklist-head__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: stretch;
        width: 100%;
    }

    .cc-app--checklist-bewerken .cc-checklist-head__actions .cc-checklist-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        text-align: center;
        justify-content: center;
        padding: 12px 10px;
        font-size: .88rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Actieve lijst selector: volledige breedte */
    .cc-app--checklist-bewerken .cc-checklist-scope,
    .cc-app--checklist-bewerken .cc-checklist-scope-menu,
    .cc-app--checklist-bewerken .cc-checklist-scope-menu__trigger {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Grid: 1 kolom */
    .cc-app--checklist-bewerken .cc-checklist-grid,
    .cc-app--checklist-bewerken .cc-checklist-grid--edit {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Cards: geen overflow */
    .cc-app--checklist-bewerken .cc-checklist-card {
        border-radius: 18px;
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Card head: tools onder de titel */
    .cc-app--checklist-bewerken .cc-checklist-card__head--edit {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cc-app--checklist-bewerken .cc-checklist-card__tools {
        justify-content: flex-start;
        width: 100%;
    }

    /* Items: volledige breedte, geen overflow */
    .cc-app--checklist-bewerken .cc-checklist-item {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    /* Stats blokken: horizontaal scrollbaar, compacter */
    .cc-app--checklist-bewerken .cc-stats-rij--checklist {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        gap: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .cc-app--checklist-bewerken .cc-stat-card {
        flex: 0 0 clamp(120px, 36vw, 150px);
        scroll-snap-align: start;
        min-width: 0;
    }

    /* Item toevoegen knop: volledige breedte */
    .cc-app--checklist-bewerken .cc-checklist-add {
        width: 100%;
        box-sizing: border-box;
    }

    .cc-app--checklist-bewerken .cc-checklist-add__input {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE FIX — Paklijst mobiele breedte
   v3.7.184
   Voorkomt dat checklist/paklijst buiten het scherm valt op telefoon.
═══════════════════════════════════════ */
@media (max-width: 700px) {
    html,
    body,
    #page,
    .site,
    .site-content,
    .content-area,
    .cc-app,
    .cc-app--checklist,
    .cc-app--checklist-bewerken {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .cc-topnav,
    .cc-topnav__inner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .cc-topnav__inner {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        gap: 6px !important;
    }

    .cc-topnav__logo {
        min-width: 0 !important;
        margin-right: 0 !important;
    }

    .cc-topnav__rechts {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        overflow: hidden !important;
    }

    .cc-topnav__add,
    .cc-topnav__menu-btn,
    .cc-topnav__user-btn {
        max-width: 48vw !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cc-checklist-wrap,
    .cc-app--checklist .cc-checklist-wrap,
    .cc-app--checklist-bewerken .cc-checklist-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .cc-checklist-head,
    .cc-app--checklist .cc-checklist-head,
    .cc-app--checklist-bewerken .cc-checklist-head {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .cc-checklist-head__actions,
    .cc-checklist-head__actions--compact {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    .cc-checklist-head__actions .cc-checklist-btn,
    .cc-checklist-actions-card,
    .cc-checklist-actions-card .cc-checklist-action {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .cc-stats-rij,
    .cc-stats-rij--checklist,
    .cc-app--checklist .cc-stats-rij--checklist,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    .cc-stat-card,
    .cc-app--checklist .cc-stat-card,
    .cc-app--checklist-bewerken .cc-stat-card {
        flex: 0 0 min(42vw, 156px) !important;
        width: min(42vw, 156px) !important;
        min-width: 0 !important;
        max-width: 156px !important;
        box-sizing: border-box !important;
        scroll-snap-align: start;
    }

    .cc-checklist-grid,
    .cc-checklist-card,
    .cc-checklist-items,
    .cc-checklist-item,
    .cc-checklist-card__head,
    .cc-checklist-card__title,
    .cc-checklist-scope,
    .cc-checklist-scope-menu,
    .cc-checklist-scope-menu__trigger,
    .cc-checklist-scope-menu__panel,
    .cc-checklist-progress,
    .cc-checklist-feedback {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .cc-checklist-item__label,
    .cc-checklist-title,
    .cc-checklist-sub,
    .cc-checklist-card__title h2,
    .cc-checklist-card__title p {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .cc-checklist-progress {
        flex-wrap: wrap !important;
    }

    .cc-checklist-progress__text {
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE FIX — Homepage statistiektegels mobiel
   v3.7.185
   Vier gekleurde tegels passen binnen de schermbreedte.
═══════════════════════════════════════ */
@media (max-width: 700px) {
    .cc-uitlijning-wrap {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 8px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card,
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card--groen,
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card--blauw,
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card--donker,
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card--oranje {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 12px 4px 11px !important;
        gap: 5px !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card__icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        border-radius: 9px !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card__getal {
        font-size: 1.25rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card__label {
        max-width: 100% !important;
        font-size: .5rem !important;
        line-height: 1.05 !important;
        letter-spacing: .35px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }
}

@media (max-width: 360px) {
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) {
        gap: 6px !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card,
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card--groen,
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card--blauw,
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card--donker,
    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card--oranje {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card__icon {
        width: 29px !important;
        height: 29px !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card__getal {
        font-size: 1.1rem !important;
    }

    .cc-uitlijning-wrap .cc-stats-rij:not(.cc-stats-rij--checklist) .cc-stat-card__label {
        font-size: .46rem !important;
        letter-spacing: .2px !important;
    }
}

/* ═══════════════════════════════════════
   FIX v3.7.186 — Menu dropdown zichtbaar op mobiel
   De responsive topnav-fix gebruikte overflow:hidden op het rechter blok,
   waardoor de absolute Menu-dropdown werd afgeknipt.
═══════════════════════════════════════ */
@media (max-width: 700px) {
    .cc-topnav,
    .cc-topnav__inner,
    .cc-topnav__rechts,
    .cc-topnav__user-wrap {
        overflow: visible !important;
    }

    .cc-topnav__dropdown {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        z-index: 2000 !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* v3.7.189 mobiel menu: dropdown weer klikbaar + menu-items consistente kleur */
@media (max-width: 700px) {
    body.cc-full-page .cc-topnav,
    body.cc-full-page .cc-topnav__inner,
    body.cc-full-page .cc-topnav__rechts,
    body.cc-full-page .cc-topnav__user-wrap {
        overflow: visible !important;
    }

    body.cc-full-page .cc-topnav__dropdown,
    body.cc-full-page #cc-user-dropdown {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(280px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 99999 !important;
    }

    body.cc-full-page .cc-topnav__dropdown.open,
    body.cc-full-page #cc-user-dropdown.open {
        display: block !important;
    }

    body.cc-full-page .cc-dropdown__item,
    body.cc-full-page .cc-dropdown__item:link,
    body.cc-full-page .cc-dropdown__item:visited,
    body.cc-full-page .cc-dropdown__item[href*="cc-checklist"],
    body.cc-full-page .cc-dropdown__item[href*="cc-checklist"]:link,
    body.cc-full-page .cc-dropdown__item[href*="cc-checklist"]:visited {
        color: var(--cc-tekst) !important;
        background: transparent !important;
    }

    body.cc-full-page .cc-dropdown__item:hover,
    body.cc-full-page .cc-dropdown__item:focus {
        color: var(--cc-tekst) !important;
        background: var(--cc-bg) !important;
    }

    :root.cc-dark body.cc-full-page .cc-dropdown__item,
    :root.cc-dark body.cc-full-page .cc-dropdown__item:link,
    :root.cc-dark body.cc-full-page .cc-dropdown__item:visited,
    :root.cc-dark body.cc-full-page .cc-dropdown__item[href*="cc-checklist"],
    :root.cc-dark body.cc-full-page .cc-dropdown__item[href*="cc-checklist"]:link,
    :root.cc-dark body.cc-full-page .cc-dropdown__item[href*="cc-checklist"]:visited {
        color: #f0ede8 !important;
        background: transparent !important;
    }
}


/* ═══════════════════════════════════════
   FIX v3.7.189 — Paklijst bewerken mobiel
   1. Vier statistiektegels blijven zichtbaar binnen schermbreedte.
   2. Checklist-items blijven goed aanklikbaar op touchscreens.
═══════════════════════════════════════ */
@media (max-width: 700px) {
    .cc-app--checklist .cc-stats-rij--checklist,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 8px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .cc-app--checklist .cc-stats-rij--checklist .cc-stat-card,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist .cc-stat-card {
        flex: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 12px 4px 11px !important;
        gap: 5px !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
    }

    .cc-app--checklist .cc-stats-rij--checklist .cc-stat-card__icon,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist .cc-stat-card__icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        border-radius: 9px !important;
    }

    .cc-app--checklist .cc-stats-rij--checklist .cc-stat-card__getal,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist .cc-stat-card__getal {
        font-size: 1.18rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .cc-app--checklist .cc-stats-rij--checklist .cc-stat-card__label,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist .cc-stat-card__label {
        max-width: 100% !important;
        font-size: .46rem !important;
        line-height: 1.05 !important;
        letter-spacing: .2px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }

    .cc-app--checklist-bewerken .cc-checklist-switch__input,
    .cc-app--checklist-bewerken .cc-checklist-item--edit,
    .cc-app--checklist-bewerken [data-cc-checklist-add-btn] {
        touch-action: manipulation !important;
    }
}

@media (max-width: 360px) {
    .cc-app--checklist .cc-stats-rij--checklist,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist {
        gap: 6px !important;
    }

    .cc-app--checklist .cc-stats-rij--checklist .cc-stat-card,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist .cc-stat-card {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .cc-app--checklist .cc-stats-rij--checklist .cc-stat-card__icon,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist .cc-stat-card__icon {
        width: 28px !important;
        height: 28px !important;
    }

    .cc-app--checklist .cc-stats-rij--checklist .cc-stat-card__getal,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist .cc-stat-card__getal {
        font-size: 1.05rem !important;
    }

    .cc-app--checklist .cc-stats-rij--checklist .cc-stat-card__label,
    .cc-app--checklist-bewerken .cc-stats-rij--checklist .cc-stat-card__label {
        font-size: .42rem !important;
    }
}


/* v3.7.190 / plugin v3.6.335 — Paklijst bewerken: toggle en eigen items verwijderen robuuster. */
.cc-app--checklist-bewerken .cc-checklist-item--edit{
    position:relative;
    background:var(--cc-wit) !important;
    border-color:var(--cc-border) !important;
    cursor:pointer;
}
.cc-app--checklist-bewerken .cc-checklist-item--edit.is-enabled{
    background:var(--cc-wit) !important;
    border-color:var(--cc-border) !important;
}
.cc-app--checklist-bewerken .cc-checklist-item--edit .cc-checklist-switch__input{
    position:absolute !important;
    opacity:0 !important;
    width:52px !important;
    height:32px !important;
    min-width:52px !important;
    min-height:32px !important;
    left:18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    inset:auto !important;
    z-index:2 !important;
    cursor:pointer !important;
}
.cc-app--checklist-bewerken .cc-checklist-item--edit .cc-checklist-switch__track{
    flex:0 0 52px;
    display:block;
    width:52px;
    height:32px;
    border-radius:999px;
    background:#d9ded7;
    position:relative;
    transition:background .18s ease, box-shadow .18s ease;
}
.cc-app--checklist-bewerken .cc-checklist-item--edit .cc-checklist-switch__track::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(15,23,42,.16);
    transition:transform .18s ease;
}
.cc-app--checklist-bewerken .cc-checklist-item--edit .cc-checklist-switch__input:checked + .cc-checklist-switch__track{
    background:var(--cc-groen);
}
.cc-app--checklist-bewerken .cc-checklist-item--edit .cc-checklist-switch__input:checked + .cc-checklist-switch__track::after{
    transform:translateX(20px);
}
.cc-app--checklist-bewerken .cc-checklist-item__sub{
    margin-left:auto;
    color:var(--cc-grijs);
    font-size:.78rem;
    font-weight:600;
    white-space:nowrap;
}
@media (max-width:520px){
    .cc-app--checklist-bewerken .cc-checklist-item__sub{display:none;}
    .cc-app--checklist-bewerken .cc-checklist-item--edit .cc-checklist-switch__input{left:14px !important;}
}

/* v3.7.205 / plugin v3.6.341 - responsive exportdialoog voor campinggegevens */
.cc-export-modal{position:fixed;inset:0;z-index:99999;display:none}.cc-export-modal.is-open{display:block}.cc-export-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(6px)}.cc-export-modal__panel{position:relative;width:min(1160px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;margin:16px auto;background:var(--cc-wit,#fff);border:1px solid var(--cc-border,#e5e7eb);border-radius:28px;box-shadow:0 28px 80px rgba(0,0,0,.28);padding:28px}.cc-export-modal__close{position:absolute;right:18px;top:18px;width:38px;height:38px;border:0;border-radius:999px;background:#111827;color:#fff;font-size:28px;line-height:1;cursor:pointer}.cc-export-modal__head{padding-right:48px;margin-bottom:22px}.cc-export-modal__head h2{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.2rem);margin:0 0 6px;color:var(--cc-tekst,#111827)}.cc-export-modal__head p{margin:0;color:var(--cc-grijs,#6b7280)}.cc-export-kicker{display:inline-flex !important;margin:0 0 8px !important;padding:5px 10px;border-radius:999px;background:#e8f6ee;color:var(--cc-groen,#2d6a4f) !important;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.cc-export-grid{display:grid;grid-template-columns:minmax(280px,370px) 1fr;gap:24px}.cc-export-card{background:var(--cc-wit,#fff);border:1px solid var(--cc-border,#e5e7eb);border-radius:22px;padding:20px;box-shadow:0 12px 30px rgba(15,23,42,.07)}.cc-export-card h3{margin:0 0 14px;font-size:1rem}.cc-export-option{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;border:1px solid var(--cc-border,#e5e7eb);border-radius:16px;padding:14px;margin-bottom:12px;cursor:pointer}.cc-export-option.is-active{border-color:var(--cc-groen,#2d6a4f);background:#f1fbf5}.cc-export-option input{position:absolute;opacity:0}.cc-export-option__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--cc-groen,#2d6a4f);color:#fff;font-size:.78rem;font-weight:900}.cc-export-option__icon--pdf{background:#ef4444}.cc-export-option strong{display:block;color:var(--cc-tekst,#111827)}.cc-export-option small{display:block;color:var(--cc-grijs,#6b7280);line-height:1.45}.cc-export-radio{display:flex;gap:10px;align-items:center;margin:11px 0;font-weight:700}.cc-export-select{display:none;gap:8px;max-height:230px;overflow:auto;margin-top:12px;padding:12px;border-radius:16px;background:#f8faf9;border:1px solid var(--cc-border,#e5e7eb)}.cc-export-camping{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:12px;background:#fff}.cc-export-camping span{font-weight:800}.cc-export-camping small{display:block;font-weight:500;color:var(--cc-grijs,#6b7280)}.cc-export-preview__top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.cc-export-count{display:inline-flex;padding:5px 10px;border-radius:999px;background:#e8f6ee;color:var(--cc-groen,#2d6a4f);font-weight:800;font-size:.78rem;white-space:nowrap}.cc-export-table-wrap{overflow:auto;border:1px solid var(--cc-border,#e5e7eb);border-radius:16px}.cc-export-table{width:100%;min-width:720px;border-collapse:collapse;font-size:.85rem}.cc-export-table th,.cc-export-table td{padding:12px;border-bottom:1px solid var(--cc-border,#e5e7eb);text-align:left;vertical-align:top}.cc-export-table th{background:#f7f4ef;font-weight:900}.cc-export-cards-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cc-export-mini-card{border:1px solid var(--cc-border,#e5e7eb);border-radius:16px;padding:12px;background:#fff}.cc-export-mini-card img,.cc-export-card-photo{width:100%;height:96px;border-radius:12px;object-fit:cover;background:#eef3ee;display:grid;place-items:center}.cc-export-mini-card h4{margin:10px 0 4px;font-size:.95rem}.cc-export-mini-card p{margin:0;color:var(--cc-grijs,#6b7280);font-size:.82rem}.cc-export-stars{color:#f59e0b !important;margin-top:6px !important}.cc-export-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}.cc-export-download{border:0;border-radius:12px;background:var(--cc-groen,#2d6a4f);color:#fff;font-weight:900;padding:13px 18px;cursor:pointer}.cc-export-empty{padding:22px;border-radius:16px;background:#f8faf9;color:var(--cc-grijs,#6b7280)}
@media (max-width:800px){.cc-export-modal__panel{width:100vw;max-height:100vh;margin:0;border-radius:0;padding:22px 16px 96px}.cc-export-grid{grid-template-columns:1fr}.cc-export-modal__head h2{font-size:2rem}.cc-export-card{padding:16px;border-radius:18px}.cc-export-option{grid-template-columns:48px 1fr;padding:12px}.cc-export-cards-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-export-actions{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr;background:linear-gradient(180deg,rgba(255,255,255,0),var(--cc-wit,#fff) 20%);padding-top:18px}.cc-export-download,.cc-export-actions .cc-btn-secondary{width:100%;justify-content:center;text-align:center}.cc-export-actions .cc-btn-secondary{order:2}.cc-export-download{order:1}.cc-export-preview__top{align-items:flex-start}.cc-export-table{font-size:.78rem}}
@media (max-width:420px){.cc-export-cards-preview{grid-template-columns:1fr}.cc-export-modal__close{right:12px;top:12px}.cc-export-modal__head{padding-right:40px}.cc-export-card--preview{padding-left:12px;padding-right:12px}}


/* v3.7.205 / plugin v3.6.353 - footer, contactformulier en disclaimer */
.cc-app-footer__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cc-app-footer__meta {
    flex: 0 0 auto;
}
.cc-app-footer__nav-link,
.cc-app-footer__pill {
    white-space: nowrap;
}
.cc-app-footer__pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(82,183,136,.16);
    color: var(--cc-groen, #2d6a4f);
    font-size: .82rem;
    font-weight: 800;
}
.cc-legal-app {
    min-height: 100%;
    background: var(--cc-bg, #f6f3ed);
}
.cc-legal-wrap {
    width: min(920px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 48px;
}
.cc-legal-hero,
.cc-legal-card,
.cc-contact-form,
.cc-form-message {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(45,106,79,.12);
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(15,23,42,.07);
}
.cc-legal-hero {
    padding: clamp(24px, 4vw, 40px);
    margin-bottom: 18px;
}
.cc-legal-eyebrow {
    margin: 0 0 8px;
    color: var(--cc-groen, #2d6a4f);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cc-legal-hero h1 {
    margin: 0 0 10px;
    color: var(--cc-tekst, #1f2937);
    font-family: var(--cc-font-hoofd, inherit);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
}
.cc-legal-hero p, .cc-legal-card p {
    margin: 0;
    color: var(--cc-tekst-2, #4b5563);
    line-height: 1.7;
}
.cc-legal-card {
    padding: 24px;
    margin: 14px 0;
}
.cc-legal-card h2 {
    margin: 0 0 10px;
    color: var(--cc-tekst, #1f2937);
    font-size: 1.18rem;
}
.cc-legal-card--company {
    background: rgba(82,183,136,.10);
}
.cc-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px, 4vw, 30px);
}
.cc-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.cc-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--cc-tekst, #1f2937);
    font-weight: 800;
}
.cc-contact-form input,
.cc-contact-form textarea {
    width: 100%;
    border: 1px solid rgba(45,106,79,.16);
    border-radius: 14px;
    background: #fff;
    color: var(--cc-tekst, #1f2937);
    padding: 13px 14px;
    font: inherit;
}
.cc-contact-form textarea {
    min-height: 180px;
    resize: vertical;
}
.cc-contact-submit {
    align-self: flex-start;
    border: 0;
    border-radius: 14px;
    background: var(--cc-groen, #2d6a4f);
    color: #fff;
    padding: 13px 18px;
    font-weight: 900;
    cursor: pointer;
}
.cc-contact-form__hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.cc-form-message {
    padding: 15px 18px;
    margin: 0 0 16px;
    font-weight: 800;
}
.cc-form-message--success {
    color: #166534;
    background: #ecfdf3;
}
.cc-form-message--error {
    color: #991b1b;
    background: #fef2f2;
}
.cc-form-message p {
    margin: 0;
}
@media (max-width: 760px) {
    .cc-app-footer__inner {
        gap: 12px;
    }
    .cc-app-footer__nav {
        order: 2;
        width: 100%;
    }
    .cc-app-footer__meta {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .cc-contact-grid {
        grid-template-columns: 1fr;
    }
    .cc-contact-submit {
        width: 100%;
    }
}


/* v3.6.364 / v3.7.205 - Freemium archief: boven gratis niveau wazig, data blijft bewaard */
.cc-kaart--freemium-locked{position:relative;overflow:hidden;cursor:default;isolation:isolate;}
.cc-kaart--freemium-locked .cc-kaart__foto,
.cc-kaart--freemium-locked .cc-kaart__foto-placeholder,
.cc-kaart--freemium-locked .cc-kaart__preview,
.cc-kaart--freemium-locked .cc-kaart__body{filter:blur(5px);opacity:.72;}
.cc-kaart--freemium-locked .cc-kaart__ster-badge,
.cc-kaart--freemium-locked .cc-kaart__aanbevolen-badge{filter:blur(3px);opacity:.45;}
.cc-freemium-lock-badge{position:absolute;right:12px;top:12px;z-index:5;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.92);color:#1f3f2d;box-shadow:0 10px 24px rgba(15,23,42,.22);font-size:1.05rem;}
.cc-freemium-lock-overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px;text-align:center;background:linear-gradient(180deg,rgba(17,24,39,.22),rgba(17,24,39,.52));color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);pointer-events:none;}
.cc-freemium-lock-overlay strong{font-size:1rem;font-weight:900;letter-spacing:.01em;}
.cc-freemium-lock-overlay span{max-width:220px;font-size:.82rem;line-height:1.35;opacity:.95;}
.cc-popup__gallery-btn{position:relative;overflow:hidden;}
.cc-popup__gallery-btn--locked{cursor:default;}
.cc-popup__gallery-btn--locked img{filter:blur(6px) brightness(.78);transform:scale(1.04);}
.cc-freemium-photo-lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,23,42,.18);color:#fff;font-size:1.3rem;text-shadow:0 2px 10px rgba(0,0,0,.45);}
@media(max-width:700px){.cc-freemium-lock-overlay{padding:14px}.cc-freemium-lock-overlay strong{font-size:.92rem}.cc-freemium-lock-overlay span{font-size:.76rem}.cc-freemium-lock-badge{width:34px;height:34px;right:10px;top:10px}}

/* v3.7.205 / plugin v3.6.373 - mobiele landingsheader herstellen */
:root {
    --land-groen-diep:  #1c3a28;
    --land-groen-mid:   #2d5a3d;
    --land-amber:       #d97c3a;
    --land-crème:       #f5f0e6;
    --land-crème-donk:  #ede6d8;
    --land-tekst:       #1a1a12;
    --land-tekst-2:     #5a5245;
    --land-serif:       'Lora', Georgia, serif;
    --land-sans:        'DM Sans', system-ui, sans-serif;
}

.cc-land-header {
    overflow: visible;
}

.cc-land-header .cc-taalwisselaar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    z-index: 120;
}

.cc-land-header .cc-taalwisselaar__huidig,
.cc-land-header .cc-taalwisselaar__huidig:link,
.cc-land-header .cc-taalwisselaar__huidig:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 38px !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 0 11px !important;
    border: 1px solid rgba(28,58,40,.08) !important;
    border-radius: 10px !important;
    background: var(--land-crème-donk, #ede6d8) !important;
    color: var(--land-groen-diep, #1c3a28) !important;
    font-family: var(--land-sans, system-ui, sans-serif) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.cc-land-header .cc-taalwisselaar__huidig:hover,
.cc-land-header .cc-taalwisselaar__huidig:focus {
    background: #e0d8cc !important;
    color: var(--land-groen-diep, #1c3a28) !important;
    box-shadow: none !important;
    transform: none !important;
}

.cc-land-header .cc-taalwisselaar__menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 176px !important;
    padding: 6px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(28,58,40,.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
    overflow: hidden !important;
    z-index: 99999 !important;
}

.cc-land-header .cc-taalwisselaar__menu.open {
    display: flex !important;
    flex-direction: column !important;
}

.cc-land-header .cc-taalwisselaar__menu .cc-taalwisselaar__optie,
.cc-land-header .cc-taalwisselaar__menu .cc-taalwisselaar__optie:link,
.cc-land-header .cc-taalwisselaar__menu .cc-taalwisselaar__optie:visited {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--land-tekst, #1a1a12) !important;
    font-family: var(--land-sans, system-ui, sans-serif) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.cc-land-header .cc-taalwisselaar__menu .cc-taalwisselaar__optie:hover {
    background: #f5f0e6 !important;
    color: var(--land-groen-diep, #1c3a28) !important;
}

.cc-land-header .cc-taalwisselaar__menu .cc-taalwisselaar__optie.actief {
    background: #e8f5ee !important;
    color: #2d6a4f !important;
    font-weight: 800 !important;
}

.cc-land-header .cc-taalwisselaar__vlag svg {
    display: block;
    width: 20px;
    height: 14px;
}

@media (max-width: 700px) {
    .cc-land-header {
        min-height: 64px;
        padding: 12px 16px !important;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .cc-land-logo {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100vw - 106px);
        gap: 8px;
        font-size: 1.08rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cc-land-logo svg {
        flex: 0 0 20px;
    }

    .cc-land-nav {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 0;
        min-width: 0;
    }

    .cc-land-nav__link,
    .cc-land-nav__cta {
        display: none !important;
    }

    .cc-land-header .cc-taalwisselaar__huidig {
        height: 38px !important;
        padding: 0 10px !important;
        font-size: .8rem !important;
    }

    .cc-land-header .cc-taalwisselaar__menu {
        right: 0 !important;
        left: auto !important;
        min-width: 178px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* v3.7.206 - FAQ accordeontegels behouden dezelfde breedte, ook wanneer een vraag openstaat */
body.cc-full-page .cc-faq-wrap {
    width: 100%;
    max-width: 780px;
    box-sizing: border-box;
}
body.cc-full-page .cc-faq-sectie,
body.cc-full-page .cc-faq-lijst,
body.cc-full-page .cc-faq-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
body.cc-full-page .cc-faq-lijst {
    align-items: stretch;
}
body.cc-full-page .cc-faq-lijst > .cc-faq-item {
    display: block;
    flex: 0 0 auto;
}
body.cc-full-page .cc-faq-item[open] {
    width: 100%;
}
body.cc-full-page .cc-faq-item__vraag,
body.cc-full-page .cc-faq-item__antwoord {
    width: 100%;
    box-sizing: border-box;
}
body.cc-full-page .cc-faq-item__vraag > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}



/* ══════════════════════════════════════════════════════════
   v3.7.208 - Landenfilter met echte SVG-vlaggetjes
   Zorgt dat desktopbrowsers/Windows niet langer NL/BE/DE tonen
   waar een vlaggetje hoort te staan.
══════════════════════════════════════════════════════════ */
.cc-zoekbalk .cc-land-dropdown--home {
    width: 190px !important;
    flex: 0 0 190px !important;
    position: relative !important;
    z-index: 30 !important;
}
.cc-zoekbalk .cc-land-dropdown--home + .cc-zoekbalk__select--land-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
.cc-zoekbalk .cc-land-dropdown--home .cc-land-dropdown__knop,
.cc-land-dropdown .cc-land-dropdown__knop {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}
.cc-zoekbalk .cc-land-dropdown--home .cc-land-dropdown__knop {
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 16px 0 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,1) 100%) !important;
    border: 1px solid var(--cc-border, #ded7cc) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .04) !important;
    font-family: var(--cc-font-body, inherit) !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
    color: var(--cc-tekst, #213041) !important;
    cursor: pointer !important;
    outline: none !important;
    white-space: nowrap !important;
}
.cc-zoekbalk .cc-land-dropdown--home .cc-land-dropdown__knop:hover,
.cc-zoekbalk .cc-land-dropdown--home .cc-land-dropdown__knop:focus-visible {
    border-color: rgba(82,183,136,.55) !important;
    box-shadow: 0 0 0 4px rgba(82,183,136,.14), 0 10px 28px rgba(17,24,39,.06) !important;
}
.cc-land-dropdown .cc-land-dropdown__label,
.cc-land-dropdown .cc-land-dropdown__item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.cc-land-dropdown .cc-land-dropdown__label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cc-land-dropdown .cc-land-dropdown__item-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cc-land-dropdown .cc-land-vlag-svg {
    flex: 0 0 auto !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 14px !important;
}
.cc-land-dropdown .cc-land-vlag-svg svg {
    display: block !important;
    width: 20px !important;
    max-width: 20px !important;
    height: 14px !important;
    border-radius: 2px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) !important;
}
.cc-zoekbalk .cc-land-dropdown--home .cc-land-dropdown__lijst {
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 6px) !important;
    width: 100% !important;
    min-width: 190px !important;
    max-height: 340px !important;
    border-radius: 14px !important;
    z-index: 999 !important;
}
.cc-land-dropdown .cc-land-dropdown__item {
    padding: 9px 14px !important;
    line-height: 1.25 !important;
}
@media (max-width: 700px) {
    .cc-zoekbalk .cc-land-dropdown--home {
        display: none !important;
    }
    .cc-zoekbalk .cc-land-dropdown--home + .cc-zoekbalk__select--land-native {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
}

/* v3.7.209 - Privacyverklaring footerlink en juridische lijstweergave */
.cc-privacy-wrap .cc-legal-hero p + p,
.cc-privacy-wrap .cc-legal-card p + p,
.cc-privacy-wrap .cc-legal-list + p {
    margin-top: 10px;
}
.cc-legal-list {
    margin: 12px 0 0 1.1rem;
    padding-left: 1rem;
    color: var(--cc-tekst-2, #4b5563);
    line-height: 1.7;
}
.cc-legal-list li + li {
    margin-top: 6px;
}
.cc-legal-link {
    color: var(--cc-groen, #2d6a4f);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* v3.6.415 / v3.7.210 - profiel vereenvoudigd, Freemium/Premium-tabel en centrale modalcomponent */
.cc-profiel-section-head{margin:8px 0 16px;padding:0 2px}.cc-profiel-section-head span{display:inline-flex;margin-bottom:7px;padding:5px 10px;border-radius:999px;background:#e8f5ee;color:var(--cc-groen,#2d6a4f);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.cc-profiel-section-head h2{margin:0 0 6px;color:var(--cc-tekst,#17201b);font-family:Georgia,serif;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.12}.cc-profiel-section-head p{max-width:760px;margin:0;color:var(--cc-tekst-2,#667085);line-height:1.55}.cc-profiel-actions--simplified{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 24px}.cc-profiel-action-card{appearance:none;width:100%;border:1px solid var(--cc-border,#e5e1d8);border-radius:20px;background:var(--cc-wit,#fff);box-shadow:0 12px 28px rgba(31,45,34,.07);padding:18px;text-align:left;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;color:var(--cc-tekst,#17201b);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.cc-profiel-action-card:hover,.cc-profiel-action-card:focus-visible,.cc-profiel-action-card.is-active{transform:translateY(-2px);border-color:#bdd8c8;box-shadow:0 18px 38px rgba(31,45,34,.11);outline:none}.cc-profiel-action-card__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:#eef8f1;color:var(--cc-groen,#2d6a4f);font-size:1.22rem}.cc-profiel-action-card__body{display:grid;gap:4px;min-width:0}.cc-profiel-action-card__body strong{font-size:1rem;line-height:1.25;color:var(--cc-tekst,#17201b)}.cc-profiel-action-card__body small{font-size:.82rem;line-height:1.45;color:var(--cc-tekst-2,#667085)}.cc-profiel-action-card__arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#f6f4ef;color:var(--cc-groen,#2d6a4f);font-weight:900}.cc-profiel-action-card--primary{border-color:#f0d6a8;background:linear-gradient(135deg,#fff8ed 0%,#ffffff 72%)}.cc-profiel-action-card--primary .cc-profiel-action-card__icon{background:#fff3df;color:#a25700}.cc-profiel-action-card--danger{border-color:#fee2e2;background:linear-gradient(135deg,#fffafa 0%,#ffffff 72%)}.cc-profiel-action-card--danger .cc-profiel-action-card__icon{background:#fef2f2;color:#b42318}.cc-profiel-detail-card{background:var(--cc-wit,#fff);border:1px solid var(--cc-border,#e5e1d8);border-radius:24px;padding:24px;box-shadow:0 14px 34px rgba(31,45,34,.07);margin-bottom:18px}.cc-profiel-detail-card--danger{border-color:#fee2e2;background:linear-gradient(135deg,#fffafa 0%,#fff 68%)}.cc-profiel-detail-card__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}.cc-profiel-detail-card__icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:16px;background:#eef8f1;color:var(--cc-groen,#2d6a4f);font-size:1.18rem}.cc-profiel-detail-card--danger .cc-profiel-detail-card__icon{background:#fef2f2;color:#b42318}.cc-profiel-detail-card__head h2{margin:0 0 5px;color:var(--cc-tekst,#17201b);font-size:1.35rem;line-height:1.18}.cc-profiel-detail-card__head p{margin:0;color:var(--cc-tekst-2,#667085);line-height:1.55}.cc-profiel-data-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.cc-profiel-data-list div,.cc-profiel-info-tile,.cc-profiel-warning-list div{padding:14px 16px;border:1px solid var(--cc-border,#e5e1d8);border-radius:16px;background:#fbfaf7}.cc-profiel-data-list span,.cc-profiel-info-tile span,.cc-profiel-warning-list span{display:block;color:var(--cc-tekst-2,#667085);font-size:.86rem;line-height:1.45}.cc-profiel-data-list strong,.cc-profiel-info-tile strong,.cc-profiel-warning-list strong{display:block;color:var(--cc-tekst,#17201b);font-size:.98rem;line-height:1.35;margin-bottom:3px}.cc-profiel-info-grid,.cc-profiel-warning-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.cc-profiel-warning-list div{border-color:#fee2e2;background:#fffafa}.cc-profiel-detail-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}.cc-profiel-detail-actions button.cc-btn-secondary{cursor:pointer}.cc-modal-core{position:fixed!important;inset:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .2s ease,visibility .2s ease!important}.cc-modal-core.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important}.cc-modal-core__backdrop{position:absolute!important;inset:0!important;border:0!important;margin:0!important;padding:0!important;background:rgba(15,23,42,.55)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;cursor:pointer!important}.cc-modal-core__panel{position:relative!important;z-index:1!important;width:min(640px,calc(100vw - 32px))!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;background:var(--cc-wit,#fff)!important;border:1px solid rgba(229,225,216,.96)!important;border-radius:28px!important;box-shadow:0 28px 80px rgba(15,23,42,.32)!important;padding:28px!important;transform:translateY(14px) scale(.98)!important;transition:transform .2s ease!important}.cc-modal-core.is-open .cc-modal-core__panel{transform:translateY(0) scale(1)!important}.cc-modal-core--wide .cc-modal-core__panel{width:min(1160px,calc(100vw - 32px))!important}.cc-modal-core__panel--narrow{width:min(520px,calc(100vw - 32px))!important}.cc-modal-core__close{appearance:none!important;position:absolute!important;right:18px!important;top:18px!important;display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border:0!important;border-radius:999px!important;background:#111827!important;color:#fff!important;font-size:28px!important;line-height:1!important;cursor:pointer!important;box-shadow:0 10px 24px rgba(15,23,42,.18)!important}.cc-modal-core__close:hover,.cc-modal-core__close:focus-visible{background:#000!important;outline:none!important;transform:scale(1.04)!important}.cc-modal-core__kicker{display:inline-flex!important;margin:0 0 8px!important;padding:5px 10px!important;border-radius:999px!important;background:#e8f5ee!important;color:var(--cc-groen,#2d6a4f)!important;font-size:.72rem!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.08em!important}.cc-modal-core__panel h2{margin:0 44px 10px 0;color:var(--cc-tekst,#17201b);font-family:Georgia,serif;font-size:clamp(1.45rem,3vw,2rem);line-height:1.14}.cc-modal-core__panel p{color:var(--cc-tekst-2,#667085);line-height:1.58}.cc-modal-core__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}.cc-modal-core-open{overflow:hidden!important}.cc-export-modal.cc-modal-core{display:flex!important}.cc-export-modal.cc-modal-core .cc-export-modal__panel{margin:0!important}.cc-export-modal.cc-modal-core .cc-export-modal__backdrop{position:absolute!important}.cc-premium-compare{margin:18px 0;padding:22px;border:1px solid var(--cc-border,#e5e1d8);border-radius:24px;background:var(--cc-wit,#fff);box-shadow:0 14px 34px rgba(31,45,34,.07)}.cc-premium-compare--landing{margin-top:20px;background:rgba(255,255,255,.92)}.cc-premium-compare__head{margin-bottom:16px}.cc-premium-compare__head span{display:inline-flex;margin-bottom:8px;padding:5px 10px;border-radius:999px;background:#fff8ed;color:#a25700;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.cc-premium-compare__head h2{margin:0 0 6px;color:var(--cc-tekst,#17201b);font-family:Georgia,serif;font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.12}.cc-premium-compare__head p{margin:0;color:var(--cc-tekst-2,#667085);line-height:1.55}.cc-premium-compare__table-wrap{overflow:auto;border:1px solid var(--cc-border,#e5e1d8);border-radius:18px;background:#fff}.cc-premium-compare__table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:.92rem}.cc-premium-compare__table th,.cc-premium-compare__table td{padding:13px 16px;border-bottom:1px solid #eee8de;text-align:left;vertical-align:middle}.cc-premium-compare__table th{background:#f8f4ec;color:#173020;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em}.cc-premium-compare__table tr:last-child td{border-bottom:0}.cc-premium-compare__table td:first-child{font-weight:850;color:var(--cc-tekst,#17201b)}.cc-premium-compare__premium{background:#f4fbf6;color:#1f5a3d;font-weight:900}.cc-premium-compare__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.cc-premium-compare__btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:999px;font-weight:900;text-decoration:none}.cc-premium-compare__btn--free{background:#fff;border:1.5px solid var(--cc-border,#e5e1d8);color:var(--cc-tekst,#17201b)!important}.cc-premium-compare__btn--premium{background:var(--cc-groen,#2d6a4f);color:#fff!important;box-shadow:0 12px 24px rgba(45,106,79,.22)}.cc-premium-compare__btn--premium:hover{background:#1f4d38}@media(max-width:960px){.cc-profiel-actions--simplified{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-profiel-info-grid,.cc-profiel-warning-list{grid-template-columns:1fr}}@media(max-width:640px){.cc-profiel-section-head{margin-top:4px}.cc-profiel-actions--simplified{grid-template-columns:1fr;gap:10px}.cc-profiel-action-card{grid-template-columns:42px minmax(0,1fr) 24px;padding:15px;border-radius:18px}.cc-profiel-action-card__icon{width:42px;height:42px;border-radius:14px}.cc-profiel-data-list{grid-template-columns:1fr}.cc-profiel-detail-card{padding:18px;border-radius:20px}.cc-profiel-detail-card__head{gap:12px}.cc-profiel-detail-actions{display:grid;grid-template-columns:1fr}.cc-profiel-detail-actions a,.cc-profiel-detail-actions button,.cc-modal-core__actions a,.cc-modal-core__actions button{width:100%;justify-content:center;text-align:center}.cc-modal-core{padding:12px!important;align-items:flex-end!important}.cc-modal-core__panel{width:100%!important;max-height:calc(100dvh - 24px)!important;border-radius:24px 24px 18px 18px!important;padding:24px 18px!important}.cc-modal-core--wide .cc-modal-core__panel{width:100%!important}.cc-premium-compare{padding:16px;border-radius:20px}.cc-premium-compare__table{min-width:560px;font-size:.84rem}.cc-premium-compare__actions{display:grid;grid-template-columns:1fr}.cc-premium-compare__btn{width:100%}}
:root.cc-dark .cc-profiel-action-card,:root.cc-dark .cc-profiel-detail-card,:root.cc-dark .cc-premium-compare,:root.cc-dark .cc-modal-core__panel{background:var(--cc-card,#1e2633)!important;border-color:var(--cc-border,#334155)!important;color:var(--cc-tekst,#f3f4f6)!important}:root.cc-dark .cc-profiel-section-head p,:root.cc-dark .cc-profiel-action-card__body small,:root.cc-dark .cc-profiel-detail-card__head p,:root.cc-dark .cc-modal-core__panel p,:root.cc-dark .cc-premium-compare__head p{color:#cbd5e1!important}:root.cc-dark .cc-profiel-data-list div,:root.cc-dark .cc-profiel-info-tile,:root.cc-dark .cc-profiel-warning-list div,:root.cc-dark .cc-premium-compare__table-wrap{background:#151d29!important;border-color:#334155!important}:root.cc-dark .cc-premium-compare__table th{background:#202c3b;color:#f3f4f6}:root.cc-dark .cc-premium-compare__table td{border-color:#334155}:root.cc-dark .cc-premium-compare__premium{background:#173323;color:#9ee6bd}

/* ═══════════════════════════════════════════════════════════════
   v3.7.211 - mobiele oriëntatie-fix, harde schermranden &
   volledig leesbare voorzieningen-labels
   ───────────────────────────────────────────────────────────────
   1) Draai-bug (landscape -> portrait liep buiten beeld):
      iOS Safari blaast tekst op bij orientatiewissel en houdt die
      grootte vast. text-size-adjust zet dat hard op 100%.
   2) Harde schermranden: bounds + safe-area zodat content nooit
      onder de notch of buiten het scherm valt.
   3) Voorzieningen-labels werden afgekapt ("aan het w...").
      Nu wrappen ze volledig, op desktop én mobiel (werkt ook bij
      aanraakschermen, waar een hover-tooltip niets doet).
═══════════════════════════════════════════════════════════════ */

/* 1 + 2: oriëntatie & harde schermranden */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
.cc-app {
    max-width: 100%;
    overflow-x: hidden;
    /* harde schermrand: respecteert notch / afgeronde hoeken */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
/* media blijft altijd binnen de rand */
.cc-app img,
.cc-app video,
.cc-app canvas,
.cc-app svg,
.cc-app iframe {
    max-width: 100%;
}

/* 3: voorzieningen-labels volledig tonen i.p.v. afkappen.
   Hogere specificiteit dan de plugin-regel (.cc-toggle-item > span:first-child),
   zodat dit wint ongeacht de laadvolgorde. */
.cc-app .cc-toggle-item > span:first-child {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}


/* v3.7.222: darkmode-knop krijgt een CSS fallback-icoon.
   Sommige browsers/theme-combinaties tonen de inline SVG niet; daarom renderen
   we de maan/zon direct via ::before en forceren we de knopmaat. */
#cc-darkmode-btn {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
}
#cc-darkmode-btn .cc-darkmode-icon {
    display: none !important;
}
#cc-darkmode-btn::before {
    content: "\263E";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #2d6a4f !important;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}
:root.cc-dark #cc-darkmode-btn::before {
    content: "\2600";
    color: #ffd66b !important;
    font-size: 18px;
}

/* v3.6.498 / v3.7.226 - Reisplanner + historie uit oude geschiedenis + afsluiten verwijderen */
.cc-trip-plannen__titel{display:flex;align-items:center;gap:.5rem;margin:22px 0 14px;color:var(--cc-groen,#2d6a4f)}
.cc-trip-plannen__titel::after{content:'nieuwste bovenaan';font:700 .68rem/1 var(--cc-font-body,Inter,system-ui,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:#2f855a;background:#e8f5ee;border:1px solid rgba(47,133,90,.16);border-radius:999px;padding:6px 9px}
.cc-trip-plannen__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.cc-trip-plan-card.cc-trip-tegel{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:100%;cursor:pointer;border-radius:18px;background:#fff;border:1px solid rgba(45,106,79,.16);box-shadow:0 10px 28px rgba(15,23,42,.07);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cc-trip-plan-card.cc-trip-tegel:hover,.cc-trip-plan-card.cc-trip-tegel:focus-visible{transform:translateY(-2px);box-shadow:0 16px 38px rgba(15,23,42,.12);border-color:rgba(45,106,79,.35);outline:none}
.cc-trip-tegel__foto{position:relative;min-height:112px;background:linear-gradient(135deg,#dcefe4,#f2eadc);background-size:cover;background-position:center;display:flex;justify-content:flex-end;align-items:flex-start;padding:10px}
.cc-trip-tegel__foto::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.20));pointer-events:none}
.cc-trip-tegel__badge{position:relative;z-index:1;display:inline-flex;align-items:center;border-radius:999px;padding:6px 9px;font-size:.72rem;font-weight:900;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.cc-trip-tegel__badge--gepland,.cc-trip-tegel__badge--actief{background:#2F855A}.cc-trip-tegel__badge--afgesloten{background:#B08A4A}
.cc-trip-tegel__body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:10px;flex:1}
.cc-trip-tegel__kop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.cc-trip-tegel__kop h3{margin:0;color:#10251a;font-size:1.03rem;line-height:1.2}.cc-trip-tegel__kop p{margin:5px 0 0!important;font-size:.78rem;color:#6b7280}.cc-trip-tegel__chevron{width:26px;height:26px;border-radius:50%;background:#f2f7f3;color:#2d6a4f;display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;line-height:1;flex:0 0 auto}.cc-trip-tegel__route{margin:0!important;color:#374151!important;font-size:.82rem!important;line-height:1.45;min-height:2.3em}.cc-trip-tegel__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.cc-trip-tegel__meta span{display:inline-flex;align-items:center;gap:5px;background:#f7f5f0;border:1px solid var(--cc-border,#e5e1d8);border-radius:999px;padding:5px 8px;color:#4b5563;font-size:.76rem;font-weight:700}.cc-trip-tegel__paklijst{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--cc-border,#e5e1d8);padding-top:10px}.cc-trip-tegel__paklijst .cc-trip-plan-card__link{margin:0;color:#2F855A;background:#ecfdf3;border:1px solid rgba(47,133,90,.15);border-radius:8px;padding:5px 8px;font-size:.76rem}.cc-trip-tegel__paklijst small{color:#6b7280;font-size:.7rem;line-height:1.25;text-align:right}.cc-trip-tegel .cc-fuelmini{margin-top:0;padding-top:10px}.cc-trip-tegel .cc-fuelmini__acties{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cc-trip-tegel .cc-fuelmini__open,.cc-trip-tegel .cc-fuelmini__add{width:100%;margin:0;padding:8px 10px;font-size:.78rem;border-radius:10px}.cc-trip-autopack{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(47,133,90,.22);border-radius:12px;background:#eefaf3;color:#174b31}.cc-trip-autopack strong{font-size:.88rem}.cc-trip-autopack span{font-size:.8rem;line-height:1.45;color:#2f6046}.cc-vr-rij--actief{border-left:5px solid #2F855A}.cc-vr-rij--geweest{border-left:5px solid #B08A4A}.cc-vr-rij--actief .cc-vr-naam::after{content:'Nu / nog te gaan';display:inline-flex;margin-left:8px;vertical-align:middle;border-radius:999px;background:rgba(47,133,90,.10);color:#2F855A;padding:3px 7px;font-size:.66rem;font-weight:900}.cc-vr-rij--geweest .cc-vr-naam::after{content:'Al geweest';display:inline-flex;margin-left:8px;vertical-align:middle;border-radius:999px;background:rgba(176,138,74,.14);color:#B08A4A;padding:3px 7px;font-size:.66rem;font-weight:900}
:root.cc-dark .cc-trip-plannen__titel::after{background:rgba(104,211,145,.12);border-color:rgba(104,211,145,.30);color:#68D391}:root.cc-dark .cc-trip-plan-card.cc-trip-tegel{background:#1e2633;border-color:rgba(255,255,255,.10);box-shadow:0 14px 32px rgba(0,0,0,.28)}:root.cc-dark .cc-trip-tegel__foto{background:linear-gradient(135deg,#143323,#4a3b1f)}:root.cc-dark .cc-trip-tegel__badge--gepland,:root.cc-dark .cc-trip-tegel__badge--actief{background:#68D391;color:#10251a}:root.cc-dark .cc-trip-tegel__badge--afgesloten{background:#D6B36A;color:#1f1606}:root.cc-dark .cc-trip-tegel__kop h3{color:#f8fafc}:root.cc-dark .cc-trip-tegel__kop p,:root.cc-dark .cc-trip-tegel__paklijst small{color:#cbd5e1}:root.cc-dark .cc-trip-tegel__route{color:#e5e7eb!important}:root.cc-dark .cc-trip-tegel__chevron,:root.cc-dark .cc-trip-tegel__meta span{background:#141a22;border-color:rgba(255,255,255,.12);color:#d1d5db}:root.cc-dark .cc-trip-tegel__paklijst{border-color:rgba(255,255,255,.10)}:root.cc-dark .cc-trip-tegel__paklijst .cc-trip-plan-card__link{background:rgba(104,211,145,.12);border-color:rgba(104,211,145,.30);color:#68D391}:root.cc-dark .cc-trip-autopack{background:rgba(104,211,145,.10);border-color:rgba(104,211,145,.28);color:#dbfbe7}:root.cc-dark .cc-trip-autopack span{color:#b7edc9}:root.cc-dark .cc-vr-rij--actief{border-left-color:#68D391}:root.cc-dark .cc-vr-rij--geweest{border-left-color:#D6B36A}:root.cc-dark .cc-vr-rij--actief .cc-vr-naam::after{background:rgba(104,211,145,.14);color:#68D391}:root.cc-dark .cc-vr-rij--geweest .cc-vr-naam::after{background:rgba(214,179,106,.16);color:#D6B36A}
@media(max-width:980px){.cc-trip-plannen__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.cc-trip-plannen__grid{grid-template-columns:1fr}.cc-trip-tegel__foto{min-height:124px}.cc-trip-tegel__paklijst{align-items:flex-start;flex-direction:column}.cc-trip-tegel__paklijst small{text-align:left}.cc-trip-tegel .cc-fuelmini__acties{grid-template-columns:1fr}.cc-vr-rij--actief .cc-vr-naam::after,.cc-vr-rij--geweest .cc-vr-naam::after{display:table;margin:5px 0 0}}


.cc-trip-delete-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(180,35,24,.22);background:#fff1f0;color:#b42318;border-radius:10px;padding:8px 10px;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;text-decoration:none}.cc-trip-delete-btn:hover{background:#ffe4e1;border-color:rgba(180,35,24,.38)}.cc-trip-delete-btn:disabled{opacity:.65;cursor:wait}.cc-trip-tegel__paklijst--history .cc-trip-plan-card__link{background:#f8f1df!important;border-color:rgba(176,138,74,.22)!important;color:#8a6428!important}.cc-tripdetail__delete{margin-top:16px;padding-top:14px;border-top:1px solid var(--cc-border,#e5e1d8)}:root.cc-dark .cc-trip-delete-btn{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.28);color:#fca5a5}:root.cc-dark .cc-trip-delete-btn:hover{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.42)}:root.cc-dark .cc-trip-tegel__paklijst--history .cc-trip-plan-card__link{background:rgba(214,179,106,.14)!important;border-color:rgba(214,179,106,.30)!important;color:#D6B36A!important}:root.cc-dark .cc-tripdetail__delete{border-color:rgba(255,255,255,.10)}


/* v3.6.501 / v3.7.228 - compactere reisplanner-tijdlijn */
.cc-tijdlijn-sectie .cc-vr-rij--compact {
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    align-items: center;
    flex-wrap: nowrap;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-link {
    gap: 10px;
    min-width: 0;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-foto,
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-foto--leeg {
    width: 58px;
    height: 44px;
    border-radius: 9px;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-info {
    gap: 2px;
    min-width: 0;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-naam {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    font-size: .98rem;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-locatie,
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-datum {
    font-size: .76rem;
    line-height: 1.25;
    gap: 5px;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-agenda,
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-badge {
    display: none !important;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-route-toggle-wrap {
    margin-left: 0;
    align-self: center;
    flex: 0 0 auto;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-route-toggle {
    min-height: 32px;
    padding: 0 10px;
    gap: 6px;
    border-radius: 10px;
    font-size: .76rem;
    box-shadow: none;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-route-toggle__icon {
    width: 16px;
    height: 16px;
}
.cc-tijdlijn-sectie .cc-tijdlijn-brandstof .cc-brandstof-rij {
    padding: 8px 10px;
    border-radius: 12px;
    gap: 10px;
    border-left: 4px solid #B08A4A;
    box-shadow: 0 4px 14px rgba(17,24,39,.04);
}
.cc-tijdlijn-sectie .cc-tijdlijn-brandstof .cc-brandstof-icoon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    align-self: center;
}
.cc-tijdlijn-sectie .cc-tijdlijn-brandstof .cc-brandstof-titel {
    font-size: .9rem;
    line-height: 1.2;
}
.cc-tijdlijn-sectie .cc-tijdlijn-brandstof .cc-brandstof-meta {
    gap: 5px;
}
.cc-tijdlijn-sectie .cc-tijdlijn-brandstof .cc-brandstof-pill {
    padding: 3px 7px;
    font-size: .72rem;
}
:root.cc-dark .cc-tijdlijn-sectie .cc-tijdlijn-brandstof .cc-brandstof-rij {
    border-left-color: #D6B36A;
}
@media (max-width: 700px) {
    .cc-tijdlijn-sectie .cc-vr-rij--compact {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-route-toggle-wrap {
        width: 100%;
    }
    .cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-route-toggle {
        width: 100%;
        justify-content: center;
    }
}


/* v3.6.501 / v3.7.228 - compactere campingregels in reispopup + route onder agenda */
.cc-vr-side-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}
.cc-vr-side-actions .cc-vr-agenda {
    margin-left: 0;
    padding-left: 0;
    min-width: 0;
    width: auto;
    align-self: flex-end;
}
.cc-vr-side-actions .cc-vr-route-toggle-wrap {
    margin-left: 0;
    align-self: flex-end;
}
.cc-vr-side-actions .cc-vr-route-toggle {
    justify-content: center;
}
.cc-tripdetail__campings {
    gap: 8px;
}
.cc-tripdetail__campings .cc-vr-rij {
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    align-items: center;
}
.cc-tripdetail__campings .cc-vr-link {
    gap: 12px;
    min-width: 0;
}
.cc-tripdetail__campings .cc-vr-foto,
.cc-tripdetail__campings .cc-vr-foto--leeg {
    width: 74px;
    height: 56px;
    border-radius: 10px;
}
.cc-tripdetail__campings .cc-vr-info {
    gap: 2px;
    min-width: 0;
}
.cc-tripdetail__campings .cc-vr-naam {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.16;
    font-size: 1rem;
}
.cc-tripdetail__campings .cc-vr-locatie,
.cc-tripdetail__campings .cc-vr-datum {
    font-size: .78rem;
    line-height: 1.25;
    gap: 5px;
}
.cc-tripdetail__campings .cc-vr-nachten {
    padding: 2px 8px;
    font-size: .72rem;
}
.cc-tripdetail__campings .cc-vr-agenda__kop,
.cc-tripdetail__campings .cc-vr-route-toggle {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .78rem;
}
.cc-tripdetail__campings .cc-vr-route-toggle {
    width: 100%;
}
.cc-tripdetail__campings .cc-vr-side-actions {
    min-width: 158px;
}
.cc-tijdlijn-sectie .cc-vr-rij--compact .cc-vr-side-actions {
    margin-left: 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
@media (max-width: 760px) {
    .cc-tripdetail__campings .cc-vr-rij {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .cc-tripdetail__campings .cc-vr-side-actions {
        width: 100%;
        min-width: 0;
        align-items: stretch;
        margin-left: 0;
    }
    .cc-tripdetail__campings .cc-vr-agenda__kop,
    .cc-tripdetail__campings .cc-vr-route-toggle {
        width: 100%;
        justify-content: center;
    }
}

/* v3.6.508 / v3.7.236 - popup acties: agenda, route en open gelijke knoppen + tankmoment verbergen bij afgesloten reizen */
.cc-vr-open-wrap {
    margin-left: 0;
    align-self: flex-end;
}
.cc-vr-open-camping {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(45,119,86,.16);
    background: #fff;
    color: #276d4f;
    font: inherit;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.cc-vr-open-camping:hover,
.cc-vr-open-camping:focus-visible {
    border-color: rgba(45,119,86,.34);
    background: #f4fbf6;
    box-shadow: 0 12px 22px rgba(15,23,42,.08);
    transform: translateY(-1px);
    outline: none;
}
.cc-vr-open-camping__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cc-tripdetail__campings .cc-vr-side-actions {
    width: 180px;
    min-width: 180px;
    align-items: stretch;
}
.cc-tripdetail__campings .cc-vr-side-actions .cc-vr-agenda,
.cc-tripdetail__campings .cc-vr-side-actions .cc-vr-route-toggle-wrap,
.cc-tripdetail__campings .cc-vr-side-actions .cc-vr-open-wrap {
    width: 100%;
    align-self: stretch;
}
.cc-tripdetail__campings .cc-vr-agenda__kop,
.cc-tripdetail__campings .cc-vr-route-toggle,
.cc-tripdetail__campings .cc-vr-open-camping {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 14px;
    font-size: .78rem;
}
.cc-tripdetail__campings .cc-vr-route-toggle__icon,
.cc-tripdetail__campings .cc-vr-open-camping__icon {
    width: 17px;
    height: 17px;
}
.cc-trip-tegel--afgesloten .cc-fuelmini__add {
    display: none !important;
}
:root.cc-dark .cc-vr-open-camping {
    background: #1f2937;
    border-color: rgba(255,255,255,.10);
    color: #f8fafc;
    box-shadow: none;
}
:root.cc-dark .cc-vr-open-camping:hover,
:root.cc-dark .cc-vr-open-camping:focus-visible {
    background: #263445;
    border-color: rgba(104,211,145,.28);
}
@media (max-width: 760px) {
    .cc-tripdetail__campings .cc-vr-side-actions {
        width: 100%;
        min-width: 0;
    }
}

/* v3.6.508 / v3.7.236 - tankmomenten chronologisch tussen campingbezoeken in reisschema-popup */

/* Reisplanner: start- en eindadres in reisschema */
.cc-trip-endpoint{display:flex;align-items:flex-start;gap:12px;margin:8px 0;padding:10px 14px;border:1px dashed rgba(45,106,79,.28);border-left:5px solid var(--cc-groen,#2d6a4f);border-radius:16px;background:linear-gradient(135deg,rgba(47,133,90,.08),rgba(255,255,255,.92));box-shadow:0 4px 14px rgba(15,23,42,.04)}
.cc-trip-endpoint--end{border-left-color:var(--cc-goud,#b08a4a);background:linear-gradient(135deg,rgba(176,138,74,.10),rgba(255,255,255,.92))}
.cc-trip-endpoint__icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;border-radius:12px;background:#fff;border:1px solid var(--cc-border,#e5e1d8);font-size:1.05rem}
.cc-trip-endpoint__body{min-width:0;flex:1}.cc-trip-endpoint__top{display:flex;align-items:center;justify-content:space-between;gap:10px}.cc-trip-endpoint__title{margin:0;font-family:var(--cc-font-hoofd,Georgia,serif);font-size:1rem;line-height:1.2;color:#10251a}.cc-trip-endpoint__date{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;background:#fff;color:#607067;border:1px solid var(--cc-border,#e5e1d8);font-size:.72rem;font-weight:800;white-space:nowrap}.cc-trip-endpoint__address{margin-top:4px;color:#374151;font-size:.86rem;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.cc-trip-endpoint__meta{margin-top:3px;color:#6b7280;font-size:.72rem;font-weight:700}
:root.cc-dark .cc-trip-endpoint{background:linear-gradient(135deg,rgba(104,211,145,.12),rgba(30,38,51,.88));border-color:rgba(104,211,145,.28);border-left-color:#68D391}:root.cc-dark .cc-trip-endpoint--end{background:linear-gradient(135deg,rgba(214,179,106,.14),rgba(30,38,51,.88));border-color:rgba(214,179,106,.28);border-left-color:#D6B36A}:root.cc-dark .cc-trip-endpoint__icon,:root.cc-dark .cc-trip-endpoint__date{background:#141a22;border-color:rgba(255,255,255,.12);color:#d1d5db}:root.cc-dark .cc-trip-endpoint__title{color:#f8fafc}:root.cc-dark .cc-trip-endpoint__address{color:#e5e7eb}:root.cc-dark .cc-trip-endpoint__meta{color:#cbd5e1}
@media(max-width:640px){.cc-trip-endpoint{padding:9px 11px;gap:9px}.cc-trip-endpoint__top{align-items:flex-start;flex-direction:column;gap:4px}.cc-trip-endpoint__icon{width:34px;height:34px;flex-basis:34px}.cc-trip-endpoint__title{font-size:.95rem}}

/* v3.6.511 / v3.7.236: routekaart in reis-popup weer inklapbaar + zoomknoppen zichtbaar */
.cc-rp-mapwrap{
  display:block!important;
  overflow:hidden!important;
  transition:max-height .32s ease!important;
}
.cc-rp-maptoggle[aria-expanded="false"] + .cc-rp-mapwrap{
  max-height:0!important;
  min-height:0!important;
  height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  border-top:0!important;
}
.cc-rp-maptoggle[aria-expanded="false"] + .cc-rp-mapwrap .cc-rp-map,
.cc-rp-maptoggle[aria-expanded="false"] + .cc-rp-mapwrap .cc-rp-map.leaflet-container{
  height:0!important;
  min-height:0!important;
}
.cc-rp-maptoggle[aria-expanded="true"] + .cc-rp-mapwrap{
  max-height:430px!important;
  min-height:340px!important;
  height:auto!important;
}
.cc-rp-map{
  display:block!important;
  width:100%!important;
  height:300px!important;
  min-height:300px!important;
  background:#e8efe9!important;
  border-bottom:1px solid #f0ede6;
}
.cc-rp-map.leaflet-container,
.cc-modal .cc-rp-map,
.cc-trip-detail-modal .cc-rp-map,
.cc-reis-popup .cc-rp-map{
  height:300px!important;
  min-height:300px!important;
}
.cc-rp-map .leaflet-control-container,
.cc-rp-map .leaflet-control-zoom{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:1000!important;
}
.cc-rp-map .leaflet-control-zoom{
  border:0!important;
  box-shadow:0 8px 22px rgba(28,58,40,.20)!important;
  margin:12px!important;
}
.cc-rp-map .leaflet-control-zoom a{
  display:block!important;
  width:32px!important;
  height:32px!important;
  line-height:32px!important;
  text-align:center!important;
  background:#fff!important;
  color:#0f5132!important;
  border-color:#e5e0d5!important;
  font-weight:900!important;
}
@media(max-width:700px){
  .cc-rp-maptoggle[aria-expanded="true"] + .cc-rp-mapwrap{max-height:390px!important;min-height:300px!important;}
  .cc-rp-map,.cc-rp-map.leaflet-container{height:260px!important;min-height:260px!important;}
}


/* v3.6.511 / v3.7.236: routekaart start altijd ingeklapt */
.cc-rp-maptoggle[aria-expanded="false"] + .cc-rp-mapwrap{max-height:0!important;min-height:0!important;overflow:hidden!important;}
.cc-rp-maptoggle[aria-expanded="false"] + .cc-rp-mapwrap .cc-rp-map{height:0!important;min-height:0!important;}
.cc-rp-maptoggle[aria-expanded="true"] + .cc-rp-mapwrap{max-height:420px!important;min-height:300px!important;}
.cc-rp-maptoggle[aria-expanded="true"] + .cc-rp-mapwrap .cc-rp-map{height:300px!important;min-height:300px!important;}


/* v3.7.241 - Campingkaart basislayout gelijk houden bij ontbrekende gegevens */
#cc-kaarten-grid > .cc-kaart,
.cc-kaarten-grid > .cc-kaart {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: 100% !important;
}

#cc-kaarten-grid > .cc-kaart .cc-kaart__body,
.cc-kaarten-grid > .cc-kaart .cc-kaart__body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.cc-kaart__meta-top {
    min-height: 24px !important;
}

.cc-kaart__naam {
    min-height: 2.7em !important;
}

.cc-kaart__sub {
    min-height: 22px !important;
    flex-wrap: wrap !important;
}

.cc-kaart__vz {
    min-height: 24px !important;
    align-items: center !important;
    margin-top: 0 !important;
}

.cc-kaart__vz--empty {
    visibility: hidden !important;
    pointer-events: none !important;
}

.cc-kaart__snel-ster {
    margin-top: auto !important;
}

.cc-kaart__snelacties {
    flex: 0 0 auto !important;
}

@media (max-width: 580px) {
    #cc-kaarten-grid > .cc-kaart .cc-kaart__vz,
    .cc-kaarten-grid > .cc-kaart .cc-kaart__vz {
        min-height: 0 !important;
    }
    .cc-kaart__naam {
        min-height: 2.5em !important;
    }
    .cc-kaart__sub {
        min-height: 20px !important;
    }
}