/**
 * @file
 * Component styles for the Klaro Cookie Consent Manager.
 *
 * Overrides Klaro's default component branding by tapping directly into its
 * custom runtime CSS properties. Custom selectors target class blocks directly
 * to maintain a low specificity profile, avoiding rigid ID architectures.
 *
 * Theme Visual Mappings:
 * - Font Families: Leverages primary body font stack variables.
 * - Primary Actions (Accept): Mapped to global CTA primary button colors.
 * - Secondary Actions (Decline): Mapped to custom form and dark theme accent properties.
 * - Layout Structural Assets: Uses system semantic borders, spacing, and shadows.
 *
 * @section components
 */

.klaro {
  --font-family: var(--font-family-primary);
  --btn-border-radius: var(--button-border-radius);
  --klaro-button-padding: var(--spacing-xs) var(--spacing-md);
  --klaro-button-border-radius: var(--button-border-radius);
}

.klaro .cookie-notice,
.klaro .cookie-modal {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}
.klaro .cm-btn,
.klaro .cm-btn:hover,
.klaro .cm-btn:focus {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-accept {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
  border: 1px solid transparent !important;
}

.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-decline {
  background-color: var(--color-primary-light) !important;
  color: var(--color-gray-800) !important;
  border: 1px solid transparent !important;
}

.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-default {
  color: var(--color-primary-dark) !important;
  background: transparent !important;
}

.klaro .cookie-modal .cm-list-input:checked+.cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.required:checked+.cm-list-label .slider {
  background-color: var(--color-primary-dark) !important;
}

.klaro .cookie-modal .cm-list-input.only-required+.cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required+.cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required+.cm-list-label .slider {
  background-color: var(--color-primary-dark) !important;
  opacity: 1 !important;
}