/* HAWG Brand Stylesheet - Modern Streetwear & Clean Minimalist UI */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&f[]=clash-display@500,600,700&display=swap');

:root {
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Clash Display', 'Satoshi', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #F8F9FA;
  color: #09090B;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-heading {
  font-family: var(--font-display);
}

/* Vertical Timeline Track */
.timeline-track {
  position: relative;
}

.timeline-track::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 14px;
  width: 2px;
  background-color: #E4E4E7; /* zinc-200 */
}

.timeline-item {
  position: relative;
  padding-left: 28px;
  padding-bottom: 28px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* Inactive Node */
.timeline-node {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #CBD5E1; /* slate-300 */
  box-shadow: 0 0 0 4px #FFFFFF;
  z-index: 2;
  transition: transform 0.2s ease;
}

/* Active / Latest Node */
.timeline-item.active .timeline-node {
  width: 18px;
  height: 18px;
  left: -1px;
  top: 3px;
  border: 3px solid #000000;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 4px #FFFFFF;
}

.timeline-item.active .timeline-node::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-color: #000000;
}

/* Timeline Typography */
.timeline-time {
  font-size: 13px;
  font-weight: 500;
  color: #71717A; /* zinc-500 */
  display: block;
  margin-bottom: 3px;
}

.timeline-title {
  font-size: 15px;
  font-weight: 600;
  color: #09090B; /* zinc-950 */
  line-height: 1.35;
  margin-bottom: 3px;
}

.timeline-location {
  font-size: 13px;
  color: #52525B; /* zinc-600 */
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Status Badges */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.status-in_transit {
  border: 1px solid #BAE6FD;
  background-color: #F0F9FF;
  color: #0284C7;
}

.status-delivered {
  border: 1px solid #BBF7D0;
  background-color: #F0FDF4;
  color: #16A34A;
}

.status-out_for_delivery {
  border: 1px solid #FDE68A;
  background-color: #FFFBEB;
  color: #D97706;
}

.status-received {
  border: 1px solid #E2E8F0;
  background-color: #F8FAFC;
  color: #475569;
}