/* Cookiebot consent banner — restyled to match the modern.ai OS design tokens.
   Cookiebot renders its banner in the normal page DOM, so these global rules
   override its defaults. Selectors are Cookiebot's own IDs/classes, so
   !important is required to win the specificity race. */

/* --- Force Inter across the entire banner (matches OS body font) --- */
#CybotCookiebotDialog,
#CybotCookiebotDialog * {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* --- Container (full-width "bar") --- */
#CybotCookiebotDialog {
  background: #110d1b !important; /* matches the OS dark body background */
  color: rgba(255, 255, 255, 0.85) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5) !important;
}

/* No page-dimming overlay */
#CybotCookiebotDialogBodyUnderlay {
  display: none !important;
}

/* --- Tighten vertical space: remove the tall min-height + container padding
       so the bar hugs its content (the content was centered in an oversized
       bar, leaving big gaps above and below). --- */
#CybotCookiebotDialog,
#CybotCookiebotDialogBody,
#CybotCookiebotDialogBodyContentWrapper,
#CybotCookiebotDialogBodyContent {
  min-height: 0 !important;
}
#CybotCookiebotDialog {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
#CybotCookiebotDialogBody,
#CybotCookiebotDialogBodyContentWrapper,
#CybotCookiebotDialogBodyContent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Footer row (Show details + powered-by) — trim its spacing */
#CybotCookiebotDialogDetailFooter,
#CybotCookiebotDialogNav {
  margin-top: 6px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Title --- */
#CybotCookiebotDialogBodyContentTitle {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

/* --- Body copy (smaller + muted) --- */
#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialogBodyContentText * {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
#CybotCookiebotDialogBodyContentText a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-underline-offset: 2px !important;
}

/* "Show details" / customize link → violet accent */
.CybotCookiebotDialogBodyLink,
#CybotCookiebotDialogBodyLevelButtonCustomize,
#CybotCookiebotDialogBodyButtonDetails {
  color: #a78bfa !important; /* violet-400 */
}

/* --- Buttons --- */
#CybotCookiebotDialogBodyButtons,
#CybotCookiebotDialogBodyButtonsWrapper {
  gap: 10px !important;
}

/* Accept / Allow all → violet gradient (matches the OS primary CTA) */
#CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogBodyButtonAcceptAll,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  background: linear-gradient(to bottom, #8b5cf6, #7c3aed) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 20px !important;
  transition: filter 0.2s ease, box-shadow 0.2s ease !important;
}
#CybotCookiebotDialogBodyButtonAccept:hover,
#CybotCookiebotDialogBodyButtonAcceptAll:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.4) !important;
}

/* Decline / Deny → muted outline (matches the OS secondary CTA) */
#CybotCookiebotDialogBodyButtonDecline {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 20px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
#CybotCookiebotDialogBodyButtonDecline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* Category toggle sliders (details view) → violet when enabled */
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #8b5cf6 !important;
}

/* "Powered by Cookiebot" — keep (free plan) but tone it down */
#CybotCookiebotDialogPoweredbyImage,
#CybotCookiebotDialogPoweredbyLink {
  opacity: 0.4 !important;
}

/* --- Light-mode overrides ------------------------------------------------ */
/* When the OS renders in light mode (ThemeProvider sets [data-theme="light"]
   or the system preference is light), flip the banner to a white-surface card
   so it doesn't look jarring against the light background. */
@media (prefers-color-scheme: light) {
  #CybotCookiebotDialog {
    background: #ffffff !important;
    color: rgba(0, 0, 0, 0.85) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08) !important;
  }

  #CybotCookiebotDialogBodyContentTitle {
    color: #0f0a1e !important;
  }

  #CybotCookiebotDialogBodyContentText,
  #CybotCookiebotDialogBodyContentText * {
    color: rgba(0, 0, 0, 0.55) !important;
  }

  #CybotCookiebotDialogBodyContentText a {
    color: rgba(0, 0, 0, 0.75) !important;
  }

  .CybotCookiebotDialogBodyLink,
  #CybotCookiebotDialogBodyLevelButtonCustomize,
  #CybotCookiebotDialogBodyButtonDetails {
    color: #7c3aed !important; /* violet-700 — legible on white */
  }

  #CybotCookiebotDialogBodyButtonDecline {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

  #CybotCookiebotDialogBodyButtonDecline:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.9) !important;
  }

  #CybotCookiebotDialogPoweredbyImage,
  #CybotCookiebotDialogPoweredbyLink {
    opacity: 0.3 !important;
  }
}