/* =====================================================
   KLARO CUSTOM THEME (Bootstrap Primary/Secondary)
   ===================================================== */

/* ===== Modal & Notice Background ===== */

.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-notice,
.klaro .cookie-modal-notice {
  background-color: var(--bs-primary);
  color: #ffffff;
}

/* Context Notice (helle Variante optional angepasst) */
.klaro .context-notice {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
}

.klaro .context-notice p {
  color: var(--bs-primary-text-emphasis);
}

/* ===== Buttons ===== */

.klaro .cm-btn,
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var,
.klaro .cm-btn.cm-btn-info {
  background-color: var(--bs-primary);
  color: #ffffff;
  border: none;
}

.klaro .cm-btn:hover,
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-success-var:hover,
.klaro .cm-btn.cm-btn-info:hover {
  background-color: var(--bs-primary-text-emphasis);
  color: #ffffff;
  text-decoration: none;
}

/* Ablehnen / Danger → Secondary */
.klaro .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-danger {
  background-color: var(--bs-secondary);
  color: var(--bs-secondary-text-emphasis);
}

.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover {
  background-color: var(--bs-secondary-text-emphasis);
  color: #ffffff;
}

/* ===== Toggle Switch ===== */

.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--bs-primary);
}

.klaro .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: var(--bs-primary);
  opacity: 0.7;
}

/* Toggle Knob */
.klaro .cm-list-label .slider::before {
  background-color: #ffffff;
}

/* ===== Links ===== */

.klaro a,
.klaro .cookie-modal a,
.klaro .context-notice a,
.klaro .cookie-notice a {
  color: var(--bs-secondary);
  text-decoration: none;
}

.klaro a:hover,
.klaro .cookie-modal a:hover,
.klaro .context-notice a:hover,
.klaro .cookie-notice a:hover {
  color: var(--bs-secondary-text-emphasis);
  text-decoration: underline;
}

/* ===== Header & Footer Borders ===== */

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===== Powered by Link ===== */

.klaro .cm-powered-by a {
  color: var(--bs-secondary);
}

/* ===== Smooth Transitions ===== */

.klaro .cm-btn,
.klaro .slider {
  transition: all 0.25s ease;
}
/* ===== FORCE PRIMARY BUTTON COLOR ===== */

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
  border: none !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  background-color: var(--bs-primary-text-emphasis) !important;
  color: #ffffff !important;
}
.cm-btn-success-var {
  background-color: var(--bs-secondary);
  color: var(--bs-secondary-text-emphasis);
  border: 1px solid var(--bs-secondary);
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-size: var(--bs-btn-font-size);
  border-radius: var(--bs-btn-border-radius);
  transition: color .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
}

.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-secondary-text-emphasis) !important;
  border: 1px solid var(--bs-secondary) !important;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.klaro .cookie-modal .cm-btn.cm-btn-success-var:hover,
.klaro .context-notice .cm-btn.cm-btn-success-var:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success-var:hover {
  background-color: var(--bs-secondary-hover) !important;
  border-color: var(--bs-secondary-hover) !important;
  color: var(--bs-secondary-text-emphasis) !important;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.cn-body {
  position: fixed;   
  bottom: 20px;      
  right: 80px;       
  left: auto;        
  margin: 0;         
  max-width: 400px;  
  background-color: var(--bs-primary);
}