/* ============================================================
   Live parcel tracking — toasts, polling, status cards.
   Standalone. Recolour with the custom properties on .lt.
   ============================================================ */
.lt{
  --lt-ink:#17171B;          /* card background                     */
  --lt-accent:#EE6C3C;       /* progress fill, live glow            */
  --lt-accent-l:#FF8A5C;
  --lt-green:#22B85C;
  --lt-blue:#3B7DF5;
  --lt-amber:#F0A92B;
  --lt-red:#E4483C;
  --lt-radius:22px;
  --lt-ease:cubic-bezier(.22,1,.36,1);
  --lt-spring:cubic-bezier(.34,1.56,.64,1);
  font:400 15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- the card ---------- */
.lt-card{
  position:relative;overflow:hidden;
  background:var(--lt-ink);color:#fff;
  border-radius:var(--lt-radius);padding:19px 19px 21px;
  box-shadow:0 12px 34px rgba(12,14,20,.16);
}
.lt-card::after{
  content:'';position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:99px;
  background:radial-gradient(circle,rgba(238,108,60,.17),transparent 68%);
}
.lt-card + .lt-card{margin-top:12px}

.lt-top{display:flex;align-items:center;gap:12px;position:relative}
.lt-ico{
  width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--lt-accent) 16%,transparent);color:var(--lt-accent-l);
}
.lt-id{font-size:17px;font-weight:750;letter-spacing:-.03em}
.lt-meta{font-size:12px;color:#8E929C;margin-top:1px}

.lt-chip{
  margin-left:auto;display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:11.5px;font-weight:650;padding:6px 11px;border-radius:99px;
  background:color-mix(in srgb,var(--lt-green) 16%,transparent);color:#4ADE80;
}
.lt-chip i{width:5px;height:5px;border-radius:99px;background:currentColor;flex:none}
.lt-chip.is-waiting{background:color-mix(in srgb,var(--lt-amber) 16%,transparent);color:#FBBF4E}
.lt-chip.is-done{background:color-mix(in srgb,var(--lt-blue) 16%,transparent);color:#7FA8F8}
.lt-chip.is-bad{background:color-mix(in srgb,var(--lt-red) 16%,transparent);color:#F58B82}

.lt-eta{font-size:13px;color:#B9BCC4;margin:16px 0 13px;position:relative}
.lt-eta b{color:#fff;font-weight:650}

/* ---------- the stage bar ---------- */
.lt-prog{display:flex;gap:5px;margin-bottom:11px;position:relative}
.lt-seg{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden;position:relative}
.lt-seg.is-full{background:var(--lt-accent)}
.lt-seg.is-full::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translateX(-100%);animation:lt-flow 1.9s var(--lt-ease) infinite;
}
.lt-seg.is-now{background:color-mix(in srgb,var(--lt-accent) 25%,transparent)}
.lt-seg.is-now::before{content:'';position:absolute;left:0;top:0;bottom:0;width:58%;border-radius:99px;background:var(--lt-accent)}
.lt-seg.is-now::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:translateX(-100%);animation:lt-flow 1.6s var(--lt-ease) infinite .2s;
}
@keyframes lt-flow{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}

.lt-stages{display:grid;gap:5px;position:relative}
.lt-stages > div{font-size:10.5px;font-weight:650;color:#6E727C;letter-spacing:-.01em}
.lt-stages > div > span{display:block;min-height:27px}
.lt-stages > div.is-past{color:#fff}
.lt-stages > div.is-now{color:var(--lt-accent-l)}
.lt-stages small{display:block;font-size:9.5px;font-weight:500;color:#585C66;margin-top:3px}

/* a card whose data just changed gets one quiet pulse */
.lt-card.lt-bumped{animation:lt-bump .7s var(--lt-ease)}
@keyframes lt-bump{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lt-accent) 60%,transparent),0 12px 34px rgba(12,14,20,.16)}
  100%{box-shadow:0 0 0 14px transparent,0 12px 34px rgba(12,14,20,.16)}
}

/* priority parcels, if you flag them */
.lt-card.is-urgent{animation:lt-urgent 1.8s var(--lt-ease) infinite}
.lt-card.is-urgent::after{background:radial-gradient(circle,rgba(228,72,60,.26),transparent 68%)}
.lt-card.is-urgent .lt-ico{background:color-mix(in srgb,var(--lt-red) 22%,transparent);color:#FF8B82}
@keyframes lt-urgent{
  0%,100%{box-shadow:0 0 0 0 rgba(228,72,60,0),0 12px 34px rgba(12,14,20,.16)}
  50%{box-shadow:0 0 0 4px rgba(228,72,60,.38),0 0 22px rgba(228,72,60,.3),0 12px 34px rgba(12,14,20,.16)}
}
.lt-tag{
  display:inline-flex;align-items:center;gap:4px;margin-left:7px;padding:2px 8px;border-radius:99px;
  font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;vertical-align:middle;
  background:rgba(255,120,110,.2);color:#FF8B82;border:1px solid rgba(255,120,110,.45);
}

.lt-empty{
  text-align:center;padding:36px 16px;border-radius:var(--lt-radius);
  border:1px dashed rgba(120,124,135,.4);color:#8E929C;font-size:13px;
}

/* ---------- toasts ---------- */
.lt-toasts{
  position:fixed;z-index:1200;display:flex;flex-direction:column;gap:10px;
  width:min(334px,calc(100vw - 32px));pointer-events:none;
  top:calc(14px + env(safe-area-inset-top,0px));left:16px;right:16px;margin:0 auto;
}
.lt-toasts[data-pos="top-right"]{left:auto;right:20px;margin:0}
.lt-toasts[data-pos="bottom-right"]{top:auto;left:auto;right:20px;margin:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column-reverse}
.lt-toasts[data-pos="bottom-center"]{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column-reverse}
@media(min-width:900px){.lt-toasts{left:auto;right:20px;margin:0}}

.lt-toast{
  background:rgba(20,21,25,.96);backdrop-filter:blur(16px);color:#fff;
  border-radius:16px;padding:13px 15px;display:flex;align-items:flex-start;gap:11px;
  box-shadow:0 12px 34px rgba(12,14,20,.3);pointer-events:auto;position:relative;overflow:hidden;
  animation:lt-in .5s var(--lt-spring);
}
.lt-toast.is-out{animation:lt-out .34s var(--lt-ease) forwards}
@keyframes lt-in{from{opacity:0;transform:translateY(-14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes lt-out{to{opacity:0;transform:translateX(18px) scale(.96)}}
.lt-toast-ico{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--lt-accent) 20%,transparent);color:var(--lt-accent-l);
}
.lt-toast.ok    .lt-toast-ico{background:color-mix(in srgb,var(--lt-green) 20%,transparent);color:#4ADE80}
.lt-toast.info  .lt-toast-ico{background:color-mix(in srgb,var(--lt-blue) 20%,transparent);color:#8CB0F9}
.lt-toast.warn  .lt-toast-ico{background:color-mix(in srgb,var(--lt-amber) 20%,transparent);color:#FBBF4E}
.lt-toast.error .lt-toast-ico{background:color-mix(in srgb,var(--lt-red) 20%,transparent);color:#F58B82}
.lt-toast b{font-size:13px;font-weight:650;letter-spacing:-.02em;display:block}
.lt-toast p{font-size:11.5px;color:#A3A7B0;margin:2px 0 0;line-height:1.4}
.lt-toast-bar{position:absolute;bottom:0;left:0;height:2px;background:var(--lt-accent);animation:lt-bar linear forwards}
.lt-toast.ok .lt-toast-bar{background:var(--lt-green)}
.lt-toast.info .lt-toast-bar{background:var(--lt-blue)}
.lt-toast.warn .lt-toast-bar{background:var(--lt-amber)}
.lt-toast.error .lt-toast-bar{background:var(--lt-red)}
@keyframes lt-bar{from{width:100%}to{width:0}}
.lt-toast-close{
  position:absolute;top:6px;right:8px;background:none;border:0;color:#6E727C;cursor:pointer;
  font-size:15px;line-height:1;padding:4px;border-radius:6px;
}
.lt-toast-close:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  .lt-seg.is-full::after,.lt-seg.is-now::after,.lt-card.is-urgent,.lt-card.lt-bumped{animation:none}
  .lt-toast{animation:none}
  .lt-card.is-urgent{box-shadow:0 0 0 3px rgba(228,72,60,.45),0 12px 34px rgba(12,14,20,.16)}
}

/* fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb,red 50%,blue)){
  .lt-ico{background:rgba(238,108,60,.16)}
  .lt-chip{background:rgba(34,184,92,.16)}
  .lt-chip.is-waiting{background:rgba(240,169,43,.16)}
  .lt-chip.is-done{background:rgba(59,125,245,.16)}
  .lt-chip.is-bad{background:rgba(228,72,60,.16)}
  .lt-seg.is-now{background:rgba(238,108,60,.25)}
  .lt-toast-ico{background:rgba(238,108,60,.2)}
}