/* ============================================================================
   tracking.css  -  Application Tracker (site_files/help-track.asp)

   The heading, subtitle and search form pick up their look from the shared
   #help_form .help_form styling in site.css (70% wide grey card, green button,
   .help_form_field_half halves).  This file only styles the results section
   that renders after a successful lookup - scoped under .t-results so nothing
   leaks into the search form or any other help page.
============================================================================ */

/* ---- Track Application submit button — hover overrides ----------------- */
/* Scoped to this page's search form only; keeps site.css untouched.       */
#help_form .help_form button[type="submit"]:hover{background:#009a1c;text-decoration:none}

/* Application-Reference & Postcode inputs — auto-uppercase as the customer
   types.  Backend also normalises via normaliseOrderRef() / normalisePostcode(),
   so this is a display convenience.  Chained under #help_form to beat the
   site.css `#help_form .help_form .help_form_field input[type=text]` base
   rule's specificity, which was masking the bare `#t-postcode{}` selector. */
#help_form #t-ref,
#help_form #t-postcode{text-transform:uppercase}

.t-results{
    --t-card:#ffffff;
    --t-line:#f2f2f2;
    --t-ink:#1b2330;
    --t-muted:#637087;
    --t-accent:#2d6cdf;
    --t-accent-soft:rgba(45,108,223,.08);
    --t-ok:#16794f;
    --t-ok-soft:rgba(22,121,79,.10);
    --t-warn:#a36410;
    --t-warn-soft:rgba(163,100,16,.10);
    --t-bad:#a4252a;
    --t-bad-soft:rgba(164,37,42,.10);
    --t-info:#3c4a5c;
    --t-info-soft:rgba(60,74,92,.08);
    --t-green:#007e15;
    --t-radius:6px;
    color:var(--t-ink);
    text-align:left;
    max-width:1080px;
    margin:0 auto;
    padding:20px 0 40px;
}

/* ---- Customer summary card ----------------------------------------------- */
.t-results .t-summary{background:#F1F1F1;border:2px solid var(--t-line);border-radius:var(--t-radius);padding:22px;margin-bottom:22px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.t-results .t-summary .t-sum-id{display:flex;align-items:center;gap:14px}
.t-results .t-summary .t-sum-id i{font-size:22px;color:#ffffff;background:var(--t-green);width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;animation:tSumPulse 2.4s ease-in-out infinite}
.t-results .t-summary .t-sum-id .t-sum-icon-updating{display:none}
.t-results .t-summary .t-sum-id.updating .t-sum-icon-idle{display:none}
.t-results .t-summary .t-sum-id.updating .t-sum-icon-updating{display:inline-flex;animation:tSumPulse .9s ease-in-out infinite,tSumIconSpin .9s linear infinite}
@keyframes tSumPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,126,21,.55)}50%{box-shadow:0 0 0 10px rgba(0,126,21,0)}}
@keyframes tSumIconSpin{to{transform:rotate(360deg)}}
.t-results .t-summary .t-ref{font-size:24px;font-weight:700;letter-spacing:.02em}
.t-results .t-summary .t-ref small{display:block;color:var(--t-muted);font-size:14px;font-weight:normal;letter-spacing:.04em}
.t-results .t-summary .t-sum-meta{display:flex;flex-wrap:wrap;gap:18px 28px;margin-left:auto;font-size:14px;color:var(--t-muted)}
.t-results .t-summary .t-sum-meta div{display:flex;flex-direction:column}
.t-results .t-summary .t-sum-meta span{letter-spacing:.04em}
.t-results .t-summary .t-sum-meta b{color:var(--t-ink);font-weight:600;margin-top:2px;font-size:14px}

/* ---- Section heading ----------------------------------------------------- */
.t-results .t-section{margin:20px 0 7px;display:flex;align-items:baseline;gap:6px;color:var(--t-green)}
.t-results .t-section h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.005em;line-height:1;color:var(--t-green)}
.t-results .t-section i{color:var(--t-green);font-size:17px;line-height:1}

