/* Retro Shot Studioz: online booking (/book). Same palette and type as the main site. */
.book-page{background:var(--warm)}
.bk-hero{background:var(--hero-black);color:#fff;padding:3.5rem 1.25rem 4rem;text-align:center}
.bk-hero .in{max-width:40rem;margin:0 auto}
.bk-hero .label{color:var(--hero-accent)}
.bk-hero h1{margin-top:1rem;font-family:var(--display);font-size:clamp(2.4rem,6vw,3.8rem);font-weight:600;line-height:1.05}
.bk-hero p:not(.label){margin-top:1rem;font-size:.95rem;font-weight:300;line-height:1.7;color:rgba(255,255,255,.6)}
.bk-wrap{padding:0 1.25rem 6rem;margin-top:-2rem}
.bk-grid{max-width:72rem;margin:0 auto;display:grid;gap:1.5rem;align-items:start}
@media(min-width:1024px){.bk-grid{grid-template-columns:1fr 340px}}
.bk-main{text-align:left;background:#fff;border-radius:10px;padding:1.75rem 1.25rem 2rem;box-shadow:var(--shadow-soft);min-width:0}
@media(min-width:640px){.bk-main{padding:2.5rem 2.5rem 2.5rem}}

/* progress */
.prog{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:2.25rem}
.prog li{display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(102,102,102,.6);text-align:center}
.prog li::before{content:"";position:absolute;top:15px;right:50%;width:100%;height:1px;background:var(--warm-grey);z-index:0}
.prog li:first-child::before{display:none}
.prog li b{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#fff;border:1px solid var(--warm-grey);font-size:.75rem;font-weight:600;color:var(--mid);transition:all .3s}
.prog li.on{color:var(--charcoal)}
.prog li.on b{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.prog li.done{color:var(--accent);cursor:pointer}
.prog li.done b{background:var(--accent);border-color:var(--accent);color:#fff}
.prog li.done::before,.prog li.on::before{background:var(--accent)}
@media(max-width:560px){.prog li span{display:none}}

/* steps */
.bk .step{text-align:left;border:0;min-width:0;animation:fadeUp .45s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.step legend{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.2rem);font-weight:600;color:var(--charcoal);line-height:1.15;margin-bottom:1.25rem;padding:0}
.sub-h{margin:2.25rem 0 0;font-family:var(--display);font-size:1.45rem;font-weight:600;color:var(--charcoal)}
.hint{font-size:.88rem;color:var(--mid);margin:-.5rem 0 1.5rem}
.hint b{color:var(--charcoal);font-weight:600}
.q{margin:1.75rem 0 .75rem;font-size:.88rem;font-weight:500;color:var(--charcoal)}
.q small,.field label small,.tl small{font-weight:400;color:rgba(102,102,102,.8);font-size:.78rem}

.opts{display:grid;gap:.625rem}
.types{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.types{grid-template-columns:repeat(4,1fr)}}
.opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:1rem;background:#fff;transition:border-color .2s,background .2s,box-shadow .2s;font-size:.85rem;color:var(--charcoal)}
.opt:hover{border-color:var(--accent)}
.opt .ic{width:1.35rem;height:1.35rem;color:var(--accent)}
.opt.on{border-color:var(--charcoal);background:var(--warm);box-shadow:inset 0 0 0 1px var(--charcoal)}
.plan{grid-template-columns:1fr}
@media(min-width:640px){.plan{grid-template-columns:repeat(3,1fr)}}
.plan .opt b{font-size:.92rem;font-weight:600}
.plan .opt span{font-size:.8rem;color:var(--mid);line-height:1.5}

.tabs{margin-top:1rem;justify-content:flex-start}
.pks{margin-top:1.25rem;display:grid;gap:.75rem}
@media(min-width:640px){.pks{grid-template-columns:repeat(3,1fr)}}
.pks[hidden]{display:none}
.pk{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:1.6rem 1rem 1.3rem;background:#fff;transition:all .2s}
.pk:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.pk .pop{position:absolute;top:-.6rem;left:50%;transform:translateX(-50%);border-radius:999px;background:var(--accent);padding:.2rem .7rem;font-size:.55rem;font-weight:600;letter-spacing:.16em;color:#fff;text-transform:uppercase;white-space:nowrap}
.pk .nm{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.pk .pr{font-family:var(--display);font-size:2.2rem;font-weight:700;line-height:1;color:var(--charcoal)}
.pk .du{font-size:.75rem;font-weight:500;color:var(--charcoal)}
.pk .ft{font-size:.74rem;line-height:1.5;color:var(--mid)}
.pk.on{background:var(--charcoal);border-color:var(--charcoal)}
.pk.on .pr,.pk.on .du{color:#fff}.pk.on .ft{color:rgba(255,255,255,.6)}.pk.on .nm{color:var(--warm-grey)}
.pk.wide{margin-top:.75rem;width:100%;flex-direction:row;justify-content:flex-start;text-align:left;gap:1rem;padding:1rem 1.25rem}
.pk.wide .nm{flex:none}
.pk.wide.on .ft{color:rgba(255,255,255,.7)}

.row2{display:grid;gap:0 1rem}
@media(min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.field{margin-top:1.25rem;display:flex;flex-direction:column;gap:.45rem}
.row2 .field{margin-top:1.25rem}
.field label{font-size:.8rem;font-weight:500;color:var(--charcoal)}
.field input,.field select,.field textarea{width:100%;border-radius:4px;border:1px solid var(--input);background:#fff;padding:.8rem .9rem;font-size:16px;font-family:inherit;color:var(--charcoal);transition:border-color .2s}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field .bad,.field input.bad{border-color:#c0392b}
.stp{display:inline-flex;align-items:center;border:1px solid var(--input);border-radius:4px;width:max-content}
.stp button{width:44px;height:44px;font-size:1.2rem;color:var(--charcoal)}
.stp button:hover{background:var(--warm)}
.stp output{min-width:3rem;text-align:center;font-weight:600}
#extrasWrap[hidden]{display:none}

/* date + time */
.dt{display:grid;gap:1.5rem}
@media(min-width:760px){.dt{grid-template-columns:1.15fr 1fr}}
.cal{border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:1rem}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.ch b{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--charcoal)}
.ch button{width:38px;height:38px;border-radius:999px;font-size:1.3rem;color:var(--charcoal);transition:background .2s}
.ch button:hover:not([disabled]){background:var(--warm)}
.ch button[disabled]{opacity:.25;cursor:default}
.cw,.cd{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cw span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(102,102,102,.7);padding:.3rem 0}
.cd button{aspect-ratio:1;border-radius:999px;font-size:.85rem;color:var(--charcoal);transition:background .2s,color .2s}
.cd button:hover:not([disabled]){background:var(--warm)}
.cd button[disabled]{color:rgba(102,102,102,.35);cursor:not-allowed;text-decoration:line-through;text-decoration-color:rgba(0,0,0,.15)}
.cd button.today{box-shadow:inset 0 0 0 1px var(--warm-grey)}
.cd button.on{background:var(--charcoal);color:#fff}
.tl{font-size:.8rem;font-weight:500;color:var(--charcoal);margin-bottom:.75rem}
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;max-height:340px;overflow:auto;padding-right:2px}
.slots .empty{grid-column:1/-1;font-size:.85rem;color:var(--mid);padding:1.25rem;border:1px dashed var(--warm-grey);border-radius:8px;text-align:center}
.slot{border:1px solid rgba(0,0,0,.1);border-radius:6px;padding:.6rem .5rem;font-size:.82rem;color:var(--charcoal);transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.1rem}
.slot small{font-size:.66rem;color:var(--mid)}
.slot:hover{border-color:var(--accent)}
.slot.gold{background:linear-gradient(180deg,#fff,#faf5ee)}
.slot.gold small{color:var(--accent)}
.slot.on{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.slot.on small{color:var(--warm-grey)}
.gh{margin-top:.75rem;font-size:.74rem;color:var(--accent)}

/* location */
.cond[hidden]{display:none}
.linkbtn .ic{width:1rem;height:1rem}
.linkbtn{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--charcoal)}
.locmsg{font-size:.76rem;color:var(--mid);margin-top:.35rem;min-height:1em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:.5rem .95rem;font-size:.8rem;color:var(--mid);transition:all .2s;background:#fff}
.chip:hover{border-color:var(--accent);color:var(--charcoal)}
.chip.on{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.check{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.5rem;font-size:.85rem;line-height:1.5;color:var(--mid);cursor:pointer}
.check input{margin-top:.2rem;width:18px;height:18px;flex:none;accent-color:var(--charcoal)}
.check a{color:var(--charcoal);text-decoration:underline}

/* review */
.review{border-top:1px solid rgba(0,0,0,.08)}
.review>div{display:grid;grid-template-columns:130px 1fr auto;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(0,0,0,.08);align-items:baseline}
.review dt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(102,102,102,.8)}
.review dd{font-size:.9rem;color:var(--charcoal);white-space:pre-wrap;word-break:break-word}
.review button{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
@media(max-width:560px){.review>div{grid-template-columns:1fr auto;gap:.2rem .75rem}.review dt{grid-column:1/-1}}
.pay{margin-top:1.75rem;border-radius:10px;background:var(--warm);padding:1.5rem}
.pay h3{font-family:var(--display);font-size:1.35rem;font-weight:600;color:var(--charcoal)}
.pay ol{margin:.9rem 0 0 1.1rem;font-size:.86rem;line-height:1.6;color:var(--mid)}
.pay li+li{margin-top:.4rem}
.pay b{color:var(--charcoal)}
.pay p{margin-top:.9rem;font-size:.8rem;color:var(--mid)}

/* nav buttons */
.nav2{display:flex;align-items:center;gap:1rem;margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.08)}
.nav2 #next{margin-left:auto}
.nav2 .err{flex:1;text-align:right;font-size:.8rem;color:#c0392b}
.btn.ghost{border:1px solid var(--input);color:var(--charcoal)}
.btn.ghost:hover{border-color:var(--charcoal)}
.btn[hidden]{display:none}
.btn:disabled{opacity:.55;pointer-events:none}

/* summary */
.bk-sum .sc{background:#fff;border-radius:10px;padding:1.5rem;box-shadow:var(--shadow-soft)}
@media(min-width:1024px){.bk-sum{position:sticky;top:1.5rem}}
.bk-sum dl{margin-top:1rem}
.bk-sum dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:.82rem}
.bk-sum dt{color:var(--mid)}
.bk-sum dd{text-align:right;color:rgba(102,102,102,.55);max-width:65%}
.bk-sum dd.set{color:var(--charcoal);font-weight:500}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:1rem}
.tot span{font-size:.82rem;color:var(--mid)}
.tot b{font-family:var(--display);font-size:2rem;font-weight:700;color:var(--charcoal)}
.depo{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mid);margin-top:.2rem}
.depo b{color:var(--charcoal)}
.nb{margin-top:1rem;font-size:.74rem;color:rgba(102,102,102,.8)}
.help{margin-top:1rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--charcoal)}
.help .ic{width:1rem;height:1rem;color:#25d366}
@media(max-width:1023px){.bk-sum{display:none}}

/* mobile bar */
.mbar{display:none}
@media(max-width:1023px){
 .mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid rgba(0,0,0,.08);box-shadow:0 -8px 24px -12px rgba(0,0,0,.2)}
 .mbar span{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
 .mbar b{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--charcoal);line-height:1}
 .mbar .btn{padding:.85rem 1.5rem}
 .book-page footer{padding-bottom:6rem}
 .nav2 #next{display:none}
}
.is-done .mbar,.is-done .bk-sum,.is-done .prog{display:none!important}
.is-done .bk-grid{grid-template-columns:1fr;max-width:44rem}

/* done */
div.done{text-align:center;padding:1rem 0;animation:fadeUp .5s ease}
div.done[hidden]{display:none}
.tick svg{width:72px;height:72px;margin:0 auto 1.25rem}
.tick circle{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;animation:draw 1s ease forwards}
.tick path{fill:none;stroke:var(--charcoal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:draw .5s .7s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
div.done h2{margin-top:.75rem;font-family:var(--display);font-size:clamp(2rem,5vw,2.8rem);font-weight:600;color:var(--charcoal)}
div.done .ref{margin-top:.5rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
div.done .ref b{color:var(--charcoal)}
div.done>p:not(.label):not(.ref){margin:1.25rem auto 0;max-width:30rem;font-size:.92rem;line-height:1.65;color:var(--mid)}
.btn.wa{margin-top:1.75rem;background:#25d366;color:#fff;padding:1rem 2rem}
.btn.wa .ic{width:1.2rem;height:1.2rem}
div.done-links{margin-top:1rem;display:flex;justify-content:center;gap:1.5rem}
.nexts{list-style:none;margin:2.5rem 0 0;display:grid;gap:1rem;text-align:left;border-top:1px solid rgba(0,0,0,.08);padding-top:1.5rem}
@media(min-width:640px){.nexts{grid-template-columns:repeat(4,1fr)}}
.nexts li{font-size:.8rem;line-height:1.5;color:var(--mid)}
.nexts b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--charcoal);margin-bottom:.2rem}