/* Boekt · boekingsmodule, professioneel & wit */
:root{
  --green:#2C3729;
  --green-2:#3C4A35;
  --moss:#6C795A;
  --ochre:#B0793F;
  --ochre-soft:#C79A6A;
  --ink:#2A241D;
  --muted:#6b6358;
  --line:#e8e3d8;
  --line-2:#d8d2c4;
  --bg:#ffffff;
  --soft:#f7f5ef;
  --soft-2:#f1eee5;
  --sand:#ECE5D6;
  --sand-deep:#E3DAC6;
  --paper:#F7F2E8;
  --radius-card:28px 6px 28px 6px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pine:#2C3729;
  --gut:clamp(1.15rem,5vw,2.75rem);
  --ok:#3f7d4f;
  --busy:#c9c2b4;
  --radius:16px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --shadow:0 18px 50px -28px rgba(44,55,41,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--sand)}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.01em}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
.page{min-height:60vh}
.page-in{padding-block:clamp(1.6rem,4vw,2.6rem) clamp(2.5rem,6vw,4rem)}

/* ===== Bovenbalk, exact zoals op de website (solide variant) ===== */
.site-header{position:sticky;top:0;z-index:60;background:rgba(236,229,214,.9);backdrop-filter:saturate(140%) blur(10px);box-shadow:0 1px 0 var(--line);padding-block:.7rem}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.32rem;font-weight:500;color:var(--pine);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand b{font-weight:500}
.brand span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);opacity:.85;display:block;line-height:1}
/* Adults only: een klein kenmerk onder de merknaam, in de kleur van de balk zelf
   zodat het op een foto en na het scrollen even goed leesbaar blijft. */
.brand-aonly{align-self:flex-start;margin-top:.3rem;font-size:.55rem;letter-spacing:.18em;
  border:1px solid currentColor;border-radius:999px;padding:.15rem .45rem;opacity:.75;color:inherit}
.nav-links{display:flex;align-items:center;gap:1.9rem;list-style:none}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--ink);opacity:.92;position:relative;padding-block:.3em}
.nav-links a:hover{text-decoration:none}
.nav-links a::after{content:"";position:absolute;left:0;bottom:.05em;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);opacity:.7}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:1.1rem}
.lang{display:flex;gap:.5rem;align-items:center;font-size:.78rem;font-weight:600;letter-spacing:.04em}
.lang a{color:var(--ink);opacity:.6;transition:opacity .25s}
.lang a:hover{opacity:1;text-decoration:none}
.lang a.active{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ochre);text-decoration-thickness:2px}
.nav .btn-header{display:inline-flex}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;align-items:center;justify-content:center}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:background .3s}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:inherit;transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-toggle span::before{top:-7px}
.menu-toggle span::after{top:7px}
body.menu-open .menu-toggle span{background:transparent}
body.menu-open .menu-toggle span::before,body.menu-open .menu-toggle span::after{background:#fff}
body.menu-open .menu-toggle span::before{top:0;transform:rotate(45deg)}
body.menu-open .menu-toggle span::after{top:0;transform:rotate(-45deg)}
.mobile-menu{display:none}
@media (max-width:880px){
  .nav-links,.lang,.nav .btn-header{display:none}
  .menu-toggle{display:flex}
  .mobile-menu{position:fixed;inset:0;z-index:50;background:var(--pine);color:var(--sand);display:flex;flex-direction:column;justify-content:center;padding:var(--gut);gap:.4rem;transform:translateY(-100%);transition:transform .5s var(--ease)}
  body.menu-open .mobile-menu{transform:translateY(0)}
  body.menu-open{overflow:hidden}
  .mobile-menu a.m-link{font-family:var(--serif);font-size:2rem;font-weight:400;color:var(--paper);padding-block:.4rem;border-bottom:1px solid rgba(247,242,232,.12)}
  .mobile-menu a.m-link:hover{text-decoration:none}
  .mobile-menu .m-actions{display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem}
  /* Het paneel heeft dezelfde kleur als de vulling van de knop, waardoor
     Reserveren als kale tekst las en WhatsApp als enige een kader had.
     Vaste lichte waarden, zodat dit bij elk kleurpalet klopt. */
  .mobile-menu .m-actions .btn{color:var(--sand)}
  .mobile-menu .m-actions .btn-fill{background:transparent;border-color:rgba(247,242,232,.45)}
  .mobile-menu .m-actions .btn-ghost-light{background:transparent;border-color:transparent;backdrop-filter:none}
  .mobile-menu .m-lang{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.8rem;font-size:.85rem;letter-spacing:.05em;color:rgba(247,242,232,.7)}
  .mobile-menu .m-lang a{color:rgba(247,242,232,.7)}
  .mobile-menu .m-lang a:hover{text-decoration:none;color:var(--paper)}
  .mobile-menu .m-lang a.active{color:var(--ochre-soft);font-weight:600}
}

/* footer, zoals op de website */
.site-footer{background:var(--green);color:rgba(247,242,232,.78);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:680px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.foot-brand .brand{color:var(--paper);font-size:1.5rem}
.foot-brand p{margin-top:1rem;max-width:34ch;font-size:.92rem;color:rgba(247,242,232,.6)}
.foot-col h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre-soft);font-weight:600;margin-bottom:1rem}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.foot-col a,.foot-col li{font-size:.94rem;color:rgba(247,242,232,.78)}
.foot-col a:hover{color:var(--paper)}
.socials{display:flex;gap:.6rem;margin-top:1.2rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(247,242,232,.22);display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
.socials a:hover{background:rgba(247,242,232,.1);border-color:rgba(247,242,232,.5)}
.socials svg{width:18px;height:18px;fill:rgba(247,242,232,.85)}
.foot-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(247,242,232,.14);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem;color:rgba(247,242,232,.55)}
.foot-bottom a{color:rgba(247,242,232,.55)}
.foot-bottom a:hover{color:var(--paper)}

