/* Cookiebot banner (Swift template, loaded via GTM) in the site's CI.
   Cookiebot injects its own stylesheet at runtime, so rules here are
   anchored on the dialog id and marked !important to win over it.
   The banner uses the light paper scheme of the site so it stands out on
   the dark page, and the page behind it is dimmed.
   "Deny" and "Allow all" look identical on purpose: declining has to be
   as easy and as visible as accepting. */

#CybotCookiebotDialog {
  --cb-bg: #f5f3ee;
  --cb-line: #d9d5cc;
  --cb-heading: #141414;
  --cb-text: #57534d;
  --cb-signal: #ff5a1f;
  --cb-ink: #141414;
  background: var(--cb-bg) !important;
  border: 0 !important;
  border-top: 4px solid var(--cb-signal) !important;
  border-radius: 0 !important;
  /* first shadow dims the whole page around the banner */
  box-shadow: 0 0 0 100vmax rgb(10 10 10 / .55), 0 2rem 5rem rgb(0 0 0 / .5) !important;
  color: var(--cb-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

/* Text, lines and inner surfaces */
#CybotCookiebotDialog *,
#CybotCookiebotDialog *::before,
#CybotCookiebotDialog *::after {
  border-color: var(--cb-line) !important;
  font-family: inherit !important;
}
#CybotCookiebotDialog div,
#CybotCookiebotDialog span,
#CybotCookiebotDialog p,
#CybotCookiebotDialog li,
#CybotCookiebotDialog td,
#CybotCookiebotDialog th,
#CybotCookiebotDialog label { color: var(--cb-text) !important; }
#CybotCookiebotDialog .CybotCookiebotScrollContainer,
#CybotCookiebotDialog .CybotCookiebotDialogContentWrapper,
#CybotCookiebotDialog #CybotCookiebotDialogTabContent,
#CybotCookiebotDialog #CybotCookiebotDialogFooter,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTabsAdvertising,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieProvider,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieInfoCount,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBulkConsentCount,
#CybotCookiebotDialog .CookieCard,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerTypes { background-color: transparent !important; }
#CybotCookiebotDialog .CybotCookiebotFader { background: linear-gradient(to top, var(--cb-bg), transparent) !important; }
#CybotCookiebotDialog .CybotCookiebotFaderLeft { background: linear-gradient(to right, var(--cb-bg), transparent) !important; }
#CybotCookiebotDialog .CybotCookiebotFaderRight { background: linear-gradient(to left, var(--cb-bg), transparent) !important; }

/* Quiet scrollbars instead of Cookiebot's bright bars */
#CybotCookiebotDialog * { scrollbar-color: #b8b4ac transparent !important; scrollbar-width: thin !important; }
#CybotCookiebotDialog ::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
#CybotCookiebotDialog ::-webkit-scrollbar-thumb { background: #b8b4ac !important; border: 0 !important; border-radius: 0 !important; }
#CybotCookiebotDialog ::-webkit-scrollbar-track { background: transparent !important; }

/* Headings and labels in ink; the title in the cover's display face */
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle,
#CybotCookiebotDialog h2 {
  color: var(--cb-heading) !important;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif !important;
  font-weight: 800 !important;
  font-stretch: 82%;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText * {
  font-size: .9375rem !important;
  line-height: 1.55 !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonLabel,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonLabel *,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton label,
#CybotCookiebotDialog strong {
  color: var(--cb-heading) !important;
}
#CybotCookiebotDialog a,
#CybotCookiebotDialog a * { color: var(--cb-heading) !important; text-decoration-color: var(--cb-signal) !important; }

/* Tabs: uppercase labels, orange underline for the active one */
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink {
  color: var(--cb-text) !important;
  border-bottom: 3px solid transparent !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink:hover { color: var(--cb-heading) !important; }
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  color: var(--cb-heading) !important;
  border-bottom-color: var(--cb-signal) !important;
}

/* Switches: light track, orange when on, white knob */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider { background-color: #cfcac0 !important; }
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider::before { background-color: #ffffff !important; }
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--cb-signal) !important; }
#CybotCookiebotDialog input:disabled + .CybotCookiebotDialogBodyLevelButtonSlider { opacity: .5; }
#CybotCookiebotDialog input:focus-visible + .CybotCookiebotDialogBodyLevelButtonSlider { outline: 2px solid var(--cb-ink) !important; outline-offset: 3px; }

