/* ============================================================
   KTRI Hotel — 04 Booking wizard (uses styles.css tokens)
   ============================================================ */
:root{ --ok:#1F9D6B; --warn:#C2643F; --err:#C0492F; }
[data-theme="dark"]{ --ok:#3BB888; --warn:#E08A5E; --err:#E2705A; }

#toast.on{opacity:1!important;transform:translateX(-50%) translateY(-6px)!important}
.nav-help{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-2);font-weight:500}
.nav-help svg{width:15px;height:15px;color:var(--accent)}

.bw{padding-top:clamp(106px,13vh,134px);padding-bottom:90px}

/* stepper */
.stepper{display:flex;align-items:center;max-width:760px;margin:0 auto clamp(34px,4vw,56px)}
.step{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;position:relative}
.step .dot{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  font-family:'Newsreader',serif;font-size:1.1rem;color:var(--muted);background:var(--bg);transition:all .4s var(--ease)}
.step .sl{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:center;white-space:nowrap}
.step.active .dot{border-color:var(--accent);background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 5px var(--accent-tint)}
.step.active .sl{color:var(--text)}
.step.done .dot{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.step.done .sl{color:var(--text-2)}
.step-line{flex:1;height:1.5px;background:var(--line);margin:0 8px;position:relative;top:-13px}
.step-line i{display:block;height:100%;width:0;background:var(--accent);transition:width .6s var(--ease)}
.step-line.fill i{width:100%}
.step-mob{display:none}

/* wizard grid */
.bw-grid{display:grid;grid-template-columns:1fr 360px;gap:clamp(28px,3vw,44px);align-items:start;max-width:1180px;margin:0 auto}
.step-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-sm)}
.step-h{font-family:'Newsreader',serif;font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:400;margin-bottom:8px}
.step-sub{color:var(--text-2);margin-bottom:28px}
.panel{display:none}
.panel.on{display:block;animation:fadeStep .45s var(--ease)}
@keyframes fadeStep{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

/* room confirm */
.room-confirm{display:grid;grid-template-columns:200px 1fr;gap:22px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:28px}
.room-confirm img{width:100%;height:100%;object-fit:cover;min-height:150px}
.room-confirm .rc-body{padding:20px 22px 20px 0}
.room-confirm .rc-badge{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.room-confirm h3{font-family:'Newsreader',serif;font-size:1.5rem;margin:6px 0 10px}
.room-confirm .rc-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:.84rem}
.room-confirm .rc-meta span{display:inline-flex;align-items:center;gap:6px}
.room-confirm .rc-meta svg{width:14px;height:14px;color:var(--accent)}

.urgency{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--warn);margin-bottom:24px}
.urgency .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}

/* form fields */
.fld-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld.full{grid-column:1/-1}
.fld label{font-size:.72rem;letter-spacing:.04em;color:var(--text-2);font-weight:600}
.fld label .req{color:var(--err)}
.fld input,.fld select,.fld textarea{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;color:var(--text);font:inherit;font-size:1rem;outline:none;transition:border-color .25s,box-shadow .25s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.fld textarea{resize:vertical;min-height:84px}
.fld.err input,.fld.err select{border-color:var(--err)}
.fld .msg{font-size:.78rem;color:var(--err);min-height:0;display:none}
.fld.err .msg{display:block}
.fld.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* date + guests row */
.dg-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.stepper-ctrl{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.stepper-ctrl:last-child{border-bottom:none}
.stepper-ctrl .sl2{font-size:.95rem}.stepper-ctrl .ss2{font-size:.76rem;color:var(--muted)}
.stp{display:flex;align-items:center;gap:14px}
.stp button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:1.1rem;cursor:pointer;display:grid;place-items:center;transition:all .2s}
.stp button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.stp button:disabled{opacity:.35;cursor:not-allowed}
.stp .sv{min-width:18px;text-align:center;font-weight:600}
.promo{margin-top:8px}
.promo-toggle{background:none;border:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0}
.promo-box{display:none;margin-top:14px;gap:10px}
.promo-box.on{display:flex}
.promo-box input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;color:var(--text);font:inherit;outline:none;text-transform:uppercase}
.promo-msg{font-size:.82rem;margin-top:8px;font-weight:600}
.promo-msg.ok{color:var(--ok)}.promo-msg.no{color:var(--err)}

