/* Abrants Data Store — order tracking page (mobile-first) */

.track-main{padding:26px 0 60px;max-width:820px;margin-inline:auto}

.track-hero{text-align:center;padding:8px 0 22px}
.track-hero h1{font:700 clamp(27px,7.5vw,42px)/1.12 var(--display);letter-spacing:-.035em;margin:10px 0 10px}
.track-hero p{color:var(--muted);font-size:14.5px;margin:0 auto;max-width:520px;line-height:1.7}

.lookup-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px;box-shadow:var(--shadow-xs);margin-bottom:16px;
}
.lookup-form{display:grid;gap:12px}
.lookup-form .field{margin:0}
.lookup-form button{
  min-height:52px;border-radius:var(--r);font-weight:800;font-size:15px;
  background:var(--navy);color:#fff;
}
.lookup-form button:disabled{opacity:.62;cursor:not-allowed}
.lookup-error{
  margin:12px 0 0;font-size:12.5px;color:#b3261e;
  background:#fdecea;border:1px solid #f7c9c5;border-radius:var(--r-sm);padding:11px 12px;
}
.lookup-error:empty{display:none}

/* Live status card */
.status-card{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:20px;margin-bottom:16px;box-shadow:var(--shadow);
}
.status-card .section-kicker{color:#8b96ad}
.status-card h2{font:700 21px/1.25 var(--display);margin:10px 0 6px;letter-spacing:-.02em}
.status-card p{margin:0;color:#a3adc1;font-size:13.5px;line-height:1.6}
.status-ref{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:7px 13px;font-size:12px;color:#dfe4ee;
}
.status-ref code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.copy-btn{background:none;border:0;color:#ffd21c;font-size:12px;font-weight:700;cursor:pointer;padding:0 2px}

/* Progress stepper */
.stepper{display:flex;align-items:flex-start;gap:0;margin:20px 0 4px}
.step{flex:1;text-align:center;position:relative}
.step .dot{
  width:22px;height:22px;border-radius:50%;margin:0 auto 8px;
  display:grid;place-items:center;font-size:11px;font-weight:800;
  background:rgba(255,255,255,.12);color:#aab3c6;
  position:relative;z-index:1;
}
.step.done .dot{background:var(--green);color:#052e1a}
.step.active .dot{background:var(--yellow);color:var(--navy);box-shadow:0 0 0 5px rgba(255,210,28,.18)}
.step::before{
  content:"";position:absolute;top:11px;left:0;right:50%;height:2px;background:rgba(255,255,255,.12);
}
.step::after{
  content:"";position:absolute;top:11px;left:50%;right:0;height:2px;background:rgba(255,255,255,.12);
}
.step:first-child::before,.step:last-child::after{display:none}
.step.done::before,.step.done::after,.step.active::before{background:var(--green)}
.step span{display:block;font-size:10px;color:#8b96ad;font-weight:600;line-height:1.3}
.step.done span,.step.active span{color:#dfe4ee}

/* History */
.history-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-xs)}
.history-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.history-title h2{margin:0;font:700 19px var(--display)}
.history-title .muted{font-size:12.5px;color:var(--muted)}
.history-order{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:15px 0;border-top:1px solid var(--line-2);
}
.history-order:first-child{border-top:0}
.history-order strong{display:block;font-size:14.5px}
.history-meta{color:var(--muted);font-size:12px;margin-top:5px;line-height:1.6;word-break:break-all}
.history-price{font-weight:800;white-space:nowrap;font-size:14.5px}

.status-pill{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:5px 10px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:#f0f2f7;color:#5b6478;
}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status-pill.fulfilled{background:var(--green-soft);color:#0a7a47}
.status-pill.processing,.status-pill.paid{background:#fff6d9;color:#8a6400}
.status-pill.pending{background:#eef2fb;color:#3b5aa8}
.status-pill.delivery_failed,.status-pill.refunded,.status-pill.delivery_review{background:#fdecea;color:#b3261e}
.status-pill.refunding{background:#fff1e6;color:#a1521a}

.back-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-weight:700;font-size:14px;color:var(--navy);
  min-height:48px;padding:0 18px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);
}

.helper-note{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-md);
  background:#fff;border:1px dashed var(--line);
  color:var(--muted);font-size:12.5px;line-height:1.7;
}

@media (min-width:600px){
  .track-main{padding:36px 0 70px}
  .lookup-card{padding:22px}
  .lookup-form{grid-template-columns:1.1fr 1fr auto}
  .lookup-form button{padding:0 24px;white-space:nowrap}
  .status-card{padding:26px}
  .history-card{padding:22px}
}