/* ============================================================
   Cookie banner and preferences panel.

   Not cookie-consent.css: AdGuard's annoyances list blocks the
   substring `/cookie-consent.` outright, so this file never
   reached a visitor running it and the banner rendered unstyled.
   See site-preferences.js for the whole story; keep both names
   away from those words.

   Loaded only when analytics is configured — the fragment that
   renders the banner is the same one that links this file, so a
   site with no providers ships neither.

   The region is a direct child of <body> on purpose: a fixed
   element inside an ancestor with a filter or a transform is
   positioned against that ancestor instead of the viewport, and
   the shared nav has both.
   ============================================================ */

.cc {
  position: fixed;
  z-index: 1100;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.cc__card {
  pointer-events: auto;
  width: min(640px, 100%);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: 18px 20px;
  animation: cc-rise .18s ease-out;
}

@keyframes cc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.cc__copy {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.cc__copy a {
  color: var(--green-deep);
  text-decoration: underline;
}

.cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The two real answers lead; the third opens the detail. */
.cc__actions .btn--ghost {
  margin-left: auto;
}

.cc__categories {
  margin: 0 0 14px;
  display: grid;
  gap: 2px;
}

.cc__category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-top: 1px solid var(--border);
}

.cc__category:first-child {
  border-top: 0;
}

.cc__category-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.cc__category-note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

.cc__category .toggle {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Necessary cookies are not a choice, so the switch is shown on and disabled rather than hidden —
   the visitor can still see what is being set. */
.cc__category .toggle:disabled {
  cursor: default;
  opacity: .55;
}

/* The footer entry point back into the panel: a <button> that has to read, and hover, as one of the
   links beside it. Colour, weight and hover are .foot__nav's in redesign.css so the two cannot
   drift apart — inheriting them from .foot instead left it dimmer and a weight lighter than its
   neighbours, which reads as disabled — and redesign.css's global button rule already strips the
   border, background and font-family. What is left is what neither of those covers. Rendered
   hidden, and revealed by site-preferences.js. */
.cc-reopen {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

@media (max-width: 560px) {
  .cc {
    padding: 10px;
  }

  .cc__card {
    padding: 16px;
  }

  .cc__actions .btn {
    flex: 1 1 auto;
  }

  .cc__actions .btn--ghost {
    margin-left: 0;
    flex-basis: 100%;
  }
}