/* ============ online booking (nl/contact.html) ============
   Builds on the tokens in style.css. One glass surface holds the flow; the summary
   sits beside it on wide screens and under it on phones. Only transform/opacity animate. */

#boeken{ padding-top:clamp(20px,4vw,40px); }

.bk{
  max-width:1080px; margin:0 auto; padding:clamp(20px,3.5vw,40px);
  border-radius:calc(var(--radius) + 6px); border:1px solid rgba(255,214,235,.18);
  background:linear-gradient(160deg, rgba(21,15,46,.82), rgba(11,15,42,.78));
  backdrop-filter:blur(14px);
  box-shadow:0 40px 90px -40px rgba(255,111,156,.35), 0 18px 40px -24px rgba(0,0,0,.6);
}

/* ---------- step indicator (a real sequence, so numbers are earned) ---------- */
.bk-steps{ list-style:none; display:flex; gap:8px; margin-bottom:clamp(22px,3vw,34px); counter-reset:none; }
.bk-steps li{ flex:1; position:relative; }
.bk-steps li + li::before{
  content:""; position:absolute; left:-8px; width:8px; top:50%; height:1px; background:var(--line);
}
.bk-step-btn{
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px;
  color:var(--muted); font-size:.88rem; font-weight:500; text-align:left;
  transition:transform .15s var(--ease);
}
.bk-step-btn:not([disabled]):active{ transform:scale(.97); }
.bk-step-btn[disabled]{ cursor:default; }
.bk-num{
  flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:.85rem;
}
.bk-steps li.is-current .bk-step-btn{ color:var(--ink); background:rgba(255,255,255,.06); }
.bk-steps li.is-current .bk-num{ background:linear-gradient(135deg,var(--p2),var(--dusk)); border-color:transparent; color:#fff; }
.bk-steps li.is-done .bk-num{ border-color:rgba(255,158,196,.55); color:var(--p1); }
.bk-steps li.is-done .bk-step-btn:not([disabled]):hover{ color:var(--ink); }
.bk.is-finished .bk-steps{ opacity:.55; }

/* ---------- layout ---------- */
.bk-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(20px,3vw,36px); align-items:start; }
.bk.is-finished .bk-layout{ grid-template-columns:minmax(0,1fr); }
.bk.is-finished .bk-summary, .bk.is-finished .bk-demo{ display:none; }
@media (max-width:860px){
  .bk-layout{ grid-template-columns:minmax(0,1fr); }
  .bk-step-btn span:last-child{ font-size:.8rem; }
}
@media (max-width:480px){
  .bk-step-btn{ flex-direction:column; gap:6px; text-align:center; padding:8px 4px; }
}

.bk-panel.bk-enter{ animation:bkIn .24s cubic-bezier(.23,1,.32,1); }
@keyframes bkIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.bk-title{ font-size:clamp(1.35rem,2.6vw,1.8rem); letter-spacing:-.02em; line-height:1.15; margin-bottom:20px; }
.bk-title:focus{ outline:none; }
.bk-status{ color:var(--muted); font-size:.92rem; line-height:1.6; }
.bk-status.is-loading{ animation:bkPulse 1.2s ease-in-out infinite; }
@keyframes bkPulse{ 50%{ opacity:.45; } }

/* shared pressable surface: chips, services, days, slots */
.bk-chip, .bk-service, .bk-day, .bk-slot, .bk-icon-btn{
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink);
  transition:transform .15s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .bk-chip:hover, .bk-service:hover, .bk-day:not([disabled]):hover, .bk-slot:hover, .bk-icon-btn:hover{
    border-color:rgba(255,214,235,.38); background:rgba(255,255,255,.08);
  }
}
.bk-chip:active, .bk-service:active, .bk-day:not([disabled]):active, .bk-slot:active, .bk-icon-btn:active{ transform:scale(.97); }
.bk-chip[aria-pressed="true"], .bk-service[aria-pressed="true"], .bk-day[aria-pressed="true"], .bk-slot[aria-pressed="true"]{
  border-color:rgba(255,158,196,.7);
  background:linear-gradient(135deg, rgba(255,111,156,.22), rgba(138,107,184,.22));
}

/* ---------- step 1 ---------- */
.bk-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.bk-chip{ padding:9px 16px; border-radius:999px; font-size:.88rem; font-weight:500; }
.bk-services{ display:grid; gap:8px; }
.bk-service{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 18px; border-radius:16px; text-align:left; width:100%;
}
.bk-service-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bk-service-name{ font-weight:600; font-size:.98rem; }
.bk-service-meta{ color:var(--muted); font-size:.82rem; }
.bk-service-price{ flex:none; font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; color:var(--gold); white-space:nowrap; }

/* ---------- step 2 ---------- */
.bk-days-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bk-month{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; text-transform:capitalize; }
.bk-days-nav{ display:flex; gap:6px; }
.bk-icon-btn{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; }
.bk-icon-btn svg{ width:18px; height:18px; }
.bk-days{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 12px;
  scrollbar-width:thin; overscroll-behavior-x:contain;
}
.bk-day{
  flex:none; width:64px; padding:10px 0 9px; border-radius:16px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.bk-day-name{ font-size:.75rem; color:var(--muted); }
.bk-day-num{ font-family:'Space Grotesk',system-ui,sans-serif; font-size:1.3rem; font-weight:600; line-height:1.2; }
.bk-day-month{ font-size:.72rem; color:var(--muted); }
.bk-day[disabled]{ opacity:.35; cursor:not-allowed; }
.bk-day[aria-pressed="true"] .bk-day-name, .bk-day[aria-pressed="true"] .bk-day-month{ color:var(--ink); }

.bk-slots-wrap{ margin-top:20px; }
.bk-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:12px; }
.bk-slot{ padding:11px 0; border-radius:12px; font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:.95rem; }

