/* ──────────────────────────────────────────────────────────────────────────
   BlueHous campaign pages — cookie consent bar.

   Pairs with lp-consent.js, which builds the markup. Loaded by every campaign
   page; styles nothing until the script inserts the bar, so a page that drops
   the script simply has no banner.

   Sits above everything else on the page (the kit's highest fixed layer is the
   scroll progress line at 60) because until it is answered, nothing else on
   the page may run measurement.
   ────────────────────────────────────────────────────────────────────────── */

.cookiebar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 70;
  padding: var(--s5) 0 calc(var(--s5) + env(safe-area-inset-bottom));
  background: rgba(7, 7, 14, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--on-dark);
  color-scheme: dark;
  /* Starts off-screen and is slid in by .in, so the bar arrives rather than
     appearing — and so a stored decision can suppress it with no flash. */
  transform: translateY(100%);
  transition: transform 460ms var(--ease-out);
}

.cookiebar.in {
  transform: none;
}

.cookiebar .wrap {
  display: flex;
  align-items: center;
  gap: var(--s5) var(--s7);
  flex-wrap: wrap;
  justify-content: space-between;
}

.cookiebar p {
  flex: 1 1 32ch;
  margin: 0;
  color: var(--on-dark-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.cookiebar p a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookiebar-actions {
  display: flex;
  gap: var(--s3);
  flex: none;
}

/* Both choices are the same size and sit side by side. Refusing has to be as
   easy as accepting — that is the requirement, not a style preference. Only
   the fill differs, which is what keeps the primary action legible. */
.cookiebar-actions button {
  padding: 11px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease);
}

.cookiebar-accept {
  background: var(--blue);
  color: #fff;
}

.cookiebar-accept:hover {
  background: var(--blue-lift);
}

.cookiebar-reject {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.cookiebar-reject:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* The mobile CTA bar lives at the bottom too. Two stacked bars is a wall, and
   the banner is the one that has to be answered first. */
body.has-cookiebar .sticky {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .cookiebar .wrap {
    gap: var(--s4);
  }
  .cookiebar-actions {
    inline-size: 100%;
  }
  .cookiebar-actions button {
    flex: 1;
    padding-inline: 12px;
  }
}

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