/**
 * Guifi — Complianz cookiebanner in huisstijl.
 *
 * Puur cosmetisch: dit stylet de NATIVE Complianz-banner om naar de gewenste
 * layout (à la circulairegeveleconomie.nl) in de Guifi-huisstijl. De volledige
 * consent-werking (script-blokkering, cookies, categorieën, opslaan) blijft
 * van Complianz zelf. We veranderen niets aan de DOM of de knop-logica.
 *
 * Bewust identiek gehouden aan guifi.nl (themes/guifi/assets/css/complianz.css).
 * Pas je hier iets aan, doe het daar dan ook — de banners horen gelijk te zijn.
 *
 * Scope: alles onder #cmplz-cookiebanner-container zodat we niets anders raken.
 * !important op de visuele eigenschappen omdat Complianz z'n eigen gegenereerde
 * banner-CSS met dezelfde specificiteit meelevert.
 */

#cmplz-cookiebanner-container {
    --g-green:        #1CAC7B;
    --g-green-hover:  #189C6F;
    --g-ink:          #161616;
    --g-muted:        #52525B;
    --g-border:       #E4E4E7;
    --g-track:        #D4D4D8;
    --g-surface:      #FAFAFA;
    --g-white:        #fff;
    --g-radius-card:  16px;
    --g-radius-cat:   12px;
    --g-font: "Blauer Nue","Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Card ---------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    box-sizing: border-box !important;
    width: min(476px, calc(100vw - 40px)) !important;
    max-width: min(476px, calc(100vw - 40px)) !important;
    margin: 0 !important;
    inset: auto 20px 20px auto !important;   /* bottom-right */
    padding: 24px !important;
    background: var(--g-white) !important;
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-card) !important;
    box-shadow: 0 18px 48px rgba(22, 22, 22, .18) !important;
    font-family: var(--g-font) !important;
    color: var(--g-ink) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner * {
    font-family: var(--g-font) !important;
    box-sizing: border-box;
}

/* Blauer Nue keihard forceren op alle tekst — extra hoge specificiteit
   (html body ...) zodat de door Complianz ná ons ingeladen banner-CSS niet wint. */
html body #cmplz-cookiebanner-container .cmplz-cookiebanner,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description span,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner label,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner span,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner p {
    font-family: "Blauer Nue","Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif !important;
}

/* ---------- Header ---------- */
#cmplz-cookiebanner-container .cmplz-logo { display: none !important; }

#cmplz-cookiebanner-container .cmplz-header {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: block !important;
}
#cmplz-cookiebanner-container .cmplz-title {
    display: block !important;
    font-size: 48px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;   /* -2% */
    font-weight: 500 !important;
    color: var(--g-ink) !important;
    text-align: left !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Tweede regel "uw privacy" in huisstijl-groen (eerste regel blijft zwart). */
html body #cmplz-cookiebanner-container .cmplz-title .guifi-title-accent {
    color: var(--g-green) !important;
    font-weight: 500 !important;
}
#cmplz-cookiebanner-container .cmplz-message {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--g-muted) !important;
    width: auto !important;        /* Complianz' vaste breedte negeren, kaart volgen */
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-body {
    padding: 0 !important;
    margin: 8px 0 0 !important;
}

/* Sluitknop rechtsboven */
#cmplz-cookiebanner-container .cmplz-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--g-muted) !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    transition: background .15s, color .15s !important;
}
#cmplz-cookiebanner-container .cmplz-close:hover {
    background: var(--g-surface) !important;
    color: var(--g-ink) !important;
}
#cmplz-cookiebanner-container .cmplz-close svg { width: 16px !important; height: 16px !important; }

/* Dividers weg: we werken met witruimte i.p.v. lijnen (à la cge) */
#cmplz-cookiebanner-container .cmplz-divider { display: none !important; }

/* ---------- Categorieën ---------- */
/* Standaard verborgen door Complianz; alleen margin zetten (geen display forceren,
   anders zouden de categorieën altijd zichtbaar zijn i.p.v. pas na "Bekijk voorkeuren"). */
#cmplz-cookiebanner-container .cmplz-categories {
    width: auto !important;         /* Complianz' vaste breedte negeren, kaart volgen */
    max-width: 100% !important;
    margin: 16px 0 !important;
}
/* Complianz voegt 'cmplz-fade-in' toe zodra je op "Bekijk voorkeuren" klikt. */
#cmplz-cookiebanner-container .cmplz-categories.cmplz-fade-in {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#cmplz-cookiebanner-container .cmplz-category {
    background: var(--g-surface) !important;
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-cat) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
#cmplz-cookiebanner-container .cmplz-category-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-category-title {
    flex: 1 1 auto !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--g-ink) !important;
    order: 0 !important;
}

