/*
 * The cookie notice. Self-contained (its own colours and type) because it is
 * shown on both the anynaz pages and the Kinship pages, which use different
 * stylesheets. Loaded only while the notice is on screen.
 */

.consent {
  --consent-ink: #111111;
  --consent-soft: #5a5a5a;
  --consent-paper: #ffffff;
  --consent-line: #8a8a8a;

  /* Sticky, not fixed: it stays at the bottom of the screen while there is
     page below it, and never covers the footer at the end. */
  position: sticky;
  bottom: 0;
  z-index: 50;
  padding: 0 16px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.consent__box {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 22px;
  border: 1px solid var(--consent-ink);
  background: var(--consent-paper);
  color: var(--consent-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 12px 28px -18px rgba(17, 17, 17, 0.55);
}

.consent__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.consent__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--consent-soft);
}

.consent__text a {
  color: var(--consent-ink);
  border-bottom: 1px solid var(--consent-soft);
  text-decoration: none;
}

/* Two answers of equal weight: neither is styled as the "right" one. */
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consent__button {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--consent-ink);
  background: var(--consent-paper);
  color: var(--consent-ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.consent__button:hover:not(:disabled) {
  background: var(--consent-ink);
  color: var(--consent-paper);
}

.consent__button:focus-visible {
  outline: 2px solid var(--consent-ink);
  outline-offset: 2px;
}

.consent__button:disabled { cursor: progress; }

@media (forced-colors: active) {
  .consent__box,
  .consent__button { border-color: CanvasText; }
}

@media (prefers-reduced-motion: no-preference) {
  .consent__button { transition: background-color 120ms linear, color 120ms linear; }
}