/* =============================================================================
   Cookie consent

   The first prompt and the preference manager deliberately share one modal
   shell. On phones the shell always stays inside the dynamic viewport; only
   the preference list scrolls when a short screen cannot show every category.
   ========================================================================== */

.klaro {
  --consent-panel: #1a2430;
  --consent-panel-deep: #161f2a;
  --consent-text: #f4f6f9;
  --consent-muted: #d6dbe3;
  --consent-subtle: #9ba6b5;
  --consent-line: #384657;
  --consent-primary: #7027b9;
  --consent-primary-hover: #5c1f9a;
  --consent-switch: #8331d9;

  /* Klaro's base stylesheet consumes these tokens. */
  --border-radius: 0;
  --green1: var(--consent-switch);
  --green2: var(--consent-primary-hover);
  --blue1: transparent;
  --blue2: var(--consent-primary);
  --dark1: var(--consent-panel);
  --dark2: var(--consent-line);
  --dark3: var(--consent-muted);
  --light1: var(--consent-text);
  --light2: var(--consent-muted);
  --light3: var(--consent-subtle);
  --white2: #647184;
  --white3: #fff;
  --button-text-color: #fff;

  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}

.klaro *,
.klaro *::before,
.klaro *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------- backdrop --- */

.klaro .cookie-modal {
  z-index: 2147483001;
}

.klaro .cookie-modal .cm-bg {
  background: rgba(240, 243, 248, 0.32);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ----------------------------------------------------------- shared buttons --- */

.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn {
  min-height: 52px;
  margin: 0 !important;
  padding: 13px 24px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease;
}

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  color: #fff;
  background: var(--consent-primary);
  border-color: var(--consent-primary);
}

.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  background: var(--consent-primary-hover);
  border-color: var(--consent-primary-hover);
}

.klaro .cookie-modal .cm-btn:focus-visible,
.klaro .cookie-notice .cm-btn:focus-visible,
.klaro .cookie-modal a:focus-visible {
  outline: 3px solid rgba(159, 67, 240, 0.72);
  outline-offset: 3px;
}

/* ---------------------------------------------------------- opening notice --- */

