/* ==========================================================================
   L-CARGO frontend — every rule scoped under .lcargo so nothing touches the theme.
   ========================================================================== */
.lcargo{
  --lc-brand:#4C1D95;
  --lc-accent:#F97316;
  --lc-rad:18px;
  --lc-ink:#131A2B;
  --lc-ink-2:#3D4657;
  --lc-muted:#727E92;
  --lc-line:#E4E8EF;
  --lc-bg:#F6F7FB;
  --lc-card:#FFFFFF;
  --lc-ok:#0E9F6E;
  --lc-warn:#D97706;
  --lc-warn-bg:#FFF7ED;
  --lc-shadow:0 1px 2px rgba(19,26,43,.04), 0 12px 34px -14px rgba(19,26,43,.16);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--lc-ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  max-width:1140px;
  margin:0 auto;
  /* breathing room from the theme header, footer and page edges */
  padding:40px 20px 56px;
  box-sizing:border-box;
}
.lcargo *{box-sizing:border-box}
.lcargo h3,.lcargo h4{margin:0;font-weight:700;letter-spacing:-.01em}
.lcargo p{margin:0}
.lcargo .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

.lcargo .lc-card{
  background:var(--lc-card);
  border:1px solid var(--lc-line);
  border-radius:var(--lc-rad);
  box-shadow:var(--lc-shadow);
  overflow:hidden;
}

