/**
 * Velonix Labs — Order Tracking (page-specific)
 * Enqueued only on the Order Tracking page template (see inc/enqueue.php).
 *
 * COMPLETE REBUILD — this file replaces the previous .track-card /
 * .track-form-row / .track-results-card rule set entirely, not an
 * iteration of it. New class namespace: .tracking-*.
 *
 * .tracking-card is the shell — background/border language borrowed
 * from .trust-card (components.css), radius from var(--radius-lg) (the
 * token itself documented sitewide as "large feature panels only" —
 * exactly what this card is meant to be: the page's one visual focal
 * point). Each card opens with a .tracking-card-head: a title + short
 * supporting line, using .coa-title/.coa-sub verbatim — the same
 * "card heading + one-line description" pattern already used inside
 * the Certificate of Analysis card (front-page.php, page-about.php) —
 * separated from the fields/details below by a bottom border. The
 * results card reuses the exact same head treatment for its order
 * reference + status row, so both cards share one visual language.
 *
 * .field-label / .field-input / .hero / .hero-h / .lead / .btn /
 * .coa-title / .coa-sub are NOT redefined here — shared components
 * from components.css, reused as-is.
 *
 * Hero centring previously lived here as page-specific
 * .tracking-hero-intro rules — removed. Centring now comes from the
 * Utility Layout (body.layout-utility, applied automatically by
 * template — see inc/theme-setup.php), not from anything in this file
 * or a class added to the hero markup itself.
 */

/* .hero-tracking: this page's hero keeps its own unique inline desktop
   padding (96px 0 32px, already deliberately tighter than the shared
   .hero-compact value — tuned in an earlier pass so the hero sits
   close to the tracking card) — untouched here. Inline styles can't
   respond to a media query regardless of specificity, so the mobile
   override below uses !important specifically to beat that one inline
   declaration; external !important is the one case that legitimately
   overrides a plain (non-!important) inline style in the cascade. */
@media (max-width:767px){
  .hero-tracking{ padding:40px 0 24px !important; }
}

.tracking-card{
  max-width:520px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:44px;
}
.tracking-card + .tracking-card{ margin-top:32px; }

.tracking-card-head{
  margin-bottom:28px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.tracking-card-head .coa-sub{ margin-bottom:0; }

.tracking-card-head--results{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

.tracking-field{ margin-bottom:24px; }
.tracking-field:last-of-type{ margin-bottom:0; }

.tracking-submit{ margin-top:36px; }
.tracking-submit .btn{ width:100%; }

.tracking-error{ font-size:13px; color:#E0857D; margin-top:16px; }

.tracking-order-ref{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); }
.tracking-order-ref strong{ color:var(--ink); font-weight:500; }
.tracking-badge{
  display:inline-flex; align-items:center;
  background:var(--accent-tint); color:var(--accent);
  border:1px solid rgba(91,132,224,0.3); border-radius:20px;
  padding:5px 14px; font-size:12px; font-weight:600; letter-spacing:0.01em;
}

.tracking-detail-rows{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; margin-bottom:28px; }
.tracking-detail-row .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin-bottom:6px; }
.tracking-detail-row .value{ font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--ink); }

.tracking-pending p{ font-size:var(--text-body-sm); color:var(--ink-soft); line-height:1.7; margin-bottom:8px; text-align:center; }
.tracking-pending p:last-child{ margin-bottom:0; }

@media (max-width: 700px){
  .tracking-card{ padding:28px 22px; }
  .tracking-detail-rows{ grid-template-columns:1fr; }
}