.klaro .cookie-modal .cookie-modal-notice {
  position: fixed;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(850px, calc(100vw - 40px));
  max-width: 850px;
  max-height: calc(100dvh - 40px);
  margin: 0;
  padding: 0;
  overflow: auto;
  color: var(--consent-text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: var(--consent-panel);
  box-shadow: 0 28px 80px rgba(8, 16, 28, 0.4);
  transform: translate(-50%, -50%);
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  scrollbar-width: thin;
}

.klaro .cookie-modal .cookie-modal-notice:focus,
.klaro .cookie-modal .cm-modal.cm-klaro:focus {
  outline: 2px solid rgba(131, 49, 217, 0.9);
  outline-offset: -2px;
}

.klaro .cookie-modal .cookie-modal-notice .cn-body {
  display: block;
  margin: 0;
  padding: 36px 40px 38px;
}

/* Deployed lockup in the same visual position as the reference wordmark. */
.klaro .cookie-modal .cookie-modal-notice .cn-body::before {
  display: flex;
  align-items: center;
  min-height: 35px;
  margin-bottom: 28px;
  padding-left: 36px;
  color: #fff;
  background: url("/white.png") no-repeat left center / 23px 35px;
  content: "Deployed";
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.klaro .cookie-modal .cookie-modal-notice h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: var(--consent-text);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.klaro .cookie-modal .cookie-modal-notice h2::before {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: var(--consent-switch);
  content: "";
  -webkit-mask: url("/wp-content/uploads/2026/01/verified-privacy-icon.svg")
    no-repeat center / contain;
  mask: url("/wp-content/uploads/2026/01/verified-privacy-icon.svg")
    no-repeat center / contain;
}

.klaro .cookie-modal .cookie-modal-notice p {
  margin: 0;
  color: var(--consent-muted);
  font-size: 16px;
  line-height: 1.55;
}

.klaro .cookie-modal .cookie-modal-notice .consent-copy {
  display: block;
  margin-bottom: 22px;
}

.klaro .cookie-modal .cookie-modal-notice .consent-policy-copy {
  margin-bottom: 0;
}

.klaro .cookie-modal .cookie-modal-notice .consent-policy-copy a {
  color: var(--consent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.klaro .cookie-modal .cookie-modal-notice .cn-ok {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
  margin-top: 26px;
}

.klaro .cookie-modal .cookie-modal-notice .cn-ok > *,
.klaro .cookie-modal .cookie-modal-notice .cn-buttons {
  margin: 0;
}

.klaro .cookie-modal .cookie-modal-notice .cn-buttons {
  display: flex;
  gap: 16px;
}

.klaro .cookie-modal .cookie-modal-notice .cm-btn-lern-more {
  color: var(--consent-text);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
}

.klaro .cookie-modal .cookie-modal-notice .cm-btn-lern-more:hover {
  color: var(--consent-panel-deep);
  background: #fff;
  border-color: #fff;
}

/* "Reject All" and "Customize" share the secondary outline treatment so the
   first screen offers refusal at the same click cost as acceptance. */
.klaro .cookie-modal .cookie-modal-notice .cm-btn.cn-decline,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn.cn-decline {
  color: var(--consent-text);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
}

.klaro .cookie-modal .cookie-modal-notice .cm-btn.cn-decline:hover,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn.cn-decline:hover {
  color: var(--consent-panel-deep);
  background: #fff;
  border-color: #fff;
}

/* ------------------------------------------------------ preference manager --- */

.klaro .cookie-modal .cm-modal.cm-klaro {
  position: fixed;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(920px, calc(100vw - 40px));
  max-width: 920px;
  max-height: calc(100dvh - 40px);
  margin: 0;
  overflow: hidden;
  color: var(--consent-text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: var(--consent-panel);
  box-shadow: 0 28px 80px rgba(8, 16, 28, 0.4);
  transform: translate(-50%, -50%);
}

.klaro .cookie-modal .cm-modal .cm-header {
  padding: 32px 36px 20px;
  border: 0;
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
  margin: 0 42px 20px 0;
  color: var(--consent-text);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.klaro .cookie-modal .cm-modal .cm-header p {
  margin: 0;
  color: var(--consent-muted);
  font-size: 16px;
  line-height: 1.55;
}

.klaro .cookie-modal .cm-modal .consent-modal-policy-link {
  color: var(--consent-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.klaro .cookie-modal .cm-modal .hide {
  top: 26px;
  right: 30px;
  width: 34px;
  height: 34px;
  padding: 5px;
}

.klaro .cookie-modal .cm-modal .hide svg {
  width: 24px;
  height: 24px;
  stroke: var(--consent-subtle);
}

.klaro .cookie-modal .cm-modal .cm-body {
  min-height: 0;
  padding: 4px 36px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  scrollbar-width: thin;
}

.klaro .cookie-modal .cm-modal .cm-body::-webkit-scrollbar,
.klaro .cookie-modal .cookie-modal-notice::-webkit-scrollbar {
  width: 8px;
}

.klaro .cookie-modal .cm-modal .cm-body::-webkit-scrollbar-thumb,
.klaro .cookie-modal .cookie-modal-notice::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.28);
  background-clip: padding-box;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes {
  margin: 0;
  padding: 0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
  position: relative;
  min-height: 58px;
  margin: 0;
  padding: 17px 42px 17px 66px;
  border-bottom: 1px solid var(--consent-line);
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:first-child {
  padding-bottom: 20px;
}

.klaro .cookie-modal .cm-list-title {
  color: var(--consent-text);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
}

.klaro .cookie-modal .cm-required,
.klaro .cookie-modal .cm-opt-out {
  display: none !important;
}

.klaro .cookie-modal .cm-list-description {
  margin: 14px 0 0;
  padding: 0;
  color: var(--consent-muted);
  font-size: 15px;
  line-height: 1.5;
}

.klaro .cookie-modal .cm-purpose > div[id$="-description"] {
  margin-left: -66px;
}

/* Match the compact reference: every category starts collapsed. Its details
   remain keyboard/click accessible through the caret on the right. */
.klaro .cookie-modal .cm-purpose > div[id$="-description"] > .cm-list-description {
  display: none;
}

.klaro .cookie-modal .cm-purpose:has(.cm-content.expanded)
  > div[id$="-description"]
  > .cm-list-description {
  display: block;
}

.klaro .cookie-modal .cm-list-label .cm-switch {
  top: 14px;
  left: 0;
}

.klaro .cookie-modal .cm-list-label .slider {
  background: #647184;
  box-shadow: none;
}

.klaro .cookie-modal .cm-list-label .slider::before {
  background: #fff;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider {
  background: var(--consent-switch);
}

.klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 3px solid rgba(159, 67, 240, 0.72);
  outline-offset: 3px;
}

.klaro .cookie-modal .cm-services .cm-caret {
  position: absolute;
  top: 18px;
  right: 1px;
}

.klaro .cookie-modal .cm-services .cm-caret a {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: transparent;
  font-size: 0;
  text-decoration: none;
}

.klaro .cookie-modal .cm-services .cm-caret a::before {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--consent-subtle);
  border-bottom: 2px solid var(--consent-subtle);
  content: "";
  transform: rotate(45deg) translate(-2px, -2px);
}

.klaro .cookie-modal .cm-purpose:has(.cm-content.expanded) .cm-services .cm-caret a::before {
  transform: rotate(225deg) translate(-1px, -1px);
}

.klaro .cookie-modal .cm-services .cm-caret a span {
  display: none;
}

.klaro .cookie-modal .cm-services .cm-content.expanded {
  margin: 14px 0 0 -48px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.klaro .cookie-modal .cm-services .cm-content.expanded .cm-list-title,
.klaro .cookie-modal .cm-services .cm-content.expanded .purposes {
  display: none;
}

.klaro .cookie-modal .cm-services .cm-content.expanded .cm-list-description {
  margin-top: 0;
}

.klaro .cookie-modal .cm-toggle-all {
  display: none;
}

.klaro .cookie-modal .cm-modal .cm-footer {
  padding: 22px 36px 32px;
  border: 0;
  background: var(--consent-panel);
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept:not(.cm-btn-accept-all) {
  color: var(--consent-text);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept:not(.cm-btn-accept-all):hover {
  color: var(--consent-panel-deep);
  background: #fff;
  border-color: #fff;
}

/* The site does not expose a persistent floating preferences launcher. Keep a
   defensive rule for stale cached markup while the first-visit consent dialog
   and the dedicated Privacy Policy control remain available. */
.deployed-cookie-preferences {
  display: none !important;
}

/* ----------------------------------------------------------------- mobile --- */

@media (max-width: 767px) {
  .klaro .cookie-modal .cookie-modal-notice,
  .klaro .cookie-modal .cm-modal.cm-klaro {
    top: calc(var(--consent-viewport-top, 0px) + var(--consent-viewport-height, 100dvh) / 2);
    left: calc(var(--consent-viewport-left, 0px) + var(--consent-viewport-width, 100vw) / 2);
    width: min(420px, calc(var(--consent-viewport-width, 100vw) - 24px));
    max-width: none;
    max-height: calc(var(--consent-viewport-height, 100dvh) - 24px);
    border-radius: 16px;
  }

  .klaro .cookie-modal .cookie-modal-notice .cn-body {
    padding: 22px 20px 24px;
  }

  .klaro .cookie-modal .cookie-modal-notice .cn-body::before {
    min-height: 30px;
    margin-bottom: 20px;
    padding-left: 31px;
    background-size: 20px 30px;
    font-size: 19px;
  }

  .klaro .cookie-modal .cookie-modal-notice h2 {
    gap: 8px;
    margin-bottom: 16px;
    font-size: 18px;
  }

  .klaro .cookie-modal .cookie-modal-notice h2::before {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .klaro .cookie-modal .cookie-modal-notice p {
    font-size: 13.5px;
    line-height: 1.48;
  }

  .klaro .cookie-modal .cookie-modal-notice .consent-copy {
    margin-bottom: 14px;
  }

  .klaro .cookie-modal .cookie-modal-notice .cn-ok {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }

  /* Customize, Reject All and Accept All cannot share one phone row, so let
     them grow and wrap instead of overflowing the notice. */
  .klaro .cookie-modal .cookie-modal-notice .cn-ok > *,
  .klaro .cookie-modal .cookie-modal-notice .cn-buttons .cm-btn {
    flex: 1 1 auto;
  }

  .klaro .cookie-modal .cookie-modal-notice .cn-buttons {
    gap: 10px;
  }

  .klaro .cookie-modal .cm-btn,
  .klaro .cookie-notice .cm-btn {
    min-height: 46px;
    padding: 11px 16px;
    font-size: 14px;
  }

  .klaro .cookie-modal .cm-modal .cm-header {
    padding: 24px 20px 14px;
  }

  .klaro .cookie-modal .cm-modal .cm-header h1 {
    margin: 0 38px 16px 0;
    font-size: 22px;
  }

  .klaro .cookie-modal .cm-modal .cm-header p {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .klaro .cookie-modal .cm-modal .hide {
    top: 18px;
    right: 16px;
  }

  .klaro .cookie-modal .cm-modal .cm-body {
    padding: 2px 20px;
  }

  .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
    min-height: 54px;
    padding: 15px 36px 15px 56px;
  }

  .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:first-child {
    padding-bottom: 18px;
  }

  .klaro .cookie-modal .cm-list-title {
    font-size: 15.5px;
  }

  .klaro .cookie-modal .cm-list-description {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.48;
  }

  .klaro .cookie-modal .cm-purpose > div[id$="-description"] {
    margin-left: -56px;
  }

  .klaro .cookie-modal .cm-list-label .cm-switch {
    top: 12px;
  }

  .klaro .cookie-modal .cm-services .cm-caret {
    top: 13px;
    right: -4px;
  }

  .klaro .cookie-modal .cm-modal .cm-footer {
    padding: 18px 20px 24px;
  }

  .klaro .cookie-modal .cm-modal .cm-footer-buttons {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Reject All, Confirm My Choices and Accept All cannot share one phone row.
     The labels do not wrap, so size each button from its own text and let the
     row break instead of shrinking every button until the text spills out. */
  .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
    flex: 1 1 auto;
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 359px) {
  .klaro .cookie-modal .cookie-modal-notice .cn-ok,
  .klaro .cookie-modal .cookie-modal-notice .cn-buttons,
  .klaro .cookie-modal .cm-modal .cm-footer-buttons {
    gap: 8px;
  }

  .klaro .cookie-modal .cm-btn,
  .klaro .cookie-notice .cm-btn {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .klaro .cm-btn {
    transition: none;
  }
}