/**
 * Mymmo Forms — de knop met pop-up ([mymmo_form_button]).
 *
 * DIT BESTAND STAAT BEWUST NIET IN public/. Daar staat mymmo-forms.css, de
 * gedeelde bron van de FORMULIER-stijl: de Operations Manager rendert het
 * voorbeeld in de formulierbouwer met precies dat bestand, zodat het niet kan
 * liegen over hoe een bezoeker het formulier ziet. In die bouwer bestaat geen
 * pop-up. Dit hier hoort dus alleen bij de plugin, en het wordt ook alleen
 * ingeladen op een pagina waar de knop echt staat.
 *
 * Kleuren komen uit dezelfde variabelen als het formulier (--mf-*), maar met
 * een fallback in de var() zelf in plaats van een tweede blok met standaarden.
 * Zo is er één plek waar een kleur VANDAAN komt: het thema van het formulier in
 * de OM, daarna wat er op de shortcode staat (accent="#..."), en anders de
 * waarde die hier in de fallback staat. De variabelen staan op
 * .mymmo-modal-launch en erven door tot in het venster.
 *
 * Geen !important, nergens — net als in mymmo-forms.css. Dat is precies wat een
 * site belet haar eigen thema te laten winnen.
 *
 * INDELING
 * --------
 * Het venster heeft twee kolommen: links een vaste zijkolom (waar ben je, wat
 * staat je te wachten, een afbeelding), rechts de inhoud. De keuze tussen
 * "formulier" en "agenda" staat IN die zijkolom als twee kaarten onder elkaar —
 * de bezoeker ziet zo in één blik wat er te kiezen valt, in plaats van een
 * tabbalk die eruitziet als navigatie van de website zelf.
 *
 * Onder 900px klapt die zijkolom samen tot een kopbalk met dezelfde twee keuzes
 * naast elkaar; onder 640px wordt het venster een vol scherm. Afbeelding en
 * opsomming vallen daar weg: op een telefoon is elke pixel voor het formulier.
 */

/* ── De knop ─────────────────────────────────────────────────────────────── */

.mymmo-modal-launch {
  display: inline-block;
  max-width: 100%;
}

/* button="no": geen eigen knop, iets anders op de pagina opent het venster. De
   wikkel blijft staan (ze draagt de CSS-variabelen) maar mag geen plek innemen
   in de tekst. display:contents laat de erfelijkheid van die variabelen intact
   en haalt het kader zelf uit de indeling. */
.mymmo-modal-launch--stil {
  display: contents;
}

