/* =========================================================
   CodeChaps — On-Demand App Development page
   Page-specific styles (live-tracking hero phone). Shared
   styles live in codechaps-motion.css
   ========================================================= */
.screen{width:100%;height:100%;border-radius:36px;overflow:hidden;background:#F7F8FB;color:#0F172A;display:flex;flex-direction:column;position:relative}
.map{position:relative;flex:none;height:380px;background:#E8EEF6;overflow:hidden}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(#fff 6px,transparent 6px),linear-gradient(90deg,#fff 6px,transparent 6px);background-size:70px 70px,70px 70px;background-position:-20px 10px,10px -20px;opacity:.9}
.map-park{position:absolute;border-radius:16px;background:#CDEBD8}
.map-water{position:absolute;border-radius:40%;background:#C7DDF5}
.map svg.route{position:absolute;inset:0;width:100%;height:100%}
.route-bg{fill:none;stroke:rgba(37,99,235,.18);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.route-line{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.js.loaded .route-line{animation:drawRoute 2.4s var(--ease) .8s forwards}
@keyframes drawRoute{to{stroke-dashoffset:0}}
.pin{position:absolute;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(15,23,42,.25)}
.pin i{width:10px;height:10px;border-radius:50%;background:#fff;display:block}
.pin--a{left:30px;top:58px;background:var(--amber)}
.pin--b{right:34px;bottom:46px;background:var(--blue)}
.pin--b::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(37,99,235,.5);animation:ping 1.8s ease-out infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.car{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:9px;background:#0F172A;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(15,23,42,.35);offset-path:path('M45 88 C 90 88, 95 160, 140 170 S 205 165, 212 230 S 226 300, 228 330');offset-rotate:0deg;offset-distance:0%}
.car .ico{width:16px;height:16px}
.js.loaded .car{animation:drive 9s ease-in-out 1.2s infinite}
@keyframes drive{0%{offset-distance:0%}70%,100%{offset-distance:100%}}
.eta-chip{position:absolute;left:14px;bottom:30px;background:#fff;border-radius:12px;padding:8px 12px;font-size:12px;box-shadow:0 8px 20px rgba(15,23,42,.15)}
.eta-chip b{display:block;font-size:16px}
.sheet{background:#fff;border-radius:22px 22px 0 0;margin-top:-18px;position:relative;padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 -8px 24px rgba(15,23,42,.08)}
.js .sheet{transform:translateY(100%)}
.js.loaded .sheet{transform:none;transition:transform 1s var(--ease) .6s}
.sheet-handle{width:40px;height:4px;border-radius:4px;background:#E2E8F0;margin:0 auto}
.pro{display:flex;align-items:center;gap:12px}
.pro-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.pro b{display:block;font-size:14px}
.pro small{font-size:11.5px;color:#64748B;white-space:nowrap}
.pro>div:nth-child(2){min-width:0;flex:1}
.pro b{white-space:nowrap}
.pro-act{margin-left:auto;display:flex;gap:8px}
.pro-act span{width:34px;height:34px;border-radius:50%;background:#EFF6FF;color:#1D4ED8;display:flex;align-items:center;justify-content:center}
.pro-act .ico{width:16px;height:16px}
.steps-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.steps-mini span{font-size:10px;color:#94A3B8;text-align:center;display:flex;flex-direction:column;gap:6px}
.steps-mini span i{height:4px;border-radius:4px;background:#E2E8F0;display:block;position:relative;overflow:hidden}
.steps-mini span i::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left}
.js.loaded .steps-mini span.done i::after{animation:fillStep .6s var(--ease) forwards}
.js.loaded .steps-mini span:nth-child(1) i::after{animation-delay:1.4s}
.js.loaded .steps-mini span:nth-child(2) i::after{animation-delay:1.9s}
.js.loaded .steps-mini span:nth-child(3) i::after{animation-delay:2.4s;animation-duration:3s}
@keyframes fillStep{to{transform:scaleX(1)}}
.steps-mini span.done{color:#0F172A;font-weight:700}
.pay-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;background:#F8FAFC;border-radius:12px;padding:10px 12px}
.pay-row b{font-size:15px}
.float--2{right:-196px;top:330px}
.float--3{left:-205px;bottom:150px}
@media (max-width:1180px) and (min-width:961px){.float--3{left:-170px}}
@media (prefers-reduced-motion:reduce){.car{offset-distance:60%}.route-line{stroke-dashoffset:0}}