/**
 * @file
 * Klaro cookie UI — Platform tokens on Klaro markup.
 */

.klaro.klaro-theme-platform {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.klaro.klaro-theme-platform .cookie-notice,
.klaro.klaro-theme-platform .cm-modal.cm-klaro,
.klaro.klaro-theme-platform .context-notice {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.klaro.klaro-theme-platform .cookie-notice {
  z-index: calc(var(--z-modal) + 20);
  inset: auto var(--space-4) var(--space-4) auto;
  width: min(32rem, calc(100vw - var(--space-8)));
}

body:has(.page-bottom-nav) .klaro.klaro-theme-platform .cookie-notice {
  bottom: calc(var(--bottom-nav-height));
}

.klaro.klaro-theme-platform .cookie-modal {
  z-index: calc(var(--z-modal) + 30);
}

.klaro.klaro-theme-platform a {
  color: var(--color-primary);
}

.klaro.klaro-theme-platform a:hover {
  color: var(--color-primary-hover);
}

.klaro.klaro-theme-platform .cm-btn,
.klaro.klaro-theme-platform a.cm-link.cn-learn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.klaro.klaro-theme-platform .cm-btn:hover {
  color: var(--color-on-primary);
  background: var(--color-primary-hover);
}

.klaro.klaro-theme-platform .cm-btn:focus,
.klaro.klaro-theme-platform a.cm-link.cn-learn-more:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.klaro.klaro-theme-platform .cm-btn.cm-btn-danger,
.klaro.klaro-theme-platform .cn-decline,
.klaro.klaro-theme-platform a.cm-link.cn-learn-more {
  color: var(--color-heading);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: none;
}

.klaro.klaro-theme-platform .cm-btn.cm-btn-danger:hover,
.klaro.klaro-theme-platform .cn-decline:hover,
.klaro.klaro-theme-platform a.cm-link.cn-learn-more:hover {
  color: var(--color-heading);
  background: var(--color-surface-alt);
  border-color: var(--color-text-faint);
  text-decoration: none;
}

.klaro.klaro-theme-platform .cm-list-label .slider {
  background: var(--slate-300);
}

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

.klaro .cookie-modal p, .klaro .cookie-modal strong, .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal ul, .klaro .cookie-modal li, .klaro .context-notice p, .klaro .context-notice strong, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice ul, .klaro .context-notice li, .klaro .cookie-notice p, .klaro .cookie-notice strong, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice ul, .klaro .cookie-notice li
{
  color: #000;
}

.klaro .cookie-modal .slider, .klaro .context-notice .slider, .klaro .cookie-notice .slider {
  box-shadow: none!important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
  flex-grow: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  justify-content: space-between;
}