/* Klaro consent UI - Grünhage AI brand theme (Klaro 0.7.x, no-css build) */
.klaro {
  --kl-bg: var(--ks-ink-mid, #1F1A66);
  --kl-bg-2: var(--ks-ink-1, #16124C);
  --kl-fg: var(--ks-white, #FFFFFF);
  --kl-fg-dim: rgba(255, 255, 255, 0.7);
  --kl-border: rgba(255, 255, 255, 0.12);
  --kl-accent: var(--ks-blue, #5C7DFF);
  --kl-accent-2: var(--ks-violet, #8E72FF);
  font-family: var(--font-sans, system-ui, sans-serif);
}

.klaro .cookie-notice,
.klaro .cookie-modal {
  font-size: 15px;
  line-height: 1.55;
}

/* ── Bottom notice banner ─────────────────────────────── */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed;
  z-index: 1000;
  left: 20px;
  right: 20px;
  bottom: 20px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  background: var(--kl-bg);
  color: var(--kl-fg);
  border: 1px solid var(--kl-border);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.klaro .cookie-notice .cn-body {
  margin: 0;
  padding: 0;
}

.klaro .cookie-notice .cn-body p,
.klaro .cookie-modal .cm-body p {
  margin: 0 0 14px;
  color: var(--kl-fg-dim);
}

.klaro .cookie-notice .cn-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* ── Buttons ──────────────────────────────────────────── */
.klaro .cm-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--kl-fg);
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.klaro .cm-btn:hover { background: rgba(255, 255, 255, 0.16); }

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var {
  background: var(--kl-accent);
  color: #fff;
  border-color: var(--kl-accent);
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-success-var:hover {
  background: var(--kl-accent-2);
  border-color: var(--kl-accent-2);
}

.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline {
  background: transparent;
  border-color: var(--kl-border);
  color: var(--kl-fg-dim);
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cn-decline:hover {
  color: var(--kl-fg);
  border-color: rgba(255, 255, 255, 0.4);
}

.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice a {
  color: var(--kl-accent);
  text-decoration: none;
  font-weight: 600;
}
.klaro .cookie-notice a:hover { text-decoration: underline; }

/* ── Settings modal ───────────────────────────────────── */
.klaro .cookie-modal .cm-bg {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 8, 30, 0.7);
}
.klaro .cookie-modal .cm-modal {
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 520px);
  max-height: 86vh;
  overflow: auto;
  background: var(--kl-bg);
  color: var(--kl-fg);
  border: 1px solid var(--kl-border);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-footer { padding: 22px 26px; }
.klaro .cookie-modal .cm-header { border-bottom: 1px solid var(--kl-border); }
.klaro .cookie-modal .cm-footer { border-top: 1px solid var(--kl-border); }
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header .title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 20px;
  font-weight: 600;
}
.klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* Service list + toggle switch */
.klaro .cookie-modal .cm-services .cm-service {
  border-top: 1px solid var(--kl-border);
  padding: 16px 0;
}
.klaro .cookie-modal .cm-services .cm-service:first-child { border-top: 0; }
.klaro .cm-list-title { font-weight: 600; }
.klaro .cm-list-description { color: var(--kl-fg-dim); font-size: 14px; }

.klaro .cm-list-input { position: absolute; opacity: 0; }
.klaro .cm-list-label .slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transition: background-color 180ms ease;
}
.klaro .cm-list-label .slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 180ms ease;
}
.klaro .cm-list-input:checked + .cm-list-label .slider { background: var(--kl-accent); }
.klaro .cm-list-input:checked + .cm-list-label .slider::before { transform: translateX(20px); }
.klaro .cm-list-input.required + .cm-list-label .slider { background: var(--kl-accent-2); opacity: 0.6; }

.klaro .cm-powered-by,
.klaro .cookie-notice .cn-powered-by {
  margin-top: 12px;
  font-size: 11px;
}
.klaro .cm-powered-by a,
.klaro .cookie-notice .cn-powered-by a { color: var(--kl-fg-dim); }

@media (max-width: 600px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}