/*
 * Klaro UI overrides — Models Milano brand
 *
 * Loaded AFTER klaro.css so these rules win without touching the vendored
 * library (keeps Klaro upgradeable). !important is used only where Klaro's
 * own cascade (two-declaration fallback pattern) would otherwise win.
 */

/* ── Typography ───────────────────────────────────────────────────────────── */

.klaro .cookie-modal,
.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .cookie-notice {
  font-family: "avenir-lt-pro", sans-serif !important;
  letter-spacing: 0.04em;
}

/* ── Modal shell: white background ───────────────────────────────────────── */

.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16) !important;
  border-radius: 16px !important;
}

@media (min-width: 660px) {
  .klaro .cookie-modal .cm-modal.cm-klaro {
    border-radius: 16px !important;
  }
}

/* ── Close × icon ────────────────────────────────────────────────────────── */

.klaro .cookie-modal .cm-modal .hide svg {
  stroke: #000000 !important;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom-color: #ebebeb !important;
  padding: 2em 2em 2em !important;
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
  font-family: "avenir-lt-pro", sans-serif !important;
  font-size: 1.25em;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: #000000 !important;
  text-transform: none;
}

/* ── Body copy ───────────────────────────────────────────────────────────── */

.klaro .cookie-modal .cm-modal .cm-body {
  padding: 2em 2em 1.6em !important;
}

.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: #000000 !important;
  font-weight: 300;
}

/* Description paragraph */
.klaro .cookie-modal .cm-modal .cm-body > p {
  font-size: 0.85em;
  color: #555555 !important;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* ── Service list items ──────────────────────────────────────────────────── */

.klaro .cookie-modal .cm-switch-container,
.klaro .cookie-notice .cm-switch-container {
  border-bottom-color: #ebebeb !important;
}

.klaro .cookie-modal .cm-list-title,
.klaro .cookie-notice .cm-list-title {
  color: #000000 !important;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-description {
  color: #888888 !important;
  font-size: 0.82em;
  letter-spacing: 0.03em;
}

/* "↓ 1 service" expand links */
.klaro .cookie-modal a,
.klaro .cookie-notice a {
  color: #000000 !important;
  text-decoration: none;
  opacity: 0.55;
}
.klaro .cookie-modal a:hover,
.klaro .cookie-notice a:hover {
  opacity: 1;
}

/* Caret color */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-caret,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret {
  color: #bbbbbb !important;
}

/* purposes sub-label */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li p.purposes {
  color: #aaaaaa !important;
}

/* "Enable or disable all" separator */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-toggle-all {
  border-top-color: #ebebeb !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.klaro .cookie-modal .cm-modal .cm-footer {
  border-top-color: #ebebeb !important;
  padding: 2em 2em 2em !important;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  color: #888888 !important;
  font-size: 0.72em;
  letter-spacing: 0.06em;
}

/* ── Buttons — pill shape · lowercase · light weight ────────────────────── */

.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  font-family: "avenir-lt-pro", sans-serif !important;
  font-size: 0.78em !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  text-transform: lowercase !important;
  border-radius: 9999px !important;
  padding: 0.55em 1.6em !important;
  transition: opacity 0.2s ease !important;
  border: 1px solid transparent;
}

.klaro .cookie-modal .cm-btn:hover,
.klaro .context-notice .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover {
  opacity: 0.75 !important;
}

/* "i decline" — outlined, no fill */
.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .context-notice .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close {
  background-color: transparent !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* "accept selected" — subtle dark fill */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: #555555 !important;
  color: #ffffff !important;
  border-color: #555555 !important;
}

/* "accept all" — solid green (primary action) */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-accept-all,
.klaro .context-notice .cm-btn.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
  background-color: #22c55e !important;
  color: #ffffff !important;
  border-color: #22c55e !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var {
  background-color: #555555 !important;
  color: #ffffff !important;
  border-color: #555555 !important;
}

/* ── Toggle: OFF — mid-grey track (must come FIRST so ON rules below override) */

