/**
 * Stepper Module Styles
 *
 * BEM naming convention:
 *   .stepper              - Block (the component)
 *   .stepper__step        - Element (part of component)
 *   .stepper__step--active - Modifier (state variation)
 *
 * CSS Custom Properties for theming:
 *   --stepper-primary     - Active step color
 *   --stepper-success     - Complete step color
 *   --stepper-gray-*      - Neutral colors
 */

/* ============================================
   Base Component
   ============================================ */
.stepper {
    --stepper-primary: var(--color-primary, #3b82f6);
    --stepper-success: var(--color-success, #059669);
    --stepper-gray-200: var(--color-gray-200, #e5e7eb);
    --stepper-gray-400: var(--color-gray-400, #9ca3af);
    --stepper-gray-500: var(--color-gray-500, #6b7280);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

/* ============================================
   Step Element
   ============================================ */
.stepper__step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stepper__circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.stepper__check {
    width: 1rem;
    height: 1rem;
}

.stepper__number {
    line-height: 1;
}

.stepper__label {
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
    white-space: nowrap;
}

/* ============================================
   Step State Modifiers
   ============================================ */

/* Active (current step) */
.stepper__step--active .stepper__circle {
    background: var(--stepper-primary);
    color: white;
}

.stepper__step--active .stepper__label {
    color: var(--stepper-primary);
    font-weight: 600;
}

/* Complete (previous steps) */
.stepper__step--complete .stepper__circle {
    background: var(--stepper-success);
    color: white;
}

.stepper__step--complete .stepper__label {
    color: var(--stepper-success);
}

/* Inactive (future steps) */
.stepper__step--inactive .stepper__circle {
    background: var(--stepper-gray-200);
    color: var(--stepper-gray-500);
}

.stepper__step--inactive .stepper__label {
    color: var(--stepper-gray-400);
}

/* ============================================
   Connector Line
   ============================================ */
.stepper__connector {
    width: 5rem;
    height: 2px;
    background: var(--stepper-gray-200);
    margin: 0 1rem;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.stepper__connector--complete {
    background: var(--stepper-success);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 640px) {
    .stepper {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .stepper__connector {
        width: 2rem;
        margin: 0 0.5rem;
    }

    .stepper__label {
        font-size: 0.75rem;
    }
}