/* ─────────────────────────────────────────
   LogixTrack — Public Tracker Styles v1.0
   ───────────────────────────────────────── */

.ltk-tracker {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 680px;
    margin: 0 auto;
    color: #1d2327;
    padding: 0 0 2rem;
}

/* ── Error ── */
.ltk-error { padding: 20px; background: #FCEBEB; border-radius: 8px; color: #A32D2D; }

/* ── Header ── */
.ltk-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.25rem;
}
.ltk-tracknum-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin-bottom: 3px;
}
.ltk-tracknum {
    font-family: "Courier New", Courier, monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Status pill ── */
.ltk-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 999px;
}
.ltk-pulse-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
    animation: ltk-pulse 1.8s ease infinite;
}
@keyframes ltk-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.65); }
}
.ltk-s-ordered    { background: #EEEDFE; color: #3C3489; }
.ltk-s-ordered    .ltk-pulse-dot { background: #534AB7; }
.ltk-s-processing { background: #FAEEDA; color: #854F0B; }
.ltk-s-processing .ltk-pulse-dot { background: #BA7517; }
.ltk-s-transit    { background: #E6F1FB; color: #185FA5; }
.ltk-s-transit    .ltk-pulse-dot { background: #185FA5; }
.ltk-s-out        { background: #E6F1FB; color: #0C447C; }
.ltk-s-out        .ltk-pulse-dot { background: #185FA5; }
.ltk-s-hold       { background: #FCEBEB; color: #A32D2D; }
.ltk-s-hold       .ltk-pulse-dot { background: #E24B4A; }
.ltk-s-delivered  { background: #E1F5EE; color: #0F6E56; }
.ltk-s-delivered  .ltk-pulse-dot { background: #1D9E75; }

/* ── ETA banner ── */
.ltk-eta-banner {
    background: #F5EDE6;
    border: 1px solid #F0997B;
    border-radius: 10px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.ltk-eta-label  { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #993C1D; margin-bottom: 2px; }
.ltk-eta-val    { font-size: 21px; font-weight: 600; color: #712B13; }
.ltk-eta-sub    { font-size: 11px; color: #993C1D; margin-top: 2px; }
.ltk-service-badge { font-size: 11px; font-weight: 600; color: #712B13; background: rgba(240,153,123,.2); padding: 5px 12px; border-radius: 6px; }

/* ── Progress ── */
.ltk-progress-section { margin-bottom: 1.25rem; }
.ltk-progress-labels  { display: flex; justify-content: space-between; font-size: 11px; color: #777; margin-bottom: 6px; }
.ltk-progress-track   { background: #f0f0f0; border-radius: 999px; height: 8px; overflow: hidden; border: 1px solid #e0e0e0; }
.ltk-progress-fill    { height: 100%; border-radius: 999px; background: #1D9E75; transition: width 1.5s cubic-bezier(.22,1,.36,1); }

.ltk-milestones   { display: flex; justify-content: space-between; margin-top: 10px; }
.ltk-ms-item      { display: flex; flex-direction: column; align-items: center; flex: 1; }
.ltk-ms-dot       { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ddd; background: #f0f0f0; transition: all .3s; }
.ltk-ms-dot.ltk-ms-done   { background: #1D9E75; border-color: #1D9E75; }
.ltk-ms-dot.ltk-ms-active { background: #185FA5; border-color: #185FA5; box-shadow: 0 0 0 3px #E6F1FB; }
.ltk-ms-dot.ltk-ms-hold   { background: #E24B4A; border-color: #E24B4A; box-shadow: 0 0 0 3px #FCEBEB; }
.ltk-ms-label { font-size: 9px; color: #aaa; margin-top: 4px; text-align: center; line-height: 1.3; }
.ltk-ms-label.ltk-ms-done   { color: #0F6E56; }
.ltk-ms-label.ltk-ms-active { color: #185FA5; font-weight: 600; }
.ltk-ms-label.ltk-ms-hold   { color: #A32D2D; font-weight: 600; }

/* ── Route list ── */
.ltk-route-title { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #888; margin-bottom: 10px; font-weight: 600; }
.ltk-route-list  { background: #f9f9f9; border: 1px solid #e8e8e8; border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1rem; }

.ltk-rstep { display: flex; gap: 10px; position: relative; }
.ltk-rstep:not(.ltk-rstep-last)::before {
    content: '';
    position: absolute;
    left: 11px; top: 26px; bottom: -2px;
    width: 1px; background: #ddd;
}
.ltk-rico {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
    border: 1px solid #e0e0e0;
    background: #fff;
}
.ltk-rico-done    { background: #E1F5EE; border-color: #9FE1CB; }
.ltk-rico-active  { background: #E6F1FB; border-color: #B5D4F4; }
.ltk-rico-hold    { background: #FCEBEB; border-color: #F7C1C1; }
.ltk-rico-pending { background: #f5f5f5; border-color: #e0e0e0; }

.ltk-rcontent { padding-bottom: 14px; flex: 1; }
.ltk-rstep.ltk-rstep-last .ltk-rcontent { padding-bottom: 0; }
.ltk-rloc         { font-size: 13px; font-weight: 600; color: #1d2327; }
.ltk-rloc-pending { color: #aaa; }
.ltk-rdesc        { font-size: 11px; color: #777; margin-top: 2px; }
.ltk-rtime        { font-size: 10px; font-family: monospace; color: #aaa; margin-top: 3px; }
.ltk-rtime-done   { color: #0F6E56; }
.ltk-rtime-active { color: #185FA5; }
.ltk-rtime-hold   { color: #A32D2D; }

/* ── Package detail grid ── */
.ltk-pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: .5rem; }
.ltk-pkg-card { background: #f9f9f9; border: 1px solid #e8e8e8; border-radius: 7px; padding: .6rem .85rem; }
.ltk-pkg-label { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: #999; margin-bottom: 3px; }
.ltk-pkg-val   { font-size: 13px; font-weight: 600; color: #1d2327; }
.ltk-mono      { font-family: monospace; font-size: 11px; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .ltk-tracknum { font-size: 14px; }
    .ltk-eta-val  { font-size: 17px; }
    .ltk-ms-label { font-size: 8px; }
    .ltk-pkg-grid { grid-template-columns: 1fr 1fr; }
}