/* Aanvraagformulier op lodgepagina's (alleen parken met "enquiry": true).
   Sinds 2 okt een dialog: links de gids en wat de specialist doet, rechts het
   formulier in vijf stappen. Bovenaan prijs en belofte, dan de stappenteller,
   dan de vraag van deze stap; Terug en Volgende staan onderaan vast en alleen
   de stap zelf scrolt. Het venster heeft een vaste hoogte, zodat het niet
   verspringt als de ene stap langer is dan de andere.
   Mobiel eerst: velden op 16px zodat iOS niet inzoomt, alles wat je aantikt
   minstens 44px. Kleuren uit DESIGN.md: terracotta alleen voor de knop,
   olijf voor wat gekozen is. */

.enq-dlg, .enq-top, .enq-bar {
  --enq-line: rgba(38,41,28,.14);
  --enq-edge: rgba(38,41,28,.32);
  --enq-ring: 0 0 0 3px rgba(192,90,46,.26);
  --enq-shadow: 0 1px 2px rgba(28,34,16,.06), 0 12px 32px rgba(28,34,16,.10);
  --enq-px: 34px;
}

/* ---- Dialog ------------------------------------------------------------ */
/* Pagina erachter op slot, net als html.lb-lock bij de fotoviewer. */
html.enq-lock { overflow: hidden; }

/* Groot scherm: een venster van hooguit 980 breed en 720 hoog, twee panelen
   naast elkaar. De dialog zelf heeft geen padding: een klik met de dialog als
   doel komt dan altijd van het backdrop, en dat sluit. */
.enq-dlg {
  width: min(980px, calc(100vw - 48px)); max-width: none;
  height: min(720px, calc(100vh - 48px)); max-height: none;
  margin: auto; padding: 0; border: 0; border-radius: 16px;
  background: #fff; color: var(--ink); overflow: hidden;
  box-shadow: 0 24px 72px rgba(16,19,10,.38);
}
@supports (height: 100dvh) { .enq-dlg { height: min(720px, calc(100dvh - 48px)); } }
.enq-dlg::backdrop { background: rgba(16,19,10,.58); }
/* Bij openen via #enquiry houdt de dialog zelf even de focus (tot enquiry.js
   hem na load naar de kop zet). Geen oranje rand om het hele venster. */
.enq-dlg:focus, .enq-dlg:focus-visible { outline: none; }
.enq-dlg[open] { animation: enq-in .18s ease-out; }
.enq-dlg[open]::backdrop { animation: enq-fade .18s ease-out; }
@keyframes enq-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes enq-fade { from { opacity: 0; } }

.enq-sheet { display: flex; height: 100%; }
.enq-side { overflow-y: auto; overscroll-behavior: contain; }

.enq-x {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--enq-line); border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--olive-950);
  box-shadow: 0 1px 3px rgba(28,34,16,.10);
  transition: background .12s ease, border-color .12s ease;
}
.enq-x:hover { background: var(--bone); border-color: var(--enq-edge); }
.enq-x:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.enq-x svg { display: block; }

/* ---- Paneel van de specialist ------------------------------------------- */
.enq-side {
  flex: 0 0 38%; min-width: 0; padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bone); border-right: 1px solid var(--enq-line);
}
.enq-photos { position: relative; flex: none; }
/* Portret 4:5. Is het scherm laag, dan wordt het vak lager en snijdt
   object-fit wat van onder en boven af; het gezicht blijft in beeld. */
.enq-photo {
  position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 46vh;
  border-radius: 12px; overflow: hidden; background: var(--sand);
}
.enq-photo img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 28%;
}
/* De tweede foto als kleiner portret in de hoek van de eerste. */
.enq-photo-2 {
  position: absolute; right: 12px; bottom: 12px; width: 34%; aspect-ratio: 4 / 5;
  border-radius: 10px; overflow: hidden; background: var(--sand);
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(16,19,10,.28);
}
.enq-photo-2[hidden] { display: none; }
.enq-photo-2 img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 45% 30%; }
.enq-side-h {
  margin: 4px 0 0; font: 700 1.14rem/1.25 var(--font-ui); letter-spacing: -.005em; color: var(--olive-950);
}
/* Alleen op de telefoon, waar de vertrouwensregels wegvallen. */
.enq-side-sub { display: none; margin: 0; font: 500 .82rem/1.3 var(--font-ui); color: var(--ink-soft); }
.enq-side-txt { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.enq-side .enq-trust { flex-direction: column; gap: 8px; margin: 2px 0 0; }

/* ---- Formulierpaneel ---------------------------------------------------- */
/* Kolom: kop, teller, de stap (scrolt), en onderaan Terug/Volgende. */
.enq-main {
  flex: 1 1 62%; min-width: 0; display: flex; flex-direction: column;
  padding: 28px var(--enq-px) 0; overflow-y: auto; overscroll-behavior: contain;
}
.enq-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 8px 14px; padding-right: 46px; margin-bottom: 14px; flex: none;
}
.enq-main.is-done .enq-head { display: none; }