/* Buttons: square, Deny and Allow all identical, Allow selection outlined */
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
  border: 2px solid var(--cb-signal) !important;
  border-radius: 0 !important;
  background: var(--cb-signal) !important;
  color: var(--cb-ink) !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background-color .2s, border-color .2s, color .2s;
}
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonCustomize {
  border-color: var(--cb-ink) !important;
  background: transparent !important;
  color: var(--cb-ink) !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton:hover,
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonCustomize:hover {
  border-color: var(--cb-ink) !important;
  background: var(--cb-ink) !important;
  color: #f5f3ee !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton:focus-visible { outline: 2px solid var(--cb-ink) !important; outline-offset: 3px; }

/* Mobile: a compact bottom sheet instead of a full-screen layer */
@media (max-width: 600px) {
  #CybotCookiebotDialog {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 62vh !important;
    max-height: 62dvh !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper { max-height: inherit !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogHeader { padding: .5rem 1rem !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogHeaderLogosWrapper { height: 1.5rem !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogPoweredbyCybot svg { height: 1.25rem !important; width: auto !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogPoweredbyImage { height: 1.1rem !important; width: auto !important; }
  #CybotCookiebotDialog .CybotCookiebotDialogNavItemLink { padding: .55rem .5rem !important; font-size: .6875rem !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle { font-size: 1.15rem !important; margin-bottom: .35rem !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContent { padding: .75rem 1rem !important; }
  /* The text shrinks and scrolls on its own; the categories always stay in view */
  #CybotCookiebotDialog #CybotCookiebotDialogBody > .CybotCookiebotScrollContainer {
    flex: 1 1 auto !important;
    min-height: 4.5rem !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #CybotCookiebotDialog #CybotCookiebotDialogBody > .CybotCookiebotScrollContainer > .CybotCookiebotScrollArea {
    max-height: 100% !important;
    overflow-y: auto !important;
  }
  #CybotCookiebotDialog #CybotCookiebotDialogBody > .CybotCookiebotDialogBodyBottomWrapper { flex: none !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText,
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText * { font-size: .8125rem !important; line-height: 1.45 !important; }

  /* Categories as a 2 x 2 grid of small switches */
  #CybotCookiebotDialog #CybotCookiebotDialogBodyFieldsetInnerContainer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .35rem 1rem;
    padding: .5rem 1rem !important;
  }
  #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonWrapper {
    margin: 0 !important;
    padding: .3rem 0 !important;
    border: 0 !important;
  }
  #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonLabel { font-size: .75rem !important; }
  #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapper { transform: scale(.72); transform-origin: right center; }

  /* Deny and Allow all side by side, Allow selection below */
  #CybotCookiebotDialog #CybotCookiebotDialogFooter { padding: .6rem 1rem .9rem !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .5rem !important;
  }
  #CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
    width: 100% !important;
    min-height: 2.75rem !important;
    margin: 0 !important;
    padding: .55rem .5rem !important;
    font-size: .875rem !important;
  }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline { order: 1; }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { order: 2; }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
  #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonCustomize { order: 3; grid-column: 1 / -1; }
}

/* Re-open widget after a choice. Closed: only the orange logo, no box. */
#CookiebotWidget:not(.CookiebotWidget-open) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#CookiebotWidget .CookiebotWidget-logo { background: transparent !important; }
#CookiebotWidget .CookiebotWidget-logo svg { filter: drop-shadow(0 .25rem .6rem rgb(0 0 0 / .45)); }
#CookiebotWidget .CookiebotWidget-logo svg circle { fill: #ff5a1f !important; }
#CookiebotWidget .CookiebotWidget-logo svg path { fill: #141414 !important; }

/* Open: same paper scheme as the banner */
#CookiebotWidget.CookiebotWidget-open,
#CookiebotWidget.CookiebotWidget-open #CookiebotWidget-widgetContent,
#CookiebotWidget.CookiebotWidget-open .CookiebotWidget-contents { background: #f5f3ee !important; }
#CookiebotWidget.CookiebotWidget-open {
  border: 0 !important;
  border-top: 4px solid #ff5a1f !important;
  border-radius: 0 !important;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .55) !important;
}
#CookiebotWidget.CookiebotWidget-open * {
  color: #57534d !important;
  border-color: #d9d5cc !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
#CookiebotWidget.CookiebotWidget-open strong { color: #141414 !important; }
#CookiebotWidget .CookiebotWidget-close svg path { fill: #141414 !important; }
#CookiebotWidget .Cookiebotwidget-consent-icon svg path { fill: #8a867f !important; }
#CookiebotWidget .CookiebotWidget-approved .Cookiebotwidget-consent-icon svg path { fill: #ff5a1f !important; }
#CookiebotWidget #CookiebotWidget-btn-change,
#CookiebotWidget #CookiebotWidget-btn-withdraw {
  border-radius: 0 !important;
  font-weight: 600 !important;
  transition: background-color .2s, border-color .2s, color .2s;
}
#CookiebotWidget #CookiebotWidget-btn-change {
  border: 2px solid #ff5a1f !important;
  background: #ff5a1f !important;
  color: #141414 !important;
}
#CookiebotWidget #CookiebotWidget-btn-withdraw {
  border: 2px solid #141414 !important;
  background: transparent !important;
  color: #141414 !important;
}
#CookiebotWidget #CookiebotWidget-btn-withdraw:disabled { opacity: .4; }
#CookiebotWidget #CookiebotWidget-btn-change:hover,
#CookiebotWidget #CookiebotWidget-btn-withdraw:not(:disabled):hover {
  border-color: #141414 !important;
  background: #141414 !important;
  color: #f5f3ee !important;
}
