/* ==========================================================================
   SHIPPING TIMELINE — STYLES
   This file controls how the timeline looks: spacing, colors, icon circles,
   and the animated dashed line between each step.
   ========================================================================== */

/* The outer card that wraps the whole timeline.
   Change "max-width" to make the whole widget wider/narrower.
   Change "border" / "border-radius" to change the card's box look. */
.shipping-timeline-wrapper {
  max-width: auto;
  margin: 2px auto;
  background: #fff;
  border: 1px solid #020F2D;
  border-radius: 12px;
  padding: 4px 2px;
}

/* Lays out the 3 steps + 2 connector lines in a single horizontal row. */
.timeline-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* One step = icon circle + label + date, stacked vertically and centered. */
.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  width: 84px; /* fixed width keeps all 3 steps the same size */
}

/* The round colored circle behind each icon.
   "background" and "color" set the circle's fill color and icon color.
   Change these two values to re-theme the whole widget's accent color. */
.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6ee; /* light green circle background */
  color: #F24F03;      /* icons color */
  margin-bottom: 1px;
  flex-shrink: 0;
}

.step-icon svg {
  width: 22px;
  height: 22px;
}

/* "Ordered" / "Shipped" / "Delivered" text under each icon. */
.step-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

/* The date text under each label (filled in automatically by the JS file). */
.step-date {
  margin: 1px 0 0;
  font-size: 12px;
  color: #767676;
}

/* ==========================================================================
   ANIMATED CONNECTOR LINE (the dashes between each step)
   ========================================================================== */

.scrolling-dot-line {
  flex: 1 1 auto;           /* stretches to fill the space between steps */
  height: 2px;
  margin-top: 22px;         /* vertically lines it up with the icon circles */
  min-width: 20px;

  /* Draws repeating short dashes instead of one solid line.
     "8px 2px" = each dash+gap pattern is 8px wide, 2px tall.
     Change "8px" to make the dashes longer/shorter or closer/further apart. */
  background-image: linear-gradient(to right, #F24F03 60%, transparent 0%);
  background-position: top;
  background-size: 8px 2px;
  background-repeat: repeat-x;

  /* Animates the dash pattern sliding to the right, on a continuous loop.
     "1s" = how long one loop takes (lower = faster, higher = slower).
     "linear" = constant speed, no easing.
     "infinite" = never stops. */
  animation: shipping-timeline-dash-move 0.6s linear infinite;
}

/* The animation itself: slides the background pattern from its start
   position to exactly one full dash-pattern width (8px) to the right.
   Because the pattern repeats, this loops seamlessly with no visible jump. */
@keyframes shipping-timeline-dash-move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 8px 0;
  }
}

/* Accessibility: if the visitor's device has "reduce motion" turned on
   (a system-level setting some people use to avoid motion sickness or
   distraction), turn the animation off and show a static line instead. */
@media (prefers-reduced-motion: reduce) {
  .scrolling-dot-line {
    animation: none;
  }
}