/* ============================================================
   GlobalFreight Trace — Shared Global Stylesheet
   Companion to the inline design system in index.html
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0A192F; }
::-webkit-scrollbar-thumb { background: rgba(249, 115, 22,0.5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(249, 115, 22,0.8); }

/* ─────────────────────────────────────────────────────────────
   HERO PARTICLES
   (generated in HTML as .particle .particle-N)
───────────────────────────────────────────────────────────── */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.14);
  animation: floatParticle linear infinite;
  pointer-events: none;
}

.particle-1 { width: 8px;  height: 8px;  left: 14%; top: 22%; animation-duration: 12s; animation-delay: 0s; }
.particle-2 { width: 5px;  height: 5px;  left: 76%; top: 28%; animation-duration: 17s; animation-delay: -3s; }
.particle-3 { width: 12px; height: 12px; left: 50%; top: 68%; animation-duration: 10s; animation-delay: -5s; background: rgba(249, 115, 22,0.08); }
.particle-4 { width: 6px;  height: 6px;  left: 32%; top: 60%; animation-duration: 14s; animation-delay: -7s; }
.particle-5 { width: 9px;  height: 9px;  left: 84%; top: 74%; animation-duration: 19s; animation-delay: -2s; background: rgba(255,255,255,0.06); }

@keyframes floatParticle {
  0%   { transform: translateY(0)      translateX(0)   rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(40px) rotate(360deg); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   SPINNER (shared utility)
───────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(249, 115, 22,0.15);
  border-top-color: #F97316;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ─────────────────────────────────────────────────────────────
   REVEAL ANIMATE (Intersection Observer driven)
   — used in all sections
───────────────────────────────────────────────────────────── */
.reveal-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-animate.revealed { opacity: 1; transform: translateY(0); }
.reveal-animate:nth-child(2) { transition-delay: 0.1s; }
.reveal-animate:nth-child(3) { transition-delay: 0.2s; }
.reveal-animate:nth-child(4) { transition-delay: 0.3s; }

/* ─────────────────────────────────────────────────────────────
   MAP (Google Maps container)
───────────────────────────────────────────────────────────── */
#map {
  width: 100%;
  min-height: 350px;
}
.gm-style { font-family: 'Space Grotesk', 'Inter', sans-serif !important; }

/* ─────────────────────────────────────────────────────────────
   TRACKING — MILESTONE ITEMS
   (rendered dynamically by app.js)
───────────────────────────────────────────────────────────── */
.milestone-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: fadeSlideIn 0.4s ease-out forwards;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.milestone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F97316;
  flex-shrink: 0;
  margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────
   TRACKING — STATUS STEPPER
   (rendered dynamically by app.js)
───────────────────────────────────────────────────────────── */
.stepper-item {
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
  position: relative;
}

.stepper-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px; top: 36px; bottom: 0;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.08);
}

.stepper-item.active::before,
.stepper-item.completed::before {
  background: linear-gradient(180deg, #F97316, rgba(249, 115, 22, 0.15));
}

.stepper-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
}

.stepper-item.active .stepper-dot {
  border-color: #F97316;
  background: rgba(249, 115, 22, 0.12);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.08);
  animation: stepGlow 2s ease-in-out infinite;
}

.stepper-item.completed .stepper-dot {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

@keyframes stepGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.08); }
  50%       { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0.03); }
}

.stepper-content  { flex: 1; padding-top: 6px; }
.stepper-title    { font-weight: 600; color: rgba(255, 255, 255, 0.9); font-size: 0.85rem; }
.stepper-subtitle { font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); margin-top: 2px; }
.stepper-item.pending .stepper-title    { color: rgba(255, 255, 255, 0.3); }
.stepper-item.pending .stepper-dot      { border-color: rgba(255, 255, 255, 0.08); }

/* ─────────────────────────────────────────────────────────────
   STATUS CHIPS (used in admin + potentially tracking)
───────────────────────────────────────────────────────────── */
.status-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
}

.chip-transit   { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border: 1px solid rgba(59,130,246,0.2); }
.chip-delivered { background: rgba(34, 197, 94, 0.12);  color: #86efac; border: 1px solid rgba(34,197,94,0.2); }
.chip-pending   { background: rgba(255,255,255,0.06);   color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.08); }
.chip-hold      { background: rgba(249, 115, 22, 0.12);  color: #fda97a; border: 1px solid rgba(249, 115, 22,0.2); }
.chip-customs   { background: rgba(168, 85, 247, 0.12); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.2); }

/* ─────────────────────────────────────────────────────────────
   WAYBILL PRINT
───────────────────────────────────────────────────────────── */
#waybill-print { display: none; font-family: 'Inter', sans-serif; }

@media print {
  #navbar, #chat-widget, #hero, #trust-bar,
  #services, #about, #how-it-works,
  #quote, #contact, footer { display: none !important; }

  #tracking {
    display: block !important;
    background: white !important;
    padding: 0 !important;
    color: #0A192F !important;
  }

  body { background: white !important; }

  #map { min-height: 260px !important; }
}

/* ─────────────────────────────────────────────────────────────
   ADMIN PANEL — kept separate, loaded via admin.html
   (no overrides here — admin.html has its own inline block)
───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   UTILITY
───────────────────────────────────────────────────────────── */
.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #F97316, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
}

/* Counter number (font feature) */
.counter-number,
[data-count],
[data-target] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ─────────────────────────────────────────────────────────────
   MOBILE — shared breakpoints
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stepper-dot { width: 30px; height: 30px; }
  .stepper-item:not(:last-child)::before { left: 14px; }
}