/* ══ Overlays ════════════════════════════════════════════════════════
   Alles wat óver de pagina komt: het scanvenster, het terugkeervenster en
   de cookiebanner. De opmaak wordt door scripts/dialogs.js in de pagina
   gezet, zodat de vier pagina's dezelfde opmaak niet hoeven te herhalen.
   Alle kleuren en maten komen uit tokens.css. */

/* ── wazige achtergrond ───────────────────────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialoog);
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.2vh, 24px);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  backdrop-filter: blur(var(--scrim-blur));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.scrim[hidden] { display: none; }

/* het venster zelf komt rustig op; bij reduced motion staat het er meteen */
.scrim .dlg {
  animation: dlg-in 320ms var(--ease) both;
}
@keyframes dlg-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* zolang er een venster openstaat, scrollt de pagina eronder niet mee */
html.heeft-dialoog, html.heeft-dialoog body { overflow: hidden; }

/* ── het venster ──────────────────────────────────────────────────── */
.dlg {
  position: relative;
  width: min(100%, 640px);
  margin: auto;
  background: var(--surface);
  border-radius: var(--radius-dialoog);
  box-shadow: var(--shadow-dialoog);
  padding: clamp(28px, 4vw, 44px);
}
.dlg--smal { width: min(100%, 480px); }
/* het scanvenster: breed genoeg voor twee kolommen, zodat het hele
   formulier op één scherm past en je er niet in hoeft te scrollen */
.dlg--breed { width: min(100%, 1120px); padding: clamp(16px, 2.6vh, 36px) clamp(20px, 3vw, 48px); }
/* het scanvenster: formulier links, fotopaneel rechts, zonder eigen padding.
   Het venster groeit nooit buiten het scherm: klapt de bezoeker de extra
   vragen uit, dan scrollt alleen het formulier. De foto houdt zijn hoogte. */
.dlg--scan {
  width: min(100%, 1060px);
  padding: 0;
  overflow: hidden;
  display: grid;
  /* crème venster met het fotopaneel als losse kaart erin; die marge komt
     uit de padding hieronder */
  background: var(--bg);
  padding: clamp(10px, 1.5vh, 18px);
  /* vaste hoogte: het venster en de foto blijven gelijk, of de extra
     vragen nu open of dicht staan. Alleen het formulier scrollt. */
  height: min(calc(100svh - 2 * clamp(8px, 1.2vh, 24px)), 700px);
}
/* doorzichtig paneel: je ziet de pagina er zacht doorheen */
.dlg--glas {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(150%);
  backdrop-filter: blur(var(--glas-blur)) saturate(150%);
}
/* geen ondersteuning voor backdrop-filter: dan gewoon een dekkend paneel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dlg--glas { background: var(--surface); }
}

.dlg__sluit {
  position: absolute;
  z-index: 3;                      /* ligt over het fotopaneel heen */
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--aubergine-lijn);
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text-heading);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.dlg__sluit:hover { background: var(--bg); border-color: var(--aubergine); }
.dlg__sluit svg { width: 16px; height: 16px; }
/* op een telefoon is het scanformulier langer dan het scherm; het kruisje
   blijft dan binnen bereik in plaats van met de inhoud mee te scrollen */
@media (max-width: 720px) {
  .dlg__sluit { position: fixed; top: 16px; right: 16px; z-index: 1; box-shadow: var(--shadow-card); }
}

.dlg__kop { max-width: 46ch; padding-right: var(--s40); }
.dlg__kop h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.dlg--breed .dlg__kop { max-width: 72ch; }
.dlg--breed .dlg__kop h2 { font-size: clamp(1.4rem, 2.1vw, 1.85rem); }
.dlg__lede { margin-top: var(--s8); color: var(--text-body); font-size: 1rem; }
.dlg--breed .dlg__lede { margin-top: 4px; font-size: 0.9375rem; }

