/* ==========================================================================
   Tracking page — the crown jewel.
   Desktop: ~60% shipment information / ~40% map.
   Mobile:  status → progress → timeline → map (what is happening beats
            admiring the map).
   ========================================================================== */

.track-page { padding-top: var(--nav-h); background: var(--navy-900); }

/* ── Search ─────────────────────────────────────────────────────────────── */
.track-search { position: relative; overflow: hidden; isolation: isolate; }
.track-search__bg { position: absolute; inset: 0; z-index: -2; }
.track-search__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.track-search__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, var(--navy-900) 14%, rgba(6, 11, 20, 0.9) 48%, rgba(6, 11, 20, 0.62)),
    linear-gradient(to bottom, transparent 40%, var(--navy-900));
}
.track-search__inner { padding-block: clamp(52px, 8vw, 92px) clamp(40px, 5vw, 64px); max-width: 720px; }
.track-search h1 { margin-bottom: 16px; }
.track-search > .container > .track-search__inner > p { color: var(--text-2); margin-bottom: 32px; }

.track-search .track-form input { font-size: 1.05rem; }
.track-hint { margin-top: 16px; font-size: 0.85rem; color: var(--muted); }
.track-hint b { color: var(--text-2); font-weight: 600; }

/* ── States ─────────────────────────────────────────────────────────────── */
.track-state { padding: clamp(48px, 8vw, 96px) 0; text-align: center; display: none; }
.track-state.is-shown { display: block; }
.track-state__icon {
  display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 24px;
  border-radius: 18px; background: var(--navy-800); border: 1px solid var(--line);
}
.track-state__icon svg { width: 28px; height: 28px; color: var(--muted); }
.track-state--error .track-state__icon { background: rgba(240, 87, 78, 0.08); border-color: rgba(240, 87, 78, 0.3); }
.track-state--error .track-state__icon svg { color: var(--red); }
.track-state h2 { font-size: 1.4rem; margin-bottom: 12px; }
.track-state p { color: var(--muted); max-width: 46ch; margin-inline: auto; font-size: 0.95rem; }
.track-state .btn { margin-top: 26px; }

.track-loading { display: none; padding: clamp(56px, 9vw, 110px) 0; text-align: center; }
.track-loading.is-shown { display: block; }
.track-loading .spinner { width: 30px; height: 30px; border-width: 3px; margin: 0 auto 20px; color: var(--gold); }
.track-loading p { color: var(--muted); font-size: 0.92rem; letter-spacing: 0.04em; }

/* ── Result shell ───────────────────────────────────────────────────────── */
.track-result { display: none; padding-bottom: clamp(64px, 8vw, 104px); }
.track-result.is-shown { display: block; }

