/* ============================================================================
   TRACK YOUR ORDER
   Loaded only on /track-order/. Enqueued from functions.php behind
   lsfab_is_page( 'track-order' ), the same way vin-decoder.css is.

   The tool sits inside a Divi code module, so every type property Divi
   contests is restated at weight (Divi emits per-module type with !important
   and puts padding-bottom: 1em on every <p>). Everything else is token-driven
   from style.css. The .trk-* vocabulary is used nowhere else.

   Spacing rhythm:
     card padding          --ls-space-5 (24px), --ls-space-6 (32px) >= 980px
     gap between blocks    --ls-space-5 (24px)
     label -> input        --ls-space-2 (8px)
     input row -> help     --ls-space-3 (12px)

   Every control is at least 48px tall (--ls-btn-h), which clears the 44px
   minimum the Sep 2026 tap-target pass set for the site.
   ========================================================================= */

.trk {
    font-family: var(--ls-font-body);
    color: var(--ls-text-muted);
    margin: 0 auto;
}

.trk *,
.trk *::before,
.trk *::after {
    box-sizing: border-box;
}

.trk p,
.trk ul,
.trk ol,
.trk dl,
.trk dd {
    padding: 0 !important;
}

.trk ul,
.trk ol {
    list-style: none;
    margin: 0;
}

/* ----------------------------------------------------------------------------
   1. LOOKUP FORM
   ------------------------------------------------------------------------- */

.trk-form {
    background: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-lg);
    padding: var(--ls-space-5);
    margin: 0;
}

@media (min-width: 980px) {
    .trk-form {
        padding: var(--ls-space-6);
    }
}

.trk-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ls-space-4);
    align-items: end;
}

@media (min-width: 720px) {
    .trk-form__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    }
}

.trk-field {
    min-width: 0;
}

.trk .trk-field__label {
    display: block;
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-small) !important;
    font-weight: 700 !important;
    letter-spacing: var(--ls-tracking-eyebrow) !important;
    text-transform: uppercase;
    line-height: var(--ls-leading-snug) !important;
    color: var(--ls-text-soft) !important;
    margin: 0 0 var(--ls-space-2) !important;
}

.trk .trk-field__input {
    width: 100%;
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-body) !important;
    font-weight: 400 !important;
    color: var(--ls-text) !important;
    background: var(--ls-surface-2) !important;
    border: 1px solid var(--ls-hairline-input) !important;
    border-radius: var(--ls-radius-md) !important;
    min-height: var(--ls-btn-h) !important;
    height: var(--ls-btn-h) !important;
    padding: 0 var(--ls-control-pad-x) !important;
    margin: 0 !important;
    transition: border-color var(--ls-transition), box-shadow var(--ls-transition);
}

.trk .trk-field__input--num {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
}

.trk .trk-field__input::placeholder {
    color: var(--ls-text-ghost);
    font-weight: 400;
    letter-spacing: 0;
}

.trk .trk-field__input:focus {
    outline: 0;
    border-color: var(--ls-red) !important;
    box-shadow: var(--ls-focus-ring);
}

.trk-field--submit {
    display: flex;
}

.trk .trk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ls-btn-h);
    padding: 0 var(--ls-btn-pad-x);
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-btn-font) !important;
    font-weight: 700 !important;
    letter-spacing: var(--ls-tracking-button) !important;
    line-height: var(--ls-leading-snug) !important;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff !important;
    background: var(--ls-red-btn) !important;
    border: 1px solid var(--ls-red-btn) !important;
    border-radius: var(--ls-radius-md);
    cursor: pointer;
    transition: background var(--ls-transition), border-color var(--ls-transition);
}

.trk .trk-btn:hover,
.trk .trk-btn:focus-visible {
    background: var(--ls-red-btn-hover) !important;
    border-color: var(--ls-red-btn-hover) !important;
}

.trk .trk-btn:focus-visible {
    outline: 0;
    box-shadow: var(--ls-focus-ring);
}

@media (min-width: 720px) {
    .trk .trk-btn {
        width: auto;
    }
}

.trk .trk-form__help {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-body) !important;
    color: var(--ls-text-soft) !important;
    margin: var(--ls-space-3) 0 0 !important;
    max-width: var(--ls-measure);
}

