/* StarBio — shipment progress map.
   Replaces Advanced Shipment Tracking's stock widget on customer order views. */

.sb-trk{
  --shipInk:var(--txt,#eef3f7);
  --shipMut:var(--muted,#93a3b3);
  --shipDim:var(--dim,#5f7180);
  --shipAcc:var(--sb-teal,#5cc0ff);
  --shipLine:rgba(255,255,255,.12);
  --shipRail:rgba(255,255,255,.14);
  --shipInset:rgba(255,255,255,.045);
  position:relative;
  margin:0 0 34px;
  padding:0;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(19,28,41,.94),rgba(11,17,26,.94));
  border:1px solid rgba(92,192,255,.20);
  box-shadow:0 34px 80px -50px rgba(0,0,0,.95);
  color:var(--shipInk);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.sb-trk::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--shipAcc),transparent);opacity:.65;
}

/* ---------- head: carrier chip + status pill ---------- */
.sb-trk-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:20px 20px 18px;border-bottom:1px solid var(--shipLine);
}
.sb-trk-chip{
  width:46px;height:46px;flex:0 0 auto;border-radius:13px;
  display:grid;place-items:center;color:#fff;
  background:#333366;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.sb-trk-chip svg{width:24px;height:24px}
.sb-trk-who{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.sb-trk-kicker{
  font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--shipDim);
}
.sb-trk-carrier{
  font-family:var(--display,inherit);font-size:19px;font-weight:750;line-height:1.15;
  color:var(--shipInk);
}
.sb-trk-pill{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:7px 13px;border-radius:100px;
  font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:rgba(92,192,255,.13);border:1px solid rgba(92,192,255,.34);color:var(--shipAcc);
}
.sb-trk-pill i{
  width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 0 currentColor;animation:sbShipPulse 2.4s ease-out infinite;
}
@keyframes sbShipPulse{
  0%{box-shadow:0 0 0 0 rgba(92,192,255,.55)}
  70%{box-shadow:0 0 0 7px rgba(92,192,255,0)}
  100%{box-shadow:0 0 0 0 rgba(92,192,255,0)}
}
.sb-trk.is-waiting .sb-trk-pill{
  background:rgba(255,255,255,.06);border-color:var(--shipLine);color:var(--shipMut);
}
.sb-trk.is-waiting .sb-trk-pill i{animation:none;opacity:.6}

/* ---------- tracking number ---------- */
.sb-trk-num{padding:16px 20px;border-bottom:1px solid var(--shipLine)}
.sb-trk-numrow{display:flex;align-items:center;gap:10px;margin-top:7px}
.sb-trk-code{
  flex:1 1 auto;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--shipInk);background:var(--shipInset);
  border:1px solid var(--shipLine);border-radius:11px;
  padding:11px 13px;overflow-x:auto;white-space:nowrap;
  scrollbar-width:none;
}
.sb-trk-code::-webkit-scrollbar{display:none}
.sb-trk-copy{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:11px 14px;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--shipMut);background:var(--shipInset);
  border:1px solid var(--shipLine);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.sb-trk-copy svg{width:14px;height:14px}
.sb-trk-copy:hover{color:var(--shipInk);border-color:rgba(92,192,255,.42);background:rgba(92,192,255,.10)}
.sb-trk-copy.is-done{color:#4FD69C;border-color:rgba(79,214,156,.45);background:rgba(79,214,156,.10)}

/* ---------- the map ---------- */
.sb-trk-steps{
  list-style:none;margin:0;padding:22px 20px 6px;position:relative;
}
.sb-trk-steps li{
  position:relative;padding:0 0 26px 42px;
}
.sb-trk-steps li:last-child{padding-bottom:4px}
.sb-trk-steps li::before{
  content:"";position:absolute;left:12px;top:28px;bottom:2px;width:2px;
  background:var(--shipRail);border-radius:2px;
}
.sb-trk-steps li:last-child::before{display:none}
.sb-trk-steps li.is-done::before{background:linear-gradient(180deg,var(--shipAcc),rgba(92,192,255,.55))}

.sb-trk-dot{
  position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:2px solid var(--shipRail);
  color:var(--shipDim);
}
.sb-trk-dot svg{width:13px;height:13px}
.sb-trk-steps li.is-done .sb-trk-dot{
  background:var(--shipAcc);border-color:var(--shipAcc);color:#06121d;
}
.sb-trk-steps li.is-now .sb-trk-dot{
  background:rgba(92,192,255,.16);border-color:var(--shipAcc);color:var(--shipAcc);
  box-shadow:0 0 0 5px rgba(92,192,255,.12);
}
.sb-trk-steps li.is-now .sb-trk-dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--shipAcc);
  animation:sbShipBreathe 2.2s ease-in-out infinite;
}
@keyframes sbShipBreathe{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
.sb-trk-steps li.is-now .sb-trk-dot svg{display:none}

.sb-trk-t{
  display:block;font-family:var(--display,inherit);
  font-size:15px;font-weight:700;line-height:1.3;color:var(--shipMut);
}
.sb-trk-steps li.is-done .sb-trk-t{color:var(--shipInk)}
.sb-trk-steps li.is-now .sb-trk-t{color:var(--shipInk)}
.sb-trk-s{
  display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--shipDim);
}
.sb-trk-steps li.is-now .sb-trk-s{color:var(--shipMut)}

