/* ═══════════════════════════════════════════
   Renzo Consent Manager — Volt brand styling
   Self-contained. All classes prefixed .rc-
   Uses Renzo's tokens with fallbacks so it also
   works standalone on landing pages.
═══════════════════════════════════════════ */
.rc-banner,
.rc-modal {
  --rc-ghost:    var(--ghost,    #F7F7FB);
  --rc-midnight: var(--midnight, #1E1E2E);
  --rc-teal:     var(--teal,     #00C9A7);
  --rc-white:    var(--white,    #FFFFFF);
  --rc-steel:    var(--steel,    #374151);
  --rc-amber:    var(--amber,    #F59E0B);
  --rc-head: 'Trebuchet MS', Trebuchet, 'Helvetica Neue', sans-serif;
  --rc-body: 'Calibri Light', Calibri, 'Segoe UI', sans-serif;
}

/* ── BANNER ─────────────────────────────── */
.rc-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483000;
  background: var(--rc-midnight);
  color: var(--rc-ghost);
  border-top: 2px solid var(--rc-teal);
  box-shadow: 0 -8px 40px rgba(0,0,0,.35);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  font-family: var(--rc-body);
}
.rc-banner.rc-visible { transform: translateY(0); }

.rc-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem clamp(20px, 5vw, 48px);
  display: flex;
  gap: 2.5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.rc-banner-text { flex: 1 1 420px; min-width: 0; }
.rc-banner-title {
  font-family: var(--rc-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rc-teal);
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
}
.rc-banner-desc {
  font-size: .88rem;
  line-height: 1.65;
  color: rgba(247,247,251,.72);
  margin: 0;
  max-width: 68ch;
}
.rc-banner-actions {
  display: flex;
  gap: .7rem;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── BUTTONS ────────────────────────────── */
.rc-btn {
  font-family: var(--rc-head);
  font-weight: 700;
  font-size: .87rem;
  padding: .72rem 1.4rem;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s, transform .18s, background .2s, border-color .2s;
}
.rc-btn:focus-visible { outline: 3px solid var(--rc-amber); outline-offset: 2px; }
.rc-btn:hover { transform: translateY(-2px); }

/* Accept and Reject are DELIBERATELY identical in weight and prominence.
   PECR/ICO guidance: rejecting must be as easy as accepting. Do not
   restyle one of these to be more prominent than the other. */
.rc-btn-primary {
  background: var(--rc-teal);
  color: var(--rc-midnight);
  min-width: 124px;
}
.rc-btn-primary:hover { filter: brightness(1.08); }

.rc-btn-ghost {
  background: transparent;
  color: rgba(247,247,251,.75);
  border-color: rgba(247,247,251,.25);
}
.rc-btn-ghost:hover { color: var(--rc-teal); border-color: var(--rc-teal); }

.rc-btn-save {
  background: transparent;
  color: var(--rc-midnight);
  border-color: rgba(55,65,81,.35);
  min-width: 124px;
}
.rc-btn-save:hover { border-color: var(--rc-midnight); background: rgba(30,30,46,.05); }

.rc-link { color: var(--rc-teal); text-decoration: underline; }
.rc-link:hover { color: var(--rc-amber); }

/* ── MODAL ──────────────────────────────── */
.rc-modal { position: fixed; inset: 0; z-index: 2147483001; font-family: var(--rc-body); }
.rc-modal[hidden] { display: none; }

.rc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(30,30,46,.72);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s;
}
.rc-modal.rc-visible .rc-modal-backdrop { opacity: 1; }

.rc-modal-panel {
  position: relative;
  max-width: 620px;
  margin: min(6vh, 60px) auto;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--rc-white);
  color: var(--rc-midnight);
  border-radius: 16px;
  box-shadow: 0 20px 70px rgba(30,30,46,.35);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .25s, transform .25s cubic-bezier(.16,1,.3,1);
}
.rc-modal.rc-visible .rc-modal-panel { opacity: 1; transform: translateY(0) scale(1); }

.rc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.8rem 1rem;
  border-bottom: 1px solid rgba(55,65,81,.1);
}
.rc-modal-title {
  font-family: var(--rc-head);
  font-size: 1.25rem; font-weight: 700; margin: 0;
  letter-spacing: -.02em;
}
.rc-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.7rem; line-height: 1;
  color: rgba(55,65,81,.5); padding: 0 .3rem;
  transition: color .2s;
}
.rc-close:hover { color: var(--rc-midnight); }
.rc-close:focus-visible { outline: 3px solid var(--rc-amber); outline-offset: 2px; border-radius: 4px; }

.rc-modal-body { padding: 1.3rem 1.8rem; overflow-y: auto; }
.rc-modal-intro {
  font-size: .88rem; line-height: 1.7; color: var(--rc-steel);
  margin: 0 0 1.4rem;
}

.rc-cat {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(55,65,81,.08);
}
.rc-cat:last-child { border-bottom: none; }
.rc-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .45rem;
}
.rc-cat-name {
  font-family: var(--rc-head);
  font-size: .97rem; font-weight: 700; color: var(--rc-midnight);
}
.rc-cat-desc {
  font-size: .84rem; line-height: 1.6; color: var(--rc-steel);
  margin: 0; max-width: 60ch;
}
.rc-always {
  font-family: var(--rc-head);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--rc-teal);
  background: rgba(0,201,167,.1);
  border: 1px solid rgba(0,201,167,.28);
  padding: .3rem .65rem; border-radius: 20px;
  white-space: nowrap;
}

