/* cookie-banner — simple consent notice, not a blocking gate: Pixel/GA4
   already fire on page load regardless of this banner (see index.html
   head) — this only records that the visitor has been informed, via
   js/cookie-banner.js + localStorage. */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 32px;
  background: var(--color-cream-muted);
  border-top: 1px solid var(--color-dusty-blue);
  box-shadow: 0 -4px 24px rgba(22, 30, 57, 0.12);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner--visible {
  transform: translateY(0);
}

.cookie-banner__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Plays once when the banner slides in — reads as the cookie "landing",
   not a decorative loop. */
.cookie-banner--visible .cookie-banner__icon {
  animation: cookie-banner-spin-in 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.15s both;
}

@keyframes cookie-banner-spin-in {
  from {
    transform: rotate(-160deg) scale(0.4);
    opacity: 0;
  }
  to {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

.cookie-banner__text {
  flex: 1 0 0;
  min-width: 200px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.14px;
  color: var(--color-navy);
}

.cookie-banner__text a {
  color: var(--color-navy);
  text-decoration: underline;
}

.cookie-banner__accept {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 28px;
  font-size: 14px;
}

/* Compact mobile layout, per direct product request: icon+text share a
   row (was icon/text/button each stacked full-width, ~268px tall) so the
   banner no longer covers the hero CTA button before it's dismissed —
   see hero.css's own mobile-only compaction block for the other half of
   that fix. */
@media (max-width: 640px) {
  .cookie-banner {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 16px;
  }

  .cookie-banner__icon {
    width: 28px;
    height: 28px;
  }

  .cookie-banner__text {
    flex: 1 0 0;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
  }

  .cookie-banner__accept {
    width: 100%;
    min-height: 36px;
    padding: 8px 20px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition-duration: 0.01ms;
  }

  .cookie-banner--visible .cookie-banner__icon {
    animation: none;
  }
}