/* Klaro! Custom Styling — concept x Al Mozaik — minimal overrides only */

.klaro {
  font-family: 'Work Sans', system-ui, sans-serif;
}

/* Notice background */
.klaro .cookie-notice {
  background-color: #FAFAFA !important;
}

/* Text — same gray as website body text (#666 / navy-500) */
.klaro .cookie-notice,
.klaro .cookie-notice p,
.klaro .cookie-notice .cn-body {
  color: #666666 !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Title */
.klaro .cookie-notice .cn-body .title {
  color: #313131 !important;
  font-weight: 400 !important;
}

/* Links */
.klaro .cookie-notice a {
  color: #00A1E5 !important;
}

/* Buttons — pill style like website */
.klaro .cm-btn {
  border-radius: 9999px !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease !important;
}

/* Accept button — brand blue */
.klaro .cm-btn.cm-btn-success {
  background-color: #00A1E5 !important;
  color: #FFFFFF !important;
}

.klaro .cm-btn.cm-btn-success:hover {
  background-color: #0089C7 !important;
}

/* Decline button — white pill */
.klaro .cm-btn.cm-btn-danger {
  background-color: #FFFFFF !important;
  color: #666666 !important;
  border: 1px solid #CCCCCC !important;
}

.klaro .cm-btn.cm-btn-danger:hover {
  border-color: #999999 !important;
  color: #313131 !important;
}

/* Info/Learn more button — subtle */
.klaro .cm-btn.cm-btn-info {
  background-color: transparent !important;
  color: #00A1E5 !important;
  border: 1px solid #00A1E5 !important;
}

/* Toggle switch — gray instead of green */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: #999999 !important;
}

.klaro .cm-list-label .slider {
  background-color: #CCCCCC !important;
}

/* --- Modal (Learn more popup) --- */
.klaro .cookie-modal .cm-modal {
  background-color: #FAFAFA !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
}

.klaro .cookie-modal .cm-header h1 {
  color: #313131 !important;
  font-weight: 300 !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
}

.klaro .cookie-modal .cm-header p,
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-body p {
  color: #666666 !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.klaro .cookie-modal .cm-body a {
  color: #00A1E5 !important;
}

.klaro .cm-list-title {
  color: #313131 !important;
  font-weight: 500 !important;
}

.klaro .cm-list-description {
  color: #999999 !important;
  font-weight: 300 !important;
  font-size: 13px !important;
}

.klaro .cookie-modal .cm-footer {
  background-color: #F5F5F5 !important;
}

/* Hide Klaro branding */
.klaro .cn-powered-by,
.klaro .cm-powered-by {
  display: none !important;
}

/* Service expand link — gray instead of green */
.klaro .cm-list-item .cm-caret a,
.klaro .cm-list-item .cm-content a,
.klaro .cookie-modal a {
  color: #999999 !important;
}

/* Remove divider lines in modal */
.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-footer,
.klaro .cm-list-item {
  border: none !important;
}

/* === RTL fixes (Arabic) ====================================== */
/* Toggle slot moves from left side to right side */
html[dir="rtl"] .klaro ul.cm-purposes li.cm-purpose,
html[dir="rtl"] .klaro ul.cm-services li.cm-service {
  padding-left: 0 !important;
  padding-right: 60px !important;
}
html[dir="rtl"] .klaro .cm-list-input,
html[dir="rtl"] .klaro .cm-list-label .cm-switch,
html[dir="rtl"] .klaro .cm-list-label .slider {
  left: auto !important;
  right: 0 !important;
}
html[dir="rtl"] .klaro .cm-list-label .slider::before {
  left: auto !important;
  right: 5px !important;
}
html[dir="rtl"] .klaro .cm-list-input:checked + .cm-list-label .slider::before {
  -ms-transform: translateX(-10px) !important;
  transform: translateX(-10px) !important;
}
/* Service expand/collapse content margin */
html[dir="rtl"] .klaro ul.cm-purposes li.cm-purpose .cm-services .cm-content {
  margin-left: 0 !important;
  margin-right: -40px !important;
}