.trk .trk-hash {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color: var(--ls-text);
}

/* ----------------------------------------------------------------------------
   2. NOTICES
   ------------------------------------------------------------------------- */

.trk-notice {
    background: var(--ls-surface-3);
    border: 1px solid var(--ls-hairline-faint);
    border-left: 3px solid var(--ls-text-ghost);
    border-radius: var(--ls-radius-md);
    padding: var(--ls-space-4) var(--ls-space-5);
    margin: 0 0 var(--ls-space-5);
}

.trk-notice--stop {
    border-left-color: var(--ls-red);
}

.trk-notice--wait {
    border-left-color: var(--ls-amber);
}

.trk .trk-notice__title {
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-h4) !important;
    font-weight: 700 !important;
    line-height: var(--ls-leading-h4) !important;
    color: var(--ls-text) !important;
    margin: 0 0 var(--ls-space-2);
}

.trk .trk-notice__body {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-body) !important;
    color: var(--ls-text-muted) !important;
    margin: 0 !important;
    max-width: var(--ls-measure);
}

.trk .trk-notice__body a,
.trk .trk-help a,
.trk .trk-again a {
    color: var(--ls-text) !important;
    text-decoration: underline;
    text-decoration-color: var(--ls-red);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.trk .trk-notice__body a:hover,
.trk .trk-help a:hover,
.trk .trk-again a:hover {
    color: var(--ls-red) !important;
}

/* ----------------------------------------------------------------------------
   3. RESULT — STATUS HEAD
   ------------------------------------------------------------------------- */

.trk-result {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-5);
}

.trk-status {
    background: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline-faint);
    border-top: 3px solid var(--ls-green);
    border-radius: var(--ls-radius-lg);
    padding: var(--ls-space-5);
}

@media (min-width: 980px) {
    .trk-status {
        padding: var(--ls-space-6);
    }
}

.trk-status--wait {
    border-top-color: var(--ls-amber);
}

.trk-status--stop {
    border-top-color: var(--ls-red);
}

.trk .trk-status__eyebrow {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
    font-size: var(--ls-micro) !important;
    font-weight: 600 !important;
    letter-spacing: var(--ls-tracking-eyebrow) !important;
    text-transform: uppercase;
    color: var(--ls-text-faint) !important;
    margin: 0 0 var(--ls-space-2);
}

.trk .trk-status__head {
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-h2) !important;
    font-weight: 700 !important;
    line-height: var(--ls-leading-tight) !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--ls-text) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.trk .trk-status__line {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-lede) !important;
    line-height: var(--ls-leading-body) !important;
    color: var(--ls-text-muted) !important;
    margin: var(--ls-space-3) 0 0 !important;
    max-width: var(--ls-measure);
}

/* ----------------------------------------------------------------------------
   4. PROGRESS RAIL
   Three steps. The connecting line is a ::before on each step after the
   first, so the rail cannot desync from the number of steps.
   ------------------------------------------------------------------------- */

.trk-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 !important;
}

.trk-rail__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ls-space-2);
    text-align: center;
    padding: 0 var(--ls-space-1);
}

.trk-rail__step::before {
    content: "";
    position: absolute;
    top: 7px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--ls-hairline);
}

.trk-rail__step:first-child::before {
    display: none;
}

.trk-rail__step.is-done::before,
.trk-rail__step.is-now::before {
    background: var(--ls-green);
}

.trk-rail__dot {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: var(--ls-radius-pill);
    background: var(--ls-surface-2);
    border: 2px solid var(--ls-hairline-strong);
}

.trk-rail__step.is-done .trk-rail__dot {
    background: var(--ls-green);
    border-color: var(--ls-green);
}

.trk-rail__step.is-now .trk-rail__dot {
    background: var(--ls-surface-1);
    border-color: var(--ls-green);
    box-shadow: 0 0 0 4px rgba(5, 157, 88, 0.22);
}

.trk .trk-rail__label {
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-h6) !important;
    font-weight: 600 !important;
    letter-spacing: var(--ls-tracking-caps) !important;
    line-height: var(--ls-leading-snug) !important;
    text-transform: uppercase;
    color: var(--ls-text-faint) !important;
}

