/* The Lumière Room — booking pages. Builds on room.css (tokens, type, buttons, fields). */

.bk-body [hidden]{display:none!important}
.bk-body{min-height:100vh;display:flex;flex-direction:column}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--ivory)}
.bk-top .brand img{width:40px;height:38px}
.bk-top .brand .wm{font-size:16px}
.bk-call{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--espresso);text-decoration:none}
.bk-call b{font-weight:600;color:var(--ink)}
@media(max-width:560px){.bk-call span{display:none}.bk-call{width:44px;height:44px;justify-content:center;border:1px solid var(--greige);border-radius:50%}}
.bk-main{flex:1;padding:28px 16px 48px}
.bk-foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;align-items:center;padding:22px 16px 28px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);text-align:center}
.bk-foot a{color:var(--espresso)}
.bk-foot .lock{display:inline-flex;align-items:center;gap:6px}

.bk{max-width:1120px;margin:0 auto}
.bk-narrow{max-width:680px}
.bk-head{margin:0 0 22px}
.bk-head .hello{margin-top:8px}
.form-msg{margin:12px 0 0;font-size:14px}
.form-msg.err{color:var(--bad)}
.form-msg.ok{color:var(--ok)}
.bk-h3{font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-t);margin:26px 0 12px}

/* steps */
.bk-steps{list-style:none;margin:0 0 22px;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.bk-steps li{display:flex;align-items:center;gap:8px;font:600 12.5px/1 var(--sans);color:var(--muted);padding:9px 14px 9px 9px;border-radius:999px;background:transparent;border:1px solid var(--line)}
.bk-steps li span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--wash);color:var(--muted);font-size:11.5px}
.bk-steps li.is-on{color:var(--ink);border-color:var(--gold);background:var(--paper)}
.bk-steps li.is-on span{background:var(--gold);color:var(--ink)}
.bk-steps li.is-done{color:var(--espresso)}
.bk-steps li.is-done span{background:var(--ink);color:var(--ivory)}
@media(max-width:560px){.bk-steps li{font-size:0;padding:5px;gap:0}.bk-steps li.is-on{font-size:12.5px;padding:9px 14px 9px 9px;gap:8px}}