/* face id */
.face-banner{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--accent-tint);margin-bottom:26px}
.face-banner .ic{color:var(--accent);flex-shrink:0}.face-banner .ic svg{width:26px;height:26px}
.face-banner h4{font-size:1rem;margin-bottom:4px}
.face-banner p{font-size:.88rem;color:var(--text-2)}
.face-tabs{display:inline-flex;background:color-mix(in srgb,var(--text) 8%,transparent);border-radius:100px;padding:3px;margin-bottom:22px}
.face-tabs button{background:none;border:none;padding:9px 20px;border-radius:100px;color:var(--muted);font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;transition:all .25s}
.face-tabs button.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.face-cols{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.face-method{min-height:300px}
.face-pane{display:none}.face-pane.on{display:block}
.cam-stage{position:relative;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:#0b1018;display:grid;place-items:center}
.cam-stage video,.cam-stage img{width:100%;height:100%;object-fit:cover}
.cam-oval{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cam-oval::after{content:"";width:54%;height:74%;border:2px dashed rgba(255,255,255,.6);border-radius:50%}
.cam-placeholder{color:rgba(255,255,255,.7);font-size:.9rem;text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.cam-placeholder svg{width:40px;height:40px;color:var(--accent)}
.cam-actions{display:flex;gap:12px;margin-top:16px}
.dropzone{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;cursor:pointer;transition:all .25s;color:var(--text-2)}
.dropzone.over{border-color:var(--accent);background:var(--accent-tint)}
.dropzone svg{width:42px;height:42px;color:var(--accent)}
.dropzone .dz-sub{font-size:.82rem;color:var(--muted)}

.quality{border:1px solid var(--line);border-radius:var(--r-sm);padding:22px}
.q-ring{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.ring{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;position:relative;flex-shrink:0;
  background:conic-gradient(var(--ok) 0deg, var(--line) 0deg)}
.ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface)}
.ring .rv{position:relative;font-family:'Newsreader',serif;font-size:1.3rem;font-weight:500}
.q-ring .qt{font-size:.82rem;color:var(--muted)}.q-ring .qt b{display:block;color:var(--text);font-size:1rem;font-family:'Newsreader',serif;margin-bottom:2px}
.q-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.q-list li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text-2)}
.q-list li .qi{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--line)}
.q-list li.pass .qi{background:var(--ok)}.q-list li.fail .qi{background:var(--err)}
.q-list li .qi svg{width:12px;height:12px;color:#fff}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding:18px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.consent input{display:none}
.consent .cbx{width:20px;height:20px;border:1.5px solid var(--line);border-radius:5px;flex-shrink:0;margin-top:1px;display:grid;place-items:center;transition:all .2s}
.consent input:checked + .cbx{background:var(--accent);border-color:var(--accent)}
.consent input:checked + .cbx::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
.consent .ct{font-size:.88rem;color:var(--text-2)}.consent .ct a{color:var(--accent);font-weight:600}
.skip-link{display:block;text-align:center;margin-top:18px;color:var(--accent);font-weight:600;background:none;border:none;font:inherit;cursor:pointer;width:100%}

/* review (step 4) */
.rev-block{border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px;margin-bottom:16px}
.rev-block .rb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.rev-block h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.rev-block .edit{background:none;border:none;color:var(--accent);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.rev-block .rb-row{display:flex;justify-content:space-between;gap:14px;font-size:.92rem;padding:4px 0;color:var(--text-2)}
.rev-block .rb-row b{color:var(--text);font-weight:500;text-align:right}
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 4px}
.pay-opt{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:all .25s}
.pay-opt.on{border-color:var(--accent);background:var(--accent-tint)}
.pay-opt .rb{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;display:grid;place-items:center}
.pay-opt.on .rb{border-color:var(--accent)}.pay-opt.on .rb::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.pay-opt .pn{font-weight:600}
.pay-logo{font-family:'Newsreader',serif;font-style:italic;font-size:1.15rem;color:var(--text)}

/* nav buttons */
.bw-nav{display:flex;justify-content:space-between;gap:16px;margin-top:28px}
.bw-nav .spacer{flex:1}

/* summary sidebar */
.summary{position:sticky;top:96px}
.sum-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.sum-thumb{position:relative;aspect-ratio:16/10}
.sum-thumb img{width:100%;height:100%;object-fit:cover}
.sum-thumb .st-cap{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(transparent,rgba(7,11,20,.85));color:#fff}
.sum-thumb .st-cap .t{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.sum-thumb .st-cap h4{font-family:'Newsreader',serif;font-size:1.2rem}
.sum-body{padding:22px}
.sum-line{display:flex;justify-content:space-between;font-size:.86rem;color:var(--text-2);padding:5px 0}
.sum-line.sub{border-top:1px solid var(--line-soft);margin-top:10px;padding-top:14px}
.sum-line.disc{color:var(--ok);font-weight:600}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:12px;padding-top:16px}
.sum-total .tl{font-weight:600}
.sum-total .tv{font-family:'Newsreader',serif;font-size:1.8rem;color:var(--text)}
.sum-total .tv small{display:block;font-size:.72rem;color:var(--muted);font-family:'Hanken Grotesk';text-align:right}
.sum-meta{font-size:.82rem;color:var(--muted);margin:6px 0 14px}
.hold{display:flex;align-items:center;gap:9px;justify-content:center;font-size:.82rem;color:var(--text-2);background:var(--accent-tint);border-radius:100px;padding:9px;margin-top:16px}
.hold svg{width:14px;height:14px;color:var(--accent)}
.hold b{color:var(--accent);font-variant-numeric:tabular-nums}
.hold.warn b{color:var(--err)}
.sum-trust{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--muted)}
.sum-trust span{display:flex;align-items:center;gap:8px}.sum-trust svg{width:14px;height:14px;color:var(--ok)}

/* success */
.success{text-align:center;padding:40px 20px}
.success .ring2{width:80px;height:80px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin:0 auto 24px;animation:popIn .5s var(--ease)}
.success .ring2 svg{width:38px;height:38px;color:#fff}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.success h2{font-family:'Newsreader',serif;font-size:2.2rem;margin-bottom:10px}
.success p{color:var(--text-2);margin-bottom:8px}
.success .code{font-family:'Newsreader',serif;font-size:1.4rem;color:var(--accent);margin:14px 0 28px}

@media(max-width:1024px){
  .bw-grid{grid-template-columns:1fr}
  .summary{position:static;order:-1}
  .face-cols{grid-template-columns:1fr}
  .step .sl{display:none}
  .step-mob{display:block;text-align:center;margin:0 auto clamp(28px,4vw,44px);max-width:420px}
  .step-mob .sm-t{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
  .step-mob .sm-bar{height:4px;background:var(--line);border-radius:3px;overflow:hidden}
  .step-mob .sm-bar i{display:block;height:100%;background:var(--accent);transition:width .5s var(--ease)}
  .stepper{display:none}
}
@media(max-width:640px){
  .fld-grid,.dg-row,.pay-grid{grid-template-columns:1fr}
  .room-confirm{grid-template-columns:1fr}.room-confirm img{min-height:180px}
  .room-confirm .rc-body{padding:18px 20px}
}