/* ===========================================================
   FASTLANE LOGISTICS — waybill tracker
   Extends style.css tokens (--bg, --accent, --highlight, --ink, --panel, --panel-line)
   Load this AFTER style.css
=========================================================== */

.tracker-section{ padding-top:0; }

/* ---------- Search bar ---------- */
.tracker-form{
  max-width:640px;
  margin:0 auto 3.2rem;
}
.tracker-input-wrap{
  display:flex;
  align-items:stretch;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tracker-input-wrap:focus-within{
  border-color:var(--highlight);
  box-shadow:0 0 0 3px rgba(56,182,255,.15);
}
.tracker-hash{
  display:flex; align-items:center;
  padding:0 0 0 1.1rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.95rem;
  color:var(--highlight);
  letter-spacing:.05em;
}
.tracker-input{
  flex:1;
  background:transparent;
  border:0;
  padding:1.05rem .8rem;
  color:var(--ink);
  font-family:'JetBrains Mono', monospace;
  font-size:1rem;
  letter-spacing:.03em;
}
.tracker-input:focus{ outline:none; }
.tracker-input::placeholder{ color:#5b6472; }

.tracker-btn{
  border-radius:0;
  padding:0 1.8rem;
  position:relative;
  gap:.6rem;
}
.tracker-btn .btn-spinner{
  display:none;
  animation:spin .8s linear infinite;
}
.tracker-btn.is-loading .btn-label{ opacity:0; }
.tracker-btn.is-loading .btn-spinner{
  display:block;
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.tracker-hint{
  margin-top:.85rem;
  text-align:center;
  font-size:.8rem;
  color:#6b7383;
}
.tracker-hint b{ color:#9aa3b1; }

/* ---------- States ---------- */
.tracker-state{ text-align:center; }

#stateIdle{
  padding:3.2rem 1rem;
  color:#6b7383;
}
.idle-illustration{
  width:120px; height:80px;
  margin:0 auto 1.4rem;
  color:#3a4150;
}
#stateIdle p{ max-width:38ch; margin:0 auto; font-size:.93rem; }

#stateLoading{ padding:3.6rem 1rem; color:#9aa3b1; }
.small-rail{
  width:220px; margin:0 auto 1.4rem;
  background:none;
}
.small-rail .van{ animation-duration:1.6s; }

#stateError{
  padding:2.6rem 1rem;
  max-width:46ch; margin:0 auto;
}
.error-icon{
  width:34px; height:34px;
  color:#ff6b6b;
  margin-bottom:1rem;
}
#stateError p{ color:#aab3c2; font-size:.95rem; }

/* ---------- Result ---------- */
.tracker-result{ text-align:left; }

.result-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  padding-bottom:1.8rem;
  border-bottom:1px solid var(--panel-line);
  margin-bottom:2.4rem;
}
.result-top h2{
  font-size:1.7rem;
  font-family:'JetBrains Mono', monospace;
  letter-spacing:.02em;
  text-transform:none;
}

.status-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem 1.1rem;
  border-radius:100px;
  border:1px solid var(--panel-line);
  background:#0c0f15;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.status-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--highlight);
  box-shadow:0 0 0 3px rgba(56,182,255,.18);
}
.status-pending .status-dot{ background:#8b94a3; box-shadow:0 0 0 3px rgba(139,148,163,.18); }
.status-picked-up .status-dot{ background:var(--accent); box-shadow:0 0 0 3px rgba(0,102,255,.18); }
.status-in-transit .status-dot{ background:var(--highlight); box-shadow:0 0 0 3px rgba(56,182,255,.18); }
.status-out-for-delivery .status-dot{ background:var(--highlight); box-shadow:0 0 0 3px rgba(56,182,255,.18); animation:pulse 1.4s ease-in-out infinite; }
.status-delivered{ border-color:rgba(56,182,255,.4); }
.status-delivered .status-dot{ background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.18); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* Progress route */
.progress-route{
  margin:0 0 3.4rem;
  padding:0 4px;
}
.progress-track{
  position:relative;
  height:2px;
  background:var(--panel-line);
  border-radius:2px;
  margin-bottom:1.6rem;
}
.progress-fill{
  position:absolute; left:0; top:0; height:100%;
  background:linear-gradient(90deg, var(--accent), var(--highlight));
  border-radius:2px;
  width:0%;
  transition:width .6s ease;
}
.progress-van{
  position:absolute;
  top:50%; left:0%;
  width:22px; height:22px;
  transform:translate(-50%,-50%);
  color:var(--highlight);
  background:var(--bg);
  border-radius:50%;
  padding:2px;
  transition:left .6s ease;
}
.progress-steps{
  position:relative;
  height:44px;
}
.progress-step{
  position:absolute; top:0;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:.5rem;
  width:120px;
}
.step-dot{
  width:9px; height:9px; border-radius:50%;
  background:#3a4150;
}
.progress-step.reached .step-dot{ background:var(--highlight); }
.step-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#6b7383;
  text-align:center;
}
.progress-step.reached .step-label{ color:#9aa3b1; }
.progress-step.current .step-label{ color:#fff; font-weight:600; }

@media (max-width:700px){
  .progress-steps{ height:auto; }
  .progress-step{ width:64px; }
  .step-label{ font-size:.6rem; }
}

/* Detail grid */
.result-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  margin-bottom:2rem;
}
.result-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:8px;
  padding:1.2rem 1.4rem;
}
.result-card h4{
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--highlight);
  margin-bottom:.5rem;
}
.result-card p{
  font-size:.92rem;
  color:var(--ink);
}

