/* book area: request-to-book (#/book/:handle). Standard checkout layout on purpose; the stepper, summary, chips and sitting bar carry the brand. */ :is(.v-book,.v-account) .bk{padding-top:28px} :is(.v-book,.v-account) .bk .back-link{margin-bottom:14px} :is(.v-book,.v-account) .bk-steps{max-width:720px;margin:0 0 36px} /* local fix: non-scaling-stroke breaks pathLength dashes in Chrome (segments instead of one part) */ :is(.v-book,.v-account) .bk-steps .stepper-part path{vector-effect:none;stroke-width:1.2} :is(.v-book,.v-account) .bk-steps .stepper-part .fg{stroke-width:2} :is(.v-book,.v-account) .bk-steps .stepper-part{height:5px} :is(.v-book,.v-account) .bk-grid{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:64px;align-items:start} :is(.v-book,.v-account) .bk-main{min-width:0;max-width:720px} :is(.v-book,.v-account) .bk-head{margin-bottom:32px} :is(.v-book,.v-account) .bk-head .lede{margin-top:10px} :is(.v-book,.v-account) .bk-sec{padding:28px 0;border-top:1px solid var(--line)} :is(.v-book,.v-account) .bk-sec:first-child{border-top:0;padding-top:0} :is(.v-book,.v-account) .bk-h{font-size:21px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px} :is(.v-book,.v-account) .bk-h .opt-tag{font-family:var(--ui);font-size:13.5px;font-weight:400;color:var(--steel);letter-spacing:0} :is(.v-book,.v-account) .bk-sub{color:var(--steel);font-size:15px;margin-top:6px;max-width:36em} :is(.v-book,.v-account) .bk-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--surface);font-size:14.5px;line-height:1.45;margin-bottom:20px} :is(.v-book,.v-account) .bk-alert .ic{width:20px;height:20px;color:var(--steel);margin-top:1px} :is(.v-book,.v-account) .bk-alert b{font-weight:600} :is(.v-book,.v-account) .bk-alert.bad{background:var(--clip-tint)} :is(.v-book,.v-account) .bk-alert.bad .ic,:is(.v-book,.v-account) .bk-alert.bad b{color:var(--clip)} :is(.v-book,.v-account) .bk-alert[hidden]{display:none} /* ---------- summary (right column; collapsible bar on phone) ---------- */ :is(.v-book,.v-account) .bk-aside{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;background:var(--bg)} :is(.v-book,.v-account) .sum-toggle{display:none} :is(.v-book,.v-account) .sum-status{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} :is(.v-book,.v-account) .sum-who{display:flex;gap:14px;align-items:center;padding-bottom:16px} :is(.v-book,.v-account) .sum-who b{display:block;font-family:var(--display);font-variation-settings:"opsz" 30;font-weight:680;font-size:18px;letter-spacing:-.02em;line-height:1.2} :is(.v-book,.v-account) .sum-who span{display:block;font-size:13.5px;color:var(--steel);line-height:1.4;margin-top:2px} :is(.v-book,.v-account) .sum-who span b{display:inline;font:inherit;color:var(--ink);font-weight:600} :is(.v-book,.v-account) .sum-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--line)} :is(.v-book,.v-account) .sum-row .k{display:block;font-size:12.5px;color:var(--steel);margin-bottom:2px} :is(.v-book,.v-account) .sum-row b{display:block;font-weight:600;font-size:15px;line-height:1.35} :is(.v-book,.v-account) .sum-row b.muted{font-weight:500} :is(.v-book,.v-account) .sum-row .v{display:block;font-size:13.5px;color:var(--steel);margin-top:2px} :is(.v-book,.v-account) .sum-edit{font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;flex:none;padding-top:16px} :is(.v-book,.v-account) .sum-edit:hover{color:var(--open-ink)} :is(.v-book,.v-account) .sum-bar{padding:0 0 12px;margin-top:-2px} :is(.v-book,.v-account) .sum-money{margin:0;padding:12px 0 0;border-top:1px solid var(--line)} :is(.v-book,.v-account) .sum-money div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:15px} :is(.v-book,.v-account) .sum-money dt{color:var(--steel)} :is(.v-book,.v-account) .sum-money dd{margin:0;font-weight:600} :is(.v-book,.v-account) .sum-money .dep{background:var(--open);border-radius:10px;padding:10px 12px;margin:4px -12px} :is(.v-book,.v-account) .sum-money .dep dt{color:var(--open-ink);font-weight:600} :is(.v-book,.v-account) .sum-money .dep dd{font-family:var(--display);font-variation-settings:"opsz" 30;font-weight:700;font-size:18px;color:var(--open-ink);letter-spacing:-.01em} :is(.v-book,.v-account) .sum-fine{font-size:13px;color:var(--steel);margin-top:12px;line-height:1.45} /* ---------- actions row (sticky bar on phone) ---------- */ :is(.v-book,.v-account) .bk-act{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)} :is(.v-book,.v-account) .bk-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink);height:44px;padding:0 4px} :is(.v-book,.v-account) .bk-back .ic{width:18px;height:18px} :is(.v-book,.v-account) .bk-back:hover span{text-decoration:underline;text-underline-offset:3px} :is(.v-book,.v-account) .act-mini{display:none} :is(.v-book,.v-account) .act-go{display:flex;flex-direction:column;align-items:flex-end;gap:8px} :is(.v-book,.v-account) .act-fine{font-size:13.5px;color:var(--steel)} :is(.v-book,.v-account) .btn[data-go]{position:relative;min-width:200px} :is(.v-book,.v-account) .btn[data-go][disabled]{opacity:1;background:var(--surface-2);color:var(--steel)} :is(.v-book,.v-account) .go-busy{display:none;position:absolute;left:24px;right:24px;bottom:9px;height:6px} :is(.v-book,.v-account) .go-busy svg{width:100%;height:6px;overflow:visible;display:block} :is(.v-book,.v-account) .go-busy path{fill:none;stroke:var(--on-green);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:goDraw 1.1s var(--ease-part) infinite} :is(.v-book,.v-account) .btn[data-go].busy{opacity:1;background:var(--green);color:var(--on-green)} :is(.v-book,.v-account) .btn[data-go].busy .go-busy{display:block} @keyframes goDraw{0%{stroke-dashoffset:1}60%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}} /* ---------- step 1: service ---------- */ :is(.v-book,.v-account) .svcs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} :is(.v-book,.v-account) .svc{border-bottom:1px solid var(--line)} :is(.v-book,.v-account) .svc-pick{position:relative;width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:start;padding:20px 4px;text-align:left} :is(.v-book,.v-account) .svc-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);margin-top:2px;transition:border-color .15s, box-shadow .15s} :is(.v-book,.v-account) .svc-pick:hover .svc-dot{border-color:var(--steel)} :is(.v-book,.v-account) .svc.on .svc-dot{border-color:var(--green);box-shadow:inset 0 0 0 4.5px var(--bg), inset 0 0 0 10px var(--green)} :is(.v-book,.v-account) .svc-t b{display:block;font-family:var(--display);font-variation-settings:"opsz" 30;font-weight:680;font-size:18px;letter-spacing:-.02em} :is(.v-book,.v-account) .svc-t span{display:block;font-size:14.5px;color:var(--steel);margin-top:4px;max-width:34em;line-height:1.45} :is(.v-book,.v-account) .svc-m{font-size:14.5px;font-weight:600;text-align:right;white-space:nowrap;padding-top:2px} :is(.v-book,.v-account) .svc-m em{display:block;font-style:normal;font-weight:500;font-size:12.5px;color:var(--clip);margin-top:4px} :is(.v-book,.v-account) .svc-pick .pl{position:absolute;left:40px;bottom:-1px;width:120px;height:5px} :is(.v-book,.v-account) .svc-ruler{padding:4px 4px 28px 40px} :is(.v-book,.v-account) .svc-ruler .sizes{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap} :is(.v-book,.v-account) .svc-ruler .sizes > span{font-size:13.5px;font-weight:600;margin-right:6px} /* ---------- step 2: time ---------- */ :is(.v-book,.v-account) .wk-strip{margin-bottom:28px} :is(.v-book,.v-account) .wk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} :is(.v-book,.v-account) .wk-top b{font-weight:600;font-size:15px} :is(.v-book,.v-account) .wk-nav{display:flex;gap:4px} :is(.v-book,.v-account) .wk-nav .icon-btn{border:1px solid var(--line-strong);width:36px;height:36px} :is(.v-book,.v-account) .wk-nav .icon-btn .ic{width:17px;height:17px} :is(.v-book,.v-account) .wk-nav .icon-btn[disabled]{opacity:.35;cursor:default} :is(.v-book,.v-account) .wk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px} :is(.v-book,.v-account) .wd{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 2px 14px;border-radius:14px;border:1px solid var(--line);transition:border-color .15s, background-color .15s;min-width:0} :is(.v-book,.v-account) .wd:hover{border-color:var(--line-strong)} :is(.v-book,.v-account) .wd-w{font-size:12.5px;font-weight:600;color:var(--steel)} :is(.v-book,.v-account) .wd b{font-family:var(--display);font-variation-settings:"opsz" 30;font-weight:700;font-size:21px;line-height:1.15;letter-spacing:-.02em} :is(.v-book,.v-account) .wd-n{font-size:11.5px;font-weight:600;color:var(--open-ink);white-space:nowrap} :is(.v-book,.v-account) .wd.none{background:transparent} :is(.v-book,.v-account) .wd.none b,:is(.v-book,.v-account) .wd.none .wd-n{color:var(--steel);font-weight:500} :is(.v-book,.v-account) .wd.none b{opacity:.6} :is(.v-book,.v-account) .wd.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--bg)} :is(.v-book,.v-account) .wd .pl{position:absolute;left:22%;right:22%;bottom:6px;width:56%;height:5px} :is(.v-book,.v-account) .tm-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px} :is(.v-book,.v-account) .tm-head > span{font-size:14px;color:var(--steel)} :is(.v-book,.v-account) .tm-group{margin-bottom:18px} :is(.v-book,.v-account) .tm-group h3{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--steel);letter-spacing:.01em;margin-bottom:8px} :is(.v-book,.v-account) .tm-chips{display:flex;flex-wrap:wrap;gap:8px} :is(.v-book,.v-account) .tm-bar{margin-top:26px;padding:18px 18px 10px;border-radius:14px;background:var(--surface)} :is(.v-book,.v-account) .tm-bar .sit-cap{margin-bottom:12px;flex-wrap:wrap} :is(.v-book,.v-account) .tm-bar .bar .track{background:var(--bg)} :is(.v-book,.v-account) .tm-note{font-size:13.5px;color:var(--steel);margin-top:12px;max-width:40em} :is(.v-book,.v-account) .tm-none{padding:20px;border-radius:14px;background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;gap:10px} :is(.v-book,.v-account) .tm-none p{font-size:15px} :is(.v-book,.v-account) .tm-none .bar{width:100%;margin-top:10px} :is(.v-book,.v-account) .tm-none .bar .track{background:var(--bg)} /* ---------- step 3: details ---------- */ :is(.v-book,.v-account) .bk-form textarea{min-height:120px} :is(.v-book,.v-account) .bk-sec > .fld{margin-top:14px} :is(.v-book,.v-account) .bk-tick{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line-strong);border-radius:14px;cursor:pointer;margin-top:14px;transition:border-color .15s, background-color .15s} :is(.v-book,.v-account) .bk-tick:hover{border-color:var(--steel)} :is(.v-book,.v-account) .bk-tick input{position:absolute;opacity:0;width:1px;height:1px} :is(.v-book,.v-account) .bk-tick-box{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-strong);display:grid;place-items:center;transition:background-color .15s, border-color .15s;margin-top:1px} :is(.v-book,.v-account) .bk-tick-box svg{width:18px;height:18px;overflow:visible} :is(.v-book,.v-account) .bk-tick-box path{fill:none;stroke:var(--on-green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease-part) .05s} :is(.v-book,.v-account) .bk-tick input:checked + .bk-tick-box{background:var(--green);border-color:var(--green)} :is(.v-book,.v-account) .bk-tick input:checked + .bk-tick-box path{stroke-dashoffset:0} :is(.v-book,.v-account) .bk-tick input:focus-visible + .bk-tick-box{outline:2px solid var(--green);outline-offset:2px} :is(.v-book,.v-account) .bk-tick:has(input:checked){border-color:var(--green);background:color-mix(in srgb, var(--open) 55%, transparent)} :is(.v-book,.v-account) .bk-tick-t b{display:block;font-weight:600;font-size:15.5px;line-height:1.4} :is(.v-book,.v-account) .bk-tick-t small{display:block;font-size:13.5px;color:var(--steel);margin-top:3px} :is(.v-book,.v-account) .bk-tick.has-error{border-color:var(--clip)} :is(.v-book,.v-account) .bk-tick-err{margin-top:8px} :is(.v-book,.v-account) .insp-k{font-size:13.5px;font-weight:600;margin:18px 0 10px} :is(.v-book,.v-account) .insp-k .muted{font-weight:500;margin-left:6px} :is(.v-book,.v-account) .lks,:is(.v-book,.v-account) .ups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} :is(.v-book,.v-account) .lk{position:relative;text-align:left;border-radius:12px;min-width:0} :is(.v-book,.v-account) .lk .ph{border-radius:12px;outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s} :is(.v-book,.v-account) .lk:hover .ph{outline-color:var(--line-strong)} :is(.v-book,.v-account) .lk.on .ph{outline-color:var(--green)} :is(.v-book,.v-account) .lk-t{display:block;font-size:12.5px;color:var(--steel);margin-top:8px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :is(.v-book,.v-account) .lk.on .lk-t{color:var(--ink);font-weight:600} :is(.v-book,.v-account) .lk-c{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--on-green);display:grid;place-items:center;opacity:0;transform:scale(.7);transition:opacity .2s, transform .25s var(--ease-part)} :is(.v-book,.v-account) .lk-c .ic{width:16px;height:16px;stroke-width:2.2} :is(.v-book,.v-account) .lk.on .lk-c{opacity:1;transform:none} :is(.v-book,.v-account) .up-th{position:relative} :is(.v-book,.v-account) .up-th .ph{border-radius:12px} :is(.v-book,.v-account) .up-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb, var(--ink) 72%, transparent);color:var(--bg)} :is(.v-book,.v-account) .up-x .ic{width:15px;height:15px} :is(.v-book,.v-account) .up-add{aspect-ratio:4/5;border-radius:12px;border:1.5px dashed var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:10px;cursor:pointer;transition:border-color .15s, background-color .15s} :is(.v-book,.v-account) .up-add:hover{border-color:var(--green);background:var(--open)} :is(.v-book,.v-account) .up-add .ic{width:22px;height:22px;color:var(--open-ink);margin-bottom:4px} :is(.v-book,.v-account) .up-add b{font-size:14px;font-weight:600} :is(.v-book,.v-account) .up-add span{font-size:12px;color:var(--steel)} :is(.v-book,.v-account) .up-add:focus-within{outline:2px solid var(--green);outline-offset:2px} :is(.v-book,.v-account) .pt-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px} :is(.v-book,.v-account) .pt-opt{position:relative;cursor:pointer} :is(.v-book,.v-account) .pt-opt input{position:absolute;opacity:0;width:1px;height:1px} :is(.v-book,.v-account) .pt-opt span{display:block;height:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);transition:border-color .15s} :is(.v-book,.v-account) .pt-opt b{display:block;font-weight:600;font-size:15px} :is(.v-book,.v-account) .pt-opt small{display:block;font-size:13px;color:var(--steel);margin-top:2px} :is(.v-book,.v-account) .pt-opt input:checked + span{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)} :is(.v-book,.v-account) .pt-opt input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px} :is(.v-book,.v-account) .pt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} :is(.v-book,.v-account) .pt-note{font-size:13.5px;color:var(--steel);margin-top:12px;max-width:40em} :is(.v-book,.v-account) #patch .bk-alert{margin:16px 0 0} :is(.v-book,.v-account) #patch .fld-err{margin-top:10px} /* ---------- step 4: deposit ---------- */ :is(.v-book,.v-account) .who-line{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;margin-top:14px} :is(.v-book,.v-account) .who-line b{display:block;font-weight:600} :is(.v-book,.v-account) .who-line span{display:block;font-size:13.5px;color:var(--steel)} :is(.v-book,.v-account) .who-line .link-btn{margin-left:auto} :is(.v-book,.v-account) .gate{margin-top:6px} :is(.v-book,.v-account) .gate .bk-sub{margin-bottom:16px} :is(.v-book,.v-account) .sso{display:grid;grid-template-columns:1fr 1fr;gap:10px} :is(.v-book,.v-account) .sso-b{height:48px;font-weight:600} :is(.v-book,.v-account) .sso-g{width:18px;height:18px} :is(.v-book,.v-account) .or{display:flex;align-items:center;gap:14px;margin:18px 0;font-size:13px;color:var(--steel)} :is(.v-book,.v-account) .or::before,:is(.v-book,.v-account) .or::after{content:"";flex:1;height:1px;background:var(--line)} :is(.v-book,.v-account) .gate-mode{width:100%;margin-bottom:16px} :is(.v-book,.v-account) .gate-mode label{flex:1} :is(.v-book,.v-account) .gate-mode span{justify-content:center} :is(.v-book,.v-account) .gate-f{display:flex;flex-direction:column;gap:14px;margin-bottom:16px} :is(.v-book,.v-account) .pw{position:relative} :is(.v-book,.v-account) .pw input{padding-right:72px} :is(.v-book,.v-account) .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:36px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--steel)} :is(.v-book,.v-account) .pw-eye:hover{color:var(--ink);background:var(--surface)} :is(.v-book,.v-account) .rules{list-style:none;margin:16px 0 0;padding:0} :is(.v-book,.v-account) .rules li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5} :is(.v-book,.v-account) .rules li:first-child{border-top:0;padding-top:4px} :is(.v-book,.v-account) .rules b{font-weight:600} :is(.v-book,.v-account) .pay{position:relative;margin-top:16px} :is(.v-book,.v-account) .pay.locked{display:flex;flex-direction:column} :is(.v-book,.v-account) .pay.locked > :not(.lock-note){opacity:.38;pointer-events:none;filter:grayscale(1)} :is(.v-book,.v-account) .lock-note{order:-1;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--steel);margin-bottom:14px} :is(.v-book,.v-account) .lock-note .ic{width:18px;height:18px} :is(.v-book,.v-account) .xp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} :is(.v-book,.v-account) .xp-b{display:flex;align-items:center;justify-content:center;gap:4px;height:48px;border-radius:10px;font-weight:600;font-size:17px;letter-spacing:-.01em;transition:opacity .15s, transform .15s;white-space:nowrap} :is(.v-book,.v-account) .xp-b:active{transform:scale(.98)} :is(.v-book,.v-account) .xp-b:hover{opacity:.88} :is(.v-book,.v-account) .xp-b .sso-g{width:19px;height:19px;margin-top:-3px} :is(.v-book,.v-account) .xp-apple{background:#000;color:#fff} :is(.v-book,.v-account) .xp-google{background:#fff;color:#3C4043;box-shadow:inset 0 0 0 1px #DADCE0} :is(.v-book,.v-account) .xp-google .g{font-weight:700;font-size:19px;color:#3C4043} :is(.v-book,.v-account) .xp-revolut{background:#191C1F;color:#fff;font-size:15.5px} :is(.v-book,.v-account) .xp-revolut .r{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#fff;color:#191C1F;font-size:13px;font-weight:800;margin-right:4px} :root[data-theme="dark"] :is(.v-book,.v-account) .xp-apple{background:#fff;color:#000} :root[data-theme="dark"] :is(.v-book,.v-account) .xp-google{background:#000;color:#fff;box-shadow:inset 0 0 0 1px #5F6368} :root[data-theme="dark"] :is(.v-book,.v-account) .xp-google .g{color:#fff} :root[data-theme="dark"] :is(.v-book,.v-account) .xp-revolut{box-shadow:inset 0 0 0 1px #3A3F44} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(.v-book,.v-account) .xp-apple{background:#fff;color:#000} :root:not([data-theme="light"]) :is(.v-book,.v-account) .xp-google{background:#000;color:#fff;box-shadow:inset 0 0 0 1px #5F6368} :root:not([data-theme="light"]) :is(.v-book,.v-account) .xp-google .g{color:#fff} :root:not([data-theme="light"]) :is(.v-book,.v-account) .xp-revolut{box-shadow:inset 0 0 0 1px #3A3F44} } :is(.v-book,.v-account) .xp-b.sm{height:40px;width:150px;font-size:16px;margin:0 auto} :is(.v-book,.v-account) .pm-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} :is(.v-book,.v-account) .pm{position:relative;cursor:pointer} :is(.v-book,.v-account) .pm input{position:absolute;opacity:0;width:1px;height:1px} :is(.v-book,.v-account) .pm-ui{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;border:1px solid var(--line-strong);transition:border-color .15s} :is(.v-book,.v-account) .pm-ui b{display:block;font-weight:600;font-size:15px} :is(.v-book,.v-account) .pm-ui small{display:block;font-size:13px;color:var(--steel)} :is(.v-book,.v-account) .pm input:checked + .pm-ui{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)} :is(.v-book,.v-account) .pm input:focus-visible + .pm-ui{outline:2px solid var(--green);outline-offset:2px} :is(.v-book,.v-account) .cb{display:inline-grid;place-items:center;flex:none;min-width:38px;height:25px;padding:0 5px;border-radius:5px;border:1px solid var(--line-strong);background:var(--bg);font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--ink);line-height:1} :is(.v-book,.v-account) .cb-visa{font-style:italic;font-size:11.5px;letter-spacing:.02em} :is(.v-book,.v-account) .cb-mc{display:inline-flex;align-items:center;justify-content:center} :is(.v-book,.v-account) .cb-mc i{width:12px;height:12px;border-radius:50%;background:var(--ink)} :is(.v-book,.v-account) .cb-mc i + i{background:var(--steel);margin-left:-5px;opacity:.85} :is(.v-book,.v-account) .cb-amex{font-size:9.5px} :is(.v-book,.v-account) .cb-ap{font-size:11px;font-weight:700;letter-spacing:0} :is(.v-book,.v-account) .cb-ap::before{content:"";width:0} :is(.v-book,.v-account) .cb-new{color:var(--steel);border-style:dashed} :is(.v-book,.v-account) .cb-new .ic{width:15px;height:15px} :is(.v-book,.v-account) .cb-set{display:flex;gap:4px;opacity:.75} :is(.v-book,.v-account) .cardf{display:flex;flex-direction:column;gap:14px} :is(.v-book,.v-account) .cc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} :is(.v-book,.v-account) .cc-num{position:relative} :is(.v-book,.v-account) .cc-num input{padding-right:136px} :is(.v-book,.v-account) .cc-row .cc-num input{padding-right:56px} :is(.v-book,.v-account) .cc-brand{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;pointer-events:none} :is(.v-book,.v-account) .cc-cvc svg{width:30px;height:20px;fill:none;stroke:var(--steel);stroke-width:1.2} :is(.v-book,.v-account) .cc-cvc svg rect + path + rect{fill:var(--line-strong);stroke:none} :is(.v-book,.v-account) .fld .fld-err[hidden]{display:none} :is(.v-book,.v-account) .save-c{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14.5px;cursor:pointer} :is(.v-book,.v-account) .save-c input{width:18px;height:18px;accent-color:var(--green)} :is(.v-book,.v-account) .stripe-l{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--steel);margin-top:16px} :is(.v-book,.v-account) .stripe-l .ic{width:15px;height:15px} /* wallet confirmation sheet */ :is(.v-book,.v-account) .wal-top{padding:8px 0 18px;border-bottom:1px solid var(--line);margin-bottom:6px} :is(.v-book,.v-account) .wal-dl{margin:0} :is(.v-book,.v-account) .wal-dl div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px} :is(.v-book,.v-account) .wal-dl dt{color:var(--steel)} :is(.v-book,.v-account) .wal-dl dd{margin:0;font-weight:500} :is(.v-book,.v-account) .wal-dl .tot dd{font-family:var(--display);font-weight:700;font-size:20px} :is(.v-book,.v-account) .wal-fine{font-size:13px;color:var(--steel);margin-top:14px} /* ---------- sent ---------- */ :is(.v-book,.v-account) .sent .bk-steps{margin-bottom:44px} :is(.v-book,.v-account) .sent-hero{margin-bottom:32px} :is(.v-book,.v-account) .sent-mark{width:88px;height:88px;overflow:visible;margin:0 0 22px -6px;display:block} :is(.v-book,.v-account) .sent-mark .ring{fill:none;stroke:var(--line-strong);stroke-width:1.5;opacity:0;transition:opacity .4s ease .5s} :is(.v-book,.v-account) .sent-mark .go{fill:none;stroke:var(--stroke);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-part)} :is(.v-book,.v-account) .sent-mark.on .go{stroke-dashoffset:0} :is(.v-book,.v-account) .sent-mark.on .ring{opacity:1} :is(.v-book,.v-account) .sent-hero .eyebrow{margin-bottom:10px} :is(.v-book,.v-account) .next{list-style:none;margin:0 0 36px;padding:0;max-width:560px} :is(.v-book,.v-account) .next li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;padding-bottom:20px} :is(.v-book,.v-account) .next li::before{content:"";position:absolute;left:6.25px;top:18px;bottom:2px;width:1.5px;background:var(--line)} :is(.v-book,.v-account) .next li:last-child::before{display:none} :is(.v-book,.v-account) .next i{grid-row:1 / span 2;width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);background:var(--bg);margin-top:4px} :is(.v-book,.v-account) .next li.now i{border-color:var(--green);background:var(--green);box-shadow:0 0 0 4px var(--open)} :is(.v-book,.v-account) .next b{font-weight:600;font-size:15.5px} :is(.v-book,.v-account) .next span{color:var(--steel);font-size:15px;line-height:1.5} :is(.v-book,.v-account) .sent-act{display:flex;gap:12px;flex-wrap:wrap} :is(.v-book,.v-account) .sent-more{margin-top:22px} /* ---------- tablet + phone: summary becomes a bar, actions stick to the bottom ---------- */ @media (max-width: 960px){ :is(.v-book,.v-account) .bk-grid{display:flex;flex-direction:column;gap:0} :is(.v-book,.v-account) .bk-main{max-width:none;width:100%} :is(.v-book,.v-account) .bk-aside{order:-1;position:sticky;top:72px;z-index:30;width:auto;margin:0 0 28px;padding:0;border-radius:14px;box-shadow:none;align-self:stretch} :is(.v-book,.v-account) .sum-toggle{display:grid;grid-template-columns:32px minmax(0,1fr) 20px;gap:12px;align-items:center;width:100%;padding:10px 14px;text-align:left} :is(.v-book,.v-account) .sum-toggle b{display:block;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(.v-book,.v-account) .sum-toggle small{display:block;font-size:12.5px;color:var(--steel)} :is(.v-book,.v-account) .sum-toggle .ic{width:18px;height:18px;color:var(--steel);transition:transform .25s var(--ease-part)} :is(.v-book,.v-account) .sum-toggle[aria-expanded="true"] .ic{transform:rotate(180deg)} :is(.v-book,.v-account) .sum-body{display:none;padding:4px 16px 16px;border-top:1px solid var(--line);max-height:calc(100dvh - 220px);overflow-y:auto} :is(.v-book,.v-account) .bk-aside.open .sum-body{display:block} :is(.v-book,.v-account) .bk-aside.open .sum-who{padding-top:12px} :is(.v-book,.v-account) .sent .bk-aside{position:static;order:0;margin-top:32px} :is(.v-book,.v-account) .sent .sum-toggle{display:none} :is(.v-book,.v-account) .sent .sum-body{display:block;border-top:0;max-height:none;padding:20px} :is(.v-book,.v-account) .bk{padding-bottom:120px} :is(.v-book,.v-account) .bk.sent{padding-bottom:48px} :is(.v-book,.v-account) .bk-act{position:fixed;left:0;right:0;bottom:0;z-index:35;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb, var(--bg) 94%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);gap:12px} :is(.v-book,.v-account) .bk-back{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;border:1px solid var(--line-strong);flex:none} :is(.v-book,.v-account) .bk-back span{display:none} :is(.v-book,.v-account) .act-mini{display:block;flex:1 1 auto;min-width:0} :is(.v-book,.v-account) .act-mini b{display:block;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(.v-book,.v-account) .act-mini span{display:block;font-size:12.5px;color:var(--steel)} :is(.v-book,.v-account) .btn[data-go]{min-width:0} :is(.v-book,.v-account) .bk-act.is-pay .act-mini{display:none} :is(.v-book,.v-account) .bk-act.is-pay .act-go{flex:1;align-items:stretch;gap:6px} :is(.v-book,.v-account) .bk-act.is-pay .act-fine{text-align:center;font-size:12.5px} :is(.v-book,.v-account) .bk-act.is-pay{padding-top:10px} } @media (max-width: 640px){ :is(.v-book,.v-account) .bk{padding-top:16px} :is(.v-book,.v-account) .bk .back-link{display:none} :is(.v-book,.v-account) .bk-steps{margin-bottom:20px} :is(.v-book,.v-account) .bk-aside{top:60px;margin:0 -16px 24px;border-radius:0;border-left:0;border-right:0} :is(.v-book,.v-account) .bk-head{margin-bottom:24px} :is(.v-book,.v-account) .bk-head h1{font-size:30px} :is(.v-book,.v-account) .bk-sec{padding:24px 0} :is(.v-book,.v-account) .svc-pick{grid-template-columns:20px minmax(0,1fr);gap:12px;padding:18px 0} :is(.v-book,.v-account) .svc-m{grid-column:2;text-align:left;margin-top:-6px} :is(.v-book,.v-account) .svc-m em{display:inline;margin-left:8px} :is(.v-book,.v-account) .svc-ruler{padding:0 0 24px} :is(.v-book,.v-account) .svc-pick .pl{left:32px} :is(.v-book,.v-account) .wk-days{gap:4px} :is(.v-book,.v-account) .wd{padding:8px 0 12px;border-radius:12px} :is(.v-book,.v-account) .wd b{font-size:18px} :is(.v-book,.v-account) .wd-w{font-size:11.5px} :is(.v-book,.v-account) .wd-n{font-size:10.5px} :is(.v-book,.v-account) .tm-chips .chip{height:40px;padding:0 12px 1px;font-size:14px} :is(.v-book,.v-account) .tm-bar{padding:14px 14px 8px;margin-left:-4px;margin-right:-4px} :is(.v-book,.v-account) .lks,:is(.v-book,.v-account) .ups{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} :is(.v-book,.v-account) .pt-opts{grid-template-columns:1fr} :is(.v-book,.v-account) .sso{grid-template-columns:1fr} :is(.v-book,.v-account) .xp{grid-template-columns:1fr 1fr} :is(.v-book,.v-account) .xp-revolut{grid-column:1 / -1} :is(.v-book,.v-account) .rules li{grid-template-columns:1fr;gap:2px} :is(.v-book,.v-account) .cc-num input{padding-right:124px} :is(.v-book,.v-account) .bk-act .btn.lg{height:48px;padding:0 18px;font-size:15px} :is(.v-book,.v-account) .sent-act .btn{flex:1 1 100%} :is(.v-book,.v-account) .sent .bk-aside{margin:28px 0 0;border-radius:14px;border:1px solid var(--line)} } @media (prefers-reduced-motion: reduce){ :is(.v-book,.v-account) .sent-mark .go{stroke-dashoffset:0;opacity:0;transition:opacity .4s ease} :is(.v-book,.v-account) .sent-mark.on .go{opacity:1} :is(.v-book,.v-account) .bk-tick-box path{transition:none} :is(.v-book,.v-account) .go-busy path{animation:none;stroke-dashoffset:0} } /* toasts never cover the action; focused fields never hide under the sticky bar */ body:has(.bk) .toast{pointer-events:none} @media (max-width: 960px){ html:has(.bk-act){scroll-padding-bottom:120px;scroll-padding-top:140px} body:has(.bk-act) #toasts{bottom:calc(96px + env(safe-area-inset-bottom))} body:has(.bk-act.is-pay) #toasts{bottom:calc(112px + env(safe-area-inset-bottom))} }