/* CookieYes in de huisstijl van deonlinewoningmakelaar.nl.
 *
 * De classnamen en de te overschrijven waarden komen uit de opmaak die
 * CookieYes 3.5.5 (plugin cookie-law-info) op deze site daadwerkelijk
 * uitstuurt, en uit het "box"-template in
 * lite/admin/modules/banners/includes/templates/6.2.0/template.json.
 * Deze site draait dat box-template, linksonder.
 *
 * Over !important — het staat hier niet overal, en waar het staat is dat nodig:
 *
 * 1. CookieYes zet kleuren als inline style-attribuut op de elementen zelf
 *    (style="color:#212121;background-color:#1863DC;..."). Een inline stijl
 *    wint van elke stylesheet; alleen !important haalt die weg.
 * 2. De eigen stylesheet van CookieYes wordt als <style> in de pagina gezet en
 *    komt dus na de <link> van dit bestand. Bij een gelijke selector wint dan
 *    hun regel. Voor elke eigenschap die zij ook zetten is !important daarom
 *    nodig, ook zonder inline attribuut.
 *
 * In een browser nagemeten welke van deze eigenschappen CookieYes zelf ook
 * zet. Dat blijken er meer dan verwacht: .cky-btn{min-height:0}, een
 * padding van 0 24px op .cky-notice-btn-wrapper, en onder 440px een eigen
 * order die weigeren ónder "voorkeuren aanpassen" schuift. Alle drie staan
 * hieronder daarom met !important; zonder dat wonnen ze, en werd de knop
 * 43,9px hoog, 292px breed en stond weigeren op de verkeerde plek.
 *
 * Wat CookieYes niet zet — gap, flex-basis, letter-spacing, transition —
 * staat hier bewust zonder !important.
 */

