/**
 * Multi-Step Form Progress Component
 * 
 * Extracted and simplified progress indicator for multi-step forms.
 * Uses the new progress indicator component as base.
 */

@import url('../referral/progress_indicator.css');

/* Override progress indicator styles for forms */
.multistep-form-container .progress-indicator {
  background: transparent;
  border: none;
  padding: var(--space-md) 0;
  margin: 0 0 var(--space-lg) 0;
}

.multistep-form-container .progress-steps {
  max-width: 100%;
}

.multistep-form-container .progress-step {
  flex: 1;
  min-width: 0;
}

.multistep-form-container .step-circle {
  width: 36px;
  height: 36px;
  font-size: var(--font-size-sm);
}

.multistep-form-container .step-label {
  font-size: 11px;
  max-width: 70px;
  margin-top: var(--space-xs);
}

.multistep-form-container .progress-step:not(:last-child)::after {
  left: calc(50% + 18px);
  width: calc(100% - 36px);
}

/* Form-specific progress styling */
.form-progress {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) 0;
}

.form-progress__container {
  max-width: 600px;
  margin: 0 auto;
}

.form-progress__title {
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.form-progress__subtitle {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

/* Responsive adjustments for forms */
@media (max-width: 768px) {
  .multistep-form-container .step-circle {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs);
  }
  
  .multistep-form-container .step-label {
    font-size: 10px;
    max-width: 60px;
  }
  
  .multistep-form-container .progress-step:not(:last-child)::after {
    left: calc(50% + 16px);
    width: calc(100% - 32px);
  }
}

@media (max-width: 480px) {
  .multistep-form-container .step-circle {
    width: 28px;
    height: 28px;
  }
  
  .multistep-form-container .step-label {
    font-size: 9px;
    max-width: 50px;
  }
  
  .multistep-form-container .progress-step:not(:last-child)::after {
    left: calc(50% + 14px);
    width: calc(100% - 28px);
  }
}