.tracking-search { max-width:760px; }
.tracking-card { padding:38px 40px 46px; overflow:hidden; box-shadow:0 12px 40px rgba(43,0,110,.06); }
.tracking-order-head { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
.tracking-order-head h2 { margin:14px 0 4px; font-size:28px; }
.tracking-order-head p { margin:0; }
.tracking-message { display:flex; align-items:center; gap:12px; max-width:310px; padding:14px 16px; border-radius:13px; background:var(--off); }
.tracking-message > span { font-size:25px; }
.tracking-message b,.tracking-message small { display:block; }
.tracking-message small { margin-top:3px; color:var(--muted); line-height:1.45; }
.delivery-route { position:relative; margin-top:64px; padding-top:25px; }
.route-track { position:absolute; top:40px; left:6%; right:6%; height:6px; border-radius:99px; background:#e8e5ee; overflow:hidden; }
.route-fill { display:block; width:var(--route-progress); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple),#8b65ff); animation:routeGrow 1.15s ease-out both; }
.route-stops { position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,1fr); }
.route-stop { display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--muted); }
.route-dot { display:grid; place-items:center; width:36px; height:36px; margin-bottom:12px; border:4px solid #e8e5ee; border-radius:50%; background:#fff; font-size:11px; font-weight:800; transition:.3s; }
.route-stop b { font-size:12px; }
.route-stop small { margin-top:4px; color:var(--purple); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.route-stop.complete .route-dot { border-color:var(--purple); background:var(--purple); color:#fff; }
.route-stop.current .route-dot { border-color:var(--lime); background:var(--purple); color:#fff; box-shadow:0 0 0 7px rgba(215,243,95,.35); animation:currentStop 1.6s ease-in-out infinite; }
.route-stop.current b { color:var(--purple-dark); }
.delivery-bike { position:absolute; z-index:4; top:-4px; left:var(--bike-position); width:54px; text-align:center; transform:translateX(-50%); animation:bikeDrive 1.15s cubic-bezier(.22,.75,.28,1) both; }
.delivery-bike span { position:relative; z-index:2; display:block; font-size:34px; transform:scaleX(-1); filter:drop-shadow(0 5px 4px rgba(43,0,110,.18)); }
.delivery-bike i { display:block; width:35px; height:3px; margin:-3px auto 0; border-radius:50%; background:rgba(43,0,110,.15); }
.tracking-not-found { max-width:760px; text-align:center; }
@keyframes routeGrow { from { width:0; } to { width:var(--route-progress); } }
@keyframes bikeDrive { from { left:6%; } to { left:var(--bike-position); } }
@keyframes currentStop { 0%,100% { box-shadow:0 0 0 5px rgba(215,243,95,.25); } 50% { box-shadow:0 0 0 10px rgba(215,243,95,.08); } }

@media (max-width:720px) {
    .tracking-card { padding:25px 18px 34px; }
    .tracking-order-head { flex-direction:column; }
    .tracking-message { max-width:none; width:100%; }
    .delivery-route { margin-top:52px; overflow-x:auto; padding:25px 5px 10px; }
    .route-track { left:48px; right:48px; min-width:500px; }
    .route-stops { min-width:550px; }
}
@media (prefers-reduced-motion:reduce) { .route-fill,.delivery-bike,.route-stop.current .route-dot { animation:none; } }