.result-notes{
  background:#0c0f15;
  border:1px solid var(--panel-line);
  border-left:2px solid var(--highlight);
  border-radius:6px;
  padding:1rem 1.3rem;
  margin-bottom:2.6rem;
}
.result-notes h4{
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--highlight);
  margin-bottom:.4rem;
}
.result-notes p{ font-size:.9rem; color:#aab3c2; }

/* History */
.history-block h3{
  font-size:1.05rem;
  text-transform:none;
  color:#fff;
  margin-bottom:1.4rem;
}
.history-list{
  list-style:none;
  position:relative;
  padding-left:1.6rem;
}
.history-list::before{
  content:"";
  position:absolute; left:5px; top:6px; bottom:6px;
  width:1px;
  background:var(--panel-line);
}
.history-item{
  position:relative;
  padding-bottom:1.5rem;
}
.history-item:last-child{ padding-bottom:0; }
.history-dot{
  position:absolute; left:-1.6rem; top:5px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg);
  border:2px solid #3a4150;
}
.history-item.latest .history-dot{
  border-color:var(--highlight);
  background:var(--highlight);
  box-shadow:0 0 0 4px rgba(56,182,255,.15);
}
.history-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin-bottom:.25rem;
}
.history-row b{
  font-size:.94rem;
  color:#fff;
  font-weight:600;
}
.history-row time{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  color:#6b7383;
}
.history-item p{
  font-size:.87rem;
  color:#9aa3b1;
}

.live-tag{
  display:flex; align-items:center; gap:.55rem;
  margin-top:2.4rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  color:#6b7383;
  letter-spacing:.04em;
}
.live-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--highlight);
  animation:pulse 1.6s ease-in-out infinite;
}

@media (max-width:700px){
  .result-grid{ grid-template-columns:1fr 1fr; }
  .result-top h2{ font-size:1.3rem; word-break:break-all; }
}
@media (max-width:480px){
  .result-grid{ grid-template-columns:1fr; }
  .tracker-hash{ padding-left:.8rem; font-size:.85rem; }
  .tracker-input{ padding:.9rem .6rem; font-size:.9rem; }
  .tracker-btn{ padding:0 1.2rem; }
}

@media (prefers-reduced-motion: reduce){
  .status-out-for-delivery .status-dot,
  .live-dot{ animation:none; }
}