/* designated-2026 · cookiebanner: de melding van CookieConfirm (laadt via GTM, tag "Cookiebanner") in de huisstijl.
 * CookieConfirm zet zijn eigen stijl in <style id="cc-banner-style"> en kleurt de knoppen inline, vandaar de
 * !important op kleur en achtergrond. Elke regel begint met #cc-consent-banner.cc-modal-backdrop: één klasse
 * meer dan de regels van CookieConfirm zelf, die later in de pagina staan en anders zouden winnen. Alles hangt onder #cc-consent-banner, dus de rest van de site merkt hier niets van.
 * Tekst en knoppen (welke er staan, en in welke volgorde) komen uit het CookieConfirm-account, niet uit dit bestand.
 * Sinds 03-11 licht glas (Tim): witte, doorschijnende kaart met blur, navy tekst, lime alleen op "Accepteer alles". */

#cc-consent-banner.cc-modal-backdrop {
  --cc-tekst: var(--ink-dark);
  --cc-zacht: var(--soft-dark);
  --cc-lijn: var(--line-light);
  background-color: rgba(10, 29, 41, .22) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#cc-consent-banner.cc-modal-backdrop .cc-b {
  background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(243, 245, 246, .88)) !important;
  backdrop-filter: blur(calc(30 * var(--u))) saturate(170%);
  -webkit-backdrop-filter: blur(calc(30 * var(--u))) saturate(170%);
  color: var(--cc-tekst);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: calc(28 * var(--u)) !important;
  box-shadow: 0 40px 100px -30px rgba(10, 29, 41, .5), 0 2px 6px rgba(10, 29, 41, .06), inset 0 1px 0 #fff !important;
  max-width: calc(760 * var(--u));
  overflow: hidden;
}

#cc-consent-banner.cc-modal-backdrop .cc-container .cc-font,
#cc-consent-banner.cc-modal-backdrop .cc-b,
#cc-consent-banner.cc-modal-backdrop .cc-b p,
#cc-consent-banner.cc-modal-backdrop .cc-b li,
#cc-consent-banner.cc-modal-backdrop .cc-b span,
#cc-consent-banner.cc-modal-backdrop .cc-b label {
  font-family: "Inter Tight", system-ui, sans-serif !important;
  color: var(--cc-tekst) !important;
}
#cc-consent-banner.cc-modal-backdrop .cc-container .cc-font { font-size: calc(15 * var(--u)) !important; line-height: 1.55; }
/* CookieConfirm kleurt alles in de tabs met ".cc-tab-content *"; daar moet een sterkere regel overheen */
#cc-consent-banner.cc-modal-backdrop .cc-tab-contents .cc-tab-content * {
  color: var(--cc-tekst) !important;
  font-family: "Inter Tight", system-ui, sans-serif !important;
}
#cc-consent-banner.cc-modal-backdrop .cc-tab-contents .cc-tab-content .cc-main-content,
#cc-consent-banner.cc-modal-backdrop .cc-tab-contents .cc-tab-content .cc-main-content * { color: var(--cc-zacht) !important; }
#cc-consent-banner.cc-modal-backdrop .cc-tab-contents .cc-tab-content a { color: var(--cc-tekst) !important; }
#cc-consent-banner.cc-modal-backdrop .cc-tab-contents .cc-tab-content .cc-accordion-header p,
#cc-consent-banner.cc-modal-backdrop .cc-tab-contents .cc-tab-content .cc-box-container p { color: var(--cc-zacht) !important; }
#cc-consent-banner.cc-modal-backdrop .cc-main-content strong,
#cc-consent-banner.cc-modal-backdrop .cc-font-bold,
#cc-consent-banner.cc-modal-backdrop .cc-text-bold-flex { color: var(--cc-tekst) !important; font-weight: 600 !important; }

/* Tabs: het label-lettertype van de site (Fragment Mono, kapitalen), navy streep onder de actieve tab */
#cc-consent-banner.cc-modal-backdrop .cc-tab-navigation { border-bottom: 1px solid var(--cc-lijn); }
#cc-consent-banner.cc-modal-backdrop .cc-tab-button {
  font-family: "Fragment Mono", monospace !important;
  font-size: calc(11 * var(--u)) !important;
  font-weight: 400 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cc-zacht) !important;
  background: transparent !important;
  padding: calc(18 * var(--u)) calc(16 * var(--u)) !important;
}
#cc-consent-banner.cc-modal-backdrop .cc-tab-button.cc-active {
  color: var(--cc-tekst) !important;
  border-bottom: 2px solid var(--navy) !important;
}

/* Links in de tekst */
#cc-consent-banner.cc-modal-backdrop a,
#cc-consent-banner.cc-modal-backdrop .cc-privacy-policy-link { color: var(--cc-tekst) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Uitklapblokken per categorie (tab "Over cookies"): wit vlak op het glas */
#cc-consent-banner.cc-modal-backdrop .cc-accordion-item { border-color: var(--cc-lijn) !important; }
#cc-consent-banner.cc-modal-backdrop .cc-accordion-header,
#cc-consent-banner.cc-modal-backdrop .cc-box-card,
#cc-consent-banner.cc-modal-backdrop .cc-content-box {
  background-color: #fff !important;
  border-color: rgba(10, 29, 41, .07) !important;
  border-radius: calc(16 * var(--u)) !important;
  color: var(--cc-tekst) !important;
  box-shadow: 0 1px 2px rgba(10, 29, 41, .04) !important;
}
#cc-consent-banner.cc-modal-backdrop .cc-box-container { border-bottom-color: var(--cc-lijn) !important; }
#cc-consent-banner.cc-modal-backdrop .cc-accordion-icon { filter: none; color: var(--cc-tekst); }