.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  background-color: #c8c8c8 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

/* ── Toggle: ON → black ──────────────────────────────────────────────────── */

.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: #000000 !important;
  box-shadow: none !important;
}

.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider {
  background-color: #000000 !important;
  box-shadow: none !important;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: #000000 !important;
  box-shadow: none !important;
}

.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background-color: #555555 !important;
  box-shadow: none !important;
}

.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* ── Toggle: focus ring → black ──────────────────────────────────────────── */

.klaro .cookie-modal .cm-list-label input:focus + .slider,
.klaro .context-notice .cm-list-label input:focus + .slider,
.klaro .cookie-notice .cm-list-label input:focus + .slider {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px #000000 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * CONSENT NOTICE — compact bottom-right card
 *
 * Klaro ships the notice as a dark, rounded, full-width bar. These rules
 * restyle it into the site's card: square white surface, hairline border,
 * soft shadow, two pill buttons — "agree" (accept all, filled) and
 * "disagree" (decline all, outlined).
 *
 * Selectors are deliberately long — they must out-specify BOTH klaro.css and
 * the generic `.cm-btn` rules earlier in THIS file (which paint cm-btn-success
 * solid black and force lowercase). Those generic rules still serve the modal.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Card surface ────────────────────────────────────────────────────────── */

.klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed !important;
  z-index: 999;
  bottom: 8px !important;
  right: 8px !important;
  left: auto !important;
  top: auto !important;
  width: calc(100vw - 2rem) !important;
  max-width: 360px !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Klaro focuses the notice container on mount (it is a tabIndex=0 dialog, for
   screen readers) which paints the UA focus ring around the whole card. The
   container is not an actionable control and the buttons keep their own
   focus-visible rings, so keyboard operability is unaffected. */
.klaro .cookie-notice:not(.cookie-modal-notice):focus,
.klaro .cookie-notice:not(.cookie-modal-notice):focus-visible {
  outline: none !important;
}

/* klaro.css strips the border and squares the corners under 1024px; the card
   look is identical at every width, so re-assert it. */
@media (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
  }
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 16px 20px !important;
  margin: 0 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  font-family: "avenir-lt-pro", sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 18px !important;
  letter-spacing: 0.02em !important;
  color: rgba(0, 0, 0, 0.8) !important;
  margin: 0 !important;
}

@media (min-width: 640px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    font-size: 13px !important;
  }
}

/* Klaro prepends a "There were changes since your last visit, please renew
   your consent." paragraph whenever the stored consent predates the current
   config. Suppressed: returning visitors just see the standard notice. */
.klaro .cn-changes,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p.cn-changes {
  display: none !important;
}

/* ── Button row — right-aligned ──────────────────────────────────────────── */

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: 16px !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: flex !important;
  margin-top: 0 !important;
  gap: 8px !important;
}

/* ── "agree" / "disagree" pills — shared shape ───────────────────────────── */

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-success,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-danger {
  font-family: "avenir-lt-pro", sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 15px !important;
  letter-spacing: 0.08em !important;
  text-transform: lowercase !important;
  border-radius: 9999px !important;
  padding: 7px 20px !important;
  margin: 0 !important;
  width: auto !important;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}

/* "agree" (accept all) — filled black, the primary action */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-success {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-success:hover {
  opacity: 0.75 !important;
}

/* "disagree" (decline all) — outlined, fills black on hover */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-danger {
  background-color: transparent !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-danger:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-success:focus-visible,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-danger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3) !important;
}

/* klaro.css stretches the buttons to 50%/100% under 384px — the pill
   buttons should keep their intrinsic width. */
