/* Het kokje (inc/kokje.php): vaste knop rechtsonder die de keuzehulp als pop-up opent.
   Kleuren en vormen volgen de rest van de site: groen #5EAD39, donker #243F2F,
   pillen voor knoppen, 16px afgeronde kaarten. */

.fb-kokje {
  --kk-groen: #5EAD39;
  --kk-donker: #243F2F;
  --kk-knop: #2f6b17;
  --kk-zacht: #f4f7f1;
  --kk-mint: #e6f3dd;
  --kk-lijn: #e3e7df;
  --kk-grijs: #5b6470;
  --kk-onder: 20px;          /* afstand tot de onderkant */
  --kk-rechts: 20px;
  --kk-maat: 64px;           /* doorsnede van de ronde knop */
  font-family: inherit;
}
.fb-kokje *, .fb-kokje *::before, .fb-kokje *::after { box-sizing: border-box; }
.fb-kokje [hidden] { display: none !important; }

/* ------------------------------------------------------------- de knop */

.fb-kokje__knop {
  position: fixed;
  right: var(--kk-rechts);
  bottom: calc(var(--kk-onder) + env(safe-area-inset-bottom, 0px));
  z-index: 999;              /* boven de actiebalk (998), onder de pop-up */
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Tot het script klaar is onzichtbaar, anders springt hij binnen zonder entree. */
  opacity: 0;
  pointer-events: none;
}
.fb-kokje.is-klaar .fb-kokje__knop { opacity: 1; pointer-events: auto; }

.fb-kokje__rond {
  position: relative;
  flex: 0 0 var(--kk-maat);
  width: var(--kk-maat);
  height: var(--kk-maat);
  border-radius: 50%;
  overflow: hidden;
  background: var(--kk-mint);
  box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(36, 63, 47, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fb-kokje__rond img {
  display: block;
  width: 118%;
  height: 118%;
  max-width: none;
  margin: -2% 0 0 -9%;       /* gezicht in het midden, schouders onder de rand */
  object-fit: cover;
}
/* Groen stipje: er zit iemand klaar. */
.fb-kokje__rond::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--kk-groen);
  box-shadow: 0 0 0 2.5px #fff;
}

.fb-kokje__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--kk-donker);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(36, 63, 47, .16), 0 0 0 1px var(--kk-lijn);
  transition: opacity .2s ease, transform .2s ease;
}
.fb-kokje__zwaai { display: inline-block; font-size: 16px; transform-origin: 70% 80%; }

.fb-kokje__knop:hover .fb-kokje__rond,
.fb-kokje__knop:focus-visible .fb-kokje__rond {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 0 0 3px #fff, 0 10px 26px rgba(36, 63, 47, .34);
}
.fb-kokje__knop:hover .fb-kokje__label { box-shadow: 0 6px 18px rgba(36, 63, 47, .2), 0 0 0 1px var(--kk-groen); }
.fb-kokje__knop:focus-visible { outline: none; }
.fb-kokje__knop:focus-visible .fb-kokje__rond { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--kk-donker); }

/* Als de pop-up open is, verdwijnt het labeltje; de ronde knop blijft om te sluiten. */
.fb-kokje.is-open .fb-kokje__label { opacity: 0; transform: translateX(8px); pointer-events: none; }

/* ------------------------------------------------------------ de pop-up */

.fb-kokje__dialoog {
  position: fixed;
  right: var(--kk-rechts);
  bottom: calc(var(--kk-onder) + var(--kk-maat) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 100001;
  display: flex;
  flex-direction: column;
  width: 390px;
  max-height: min(660px, calc(100vh - var(--kk-onder) - var(--kk-maat) - 40px));
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(36, 63, 47, .26), 0 0 0 1px var(--kk-lijn);
  overflow: hidden;
  transform-origin: calc(100% - 32px) 100%;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.15);
}
.fb-kokje.is-open .fb-kokje__dialoog { opacity: 1; transform: none; }

.fb-kokje__kop {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px 12px 14px;
  background: var(--kk-zacht);
  border-bottom: 1px solid var(--kk-lijn);
}
.fb-kokje__avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kk-mint);
  box-shadow: 0 0 0 2px #fff;
}
.fb-kokje__koptekst { min-width: 0; }
.fb-kokje .fb-kokje__hoi {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kk-knop);
}
.fb-kokje .fb-kokje__titel {
  margin: 1px 0 0;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--kk-donker);
}
.fb-kokje__titel:focus { outline: none; }

.fb-kokje__sluit {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  align-self: flex-start;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kk-grijs);
  cursor: pointer;
}
.fb-kokje__sluit:hover { background: #fff; color: var(--kk-donker); }
.fb-kokje__sluit:focus-visible { outline: 2px solid var(--kk-donker); outline-offset: 1px; }

.fb-kokje .fb-kokje__intro {
  margin: 0;
  padding: 11px 16px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--kk-grijs);
}
/* De uitleg bovenaan is alleen nodig voor je begint; daarna is de ruimte voor de vragen. */
.fb-kokje.is-gestart .fb-kokje__intro { display: none; }

.fb-kokje__inhoud {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px 16px;
}

