/* =============================================================================
   Уведомление о cookie.
   Отдельный файл (не components.css/styles.css) — баннер должен работать
   и на policy.html/privacy.html/terms.html/404.html, которые не подключают
   основной styles.css. Использует токены design-system.css, который
   подключён на всех восьми страницах.
   ============================================================================= */

.cookie-banner {
  position: fixed;
  left: var(--space-4, 16px);
  right: var(--space-4, 16px);
  bottom: var(--space-4, 16px);
  z-index: 2500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4, 16px);
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-5, 20px);
  background: linear-gradient(135deg, #0d1f3c 0%, #0a1628 100%);
  border: 1px solid var(--line-default, rgba(148, 163, 184, 0.2));
  border-radius: var(--r-lg, 20px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  color: var(--ink-secondary, #cbd5e1);
  font-family: var(--font-main, 'Inter', sans-serif);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base, 0.28s) var(--ease-out, ease),
              transform var(--dur-base, 0.28s) var(--ease-out, ease);
  /* Пока не видна — не перехватывает клики по контенту под собой. */
  pointer-events: none;
}

.cookie-banner--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-normal, 1.5);
}

.cookie-banner__text a {
  color: var(--brand-400, #60a5fa);
  text-decoration: underline;
}
.cookie-banner__text a:hover {
  color: var(--ink-primary, #fff);
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.cookie-banner__btn {
  padding: 10px 18px;
  border-radius: var(--r-sm, 12px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast, 0.16s) ease;
}

.cookie-banner__btn--primary {
  background: var(--brand-600, #2563eb);
  color: #fff;
  box-shadow: var(--glow-md, 0 8px 24px rgba(37, 99, 235, 0.4));
}
.cookie-banner__btn--primary:hover {
  background: var(--brand-500, #3b82f6);
}

@media (max-width: 600px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: var(--space-4, 16px);
  }
  .cookie-banner__actions {
    width: 100%;
  }
  .cookie-banner__btn {
    flex: 1 1 auto;
    text-align: center;
  }
}