/* Klaro Custom Theme for SkillBridge - Brand color customization */

/* FORCE WHITE/LIGHT MODE - Override any dark mode */
.klaro,
.klaro *,
.klaro .cookie-notice,
.klaro .cookie-modal,
.klaro .cm-modal,
.klaro .cm-body,
.klaro .cm-header,
.klaro .cm-footer,
.klaro .cn-body,
.klaro .cm-app,
.klaro .cm-list,
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-footer {
  color-scheme: light !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0b0b0b !important;
}

/* Force transparent background for labels */
.klaro .cookie-modal .cm-app-label,
.klaro .cookie-modal .cm-list-label,
.klaro .cookie-modal .cm-app-input + .cm-app-label,
.klaro .cookie-modal .cm-list-input + .cm-list-label {
  background-color: transparent !important;
  background: transparent !important;
}

/* Force white background on all list elements and containers */
.klaro .cm-purposes,
.klaro .cm-purpose,
.klaro .cm-services,
.klaro .cm-service,
.klaro .cm-content,
.klaro .cm-caret,
.klaro ul.cm-purposes,
.klaro ul.cm-content,
.klaro li.cm-purpose,
.klaro li.cm-service,
.klaro .cm-purpose > div,
.klaro .cm-service > div,
.klaro .cm-toggle-all,
.klaro .cm-list-description,
.klaro .cm-app-description,
.klaro .purposes,
.klaro .cm-caret a,
.klaro .cm-required,
.klaro .cm-opt-out {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0b0b0b !important;
}

/* Force all spans and divs inside modal to have proper colors */
.klaro .cm-modal span,
.klaro .cm-modal div:not(.slider) {
  background-color: transparent !important;
  color: inherit !important;
}

/* Ensure paragraphs are white background */
.klaro .cm-modal p {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Font family */
.klaro {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Primary buttons - SkillBridge purple */
.klaro .cn-buttons button.cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-success,
.klaro button.cm-btn.cm-btn-accept-all {
  background: #68007a !important;
  border-color: #68007a !important;
  color: #ffffff !important;
}

.klaro .cn-buttons button.cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-success:hover,
.klaro button.cm-btn.cm-btn-accept-all:hover {
  background: #540060 !important;
  border-color: #540060 !important;
}

/* Secondary buttons */
.klaro .cn-buttons button.cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-info,
.klaro button.cm-btn.cm-btn-accept {
  color: #68007a !important;
  border-color: #68007a !important;
  background: transparent !important;
}

.klaro .cn-buttons button.cm-btn.cm-btn-info:hover,
.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-info:hover,
.klaro button.cm-btn.cm-btn-accept:hover {
  background: rgba(104, 0, 122, 0.08) !important;
  color: #540060 !important;
  border-color: #540060 !important;
}

/* Decline button */
.klaro .cn-buttons button.cm-btn.cm-btn-decline,
.klaro button.cm-btn.cm-btn-decline-all {
  color: rgba(11, 11, 11, 0.62) !important;
  background: transparent !important;
}

.klaro .cn-buttons button.cm-btn.cm-btn-decline:hover,
.klaro button.cm-btn.cm-btn-decline-all:hover {
  color: #0b0b0b !important;
  background: rgba(11, 11, 11, 0.06) !important;
}

/* Active switches - purple */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-app-input:checked + .cm-app-label .slider {
  background: #68007a !important;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider:hover,
.klaro .cookie-modal .cm-app-input:checked + .cm-app-label .slider:hover {
  background: #540060 !important;
}

/* Links - purple */
.klaro a,
.klaro .cm-link {
  color: #68007a !important;
}

.klaro a:hover,
.klaro .cm-link:hover {
  color: #540060 !important;
}

/* Close button - black */
.klaro .cookie-modal .cm-header button.hide,
.klaro .cookie-modal .cm-header button.hide svg,
.klaro .cookie-modal .cm-header button.hide svg line {
  stroke: #0b0b0b !important;
  color: #0b0b0b !important;
}

.klaro .cookie-modal .cm-header button.hide:hover svg line {
  stroke: #68007a !important;
}

/* Header titles - purple */
.klaro .cookie-modal .cm-header h1.title,
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-notice .cn-body .cn-title {
  color: #68007a !important;
}

/* Cookie notice floating button - purple */
.klaro .cookie-notice-button {
  background: #68007a !important;
  color: #ffffff !important;
}

.klaro .cookie-notice-button:hover {
  background: #540060 !important;
}

/* Notice border - purple accent */
.klaro .cookie-notice {
  border-top: 2px solid #68007a !important;
}