/* Brand theme override for Klaro consent — readable, matches the website.
   Loaded AFTER klaro.css so these rules win. Palette from logo-wide.svg:
   Teal #2D8E9B · dark teal #1C525C · orange #FF9A00 · ink #25403C · cream #F6F4EE */

/* ---- Card (notice + settings modal): light, rounded, brand shadow ---- */
.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal.cm-klaro {
  background: #ffffff !important;
  color: #25403C !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(20, 50, 48, .30) !important;
  font-family: 'Karla', system-ui, sans-serif !important;
}
.klaro .cookie-notice .cn-body { background: transparent !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;
  color: #25403C !important;
  border-color: #E7E3D8 !important;
}

/* ---- Readable text (overrides klaro's low-contrast grey !important) ---- */
.klaro .cookie-notice p, .klaro .cookie-notice strong,
.klaro .cookie-notice h1, .klaro .cookie-notice h2,
.klaro .cookie-notice ul, .klaro .cookie-notice li,
.klaro .cookie-modal p, .klaro .cookie-modal strong,
.klaro .cookie-modal h1, .klaro .cookie-modal h2,
.klaro .cookie-modal ul, .klaro .cookie-modal li,
.klaro .cookie-modal .cm-caption, .klaro .cookie-modal span,
.klaro .cookie-modal .cm-title {
  color: #25403C !important;
}
.klaro .cookie-notice a, .klaro .cookie-modal a, .klaro .cm-link,
.klaro .cookie-notice .cm-link { color: #2D8E9B !important; }

/* ---- Logo at the top of the notice ---- */
.klaro .cookie-notice .cn-body { padding-top: 4px; }
.klaro .cookie-notice .cn-body > p:first-child::before {
  content: "";
  display: block;
  width: 190px; max-width: 70%;
  height: 34px;
  margin: 0 0 14px;
  background: url('../img/logo-wide.svg') left center / contain no-repeat;
}

/* ---- Buttons: pill shape, brand colours ---- */
.klaro .cookie-notice .cm-btn, .klaro .cookie-modal .cm-btn {
  color: #25403C !important;
  background: #E7EEEC !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
}
.klaro .cookie-notice .cm-btn:hover, .klaro .cookie-modal .cm-btn:hover {
  background: #DBE6E3 !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-accept,
.klaro .cookie-modal .cm-btn.cm-btn-accept {
  color: #ffffff !important;
  background: #2D8E9B !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover,
.klaro .cookie-notice .cm-btn.cm-btn-accept:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept:hover {
  background: #237884 !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-decline {
  background: transparent !important;
  color: #5C6F6B !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-info {
  background: transparent !important;
  color: #2D8E9B !important;
  text-decoration: underline !important;
  padding-left: 4px !important; padding-right: 4px !important;
}

/* ---- Toggles use the brand teal ---- */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #2D8E9B !important;
}
.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: #1C525C !important;
}

/* ---- Powered-by / small print readable ---- */
.klaro .cookie-notice .cn-ok .cn-buttons { gap: 8px; }
.klaro .cookie-modal .cm-powered-by a,
.klaro .cookie-notice .cm-powered-by a { color: #8A9793 !important; }

/* ---- FIX: broken toggle switches inside the settings modal ----
   In this klaro build the modal .cm-list-label stays display:inline, so the
   absolutely-positioned .cm-switch collapses to 0px and the .slider stretches
   to the full modal height. We give the label a proper flex box and pin the
   switch to a fixed 50x30 toggle. */
.klaro .cookie-modal .cm-list-label {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2px 8px !important;
  padding-right: 64px !important;
  min-height: 34px !important;
}
.klaro .cookie-modal .cm-list-label .cm-switch {
  position: absolute !important;
  right: 0 !important; top: 50% !important; left: auto !important;
  transform: translateY(-50%) !important;
  width: 50px !important; height: 30px !important; margin: 0 !important;
}
.klaro .cookie-modal .cm-list-label .slider {
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: auto !important; right: auto !important;
  width: 50px !important; height: 30px !important;
  border-radius: 30px !important;
  background: #C6D4CE !important;
  transition: background .2s !important;
}
.klaro .cookie-modal .cm-list-label .slider::before {
  content: "" !important;
  position: absolute !important;
  width: 22px !important; height: 22px !important;
  left: 4px !important; top: 4px !important; bottom: auto !important; right: auto !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
  transition: transform .2s !important;
}
/* ON state is driven ONLY by the real checkbox — this Klaro build renders the
   slider div with a STATIC class "active", so styling .slider.active would make
   every toggle look permanently ON regardless of actual consent. */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background: #2D8E9B !important;
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
  transform: translateX(20px) !important;
}
/* required (always-on) services in a calmer dark teal */
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider {
  background: #1C525C !important;
}
.klaro .cookie-modal .cm-list-title { font-weight: 600 !important; }

/* FIX: Klaro reserves 60px padding-left on each list item for a LEFT switch.
   Our switch sits on the RIGHT, so that space was just empty whitespace.
   Remove the indent so titles align with the modal text (and mobile gets room). */
.klaro .cookie-modal ul.cm-purposes,
.klaro .cookie-modal ul.cm-services,
.klaro .cookie-modal .cm-services .cm-content {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.klaro .cookie-modal li.cm-purpose,
.klaro .cookie-modal li.cm-service {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* nested services get a subtle indent instead of the big empty gap */
.klaro .cookie-modal .cm-services .cm-content li.cm-service { padding-left: 14px !important; }

/* BULLETPROOF: klaro stretches .slider (top:0;bottom:0) to its parent height,
   which on mobile blows up to ~300px. Clip it hard to the 30px switch and cap
   the slider height so the toggle always renders as a proper pill. */
.klaro .cookie-modal .cm-switch {
  overflow: hidden !important;
  height: 30px !important; max-height: 30px !important;
  display: block !important;
}
.klaro .cookie-modal .cm-switch .slider,
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-modal .slider.round {
  top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
  width: 50px !important; height: 30px !important;
  min-height: 0 !important; max-height: 30px !important;
}

/* =====================================================================
   Consent-NOTICE button bar — clean, aligned layout.
   Klaro renders: .cn-ok > [learn-more button] + .cn-buttons(div) > [decline][accept]
   The default .cn-buttons is display:block -> buttons stagger. Fix the layout
   and give the three actions a proper hierarchy. */
.klaro .cookie-notice .cn-body .cn-ok {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 14px !important;
  margin-top: 22px !important;
  padding-top: 2px !important;
}
.klaro .cookie-notice .cn-body .cn-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 0 auto !important;   /* action buttons pushed to the right */
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}
.klaro .cookie-notice .cn-body .cn-buttons .cm-btn { margin: 0 !important; width: auto !important; }

/* "Configure / learn more" = quiet text link on the far left */
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-lern-more {
  order: -1;
  background: transparent !important;
  color: #2D8E9B !important;
  text-decoration: underline !important;
  padding: 8px 2px !important;
  margin: 0 auto 0 0 !important;
  font-weight: 600 !important;
}
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-lern-more:hover { color: #1C525C !important; }

/* Decline = neutral secondary pill */
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cn-body .cm-btn.cn-decline {
  background: #EDF1EF !important;
  color: #46615C !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 20px !important;
  font-weight: 600 !important;
}
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cn-body .cm-btn.cn-decline:hover { background: #E1E8E4 !important; }

/* Accept all = primary teal pill */
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-success {
  background: #2D8E9B !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(45,142,155,.28) !important;
}
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-success:hover { background: #237884 !important; }

/* Mobile: stack full-width, primary on top, link at the bottom */
@media (max-width: 520px) {
  .klaro .cookie-notice .cn-body .cn-ok { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .klaro .cookie-notice .cn-body .cn-buttons { width: 100% !important; margin: 0 !important; flex-direction: column-reverse; gap: 8px !important; }
  .klaro .cookie-notice .cn-body .cn-buttons .cm-btn { width: 100% !important; justify-content: center; text-align: center; padding: 13px 20px !important; }
  .klaro .cookie-notice .cn-body .cm-btn.cm-btn-lern-more { order: 2; text-align: center; margin: 4px auto 0 !important; }
}