/* Cookiebanner – eigen klassen (gc-), los van thema en designs */
.gc {
  --gc-bg: #fff; --gc-fg: #16181d; --gc-muted: #4a5160; --gc-line: #e3e6eb; --gc-soft: #f4f5f7; --gc-off: #cdd2d9;
  --gc-p: #007d9c; --gc-pt: #fff; --gc-r: 16px;
  position: fixed; inset: 0; z-index: 2147483000; display: flex; padding: 16px; pointer-events: none;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--gc-fg);
}
.gc-font-inherit, .gc-font-inherit .gc-btn { font-family: inherit; }
.gc[hidden], .gc [hidden] { display: none !important; }
.gc:focus { outline: none; }
.gc *, .gc *::before, .gc *::after { box-sizing: border-box; }

/* Thema's */
.gc-th-dark { --gc-bg: #1b1e24; --gc-fg: #f2f4f7; --gc-muted: #b4bac5; --gc-line: #333944; --gc-soft: #242830; --gc-off: #4a515d; }
@media (prefers-color-scheme: dark) {
  .gc-th-auto { --gc-bg: #1b1e24; --gc-fg: #f2f4f7; --gc-muted: #b4bac5; --gc-line: #333944; --gc-soft: #242830; --gc-off: #4a515d; }
}

/* Achtergrond */
.gc-ov { position: fixed; inset: 0; display: none; }
.gc-ov-dim, .gc-ov-blur { pointer-events: auto; }
.gc-ov-dim .gc-ov, .gc-ov-blur .gc-ov { display: block; background: rgba(10, 12, 16, .5); }
.gc-ov-blur .gc-ov { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Posities */
.gc-pos-center { align-items: center; justify-content: center; }
.gc-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
.gc-pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
.gc-pos-bottom-center { align-items: flex-end; justify-content: center; }
.gc-pos-top-right { align-items: flex-start; justify-content: flex-end; }
.gc-pos-top-left { align-items: flex-start; justify-content: flex-start; }
.gc-pos-bar-bottom { align-items: flex-end; padding: 0; }
.gc-pos-bar-top { align-items: flex-start; padding: 0; }

/* Venster */
.gc-box {
  position: relative; pointer-events: auto; display: flex; flex-direction: column;
  width: 100%; max-width: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--gc-bg); border-radius: var(--gc-r); padding: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .06);
}
.gc-pos-center .gc-box { max-width: 560px; }
.gc-pos-bottom-center .gc-box { max-width: 680px; }
.gc-st-tabs .gc-box { max-width: 600px; padding: 0; }
.gc-st-tabs.gc-pos-bottom-left .gc-box, .gc-st-tabs.gc-pos-bottom-right .gc-box,
.gc-st-tabs.gc-pos-top-left .gc-box, .gc-st-tabs.gc-pos-top-right .gc-box { max-width: 480px; }
.gc-bar .gc-box { max-width: none; border-radius: 0; max-height: 85vh; }
.gc-pos-bar-bottom .gc-box { box-shadow: 0 -8px 30px rgba(0, 0, 0, .14); }
.gc-pos-bar-top .gc-box { box-shadow: 0 8px 30px rgba(0, 0, 0, .14); }

/* Balk: tekst links, knoppen rechts (compact) */
.gc-bar.gc-st-compact .gc-box {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 4px 28px; align-items: start;
  padding: 18px max(20px, calc((100vw - 1180px) / 2));
}
.gc-bar.gc-st-compact .gc-head, .gc-bar.gc-st-compact .gc-body { grid-column: 1; }
.gc-bar.gc-st-compact .gc-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; min-width: 240px; flex-direction: column; }
.gc-bar.gc-st-compact .gc-actions .gc-btn { flex: none; }
.gc-bar.gc-st-compact .gc-actions { align-self: center; }
.gc-bar.gc-st-compact .gc-text, .gc-bar.gc-st-compact .gc-inline { margin-bottom: 6px; }
.gc-bar.gc-st-tabs .gc-box > * { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Kop en tabbladen */
.gc-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.gc-st-tabs .gc-head { padding: 18px 22px 12px; margin: 0; }
.gc-logo { display: block; height: 28px; width: auto; max-width: 140px; object-fit: contain; }
.gc-title { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.3; }
.gc-tabs { display: flex; border-bottom: 1px solid var(--gc-line); padding: 0 12px; }
.gc-tabs button {
  flex: 1; appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 10px 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--gc-muted); cursor: pointer;
}
.gc-tabs button[aria-selected="true"] { color: var(--gc-p); border-bottom-color: var(--gc-p); }
.gc-tabs button:hover { color: var(--gc-fg); }
.gc-tabs button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -3px; }

/* Inhoud */
.gc-body { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.gc-st-tabs .gc-body { padding: 16px 22px 4px; max-height: 46vh; }
.gc-text { margin: 0 0 14px; color: var(--gc-muted); font-size: 14px; }
.gc-text a, .gc-about a { color: var(--gc-p); }
.gc-th-dark .gc-text a, .gc-th-dark .gc-about a { color: inherit; }
.gc-about { font-size: 14px; color: var(--gc-muted); }
.gc-about p { margin: 0 0 10px; }

/* Categorieën in de eerste laag */
.gc-inline { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gc-chip { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--gc-line); border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Voorkeuren */
.gc-prefs { display: grid; gap: 10px; margin: 0 0 14px; }
.gc-cat { border: 1px solid var(--gc-line); border-radius: min(var(--gc-r), 12px); padding: 10px 12px; }
.gc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.gc-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--gc-soft); color: var(--gc-muted); font-size: 12px; font-weight: 600; text-align: center; }
.gc-cat-desc { display: block; font-size: 13px; color: var(--gc-muted); margin-top: 4px; }
.gc-cookies { margin-top: 6px; font-size: 13px; }
.gc-cookies summary { cursor: pointer; color: var(--gc-p); font-weight: 600; width: max-content; }
.gc-th-dark .gc-cookies summary { color: inherit; text-decoration: underline; }
.gc-cookies ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gc-cookies li { background: var(--gc-soft); border-radius: 8px; padding: 7px 10px; }
.gc-meta { color: var(--gc-muted); font-size: 12px; }
.gc-purpose { display: block; color: var(--gc-muted); }