/* ── Exception banner ───────────────────────────────────────────────────── */
.hold-banner {
  display: none; gap: 20px; align-items: flex-start;
  background: linear-gradient(120deg, rgba(240, 87, 78, 0.14), rgba(240, 87, 78, 0.05));
  border: 1px solid rgba(240, 87, 78, 0.34); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px); margin-bottom: 26px;
}
.hold-banner.is-shown { display: flex; }
.hold-banner__icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 12px; background: rgba(240, 87, 78, 0.16); border: 1px solid rgba(240, 87, 78, 0.34);
}
.hold-banner__icon svg { width: 22px; height: 22px; color: #FF8A82; }
.hold-banner h2 { font-size: clamp(1.15rem, 2vw, 1.42rem); color: #FFC4BF; margin-bottom: 10px; }
.hold-banner p { color: #F2D3D0; font-size: 0.97rem; max-width: 66ch; }
.hold-banner__meta { margin-top: 8px; font-size: 0.82rem; color: #D89B95; }
.hold-banner .btn { margin-top: 20px; }
.hold-banner .btn--red { background: var(--red); color: #fff; }
.hold-banner .btn--red:hover { background: #FF6E66; box-shadow: 0 10px 30px rgba(240, 87, 78, 0.3); }

.delivered-banner {
  display: none; gap: 18px; align-items: center;
  background: linear-gradient(120deg, rgba(41, 192, 106, 0.13), rgba(41, 192, 106, 0.04));
  border: 1px solid rgba(41, 192, 106, 0.32); border-radius: var(--r-lg);
  padding: 22px clamp(22px, 3vw, 30px); margin-bottom: 26px;
}
.delivered-banner.is-shown { display: flex; }
.delivered-banner__icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; background: rgba(41, 192, 106, 0.16); border: 1px solid rgba(41, 192, 106, 0.36);
}
.delivered-banner__icon svg { width: 20px; height: 20px; color: #6FE3A2; }
.delivered-banner h2 { font-size: 1.08rem; color: #A8F0C8; margin-bottom: 3px; }
.delivered-banner p { font-size: 0.92rem; color: #8CCDA8; }

/* ── Status header ──────────────────────────────────────────────────────── */
.status-card {
  background: linear-gradient(160deg, var(--navy-750), var(--navy-800));
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 38px); margin-bottom: 26px;
}
.status-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.status-card__id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-card__id h1 {
  font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: 0.02em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700;
}
.status-card__sub { margin-top: 7px; font-size: 0.94rem; color: var(--muted); }
.status-card__sub .sep { color: var(--dim); margin-inline: 9px; }

.copy-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line-2);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); transition: all 0.2s var(--ease);
}
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-dim); }
.copy-btn.is-done { color: var(--green); border-color: rgba(41, 192, 106, 0.4); }

.status-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: 30px; font-size: 0.86rem;
  font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  border: 1px solid currentColor; background: rgba(255, 255, 255, 0.03);
}
.status-pill__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-pill.is-live .status-pill__dot { animation: pulse-dot 2s var(--ease) infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 6px transparent; opacity: 0.65; }
}

.status-card__facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-top: 24px;
}
.fact__l {
  font-size: 0.71rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.fact__v { font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 700; letter-spacing: -0.015em; }
.fact__v.is-gold { color: var(--gold); }
.fact__x { margin-top: 4px; font-size: 0.85rem; color: var(--muted); }

.update-msg {
  margin-top: 24px; padding: 18px 20px; border-radius: var(--r);
  background: var(--navy-900); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  display: flex; gap: 14px; align-items: flex-start;
}
.update-msg svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.update-msg p { font-size: 0.97rem; color: var(--text); }
.update-msg time { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--muted); }

/* ── 5-stage progress ───────────────────────────────────────────────────── */
.stages-wrap {
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 34px) clamp(20px, 3vw, 34px); margin-bottom: 26px;
}
.stages { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.stages__line {
  position: absolute; top: 10px; left: 10%; right: 10%; height: 2px;
  background: var(--line-2); border-radius: 2px;
}
.stages__fill {
  position: absolute; top: 10px; left: 10%; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: 2px;
  transition: width 0.9s var(--ease);
}
.stage { position: relative; text-align: center; padding-top: 0; }
.stage__dot {
  position: relative; z-index: 2; width: 22px; height: 22px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--navy-800); border: 2px solid var(--line-2);
  display: grid; place-items: center; transition: all 0.4s var(--ease);
}
.stage__dot svg { width: 11px; height: 11px; color: var(--navy-900); opacity: 0; transition: opacity 0.3s; }
.stage.is-complete .stage__dot { background: var(--blue); border-color: var(--blue); }
.stage.is-complete .stage__dot svg { opacity: 1; color: #fff; }
.stage.is-current .stage__dot {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 5px var(--gold-dim);
}
.stage.is-current .stage__dot::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--gold); animation: ring 2.2s var(--ease) infinite;
}
@keyframes ring {
  0%   { transform: scale(1); opacity: 0.8; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
.stage__label {
  font-size: 0.76rem; font-weight: 600; color: var(--dim);
  line-height: 1.35; padding-inline: 4px; transition: color 0.3s;
}
.stage.is-complete .stage__label { color: var(--text-2); }
.stage.is-current .stage__label { color: var(--gold); font-weight: 700; }
/* When held, the route stops advancing and the current step reads as blocked. */
.stages.is-held .stages__fill { background: linear-gradient(90deg, var(--blue), var(--red)); }
.stages.is-held .stage.is-current .stage__dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 5px rgba(240, 87, 78, 0.16); }
.stages.is-held .stage.is-current .stage__dot::after { border-color: var(--red); }
.stages.is-held .stage.is-current .stage__label { color: #FF8A82; }

/* ── Two-column layout ──────────────────────────────────────────────────── */
.track-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; }

.panel { background: var(--navy-800); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel + .panel { margin-top: 26px; }
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--line);
}
.panel__head h2 { font-size: 1.05rem; letter-spacing: -0.01em; }
.panel__body { padding: clamp(20px, 3vw, 28px); }

