/* Cookie consent banner: a card in the corner on wide screens, a sheet along the bottom edge on narrow ones.
   Colours and spacing come from the tokens in site.css; type and buttons are its shared classes (.t-h2, .t-maly, .btn, .link). */

.consent {
  /* Above the page header and the sticky purchase bars, below the logo curtain that covers a page while it loads. */
  --consent-layer: 150;
  --consent-width: 440px;
  --consent-shadow-offset: 5px;
  --consent-checkbox-size: 24px;
  --consent-touch-target: 44px;

  /* Below this the two choices stack, so neither label is squeezed. */
  --consent-choice-min-width: 176px;

  position: fixed;
  z-index: var(--consent-layer);
  inset: auto auto var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: min(var(--consent-width), calc(100% - 2 * var(--s-4)));
  max-height: calc(100dvh - 2 * var(--s-4));
  padding: var(--s-5);
  overflow: auto;
  overscroll-behavior: contain;
  border: var(--obrys) solid var(--tusz);
  background: var(--krem);
  box-shadow: calc(var(--consent-shadow-offset) * -1) var(--consent-shadow-offset) 0 0 var(--tusz);
  color: var(--tusz);
}

.consent__text,
.consent__option {
  text-wrap: pretty;
}

.consent__options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.consent__option {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--consent-touch-target);
  cursor: pointer;
}

.consent__option input {
  flex: none;
  width: var(--consent-checkbox-size);
  height: var(--consent-checkbox-size);
  margin: 0;
  accent-color: var(--tusz);
  cursor: inherit;
}

.consent__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--consent-choice-min-width), 1fr));
  gap: var(--s-2);
}

.consent__choice {
  padding: 0 var(--s-3);
}

.consent__settings {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 720px) {
  .consent {
    inset: auto 0 0;
    width: auto;
    max-height: 100dvh;
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
    border-width: var(--obrys) 0 0;
    box-shadow: none;
  }
}