/* Klaro cookie consent — custom styles matching GetPermit.eu design */
/* Since we use klaro-no-css.js, ALL styles must be provided here. */
/*
 * Klaro DOM structure (from klaro-no-css.min.js):
 *
 * NOTICE:
 *   .cookie-notice > .cn-body > p + .cn-ok > (.cn-buttons > .cm-btn*) + a.cm-link.cn-learn-more
 *
 * MODAL:
 *   .cookie-modal > .cm-bg + .cm-modal.cm-klaro > .cm-header + .cm-body > .cm-content > ul.cm-purposes > li.cm-purpose*
 *
 * PURPOSE/SERVICE ITEM (input + label are siblings, not nested):
 *   li.cm-purpose (or li.cm-service)
 *     input.cm-list-input[type=checkbox]
 *     label.cm-list-label
 *       span.cm-list-title
 *       span.cm-list-description  (services only)
 *       span.cm-switch > div.slider.round[.active]
 *     .cm-caret                   (purposes only)
 *     ul.cm-services > li.cm-service*
 */

.klaro {
  font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  line-height: 1.5;
}

.klaro * {
  box-sizing: border-box;
}

/* ============================================================
   NOTICE BAR — fixed bottom banner
   ============================================================ */
.klaro .cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  color: #1a1a2e;
  border-top: none;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  padding: 1.25rem 2rem;
  outline: none;
}

