/* Cookie consent.
   Native checkbox styled as a switch (WAI-ARIA APG switch pattern, role="switch"
   on input[type=checkbox] — the checked state stays native, no JS sync needed:
   w3.org/WAI/ARIA/apg/patterns/switch). Fixed overlay + centered card is the
   standard modal-centering technique; no separate dim scrim — the design's
   translucent card background (rgba over the page) is the only treatment. */

.cookie-consent,
.cookie-options {
  position: fixed;
  inset: 0;
  z-index: 30; /* above the menu overlay (20, menu.css) — consent blocks everything else */
  display: grid;
  place-items: center;
  padding: var(--gutter);
  /* no backdrop dimming (by design), so the empty space around the card
     shouldn't swallow clicks either — e.g. the header's EN/ES language
     switcher must stay usable while this is up */
  pointer-events: none;
}

.cookie-consent[hidden],
.cookie-options[hidden] {
  display: none;
}

.cookie-consent__card,
.cookie-options__card {
  pointer-events: auto; /* re-enables clicks within the card itself */
  width: min(90%, 21.5rem); /* 344px */
  height: 28rem; /* same background box on both screens */
  max-height: 90vh;
  max-height: 90svh; /* same fallback pair as every other viewport-height box */
  overflow-y: auto;
  padding: var(--space-3);
  background: rgba(164, 162, 142, 0.96); /* the design's translucent card fill */
  text-align: center;
}

.cookie-consent__card {
  padding-bottom: var(--space-5); /* extra room below the buttons/caption */
}

.cookie-options__card {
  padding-bottom: var(--space-6); /* extra room below the last button */
}

.cookie-consent__heading,
.cookie-options__heading {
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-medium);
}

.cookie-consent__message,
.cookie-options__intro {
  margin-top: var(--space-2);
  font-size: var(--text-small); /* 14px — nearest token to the drawn 15px */
}

.cookie-consent__learn-more {
  color: var(--accent-red-small);
}

.cookie-consent__actions,
.cookie-options__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.cookie-options__actions {
  margin-top: var(--space-4); /* closer to the analytics toggle above */
}

.cookie-consent__btn,
.cookie-options__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.25rem;   /* 116px — matches the smaller font below */
  height: 2.75rem;  /* 44px — WCAG tap-target floor */
  background: var(--color-grey);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  font-size: var(--text-ui); /* 16px */
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
}

.cookie-consent__caption {
  margin-top: var(--space-1);
  font-size: var(--text-small);
}

/* ---- cookie preferences list ---- */

.cookie-options__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  row-gap: var(--space-2);
  text-align: left;
}

.cookie-options__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.cookie-options__text {
  font-size: var(--text-caption); /* 13px */
}

/* ---- switch (native checkbox, styled) ---- */

.switch {
  position: relative;
}

.switch__input {
  appearance: none;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.625rem;
  margin: 0;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.switch__track {
  position: absolute;
  left: 0.1875rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-ink);
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  pointer-events: none; /* clicks still land on the input beneath */
}

.switch__input:checked + .switch__track {
  transform: translateY(-50%) translateX(1.125rem);
}

.switch__input:checked {
  background: var(--accent-green);
}

.switch__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch__input:focus-visible {
  outline: var(--border-thick);
  outline-offset: 2px;
}

/* Desktop: background card 20% wider — the extra width goes entirely into
   side padding, so the text/buttons column inside stays the same size and
   position, just with more card visible around it. */
@media (min-width: 72rem) {
  .cookie-consent__card,
  .cookie-options__card {
    width: min(90%, 25.8rem); /* 21.5rem + 20% */
    padding-inline: 3.65rem; /* var(--space-3)'s 1.5rem + the 2.15rem added on each side */
    /* the shared 28rem height (base rule) exists so consent/options match
       each other on mobile — left a lot of dead space below both screens'
       actual content on desktop. auto alone left them mismatched instead
       (consent's own content naturally runs ~8px taller than options', due
       to .cookie-consent__actions' bigger margin-top) — pinned to that
       measured height so they match again, same idea as mobile's shared
       28rem just re-measured for this narrower padding/content. */
    height: 23.875rem; /* 382px */
    padding-bottom: 1.5rem; /* 24px */
  }
}