/* ══════════════════════════════════════════════════════════════════════════
   Cookie consent banner — shared by every public marketing page AND the SPA
   shell (client/index.html). Loaded as a real stylesheet rather than injected
   from JS so the banner paints with the page instead of flashing in after it.

   Palette is the studio-dark token set the public pages already declare
   inline. Values are hardcoded here rather than read from var(--…) because
   this stylesheet loads on client/index.html too, where those page-level
   :root tokens don't exist.
   ══════════════════════════════════════════════════════════════════════════ */

.abp-consent {
  position: fixed;
  z-index: 2147483000; /* above the nav drawer (1000) and any page overlay */
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 22px 18px;
  background: #0B0B0E;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  color: #F9F9F9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

/* Hidden until the script decides a banner is actually needed, so a visitor
   who already answered never sees a flash of it. */
.abp-consent[hidden] {
  display: none !important;
}

.abp-consent-title {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  margin: 0 0 8px;
}

.abp-consent-copy {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.7);
}

.abp-consent-copy a {
  color: #E85002;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── category toggles (only shown once "manage" is opened) ─────────────── */

.abp-consent-options {
  margin: 0 0 16px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  gap: 12px;
}

.abp-consent-options[hidden] {
  display: none !important;
}

.abp-consent-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.abp-consent-option input {
  margin: 2px 0 0;
  accent-color: #E85002;
  width: 15px;
  height: 15px;
  flex: none;
}

.abp-consent-option input:disabled {
  opacity: 0.45;
}

.abp-consent-option-label {
  font-weight: 500;
  display: block;
}

.abp-consent-option-hint {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  display: block;
}

/* ─── actions ──────────────────────────────────────────────────────────── */

.abp-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.abp-consent-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.abp-consent-btn:active {
  transform: scale(0.97);
}

.abp-consent-btn-primary {
  background: #E85002;
  color: #F9F9F9;
  flex: 1 1 auto;
}

.abp-consent-btn-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.14);
  flex: 1 1 auto;
}

.abp-consent-btn-quiet {
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  border-color: transparent;
  padding: 10px 12px;
}

@media (hover: hover) {
  .abp-consent-btn-primary:hover {
    background: #F16001;
  }
  .abp-consent-btn-secondary:hover {
    border-color: rgba(232, 80, 2, 0.35);
    color: #F9F9F9;
  }
  .abp-consent-btn-quiet:hover {
    color: #F9F9F9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abp-consent-btn {
    transition: none;
  }
  .abp-consent-btn:active {
    transform: none;
  }
}

@media (max-width: 480px) {
  .abp-consent {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 18px 18px 16px;
  }
  .abp-consent-actions {
    flex-direction: column;
  }
}