.klaro .cookie-notice .cn-body {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.klaro .cookie-notice .cn-body p {
  color: #1a1a2e;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  flex: 1 1 300px;
}

/* Hide "there were changes since your last visit" */
.klaro .cookie-notice .cn-changes {
  display: none !important;
}

.klaro .cookie-notice .cn-ok {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.klaro .cookie-notice .cn-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* "Manage cookies" link */
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice .cm-link {
  color: rgba(26,26,46,0.6);
  text-decoration: underline;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-notice .cm-link:hover {
  color: #1a1a2e;
}

/* Mobile: stack notice vertically */
@media (max-width: 640px) {
  .klaro .cookie-notice {
    padding: 1.25rem 1rem;
  }
  .klaro .cookie-notice .cn-body {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .klaro .cookie-notice .cn-body p {
    flex: none;
    font-size: 1rem;
  }
  .klaro .cookie-notice .cn-ok {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  /* Manage cookies link — above buttons */
  .klaro .cookie-notice .cn-learn-more,
  .klaro .cookie-notice .cm-link.cn-learn-more {
    order: -1;
    font-size: 1rem;
  }
  .klaro .cookie-notice .cn-buttons {
    display: flex;
    gap: 0.75rem;
    order: 0;
  }
  .klaro .cookie-notice .cn-buttons .cm-btn {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }
}

/* ============================================================
   BUTTONS — shared between notice and modal
   ============================================================ */
.klaro .cm-btn {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

/* "Accept all" — larger & primary */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all {
  background: #1a1a2e;
  color: #faf9f7;
  padding: 0.625rem 1.75rem;
  font-size: 0.9375rem;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
  background: #2a2a42;
}

/* "Accept selected" — secondary, outlined dark */
.klaro .cm-btn.cm-btn-success-var {
  background: transparent;
  color: #1a1a2e;
  border: 1px solid #1a1a2e;
}
.klaro .cm-btn.cm-btn-success-var:hover {
  background: #1a1a2e;
  color: #faf9f7;
}

/* "Reject all" — outlined, equal prominence */
.klaro .cm-btn.cm-btn-danger {
  background: transparent;
  color: #1a1a2e;
  border: 1px solid #d6d3d1;
}
.klaro .cm-btn.cm-btn-danger:hover {
  background: #f5f5f4;
}

/* ============================================================
   MODAL — overlay + dialog
   ============================================================ */
.klaro .cookie-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.klaro .cookie-modal .cm-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
}

.klaro .cookie-modal .cm-modal {
  position: relative;
  background: #faf9f7;
  color: #1a1a2e;
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  max-width: 28rem;
  width: calc(100% - 2rem);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* Header */
.klaro .cookie-modal .cm-header {
  border-bottom: 1px solid #e7e5e4;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header .title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #1a1a2e;
  margin: 0 0 0.5rem 0;
}

.klaro .cookie-modal .cm-header p {
  color: rgba(26,26,46,0.7);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
}

/* Body — scrollable */
.klaro .cookie-modal .cm-body {
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Reset wrapper margins inside body */
.klaro .cookie-modal .cm-body > ul,
.klaro .cookie-modal .cm-body > div {
  padding: 0;
  margin: 0;
}

.klaro .cookie-modal .cm-body p {
  color: rgba(26,26,46,0.7);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Footer */
.klaro .cookie-modal .cm-footer {
  border-top: 1px solid #e7e5e4;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}

.klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 480px) {
  .klaro .cookie-modal .cm-footer-buttons {
    flex-direction: column;
  }
  .klaro .cookie-modal .cm-footer-buttons .cm-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   PURPOSES + SERVICES — the consent list inside the modal
   ============================================================ */
.klaro .cookie-modal .cm-purposes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.klaro .cookie-modal .cm-purposes .cm-purpose {
  list-style: none;
}

.klaro .cookie-modal .cm-modal {
  outline: none;
}

/* Purpose group (e.g. "Analytics") */
.klaro .cookie-modal .cm-purpose {
  border-bottom: 1px solid #e7e5e4;
  padding: 0.75rem 1.5rem;
}

.klaro .cookie-modal .cm-purpose:last-child {
  border-bottom: none;
}

/*
 * Purpose/service item layout: input.cm-list-input + label.cm-list-label are siblings.
 * The label contains title + switch. We use the label as the flex row.
 */
.klaro .cookie-modal .cm-list-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.klaro .cookie-modal .cm-list-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1a1a2e;
  flex: 1;
}

/* The "purpose: Analytics" description and .purposes spans */
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .purposes {
  color: rgba(26,26,46,0.5);
  font-size: 0.75rem;
}

/* Caret / expand indicator */
.klaro .cookie-modal .cm-caret {
  margin-top: 0.25rem;
}

.klaro .cookie-modal .cm-caret a {
  color: rgba(26,26,46,0.5);
  text-decoration: none;
  font-size: 0.75rem;
}

.klaro .cookie-modal .cm-caret a:hover {
  color: #1a1a2e;
}

/*
 * Services collapsible section structure:
 *   div.cm-services > div.cm-caret + ul.cm-content[.expanded]
 * Klaro toggles .expanded on the <ul> when the caret is clicked.
 */
.klaro .cookie-modal .cm-services {
  margin: 0.25rem 0 0 0;
}

/* Collapsed by default — Klaro adds .expanded when open */
.klaro .cookie-modal .cm-services ul.cm-content {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0 0;
}

.klaro .cookie-modal .cm-services ul.cm-content.expanded {
  display: block;
}

.klaro .cookie-modal .cm-services .cm-service {
  padding: 0.375rem 0 0.375rem 1rem;
}

.klaro .cookie-modal .cm-services .cm-service .cm-list-title {
  font-weight: 400;
  font-size: 0.8125rem;
}

/* "Required" badge */
.klaro .cookie-modal .cm-required {
  font-size: 0.6875rem;
  color: rgba(26,26,46,0.5);
  font-style: italic;
  margin-left: 0.25rem;
}

/* Opt-out label */
.klaro .cookie-modal .cm-opt-out {
  font-size: 0.6875rem;
  color: rgba(26,26,46,0.5);
}

/* Toggle-all row */
.klaro .cookie-modal .cm-toggle-all {
  border-top: 1px solid #e7e5e4;
  border-bottom: none;
}

/* ============================================================
   TOGGLE SWITCHES
   Structure: input.cm-list-input + label.cm-list-label > span.cm-switch > div.slider.round
   Klaro toggles .active on .slider when checked.
   ============================================================ */

/* Hide the raw checkbox — it's a sibling of label, class is on the input itself.
   Keep it in the DOM flow (no pointer-events:none) so label[for] clicks still toggle it. */
input.cm-list-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* The switch wrapper inside the label */
.klaro .cm-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

/* The slider track — default unchecked (gray) */
.klaro .cm-switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #d6d3d1;
  transition: background 0.2s ease;
  border-radius: 22px;
  cursor: pointer;
}

/* The slider knob — default unchecked (left) */
.klaro .cm-switch .slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: transform 0.2s ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transform: translateX(0);
}

/*
 * Checked state — .active is ALWAYS present on the slider div (it's a CSS class name,
 * not a state toggle). Klaro controls state via the input's checked attribute.
 * Use input:checked + label .slider to detect actual on/off state.
 */
input.cm-list-input:checked + .cm-list-label .cm-switch .slider {
  background: #6b8f71;
}

input.cm-list-input:checked + .cm-list-label .cm-switch .slider::before {
  transform: translateX(18px);
}

/* ============================================================
   CLOSE BUTTON
   ============================================================ */
.klaro .cookie-modal .cm-close-btn,
.klaro .cookie-modal .close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: rgba(26,26,46,0.4);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  z-index: 1;
}

.klaro .cookie-modal .cm-close-btn:hover,
.klaro .cookie-modal .close:hover {
  color: #1a1a2e;
}

/* ============================================================
   UTILITY
   ============================================================ */
.klaro .cm-hidden {
  display: none !important;
}

.klaro .cm-powered-by {
  display: none;
}

.klaro .context-notice {
  font-size: 0.8125rem;
  color: rgba(26,26,46,0.6);
  padding: 0.5rem 0;
}

.klaro .cookie-modal.cm-embedded {
  position: static;
}

.klaro .cookie-modal.cm-embedded .cm-bg {
  display: none;
}

.klaro .cookie-modal a {
  color: #1a1a2e;
  text-decoration: underline;
}

.klaro .cookie-modal a:hover {
  color: rgba(26,26,46,0.7);
}