/* body&soul booking — engine and layout ported 1:1 from lushlounge.nl, recoloured */
.overlay{
  --bg:#F2ECE6; --bg2:#E8DFD8; --bg3:#D9CCC4;
  --ink:#5F5353; --mid:#7D6F6D; --light:#B3A5A1; --white:#FFFDFA; --red:#9b2c2c;
  --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', system-ui, sans-serif;
  font-family:var(--sans); font-weight:300; text-align:left; letter-spacing:normal;
}
.overlay *{box-sizing:border-box}
.overlay .modal{color:#3B3131;height:100%;max-height:100dvh}
.overlay h3,.overlay h4,.overlay p{margin:0}
.overlay .msub{margin-bottom:24px}
.mhd-logo img{height:26px;width:auto;display:block}
.overlay .btn-fill{display:inline-block;border:none;padding:14px 30px;font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.overlay .mbnext:hover:not(:disabled){background:#4E4343}
.overlay .cd{cursor:pointer}
@keyframes spin{to{transform:rotate(360deg)}}
/* ══════════════════════════════════════
       BOOKING MODAL
    ══════════════════════════════════════ */
    .overlay{position:fixed;inset:0;z-index:300;background:rgba(17,17,16,.5);backdrop-filter:blur(6px);display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .35s}
    .overlay.open{opacity:1;pointer-events:all}
    .modal{width:min(600px,100vw);background:var(--bg);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);overflow-x:hidden}
    .overlay.open .modal{transform:translateX(0)}

    /* Modal header */
    .mhd{background:var(--ink);color:var(--bg);padding:26px 34px;display:flex;align-items:center;justify-content:space-between;flex:none}
    .mhd-logo{font-size:1.25rem}
    .mhd-logo .l-italic,.mhd-logo .l-bold,.mhd-logo .l-dot{color:var(--bg)}
    .mhd-sub{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-top:3px}
    .mclose{background:none;border:none;color:var(--bg);font-size:1.5rem;cursor:pointer;opacity:.6;transition:opacity .2s,background .2s;line-height:1;padding:8px 12px;margin:-8px -12px;border-radius:6px;flex:none}
    .mclose:hover{opacity:1;background:rgba(255,255,255,.12)}

    /* Steps */
    .msteps{background:var(--bg2);padding:16px 24px;display:flex;align-items:center;justify-content:center;flex:none;border-bottom:1px solid var(--bg3);overflow:hidden;gap:0}
    .mstep{display:flex;align-items:center;gap:6px;flex:none}
    .mstep-n{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--bg3);display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--mid);flex:none;transition:all .3s}
    .mstep.active .mstep-n{background:var(--ink);border-color:var(--ink);color:var(--bg)}
    .mstep.done .mstep-n{background:var(--ink);border-color:var(--ink);color:var(--bg);font-size:.7rem}
    .mstep.done .mstep-n::after{content:'✓'}
    .mstep.done .mstep-n span{display:none}
    .mstep-l{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);white-space:nowrap;transition:color .3s}
    .mstep.active .mstep-l,.mstep.done .mstep-l{color:var(--ink)}
    .mconn{flex:1;min-width:8px;max-width:28px;height:1px;background:var(--bg3);margin:0 4px}

    /* Body */
    .mbody{flex:1;overflow-y:auto;overflow-x:hidden;padding:34px;max-width:100%}
    .mbody::-webkit-scrollbar{width:3px}
    .mbody::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:2px}
    .mpanel{display:none}.mpanel.active{display:block}
    .mtitle{font-family:var(--serif);font-style:italic;font-size:1.55rem;font-weight:400;margin-bottom:4px}
    .msub{font-size:.76rem;color:var(--mid);margin-bottom:24px}

    /* Service list */
    .slist{display:flex;flex-direction:column;gap:1px}
    .sopt{border:1.5px solid var(--bg3);padding:14px 18px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:border-color .2s,background .2s,color .2s;position:relative;border-radius:2px}
    .sopt:hover{border-color:var(--mid);background:rgba(184,178,170,.1)}
    .sopt.sel{border-color:var(--ink);background:var(--ink);color:var(--bg)}
    .sopt.sel .sopt-name{color:var(--bg)}
    .sopt.sel .sopt-desc{color:rgba(247,244,239,.55)}
    .sopt.sel .sopt-price{color:var(--bg)}
    .sopt.sel .sopt-time{color:rgba(247,244,239,.5)}
    .sopt.sel::after{content:'✓';position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.75rem;color:rgba(247,244,239,.7)}
    .sopt.sel .sopt-info{padding-left:20px;padding-right:28px}
    .sopt-info{flex:1;padding-right:28px}
    .sopt-name{font-size:.88rem;font-weight:400}
    .sopt-desc{font-size:.72rem;color:var(--mid);margin-top:2px}
    .sopt-meta{text-align:right;flex:none}
    .sopt-price{font-family:var(--serif);font-style:italic;font-size:1.05rem;display:block}
    .sopt-time{font-size:.65rem;color:var(--mid)}
    .cath{font-size:.57rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mid);padding:16px 0 8px;border-bottom:1px solid var(--bg3);margin-bottom:2px;margin-top:4px}
    .cat-booking-note{display:flex;align-items:flex-start;gap:7px;background:var(--bg2);border-left:2px solid var(--light);border-radius:0 4px 4px 0;padding:9px 12px;margin:6px 0 4px;font-size:.76rem;color:var(--mid);line-height:1.55}
    .cat-booking-note svg{flex:none;margin-top:1px;color:var(--light)}
    .cath:first-child{padding-top:0;margin-top:0}

    /* Add-ons — same look as services */
    .aopt{border:1.5px solid var(--bg3);padding:14px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px;transition:border-color .2s,background .2s,color .2s;border-radius:2px;position:relative}
    .aopt:hover{border-color:var(--mid);background:rgba(184,178,170,.08)}
    .aopt.sel{border-color:var(--ink);background:var(--ink);color:var(--bg)}
    .aopt.sel .aname{color:var(--bg)}
    .aopt.sel .adesc{color:rgba(247,244,239,.55)}
    .aopt.sel .aprice{color:var(--bg)}
    .aopt.sel .atime{color:rgba(247,244,239,.5)}
    .aopt.sel .aq-val{color:var(--bg)}
    .aopt-info{flex:1;min-width:0}
    .aname{font-size:.88rem;font-weight:400;display:block}
    .adesc{font-size:.72rem;color:var(--mid);margin-top:2px;display:block}
    .aopt-meta{text-align:right;flex:none}
    .aprice{font-family:var(--serif);font-style:italic;font-size:1.05rem;display:block;color:var(--ink)}
    .atime{font-size:.65rem;color:var(--mid);display:block}
    /* Checkmark — hidden, replaced by dark background on selection */
    .achk{display:none}
    /* Quantity stepper */
    .aopt-qty{cursor:default}
    .aopt-qty .aopt-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
    .aopt-stepper{display:flex;align-items:center;border:1.5px solid var(--bg3);border-radius:4px;overflow:hidden}
    .aopt.sel .aopt-stepper{border-color:rgba(247,244,239,.3)}
    .aq-btn{width:28px;height:28px;border:none;background:transparent;color:var(--ink);font-size:1.1rem;cursor:pointer;transition:background .15s;font-family:var(--sans);display:flex;align-items:center;justify-content:center;line-height:1}
    .aopt.sel .aq-btn{color:var(--bg)}
    .aq-btn:hover{background:rgba(184,178,170,.15)}
    .aq-val{min-width:26px;text-align:center;font-size:.82rem;font-weight:600;color:var(--ink)}

    /* Calendar */
    .cal-wrap{margin-bottom:24px}
    .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
    .cal-mon{font-family:var(--serif);font-style:italic;font-size:1.25rem}
    .calbtn{background:none;border:1px solid var(--bg3);width:30px;height:30px;cursor:pointer;font-size:.9rem;color:var(--ink);transition:background .2s;font-family:var(--sans)}
    .calbtn:hover{background:var(--bg2)}
    .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
    .cdn{text-align:center;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);padding:5px 0}
    .cd{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.8rem;border:1.5px solid transparent;cursor:pointer;transition:all .2s;border-radius:2px;position:relative}
    .cd.empty,.cd.past{color:var(--light);cursor:default}
    .cd.avail:hover{background:var(--bg2)}
    .cd.pick{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600;box-shadow:0 2px 8px rgba(17,17,16,.25)}
    .cd.pick::after{content:'';position:absolute;inset:-3px;border:2px solid var(--ink);border-radius:3px;opacity:.35}
    .cd.today{border-color:var(--ink)}
    .cd.today.pick{background:var(--ink);color:var(--bg)}

    /* Time slots */
    .tslabel{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);margin:18px 0 8px}
    .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
    .ts{padding:8px;text-align:center;border:1.5px solid var(--bg3);font-size:.78rem;cursor:pointer;transition:all .2s;font-family:var(--sans)}
    .ts:hover:not(.off){border-color:var(--mid);background:var(--bg2)}
    .ts.pick{background:var(--ink);color:var(--bg);border-color:var(--ink)}
    .ts.off{color:var(--light);cursor:default;border-color:rgba(184,178,170,.3);text-decoration:line-through}

    /* Form */
    .fgrp{margin-bottom:16px}
    .flbl{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);display:block;margin-bottom:6px}
    .finp{width:100%;padding:11px 13px;border:1.5px solid var(--bg3);background:var(--white);font-family:var(--sans);font-size:.86rem;font-weight:300;color:var(--ink);outline:none;border-radius:0;-webkit-appearance:none;transition:border-color .2s}
    .finp:focus{border-color:var(--ink)}
    .finp.err{border-color:#b03a2e}
    .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    textarea.finp{resize:vertical;min-height:72px}
    .fnote{font-size:.72rem;color:var(--mid);line-height:1.6;margin-top:4px}

    /* Confirm */
    .cbox{border:1.5px solid var(--bg3);padding:20px;margin-bottom:14px}
    .ctop{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-bottom:13px}
    .crow{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(184,178,170,.3);font-size:.84rem}
    .crow:last-child{border-bottom:none}
    .crow strong{font-family:var(--serif);font-style:italic;font-size:.98rem;text-align:right;max-width:55%}
    .ctotal{background:var(--bg2);padding:14px 18px;display:flex;justify-content:space-between;align-items:baseline}
    .ctotal span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
    .ctotal strong{font-family:var(--serif);font-style:italic;font-size:1.5rem}

    /* Success */
    .succ{text-align:center;padding:24px 0}
    .succ-icon{width:56px;height:56px;background:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--bg);font-size:1.3rem}
    .succ-title{font-family:var(--serif);font-style:italic;font-size:1.9rem;margin-bottom:10px}
    .succ-text{font-size:.84rem;color:var(--mid);line-height:1.8;max-width:300px;margin:0 auto 28px}

    /* Modal footer */
    .mfoot{padding:16px 34px;border-top:1px solid var(--bg3);display:flex;align-items:center;justify-content:space-between;flex:none;background:var(--bg)}
    .mf-name{font-size:.8rem;font-weight:400}
    .mf-price{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--mid)}
    .mbtns{display:flex;gap:7px}
    .mbback{background:none;border:1px solid var(--bg3);padding:10px 16px;font-family:var(--sans);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);cursor:pointer;transition:all .2s}
    .mbback:hover{border-color:var(--mid);color:var(--ink)}
    .mbnext{background:var(--ink);border:none;padding:10px 22px;font-family:var(--sans);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bg);cursor:pointer;transition:background .2s}
    .mbnext:hover:not(:disabled){background:#333}
    .mbnext:disabled{background:var(--bg3);cursor:default}

    
@media(max-width:900px){
.modal{width:100vw;max-width:100vw}
      .cd{font-size:.85rem}
      .cdn{font-size:.5rem}
      .mbody{padding:18px 16px}
      .mhd{padding:18px 16px}
      .mfoot{padding:12px 16px}
      .msteps{padding:12px 16px}
      .mstep-l{display:none}
      .mstep.active .mstep-l{display:block;font-size:.52rem}
      .mconn{min-width:6px;max-width:16px}
      .frow{grid-template-columns:1fr}
      .tgrid{grid-template-columns:repeat(3,1fr)}
}
/* body&soul polish */
.overlay .mhd-sub{color:rgba(255,253,250,.62)}
.overlay .mbnext,.overlay .mbback{white-space:nowrap}
.overlay .mfoot{gap:12px}
.overlay .mf-name{font-size:.78rem;line-height:1.35}