/* ----- Klaro styling overrides ----- */
/* 1) Keep Klaro banner the same size, but center it */
/* Klaro – show headings exactly as typed, not uppercase */
.klaro .cookie-modal h1.title {
  text-transform: none !important;
  letter-spacing: normal !important;
}
#klaro-cookie-notice.cookie-notice {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 2147483647 !important;
}

/* (also center the preferences modal if opened) */
.cm-dialog[role="dialog"] {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483647 !important;
}

/* 2) Dim the page whenever the banner OR modal is present */
html:has(#klaro-cookie-notice.cookie-notice),
html:has(.cm-dialog[role="dialog"]) {
  overflow: hidden !important;   /* 3) lock scroll */
  height: 100% !important;
  touch-action: none !important; /* iOS/Android */
}

html:has(#klaro-cookie-notice.cookie-notice)::after,
html:has(.cm-dialog[role="dialog"])::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);     /* adjust to taste */
  z-index: 2147483646;            /* just under the banner */
  pointer-events: none;
}

/* Reverse Klaro button order so "That's ok" appears before "Reject all" */
.cn-buttons {
  display: flex !important;
  flex-direction: row-reverse !important;
  gap: 0.5rem !important; /* small spacing between them */
}

/* Optional: keep consistent padding/alignment */
.cn-buttons .cm-btn {
  min-width: 90px;
  text-align: center;
}


/* Klaro cookie notice: improved desktop layout */
.klaro .cookie-notice {
  padding: 2rem !important;                /* more space inside */
  border-radius: 10px !important;          /* rounded corners */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
  max-width: 36rem !important;             /* default width (mobile-safe) */
  width: 90% !important;                   /* fills smaller screens nicely */
}

/* On desktops: make it 50% wider and keep centred */
@media (min-width: 992px) {
  .klaro .cookie-notice {
    max-width: 54rem !important;           /* 50% wider than default */
    width: auto !important;
  }
}


/* --- Override Klaro default toggle colours --- */

/* OFF (unchecked or half-checked) */
.klaro .cookie-modal .cm-list-input + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.half-checked + .cm-list-label .slider {
  background-color: #666 !important;      /* grey when off */
  border-color: #666 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ON (checked) — match Klaro’s selector exactly */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #800080 !important;   /* your purple */
  border-color: #800080 !important;
  background-image: none !important;
  box-shadow: 0 0 6px rgba(128, 0, 128, 0.35) !important;
}

/* Ensure the toggle knob stays white */
.klaro .cm-list-label .slider::before {
  background-color: #fff !important;
  box-shadow: 0 0 3px rgba(0,0,0,.25) !important;
}

/* --- Klaro list descriptions --- */
.klaro .cookie-modal .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-notice .cm-list-description {
  color: #ffffff !important;       /* make description text white */
  opacity: 0.9 !important;         /* slight softening for readability */
}


.klaro a,
.klaro a:visited {
  color: #fff !important;           /* or your preferred colour */
  text-decoration: underline;       /* optional: keep it readable */
}

.klaro a:hover {
  font-weight: bold !important;
}

/* Cookie notice (the small banner) */
.klaro .cookie-notice {
  background: #7300a7 !important;     /* deep purple like before */
  color: #fff !important;
  border: none !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Buttons (Accept / Reject / Save) */
.klaro .cm-btn {
  background: rgb(221, 4, 143) !important;  /* magenta */
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  padding: 8px 18px;
  font-weight: 600;
  transition: background 0.2s ease-in-out;
}

.klaro .cm-btn:hover {
  background: rgb(200, 0, 125) !important;
}

/* “Reject all” button – slightly muted magenta */
.klaro .cm-btn.cm-btn-danger {
  background: rgba(221, 4, 143, 0.8) !important;
}

/* Modal window (when user opens full settings) */
.klaro .cm-modal .cm-dialog {
  border-radius: 8px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
  background-color: #7300a7 !important;
  color: #fff !important;
}

/* Switches (on/off toggles) */
.klaro .cm-switch input:checked + .cm-slider {
  background-color: rgb(221, 4, 143) !important;
}

/* Links in banner/modal */
.klaro a {
  color: #fff;
  text-decoration: underline;
}

/* Keep the toggle text readable */
.klaro .cm-list-label {
  color: #fff !important;
}