/* ==========================================================================
   Cookie consent — banner and Cookie settings panel.
   Figma: "☠️ 25 Marketing website" › website › Cookie consent, component
   cookie-consent (one responsive component, Type banner / customise).
   Tokens and .btn come from site.css (load that first).
   Phones: full width, 12px inset. 768+: card pinned bottom-right, 40px
   inset, max 20rem wide so it covers as little as possible. The three
   buttons share one row at every width.
   ========================================================================== */

.cc {
  position: fixed;
  z-index: 250; /* above the header (50) and intro (100), under the bar tints (300) */
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 24px 24px 28px;
  background: var(--bg-surface);
  color: var(--fg-primary);
  border: 2px solid var(--border-solid);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  font-stretch: 100%;
  text-align: left;
}
.cc[hidden] { display: none; }

/* Motion: rise 24px over 500ms. The shadow is part of the card from the
   start, not stamped in afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .cc.is-in { animation: cc-rise 500ms var(--ease) both; }
}
@keyframes cc-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.cc__copy { display: flex; flex-direction: column; align-items: flex-start; }
.cc__title { font-stretch: 75%; font-weight: 800; font-size: 20px; line-height: 28px; }
.cc__title:focus { outline: none; }
.cc__title:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 3px; }
.cc__body { font-stretch: 89%; font-size: 14px; line-height: 20px; }
.cc__link { font-size: 14px; line-height: 20px; font-weight: 600; text-underline-offset: 3px; }

.cc__actions { display: flex; gap: 8px; padding-bottom: 2px; }
.cc__actions .btn { flex: 1 1 0; min-width: 0; }
.cc__save { width: 100%; }

/* Library button Size=xs (label/xs/em): 32 tall, 2px shadow. */
.cc .btn { height: 32px; padding: 0 8px; font-size: 12px; line-height: 12px; font-weight: 600; box-shadow: var(--shadow-xs); }
.cc .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--btn-edge); }

/* Categories */
.cc__cats { display: flex; flex-direction: column; }
.cc__cat { display: flex; align-items: center; gap: 16px; padding: 8px 0; border-top: 2px solid var(--border-subtle); }
.cc__cat:last-child { border-bottom: 2px solid var(--border-subtle); }
.cc__cat-label { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cc__cat-name { font-size: 14px; line-height: 20px; font-weight: 600; }
.cc__cat-desc { font-stretch: 89%; font-size: 12px; line-height: 16px; color: var(--fg-secondary); }

/* Toggle switch (library "toggle", 48 x 32) */
.cc__switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 48px;
  height: 32px;
  margin: 0;
  border: 2px solid var(--border-solid);
  border-radius: var(--radius-full);
  background: var(--bg-default);
  cursor: pointer;
  transition: background-color 150ms;
}
.cc__switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fg-primary);
  transition: transform 200ms var(--ease), background-color 150ms;
}
.cc__switch:checked { background: var(--brand-primary); }
.cc__switch:checked::after { transform: translateX(16px); background: var(--bg-default); }
.cc__switch:disabled { opacity: .5; cursor: not-allowed; }

@media (min-width: 768px) {
  .cc { left: auto; right: 40px; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 80px); max-width: 20rem; max-height: calc(100dvh - 80px); }
}