/* Klaro theme overrides to match site typography and palette. */
.klaro {
  --font-family: var(--font-inter-tight, "DM Sans", sans-serif);
  --title-font-family: var(--font-inter-tight, "DM Sans", sans-serif);
  --font-size: 0.95rem;
  --border-radius: 18px;
  --border-style: solid;
  --border-width: 1px;
  --notice-max-width: 420px;
  --notice-right: 24px;
  --notice-bottom: 24px;
  --cc-text: var(--color-secondary, #0f172a);
  --cc-muted: color-mix(in srgb, var(--cc-text) 60%, transparent);
  --cc-link: var(--color-primary-500, #615cfd);
  --light1: var(--color-secondary, #0f172a);
  --dark1: var(--color-background-1, #fcfcfd);
  --dark2: var(--color-body-text, #334155);
  --cc-border: var(--color-stroke-3, #d7dde5);
  --cc-surface: var(--color-background-1, #fcfcfd);
  --cc-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light, #ffffff) 10%, transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light, #ffffff) 45%, transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light, #ffffff) 35%, transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light, #ffffff) 25%, transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark, #0f172a) 12%, transparent),
    0 12px 20px rgba(15, 23, 42, 0.12);
  --cc-blur: 14px;
  --cc-button-radius: 999px;
  --cc-button-shadow: var(--shadow-1, 0px 1px 2px 0px rgba(16, 24, 40, 0.05));
  --cc-button-bg: var(--color-background-1, #fcfcfd);
  --cc-button-text: var(--color-secondary, #0f172a);
  --cc-button-border: var(--color-stroke-3, #d7dde5);
  --cc-primary-bg: var(--color-primary-500, #615cfd);
  --cc-primary-border: var(--color-primary-600, #4f46e5);
  --cc-primary-text: var(--color-accent, #fcfcfc);
  --cc-secondary-bg: var(--color-secondary, #0f172a);
  --cc-secondary-border: var(--color-secondary, #0f172a);
  --cc-secondary-text: var(--color-accent, #fcfcfc);
  --green1: var(--cc-primary-bg);
  --green2: var(--cc-primary-border);
  --green3: var(--color-primary-400, #818cf8);
  --blue1: var(--cc-primary-bg);
  --blue2: var(--cc-primary-border);
}

.klaro,
.klaro .cookie-modal,
.klaro .cookie-notice {
  color: var(--cc-text);
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
  background-color: var(--color-background-1, #fcfcfd) !important;
  color: var(--color-secondary, #0f172a);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 1.1em 1.1em 0.9em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  color: currentColor;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a {
  color: var(--cc-link);
  font-weight: 600;
}

.klaro .cookie-modal a {
  color: var(--cc-link);
  font-weight: 600;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn {
  min-height: 44px;
  background-color: var(--cc-button-bg);
  color: var(--cc-button-text);
  border: 1px solid var(--cc-button-border);
  border-radius: var(--cc-button-radius);
  padding: 0.6em 2.1em 0.6em 1.25em;
  font-weight: 400;
  box-shadow: var(--cc-button-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cm-btn-success {
  background-color: var(--cc-primary-bg);
  color: var(--cc-primary-text);
  border-color: var(--cc-primary-border);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cm-btn-success:hover {
  background-color: var(--cc-primary-border);
  border-color: var(--cc-primary-border);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn.cm-btn-close,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cm-btn-close {
  background-color: var(--cc-secondary-bg);
  border-color: var(--cc-secondary-border);
  color: var(--cc-secondary-text);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn.cm-btn-close:hover,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cm-btn-close:hover {
  background-color: color-mix(in srgb, var(--cc-secondary-bg) 85%, var(--cc-primary-text));
  border-color: color-mix(in srgb, var(--cc-secondary-border) 85%, var(--cc-primary-text));
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: var(--color-background-1, #fcfcfd) !important;
  color: var(--color-secondary, #0f172a);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  -webkit-backdrop-filter: blur(calc(var(--cc-blur) + 2px)) saturate(var(--saturation, 180%));
  backdrop-filter: blur(calc(var(--cc-blur) + 2px)) saturate(var(--saturation, 180%));
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
  border-color: var(--cc-border);
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
  color: var(--cc-text);
}

.klaro .cookie-modal .cm-modal .cm-body p,
.klaro .cookie-modal .cm-modal .cm-body li,
.klaro .cookie-modal .cm-modal .cm-body span {
  color: currentColor;
}

.klaro .cookie-modal .cm-modal .cm-body {
  line-height: 1.6;
}

.klaro .cookie-modal .cm-modal .cm-body p {
  font-size: 1rem;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes {
  color: var(--cc-text);
}

.klaro .cookie-modal .cm-switch-container,
.klaro .cookie-notice .cm-switch-container {
  border-bottom: none;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: flex;
  gap: 0.5em;
  justify-content: flex-end;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-success {
  order: 1;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-close {
  order: 2;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn::after,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(0, -50%);
  opacity: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  transition: all 0.3s ease;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn:hover::after,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn:hover::after {
  opacity: 1;
  width: 12px;
  height: 12px;
  transform: translate(-16px, -50%);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn:hover,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn:hover {
  transform: scale(1.02);
}

.klaro .cookie-notice:not(.cookie-modal-notice) a,
.klaro .cookie-modal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn:focus-visible,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn:focus-visible,
.klaro .cookie-notice:not(.cookie-modal-notice) a:focus-visible,
.klaro .cookie-modal a:focus-visible {
  outline: 2px solid var(--cc-primary-border);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn,
  .klaro .cookie-modal .cm-modal .cm-footer .cm-btn,
  .klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn::after,
  .klaro .cookie-modal .cm-modal .cm-footer .cm-btn::after {
    transition: none;
  }
}
