/* =========================================================
   ICDhelp.ai Klaro v0.6.18 overrides (single source of truth)
   Goals:
   - Notice (initial banner): white card, blue Accept button, Decline as blue text
   - Modal (privacy settings): readable text, blue headings, blue toggles
   - Remove "1 service" expander UI
   - FIX: prevent full-screen white rounded background (cm-bg fixed layer)
   - Keep page visible behind modal with dim overlay
   ========================================================= */

:root {
  --cmp-blue: #2f80ed;        /* primary blue */
  --cmp-blue-strong: #1d4ed8; /* stronger ON state */
  --cmp-text: #111827;
  --cmp-muted: #374151;
}

/* ---------------------------
   NOTICE (initial banner)
   --------------------------- */

/* Banner card */
.klaro .cookie-notice .cm-bg {
  background: #ffffff !important;
  color: var(--cmp-text) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  border-radius: 10px !important;
}

/* Notice text */
.klaro .cookie-notice,
.klaro .cookie-notice p,
.klaro .cookie-notice span {
  color: var(--cmp-muted) !important;
}

/* Notice links (e.g. "Customize") */
.klaro .cookie-notice a,
.klaro .cookie-notice .cm-link {
  color: var(--cmp-blue) !important;
}

/* Accept button (keep as real button) */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-accept {
  background: var(--cmp-blue) !important;
  border-color: var(--cmp-blue) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-accept:hover {
  background: #2567bf !important;
  border-color: #2567bf !important;
}

/* Decline on notice: look like simple blue text (not underlined) */
.klaro .cookie-notice .cm-btn.cm-btn-danger {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-right: 14px !important;
  color: var(--cmp-blue) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* ---------------------------
   MODAL (Privacy settings)
   --------------------------- */

/* FIX v0.6.18:
   The big white rounded "frame" is a fixed full-screen .cm-bg.
   Make ONLY the modal's .cm-bg transparent so the page stays visible behind. */
.klaro .cookie-modal .cm-bg {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Ensure modal wrapper layers are transparent */
.klaro .cookie-modal,
.klaro .cookie-modal .cm-wrapper,
.klaro .cookie-modal .cm-app {
  background: transparent !important;
}

/* Keep the actual panel/card white */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-content {
  background: #ffffff !important;
  color: var(--cmp-text) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}

/* Make header/title readable */
.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-header * {
  color: var(--cmp-text) !important;
  opacity: 1 !important;
}

/* Headings (Essential/Analytics/Advertising + "Enable or disable...") */
.klaro .cookie-modal .cm-list-title,
.klaro .cookie-modal .cm-list-label .cm-list-title,
.klaro .cookie-modal .cm-purpose-title,
.klaro .cookie-modal strong {
  color: var(--cmp-blue) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* Descriptions readable */
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-purpose-description,
.klaro .cookie-modal p {
  color: var(--cmp-muted) !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

/* Make links in Privacy settings clearly visible */
.klaro .cookie-modal a,
.klaro .cookie-modal p a,
.klaro .cookie-modal span a {
  color: var(--cmp-blue) !important;
  text-decoration: underline;
  font-weight: 600;
}

/* Modal buttons */
.klaro .cookie-modal .cm-btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* Primary button in modal (Accept selected / Accept) */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-accept {
  background: var(--cmp-blue) !important;
  border-color: var(--cmp-blue) !important;
  color: #ffffff !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept:hover {
  background: #2567bf !important;
  border-color: #2567bf !important;
}

/* Secondary buttons */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-danger {
  background: transparent !important;
  border-color: var(--cmp-blue) !important;
  color: var(--cmp-blue) !important;
}

/* ---------------------------
   Remove "1 service" expander UI
   --------------------------- */

.klaro .cm-caret,
.klaro .cm-services,
.klaro .cm-service,
.klaro .cm-services-toggle,
.klaro a.cm-services-toggle,
.klaro button.cm-services-toggle,
.klaro .cookie-modal .cm-services,
.klaro .cookie-modal .cm-service {
  display: none !important;
}

/* ---------------------------
   Backdrop behind modal (dim the page)
   If Klaro uses a different overlay element, this still helps.
   --------------------------- */

.klaro .cm-overlay,
.klaro .cm-backdrop,
.klaro .klaro-overlay,
.klaro .modal-backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(2px);
}


/*  Force the initial NOTICE background to white (some Klaro rules are stronger) */
.klaro .cookie-notice .cm-bg,
.klaro .cookie-notice .cm-notice,
.klaro .cookie-notice {
  background: #ffffff !important;
  color: #111827 !important;
}

/* =========================================================
   FINAL Klaro toggle colors (v0.6.18)
   - Blue palette only
   - No green anywhere
   ========================================================= */

/* OFF state (all toggles) */
.klaro .cm-list-label .slider {
  background-color: #dbeafe !important; /* light blue */
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
}

/* ON state (checked) */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #2563eb !important; /* primary blue */
  border-color: #2563eb !important;
}

/* INDETERMINATE state (Enable / disable all services – middle position) */
.klaro .cm-list-label .slider[style*="background-color"],
.klaro .cm-list-input:indeterminate + .cm-list-label .slider {
  background-color: #93c5fd !important; /* soft blue */
  border-color: #93c5fd !important;
}

/* Slider knob */
.klaro .cm-list-label .slider::before {
  background: #ffffff !important;
}

.klaro .cookie-modal a {
  color: #2f80ed !important;
  -webkit-text-fill-color: #2f80ed !important;
}