/* --- FORCE FONT SIZE & FIX CONFLICTS --- */
.page-section, .track-card, .search-wrap input, .track-header h2 {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important;
}

:root {
  --navy: #0b1a2e;
  --amber: #f89307;
  --bg: #f0f4f9;
  --line: #dce3ec;
  --mut: #6f7e90;
  --ok: #28a745;
  --bad: #dc3545;
}

.hidden { display: none !important; }

/* CARD & HEADER */
.track-card {
  background: white;
  padding: 40px 36px;
  border-radius: 32px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid #e9edf2;
  animation: fadeIn 0.5s ease;
  max-width: 900px;
  margin: 0 auto;
}
.track-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.track-header i { color: var(--amber); font-size: 2.2rem; } /* Increased size */
.track-header h2 { font-weight: 700; font-size: 2.1rem !important; margin: 0; color: var(--navy); } /* Increased size */
.track-sub { color: #3e4a5a; margin-bottom: 28px; font-size: 1.1rem; } /* Increased size */

/* SEARCH BAR */
.search-wrap {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
  background: #f0f4f9; padding: 8px 8px 8px 24px;
  border-radius: 60px; align-items: center; border: 2px solid var(--line);
  transition: all 0.3s ease; width: 100% !important; max-width: 100% !important;
}
.search-wrap:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(244, 185, 66, 0.15);
  background: white;
}
.search-wrap i { color: #6a7b8c; font-size: 1.2rem; }
.search-wrap input {
  flex: 1; border: none !important; background: transparent !important; padding: 14px 0 !important;
  font-size: 1.3rem !important; font-family: monospace !important; letter-spacing: 4px;
  outline: none !important; min-width: 180px; font-weight: 500; color: var(--navy);
  box-shadow: none !important; /* Overrides bootstrap focus */
}
.search-wrap input::placeholder { color: #8f9ead; font-family: "Segoe UI", sans-serif !important; font-weight: 400; letter-spacing: normal; font-size: 1.1rem;}
.search-wrap button {
  background: var(--navy); border: none; color: white; padding: 14px 36px;
  border-radius: 40px; font-weight: 600; font-size: 1.05rem; cursor: pointer;
  transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.search-wrap button:hover {
  background: var(--amber); color: var(--navy); transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(244, 185, 66, 0.4);
}
.search-wrap button:disabled { opacity: 0.7; cursor: not-allowed; }

/* CHARACTER COUNT & ERRORS */
.char-count { text-align: right; font-size: 0.85rem; margin-bottom: 16px; color: var(--mut); }
.char-count.valid { color: var(--ok); }
.char-count.invalid { color: var(--bad); }
.err {
  padding: 14px 20px; border-radius: 12px; margin-bottom: 20px; font-size: 0.95rem;
  background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
}

/* PROGRESS BAR */
.progress-wrap { margin-bottom: 24px; }
.progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 1rem; font-weight: 600; }
.progress-header span:last-child { color: var(--amber); font-weight: 700; }
.progress-bar { width: 100%; height: 8px; background: #e9edf2; border-radius: 4px; overflow: hidden; }
.progress-bar div { height: 100%; background: linear-gradient(90deg, var(--amber), #f5c75e); border-radius: 4px; transition: width 1s ease; }

/* STATUS BOX */
.track-status-box {
  background: linear-gradient(135deg, #f0f6fd 0%, #e6eef9 100%);
  border-radius: 40px; padding: 20px 28px; margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  border-left: 6px solid var(--amber); transition: all 0.5s ease;
}
.status-badge { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.3rem; }
.status-badge i { font-size: 1.8rem; }
.update-time {
  color: #3e5a72; font-size: 1rem; background: white;
  padding: 8px 24px; border-radius: 30px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-weight: 500;
}

/* DETAILS GRID */
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; margin: 24px 0 32px; }
.detail-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: #f8fafc; border-radius: 12px; transition: all 0.3s ease; }
.detail-item:hover { background: #f0f4f9; }
.detail-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--mut); font-weight: 700; }
.detail-label i { color: var(--amber); margin-right: 6px; width: 16px; }
.detail-value { font-size: 1.15rem; font-weight: 600; color: var(--navy); word-break: break-word; }

/* TIMELINE */
.tracking-history-section { margin-top: 32px; background: #f8fafc; border-radius: 20px; padding: 24px 28px; }
.tracking-history-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: var(--navy); }
.tracking-history-title i { color: var(--amber); font-size: 1.3rem; }

.timeline { position: relative; padding-left: 4px; }
.timeline-item { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before {
  content: ''; position: absolute; left: 13px; top: 38px; bottom: -13px;
  width: 2px; background: #e9edf2;
}
.timeline-item.completed:not(:last-child)::before { background: var(--ok); }
.timeline-item.current-position:not(:last-child)::before { background: linear-gradient(to bottom, var(--ok) 0%, var(--amber) 100%); }

.timeline-marker {
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 12px; z-index: 2; position: relative;
}
.timeline-item.completed .timeline-marker { background: var(--ok); color: white; }
.timeline-item.pending .timeline-marker { background: #e9edf2; color: var(--mut); }
.timeline-item.current-position .timeline-marker {
  background: var(--amber); color: white; box-shadow: 0 0 20px rgba(248, 147, 7, 0.4);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(248, 147, 7, 0.4); }
  50% { box-shadow: 0 0 40px rgba(248, 147, 7, 0.8); }
}

.timeline-content {
  flex: 1; background: white; padding: 16px 20px; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid #e9edf2;
  transition: all 0.3s ease;
}
.timeline-item.completed .timeline-content { border-color: rgba(40, 167, 69, 0.2); }
.timeline-item.current-position .timeline-content {
  border-color: var(--amber); box-shadow: 0 4px 20px rgba(248, 147, 7, 0.15);
  background: linear-gradient(135deg, #fffaf0 0%, #ffffff 100%);
}
.timeline-item.pending .timeline-content { opacity: 0.7; border-color: #e9edf2; }
.timeline-content:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transform: translateX(4px); }

.timeline-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.timeline-location { font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--navy); }
.timeline-status { font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.timeline-time { font-size: 0.9rem; color: var(--mut); margin-top: 6px; }
.timeline-time i { margin-right: 4px; }

.current-location-badge {
  background: var(--amber); color: white; font-size: 0.75rem; font-weight: 600;
  padding: 3px 12px; border-radius: 20px; display: inline-flex;
  align-items: center; gap: 4px; animation: pulse 2s infinite;
}
.mobile-only-badge { display: none; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* RESPONSIVE */
@media (max-width: 768px) {
  .track-card { padding: 24px 18px; border-radius: 20px; }
  .track-header h2 { font-size: 1.6rem !important; }
  .track-header i { font-size: 1.6rem; }
  .track-sub { font-size: 0.95rem; }
  .search-wrap { border-radius: 40px; padding: 6px 6px 6px 16px; gap: 8px; }
  .search-wrap input { min-width: 100px; font-size: 1.1rem !important; letter-spacing: 2px; padding: 10px 0 !important; }
  .search-wrap input::placeholder { font-size: 0.9rem; }
  .search-wrap button { padding: 10px 20px; font-size: 0.9rem; }
  .details-grid { grid-template-columns: 1fr; gap: 12px; }
  .track-status-box { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 20px; }
  .tracking-history-section { padding: 16px 18px; }
  .desktop-only-badge { display: none; }
  .mobile-only-badge { display: block; }
  
  .timeline-content { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; }
  .timeline-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .timeline-status { order: 1; font-size: 0.75rem; background: none !important; padding: 0; margin: 0 0 4px 0; color: #5a6b7c; }
  .timeline-status i { display: none; }
  .timeline-location { order: 2; font-size: 1.05rem; font-weight: 700; margin: 0 0 4px 0; }
  .timeline-time { order: 3; font-size: 0.8rem; margin: 0; }
  .timeline-current-badge-wrap { order: 4; margin-top: 6px; }
  .current-location-badge { font-size: 0.7rem; padding: 3px 10px; }
}

@media (max-width: 480px) {
  .track-card { padding: 20px 14px; }
  .search-wrap button span { display: none; } 
  .search-wrap button { padding: 10px 16px; }
}