.cky-consent-container,
.cky-modal,
.cky-btn-revisit-wrapper {
  --cky-ivory: var(--ivory, #f7f3ea);
  --cky-ivory-deep: var(--ivory-deep, #efe8da);
  --cky-ink: var(--forest, #173b36);
  --cky-ink-900: var(--forest-900, #0f2a26);
  --cky-moss: var(--moss, #3f5f46);
  --cky-moss-700: var(--moss-700, #35513c);
  --cky-amber: var(--amber, #e7a23b);
  --cky-amber-600: var(--amber-600, #d08e29);
  --cky-line: var(--line, rgba(23, 59, 54, 0.13));
  --cky-font: var(--font-sans, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif);

  /* Eén bron voor de maatvoering, zodat desktop en mobiel niet uit elkaar lopen. */
  --cky-pad: 30px;
  --cky-gap: 12px;
  --cky-btn-h: 46px;
}

/* ------------------------------------------------------------ De balk zelf */

.cky-consent-container .cky-consent-bar {
  background: var(--cky-ivory) !important;
  border: 1px solid var(--cky-line) !important;
  box-shadow: var(--shadow-md, 0 2px 6px rgba(15, 42, 38, 0.06), 0 18px 40px -18px rgba(15, 42, 38, 0.28)) !important;
  border-radius: var(--r-lg, 26px) !important;
  padding: var(--cky-pad) !important;
  font-family: var(--cky-font) !important;
}

/* De volle-breedtevarianten worden alleen aan de vrije kant afgerond; een
 * volledig afgeronde balk die tegen drie schermranden plakt oogt los. */
.cky-banner-bottom .cky-consent-bar {
  border-radius: var(--r-md, 18px) var(--r-md, 18px) 0 0 !important;
}

.cky-banner-top .cky-consent-bar {
  border-radius: 0 0 var(--r-md, 18px) var(--r-md, 18px) !important;
}

.cky-notice .cky-title {
  color: var(--cky-ink) !important;
  font-family: var(--cky-font) !important;
  font-size: 1.125rem !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.015em;
}

.cky-notice-des,
.cky-notice-des p {
  color: var(--cky-ink) !important;
  font-family: var(--cky-font) !important;
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
}

/* De toelichting mag rustiger staan dan de kop erboven. */
.cky-notice-des {
  opacity: 0.86;
}

.cky-notice-des p {
  margin: 0 !important;
}

/* Het box-template heeft geen plek voor de losse "Cookie Policy"-knop; de link
 * naar het cookiebeleid staat daarom als laatste alinea in de bannertekst.
 * Die alinea krijgt hier zijn eigen ruimte, los van de lopende tekst. */
.cky-notice-des p + p {
  margin-top: 14px !important;
}

.cky-notice-des a,
.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy {
  color: var(--cky-moss) !important;
  border-color: transparent !important;
  font-size: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
  white-space: normal !important;
}

.cky-notice-des a:hover,
.cky-notice-des a.cky-policy:hover {
  color: var(--cky-moss-700) !important;
}

/* --------------------------------------------------------------- Knoppen */

/* Onder elkaar, allemaal even breed en even hoog. Accepteren en weigeren staan
 * daardoor direct onder elkaar: beide meteen zichtbaar, geen van beide
 * weggestopt achter de ander. Dat voorkomt ook de gepropte driekoloms rij die
 * CookieYes zelf maakt — .cky-btn{flex:auto} perst in een balk van 440px drie
 * knoppen naast elkaar. */
.cky-notice-btn-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: var(--cky-gap);
  /* CookieYes zet hier 0 24px. De balk heeft zijn eigen padding al, dus dat
   * telt dubbel: op 390px werd de knop 292px in plaats van 340px. */
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 24px !important;
}

.cky-btn {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-height: var(--cky-btn-h) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.35rem !important;
  font-family: var(--cky-font) !important;
  font-size: 0.9375rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  border-radius: var(--r-pill, 999px) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  transition: background-color 0.18s var(--ease, ease), color 0.18s var(--ease, ease),
    border-color 0.18s var(--ease, ease);
}

/* Accepteren bovenaan, weigeren er direct onder, aanpassen als laatste. */
.cky-notice-btn-wrapper .cky-btn-accept {
  order: 1 !important;
}

.cky-notice-btn-wrapper .cky-btn-reject {
  order: 2 !important;
}

.cky-notice-btn-wrapper .cky-btn-customize {
  order: 3 !important;
}

.cky-btn-accept {
  background-color: var(--cky-amber) !important;
  border-color: var(--cky-amber) !important;
  color: var(--cky-ink-900) !important;
}

.cky-btn-accept:hover {
  background-color: var(--cky-amber-600) !important;
  border-color: var(--cky-amber-600) !important;
  color: var(--cky-ink-900) !important;
}

/* Weigeren is een volwaardige knop met dezelfde hoogte en breedte als
 * accepteren — een andere nadruk, niet een lagere drempel om te vinden. */
.cky-btn-reject {
  background-color: var(--surface, #ffffff) !important;
  border-color: var(--cky-moss) !important;
  color: var(--cky-moss) !important;
}

.cky-btn-reject:hover {
  background-color: var(--cky-moss) !important;
  border-color: var(--cky-moss) !important;
  color: var(--cky-ivory) !important;
}

/* Voorkeuren aanpassen is de derde weg: als link herkenbaar, maar met dezelfde
 * breedte en een raakvlak van 44px, zodat hij op een telefoon net zo goed te
 * raken is als de twee knoppen erboven. */
.cky-btn-customize {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--cky-moss) !important;
  min-height: 44px !important;
  font-weight: 550 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.22em !important;
}

.cky-btn-customize:hover {
  background-color: var(--moss-050, #f0f4ef) !important;
  border-color: transparent !important;
  color: var(--cky-moss-700) !important;
}

.cky-btn-preferences {
  background-color: var(--cky-amber) !important;
  border-color: var(--cky-amber) !important;
  color: var(--cky-ink-900) !important;
}

.cky-btn-preferences:hover {
  background-color: var(--cky-amber-600) !important;
  border-color: var(--cky-amber-600) !important;
}

/* In het voorkeurenvenster staan opslaan en accepteren onder elkaar. Beide
 * amber maakt ze op het oog identiek, terwijl ze iets heel anders doen.
 * "Voorkeuren opslaan" houdt daarom het accent — dat is de actie waarvoor dit
 * venster bestaat — en "Alles accepteren" krijgt hier dezelfde outline als
 * "Alles weigeren". Zo wegen de twee alles-of-niets-knoppen even zwaar. De
 * accepteerknop in de banner zelf blijft amber. */
.cky-prefrence-btn-wrapper .cky-btn-accept {
  background-color: var(--surface, #ffffff) !important;
  border-color: var(--cky-moss) !important;
  color: var(--cky-moss) !important;
}

.cky-prefrence-btn-wrapper .cky-btn-accept:hover {
  background-color: var(--cky-moss) !important;
  border-color: var(--cky-moss) !important;
  color: var(--cky-ivory) !important;
}

/* Eén zichtbare focusstijl voor alles wat bedienbaar is; CookieYes zet hier
 * standaard een blauwe outline neer die buiten de huisstijl valt. */
.cky-btn:focus-visible,
.cky-accordion-header .cky-accordion-btn:focus-visible,
.cky-preference-content-wrapper .cky-show-desc-btn:focus-visible,
.cky-preference-header .cky-btn-close:focus-visible,
.cky-switch input[type='checkbox']:focus-visible,
.cky-notice-des a:focus-visible,
.cky-notice-des a.cky-policy:focus-visible,
.cky-notice-des button.cky-policy:focus-visible,
.cky-footer-wrapper a:focus-visible,
.cky-btn-revisit-wrapper .cky-btn-revisit:focus-visible {
  outline: 2px solid var(--cky-moss) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------- Het voorkeurenvenster */

.cky-overlay {
  background: var(--cky-ink-900) !important;
  opacity: 0.45 !important;
}

.cky-preference-center {
  background: var(--cky-ivory) !important;
  border-color: var(--cky-line) !important;
  color: var(--cky-ink) !important;
  font-family: var(--cky-font) !important;
}

.cky-preference-header .cky-preference-title {
  color: var(--cky-ink) !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em;
}

.cky-preference-content-wrapper,
.cky-preference-content-wrapper p,
.cky-accordion-header-des,
.cky-accordion-header-des p {
  color: var(--cky-ink) !important;
  line-height: 1.6 !important;
}

.cky-accordion-header .cky-accordion-btn {
  color: var(--cky-ink) !important;
  font-family: var(--cky-font) !important;
  font-weight: 620 !important;
}

button.cky-show-desc-btn:not(:hover):not(:active),
.cky-preference-content-wrapper .cky-show-desc-btn {
  color: var(--cky-moss) !important;
}

.cky-accordion {
  border-color: var(--cky-line) !important;
}

/* "Altijd actief" is een geruststelling, geen waarschuwing: mosgroen in plaats
 * van het felle groen dat CookieYes standaard gebruikt. */
.cky-accordion-header .cky-always-active {
  color: var(--cky-moss) !important;
}

.cky-switch input[type='checkbox'] {
  background: var(--ink-35, rgba(25, 34, 29, 0.34)) !important;
}

.cky-switch input[type='checkbox']:checked {
  background: var(--cky-moss) !important;
}

.cky-audit-table {
  background-color: var(--cky-ivory-deep) !important;
  border-color: var(--cky-line) !important;
  color: var(--cky-ink) !important;
  border-radius: var(--r-sm, 12px) !important;
}

.cky-footer-wrapper,
.cky-prefrence-btn-wrapper {
  border-color: var(--cky-line) !important;
}

/* In het voorkeurenvenster staan de knoppen al onder elkaar; alleen de
 * onderlinge ruimte en de hoogte moeten gelijk zijn aan die in de banner. */
.cky-prefrence-btn-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--cky-gap);
}

.cky-prefrence-btn-wrapper .cky-btn {
  margin: 0 !important;
}

.cky-preference-header .cky-btn-close {
  border-radius: var(--r-xs, 8px) !important;
}

/* ------------------------------------------------ Terug naar je voorkeuren */

/* De zwevende knop van CookieYes. Staat op deze site uit (cky-revisit-hide);
 * wordt hij later aangezet, dan valt hij meteen binnen de huisstijl. */
.cky-btn-revisit-wrapper {
  background: var(--cky-ink) !important;
}

.cky-revisit-bottom-left:hover::before,
.cky-revisit-bottom-right:hover::before {
  background: var(--cky-ink) !important;
  color: var(--cky-ivory) !important;
  border-radius: var(--r-xs, 8px) !important;
}

.cky-revisit-bottom-left:hover::after {
  border-right-color: var(--cky-ink) !important;
}

.cky-revisit-bottom-right:hover::after {
  border-left-color: var(--cky-ink) !important;
}

/* -------------------------------------------------------------- Mobiel */

/* Onder 576px schuift het box-template naar de onderrand van het scherm. De
 * afronding aan de onderkant valt dan weg, de bovenhoeken blijven. */
@media (max-width: 576px) {
  .cky-consent-container {
    --cky-pad: 24px;
  }

  .cky-box-bottom-left .cky-consent-bar,
  .cky-box-bottom-right .cky-consent-bar {
    border-radius: var(--r-md, 18px) var(--r-md, 18px) 0 0 !important;
  }
}

/* Onder 440px maakt CookieYes de balk schermbreed en zet het de padding op
 * "20px 0" — de zijkanten worden dus nul en de tekst plakt tegen de
 * schermranden. Dat is de belangrijkste reden dat de banner op een telefoon
 * krap oogt. Hier komt de horizontale ruimte terug. */
@media (max-width: 440px) {
  .cky-consent-container .cky-consent-bar {
    padding: var(--cky-pad) !important;
  }
}