/* ============================================================
   轨迹查询页样式（独立文件，由 tracking.html 引入）
   ============================================================ */
.track-search-wrap { margin-top: 28px; max-width: 560px; }
.track-search { display: flex; gap: 10px; }
.track-search input {
  flex: 1; height: 54px; padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color: #fff; font-size: 15px; outline: none; transition: border-color .2s;
}
.track-search input::placeholder { color: rgba(255,255,255,.6); }
.track-search input:focus { border-color: var(--cyan); }
.track-hint { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.7); }
.track-hint a { color: var(--cyan); cursor: pointer; text-decoration: underline; }

.track-result { margin-top: 8px; }
.ship-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 28px; margin-bottom: 24px;
  display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center;
}
.ship-code { font-size: 19px; font-weight: 800; color: var(--navy); }
.ship-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-left: 10px; vertical-align: middle; }
.ship-badge.transit { background: var(--cyan-soft); color: #0a7a93; }
.ship-badge.delivered { background: #dcfce7; color: #15803d; }
.ship-badge.pending { background: #fef3c7; color: #b45309; }
.ship-meta { display: flex; gap: 26px; flex-wrap: wrap; margin-left: auto; }
.ship-meta .k { font-size: 12px; color: var(--muted); }
.ship-meta .v { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px; }

.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl { position: relative; padding: 0 0 26px; }
.tl:last-child { padding-bottom: 0; }
.tl .dot {
  position: absolute; left: -28px; top: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; border: 3px solid var(--line); box-sizing: border-box;
}
.tl.done .dot { background: var(--cyan); border-color: var(--cyan); }
.tl.current .dot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(29,78,216,.18); }
.tl .t-time { font-size: 13px; color: var(--muted); }
.tl .t-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 3px 0 2px; }
.tl.pending .t-title, .tl.pending .t-time, .tl.pending .t-loc { color: var(--muted); }
.tl .t-loc { font-size: 13px; color: var(--muted); }

.track-empty { text-align: center; padding: 42px 0 8px; color: var(--muted); }
.track-note {
  margin-top: 22px; font-size: 13px; line-height: 1.7; color: var(--muted);
  background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 12px; padding: 14px 18px;
}
.track-note code { background: #eef2f8; padding: 1px 6px; border-radius: 6px; font-size: 12px; color: var(--navy); }

@media (max-width: 680px) {
  .ship-card { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ship-meta { margin-left: 0; gap: 20px; }
  .track-search { flex-direction: column; }
  .track-search .btn { width: 100%; justify-content: center; }
}