/* ---- booking created popup (spec 12) — one component, both hosts ----
   Colour: the spec's own greens, scoped to .bk-wrap, as designed (section 3.1).
   The app-wide positive tokens are untouched; other done states keep using them.
   HIG A3 conflict on the reference pill is owner-accepted — see REPORT-A.md. */
.bk-wrap{--bk-green:#36b900;--bk-green-soft:#e8f7dd;--bk-green-ink:#2a8f00;position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.bk-scrim{position:absolute;inset:0;background:rgba(17,24,39,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.bk-card{position:relative;width:min(340px,100%);background:var(--surface);border-radius:32px;padding:30px 22px 20px;text-align:center;box-shadow:0 30px 70px -10px rgba(26,31,54,.35);transform:translateY(40px) scale(.9);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.25,1.15),opacity .25s}
.bk-wrap.in .bk-scrim{opacity:1}
.bk-wrap.in .bk-card{transform:none;opacity:1}
.bk-wrap.out .bk-card{transform:translateY(16px) scale(.96);opacity:0;transition:transform .24s ease-in,opacity .2s}
.bk-mark{position:relative;width:84px;height:84px;margin:0 auto 16px}
.bk-mark svg{position:relative;width:84px;height:84px;transform:scale(.4);opacity:0}
.bk-c{fill:var(--bk-green);stroke:var(--bk-green);stroke-width:4;stroke-dasharray:214;stroke-dashoffset:214;fill-opacity:0}
.bk-t{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50}
.bk-wrap.in .bk-mark svg{animation:bkPop .5s cubic-bezier(.2,.9,.3,1.4) .12s forwards}
.bk-wrap.in .bk-c{animation:bkRing .45s ease-out .18s forwards,bkFill .25s ease-out .55s forwards}
.bk-wrap.in .bk-t{animation:bkTick .32s cubic-bezier(.65,0,.35,1) .7s forwards}
.bk-burst{position:absolute;inset:0;border-radius:50%;background:var(--bk-green);opacity:0}
.bk-wrap.in .bk-burst{animation:bkBurst .7s ease-out .62s}
@keyframes bkPop{to{transform:none;opacity:1}}
@keyframes bkRing{to{stroke-dashoffset:0}}
@keyframes bkFill{to{fill-opacity:1}}
@keyframes bkTick{to{stroke-dashoffset:0}}
@keyframes bkBurst{0%{opacity:.35;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.bk-card h3,.bk-card p,.bk-rows,.bk-ref,.bk-btns{opacity:0;transform:translateY(8px)}
.bk-wrap.in .bk-card h3{animation:bkUp .4s cubic-bezier(.2,.8,.2,1) .8s forwards}
.bk-wrap.in .bk-card p{animation:bkUp .4s cubic-bezier(.2,.8,.2,1) .86s forwards}
.bk-wrap.in .bk-rows{animation:bkUp .4s cubic-bezier(.2,.8,.2,1) .92s forwards}
.bk-wrap.in .bk-ref{animation:bkUp .4s cubic-bezier(.2,.8,.2,1) .98s forwards}
.bk-wrap.in .bk-btns{animation:bkUp .4s cubic-bezier(.2,.8,.2,1) 1.04s forwards}
@keyframes bkUp{to{opacity:1;transform:none}}
.bk-card h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.bk-card p{font-size:14px;line-height:1.45;color:var(--ink-2);margin:0 0 16px}
.bk-card p b{color:var(--ink);font-weight:650}
.bk-rows{background:var(--bg);border-radius:18px;padding:4px 14px;text-align:start}
.bk-rows div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font-size:13.5px}
.bk-rows div+div{border-top:1px solid var(--line-2)}
.bk-rows span{color:var(--muted)}
.bk-rows b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.bk-ref{display:inline-block;margin:14px 0 18px;padding:6px 12px;border-radius:999px;background:var(--bk-green-soft);color:var(--bk-green-ink);font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.bk-btns{display:flex;gap:8px}
.bk-btns .btn{flex:1;justify-content:center;border-radius:999px;padding:13px 10px;font-size:14.5px}
.bk-btns .btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff;box-shadow:0 8px 20px -6px rgba(37,99,235,.5)}
.bk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bk-card,.bk-mark svg,.bk-c,.bk-t,.bk-card h3,.bk-card p,.bk-rows,.bk-ref,.bk-btns{animation:none!important;transition:opacity .2s!important;transform:none!important;stroke-dashoffset:0!important;opacity:1}.bk-c{fill-opacity:1}.bk-burst{display:none}}

/* operator desktop sizing */
.bk-wrap.op{z-index:200}
.bk-wrap.op .bk-card{width:min(420px,100%);padding:34px 28px 24px}
.bk-wrap.op .bk-card h3{font-size:24px}
.bk-rows b small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;text-align:end}
.bk-rows div{align-items:flex-start}
.bk-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:12px}
.bk-card .bk-note{opacity:0;transform:translateY(8px)}
.bk-wrap.in .bk-card .bk-note{animation:bkUp .4s cubic-bezier(.2,.8,.2,1) .95s forwards}
.bk-wrap.op .bk-btns .btn{padding:12px 14px;font-size:14px}
@media (prefers-reduced-motion:reduce){.bk-card .bk-note{animation:none!important;opacity:1;transform:none}}