/* Path: dr_ayoade/assets/css/track-order.css */

.trackHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.trackPill{
  padding:10px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.trackPill.is-cancelled{ border-color: rgba(255, 80, 80, .35); }

.trackSteps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:10px;
}
.trackStep{
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:10px;
  align-items:center;
}
.trackStep .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  flex:0 0 auto;
}
.trackStep .label{ font-size:13px; font-weight:600; opacity:.9; }

.trackStep.is-done{ border-color: rgba(152, 255, 167, .25); }
.trackStep.is-done .dot{ background: rgba(152, 255, 167, .85); }

.trackStep.is-current{ border-color: rgba(255, 214, 107, .35); }
.trackStep.is-current .dot{ background: rgba(255, 214, 107, .95); }

.trackStep.is-upcoming{ opacity:.75; }

.trackGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.trackBox{
  padding:14px;
  border-radius:14px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
}
.trackBox .k{ font-size:12px; opacity:.75; margin-bottom:6px; }
.trackBox .v{ font-size:14px; font-weight:600; }

.trackNote{
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

@media (max-width: 820px){
  .trackSteps{ grid-template-columns:repeat(2,1fr); }
  .trackGrid{ grid-template-columns:1fr; }
}