/* consent-kit styles — themeable via CSS vars. Override у проєкті під бренд DS. */
#cc-banner {
  --cc-bg: #fff;
  --cc-fg: #1a1a1a;
  --cc-muted: #666;
  --cc-border: #e3e3e3;
  --cc-accent: #1a1a1a;       /* свопнути на brand accent */
  --cc-accent-fg: #fff;
  --cc-radius: 12px;
  --cc-max: 720px;

  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 2147483000;
  margin: 0 auto;
  max-width: var(--cc-max);
  background: var(--cc-bg);
  color: var(--cc-fg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  animation: cc-in .25s ease;
}
@media (prefers-reduced-motion: reduce) { #cc-banner { animation: none; } }
@keyframes cc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#cc-banner .cc-inner { padding: 18px 20px; }
#cc-banner .cc-title { font-size: 15px; }
#cc-banner .cc-text p { margin: 6px 0 0; color: var(--cc-muted); }
#cc-banner a { color: inherit; text-underline-offset: 2px; }

#cc-banner .cc-cats { margin: 14px 0 4px; display: grid; gap: 10px; }
#cc-banner .cc-cat { display: flex; gap: 10px; align-items: start; cursor: pointer; }
#cc-banner .cc-cat small { color: var(--cc-muted); }
#cc-banner .cc-cat input { margin-top: 3px; }

#cc-banner .cc-actions {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
}
#cc-banner .cc-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 8px; border: 1px solid var(--cc-border);
  background: var(--cc-bg); color: var(--cc-fg);
}
/* Symmetric: accept і reject — однаковий розмір/вага. Лише колір різний. */
#cc-banner .cc-accept { background: var(--cc-accent); color: var(--cc-accent-fg); border-color: var(--cc-accent); }
#cc-banner .cc-reject { background: var(--cc-bg); }
#cc-banner .cc-ghost { border-style: dashed; }
#cc-banner .cc-btn:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }

@media (max-width: 520px) {
  #cc-banner .cc-actions { flex-direction: column-reverse; }
  #cc-banner .cc-btn { width: 100%; }
}

@media (prefers-color-scheme: dark) {
  #cc-banner {
    --cc-bg: #161616; --cc-fg: #f2f2f2; --cc-muted: #a0a0a0;
    --cc-border: #2e2e2e; --cc-accent: #f2f2f2; --cc-accent-fg: #161616;
  }
}