/* Safe N Save Logistics: Track a shipment page (track.html). Loaded after styles.css. */

/* The intro sentence runs on one line on computer screens (paragraphs are otherwise capped at 62 characters) */
.page-hero p.lede { max-width: none; }
/* --------------------------------------------------------------------------
   Track a Shipment (track.html)
   The result reads like a status slip: PB number, status in the display
   face, and a route line where finished stages turn route-green.
   -------------------------------------------------------------------------- */

.track-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* Before a search, the form and the status guide sit side by side as two boxes of the same height */
@media (min-width: 861px) {
  .track-grid:has(.track-card--intro) { align-items: stretch; }
  .track-grid:has(.track-card--intro) > div:first-child { display: flex; flex-direction: column; }
  .track-grid:has(.track-card--intro) .track-form { flex: 1; }
  .track-result:has(> .track-card--intro) { display: flex; flex-direction: column; }
  .track-result > .track-card--intro { flex: 1; }
}

@media (max-width: 860px) {
  .track-grid { grid-template-columns: minmax(0, 1fr); }
}

.track-form .btn { width: 100%; justify-content: center; }
.track-form .btn:disabled { opacity: 0.75; cursor: progress; }
.track-form .form-note a { color: var(--cargo-btn); font-weight: 600; white-space: nowrap; }

.track-result { min-width: 0; scroll-margin-top: 7.5rem; }

.track-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--route-deep);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.track-card--note { border-top-color: var(--cargo-btn); }
.track-card--intro {
  background: transparent;
  border-top-color: var(--line);
  padding-left: clamp(1.25rem, 2.2vw, 1.75rem);
  padding-right: clamp(1.25rem, 2.2vw, 1.75rem);
}

.track-intro__title {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  margin: 0 0 0.9rem;
}

/* Every status row, Delivered included, is the same height: the note below starts right at the next line */
.track-legend { margin: 0; font-size: 0.95rem; }
.track-legend > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.track-legend dt { font-weight: 600; color: var(--ink); }
.track-legend dd { margin: 0; color: #4b4f53; }
@media (max-width: 420px) {
  .track-legend > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

.track-card__pb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin: 0 0 0.25rem;
  font-variant-numeric: tabular-nums;
}

.track-card__status {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1.05;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}
.track-card__status--note { font-size: clamp(1.6rem, 3.6vw, 2.1rem); }
.track-card--delivered .track-card__status { color: var(--route-deep); }

.track-card__msg { margin: 0 0 1.75rem; color: #4b4f53; }
.track-card--note .track-card__msg { margin-bottom: 0; }

.track-card__updated {
  margin: 1.6rem 0 0;
  font-size: 0.92rem;
  color: #5f6468;
  font-variant-numeric: tabular-nums;
}

.track-card__alert {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  background: #fbf1e3;
  border-left: 3px solid var(--cargo);
  font-size: 0.92rem;
}

.track-card__help {
  margin: 0;
  max-width: none;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: #5f6468;
}
.track-card a { color: var(--cargo-btn); font-weight: 600; white-space: nowrap; }

/* Route line: one stop per stage */
.track-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.track-steps li {
  position: relative;
  padding-top: 1.7rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8b8f92;
  line-height: 1.25;
}
.track-steps li::before {            /* the stop */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--line);
  z-index: 1;
}
.track-steps li::after {             /* the road to the next stop */
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.track-steps li:last-child::after { display: none; }

.track-steps li.is-done,
.track-steps li.is-current { color: var(--ink); }
.track-steps li.is-done::before,
.track-steps li.is-current::before { background: var(--route-deep); }
.track-steps li.is-done::after { background: var(--route-deep); }
.track-steps li.is-current::before { box-shadow: 0 0 0 5px rgba(92, 119, 84, 0.22); }
.track-steps li.is-next { color: var(--ink); }
.track-steps li.is-next::before { background: var(--white); border: 2px solid var(--route-deep); }

/* Phones: the route runs top to bottom, like a delivery timeline */
@media (max-width: 480px) {
  .track-steps { grid-template-columns: minmax(0, 1fr); }
  .track-steps li {
    text-align: left;
    padding: 0 0 1.15rem 2rem;
    font-size: 0.95rem;
  }
  .track-steps li:last-child { padding-bottom: 0; }
  .track-steps li::before { top: 2px; left: 0; margin-left: 0; }
  .track-steps li::after { top: 18px; bottom: -2px; left: 7px; width: 2px; height: auto; }
  .track-card__msg { margin-bottom: 1.4rem; }
}