/* De keuzehulp zelf: in de pop-up geen tweede kader en alles een tandje compacter. */
.fb-kokje .fbx-widget { margin: 0; padding: 0; border: 0; border-radius: 0; max-width: none; background: transparent; }
.fb-kokje .fbx-widget legend { font-size: 16px; }
.fb-kokje .fbx-widget .fbx-options { grid-template-columns: 1fr 1fr; }
/* Ook de vraag met zes antwoorden in twee kolommen, anders past hij op een
   laptopscherm niet zonder scrollen. De tekst mag dan over twee regels. */
.fb-kokje .fbx-widget .fbx-options--lang { grid-template-columns: 1fr 1fr; }
.fb-kokje .fbx-widget .fbx-options--lang .fbx-option { font-size: 13.5px; line-height: 1.25; }
.fb-kokje .fbx-widget .fbx-option { min-height: 44px; padding: 9px 12px; font-size: 14.5px; }
.fb-kokje .fbx-widget .fbx-result-top h3 { font-size: 20px; }
.fb-kokje .fbx-widget .fbx-alt-wrap { grid-template-columns: 1fr; }
.fb-kokje .fbx-widget .fbx-go { width: 100%; justify-content: center; }

.fb-kokje__achtergrond { display: none; }

/* ------------------------------------------- naast de groene actiebalk */

/* De actiebalk is maximaal 560px breed en gecentreerd; het kokje met label is
   ongeveer 290px breed. Naast elkaar passen ze pas vanaf ~1172px. Onder 1220px
   (wat marge) gaat het kokje daarom erboven. */
@media (max-width: 1220px) {
  .fb-kokje--boven-cta { --kk-onder: 84px; }
}

/* --------------------------------------------------------------- mobiel */

@media (max-width: 640px) {
  .fb-kokje { --kk-onder: 14px; --kk-rechts: 12px; --kk-maat: 58px; }
  .fb-kokje--boven-cta { --kk-onder: 82px; }
  .fb-kokje__label { padding: 8px 13px 8px 10px; font-size: 14px; }

  /* De pop-up wordt een paneel van onderen, met een waas erachter. */
  .fb-kokje__dialoog {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform-origin: 50% 100%;
    transform: translateY(24px);
  }
  .fb-kokje__achtergrond {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(24, 38, 30, .38);
    opacity: 0;
    transition: opacity .2s ease;
  }
  .fb-kokje.is-open .fb-kokje__achtergrond { opacity: 1; }
  .fb-kokje.is-open .fb-kokje__knop { opacity: 0; pointer-events: none; }
}

/* Heel smalle telefoons (320px): anders breken "Kees de keuzehulp" en de titel af. */
@media (max-width: 340px) {
  .fb-kokje__kop { gap: 9px; padding-left: 12px; padding-right: 10px; }
  .fb-kokje__avatar { flex-basis: 38px; width: 38px; height: 38px; }
  .fb-kokje__sluit { flex-basis: 30px; width: 30px; height: 30px; }
  .fb-kokje .fb-kokje__hoi { font-size: 10px; letter-spacing: .03em; }
  .fb-kokje .fb-kokje__titel { font-size: 15.5px; }
}

/* ------------------------------------------------------------ animatie */

/* Entree: alleen op de eerste pagina van een bezoek (zonder .is-rustig). */
.fb-kokje.is-klaar:not(.is-rustig) .fb-kokje__rond { animation: fbKokjeIn .6s cubic-bezier(.2, .9, .3, 1.3) .5s both; }
.fb-kokje.is-klaar:not(.is-rustig) .fb-kokje__label { animation: fbKokjeLabel .45s ease 1s both; }
.fb-kokje.is-klaar:not(.is-rustig) .fb-kokje__zwaai { animation: fbKokjeZwaai 1.1s ease-in-out 1.4s 1; }

/* Daarna: zachtjes zweven. */
.fb-kokje.is-klaar .fb-kokje__knop { animation: fbKokjeZweef 4.8s ease-in-out 2.4s infinite; }
.fb-kokje.is-open .fb-kokje__knop { animation: none; }

/* Eén keer een duwtje als iemand na een tijdje nog niet geklikt heeft. */
.fb-kokje.is-duw .fb-kokje__rond { animation: fbKokjeDuw .7s ease; }
.fb-kokje.is-duw .fb-kokje__zwaai { animation: fbKokjeZwaai 1.1s ease-in-out .15s 1; }

@keyframes fbKokjeIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.55); }
  100% { opacity: 1; transform: none; }
}
@keyframes fbKokjeLabel {
  0%   { opacity: 0; transform: translateX(14px) scale(.9); }
  100% { opacity: 1; transform: none; }
}
@keyframes fbKokjeZwaai {
  0%, 100% { transform: rotate(0); }
  15%, 45% { transform: rotate(18deg); }
  30%, 60% { transform: rotate(-8deg); }
}
@keyframes fbKokjeZweef {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes fbKokjeDuw {
  0%, 100% { transform: none; }
  30% { transform: translateY(-8px) rotate(-5deg); }
  55% { transform: translateY(0) rotate(3deg); }
  75% { transform: translateY(-3px); }
}

/* Wie minder beweging wil, krijgt geen entree, geen zweven en geen duwtjes. */
@media (prefers-reduced-motion: reduce) {
  .fb-kokje *, .fb-kokje__knop { animation: none !important; transition: none !important; }
}