/* Device shell only. Booking, pricing and dispatch remain in the existing app. */
html,body{background:#0b101c!important}
#mdDeviceStage{box-sizing:border-box;display:block!important;height:var(--app-viewport-height,100dvh)!important;max-height:none!important;padding:6px;background:radial-gradient(ellipse at 50% 0,#202c40,#0b101c 76%)!important;overflow:hidden!important}
#mdDeviceBrand{display:none}
#mdDeviceScreen{box-sizing:border-box;max-width:480px!important;border:4px solid #10141b;border-radius:30px;outline:1px solid #627084;box-shadow:0 0 0 2px #262f3e,0 18px 46px #0007!important;isolation:isolate;animation:mdDeviceReveal .32s ease-out}
#mdDeviceScreen::after{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:48px;height:3px;border-radius:8px;background:#05080d;z-index:60;pointer-events:none}
#mdAppToolbar{padding:calc(18px + env(safe-area-inset-top)) 12px 0!important}
#mdBookingSheet{height:52%!important;max-height:72%!important;padding-left:14px!important;padding-right:14px!important;flex-shrink:0!important}
#mdBookingSheet>*{flex-shrink:0}
#mdDestinationSuggestions{position:relative!important;top:auto!important;margin-top:7px;max-height:240px!important}
#mdPickupSuggestions{max-height:240px;overflow-y:auto!important;flex-shrink:0}
#mdContactControl{bottom:calc(52% + 10px)!important}
#mdMap .maplibregl-ctrl-bottom-left{bottom:calc(52% + 8px)!important}
#mdMap .maplibregl-ctrl-attrib{max-width:calc(100vw - 100px)}
#mdBookingSheet input{scroll-margin-block:12px}
@keyframes mdDeviceReveal{from{opacity:.45}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#mdDeviceScreen{animation:none}}
@media(min-width:900px){
 #mdDeviceStage{padding:18px 34px 80px!important}
 #mdDeviceBrand{display:flex;align-items:center;gap:12px;height:62px;max-width:1440px;margin:0 auto 16px;border-bottom:1px solid #ffffff12;color:#f5b731;font:900 26px Figtree,system-ui,sans-serif;letter-spacing:.01em}
 #mdDeviceBrand img{width:48px;height:48px;object-fit:contain}
 #mdDeviceBrand small{display:block;font:600 11px Figtree,system-ui,sans-serif;letter-spacing:.18em;color:#cbd1db;margin-top:3px}
 #mdDeviceScreen{width:100%!important;max-width:1440px!important;height:calc(100% - 78px)!important;border-width:16px 12px 25px;border-color:#151c29;border-radius:24px;outline:2px solid #677385;overflow:visible!important;box-shadow:inset 0 0 0 1px #ffffff1c,0 24px 50px #0007!important}
 #mdDeviceScreen::before{content:"";position:absolute;z-index:-1;top:calc(100% + 25px);left:calc(50% - 96px);width:192px;height:58px;background:linear-gradient(90deg,#111a27,#627185 49%,#152030);clip-path:polygon(35% 0,65% 0,73% 83%,100% 89%,100% 100%,0 100%,0 89%,27% 83%);border-radius:0 0 8px 8px}
 #mdDeviceScreen::after{top:-10px;width:5px;height:5px;background:#344156;box-shadow:0 0 0 2px #101620}
 #mdMap{border-radius:9px;overflow:hidden}
 #mdAppToolbar{padding:22px 22px 0!important}
 #mdAppToolbar>button:first-child{max-width:290px;margin-right:auto}
 #mdBookingSheet{position:absolute!important;right:20px;bottom:20px;width:380px;height:auto!important;max-height:calc(100% - 102px)!important;border-radius:24px!important;border:1px solid #ffffff20;padding:18px!important;box-shadow:0 16px 38px #0006!important}
 #mdContactControl{left:22px!important;right:auto!important;bottom:36px!important}
 #mdContactControl>span{left:56px!important;right:auto!important}
 #mdMap .maplibregl-ctrl-bottom-left{bottom:0!important}
 #mdMap .maplibregl-ctrl-attrib{max-width:calc(100% - 420px)}
}
@media(max-width:899px) and (max-height:500px){
 #mdAppToolbar{padding-top:9px!important}
 #mdBookingSheet{height:calc(100% - 64px)!important;max-height:calc(100% - 64px)!important}
 #mdContactControl{bottom:auto!important;top:70px;right:20px!important}
}
/* The outer document never scrolls when Safari reveals its keyboard. */
html,body{position:fixed!important;inset:0;overflow:hidden!important;width:100%;height:100%}
#mdDeviceStage{position:fixed;top:var(--device-top,0px);left:0;right:0;width:100%;height:var(--device-height,100dvh)!important;min-height:0!important}
@media(max-width:899px){
 #mdDeviceStage{padding:4px!important}
 #mdDeviceScreen{max-width:none!important;width:100%!important;height:100%!important;border-width:3px;border-radius:clamp(18px,6vw,30px)}
 #mdAppToolbar{padding-top:calc(12px + env(safe-area-inset-top))!important}
 html[data-device-editing="true"] #mdBookingSheet{height:calc(100% - 64px - env(safe-area-inset-top))!important;max-height:calc(100% - 64px - env(safe-area-inset-top))!important}
 html[data-device-editing="true"] #mdContactControl{display:none}
}

@media(min-width:900px){.mdFixedTaxi{left:calc((100% - 420px)/2)!important;top:50%!important}}
