/* =================================================================
   cookie-banner.css — Bluworks v2
   Exact values from Website/style.css lines 5880–5970

   Token values:
     --ink:     #0A0F1E    background
     --r-3:     12px       border-radius
     --s-4:     16px       vertical padding
     --s-5:     20px       horizontal padding / gap
     --s-3:     12px       mobile gap
     --s-2:     8px        button gap
     --r-2:     8px        button border-radius
     --text-small: 16px
     --blu-primary: #1E50E5
     --blu-light:   #4895FF
     --ease:    cubic-bezier(0.2, 0.8, 0.2, 1)
     --dur:     220ms
   ================================================================= */

.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: #0A0F1E;
  color: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 999;
  box-shadow: 0 18px 48px rgba(10, 15, 30, 0.30);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cookie-banner.show {
  opacity: 1;
  transform: none;
}

.cookie-banner-text {
  font-size: 16px;
  line-height: 1.55;
  color: #C7CCDB;
  flex: 1;
  font-weight: 500;
}

.cookie-banner-text a {
  color: #fff;
  text-decoration: underline;
}

.cookie-banner-text a:hover {
  color: #4895FF;
}

.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border: 0;
  transition: background 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              color 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  line-height: 1.3;
}

.cookie-btn-accept {
  background: #1E50E5;
  color: #fff;
}

.cookie-btn-accept:hover {
  background: #4895FF;
  color: #fff;
}

.cookie-btn-decline {
  background: transparent;
  color: #C7CCDB;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-btn-decline:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Mobile */
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 12px 16px;
    gap: 12px;
  }

  .cookie-banner-actions {
    justify-content: flex-end;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

/* ── Arabic RTL font override (auto) ────────────────────────────── */
html[dir="rtl"] .cookie-banner {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif !important;
}