/* The cookie banner in the app's own look (#2960 walk).

   Klaro ships a dark card with a 28px title, a 50x30 slider and a blue button. The app has no dark
   mode, so this restyles Klaro as the app's modal and buttons:
     modal      components/confirm_modal.html, .npl-modal-* in static/css/input.css
     buttons    components/button.html: px-3 py-2 text-sm font-semibold, one teal main button,
                the rest white with a grey ring
     switch     the geolocation switch in placeholders/placeholder_create.html, h-6 w-11, 20px knob
     text       text-sm surface-600 for descriptions, text-xs surface-500 for the small print
   Klaro also injects its own copy of its CSS as an inline <style> when it renders, AFTER this file,
   so load order cannot win: every selector here starts `html body .klaro` to out-rank it instead.
   Colours are the app's tokens from :root in static/css/input.css, with the same values as fallbacks. */

html body .klaro {
  --surface-200: rgb(var(--color-surface-200, 231 229 228));
  --surface-300: rgb(var(--color-surface-300, 214 211 209));
  --surface-500: rgb(var(--color-surface-500, 120 113 108));
  --surface-600: rgb(var(--color-surface-600, 87 83 78));
  --surface-700: rgb(var(--color-surface-700, 68 64 60));
  --surface-900: rgb(var(--color-surface-900, 28 25 23));
  --primary-600: rgb(var(--color-primary-600, 15 118 110));
  --primary-800: rgb(var(--color-primary-800, 17 94 89));

  /* Klaro's own colour variables, pointed at the app's. */
  --dark1: #fff;                    /* card background */
  --light1: var(--surface-700);     /* text */
  --dark2: var(--surface-200);      /* rules between header, body and footer */
  --dark3: var(--surface-600);      /* descriptions */
  --light2: var(--surface-200);
  --light3: var(--surface-500);     /* "1 service" caret, "purpose:" line */
  --green1: var(--primary-600);     /* links, main button, switch when on */
  --green2: var(--primary-600);     /* the locked Required switch */
  --green3: var(--primary-600);
  --blue1: var(--primary-600);
  --white2: var(--surface-500);     /* switch track when OFF: 4.7:1 on white, WCAG 1.4.11 asks 3:1 */
  --white3: #fff;                   /* switch knob */
  --border-radius: 6px;
  --box-shadow-color: var(--primary-600);
}

/* --- The card --- */

html body .klaro .cookie-notice:not(.cookie-modal-notice) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--surface-200), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
@media (max-width: 1023.98px) {
  /* Below 1024px Klaro pins a full-width bar to the bottom edge. */
  html body .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-radius: 0;
    box-shadow: 0 -1px 0 var(--surface-200), 0 -4px 12px -2px rgb(0 0 0 / 0.08);
  }
}
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 16px 20px;
}
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  margin: 0 0 12px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

html body .klaro .cookie-modal .cm-bg {
  background: rgb(var(--color-surface-900, 28 25 23) / 0.5);
}
html body .klaro .cookie-modal .cm-modal.cm-klaro {
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--surface-200), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* --- Modal header, body, footer: the app's px-5 py-4 sections --- */

html body .klaro .cookie-modal .cm-modal .cm-header {
  padding: 16px 44px 16px 20px;
}
html body .klaro .cookie-modal .cm-modal .cm-header h1,
html body .klaro .cookie-modal .cm-modal .cm-header h1.title {
  margin: 0;
  padding: 0;
  font-size: 1.125rem;          /* .npl-modal-title: text-lg font-semibold text-surface-900 */
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--surface-900);
}
html body .klaro .cookie-modal .cm-modal .cm-header p {
  margin: 4px 0 0;
  font-size: 0.875rem;          /* the sub-heading; every description below matches it */
  line-height: 1.25rem;
  color: var(--surface-600);
}
html body .klaro .cookie-modal .cm-modal .hide {
  top: 18px;
  right: 16px;
}
html body .klaro .cookie-modal .cm-modal .cm-body {
  padding: 16px 20px;
}
html body .klaro .cookie-modal .cm-modal .cm-footer {
  padding: 16px 20px;
}

/* --- Titles, descriptions, small print --- */

html body .klaro .cookie-modal .cm-list-title,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-list-title,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-list-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--surface-900);
}
html body .klaro .cookie-modal .cm-list-description,
html body .klaro .cookie-modal .cm-list-description span,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service .cm-caret a {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
html body .klaro .cookie-modal .cm-list-description {
  color: var(--surface-600);
  padding-top: 2px;
}
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
html body .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required,
html body .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by,
html body .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  font-size: 0.75rem;           /* text-xs, muted */
  line-height: 1rem;
  color: var(--surface-500);
}

