/* ============================================================
   PartnerUp cookie-consent banner.
   Essential cookies always on; analytics (Vercel Web Analytics)
   loads only after explicit opt-in, per privacy.html §10 + the
   ePrivacy Directive for EU/UK visitors. Shared across all pages;
   the banner DOM is injected by consent.js so no per-page markup
   is needed. Relies on the design-token CSS variables each page
   defines in its own <style> :root (--surface, --border, --text,
   --text-muted, --lime, --bg / --bg-card). Pair with consent.js.
   ============================================================ */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--bg-card, var(--surface, #14161a));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  color: var(--text, #e8eaed);
  font-size: 13.5px;
  line-height: 1.55;
  /* Keep the controls reachable when content exceeds the viewport (200%+ zoom /
     short mobile-landscape): cap height to the viewport minus the 16px offsets
     top+bottom and let the banner scroll rather than spill off-screen. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  transform: translateY(140%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.visible { transform: translateY(0); }
/* Self-zero the slide transition under reduced motion regardless of whether the
   host page carries a global `* { transition-duration }` rule (terms/privacy/404
   do not). transitionend still fires at ~0.01ms so finishHide is reached promptly;
   the 400ms fallback timer stays as the ceiling. WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition-duration: 0.01ms; }
}
/* Block clicks synchronously the instant hide() sets aria-hidden, on EVERY
   browser regardless of native `inert` support, so a fast second click during
   the ~0.35s slide-out can't re-enter hide() and flip the stored choice. Keyed
   on aria-hidden (not [hidden], which is set later by finishHide), and uses no
   visibility/display so the slide-out transform still plays. Scoped to the
   whole banner subtree (not just the action buttons): once hide() sets
   aria-hidden="true" the entire subtree is hidden from AT, so leaving the
   cookie-policy <a> mouse/touch-activatable during the slide-out would be an
   interactive node inside an aria-hidden subtree on browsers lacking native
   `inert` (Safari/older) — a parity break with the keyboard path, which already
   tabindex=-1's every focusable. Deaden them all consistently. */
.cookie-banner[aria-hidden="true"] { pointer-events: none; }
/* Load-bearing: the base rule above sets author-origin `display: flex`, which
   beats the UA `[hidden] { display: none; }` rule, so `el.hidden = true` alone
   would not remove the dismissed banner from layout / tab order / the AT tree.
   This attribute selector out-specifies the bare class, so no `!important`. */
.cookie-banner[hidden] { display: none; }

.cookie-banner-text {
  flex: 1 1 320px;
  min-width: 240px;
  color: var(--text-muted, #9aa0a6);
}
.cookie-banner-text strong { color: var(--text, #e8eaed); font-weight: 650; }
.cookie-banner-text a {
  color: var(--lime, #84cc16);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}
.cookie-btn {
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: filter 0.15s ease, background 0.15s ease;
}
.cookie-btn-primary {
  background: var(--lime, #84cc16);
  border: 1px solid var(--lime, #84cc16);
  color: #0a0c0f;
}
.cookie-btn-primary:hover { filter: brightness(1.08); }
.cookie-btn-ghost {
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  color: var(--text, #e8eaed);
}
.cookie-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 560px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 16px;
    /* Offsets shrink to 10px here, so widen the height cap to match (10px top +
       10px bottom) now that the column-stacked actions make the banner taller. */
    max-height: calc(100dvh - 20px);
  }
  /* Stack the two actions vertically on the narrowest phones: side-by-side with
     white-space:nowrap + pill padding, the longer labels ('Accept analytics')
     can overflow / clip the content width rather than wrap. */
  .cookie-banner-actions { width: 100%; flex-direction: column; }
  .cookie-btn { flex: 1; text-align: center; }
}