/* ── het scanformulier in het venster ─────────────────────────────── */
.scanform { display: grid; gap: clamp(8px, 1.4vh, 18px); margin-top: clamp(10px, 1.8vh, 20px); }
.scanform fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s8); }
.scanform legend {
  padding: 0;
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* twee velden naast elkaar */
.scanform__paar { display: grid; gap: var(--s12); }
@media (min-width: 520px) { .scanform__paar { grid-template-columns: 1fr 1fr; } }
/* twee kolommen vanaf tabletbreedte; daaronder één kolom */
.scanform__raster { display: grid; gap: clamp(8px, 1.2vh, 14px); }
@media (min-width: 760px) { .scanform__raster { grid-template-columns: 1fr 1fr; column-gap: var(--s24); } }

.veld { display: grid; gap: 4px; align-content: start; }
.veld > span { font-size: var(--small-size); font-weight: 500; color: var(--text-heading); }
.veld > span em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.veld input,
.veld textarea {
  width: 100%;
  /* dekwit op het glaspaneel, zodat invoer duidelijk invoer blijft */
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-input);
  padding: clamp(8px, 1vh, 12px) var(--s16);
  outline: none;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.veld textarea { resize: vertical; min-height: 0; height: calc(2em + clamp(16px, 2vh, 24px)); line-height: 1.4; }
.veld input:focus, .veld textarea:focus {
  border-color: var(--aubergine);
  box-shadow: 0 0 0 3px var(--aubergine-zacht);
}
.veld input[aria-invalid='true'], .veld textarea[aria-invalid='true'] { border-color: var(--fout); }
.veld__fout { font-size: var(--small-size); color: var(--fout); }
.veld__fout:empty { display: none; }

/* toestemming om contact op te nemen */
.akkoord { display: flex; gap: var(--s12); align-items: flex-start; font-size: var(--small-size); color: var(--text-body); }
.akkoord input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--aubergine); }

/* toestemming links, knop rechts: scheelt een rij hoogte */
.scanform__voet { display: grid; gap: var(--s12); }
.scanform__actie { display: grid; gap: 6px; }
.scanform__voet .btn { width: 100%; }
@media (min-width: 760px) {
  .scanform__voet { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s32); }
  .scanform__actie { justify-items: end; text-align: right; }
  .scanform__voet .btn { width: auto; }
  .scanform__voet .form__status { grid-column: 1 / -1; }
}

/* ── bevestiging en e-mailterugval ────────────────────────────────── */
.dlg__klaar { display: grid; gap: var(--s16); margin-top: var(--s24); }
.dlg__klaar .btn { justify-self: start; }
.mailkaart {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--s20);
  display: grid;
  gap: var(--s12);
}
.mailkaart code {
  font-family: inherit;
  font-weight: 600;
  color: var(--text-heading);
  overflow-wrap: anywhere;
}

/* ── cookiebanner ─────────────────────────────────────────────────── */
.cookie {
  position: fixed;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  z-index: var(--z-banner);
  margin-inline: auto;
  width: min(100% - 2 * var(--gutter), 760px);
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-floating);
  padding: var(--s24);
  animation: cookie-in 420ms var(--ease) both;
}
.cookie[hidden] { display: none; }
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.cookie h2 { font-size: 1.125rem; letter-spacing: -0.02em; }
.cookie p { margin-top: 6px; font-size: var(--small-size); color: var(--text-body); }
.cookie__knoppen {
  display: flex; flex-wrap: wrap; gap: var(--s12);
  margin-top: var(--s20);
}
.cookie__knoppen .btn { flex: 1 1 auto; }
/* vanaf hier passen de drie knoppen naast elkaar, rechts uitgelijnd */
@media (min-width: 560px) {
  .cookie__knoppen { flex-wrap: nowrap; justify-content: flex-end; }
  .cookie__knoppen .btn { flex: none; }
}
/* de keuzes achter "Instellingen" */
.cookie__keuzes { display: grid; gap: var(--s12); margin-top: var(--s20); }
.cookie__keuzes[hidden] { display: none; }
.keuze {
  display: flex; gap: var(--s16); align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: var(--s16);
}
.keuze input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--aubergine); }
.keuze input:disabled { accent-color: var(--control-border); }
.keuze strong { display: block; font-size: var(--small-size); color: var(--text-heading); }
.keuze span { display: block; margin-top: 4px; font-size: var(--small-size); color: var(--text-muted); }