/* Schakelaars: aan is navy met een lime bolletje (zoals de pijlcirkels op de site), uit is een lichte baan met
   een wit bolletje. "Functioneel" staat altijd aan en is niet te bedienen: dezelfde vorm, gedempt. */
#cc-consent-banner.cc-modal-backdrop .cc-toggle .cc-track,
#cc-consent-banner.cc-modal-backdrop .cc-toggle-switch .cc-track { background-color: rgba(10, 29, 41, .14) !important; box-shadow: inset 0 1px 2px rgba(10, 29, 41, .12) !important; transition: background-color .25s; }
#cc-consent-banner.cc-modal-backdrop .cc-toggle .cc-thumb,
#cc-consent-banner.cc-modal-backdrop .cc-toggle-switch .cc-thumb { background-color: #fff !important; box-shadow: 0 1px 3px rgba(10, 29, 41, .3) !important; transition: background-color .25s, transform .25s var(--ease); }
#cc-consent-banner.cc-modal-backdrop .cc-toggle input:checked + .cc-track,
#cc-consent-banner.cc-modal-backdrop .cc-toggle-switch .cc-track { background-color: var(--navy) !important; box-shadow: none !important; }
#cc-consent-banner.cc-modal-backdrop .cc-toggle input:checked + .cc-track + .cc-thumb,
#cc-consent-banner.cc-modal-backdrop .cc-toggle-switch .cc-thumb { background-color: var(--lime) !important; box-shadow: none !important; }
#cc-consent-banner.cc-modal-backdrop .cc-toggle-switch.cc-not-toggleable { opacity: .45; }

/* Voettekst met de knoppen. CookieConfirm legt er een witte schaduw boven; die gaat weg, het glas loopt door. */
#cc-consent-banner.cc-modal-backdrop .cc-banner-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--cc-lijn) !important;
  box-shadow: none !important;
}
#cc-consent-banner.cc-modal-backdrop .cc-banner-footer .cc-footer-content .cc-button {
  font-family: "Inter Tight", system-ui, sans-serif !important;
  font-size: calc(15 * var(--u)) !important;
  font-weight: 700 !important;
  min-height: calc(50 * var(--u));
  border-radius: calc(999 * var(--u)) !important;
  padding: calc(8 * var(--u)) calc(22 * var(--u)) !important;
  background: transparent !important;
  color: var(--cc-tekst) !important;
  border: 1px solid rgba(10, 29, 41, .18) !important;
  transition: background-color .25s, border-color .25s, box-shadow .35s var(--ease);
}
#cc-consent-banner.cc-modal-backdrop .cc-banner-footer .cc-footer-content .cc-button:hover {
  opacity: 1 !important;
  border-color: rgba(10, 29, 41, .4) !important;
  background: #fff !important;
}
/* "Accepteer alles" is de pil van de site: lime, navy tekst, rechts een navy cirkel met een lime pijl die bij hover draait */
#cc-consent-banner.cc-modal-backdrop .cc-banner-footer .cc-footer-content #cc-accept-all {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u)) calc(24 * var(--u)) !important;
  background: var(--lime) !important;
  color: var(--navy) !important;
  border-color: var(--lime) !important;
  box-shadow: 0 8px 24px -10px rgba(120, 170, 20, .55) !important;
}
#cc-consent-banner.cc-modal-backdrop .cc-banner-footer .cc-footer-content #cc-accept-all::after {
  content: "";
  flex: none;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8h10.5M8.75 3.5 13.25 8l-4.5 4.5' fill='none' stroke='%23c8f560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 45% no-repeat;
  transition: transform .35s var(--ease);
}
#cc-consent-banner.cc-modal-backdrop .cc-banner-footer .cc-footer-content #cc-accept-all:hover {
  background: #d6fb7c !important;
  box-shadow: 0 0 0 calc(4 * var(--u)) rgba(200, 245, 96, .3), 0 8px 24px -10px rgba(120, 170, 20, .55) !important;
}
#cc-consent-banner.cc-modal-backdrop .cc-banner-footer .cc-footer-content #cc-accept-all:hover::after { transform: rotate(-45deg); }

/* Focus zichtbaar op de lichte achtergrond */
#cc-consent-banner.cc-modal-backdrop .cc-tab-button:focus-visible,
#cc-consent-banner.cc-modal-backdrop .cc-button:focus-visible,
#cc-consent-banner.cc-modal-backdrop .cc-toggle:focus-visible { outline: 2px solid var(--navy) !important; outline-offset: 2px; }

#cc-consent-banner.cc-modal-backdrop .cc-consent-id-container { color: var(--cc-zacht) !important; }