/*
 * Cookiebot banner theme for cai.anoki.ai (app) and creativeai.anoki.ai (Webflow site).
 *
 * Look only: a compact frosted card at the bottom right (a bottom sheet on phones),
 * with a gear for the details view, a quiet Decline and a black Accept button. Consent
 * behaviour, categories and texts all stay Cookiebot's; nothing here changes what
 * a visitor can choose or what gets stored.
 *
 * Served at https://cai.anoki.ai/cookiebot-theme.css. The app links it from
 * app/layout.tsx and the Webflow site from its head custom code, so both sites share
 * one file and the banner looks the same on both. Rules for keeping it working:
 *   - Every rule is scoped under #CybotCookiebotDialog, so nothing leaks into either site.
 *   - Cookiebot ships its CSS as adopted stylesheets, which cascade after ours, so
 *     overrides need !important (Cookiebot's own advice for external stylesheets).
 *   - px only: the Webflow site scales its root font size with the window.
 *   - One face on both sites: Inter. The app self-hosts it as --font-inter
 *     (app/fonts); the Webflow site loads "Inter Variablefont Opsz Wght". No new font
 *     download either way.
 *   - Never force `display`, `opacity` or `visibility` on #CybotCookiebotDialog itself:
 *     Cookiebot shows and hides the banner with them.
 *   - The `pointer-events` rule that keeps the banner clickable under modal dialogs
 *     lives in app/globals.css.
 *
 * Markup notes (Cookiebot "Swift" bottom template, uc.js 2.143, checked 2026-11-06):
 *   .CybotEdge on the dialog = the collapsed banner. Clicking "Show details" drops it
 *   and shows the Consent / Details / About tabs; that is the details view below.
 */

#CybotCookiebotDialog {
  --cai-cb-font: var(--font-inter, "Inter Variablefont Opsz Wght", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --cai-cb-ink: #111113;
  --cai-cb-ink-soft: #2a2a2f;
  --cai-cb-muted: #4d4d57;
  --cai-cb-line: rgba(17, 17, 19, 0.07);
  --cai-cb-hover: rgba(17, 17, 19, 0.05);
  --cai-cb-chip: rgba(17, 17, 19, 0.06);
  --cai-cb-radius: 14px;
  --cai-cb-control-radius: 10px;
  --cai-cb-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --cybot-fader-color: transparent !important;

  /* The card: frosted glass with a light rim and a calm, layered shadow */
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  /* 16px, the inset the app's own floating controls use, so the card fully covers its help button. */
  right: 16px !important;
  bottom: 16px !important;
  /* Above anything a page stacks at the bottom right (Cookiebot's own value is 2147483631). */
  z-index: 2147483647 !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: 420px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: var(--cai-cb-radius) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.88) 100%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(17, 17, 19, 0.06),
    0 1px 2px rgba(17, 17, 19, 0.04),
    0 8px 24px -8px rgba(17, 17, 19, 0.16),
    0 24px 56px -24px rgba(17, 17, 19, 0.24) !important;

  /* Type: Inter on both sites, sizes in px */
  color: var(--cai-cb-ink) !important;
  font-family: var(--cai-cb-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  /* Off, so the website's variable Inter draws exactly like the app's. */
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #CybotCookiebotDialog {
    background: rgba(255, 255, 255, 0.97) !important;
  }
}

#CybotCookiebotDialog.CybotCookiebotDialogActive {
  animation: cai-cb-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cai-cb-card-in {
  from {
    opacity: 0;
    translate: 0 8px;
    scale: 0.99;
  }
}

/* ---- Layout: one column, the tab content scrolls inside the card ---- */

#CybotCookiebotDialog .CybotCookiebotDialogContentWrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogTabContent {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBody,
#CybotCookiebotDialog #CybotCookiebotDialogBody .CybotCookiebotScrollContainer,
#CybotCookiebotDialog .CybotCookiebotDialogBodyBottomWrapper {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}

#CybotCookiebotDialog .CybotCookiebotScrollContainer {
  border: 0 !important;
  padding: 0 !important;
  max-height: none !important;
}

#CybotCookiebotDialog .CybotCookiebotScrollArea,
#CybotCookiebotDialog .CybotCookiebotDialogTabPanel {
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 17, 19, 0.2) transparent;
}

#CybotCookiebotDialog .CybotCookiebotFader,
#CybotCookiebotDialog .CybotCookiebotScrollbarContainer {
  display: none !important;
}

/* No Cookiebot logo and no close X: Decline and Accept are the two ways out. */
#CybotCookiebotDialog #CybotCookiebotDialogHeader,
#CybotCookiebotDialog .CybotCookiebotBannerCloseButton,
#CybotCookiebotDialog #CybotCookiebotDialogPoweredByText {
  display: none !important;
}

