/* Bite-sized content — Expedia "Select a room" list with compact room cards, then the
   "Customise your stay" sheet (rebuilt from the Rooms & rates recording). No bezel: the screen
   sits on the solution frame's background, cropped at the bottom, like Figma web_2026 61:56139. */
.bl-mount{ position:relative; overflow:hidden; background-size:cover; background-position:center; }
.bl-screen-wrap{ position:absolute; left:27.72%; top:12.7%; width:46.41%; aspect-ratio:375/812; border-radius:calc(28px * var(--bl-s,.6)) calc(28px * var(--bl-s,.6)) 0 0;
  overflow:hidden; box-shadow:0 20px 40px -12px rgba(0,0,0,.45); background:#fff; }
.bl-phone{ position:absolute; left:0; top:0; width:375px; height:812px; transform-origin:0 0; transform:scale(var(--bl-s,.6)); background:#f3f3f5; overflow:hidden;
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; color:#191e3b; -webkit-font-smoothing:antialiased; user-select:none;
  --bl-ink:#191e3b; --bl-ink2:#3f4459; --bl-line:#dfe0e4; --bl-blue:#1668e3; --bl-red:#c8102e; }
.bl-phone *{ box-sizing:border-box; margin:0; }
.bl-phone svg{ display:block; flex:none; }
.bl-ic{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.bl-status{ position:absolute; left:0; right:0; top:0; height:48px; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:0 24px 0 32px;
  font-weight:600; font-size:16px; color:#000; background:#fff; }
.bl-status svg{ fill:currentColor; }
.bl-nav{ position:absolute; left:0; right:0; top:48px; height:48px; z-index:20; background:#fff; display:flex; align-items:center; gap:14px; padding:0 16px;
  box-shadow:0 1px 3px rgba(12,14,28,.12); color:var(--bl-blue); }
.bl-nav .bl-h1{ flex:1; text-align:center; font-weight:500; font-size:16px; color:var(--bl-ink); }
.bl-nav .bl-ic{ width:22px; height:22px; }

.bl-list{ position:absolute; left:0; right:0; top:96px; padding:12px 12px 40px; transition:transform 1s cubic-bezier(.45,.05,.25,1); }
.bl-card{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 4px rgba(12,14,28,.16); margin-bottom:12px; }
.bl-photo{ position:relative; height:176px; background:#ccc center/cover no-repeat; }
.bl-dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:5px; }
.bl-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); }
.bl-dots i:first-child{ background:#fff; }
.bl-count{ position:absolute; right:10px; bottom:10px; height:26px; padding:0 9px; gap:5px; border-radius:13px; background:rgba(12,14,28,.75); color:#fff;
  display:flex; align-items:center; font-size:13px; font-weight:500; }
.bl-count svg{ width:14px; height:14px; }
.bl-body{ padding:12px 16px 16px; }
.bl-body h2{ font-weight:500; font-size:18px; line-height:22px; margin-bottom:8px; }
.bl-feat{ list-style:none; padding:0; display:flex; flex-direction:column; gap:7px; font-size:14px; line-height:18px; color:var(--bl-ink2); }
.bl-feat li{ display:flex; align-items:center; gap:10px; }
.bl-link{ display:inline-flex; align-items:center; gap:2px; font-size:14px; line-height:18px; font-weight:500; color:var(--bl-blue); }
.bl-body > .bl-link{ margin-top:10px; }
.bl-price{ margin-top:14px; padding-top:14px; border-top:1px solid var(--bl-line); }
.bl-cash{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--bl-ink2); }
.bl-cash svg{ width:15px; height:15px; }
.bl-left{ font-size:12px; font-weight:500; color:var(--bl-red); margin-top:6px; }
.bl-amt{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.bl-amt strong{ font-size:24px; line-height:28px; font-weight:700; }
.bl-amt s{ font-size:14px; color:var(--bl-ink2); }
.bl-tot{ font-size:12px; line-height:16px; color:var(--bl-ink2); }
.bl-price .bl-link{ margin-top:4px; }
.bl-btn{ height:44px; margin-top:12px; border-radius:999px; background:var(--bl-blue); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:500; font-size:16px; transition:filter .16s ease, transform .16s ease; }
.bl-press{ filter:brightness(.88); transform:scale(.97); }

/* Customise your stay sheet */
.bl-sheet{ position:absolute; left:0; right:0; top:44px; bottom:0; z-index:30; background:#fff; border-radius:14px 14px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.18);
  transform:translateY(105%); transition:transform .5s cubic-bezier(.2,.85,.25,1); display:flex; flex-direction:column; }
.bl-sheet.up{ transform:none; }
.bl-scrim{ position:absolute; inset:0; z-index:25; background:#000; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.bl-scrim.on{ opacity:.35; }
.bl-sh-h{ height:52px; flex:none; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid var(--bl-line); color:var(--bl-blue); }
.bl-sh-h h3{ flex:1; text-align:center; margin-right:22px; font-weight:500; font-size:16px; color:var(--bl-ink); }
.bl-sh-b{ flex:1; padding:14px 16px 0; overflow:hidden; }
.bl-sh-b h4{ font-weight:500; font-size:15px; line-height:20px; }
.bl-sh-b .bl-link{ margin:2px 0 4px; font-weight:400; }
.bl-opt{ display:flex; align-items:center; gap:12px; height:38px; font-size:14px; color:var(--bl-ink); border-radius:8px; transition:background .18s ease; }
.bl-opt b{ margin-left:auto; font-weight:400; font-size:14px; color:var(--bl-ink2); }
.bl-opt.bl-press{ background:#eef3fd; transform:none; filter:none; }
.bl-radio{ width:20px; height:20px; flex:none; border-radius:50%; border:2px solid #676a7d; position:relative; transition:border-color .2s ease; }
.bl-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--bl-blue); transform:scale(0); transition:transform .22s cubic-bezier(.2,1.4,.4,1); }
.bl-opt.on .bl-radio{ border-color:var(--bl-blue); }
.bl-opt.on .bl-radio::after{ transform:scale(1); }
.bl-hr{ height:1px; background:var(--bl-line); margin:10px 0 12px; }
.bl-sh-f{ flex:none; padding:12px 16px 30px; border-top:1px solid var(--bl-line); display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:12px; }
.bl-sh-f .bl-amt strong{ transition:color .3s ease; }
.bl-sh-f .bl-amt strong.bump{ color:var(--bl-blue); }
.bl-sh-f .bl-btn{ margin:0; padding:0 22px; height:44px; }
.bl-note{ grid-column:1 / -1; text-align:right; font-size:11px; color:var(--bl-ink2); margin-top:6px; }

.bl-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); }
.bl-touch.show{ opacity:1; scale:1; }
.bl-touch.down{ scale:.82; }
.bl-touch::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--bl-blue); opacity:0; }
.bl-touch.tap::after{ animation:blTap .6s ease-out; }
@keyframes blTap{ from{ transform:scale(.6); opacity:.9; } to{ transform:scale(1.9); opacity:0; } }
.bl-fade{ position:absolute; inset:0; z-index:45; background:#fff; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.bl-fade.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .bl-list, .bl-sheet, .bl-scrim, .bl-radio::after{ transition:none !important; } }