/* ═══════════════════════════════════════════════════════════════
   Cookie Consent — self-contained styles
   No dependency on host page CSS. All colors driven by custom
   properties scoped to .cookie-consent (always light — see note
   near the bottom of this file).
   ═══════════════════════════════════════════════════════════════ */

.cookie-consent {
  /* ── Design tokens (light defaults) ── */
  --cc-bg: #ffffff;
  --cc-text: #2a2520;
  --cc-text-muted: #6e6a63;
  --cc-border: #e8e2d8;
  --cc-accent: #2d4a38;       /* forest green — matches site brand */
  --cc-accent-text: #ffffff;
  --cc-track-off: #d8d3c8;
  --cc-track-on: #2d4a38;
  --cc-glow: #f4831f;         /* clay orange — matches the site's install-app prompt glow */
  --cc-shadow: 0 0 20px var(--cc-glow), 0 12px 30px rgba(20, 20, 20, .12);
  --cc-radius: 16px;
  --cc-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Fixed, full-viewport wrapper; panel stays bottom-anchored ── */
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* sit above any other PWA UI/overlays */
  display: flex;
  align-items: flex-end; /* panel sits at the bottom, wrapper spans the full screen for the backdrop */
  justify-content: center;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  font-family: var(--cc-font);
}

.cookie-consent__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .28s ease;
}

.cookie-consent.is-open .cookie-consent__backdrop {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__backdrop {
    transition: none;
  }
}

/* Hidden state — uses the `hidden` attribute; kept out of layout
   and out of the accessibility tree entirely when closed. */
.cookie-consent[hidden] {
  display: none;
}

.cookie-consent__panel {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  background: var(--cc-bg);
  color: var(--cc-text);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  border: 1px solid var(--cc-border);
  overflow: hidden;

  /* Entrance animation: fade + slide up */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .28s ease, transform .28s ease;
}

.cookie-consent.is-open .cookie-consent__panel {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__panel {
    transition: none;
  }
}

/* ── View stack ──────────────────────────────────────────────────
   Both views live in the SAME grid cell at all times. This means
   the container is always sized for the taller of the two views,
   so switching between them never changes the panel's height —
   i.e. no layout shift when swapping state. Only the active view
   is visible/interactive; the inactive one is opacity:0 and removed
   from the tab order + accessibility tree via aria-hidden + inert-like
   handling in JS (focus is never moved into it). */
.cookie-consent__views {
  display: grid;
}

.cookie-consent__view {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease;
}

.cookie-consent__view.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__view {
    transition: none;
  }
}

.cookie-consent__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.cookie-consent__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--cc-text-muted);
}

.cookie-consent__link {
  color: var(--cc-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent__link:hover,
.cookie-consent__link:focus-visible {
  opacity: .8;
}

/* ── Action buttons ──────────────────────────────────────────────
   All three banner buttons share identical sizing/weight via
   .cookie-btn as the base. Accept All and Reject Optional both use
   .cookie-btn--solid with the SAME background — deliberately
   identical so neither reads as more "encouraged" than the other.
   Cookie Preferences (a neutral, non-consent navigation action) is
   the only one styled as an outline/tertiary button. */
.cookie-consent__actions {
  display: flex;
  flex-direction: column; /* mobile: Accept, then Reject All, then Preferences, top to bottom */
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.cookie-btn {
  flex: 1 1 auto;
  min-width: 140px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: filter .15s ease, transform .1s ease, background-color .15s ease;
}

.cookie-btn:active {
  transform: scale(.98);
}

.cookie-btn--solid {
  background: var(--cc-accent);
  color: var(--cc-accent-text);
}

.cookie-btn--solid:hover,
.cookie-btn--solid:focus-visible {
  filter: brightness(1.12);
}

.cookie-btn--outline {
  background: transparent;
  color: var(--cc-text);
  border-color: var(--cc-border);
}

.cookie-btn--outline:hover,
.cookie-btn--outline:focus-visible {
  background: var(--cc-track-off);
}

/* Cookie Preferences in the banner — same footprint/size as the other
   buttons (so the 44px tap target is preserved) but reads as a plain
   underlined text link rather than a button. */
.cookie-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--cc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-btn--link:hover,
.cookie-btn--link:focus-visible {
  filter: brightness(1.15);
}

.cookie-btn--primary {
  background: var(--cc-accent);
  color: var(--cc-accent-text);
}

.cookie-btn--primary:hover,
.cookie-btn--primary:focus-visible {
  filter: brightness(1.12);
}

/* ── Preferences: category list ── */
.cookie-consent__categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 40vh;
  overflow-y: auto;
}

.cookie-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cc-border);
}

.cookie-category:last-child {
  border-bottom: none;
}

.cookie-category__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cookie-category__name {
  font-size: .9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-category__badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  background: var(--cc-track-off);
  padding: 2px 7px;
  border-radius: 999px;
}

.cookie-category__desc {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--cc-text-muted);
}

/* ── Toggle switch ──────────────────────────────────────────────
   Built as a <button role="switch"> for native keyboard support
   (Enter/Space activate it with no extra JS needed). Padding
   expands the tap target to 44x44 without inflating the visual
   track/thumb graphic. */
.cookie-toggle {
  flex-shrink: 0;
  appearance: none;
  background: none;
  border: none;
  padding: 12px 4px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cookie-toggle__track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--cc-track-off);
  transition: background-color .2s ease;
}

.cookie-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}

.cookie-toggle[aria-checked="true"] .cookie-toggle__track {
  background: var(--cc-track-on);
}

.cookie-toggle[aria-checked="true"] .cookie-toggle__thumb {
  transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-toggle__track,
  .cookie-toggle__thumb {
    transition: none;
  }
}

.cookie-toggle:disabled {
  cursor: default;
  opacity: .85;
}

.cookie-toggle:focus-visible,
.cookie-btn:focus-visible,
.cookie-consent__link:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

/* ── Responsive ── */
@media (min-width: 640px) {
  .cookie-consent {
    padding: 20px;
  }

  .cookie-consent__view {
    padding: 24px 28px;
  }

  .cookie-consent__actions {
    /* Desktop/tablet: a single row, visually left-to-right as
       Preferences, Reject All, Accept. Achieved by reversing the row
       rather than reordering the DOM, so Tab order stays logical
       (Accept -> Reject All -> Preferences) regardless of screen size.
       In a row-reverse container, flex-start/flex-end swap meaning —
       flex-start now packs toward the right, matching where this
       group sat before. */
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .cookie-btn {
    flex: 0 1 auto;
  }
}

/* Deliberately no dark-mode override: the panel always uses the light
   (white) tokens defined at the top of this file, regardless of the
   visitor's OS/browser theme — matching common practice for consent
   banners (fixed, consistent appearance for legibility/consistency,
   independent of the host site's own theme). */