/* Vision live prototype — the native room & rates proposal (Figma ABS Value Discovery, 7003:9639).
   Loop: Landing (budget filter, matching rooms) → Select → Level 2 room page → add Parking
   (card + price update, "Parking added") → swipe to the next room (add-on carried across)
   → scroll to Similar rooms. Same pink-gold iPhone and touch language as the other Expedia prototypes. */
.vl-figure{ margin:0; display:flex; flex-direction:column; gap:14px; }
.vl-mount{ --vl-ink:#191e3b; --vl-ink2:#3f4459; --vl-ink3:#5e6174; --vl-line:#dfe0e4; --vl-blue:#1668e3; --vl-bar:#3662d8;
  position:relative; overflow:hidden; border-radius:16px; aspect-ratio:450/640;
  background:linear-gradient(180deg, #e6efec 0%, #eef3f1 45%, #f8f9f9 100%); }
.vl-mount .vl-static{ width:100%; height:100%; object-fit:cover; display:block; }
.vl-mount.vl-ready .vl-static{ display:none; }
.vl-cap{ min-height:3em; font-family:"Instrument Sans",sans-serif; font-size:14px; line-height:1.5; color:#374151; transition:opacity .3s ease; }
.vl-cap b{ font-family:"DM Mono",monospace; font-size:12px; color:#1f7a66; font-weight:500; margin-right:8px; }
.vl-cap.out{ opacity:0; }

.vl-phone-wrap{ position:absolute; top:5%; height:90%; left:50%; aspect-ratio:409/846; transform:translateX(-50%);
  box-sizing:border-box; border-radius:calc(62px * var(--vl-s,.5)); border:calc(8px * var(--vl-s,.5)) solid transparent;
  background:linear-gradient(#0b0b0c,#0b0b0c) padding-box,
    linear-gradient(135deg,#f6dfd3 0%,#e2b6a3 22%,#f3d4c6 46%,#cf9d89 72%,#ecc8b8 100%) border-box;
  box-shadow:inset 0 0 0 calc(1.5px * var(--vl-s,.5)) rgba(255,255,255,.55), inset 0 0 0 calc(3px * var(--vl-s,.5)) rgba(150,96,78,.35),
    0 30px 60px -18px rgba(20,29,56,.35); }
.vl-phone-wrap::before, .vl-phone-wrap::after{ content:""; position:absolute; width:calc(3px * var(--vl-s,.5)); background:#d6a592; border-radius:2px; }
.vl-phone-wrap::before{ left:calc(-11px * var(--vl-s,.5)); top:calc(157px * var(--vl-s,.5)); height:calc(58px * var(--vl-s,.5)); box-shadow:0 calc(78px * var(--vl-s,.5)) 0 #d6a592; }
.vl-phone-wrap::after{ right:calc(-11px * var(--vl-s,.5)); top:calc(197px * var(--vl-s,.5)); height:calc(94px * var(--vl-s,.5)); }
.vl-phone{ position:absolute; left:calc(9px * var(--vl-s,.5)); top:calc(9px * var(--vl-s,.5)); width:375px; height:812px; border-radius:45px; overflow:hidden;
  transform-origin:0 0; transform:scale(var(--vl-s,.5)); background:#fff; color:var(--vl-ink);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; -webkit-font-smoothing:antialiased; user-select:none;
  -webkit-mask-image:-webkit-radial-gradient(white, black); }
.vl-phone *{ box-sizing:border-box; margin:0; }
.vl-phone svg{ display:block; flex:none; }
.vl-ic{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.vl-statusbar{ position:absolute; left:0; right:0; top:0; height:48px; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:0 22px 0 30px; font-weight:600; font-size:16px; color:#000; transition:color .4s ease; pointer-events:none; }
.vl-statusbar svg{ fill:currentColor; }
.vl-statusbar.light{ color:#fff; }
.vl-notch{ position:absolute; left:50%; top:0; width:156px; height:31px; margin-left:-78px; background:#000; border-radius:0 0 19px 19px; z-index:31; }
.vl-home{ position:absolute; left:50%; bottom:8px; width:134px; height:5px; margin-left:-67px; border-radius:3px; background:#111; z-index:31; }

.vl-screen{ position:absolute; inset:0; background:#fff; overflow:hidden; transition:transform .55s cubic-bezier(.2,.85,.25,1), opacity .4s ease; }
.vl-screen.right{ transform:translateX(100%); }
.vl-screen.left{ transform:translateX(-28%); }
.vl-screen.left::after{ content:""; position:absolute; inset:0; background:#000; opacity:.06; }
.vl-fade{ position:absolute; inset:0; z-index:25; background:#fff; opacity:0; transition:opacity .6s ease; pointer-events:none; }
.vl-fade.on{ opacity:1; }

/* ---- Type scale (matches the Expedia change prototype): title 20/24 · h400 16/20 · body 14/18 · small 12/16 ---- */
/* ---- 1 · Landing ---- */
.vl-s1{ padding:54px 16px 0; }
.vl-s1 .vl-h1{ font-weight:500; font-size:20px; line-height:24px; margin:4px 0 12px; }
.vl-field{ display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; border:1px solid #818494; border-radius:999px; font-size:14px; color:var(--vl-ink); }
.vl-field .sep{ color:#818494; }
.vl-incl{ display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:18px; color:var(--vl-ink2); padding:12px 0; }
.vl-incl svg{ color:#227950; }
.vl-chips{ display:flex; gap:8px; padding:2px 0 12px; white-space:nowrap; }
.vl-chip{ display:inline-flex; align-items:center; gap:4px; height:36px; padding:0 14px; border:1px solid #818494; border-radius:999px; font-size:14px; color:var(--vl-ink);
  transition:background .2s ease, border-color .2s ease, color .2s ease; }
.vl-chip.on{ background:#191e3b; border-color:#191e3b; color:#fff; font-weight:500; }
.vl-chip.vl-press, .vl-sel.vl-press{ filter:brightness(.92); transform:scale(.97); }
.vl-count{ display:flex; gap:8px; align-items:center; font-size:14px; line-height:18px; color:var(--vl-ink2); margin-bottom:12px; transition:opacity .2s ease; }
.vl-count.swap{ opacity:0; }
.vl-card{ border-radius:16px; overflow:hidden; box-shadow:0 1px 4px rgba(12,14,28,.16), 0 0 0 1px rgba(12,14,28,.04); background:#fff; }
.vl-bar{ display:flex; align-items:center; gap:8px; height:32px; padding:0 12px; background:var(--vl-bar); color:#fff; font-weight:500; font-size:14px; }
.vl-bar .i{ margin-left:auto; }
.vl-gal{ display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:64px 64px; gap:2px; height:130px; position:relative; }
.vl-gal div{ background:#ccc center/cover no-repeat; }
.vl-gal div:first-child{ grid-row:span 2; }
.vl-gal i{ position:absolute; right:8px; bottom:8px; height:24px; padding:0 8px; gap:4px; border-radius:12px; background:rgba(12,14,28,.75); display:flex; align-items:center; color:#fff; font-style:normal; font-size:12px; font-weight:500; }
.vl-gal i svg{ width:14px; height:14px; }
.vl-cbody{ padding:12px 16px 16px; }
.vl-cbody h2{ font-weight:500; font-size:16px; line-height:20px; margin-bottom:8px; }
.vl-feat{ list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:18px; color:var(--vl-ink2); }
.vl-feat li{ display:flex; align-items:center; gap:8px; }
.vl-feat .ok{ color:#227950; }
.vl-link{ display:inline-flex; align-items:center; gap:2px; font-size:14px; line-height:18px; font-weight:500; color:var(--vl-blue); }
.vl-cbody .vl-link{ margin-top:8px; }
.vl-extra{ display:flex; align-items:flex-end; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--vl-line); }
.vl-extra > svg{ align-self:flex-start; color:#227950; width:16px; height:16px; margin-top:1px; }
.vl-extra p{ align-self:flex-start; font-size:12px; line-height:16px; color:var(--vl-ink2); width:138px; }
.vl-from{ margin-left:auto; text-align:right; }
.vl-from b{ font-size:12px; font-weight:400; color:var(--vl-ink2); } .vl-from strong{ font-size:24px; line-height:28px; font-weight:700; margin-left:4px; }
.vl-from .vl-link{ display:block; font-size:14px; }
.vl-sel{ margin-top:12px; height:48px; border-radius:999px; background:var(--vl-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:500; font-size:16px; transition:filter .16s ease, transform .16s ease; }

/* ---- 2 · Level 2 room page ---- */
.vl-hero{ position:absolute; left:0; right:0; top:0; height:204px; background:#333 center/cover no-repeat; }
.vl-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.2) 45%, rgba(0,0,0,.6)); }
.vl-hero .x{ position:absolute; left:12px; top:54px; z-index:2; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--vl-ink); display:flex; align-items:center; justify-content:center; }
.vl-hero .x svg{ width:18px; height:18px; }
.vl-hero h2{ position:absolute; left:16px; top:98px; z-index:2; color:#fff; font-weight:500; font-size:20px; line-height:24px; text-shadow:0 1px 4px rgba(0,0,0,.35); transition:opacity .2s ease; }
.vl-hero small{ position:absolute; right:12px; top:98px; z-index:2; height:24px; padding:0 8px; border-radius:12px; background:rgba(12,14,28,.75); color:#fff; font-size:12px; font-weight:500; display:flex; align-items:center; }
.vl-hero .g{ display:none; }
.vl-track{ position:absolute; left:12px; top:136px; z-index:5; display:flex; gap:8px; align-items:flex-start; transition:transform .45s cubic-bezier(.2,.85,.25,1); }
.vl-rc{ width:336px; flex:none; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 16px rgba(12,14,28,.18), 0 0 0 1px rgba(12,14,28,.04); }
.vl-rc .vl-feat{ padding:10px 14px 0; gap:6px; }
.vl-rc .add{ max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease .08s; }
.vl-on .vl-rc .add{ max-height:24px; opacity:1; }
.vl-rcf{ display:flex; align-items:baseline; justify-content:flex-end; gap:6px; margin:10px 14px 0; padding:8px 0 10px; border-top:1px solid var(--vl-line); }
.vl-rcf .rm{ margin-right:auto; font-size:14px; font-weight:500; color:var(--vl-blue); display:none; }
.vl-on .vl-rcf .rm{ display:inline; }
.vl-rcf small{ font-size:12px; color:var(--vl-ink2); }
.vl-rcf strong{ font-size:20px; line-height:24px; font-weight:700; }
.vl-body{ position:absolute; left:0; right:0; top:320px; bottom:164px; overflow:hidden; background:#f3f3f5; transition:top .35s ease; }
.vl-inner{ transition:transform .8s cubic-bezier(.45,.05,.25,1); }
.vl-sec{ background:#fff; padding:16px; margin-bottom:8px; }
.vl-sec-h{ display:flex; align-items:baseline; justify-content:space-between; }
.vl-sec-h h3{ font-weight:500; font-size:16px; line-height:20px; }
.vl-amen{ margin-top:10px; font-size:14px; line-height:18px; color:var(--vl-ink2); }
.vl-amen p{ display:flex; gap:8px; align-items:center; font-weight:500; color:var(--vl-ink); }
.vl-amen ul{ margin:6px 0 0 34px; padding:0; font-size:14px; color:var(--vl-ink2); line-height:22px; }
.vl-addon{ display:flex; align-items:center; gap:12px; min-height:48px; padding:0 14px; margin-top:8px; border:1px solid #c7c9d1; border-radius:12px; font-size:14px; color:var(--vl-ink);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.vl-addon b{ margin-left:auto; font-weight:500; color:var(--vl-ink); font-size:14px; }
.vl-addon .grp{ color:var(--vl-bar); margin-left:auto; margin-right:-4px; }
.vl-addon .grp + b{ margin-left:8px; }
.vl-radio{ width:20px; height:20px; flex:none; border-radius:50%; border:2px solid #676a7d; position:relative; transition:border-color .2s ease; }
.vl-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--vl-blue); transform:scale(0); transition:transform .22s cubic-bezier(.2,1.4,.4,1); }
.vl-addon.on{ border-color:var(--vl-blue); box-shadow:inset 0 0 0 1px var(--vl-blue); background:#f0f5fe; }
.vl-addon.on .vl-radio{ border-color:var(--vl-blue); }
.vl-addon.on .vl-radio::after{ transform:scale(1); }
.vl-addon.vl-press{ background:#e6efff; }
.vl-sim-sub{ font-size:12px; line-height:16px; color:var(--vl-ink2); margin-top:2px; }
.vl-simrow{ display:flex; gap:8px; margin-top:12px; }
.vl-sim{ width:320px; flex:none; display:flex; border-radius:16px; overflow:hidden; box-shadow:0 1px 4px rgba(12,14,28,.16), 0 0 0 1px rgba(12,14,28,.04); background:#fff; }
.vl-sim .ph{ width:104px; flex:none; background:#ccc center/cover no-repeat; }
.vl-sim .tx{ padding:10px 12px; flex:1; display:flex; flex-direction:column; gap:4px; font-size:12px; line-height:16px; color:var(--vl-ink2); }
.vl-sim .tx b{ font-size:14px; line-height:18px; font-weight:500; color:var(--vl-ink); }
.vl-sim .tx span{ display:flex; gap:6px; align-items:center; color:#227950; }
.vl-sim .tx span svg{ width:14px; height:14px; }
.vl-sim .pr{ margin-top:auto; text-align:right; font-size:12px; color:var(--vl-ink2); }
.vl-sim .pr strong{ font-size:20px; font-weight:700; color:var(--vl-ink); margin-left:4px; }
.vl-foot{ position:absolute; left:0; right:0; bottom:0; height:164px; z-index:6; background:#fff; box-shadow:0 -2px 8px rgba(12,14,28,.08); padding:12px 16px 0; }
.vl-foot-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.vl-added{ align-self:center; display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 10px; border-radius:999px; background:#d6f2e3; color:#0e4a2e; font-size:14px; font-weight:500;
  opacity:0; transform:translateY(6px) scale(.96); transition:opacity .25s ease, transform .3s cubic-bezier(.2,1.3,.4,1); }
.vl-added svg{ width:14px; height:14px; }
.vl-on .vl-added{ opacity:1; transform:none; }
.vl-total{ text-align:right; }
.vl-total strong{ display:block; font-size:24px; line-height:28px; font-weight:700; transition:color .3s ease; }
.vl-total strong.bump{ color:var(--vl-blue); }
.vl-total small{ display:block; font-size:12px; line-height:16px; color:var(--vl-ink2); }
.vl-total .vl-link{ margin-top:2px; }
.vl-cta{ margin-top:10px; height:48px; border-radius:999px; background:var(--vl-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:500; font-size:16px; }

/* touch */
.vl-touch{ position:absolute; left:0; top:0; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%; z-index:40; pointer-events:none;
  background:rgba(20,29,56,.16); border:1.5px solid rgba(255,255,255,.95); box-shadow:0 4px 14px rgba(20,29,56,.22);
  opacity:0; scale:1.25; transition:opacity .22s ease, scale .28s cubic-bezier(.2,.8,.3,1); }
.vl-touch.show{ opacity:1; scale:1; }
.vl-touch.down{ scale:.82; }
.vl-touch.drag{ transition:opacity .22s ease, scale .28s ease, translate .55s cubic-bezier(.2,.85,.25,1); }
.vl-touch::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--vl-blue); opacity:0; }
.vl-touch.tap::after{ animation:vlTap .6s ease-out; }
@keyframes vlTap{ from{ transform:scale(.6); opacity:.9; } to{ transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .vl-screen, .vl-track, .vl-inner, .vl-body, .vl-rc .add, .vl-added{ transition:none !important; } }