/* ============================================================
   Cookiebanner opmaak — Spindler Familie huisstijl
   Externe CSS-override voor Cookiebot CMP.
   Werkt op ELK Cookiebot-plan (ook het gratis Free-plan),
   omdat dit jouw eigen CSS is en niet de dashboard-instelling.

   Kleuren uit: Spindler Familie Brand Guidelines v1.0 (juli 2026)
     Spindler Rood   #E03127
     Blauw           #0E6AB5
     Zwart (tekst)   #231F20
     Lichtgrijs      #ECEDED
     Wit             #FFFFFF
   Lettertype: Helvetica Neue
   ============================================================ */

/* ---- Banner-container + achtergrond ---- */
#CybotCookiebotDialog {
  background-color: #FFFFFF !important;
  border: 1px solid #ECEDED !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: #231F20 !important;
}

/* ---- Alle teksten in de banner ---- */
#CybotCookiebotDialog,
#CybotCookiebotDialog * {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
#CybotCookiebotDialogBodyContentTitle,
#CybotCookiebotDialogBodyContentText {
  color: #231F20 !important;
}

/* ---- Links / accenttekst ---- */
#CybotCookiebotDialog a {
  color: #E03127 !important;
}

/* ---- Logo op de banner (werkt óók op het gratis Free-plan) ----
   Het Spindler Familie-logo staat hieronder als data-URI ingesloten,
   dus er hoeft geen los bestand gehost te worden. Het logo verschijnt
   boven de titeltekst van de banner.
   Liever een gehost logobestand gebruiken? Vervang dan de background-image
   hieronder door het gecommentarieerde alternatief onderaan dit blok. */