/* ---------- foot ---------- */
.sb-trk-foot{padding:16px 20px 20px}
.sb-trk-cta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:15px 20px;border-radius:100px;text-decoration:none;
  font-family:var(--display,inherit);font-size:15px;font-weight:750;letter-spacing:.01em;
  color:#06121d;background:linear-gradient(135deg,#5cc0ff,#9fd4ff);
  box-shadow:0 14px 32px -16px rgba(92,192,255,.85);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.sb-trk-cta:hover{transform:translateY(-1px);filter:brightness(1.05);color:#06121d}
.sb-trk-cta:active{transform:translateY(0)}
.sb-trk-cta svg{width:16px;height:16px}
.sb-trk-note{
  margin:13px 0 0;font-size:12px;line-height:1.55;color:var(--shipDim);text-align:center;
}

/* ---------- horizontal rail on wider screens ---------- */
@media(min-width:760px){
  .sb-trk-steps{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    padding:30px 26px 12px;gap:0;
  }
  .sb-trk-steps li{padding:46px 12px 0;text-align:center}
  .sb-trk-steps li:last-child{padding-bottom:0}
  .sb-trk-steps li::before{
    left:50%;right:-50%;top:13px;bottom:auto;width:auto;height:2px;
  }
  .sb-trk-steps li.is-done::before{background:linear-gradient(90deg,var(--shipAcc),rgba(92,192,255,.55))}
  .sb-trk-dot{left:50%;top:1px;transform:translateX(-50%)}
  .sb-trk-t{font-size:14px}
  .sb-trk-s{font-size:11.5px}
  .sb-trk-head,.sb-trk-num{padding-left:26px;padding-right:26px}
  .sb-trk-foot{padding:10px 26px 24px}
  .sb-trk-cta{width:fit-content;min-width:300px;padding-left:44px;padding-right:44px;margin:0 auto}
}

/* ---------- light theme ---------- */
html.sb-light .sb-trk{
  --shipInk:#0f172a;--shipMut:#526079;--shipDim:#6b7a90;
  --shipLine:rgba(15,23,42,.10);--shipRail:rgba(15,23,42,.13);
  --shipInset:rgba(15,23,42,.035);
  background:#fff;border-color:rgba(15,23,42,.10);
  box-shadow:0 26px 60px -44px rgba(15,23,42,.45);
}
html.sb-light .sb-trk-pill{background:rgba(41,138,203,.10);border-color:rgba(41,138,203,.30);color:#1b6fa8}
html.sb-light .sb-trk-steps li.is-done .sb-trk-dot{background:#298acb;border-color:#298acb;color:#fff}
html.sb-light .sb-trk-steps li.is-now .sb-trk-dot{background:rgba(41,138,203,.14);border-color:#298acb;color:#298acb}
html.sb-light .sb-trk-steps li.is-now .sb-trk-dot::after{background:#298acb}
html.sb-light .sb-trk-steps li.is-done::before{background:linear-gradient(180deg,#298acb,rgba(41,138,203,.5))}
@media(min-width:760px){
  html.sb-light .sb-trk-steps li.is-done::before{background:linear-gradient(90deg,#298acb,rgba(41,138,203,.5))}
}
html.sb-light .sb-trk-cta{color:#fff;background:linear-gradient(135deg,#298acb,#4aa8e6);box-shadow:0 14px 30px -16px rgba(41,138,203,.7)}
html.sb-light .sb-trk-cta:hover{color:#fff}

/* ---------- hide AST's stock widget wherever ours renders ---------- */
.sb-has-shipmap .fluid_section,
.sb-has-shipmap .fluid_container{display:none!important}

@media(prefers-reduced-motion:reduce){
  .sb-trk-pill i,.sb-trk-steps li.is-now .sb-trk-dot::after{animation:none}
  .sb-trk-cta{transition:none}
}

.sb-trk-cta,.sb-trk-cta:hover{text-decoration:none!important}

/* ---------- expected arrival ---------- */
.sb-trk-eta{
  padding:18px 20px;border-bottom:1px solid var(--shipLine);
  background:linear-gradient(180deg,rgba(92,192,255,.07),rgba(92,192,255,0));
}
.sb-trk-etabig{
  display:block;margin-top:5px;font-family:var(--display,inherit);
  font-size:23px;font-weight:750;line-height:1.2;color:var(--shipInk);letter-spacing:-.01em;
}
.sb-trk-etasub{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--shipDim)}
.sb-trk.is-delivered .sb-trk-eta{background:linear-gradient(180deg,rgba(79,214,156,.09),rgba(79,214,156,0))}
.sb-trk.is-delivered .sb-trk-pill{background:rgba(79,214,156,.13);border-color:rgba(79,214,156,.36);color:#4FD69C}
.sb-trk.is-delivered .sb-trk-pill i{animation:none}

/* ---------- map ---------- */
.sb-trk-map{padding:18px 20px 4px;border-bottom:1px solid var(--shipLine)}
.sb-trk-map-svg{display:block;width:100%;height:auto}
.sb-trk-land{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.16);stroke-width:1.4;stroke-linejoin:round}
.sb-trk-borders{fill:none;stroke:rgba(255,255,255,.075);stroke-width:1}
.sb-trk-route{
  fill:none;stroke:var(--shipAcc);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:12 13;opacity:.8;animation:sbTrkFlow 1.5s linear infinite;
}
@keyframes sbTrkFlow{to{stroke-dashoffset:-25}}
.sb-trk-pt{stroke:#0b111a;stroke-width:3}
.sb-trk-pt-o{fill:#8fa3b8}
.sb-trk-pt-d{fill:#FFC44D}
.sb-trk-pt-l{fill:var(--shipAcc)}
.sb-trk-pt-l.is-done{fill:#4FD69C}
.sb-trk-halo{fill:var(--shipAcc);opacity:.22;animation:sbTrkHalo 2.4s ease-out infinite}
.sb-trk-halo.is-done{fill:#4FD69C;animation:none;opacity:.18}
@keyframes sbTrkHalo{0%{transform-box:fill-box;transform-origin:center;transform:scale(.55);opacity:.36}
  70%{transform-box:fill-box;transform-origin:center;transform:scale(1.25);opacity:0}
  100%{opacity:0}}
.sb-trk-legend{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:6px;
  font-size:11.5px;color:var(--shipDim);
}
.sb-trk-legend span{display:inline-flex;align-items:center;gap:6px}

.sb-trk-legend .k-o{background:#8fa3b8}
.sb-trk-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.sb-trk-legend .k-o{background:var(--shipMut)}
.sb-trk-legend .k-l{background:var(--shipAcc)}
.sb-trk-legend .k-d{background:#FFC44D}
.sb-trk-mapcap{
  margin:10px 0 14px;font-size:12.5px;line-height:1.5;color:var(--shipMut);text-align:center;
}

/* ---------- scan history ---------- */
.sb-trk-hist{padding:0 20px 16px}
.sb-trk-hist summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--shipMut);
  padding:9px 14px;border:1px solid var(--shipLine);border-radius:100px;background:var(--shipInset);
  transition:color .18s ease,border-color .18s ease;
}
.sb-trk-hist summary::-webkit-details-marker{display:none}
.sb-trk-hist summary::after{
  content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease;
}
.sb-trk-hist[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.sb-trk-hist summary:hover{color:var(--shipInk);border-color:rgba(92,192,255,.4)}
.sb-trk-hist ol{list-style:none;margin:14px 0 0;padding:0;border-left:2px solid var(--shipRail)}
.sb-trk-hist li{padding:0 0 13px 16px;position:relative}
.sb-trk-hist li::before{
  content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--shipRail);
}
.sb-trk-hist li:first-child::before{background:var(--shipAcc)}
.sb-trk-hd{display:block;font-size:13px;font-weight:600;color:var(--shipInk);line-height:1.35}
.sb-trk-hm{display:block;margin-top:2px;font-size:11.5px;color:var(--shipDim)}

@media(min-width:760px){
  .sb-trk-eta,.sb-trk-map{padding-left:26px;padding-right:26px}
  .sb-trk-hist{padding-left:26px;padding-right:26px}
  .sb-trk-etabig{font-size:26px}
  .sb-trk-map-svg{max-width:620px;margin:0 auto}
}

/* light theme */
html.sb-light .sb-trk-land{fill:rgba(15,23,42,.05);stroke:rgba(15,23,42,.20)}
html.sb-light .sb-trk-borders{stroke:rgba(15,23,42,.10)}
html.sb-light .sb-trk-pt{stroke:#fff}
html.sb-light .sb-trk-route{stroke:#298acb}
html.sb-light .sb-trk-pt-l{fill:#298acb}
html.sb-light .sb-trk-halo{fill:#298acb}

@media(prefers-reduced-motion:reduce){
  .sb-trk-route,.sb-trk-halo{animation:none}
}