/* ── voorkeurenlink in de footer ──────────────────────────────────── */
.foot__cookie {
  border: 0; background: none; padding: 0;
  color: inherit; font-size: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.foot__cookie:hover { color: var(--pistache); }

/* ── beweging uit ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scrim .dlg, .cookie { animation: none; }
}


/* ══ Scanvenster ═════════════════════════════════════════════════════
   Links het formulier, rechts een foto met één boodschap. Vier velden
   staan open; de rest zit achter een uitklapper, zodat het venster licht
   blijft zonder dat er vragen verdwijnen. */
.scanpaneel { display: grid; min-height: 0; }
@media (min-width: 880px) {
  .scanpaneel { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
}
/* alleen deze helft scrollt als de uitklapper opengaat */
.scanpaneel__form {
  display: flex; flex-direction: column;
  padding: clamp(24px, 3.4vh, 44px) clamp(22px, 3vw, 42px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.scanpaneel__form .label { margin-bottom: var(--s8); }
.scanpaneel__form h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.scanpaneel__form .dlg__lede { margin-top: 6px; max-width: none; font-size: 0.875rem; }
/* Het formulier vult de kolom en verdeelt de ruimte gelijk over de velden,
   zodat de verzendknop onderaan op dezelfde hoogte uitkomt als de boodschap
   in het fotopaneel. */
.scanpaneel__form .scanform {
  display: flex; flex-direction: column;
  justify-content: space-between;
  flex: 1; min-height: 0;
  margin-top: clamp(14px, 2vh, 22px);
}
.scanform__slot { display: grid; gap: var(--s8); }

/* de uitklapper met de overige vragen */
.meer { display: grid; gap: var(--s12); }
.meer__knop {
  display: flex; align-items: center; gap: var(--s12);
  padding: 0; border: 0; background: none;
  font-size: var(--small-size); font-weight: var(--ui-weight);
  color: var(--text-heading); text-align: left; cursor: pointer;
}
.meer__knop em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.meer__plus {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-button);
  background: var(--lavendel-licht); color: var(--aubergine);
  transition: transform var(--t-fast) ease, background-color var(--t-fast) ease;
}
.meer__plus svg { width: 15px; height: 15px; }
.meer__knop:hover .meer__plus { background: var(--lavendel); }
.meer__knop[aria-expanded='true'] .meer__plus { transform: rotate(45deg); }
.meer__vak { display: grid; gap: var(--s12); }
.meer__vak[hidden] { display: none; }

.scanform__verstuur { width: 100%; }
.scanform__verstuur svg { width: 17px; height: 17px; }
.scanpaneel__form .form__note { text-align: center; }
/* geen verplicht vinkje: alleen laten zien waar het staat */
.form__privacy { text-align: center; font-size: 0.75rem; color: var(--text-muted); }
.form__privacy a { color: var(--text-heading); text-decoration: underline; text-underline-offset: 2px; }
.scanpaneel__form .form__status { text-align: center; }

/* ── het fotopaneel ───────────────────────────────────────────────── */
.scanpaneel__beeld {
  position: relative; overflow: hidden; min-height: 0;
  border-radius: var(--radius-card);
  background: var(--lavendel-licht);
  /* Twee maten sturen de hele uitlijning onderin:
     --golf  = hoogte van het lavendel vlak
     --groep = hoogte van het icoon, precies twee tekstregels hoog.
     Daardoor begint de kop op het midden van het icoon en eindigt de
     tweede regel op de onderkant ervan, en staat de groep gecentreerd
     in de golf. */
  --golf: clamp(110px, 27%, 190px);
  --groep: 84px;
}
.scanpaneel__foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
/* De lavendel golf vult de onderste helft van het paneel, zodat de tekst
   er vol op staat en niet half over de foto valt. De svg rekt mee
   (preserveAspectRatio="none"), dus de hoogte mag vrij gekozen worden. */
.scanpaneel__golf {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: var(--golf);
}
/* het 3D-accent staat op de lavendel, niet over de foto */
.scanpaneel__accent {
  position: absolute; right: 6%;
  bottom: calc((var(--golf) - var(--groep)) / 2);
  height: var(--groep); width: auto;
}
.scanpaneel__tekst {
  position: absolute; left: clamp(20px, 2.4vw, 30px); right: 30%;
  bottom: calc((var(--golf) - var(--groep)) / 2);
}
/* kop en zin passen elk op één regel; samen 42px, de helft van --groep */
.scanpaneel__tekst h3 { font-size: 1.125rem; line-height: 1.2; text-wrap: nowrap; color: var(--text-heading); }
.scanpaneel__tekst p { margin-top: 3px; font-size: 0.8125rem; line-height: 1.35; color: var(--text-body); }

@media (max-width: 879px) {
  /* op een telefoon eerst het formulier, de foto compacter eronder */
  .scanpaneel__beeld { order: 2; aspect-ratio: 16 / 10; }
  .scanpaneel__form { overflow: visible; }
  .scanpaneel__tekst { right: 26%; }
}

/* ══ Chat ════════════════════════════════════════════════════════════
   Knop rechtsonder met een paneel in de stijl van de site. Een statische
   site verstuurt zelf niets; het bericht gaat per e-mail naar John, en de
   begroeting zegt dat in gewone taal. */
.chat {
  position: fixed;
  right: clamp(16px, 1.8vw, 26px); bottom: clamp(16px, 1.8vw, 26px);
  z-index: var(--z-banner);
  display: grid; justify-items: end; gap: var(--s12);
}
html.banner-open .chat { bottom: calc(clamp(16px, 1.8vw, 26px) + 150px); }
@media (min-width: 620px) { html.banner-open .chat { bottom: calc(clamp(16px, 1.8vw, 26px) + 110px); } }

.chat__knop {
  display: flex; align-items: center; gap: var(--s12);
  padding: 14px 22px;
  border: 0; border-radius: var(--radius-button);
  background: var(--aubergine); color: var(--bg);
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--button-weight);
  cursor: pointer;
  box-shadow: var(--shadow-floating);
  transition: background-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.chat__knop:hover { background: var(--aubergine-hover); transform: translateY(-2px); }
.chat__knop:active { transform: translateY(0); }
.chat__knop svg { width: 19px; height: 19px; }
/* met het paneel open is de knop overbodig */
.chat--open .chat__knop { display: none; }
/* boven de aubergine footer draait de knop om naar pistache */
.chat--op-footer .chat__knop { background: var(--pistache); color: var(--aubergine); }
.chat--op-footer .chat__knop:hover { background: var(--pistache-diep); }

.chat__paneel {
  width: min(calc(100vw - 2 * var(--gutter)), 372px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgb(48 33 55 / 6%), 0 24px 60px -12px rgb(48 33 55 / 26%);
  overflow: hidden;
  animation: chat-in 320ms var(--ease) both;
}
.chat__paneel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── kop ──────────────────────────────────────────────────────────── */
.chat__top {
  display: flex; align-items: center; gap: var(--s12);
  padding: var(--s20);
  background: var(--aubergine); color: var(--bg);
}
.chat__avatar { position: relative; flex: none; }
.chat__avatar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
/* het stipje zegt dat er iemand meekijkt, niet dat er live gechat wordt */
.chat__avatar i {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pistache); border: 2px solid var(--aubergine);
}
.chat__wie b { display: block; font-size: 0.9375rem; }
.chat__wie span { display: block; margin-top: 1px; font-size: 0.75rem; color: var(--nacht-tekst); }
.chat__sluit {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-button);
  background: rgb(255 255 255 / 12%); color: var(--bg); cursor: pointer;
  transition: background-color var(--t-fast) ease;
}
.chat__sluit:hover { background: rgb(255 255 255 / 22%); }
.chat__sluit svg { width: 13px; height: 13px; }

/* ── gesprek ──────────────────────────────────────────────────────── */
.chat__loop { padding: var(--s20) var(--s20) var(--s16); background: var(--bg); }
.chat__bericht { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s12); align-items: end; }
.chat__mini { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.chat__bel {
  padding: 12px 16px;
  border-radius: 18px 18px 18px 6px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(48 33 55 / 6%);
  font-size: var(--small-size); font-weight: 500; color: var(--text-heading); line-height: 1.45;
}
.chat__bel span { display: block; margin-top: 3px; font-weight: 400; color: var(--text-muted); }

.chat__chipslabel { margin: var(--s16) 0 var(--s8) 40px; font-size: 0.75rem; color: var(--text-muted); }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 40px; }
.chat__chip {
  padding: 8px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-button);
  background: var(--surface); color: var(--text-heading);
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--ui-weight);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.chat__chip:hover { background: var(--lavendel-licht); border-color: var(--lavendel); }

