/* ==========================================================================
   DCI consent banner
   Built from design-handoff/README.md and "DCI Standalone Site v2.dc.html".
   Tokens keep the names used in the design so this merges with the site CSS.
   The banner is created by JavaScript, so with JS disabled it never appears
   and no analytics run. That is the intended behaviour, not a fallback.
   ========================================================================== */

:root {
  --dci-red: #E4002B;
  --dci-grey: #6D6E70;
  --dci-light-grey: #FAFAFA;
  --dci-white: #FFFFFF;
  --px: 32px;

  --cbPad: 20px var(--px);
  --cbDir: row;
  --cbAlign: center;
  --cbGap: 32px;
  --cbBtnFlex: 0 0 auto;
  --cbBtnsW: auto;
}

@media (max-width: 767px) {
  :root {
    --px: 20px;
    --cbPad: 18px var(--px) 20px;
    --cbDir: column;
    --cbAlign: stretch;
    --cbGap: 16px;
    --cbBtnFlex: 1 1 0;
    --cbBtnsW: 100%;
  }
}

/* ---------- banner ---------- */

.dci-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--dci-white);
  border-top: 1px solid rgba(109, 110, 112, 0.16);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.10);
}

.dci-consent__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--cbPad);
  display: flex;
  flex-direction: var(--cbDir);
  align-items: var(--cbAlign);
  gap: var(--cbGap);
}

.dci-consent__copy { flex: 1 1 auto; min-width: 0; }

.dci-consent__title {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.030em;
  color: var(--dci-red);
}

.dci-consent__body {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dci-grey);
  margin: 6px 0 0;
  max-width: 640px;
}

.dci-consent__body a {
  font-weight: 700;
  color: var(--dci-red);
  text-decoration: underline;
}

.dci-consent__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  width: var(--cbBtnsW);
}

.dci-consent__btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  flex: var(--cbBtnFlex);
  border: 2px solid transparent;
}

.dci-consent__btn--decline {
  background: var(--dci-white);
  color: var(--dci-grey);
  border-color: var(--dci-grey);
}
.dci-consent__btn--decline:hover { background: var(--dci-light-grey); }

.dci-consent__btn--accept {
  background: var(--dci-red);
  color: var(--dci-white);
  border-color: var(--dci-red);
}
.dci-consent__btn--accept:hover { opacity: 0.88; }

/* Focus must always be visible for keyboard users. */
.dci-consent__btn:focus-visible,
.dci-consent__body a:focus-visible,
.dci-consent-settings:focus-visible {
  outline: 2px solid var(--dci-red);
  outline-offset: 2px;
}

/* ---------- toast ---------- */

.dci-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 61;
  width: max-content;
  max-width: calc(100vw - 40px);
  background: var(--dci-grey);
  color: var(--dci-white);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.dci-toast__icon { display: block; flex-shrink: 0; }
.dci-toast__text { font-weight: 700; font-size: 14px; line-height: 1.4; }

/* Respect a reduced-motion preference; the design has no entry animation
   to suppress, but any future one must be gated here. */
@media (prefers-reduced-motion: reduce) {
  .dci-consent, .dci-toast { transition: none !important; animation: none !important; }
}