/*! Pool Builder Plugin — Step progress
   05-components.step-progress.css
   The "Step n of N — Name" line and segment track above each Step's heading
   (pool-builder-app.js renderStepProgress). Inline-flex so it follows the
   heading's alignment: centred on Pool Type, Model and Options, left on
   Location and Summary. */

#wppb_wrapper .wppb-step-progress {
    display: inline-flex;
    flex-direction: column;
    gap: var(--wppb-space-1);
    max-width: 100%;
    margin-bottom: var(--wppb-space-2);
}

#wppb_wrapper .wppb-step-progress__text {
    font-family: var(--wppb-font-family-base);
    font-size: var(--wppb-font-size-sm);
    font-weight: 600;
    line-height: var(--wppb-line-height-base);
    color: var(--wppb-muted);
}

#wppb_wrapper .wppb-step-progress__track {
    display: flex;
    gap: var(--wppb-space-1);
}

#wppb_wrapper .wppb-step-progress__segment {
    flex: 1 1 0;
    min-width: var(--wppb-space-6);
    height: var(--wppb-space-1);
    border-radius: var(--wppb-radius-sm);
    background: var(--wppb-border);
}

#wppb_wrapper .wppb-step-progress__segment--done {
    background: var(--wppb-primary);
}