/* "Altijd actief" voor functionele cookies: alleen tekst, geen toggle (net als cge) */
#cmplz-cookiebanner-container .cmplz-functional .cmplz-banner-checkbox { display: none !important; }
#cmplz-cookiebanner-container .cmplz-always-active {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--g-green) !important;
    white-space: nowrap !important;
    order: 1 !important;
}

/* Chevron-knop */
#cmplz-cookiebanner-container .cmplz-category-toggle {
    order: 2 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px !important;
    margin: 0 !important;
    color: var(--g-muted) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: auto !important;
}
#cmplz-cookiebanner-container .cmplz-category-toggle .cmplz-icon {
    transition: transform .2s ease !important;
    display: inline-flex !important;
}
#cmplz-cookiebanner-container .cmplz-category-toggle[aria-expanded="true"] .cmplz-icon {
    transform: rotate(180deg) !important;
}

/* Beschrijving */
#cmplz-cookiebanner-container .cmplz-description {
    padding: 0 14px 14px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--g-muted) !important;
}

/* ---------- Toggle-switch (statistieken/marketing/voorkeuren) ---------- */
#cmplz-cookiebanner-container .cmplz-banner-checkbox {
    order: 1 !important;
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 26px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-consent-checkbox {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}
#cmplz-cookiebanner-container .cmplz-banner-checkbox .cmplz-label {
    position: absolute !important;
    inset: 0 !important;
    width: 44px !important;
    height: 26px !important;
    background: var(--g-track) !important;
    border-radius: 9999px !important;
    transition: background .2s ease !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-banner-checkbox .cmplz-label::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--g-white) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25) !important;
    transition: transform .2s ease !important;
}
/* Complianz' eigen bolletje (::after) uitzetten — wij gebruiken ::before als knop. */
#cmplz-cookiebanner-container .cmplz-banner-checkbox .cmplz-label::after {
    display: none !important;
    content: none !important;
}
#cmplz-cookiebanner-container .cmplz-consent-checkbox:checked + .cmplz-label {
    background: var(--g-green) !important;
}
#cmplz-cookiebanner-container .cmplz-consent-checkbox:checked + .cmplz-label::after {
    display: none !important;
}
#cmplz-cookiebanner-container .cmplz-consent-checkbox:checked + .cmplz-label::before {
    transform: translateX(18px) !important;
}
#cmplz-cookiebanner-container .cmplz-consent-checkbox:focus-visible + .cmplz-label {
    outline: 2px solid var(--g-green) !important;
    outline-offset: 2px !important;
}

/* ---------- Knoppen ---------- */
#cmplz-cookiebanner-container .cmplz-buttons {
    display: flex !important;
    flex-direction: row !important;   /* Complianz zet dit op column <=768px; wij regelen mobiel zelf */
    flex-wrap: wrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 10px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}
/* Let op: GEEN display op de knoppen zetten. Complianz toont/verbergt
   "Bekijk voorkeuren" en "Voorkeuren bewaren" via inline style.display; een
   display:...!important hier zou alle knoppen permanent tonen. Een native
   <button> centreert z'n label al vanzelf. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 9999px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}

/* Primair (Accepteren + Voorkeuren bewaren) */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences {
    background: var(--g-green) !important;
    border-color: var(--g-green) !important;
    color: var(--g-white) !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences:hover {
    background: var(--g-green-hover) !important;
    border-color: var(--g-green-hover) !important;
}

/* Secundair / outline (Weiger + Bekijk voorkeuren) */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences {
    background: var(--g-white) !important;
    border-color: #111111 !important;
    color: var(--g-ink) !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:hover {
    background: var(--g-surface) !important;
    border-color: #111111 !important;
}

/* Layout: Accepteren volle breedte bovenaan, daaronder de rij Weiger/Bekijk/Bewaren */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept          { order: 1 !important; flex-basis: 100% !important; }
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny            { order: 2 !important; }
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences{ order: 3 !important; }
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences{ order: 4 !important; }

/* TCF-only elementen (niet actief op guifi) verbergen — geen "{vendor_count}" e.d. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .tcf { display: none !important; }

/* ---------- Links onderaan ---------- */
/* De "Beheer opties/diensten"-navigatie verbergen (cge toont enkel de documenten). */
#cmplz-cookiebanner-container .cmplz-links.cmplz-information { display: none !important; }

#cmplz-cookiebanner-container .cmplz-documents.cmplz-links {
    display: flex !important;
    justify-content: flex-start !important;   /* container niet centreren */
    margin: 16px 0 0 !important;
    padding: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-documents.cmplz-links ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 18px !important;
    justify-content: flex-start !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-documents.cmplz-links li { margin: 0 !important; padding: 0 !important; }
#cmplz-cookiebanner-container .cmplz-documents.cmplz-links .cmplz-link {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--g-muted) !important;
    text-decoration: none !important;
}
#cmplz-cookiebanner-container .cmplz-documents.cmplz-links .cmplz-link:hover {
    color: #111111 !important;
}

