/* ============================================================================
   track-parcel.css — page-scoped styles for modules/shipping/pages/track-parcel.html
   ----------------------------------------------------------------------------
   .tp-steps replaces the shared .steps/.step for the "เส้นทางพัสดุ 5 ขั้น" block.
   Why a dedicated class: the shared component (layout.css) is broken for a light card —
   .steps has no display:grid (steps stacked vertically), .step span{color:#fff} made the
   descriptions invisible, and .step-ic{margin:0 auto} misplaced the icon in the flex row.
   This file is loaded ONLY by track-parcel.html and touches no shared CSS, so no other
   page is affected. Central file (no inline).
   ============================================================================ */

.tp-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
@media (min-width: 600px) {
  .tp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.tp-step {
  position: relative;
  background: #FAFBFC;
  border: 1px solid #E7E9EE;
  border-radius: 14px;
  padding: 18px 12px 14px;
  text-align: center;
}

.tp-step .n {
  position: absolute; top: 8px; left: 11px;
  font-family: var(--font-numeric, 'Space Grotesk', sans-serif);
  font-size: 10px; font-weight: 600; color: var(--color-muted, #9aa2ad);
}

.tp-step .tp-ic {
  width: 46px; height: 46px; margin: 2px auto 10px;
  border-radius: 14px; display: grid; place-items: center;
  background: var(--color-primary-soft, #FFF1E8); color: var(--color-primary, #EF5F06);
}
.tp-step .tp-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tp-step b {
  display: block; font-family: var(--font-display, 'Mitr', sans-serif);
  font-weight: 600; font-size: 13.5px; line-height: 1.3;
  color: var(--color-text, #23201c); margin-bottom: 3px;
}
.tp-step span {
  display: block; font-size: 11.5px; line-height: 1.45;
  color: var(--color-text-soft, #6E5C4C);
}