/**
 * Cookie banner (sections/cookie-banner.liquid).
 *
 * Three positions off one card: a full-width bar across the bottom, or a
 * card in either bottom corner. The <cookie-banner> element is the fixed
 * layer and the card inside it is what the section-frame paints, which is
 * why the padding settings here read as the card's INNER padding rather
 * than as a band's vertical rhythm — the section has no band.
 *
 * Not a modal: there is no backdrop and no scroll lock. The page stays
 * usable while the question is on screen, because holding a storefront
 * hostage until someone answers is the pattern consent rules exist to
 * prevent.
 */
.cookie-banner {
  position: fixed;
  z-index: 60;
  display: block;
  /* The element is only the positioning layer; nothing about it should
     intercept a click aimed at the page underneath, outside the card. */
  pointer-events: none;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__card {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  padding-inline: var(--space-5);
  background-color: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.cookie-banner__card:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: -4px;
}

/* ------------------------------------------------------------------ */
/* Positions                                                           */
/* ------------------------------------------------------------------ */
.cookie-banner--bar {
  left: 0;
  right: 0;
  bottom: 0;
}

/* The bar spans the window, so its own rounding would fight the window's
   edges; only the top corners are eased. The inner row is held to the
   page's measure so the text does not run the full width of a wide
   monitor. */
.cookie-banner--bar .cookie-banner__card {
  justify-content: space-between;
  border-inline: none;
  border-bottom: none;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  padding-inline: var(--page-margin);
}

.cookie-banner--left,
.cookie-banner--right {
  bottom: var(--space-5);
  width: min(420px, calc(100vw - 2 * var(--space-4)));
}

.cookie-banner--left {
  left: var(--space-5);
}

.cookie-banner--right {
  right: var(--space-5);
}

.cookie-banner--left .cookie-banner__card,
.cookie-banner--right .cookie-banner__card {
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--radius-m);
}

/* ------------------------------------------------------------------ */
/* Copy                                                                */
/* ------------------------------------------------------------------ */
.cookie-banner__copy {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cookie-banner__message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
}

.cookie-banner__message p:last-child {
  margin-bottom: 0;
}

.cookie-banner__policy {
  align-self: flex-start;
  font-size: 13px;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Actions                                                             */
/* ------------------------------------------------------------------ */
/* Accept and Decline are the same size and the same shape. A greyed-out
   decline beside a solid accept is the single thing that gets a consent
   banner rejected, and it is not what an honest question looks like. */
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cookie-banner__button {
  height: 44px;
  padding-inline: var(--space-5);
  white-space: nowrap;
}

.cookie-banner__link {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cookie-banner__link:hover {
  color: var(--color-ink);
}

.cookie-banner__link:focus-visible,
.cookie-banner__policy:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Preferences panel                                                   */
/* ------------------------------------------------------------------ */
/* Takes a whole row in the bar layout — a pair of labelled checkboxes
   squeezed between the message and the buttons is unreadable at any
   width. */
.cookie-banner__panel {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.cookie-banner__panel[hidden] {
  display: none;
}

.cookie-banner__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.cookie-banner__choice input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-ink);
}

.cookie-banner__choice-name {
  display: block;
  font-size: 14px;
  color: var(--color-ink);
}

.cookie-banner__choice-help {
  display: block;
  font-size: 13px;
  color: var(--color-muted);
}

.cookie-banner__save {
  align-self: flex-start;
  height: 40px;
  padding-inline: var(--space-4);
}

@media screen and (max-width: 749px) {
  /* Both corner cards become the same full-width sheet: 420px of card
     beside 30px of page is not a corner, it is a bar with a gap. */
  .cookie-banner--left,
  .cookie-banner--right {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    width: auto;
  }

  .cookie-banner__card {
    flex-direction: column;
    align-items: stretch;
    padding-inline: var(--space-4);
  }

  .cookie-banner__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cookie-banner__button {
    width: 100%;
  }

  .cookie-banner__link {
    align-self: center;
  }
}