/**
 * Cookiebanner (Klaro) in de OZK-huisstijl.
 *
 * Klaro's eigen CSS gebruikt vaste kleuren (#1a936f groen, #2581c4 blauw) en
 * geen custom properties, dus die worden hier per selector overschreven.
 * Laadt in de 'theme'-groep met hoog gewicht, zodat het ná de library-CSS komt.
 *
 * Palet C (besluit 4-8-2026), met de vaste regel: WITTE tekst op elk gekleurd
 * vlak, nooit zwart. Zie de huisstijlnotitie.
 *   blauw #006e83 · roze #c13c61 · paars #663399
 *   grijs #3c3c3b · groen #28881e (accent) · oranje #cc4d00
 */

:root {
  --ozk-blauw: #006e83;
  --ozk-groen: #28881e;
  --ozk-grijs: #3c3c3b;
  --ozk-roze: #c13c61;
}

/* ---------------------------------------------------------------------------
   De melding onderaan het scherm
   Rustig donkergrijs in plaats van Klaro's standaard bijna-zwart: dat is het
   footervlak van de site, dus het oogt als onderdeel van de pagina.
   --------------------------------------------------------------------------- */

/* Klaro's eigen CSS en de Bootstrap-knoppen van het theme zijn specifieker dan
   deze regels. Bij een third-party widget is !important hier het juiste
   gereedschap: anders moet elke regel met een onleesbare selectorstapel worden
   overtroefd, en dat breekt bij de eerstvolgende module-update. */

/* Modaal venster: midden op het scherm, met een donkere waas over de pagina.
   Dwingt een keuze af zonder weigeren moeilijker te maken dan accepteren —
   beide knoppen zijn even groot en even goed leesbaar. */
/* LET OP: de waas moet alleen bestaan zolang de MELDING er is. Klaro haalt
   .cookie-notice na een keuze uit de DOM, maar laat .klaro zelf staan (met het
   knopje om de keuze te wijzigen). Hing de overlay aan .klaro, dan bleef de
   hele site verduisterd nadat de bezoeker had gekozen. Vandaar :has(). */
.klaro:has(.cookie-notice:not(.cookie-modal-notice))::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, .72);
  z-index: 1000;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: var(--ozk-blauw) !important;
  color: #fff !important;
  overflow: hidden !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(32rem, 92vw) !important;
  max-width: none !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5) !important;
  z-index: 1001 !important;
  padding: 0 !important;
}

