/* 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. */

.tmf-chooser {
  --tc-green: #5EAD39;
  --tc-dark: #243F2F;
  --tc-button: #2f6b17;
  --tc-soft: #f4f7f1;
  --tc-mint: #e6f3dd;
  --tc-line: #e3e7df;
  --tc-grey: #5b6470;
  --tc-bottom: 20px;          /* afstand tot de onderkant */
  --tc-right: 20px;
  --tc-size: 64px;           /* doorsnede van de ronde knop */
  font-family: inherit;
}
.tmf-chooser *, .tmf-chooser *::before, .tmf-chooser *::after { box-sizing: border-box; }
.tmf-chooser [hidden] { display: none !important; }

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

.tmf-chooser__button {
  position: fixed;
  right: var(--tc-right);
  bottom: calc(var(--tc-bottom) + 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;
}
.tmf-chooser.is-ready .tmf-chooser__button { opacity: 1; pointer-events: auto; }

.tmf-chooser__round {
  position: relative;
  flex: 0 0 var(--tc-size);
  width: var(--tc-size);
  height: var(--tc-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--tc-mint);
  box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(36, 63, 47, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tmf-chooser__round 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. */
.tmf-chooser__round::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--tc-green);
  box-shadow: 0 0 0 2.5px #fff;
}

.tmf-chooser__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--tc-dark);
  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(--tc-line);
  transition: opacity .2s ease, transform .2s ease;
}
.tmf-chooser__wave { display: inline-block; font-size: 16px; transform-origin: 70% 80%; }

.tmf-chooser__button:hover .tmf-chooser__round,
.tmf-chooser__button:focus-visible .tmf-chooser__round {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 0 0 3px #fff, 0 10px 26px rgba(36, 63, 47, .34);
}
.tmf-chooser__button:hover .tmf-chooser__label { box-shadow: 0 6px 18px rgba(36, 63, 47, .2), 0 0 0 1px var(--tc-green); }
.tmf-chooser__button:focus-visible { outline: none; }
.tmf-chooser__button:focus-visible .tmf-chooser__round { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tc-dark); }

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

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

.tmf-chooser__dialog {
  position: fixed;
  right: var(--tc-right);
  bottom: calc(var(--tc-bottom) + var(--tc-size) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 100001;
  display: flex;
  flex-direction: column;
  width: 390px;
  max-height: min(660px, calc(100vh - var(--tc-bottom) - var(--tc-size) - 40px));
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(36, 63, 47, .26), 0 0 0 1px var(--tc-line);
  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);
}
.tmf-chooser.is-open .tmf-chooser__dialog { opacity: 1; transform: none; }

.tmf-chooser__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px 12px 14px;
  background: var(--tc-soft);
  border-bottom: 1px solid var(--tc-line);
}
.tmf-chooser__avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tc-mint);
  box-shadow: 0 0 0 2px #fff;
}
.tmf-chooser__headtext { min-width: 0; }
.tmf-chooser .tmf-chooser__hi {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-button);
}
.tmf-chooser .tmf-chooser__title {
  margin: 1px 0 0;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tc-dark);
}
.tmf-chooser__title:focus { outline: none; }

.tmf-chooser__close {
  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(--tc-grey);
  cursor: pointer;
}
.tmf-chooser__close:hover { background: #fff; color: var(--tc-dark); }
.tmf-chooser__close:focus-visible { outline: 2px solid var(--tc-dark); outline-offset: 1px; }

.tmf-chooser .tmf-chooser__intro {
  margin: 0;
  padding: 11px 16px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tc-grey);
}
/* De uitleg bovenaan is alleen nodig voor je begint; daarna is de ruimte voor de vragen. */
.tmf-chooser.is-started .tmf-chooser__intro { display: none; }

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

/* The chooser inside the pop-up: no second frame, and a notch more compact.

   The chooser styles itself from Code Snippet 10 through an id selector
   (#tmfb-chooser-12345{...}), and an id outranks any number of classes. So the
   handful of declarations that have to be undone here carry !important. Only
   those: everything else below wins on ordinary specificity. */
.tmf-chooser .tmfb-widget {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  max-width: none;
}
/* The dialog has its own heading and intro, so the chooser's own header would
   say the same thing twice. */
.tmf-chooser .tmfb-topbar { display: none !important; }
.tmf-chooser .tmfb-widget legend { font-size: 16px; }
/* Two columns for every answer set, including the ones the chooser lays out in
   three or four. At pop-up width four across is unreadable. */
.tmf-chooser .tmfb-widget .tmfb-options,
.tmf-chooser .tmfb-widget .tmfb-options-3,
.tmf-chooser .tmfb-widget .tmfb-options-4 { grid-template-columns: 1fr 1fr; }
/* !important on the height only: the chooser sets its own through an id
   selector, so without it the answers come out at 42px on a phone and miss the
   44px this site holds everywhere else. */
