/* ════════════════════════════════════════════════════════════════════
   Phase T.8 — /track-order page-specific Picsin Teal overrides
   ════════════════════════════════════════════════════════════════════
   Page-specific override sheet for the public order-tracking page.
   Loaded AFTER picsin-teal.css (which is loaded after atelier-track-order.css),
   so anything here wins the cascade.

   Hard rules:
   - DO NOT edit atelier-track-order.css.
   - DO NOT touch atelier-storefront.css (.sp-* atoms — global).
   - DO NOT touch the main DB::selectOne lookup query in TrackOrderController
     (sales + courier_details + payment_details JOIN).
   - DO NOT touch the match (true) step calculation.
   - DO NOT touch routes/web.php.
   - All teal CTAs use !important on color/background.
   - Append-only — future T.8 polish lands at the bottom of this file.
   ──────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   T.8.1 — Page title + eyebrow + sub
   ════════════════════════════════════════════════════════════════════
   atelier-track-order.css line 16-20 ships .to-title as italic serif
   52px weight 400. Force semibold non-italic slate at 32px (matches
   the cart/shipping/payment/thank-you pattern).
   ──────────────────────────────────────────────────────────────────── */
.to-title {
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 1.15 !important;
    color: var(--pt-slate) !important;
    letter-spacing: -0.005em !important;
}
.to-eyebrow {
    color: var(--pt-ink-3) !important;
    letter-spacing: .12em !important;
    font-weight: 700 !important;
}
.to-sub {
    color: var(--pt-ink-2) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.2 — Form card chrome + input + focus halo
   ════════════════════════════════════════════════════════════════════
   atelier-track-order.css line 39 hardcodes rgba(122,90,52,.12) umber
   focus halo on the Order ID input. Force teal halo + slate-rule border.
   ──────────────────────────────────────────────────────────────────── */
.to-form-card {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}
.to-form input[type="text"] {
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius) !important;
    color: var(--pt-slate) !important;
    background: #FFFFFF !important;
    font-weight: 600 !important;
    transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.to-form input[type="text"]:hover {
    border-color: var(--pt-rule-strong) !important;
}
.to-form input[type="text"]:focus {
    border-color: var(--pt-teal) !important;
    box-shadow: 0 0 0 3px rgba(27, 156, 133, 0.14) !important;
}
.to-form input[type="text"]::placeholder {
    color: var(--pt-ink-3) !important;
    font-weight: 500 !important;
}
.to-form-error {
    color: var(--pt-danger) !important;
    font-weight: 500 !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.3 — Search button (.sp-btn-primary scoped to track-order page)
   ════════════════════════════════════════════════════════════════════
   .sp-btn-primary is the global storefront primary button atom. Picsin
   Teal global tokens may map it to teal already, but defending here
   ensures the Track Order CTA matches the cart/shipping/payment
   teal-at-rest aesthetic without depending on token order.
   ──────────────────────────────────────────────────────────────────── */
.to-page .sp-btn-primary,
.to-form-card .sp-btn-primary {
    background: var(--pt-teal) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--pt-teal) !important;
    border-radius: var(--pt-radius) !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}
.to-page .sp-btn-primary:hover,
.to-form-card .sp-btn-primary:hover {
    background: var(--pt-teal-700) !important;
    border-color: var(--pt-teal-700) !important;
    color: #FFFFFF !important;
}
.to-page .sp-btn-primary svg,
.to-form-card .sp-btn-primary svg {
    color: #FFFFFF !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.4 — Error notice (no order found)
   ════════════════════════════════════════════════════════════════════
   atelier-track-order.css line 53-54 ships #fbeae6 cream / #6e3424
   brown / #ecc6b8 border. Switch to red-tint danger.
   ──────────────────────────────────────────────────────────────────── */
.to-notice-err {
    background: rgba(192, 57, 43, 0.06) !important;
    color: #8a2317 !important;
    border: 1px solid rgba(192, 57, 43, 0.22) !important;
    border-left: 3px solid var(--pt-danger) !important;
    border-radius: var(--pt-radius) !important;
}
.to-notice-err svg {
    color: var(--pt-danger) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.5 — Result summary card chrome + 3-col headings
   ════════════════════════════════════════════════════════════════════
   White card + slate-rule border + soft shadow. Slate ink across
   col headings + body text + strong.
   ──────────────────────────────────────────────────────────────────── */
.to-summary {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}
.to-col h4 {
    color: var(--pt-ink-3) !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
}
.to-col p {
    color: var(--pt-ink-2) !important;
}
.to-col .to-strong {
    color: var(--pt-slate) !important;
    font-weight: 700 !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.6 — Status pills (4 variants)
   ════════════════════════════════════════════════════════════════════
   Source palette — all 4 hardcoded warm tans/yellows/blues/greens.
   Map to T.7.5 family:
     received    → slate-3 / slate band   (just placed, neutral)
     process     → amber / amber-tint     (in progress, needs patience)
     dispatched  → teal-700 / teal-tint   (good news, on the way)
     delivered   → success green / soft   (final / done)
   ──────────────────────────────────────────────────────────────────── */
.to-pill {
    border-radius: var(--pt-radius-pill) !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    border: 1px solid !important;
}
.to-pill-received {
    background: var(--pt-band) !important;
    color: var(--pt-slate) !important;
    border-color: var(--pt-rule-strong) !important;
}
.to-pill-process {
    background: rgba(217, 130, 43, 0.10) !important;
    color: #B45309 !important;
    border-color: rgba(217, 130, 43, 0.28) !important;
}
.to-pill-dispatched {
    background: var(--pt-teal-tint) !important;
    color: var(--pt-teal-700) !important;
    border-color: rgba(27, 156, 133, 0.28) !important;
}
.to-pill-delivered {
    background: rgba(46, 125, 95, 0.10) !important;
    color: #2E7D5F !important;
    border-color: rgba(46, 125, 95, 0.28) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.7 — Timeline + step icons (4 steps)
   ════════════════════════════════════════════════════════════════════
   Active uses --accent (teal-mapped — fine). Inactive hardcoded
   #e9e2d2 / #b8a988 taupe — switch to slate band on slate rule.
   Connecting line was --line (now slate rule via tokens — fine).
   Inactive label slate-3, active label slate semibold.
   ──────────────────────────────────────────────────────────────────── */
.to-timeline-card {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}
.to-timeline::before {
    background: var(--pt-rule-strong) !important;
}
.to-step-icon {
    background: var(--pt-band) !important;
    color: var(--pt-ink-3) !important;
    border-color: var(--pt-card) !important;
}
.to-step.is-active .to-step-icon {
    background: var(--pt-teal) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(27, 156, 133, 0.18) !important;
}
.to-step-label {
    color: var(--pt-ink-3) !important;
    font-weight: 500 !important;
}
.to-step.is-active .to-step-label {
    color: var(--pt-slate) !important;
    font-weight: 700 !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.8 — Glossary card
   ════════════════════════════════════════════════════════════════════
   White card + slate border + soft shadow. Slate ink across dt/dd.
   ──────────────────────────────────────────────────────────────────── */
.to-glossary {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}
.to-glossary h3 {
    color: var(--pt-ink-3) !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
}
.to-glossary dt {
    color: var(--pt-slate) !important;
    font-weight: 700 !important;
}
.to-glossary dd {
    color: var(--pt-ink-2) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.9 — NEW recap card (line items + totals)
   ════════════════════════════════════════════════════════════════════
   Per Naman 2026-05-01 Q3: "Status + Order Summary recap (matches T.7
   pattern)". Controller now passes $lineItems + $totals via the new
   buildTrackRecap() helper. Address is NOT re-fetched here — the
   .to-summary card's "Shipping to" col already covers it.

   Visual mirrors T.7.9 .atl-thanks-recap-* family but uses the
   .to-recap-* namespace to stay consistent with the .to-* page atoms.
   ──────────────────────────────────────────────────────────────────── */
.to-recap {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-sm) !important;
    padding: 28px !important;
    margin: 0 0 18px !important;
}
.to-recap-h {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--pt-slate) !important;
    margin: 0 0 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--pt-rule) !important;
}

/* Line items */
.to-recap-items {
    list-style: none !important;
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--pt-rule) !important;
}
.to-recap-items li {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    font-size: 13px !important;
    color: var(--pt-ink-2) !important;
}
.to-recap-items dt,
.to-recap-items dd {
    margin: 0 !important;
}
.to-recap-items dt {
    color: var(--pt-ink-2) !important;
}
.to-recap-items dd {
    color: var(--pt-slate) !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
}
.to-recap-itemmeta {
    display: block !important;
    color: var(--pt-ink-3) !important;
    font-size: 11px !important;
    margin-top: 2px !important;
    letter-spacing: .02em !important;
}

/* Totals */
.to-recap-totals {
    margin: 0 !important;
    padding: 0 !important;
}
.to-recap-totals-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    align-items: baseline !important;
}
.to-recap-totals-row dt,
.to-recap-totals-row dd {
    margin: 0 !important;
}
.to-recap-totals-row dt {
    color: var(--pt-ink-2) !important;
}
.to-recap-totals-row dd {
    color: var(--pt-slate) !important;
    font-variant-numeric: tabular-nums !important;
}
.to-recap-totals-row.is-discount dd {
    color: var(--pt-teal-700) !important;
    font-weight: 600 !important;
}
.to-recap-totals-row.is-total {
    border-top: 1px solid var(--pt-rule-strong) !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
}
.to-recap-totals-row.is-total dt {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--pt-slate) !important;
}
.to-recap-totals-row.is-total dd {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: var(--pt-slate) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.8.10 — Mobile breakpoint polish
   ════════════════════════════════════════════════════════════════════
   Existing @820px stacks 3-col grid + form column. Add recap padding +
   tighter title.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .to-title          { font-size: 26px !important; }
    .to-recap          { padding: 22px 20px !important; }
}