.enq-form { margin: 0; container-type: inline-size; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; }

/* Teller: "Step 2 of 5" en vijf streepjes. */
.enq-prog { flex: none; display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.enq-prog-txt { margin: 0; flex: none; font: 600 .84rem/1.2 var(--font-ui); color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.enq-dots { flex: 0 1 180px; display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.enq-dots li { flex: 1; height: 4px; border-radius: 2px; background: var(--enq-line);
  transition: background .2s ease; }
.enq-dots li.is-done, .enq-dots li.is-on { background: var(--olive-800); }

/* De stap. Scrollt zelf, tot de randen van het paneel, zodat de schuifbalk
   rechts tegen de rand staat en focusringen niet worden afgesneden. */
.enq-steps {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 calc(-1 * var(--enq-px)); padding: 6px var(--enq-px) 22px;
}
.enq-pane { margin: 0; padding: 0; border: 0; min-width: 0; animation: enq-pane .2s ease-out; }
.enq-pane[hidden] { display: none; }
@keyframes enq-pane { from { opacity: 0; } }
/* De legend zweeft, anders zet de browser hem in de rand van de fieldset;
   de ruimte eronder zit in zijn padding (marge erna verdwijnt in clear). */
.enq-q { display: block; float: left; width: 100%; padding: 0 0 14px; margin: 0; }
.enq-q + * { clear: both; }
.enq-q-h {
  margin: 0; padding-top: 4px; font-size: clamp(1.32rem, 2.3vw, 1.6rem); font-weight: 700;
  line-height: 1.18; letter-spacing: -.01em; color: var(--olive-950); text-wrap: balance;
}
.enq-q-h:focus { outline: none; }
.enq-hint { display: block; margin: 6px 0 0; font: 500 .92rem/1.4 var(--font-ui); color: var(--ink-soft); }

/* Onderaan vast. */
.enq-foot {
  flex: none; margin: 0 calc(-1 * var(--enq-px)); padding: 14px var(--enq-px) 18px;
  border-top: 1px solid var(--enq-line); background: #fff;
}
.enq-nav { display: flex; align-items: center; gap: 12px; }
.enq-nav [hidden] { display: none !important; }
.enq-next, .enq-submit {
  margin-left: auto; min-width: 168px; min-height: 50px; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 1.02rem; letter-spacing: .01em; text-align: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 16px rgba(192,90,46,.22);
}
.enq-next:focus-visible, .enq-submit:focus-visible { outline: 3px solid var(--olive-950); outline-offset: 3px; }
.enq-submit[disabled] { opacity: .65; cursor: default; transform: none; }
.enq-back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 0 -10px;
  padding: 0 12px 0 6px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: 600 1rem/1 var(--font-ui); color: var(--olive-800);
}
.enq-back .enq-ic { width: 20px; height: 20px; }
.enq-back:hover { background: rgba(102,116,59,.08); color: var(--olive-950); }
.enq-back:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 0; }
.enq-back[disabled] { opacity: .5; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .enq-dlg[open], .enq-dlg[open]::backdrop, .enq-pane { animation: none; }
  .enq-dots li { transition: none; }
}

/* Tablet: iets breder fotopaneel, anders breken de vertrouwensregels af. */
@media (min-width: 700px) and (max-width: 900px) {
  .enq-dlg { --enq-px: 26px; }
  .enq-side { flex-basis: 40%; padding: 22px 20px 20px; }
  .enq-side .enq-trust li { font-size: .8rem; }
  .enq-main { padding-top: 24px; }
}

/* ---- Telefoon: volledig scherm ------------------------------------------ */
/* Bovenin een smalle kop: avatar, één regel over de specialist en de
   stappenteller, op dezelfde zandkleur. Daaronder scrolt de stap, en Terug en
   Volgende staan onderaan vast. Het sluitkruis hangt aan de dialog en blijft
   dus rechtsboven staan. */
@media (max-width: 699px) {
  .enq-dlg {
    --enq-px: 16px;
    width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none;
  }
  @supports (height: 100dvh) { .enq-dlg { height: 100dvh; } }
  .enq-dlg[open] { animation-name: enq-up; animation-duration: .22s; }
  @keyframes enq-up { from { opacity: 0; transform: translateY(24px); } }
  .enq-sheet { flex-direction: column; }
  .enq-x { top: calc(10px + env(safe-area-inset-top)); right: 12px; }
  .enq-side {
    flex: none; overflow: visible;
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-items: center;
    padding: calc(12px + env(safe-area-inset-top)) 64px 4px var(--enq-px);
    border-right: 0;
  }
  .enq-photos { grid-row: 1 / span 2; align-self: center; }
  .enq-photo {
    width: 44px; height: 44px; aspect-ratio: auto; max-height: none; border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
  }
  .enq-photo img {
    position: absolute; left: 50%; top: 50%; width: 230%; height: auto;
    transform: translate(-44%, -31%); object-fit: fill;
  }
  .enq-photo-2, .enq-side-txt, .enq-side .enq-trust { display: none; }
  .enq-side-h { margin: 0; font-size: .98rem; line-height: 1.2; align-self: end; }
  .enq-side-sub { display: block; align-self: start; }

  .enq-main { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
  .enq-main.is-done { overflow-y: auto; }
  .enq-head { display: none; }
  .enq-prog {
    margin: 0; padding: 8px var(--enq-px) 12px;
    background: var(--bone); border-bottom: 1px solid var(--enq-line);
  }
  .enq-dots { flex: 1 1 auto; }
  .enq-steps { margin: 0; padding: 16px var(--enq-px) 24px; }
  .enq-foot { margin: 0; padding: 10px var(--enq-px) calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 16px rgba(28,34,16,.06); }
  .enq-next, .enq-submit { flex: 1 1 auto; min-width: 0; }
  .enq-back { margin-left: -6px; }
}

/* ---- Prijs en belofte ---------------------------------------------------- */
.enq-top-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 8px 14px;
}
.enq-price {
  margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px;
  font-family: var(--font-ui); font-size: .95rem; line-height: 1.2; color: var(--ink-soft);
}
.enq-price-amt {
  font-size: 1.85rem; font-weight: 800; letter-spacing: -.015em; color: var(--olive-950);
  font-variant-numeric: tabular-nums;
}
.enq-price abbr { text-decoration: none; }
.enq-price-note { flex-basis: 100%; margin-top: 4px; font-size: .8rem; }
/* De prijs bij het budget staat er alleen op de telefoon, waar de kop weg is. */
.enq-price-mob { display: none; }
@media (max-width: 699px) {
  .enq-price-mob { display: flex; margin: -2px 0 10px; }
  .enq-price-mob .enq-price-amt { font-size: 1.2rem; }
}
.enq-tag {
  flex: none; margin: 2px 0 0; padding: 5px 11px; border-radius: 999px;
  background: rgba(102,116,59,.13); color: var(--olive-800);
  font: 700 .74rem/1.25 var(--font-ui); letter-spacing: .03em; white-space: nowrap;
}
.enq-trust { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.enq-trust li {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 .82rem/1.3 var(--font-ui); color: var(--olive-800);
}
.enq-ic { flex: none; display: block; }
.enq-trust .enq-ic { color: var(--olive-600); }
.enq-nojs { background: var(--sand); border-radius: 10px; padding: 14px 16px; font-size: .95rem; }

/* ---- Velden ------------------------------------------------------------- */
.enq-form input, .enq-form textarea, .enq-form button { font-family: var(--font-ui); }
.enq-form ::placeholder { color: var(--ink-soft); opacity: .9; }
.enq-form input, .enq-form textarea { scroll-margin: 24px 0; }
.enq-form input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.enq-form input[type=number]::-webkit-inner-spin-button,
.enq-form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Tegels voor de langere keuzes (stap 1 en 4): een onzichtbare checkbox of
   radioknop over de hele tegel, met een vinkje of bolletje vooraan. */
.enq-opts { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 4px; }
.enq-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.enq-opt input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.enq-opt-face {
  display: flex; align-items: center; gap: 12px; height: 100%; min-height: 52px; padding: 10px 14px;
  border: 1.5px solid var(--enq-edge); border-radius: 12px; background: #fff;
  font: 600 .95rem/1.3 var(--font-ui); color: var(--ink);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.enq-opt-mark {
  position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--enq-edge); background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.enq-opt-radio .enq-opt-mark { border-radius: 50%; }
.enq-opt:hover .enq-opt-face { border-color: var(--olive-950); }
.enq-opt input:checked + .enq-opt-face {
  border-color: var(--olive-950); background: rgba(102,116,59,.09); box-shadow: inset 0 0 0 1px var(--olive-950);
}
.enq-opt input:checked + .enq-opt-face .enq-opt-mark { background: var(--olive-950); border-color: var(--olive-950); }
.enq-opt-checkbox input:checked + .enq-opt-face .enq-opt-mark::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.enq-opt-radio input:checked + .enq-opt-face .enq-opt-mark::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
.enq-opt input:focus-visible + .enq-opt-face { outline: 3px solid var(--terracotta); outline-offset: 2px; }
@container (min-width: 440px) {
  .enq-opts { grid-template-columns: 1fr 1fr; }
}

/* Het wensenveld: het grootste element van stap 1. */
.enq-wish { margin-top: 20px; }
.enq-wish > label {
  display: block; margin: 0 0 8px; font: 700 1.06rem/1.3 var(--font-ui); color: var(--olive-950);
}
.enq-form .enq-wish textarea { min-height: 108px; }
.enq-count { margin: 6px 0 0; text-align: right; font: 500 .8rem/1.3 var(--font-ui); color: var(--ink-soft); }
.enq-count:empty { display: none; }

/* Het omlijnde blok, zoals de datum- en gastenkaart van een boekingssite.
   Elk vak is helemaal het invoerveld; het label ligt erbovenop. */
.enq-box {
  margin: 0; padding: 0; min-width: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--enq-edge); border-radius: 12px; background: #fff;
}
.enq-box-guests { grid-template-columns: 1fr; margin-top: 16px; }
.enq-cell { position: relative; min-width: 0; border-radius: 10px; }
.enq-cell-date { border-radius: 10px 0 0 10px; }
.enq-cell-nights { border-left: 1px solid var(--enq-edge); border-radius: 0 10px 10px 0; }
.enq-cell > label, .enq-cell-label {
  font: 700 .7rem/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive-950);
}
.enq-cell > label { position: absolute; top: 11px; left: 14px; pointer-events: none; }
.enq-form .enq-cell input {
  display: block; width: 100%; min-width: 0; height: 62px; margin: 0;
  padding: 25px 14px 9px; border: 0; border-radius: inherit; background: transparent;
  font-size: 16px; line-height: 1.3; color: var(--ink); outline: 2px solid transparent;
}
.enq-cell:focus-within { box-shadow: inset 0 0 0 2px var(--terracotta); }
.enq-cell:has(.is-invalid):not(:focus-within) { box-shadow: inset 0 0 0 2px var(--terracotta-dark); }
.enq-cell input:focus-visible { outline: 2px solid transparent; }

/* Datumveld: een echte <input type=date>, met "Add date" eroverheen zolang hij
   leeg is. Leeg en zonder focus is de eigen datumnotatie onzichtbaar. */
.enq-form .enq-cell-date input { -webkit-appearance: none; appearance: none; cursor: pointer; }
.enq-cell-date input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.enq-cell-date input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; margin-left: 4px; }
.enq-cell-date.is-empty input:not(:focus),
.enq-cell-date.is-empty input:not(:focus)::-webkit-datetime-edit { color: transparent; }
.enq-ph {
  display: none; position: absolute; left: 14px; bottom: 10px; pointer-events: none;
  font: 400 16px/1.3 var(--font-ui); color: var(--ink-soft);
}
.enq-cell-date.is-empty input:not(:focus) ~ .enq-ph { display: block; }

