/* YUCA365 thema overrides voor Klaro 0.7.x
 * Lichte stijl die past bij yuca365.com:
 *   - witte kaart met donkere tekst (geen donkere banner)
 *   - indigo primary knop (matches .btn-primary)
 *   - subtiele border en site-shadow
 *   - volle tekstkleuren — geen vage grijswaarden
 */

/* ===== Klaro CSS-variabelen overschrijven =====
 * Klaro's default klaro.min.css gebruikt CSS-variabelen als fallback.
 * Door deze op .klaro te zetten worden ze door alle interne regels
 * meteen opgepikt — geen specificiteitsgevecht. */
.klaro {
  /* Typografie */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --title-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size: 15px;

  /* Witte / lichte tinten (modal-achtergrond, secundaire vlakken) */
  --white1: #ffffff;
  --white2: #fbfbfa;
  --white3: #f3f4f6;

  /* Lichte tinten (borders, uitgegrijsde toggle) */
  --light1: #e6e8ec;
  --light2: #d7dae0;
  --light3: #b9bdc4;

  /* Donkere tinten (banner-achtergrond in dark-mode default — wij maken hem licht) */
  --dark1: #ffffff;        /* banner background */
  --dark2: #ffffff;        /* knop-default achtergrond */
  --dark3: #fbfbfa;

  /* Tekstkleur op knoppen + algemeen */
  --button-text-color: #ffffff;

  /* Primary / success = Alles accepteren — site-indigo */
  --green1: #2f3aa6;
  --green2: #232c8a;
  --green3: #16a36b; /* groen blijft voor toggle-aan */

  /* Info / learn-more knoppen — als tekstlink */
  --blue1: transparent;
  --blue2: transparent;

  /* Vormgeving */
  --border-radius: 12px;
  --border-width: 1px;
  --border-style: solid;
  --box-shadow-color: rgba(14, 31, 58, 0.10);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #0e1f3a;
}
.klaro * { box-sizing: border-box; }

/* ===== Banner (cookie-notice, rechtsonder) ===== */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background-color: #ffffff !important;
  color: #0e1f3a !important;
  border: 1px solid #e6e8ec !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(14, 31, 58, 0.10),
              0 4px 12px rgba(14, 31, 58, 0.06) !important;
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}

/* (Voorheen: gekleurde gradient-balk bovenaan de cookie-notice.
   Bewust verwijderd — schoner zonder accentstreepje.) */
.klaro .cookie-notice:not(.cookie-modal-notice)::before { content: none; display: none; }

