/* ============================================================================
 * Cookie consent — styles.
 *
 * Every class is prefixed with `abt-consent__` so we never collide with
 * the host page's CSS. Light + dark themes via prefers-color-scheme;
 * reduced-motion respected by zeroing transitions.
 *
 * Layout:
 *   • Banner — bottom-centre on desktop, full-width on small screens
 *   • Panel — centred modal overlay
 *
 * Critical visual rule (ICO + EU guidance):
 *   "Reject all" and "Accept all" buttons MUST have IDENTICAL visual
 *   weight. Same size, same colour, same font. That's enforced here by
 *   both buttons sharing the .abt-consent__btn--primary class with no
 *   per-action overrides.
 * ============================================================================
 */

/* ── Theme tokens ──────────────────────────────────────────────────────── */

.abt-consent__banner,
.abt-consent__panel-overlay {
  /* Light theme (default) */
  --abt-bg: #ffffff;
  --abt-bg-alt: #f6f8fa;
  --abt-ink: #0d253d;
  --abt-ink-soft: #4a5a6e;
  --abt-line: #e3e8ee;
  --abt-brand: #2563eb;
  --abt-brand-hover: #1d4fd8;
  --abt-brand-ink: #ffffff;
  --abt-overlay: rgba(13, 37, 61, 0.45);
  --abt-shadow: 0 12px 32px rgba(13, 37, 61, 0.18);
  --abt-focus: #1d4fd8;
  --abt-radius: 12px;
  --abt-radius-sm: 6px;
  --abt-font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  .abt-consent__banner,
  .abt-consent__panel-overlay {
    --abt-bg: #14171c;
    --abt-bg-alt: #1c1f25;
    --abt-ink: #f1f3f5;
    --abt-ink-soft: #b9c0c9;
    --abt-line: #2a2e35;
    --abt-brand: #5e6ad2;
    --abt-brand-hover: #7a85e0;
    --abt-brand-ink: #ffffff;
    --abt-overlay: rgba(0, 0, 0, 0.65);
    --abt-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    --abt-focus: #7a85e0;
  }
}

/* ── Banner ────────────────────────────────────────────────────────────── */

.abt-consent__banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 16px);
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--abt-bg);
  color: var(--abt-ink);
  border: 1px solid var(--abt-line);
  border-radius: var(--abt-radius);
  box-shadow: var(--abt-shadow);
  z-index: 2147483646;
  font-family: var(--abt-font);
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.abt-consent__banner--visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.abt-consent__banner-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

@media (min-width: 720px) {
  .abt-consent__banner-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 22px;
  }
}

.abt-consent__banner-text {
  flex: 1;
  min-width: 0;
}

.abt-consent__banner-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--abt-ink);
  margin-bottom: 4px;
}

.abt-consent__banner-body {
  color: var(--abt-ink-soft);
  margin: 0 0 8px 0;
  font-size: 13.5px;
}

.abt-consent__banner-policy {
  display: inline-block;
  color: var(--abt-brand);
  text-decoration: underline;
  font-size: 13px;
  font-weight: 500;
}

.abt-consent__banner-policy:hover,
.abt-consent__banner-policy:focus-visible {
  color: var(--abt-brand-hover);
}

.abt-consent__banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (min-width: 720px) {
  .abt-consent__banner-actions {
    flex-direction: column;
    align-items: stretch;
    min-width: 180px;
  }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* CRITICAL: --primary is used by BOTH "Reject all" and "Accept all". Equal
   visual weight is a UK / EU regulatory requirement, not a style choice. */

.abt-consent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: 10px 16px;
  border-radius: var(--abt-radius-sm);
  font-family: var(--abt-font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    color 0.12s ease, transform 0.08s ease;
}

.abt-consent__btn:focus-visible {
  outline: 2px solid var(--abt-focus);
  outline-offset: 2px;
}

.abt-consent__btn:active {
  transform: translateY(1px);
}

/* PRIMARY — Accept all + Reject all use IDENTICAL styling. Don't override
   either individually. */
.abt-consent__btn--primary {
  background: var(--abt-brand);
  color: var(--abt-brand-ink);
  border-color: var(--abt-brand);
}

.abt-consent__btn--primary:hover {
  background: var(--abt-brand-hover);
  border-color: var(--abt-brand-hover);
}

/* TERTIARY — Manage preferences. Quieter, but still keyboard-accessible
   and visible. */
.abt-consent__btn--tertiary {
  background: transparent;
  color: var(--abt-ink-soft);
  border-color: var(--abt-line);
}

.abt-consent__btn--tertiary:hover {
  color: var(--abt-ink);
  border-color: var(--abt-ink-soft);
  background: var(--abt-bg-alt);
}

/* ── Panel (preferences modal) ─────────────────────────────────────────── */

.abt-consent__panel-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--abt-overlay);
  z-index: 2147483647;
  font-family: var(--abt-font);
  padding: 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.abt-consent__panel-overlay--visible {
  opacity: 1;
}

