.progress-path {
  --step-transition: all 0.3s ease;
}

/* Ensure circles are properly centered and aligned */
.progress-path .grid {
  grid-template-columns: repeat(5, 1fr);
}

/* Add subtle shadow to progress bar for depth */
.progress-path .h-1.bg-gray-200 {
  height: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Add better transition for progress bar */
.progress-path .h-full.bg-blue-600 {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  height: 4px;
}

/* Make current step more prominent */
.progress-path .bg-blue-600.border {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Add subtle pulse animation to current step */
@keyframes subtle-pulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  70% { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.progress-path [class*="current"] .bg-blue-600 {
  animation: subtle-pulse 2s infinite;
}

/* Ensure text is properly aligned and sized */
.progress-path .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
  .progress-path .text-sm {
    font-size: 0.75rem;
  }

  /* Enhance tap targets on mobile */
  .progress-path .grid > div {
    padding: 0 4px;
  }
}

/* Add slight spacing for long text items */
.progress-path .grid > div:last-child .whitespace-nowrap {
  margin-left: -8px; /* Adjust for "Commitment" text */
}

.progress-path .grid > div:nth-child(4) .whitespace-nowrap {
  margin-left: -4px; /* Adjust for "First Action" text */
}