/* ============================================================
   Villa Palmview — boekingspaneel (v172): gedeelde stijl voor de
   subpagina's. Bron = homepage (css170 + meerstaps-basis + css91).
   Wijzig hier én in index.html samen.
   ============================================================ */
/* ---------- meerstaps-formulier ---------- */
.bf-progress{display:none;gap:8px;align-items:center;margin:0 0 18px;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.js-steps .bf-progress{display:flex;flex-wrap:wrap}
.bf-progress .pdot{width:26px;height:26px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--stone);
  font-weight:600;background:transparent;color:var(--ink-soft)}
.bf-progress .pdot.done,.bf-progress .pdot.now{background:var(--zellige);
  border-color:var(--zellige);color:var(--sand)}
.bf-progress .plbl{margin-right:10px}
.js-steps .bf-step{display:none}
.js-steps .bf-step.on{display:block}
.bf-step .bf-grid{margin-bottom:0}
.bf-navrow{display:flex;gap:12px;margin-top:18px}
.btn.btn-back{background:transparent;border:1px solid var(--stone);color:inherit}

/* ============ v91 — beschikbaarheid ============ */
.book-form .bf-avail{max-width:none}
.bf-avail{margin:6px 0 0;font-size:.86rem;line-height:1.5;padding:9px 13px;border-radius:12px}
.bf-avail.is-busy{background:rgba(176,92,72,.14);color:#7d3a2c;border:1px solid rgba(176,92,72,.32)}
.bf-avail.is-free{background:rgba(79,114,99,.13);color:#33564a;border:1px solid rgba(79,114,99,.30)}
.book-form .bf-next[disabled]{opacity:.45;cursor:not-allowed}.bf-avail.is-hint{background:transparent;color:var(--ink-soft,#564c41);padding-left:0;padding-right:0;border:0}.bf-avail.is-price{background:rgba(79,114,99,.08);color:#2f4a3e;border:1px dashed rgba(79,114,99,.35);font-variant-numeric:tabular-nums}.bf-flex{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;font-size:.86rem;line-height:1.45;color:var(--ink,#2c2620)}.bf-flex input{margin-top:3px;flex:none}.bf-direct{margin:10px 0 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}.bf-direct small{font-size:.8rem;color:var(--ink-soft,#564c41);max-width:60ch;line-height:1.4}.bf-direct .bf-direct-btn{text-decoration:none}.bf-promo-link{display:inline-block;margin-top:8px;font-size:.9rem;color:#2f4a3e;text-decoration:underline;text-underline-offset:3px}.book-form .is-invalid,.book-form input.is-invalid,.book-form textarea.is-invalid,.book-form select.is-invalid{border-color:#b05c48!important;box-shadow:0 0 0 3px rgba(176,92,72,.16)!important}.bf-avail.is-hint{background:transparent;color:var(--ink-soft,#564c41);padding-left:0;padding-right:0;border:0}.bf-avail.is-price{background:rgba(79,114,99,.08);color:#2f4a3e;border:1px dashed rgba(79,114,99,.35);font-variant-numeric:tabular-nums}.bf-flex{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;font-size:.86rem;line-height:1.45;color:var(--ink,#2c2620)}.bf-flex input{margin-top:3px;flex:none}.book-form .is-invalid,.book-form input.is-invalid,.book-form textarea.is-invalid,.book-form select.is-invalid{border-color:#b05c48!important;box-shadow:0 0 0 3px rgba(176,92,72,.16)!important}
#vpv-availability{margin:6px 0 30px}


/* ============ v170 — boekingspaneel: kalender + formulier ============ */
.book .book-eyebrow{display:block;text-align:center;max-width:none;margin:0 auto}
.book .book-eyebrow::after,.book .book-eyebrow::before{display:none}
.book .book-rates{margin:14px auto 0;font-size:.92rem}
.book .book-rates a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(44,38,32,.35)}
.book .book-rates a:hover{text-decoration-color:var(--zellige)}
.book .book-panel{display:grid;grid-template-columns:1.2fr 1fr;max-width:1060px;margin:38px auto 0;
  background:var(--white);border:1px solid var(--hairline);border-radius:22px;box-shadow:var(--shadow-soft);
  text-align:left;overflow:hidden}
.book .book-panel p{max-width:none;margin:0}
.book-cal{padding:28px 28px 22px;border-right:1px solid var(--hairline)}
.bc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bc-head h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin:0}
.book .book-panel .bc-head p{font-size:.84rem;color:var(--ink-soft);margin-top:2px}
.bc-nav{display:flex;gap:6px;flex:none}
.bc-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--hairline);background:transparent;font-size:1.3rem;cursor:pointer;color:var(--ink);line-height:1}
.bc-nav button:hover:not(:disabled){background:rgba(79,114,99,.12)}
.bc-nav button:disabled{opacity:.3;cursor:default}
.bc-months{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:20px}
.bc-month h4{font-family:var(--serif);font-weight:500;font-size:1.02rem;margin:0 0 10px}
.bc-month h4::first-letter{text-transform:uppercase}
.bc-wd,.bc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.bc-wd span{font-size:.68rem;text-align:center;color:var(--ink-soft);opacity:.7;text-transform:uppercase;letter-spacing:.06em;padding-bottom:4px}
.bc-days button,.bc-days span{height:40px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:.9rem;
  cursor:pointer;color:var(--ink);position:relative;font-variant-numeric:tabular-nums;padding:0}
