.lh-trk { --lh-a: #2563eb; --lh-b: #dc2626; --lh-border: rgba(128,128,128,.35); max-width: 760px; margin: 1.5em 0; }
.lh-trk [hidden] { display: none !important; }
.lh-trk__form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.lh-trk__form label { flex: 1 1 220px; font-size: .95em; }
.lh-trk__form input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--lh-border); border-radius: 6px; font: inherit; letter-spacing: .05em; text-transform: uppercase; box-sizing: border-box; }
.lh-trk__msg { margin: 8px 0; min-height: 1.3em; font-size: .92em; }
.lh-trk__msg.is-error { color: var(--lh-b); }

.lh-trk__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.lh-trk__code { font-size: 1.2em; letter-spacing: .05em; }
.lh-trk__map { height: 360px; border: 1px solid var(--lh-border); border-radius: 10px; z-index: 0; }
.lh-trk__age { margin: 6px 0 0; font-size: .9em; color: #15803d; font-weight: 600; min-height: 1.3em; }
.lh-trk__age.is-stale { color: #b45309; }

.lh-trk__steps { list-style: none; margin: 18px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--lh-border); }
.lh-trk__steps li { position: relative; padding: 0 0 14px 14px; display: flex; flex-direction: column; }
.lh-trk__steps li::before { content: ""; position: absolute; left: -24px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--lh-border); }
.lh-trk__steps li.is-current::before { background: var(--lh-a); box-shadow: 0 0 0 4px rgba(37,99,235,.2); }
.lh-trk__time { font-size: .85em; opacity: .7; }

.lh-pin { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.lh-pin--pickup { background: var(--lh-a); }
.lh-pin--dropoff { background: var(--lh-b); }
.lh-pin--courier { width: 40px; height: 40px; background: #16a34a; font-size: 22px; }