/* ---- Product cards ------------------------------------------------------- */
.t-results .t-products{display:flex;flex-direction:column;gap:16px}
.t-results .t-prod{background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--t-radius);padding:18px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(16,24,40,.04);width:100%;box-sizing:border-box}
.t-results .t-prod .t-prod-top{display:flex;align-items:center;gap:22px;width:100%}
.t-results .t-prod .t-prod-img{width:150px;height:150px;object-fit:contain;flex:0 0 150px;display:block}
.t-results .t-prod .t-prod-body{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.t-results .t-prod .t-prod-title{font-weight:700;font-size:20px;line-height:1.25;color:var(--t-ink)}
.t-results .t-prod .t-prod-meta{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;color:var(--t-muted);font-size:14px}
.t-results .t-prod .t-prod-meta b{color:var(--t-ink);font-weight:600}
@media (max-width:700px){
    .t-results .t-prod .t-prod-top{flex-direction:column;align-items:flex-start;gap:14px}
    .t-results .t-prod .t-prod-img{width:120px;height:120px;flex:0 0 120px;margin:0 auto}
    .t-results .t-prod .t-prod-title{font-size:18px;text-align:center}
    .t-results .t-prod .t-prod-body{align-items:center}
    .t-results .t-prod .t-prod-meta{justify-content:center}
}

/* ---- Status pill (shared across products + timeline) --------------------- */
.t-results .t-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.t-results .t-pill i{font-size:10px}
.t-results .t-pill.ok  {background:var(--t-ok-soft);  color:var(--t-ok)}
.t-results .t-pill.warn{background:var(--t-warn-soft);color:var(--t-warn)}
.t-results .t-pill.bad {background:var(--t-bad-soft); color:var(--t-bad)}
.t-results .t-pill.info{background:var(--t-info-soft);color:var(--t-info)}
.t-results .t-pill.t-pill-lg{padding:9px 18px;font-size:15px;line-height:20px;gap:8px;letter-spacing:.01em}
.t-results .t-pill.t-pill-lg i{font-size:12px}
.t-results .t-pill.t-pill-updated{background:#E5E7EB;color:#4B5563;font-size:14px}
.t-results .t-pill.t-pill-updated i{color:#6B7280}

/* ---- Per-product status card (Current Status / Last Updated + Next) ----- */
.t-results .t-status-card{background:#F1F1F1;border:1px solid var(--t-line);border-radius:var(--t-radius);padding:14px 16px;margin:4px 0 2px;box-sizing:border-box;width:100%}
.t-results .t-status-card .t-status-row{display:flex;flex-wrap:wrap;gap:14px 28px}
.t-results .t-status-card .t-status-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.t-results .t-status-card .t-status-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--t-muted)}
.t-results .t-status-card .t-status-next{margin-top:14px;padding-top:12px;border-top:1px dashed #d9d9d9;width:100%}

/* ---- Timeline ------------------------------------------------------------ */
.t-results .t-timeline{position:relative;padding:0;margin:0}
.t-results .t-event{position:relative;padding:0 0 0 34px;margin-bottom:14px;min-height:42px}
.t-results .t-event:last-child{margin-bottom:0}
.t-results .t-event::before{content:"";position:absolute;left:17px;top:0;bottom:50%;width:4px;background:var(--t-green)}
.t-results .t-event::after{content:"";position:absolute;left:17px;top:50%;bottom:-14px;width:4px;background:var(--t-green)}
.t-results .t-event:first-child::before{display:none}
.t-results .t-event:last-child::after{display:none}
.t-results .t-event .t-dot{position:absolute;left:0;top:50%;transform:translateY(-50%);width:38px;height:38px;box-sizing:border-box;border-radius:50%;background:var(--t-green);border:2px solid var(--t-green);display:inline-flex;align-items:center;justify-content:center;color:#ffffff;font-size:14px;z-index:2;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.t-results .t-event .t-event-body{background:#ffffff;border:1px solid var(--t-line);border-radius:var(--t-radius);padding:12px 14px 12px 24px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.t-results .t-event .t-when{font-size:12px;color:var(--t-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:3px}
.t-results .t-event .t-event-product{display:inline-block;padding:2px 10px;margin:2px 0 6px;background:#EAF5EC;border:1px solid #B7DFC0;border-radius:12px;font-size:12px;font-weight:600;color:var(--t-ink)}
.t-results .t-event .t-what{font-size:15px;line-height:1.45;color:var(--t-ink)}
.t-results .t-empty{padding:20px;border:1px dashed var(--t-line);border-radius:var(--t-radius);text-align:center;color:var(--t-muted);background:var(--t-card)}

/* ---- What happens next (inside status card) ----------------------------- */
.t-results .t-next-head{font-size:16px;letter-spacing:.05em;font-weight:700;color:var(--t-green);margin-bottom:2px}
.t-results .t-status-card .t-status-next .t-next-msg{margin:0;font-size:15px !important;line-height:1.45 !important;color:var(--t-ink)}
.t-results .t-status-card .t-status-next .t-next-msg a{color:var(--t-green);font-weight:600;text-decoration:underline}
.t-results .t-status-card .t-status-next .t-next-msg a:hover{text-decoration:none}

/* ---- Delivery Information (order-level, above the timeline) ------------ */
.t-results .t-delivery-info{background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--t-radius);padding:18px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(16,24,40,.04);width:100%;box-sizing:border-box;margin-bottom:24px}
.t-results .t-delivery-card{background:#EAF5EC;border:1px solid #B7DFC0;border-radius:var(--t-radius);padding:14px 16px 6px}
.t-results .t-delivery-card-head{font-size:16px;font-weight:700;color:var(--t-ink);margin-bottom:2px}
.t-results .t-delivery-card-msg{font-size:14px;line-height:1.45;color:var(--t-ink);margin-bottom:6px}
.t-results .t-delivery-card-for{font-size:13px;color:var(--t-muted);margin-bottom:10px;font-style:italic}

/* ---- Download button (used in delivery cards) --------------------------- */
.t-results a.t-next-pdf-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:var(--t-green);color:#ffffff !important;text-decoration:none !important;font-weight:600;font-size:14px;border-radius:8px;margin-bottom:10px;transition:opacity .15s ease}
.t-results a.t-next-pdf-btn:hover{opacity:.9;color:#ffffff !important;text-decoration:none !important}
.t-results a.t-next-pdf-btn i{font-size:15px}