.tmf-chooser .tmfb-widget .tmfb-option { min-height: 44px !important; padding: 9px 12px; font-size: 14.5px; line-height: 1.25; }
.tmf-chooser .tmfb-widget .tmfb-result-top h3 { font-size: 20px; }
.tmf-chooser .tmfb-widget .tmfb-alt-wrap { grid-template-columns: 1fr; }
.tmf-chooser .tmfb-widget .tmfb-go { width: 100%; justify-content: center; }
/* The step wizard adds these; keep the progress bar and nav readable here. */
.tmf-chooser .tmfb-progress { margin-bottom: 10px; }
.tmf-chooser .tmfb-stepnav .tmfb-btn,
.tmf-chooser .tmfb-actions .tmfb-btn { min-height: 44px; }

.tmf-chooser__backdrop { 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) {
  .tmf-chooser--above-cta { --tc-bottom: 84px; }
}

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

@media (max-width: 640px) {
  .tmf-chooser { --tc-bottom: 14px; --tc-right: 12px; --tc-size: 58px; }

  /* 44px across the whole touch range, not only on the narrowest phones. The
     base is 34px, which is a mouse target. */
  .tmf-chooser__close { flex-basis: 44px; width: 44px; height: 44px; }
  .tmf-chooser--above-cta { --tc-bottom: 82px; }
  .tmf-chooser__label { padding: 8px 13px 8px 10px; font-size: 14px; }

  /* De pop-up wordt een paneel van onderen, met een waas erachter. */
  .tmf-chooser__dialog {
    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);
  }
  .tmf-chooser__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(24, 38, 30, .38);
    opacity: 0;
    transition: opacity .2s ease;
  }
  .tmf-chooser.is-open .tmf-chooser__backdrop { opacity: 1; }
  .tmf-chooser.is-open .tmf-chooser__button { opacity: 0; pointer-events: none; }
}

/* Heel smalle telefoons (320px): anders breken "Kees de keuzehulp" en de titel af. */
@media (max-width: 340px) {
  .tmf-chooser__head { gap: 9px; padding-left: 12px; padding-right: 10px; }
  .tmf-chooser__avatar { flex-basis: 38px; width: 38px; height: 38px; }
  /* 44px on a touch screen, not 30. The rest of this site holds that line and
     a close button is exactly the control you do not want to miss. */
  .tmf-chooser__close { flex-basis: 44px; width: 44px; height: 44px; }
  .tmf-chooser .tmf-chooser__hi { font-size: 10px; letter-spacing: .03em; }
  .tmf-chooser .tmf-chooser__title { font-size: 15.5px; }
}

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

/* Entree: alleen op de eerste pagina van een bezoek (zonder .is-quiet). */
.tmf-chooser.is-ready:not(.is-quiet) .tmf-chooser__round { animation: fbKokjeIn .6s cubic-bezier(.2, .9, .3, 1.3) .5s both; }
.tmf-chooser.is-ready:not(.is-quiet) .tmf-chooser__label { animation: fbKokjeLabel .45s ease 1s both; }
.tmf-chooser.is-ready:not(.is-quiet) .tmf-chooser__wave { animation: fbKokjeZwaai 1.1s ease-in-out 1.4s 1; }

/* Daarna: zachtjes zweven. */
.tmf-chooser.is-ready .tmf-chooser__button { animation: fbKokjeZweef 4.8s ease-in-out 2.4s infinite; }
.tmf-chooser.is-open .tmf-chooser__button { animation: none; }

/* Eén keer een duwtje als iemand na een tijdje nog niet geklikt heeft. */
.tmf-chooser.is-nudge .tmf-chooser__round { animation: fbKokjeDuw .7s ease; }
.tmf-chooser.is-nudge .tmf-chooser__wave { 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) {
  .tmf-chooser *, .tmf-chooser__button { animation: none !important; transition: none !important; }
}

/* Telefoon, pagina's met de groene actiebalk: alleen het rondje. Kokje en balk samen namen
   anders zo'n 140 px onderin in, en het label lag over de tekst. Het label blijft voor
   schermlezers bestaan, want het is de naam van de knop. */
@media (max-width: 640px) {
  .tmf-chooser--above-cta .tmf-chooser__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    box-shadow: none;
  }
}

/* De laad- en faalstand van het ophalen (assets/chooser-button.js). */
.tmf-chooser__loading,
.tmf-chooser__failed {
  margin: 0;
  padding: 18px 2px;
  color: var(--tc-grey);
  font-size: 14.5px;
  line-height: 1.5;
}
.tmf-chooser__failed a { color: var(--tc-button); }