/* Glow&Care · afspraak aanvragen */
.top .back{min-height:42px;padding:0 18px;font-size:12.5px}
.bk{padding:56px 0 150px;background:var(--paper)}
.bk .wrap{max-width:760px}
.bk-head h1{font-size:clamp(38px,5vw,56px);margin-bottom:12px}
.bk-head p{color:var(--ink-2);font-size:17px;max-width:600px;margin:0}
.nojs{margin-top:20px;font-weight:700}
.step{padding:34px 0 10px}
.step[hidden],.picked[hidden],.all[hidden]{display:none}
.step h2{font-size:30px;margin-bottom:18px}

/* The progress line: three steps on her logo's hairline */
.prog{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:520px}
.prog[hidden]{display:none}
.prog li{position:relative;text-align:center}
.prog li+li::before{content:"";position:absolute;top:16px;right:calc(50% + 22px);left:calc(-50% + 22px);height:1px;background:var(--line)}
.prog li.done+li::before,.prog li.on::before{background:var(--bronze-soft)}
.prog button{all:unset;display:inline-flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;padding:0 4px;border-radius:var(--r)}
.prog button:disabled{cursor:default}
.prog button:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.prog b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--sans);border:1.5px solid var(--line);background:#fff;color:var(--ink-3)}
.prog span{font-size:13px;font-weight:600;color:var(--ink-3)}
.prog .on b{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.prog .on span{color:var(--ink);font-weight:700}
.prog .done b{background:var(--cream);border-color:var(--bronze-soft);color:var(--ink)}
.prog .done span{color:var(--ink-2)}
.help{color:var(--ink-2);margin:-4px 0 18px}
.err{color:#a3341f;font-weight:700;font-size:14.5px;margin:12px 0 0}

/* Treatments */
.tgroup{margin-top:18px}
.tgroup h3{font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px}
.bk .opt{padding:14px 4px}
.bk .opt .nm{display:block;font-weight:700}
.bk .opt .sub{display:block;font-size:13.5px;color:var(--ink-3);font-weight:400}
.bk .opt.off{opacity:.55;cursor:default}
.bk .opt.off input{cursor:default}
.extras{margin:0 0 6px 36px;padding:4px 0 4px 18px;border-left:2px solid var(--bronze-soft)}
.extras p{margin:10px 0 0;font-size:14px;font-weight:700}
.extras .opt{padding:11px 0}
.extras .opt:first-of-type{border-top:0}
.bk .opt .sub[hidden]{display:none}
.extras[hidden]{display:none}

/* Calendar */
.cal{max-width:400px;border:1px solid var(--line);border-radius:6px;padding:16px;background:#fff}
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-top b{font:400 22px/1 var(--serif);text-transform:capitalize}
.cal-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-wd,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-wd span{text-align:center;font-size:12px;font-weight:700;color:var(--ink-3);padding:4px 0}
.cal-grid button,.cal-grid i{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 15px/1 var(--sans);padding:0}
.cal-grid button{border:1px solid transparent;background:var(--paper);color:var(--ink);cursor:pointer}
.cal-grid button:hover{border-color:var(--bronze-soft)}
.cal-grid button:disabled{background:none;color:#c8b9ac;cursor:default;border-color:transparent;text-decoration:line-through;text-decoration-color:rgba(143,117,104,.35)}
.cal-grid button.sel{background:var(--ink);color:var(--cream)}
.cal-grid small{font:700 9px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--rose);margin-top:2px}
.cal-grid button.full:disabled{text-decoration:none;color:#b9a798;background:var(--rose-soft)}
.cal-grid button.full:disabled small{color:#9a6a5c}
.cal-msg{font-size:14px;color:var(--ink-2);margin:10px 0 0}
.cal-msg:empty{display:none}
.picked{margin-top:22px;max-width:560px}
.all{display:flex;flex-direction:column;gap:8px;padding:4px 0 12px;border-bottom:1.5px solid var(--ink)}
.all>span{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.days{list-style:none;margin:0;padding:0}
.days li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.days .dh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 150px}
.days .dh b{font-size:15px}
.days .dh b::first-letter{text-transform:uppercase}
.days .rm{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;padding:0;flex:none}
.days .rm:hover{color:var(--ink);border-color:var(--ink-3)}
.parts{display:flex;flex-wrap:wrap;gap:6px}
.parts button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:600 13.5px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.parts button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.parts button:disabled{opacity:.4;cursor:default;text-decoration:line-through}

/* Contact fields */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld{display:block;margin-top:14px}
.fields .fld{margin-top:0}
.fld span{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.fld i{font-style:normal;font-weight:400;color:var(--ink-3)}
.fld input,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;padding:12px 14px;font:16px/1.4 var(--sans);color:var(--ink)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--bronze)}
.fld input.bad{border-color:#a3341f}
.seg{border:0;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg legend{font-weight:700;font-size:14.5px;padding:0;margin-bottom:8px;float:left;width:100%}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14.5px}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.seg input:focus-visible+span{outline:2px solid var(--bronze);outline-offset:2px}
.demo{font-size:13.5px;color:var(--ink-3);margin:22px 0 0}
#f-mail-wrap[hidden],.fld i[hidden]{display:none}
.err[hidden]{display:none}

/* The small bar at the bottom of the booking page: back, what you have, next */
.bk-bar{position:fixed;left:0;right:0;bottom:0;z-index:22;background:rgba(251,247,242,.97);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(74,42,28,.06);padding-bottom:env(safe-area-inset-bottom)}
.bk-bar[hidden]{display:none}
.bk-bar .wrap{max-width:760px;display:flex;align-items:center;gap:14px;min-height:72px}
.bar-back{border:0;background:none;font:700 14px/1 var(--sans);color:var(--ink-2);cursor:pointer;padding:12px 6px;flex:none}
.bar-back[hidden]{visibility:hidden;display:block}
.bar-back:hover{color:var(--ink)}
.bar-sum{flex:1;min-width:0;margin:0;font-size:14px;font-weight:700;color:var(--ink-2);text-align:center}
.bk-bar .btn{flex:none;min-width:150px}
.bk-page .concept{bottom:84px}

/* The ending: her appointment card */
.done{padding:20px 0 0;text-align:center}
.done .card{background:var(--cream);border-radius:4px;padding:44px 40px 38px;box-shadow:0 30px 70px rgba(74,42,28,.14);max-width:560px;margin:0 auto;position:relative}
.done .card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(156,101,54,.35);border-radius:2px;pointer-events:none}
.done .mark{margin:0 auto}
.done .mark b{font-size:32px}
.done .rule{margin:16px auto 22px}
.done h2{font-size:34px;margin-bottom:18px}
.done dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;text-align:left;margin:0 auto;max-width:420px;font-size:15px}
.done dt{font-weight:700;color:var(--ink-3);font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.done dd{margin:0}
.done dd div+div{margin-top:2px}
.done .soon{font:400 34px/1.15 var(--script);color:var(--bronze);margin:26px 0 0}
.done .sign{font:400 52px/1 var(--script);color:var(--ink);margin:6px 0 0}
.done .demo{text-align:center}
.done-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.done-acts .btn:first-child{background:#1f8f4e;border-color:#1f8f4e}
.done-acts .btn:first-child:hover{background:#17713d;border-color:#17713d}

@media (max-width:860px){
  .top .back{padding:0 14px}
}
@media (max-width:620px){
  .bk{padding:30px 0 150px}
  .bk-head h1{font-size:34px}
  .bk-head p{font-size:15.5px}
  .prog{margin-top:22px}
  .step{padding:26px 0 8px}
  .step h2{font-size:26px}
  .days .dh{flex:1 1 100%}
  .bk-bar .wrap{gap:8px;min-height:66px}
  .bk-bar .btn{min-width:0;padding:0 18px}
  .bar-sum{font-size:13px;line-height:1.3}
  .bk-page .concept{bottom:76px}
  .fields{grid-template-columns:minmax(0,1fr)}
  .extras{margin-left:12px}
  .cal{padding:12px}
  .done .card{padding:36px 22px 30px}
  .done dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .done dd{margin-bottom:10px}
  .done-acts .btn{flex:1 1 100%}
}
@media (max-width:380px){
  .bk-bar .lg{display:none}
  .bar-back{padding:12px 2px}
  .parts button{padding:7px 10px;font-size:13px}
}