@media (max-width: 384px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons,
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    width: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * DARK MODE
 *
 * The whole site flips to dark when CMS news id "2" is online — the root
 * <html> gets a `.dark` class (see src/app/layout.tsx). `#klaro` mounts inside
 * <body>, so `.dark .klaro …` reaches every surface Klaro renders. Each rule
 * below is the dark counterpart of a light rule above; the extra `.dark` class
 * raises specificity so it wins even though both carry `!important`. Surfaces
 * go near-black, text light; the green "accept all" accent is kept.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Modal shell */
.dark .klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: #111111 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Close × icon */
.dark .klaro .cookie-modal .cm-modal .hide svg {
  stroke: #ffffff !important;
}

/* Header */
.dark .klaro .cookie-modal .cm-modal .cm-header {
  border-bottom-color: #2a2a2a !important;
}
.dark .klaro .cookie-modal .cm-modal .cm-header h1 {
  color: #ffffff !important;
}

/* Body copy */
.dark .klaro .cookie-modal p,
.dark .klaro .cookie-modal strong,
.dark .klaro .cookie-modal h1,
.dark .klaro .cookie-modal h2,
.dark .klaro .cookie-modal ul,
.dark .klaro .cookie-modal li {
  color: #ffffff !important;
}
.dark .klaro .cookie-modal .cm-modal .cm-body > p {
  color: #aaaaaa !important;
}

/* Service list */
.dark .klaro .cookie-modal .cm-switch-container,
.dark .klaro .cookie-notice .cm-switch-container {
  border-bottom-color: #2a2a2a !important;
}
.dark .klaro .cookie-modal .cm-list-title,
.dark .klaro .cookie-notice .cm-list-title {
  color: #ffffff !important;
}
.dark .klaro .cookie-modal .cm-list-description,
.dark .klaro .cookie-notice .cm-list-description {
  color: #999999 !important;
}
.dark .klaro .cookie-modal a,
.dark .klaro .cookie-notice a {
  color: #ffffff !important;
}
.dark .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-caret,
.dark .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret {
  color: #777777 !important;
}
.dark .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li p.purposes,
.dark .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li p.purposes {
  color: #888888 !important;
}
.dark .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-toggle-all,
.dark .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-toggle-all {
  border-top-color: #2a2a2a !important;
}

/* Footer */
.dark .klaro .cookie-modal .cm-modal .cm-footer {
  border-top-color: #2a2a2a !important;
}
.dark .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  color: #aaaaaa !important;
}

/* Buttons — flip the outlined + solid-black ones; keep the greys and green */
.dark .klaro .cookie-modal .cm-btn.cm-btn-close,
.dark .klaro .context-notice .cm-btn.cm-btn-close,
.dark .klaro .cookie-notice .cm-btn.cm-btn-close {
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.dark .klaro .cookie-modal .cm-btn.cm-btn-success,
.dark .klaro .context-notice .cm-btn.cm-btn-success,
.dark .klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Toggle: OFF track / ON track (white knob stays; ON uses the green accent so
   it reads on the dark shell where a black ON track would vanish) */
.dark .klaro .cookie-modal .cm-list-label .slider,
.dark .klaro .context-notice .cm-list-label .slider,
.dark .klaro .cookie-notice .cm-list-label .slider {
  background-color: #444444 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
.dark .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.dark .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.dark .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider,
.dark .klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.dark .klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
.dark .klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider,
.dark .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.dark .klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.dark .klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: #22c55e !important;
}
.dark .klaro .cookie-modal .cm-list-label input:focus + .slider,
.dark .klaro .context-notice .cm-list-label input:focus + .slider,
.dark .klaro .cookie-notice .cm-list-label input:focus + .slider {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 2px #ffffff !important;
}

/* Consent notice — compact bottom-right card */
.dark .klaro .cookie-notice:not(.cookie-modal-notice) {
  background-color: #111111 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}
@media (max-width: 1023px) {
  .dark .klaro .cookie-notice:not(.cookie-modal-notice) {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
}
.dark .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* "agree" — filled white pill (primary on the dark card) */
.dark .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-success {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}
.dark .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-success:hover {
  opacity: 0.75 !important;
}

/* "disagree" — outlined white pill, fills white on hover */
.dark .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-danger {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}
.dark .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-danger:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  opacity: 1 !important;
}

.dark .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-success:focus-visible,
.dark .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn.cm-btn-danger:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}