#CybotCookiebotDialogBodyContentTitle::before {
  content: "";
  display: block;
  width: 150px;
  height: 58px;
  margin: 0 0 14px 0;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MTkuNzkgMTYzLjI4Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMjMxZjIwOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICNlMDMxMjc7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTAsNDguOThWMGgyMzcuNDF2NDguOThIMFpNMCwxMTQuMjl2NDguOThoMjM3LjQxdi00OC45OEgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTMzLjQzLDY1LjNoMTUuNTJjNi4wOSwwLDExLjgxLDIuNzksMTEuODEsMTAuNTNzLTQuNjIsMTEuMjYtMTEuODEsMTEuMjZoLTd2MTAuODloLTguNTF2LTMyLjY4Wk00MS45NCw4MC40OWg1LjcyYzIuNjUsMCw0LjU4LTEuMSw0LjU4LTQuMDdzLTEuOTctNC4zLTQuNTgtNC4zaC01LjcydjguMzhaTTY0LjM4LDY1LjNoOC41MXYzMi42OGgtOC41MXYtMzIuNjhaTTc5LjIyLDY1LjNoOC43NGwxMS4zNSwyMC4xNGguMDl2LTIwLjE0aDguMDF2MzIuNjhoLTguNzRsLTExLjM1LTIwLjM3aC0uMDl2MjAuMzdoLTguMDF2LTMyLjY4Wk0xMTMuNiw2NS4zaDE0LjA1YzEwLjAyLDAsMTYuMDIsNi4wOSwxNi4wMiwxNi4yLDAsMTAuNzEtNi4wOSwxNi40OC0xNi4wMiwxNi40OGgtMTQuMDV2LTMyLjY4Wk0xMjIuMTEsOTAuNjVoNC4wM2M2LjQ1LS4xNCw5LjAyLTIuNjUsOS4wMi05LjIsMC01Ljk1LTMuMi04LjgzLTkuMDItOC44M2gtNC4wM3YxOC4wM1pNMjM2LjMxLDk3Ljk4bC02LjEtMTIuNjhjMi43NC0xLjcyLDQuMzItNC43NSw0LjMyLTkuNDcsMC03Ljc0LTUuNzItMTAuNTMtMTEuODEtMTAuNTNoLTE1LjUydjMyLjY4aDguNTF2LTEwLjg5aDYuOTJjMS4yNSwyLjY5LDQuNjYsMTAsNS4yNSwxMC44OWg4LjQyWk0yMTUuNzIsODAuNDl2LTguMzhoNS43MmMyLjYxLDAsNC41OCwxLjI0LDQuNTgsNC4zcy0xLjkyLDQuMDctNC41OCw0LjA3aC01LjcyWk0xNzIuMSw5MC42NWgtMTUuMjR2LTI1LjM2aC04LjUxdjMyLjY4aDIyLjQ2bDEuMjktNy4zMlpNMTgzLjk1LDg0LjQzaDE0Ljg2bDEuMTYtNi41OWgtMTYuMDJ2LTUuNzJoMTcuNTN2LTYuODJoLTI2LjA0djMyLjY4aDI2LjV2LTcuMzJoLTE3Ljk5di02LjIyWk0xOS45Nyw3OC4zYy00Ljc2LTEuMzMtOS40Ny0xLjc5LTkuNDctNC4zLDAtMi4xNSwyLjI5LTIuNzksNC4xMi0yLjc5LDIuNjEsMCw1LjQuOTYsNS4yNiwzLjk0bDguNC0xLjQ4Yy0uODYtNi4zMS02Ljk0LTkuMDQtMTIuOTgtOS4wNHMtMTMuMzIsMi43OS0xMy4zMiw5LjkzYzAsNiw0LjksOC4xLDkuNTcsOS40Myw0LjcxLDEuMzMsOS4zOCwxLjg4LDkuMzgsNC43NiwwLDIuNDMtMi42NiwzLjM0LTUuMjIsMy4zNC0zLjYxLDAtNS45OS0xLjI0LTYuMTgtNS4wOGwtOC40MywxLjQ5Yy43OCw3LjI4LDcuMDYsMTAuMTgsMTQuMTEsMTAuMThzMTQuMjMtMi42NSwxNC4yMy0xMC45NGMwLTUuOS00Ljc2LTguMS05LjQ3LTkuNDNaTTI1NC45NSw2NS40M2gyMS4yNXYzLjYzaC0xNi45NXYxMC4yOWgxNC44N3YzLjYyaC0xNC44N3YxNC44MmgtNC4zdi0zMi4zNlpNMjg3LjQ4LDY1LjQzaDQuNzZsMTIuNjQsMzIuMzZoLTQuNzZsLTMuNTQtOS43NGgtMTMuNjlsLTMuNjIsOS43NGgtNC40NGwxMi42NC0zMi4zNlpNMjg0LjI2LDg0LjQyaDEwLjk3bC01LjM5LTE1LjA5aC0uMDlsLTUuNDgsMTUuMDlaTTMwOC4zNyw2NS40M2g1Ljg5bDEwLjIsMjcuMTksMTAuMjQtMjcuMTloNS44OXYzMi4zNmgtNC4wOHYtMjYuOTJoLS4wOWwtMTAuMTEsMjYuOTJoLTMuNjdsLTEwLjExLTI2LjkyaC0uMDl2MjYuOTJoLTQuMDh2LTMyLjM2Wk0zNDguMTUsNjUuNDNoNC4zMXYzMi4zNmgtNC4zMXYtMzIuMzZaTTM1OS45Myw2NS40M2g0LjN2MjguNzNoMTcuMTN2My42M2gtMjEuNDR2LTMyLjM2Wk0zODUuNTMsNjUuNDNoNC4zMXYzMi4zNmgtNC4zMXYtMzIuMzZaTTM5Ny4zMiw2NS40M2gyMi4zNHYzLjYzaC0xOC4wNHYxMC4yOWgxNi44MXYzLjYyaC0xNi44MXYxMS4xOWgxOC4xN3YzLjYzaC0yMi40OHYtMzIuMzZaIi8+Cjwvc3ZnPg==");
}
/* Alternatief met gehost bestand (i.p.v. de data-URI hierboven):
#CybotCookiebotDialogBodyContentTitle::before {
  background-image: url("/assets/img/spindlerfamilie-logo.svg");
}
*/

/* ---- Knop: "Alles toestaan" (primaire CTA) ---- */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyButtonAccept {
  background-color: #E03127 !important;
  border: 2px solid #E03127 !important;
  color: #FFFFFF !important;
}

/* ---- Knop: "Weigeren" (gelijke prominentie, AVG-proof) ---- */
#CybotCookiebotDialogBodyButtonDecline {
  background-color: #FFFFFF !important;
  border: 2px solid #E03127 !important;
  color: #231F20 !important;
}

/* ---- Knop: "Selectie toestaan" / voorkeuren opslaan ---- */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonAcceptSelection {
  background-color: #FFFFFF !important;
  border: 2px solid #231F20 !important;
  color: #231F20 !important;
}

/* ---- "Details / aanpassen"-knop ---- */
#CybotCookiebotDialogBodyLevelButtonCustomize {
  color: #E03127 !important;
}

/* ---- Toggles AAN (geaccepteerde categorie) ---- */
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #E03127 !important;
}

/* ---- Toggles UIT (geweigerde categorie) ---- */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #ECEDED !important;
}

/* ---- Privacy Trigger (zwevend knopje om keuze later te wijzigen) ---- */
#CookiebotWidget .CookiebotWidget-logo svg circle {
  fill: #E03127 !important;
}