/*
 * Cookie consent banner and preferences panel.
 *
 * Colours are taken from tokens.css where one exists. The banner is rendered
 * by cookie-consent.js and is the only thing on the page that may appear
 * before the visitor has made a choice, so it carries its own layout rather
 * than depending on any page's styles.
 */

.sns-cc {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 99999;
  background: var(--sns-ink, #101828);
  color: #fff;
  font: 14px/1.55 Inter, system-ui, sans-serif;
  padding: 18px 24px;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25);
}

.sns-cc[hidden] { display: none; }

.sns-cc-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px 20px;
  flex-wrap: wrap;
}

.sns-cc-text { flex: 1 1 320px; min-width: 260px; margin: 0; }
.sns-cc-text a { color: #BFD4F2; text-decoration: underline; }

.sns-cc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.sns-cc-btn {
  font: 600 14px/1 Inter, system-ui, sans-serif;
  border-radius: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.sns-cc-accept { background: #2563EB; color: #fff; }
.sns-cc-reject { background: #fff; color: #101828; }
.sns-cc-manage { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }

.sns-cc-btn:focus-visible { outline: 3px solid #BFD4F2; outline-offset: 2px; }

/* Preferences panel */
.sns-cc-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 16px;
  padding-top: 16px;
  max-width: 1100px;
  margin-inline: auto;
}

.sns-cc-panel[hidden] { display: none; }

.sns-cc-cat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
}

.sns-cc-cat + .sns-cc-cat { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sns-cc-cat input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.sns-cc-cat label { font-weight: 600; cursor: pointer; }
.sns-cc-cat p { margin: 3px 0 0; opacity: 0.8; font-size: 13px; }
.sns-cc-cat input:disabled + div label { cursor: default; opacity: 0.75; }

@media (max-width: 640px) {
  .sns-cc { padding: 16px; }
  .sns-cc-actions { width: 100%; }
  .sns-cc-btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .sns-cc { animation: sns-cc-in 0.24s ease-out; }
  @keyframes sns-cc-in { from { transform: translateY(100%); } to { transform: none; } }
}