/* ═══════════════════════════════════════════════════════════════
   Cookie Banner Component
   ═══════════════════════════════════════════════════════════════
   A subtle, brand-aligned cookie notification.
   
   Usage: Include this CSS and the accompanying JS on any page.
   The banner auto-shows if consent hasn't been given.
   ═══════════════════════════════════════════════════════════════ */

.cookie-banner {
  position: fixed;
  bottom: var(--spacing-lg);
  left: var(--spacing-lg);
  z-index: 9999;
  
  max-width: 360px;
  padding: var(--spacing-lg);
  
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
  
  /* Entry animation */
  animation: cookieSlideUp 0.4s ease-out;
}

@keyframes cookieSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Exit animation class */
.cookie-banner.cookie-banner--hiding {
  animation: cookieFadeOut 0.25s ease-in forwards;
}

@keyframes cookieFadeOut {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Hidden state */
.cookie-banner[hidden] {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   Content
   ───────────────────────────────────────────────────────────── */

.cookie-banner__text {
  margin: 0 0 var(--spacing-md) 0;
  font-family: var(--body-font);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.cookie-banner__text a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__text a:hover {
  color: var(--brand-600);
}

/* ─────────────────────────────────────────────────────────────
   Actions
   ───────────────────────────────────────────────────────────── */

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.cookie-banner__btn {
  font-family: var(--body-font);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* Primary: Accept */
.cookie-banner__btn--accept {
  padding: 10px 20px;
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.cookie-banner__btn--accept:hover {
  background: var(--accent-600);
  box-shadow: var(--shadow-accent);
}

/* Secondary: Settings / Decline */
.cookie-banner__btn--secondary {
  padding: 10px 16px;
  background: transparent;
  color: var(--text-secondary);
}

.cookie-banner__btn--secondary:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .cookie-banner {
    left: var(--spacing-md);
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    max-width: none;
  }
  
  .cookie-banner__actions {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .cookie-banner__btn {
    width: 100%;
    text-align: center;
  }
}