/* ==========================================================================
   Cookie and privacy consent bar (js/consent.js).
   Floating UI uses the carbon surface of the toast, tooltip and agent chip.
   Every token has a fallback because the legal pages load only css/legal.css.
   Stacks above the floating buttons (z 40-55) and below the scrim, drawer,
   lightbox and toast (z 60+), so an open unit drawer or modal covers it.
   ========================================================================== */

.cc-bar {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 58;
  max-width: 880px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 14px 14px 14px 20px;
  border-radius: var(--r-card, 12px);
  background: rgba(23, 26, 28, .94); color: #fff;
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  font: 400 14px/1.5 var(--font-body, "Manrope", -apple-system, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  transition: opacity .35s var(--ease, ease), transform .35s var(--ease, ease);
}
.cc-bar.cc-in, .cc-bar.cc-out { opacity: 0; transform: translateY(12px); }
.cc-bar.cc-out { pointer-events: none; }

.cc-text { flex: 1 1 340px; min-width: 0; margin: 0; color: rgba(255, 255, 255, .78); }
.cc-text b { font-weight: 600; color: #fff; }
.cc-bar a { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.cc-bar a:hover { text-decoration-color: #fff; }
.cc-bar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cc-actions { flex: 0 0 auto; display: flex; gap: 8px; margin-left: auto; }
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-btn, 4px);
  font: 500 14px/1 var(--font-body, "Manrope", -apple-system, Arial, sans-serif);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--t, .33s), filter var(--t, .33s);
}
.cc-primary { background: var(--accent, #2f6b55); color: var(--accent-ink, #fff); }
/* A filter rather than --accent-hover: the agent brief swaps --accent to TIDAL blue but not the hover. */
.cc-primary:hover { filter: brightness(.88); }
.cc-ghost { background: rgba(255, 255, 255, .1); color: #fff; }
.cc-ghost:hover { background: rgba(255, 255, 255, .18); }

/* Phones: text on top, two equal buttons below, still 16px from each edge. */
@media (max-width: 559.98px) {
  .cc-bar { padding: 14px 14px 12px; gap: 12px; font-size: 13.5px; }
  .cc-actions { width: 100%; margin-left: 0; }
  .cc-btn { flex: 1 1 0; min-height: 44px; padding: 0 12px; }
}

/* While the bar is up, lift the site's own floating buttons clear of it. A margin moves a
   fixed element without overriding its own bottom offset or transitions. */
body.cc-open:not(.present) :is(.ct-bar, .to-top, .sh-ref, .ob-film, .toast, .edit-banner) { margin-bottom: var(--cc-lift, 0px); }
/* ...and let the end of the page scroll clear of it. */
body.cc-open:not(.present) { padding-bottom: var(--cc-lift, 0px); }

/* Presentation mode and the kiosk are agent-driven screens, not a visitor's session.
   The phone menu drops over the page, so the bar steps aside until it closes. */
body.present .cc-bar, body.kiosk .cc-bar, body.menu-open .cc-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-bar, .cc-btn, .cc-bar a { transition: none; }
}
@media print { .cc-bar { display: none !important; } }