/* Overlays that every page carries: the cookie banner and the
   "coming soon" toast. Split out of styles.css because the legal
   pages load their own stylesheet and still need these two. */
.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--bg-dark); color: white;
  padding: 12px 24px; border-radius: 12px;
  font-size: 0.88rem; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000; white-space: nowrap;
}
.toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.toast .toast-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--orange); border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}

/* ── Cookie banner ── */
.cookie-banner {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  background: #101624; color: #cdd6f4; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 0; width: 380px; max-width: calc(100vw - 32px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.78rem; line-height: 1.6;
  animation: fadeInUp 0.4s ease;
  display: none;
}
.cookie-banner.visible { display: block; }
.cb-header {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cb-header .dot { width: 10px; height: 10px; border-radius: 50%; }
.cb-header .dot:nth-child(1) { background: #ff5f57; }
.cb-header .dot:nth-child(2) { background: #febc2e; }
.cb-header .dot:nth-child(3) { background: #28c840; }
.cb-header span { margin-left: 8px; color: #6c7086; font-size: 0.72rem; }
.cb-body { padding: 16px; }
.cb-body .cb-comment { color: #6c7086; margin-bottom: 8px; }
.cb-body p { margin-bottom: 12px; }
.cb-actions { display: flex; flex-direction: column; gap: 4px; }
.cb-actions button {
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: #cdd6f4; padding: 7px 14px; border-radius: 6px;
  font-family: inherit; font-size: 0.78rem; cursor: pointer;
  text-align: left; transition: all 0.2s;
}
.cb-actions button:hover { background: rgba(255,255,255,0.06); }
.cb-actions .cb-accept {
  background: rgba(52, 210, 154, 0.15); border-color: rgba(52, 210, 154, 0.3);
  color: #34d29a;
}
.cb-actions .cb-accept:hover { background: rgba(52, 210, 154, 0.25); }
.cb-actions a {
  color: #6c7086; font-size: 0.72rem; text-decoration: none;
  padding: 4px 0; display: inline-block;
}
.cb-actions a:hover { color: #cdd6f4; }

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