/* Gasten: tellers met een min- en plusknop. */
.enq-guests { padding: 12px 14px 6px; }
.enq-guests .enq-cell-label { margin: 0 0 2px; }
.enq-steppers { display: grid; gap: 0 28px; }
.enq-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.enq-step + .enq-step { border-top: 1px solid var(--enq-line); }
.enq-step > label { font: 600 1rem/1.2 var(--font-ui); color: var(--ink); }
.enq-step-ctl { display: flex; align-items: center; gap: 2px; flex: none; }
.enq-step-btn {
  width: 44px; height: 44px; padding: 0; margin: 0; flex: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--enq-edge); background: #fff; color: var(--olive-950);
  transition: border-color .12s ease, background .12s ease;
}
.enq-step-btn:hover { border-color: var(--olive-950); background: rgba(102,116,59,.06); }
.enq-step-btn:active { background: rgba(102,116,59,.14); }
.enq-step-btn[aria-disabled=true] { opacity: .35; cursor: not-allowed; }
.enq-step-btn[aria-disabled=true]:hover { border-color: var(--enq-edge); background: #fff; }
.enq-step-btn:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.enq-step-btn .enq-ic { width: 16px; height: 16px; }
.enq-form .enq-step input {
  width: 2.6em; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: transparent; text-align: center; font-size: 17px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.enq-form .enq-step input:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 0; }

.enq-ages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 4px; padding: 10px 0 6px; border-top: 1px solid var(--enq-line); }
.enq-ages[hidden] { display: none; }
.enq-ages label { font: 600 .95rem/1.2 var(--font-ui); color: var(--ink); flex: none; }
.enq-form .enq-ages input { flex: 1 1 180px; min-width: 0; }

