/**
 * Custom Klaro Consent Modal Theme
 * Matches Orion180 site design
 */

.klaro {
  /* Override primary colors to match site theme */
  --klaro-primary-color: #d40032;
  --klaro-primary-hover: #a00026;

  /* Link styling */
  --klaro-link-color: #d40032;
  --klaro-link-color-hover: #a00026;
  --klaro-link-decoration: none;
  --klaro-link-decoration-hover: underline;
  --klaro-link-decoration-line: none;
  --klaro-link-decoration-line-hover: underline;

  /* Button styling to match site buttons */
  --klaro-button-bg: #d40032;
  --klaro-button-text-color: #fff;
  --klaro-button-border: 2px solid #d40032;
  --klaro-button-border-radius: 4px;
  --klaro-button-padding: 12px 24px;
  --klaro-button-font-size: 16px;
  --klaro-button-font-weight: 600;
  --klaro-button-line-height: 1.5;
  --klaro-button-box-shadow: none;

  /* Button hover states */
  --klaro-button-bg-hover: #a00026;
  --klaro-button-text-color-hover: #fff;
  --klaro-button-border-hover: 2px solid #a00026;

  /* Button focus states */
  --klaro-button-focus-outline: 2px solid #d40032;
  --klaro-button-focus-outline-offset: 2px;
  --klaro-button-focus-box-shadow: 0 0 0 3px rgba(212, 0, 50, 0.2);

  /* Dialog/Modal styling */
  --klaro-dialog-focus-outline: 2px solid #d40032;
  --klaro-dialog-focus-box-shadow: 0 0 0 3px rgba(212, 0, 50, 0.2);

  /* Typography */
  --font-size: 15px;
  --font-family: inherit;
  --title-font-family: inherit;

  /* Toggle slider colors */
  --klaro-slider-bg: #b5b5b0;
  --klaro-slider-bg-active: #d40032;
  --klaro-slider-bg-required: #d40032;

  /* Color overrides */
  --green1: #d40032;
  --green2: #d40032;
  --green3: #d40032;
  --white2: #f3f3f3;
  --light1: #666;
  --light3: #666;
}

/* Modal container styling */
.klaro .cookie-modal,
.klaro .cookie-notice,
.klaro .context-notice {
  font-family: inherit;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Modal header/title styling */
.klaro .cookie-modal .cm-modal .cm-header h1.title,
.klaro .cookie-notice .cn-body .cn-title,
.klaro .context-notice .cn-body .cn-title {
  color: #222;
  font-weight: 700;
}

/* Body text styling */
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-notice .cn-body,
.klaro .context-notice .cn-body {
  color: #222;
}

/* Close button styling */
.klaro .cookie-modal .cm-modal .hide,
.klaro .cookie-modal button.klaro-close {
  color: #666;
  transition: color 0.2s ease;
}

.klaro .cookie-modal .cm-modal .hide:hover,
.klaro .cookie-modal button.klaro-close:hover {
  color: #d40032;
}

/* Accept/Save button (primary action) */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #d40032;
  color: #fff;
  border: 2px solid #d40032;
  font-weight: 600;
  transition: all 0.2s ease;
}

.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  background-color: #a00026;
  border-color: #a00026;
  color: #fff;
}

/* Decline button (secondary action) */
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-decline {
  background-color: transparent;
  color: #d40032;
  border: 2px solid #d40032;
  font-weight: 600;
  transition: all 0.2s ease;
}

.klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-decline:hover {
  background-color: #d40032;
  border-color: #d40032;
  color: #fff;
}

/* Info/Learn More button */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: transparent;
  color: #666;
  border: 2px solid #dcd8d5;
  font-weight: 600;
  transition: all 0.2s ease;
}

.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover {
  background-color: #f3f3f3;
  border-color: #b5b5b0;
  color: #222;
}

/* Toggle switches */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  background-color: #b5b5b0;
  transition: background-color 0.2s ease;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #d40032;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: #d40032;
  opacity: 0.7;
}

/* Service list styling */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li {
  border-bottom: 1px solid #dcd8d5;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li:hover,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li:hover {
  background-color: #f3f3f3;
}

/* Links in modal */
.klaro .cookie-modal a,
.klaro .cookie-notice a,
.klaro .context-notice a {
  color: #d40032;
  text-decoration: none;
}

.klaro .cookie-modal a:hover,
.klaro .cookie-notice a:hover,
.klaro .context-notice a:hover {
  color: #a00026;
  text-decoration: underline;
}

/* Focus states for accessibility */
.klaro .cookie-modal a:focus,
.klaro .cookie-notice a:focus,
.klaro .context-notice a:focus {
  outline: 2px solid #d40032;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(212, 0, 50, 0.2);
}

/* Cookie notice bar (bottom banner) styling */
.klaro .cookie-notice {
  background-color: #fff;
  border-top: 3px solid #d40032;
}

/* Modal overlay */
.klaro .cookie-modal-mask {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Responsive button layout */
@media (max-width: 768px) {
  .klaro .cookie-notice .cn-buttons,
  .klaro .cookie-modal .cm-footer {
    flex-direction: column;
    gap: 10px;
  }

  .klaro .cookie-notice .cm-btn,
  .klaro .cookie-modal .cm-btn {
    width: 100%;
    text-align: center;
  }
}