/* RBLURRR COOKIE / LOCAL-STORAGE CONSENT BANNER — pairs with /consent.js
   A copy of the #cookieBar rules in /index.html ("COOKIE CONSENT BANNER"),
   with the home page's custom properties written out as literal values so
   the banner looks identical on pages that don't define them:
     var(--gray)          → #c9c2b7  (the live value; professional-overrides.css warms it)
     var(--white)         → #f0f0f0
     var(--cyan)          → #ffd277  (molten gold; legacy variable name)
     var(--gradient)      → linear-gradient(135deg, #ffd277, #ff7a3d)
     var(--font-heading)  → 'Space Grotesk', system-ui, sans-serif */

#cookieBar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 140%);
  width: min(680px, calc(100vw - 28px));
  z-index: 99996;
  background: rgba(15, 11, 6, 0.97);
  border: 1px solid rgba(255, 210, 119, 0.25);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 0 50px rgba(255, 210, 119, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#cookieBar.show { transform: translate(-50%, 0); }
#cookieBar .ck-text { flex: 1 1 300px; font-size: 13px; color: #c9c2b7; line-height: 1.6; }
#cookieBar .ck-text strong { color: #f0f0f0; font-weight: 600; }
#cookieBar .ck-text a { color: #ffd277; }
#cookieBar .ck-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#cookieBar button {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
}
#cookieBar .ck-accept {
  border: none;
  background: linear-gradient(135deg, #ffd277, #ff7a3d);
  color: #04040a;
}
#cookieBar .ck-accept:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(255, 210, 119, 0.35); }
#cookieBar .ck-essential {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #c9c2b7;
}
#cookieBar .ck-essential:hover { border-color: #ffd277; color: #ffd277; }
@media (max-width: 560px) {
  #cookieBar { bottom: 10px; padding: 14px 16px; }
  #cookieBar .ck-actions { width: 100%; }
  #cookieBar button { flex: 1; }
}

/* keyboard focus + reduced motion (the home page gets these from its global
   focus and reduced-motion rules; sub pages need them spelled out) */
#cookieBar a:focus-visible,
#cookieBar button:focus-visible { outline: 2px solid #ffd277; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #cookieBar, #cookieBar button { transition: none; }
}