/* ==========================================================================
   UP AL — Cookie consent banner
   A compact floating card, shown once on first visit, built from the
   site's own glass-card recipe — the same layered gradient + backdrop-
   filter blur/saturate + --shadow-card-hover + --radius-lg used by the
   accessibility panel, Process, Testimonials and Contact — so it reads as
   part of the site rather than a bolted-on template banner. Buttons reuse
   the existing .btn component as-is (see css/button.css); no new button
   styling lives here. See js/cookie-consent.js for the localStorage
   choice and the GA4 loader it gates.

   Anchored to the opposite corner from the accessibility widget (which
   sits bottom-right via --space-5) so the two never collide on desktop;
   on mobile both become viewport-anchored and this one is lifted above
   the accessibility toggle's own footprint instead.
   ========================================================================== */

.cookie-consent {
  position: fixed;
  z-index: 70;
  left: var(--space-5);
  bottom: var(--space-5);
  width: min(400px, calc(100vw - var(--space-8)));
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom left;
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-premium),
    visibility 0s linear var(--duration-slow);
}

.cookie-consent.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-premium),
    visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    transform: none;
  }
  .cookie-consent.is-visible {
    transform: none;
  }
}

@media (max-width: 560px) {
  .cookie-consent {
    /* ~18px — within the 16-20px range, and a touch narrower than the
       old 16px (--space-4) margin so the card reads as a considered
       floating object rather than stretched edge-to-edge. */
    left: 18px;
    right: 18px;
    bottom: calc(56px + var(--space-4) + var(--space-3));
    width: auto;
    transform-origin: bottom center;
  }
}

.cookie-consent__surface {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  /* Softer than the default --color-border — the glass fill and shadow
     already do the work of separating the card from the page, so the
     hairline itself only needs to be just barely there. */
  border: 1px solid var(--color-border-soft);
  background: radial-gradient(120% 90% at 16% -12%, rgba(255, 255, 255, 0.1), transparent 55%),
    radial-gradient(36% 28% at 84% 4%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(205deg, rgba(255, 255, 255, 0.035) 0%, transparent 42%),
    radial-gradient(130% 85% at 50% 125%, rgba(0, 0, 0, 0.34), transparent 60%), var(--color-bg-elevated);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: var(--shadow-card-hover);
}

.cookie-consent__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small); /* 15px — 2px down from the previous 17px */
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.cookie-consent__desc {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

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

/* Decline reused the sitewide .btn--ghost as pure outline-on-transparent
   at rest, which read as an afterthought next to Accept's full chrome
   fill — too wide a gap for two options that deserve equal
   consideration. A soft frosted fill at rest (the same low-opacity white
   wash used by the a11y stepper's own background) gives it real presence
   as a button in its own right. Only the resting state is touched —
   :hover/:focus-visible are left to fall through to .btn--ghost's own
   accent-blue treatment in button.css, the same feedback every other
   ghost button on the site gives (e.g. Portfolio's "View Project"), so
   hover behavior here stays consistent with the rest of the design
   system rather than diverging from it. */
.cookie-consent__actions .btn--ghost {
  background-color: rgba(255, 255, 255, 0.05);
}

.cookie-consent__link {
  display: inline-block;
  margin-block-start: var(--space-3);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-premium);
}

.cookie-consent__link:hover,
.cookie-consent__link:focus-visible {
  color: var(--color-accent);
}