/* ── Journey timeline ───────────────────────────────────────────────────── */
.journey { list-style: none; position: relative; }
.journey__item { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 18px; padding-bottom: 30px; }
.journey__item:last-child { padding-bottom: 0; }
/* Connector between markers. */
.journey__item:not(:last-child)::before {
  content: ''; position: absolute; left: 14px; top: 24px; bottom: -2px;
  width: 2px; background: var(--line-2); border-radius: 2px;
}
/* Only legs the parcel has actually travelled read as complete. The connector
   below the current (or held) stop is the leg still ahead of it. */
.journey__item.is-done:not(.is-current):not(.is-held):not(:last-child)::before { background: var(--blue); }

.journey__dot {
  position: relative; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--navy-800); border: 2px solid var(--line-2);
}
.journey__dot svg { width: 13px; height: 13px; }
.journey__item.is-done .journey__dot { background: var(--blue); border-color: var(--blue); }
.journey__item.is-done .journey__dot svg { color: #fff; }
.journey__item.is-current .journey__dot {
  background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-dim);
}
.journey__item.is-current .journey__dot svg { color: var(--navy-900); }
.journey__item.is-held .journey__dot {
  background: var(--red); border-color: var(--red); box-shadow: 0 0 0 5px rgba(240, 87, 78, 0.15);
}
.journey__item.is-held .journey__dot svg { color: #fff; }
.journey__item.is-pending .journey__dot { background: var(--navy-900); }
.journey__item.is-pending .journey__dot::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dim);
}