/* --- Links --- */

html body .klaro .cookie-notice a,
html body .klaro .cookie-modal a {
  font-weight: 500;
  color: var(--primary-600);
}
html body .klaro .cookie-notice a:hover,
html body .klaro .cookie-modal a:hover {
  color: var(--primary-800);
}
html body .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  font-weight: 400;
}
/* A link inside a sentence is teal beside surface-600 text, about 1.4:1, so colour alone cannot mark it
   (WCAG 1.4.1). Underline those; the stand-alone links ("Let me choose", "1 service") stay plain. */
html body .klaro .cookie-modal .cm-header p a,
html body .klaro .cookie-notice .cn-body p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Buttons: the app's size, one teal main button, the rest white with a grey ring --- */

html body .klaro .cookie-notice .cm-btn,
html body .klaro .cookie-modal .cm-btn,
html body .klaro .cookie-notice .cm-btn.cm-btn-danger,
html body .klaro .cookie-modal .cm-btn.cm-btn-danger,
html body .klaro .cookie-modal .cm-btn.cm-btn-info {
  padding: 8px 12px;
  margin: 0;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--surface-700);
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--surface-300) inset, 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
html body .klaro .cookie-notice .cm-btn:hover,
html body .klaro .cookie-modal .cm-btn:hover {
  background-color: rgb(var(--color-surface-50, 250 250 249));
}
html body .klaro .cookie-notice .cm-btn.cm-btn-success:not(.cm-btn-info),
html body .klaro .cookie-modal .cm-btn.cm-btn-success:not(.cm-btn-info) {
  color: #fff;
  background-color: var(--primary-600);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
html body .klaro .cookie-notice .cm-btn.cm-btn-success:not(.cm-btn-info):hover,
html body .klaro .cookie-modal .cm-btn.cm-btn-success:not(.cm-btn-info):hover {
  background-color: var(--primary-800);
}
/* "Manage cookies" opens the panel with a single Save button: that is the submit, so it is the main button. */
html body .klaro .cookie-modal .cm-footer-buttons .cm-btn-accept:only-child {
  color: #fff;
  background-color: var(--primary-600);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
html body .klaro .cookie-modal .cm-footer-buttons .cm-btn-accept:only-child:hover {
  background-color: var(--primary-800);
}
html body .klaro .cookie-notice .cm-btn:focus-visible,
html body .klaro .cookie-modal .cm-btn:focus-visible,
html body .klaro .cookie-notice a:focus-visible,
html body .klaro .cookie-modal a:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

/* The notice: link on the left, decline and accept on the right, 32px apart (the wizard footer's gap-8). */
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
}
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
  margin-top: 0;
}
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-learn-more {
  flex-grow: 0;
  margin-right: 0;
}
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: flex;
  width: auto;
  margin: 0;
  gap: 32px;
}
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
  width: auto;
  margin: 0;
}

/* The modal footer: decline stands 32px clear of the two ways to say yes, which sit 12px apart. */
html body .klaro .cookie-modal .cm-modal .cm-footer-buttons {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
html body .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-decline {
  margin-right: 20px;
}
html body .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
  padding: 12px 0 0;
  text-align: right;
}

/* --- The switch: the app's h-6 w-11 with a 20px knob --- */

html body .klaro .cookie-modal .cm-switch,
html body .klaro .cookie-notice .cm-switch {
  width: 44px;
  height: 24px;
}
html body .klaro .cookie-modal .cm-list-label .cm-switch {
  top: -2px;
}
html body .klaro .cookie-modal .cm-list-input,
html body .klaro .cookie-notice .cm-list-input {
  width: 44px;
  height: 24px;
}
html body .klaro .cookie-modal .cm-list-label .slider,
html body .klaro .cookie-notice .cm-list-label .slider {
  width: 44px;
  box-shadow: none;
  transition: background-color 0.2s ease-in-out;
}
html body .klaro .cookie-modal .cm-list-label .slider::before,
html body .klaro .cookie-notice .cm-list-label .slider::before {
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.25);
  transition: transform 0.2s ease-in-out;
}
html body .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
html body .klaro .cookie-modal .cm-list-label input:checked + .slider::before,
html body .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
  transform: translateX(20px);
}
html body .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
html body .klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider::before {
  transform: translateX(10px);
}
html body .klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-600);
}
/* Klaro's own focus style is a 1px green hairline; the app's is the 2px ring above. */
html body .klaro .cookie-modal .cm-list-label input:focus + .slider {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  html body .klaro .cookie-modal .cm-list-label .slider,
  html body .klaro .cookie-modal .cm-list-label .slider::before {
    transition: none;
  }
}