:root {
  --yo-klaro-text: #1f2523;
  --yo-klaro-muted: #59625d;
  --yo-klaro-border: #d8ddd7;
  --yo-klaro-surface: #fbfbf8;
  --yo-klaro-primary: #27614f;
  --yo-klaro-primary-hover: #1e4d3f;
  --yo-klaro-secondary: #f2f3ef;
}

#klaro .klaro .cookie-notice,
#klaro .klaro .cookie-modal .cm-modal {
  border-radius: 8px;
  color: var(--yo-klaro-text);
  font-family: inherit;
}

#klaro .klaro .cookie-notice {
  background: var(--yo-klaro-surface);
  border: 1px solid var(--yo-klaro-border);
  box-shadow: 0 18px 50px rgba(23, 35, 31, 0.18);
  inset-block-end: 18px;
  inset-inline-start: 18px;
  max-inline-size: min(680px, calc(100vw - 36px));
  padding: 18px;
}

#klaro .klaro .cookie-notice .cn-body p,
#klaro .klaro .cookie-modal p,
#klaro .klaro .cookie-modal li {
  color: var(--yo-klaro-muted);
  line-height: 1.6;
}

#klaro .klaro .cookie-notice .cn-buttons,
#klaro .klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#klaro .klaro .cookie-notice button,
#klaro .klaro .cookie-modal button {
  border-radius: 6px;
  font-weight: 600;
  min-height: 42px;
}

#klaro .klaro button.cm-btn-success,
#klaro .klaro button.cm-btn-info {
  background: var(--yo-klaro-primary);
}

#klaro .klaro button.cm-btn-success:hover,
#klaro .klaro button.cm-btn-info:hover {
  background: var(--yo-klaro-primary-hover);
}

#klaro .klaro button.cm-btn-danger,
#klaro .klaro button.cm-btn-decline {
  background: var(--yo-klaro-secondary);
  color: var(--yo-klaro-text);
}

#klaro .klaro .cookie-modal .cm-modal {
  background: var(--yo-klaro-surface);
  max-inline-size: min(760px, calc(100vw - 28px));
}

#klaro .klaro .cookie-modal .cm-app {
  border-color: var(--yo-klaro-border);
}

#klaro .klaro .cookie-modal .cm-services {
  display: none;
}

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

@media (max-width: 576px) {
  #klaro .klaro .cookie-notice {
    inset-block-end: 10px;
    inset-inline: 10px;
    max-inline-size: calc(100vw - 20px);
  }

  #klaro .klaro .cookie-notice .cn-buttons button,
  #klaro .klaro .cookie-modal .cm-footer-buttons button {
    flex: 1 1 100%;
  }
}