/*
 * Cookie / tracking consent banner. Rendered by public/js/cookie-banner.js
 * on every HTML page until the visitor makes a choice (Accept / Decline).
 *
 * Colors match the platform design tokens (public/css/design-tokens.css):
 * black surfaces + gold accent/gradient. Token vars are used with literal
 * hex fallbacks so the banner still themes correctly on pages that don't
 * load design-tokens.css. Everything is scoped under #sp-cookie-banner so
 * it can never collide with page-level styles.
 */
#sp-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000; /* Above every reasonable overlay, below devtools */
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--color-card-background, #151515);
  border: 1px solid var(--color-container-border, #2e2e2e);
  border-top: 2px solid var(--color-content-accent, #96855a);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 -1px 30px rgba(150, 133, 90, 0.08);
  color: var(--color-content-primary, #ffffff);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  animation: sp-cc-slide-in 220ms ease-out;
}

@keyframes sp-cc-slide-in {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

#sp-cookie-banner .sp-cc-text {
  flex: 1 1 300px;
  color: var(--color-content-secondary, #b8b8b8);
}

#sp-cookie-banner .sp-cc-text strong {
  color: var(--color-content-primary, #ffffff);
}

#sp-cookie-banner a {
  color: var(--color-content-accent, #96855a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#sp-cookie-banner a:hover {
  color: var(--color-gradient-primary, #c1b057);
}

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

#sp-cookie-banner button {
  border: 1px solid var(--color-container-border, #2e2e2e);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

#sp-cookie-banner .sp-cc-accept {
  background: var(--gradient-primary, linear-gradient(90deg, #c1b057 0%, #96855a 100%));
  border-color: var(--color-content-accent, #96855a);
  color: #161616;
}

#sp-cookie-banner .sp-cc-accept:hover {
  filter: brightness(1.08);
}

#sp-cookie-banner .sp-cc-decline {
  background: var(--color-prop-background, #202020);
  color: var(--color-content-secondary, #b8b8b8);
}

#sp-cookie-banner .sp-cc-decline:hover {
  background: var(--color-page-background, #161616);
  color: var(--color-content-primary, #ffffff);
}

@media (max-width: 480px) {
  #sp-cookie-banner {
    left: 8px;
    right: 8px;
    top: calc(100dvh - 8px);
    bottom: auto;
    max-height: calc(100dvh - 16px);
    padding: 14px 16px;
    overflow-y: auto;
    font-size: 0.85rem;
    transform: translateY(-100%);
    animation: none;
  }
  #sp-cookie-banner .sp-cc-actions {
    width: 100%;
    justify-content: flex-end;
  }
}