/* PrompterMate brand theme for Klaro!
 * Loaded after klaro.css. Two layers:
 *   1) Override Klaro's own CSS custom properties on .klaro.
 *   2) Targeted !important rules where vendor uses equal specificity.
 * Brand: black bg, orange accent (hsl(16 95% 55%) ≈ #f26a1f), white text.
 */

.klaro {
  --font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --title-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size: 14px;
  --border-radius: 8px;
  --border-width: 1px;
  --border-style: solid;

  --light1: #0d0d0d;
  --light2: hsl(16 95% 50% / 0.4);
  --light3: #1f1f1f;
  --dark1: #0d0d0d;
  --dark2: #1f1f1f;
  --dark3: hsl(16 15% 75%);
  --white1: #ffffff;
  --white2: #3a3a3a;
  --white3: #ffffff;

  /* Recolor Klaro's "success" (Accept all) from green → orange */
  --green1: hsl(16 95% 55%);
  --green2: hsl(16 95% 48%);
  --green3: hsl(16 95% 65%);

  /* Recolor "info" (Learn more / Settings) from blue → orange */
  --blue1: hsl(16 95% 55%);

  --button-text-color: #ffffff;
}

/* ---------- Container & typography ---------- */
.klaro,
.klaro .cookie-modal,
.klaro .cookie-notice,
.klaro .context-notice {
  font-family: var(--font-family);
  color: #ffffff;
}

/* ---------- Modal backdrop ---------- */
.klaro .cookie-modal .cm-bg {
  background: rgba(0, 0, 0, 0.78) !important;
}

/* ---------- Panels ---------- */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-notice {
  background: #0d0d0d !important;
  color: #ffffff !important;
  border: 1px solid hsl(16 95% 50% / 0.4) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.6);
}
.klaro .cookie-modal .cm-header {
  border-bottom-color: hsl(0 0% 100% / 0.08) !important;
}
.klaro .cookie-modal .cm-footer {
  border-top-color: hsl(0 0% 100% / 0.08) !important;
  background: transparent !important;
}

/* ---------- Text ---------- */
.klaro .cookie-modal p,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal h3,
.klaro .cookie-modal strong,
.klaro .cookie-modal li,
.klaro .cookie-notice p,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice strong,
.klaro .cookie-notice li,
.klaro .context-notice p {
  color: #ffffff !important;
}
.klaro .cm-list-description,
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-description,
.klaro small,
.klaro .cm-powered-by {
  color: hsl(16 15% 75%) !important;
}

/* ---------- Links ---------- */
.klaro a,
.klaro .cookie-modal a,
.klaro .cookie-notice a,
.klaro .cm-link {
  color: hsl(16 95% 60%) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.klaro a:hover,
.klaro .cm-link:hover {
  color: hsl(16 95% 70%) !important;
}

/* ---------- Buttons (base) ---------- */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .context-notice .cm-btn {
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.6rem 1rem !important;
  background: #2a2a2a !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease;
}
.klaro .cookie-modal .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover,
.klaro .context-notice .cm-btn:hover {
  background: #3a3a3a !important;
}
.klaro .cm-btn:focus-visible {
  outline: 2px solid hsl(16 95% 55%);
  outline-offset: 2px;
}

/* Primary — "Accept all" / Save → solid orange with black text */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-modal .cm-btn.cm-btn-accept,
.klaro .cookie-notice .cm-btn.cm-btn-accept,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
  background: hsl(16 95% 55%) !important;
  color: #0d0d0d !important;
  border-color: hsl(16 95% 55%) !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover {
  background: hsl(16 95% 48%) !important;
  border-color: hsl(16 95% 48%) !important;
  color: #0d0d0d !important;
}

/* Decline / danger / "Only necessary" → outlined orange */
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-danger {
  background: transparent !important;
  color: hsl(16 95% 60%) !important;
  border: 1px solid hsl(16 95% 55%) !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover {
  background: hsl(16 95% 55% / 0.15) !important;
  color: #ffffff !important;
}

/* Info / "Privatsphäre-Einstellungen" / Learn more → outlined ghost */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-learn-more,
.klaro .cookie-notice .cm-btn.cm-btn-learn-more {
  background: transparent !important;
  color: hsl(16 95% 60%) !important;
  border: 1px solid hsl(16 95% 55% / 0.6) !important;
  text-decoration: none !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover,
.klaro .cookie-modal .cm-btn.cm-btn-learn-more:hover,
.klaro .cookie-notice .cm-btn.cm-btn-learn-more:hover {
  background: hsl(16 95% 55% / 0.15) !important;
  color: #ffffff !important;
  border-color: hsl(16 95% 55%) !important;
}

/* Close */
.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close {
  background: #2a2a2a !important;
  color: #ffffff !important;
}

/* ---------- Toggle switches ---------- */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  background-color: #3a3a3a !important;
  box-shadow: none !important;
}
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  background-color: #ffffff !important;
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: hsl(16 95% 55%) !important;
}
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider {
  background-color: hsl(16 95% 55% / 0.5) !important;
  opacity: 1 !important;
}
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 0 0 2px hsl(16 95% 55%) !important;
}

/* ---------- Service rows ---------- */
.klaro .cookie-modal .cm-switch-container,
.klaro .cookie-notice .cm-switch-container {
  border-bottom-color: hsl(0 0% 100% / 0.08) !important;
}

/* ---------- Powered by ---------- */
.klaro .cm-powered-by a {
  color: hsl(16 15% 75%) !important;
  text-decoration: none !important;
}
.klaro .cm-powered-by a:hover {
  color: hsl(16 95% 60%) !important;
}