.bc-days span{cursor:default}
.bc-days button.is-free::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--zellige);transform:translateX(-50%)}
.bc-days button.is-promo.is-free::after{background:#C79A3B}
.bc-days button:hover:not(:disabled){background:rgba(79,114,99,.14)}
.bc-days button:disabled{cursor:default;color:rgba(44,38,32,.32)}
.bc-days button.is-busy{text-decoration:line-through;color:rgba(176,92,72,.6)}
.bc-days button.is-alt{color:rgba(44,38,32,.5)}.bc-days button.is-alt::after{opacity:.35}
.bc-days button.is-in{background:rgba(79,114,99,.12);border-radius:0}
.bc-days button.is-a,.bc-days button.is-b{background:var(--zellige);color:#fff}
.bc-days button.is-a{border-radius:10px 0 0 10px}
.bc-days button.is-b{border-radius:0 10px 10px 0}
.bc-days button.is-a.is-b{border-radius:10px}
.bc-days button:focus-visible{outline:2px solid var(--zellige);outline-offset:1px}
.bc-legend{display:flex;gap:10px 18px;flex-wrap:wrap;margin-top:18px;font-size:.78rem;color:var(--ink-soft)}
.bc-legend span{display:inline-flex;align-items:center;gap:7px}
.bc-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--zellige)}
.bc-legend .l-busy i{width:14px;height:2px;border-radius:0;background:rgba(176,92,72,.6)}
.bc-legend .l-promo i{background:#C79A3B}
.bc-legend .l-sel i{width:14px;border-radius:2px;opacity:.35}
.bc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.book .book-panel .bc-none{font-size:.78rem;color:var(--ink-soft)}
.bc-clear{border:0;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 0}
.bc-clear[hidden]{display:none}
.book .book-panel .book-form{margin:0;max-width:none;background:transparent;border:0;border-radius:0;padding:28px 28px 26px;
  display:flex;flex-direction:column;gap:14px}
.book .book-panel .book-form .form-title{margin:0;font-size:1.15rem;font-weight:500}
.book .book-panel .bf-sub{font-size:.84rem;color:var(--ink-soft);margin-top:-8px}
.book .book-panel .bf-grid input,.book .book-panel .bf-grid textarea{background:var(--sand);border-color:var(--hairline)}
.bf-tiers{grid-column:1/-1;display:flex;gap:8px;margin-top:-4px}
.bf-tiers button{flex:1;border:1px solid var(--hairline);background:transparent;border-radius:999px;padding:8px 6px;font:inherit;font-size:.78rem;cursor:pointer;color:var(--ink-soft);line-height:1.25;letter-spacing:0;text-transform:none}
.bf-tiers button b{display:block;font-weight:600;color:var(--ink);font-size:.86rem}
.bf-tiers button.on{border-color:var(--zellige);background:rgba(79,114,99,.1);color:var(--ink)}
.bf-tiers button:hover{border-color:var(--zellige)}
.bf-tiers button:focus-visible{outline:2px solid var(--zellige);outline-offset:1px}
.book .book-panel .bf-avail{margin:0}
.book .book-panel .bf-avail.is-hint{min-height:1.4em}
.book .book-panel .bf-flex{margin:0}
.book .book-panel .bf-avail.is-price{background:var(--sand);border:0;padding:14px 16px;color:var(--ink);font-size:.9rem;line-height:1.5}
.book .book-panel .bf-direct{display:flex;flex-direction:column;gap:8px}
.book .book-panel .bf-direct small{font-size:.76rem}
.book .book-panel .btn{margin:0;width:100%;text-align:center}
.book .book-panel .bf-step[data-step="1"] .bf-navrow{flex-direction:column;gap:12px;margin-top:4px}
.book .book-panel .bf-or{display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.8;margin:0}
.book .book-panel .bf-or::before,.book .book-panel .bf-or::after{content:"";flex:1;height:1px;background:var(--hairline)}
.book .book-panel .btn-ink:hover{background:rgba(44,38,32,.06);color:var(--ink)}
.book .book-panel .book-form .bf-next[disabled]{opacity:.45}
.book .book-panel .bf-progress{margin:0 0 4px}
.book-form:not(.past1) .bf-progress{display:none}
.book .book-panel #staySummary{margin:0;font-size:.82rem}
.book .book-panel #nightsHint{margin:0;font-size:.82rem}
.book .book-panel .bf-trust{margin:0;font-size:.76rem;line-height:1.5}
.book .book-panel .bf-check,.book .book-panel .bf-consent{margin:0}
.book .book-panel .form-ok,.book .book-panel .form-err{margin:0}
.book .book-panel .form-ok{color:#33564a;background:rgba(79,114,99,.12);border-radius:12px;padding:12px 14px}
.book .book-panel .form-err{color:#7d3a2c}
.book .trust-row{list-style:none;display:flex;justify-content:center;gap:10px 30px;flex-wrap:wrap;margin:26px auto 0;padding:0;font-size:.82rem;color:var(--ink-soft);max-width:900px}
.book .trust-row li::before{content:"\2713";color:var(--zellige);margin-right:7px;font-weight:600}
.book .cta-alt{margin-top:26px;font-size:.9rem;color:var(--ink-soft)}
.book .cta-alt a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(44,38,32,.35)}
.book .cta-alt a.wa{color:#178A45;font-weight:600;text-decoration-color:rgba(23,138,69,.4)}
.book .book-note{margin-top:12px}
@media(max-width:900px){
  .book .book-panel{grid-template-columns:1fr;margin-top:30px}
  .book-cal{border-right:0;border-bottom:1px solid var(--hairline);padding:22px 18px 18px}
  .bc-months{grid-template-columns:1fr}
  .bc-month:nth-child(2){display:none}
  .book .book-panel .book-form{padding:22px 18px 22px}
  .bc-days button,.bc-days span{height:44px}
  .bf-tiers button{font-size:.72rem;padding:8px 4px}
}