/* ---------- step 3 ---------- */
.bk-form{ display:flex; flex-direction:column; gap:16px; }
.bk-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .bk-field-row{ grid-template-columns:1fr; } }
.bk-field label{ display:block; font-size:.84rem; color:var(--muted); margin-bottom:6px; }
.bk-optional{ opacity:.7; }
.bk-field input, .bk-field textarea{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-size:.95rem;
}
.bk-field textarea{ resize:vertical; min-height:88px; line-height:1.6; }
.bk-field input::placeholder, .bk-field textarea::placeholder{ color:rgba(185,169,201,.6); }
.bk-field input:focus, .bk-field textarea:focus{ outline:none; border-color:rgba(255,158,196,.6); }
.bk-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bk-consent{ display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--muted); line-height:1.6; }
.bk-consent input{ margin-top:4px; width:17px; height:17px; accent-color:var(--p2); flex:none; }
.bk-consent a{ color:var(--p1); text-decoration:underline; text-underline-offset:2px; }
.bk-form-status{ color:var(--p1); min-height:1.2em; }
.bk-submit{ align-self:flex-start; }
.bk-submit:active{ transform:scale(.97); }
.bk-submit.is-busy{ opacity:.7; }

/* ---------- step 4 ---------- */
.bk-done{ text-align:center; padding:clamp(10px,3vw,30px) 0; }
.bk-done-mark{ width:56px; height:56px; margin:0 auto 18px; animation:bkBloom .5s cubic-bezier(.23,1,.32,1); }
@keyframes bkBloom{ from{ opacity:0; transform:scale(.6) rotate(-40deg); } to{ opacity:1; transform:none; } }
.bk-done-when{ font-size:1.08rem; font-weight:600; margin-bottom:10px; }
.bk-done-text{ color:var(--muted); max-width:52ch; margin:0 auto 26px; line-height:1.7; }
.bk-done-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- summary ---------- */
.bk-summary{
  position:sticky; top:110px; padding:22px; border-radius:var(--radius);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
}
.bk-summary h3{ font-size:1rem; margin-bottom:14px; }
.bk-summary dl{ display:grid; gap:12px; }
.bk-summary dl > div{ display:grid; gap:2px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.bk-summary dt{ font-size:.76rem; color:var(--muted); }
.bk-summary dd{ font-size:.94rem; font-weight:500; }
.bk-summary-foot{ margin-top:14px; font-size:.8rem; color:var(--muted); line-height:1.6; }
@media (max-width:860px){
  .bk-summary{ position:static; }
  .bk-summary dl{ grid-template-columns:1fr 1fr; }
  .bk-summary dl > div:first-child{ grid-column:1 / -1; }
}

.bk-demo{ margin-top:20px; font-size:.8rem; color:var(--gold); text-align:center; }
.bk-fallback{ max-width:640px; margin:28px auto 0; text-align:center; color:var(--muted); font-size:.9rem; line-height:1.7; }
.bk-fallback a{ color:var(--p1); }

@media (prefers-reduced-motion: reduce){
  .bk-panel.bk-enter, .bk-done-mark{ animation:bkFade .2s ease; }
  @keyframes bkFade{ from{ opacity:0; } to{ opacity:1; } }
}

/* ---------- step 1b: where (duomassage) ---------- */
.bk-where{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.bk-sub{ font-size:1.05rem; margin-bottom:12px; }
.bk-service[disabled]{ opacity:.45; cursor:not-allowed; }
.bk-service[disabled]:active{ transform:none; }
.bk-town{ margin-top:16px; max-width:420px; }
.bk-town select{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-size:.95rem; cursor:pointer;
}
.bk-town select option{ background:#150f2e; color:var(--ink); }
.bk-town select:focus{ outline:none; border-color:rgba(255,158,196,.6); }
.bk-town .bk-status{ margin-top:8px; }
.bk-next{ margin-top:16px; }
.bk-next:not([disabled]):active{ transform:scale(.97); }
.bk-next[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- duomassage partner section ---------- */
.duo{ align-items:center; }
.duo-quote{ margin:0 0 22px; padding-left:20px; border-left:2px solid var(--p1); }
.duo-quote p{ font-family:'Space Grotesk',system-ui,sans-serif; font-size:clamp(1.15rem,2.2vw,1.4rem); line-height:1.45; color:var(--ink); margin-bottom:10px; }
.duo-cite{ display:block; font-style:normal; color:var(--muted); font-size:.88rem; }
.duo .price-group .btn{ margin-top:6px; }
.duo-travel{ margin-top:16px; line-height:1.6; }

/* ---------- verwenpakket: several treatments are planned personally ---------- */
.bk-combo{
  max-width:1080px; margin:24px auto 0; padding:26px clamp(20px,3.5vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-radius:var(--radius); border:1px solid rgba(255,214,235,.35);
  background:linear-gradient(160deg,rgba(138,107,184,.2),rgba(255,111,156,.1));
}
.bk-combo > div:first-child{ flex:1 1 380px; }
.bk-combo h3{ font-size:1.15rem; margin-bottom:6px; }
.bk-combo p{ color:var(--muted); font-size:.94rem; line-height:1.6; max-width:62ch; }
.bk-combo-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.bk-combo-actions .btn:active{ transform:scale(.97); }
.bk-policy{ font-size:.84rem; color:var(--muted); line-height:1.6; padding:12px 14px; border-radius:12px; border:1px dashed var(--line); }