/* ── invoer ───────────────────────────────────────────────────────── */
.chat__form { display: grid; gap: var(--s8); padding: var(--s12) var(--s20) var(--s20); background: var(--bg); }
.chat__invoer {
  display: flex; align-items: flex-end; gap: var(--s8);
  padding: 6px 6px 6px var(--s16);
  border: 1px solid var(--control-border); border-radius: 22px;
  background: var(--surface);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.chat__invoer:focus-within { border-color: var(--aubergine); box-shadow: 0 0 0 3px var(--aubergine-zacht); }
.chat__invoer textarea {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none; resize: none;
  padding: 9px 0; max-height: 132px;
  font-size: var(--small-size); line-height: 1.45;
}
/* de verzendknop zit in het veld, niet eronder */
.chat__stuur {
  flex: none; width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--aubergine); color: var(--bg); cursor: pointer;
  transition: background-color var(--t-fast) ease;
}
.chat__stuur:hover { background: var(--aubergine-hover); }
.chat__stuur svg { width: 16px; height: 16px; }
.chat__form input[type='email'] {
  width: 100%;
  padding: 11px var(--s16);
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); outline: none;
  font-size: var(--small-size);
  transition: border-color var(--t-fast) ease;
}
.chat__form input[type='email']:focus { border-color: var(--aubergine); }
.chat__privacy { font-size: 0.6875rem; line-height: 1.4; color: var(--text-muted); text-align: center; }
.chat__privacy a { color: var(--text-heading); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .chat__paneel { animation: none; }
  .chat__knop:hover { transform: none; }
}