.klaro .cookie-notice .cn-body {
  padding: 20px 24px 18px;
}
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice .cn-title {
  font-size: 17px;
  margin: 0 0 8px 0;
  color: #0e1f3a !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.klaro .cookie-notice p,
.klaro .cookie-notice .cn-changes,
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body strong {
  color: #2c3a52 !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

/* "Lees meer" link in notice */
.klaro .cookie-notice .cn-learn-more,
.klaro .cn-learn-more {
  color: #2f3aa6;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.klaro .cookie-notice .cn-learn-more:hover {
  color: #232c8a;
}

/* Knoppen-rij onderaan de notice */
.klaro .cookie-notice .cn-ok,
.klaro .cookie-notice .cn-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ===== Knoppen (algemeen) ===== */
.klaro .cm-btn {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 10px 18px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.klaro .cm-btn:focus-visible {
  outline: 2px solid #2f3aa6;
  outline-offset: 2px;
}

/* Primary = Alles accepteren — site-indigo (winnen van Klaro defaults) */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-accept {
  background-color: #2f3aa6 !important;
  color: #ffffff !important;
  border-color: #2f3aa6 !important;
  box-shadow: 0 1px 2px rgba(14, 31, 58, 0.04);
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept-all:hover,
.klaro .cm-btn.cm-btn-accept:hover {
  background-color: #232c8a !important;
  border-color: #232c8a !important;
}

/* Decline = Alleen functioneel — wit met border
 * Klaro 0.7.x gebruikt class "cm-btn-danger cn-decline" voor de decline-knop,
 * niet cm-btn-decline. We targeten beide. */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-danger {
  background-color: #ffffff !important;
  color: #0e1f3a !important;
  border: 1px solid #d7dae0 !important;
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cn-decline:hover {
  border-color: #5b6677 !important;
  background-color: #fbfbfa !important;
}

/* Info / Learn-more = tekstlink */
.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-learn-more {
  background-color: transparent !important;
  color: #2f3aa6 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px 8px;
  border-color: transparent !important;
}
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cm-btn.cm-btn-learn-more:hover {
  color: #232c8a !important;
  background-color: transparent !important;
}

/* ===== Modal (Voorkeuren beheren) ===== */
.klaro .cookie-modal .cm-bg {
  background: rgba(14, 31, 58, 0.45) !important;
}
.klaro .cookie-modal .cm-modal {
  background-color: #ffffff !important;
  color: #0e1f3a !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(14, 31, 58, 0.28) !important;
  border: 1px solid #e6e8ec;
}

/* Modal-header */
.klaro .cookie-modal .cm-header {
  padding: 22px 24px 12px;
}
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2 {
  color: #0e1f3a;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
}
.klaro .cookie-modal .cm-header p,
.klaro .cookie-modal .cm-header .cm-changes {
  color: #2c3a52;
  font-size: 14px;
  line-height: 1.6;
}

/* Modal-body */
.klaro .cookie-modal .cm-body {
  padding: 8px 24px 4px;
}

/* Per service/purpose-rij */
.klaro .cookie-modal .cm-services,
.klaro .cookie-modal .cm-purposes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.klaro .cookie-modal .cm-service,
.klaro .cookie-modal .cm-purpose {
  border-bottom: 1px solid #e6e8ec;
  padding: 14px 0;
}
.klaro .cookie-modal .cm-service:last-child,
.klaro .cookie-modal .cm-purpose:last-child {
  border-bottom: 0;
}
.klaro .cookie-modal .cm-service .title,
.klaro .cookie-modal .cm-purpose-title,
.klaro .cookie-modal .title {
  color: #0e1f3a;
  font-weight: 600;
  font-size: 15px;
}
.klaro .cookie-modal .cm-service .description,
.klaro .cookie-modal .cm-purpose-description,
.klaro .cookie-modal .description {
  color: #2c3a52;
  font-size: 14px;
  line-height: 1.55;
  margin-top: 4px;
}

/* "(1 dienst)" en kleine meta */
.klaro .cookie-modal .cm-services .purposes,
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-purposes .cm-purpose .cm-services-count {
  color: #5b6677;
  font-size: 13px;
}

/* "Powered by Klaro" footer */
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-modal .cm-powered-by a {
  color: #8590a2;
  font-size: 12px;
}
.klaro .cookie-modal .cm-powered-by a:hover {
  color: #5b6677;
}

/* Modal-footer (knoppen onderin) */
.klaro .cookie-modal .cm-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 24px 20px;
  border-top: 1px solid #e6e8ec;
  background: #fbfbfa;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

/* ===== Toggle switches ===== */
.klaro .cookie-modal .cm-list-input + .cm-list-label .slider,
.klaro .cm-list-input + .cm-list-label .slider {
  background: #d7dae0;
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background: #16a36b;
}
.klaro .cookie-modal .cm-list-input.required + .cm-list-label .slider,
.klaro .cm-list-input.required + .cm-list-label .slider {
  background: #b9bdc4;
  cursor: not-allowed;
}

/* ===== Mobiel ===== */
@media (max-width: 600px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-radius: 12px;
    margin: 12px;
    max-width: calc(100% - 24px);
  }
  .klaro .cookie-notice .cn-body {
    padding: 18px 18px 16px;
  }
  .klaro .cookie-modal .cm-modal {
    border-radius: 14px;
    margin: 12px;
  }
}