/* ==========================================================================
   Klaro Overrides
   Reuses the previous CookiesJSR Lifetime Montessori brand styling.
   ========================================================================== */

#klaro,
.klaro {
  --font-family: "Work Sans", Lato, Arial, sans-serif;
  --font-size: 14px;
  --border-radius: 8px;
  --border-width: 1px;
  --border-style: solid;

  --dark1: #69797f;
  --dark2: #3a5a6a;
  --dark3: #3a5a6a;
  --light1: #ffffff;
  --light2: #dce9ec;
  --light3: #dce9ec;
  --white1: #ffffff;
  --white2: #f7fbf3;
  --white3: #eaf1f1;
  --green1: #86b830;
  --green2: #86b830;
  --green3: rgba(134, 184, 48, 0.35);
  --blue1: #109bd2;
  --blue2: #0c7aa8;
  --button-text-color: #ffffff;
  --notice-bottom: 20px;
  --notice-right: 20px;
  --notice-max-width: 430px;
  color: #3a5a6a;
}

#klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #69797f;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 -10px 30px rgba(20, 45, 60, 0.18);
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 1rem;
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  max-width: 68ch;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.65;
}

#klaro .cookie-notice a,
#klaro .cookie-modal a {
  color: #109bd2;
}

#klaro .cookie-notice a:hover,
#klaro .cookie-modal a:hover {
  color: #0c7aa8;
}

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

#klaro .cookie-modal .cm-modal.cm-klaro {
  background: #ffffff;
  border: 1px solid #dce9ec;
  box-shadow: 0 24px 60px rgba(20, 45, 60, 0.2);
  color: #3a5a6a;
}

#klaro .cookie-modal .cm-bg {
  background: rgba(58, 90, 106, 0.44);
}

#klaro .cookie-modal .cm-modal .cm-header,
#klaro .cookie-modal .cm-modal .cm-footer {
  background: #f7fbf3;
  border-color: #dce9ec;
  box-shadow: none;
}

#klaro .cookie-modal .cm-modal .cm-header h1,
#klaro .cookie-modal .cm-modal .cm-header h2,
#klaro .cookie-modal .cm-modal .title {
  color: #109bd2;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#klaro .cookie-modal p,
#klaro .cookie-modal strong,
#klaro .cookie-modal h1,
#klaro .cookie-modal h2,
#klaro .cookie-modal ul,
#klaro .cookie-modal li {
  color: #3a5a6a;
}

#klaro .cookie-modal .cm-modal .cm-body {
  background: #ffffff;
}

#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,
#klaro .cookie-modal .cm-switch-container {
  border-color: #eaf1f1;
}

#klaro .cookie-modal .cm-switch-container:hover,
#klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service:hover,
#klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:hover {
  background: #f7fbf3;
}

#klaro .cookie-modal .cm-list-title,
#klaro .cookie-notice .cm-list-title {
  color: #3a5a6a;
  font-weight: 600;
}

#klaro .cookie-modal .cm-list-description,
#klaro .cookie-modal .purposes {
  color: #69797f;
}

#klaro .cookie-modal .slider,
#klaro .cookie-notice .slider {
  background: #dce9ec;
  box-shadow: inset 0 0 0 1px rgba(58, 90, 106, 0.08);
}

#klaro .cookie-modal .cm-list-label .slider::before,
#klaro .cookie-notice .cm-list-label .slider::before {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 45, 60, 0.18);
}

#klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
#klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider,
#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: #86b830;
}

#klaro .cookie-modal .cm-btn,
#klaro .cookie-notice .cm-btn {
  min-height: 40px;
  border: 1px solid #86b830;
  border-radius: 4px;
  background: #86b830;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#klaro .cookie-modal .cm-btn:hover,
#klaro .cookie-notice .cm-btn:hover {
  background: #789f2b;
  border-color: #789f2b;
  color: #ffffff;
  transform: translateY(-1px);
}

#klaro .cookie-modal .cm-btn:focus-visible,
#klaro .cookie-notice .cm-btn:focus-visible,
#klaro .klaro_toggle_dialog:focus-visible {
  outline: 3px solid rgba(134, 184, 48, 0.35);
  outline-offset: 2px;
}

#klaro .cookie-modal .cm-btn.cm-btn-info,
#klaro .cookie-notice .cm-btn.cm-btn-info,
#klaro .cookie-modal .cm-btn.cm-btn-danger,
#klaro .cookie-notice .cm-btn.cm-btn-danger {
  background: #86b830;
  border-color: #86b830;
}

#klaro .cookie-modal .cm-modal .hide svg {
  stroke: #3a5a6a;
}

#klaro_toggle_dialog.klaro_toggle_dialog_override {
  background-color: #86b830;
  border: 1px solid #ffffff;
  box-shadow: 0 8px 20px rgba(20, 45, 60, 0.18);
}

@media (max-width: 768px) {
  #klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 0.9rem;
  }

  #klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    font-size: 0.9rem;
  }

  #klaro .cookie-modal .cm-modal.cm-klaro {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: none;
    top: 10px;
    left: 10px;
    transform: none;
  }
}

@media (max-width: 576px) {
  #klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok,
  #klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons,
  #klaro .cookie-modal .cm-footer-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%;
  }

  #klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn,
  #klaro .cookie-modal .cm-footer-buttons .cm-btn {
    width: 100%;
    margin: 0;
    min-height: 44px;
  }

  #klaro .cookie-modal .cm-modal.cm-klaro {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
  }

  #klaro .cookie-modal .cm-modal .cm-header,
  #klaro .cookie-modal .cm-modal .cm-footer,
  #klaro .cookie-modal .cm-modal .cm-body {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  #klaro .cookie-modal .cm-modal .cm-body,
  #klaro .cookie-modal .cm-modal .cm-body ul.cm-services,
  #klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes,
  #klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
  #klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }
}