/* Klaro custom styling – matcher Mindzeed brand
   Lys baggrund, charcoal tekst, mint primær-knap, runde hjørner */

.klaro {
  --light1: #ffffff;
  --light2: #f7f9f7;
  --light3: #e5e5e5;
  --dark1: #333333;
  --dark2: #333333;
  --dark3: #333333;
  --green1: #15c9c3;
  --green2: #13b3ad;
  --green3: #0a6965;
  --button-text-color: #ffffff;
  --green-button-bg: #15c9c3;
  --green-button-bg-hover: #13b3ad;
  --grey-button-bg: #f7f9f7;
  --grey-button-bg-hover: #e5e5e5;
  --button-border-radius: 0.5rem;
  --notice-border-radius: 1rem;
  --modal-border-radius: 1.5rem;
  --title-font: "Inter", system-ui, sans-serif;
  --body-font: "Inter", system-ui, sans-serif;
  font-family: "Inter", system-ui, sans-serif;
}

/* ───── Modal box ───── */
.klaro .cookie-modal .cm-modal {
  background: #ffffff !important;
  color: #333333 !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  font-family: "Inter", system-ui, sans-serif;
  max-width: 550px !important;
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-footer {
  background: #ffffff !important;
  border: none !important;
  padding: 1.5rem 2rem !important;
}

.klaro .cookie-modal .cm-modal .cm-header {
  padding-bottom: 0.25rem !important;
}

.klaro .cookie-modal .cm-modal .cm-body {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.klaro .cookie-modal .cm-modal .cm-footer {
  padding-top: 1rem !important;
  border-top: 1px solid #f0f0f0 !important;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

/* ───── Bottom notice (når modal ikke vises) ───── */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #ffffff !important;
  color: #333333 !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid #e5e5e5 !important;
  font-family: "Inter", system-ui, sans-serif;
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  left: auto !important;
  top: auto !important;
  max-width: 360px !important;
  width: calc(100% - 3rem) !important;
}

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

.klaro .cookie-notice .cn-body p {
  color: #333333 !important;
  margin: 0 0 0.875rem 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}

.klaro .cookie-notice .cn-body p.cn-changes {
  font-size: 0.8125rem !important;
  color: #333333 !important;
}

/* Knapper i bottom-noticen — kompakt rækkefølge */
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.klaro .cookie-notice .cn-ok,
.klaro .cookie-notice .cn-buttons {
  margin-top: 0 !important;
}

/* "Vælg selv" link i bottom-noticen */
.klaro .cookie-notice .cn-learn-more {
  font-size: 0.8125rem !important;
  color: #333333 !important;
  text-decoration: underline !important;
  margin-right: auto !important;
}

/* ───── Headlines & body text ───── */
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h2 {
  color: #333333 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal .cm-header p,
.klaro .cookie-modal .cm-modal .cm-body p {
  color: #333333 !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
}

/* ───── Service titel & beskrivelse ───── */
.klaro .cookie-modal .cm-list-label .cm-list-title,
.klaro .cookie-modal .cm-service .cm-list-title,
.klaro .cookie-modal .cm-purpose .cm-list-title {
  color: #333333 !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
}

.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-service .cm-list-description {
  color: #333333 !important;
  font-size: 0.875rem !important;
}

.klaro .cookie-modal .cm-list-label .cm-opt-out,
.klaro .cookie-modal .cm-list-label .cm-required {
  color: #333333 !important;
  font-size: 0.75rem !important;
}

/* ───── Service liste rækker ───── */
.klaro .cookie-modal .cm-services {
  margin: 0 !important;
  padding: 0 !important;
}

.klaro .cookie-modal .cm-services .cm-service {
  padding: 10px 0 !important;
  margin: 0 !important;
}

/* Layout: switch lodret centreret med titel */
.klaro .cookie-modal .cm-services .cm-service .cm-list-label {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  grid-column-gap: 0.875rem !important;
  align-items: center !important;
  position: static !important;
  padding: 0 !important;
  min-height: auto !important;
}

.klaro .cookie-modal .cm-services .cm-service .cm-list-label .cm-switch {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 44px !important;
  height: 24px !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

.klaro .cookie-modal .cm-services .cm-service .cm-list-label .slider {
  border-radius: 9999px !important;
  box-shadow: none !important;
}

.klaro .cookie-modal .cm-services .cm-service .cm-list-label .slider:before,
.klaro .cookie-modal .cm-services .cm-service .cm-list-label .slider:after {
  box-shadow: none !important;
  filter: none !important;
}

/* Centrer den runde bullet lodret i toggle-knappen */
.klaro .cookie-modal .cm-services .cm-service .cm-list-label .slider:before {
  width: 16px !important;
  height: 16px !important;
  top: 48% !important;
  bottom: auto !important;
  margin-top: -8px !important;
  left: 7px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

.klaro .cookie-modal .cm-services .cm-service .cm-list-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 1px !important;
  line-height: 1.3 !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #333333 !important;
  grid-column: 2 !important;
}

/* Skjul "Formål: Analyse" – redundant info når toggle'en hedder Google Analytics.
   Klaro v0.7 renderer det som <p class="purposes"> i et div#service-item-*-description. */
.klaro .cookie-modal .cm-services .cm-service p.purposes,
.klaro .cookie-modal .cm-services .cm-service [id$="-description"],
.klaro .cookie-modal p.purposes {
  display: none !important;
}

/* Centrer toggle vertikalt med titlen siden vi nu kun har én linje */
.klaro .cookie-modal .cm-services .cm-service .cm-list-label .cm-switch {
  align-self: center !important;
}

/* ───── Links ───── */
.klaro .cookie-modal a,
.klaro .cookie-notice a {
  color: #0a6965 !important;
  text-decoration: underline;
  text-decoration-color: rgba(21, 201, 195, 0.4);
  text-underline-offset: 2px;
}

.klaro .cookie-modal a:hover,
.klaro .cookie-notice a:hover {
  color: #13b3ad !important;
  text-decoration-color: #13b3ad;
}

/* ───── Knapper – fælles (matcher .rounded-lg fra site CTA) ───── */
.klaro .cookie-notice .cn-buttons button,
.klaro .cookie-modal .cm-buttons button,
.klaro button.cm-btn {
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  padding: 0.3rem 0.8rem !important;
  font-size: 0.875rem !important;
  transition: all 0.15s ease !important;
  border: none !important;
  cursor: pointer !important;
}

/* Primær – Accepter alle (mint) */
.klaro button.cm-btn-success,
.klaro .cookie-notice .cn-buttons button.cm-btn-success,
.klaro .cookie-modal .cm-buttons button.cm-btn-success {
  background-color: #15c9c3 !important;
  color: #ffffff !important;
}

.klaro button.cm-btn-success:hover,
.klaro .cookie-notice .cn-buttons button.cm-btn-success:hover,
.klaro .cookie-modal .cm-buttons button.cm-btn-success:hover {
  background-color: #13b3ad !important;
}

/* Sekundær – Accepter valgte (charcoal) */
.klaro button.cm-btn-accept,
.klaro .cookie-notice .cn-buttons button.cm-btn-accept,
.klaro .cookie-modal .cm-buttons button.cm-btn-accept {
  background-color: #333333 !important;
  color: #ffffff !important;
}

.klaro button.cm-btn-accept:hover,
.klaro .cookie-notice .cn-buttons button.cm-btn-accept:hover,
.klaro .cookie-modal .cm-buttons button.cm-btn-accept:hover {
  background-color: #0d0d0d !important;
}

/* Tertiær – Afvis (lys grå) */
.klaro button.cm-btn-decline,
.klaro .cookie-notice .cn-buttons button.cm-btn-decline,
.klaro .cookie-modal .cm-buttons button.cm-btn-decline {
  background-color: #f7f9f7 !important;
  border: 1px solid #d4d4d4 !important;
  color: #333333 !important;
}

.klaro button.cm-btn-decline:hover,
.klaro .cookie-notice .cn-buttons button.cm-btn-decline:hover,
.klaro .cookie-modal .cm-buttons button.cm-btn-decline:hover {
  background-color: #d7dbd7 !important;
  border: 1px solid #d4d4d4 !important;
}

/* Info-knap (Vælg selv / Gem valg) – styled som outline knap */
.klaro button.cm-btn-info,
.klaro .cookie-notice .cn-buttons button.cm-btn-info,
.klaro .cookie-modal .cm-buttons button.cm-btn-info {
  background-color: transparent !important;
  color: #333333 !important;
  border: 1px solid #d4d4d4 !important;
  text-decoration: none !important;
  padding: 0.4rem 1rem !important;
}

.klaro button.cm-btn-info:hover,
.klaro .cookie-modal .cm-buttons button.cm-btn-info:hover {
  background-color: #d7dbd7 !important;
  border-color: #b3b3b3 !important;
  color: #333333 !important;
}

/* ───── Toggle switches ───── */
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input.required + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background-color: #15c9c3 !important;
}

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

/* ───── Luk-knap (X) i modal ───── */
.klaro .cookie-modal .hide button,
.klaro .cookie-modal .cm-modal .hide button {
  color: #333333 !important;
  background: transparent !important;
}

.klaro .cookie-modal .hide button:hover {
  color: #333333 !important;
}

/* ───── Skjul "powered by Klaro" ───── */
.klaro .cm-powered-by,
.klaro .cookie-notice .cn-powered-by,
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-modal .cm-modal .cm-powered-by {
  display: none !important;
}