/*! AnotherTrip cookie consent kit · KIT_VERSION 2 · POLICY_VERSION 1
 *  Source of truth: anothertrip-design-system/consent/. Apps vendor a copy; edit it there, not here. */

/*
 * The Scouting Desk look (anothertrip-operator-web/docs/design/DESIGN.md), carried by the kit itself.
 *
 * Tokens: each --atc-* reads the app's --sa-* token when the app has one (creator, operator) and
 * falls back to the same value when it does not (www has no --sa-* tokens).
 *
 * Isolation: every rule is scoped under the kit's root, .at-consent, and every class is prefixed
 * at-consent__, so nothing here reaches the app and an app's element rules (button, input[type],
 * h2, label) cannot out-rank the kit's. One deliberate exception: on phones, while the banner shows,
 * html.at-consent-banner-open body gets padding-bottom: var(--at-consent-banner-h).
 *
 * Theming (www): override the --sa-* values on .at-consent, never the kit's own rules. Accept all
 * and Reject all share one class, so whatever a theme does to it, it does to both.
 */

.at-consent {
  --atc-card: var(--sa-card, #ffffff);
  --atc-sunken: var(--sa-sunken, #faf9f6);
  --atc-hover: var(--sa-hover, #f3f2ee);
  --atc-ink: var(--sa-ink, #241c38);
  --atc-ink-2: var(--sa-ink-2, #4e4661);
  --atc-ink-3: var(--sa-ink-3, #5b5370);
  --atc-rule: var(--sa-rule, #38333a1c);
  --atc-rule-2: var(--sa-rule-2, #38333a30);
  --atc-accent: var(--sa-accent, #5b4b8a);
  --atc-accent-deep: var(--sa-accent-deep, #4a3d72);
  --atc-accent-rule: var(--sa-accent-rule, #d9d3e8);
  --atc-hold: var(--sa-hold, #8a6118);
  --atc-hold-tint: var(--sa-hold-tint, #f6eeda);
  --atc-scrim: var(--sa-scrim, rgba(27, 28, 31, 0.4));
  --atc-shadow: var(--sa-shadow, 0 1px 2px rgba(42, 33, 64, 0.05), 0 2px 6px rgba(42, 33, 64, 0.04));
  --atc-shadow-up: var(--sa-shadow-up, 0 2px 6px rgba(42, 33, 64, 0.07), 0 22px 48px rgba(42, 33, 64, 0.16));
  --atc-r-card: var(--sa-r-card, 14px);
  --atc-r: var(--sa-r, 8px);
  --atc-sans: var(--sa-sans, 'Albert Sans', arial, sans-serif);
  --atc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.at-consent .at-consent__banner,
.at-consent .at-consent__dialog,
.at-consent .at-consent__banner *,
.at-consent .at-consent__dialog * {
  box-sizing: border-box;
}

/* ---- The banner: a card bottom-right on desktop, a bottom sheet on phones. Never a wall. --------- */

.at-consent .at-consent__banner {
  position: fixed;
  /* Above any app chrome. A modal app dialog (top layer) still sits over it, which is right. */
  z-index: 2147483000;
  /* Right, not left: left-hand columns hold pages' main buttons, and the dashboards' profile row is fixed there. */
  right: 20px;
  bottom: 20px;
  width: 404px;
  max-width: calc(100vw - 40px);
  /* At 400% zoom the card is taller than the screen: it scrolls inside rather than off the top. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--atc-rule);
  border-radius: var(--atc-r-card);
  background: var(--atc-card);
  box-shadow: var(--atc-shadow-up);
  color: var(--atc-ink-2);
  font: 400 15px/1.5 var(--atc-sans);
  letter-spacing: 0;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  animation: at-consent-rise 280ms var(--atc-ease) both;
}

.at-consent .at-consent__text {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* The Lede Pattern: the first sentence at heading weight in full ink, the rest beneath at body weight. */
.at-consent .at-consent__lede {
  display: block;
  margin: 0 0 3px;
  font: 700 16px/1.35 var(--atc-sans);
  letter-spacing: -0.01em;
  color: var(--atc-ink);
}

.at-consent .at-consent__link {
  color: var(--atc-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-radius: 2px;
}

.at-consent .at-consent__link:hover {
  color: var(--atc-accent-deep);
  text-decoration-thickness: 2px;
}

/* Grid, not flex gap: flex gap is missing from the iOS 14 webview Instagram still runs on some phones.
   Grid rows also stretch, so Accept all and Reject all stay the same height if a label wraps. */
.at-consent .at-consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin: 14px 0 0;
}

/* ---- Buttons ------------------------------------------------------------------------------------- */

.at-consent .at-consent__btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  /* Vertical padding on top of the 44px floor: a label that wraps at high zoom still has room. */
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--atc-r);
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: 600 15px/1.2 var(--atc-sans);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    color 120ms ease-out;
}

/* Accept all and Reject all share this one class wherever they appear together: same size, same
   fill, same weight. The banner gives both the primary fill; Settings is the quiet one. */
.at-consent .at-consent__btn--primary {
  border-color: var(--atc-accent);
  background: var(--atc-accent);
  box-shadow: var(--atc-shadow);
  color: #ffffff;
}

.at-consent .at-consent__btn--primary:hover {
  border-color: var(--atc-accent-deep);
  background: var(--atc-accent-deep);
}

.at-consent .at-consent__btn--ghost {
  border-color: var(--atc-rule-2);
  background: var(--atc-card);
  box-shadow: var(--atc-shadow);
  color: var(--atc-ink);
}

.at-consent .at-consent__btn--ghost:hover {
  border-color: var(--atc-ink-3);
}

.at-consent .at-consent__btn--text {
  padding: 8px 10px;
  color: var(--atc-accent);
}

.at-consent .at-consent__btn--text:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.at-consent .at-consent__btn:focus-visible,
.at-consent .at-consent__link:focus-visible,
.at-consent .at-consent__close:focus-visible,
.at-consent .at-consent__switch:focus-visible {
  outline: 2px solid var(--atc-accent);
  outline-offset: 2px;
}

/* ---- The choices dialog ---------------------------------------------------------------------------- */

.at-consent .at-consent__dialog {
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--atc-rule);
  border-radius: var(--atc-r-card);
  background: var(--atc-card);
  box-shadow: var(--atc-shadow-up);
  color: var(--atc-ink);
  font: 400 15px/1.55 var(--atc-sans);
  letter-spacing: 0;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.at-consent .at-consent__dialog:not([open]) {
  display: none;
}

.at-consent .at-consent__dialog[open] {
  display: flex;
  flex-direction: column;
  animation: at-consent-rise 220ms var(--atc-ease) both;
}

.at-consent .at-consent__dialog::backdrop {
  background: var(--atc-scrim, rgba(27, 28, 31, 0.4));
}

.at-consent .at-consent__dialog[open]::backdrop {
  animation: at-consent-fade 220ms ease-out both;
}

.at-consent .at-consent__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px 2px 20px;
}

.at-consent .at-consent__title {
  margin: 0;
  padding: 0;
  font: 700 18px/1.3 var(--atc-sans);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--atc-ink);
}

/* Focused only so a screen reader starts reading at the top; it is not a control. */
.at-consent .at-consent__title:focus {
  outline: none;
}

.at-consent .at-consent__close {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--atc-r);
  background: transparent;
  color: var(--atc-ink-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 120ms ease-out,
    color 120ms ease-out;
}

.at-consent .at-consent__close:hover {
  background: var(--atc-hover);
  color: var(--atc-ink);
}

.at-consent .at-consent__close svg {
  display: block;
  width: 16px;
  height: 16px;
}

.at-consent .at-consent__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 20px 6px;
}

.at-consent .at-consent__intro {
  max-width: 62ch;
  margin: 0 0 14px;
  font: 400 14.5px/1.55 var(--atc-sans);
  color: var(--atc-ink-2);
}

.at-consent .at-consent__cats {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--atc-rule);
  list-style: none;
}

.at-consent .at-consent__cat {
  margin: 0;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--atc-rule);
}

.at-consent .at-consent__cat:last-child {
  border-bottom: 0;
}

/* The whole row is the switch's label: a 44px target however small the track is drawn. */
.at-consent .at-consent__cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}

.at-consent .at-consent__cat-name {
  flex: 1 1 auto;
  font: 700 15px/1.3 var(--atc-sans);
  letter-spacing: -0.01em;
  color: var(--atc-ink);
}

.at-consent .at-consent__always {
  flex: none;
  font: 600 12px/1.3 var(--atc-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--atc-ink-3);
}

.at-consent .at-consent__switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--atc-ink-3);
  border-radius: 999px;
  background: var(--atc-card);
  cursor: pointer;
  transition:
    background-color 160ms ease-out,
    border-color 160ms ease-out;
}

/* The knob is drawn full size and scaled down when off, so its size says the state as well as its
   colour: a small knob on a white track reads as off, a full one on violet as on. */
.at-consent .at-consent__switch::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--atc-ink-3);
  transform: translateX(0) scale(0.6);
  transition:
    transform 160ms var(--atc-ease),
    background-color 160ms ease-out,
    box-shadow 160ms ease-out;
}

.at-consent .at-consent__cat-head:hover .at-consent__switch:not(:disabled):not(:checked) {
  border-color: var(--atc-ink);
}

.at-consent .at-consent__switch:checked {
  border-color: var(--atc-accent);
  background: var(--atc-accent);
}

.at-consent .at-consent__switch:checked::before {
  background: #ffffff;
  transform: translateX(17px) scale(1);
}

/* Locked on (Necessary): at full strength, not faded, so it never reads paler than an off switch.
   A Heather-rule track inside the accent outline, and a white knob ringed in the accent (the ring is
   what holds 5:1 against the pale track; a bare white knob there would be 1.5:1). */
.at-consent .at-consent__switch:disabled {
  cursor: not-allowed;
}

.at-consent .at-consent__switch:disabled:checked {
  border-color: var(--atc-accent);
  background: var(--atc-accent-rule);
}

.at-consent .at-consent__switch:disabled:checked::before {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--atc-accent);
}

.at-consent .at-consent__cat-head:has(.at-consent__switch:disabled) {
  cursor: default;
}

.at-consent .at-consent__cat-desc {
  max-width: 62ch;
  margin: 0;
  font: 400 14px/1.5 var(--atc-sans);
  color: var(--atc-ink-2);
}

.at-consent .at-consent__cat-tools {
  margin: 4px 0 0;
  font: 500 12.5px/1.45 var(--atc-sans);
  color: var(--atc-ink-3);
}

/* One line above the buttons: "Not saved yet." in plain ink; a reload warning in the hold
   semaphore, since a reload is the one thing here that can cost the visitor work. Empty, it takes no
   room but stays in the DOM, so a screen reader hears each change. */
.at-consent .at-consent__status {
  flex: none;
  margin: 0;
  padding: 0 20px;
  font: 500 13.5px/1.45 var(--atc-sans);
  color: var(--atc-ink-2);
}

.at-consent .at-consent__status:not(:empty) {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--atc-rule);
  background: var(--atc-sunken);
}

.at-consent .at-consent__status--reload:not(:empty) {
  background: var(--atc-hold-tint);
  color: var(--atc-hold);
}

/* With something to say, the line is the top of the footer: one rule above both, none between. */
.at-consent .at-consent__status:not(:empty) + .at-consent__foot {
  padding-top: 10px;
  border-top: 0;
}

.at-consent .at-consent__foot {
  display: grid;
  flex: none;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--atc-rule);
  background: var(--atc-sunken);
}

