/* ============================================
   Cartogo — Suivi de réservation
   ============================================ */

.track-search-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 28px;
}

.track-not-found {
  text-align: center;
  padding: 50px 20px;
  color: var(--color-text-muted);
}

.track-not-found svg { width: 56px; height: 56px; stroke: var(--color-border); margin-bottom: 14px; }
.track-not-found h3 { color: var(--color-text); margin-bottom: 6px; }

.track-result {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
}

.track-result-header {
  background: linear-gradient(135deg, var(--color-dark-2), var(--color-dark));
  color: var(--color-white);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.track-result-number { font-size: 0.85rem; color: var(--color-text-on-dark-muted); margin-bottom: 4px; }
.track-result-car { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }

.track-status-badge {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.track-pending { background: rgba(242,179,61,0.2); color: var(--color-gold-light); }
.track-confirmed { background: rgba(95,167,150,0.25); color: #a8e0d2; }
.track-ongoing { background: rgba(95,167,150,0.25); color: #a8e0d2; }
.track-completed { background: rgba(20,166,115,0.25); color: #7ee8c2; }
.track-cancelled { background: rgba(214,69,69,0.25); color: #ff9b9b; }

.track-result-body { padding: 28px 32px; }

.track-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}

.track-row:last-child { border-bottom: none; }
.track-row span { color: var(--color-text-muted); }

@media (max-width: 560px) {
  .track-result-header { flex-direction: column; }
}
