/* Klaro consent manager, styled with the site's tokens (klaro-no-css build). */
.klaro { font-family: var(--font-body); color: var(--color-text); font-size: 0.9375rem; line-height: 1.5; }
.klaro * { box-sizing: border-box; }
.klaro a { color: inherit; text-decoration: underline; }
.klaro button { font-family: inherit; cursor: pointer; }

/* ---------- Bottom banner ---------- */
.klaro .cookie-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--color-bg); color: var(--color-text);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 34px rgba(0, 0, 0, 0.08);
  padding: var(--space-24) var(--space-32);
}
.klaro .cookie-notice .cn-body { max-width: var(--container-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24); }
.klaro .cookie-notice .cn-body > p { margin: 0; flex: 1 1 420px; }
.klaro .cookie-notice .cn-body h2, .klaro .cookie-notice .cn-body h3 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; margin: 0 0 var(--space-8); }
.klaro .cookie-notice .cn-learn-more, .klaro .cookie-notice .cm-link { color: var(--color-text-secondary); text-decoration: underline; margin-left: var(--space-12); }
.klaro .cookie-notice .cn-ok { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin: 0; }
.klaro .cookie-notice .cn-buttons { display: flex; gap: var(--space-12); }

/* Accept and Decline: identical size, weight and colour. Equal weight by design. */
.klaro .cm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 9rem; padding: 0.75rem 1.25rem;
  font-size: 0.9375rem; font-weight: var(--weight-semibold);
  color: var(--color-text); background: var(--color-bg);
  border: 1.5px solid var(--color-text); border-radius: var(--radius-md);
}
.klaro .cm-btn:hover, .klaro .cm-btn:focus-visible { background: var(--color-text); color: var(--color-bg); outline: none; }
.klaro .cm-btn:focus-visible { box-shadow: 0 0 0 3px var(--color-accent); }
.klaro .cm-btn.cm-btn-success, .klaro .cm-btn.cm-btn-accept-all, .klaro .cm-btn.cm-btn-danger, .klaro .cm-btn.cm-btn-decline { color: var(--color-text); background: var(--color-bg); border-color: var(--color-text); }
.klaro .cm-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Settings modal ---------- */
.klaro .cookie-modal { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: var(--space-24); }
.klaro .cookie-modal .cm-bg { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.5); }
.klaro .cookie-modal .cm-modal {
  position: relative; width: 100%; max-width: 640px; max-height: 90vh; overflow: auto;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}
.klaro .cookie-modal .cm-header { padding: var(--space-24) var(--space-32) var(--space-12); border-bottom: 1px solid var(--color-border); }
.klaro .cookie-modal .cm-header h1 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 500; margin: 0 0 var(--space-8); }
.klaro .cookie-modal .cm-header p { margin: 0; color: var(--color-text-secondary); }
.klaro .cookie-modal .hide { position: absolute; top: var(--space-12); right: var(--space-12); width: 2.25rem; height: 2.25rem; border: none; background: transparent; color: var(--color-text); border-radius: 50%; }
.klaro .cookie-modal .hide:hover { background: var(--color-surface); }
.klaro .cookie-modal .hide svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; }
.klaro .cookie-modal .cm-body { padding: var(--space-24) var(--space-32); }
.klaro .cookie-modal .cm-body ul { list-style: none; margin: 0; padding: 0; }
.klaro .cookie-modal .cm-body li { position: relative; padding: var(--space-12) 0 var(--space-12) 4rem; border-bottom: 1px solid var(--color-border); }
.klaro .cookie-modal .cm-body li:last-child { border-bottom: none; }
.klaro .cookie-modal .cm-list-title { font-weight: var(--weight-semibold); }
.klaro .cookie-modal .cm-list-description { margin: 0.25rem 0 0; color: var(--color-text-secondary); font-size: 0.875rem; }
.klaro .cookie-modal .cm-required, .klaro .cookie-modal .cm-opt-out { color: var(--color-text-secondary); font-size: 0.8125rem; margin-left: 0.375rem; }
.klaro .cookie-modal .cm-footer { padding: var(--space-12) var(--space-32) var(--space-24); border-top: 1px solid var(--color-border); }
.klaro .cookie-modal .cm-footer-buttons { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.klaro .cookie-modal .cm-powered-by { margin-top: var(--space-12); font-size: 0.75rem; color: var(--color-text-secondary); }

/* ---------- Switches (plain checkbox, visible as a toggle) ---------- */
.klaro .cm-list-input { position: absolute; left: 0; top: var(--space-12); width: 3rem; height: 1.625rem; margin: 0; opacity: 0; z-index: 2; cursor: pointer; }
.klaro .cm-list-input:disabled { cursor: default; }
.klaro .cm-list-label { cursor: pointer; }
.klaro .cm-list-label .cm-switch { position: absolute; left: 0; top: var(--space-12); width: 3rem; height: 1.625rem; display: block; }
.klaro .cm-list-label .slider { position: absolute; inset: 0; background: var(--color-border); border-radius: 999px; }
.klaro .cm-list-label .slider::before { content: ''; position: absolute; width: 1.25rem; height: 1.25rem; left: 0.1875rem; top: 0.1875rem; background: var(--color-bg); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.klaro .cm-list-input:checked + .cm-list-label .slider { background: var(--color-text); }
.klaro .cm-list-input:checked + .cm-list-label .slider::before { transform: translateX(1.375rem); background: var(--color-accent); }
.klaro .cm-list-input:focus-visible + .cm-list-label .slider { box-shadow: 0 0 0 3px var(--color-accent); }
.klaro .cm-list-input:disabled + .cm-list-label .slider { opacity: 0.5; }

/* ---------- Motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .klaro .cookie-notice { animation: klaro-slide-up 320ms cubic-bezier(0.16, 0.84, 0.3, 1); }
  .klaro .cm-list-label .slider, .klaro .cm-list-label .slider::before, .klaro .cm-btn { transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
  @keyframes klaro-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

@media (max-width: 640px) {
  .klaro .cookie-notice { padding: var(--space-24); }
  .klaro .cookie-notice .cn-buttons { width: 100%; }
  .klaro .cm-btn { flex: 1 1 0; min-width: 0; }
  .klaro .cookie-modal .cm-body li { padding-left: 3.75rem; }
}