.mymmo-modal-button {
  display: inline-flex;
  /* Zonder box-sizing telt de padding BOVENOP width:100%, en dan steekt de
     knop op een telefoon 54px buiten zijn eigen kader. Een thema kan dit niet
     voor ons rechtzetten: veel thema's zetten box-sizing op * maar niet op
     een element dat wij zelf van een breedte voorzien. */
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  /* 46px: groot genoeg om op een telefoon met een duim te raken. */
  min-height: 46px;
  padding: 12px 26px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--mf-radius, 10px);
  cursor: pointer;
  transition: filter 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.mymmo-modal-button--primary {
  color: var(--mf-accent-text, #ffffff);
  background: var(--mf-accent, #2563eb);
}

.mymmo-modal-button--outline {
  color: var(--mf-accent, #2563eb);
  background: transparent;
  border-color: var(--mf-accent, #2563eb);
}

.mymmo-modal-button:hover {
  filter: brightness(0.93);
  /* De kleur van een bezochte link mag deze knop niet grijs maken: hij is
     bezocht zodra iemand hem een keer opende. */
  color: var(--mf-accent-text, #ffffff);
}

.mymmo-modal-button--outline:hover {
  color: var(--mf-accent-text, #ffffff);
  background: var(--mf-accent, #2563eb);
}

.mymmo-modal-button:focus-visible {
  outline: 2px solid var(--mf-text, #1f2430);
  outline-offset: 2px;
}

/* ── Open en dicht ───────────────────────────────────────────────────────── */

.mymmo-modal {
  display: none;
  position: fixed;
  inset: 0;
  /* Boven de admin-balk van WordPress (99999), want die staat er voor een
     ingelogde beheerder overheen. */
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Het venster erft de tekstkleur van de pagina niet: het staat los. */
  color: var(--mf-text, #1f2430);
  text-align: left;
}

/* ZONDER JavaScript: de knop is een link naar #id en :target opent het venster.
   Het script zet mymmo-modal-js op <html> en neemt het daarna over — anders
   zouden beide mechanismes tegen elkaar in werken en zou sluiten niet lukken
   zolang de hash in de URL blijft staan. */
html:not(.mymmo-modal-js) .mymmo-modal:target {
  display: flex;
}

.mymmo-modal.is-open {
  display: flex;
}

/* Achter een open venster mag de pagina niet meescrollen: anders scrollt de
   pagina eronder weg zodra het venster zelf aan zijn einde komt. */
html.mymmo-modal-actief,
html.mymmo-modal-actief body {
  overflow: hidden;
}

.mymmo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 28, 0.55);
  /* Een link zonder tekst: geen onderlijning, geen kleur van het thema. */
  text-decoration: none;
}

/* ── Het venster ─────────────────────────────────────────────────────────── */

/*
 * NIETS IN HET VENSTER IS SELECTEERBAAR, behalve wat je invult.
 * Het venster is een bediening, geen tekst om te kopieren. Zonder dit kleurde
 * een sleepbeweging (het jaarwiel, een schuifbalk) of een dubbelklik de hele
 * inhoud blauw. Invoervelden en bewerkbare tekst (de bouwer) blijven gewoon
 * selecteerbaar -- anders kan je je eigen typfout niet aanduiden.
 * Twee klassen: een thema dat user-select zet, wint anders.
 */
.mymmo-modal .mymmo-modal-panel {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.mymmo-modal .mymmo-modal-panel input,
.mymmo-modal .mymmo-modal-panel textarea,
.mymmo-modal .mymmo-modal-panel select,
.mymmo-modal .mymmo-modal-panel [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.mymmo-modal-panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  /* Standaard onder elkaar: zijkolom als kopbalk, inhoud eronder. De echte
     twee-kolomsindeling zit in de media query onderaan. */
  flex-direction: column;
  width: 100%;
  max-width: 660px;
  max-height: 88vh;
  /* dvh houdt rekening met de balk die op een telefoon in- en uitschuift. */
  max-height: 88dvh;
  /* Het VENSTER draagt de tint; de inhoud is een wit kaartje dat erop ligt
     (.mymmo-modal-main). Zo staat de zijkolom op dezelfde achtergrond als het
     kaartje en is er geen scheidingslijn nodig tussen de twee -- precies de
     indeling van de aanvraagwizard. */
  /* --mf-panel-bg is instelbaar per plaatsing (background="#..." op de
     shortcode, of in een bewaarde opstelling). Staat hij niet, dan is het een
     lichte tint van de accentkleur -- die volgt dan vanzelf het thema van de
     site. De eerste regel is de terugval voor browsers zonder color-mix. */
  background: #f3f6fd;
  background: var(--mf-panel-bg, color-mix(in srgb, var(--mf-accent, #2563eb) 7%, #ffffff));
  border-radius: calc(var(--mf-radius, 10px) + 6px);
  box-shadow: 0 24px 64px rgba(16, 20, 28, 0.3);
  overflow: hidden;
}

/* ── De kop, over de volle breedte ───────────────────────────────────────── */

.mymmo-modal-kop {
  flex: 0 0 auto;
  /* Rechts ruimte voor de sluitknop, die er los overheen hangt. */
  padding: 20px 60px 12px 22px;
}

/* Zijkolom en inhoud naast elkaar; de kop staat erboven. Zonder deze wikkel kan
   de kop niet over beide kolommen lopen. */
.mymmo-modal-lijf {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Met een agenda erbij: breder. Onder ongeveer 640px schakelt Calendly zelf
   naar zijn smalle weergave en staat de maand ONDER de uren in plaats van
   ernaast — dan krijg je een kalender die niet in het vlak past en waar een
   bezoeker doorheen moet scrollen om een uur te zien. De inhoudskolom moet
   daarvoor dus ruim boven die grens blijven. */
.mymmo-modal-panel--breed {
  max-width: 1060px;
  /*
   * Met tabbladen krijgt het venster een VASTE hoogte, en dat is geen smaak.
   *
   * De twee panelen liggen dan over elkaar (position:absolute, zie verderop),
   * en absolute kinderen geven hun ouder geen hoogte. Zonder deze regel is de
   * inhoudskolom dus nul hoog en zie je onder de kopbalk niets staan.
   *
   * Het formulier alleen (geen agenda, geen tabbladen) heeft dit niet nodig en
   * groeit gewoon mee met zijn eigen inhoud -- een venster van 780px voor vier
   * velden is leeg en koud.
   *
   * Onder 640px wint height:100dvh verderop in dit bestand: daar is het venster
   * een vol scherm.
   */
  height: min(780px, 88dvh);
}

/*
 * panel="breed" op de shortcode: een RUIMER venster.
 *
 * Voor een stap die in de gewone breedte niet past. "Wat speelt er in jullie
 * gebouw" heeft dertien keien; in 660px worden dat drie rijen en loopt het
 * paneel over zijn hoogte heen -- en dan verschijnt de schuifbalk waar deze
 * plugin het nergens op laat aankomen. Met deze maat passen ze in twee rijen.
 *
 * Los van --breed (de agenda): die legt ook een VASTE hoogte op, omdat de twee
 * panelen daar over elkaar liggen en absolute kinderen hun ouder geen hoogte
 * geven. Dat hoort hier niet bij -- een venster met een stap groeit gewoon met
 * zijn inhoud mee, en een opgelegde hoogte zou van een korte stap een half leeg
 * vlak maken.
 *
 * Staat er ook een agenda, dan geldt de maat van --breed: die komt hieronder en
 * wint dus. Dat is de juiste kant op -- de kalender heeft die breedte echt
 * nodig.
 */
.mymmo-modal-panel--ruim {
  max-width: 940px;
}

/* ── De zijkolom ─────────────────────────────────────────────────────────── */

/* De zijkolom heeft GEEN eigen achtergrond en geen scheidingslijn: ze staat op
   de tint van het venster, net als het witte kaartje ernaast. Dat is wat "een
   kader in plaats van een streep" betekent. */
.mymmo-modal-aside {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 20px 14px;
  min-width: 0;
}

.mymmo-modal-title {
  margin: 0;
  /* De kop van het venster, niet die van de pagina: een blokthema zet vaak een
     eigen marge en een eigen lettergrootte op elke h2. */
  padding: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mf-text, #1f2430);
}

.mymmo-modal-lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--mf-muted, #6b7280);
}

/* ── De keuze: formulier of agenda ───────────────────────────────────────── */

/* De balk staat hidden in de HTML en het script haalt dat weg. Zonder
   JavaScript doen die knoppen niets, en dan staan beide delen gewoon onder
   elkaar met hun eigen kopje (.mymmo-modal-paneel-titel). */
.mymmo-modal-tabs {
  display: flex;
  gap: 8px;
}

.mymmo-modal-tabs[hidden] {
  display: none;
}

.mymmo-modal-tab {
  box-sizing: border-box;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  color: var(--mf-muted, #6b7280);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--mf-border, #d7dbe2);
  border-radius: var(--mf-radius, 10px);
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.mymmo-modal-tab:hover {
  color: var(--mf-text, #1f2430);
  background: #ffffff;
}

.mymmo-modal-tab.is-active {
  color: var(--mf-text, #1f2430);
  background: #ffffff;
  border-color: var(--mf-accent, #2563eb);
  box-shadow: 0 1px 3px rgba(16, 20, 28, 0.1);
}

.mymmo-modal-tab:focus-visible {
  outline: 2px solid var(--mf-accent, #2563eb);
  outline-offset: 2px;
}

.mymmo-modal-tab-icoon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--mf-icon, var(--mf-muted, #6b7280));
  background: rgba(16, 20, 28, 0.06);
  border-radius: 999px;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.mymmo-modal-tab.is-active .mymmo-modal-tab-icoon {
  color: var(--mf-accent-text, #ffffff);
  background: var(--mf-accent, #2563eb);
}

.mymmo-modal-tab-tekst {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mymmo-modal-tab-sub {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--mf-muted, #6b7280);
}

/* ── Geruststelling en beeld ─────────────────────────────────────────────── */

/* Allebei alleen in de echte zijkolom: onder 900px is er geen plek voor, en
   dan zijn ze belangrijker in de weg dan op het scherm. */
.mymmo-modal-punten,
.mymmo-modal-figuur {
  display: none;
}

/* ── Inhoud ──────────────────────────────────────────────────────────────── */

/* Het kaartje met de inhoud. Het ligt op de tint van het venster, met een eigen
   rand en schaduw -- geen vlak dat tegen de zijkolom aan plakt met een lijn
   ertussen. */
.mymmo-modal-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Zonder deze twee kan een kind (een lange keuzelijst, de kalender) de kolom
     breder of hoger maken dan het venster; flexboxen krimpen standaard niet
     onder hun inhoud. */
  min-width: 0;
  min-height: 0;
  margin: 0 12px 12px;
  background: var(--mf-field-bg, #ffffff);
  border: 1px solid rgba(16, 20, 28, 0.06);
  border-radius: calc(var(--mf-radius, 10px) + 4px);
  box-shadow: 0 1px 2px rgba(16, 20, 28, 0.05), 0 10px 26px rgba(16, 20, 28, 0.05);
  overflow: hidden;
}

.mymmo-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  /*
   * NOOIT ZIJWAARTS. Het venster past zich aan de viewport aan, punt. Steekt er
   * iets uit -- een stap met een vaste maat, een lange ongebroken tekst, een
   * absoluut geplaatst element -- dan wordt dat afgekapt en krijg je GEEN
   * horizontale schuifbeweging over het hele venster. Zonder dit kan je op een
   * telefoon opzij vegen en staat alles scheef, terwijl je nergens kan zien
   * waar het aan ligt.
   *
   * Een stap die zelf zijwaarts moet kunnen (het jaarwiel) heeft daarvoor haar
   * eigen scrollvlak binnenin; dat blijft gewoon werken.
   */
  overflow-x: hidden;
  /* Vlot scrollen op een telefoon, zonder dat de pagina eronder meegaat. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
}

/*
 * DE ENIGE OPVULLING IN HET VENSTER. Vast, en met opzet niet instelbaar.
 *
 * Er waren er twee: deze, en die van de wikkel eronder (--mf-pad-x/y, uit
 * padding_x/padding_y op de shortcode of uit het thema van het formulier). Voor
 * het FORMULIER werd die tweede hier weggehaald, voor een STAPPENREEKS niet --
 * dus stond dezelfde inhoud op het ene tabblad 28px van de rand en op het
 * andere 44px. Niet te zien zolang je één tabblad tegelijk bekijkt, en precies
 * daarom bleef het staan.
 *
 * Eén waarde per schermbreedte, hier en nergens anders. Wie meer lucht wil rond
 * zijn velden, heeft --mf-gap (de ruimte TUSSEN de velden); de ruimte tot de
 * rand van het venster is geen keuze per plaatsing maar een eigenschap van het
 * venster.
 */
.mymmo-modal-paneel {
  padding: 32px;
  /* Een KOLOM, zodat wat erin staat de volle hoogte kan vullen.
     Met tabbladen heeft dit paneel een opgelegde hoogte (zie --breed hierboven)
     en stond de knop halverwege een half leeg vlak; nu duwt de wikkel eronder
     zijn knoppenrij tegen de onderrand -- BINNEN de opvulling hierboven, dus de
     marge blijft staan. Zonder tabbladen groeit het venster met zijn inhoud mee
     en is dit een flexkolom om niets: er is dan geen vrije ruimte te verdelen. */
  display: flex;
  flex-direction: column;
}

/* De wikkel vult het paneel. flex-shrink is 0: past de inhoud niet, dan hoort
   het paneel te SCROLLEN (het heeft overflow-y:auto) en niet de inhoud samen te
   persen tot ze niet meer leesbaar is. */
.mymmo-modal-paneel > .mymmo-stappen,
.mymmo-modal-paneel > .mymmo-form-wrap,
.mymmo-modal-paneel > .mymmo-form-wrap > .mymmo-form {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* De verzendknop tegen de onderrand, ook zonder stappenreeks. `auto` vervangt
   de margin-top van 22px uit mymmo-forms.css; de padding houdt die afstand tot
   het laatste veld als er niets te verdelen valt. */
.mymmo-modal-paneel .mymmo-form-actions {
  margin-top: auto;
  padding-top: 22px;
}

.mymmo-modal-paneel:focus {
  outline: none;
}

/* Twee delen onder elkaar (zonder JavaScript): een streep ertussen. */
.mymmo-modal-paneel + .mymmo-modal-paneel {
  border-top: 1px solid var(--mf-border, #d7dbe2);
}

/* Met JavaScript zijn het tabbladen; het opschrift staat dan al op de knop. */
.mymmo-modal-paneel-titel {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
}

html.mymmo-modal-js .mymmo-modal-paneel-titel {
  display: none;
}

/*
 * DE PANELEN LIGGEN OVER ELKAAR, ze worden niet weggehaald.
 *
 * Dat is er om de agenda: de kalender van Calendly meet bij het opbouwen de
 * breedte van haar vlak. Stond het tabblad op display:none (of had het het
 * hidden-attribuut), dan is die breedte nul en bouwt Calendly een kalender voor
 * een vlak van niets — je ziet dan een afgeknepen, half afgesneden kalender
 * zodra je het tabblad opent, en pas een resize van het venster zet dat recht.
 *
 * visibility:hidden houdt de afmetingen WEL. De agenda kan dus al opgebouwd
 * worden terwijl het venster nog op het formulier staat, en staat klaar op het
 * moment dat iemand klikt. Een element met visibility:hidden is bovendien niet
 * focusbaar, dus het tabben blijft kloppen; het script zet er daarnaast inert
 * op voor de schermlezer.
 */
html.mymmo-modal-js .mymmo-modal-body--tabs {
  position: relative;
  overflow: hidden;
}

html.mymmo-modal-js .mymmo-modal-body--tabs .mymmo-modal-paneel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  /* Zie .mymmo-modal-body hierboven: met tabbladen is DIT de scrollcontainer,
     dus de regel hoort hier ook te staan. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  border-top: 0;
}

html.mymmo-modal-js .mymmo-modal-body--tabs .mymmo-modal-paneel.is-actief {
  visibility: visible;
  opacity: 1;
}

/* Het formulier vult de kolom: --mf-max-width (720px) hoort bij een formulier
   in een pagina, niet bij een kolom van een venster. */
.mymmo-modal .mymmo-form-wrap {
  max-width: 100%;
}

/* ── De sluitknop ────────────────────────────────────────────────────────── */

/* Hij hangt los rechtsboven, over alles heen: in de twee-kolomsindeling boven
   de inhoud, op een telefoon boven de kopbalk. Dat scheelt een aparte kopbalk
   met enkel een kruisje erin. */
.mymmo-modal-close {
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px: met een duim te raken, ook bovenaan een telefoonscherm. */
  width: 40px;
  height: 40px;
  color: var(--mf-muted, #6b7280);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.mymmo-modal-close:hover {
  color: var(--mf-text, #1f2430);
  background: rgba(16, 20, 28, 0.08);
}

.mymmo-modal-close:focus-visible {
  outline: 2px solid var(--mf-accent, #2563eb);
  outline-offset: 2px;
}

/* ── De agenda (Calendly) ────────────────────────────────────────────────── */

/* Het vlak vult het tabblad; de widget zet er een iframe in dat zelf scrollt.
   Geen dubbele scrollbalk dus: het paneel scrollt niet, de kalender wel. */
.mymmo-modal-paneel--agenda {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.mymmo-modal-agenda {
  flex: 1 1 auto;
  /* Voor de weergave ZONDER JavaScript, waar dit vlak in de gewone stroom
     staat en flex:1 dus niets om te vullen heeft. Ook het vangnet op een heel
     laag venster: dan scrollt het paneel. */
  min-height: 520px;
}

.mymmo-modal-agenda iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
}

.mymmo-modal-agenda-terugval {
  margin: 0;
  padding: 22px;
}

.mymmo-modal-agenda-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 26px;
  font-weight: 600;
  color: var(--mf-accent-text, #ffffff);
  text-decoration: none;
  background: var(--mf-accent, #2563eb);
  border-radius: var(--mf-radius, 10px);
}

.mymmo-modal-agenda-link:hover {
  color: var(--mf-accent-text, #ffffff);
  filter: brightness(0.93);
}

/* ── Bedankt ─────────────────────────────────────────────────────────────── */

/* Wat er in de plaats van de kalender komt zodra het gesprek geboekt is. De
   bezoeker blijft hier, op onze site, in plaats van op de bedankpagina van
   Calendly te belanden. */
.mymmo-modal-bedankt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  padding: 40px 28px;
  text-align: center;
}

.mymmo-modal-bedankt:focus {
  outline: none;
}

.mymmo-modal-bedankt svg {
  color: var(--mf-accent, #2563eb);
}

.mymmo-modal-bedankt p {
  margin: 0;
  max-width: 34em;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* ── Het dankjewelscherm (1.16) ──────────────────────────────────────────────
   Per tabblad: afbeelding (of een vinkje), titel, tekst. Staat als verborgen
   sjabloon in elk paneel en komt zichtbaar na een inzending of een geboekt
   gesprek. Twee klassen op elke regel: een blokthema zet zijn eigen opmaak op
   h3 en p en wint anders (zie claude.md). */
.mymmo-modal .mymmo-dank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1 0 auto;
  min-height: 320px;
  padding: 32px 8px;
  text-align: center;
}

.mymmo-modal .mymmo-dank[hidden] {
  display: none;
}

.mymmo-modal .mymmo-dank:focus {
  outline: none;
}

.mymmo-modal .mymmo-form-wrap--dank {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.mymmo-modal .mymmo-dank-beeld {
  display: block;
  width: auto;
  max-width: min(280px, 80%);
  height: auto;
  max-height: 220px;
  margin: 0 0 6px;
  object-fit: contain;
}

.mymmo-modal .mymmo-dank-vink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 0 6px;
  border-radius: 999px;
  font-size: 30px;
  line-height: 1;
  color: var(--mf-accent-text, #ffffff);
  background: var(--mf-accent, #2563eb);
}

.mymmo-modal .mymmo-dank-titel {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--mf-text, inherit);
}

.mymmo-modal .mymmo-dank-tekst {
  margin: 0;
  padding: 0;
  max-width: 34em;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--mf-muted, inherit);
}

.mymmo-modal .mymmo-dank-titel:empty,
.mymmo-modal .mymmo-dank-tekst:empty {
  display: none;
}

/* De kalender wordt opgebouwd: de terugvallink hoort dan weg. */
.mymmo-modal-agenda.is-laden .mymmo-modal-agenda-terugval {
  display: none;
}

/* ── Twee kolommen (vanaf 900px) ─────────────────────────────────────────── */

@media (min-width: 900px) {
  .mymmo-modal-panel--zijkolom .mymmo-modal-lijf {
    flex-direction: row;
    align-items: stretch;
  }

  /* Een venster met zijkolom heeft meer breedte nodig dan een kaal venster:
     de zijkolom neemt er 280 van, en wat overblijft is de kolom waarin iemand
     zijn gegevens typt. Bij 660px blijft daar 360px van over en breken de
     velden van twee kolommen naar een -- terwijl er scherm genoeg is.
     :not(--breed), want met een agenda erbij geldt de bredere maat van daar;
     die twee klassen staan samen op hetzelfde venster. */
  .mymmo-modal-panel--zijkolom:not(.mymmo-modal-panel--breed) {
    max-width: 880px;
  }

  .mymmo-modal-kop {
    /* Links gelijk met de zijkolom eronder. */
    padding: 26px 60px 14px 28px;
  }

  .mymmo-modal-panel--zijkolom .mymmo-modal-aside {
    flex: 0 0 280px;
    gap: 18px;
    padding: 2px 6px 22px 28px;
    /*
     * GEEN eigen scrollgebied.
     *
     * Met overflow-y:auto werd de zijkolom een scrollgebied, en dat knipt ook
     * horizontaal af: een tekening die je groter schaalt dan de kolom verdween
     * dan aan de rand. Het venster zelf heeft overflow:hidden, dus buiten het
     * venster komt er nog steeds niets.
     *
     * Bewust GEEN z-index hier: de tekening hoort achter het witte kaartje te
     * blijven. Dat kaartje komt later in de HTML en wint dus vanzelf.
     */
    overflow: visible;
  }

  .mymmo-modal-panel--breed.mymmo-modal-panel--zijkolom .mymmo-modal-aside {
    flex-basis: 310px;
  }

  .mymmo-modal-main {
    margin: 0 20px 20px;
  }

  .mymmo-modal-panel--zijkolom .mymmo-modal-main {
    margin: 0 20px 20px 10px;
  }

  .mymmo-modal-paneel {
    padding: 40px;
  }

  /* Vanaf hier is er plek voor de twee keuzes onder elkaar, met hun regeltje
     uitleg erbij. Naast elkaar geperst in 290px zou dat onleesbaar zijn. */
  .mymmo-modal-panel--zijkolom .mymmo-modal-tabs {
    flex-direction: column;
    gap: 8px;
  }

  .mymmo-modal-panel--zijkolom .mymmo-modal-tab {
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 12px 14px;
  }

  /* Geen regeltje onder de titel? Dan is er niets om het icoon bij uit te
     lijnen, en blijft er onder de titel ruimte open staan alsof er nog iets
     komt. De klasse komt uit modal.php; met :has() zou dezelfde regel op
     oudere browsers stil wegvallen. */
  .mymmo-modal-panel--zijkolom .mymmo-modal-tab--kaal {
    align-items: center;
  }

  .mymmo-modal-panel--zijkolom .mymmo-modal-punten {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mymmo-modal-punt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--mf-muted, #6b7280);
  }

  .mymmo-modal-punt svg {
    flex: 0 0 auto;
    margin-top: 2px;
    /* --mf-icon los van de accentkleur: op een gekleurde achtergrond wil je de
       vinkjes soms lichter zonder daarvoor de knoppen mee te veranderen. */
    color: var(--mf-icon, var(--mf-accent, #2563eb));
  }

  /* margin-top:auto duwt het beeld naar de onderkant van de kolom: het is
     sfeer, geen inhoud, en het hoort dus onder de dingen die iets zeggen. */
  .mymmo-modal-panel--zijkolom .mymmo-modal-figuur {
    display: block;
    margin-top: auto;
    padding-top: 8px;
  }

  .mymmo-modal-figuur {
    /* Het anker voor het watermerk: dat hangt aan DIT vlak, niet aan de
       zijkolom, zodat de twee bij elke schermbreedte dezelfde compositie
       houden.

       z-index:-1 zet de hele figuur ACHTER de rest: achter de tekst van de
       zijkolom en achter het witte kaartje, maar nog altijd vóór de achtergrond
       van het venster. Dat is wat een tekening op de achtergrond hoort te doen
       -- ze mag de tekst niet overschilderen. */
    position: relative;
    z-index: -1;
  }

  /* Ook zonder tekening moet het vlak hoogte hebben, anders heeft het watermerk
     niets om zich aan op te hangen. */
  .mymmo-modal-figuur--leeg {
    min-height: 150px;
  }

  /* De tekeningen liggen in DEZELFDE rastercel over elkaar. Zo bepaalt de
     hoogste van de twee de hoogte van het vlak en springt er niets bij het
     wisselen; met absolute plaatsing zou de tweede eruit vallen zodra ze groter
     is dan de eerste. */
  .mymmo-modal-figuur {
    display: grid;
  }

  .mymmo-modal-beeld {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: block;
    /* Niet zichtbaar EN niet aanklikbaar: een tekening die net weggefade is,
       hoort geen klik meer op te vangen. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px) scale(0.94);
    transition:
      opacity 0.22s ease-out,
      transform 0.42s cubic-bezier(0.22, 1.25, 0.36, 1),
      visibility 0s linear 0.22s;
  }

  .mymmo-modal-beeld.is-actief {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    /* De binnenkomende beweging duurt langer dan de vertrekkende en schiet licht
       door -- dat overschot is wat het levend maakt in plaats van een
       kruisvervaging. */
    transition:
      opacity 0.26s ease-out 0.04s,
      transform 0.46s cubic-bezier(0.22, 1.25, 0.36, 1),
      visibility 0s;
  }

  /* Elke tekening heeft haar EIGEN schaal en verschuiving: ze zijn zelden even
     groot, en dan staat de ene te hoog zodra de andere goed staat. Stel je voor
     de tweede niets in, dan volgt ze die van de eerste -- dat scheelt werk bij
     twee tekeningen die wél op elkaar lijken.

     Deze MIDDENSTE laag draagt die schaal en verschuiving, de buitenste de
     beweging van de overgang. In één transform zouden die elkaar overschrijven,
     en dan verspringt je nudge zodra je van tabblad wisselt. In de bouwer hangen
     de omlijning en de grepen hieraan, zodat ze meebewegen met het beeld. */
  .mymmo-modal-stand {
    display: block;
    position: relative;
    transform: translate(var(--mf-fig-x, 0px), var(--mf-fig-y, 0px)) scale(var(--mf-fig-scale, 100%));
    transform-origin: bottom center;
  }

  .mymmo-modal-tekening {
    display: block;
    width: 100%;
    max-width: 230px;
    height: auto;
    margin: 0 auto;
  }

  .mymmo-modal-beeld[data-mymmo-beeld="calendly"] .mymmo-modal-stand {
    transform:
      translate(
        var(--mf-fig2-x, var(--mf-fig-x, 0px)),
        var(--mf-fig2-y, var(--mf-fig-y, 0px))
      )
      scale(var(--mf-fig2-scale, var(--mf-fig-scale, 100%)));
  }

  @media (prefers-reduced-motion: reduce) {
    .mymmo-modal-beeld {
      transition: opacity 0.01s, visibility 0s;
      transform: none;
    }

    .mymmo-modal-beeld.is-actief {
      transition: opacity 0.01s, visibility 0s;
      transform: none;
    }
  }

  /*
   * Het watermerk: een swoosh of krul ACHTER de tekening, verankerd in de
   * linkeronderhoek van dit vlak.
   *
   * pointer-events:none -- het is decoratie; een klik hoort erdoorheen te gaan
   * naar wat eronder ligt.
   */
  /*
   * Het watermerk hangt aan het VLAK, niet aan een van de tekeningen.
   *
   * De twee tekeningen delen dezelfde rastercel, dus dat vlak houdt zijn maat
   * wanneer je van tabblad wisselt -- en daardoor blijft het watermerk precies
   * staan waar het stond terwijl de tekening ervoor verwisselt. Zou het aan een
   * tekening vastzitten, dan sprong het mee bij elke wissel.
   */
  .mymmo-modal-wm {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    width: var(--mf-wm-scale, 100%);
    transform:
      translate(var(--mf-wm-x, 0px), var(--mf-wm-y, 0px))
      rotate(var(--mf-wm-rotate, 0deg));
    transform-origin: bottom left;
    /* Decoratie: een klik hoort erdoorheen te gaan naar wat eronder ligt. In de
       bouwer zet de bewerklaag dit tijdelijk aan om te kunnen slepen. */
    pointer-events: none;
  }

  .mymmo-modal-watermerk {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .mymmo-modal-agenda-terugval {
    padding: 28px;
  }
}

/* ── Telefoon ────────────────────────────────────────────────────────────── */

/* Onder 640px wordt het venster een vol scherm. Een zwevend kaartje met marges
   rondom werkt daar niet: het toetsenbord schuift omhoog, de kalender van
   Calendly is zelf al bijna zo hoog als het scherm, en een bezoeker die per
   ongeluk naast het kaartje tikt sluit alles weg. */
@media (max-width: 640px) {
  .mymmo-modal {
    padding: 0;
    align-items: stretch;
  }

  .mymmo-modal-panel {
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    /* De veilige zone (de streep van de home-indicator) staat op EEN plek: het
       venster zelf. Ze stond eerst in de knoppenrij EN in de strook eronder,
       en die telden dus op -- op een iPhone een halve duim wit onder de
       knoppen. Het paneel is border-box, dus 100dvh blijft kloppen. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mymmo-modal-kop {
    padding: 14px 56px 10px 16px;
  }

  .mymmo-modal-aside {
    padding: 0 16px 12px;
  }

  /* Op een vol scherm heeft een zwevend kaartje geen zin: het zou aan alle
     kanten een randje tint overlaten en de inhoud smaller maken dan het
     toestel. */
  .mymmo-modal-main {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mymmo-modal-title {
    font-size: 1.15rem;
  }

  /* De inleiding mag de kopbalk niet opblazen: op een telefoon telt elke regel
     die het formulier verder naar beneden duwt. */
  .mymmo-modal-lead {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.86rem;
  }

  .mymmo-modal-tab {
    gap: 8px;
    padding: 8px 10px;
    font-size: 0.84rem;
  }

  .mymmo-modal-tab-icoon {
    width: 26px;
    height: 26px;
  }

  .mymmo-modal-tab-icoon svg {
    width: 15px;
    height: 15px;
  }

  /* Het regeltje uitleg past niet naast elkaar in twee knoppen van een halve
     telefoonbreedte. Het opschrift zelf zegt genoeg. */
  .mymmo-modal-tab-sub {
    display: none;
  }

  /* Krapper dan op een groot scherm: 40px aan elke kant laat op 375px nog
     geen 300px over om in te typen.
     ONDERAAN GEEN OPVULLING, en dat is geen uitzondering op "een opvulling":
     de onderste rij (de knoppen, of het dankjewelscherm) levert haar eigen
     ruimte, zie hieronder. Die 24px zat namelijk TUSSEN de knoppen en de
     strook met de overige tabbladen: veel te veel wit, en de inhoud scrolde er
     ook nog eens doorheen -- de opvulling van een scrollcontainer maakt geen
     deel uit van wat een sticky rij kan afdekken. */
  .mymmo-modal-paneel {
    padding: 24px 24px 0;
  }

  .mymmo-modal-agenda-terugval {
    padding: 16px;
  }

  /*
   * Vorige/Volgende (en de verzendknop van de laatste stap) blijven ALTIJD in
   * beeld -- STICKY, niet FIXED. Sticky reserveert gewoon zijn eigen plek
   * onderaan de flexketen (zie mymmo-forms-steps.css): past een stap in het
   * scherm, dan staat de rij daar waar ze al stond; past ze niet, dan klikt
   * ze vast aan de onderrand van het scrollgebied terwijl de rest van de stap
   * er nog voorbij scrolt. Fixed zou daarvoor een handmatige padding-bottom
   * op elke stap nodig gehad hebben om te voorkomen dat de laatste regels
   * erachter verdwijnen -- sticky niet.
   *
   * Enkel BINNEN een stappenreeks: een los formulier in de pop-up (zonder
   * `.mymmo-stappen`) verandert hier niet mee.
   *
   * Een eigen achtergrond is nodig: zonder stappen zou een stap die niet past
   * gewoon ONDER de knoppenrij door blijven scrollen -- zichtbaar door de rij
   * heen als ze geen eigen vlak heeft.
   */
  .mymmo-modal-paneel > .mymmo-stappen .mymmo-stap-nav,
  .mymmo-modal-paneel > .mymmo-stappen .mymmo-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--mf-field-bg, #ffffff);
    border-top: 1px solid var(--mf-border, #d7dbe2);
  }

  /*
   * DE ONDERSTE RIJ VAN EEN PANEEL LEVERT ZELF DE RUIMTE TOT DE ONDERRAND.
   *
   * 12px, en geen 24px zoals aan de zijkanten: hieronder staat de strook met de
   * overige tabbladen, en die hoort tegen de knoppen aan te sluiten. Met de
   * opvulling van het paneel erbij (24) plus deze (12) plus de veilige zone
   * stond er op een iPhone bijna 70px wit onder de knoppen.
   *
   * Drie selectors, want een paneel kan op drie manieren eindigen: een stap met
   * Vorige/Volgende, een formulier met zijn verzendknop, of het dankjewel-
   * scherm na een geslaagde inzending. Vergeet je er een, dan plakt die tegen
   * de rand.
   */
  .mymmo-modal-paneel > .mymmo-stappen .mymmo-stap-nav,
  .mymmo-modal-paneel .mymmo-form-actions,
  .mymmo-modal-paneel .mymmo-dank {
    padding-bottom: 12px;
  }

  .mymmo-modal-close {
    top: 8px;
    right: 8px;
  }

  .mymmo-modal-button {
    /* Een knop die over de rand van een telefoonscherm loopt is niet te raken;
       over de volle breedte is hij dat wel. */
    width: 100%;
  }

  .mymmo-modal-launch {
    display: block;
  }

  .mymmo-modal-launch--stil {
    display: contents;
  }
}

/* ── Beweging ────────────────────────────────────────────────────────────── */

/*
 * Openen en sluiten hebben allebei hun eigen beweging, en dat is het punt: het
 * venster ploft niet meer in beeld en verdwijnt niet meer in één frame.
 *
 * Openen gebruikt een easing die licht DOORSCHIET (de laatste waarde in de
 * cubic-bezier ligt boven 1) en start net iets te klein. Daardoor leest het als
 * iets dat naar je toe komt in plaats van iets dat verschijnt -- dat overschot
 * is wat een beweging levend maakt.
 *
 * Sluiten gaat sneller en zonder overschot, met een easing die versnelt: iets
 * dat weggaat hoort niet te aarzelen. De duur staat ook in mymmo-forms-modal.js
 * (SLUIT_MS); lopen die uit elkaar, dan springt het venster weg vóór de
 * animatie klaar is, of blijft het een moment op een leeg scherm staan.
 */
@media (prefers-reduced-motion: no-preference) {
  .mymmo-modal.is-open .mymmo-modal-panel {
    animation: mymmo-modal-in 0.28s cubic-bezier(0.22, 1.2, 0.36, 1) both;
  }

  .mymmo-modal.is-open .mymmo-modal-backdrop {
    animation: mymmo-vlak-in 0.22s ease-out both;
  }

  .mymmo-modal.is-sluiten .mymmo-modal-panel {
    animation: mymmo-modal-uit 0.16s cubic-bezier(0.4, 0, 1, 1) both;
  }

  .mymmo-modal.is-sluiten .mymmo-modal-backdrop {
    animation: mymmo-vlak-uit 0.16s ease-in both;
  }
}

@keyframes mymmo-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mymmo-modal-uit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

@keyframes mymmo-vlak-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mymmo-vlak-uit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Op een telefoon is het venster een vol scherm, en dan hoort het van onder in
   beeld te schuiven -- schalen ziet er op die maat uit als een haperende
   pagina. */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .mymmo-modal.is-open .mymmo-modal-panel {
    animation: mymmo-blad-in 0.3s cubic-bezier(0.22, 1.1, 0.36, 1) both;
  }

  .mymmo-modal.is-sluiten .mymmo-modal-panel {
    animation: mymmo-blad-uit 0.18s cubic-bezier(0.4, 0, 1, 1) both;
  }
}

@keyframes mymmo-blad-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes mymmo-blad-uit {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* Het venster blijft tijdens het sluiten staan; het script haalt het weg zodra
   de animatie klaar is. */
.mymmo-modal.is-sluiten {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .mymmo-modal-button,
  .mymmo-modal-tab,
  .mymmo-modal-tab-icoon,
  .mymmo-modal-close {
    transition: none;
  }
}

@media (max-width: 640px) {
  /*
   * OP EEN TELEFOON KRIJGT DE BEZOEKER WAAR HIJ VOOR KWAM, EN VERDER NIETS.
   *
   * De kop, de inleiding en de rij tabbladen stonden hier allemaal bovenaan, en
   * samen duwden ze het eigenlijke scherm een halve telefoonhoogte naar beneden
   * -- terwijl de bezoeker net op "Bereken je prijs" had geklikt en dus al
   * gezegd had wat hij wou. Op een telefoon is dat niet "context", dat is een
   * drempel.
   *
   * Wat er WEL blijft: het tabblad dat hij koos, over de volle hoogte. En
   * onderaan, op de tint van het venster, de tabbladen die hij NIET koos -- daar
   * lezen ze als "er kan hier ook nog dit" in plaats van als een keuze die hij
   * eerst moet maken.
   *
   * Welk tabblad dat is, staat bij de INGANG (zie class-entrypoints.php): een
   * knop "Plan een gesprek" opent de agenda, een callout opent wat ze uitlicht.
   */
  .mymmo-modal-kop {
    display: none;
  }

  .mymmo-modal-lead,
  .mymmo-modal-punten,
  .mymmo-modal-figuur {
    display: none;
  }

  /* De inhoud eerst, de overige tabbladen eronder. Noem de richting zelf: een
     blokthema zet flex-direction op van alles. */
  .mymmo-modal-lijf {
    flex-direction: column;
  }

  .mymmo-modal-main {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    /* .mymmo-modal-main heeft normaal margin-bottom:12px (voor de "los
       zwevende kaart"-look). Op mobiel, met de extra-acties-strook eronder,
       gaf dat een zichtbare kier tussen de Vorige/Volgende-rij en die
       strook -- ze moeten hier tegen elkaar aan sluiten. */
    margin-bottom: 0;
  }

  .mymmo-modal-aside {
    order: 2;
    flex: 0 0 auto;
    /* Zelfde zijmarge als .mymmo-modal-paneel (24px op mobiel), zodat deze
       strook -- de niet-gekozen tabbladen als "extra acties" -- even breed
       oogt als de Vorige/Volgende-rij erboven. Stond hier eerst op 16px,
       een eigen (kleinere) maat die niet aansloot.
       Geen bovenpadding meer: er bleek een TWEEDE, eerdere mobiele regel voor
       ditzelfde element te bestaan (verderop in dit bestand gewonnen, zie de
       regel hierboven over specificiteit) die al margin:0 op de kaart zette
       -- de zichtbare kier zat dus niet in die marge, maar in DEZE 12px
       bovenpadding, op de eigen (getinte) achtergrond van deze strook. */
    padding: 0 24px 12px;
  }

  /* Het tabblad waar je op staat hoort niet bij "extra acties" -- dat is waar je
     bent. Zonder dit staat er onderaan een knop die niets doet. */
  .mymmo-modal-tabs .mymmo-modal-tab.is-active {
    display: none;
  }

  /* Blijft er niets over om te tonen -- een venster met maar één tabblad -- dan
     is de strook een lege balk van 24px onderaan het scherm. Een browser zonder
     :has() krijgt die balk; dat is de onschadelijke kant van deze regel. */
  .mymmo-modal-aside:not(:has(.mymmo-modal-tab:not(.is-active))) {
    display: none;
  }

  .mymmo-modal-panel--zijkolom .mymmo-modal-tabs {
    flex-direction: row;
    gap: 8px;
  }

  .mymmo-modal-panel--zijkolom .mymmo-modal-tab {
    flex: 1 1 0;
    /* Het regeltje onder het opschrift past hier niet: twee knoppen naast elkaar
       op 375px hebben elk een kleine 170px. */
    justify-content: center;
    text-align: center;
  }

  .mymmo-modal-tab-sub {
    display: none;
  }
}