/* In het modale venster staat alles onder elkaar en gecentreerd. */
.klaro .cn-body {
  display: block !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* De tekst staat in het blauwe kopvlak. */
.klaro .cn-body h1,
.klaro .cn-body h2,
.klaro .cn-body h3,
.klaro .cn-body > p {
  padding-left: 1.8rem !important;
  padding-right: 1.8rem !important;
  text-align: left !important;
}

.klaro .cn-body h1,
.klaro .cn-body h2,
.klaro .cn-body h3 {
  padding-top: 1.5rem !important;
}

/* De knoppen op een wit vlak eronder, zoals de voet van het keuzevenster. */
.klaro .cn-body .cn-ok {
  background: #fff !important;
  padding: 1.1rem 1.8rem 1.3rem !important;
  margin-top: 1.4rem !important;
}

.klaro .cn-body h1,
.klaro .cn-body h2,
.klaro .cn-body h3,
.klaro .cn-body .cn-title {
  grid-area: auto !important;
  text-align: left !important;
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  margin: 0 0 .8rem 0 !important;
  hyphens: none !important;
}

.klaro .cn-body > p {
  grid-area: auto !important;
  margin: 0 0 1.5rem 0 !important;
}

.klaro .cn-body .cn-ok {
  grid-area: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .7rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.klaro .cookie-notice p,
.klaro .cn-body p,
.klaro .cn-body .cn-ok {
  color: #fff !important;
}

/* De titel: wit en fors genoeg om echt te lezen. Klaro zet hier standaard een
   lichtgrijs op wit, wat op een lichte achtergrond onleesbaar is. */
.klaro .cookie-notice .cn-title,
.klaro .cn-body .cn-title,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice h3,
.klaro .cn-body h1,
.klaro .cn-body h2,
.klaro .cn-body h3,
.klaro .cn-body > p:first-child strong {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 .8rem 0 !important;
  color: #fff !important;
  opacity: 1 !important;
  text-align: left !important;
}

.klaro .cn-body p {
  font-size: .95rem !important;
  line-height: 1.55 !important;
  margin-bottom: .9rem !important;
}

/* ---------------------------------------------------------------------------
   Knoppen
   'Prima, dat is goed' krijgt het groene accent; 'Alleen het noodzakelijke'
   blijft even goed leesbaar. Weigeren mag nooit moeilijker zijn dan
   accepteren - dat is zowel fatsoenlijk als een voorwaarde voor geldige
   toestemming.
   --------------------------------------------------------------------------- */

.klaro .cm-btn,
.klaro .cn-buttons button,
.klaro button.cm-btn {
  border-radius: 6px !important;
  font-weight: 600 !important;
  padding: .55rem 1.1rem !important;
  border: 2px solid transparent !important;
  transition: background-color .15s ease, border-color .15s ease;
}

/* 'Prima, dat is goed' — het groene accent uit de huisstijl */
.klaro .cm-btn.cm-btn-success,
.klaro .cn-buttons button.cm-btn-success,
.klaro button.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var {
  background: var(--ozk-groen) !important;
  background-color: var(--ozk-groen) !important;
  color: #fff !important;
  border-color: var(--ozk-groen) !important;
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cn-buttons button.cm-btn-success:hover,
.klaro button.cm-btn-success:hover {
  background: #1f6e17 !important;
  background-color: #1f6e17 !important;
  color: #fff !important;
  border-color: #1f6e17 !important;
}

/* Weigeren en 'zelf kiezen': omlijnd, zelfde formaat, goed leesbaar.
   Klaro geeft de weiger-knop standaard .cm-btn-danger; rood past hier niet —
   weigeren is een normale keuze, geen waarschuwing. */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-info,
.klaro .cn-buttons button.cm-btn-danger,
.klaro .cn-buttons button.cm-btn-info {
  background: transparent !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .6) !important;
}

.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cn-buttons button.cm-btn-danger:hover,
.klaro .cn-buttons button.cm-btn-info:hover {
  background: rgba(255, 255, 255, .14) !important;
  background-color: rgba(255, 255, 255, .14) !important;
  border-color: #fff !important;
  color: #fff !important;
}

.klaro .cn-learn-more,
.klaro .cn-body a {
  color: #fff;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Het keuzevenster
   Licht, met de blauwe huisstijlkleur in de kop.
   --------------------------------------------------------------------------- */

.klaro .cm-modal.cm-klaro {
  border-radius: 10px;
  overflow: hidden;
}

.klaro .cm-modal .cm-header {
  background: var(--ozk-blauw);
  border-bottom: none;
  padding: 1.1rem 1.4rem;
}

.klaro .cm-modal .cm-header h1,
.klaro .cm-modal .cm-header .title {
  color: #fff;
  font-weight: 600;
}

.klaro .cm-modal .cm-header p,
.klaro .cm-modal .cm-header a {
  color: #fff;
}

.klaro .cm-modal .cm-body {
  background: #fff;
  color: var(--ozk-grijs);
  padding: 1.2rem 1.4rem;
}

.klaro .cm-modal .cm-body .cm-list-title {
  color: var(--ozk-grijs);
  font-weight: 600;
}

.klaro .cm-modal .cm-body .cm-list-description {
  color: #55554f;
  font-size: .9rem;
  line-height: 1.5;
}

/* Kop van elke categorie: het doel is waar mensen op scannen */
.klaro .cm-modal .cm-purpose > .cm-list-title,
.klaro .cm-modal .cm-caret + .cm-list-title {
  color: var(--ozk-blauw);
  font-size: 1.02rem;
}

.klaro .cm-modal .cm-footer {
  background: #f5f5f3;
  border-top: 1px solid #e2e2de;
  padding: 1rem 1.4rem;
}

.klaro .cm-modal .cm-footer .cm-btn.cm-btn-decline,
.klaro .cm-modal .cm-footer .cm-btn.cm-btn-info {
  color: var(--ozk-grijs);
  border-color: #b8b8b2;
}

.klaro .cm-modal .cm-footer .cm-btn.cm-btn-decline:hover,
.klaro .cm-modal .cm-footer .cm-btn.cm-btn-info:hover {
  background: #e8e8e4;
  border-color: var(--ozk-grijs);
  color: var(--ozk-grijs);
}

/* ---------------------------------------------------------------------------
   Schakelaars
   Groen als iets aanstaat, roze als het uitstaat: allebei huisstijlkleuren en
   ook zonder kleurwaarneming te onderscheiden doordat de knop verschuift.
   --------------------------------------------------------------------------- */

.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--ozk-groen);
}

.klaro .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background-color: var(--ozk-groen);
  opacity: .55;
}

.klaro .cm-list-input.only-required + .cm-list-label .slider {
  background-color: #9a9a94;
}

.klaro .cm-list-label .slider {
  background-color: #b8b8b2;
}

.klaro .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 0 0 3px rgba(0, 110, 131, .35);
}

/* ---------------------------------------------------------------------------
   Het knopje om de keuze later te wijzigen
   --------------------------------------------------------------------------- */

