/* WizardUx Progress Bar
 * Visual indicator of wizard completion progress
 * Desktop-first - DO NOT modify these base styles for mobile
 */

/* ==========================================================================
   PROGRESS BAR CONTAINER
   ========================================================================== */

.wizard-modal__progress {
  height: 4px;
  background: var(--wizard-color-border);
  border-radius: 2px;
  overflow: hidden;
}

/* ==========================================================================
   PROGRESS BAR FILL
   Width is set dynamically via inline style
   ========================================================================== */

.wizard-modal__progress-bar {
  height: 100%;
  background: var(--wizard-color-text);
  border-radius: 2px;
  transition: width var(--wizard-transition-slow);
}

/* ==========================================================================
   ALTERNATIVE PROGRESS STYLES
   For use in step-specific contexts (e.g., profile approval)
   ========================================================================== */

.wizard-progress-container {
  padding: var(--wizard-spacing-half);
  background: var(--wizard-color-shade);
  border-radius: var(--wizard-modal-border-radius);
}

.wizard-progress-text {
  margin-bottom: var(--wizard-spacing-half);
  font-size: var(--wizard-text-small);
  color: var(--wizard-color-text-subtle);
}

.wizard-progress-bar-container {
  height: 4px;
  background: var(--wizard-color-border);
  border-radius: 2px;
  overflow: hidden;
}

.wizard-progress-bar {
  height: 100%;
  background: var(--wizard-color-positive);
  border-radius: 2px;
  transition: width var(--wizard-transition-slow);
  width: 0;
}