/* ---------- search ---------- */
.lcargo .lc-search{padding:26px 28px;margin-bottom:22px}
.lcargo .lc-search-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.lcargo .lc-search-icon{
  width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:var(--lc-brand);
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.lcargo .lc-search-icon svg{width:21px;height:21px}
.lcargo .lc-search-head h3{font-size:20px;color:var(--lc-ink)}
.lcargo .lc-search-head p{font-size:13.5px;color:var(--lc-muted)}
.lcargo .lcargo-lookup{display:flex;gap:12px;flex-wrap:wrap}
.lcargo .lcargo-lookup input{
  flex:1 1 240px;min-width:0;font-size:15px;padding:14px 17px;
  border:1.5px solid var(--lc-line);border-radius:12px;background:#fff;color:var(--lc-ink);
  outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit;
}
.lcargo .lcargo-lookup input:focus{border-color:var(--lc-brand);box-shadow:0 0 0 4px rgba(76,29,149,.10)}
.lcargo .lcargo-lookup button{
  flex:0 0 auto;font-size:15px;font-weight:600;padding:14px 30px;border:0;border-radius:12px;
  background:var(--lc-brand);color:#fff;cursor:pointer;font-family:inherit;
  transition:filter .15s,transform .08s;
}
.lcargo .lcargo-lookup button:hover{filter:brightness(1.12)}
.lcargo .lcargo-lookup button:active{transform:translateY(1px)}

/* ---------- empty ---------- */
.lcargo .lc-empty{padding:52px 28px;text-align:center}
.lcargo .lc-empty-icon{
  width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--lc-bg);
  color:var(--lc-muted);font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.lcargo .lc-empty h3{font-size:18px;margin-bottom:7px}
.lcargo .lc-empty p{color:var(--lc-muted);font-size:14.5px;max-width:420px;margin:0 auto}

/* ---------- result shell ---------- */
.lcargo .lc-result{display:flex;flex-direction:column;gap:22px}

/* ---------- alert ---------- */
.lcargo .lc-alert{
  display:flex;gap:16px;padding:20px 24px;background:var(--lc-warn-bg);
  border:1px solid #FDBA74;border-left:5px solid var(--lc-accent);border-radius:var(--lc-rad);
}
.lcargo .lc-alert-icon{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--lc-accent);color:#fff;
  font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;
}
.lcargo .lc-alert-body h4{font-size:16px;color:#9A3412;margin-bottom:6px}
.lcargo .lc-alert-reason{font-size:14.5px;color:#9A3412;font-weight:600;margin-bottom:5px}
.lcargo .lc-alert-help{font-size:13.5px;color:#B45309;margin-bottom:13px}
.lcargo .lc-alert-btn{
  display:inline-block;padding:9px 20px;border:1.5px solid var(--lc-accent);border-radius:10px;
  color:var(--lc-accent);background:#fff;font-size:14px;font-weight:600;text-decoration:none;
  transition:background .15s,color .15s;
}
.lcargo .lc-alert-btn:hover{background:var(--lc-accent);color:#fff}

/* ---------- header band ---------- */
.lcargo .lc-band{
  background:var(--lc-brand);color:#fff;padding:26px 30px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.lcargo .lc-band.is-delivered{background:linear-gradient(120deg,#065F46,#0E9F6E)}
.lcargo .lc-band.is-alert{background:linear-gradient(120deg,#7C2D12,#B45309)}
.lcargo .lc-logo{max-height:30px;width:auto;display:block;margin-bottom:14px}
.lcargo .lc-band-label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:6px;font-weight:600;
}
.lcargo .lc-band-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:25px;font-weight:700;letter-spacing:.02em;line-height:1.2;word-break:break-all;
}
.lcargo .lc-band-desc{font-size:14px;opacity:.85;margin-top:7px;max-width:520px}
.lcargo .lc-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 17px;border-radius:100px;
  font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px);white-space:nowrap;
}
.lcargo .lc-badge.live{background:var(--lc-accent)}
.lcargo .lc-badge.ok{background:rgba(255,255,255,.2)}
.lcargo .lc-badge.warn{background:#fff;color:#9A3412}
.lcargo .lc-dot{width:7px;height:7px;border-radius:50%;background:currentColor;position:relative;flex:0 0 7px}
.lcargo .lc-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;
  opacity:.6;animation:lc-ping 1.9s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes lc-ping{0%{transform:scale(.6);opacity:.6}75%,100%{transform:scale(2.2);opacity:0}}

/* ---------- barcode ---------- */
.lcargo .lc-barcode-wrap{
  padding:22px;text-align:center;background:var(--lc-bg);border-bottom:1px solid var(--lc-line);
}
.lcargo .lc-barcode{display:block;height:52px;max-width:280px;margin:0 auto}
.lcargo .lc-barcode-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--lc-ink-2);
  letter-spacing:.14em;margin-top:7px;
}

/* ---------- body ---------- */
.lcargo .lc-body{padding:28px 30px 30px;display:flex;flex-direction:column;gap:26px}

/* progress */
.lcargo .lc-rail-track{height:8px;border-radius:100px;background:#EAEDF3;overflow:hidden}
.lcargo .lc-rail-fill{
  height:100%;border-radius:100px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--lc-brand),var(--lc-accent));
  /* width is animated by JS so the bar and the % number stay in sync */
}
/* A gentle travelling sheen while the shipment is actually moving. Parked
   shipments (pending / on hold / delivered) get a plain bar. */
.lcargo .lc-rail-fill.is-moving::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);
  animation:lc-rail-sheen 2.2s ease-in-out 1.4s infinite;
}
@keyframes lc-rail-sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){
  .lcargo .lc-rail-fill.is-moving::after{animation:none;opacity:0}
}
.lcargo .lc-rail-legend{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;
  font-size:12.5px;color:var(--lc-muted);
}
.lcargo .lc-rail-legend span:nth-child(2){font-weight:700;color:var(--lc-brand)}
.lcargo .lc-rail-legend span:last-child{text-align:right}