.abt-consent__panel {
  background: var(--abt-bg);
  color: var(--abt-ink);
  border-radius: var(--abt-radius);
  box-shadow: var(--abt-shadow);
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  outline: none;
}

.abt-consent__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px 20px;
  border-bottom: 1px solid var(--abt-line);
}

.abt-consent__panel-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--abt-ink);
}

.abt-consent__panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--abt-ink-soft);
  border-radius: var(--abt-radius-sm);
  cursor: pointer;
  padding: 0;
}

.abt-consent__panel-close:hover {
  background: var(--abt-bg-alt);
  color: var(--abt-ink);
}

.abt-consent__panel-close:focus-visible {
  outline: 2px solid var(--abt-focus);
  outline-offset: 2px;
}

.abt-consent__panel-intro {
  padding: 12px 20px 0 20px;
  margin: 0;
  font-size: 13.5px;
  color: var(--abt-ink-soft);
}

.abt-consent__panel-list {
  padding: 12px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.abt-consent__cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--abt-line);
}

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

.abt-consent__cat-text {
  flex: 1;
  min-width: 0;
}

.abt-consent__cat-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--abt-ink);
  margin-bottom: 2px;
}

.abt-consent__cat-desc {
  font-size: 13px;
  color: var(--abt-ink-soft);
}

.abt-consent__cat-control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 24px;
}

/* Always-on lock — visually distinct from toggle so users can tell at a
   glance which categories they can't change. Never relies on colour alone:
   the word "Always on" is always visible. */
.abt-consent__cat-lock {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--abt-bg-alt);
  color: var(--abt-ink-soft);
  border: 1px solid var(--abt-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: not-allowed;
}

/* Toggle — built on a real <input type="checkbox"> so keyboard / screen
   reader support comes free. The visible track + knob is fully CSS. */
.abt-consent__cat-toggle-label {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  cursor: pointer;
}

.abt-consent__cat-toggle-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.abt-consent__cat-toggle-track {
  position: absolute;
  inset: 0;
  background: #c8d0db;
  border-radius: 999px;
  transition: background-color 0.14s ease;
}

@media (prefers-color-scheme: dark) {
  .abt-consent__cat-toggle-track {
    background: #3a4049;
  }
}

.abt-consent__cat-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.16s ease;
}

.abt-consent__cat-toggle-input:checked + .abt-consent__cat-toggle-label-text + .abt-consent__cat-toggle-track {
  background: var(--abt-brand);
}

.abt-consent__cat-toggle-input:checked + .abt-consent__cat-toggle-label-text + .abt-consent__cat-toggle-track > .abt-consent__cat-toggle-knob {
  transform: translateX(16px);
}

.abt-consent__cat-toggle-input:focus-visible + .abt-consent__cat-toggle-label-text + .abt-consent__cat-toggle-track {
  outline: 2px solid var(--abt-focus);
  outline-offset: 2px;
}

.abt-consent__panel-footer {
  padding: 14px 20px 18px 20px;
  border-top: 1px solid var(--abt-line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Reduced motion: kill every transition ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .abt-consent__banner,
  .abt-consent__panel-overlay,
  .abt-consent__btn,
  .abt-consent__cat-toggle-track,
  .abt-consent__cat-toggle-knob {
    transition: none !important;
  }
}

/* ── Print: hide everything ────────────────────────────────────────────── */

@media print {
  .abt-consent__banner,
  .abt-consent__panel-overlay {
    display: none !important;
  }
}