.journey__body { padding-top: 3px; min-width: 0; }
.journey__city { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; }
.journey__item.is-pending .journey__city { color: var(--muted); font-weight: 600; }
.journey__label { margin-top: 2px; font-size: 0.89rem; color: var(--text-2); }
.journey__item.is-pending .journey__label { color: var(--dim); }
.journey__time {
  margin-top: 7px; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.03em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.journey__note { margin-top: 8px; font-size: 0.88rem; color: var(--text-2); }
.journey__tag {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 20px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
}
.journey__tag.is-current { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(232, 166, 44, 0.3); }
.journey__tag.is-held { background: rgba(240, 87, 78, 0.12); color: #FF8A82; border: 1px solid rgba(240, 87, 78, 0.3); }

/* ── Event log ──────────────────────────────────────────────────────────── */
.events { list-style: none; display: grid; gap: 2px; }
.events li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.events li:last-child { border-bottom: 0; padding-bottom: 0; }
.events time { font-size: 0.8rem; color: var(--muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; padding-top: 2px; }
.events strong { display: block; font-size: 0.93rem; font-weight: 700; }
.events p { font-size: 0.9rem; color: var(--text-2); margin-top: 3px; }
.events em { font-style: normal; color: var(--gold); font-size: 0.82rem; }

/* ── Details table ──────────────────────────────────────────────────────── */
.details { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; }
.details__row { display: grid; grid-template-columns: 40% 1fr; gap: 16px; background: var(--navy-800); padding: 14px 18px; }
.details__row dt { font-size: 0.86rem; color: var(--muted); }
.details__row dd { font-size: 0.92rem; font-weight: 600; text-align: right; word-break: break-word; }

/* ── Map ────────────────────────────────────────────────────────────────── */
.map-panel { position: sticky; top: calc(var(--nav-h) + 20px); }
.map-wrap { position: relative; }
.map-shell { aspect-ratio: 3 / 4; min-height: 380px; background: var(--navy-900); }
.map-shell canvas { outline: none; }
.map-fallback {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center;
  padding: 30px; background: var(--navy-900);
}
.map-fallback.is-shown { display: grid; }
.map-fallback p { font-size: 0.88rem; color: var(--muted); max-width: 30ch; }
.map-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding: 14px clamp(16px, 2.4vw, 22px); border-top: 1px solid var(--line); background: var(--navy-850);
}
.map-legend span { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; color: var(--muted); }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }

/* Mapbox marker elements are created in JS. */
.mk { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--navy-900); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); cursor: pointer; }
.mk--done { background: var(--blue); }
.mk--pending { background: var(--dim); }
.mk--current { background: var(--gold); width: 18px; height: 18px; }
.mk--held { background: var(--red); width: 18px; height: 18px; }
.mk--current::after, .mk--held::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid currentColor; animation: ring 2.2s var(--ease) infinite;
}
.mk--current { color: var(--gold); position: relative; }
.mk--held { color: var(--red); position: relative; }
.mapboxgl-popup-content {
  background: var(--navy-700); color: var(--text); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 11px 14px; font-size: 0.84rem;
  font-family: 'Inter', sans-serif; box-shadow: var(--shadow);
}
.mapboxgl-popup-content strong { display: block; font-size: 0.9rem; margin-bottom: 2px; }
.mapboxgl-popup-content span { color: var(--muted); font-size: 0.78rem; }
.mapboxgl-popup-tip { border-top-color: var(--line-2) !important; border-bottom-color: var(--line-2) !important; }
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib { opacity: 0.5; }

/* ── Refresh bar ────────────────────────────────────────────────────────── */
.refresh-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px; font-size: 0.84rem; color: var(--muted);
}
.refresh-bar__live { display: flex; align-items: center; gap: 9px; }
.refresh-bar__live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: pulse-dot 2.4s var(--ease) infinite; color: var(--green);
}
.refresh-bar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mini-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--navy-800);
  font-size: 0.78rem; font-weight: 600; color: var(--text-2); transition: all 0.2s var(--ease);
}
.mini-btn svg { width: 14px; height: 14px; }
.mini-btn:hover { border-color: var(--gold); color: var(--gold); }
.mini-btn.is-busy svg { animation: spin 0.9s linear infinite; }

/* ── Support footer on the tracking page ────────────────────────────────── */
.track-support {
  margin-top: 26px; text-align: center; padding: clamp(28px, 4vw, 40px);
  background: var(--navy-800); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.track-support h2 { font-size: 1.15rem; margin-bottom: 8px; }
.track-support p { font-size: 0.93rem; color: var(--muted); margin-bottom: 22px; }
.track-support__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .track-layout { grid-template-columns: 1fr; }
  .map-panel { position: static; }
  .map-shell { aspect-ratio: 16 / 11; min-height: 320px; }
}

@media (max-width: 700px) {
  .status-card__facts { grid-template-columns: 1fr; gap: 20px; }
  .events li { grid-template-columns: 1fr; gap: 5px; }
  .stage__label { font-size: 0.68rem; }
}

@media (max-width: 520px) {
  /* Keep the stepper legible: dots stay, only the active label is named. */
  .stage__label { display: none; }
  .stage.is-current .stage__label {
    display: block; position: absolute; left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 0.74rem;
  }
  .stages { padding-bottom: 26px; }
  .details__row { grid-template-columns: 1fr; gap: 4px; }
  .details__row dd { text-align: left; }
}