.site-header .nav-links a.active{ opacity:1; color: var(--orange); }

.track-status-badge{ display:inline-block; font-size:13px; font-weight:700; padding:5px 14px; border-radius:999px; }
.status-Pending-Confirmation{ background:rgba(255,255,255,0.08); color:var(--text-dimmer); }
.status-Order-Confirmed{ background:rgba(201,162,39,0.18); color:#C9A227; }
.status-Order-Delayed{ background:rgba(224,105,111,0.18); color:#e0696f; }
.status-Delivered{ background:rgba(58,157,108,0.2); color:#3A9D6C; }
.status-Order-Cancelled{ background:rgba(224,105,111,0.15); color:#e0696f; }
.status-Refunded{ background:rgba(255,255,255,0.08); color:var(--text-dimmer); }

.track-section{ max-width: 820px; }

.track-search{ display:flex; gap:12px; max-width:640px; margin: 0 auto 44px; flex-wrap:wrap; }
.track-search-input{
  flex:1; min-width:220px; display:flex; align-items:center; gap:10px;
  background: var(--panel); border:1px solid var(--border); border-radius:999px;
  padding: 14px 20px; color: var(--text-dim);
}
.track-search-input input{
  flex:1; background:none; border:none; outline:none; color:var(--text); font-size:15px; font-family:inherit;
}
.track-search-input input::placeholder{ color: var(--text-dimmer); }
.track-search-input svg{ flex-shrink:0; }

.order-card{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px 28px; margin-bottom: 34px;
}
.order-card-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.order-card-row + .order-card-row{ margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.order-field span{ display:block; font-size:11.5px; letter-spacing:1px; color: var(--text-dimmer); font-weight:700; margin-bottom:6px; }
.order-field strong{ font-size:16px; }
.order-field.right{ text-align:right; }

.progress-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:14px; color:var(--text-dim); }
.progress-head .step-count{ color: var(--orange); font-weight:700; }
.progress-track{ height:6px; border-radius:999px; background: var(--panel-2); overflow:hidden; margin-bottom: 40px; }
.progress-fill{ height:100%; background: linear-gradient(90deg, var(--orange), var(--orange-2)); border-radius:999px; transition: width .4s ease; }

.timeline{ position:relative; padding-left: 46px; }
.timeline-item{ position:relative; padding-bottom: 34px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:-30px; top:32px; bottom:-2px; width:2px;
  background: var(--orange);
}
.timeline-item:last-child::before{ display:none; }
.timeline-item.pending::before{ background: var(--border); }

.timeline-dot{
  position:absolute; left:-46px; top:0;
  width:32px; height:32px; border-radius:50%;
  background: var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  border: 3px solid var(--navy);
}
.timeline-item.pending .timeline-dot{ background: var(--panel-2); color: var(--text-dimmer); border-color: var(--navy); }

.timeline-title-row{ display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.timeline-title-row h4{ font-size:17px; }
.status-pill{ font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; }
.status-pill.completed{ background: rgba(var(--brand-accent-rgb),0.18); color: var(--orange); }
.status-pill.pending{ background: rgba(255,255,255,0.06); color: var(--text-dimmer); }

.timeline-desc{ color: var(--text-dim); font-size:14.5px; margin-bottom:10px; }
.timeline-loc{ display:flex; align-items:center; gap:6px; font-size:13px; color: var(--text-dimmer); margin-bottom:12px; }
.timeline-note{
  background: var(--panel-2); border:1px solid var(--border); border-radius:10px;
  padding: 12px 16px; font-size:13.5px; color: var(--text-dim); margin-bottom:10px;
}
.timeline-updated{ display:flex; align-items:center; gap:6px; font-size:12.5px; color: var(--text-dimmer); }

.delivered-banner{
  display:flex; align-items:flex-start; gap:14px;
  background: rgba(var(--brand-accent-rgb),0.1); border:1px solid rgba(var(--brand-accent-rgb),0.3);
  border-radius: var(--radius); padding: 22px 26px; margin-top: 30px;
}
.delivered-banner .check{
  width:36px; height:36px; border-radius:50%; background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px;
}
.delivered-banner h4{ font-size:16.5px; margin-bottom:4px; }
.delivered-banner p{ color: var(--text-dim); font-size:14.5px; }

.not-found{ text-align:center; color: var(--text-dim); padding: 40px 20px; background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); }
.not-found strong{ display:block; color: var(--text); font-size:17px; margin-bottom:8px; }

.back-home-wrap{ text-align:center; margin-top: 40px; }
.back-home-link{ color: var(--orange); font-weight:600; font-size:14.5px; }

@media (max-width: 640px){
  .order-card-row{ grid-template-columns:1fr; gap:16px; }
  .order-field.right{ text-align:left; }
  .timeline{ padding-left: 40px; }
  .timeline-dot{ left:-40px; width:28px; height:28px; }
  .timeline-item::before{ left:-27px; }
}