/* ---------- Mobiel (gelijk aan Complianz-breakpoint: <=768px) ---------- */
@media (max-width: 768px) {
    #cmplz-cookiebanner-container .cmplz-cookiebanner {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        inset: auto 12px 12px 12px !important;
        padding: 20px !important;
    }
    #cmplz-cookiebanner-container .cmplz-title { font-size: 32px !important; }

    /* Knoppen onder elkaar. In een KOLOM is flex-basis de HOOGTE, dus flex:0 0 auto
       (natuurlijke hoogte) — anders rekken de knoppen uit tot groene blobs. */
    #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        height: auto !important;
    }
    /* De desktopregel geeft Accepteren flex-basis:100% (= 100% hoogte in kolom); hier terugzetten. */
    #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
        flex-basis: auto !important;
    }

    /* Volgorde zoals de referentie: Accepteren, Weiger(en), Bekijk/Bewaar voorkeuren. */
    #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept           { order: 1 !important; }
    #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny             { order: 2 !important; }
    #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences { order: 3 !important; }
    #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { order: 3 !important; }
}

/* ---------- Versieverschil Complianz: categorieën als <details> ---------- */
/* Op guifi.nl levert Complianz elke categorie als
   <div class="cmplz-category"> met een <button class="cmplz-category-toggle">
   voor het chevron. De Complianz-versie op deze site is ouder en gebruikt
   <details class="cmplz-category"><summary> met het chevron als losse
   <span class="cmplz-icon cmplz-open"> in de header.

   De blokken hierboven dekken alles wat beide opmaakmodellen delen (kaart,
   titels, toggles, knoppen). Onderstaande regels doen voor <details>/<summary>
   precies wat de .cmplz-category-toggle-regels hierboven voor de knop doen, zodat
   het eindbeeld identiek is. Ze staan los zodat ze vanzelf uitgewerkt raken
   zodra Complianz hier bijgewerkt wordt — dan bestaan <details>/<summary>
   in de banner niet meer en blijft alleen het gedeelde deel over. */

/* Summary is de klikbare kop; het standaard driehoekje van de browser weg. */
#cmplz-cookiebanner-container .cmplz-category > summary {
    display: block !important;
    list-style: none !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-category > summary::-webkit-details-marker {
    display: none !important;
}
#cmplz-cookiebanner-container .cmplz-category > summary::marker {
    content: "" !important;
}

/* Chevron op dezelfde plek als de toggle-knop op guifi.nl: uiterst rechts. */
#cmplz-cookiebanner-container .cmplz-category-header > .cmplz-icon.cmplz-open {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: transform .2s ease !important;
}
#cmplz-cookiebanner-container .cmplz-category[open] > summary .cmplz-icon.cmplz-open {
    transform: rotate(180deg) !important;
}

/* ---------- Gelijkgetrokken met guifi.nl ---------- */
/* Op guifi.nl staan deze twee regels in het thema-stylesheet (style.css, bij
   "Cookiebanner:"). Inhoudelijk horen ze bij de banner, dus hier houden we ze
   bij de rest. Verander je ze, kijk dan ook in guifi.nl/themes/guifi/style.css. */

/* Tekenafstand van de bannertekst.
   Op guifi.nl erft de banner letter-spacing 4% van de Elementor-kit — dat geldt
   daar site-breed en werkt door in de banner. Mokko laat dit op 'normal', dus
   dezelfde tekst viel hier smaller uit en brak op andere plekken af (6 regels
   i.p.v. 7). 0.04em is exact hetzelfde als 4% van de fontgrootte, maar wordt door
   elke browser ondersteund (procenten bij letter-spacing zijn nieuw).

   Alleen op de bannerkaart, zodat de rest van de site er niets van merkt; via
   overerving pakken bericht, knoppen, categorieën en links het vanzelf op. De
   titel houdt zijn eigen -0.02em, precies als op guifi.nl. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    letter-spacing: 0.04em !important;  /* fallback: vaste waarde, erft door */
    letter-spacing: 4% !important;      /* exact als guifi.nl; browsers zonder
                                           procent-ondersteuning negeren deze
                                           regel en houden de em-waarde erboven */
}

/* 8px extra ruimte onder de toestemmingstekst. Hogere specificiteit dan de
   margin:0 hierboven, net als de regel op guifi.nl. */
#cmplz-cookiebanner-container .cmplz-body .cmplz-message {
    margin-bottom: 8px !important;
}

/* Documentenlijst 32px hoog i.p.v. 24px — zelfde regel als op guifi.nl, zodat de
   twee banners gelijk zijn. De 8px valt onder de li, niet ertussen: de ul is een
   horizontale flexrij, dus dit maakt de rij hoger (24 + 8). De ruimte tússen
   Cookiebeleid en Privacybeleid komt uit de column-gap van 18px hierboven. */
#cmplz-cookiebanner-container .cmplz-documents ul li:not(:last-child) {
    margin-bottom: 8px !important;
}