/* Schakelaars */
.gc-switch { position: relative; display: inline-flex; flex: none; }
.gc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gc-sw { width: 40px; height: 22px; border-radius: 99px; background: var(--gc-off); position: relative; transition: background .15s; }
.gc-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.gc-switch input:checked + .gc-sw { background: var(--gc-p); }
.gc-switch input:checked + .gc-sw::after { transform: translateX(18px); }
.gc-switch input:disabled { cursor: default; }
.gc-switch input:disabled + .gc-sw { opacity: .55; }
.gc-switch input:focus-visible + .gc-sw { outline: 3px solid #1d4ed8; outline-offset: 2px; }

/* Knoppen – weigeren, selectie en accepteren zijn bewust gelijkwaardig */
.gc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gc-st-tabs .gc-actions { padding: 14px 22px 18px; border-top: 1px solid var(--gc-line); margin: 0; }
.gc-btn {
  flex: 1 1 130px; appearance: none; border: 2px solid var(--gc-p); background: var(--gc-p); color: var(--gc-pt);
  font: inherit; font-weight: 600; font-size: 14px; padding: 10px 14px; border-radius: min(var(--gc-r), 10px); cursor: pointer; line-height: 1.2;
}
.gc-b-outline .gc-btn { background: transparent; color: var(--gc-p); }
.gc-b-soft .gc-btn { background: color-mix(in srgb, var(--gc-p) 12%, var(--gc-bg)); border-color: transparent; color: var(--gc-p); }
.gc-th-dark.gc-b-outline .gc-btn, .gc-th-dark.gc-b-soft .gc-btn { color: var(--gc-fg); }
.gc-btn:hover { filter: brightness(1.08); }
.gc-btn:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.gc .gc-link { flex-basis: 100%; background: transparent; border-color: transparent; color: var(--gc-p); padding: 6px; text-decoration: underline; text-underline-offset: 3px; }
.gc-th-dark .gc-link { color: var(--gc-fg); }
.gc-pos-center .gc-btn, .gc-pos-bottom-center .gc-btn, .gc-st-tabs .gc-btn { flex-basis: 120px; }
.gc-st-tabs .gc-actions .gc-link, .gc-pos-bottom-center .gc-link { flex: 0 0 auto; }
.gc-st-tabs .gc-btn { white-space: nowrap; flex: 1 1 auto; }

/* Inschuiven */
@keyframes gc-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gc-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes gc-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gc-fade { from { opacity: 0; } to { opacity: 1; } }
.gc-anim .gc-box { animation: gc-up .28s ease-out both; }
.gc-anim.gc-pos-top-left .gc-box, .gc-anim.gc-pos-top-right .gc-box, .gc-anim.gc-pos-bar-top .gc-box { animation-name: gc-down; }
.gc-anim.gc-pos-center .gc-box { animation-name: gc-zoom; }
.gc-anim .gc-ov { animation: gc-fade .2s ease-out both; }

/* Zwevende knop */
.gc-fab { position: fixed; bottom: 16px; z-index: 2147482000; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--gc-p, #007d9c); box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06); cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.gc-fab-left { left: 16px; }
.gc-fab-right { right: 16px; }
.gc-fab[hidden] { display: none; }
.gc-fab:hover { transform: scale(1.06); }
.gc-fab:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

/* Geblokkeerde embeds */
.gc-blocked { border: 1px dashed #c9ced6; border-radius: 12px; padding: 18px; text-align: center; background: #f7f8fa; font-size: 14px; color: #4a5160; }
.gc-blocked .gc-btn { flex: none; display: inline-block; background: var(--gc-p, #007d9c); border-color: var(--gc-p, #007d9c); color: #fff; }

/* Mobiel: hoeken worden een paneel onderin */
@media (max-width: 640px) {
  .gc { padding: 8px; }
  .gc-pos-bottom-right, .gc-pos-bottom-left, .gc-pos-bottom-center { justify-content: center; }
  .gc-pos-top-right, .gc-pos-top-left { justify-content: center; align-items: flex-end; }
  .gc-box { max-width: none !important; padding: 18px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .gc-st-tabs .gc-box { padding: 0; }
  .gc-st-tabs .gc-body { max-height: 50vh; padding: 14px 16px 4px; }
  .gc-st-tabs .gc-head { padding: 14px 16px 10px; }
  .gc-st-tabs .gc-actions { padding: 12px 16px 14px; }
  .gc-bar.gc-st-compact .gc-box { grid-template-columns: 1fr; padding: 16px; }
  .gc-bar.gc-st-compact .gc-actions { grid-column: 1; grid-row: auto; min-width: 0; flex-direction: row; }
  .gc-bar.gc-st-compact .gc-actions .gc-btn { flex: 1 1 130px; }
  .gc-tabs button { font-size: 13px; padding: 9px 4px; }
  .gc-pos-top-left.gc-anim .gc-box, .gc-pos-top-right.gc-anim .gc-box { animation-name: gc-up; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-anim .gc-box, .gc-anim .gc-ov { animation: none; }
  .gc-sw, .gc-sw::after, .gc-fab { transition: none; }
}