.klaro .cookie-modal-notice .cm-btn,
#klaro-toggle-button,
.klaro-toggle-button {
  background: var(--ozk-blauw);
  color: #fff;
  border-radius: 50%;
  border: none;
}

/* ---------------------------------------------------------------------------
   Kleine schermen: knoppen onder elkaar, volle breedte, genoeg tikoppervlak
   --------------------------------------------------------------------------- */



/* ---------------------------------------------------------------------------
   Mobiel: geen zwevend venster in het midden, maar onderaan vastgeplakt.
   Op een telefoon is de onderkant waar de duim is, en een gecentreerd venster
   duwt de pagina-inhoud onzichtbaar weg. De donkere waas blijft, dus het is
   nog steeds een bewuste keuze en geen weg te scrollen balkje.
   --------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .45) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  .klaro .cn-body {
    padding: 1.6rem 1.3rem 1.4rem !important;
  }

  .klaro .cn-body h1,
  .klaro .cn-body h2,
  .klaro .cn-body h3 {
    font-size: 1.5rem !important;
  }

  .klaro .cn-buttons button {
    padding: .8rem 1rem !important;
    font-size: 1.02rem !important;
  }
}

/* De groene knop is de primaire actie en staat daarom bovenaan in de rij.
   Klaro plaatst 'weigeren' eerst in de DOM; met column-reverse komt de groene
   knop bovenaan te staan zonder dat de tab-volgorde onlogisch wordt. */
.klaro .cn-buttons {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: .7rem !important;
  width: 100% !important;
}

.klaro .cn-buttons button {
  width: 100% !important;
  margin: 0 !important;
}

.klaro .cm-btn.cm-btn-success {
  font-size: 1.1rem !important;
  padding: .85rem 1rem !important;
  box-shadow: 0 4px 14px rgba(40, 136, 30, .4) !important;
}

/* 'Zelf kiezen' als bescheiden link onder de knoppen */
.klaro .cn-body .cn-learn-more {
  order: 3;
  text-align: center;
  font-size: .92rem;
  padding-top: .2rem;
}

/* ---------------------------------------------------------------------------
   Knoppen staan nu op een WIT vlak: donkere tekst, anders onleesbaar.
   Dit overschrijft bewust de witte tekstregels hierboven, die voor het blauwe
   kopvlak gelden.
   --------------------------------------------------------------------------- */

.klaro .cn-body .cn-ok .cm-btn.cm-btn-danger,
.klaro .cn-body .cn-ok .cm-btn.cn-decline,
.klaro .cn-body .cn-ok button.cm-btn-danger {
  background: transparent !important;
  color: var(--ozk-grijs) !important;
  border-color: #b8b8b2 !important;
}

.klaro .cn-body .cn-ok .cm-btn.cm-btn-danger:hover,
.klaro .cn-body .cn-ok .cm-btn.cn-decline:hover,
.klaro .cn-body .cn-ok button.cm-btn-danger:hover {
  background: #eeeeea !important;
  border-color: var(--ozk-grijs) !important;
  color: var(--ozk-grijs) !important;
}

.klaro .cn-body .cn-ok .cn-learn-more,
.klaro .cn-body .cn-ok a {
  color: var(--ozk-blauw) !important;
}

/* De groene knop houdt witte tekst - die staat op groen, niet op wit. */
.klaro .cn-body .cn-ok .cm-btn.cm-btn-success {
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Alleen de titel in de blauwe kop; de uitleg staat op het witte vlak samen
   met de knoppen. Dat houdt het blauw een echte kop in plaats van een blok.
   --------------------------------------------------------------------------- */

.klaro .cn-body h1,
.klaro .cn-body h2,
.klaro .cn-body h3 {
  padding-bottom: 1.2rem !important;
  margin-bottom: 0 !important;
}

.klaro .cn-body > p {
  background: #fff !important;
  color: var(--ozk-grijs) !important;
  padding: 1.4rem 1.8rem .2rem !important;
  margin: 0 !important;
}

.klaro .cn-body > p a {
  color: var(--ozk-blauw) !important;
}

.klaro .cn-body .cn-ok {
  margin-top: 0 !important;
  padding-top: .9rem !important;
}

/* Rechte hoeken: past bij de blokken elders op de site (menukaders, kampkaarten). */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  border-radius: 0 !important;
}

.klaro .cm-btn,
.klaro .cn-buttons button,
.klaro button.cm-btn {
  border-radius: 0 !important;
}