/* WhatsApp float (zelfde als op de homepage) */
.wa-float{position:fixed;right:1.1rem;bottom:1.1rem;z-index:55;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);transition:transform .3s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* headings */
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ochre)}
.h-xl{font-size:clamp(1.9rem,4.5vw,2.9rem);margin:.4rem 0 .6rem}
.lead{color:var(--muted);font-size:1.05rem;max-width:60ch}
.lead-full{max-width:none}

/* full-bleed helper: breekt uit de gecentreerde .wrap naar volledige breedte */
.fullbleed{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw}

/* groene, asymmetrische accommodatie-blokken (zoals op de website) */
.huis-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:clamp(1.5rem,4vw,2.5rem)}
@media(min-width:680px){.huis-grid{grid-template-columns:repeat(3,1fr)}}
.huis{
  background:var(--green);
  border:1px solid transparent;
  border-radius:var(--radius-card);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.huis:hover{transform:translateY(-6px);border-color:var(--ochre-soft);box-shadow:0 26px 60px -30px rgba(44,55,41,.55);text-decoration:none}
.huis-img{position:relative;aspect-ratio:5/4;overflow:hidden}
.huis-lm{position:absolute;left:0;right:0;bottom:0;background:rgba(176,121,63,.92);color:#fff;text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.55em .8em;backdrop-filter:blur(2px)}
.huis-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.huis:hover .huis-img img{transform:scale(1.05)}
.huis-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.3rem}
.huis-stars{display:block;font-size:.95rem;color:var(--ochre-soft);letter-spacing:.14em;line-height:1;white-space:nowrap;margin-top:.45rem}
.huis h3{font-size:1.9rem;color:var(--paper);font-weight:400;margin:.1rem 0 .5rem}
.huis-specs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.1rem 0}
.huis-specs li{list-style:none;font-size:.76rem;color:rgba(247,242,232,.85);border:1px solid rgba(247,242,232,.2);border-radius:8px;padding:.25em .6em}
.huis-prijs{font-family:var(--serif);color:var(--paper);font-size:1.05rem;margin:.5rem 0 .15rem}
.huis-prijs b{color:var(--ochre-soft);font-weight:500}
.huis-link{font-weight:600;font-size:.9rem;color:var(--ochre-soft);display:inline-flex;align-items:center;gap:.45em}
.huis-link svg{transition:transform .3s var(--ease)}
.huis:hover .huis-link svg{transform:translateX(4px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:.8em 1.4em;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-fill{background:var(--knop,var(--green));background-image:none;color:#fff;box-shadow:none;border-color:var(--knop,var(--green))}
.btn-fill:hover{background:var(--knop-2,var(--green-2));border-color:var(--knop-2,var(--green-2))}
.btn-line{background:#fff;color:var(--green);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--green)}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* detail pagina layout: links info, rechts boeken */
.detail-grid{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start;margin-top:1rem}
@media(min-width:960px){
  .detail-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr);grid-template-rows:auto 1fr}
  .detail-info{grid-column:1;grid-row:1 / 3}
  .detail-praktisch{grid-column:2;grid-row:1;align-self:start}
}
.detail-info{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.detail-gallery{display:flex;flex-direction:column}
.detail-title{padding:.2rem 0}
.unit-stars{color:var(--ochre-soft);font-family:var(--sans);font-size:1.1rem;vertical-align:middle;letter-spacing:.06em}
.detail-panel h2{font-size:1.2rem;color:var(--green);margin-bottom:.6rem}
.detail-desc{margin-top:.5rem}
.detail-line{color:var(--muted);font-size:.96rem;line-height:1.65;margin-top:.7rem}
.detail-line:first-child{margin-top:0}
.detail-feats{list-style:none;margin:.6rem 0;display:grid;gap:.45rem}
.detail-feats li{display:flex;gap:.6em;align-items:flex-start;color:var(--muted);font-size:.93rem}
.detail-feats li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--ochre-soft);margin-top:.5em}
.amen-group{margin-top:.9rem}
.amen-group:first-of-type{margin-top:1.1rem}
.amen-cat{font-family:var(--serif);font-weight:600;font-size:.95rem;letter-spacing:-.01em;text-transform:none;color:var(--green);margin-bottom:.4rem}
.amen-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.45rem .8rem;margin-top:.3rem}
.amen-list li{display:flex;align-items:center;gap:.6em;font-size:.96rem;color:var(--muted)}
.amen-ic{flex:0 0 auto;display:inline-flex;color:var(--ink)}
.amen-ic svg{width:16px;height:16px;display:block}
/* highlights: 3 blokjes onder de omschrijving */
.usp-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:0;padding:0}
.usp{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.usp-ic{color:var(--green)}
.usp-ic svg{width:26px;height:26px;display:block}
.usp b{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--ink)}
.usp span{font-size:.85rem;color:var(--muted);line-height:1.45}