.trk-rail__step.is-done .trk-rail__label,
.trk-rail__step.is-now .trk-rail__label {
    color: var(--ls-text) !important;
}

/* ----------------------------------------------------------------------------
   5. PACKAGES
   ------------------------------------------------------------------------- */

.trk .trk-h {
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-h3) !important;
    font-weight: 700 !important;
    line-height: var(--ls-leading-h3) !important;
    text-transform: uppercase;
    color: var(--ls-text) !important;
    margin: var(--ls-space-2) 0 0 !important;
    padding: 0 !important;
}

.trk-packs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ls-space-4);
}

@media (min-width: 860px) {
    .trk-packs {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

.trk-pack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ls-space-3);
    background: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-lg);
    padding: var(--ls-space-5);
}

.trk-pack__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-2) var(--ls-space-3);
    align-items: baseline;
}

.trk .trk-pack__n,
.trk .trk-pack__carrier,
.trk .trk-pack__date {
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-micro) !important;
    font-weight: 700 !important;
    letter-spacing: var(--ls-tracking-eyebrow) !important;
    line-height: var(--ls-leading-snug) !important;
    text-transform: uppercase;
}

.trk .trk-pack__n {
    color: var(--ls-red) !important;
}

.trk .trk-pack__carrier {
    color: var(--ls-text) !important;
}

.trk .trk-pack__date {
    color: var(--ls-text-faint) !important;
    font-weight: 600 !important;
}

.trk .trk-pack__number {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    line-height: var(--ls-leading-snug) !important;
    color: var(--ls-text) !important;
    word-break: break-all;
    margin: 0 !important;
}

.trk .trk-pack__lines {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-1);
    margin: 0 !important;
}

.trk .trk-pack__lines li,
.trk .trk-waiting li {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-small) !important;
    color: var(--ls-text-muted) !important;
    margin: 0 !important;
}

.trk .trk-btn--pack {
    width: 100%;
    margin-top: var(--ls-space-1);
}

@media (min-width: 720px) {
    .trk .trk-btn--pack {
        width: auto;
    }
}

/* ----------------------------------------------------------------------------
   6. STILL WITH US
   ------------------------------------------------------------------------- */

.trk ul.trk-waiting {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-2);
    background: var(--ls-surface-3);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-lg);
    padding: var(--ls-space-5) !important;
    margin: 0 !important;
}

/* ----------------------------------------------------------------------------
   7. ORDER FACTS
   ------------------------------------------------------------------------- */

.trk-facts {
    display: grid;
    grid-template-columns: 1fr;
    /* The 1px gap IS the rule between rows, so it uses the visible hairline
       rather than the faint one the card borders use -- at 390px the rows
       stack and a 0.08 line between them disappears. */
    gap: 1px;
    background: var(--ls-hairline);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-lg);
    overflow: hidden;
    margin: 0 !important;
}

@media (min-width: 720px) {
    .trk-facts {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trk-facts__row {
    background: var(--ls-surface-1);
    padding: var(--ls-space-4) var(--ls-space-5);
}

.trk .trk-facts dt {
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-micro) !important;
    font-weight: 700 !important;
    letter-spacing: var(--ls-tracking-eyebrow) !important;
    line-height: var(--ls-leading-snug) !important;
    text-transform: uppercase;
    color: var(--ls-text-faint) !important;
    margin: 0 !important;
}

.trk .trk-facts dd {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-body) !important;
    font-weight: 500 !important;
    line-height: var(--ls-leading-small) !important;
    color: var(--ls-text) !important;
    margin: var(--ls-space-1) 0 0 !important;
}

.trk .trk-facts dd .amount,
.trk .trk-facts dd bdi {
    color: var(--ls-text) !important;
}

/* ----------------------------------------------------------------------------
   8. FOOT
   ------------------------------------------------------------------------- */

.trk .trk-help,
.trk .trk-again {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-body) !important;
    color: var(--ls-text-soft) !important;
    margin: 0 !important;
    max-width: var(--ls-measure);
}

.trk .trk-again a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}