/*
 * Cookie consent banner, the Mzizi cookie-consent design in Iconic tokens.
 * Navy #152744, cream #F4EFE6, sand #E8DCC4, bronze #8A5A2B / #C6A07C.
 * Fonts are inherited from the page's own Bricolage Grotesque and Instrument
 * Sans; nothing is fetched from here.
 */
.wta-consent,
.wta-consent-backdrop,
.wta-consent-live {
  --wta-navy: #152744;
  --wta-navy-hover: #22385f;
  --wta-cream: #f4efe6;
  --wta-sand: #e8dcc4;
  --wta-bronze: #8a5a2b;
  --wta-bronze-light: #c6a07c;
  --wta-card: #fffdf9;
  --wta-muted: #3f4b63;
  --wta-radius: 14px;
}

.wta-consent {
  position: fixed;
  z-index: 99999;
  box-sizing: border-box;
  font-family:
    "Instrument Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--wta-navy);
  background: var(--wta-card);
  border: 1px solid var(--wta-sand);
  box-shadow: 0 -6px 24px rgba(21, 39, 68, 0.12);
  padding: 16px max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.wta-consent *,
.wta-consent *::before,
.wta-consent *::after {
  box-sizing: border-box;
}

/* Full-width bar (the Mzizi default). */
.wta-consent.is-bottom {
  inset: auto 0 0 0;
  border-width: 1px 0 0;
  border-radius: var(--wta-radius) var(--wta-radius) 0 0;
}

/* Floating cards. */
.wta-consent.is-bottom-left,
.wta-consent.is-bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(26rem, calc(100% - 32px));
  border-radius: var(--wta-radius);
  padding: 18px;
}

.wta-consent.is-bottom-left {
  left: max(16px, env(safe-area-inset-left));
}
.wta-consent.is-bottom-right {
  right: max(16px, env(safe-area-inset-right));
}

.wta-consent .wta-consent__bar {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  max-width: 72rem;
  margin: 0 auto;
}

.wta-consent.is-bottom-left .wta-consent__bar,
.wta-consent.is-bottom-right .wta-consent__bar {
  flex-direction: column;
  align-items: stretch;
}

.wta-consent .wta-consent__bar[hidden],
.wta-consent .wta-consent__panel[hidden] {
  display: none;
}

.wta-consent .wta-consent__text {
  flex: 1;
  margin: 0;
  color: var(--wta-muted);
  font-size: 0.9375rem;
}

.wta-consent .wta-consent__policy {
  color: var(--wta-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.wta-consent .wta-consent__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

/* Accept and Decline share one style: equal size, weight and colour. */
.wta-consent .wta-consent__btn {
  appearance: none;
  min-height: 44px;
  min-width: 7rem;
  padding: 8px 22px;
  border: 2px solid var(--wta-navy);
  border-radius: 999px;
  background: var(--wta-navy);
  color: var(--wta-cream);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wta-consent .wta-consent__btn:hover {
  background: var(--wta-navy-hover);
}

.wta-consent .wta-consent__link {
  appearance: none;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wta-navy);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wta-consent .wta-consent__link:hover {
  background: var(--wta-sand);
}

.wta-consent :focus-visible,
.wta-consent-settings-link:focus-visible {
  outline: 3px solid var(--wta-bronze);
  outline-offset: 2px;
}

/* Manage panel */
.wta-consent .wta-consent__panel {
  max-width: 40rem;
  max-height: min(70vh, 34rem);
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wta-consent .wta-consent__title {
  margin: 0 0 8px;
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wta-navy);
}

.wta-consent .wta-consent__title:focus {
  outline: none;
}

.wta-consent .wta-consent__cats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wta-consent .wta-consent__cat {
  padding: 12px 0;
  border-top: 1px solid var(--wta-sand);
}

.wta-consent .wta-consent__cat p {
  margin: 4px 0 0;
  color: var(--wta-muted);
  font-size: 0.875rem;
}

.wta-consent .wta-consent__cathead {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wta-consent .wta-consent__cathead label {
  flex: 1;
  font-weight: 600;
}

.wta-consent .wta-consent__always {
  color: var(--wta-muted);
  font-size: 0.8125rem;
}

/* Toggle: a real checkbox drawn as a switch. */
.wta-consent .wta-consent__switch {
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 28px;
  margin: 0;
  border: 2px solid var(--wta-navy);
  border-radius: 999px;
  background: var(--wta-card);
  cursor: pointer;
}

.wta-consent input.wta-consent__switch::before,
.wta-consent input.wta-consent__switch:checked::before,
.wta-consent input.wta-consent__switch:disabled::before {
  content: none;
  display: none;
}

.wta-consent .wta-consent__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wta-navy);
}

.wta-consent .wta-consent__switch:checked {
  background: var(--wta-navy);
}
.wta-consent .wta-consent__switch:checked::after {
  left: 21px;
  background: var(--wta-cream);
}
.wta-consent .wta-consent__switch:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wta-consent .wta-consent__actions--panel {
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--wta-sand);
}

/* The panel is modal-like: a scrim behind it. */
.wta-consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(21, 39, 68, 0.45);
}

.wta-consent-backdrop[hidden] {
  display: none;
}

.wta-consent.is-panel.is-bottom-left,
.wta-consent.is-panel.is-bottom-right {
  width: min(34rem, calc(100% - 32px));
}

/* Room for the bar so it never hides the end of the page. */
html.wta-consent-pad body {
  padding-bottom: var(--wta-consent-h, 0);
}

/* The footer link from [wta_cookie_settings]. */
.wta-consent-settings-link {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.wta-consent-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Admin preview: the banner sits in a stage instead of the viewport. */
.wta-consent.is-preview {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 6px 24px rgba(21, 39, 68, 0.12);
  border-width: 1px;
  border-radius: var(--wta-radius);
}

/* Phones: a bottom sheet. */
@media (max-width: 640px) {
  .wta-consent,
  .wta-consent.is-bottom-left,
  .wta-consent.is-bottom-right {
    inset: auto 0 0 0;
    width: auto;
    border-width: 1px 0 0;
    border-radius: var(--wta-radius) var(--wta-radius) 0 0;
    padding: 16px max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    max-height: 85vh;
    overflow-y: auto;
  }

  .wta-consent .wta-consent__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .wta-consent .wta-consent__text {
    font-size: 0.875rem;
  }

  .wta-consent .wta-consent__actions {
    flex-wrap: wrap;
  }

  .wta-consent .wta-consent__btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
  }

  /* Manage drops under the two equal buttons. */
  .wta-consent .wta-consent__bar .wta-consent__link {
    order: 3;
    flex: 1 1 100%;
  }

  .wta-consent .wta-consent__panel {
    max-height: calc(85vh - 32px);
  }
  .wta-consent.is-preview {
    position: relative;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wta-consent:not(.is-preview) {
    animation: wta-consent-in 0.25s ease-out;
  }
  @keyframes wta-consent-in {
    from {
      transform: translateY(12px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wta-consent,
  .wta-consent .wta-consent__btn {
    animation: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .wta-consent {
    border: 2px solid CanvasText;
  }
  .wta-consent .wta-consent__btn {
    border: 2px solid ButtonText;
  }
  .wta-consent .wta-consent__switch:checked::after {
    background: HighlightText;
  }
}