/* The cookie notice, matched to the one on figaf.com: a dark rounded card
   with a green "Accept all" pill and an outlined "Decline all" pill.
   Klaro's own rules are overridden through the #klaro container. */
#klaro .cookie-notice:not(.cookie-modal-notice) {
  left: 20px;
  right: auto;
  bottom: 20px;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: #1c1c1c;
  color: #ffffff;
  border-radius: 20px;
  box-shadow: 1px 2px 8px rgb(0 0 0 / 0.35);
  font-family: var(--font-sans, "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 15px 20px 18px;
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h2 {
  margin: 0.4rem 0 0.5rem;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}
/* Buttons first, then the "Show details" link centred underneath. */
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 0.9rem;
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons {
  display: flex;
  gap: 10px;
  margin: 0;
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn {
  flex: 1;
  height: 38px;
  margin: 0;
  padding: 0 7px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn-success {
  order: -1;
  background: #2e7d32;
  border: 1px solid #2e7d32;
  color: #ffffff;
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn-success:hover { background: #256a29; border-color: #256a29; }
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-decline {
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-decline:hover { background: rgb(255 255 255 / 0.1); }
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more {
  align-self: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more:hover { text-decoration: underline; }
#klaro .cookie-notice:not(.cookie-modal-notice) :focus-visible {
  outline: 2px solid var(--orange-bright, #fcbe41);
  outline-offset: 2px;
}

/* "Show details" opens the settings dialog; it gets the same card look. */
#klaro .cookie-modal .cm-modal.cm-klaro {
  background: #1c1c1c;
  color: #ffffff;
  border-radius: 20px;
  box-shadow: 1px 2px 12px rgb(0 0 0 / 0.45);
  font-family: var(--font-sans, "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
}
#klaro .cookie-modal .cm-header,
#klaro .cookie-modal .cm-body,
#klaro .cookie-modal .cm-footer { border-color: rgb(255 255 255 / 0.15); }
#klaro .cookie-modal .cm-header h1.title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}
#klaro .cookie-modal .cm-header p,
#klaro .cookie-modal .cm-list-description,
#klaro .cookie-modal p.purposes { font-size: 12px; color: rgb(255 255 255 / 0.8); }
#klaro .cookie-modal a { color: #2e7d32; }
#klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
#klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider { background-color: #2e7d32; }
#klaro .cookie-modal .cm-footer-buttons { gap: 10px; }
#klaro .cookie-modal .cm-btn {
  min-height: 38px;
  margin: 0;
  padding: 0 16px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
#klaro .cookie-modal .cm-btn-accept-all { background: #2e7d32; border: 1px solid #2e7d32; color: #ffffff; }
#klaro .cookie-modal .cm-btn-accept,
#klaro .cookie-modal .cm-btn-decline { background: transparent; border: 1px solid #ffffff; color: #ffffff; }
#klaro .cookie-modal .cm-btn:hover { filter: brightness(1.1); }
#klaro .cookie-modal .cm-powered-by { display: none; }