/* An illustrated, non-interactive tour of scanning an address. */
.locdemo{min-height:415px;position:relative}
.locdemo-stage{height:390px;border-radius:22px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;gap:24px;background:radial-gradient(circle at 50% 42%,#fff9 0,#fff0 55%),linear-gradient(145deg,#dbeef3,#c9e2eb);border:1px solid #cde1e9}
.locdemo-stage:before,.locdemo-stage:after{content:"";position:absolute;border:1px solid #ffffff70;border-radius:50%;width:300px;height:300px;left:50%;top:47%;transform:translate(-50%,-50%)}
.locdemo-stage:after{width:430px;height:430px}
.locdemo-bill{direction:rtl;position:relative;z-index:1;flex:0 0 150px;padding:15px;background:white;border:1px solid #dbe9ed;border-radius:12px;box-shadow:0 18px 32px #04356918;transform:rotate(5deg)}
.locdemo-bill-title{display:flex;align-items:center;justify-content:space-between;color:#0d4772;font-size:11px}
.locdemo-bill-title span{width:19px;height:19px;background:#e1f4f6;border-radius:5px}
.locdemo-line{height:4px;border-radius:4px;background:#dce8ed;margin-top:13px;width:100%}.locdemo-line.short{width:65%;margin-top:7px}
.locdemo-code{position:relative;margin:17px auto 8px;display:grid;place-items:center;width:78px;height:78px;background:#eff8f9;border:1px solid #cdebee;border-radius:10px;color:#08768d;font:700 20px Arial,sans-serif;overflow:hidden}
.locdemo-code:before,.locdemo-code:after{content:"";position:absolute;width:15px;height:15px;border-color:#168ca0;border-style:solid}.locdemo-code:before{top:8px;right:8px;border-width:2px 2px 0 0}.locdemo-code:after{bottom:8px;left:8px;border-width:0 0 2px 2px}
.locdemo-code i,.locdemo-camera i{position:absolute;left:8%;right:8%;top:20%;height:2px;background:#17b6c4;box-shadow:0 0 8px #17b6c4;animation:locdemo-scan 3s ease-in-out infinite alternate}
.locdemo-bill small{display:block;text-align:center;color:#66828e;font-size:9px}
.locdemo-phone{position:relative;z-index:2;flex:0 0 174px;height:306px;background:#103c62;border:6px solid #143b60;border-radius:25px;box-shadow:0 22px 38px #06395c33;transform:rotate(-3deg)}
.locdemo-notch{position:absolute;z-index:5;top:0;left:50%;width:58px;height:13px;transform:translateX(-50%);background:#143b60;border-radius:0 0 9px 9px}
.locdemo-phone-screen{position:absolute;inset:0;background:#edf7f7;border-radius:19px;overflow:hidden}
.locdemo-scanning,.locdemo-map{position:absolute;inset:0}.locdemo-scanning{display:flex;align-items:center;justify-content:center;flex-direction:column;background:#e8f5f7;animation:locdemo-scanning 10s ease-in-out infinite}
.locdemo-camera{position:relative;display:grid;place-items:center;width:93px;height:93px;border:2px solid #1ba1b0;border-radius:16px;color:#187d90;font:700 23px Arial,sans-serif;background:#fff9;overflow:hidden}
.locdemo-scanning strong{font-size:10px;color:#124c6f;margin-top:17px}.locdemo-scanning small{font-size:9px;color:#7797a3;margin-top:3px}
.locdemo-map{background:#e0eeec;animation:locdemo-map 10s ease-in-out infinite}
.locdemo-map-head{position:absolute;z-index:2;top:23px;left:11px;right:11px;padding:6px 9px;border-radius:9px;background:#fff;box-shadow:0 4px 14px #2b615315;display:flex;gap:7px;align-items:center;font-size:10px;color:#16495e}
.locdemo-map-icon{display:grid;place-items:center;width:21px;height:21px;border-radius:7px;background:#e4f8f8;color:#06a4b6;font:700 16px Arial,sans-serif}
.locdemo-route{position:absolute;inset:38px 0 auto;width:100%;height:210px;stroke-linecap:round;stroke-linejoin:round}
.locdemo-road{fill:none;stroke:#fff;stroke-width:13}.locdemo-route-under{fill:none;stroke:#fff;stroke-width:8}.locdemo-route-path{fill:none;stroke:#11aab9;stroke-width:4;stroke-dasharray:250;animation:locdemo-draw 10s ease-in-out infinite}
.locdemo-map-footer{position:absolute;bottom:10px;right:10px;left:10px;background:#fff;border-radius:10px;padding:9px 10px;box-shadow:0 4px 14px #2b615315}.locdemo-map-footer b,.locdemo-map-footer span{display:block;font-size:9px}.locdemo-map-footer b{color:#16495e}.locdemo-map-footer span{color:#78969c;font-size:8px}
.locdemo-hint{position:absolute;z-index:3;bottom:14px;right:0;left:0;text-align:center;font-size:10px;color:#3a7387}.locdemo-hint span{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#fff;color:#078ea0;font-weight:bold}.locdemo-hint i{font-style:normal;margin:0 6px;color:#7ca1ad}
.locdemo-caption{text-align:center;color:#668792;font-size:10px;margin-top:8px}
@keyframes locdemo-scan{from{top:18%}to{top:80%}}
@keyframes locdemo-scanning{0%,33%{opacity:1}42%,88%{opacity:0}97%,100%{opacity:1}}
@keyframes locdemo-map{0%,33%{opacity:0}42%,88%{opacity:1}97%,100%{opacity:0}}
@keyframes locdemo-draw{0%,36%{stroke-dashoffset:250}65%,100%{stroke-dashoffset:0}}
@media(max-width:760px){.locdemo{min-height:0}.locdemo-stage{height:350px}.locdemo-phone{height:280px;flex-basis:160px}.locdemo-bill{flex-basis:140px}.locdemo-route{height:190px}}
@media(max-width:420px){.locdemo-stage{gap:12px}.locdemo-bill{flex-basis:116px;padding:11px}.locdemo-phone{height:260px;flex-basis:146px}.locdemo-route{height:170px}}