/* Twee tellers naast elkaar zodra er ruimte is. */
@container (min-width: 480px) {
  .enq-steppers { grid-template-columns: 1fr 1fr; }
  .enq-step { min-height: 48px; }
  .enq-step + .enq-step { border-top: 0; }
}

/* Schakelaar voor flexibele datums. Een gewone checkbox met role=switch. */
.enq-switch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 8px 0 4px;
  cursor: pointer; font: 500 .95rem/1.3 var(--font-ui); color: var(--ink);
}
.enq-switch input {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0;
  width: 42px; height: 26px; border-radius: 999px; cursor: pointer;
  background: rgba(38,41,28,.24); transition: background .15s ease;
}
.enq-switch input::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease;
}
.enq-switch input:checked { background: var(--olive-800); }
.enq-switch input:checked::before { transform: translateX(16px); }

/* Groep binnen een stap (maand, budget): een kleine kop en dan de pillen. */
.enq-sub { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.enq-sub > legend, .enq-field > label {
  display: block; padding: 0; margin: 0 0 8px;
  font: 600 .95rem/1.3 var(--font-ui); color: var(--olive-950);
}
.enq-sub > legend span, .enq-field > label span { font-weight: 400; color: var(--ink-soft); }

/* Pillen: radioknoppen over een afgerond label. Gezelschap en budget wrappen
   en rekken dan op tot een volle rij, dat oogt als een raster. */
.enq-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.enq-pill { position: relative; display: block; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.enq-pill input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.enq-pill span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--enq-edge); border-radius: 999px; background: #fff;
  font: 600 .9rem/1 var(--font-ui); color: var(--ink); white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.enq-pill:hover span { border-color: var(--olive-950); }
.enq-pill input:checked + span { background: var(--olive-950); border-color: var(--olive-950); color: var(--bone); }
.enq-pill input:focus-visible + span { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.enq-budget.is-long .enq-pill:first-child { flex-basis: 100%; }
@container (max-width: 479px) {
  .enq-budget .enq-pill:first-child { flex-basis: 100%; }
  .enq-pill span { padding: 0 10px; }
}

/* Maanden als raster: op smal vier kolommen, "Not sure yet" en "Next year"
   elk twee breed (4 rijen van 4); op breed acht kolommen (2 rijen van 8). */
.enq-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.enq-months .enq-pill:first-child, .enq-months .enq-pill:last-child { grid-column: span 2; }
.enq-months .enq-pill span { padding: 0 6px; }
@container (min-width: 480px) {
  .enq-months { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Samenvatting boven de gegevens in stap 5. */
.enq-recap {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 12px; background: var(--panel, #EFE6D2);
  font: 500 .95rem/1.45 var(--font-ui); color: var(--ink);
}
.enq-recap[hidden] { display: none; }
.enq-recap strong { display: block; margin-bottom: 2px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }

/* Contactgegevens. */
.enq-grid { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.enq-field { margin-bottom: 12px; min-width: 0; }
.enq-form input[type=text], .enq-form input[type=email], .enq-form input[type=tel], .enq-form textarea {
  display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0;
  font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--ink);
  background: #fff; border: 1.5px solid var(--enq-edge); border-radius: 10px;
  padding: 11px 14px; transition: border-color .12s ease, box-shadow .12s ease;
}
.enq-form textarea { resize: none; overflow-y: hidden; min-height: 72px; max-height: 320px; line-height: 1.5; }
.enq-form input[type=text]:hover, .enq-form input[type=email]:hover,
.enq-form input[type=tel]:hover, .enq-form textarea:hover { border-color: rgba(38,41,28,.5); }
.enq-form input[type=text]:focus-visible, .enq-form input[type=email]:focus-visible,
.enq-form input[type=tel]:focus-visible, .enq-form textarea:focus-visible {
  border-color: var(--terracotta); box-shadow: var(--enq-ring); outline: 2px solid transparent;
}
.enq-form .is-invalid { border-color: var(--terracotta-dark); }
.enq-form .is-invalid:not(:focus) { box-shadow: 0 0 0 1px var(--terracotta-dark); }
.enq-form .enq-cell input.is-invalid { box-shadow: none; }
.enq-switch input:focus-visible, .enq-check input:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

.enq-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer;
  font-family: var(--font-ui); font-size: .95rem; color: var(--ink); }
.enq-check input { accent-color: var(--terracotta); width: 22px; height: 22px; margin: 0; flex: none; }
.enq-consent { align-items: flex-start; font-family: var(--font-body); font-size: .88rem;
  line-height: 1.5; margin: 2px 0 6px; padding: 4px 0; color: var(--ink-soft); }
.enq-consent input { margin-top: 1px; }
.enq-consent input.is-invalid { outline: 2px solid var(--terracotta-dark); outline-offset: 2px; box-shadow: none; }
.enq-err { font-family: var(--font-ui); font-size: .88rem; font-weight: 600;
  color: var(--terracotta-dark); margin: 6px 0 0; }
/* Leeg maar niet display:none, anders kondigt een schermlezer de melding niet aan. */
.enq-err:empty { margin: 0; }
.enq-err-consent:not(:empty) { margin: -2px 0 6px 34px; }

.enq-status { font-family: var(--font-ui); font-size: .95rem; margin: 0 0 12px; }
.enq-status:empty { margin: 0; }
/* De knop zegt al "Sending…"; de regel is er voor schermlezers. */
.enq-status.is-sending { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.enq-status.is-bad {
  padding: 12px 14px; border-radius: 10px; line-height: 1.5;
  background: #FBEEE7; border: 1px solid rgba(168,74,36,.32);
  color: var(--terracotta-dark); font-weight: 600;
}
.enq-fine { margin: 10px auto 0; text-align: center;
  font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.enq-fine[hidden] { display: none; }
.enq-alt { font-size: .88rem; color: var(--ink-soft); margin: 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--enq-line); }

/* Buiten beeld maar niet display:none, anders slaat een deel van de bots hem over. */
.enq-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Naam en e-mail naast elkaar zodra het formulierpaneel breed genoeg is. */
@container (min-width: 440px) {
  .enq-grid { grid-template-columns: 1fr 1fr; }
  .enq-span { grid-column: 1 / -1; }
}

/* ---- Verstuurd ---------------------------------------------------------- */
/* Vervangt het formulier; de kop met de prijs verdwijnt dan ook. */
.enq-done {
  display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: start;
  background: #F2F4EA; border: 1px solid rgba(102,116,59,.28); border-radius: 12px;
  padding: 22px 20px; margin: 20px 0 28px;
}
.enq-done:focus { outline: none; }
.enq-done:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.enq-done-icon {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--olive-800); color: #fff;
}
.enq-done-icon .enq-ic { width: 20px; height: 20px; }
.enq-done h3 { margin: 7px 0 6px; font-size: 1.25rem; }
.enq-done p { margin: 0; font-size: .97rem; }
.enq-done-email { font-weight: 600; overflow-wrap: anywhere; }
.enq-done ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.enq-done li { position: relative; padding-left: 18px; font-size: .93rem; line-height: 1.5; color: var(--ink); }
.enq-done li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--olive-600); }
.enq-done-close {
  display: inline-flex; align-items: center; min-height: 44px; margin: 16px 0 0; padding: 0 20px;
  border: 1.5px solid var(--enq-edge); border-radius: 12px; background: #fff; cursor: pointer;
  font: 600 .95rem/1 var(--font-ui); color: var(--olive-950);
}
.enq-done-close:hover { border-color: var(--olive-950); }
.enq-done-close:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
/* Telefoon: icoon naast de kop, de tekst eronder over de volle breedte. */
@media (max-width: 699px) {
  .enq-done { padding: 18px 16px; margin: 16px; }
  .enq-done-body { display: contents; }
  .enq-done-icon { width: 36px; height: 36px; }
  .enq-done h3 { align-self: center; margin: 0; }
  .enq-done p, .enq-done ul, .enq-done-close { grid-column: 1 / -1; }
  .enq-done p { margin-top: 12px; }
  .enq-done-close { justify-self: start; }
}

/* ---- Kaart bovenaan de zijkolom ---------------------------------------- */
/* Op mobiel staat de zijkolom ná het artikel, dus deze kaart precies waar
   vroeger het formulier stond. Hij blijft daar zichtbaar (ook als terugval
   zonder JavaScript); de vaste balk wijkt zolang hij in beeld is. */
.enq-top {
  background: #fff; border: 1px solid rgba(90,93,76,.16); border-radius: 16px;
  box-shadow: var(--enq-shadow); padding: 18px; display: grid; gap: 12px;
}
.enq-price-sm .enq-price-amt { font-size: 1.55rem; }
/* .btn is gemaakt voor links; als <button> mist hij rand en cursor. */
.enq-open { border: 0; cursor: pointer; }
.enq-open:focus-visible { outline: 3px solid var(--olive-950); outline-offset: 3px; }
.enq-top .enq-open { display: block; width: 100%; text-align: center; min-height: 50px; border-radius: 12px; }
.enq-top-who { display: flex; align-items: center; justify-content: center; gap: 10px; }
.enq-top-who p {
  margin: 0; display: grid; font: 600 .84rem/1.3 var(--font-ui); color: var(--ink);
}
.enq-top-who span { font-weight: 500; font-size: .8rem; color: var(--ink-soft); }
/* Rond avatartje uit dezelfde portretfoto: ingezoomd op het gezicht in plaats
   van het hele portret in een rondje te persen. */
.enq-ava {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden; background: var(--sand); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--enq-line);
}
.enq-ava img {
  position: absolute; left: 50%; top: 50%; width: 230%; height: auto; max-width: none;
  transform: translate(-44%, -31%);
}

/* ---- Vaste balk onderin op mobiel --------------------------------------- */
/* JS toont hem pas na de eerste scroll en verbergt hem zodra het formulier in
   beeld is. */
.enq-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--olive-950); box-shadow: 0 -4px 16px rgba(0,0,0,.18); }
.enq-bar[hidden] { display: none; }
.enq-bar-text { display: grid; min-width: 0; line-height: 1.25; }
.enq-bar-price, .enq-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.enq-bar-price { color: rgba(246,240,226,.85); font: 500 .82rem/1.3 var(--font-ui); }
.enq-bar-price strong { color: #fff; font-size: 1.05rem; font-weight: 800; }
.enq-bar-name { color: var(--bone); font-family: var(--font-ui); font-weight: 600; font-size: .95rem; }
.enq-bar-text.has-price .enq-bar-name { font-size: .78rem; font-weight: 500; opacity: .8; }
.enq-bar .enq-open { flex: none; min-height: 44px; padding-inline: 18px; }
@media (min-width: 900px) { .enq-bar { display: none !important; } }