/* Denim Store — order tracking popup.
   Reuses the shared .so-modal shell from main.css; everything here is the
   panel's own contents. */

.ds-track-panel{max-width:520px;padding:26px 24px 22px}

/* ---- header ---- */
.ds-track-head{text-align:center;margin-bottom:18px}
.ds-track-head-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;margin-bottom:10px;
  background:rgba(210,28,62,.1);color:var(--primary)
}
.ds-track-head h3{margin:0 0 4px;font-size:19px;font-weight:700;color:var(--foreground)}
.ds-track-head p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted-foreground)}

/* ---- search field ---- */
.ds-track-field{display:flex;gap:8px}
.ds-track-field input{
  flex:1 1 auto;min-width:0;
  padding:12px 14px;font-family:inherit;font-size:15px;
  border:1px solid var(--border);border-radius:10px;background:var(--card);
  color:var(--foreground);transition:border-color .18s ease,box-shadow .18s ease
}
.ds-track-field input:focus{
  outline:0;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(210,28,62,.14)
}
.ds-track-submit{
  position:relative;flex:0 0 auto;min-width:104px;
  padding:12px 20px;border:0;border-radius:10px;
  background:var(--primary);color:#fff;font-size:14.5px;font-weight:700;
  transition:background .18s ease,transform .18s ease
}
.ds-track-submit:hover:not(:disabled){background:var(--primary-hover)}
.ds-track-submit:disabled{opacity:.75;cursor:default}
.ds-track-submit.is-busy .ds-track-submit-label{visibility:hidden}
.ds-track-spin{display:none}
.ds-track-submit.is-busy .ds-track-spin{
  display:block;position:absolute;left:50%;top:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:ds-track-spin .7s linear infinite
}
@keyframes ds-track-spin{to{transform:rotate(360deg)}}

/* ---- status message ---- */
.ds-track-msg{margin:0;font-size:13.5px;line-height:1.5}
.ds-track-msg.is-info,.ds-track-msg.is-ok,.ds-track-msg.is-error{
  margin-top:14px;padding:10px 12px;border-radius:9px
}
.ds-track-msg.is-info{background:var(--muted);color:var(--muted-foreground)}
.ds-track-msg.is-ok{background:#d1fae5;color:#065f46}
.ds-track-msg.is-error{background:#fee2e2;color:#991b1b}

/* ---- result card ---- */
.ds-track-results:not(:empty){margin-top:14px;display:grid;gap:12px}
.ds-track-card{
  border:1px solid var(--border);border-radius:12px;padding:16px;
  background:var(--card);box-shadow:var(--shadow-sm)
}
.ds-track-card-head{
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
  justify-content:space-between;margin-bottom:16px
}
.ds-track-num{display:block;font-size:14.5px;font-weight:700;color:var(--foreground)}
.ds-track-date{display:block;margin-top:2px;font-size:12px;color:var(--muted-foreground)}
.ds-track-pill{
  flex:0 0 auto;padding:5px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:#e0e7ff;color:#3730a3
}
.ds-track-card.is-done .ds-track-pill{background:#d1fae5;color:#065f46}
.ds-track-card.is-warn .ds-track-pill{background:#fef3c7;color:#92400e}
.ds-track-card.is-fail .ds-track-pill{background:#fee2e2;color:#991b1b}

/* ---- progress rail ---- */
.ds-track-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  list-style:none;margin:0 0 16px;padding:0
}
.ds-track-rail li{position:relative;text-align:center;padding-top:20px}
/* The connector is drawn on each step except the first, running left from its
   own dot, so the rail never overhangs either end. */
.ds-track-rail li::before{
  content:"";position:absolute;top:5px;right:50%;left:-50%;height:2px;
  background:var(--border)
}
.ds-track-rail li:first-child::before{display:none}
.ds-track-rail li.is-done::before,
.ds-track-rail li.is-current::before{background:var(--primary)}
.ds-track-dot{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;
  background:var(--card);border:2px solid var(--border);z-index:1
}
.ds-track-rail li.is-done .ds-track-dot{background:var(--primary);border-color:var(--primary)}
.ds-track-rail li.is-current .ds-track-dot{
  background:var(--primary);border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(210,28,62,.18)
}
.ds-track-step{font-size:11px;line-height:1.3;color:var(--muted-foreground)}
.ds-track-rail li.is-current .ds-track-step{color:var(--foreground);font-weight:700}

.ds-track-note{
  margin:0 0 14px;padding:10px 12px;border-radius:9px;
  background:#fee2e2;color:#991b1b;font-size:13px;line-height:1.5
}

/* ---- items + total ---- */
.ds-track-items{
  list-style:none;margin:0;padding:0 0 12px;
  border-bottom:1px solid var(--border);display:grid;gap:7px
}
.ds-track-items li{
  display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  font-size:13px;line-height:1.45;color:var(--foreground)
}
.ds-track-qty{flex:0 0 auto;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.ds-track-card-foot{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:12px;font-size:13.5px;color:var(--muted-foreground)
}
.ds-track-card-foot strong{font-size:16px;color:var(--foreground)}

.ds-track-help{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);
  text-align:center;font-size:13px;color:var(--muted-foreground)
}
.ds-track-help a{color:var(--primary);font-weight:700}

@media (max-width:480px){
  .ds-track-panel{padding:22px 16px 18px}
  .ds-track-field{flex-direction:column}
  .ds-track-submit{width:100%;padding:13px 20px}
  .ds-track-step{font-size:10px}
}