/* =========================================================================
   KOSE — Order tracking styles
   ========================================================================= */
.tracklayout{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start;padding:18px 0 50px}
@media(max-width:980px){ .tracklayout{grid-template-columns:1fr} }

/* map */
.map{position:relative;border-radius:var(--r-lg);overflow:hidden;height:560px;border:1px solid var(--line);background:#E8EEE9}
[data-theme="dark"] .map{background:#0f1712}
.map svg.mapbase{position:absolute;inset:0;width:100%;height:100%}
.map__roads path{fill:none;stroke-linecap:round}
.map__overlay{position:absolute;inset:0}
.route{fill:none;stroke:var(--brand);stroke-width:5;stroke-linecap:round;stroke-dasharray:10 12;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.route-done{fill:none;stroke:var(--brand);stroke-width:5;stroke-linecap:round;opacity:.32}
.pin{position:absolute;transform:translate(-50%,-100%);z-index:3}
.pin__dot{width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.pin--store .pin__dot{background:var(--ink)}
.pin--home .pin__dot{background:var(--warm)}
.pin__lbl{position:absolute;top:-6px;left:50%;transform:translate(-50%,-100%);white-space:nowrap;background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:11.5px;font-weight:800;box-shadow:var(--sh-1)}
.courier{position:absolute;z-index:5;transform:translate(-50%,-50%);transition:left 1s linear, top 1s linear}
.courier__ic{width:46px;height:46px;border-radius:50%;background:var(--brand);border:3px solid #fff;display:grid;place-items:center;color:#fff;box-shadow:var(--sh-3)}
.courier__ic svg{width:24px;height:24px}
.courier__pulse{position:absolute;inset:-8px;border-radius:50%;background:var(--brand);opacity:.25;animation:cpulse 1.8s infinite}
@keyframes cpulse{0%{transform:scale(.7);opacity:.4}100%{transform:scale(1.8);opacity:0}}
.map__eta{position:absolute;top:16px;left:16px;background:var(--surface);border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-2);z-index:6}
.map__eta b{font-family:var(--font-display);font-size:26px;display:block;line-height:1}
.map__eta small{font-size:12px;color:var(--ink-3);font-weight:600}
.map__live{position:absolute;top:16px;right:16px;background:var(--surface);border-radius:99px;padding:7px 13px;box-shadow:var(--sh-1);z-index:6;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800}
.map__live .d{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:livePulse 1.6s infinite}

/* rider card */
.rider{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;margin-bottom:18px}
.rider__top{display:flex;align-items:center;gap:13px}
.rider__av{width:54px;height:54px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand-ink);font-weight:800;font-size:18px;flex-shrink:0}
.rider__top b{font-size:16px}
.rider__top small{font-size:12.5px;color:var(--ink-3)}
.rider__btns{display:flex;gap:10px;margin-top:14px}

/* status timeline */
.tstatus{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin-bottom:18px}
.tstatus h3{font-size:16px;margin-bottom:16px}
.tstep{display:flex;gap:14px;position:relative;padding-bottom:22px}
.tstep:last-child{padding-bottom:0}
.tstep::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.tstep.done::before{background:var(--brand)}
.tstep__dot{width:28px;height:28px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;flex-shrink:0;z-index:1;color:var(--ink-3)}
.tstep__dot svg{width:15px;height:15px}
.tstep.done .tstep__dot{background:var(--brand);border-color:var(--brand);color:#fff}
.tstep.active .tstep__dot{border-color:var(--brand);color:var(--brand-ink);animation:livePulse 1.6s infinite}
.tstep b{font-size:14.5px}
.tstep small{font-size:12.5px;color:var(--ink-3);display:block;margin-top:2px}
.tstep.active b{color:var(--brand-ink)}

/* order items summary */
.torder{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.torder h3{font-size:16px;margin-bottom:14px}
.torder__row{display:flex;align-items:center;gap:11px;padding:9px 0}
.torder__row .m{width:46px;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--line);flex-shrink:0}
.torder__row .t{font-size:13px;font-weight:600;flex:1}
.torder__row .p{font-weight:700;font-size:13.5px}

/* lookup empty state */
.tlookup{max-width:460px;margin:40px auto;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px}
.tlookup svg.big{width:60px;height:60px;color:var(--brand-ink);margin:0 auto 16px}