/* No <dialog> (iOS before 15.4): the same sheet, fixed in place, with its scrim drawn by a shadow. */
.at-consent .at-consent__dialog--fallback[open] {
  position: fixed;
  z-index: 2147483001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 100vmax var(--atc-scrim, rgba(27, 28, 31, 0.4)),
    var(--atc-shadow-up);
  animation: none;
}

.at-consent .at-consent__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ---- Phones: bottom sheets, compact, clear of the home indicator ---------------------------------- */

@media (max-width: 599px) {
  /* The sheet covers the bottom of the page, so the page gets that much room to scroll clear of it.
     --at-consent-banner-h and the class are set by the kit while the banner shows (see README). */
  html.at-consent-banner-open body {
    padding-bottom: var(--at-consent-banner-h);
  }

  .at-consent .at-consent__banner {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 14px 16px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: var(--atc-r-card) var(--atc-r-card) 0 0;
    font-size: 14.5px;
    animation-name: at-consent-rise-sheet;
  }

  .at-consent .at-consent__lede {
    font-size: 15.5px;
  }

  .at-consent .at-consent__actions {
    column-gap: 12px;
    margin-top: 12px;
  }

  .at-consent .at-consent__dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--atc-r-card) var(--atc-r-card) 0 0;
  }

  .at-consent .at-consent__dialog[open] {
    animation-name: at-consent-rise-sheet;
  }

  .at-consent .at-consent__head {
    padding-left: 16px;
  }

  .at-consent .at-consent__body {
    padding: 0 16px 6px;
  }

  .at-consent .at-consent__status {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* Accept all and Reject all side by side, Save choices under them, nearest the thumb. */
  .at-consent .at-consent__foot {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding: 12px 16px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .at-consent .at-consent__btn--save {
    grid-column: 1 / -1;
  }

  .at-consent .at-consent__dialog--fallback[open] {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
  }
}

/* The narrowest phones (320px): Settings drops under the two equal buttons rather than squeezing them. */
@media (max-width: 359px) {
  .at-consent .at-consent__actions {
    grid-template-columns: 1fr 1fr;
  }

  .at-consent .at-consent__actions .at-consent__btn--text {
    grid-column: 1 / -1;
  }

  .at-consent .at-consent__btn {
    padding: 8px 12px;
  }
}

/* ---- Motion: one entrance, and none at all for those who ask for less --------------------------- */

@keyframes at-consent-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes at-consent-rise-sheet {
  from {
    opacity: 0.4;
    transform: translateY(24px);
  }
}

@keyframes at-consent-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .at-consent .at-consent__banner,
  .at-consent .at-consent__dialog[open],
  .at-consent .at-consent__dialog[open]::backdrop {
    animation: none;
  }

  .at-consent .at-consent__btn,
  .at-consent .at-consent__close,
  .at-consent .at-consent__switch,
  .at-consent .at-consent__switch::before {
    transition: none;
  }
}

/* ---- Windows high contrast: the drawn switch would vanish under system colours ----------------- */

@media (forced-colors: active) {
  .at-consent .at-consent__banner,
  .at-consent .at-consent__dialog {
    border: 1px solid CanvasText;
  }

  .at-consent .at-consent__btn {
    border-color: ButtonText;
  }

  .at-consent .at-consent__switch {
    forced-color-adjust: none;
    border-color: ButtonText;
    background: ButtonFace;
  }

  .at-consent .at-consent__switch::before {
    background: ButtonText;
  }

  .at-consent .at-consent__switch:checked {
    border-color: Highlight;
    background: Highlight;
  }

  .at-consent .at-consent__switch:checked::before {
    background: HighlightText;
  }

  .at-consent .at-consent__switch:disabled:checked {
    border-color: GrayText;
    background: GrayText;
  }

  .at-consent .at-consent__switch:disabled:checked::before {
    background: Canvas;
    box-shadow: none;
  }
}

@media print {
  .at-consent .at-consent__banner,
  .at-consent .at-consent__dialog {
    display: none;
  }
}