/* The Consent Kit — banner styles. Restyle freely; uses CSS vars you can override. */
.ck{
  --ck-bg:#ffffff; --ck-ink:#141210; --ck-muted:#5b544c;
  --ck-accent:#FF4A1C; --ck-line:#141210; --ck-radius:14px;
  position:fixed; left:20px; right:auto; bottom:20px; z-index:2147483000;
  width:420px; max-width:calc(100vw - 32px);
  background:var(--ck-bg); color:var(--ck-ink);
  border:2px solid var(--ck-line); border-radius:var(--ck-radius);
  box-shadow:6px 6px 0 var(--ck-line);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  animation:ck-in .25s ease-out;
}
@media (max-width:560px){ .ck{ left:0; right:0; bottom:0; width:100%; border-radius:14px 14px 0 0; } }
@keyframes ck-in{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .ck{ animation:none } }

.ck__in{ padding:20px 22px }
.ck__title{ margin:0 0 6px; font-size:18px; font-weight:800 }
.ck__desc{ margin:0; font-size:14px; line-height:1.5; color:var(--ck-muted) }
.ck__desc a{ color:var(--ck-accent); font-weight:700 }

.ck__details{ display:flex; flex-direction:column; gap:12px; margin:14px 0; padding:14px 0;
  border-top:1.5px solid rgba(20,18,16,.12); border-bottom:1.5px solid rgba(20,18,16,.12) }
/* display:flex would otherwise override the hidden attribute (author styles beat
   the UA's [hidden]{display:none}), leaving the panel permanently expanded. */
.ck__details[hidden]{ display:none }
.ck__cat{ display:flex; gap:10px; align-items:flex-start; cursor:pointer }
.ck__tog{ margin-top:3px; width:18px; height:18px; accent-color:var(--ck-accent); flex:none; cursor:pointer }
.ck__tog:disabled{ opacity:.5; cursor:not-allowed }
.ck__cat-txt{ display:flex; flex-direction:column; gap:2px }
.ck__cat-l{ font-weight:700; font-size:14px }
.ck__cat-l small{ font-weight:500; color:var(--ck-muted) }
.ck__cat-d{ font-size:13px; color:var(--ck-muted); line-height:1.4 }

.ck__actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:14px }
.ck__btn{ appearance:none; border:2px solid var(--ck-line); border-radius:10px;
  padding:9px 16px; font:inherit; font-weight:800; font-size:14px; cursor:pointer;
  box-shadow:3px 3px 0 var(--ck-line); transition:transform .05s, box-shadow .05s }
.ck__btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ck-line) }
.ck__btn:focus-visible{ outline:3px solid var(--ck-accent); outline-offset:2px }
.ck__btn--ghost{ background:#fff; color:var(--ck-ink) }
.ck__btn--primary{ background:var(--ck-accent); color:#fff }

@media (max-width:420px){
  .ck__actions{ justify-content:stretch }
  .ck__btn{ flex:1 1 calc(50% - 4px) }
  .ck__btn--primary[data-a="accept"]{ flex-basis:100%; order:-1 }
}