/* Cookiemelding (js/cookies.js): rechtsonder (linksonder staat het stalenbakje), zwart vlak met dunne rand.
   Weigeren en accepteren zijn even groot en even zichtbaar (GBA-richtlijn). Kleuren enkel #111, #FFF, #FFFF33.
   In: 300 ms, 24 px omhoog, ease-out. Uit: 200 ms, ease-in. */

.ck {
  position: fixed; right: var(--margin); bottom: 24px; z-index: 58;
  width: min(340px, calc(100vw - 2 * var(--margin))); padding: 16px 18px 18px;
  background: var(--black); color: var(--white); border: 1px solid #333;
  font-size: 13px; line-height: 1.45;
  opacity: 0; transform: translateY(24px); visibility: hidden;
  transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1), visibility 0s .2s;
}
.ck.on {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
}
.ck__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ck__title { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 600; }
.ck p { margin: 0; }
.ck a { text-decoration: underline; text-underline-offset: 3px; }
.ck a:hover { color: var(--yellow); }

/* Knoppen: allebei even groot (rand, wit), hover vult geel van links naar rechts zoals "Volgend project" */
.ck__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ck__btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #444; background: none; color: var(--white);
  font: inherit; font-family: var(--font-label); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
  transition: color .3s cubic-bezier(.65, 0, .35, 1), border-color .3s;
}
.ck__btn i { width: 8px; height: 8px; background: var(--yellow); flex: none; }
.ck__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.65, 0, .35, 1); }
.ck__btn:hover::before, .ck__btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.ck__btn:hover, .ck__btn:focus-visible { color: var(--black); border-color: var(--yellow); outline: none; }
.ck__btn:hover i, .ck__btn:focus-visible i { background: var(--black); }
.ck__more { flex: none; padding: 0; border: 0; background: none; color: #8A8A86; font-family: var(--font-label); font-size: 11px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck__more:hover { color: var(--white); }

/* Instellingen: per soort een rij met een vierkante schakelaar */
.ck__set { display: none; margin-top: 12px; border-top: 1px solid #333; }
.ck.open .ck__set { display: block; }
.ck.open .ck__more { visibility: hidden; }
.ck__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid #333; }
.ck__row b { font-weight: 600; }
.ck__row p { grid-column: 1 / -1; color: #8A8A86; font-size: 12px; }
/* Schakelaar: vierkant, geen ronde hoeken. Aan = geel blok rechts, uit = wit randje links. */
.ck__sw { position: relative; width: 34px; height: 18px; border: 1px solid #444; flex: none; }
.ck__sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ck__sw i { position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: #8A8A86; transition: transform .3s var(--ease-out), background-color .3s; pointer-events: none; }
.ck__sw input:checked + i { transform: translateX(16px); background: var(--yellow); }
.ck__sw input:focus-visible + i { outline: 1px solid var(--white); outline-offset: 2px; }
.ck__sw--on { opacity: .5; }   /* noodzakelijk: altijd aan */

@media (max-width: 900px) {
  .ck { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck, .ck.on, .ck__btn::before, .ck__sw i { transition: none; }
}