/* ── TOGGLE SWITCH ──────────────────────── */
.rc-switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
.rc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.rc-slider {
  position: absolute; inset: 0;
  background: rgba(55,65,81,.25);
  border-radius: 28px;
  transition: background .25s;
}
.rc-slider::before {
  content: ''; position: absolute;
  height: 22px; width: 22px; left: 3px; top: 3px;
  background: var(--rc-white); border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.rc-switch input:checked + .rc-slider { background: var(--rc-teal); }
.rc-switch input:checked + .rc-slider::before { transform: translateX(22px); }
.rc-switch input:focus-visible + .rc-slider { outline: 3px solid var(--rc-amber); outline-offset: 2px; }

.rc-modal-foot {
  display: flex; gap: .7rem; flex-wrap: wrap;
  padding: 1.2rem 1.8rem 1.6rem;
  border-top: 1px solid rgba(55,65,81,.1);
}

/* ── RESPONSIVE ─────────────────────────── */
@media (max-width: 780px) {
  .rc-banner-inner { flex-direction: column; align-items: stretch; gap: 1.2rem; padding: 1.2rem 20px; }
  .rc-banner-actions { flex-direction: column; }
  .rc-banner-actions .rc-btn { width: 100%; }
  .rc-modal-panel { margin: 0; max-height: 100vh; height: 100%; border-radius: 0; }
  .rc-modal-foot { flex-direction: column; }
  .rc-modal-foot .rc-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-banner, .rc-modal-panel, .rc-modal-backdrop,
  .rc-slider, .rc-slider::before, .rc-btn { transition: none !important; }
  .rc-btn:hover { transform: none; }
}

/* ── MEDIA EMBED FACADE (click-to-load video) ──────────────── */
[data-consent-media] {
  --rc-midnight: var(--midnight, #1E1E2E);
  --rc-teal:     var(--teal,     #00C9A7);
  --rc-ghost:    var(--ghost,    #F7F7FB);
}
.rc-media-facade {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  background:
    linear-gradient(rgba(30,30,46,.55), rgba(30,30,46,.75)),
    repeating-linear-gradient(135deg, rgba(0,201,167,.06) 0 2px, transparent 2px 14px);
  background-color: var(--rc-midnight);
  padding: 1.5rem;
  text-align: center;
}
.rc-media-play {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--rc-teal); color: var(--rc-midnight);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 8px 30px rgba(0,201,167,.4);
  transition: transform .18s, filter .2s;
}
.rc-media-play:hover { transform: scale(1.07); filter: brightness(1.08); }
.rc-media-play:focus-visible { outline: 3px solid #F59E0B; outline-offset: 3px; }
.rc-media-play-icon { margin-left: 3px; }
.rc-media-note {
  font-family: 'Calibri Light', Calibri, sans-serif;
  font-size: .82rem; line-height: 1.5; color: rgba(247,247,251,.75);
  max-width: 46ch; margin: 0;
}
.rc-media-note .rc-media-prefs {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--rc-teal); text-decoration: underline;
}
.rc-media-note .rc-media-prefs:hover { color: #F59E0B; }