/* Busje komt zo: own cookie notice (consent.js). Squares design: square corners, 1px lines, brand teal.
   Runs on the redesigned pages, the static build and (WordPress) the old Divi pages, so every value has
   a var() fallback and the selectors reset theme styles (Divi p padding, button transforms). */
.bcz-cc, .bcz-cc *, .bcz-cc *::before, .bcz-cc *::after { box-sizing: border-box; }
.bcz-cc p { padding: 0; }
.bcz-cc button { text-transform: none; letter-spacing: normal; box-shadow: none; }
.bcz-cc[hidden], .bcz-cc [hidden] { display: none !important; }
.bcz-cc {
  position: fixed;
  z-index: 900;
  margin: 0;
  background: #fff;
  color: var(--text, #22343a);
  border-top: 1px solid var(--line, #d8e2e5);
  border-radius: 0;
  font-family: var(--font, 'Archivo', Arial, sans-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  overscroll-behavior: contain;
}
.bcz-cc .bcz-cc__title {
  grid-area: title;
  margin: 0 40px 6px 0;
  color: var(--ink, #0a2530);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}
.bcz-cc .bcz-cc__title:focus { outline: none; }
.bcz-cc .bcz-cc__title:focus-visible { outline: 3px solid var(--focus, #1769e0); outline-offset: 2px; }
.bcz-cc .bcz-cc__text { grid-area: text; margin: 0; max-width: 72ch; color: inherit; font-size: 15px; line-height: 1.5; }

.bcz-cc__actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.bcz-cc .bcz-cc__btn {
  min-height: 48px;
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: var(--brand, #004f62);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.bcz-cc .bcz-cc__btn:hover, .bcz-cc .bcz-cc__btn:focus-visible { background: var(--brand-deep, #00303d); color: #fff; }
.bcz-cc .bcz-cc__btn[data-cc="save"] { grid-column: 1 / -1; }
.bcz-cc .bcz-cc__btn:focus-visible, .bcz-cc .bcz-cc__close:focus-visible, .bcz-cc .bcz-cc__link:focus-visible,
.bcz-cc .bcz-cc__more a:focus-visible { outline: 3px solid var(--focus, #1769e0); outline-offset: 2px; }

.bcz-cc__more { grid-area: more; display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
.bcz-cc .bcz-cc__more a, .bcz-cc .bcz-cc__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand, #004f62);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bcz-cc .bcz-cc__more a:hover, .bcz-cc .bcz-cc__link:hover { color: var(--brand-deep, #00303d); }

.bcz-cc .bcz-cc__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink, #0a2530);
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.bcz-cc .bcz-cc__close:hover { color: var(--brand, #004f62); }

/* Settings layer. */
.bcz-cc__prefs { grid-area: prefs; margin-top: 12px; border-bottom: 1px solid var(--line, #d8e2e5); }
.bcz-cc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 56px;
  padding: 10px 0;
  border-top: 1px solid var(--line, #d8e2e5);
}
.bcz-cc .bcz-cc__label { display: grid; gap: 2px; margin: 0; color: inherit; font-size: inherit; font-weight: 400; cursor: pointer; }
.bcz-cc div.bcz-cc__label { cursor: default; }
.bcz-cc .bcz-cc__label strong { color: var(--ink, #0a2530); font-size: 15.5px; font-weight: 750; }
.bcz-cc .bcz-cc__label span { color: var(--muted, #5b737b); font-size: 14px; line-height: 1.45; }
.bcz-cc .bcz-cc__always { color: var(--brand, #004f62); font-size: 14px; font-weight: 750; white-space: nowrap; }
.bcz-cc .bcz-cc__toggle { display: inline-flex; align-items: center; gap: 8px; }
.bcz-cc .bcz-cc__state { min-width: 2.2em; color: var(--ink, #0a2530); font-size: 14px; font-weight: 700; }

/* Square on/off switch: a native checkbox with role="switch", 52x32, 24px knob. Off by default. */
.bcz-cc input.bcz-cc__switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--muted, #5b737b);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}
.bcz-cc input.bcz-cc__switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: var(--muted, #5b737b);
  transition: transform .15s ease, background-color .15s ease;
}
.bcz-cc input.bcz-cc__switch:hover { border-color: var(--brand, #004f62); }
.bcz-cc input.bcz-cc__switch:focus { box-shadow: none; outline: none; }
.bcz-cc input.bcz-cc__switch:focus-visible { outline: 3px solid var(--focus, #1769e0); outline-offset: 2px; }
.bcz-cc input.bcz-cc__switch:checked { background: var(--brand, #004f62); border-color: var(--brand, #004f62); }
.bcz-cc input.bcz-cc__switch:checked::before { transform: translateX(20px); background: #fff; }
.bcz-cc input.bcz-cc__switch:disabled { opacity: .45; cursor: not-allowed; }
/* QA 1.2.1 CC-13 / PA-08: a muted colour instead of opacity (#5b737b on white is 5.0:1). */
.bcz-cc input.bcz-cc__switch:disabled + .bcz-cc__state { color: var(--muted, #5b737b); }
.bcz-cc .bcz-cc__label .bcz-cc__hint { color: var(--muted, #5b737b); font-size: 13.5px; font-style: italic; }

.bcz-cc__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tablets (641-1060px): a card at the bottom left. Comes before the phone block, so landscape phones
   (LS, also 641px and wider) get the bottom sheet instead. */
@media (min-width: 641px) and (max-width: 1060px) {
  .bcz-cc {
    left: 16px;
    bottom: 16px;
    width: min(480px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 18px 20px 12px;
    border: 1px solid var(--line-strong, #b3c6cb);
    box-shadow: 0 24px 48px -24px rgba(0, 34, 44, .45);
  }
  /* QA 1.2.1 CC-10: in settings only the list scrolls, the buttons stay in view. */
  .bcz-cc.is-settings { display: flex; flex-direction: column; overflow: hidden; }
  .bcz-cc.is-settings .bcz-cc__prefs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .bcz-cc.is-settings .bcz-cc__actions { flex: none; }
}
/* Phones (and landscape phones): a bottom sheet without overlay. In settings it fills the screen. */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) and (max-width: 1060px) {
  .bcz-cc {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 14px 16px calc(6px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-style: solid;
    border-color: var(--line, #d8e2e5);
    box-shadow: 0 -16px 32px -20px rgba(0, 34, 44, .5);
  }
  .bcz-cc .bcz-cc__title { font-size: 17px; margin: 0 40px 6px 0; }
  .bcz-cc .bcz-cc__text { font-size: 14.5px; line-height: 1.5; }
  .bcz-cc__actions { margin-top: 12px; }
  .bcz-cc.is-settings { top: 0; max-height: none; display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden; }
  .bcz-cc.is-settings .bcz-cc__prefs { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  .bcz-cc.is-settings .bcz-cc__actions {
    position: sticky;
    bottom: 0;
    margin: 0 -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line, #d8e2e5);
  }
}
/* Very low screens (landscape phones, 400% zoom; QA 1.2.1 PA-03): in settings the whole card scrolls, with the
   three buttons in one sticky row; scroll-padding keeps a focused switch clear of that row. */
@media (max-height: 560px) and (max-width: 1060px) {
  .bcz-cc.is-settings { overflow-y: auto; scroll-padding-bottom: 88px; }
  .bcz-cc.is-settings .bcz-cc__prefs { flex: 0 0 auto; overflow: visible; }
  .bcz-cc.is-settings .bcz-cc__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bcz-cc.is-settings .bcz-cc__btn[data-cc="save"] { grid-column: auto; }
}
/* Landscape phones, first layer: text left, buttons right, at most about 45% of the height. */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) and (max-width: 1060px) {
  .bcz-cc:not(.is-settings) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    grid-template-areas: "title actions" "text actions" "more actions";
    column-gap: 20px;
    align-items: start;
    max-height: 45vh;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .bcz-cc:not(.is-settings) .bcz-cc__title { font-size: 16px; margin: 0 0 2px; }
  .bcz-cc:not(.is-settings) .bcz-cc__text { font-size: 13.5px; line-height: 1.45; }
  .bcz-cc:not(.is-settings) .bcz-cc__actions { grid-template-columns: 1fr; align-self: center; margin-top: 0; }
  .bcz-cc:not(.is-settings) .bcz-cc__more { margin-top: 0; }
  .bcz-cc:not(.is-settings) .bcz-cc__close { position: static; grid-area: more; justify-self: end; }
}
/* Desktop: a slim full-width bar; settings open as a card at the bottom left. */
@media (min-width: 1061px) {
  .bcz-cc {
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title actions" "text actions" "more actions";
    column-gap: 32px;
    align-items: center;
    padding: 14px max(24px, calc((100% - 1200px) / 2)) 10px;
    box-shadow: 0 -16px 32px -24px rgba(0, 34, 44, .4);
  }
  .bcz-cc .bcz-cc__title { margin-right: 0; }
  .bcz-cc:not(.is-settings) .bcz-cc__text { max-width: none; }
  .bcz-cc__actions { grid-template-columns: 180px 180px; margin-top: 0; }
  .bcz-cc__more { margin-top: 0; }
  .bcz-cc:not(.is-settings) .bcz-cc__more a, .bcz-cc:not(.is-settings) .bcz-cc__link { min-height: 36px; }
  .bcz-cc:not(.is-settings) .bcz-cc__close { position: static; grid-area: more; justify-self: end; }
  .bcz-cc.is-settings {
    left: 24px;
    right: auto;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100% - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    padding: 20px 24px;
    border: 1px solid var(--line-strong, #b3c6cb);
    box-shadow: 0 24px 48px -24px rgba(0, 34, 44, .45);
  }
  .bcz-cc.is-settings .bcz-cc__actions { grid-template-columns: 1fr 1fr; margin-top: 16px; flex: none; }
  /* QA 1.2.1 CC-10: only the list scrolls on short laptops (1280x600), the buttons stay in view. */
  .bcz-cc.is-settings .bcz-cc__prefs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
/* QA 1.2.1 CC-15: the settings layer is modal from 641px (the page is inert), so the page is dimmed behind it.
   Phones and landscape phones get a full-screen layer instead. */
@media (min-width: 641px) {
  body.bcz-cc-open:has(.bcz-cc.is-settings)::before { content: ""; position: fixed; inset: 0; z-index: 899; background: rgba(0, 34, 44, .45); }
}

/* Never two bottom layers at once: the notice hides the bottom bar and floating widgets while open. */
/* !important: the Click to Chat plugin sets an inline display on .ht-ctc (QA 1.2.1 CC-04). */
body.bcz-cc-open .mobile-actions, body.bcz-cc-open .ht-ctc, body.bcz-cc-open .et_pb_scroll_top { display: none !important; }
body.bcz-cc-open .grecaptcha-badge { visibility: hidden !important; }
body.menu-open .bcz-cc { visibility: hidden; }

/* "Cookie-instellingen" trigger in footers and on the privacy/cookie pages. */
footer .cookie-settings-link, .bcz-cookie-policy .cookie-settings-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.bcz-cookie-policy .cookie-settings-link { color: var(--brand, #004f62); font-weight: 700; }
.bcz-cc-footer-line { margin: 0; padding: 8px 16px; text-align: center; }
.bcz-cookie-policy table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.bcz-cookie-policy th, .bcz-cookie-policy td { padding: 8px 10px; border: 1px solid #d8e2e5; text-align: left; vertical-align: top; }

/* Google Maps click-to-load placeholder (WordPress, old Divi pages). */
.bcz-embed {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  width: 100%;
  min-height: 220px;
  padding: 20px;
  border: 1px solid #d8e2e5;
  background: #f5f7f8;
  color: #22343a;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.bcz-embed p { margin: 0; padding: 0; max-width: 46ch; }
.bcz-embed .bcz-embed__btn {
  min-height: 48px;
  padding: 8px 18px;
  border: 0;
  border-radius: 0;
  background: #004f62;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.bcz-embed .bcz-embed__btn:hover, .bcz-embed .bcz-embed__btn:focus-visible { background: #00303d; }
.bcz-embed .bcz-embed__btn:focus-visible { outline: 3px solid #1769e0; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bcz-cc input.bcz-cc__switch::before { transition: none; }
}
@media print {
  .bcz-cc { display: none !important; }
}