/* ---- Title and text: the title only one step above the text, as in Native ---- */

#CybotCookiebotDialog #CybotCookiebotDialogBodyContent {
  margin: 0 !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
  margin: 0 0 4px !important;
  padding: 0 40px 0 0 !important;
  color: var(--cai-cb-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  letter-spacing: -0.15px !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cai-cb-muted) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: -0.1px !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a,
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText button,
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTextToggle,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContentTextAbout a,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink,
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList a {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(77, 77, 87, 0.55) !important;
  text-underline-offset: 3px !important;
  /* Webflow's global `a { text-underline-position: from-font }` hides the line with its Inter. */
  text-underline-position: auto !important;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a:hover,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContentTextAbout a:hover,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink:hover,
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a:hover {
  color: var(--cai-cb-ink) !important;
  text-decoration-color: currentColor !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTextToggle {
  margin-top: 4px !important;
  color: var(--cai-cb-ink) !important;
  font-size: 14px !important;
}

/* ---- The gear: Cookiebot's "Show details" link, moved to the top right ---- */

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
  position: absolute !important;
  top: 13px !important;
  right: 14px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  color: var(--cai-cb-muted) !important;
  /* The words stay in the DOM as the link's accessible name; only the icon shows. */
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a:hover {
  background: var(--cai-cb-hover) !important;
  color: var(--cai-cb-ink) !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a::after {
  content: "" !important;
  display: block !important;
  flex: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 0 !important;
  transform: none !important;
  background: currentColor !important;
  -webkit-mask: var(--cai-cb-gear) center / contain no-repeat;
  mask: var(--cai-cb-gear) center / contain no-repeat;
  transition: rotate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a:hover::after {
  rotate: 45deg;
}

/* ---- Buttons: quiet Decline on the left, black Accept filling the row ---- */

#CybotCookiebotDialog #CybotCookiebotDialogFooter {
  flex: none !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: static !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotScrollArea,
#CybotCookiebotDialog #CybotCookiebotDialogBodyButtons {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Both buttons share this box: 44px tall (a comfortable touch target), body-size text.
 * The owner chose Native's quiet Decline on 2026-11-06, accepting the visual-parity risk
 * (legal review still open), so Decline has no fill; it stays a real button in the same
 * row, with the same height and text size as Accept.
 */
#CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--cai-cb-control-radius) !important;
  background: transparent !important;
  color: var(--cai-cb-ink) !important;
  font-family: var(--cai-cb-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: -0.1px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, translate 0.1s ease;
}

#CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:hover {
  background: var(--cai-cb-hover) !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:active {
  translate: 0 1px;
}

/*
 * No `order` overrides: the buttons sit in Cookiebot's DOM order (Accept, then Decline), so
 * what is seen, the Tab order and the screen-reader order all match.
 */
#CybotCookiebotDialog #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept {
  flex: 1 1 auto !important;
  background: linear-gradient(180deg, #2c2c31 0%, #111113 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(17, 17, 19, 0.2),
    0 4px 10px -4px rgba(17, 17, 19, 0.35) !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept:hover {
  background: linear-gradient(180deg, #3a3a40 0%, #1d1d21 100%) !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogArrow {
  display: none !important;
}

/* ---- Keyboard focus: Cookiebot's reset removes outlines, so put them back ---- */

#CybotCookiebotDialog a:focus-visible,
#CybotCookiebotDialog button:focus-visible,
#CybotCookiebotDialog [tabindex]:focus-visible,
#CybotCookiebotDialog input:focus-visible + .CybotCookiebotDialogBodyLevelButtonSlider {
  outline: 2px solid var(--cai-cb-ink) !important;
  outline-offset: 2px !important;
}

#CybotCookiebotDialog:focus-visible {
  outline: 2px solid var(--cai-cb-ink) !important;
  outline-offset: 2px !important;
}

/* ---- Details view (after the gear): same card, taller, scrolls inside ---- */

#CybotCookiebotDialog:not(.CybotEdge) {
  width: 460px !important;
  height: 580px !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogNav {
  flex: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogNavList {
  display: flex !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: var(--cai-cb-control-radius) !important;
  background: rgba(17, 17, 19, 0.05) !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItem {
  flex: 1 1 0 !important;
  margin: 0 !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--cai-cb-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: -0.1px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
  color: var(--cai-cb-ink) !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  background: #ffffff !important;
  color: var(--cai-cb-ink) !important;
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.08), 0 0 0 1px rgba(17, 17, 19, 0.04) !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink::before,
#CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink::after {
  display: none !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogTabContent {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogTabContent > .CybotCookiebotScrollContainer,
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogTabContent > .CybotCookiebotDialogTabPanel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#CybotCookiebotDialog:not(.CybotEdge) .CybotCookiebotDialogTabPanel {
  overflow-y: auto !important;
  max-height: 100% !important;
  height: 100% !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--cai-cb-line) !important;
}

/* Category rows */
#CybotCookiebotDialog #CybotCookiebotDialogDetailBody,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContent,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContentTextOverview {
  margin: 0 !important;
  padding: 0 !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContentCookieContainerTypes {
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
}

#CybotCookiebotDialog .CookieCard {
  margin: 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cai-cb-line) !important;
}

#CybotCookiebotDialog .CookieCard:first-child {
  padding-top: 2px !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerHeader {
  margin: 0 !important;
  padding: 0 !important;
}

/* Title on the left, chevron on the right, so titles and descriptions share one edge */
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--cai-cb-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: -0.1px !important;
  text-align: left !important;
}

#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton::before,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab::before {
  order: 3 !important;
  flex: none !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 6px 0 auto !important;
  top: 2px !important;
  border-width: 1.5px 1.5px 0 0 !important;
}

#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton.CybotCookiebotDialogCollapsed::before,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab.CybotCookiebotDialogCollapsed::before {
  top: -2px !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton::before,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2Tab::before,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieProvider::before,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentLink::before {
  border-color: var(--cai-cb-muted) !important;
}

/* Cookiebot's blue hover accents, in our ink */
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieProvider:hover,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentLink:hover {
  color: var(--cai-cb-ink-soft) !important;
}

#CybotCookiebotDialog a:hover::before,
#CybotCookiebotDialog a:hover::after,
#CybotCookiebotDialog button:hover::before,
#CybotCookiebotDialog button:hover::after {
  border-color: var(--cai-cb-ink) !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogDetailBulkConsentCount {
  margin-left: 6px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  background: var(--cai-cb-chip) !important;
  color: var(--cai-cb-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  font-variant-numeric: tabular-nums;
}

#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieTypeIntro {
  padding: 2px 28px 0 0 !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeIntro,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2TabsIntro,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContentTextAbout,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBulkConsentDescription {
  margin-top: 0 !important;
  color: var(--cai-cb-muted) !important;
  font-size: 13.5px !important;
  line-height: 19px !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContentTextAbout {
  margin: 0 !important;
  padding: 0 2px 0 0 !important;
}

/* Provider and cookie lists inside an expanded category */
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTableContainer,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieGroup {
  border-radius: var(--cai-cb-control-radius) !important;
  background: rgba(17, 17, 19, 0.035) !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieProvider,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTabContent,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieInfo {
  color: var(--cai-cb-ink) !important;
  font-size: 13px !important;
  line-height: 19px !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsent,
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  color: var(--cai-cb-muted) !important;
  font-size: 12.5px !important;
  line-height: 18px !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentLink {
  color: var(--cai-cb-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Category switches, when the banner shows them (off grey, on black, necessary gold) */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #8f8f97 !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--cai-cb-ink) !important;
}

#CybotCookiebotDialog input:disabled:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #d6aa45 !important;
}

/* ---- Phones: a bottom sheet with a 16px gutter ---- */

@media (max-width: 600px) {
  #CybotCookiebotDialog,
  #CybotCookiebotDialog:not(.CybotEdge) {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 16px !important;
  }

  #CybotCookiebotDialog:not(.CybotEdge) {
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;
  }

  #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
    top: 11px !important;
    right: 10px !important;
  }
}

/*
 * Narrow phones (360, 375): a floating card is too narrow to keep the text to two lines
 * at 14px, so the sheet runs edge to edge with rounded top corners. Below about 340px
 * (320) the text takes three lines at 14px; it is not shrunk further.
 */
@media (max-width: 389px) {
  #CybotCookiebotDialog,
  #CybotCookiebotDialog:not(.CybotEdge) {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border-width: 1px 0 0 !important;
    border-radius: var(--cai-cb-radius) var(--cai-cb-radius) 0 0 !important;
  }

  #CybotCookiebotDialog:not(.CybotEdge) {
    height: calc(100vh - 16px) !important;
    height: calc(100dvh - 16px) !important;
  }

  #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
    right: 12px !important;
  }
}

/*
 * Cookiebot's floating "privacy trigger" (the round button it shows bottom left once a
 * visitor has answered). The app turns it off with data-widget-enabled="false"; the
 * website loads Cookiebot through GTM's Cookiebot tag, which cannot pass that, so both
 * sites hide it here. "Cookie settings" in each site's footer (and the app's account
 * menu) reopens the banner. Native and Creatify show no such button either.
 */
#CookiebotWidget,
#CookiebotWidgetUnderlay {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #CybotCookiebotDialog,
  #CybotCookiebotDialog * {
    animation: none !important;
    transition: none !important;
  }

  #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a:hover::after {
    rotate: none;
  }
}