.detail-book{display:flex;flex-direction:column}
@media(min-width:960px){.detail-book{grid-column:2;grid-row:2;align-self:start;position:sticky;top:84px}}
/* Stap 2 (gegevens + overzicht) over de volle breedte: de accommodatieblokken
   links verdwijnen en het boekingsblok komt gecentreerd in de vrijgekomen ruimte. */
.detail-grid.book-wide .detail-info,
.detail-grid.book-wide .detail-praktisch{display:none}
.detail-grid.book-wide .detail-book{max-width:1040px;width:100%;margin-inline:auto}
@media(min-width:960px){
  .detail-grid.book-wide{grid-template-columns:1fr;grid-template-rows:auto}
  .detail-grid.book-wide .detail-book{grid-column:1;grid-row:1;position:static;top:auto}
}
/* Twee kolommen op de brede pagina: links het overzicht, rechts de gegevens en
   het akkoord. Op smal scherm stapelen ze: eerst gegevens, dan overzicht, dan akkoord. */
.book-grid{display:grid;gap:1.1rem}
@media(min-width:820px){
  .book-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
  .book-b-info{grid-column:1;grid-row:1 / span 2}
  .book-b-form{grid-column:2;grid-row:1}
  .book-b-agree{grid-column:2;grid-row:2}
}

/* gallery */
.ug-main{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--soft-2);box-shadow:var(--shadow)}
.ug-main img{width:100%;height:100%;object-fit:cover;display:block}
.ug-thumbs{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;padding-bottom:.3rem}
.ug-thumb{flex:0 0 auto;width:74px;height:54px;border-radius:9px;overflow:hidden;border:2px solid transparent;background:none;cursor:pointer;padding:0;line-height:0}
.ug-thumb img{width:100%;height:100%;object-fit:cover}
.ug-thumb:hover{border-color:var(--ochre-soft)}
.ug-thumb.on{border-color:var(--ochre)}

