/* Tracking page specific styles (build on base.css) */
.tracking-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

/* Form */
.tracking-form .form-field { min-width: 260px; flex: 1; }
.form-error { color: var(--color-danger); margin-top: var(--space-2); }

/* Recap */
.recap { display: grid; gap: var(--space-2); }
.recap__row { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.recap__row:last-child { border-bottom: 0; }

/* Address */
.address p { margin: 4px 0; }

/* Progress */
.progress { position: relative; padding: var(--space-4) var(--space-2) var(--space-2); }
.progress__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); align-items: center; }
.progress__step { position: relative; text-align: center; }
.progress__dot { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: var(--gray-200); border: 2px solid var(--gray-300); box-shadow: var(--shadow-sm); transition: background var(--duration-base) var(--ease-in-out), border-color var(--duration-base) var(--ease-in-out), transform var(--duration-fast) var(--ease-out); }
.progress__label { display: block; font-size: var(--fs-sm); color: var(--gray-600); margin-top: var(--space-2); }
.progress__step.is-active .progress__dot { background: var(--color-primary); border-color: var(--color-primary); }
.progress__step.is-complete .progress__dot { background: var(--color-accent); border-color: var(--color-accent); }
.progress__step.is-active .progress__label { color: var(--color-text); font-weight: 700; }
.progress__step.is-complete .progress__label { color: var(--color-text); }
.progress__bar { position: absolute; left: 7%; right: 7%; top: 38px; height: 6px; border-radius: var(--radius-pill); background: var(--gray-200); overflow: hidden; }
.progress__bar::after { content: ""; display: block; height: 100%; width: var(--progress, 0%); background: linear-gradient(90deg, var(--color-teal), var(--color-magenta)); transition: width var(--duration-slow) var(--ease-out); }

/* Notify */
.notify-row { display: grid; gap: var(--space-2); align-content: start; }

/* Responsive tweaks */
@media (max-width: 640px) {
  .recap__row { grid-template-columns: 1fr; }
}