/* ============================================
   Klaro Cookie Consent — BloxGFX theme overrides
   Matches: dark bg, Inter/Space Grotesk, blue primary, 0.75rem radius
   ============================================ */

/* ---------- Notice bar (bottom-center banner) ---------- */
.klaro .cookie-notice {
  background: hsl(228 12% 11%) !important;
  border: 1px solid hsl(228 12% 18%) !important;
  border-radius: 1rem !important;
  box-shadow: 0 -4px 32px hsl(0 0% 0% / 0.4) !important;
  padding: 1.25rem 1.5rem !important;
  max-width: 480px !important;
  margin: 0 auto 1.25rem auto !important;
  font-family: 'Inter', sans-serif !important;
  color: hsl(210 20% 95%) !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  z-index: 9999 !important;
}

.klaro .cookie-notice .cn-body {
  padding: 0 !important;
  margin: 0 !important;
}

.klaro .cookie-notice .cn-body p {
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: hsl(215 15% 55%) !important;
  margin: 0 0 1rem 0 !important;
}

.klaro .cookie-notice .cn-body p strong,
.klaro .cookie-notice .cn-body .title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  color: hsl(210 20% 95%) !important;
  display: block !important;
  margin-bottom: 0.375rem !important;
}

/* ---------- Button row: text + buttons all on one line, right-aligned ---------- */
.klaro .cookie-notice .cn-ok {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

.klaro .cookie-notice .cn-buttons {
  display: contents !important;
}

/* "Manage preferences" link — small, inline before the buttons */
.klaro .cookie-notice .cn-learn-more {
  font-size: 0.6875rem !important;
  color: hsl(215 15% 45%) !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  order: -1 !important;
  white-space: nowrap !important;
}
.klaro .cookie-notice .cn-learn-more:hover {
  color: hsl(215 15% 65%) !important;
  background: none !important;
}

.klaro .cn-buttons .cm-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s, opacity 0.15s !important;
  line-height: 1.25 !important;
}

/* Accept all — primary blue */
.klaro .cn-buttons .cm-btn.cm-btn-accept-all,
.klaro .cn-buttons .cm-btn.cm-btn-success {
  background: hsl(217 91% 60%) !important;
  color: #fff !important;
}
.klaro .cn-buttons .cm-btn.cm-btn-accept-all:hover,
.klaro .cn-buttons .cm-btn.cm-btn-success:hover {
  background: hsl(217 91% 52%) !important;
}

/* Decline / reject — ghost style */
.klaro .cn-buttons .cm-btn.cm-btn-decline,
.klaro .cn-buttons .cm-btn.cm-btn-danger {
  background: transparent !important;
  color: hsl(215 15% 55%) !important;
  border: 1px solid hsl(228 12% 18%) !important;
}
.klaro .cn-buttons .cm-btn.cm-btn-decline:hover,
.klaro .cn-buttons .cm-btn.cm-btn-danger:hover {
  background: hsl(228 12% 16%) !important;
  color: hsl(210 20% 95%) !important;
}

/* Info button in modal */
.klaro .cn-buttons .cm-btn.cm-btn-info {
  background: transparent !important;
  color: hsl(217 91% 60%) !important;
  border: 1px solid hsl(217 91% 60% / 0.3) !important;
}
.klaro .cn-buttons .cm-btn.cm-btn-info:hover {
  background: hsl(217 91% 60% / 0.1) !important;
}

/* ---------- Modal (preferences / manage) ---------- */
.klaro .cookie-modal {
  font-family: 'Inter', sans-serif !important;
}

.klaro .cookie-modal .cm-modal {
  background: hsl(228 12% 11%) !important;
  border: 1px solid hsl(228 12% 18%) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 48px hsl(0 0% 0% / 0.5) !important;
  color: hsl(210 20% 95%) !important;
  max-width: 540px !important;
}

.klaro .cookie-modal .cm-header {
  border-bottom: 1px solid hsl(228 12% 18%) !important;
  padding: 1.25rem 1.5rem !important;
}

.klaro .cookie-modal .cm-header h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  color: hsl(210 20% 95%) !important;
}

.klaro .cookie-modal .cm-body {
  padding: 1rem 1.5rem !important;
}

.klaro .cookie-modal .cm-body p,
.klaro .cookie-modal .cm-body .cm-purpose-description {
  font-size: 0.8125rem !important;
  color: hsl(215 15% 55%) !important;
  line-height: 1.5 !important;
}

.klaro .cookie-modal .cm-purpose .cm-purpose-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: hsl(210 20% 95%) !important;
}

.klaro .cookie-modal .cm-footer {
  border-top: 1px solid hsl(228 12% 18%) !important;
  padding: 1rem 1.5rem !important;
}

/* ---------- Toggle switches ---------- */
.klaro .cm-switch input:checked + .cm-switch-slider {
  background: hsl(217 91% 60%) !important;
}

.klaro .cm-switch .cm-switch-slider {
  background: hsl(228 12% 22%) !important;
  border-radius: 999px !important;
}

.klaro .cm-switch .cm-switch-slider::before {
  background: #fff !important;
}

/* ---------- Links ---------- */
.klaro a,
.klaro .cn-learn-more {
  color: hsl(217 91% 60%) !important;
  text-decoration: none !important;
}

.klaro a:hover,
.klaro .cn-learn-more:hover {
  text-decoration: underline !important;
}

/* ---------- Backdrop ---------- */
.klaro .cookie-modal-overlay {
  background: hsl(0 0% 0% / 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

/* ---------- Close button ---------- */
.klaro .cookie-modal .cm-header .cm-close-btn {
  color: hsl(215 15% 55%) !important;
}
.klaro .cookie-modal .cm-header .cm-close-btn:hover {
  color: hsl(210 20% 95%) !important;
}