/* specs-balk (gasten / slaapkamers / m²), stijl à la apartmentsite */
.spec-row{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;margin-top:.9rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft)}
.spec-row li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;text-align:center;padding:.55rem .4rem;border-right:1px solid var(--line)}
.spec-row li:last-child{border-right:0}
.spec-ic{color:var(--ochre)}
.spec-ic svg{width:18px;height:18px;display:block}
.spec-row b{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--green);line-height:1}
.spec-lbl{font-size:.72rem;color:var(--muted);font-weight:500}

/* lines (praktisch) */
.u-lines{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.u-lines li{display:flex;align-items:center;gap:.6rem;color:var(--ink);font-size:.97rem}
.u-lines li svg{width:18px;height:18px;color:var(--ochre);flex:0 0 auto}
.u-lines li b{font-weight:600}
.u-prices{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1rem}
.u-prices h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ochre);margin-bottom:.55rem;font-weight:700}
.u-prices ul{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.u-prices li{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem}
.u-prices li span{color:var(--muted)}
.u-prices li b{color:var(--green);font-weight:600;font-family:var(--serif)}
.u-prices small{color:var(--muted);font-weight:400;font-size:.82em}
.u-prices .lm-tag{display:inline-block;background:var(--ochre);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:.18em .6em;border-radius:100px}
.note{font-size:.86rem;color:var(--muted);margin-top:.5rem}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:1rem}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:clamp(1.1rem,3vw,1.6rem);box-shadow:var(--shadow)}
.panel h2{font-size:1.3rem;color:var(--green);margin-bottom:.3rem}
.panel .sub{color:var(--muted);font-size:.9rem;margin-bottom:1rem}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal-head button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-size:1.1rem;color:var(--green)}
.cal-head button:hover{background:var(--soft)}
.cal-head .mlabel{font-family:var(--serif);font-size:1.1rem;color:var(--green);text-transform:capitalize}
.cal-months{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:560px){.cal-months{grid-template-columns:1fr 1fr}}
.cal{user-select:none}
.cal .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cal .dow span{text-align:center;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.cal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.85rem;border-radius:8px;cursor:pointer;background:var(--soft);color:var(--ink);border:1px solid transparent}
.cal .day.empty{background:transparent;cursor:default}
.cal .day.busy,.cal .day.disabled{background:repeating-linear-gradient(45deg,#eceae3,#eceae3 4px,#e3e0d6 4px,#e3e0d6 8px);color:#b3ab9c;cursor:not-allowed;text-decoration:line-through}
.cal .day.deal{background:rgba(176,121,63,.18);border-color:var(--ochre-soft)}
.cal .day.free:hover{background:var(--ochre-soft);color:#fff}
.cal .day.sel-start,.cal .day.sel-end{background:var(--green);color:#fff;border-color:var(--green)}
.cal .day.in-range{background:var(--ochre-soft);color:#3a2c1a;border-radius:0}
.legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;font-size:.82rem;color:var(--muted)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:.4em;vertical-align:-2px}
.legend .l-free{background:var(--soft);border:1px solid var(--line-2)}
.legend .l-busy{background:repeating-linear-gradient(45deg,#eceae3,#eceae3 4px,#e3e0d6 4px,#e3e0d6 8px)}
.legend .l-sel{background:var(--green)}
.legend .l-deal{background:rgba(176,121,63,.18);border:1px solid var(--ochre-soft)}
.cal-tip{position:fixed;z-index:50;background:var(--green);color:#fff;font-size:.78rem;font-weight:600;padding:.35em .65em;border-radius:7px;pointer-events:none;box-shadow:0 6px 18px -6px rgba(0,0,0,.45);white-space:nowrap}
.info-bubble{position:fixed;z-index:80;background:var(--green);color:#fff;font-size:.82rem;font-weight:600;line-height:1.4;padding:.55em .8em;border-radius:9px;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);max-width:240px;pointer-events:none}
.summary-check{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}

/* inklapbare kalender */
.cal-toggle{display:flex;align-items:center;gap:.8rem;width:100%;margin-top:.6rem;padding:0;background:none;border:0;cursor:pointer;font-family:var(--sans);text-align:left}
.cal-toggle .daterow{flex:1;margin-top:0}
.cal-toggle .datebox{transition:border-color .2s}
.cal-toggle:hover .datebox{border-color:var(--ochre-soft)}
.cal-chev{flex:0 0 auto;display:inline-flex;color:var(--green);transition:transform .3s var(--ease)}
.cal-toggle.open .cal-chev{transform:rotate(180deg)}
.cal-collapse[hidden]{display:none}

/* selected dates summary */
.daterow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.datebox{border:1px solid var(--line-2);border-radius:10px;padding:.6rem .8rem;background:var(--soft)}
.datebox .lbl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.datebox .val{font-size:.98rem;font-weight:600;color:var(--green);min-height:1.4em}

/* fields */
.fields{display:grid;gap:.9rem;grid-template-columns:1fr 1fr;margin-top:.5rem}
.fld{display:flex;flex-direction:column;gap:.3rem}
.fld.full{grid-column:1/-1}
.fld label{font-size:.84rem;font-weight:600;color:var(--green-2)}
.fld input,.fld textarea,.fld select{font-family:var(--sans);font-size:.95rem;padding:.6rem .7rem;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:2px solid var(--ochre-soft);border-color:var(--ochre)}
.fld textarea{min-height:90px;resize:vertical}
.req{color:var(--ochre)}
/* leeftijden van kinderen (toeristenbelasting) */
.fld[hidden]{display:none}
.age-list{display:flex;flex-wrap:wrap;gap:.6rem}
.age-item{display:flex;flex-direction:column;gap:.25rem}
.fld .age-item label{font-size:.75rem;font-weight:500;color:var(--muted)}
.fld .age-item select{width:auto;min-width:76px}
.check{display:flex;gap:.55rem;align-items:flex-start;justify-content:flex-start;text-align:left;font-size:.9rem;color:var(--muted)}
.check input{margin:.2rem 0 0;flex:0 0 auto;width:auto}

/* honeypot: verborgen voor mensen, zichtbaar voor bots (anti-spam) */
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* privacy-popup (gedeeld met de hoofdsite) */
.gb-modal{position:fixed;inset:0;z-index:210;background:rgba(20,26,18,.72);display:none;align-items:center;justify-content:center;padding:1.2rem}
.gb-modal.open{display:flex}
.gb-box{background:var(--paper);width:100%;max-width:760px;max-height:88vh;border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
.gb-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.3rem;border-bottom:1px solid var(--line)}
.gb-head h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--green)}
.gb-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer;font-size:1.1rem;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.gb-close:hover{background:var(--sand);border-color:var(--ink)}
.gb-list{overflow-y:auto;padding:1.2rem 1.3rem}
.pv-body h4{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--green);margin:1.3rem 0 .35rem}
.pv-body h4:first-of-type{margin-top:.6rem}
.pv-body p{color:var(--muted);font-size:.95rem;line-height:1.6;margin-bottom:.6rem}
.pv-body .pv-intro{color:var(--ink);font-size:1rem}
.pv-body ul{margin:.2rem 0 .8rem 1.15rem}
.pv-body li{color:var(--muted);font-size:.95rem;line-height:1.55;margin-bottom:.4rem}
.pv-body b{color:var(--green)}
.pv-body a{color:var(--ochre);text-decoration:underline}
.pv-body .pv-update{font-size:.85rem;color:var(--muted);font-style:italic;margin-top:1rem}
.steps-n{display:flex;align-items:center;gap:.4rem}
.steps-n button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-size:1.1rem}
.steps-n input{width:56px;text-align:center}

/* twee-stappen flow */
.step-back{display:inline-flex;align-items:center;gap:.45em;background:none;border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--green);padding:0 0 .9rem;}
.step-back:hover{color:var(--ochre)}
.recap-row{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px dashed var(--line);font-size:.94rem}
.recap-row span{color:var(--muted)}
.recap-row b{color:var(--green);font-weight:600}
.recap-price{margin-top:.9rem}

/* price summary */
.summary{}
.sumline{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.92rem;color:var(--ink);border-bottom:1px dashed var(--line)}
.sumline.cost{color:var(--muted)}
.sumtotal{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem;padding-top:.7rem;border-top:2px solid var(--green);font-family:var(--serif);font-size:1.25rem;color:var(--green)}
.sumtotal b{color:var(--ochre);font-weight:600}
.empty-price{color:var(--muted);font-size:.92rem;padding:.6rem 0}

/* alerts */
.alert{border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.92rem}
.alert-err{background:#fbece8;border:1px solid #f0c4b6;color:#8a3318}
.alert-ok{background:#e9f3ec;border:1px solid #bcdcc4;color:#28623a}
.alert ul{margin:.3rem 0 0 1.1rem}

/* thanks */
.thanks{text-align:center;max-width:620px;margin:3rem auto;padding:2.5rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft);box-shadow:var(--shadow)}
.thanks .ic{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;font-size:2rem}
.thanks h1{font-size:2rem;color:var(--green)}
.thanks p{color:var(--muted);margin:1rem 0 1.8rem}

.prose{max-width:70ch}
.prose p{margin-bottom:1rem;color:var(--ink)}

/* ---------- MOBIELE VASTE BOEK-BALK (reserveringspagina) - identiek aan de hoofdpagina ---------- */
.book-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:none;align-items:center;justify-content:center;gap:.7rem;
  padding:.4rem .8rem calc(.4rem + env(safe-area-inset-bottom,0px));
  background:var(--sand);
  border-top:1px solid rgba(42,36,29,.14);
  transform:translateY(120%);transition:transform .35s var(--ease);
}
.book-cta.show{transform:translateY(0)}
.book-cta .btn{justify-content:center;background:var(--knop,var(--green));color:var(--sand);border-color:transparent;font-size:1rem;padding-inline:2.2em;min-width:217px}
.book-cta .btn:hover{background:var(--pine-2,var(--green-2))}
.book-cta .wa-btn{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center}
.book-cta .wa-btn svg{width:24px;height:24px;fill:#fff}
@media (max-width:880px){
  body.has-book-cta .book-cta{display:flex}
  .wa-float.cta-hidden{display:none}
}
body.menu-open .book-cta{transform:translateY(120%)}

/* Mobiel: kalender toont maar 1 maand (tweede maand verbergen) */
@media (max-width:559px){
  #calMonths > .cal:nth-child(2){display:none}
}

/* Mobiel: aankomst/vertrek-datum altijd op 1 regel */
@media (max-width:880px){
  .cal-toggle .datebox .val{white-space:nowrap}
  .cal-toggle .datebox{padding-left:.55rem;padding-right:.55rem}
  .cal-toggle .daterow{gap:.55rem}
}


/* Bekijk meer/minder-knop bij Voorzieningen (alleen zichtbaar op mobiel) */
.amen-more{display:none;margin-top:.9rem;background:none;border:0;padding:.2rem 0;color:var(--green);font-family:var(--sans);font-weight:600;font-size:.95rem;cursor:pointer}
.amen-more:hover{text-decoration:underline}

/* ===== Mobiele opmaak reserveringspagina ===== */
@media (max-width:880px){
  /* USP-blokjes als horizontale balken onder elkaar */
  .usp-grid{grid-template-columns:1fr}
  .usp{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic title" "ic text";align-items:center;column-gap:.9rem;row-gap:.1rem;text-align:left;padding:.9rem 1rem}
  .usp .usp-ic{grid-area:ic}
  .usp b{grid-area:title}
  .usp > span:last-child{grid-area:text}

  /* Voorzieningen flowen achter elkaar (wrap), zowel in- als uitgeklapt */
  .amen-list{display:flex;flex-wrap:wrap;column-gap:.9rem;row-gap:.35rem}
  /* Ingeklapt: 1 per categorie, geen koppen, alles in een doorlopende flow */
  .amen-collapsed{display:flex;flex-wrap:wrap;align-items:center;column-gap:.9rem;row-gap:.35rem}
  .amen-collapsed > h2{flex:0 0 100%;margin-bottom:.1rem}
  .amen-collapsed .amen-more{flex:0 0 100%}
  .amen-collapsed .amen-cat{display:none}
  .amen-collapsed .amen-group{display:contents}
  .amen-collapsed .amen-list{display:contents}
  .amen-collapsed .amen-list li:nth-child(n+2){display:none}
  .amen-more{display:inline-flex}

  /* Prijs per nacht: datum onder de naam, prijs op 1 regel */
  .u-prices li{align-items:flex-start}
  .u-prices li > span{display:flex;flex-direction:column}
  .u-prices li small{margin-top:.15rem}
  .u-prices li b{white-space:nowrap;flex:0 0 auto}
}