/* layout */
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
@media(min-width:960px){.bk-grid{grid-template-columns:minmax(0,1fr) 300px}.bk-sum{position:sticky;top:20px}}
.bk-panel,.bk-card,.bk-sum{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.bk-panel{padding:24px 20px}
.bk-card{padding:30px 24px}
@media(min-width:700px){.bk-panel{padding:30px 32px}.bk-card{padding:40px 44px}}
.bk-panel .ttl{margin:0 0 18px}
.bk-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0 0 14px;font:600 12.5px/1 var(--sans);color:var(--muted);cursor:pointer}
.bk-back:hover{color:var(--ink)}
.bk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* step 1: setting and package */
.bk-settings{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.bk-settings{grid-template-columns:repeat(3,1fr)}}
.bk-set{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .05s}
.bk-set:hover{border-color:var(--greige);box-shadow:0 8px 22px rgba(33,28,24,.07)}
.bk-set[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(190,158,94,.25)}
.bk-set-ph{display:block;aspect-ratio:16/10;background-size:cover;background-position:center}
@media(max-width:639px){.bk-set{flex-direction:row}.bk-set-ph{width:110px;aspect-ratio:auto;flex:none}}
.bk-set-tx{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.bk-set-n{display:flex;align-items:center;gap:8px;font:600 21px/1.1 var(--serif);color:var(--ink)}
.bk-set-n svg{color:var(--gold-d)}
.bk-set-b{font-size:13px;line-height:1.45;color:var(--muted)}
.bk-set-f{font:600 12.5px/1 var(--sans);color:var(--gold-t);margin-top:2px}
.bk-pk-list{display:flex;flex-direction:column;gap:10px}
.bk-pk{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.bk-pk:hover{border-color:var(--greige)}
.bk-pk[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(190,158,94,.25)}
.bk-pk-l b{display:block;font:600 19px/1.15 var(--serif);color:var(--ink)}
.bk-pk-l span{font-size:13px;color:var(--muted)}
.bk-pk-r{text-align:right;flex:none}
.bk-pk-r b{display:block;font:600 17px/1.1 var(--sans);letter-spacing:-.2px}
.bk-pk-r span{font-size:12px;color:var(--muted)}

/* step 2: calendar and times */
.bk-cal{max-width:440px}
.bk-cal-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.bk-cal-t{font:600 22px/1 var(--serif)}
.bk-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--greige);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.bk-nav[disabled]{opacity:.35;cursor:default}
.bk-cal-w,.bk-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-cal-w span{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:6px 0}
.bk-day{position:relative;aspect-ratio:1;border:0;border-radius:10px;background:transparent;font:500 14.5px/1 var(--sans);color:#b2a99b;cursor:default}
.bk-day.has{background:#fff;color:var(--ink);font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.bk-day.has:after{content:'';position:absolute;left:50%;bottom:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold)}
.bk-day.has:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.bk-day.is-sel{background:var(--ink);color:var(--ivory);box-shadow:none}
.bk-day.is-sel:after{background:var(--gold)}
.bk-day.today{text-decoration:underline;text-underline-offset:4px}
.bk-cal-load{font-size:13px;color:var(--muted);margin-top:10px}
.bk-tg{margin:0 0 14px}
.bk-tg-h{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.bk-tl{display:flex;flex-wrap:wrap;gap:8px}
.bk-t{min-width:86px;padding:12px 14px;border:1px solid var(--greige);border-radius:10px;background:#fff;font:600 14.5px/1 var(--sans);cursor:pointer}
.bk-t:hover{border-color:var(--gold)}
.bk-t[aria-pressed=true]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.bk-note{margin:18px 0 0}

/* step 3 and 4 */
.bk-row2{display:grid;grid-template-columns:1fr;gap:0 16px}
@media(min-width:640px){.bk-row2{grid-template-columns:1fr 1fr}}
.fld input[readonly]{background:var(--wash);color:var(--muted)}
.fld .muted{text-transform:none;letter-spacing:0;font-weight:500}
.fld.bad input,.fld.bad select{border-color:var(--bad)}
.bk-confirm{margin:0 0 18px}
.bk-terms{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px;margin:0 0 14px}
.bk-terms summary{cursor:pointer;font-weight:600;font-size:14px}
.bk-terms-tx{margin-top:10px;font-size:13.5px;color:var(--espresso)}
.bk-terms-tx p{margin:0 0 10px}
.bk-agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer}
.bk-agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold-d)}
.bk-ts{margin:16px 0 0}
.bk-paynote{margin:14px 0 0}
.bk-agree a{color:var(--gold-t);text-underline-offset:2px}
.bk-terms-tx a{color:var(--gold-t)}

/* step 3: your photographs (1.2.19) */
.bk-photos{border:0;margin:6px 0 4px;padding:18px 0 0;min-width:0;border-top:1px solid var(--line)}
.bk-ph-l{padding:0;font:600 22px/1.15 var(--serif);color:var(--ink)}
.bk-ph-sub{font-size:13.5px;color:var(--muted);margin:6px 0 14px}
.bk-ph-test{margin:8px 0 4px;padding:8px 12px;border-radius:10px;background:var(--amber-bg);color:var(--amber);font-size:12.5px;line-height:1.45}
.bk-ph-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:640px){.bk-ph-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bk-ph-t{position:relative;display:flex;flex-direction:column;gap:8px;padding:15px 16px 16px 46px;border:1px solid var(--greige);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.bk-ph-t:hover{border-color:var(--gold)}
.bk-ph-t input{position:absolute;left:16px;top:17px;width:19px;height:19px;margin:0;accent-color:var(--gold-d);cursor:pointer}
.bk-ph-t.is-on{border-color:var(--gold);background:#FBF6EC;box-shadow:0 0 0 3px rgba(190,158,94,.22)}
.bk-ph-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bk-ph-h b{font:600 16px/1.2 var(--sans);color:var(--ink)}
.bk-ph-h i{font-style:normal;font:600 13px/1 var(--sans);color:var(--muted)}
.bk-ph-h i.plus{color:var(--gold-t)}
.bk-ph-x{font-size:13.5px;line-height:1.5;color:var(--espresso)}
.bk-ph-partial{display:flex;gap:12px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border:1px dashed var(--greige);border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--espresso);cursor:pointer;transition:opacity .15s}
.bk-ph-partial input{width:19px;height:19px;margin:1px 0 0;flex:none;accent-color:var(--gold-d)}
.bk-ph-partial em{display:none;font-style:normal;font-size:12px;color:var(--muted);margin-top:4px}
.bk-ph-partial.is-off{opacity:.55;cursor:default}
.bk-ph-partial.is-off em{display:block}
.bk-ph-partial>span{display:flex;flex-direction:column}
.bk-ph-note{margin:12px 0 0}
.bk-photos.bad .bk-ph-t{border-color:var(--bad)}
.bk-photos.bad .bk-ph-l{color:var(--bad)}
.bk-ph-t input:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:progress}

/* summary */
.bk-sum{padding:20px 22px}
.bk-sum-l{margin:12px 0 0}
.bk-sum-l>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.bk-sum-l>div:first-child{border-top:0}
.bk-sum-l dt{color:var(--muted);flex:none}
.bk-sum-l dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.bk-sum-l .hl dd{color:var(--gold-t)}
.bk-sum-empty{margin:10px 0 0}

/* confirmation and messages */
.bk-done .hello,.bk-msg .hello{margin:10px 0 0}
.bk-tick{width:54px;height:54px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 0 16px}
.bk-done-l{margin:22px 0 0;padding:6px 18px;background:#fff;border:1px solid var(--line);border-radius:12px}
.bk-next ol{margin:0;padding-left:20px;font-size:14.5px;color:var(--espresso)}
.bk-next li{margin:0 0 8px}

/* an invoice (1.2.15) */
.inv-card .hello{margin-top:8px}
.inv-tick{margin:14px 0 4px}
.inv-doc{margin:22px 0 0;padding:18px 18px 8px;background:#fff;border:1px solid var(--line);border-radius:12px}
.inv-parties{display:grid;grid-template-columns:1fr;gap:12px 22px;padding:0 0 14px;border-bottom:1px solid var(--line)}
@media(min-width:560px){.inv-parties{grid-template-columns:1fr 1fr}}
.inv-k{font:600 10.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-t);margin:0 0 6px}
.inv-v{font-size:13.5px;line-height:1.55;color:var(--espresso)}
.inv-meta{margin:10px 0 4px}
.inv-meta>div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:13.5px}
.inv-meta dt{color:var(--muted);flex:none}
.inv-meta dd{margin:0;text-align:right;color:var(--ink);font-weight:500}
.inv-lines{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:14px}
.inv-lines th,.inv-lines td{padding:10px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.inv-lines td+td,.inv-lines th+th,.inv-lines tfoot td{text-align:right;white-space:nowrap;padding-left:14px}
.inv-lines thead th{font:600 10.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-top:0;padding-top:4px}
.inv-lines tbody td{color:var(--ink)}
.inv-lines tfoot th{font-weight:500;color:var(--muted)}
.inv-lines tfoot .tot th,.inv-lines tfoot .tot td{font-weight:600;color:var(--ink);font-size:15px}
.inv-lines tfoot .paid th,.inv-lines tfoot .paid td{color:var(--ok);font-weight:600}
.inv-form{margin:22px 0 0}
.inv-tip{border:0;margin:0;padding:0;min-width:0}
.inv-tip legend{padding:0;font:600 22px/1.15 var(--serif);color:var(--ink)}
.inv-tip-sub{font-size:13.5px;color:var(--muted);margin:6px 0 14px}
.inv-tip-sub b{color:var(--ink);font-weight:600}
.inv-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(min-width:560px){.inv-tips{grid-template-columns:repeat(4,minmax(0,1fr))}}
.inv-t{position:relative;display:block;cursor:pointer}
.inv-t input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.inv-t span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:10px 8px;border:1px solid var(--greige);border-radius:10px;background:#fff;text-align:center;transition:border-color .15s,box-shadow .15s,background .15s}
.inv-t b{font:600 16px/1 var(--sans);color:var(--ink)}
.inv-t i{font-style:normal;font-size:12.5px;color:var(--muted)}
.inv-t:hover span{border-color:var(--gold)}
.inv-t input:focus-visible+span{outline:2px solid var(--gold-d);outline-offset:2px}
.inv-t input:checked+span{background:var(--ink);border-color:var(--ink)}
.inv-t input:checked+span b,.inv-t input:checked+span i{color:var(--ivory)}
.inv-t-own{grid-column:span 2}
.inv-own{margin:14px 0 0;max-width:240px}
.inv-pay-sum{margin:14px 0 0;padding:4px 16px;background:#fff;border:1px solid var(--line);border-radius:12px}
.inv-pay-sum dd{font-size:16px}
.inv-form .btn[disabled]{cursor:not-allowed;opacity:.45}
.inv-hint{margin:10px 0 0;color:var(--espresso)}

/* pay on the spot (1.2.18) */
.spot-card .hello{margin-top:8px}
.spot-form{margin:24px 0 0}
.spot-pounds{display:flex;align-items:center;gap:10px;max-width:280px}
.spot-pounds span{font:600 28px/1 var(--serif);color:var(--muted)}
.fld .spot-pounds input{font:600 24px/1.2 var(--sans);letter-spacing:-.2px;min-height:60px}
.spot-why{margin:-6px 0 22px;color:var(--muted)}
.inv-tip.bad legend{color:var(--bad)}
.spot-paid{margin-top:20px}