@media (max-width: 700px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-radius: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   Voet van het keuzevenster: LICHT vlak, dus donkere tekst.
   Zonder deze regels erven de knoppen het wit dat voor het blauwe kopvlak van
   de eerste popup bedoeld is, en zijn ze onleesbaar. Let op de klassencombinatie:
   'Mijn keuze bewaren' draagt zowel cm-btn-success als cm-btn-info.
   --------------------------------------------------------------------------- */

.klaro .cm-modal .cm-footer .cm-btn,
.klaro .cm-modal .cm-footer button.cm-btn {
  color: var(--ozk-grijs) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: #b8b8b2 !important;
}

.klaro .cm-modal .cm-footer .cm-btn:hover,
.klaro .cm-modal .cm-footer button.cm-btn:hover {
  background: #e8e8e4 !important;
  background-color: #e8e8e4 !important;
  border-color: var(--ozk-grijs) !important;
  color: var(--ozk-grijs) !important;
}

/* 'Mijn keuze bewaren' is de secundaire bevestiging: groen omlijnd. */
.klaro .cm-modal .cm-footer .cm-btn.cm-btn-accept,
.klaro .cm-modal .cm-footer button.cm-btn-accept {
  color: var(--ozk-groen) !important;
  border-color: var(--ozk-groen) !important;
}

.klaro .cm-modal .cm-footer .cm-btn.cm-btn-accept:hover,
.klaro .cm-modal .cm-footer button.cm-btn-accept:hover {
  background: var(--ozk-groen) !important;
  background-color: var(--ozk-groen) !important;
  color: #fff !important;
  border-color: var(--ozk-groen) !important;
}

/* 'Prima, dat is goed' blijft de volle groene knop. */
.klaro .cm-modal .cm-footer .cm-btn.cm-btn-accept-all,
.klaro .cm-modal .cm-footer button.cm-btn-accept-all {
  background: var(--ozk-groen) !important;
  background-color: var(--ozk-groen) !important;
  color: #fff !important;
  border-color: var(--ozk-groen) !important;
}

.klaro .cm-modal .cm-footer .cm-btn.cm-btn-accept-all:hover,
.klaro .cm-modal .cm-footer button.cm-btn-accept-all:hover {
  background: #1f6e17 !important;
  background-color: #1f6e17 !important;
  color: #fff !important;
}

/* Geen ruimte tussen de rand van de popup en het blauwe kopvlak. */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   Eerste scherm krijgt dezelfde opbouw als het keuzevenster:
   blauwe kop -> witte tekst -> lichtgrijze voet met de knoppen.
   --------------------------------------------------------------------------- */

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok {
  background: #f5f5f3 !important;
  border-top: 1px solid #e2e2de !important;
  padding: 1rem 1.8rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .8rem !important;
}

/* Knoppen naast elkaar, rechts uitgelijnd - net als de voet van scherm 2. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .8rem !important;
  width: auto !important;
  margin: 0 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button {
  width: auto !important;
  margin: 0 !important;
}

/* 'Zelf kiezen' links in de voet, als tegenhanger van de knoppen rechts. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more {
  order: 0 !important;
  margin-right: auto !important;
  padding: 0 !important;
  text-align: left !important;
  color: var(--ozk-blauw) !important;
}

/* De tekst staat nu op wit en heeft zijn eigen ademruimte nodig. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p {
  padding: 1.4rem 1.8rem 1.4rem !important;
}

/* Op smalle schermen weer onder elkaar, groene knop bovenaan. */
@media (max-width: 700px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem 1.3rem 1.2rem !important;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons {
    flex-direction: column-reverse !important;
    width: 100% !important;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons button {
    width: 100% !important;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more {
    order: 3 !important;
    margin-right: 0 !important;
    text-align: center !important;
    padding-top: .5rem !important;
  }
}

/* ---------------------------------------------------------------------------
   Klaro geeft het venster focus zodra het verschijnt (auto_focus), waardoor de
   browser er een witte focus-ring van 3px omheen tekent - zichtbaar als een wit
   randje rond de popup. De ring weghalen bij de CONTAINER is verdedigbaar: dat
   is geen bedienbaar element. De knoppen en links erbinnen houden hun eigen,
   duidelijk zichtbare focus-indicatie, dus toetsenbordgebruik blijft intact.
   --------------------------------------------------------------------------- */

.klaro .cookie-notice:focus,
.klaro .cookie-notice:focus-visible,
.klaro .cookie-notice .cn-body:focus,
.klaro .cm-modal:focus,
.klaro .cm-modal:focus-visible {
  outline: none !important;
}

/* Focus op knoppen en links blijft goed zichtbaar. */
.klaro .cm-btn:focus-visible,
.klaro .cn-buttons button:focus-visible,
.klaro .cn-learn-more:focus-visible,
.klaro a:focus-visible {
  outline: 3px solid #ffd24d !important;
  outline-offset: 2px !important;
}