/* route */
.lcargo .lc-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.lcargo .lc-route-card{background:var(--lc-bg);border:1px solid var(--lc-line);border-radius:14px;padding:18px 20px;min-width:0}
.lcargo .lc-route-head{
  display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lc-muted);margin-bottom:11px;
}
.lcargo .lc-ico{
  width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;flex:0 0 26px;
}
.lcargo .lc-ico.from{background:var(--lc-brand)}
.lcargo .lc-ico.to{background:var(--lc-accent)}
.lcargo .lc-route-name{font-size:17px;font-weight:700;color:var(--lc-ink);margin-bottom:3px;word-break:break-word}
.lcargo .lc-route-sub{font-size:13.5px;color:var(--lc-ink-2)}
.lcargo .lc-route-sub2{font-size:12.5px;color:var(--lc-muted);margin-top:2px}
.lcargo .lc-route-arrow{color:#C3CBD9;display:flex;align-items:center}
.lcargo .lc-route-arrow svg{width:40px;height:24px}

/* stats */
.lcargo .lc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.lcargo .lc-stat{border-radius:14px;padding:18px 20px;color:#fff}
.lcargo .lc-stat.brand{background:var(--lc-brand)}
.lcargo .lc-stat.accent{background:var(--lc-accent)}
.lcargo .lc-stat.ok{background:var(--lc-ok)}
.lcargo .lc-stat-label{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-bottom:7px;
}
.lcargo .lc-stat-value{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.lcargo .lc-stat-sub{font-size:12.5px;opacity:.85;margin-top:5px}

/* facts */
.lcargo .lc-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--lc-line);border:1px solid var(--lc-line);border-radius:14px;overflow:hidden;
}
.lcargo .lc-fact{background:#fff;padding:15px 18px}
.lcargo .lc-fact .k{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lc-muted);margin-bottom:5px;
}
.lcargo .lc-fact .v{font-size:15px;font-weight:600;color:var(--lc-ink);word-break:break-word}

/* ---------- split ---------- */
.lcargo .lc-split{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;align-items:start}
.lcargo .lc-split.no-map{grid-template-columns:1fr}

.lcargo .lc-card-head{
  padding:20px 24px;border-bottom:1px solid var(--lc-line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.lcargo .lc-card-head h3{font-size:17px;color:var(--lc-ink)}
.lcargo .lc-card-head p{font-size:12.5px;color:var(--lc-muted);margin-top:3px}
.lcargo .lc-live{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  color:var(--lc-accent);background:var(--lc-warn-bg);padding:6px 13px;border-radius:100px;white-space:nowrap;
}

/* map */
.lcargo .lc-map-3d{
  perspective:1400px;
  perspective-origin:50% 30%;
  overflow:hidden;
  background:#E8ECF2;
}
.lcargo .lc-map{
  height:460px;width:100%;background:#E8ECF2;
  transform-origin:50% 60%;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
/* Tilted "3D camera" resting state — a gentle downward pitch. */
.lcargo .lc-map-3d.lc-tilted .lc-map{
  transform:rotateX(11deg) scale(1.06);
}
/* Floor gradient adds depth behind the tilt. */
.lcargo .lc-map-3d::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to top,rgba(19,26,43,.10),transparent);
  pointer-events:none;opacity:0;transition:opacity .9s ease;
}
.lcargo .lc-map-3d.lc-tilted::after{opacity:1}
@media(prefers-reduced-motion:reduce){
  .lcargo .lc-map{transition:none}
  .lcargo .lc-map-3d.lc-tilted .lc-map{transform:none}
  .lcargo .lc-map-3d.lc-tilted::after{opacity:0}
}
.lcargo .lc-legend{
  display:flex;flex-wrap:wrap;gap:10px 18px;padding:15px 24px;
  border-top:1px solid var(--lc-line);background:var(--lc-bg);
}
.lcargo .lc-lg{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--lc-ink-2);font-weight:500}
.lcargo .lc-lg .sw{width:12px;height:12px;border-radius:50%;display:inline-block;flex:0 0 12px}
.lcargo .lc-lg .sw.done{background:linear-gradient(135deg,#5B21B6,#4C1D95)}
.lcargo .lc-lg .sw.origin{background:linear-gradient(135deg,#0E9F6E,#047857)}
.lcargo .lc-lg .sw.current{background:linear-gradient(135deg,#FB923C,#F97316);box-shadow:0 0 0 3px rgba(249,115,22,.28)}
.lcargo .lc-lg .sw.pending{background:#C3CBD9}
.lcargo .lc-lg .ln{width:22px;height:3px;border-radius:2px;display:inline-block;flex:0 0 22px}
.lcargo .lc-lg .ln.solid{background:var(--lc-brand)}
.lcargo .lc-lg .ln.dashed{
  background:repeating-linear-gradient(90deg,#C3CBD9 0 5px,transparent 5px 9px);
}

/* map markers (rendered by Leaflet, so not nested under .lcargo) */
.lc-mk{
  display:flex;align-items:center;justify-content:center;color:#fff;border-radius:50%;
  border:3.5px solid #fff;position:relative;font-weight:800;
}
.lc-mk svg{width:52%;height:52%}
.lc-mk.origin{background:linear-gradient(135deg,#0E9F6E,#047857);box-shadow:0 4px 12px rgba(4,120,87,.45),0 0 0 3px rgba(14,159,110,.18)}
.lc-mk.done{background:linear-gradient(135deg,#5B21B6,#4C1D95);box-shadow:0 4px 12px rgba(76,29,149,.45),0 0 0 3px rgba(76,29,149,.15)}
.lc-mk.done .tick{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.lc-mk.done .tick svg{width:56%;height:56%}
.lc-mk.done .no{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#fff;color:#4C1D95;font-size:10.5px;line-height:17px;text-align:center;
  border:1.5px solid #4C1D95;box-shadow:0 1px 3px rgba(19,26,43,.25);
}
.lc-mk.pending{background:linear-gradient(135deg,#9CA3AF,#6B7280);box-shadow:0 3px 10px rgba(107,114,128,.35)}
.lc-mk.dest{background:#fff;color:#4C1D95;border-color:#4C1D95;box-shadow:0 4px 12px rgba(76,29,149,.28)}

/* live / current-position marker */
.lc-live-mk{width:58px;height:58px;position:relative}
.lc-live-mk .halo{
  position:absolute;inset:0;border-radius:50%;border:2.5px dashed rgba(249,115,22,.55);
  background:rgba(249,115,22,.10);animation:lc-halo 3.2s ease-in-out infinite;
}
.lc-live-mk .ring{
  position:absolute;inset:8px;border-radius:50%;background:rgba(249,115,22,.28);
  animation:lc-ping2 2s cubic-bezier(0,0,.2,1) infinite;
}
.lc-live-mk .core{
  position:absolute;inset:14px;border-radius:50%;
  background:linear-gradient(135deg,#FB923C,#F97316);border:3.5px solid #fff;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(249,115,22,.65);
}
.lc-live-mk .core svg{width:58%;height:58%}
.lc-live-mk.hold .halo{border-color:rgba(217,119,6,.6);background:rgba(217,119,6,.12)}
.lc-live-mk.hold .ring{background:rgba(217,119,6,.26)}
.lc-live-mk.hold .core{background:linear-gradient(135deg,#F59E0B,#D97706);box-shadow:0 4px 16px rgba(217,119,6,.6)}
/* moving truck on the remaining leg */
.lc-truck-mk{width:40px;height:40px;position:relative;display:flex;align-items:center;justify-content:center}
.lc-truck-core{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#5B6B86,#3D4B63);border:3px solid #fff;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(19,26,43,.4);
}
.lc-truck-core svg{width:56%;height:56%}
.lc-truck-mk.hold .lc-truck-core{background:linear-gradient(135deg,#F59E0B,#D97706)}
/* parked (pending / on hold / delivered) — muted so it reads as stopped */
.lc-truck-mk.parked .lc-truck-core{
  background:linear-gradient(135deg,#98A3B5,#77839A);
  box-shadow:0 2px 8px rgba(19,26,43,.28);
}
.lc-truck-mk.parked.hold .lc-truck-core{background:linear-gradient(135deg,#F59E0B,#D97706)}
/* current-location calm dot */
.lc-here-mk{width:26px;height:26px;position:relative;display:flex;align-items:center;justify-content:center}
.lc-here-mk .dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--lc-brand,#4C1D95);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(19,26,43,.4);position:relative;z-index:2;
}
.lc-here-mk .pulse{
  position:absolute;inset:0;border-radius:50%;
  background:var(--lc-brand,#4C1D95);opacity:.25;animation:lc-ping2 2.4s ease-out infinite;
}
.lc-here-mk.hold .dot{background:#D97706}
.lc-here-mk.hold .pulse{background:#D97706}
@keyframes lc-ping2{0%{transform:scale(.5);opacity:.75}75%,100%{transform:scale(1.55);opacity:0}}
@keyframes lc-halo{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.12);opacity:.35}}

/* hover / popup card */
.lc-pop{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-width:170px}
.lc-pop b{display:block;font-size:14px;color:#131A2B;margin-bottom:3px}
.lc-pop .p{font-size:13px;color:#3D4657;font-weight:500}
.lc-pop .t{font-size:11.5px;color:#727E92;margin-top:4px}
.lc-pop .n{font-size:12px;color:#3D4657;margin-top:7px;padding-top:7px;border-top:1px solid #E4E8EF}

/* timeline */
.lcargo .lc-tl{padding:10px 24px 22px;max-height:520px;overflow-y:auto}
.lcargo .lc-tl-empty{padding:34px 24px;text-align:center;color:var(--lc-muted);font-size:14px}
.lcargo .lc-node{position:relative;padding:16px 0 16px 34px}
.lcargo .lc-node::before{
  content:"";position:absolute;left:10px;top:26px;bottom:-16px;width:2px;background:var(--lc-line);
}
.lcargo .lc-node:last-child::before{display:none}
.lcargo .lc-node .m{
  position:absolute;left:0;top:16px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;
  background:var(--lc-brand);border:2px solid var(--lc-brand);z-index:1;
}
.lcargo .lc-node.done::before{background:var(--lc-brand)}
.lcargo .lc-node.active .m{
  background:var(--lc-accent);border-color:var(--lc-accent);
  box-shadow:0 0 0 5px rgba(249,115,22,.18);
}
.lcargo .lc-node.active.warn .m{background:var(--lc-warn);border-color:var(--lc-warn);box-shadow:0 0 0 5px rgba(217,119,6,.18)}
.lcargo .lc-node-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lcargo .lc-node .s{font-weight:700;font-size:14.5px;color:var(--lc-ink)}
.lcargo .lc-node.active .s{color:var(--lc-accent)}
.lcargo .lc-node.active.warn .s{color:var(--lc-warn)}
.lcargo .lc-node .w{font-size:11.5px;color:var(--lc-muted);white-space:nowrap}
.lcargo .lc-node .l{font-size:13px;color:var(--lc-ink-2);margin-top:3px}
.lcargo .lc-node .n{
  font-size:12.5px;color:var(--lc-muted);margin-top:7px;padding:9px 12px;
  background:var(--lc-bg);border-radius:9px;
}

.lcargo .lc-note{
  padding:15px 20px;background:var(--lc-bg);border:1px dashed var(--lc-line);
  border-radius:12px;font-size:13.5px;color:var(--lc-muted);text-align:center;
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .lcargo .lc-split{grid-template-columns:1fr}
  .lcargo .lc-map{height:400px}
  .lcargo .lc-tl{max-height:none}
}
@media (max-width:720px){
  .lcargo{padding:26px 14px 40px}
  .lcargo .lc-search{padding:20px}
  .lcargo .lcargo-lookup button{width:100%}
  .lcargo .lc-band{padding:22px 20px}
  .lcargo .lc-band-num{font-size:20px}
  .lcargo .lc-body{padding:22px 20px 24px;gap:22px}
  .lcargo .lc-route{grid-template-columns:1fr;gap:12px}
  .lcargo .lc-route-arrow{transform:rotate(90deg);justify-content:center}
  .lcargo .lc-stat-value{font-size:23px}
  .lcargo .lc-map{height:320px}
  .lcargo .lc-card-head{padding:17px 18px}
  .lcargo .lc-tl{padding:8px 18px 18px}
  .lcargo .lc-legend{padding:13px 18px}
  .lcargo .lc-alert{padding:17px 18px;gap:13px}
}
@media (max-width:420px){
  .lcargo .lc-facts{grid-template-columns:1fr 1fr}
  .lcargo .lc-band-num{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .lcargo .lc-rail-fill{transition:none}
  .lcargo .lc-dot::after,.lc-live-mk .ring{animation:none}
}

/* ---------- map hover cards (Leaflet renders these outside .lcargo) ---------- */
.leaflet-tooltip.lc-tip{
  background:#fff;border:1px solid #E4E8EF;border-radius:12px;padding:12px 14px;
  box-shadow:0 6px 26px -8px rgba(19,26,43,.35);color:#131A2B;white-space:normal;max-width:250px;
}
.leaflet-tooltip.lc-tip::before{border-top-color:#fff}
.leaflet-tooltip.lc-tip.leaflet-tooltip-top::before{border-top-color:#fff}
.lc-pop .badge{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  background:#F97316;color:#fff;padding:3px 9px;border-radius:100px;margin-bottom:7px;
}
.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 6px 26px -8px rgba(19,26,43,.35)}
.leaflet-popup-content{margin:13px 15px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* ---------- action buttons row ---------- */
.lcargo .lc-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 24px;
  background:var(--lc-bg);border-bottom:1px solid var(--lc-line);
}
.lcargo .lc-act{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;
  border:1.5px solid var(--lc-line);background:#fff;color:var(--lc-ink-2);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;font-family:inherit;transition:border-color .15s,color .15s;
}
.lcargo .lc-act:hover{border-color:var(--lc-brand);color:var(--lc-brand)}
.lcargo .lc-act svg{width:16px;height:16px}
.lcargo .lc-qr-wrap{margin-left:auto;padding:6px;background:#fff;border:1px solid var(--lc-line);border-radius:10px;line-height:0}

/* ---------- stepper ---------- */
.lcargo .lc-stepper{display:flex;align-items:flex-start;margin-bottom:8px}
.lcargo .lc-step{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:74px;text-align:center}
.lcargo .lc-step-dot{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#EAEDF3;color:#A6AFC0;border:2px solid #EAEDF3;flex-shrink:0;
}
.lcargo .lc-step-dot svg{width:18px;height:18px}
.lcargo .lc-step.done .lc-step-dot{background:var(--lc-brand);border-color:var(--lc-brand);color:#fff}
.lcargo .lc-step.now .lc-step-dot{background:var(--lc-accent);border-color:var(--lc-accent);color:#fff;box-shadow:0 0 0 5px rgba(249,115,22,.18)}
.lcargo .lc-step-label{font-size:10.5px;font-weight:600;color:var(--lc-muted);margin-top:8px;line-height:1.25}
.lcargo .lc-step.done .lc-step-label,.lcargo .lc-step.now .lc-step-label{color:var(--lc-ink)}
.lcargo .lc-step-line{flex:1 1 auto;height:2.5px;background:#EAEDF3;margin-top:19px;min-width:12px}
.lcargo .lc-step-line.done{background:var(--lc-brand)}

/* ---------- packages table ---------- */
.lcargo .lc-pkgs{margin-top:16px}
.lcargo .lc-pkgs-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.lcargo .lc-pkgs-head h4{font-size:13px;color:var(--lc-ink)}
.lcargo .lc-pkgs-head span{font-size:12px;color:var(--lc-muted)}
.lcargo .lc-pkgs-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--lc-line);border-radius:12px;overflow:hidden}
.lcargo .lc-pkgs-table th{background:var(--lc-bg);text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--lc-muted);padding:9px 12px;font-weight:700}
.lcargo .lc-pkgs-table td{padding:9px 12px;border-top:1px solid var(--lc-line);color:var(--lc-ink-2)}

/* ---------- delivery instructions ---------- */
.lcargo .lc-instr{margin-top:16px;padding:15px 18px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:12px}
.lcargo .lc-instr-head{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1D4ED8;margin-bottom:6px}
.lcargo .lc-instr p{font-size:13.5px;color:#1E3A5F}

/* ---------- print ---------- */
@media print{
  .lcargo .no-print,.lcargo .lc-search,.lcargo .lc-actions,.lcargo .lc-live,.lcargo .lc-legend{display:none !important}
  .lcargo{padding:0;max-width:100%}
  .lcargo .lc-card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .lcargo .lc-map{height:280px}
  .lcargo .lc-band{background:#fff !important;color:#000 !important;border-bottom:2px solid #000}
  .lcargo .lc-badge{background:#eee !important;color:#000 !important}
}

@media (max-width:720px){
  .lcargo .lc-actions{padding:13px 18px}
  .lcargo .lc-qr-wrap{margin-left:0}
  .lcargo .lc-step{width:58px}
  .lcargo .lc-step-label{font-size:9.5px}
  .lcargo .lc-step-dot{width:32px;height:32px}
}

/* ---------- entrance animations ---------- */
@keyframes lc-fade-up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes lc-fade-in{from{opacity:0}to{opacity:1}}
@keyframes lc-scale-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes lc-step-pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes lc-line-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* soft, simple easing used throughout */
.lcargo .lc-card{animation:lc-fade-up .55s cubic-bezier(.22,.61,.36,1) both}
.lcargo .lc-band{animation:lc-fade-in .7s ease both}
.lcargo .lc-actions{animation:lc-fade-in .7s ease .12s both}

/* stepper: dots fade in gently in sequence, connectors grow */
.lcargo .lc-stepper .lc-step-dot{animation:lc-step-pop .5s cubic-bezier(.22,.61,.36,1) both}
.lcargo .lc-stepper .lc-step:nth-child(1) .lc-step-dot{animation-delay:.12s}
.lcargo .lc-stepper .lc-step:nth-child(3) .lc-step-dot{animation-delay:.24s}
.lcargo .lc-stepper .lc-step:nth-child(5) .lc-step-dot{animation-delay:.36s}
.lcargo .lc-stepper .lc-step:nth-child(7) .lc-step-dot{animation-delay:.48s}
.lcargo .lc-stepper .lc-step:nth-child(9) .lc-step-dot{animation-delay:.60s}
.lcargo .lc-step-line{transform-origin:left center}
.lcargo .lc-step-line.done{animation:lc-line-grow .5s cubic-bezier(.22,.61,.36,1) both}
.lcargo .lc-step:nth-child(2){animation-delay:.20s}
.lcargo .lc-step-line:nth-of-type(2){animation-delay:.32s}

/* progress rail is filled by JS (animateProgress) so the bar and the
   percentage number stay in step; no CSS keyframe needed here. */

/* stat cards + route cards reveal on scroll */
.lcargo.lc-js .lc-reveal{opacity:0}
.lcargo .lc-reveal.in{animation:lc-fade-up .6s cubic-bezier(.22,.61,.36,1) both}
/* Safety net: if the reveal observer never fires (e.g. very fast scroll or an
   edge case), make sure content still becomes visible after a moment. */
.lcargo.lc-js .lc-reveal{animation:lc-reveal-safety 0s linear 2.5s forwards}
@keyframes lc-reveal-safety{to{opacity:1}}
.lcargo .lc-reveal.d1{animation-delay:.06s}
.lcargo .lc-reveal.d2{animation-delay:.14s}
.lcargo .lc-reveal.d3{animation-delay:.22s}

/* timeline rows stagger in when revealed */
.lcargo .lc-tl-item.in{animation:lc-fade-up .55s cubic-bezier(.22,.61,.36,1) both}

@media (prefers-reduced-motion:reduce){
  .lcargo *,.lcargo *::before,.lcargo *::after{animation:none !important;transition:none !important}
  .lcargo .lc-reveal{opacity:1 !important}
}

/* ---------- destination beacon (waiting for arrival) ---------- */
.lc-dest-mk{width:54px;height:54px;position:relative;display:flex;align-items:center;justify-content:center}
.lc-dest-mk .dcore{
  position:relative;z-index:2;width:38px;height:38px;border-radius:50%;
  background:#fff;border:3px solid #4C1D95;color:#4C1D95;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(76,29,149,.3);
}
.lc-dest-mk .dcore svg{width:56%;height:56%}
.lc-dest-mk .beacon{
  position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;border:2px solid #4C1D95;opacity:0;
  animation:lc-beacon 3s ease-out infinite;
}
.lc-dest-mk .beacon.b2{animation-delay:1.5s}
@keyframes lc-beacon{
  0%{transform:scale(.6);opacity:.7}
  70%{opacity:.15}
  100%{transform:scale(2.4);opacity:0}
}
/* delivered: solid green, no beacon */
.lc-dest-mk.done .dcore{background:linear-gradient(135deg,#10b981,#059669);border-color:#fff;color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.5)}

/* ---------- animated remaining (dashed) line ---------- */
/* Leaflet renders the polyline as an SVG <path>; flow the dashes toward the
   destination by shifting the dash offset. Subtle, single moving line. */
.lc-remaining-flow{
  animation:lc-dashflow 1.1s linear infinite;
}
@keyframes lc-dashflow{
  to{stroke-dashoffset:-14}
}

@media (prefers-reduced-motion:reduce){
  .lc-dest-mk .beacon{animation:none;opacity:0}
  .lc-remaining-flow{animation:none}
}