/* Klaro brand overrides — kalender-sync.de
   Klaro defaults to a DARK theme (dark bg + light text).
   We override to a WHITE theme matching the kalender-sync brand.
   Key: we keep --dark1 and --light1 at Klaro defaults and instead
   override individual components with explicit colors. */

/* Disable page scrolling when modal is open */
body:has(.klaro .cookie-modal) {
  overflow: hidden !important;
}

/* Stack Klaro ABOVE the ContactModal (z=10000). When the user clicks
   "Buchung aktivieren" inside the contact modal, klaro.show() opens the
   consent picker — but Klaro's defaults (.cookie-modal=1000, .cm-modal=1001)
   sit far below our modal, so the user could not see or interact with the
   consent prompt. Bumping these one rung above the contact modal keeps the
   consent flow visible while the contact modal stays mounted behind it. */
.klaro .cookie-modal,
.klaro .cookie-notice {
  z-index: 10010 !important;
}
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-modal .cm-bg {
  z-index: 10011 !important;
}

.klaro {
  --font-family: system-ui, -apple-system, sans-serif;
  --font-size: 14px;
  --green1: #2563eb;   /* primary blue — toggles, active states */
  --green2: #1d4ed8;   /* hover blue */
  --green3: #dbeafe;   /* light blue tint */
  --blue1: #2563eb;    /* "accept selected" button */
  --border-radius: 8px;
  --border-style: solid;
  --border-width: 1px;
}

/* ── Cookie Notice (bottom banner) ─────────────────────── */

.klaro .cookie-notice {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 20px 24px !important;
}

/* Force all text in notice to dark colors (override Klaro's light1/fafafa defaults) */
.klaro .cookie-notice,
.klaro .cookie-notice p,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice strong,
.klaro .cookie-notice ul,
.klaro .cookie-notice li,
.klaro .cookie-notice span,
.klaro .cookie-notice div {
  color: #475569 !important;
}

.klaro .cookie-notice .cn-title {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.klaro .cookie-notice .cn-body {
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}

.klaro .cookie-notice .cn-body a {
  color: #2563eb !important;
  text-decoration: none !important;
}
.klaro .cookie-notice .cn-body a:hover {
  text-decoration: underline !important;
}

/* Button container */
.klaro .cookie-notice .cn-ok {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}

/* All notice buttons — shared base */
.klaro .cookie-notice .cm-btn {
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.15s, color 0.15s !important;
  line-height: 1.4 !important;
}

/* "Alle akzeptieren" — primary blue */
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #2563eb !important;
  color: #ffffff !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  background-color: #1d4ed8 !important;
}

/* "Nur notwendige" — equally prominent (GDPR), outlined style */
.klaro .cookie-notice .cm-btn.cm-btn-danger {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover {
  background-color: #e2e8f0 !important;
}

/* "Einstellungen" / learn more */
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: transparent !important;
  color: #64748b !important;
  padding: 10px 12px !important;
  font-weight: 500 !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-info:hover {
  color: #0f172a !important;
  background-color: #f8fafc !important;
}

/* ── Cookie Modal (settings detail view) ───────────────── */

.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  max-width: 640px !important;
}

/* Force all text in modal to dark colors */
.klaro .cookie-modal p,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .cookie-modal span,
.klaro .cookie-modal div,
.klaro .cookie-modal strong,
.klaro .cookie-modal label {
  color: #475569 !important;
}

/* Modal header */
.klaro .cookie-modal .cm-modal .cm-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 20px 24px !important;
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h1.title {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Modal body */
.klaro .cookie-modal .cm-modal .cm-body {
  padding: 20px 24px !important;
}

/* Modal footer */
.klaro .cookie-modal .cm-modal .cm-footer {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 16px 24px !important;
  border-radius: 0 0 12px 12px !important;
}

/* Modal buttons */
.klaro .cookie-modal .cm-btn {
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

/* "Alle akzeptieren" — primary blue */
.klaro .cookie-modal .cm-btn.cm-btn-accept-all {
  background-color: #2563eb !important;
  color: #ffffff !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover {
  background-color: #1d4ed8 !important;
}

/* "Auswahl speichern" — outlined style (has both cm-btn-success + cm-btn-info) */
.klaro .cookie-modal .cm-btn.cm-btn-accept {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-accept:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* "Nur notwendige" — same outlined style */
.klaro .cookie-modal .cm-btn.cm-btn-danger {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Toggle switch — blue when active */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background-color: #2563eb !important;
}

/* Service list items */
.klaro .cookie-modal .cm-switch-container {
  border-bottom-color: #e2e8f0 !important;
}

.klaro .cookie-modal .cm-switch-container p {
  color: #64748b !important;
  font-size: 13px !important;
}

/* Purpose / service titles */
.klaro .cookie-modal .cm-purpose .cm-title,
.klaro .cookie-modal .cm-services .cm-title,
.klaro .cookie-modal .cm-switch-container .cm-title,
.klaro .cookie-modal .cm-purpose span.cm-title {
  font-weight: 600 !important;
  color: #0f172a !important;
}

/* Close button (Klaro renders it as button.hide with an inline X svg).
   Klaro's default stroke is near-white (--light1) → invisible on our white
   modal. Force a dark stroke so the X is visible, and tame the auto-focus
   ring (the close button is focused on open) into a subtle rounded outline. */
.klaro .cookie-modal .cm-modal .hide,
.klaro .cookie-modal .cm-modal .cm-close {
  color: #64748b !important;
  border-radius: 6px !important;
}
.klaro .cookie-modal .cm-modal .hide svg,
.klaro .cookie-modal .cm-modal .cm-close svg {
  color: #64748b !important;
  stroke: #64748b !important;
  width: 22px !important;
  height: 22px !important;
}
.klaro .cookie-modal .cm-modal .hide:hover svg,
.klaro .cookie-modal .cm-modal .cm-close:hover svg {
  stroke: #0f172a !important;
}
.klaro .cookie-modal .cm-modal .hide:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* Hide Klaro's tri-state "Alle Dienste aktivieren/deaktivieren" master toggle.
   Its half-checked state renders as a confusing 60%-opacity blue slider. We
   replace it with a proper "Alle akzeptieren" button in the footer (injected
   in Layout.astro). */
.klaro .cookie-modal .cm-toggle-all {
  display: none !important;
}

/* Backdrop */
.klaro .cookie-modal .cm-bg {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

/* Links everywhere */
.klaro .cookie-modal a,
.klaro .cookie-notice a {
  color: #2563eb !important;
}
.klaro .cookie-modal a:hover,
.klaro .cookie-notice a:hover {
  color: #1d4ed8 !important;
}

/* ── Cookie modal notice (full-screen modal variant) ───── */

.klaro .cookie-modal-notice {
  background-color: #ffffff !important;
  color: #334155 !important;
}

.klaro .cookie-modal-notice p,
.klaro .cookie-modal-notice h1,
.klaro .cookie-modal-notice h2,
.klaro .cookie-modal-notice span,
.klaro .cookie-modal-notice div {
  color: #475569 !important;
}