/* Stepper Banner - Material Design 3 Style */

/* ========================================
   CSS Variables (Design System)
   ======================================== */
.stepper-banner {
    --stepper-complete: var(--ezs-success, #4CAF50);
    --stepper-incomplete: var(--ezs-on-surface-variant, #6B7280);
    --stepper-current: var(--ezs-primary-500, #1998d5);
    --stepper-bg: var(--ezs-surface, #ffffff);

    /* Sizing */
    --box-size: 24px;
    --box-radius: 50%;
    --line-height: 2px;
    --label-spacing: 10px;
}

/* ========================================
   Stepper Banner Container
   ======================================== */
.stepper-banner {
    background: var(--stepper-bg);
    border-bottom: 1px solid var(--ezs-outline-variant, #E5E7EB);
    padding: 16px 24px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stepper-banner-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    counter-reset: steps;
    gap: 0;
    max-width: 600px;
    width: 100%;
}

/* ========================================
   Step Items
   ======================================== */
.stepper-banner .EZsaltStepperLarge_step {
    flex: 1;
    position: relative;
    text-align: center;
    padding: calc(var(--box-size) + var(--label-spacing)) 8px 0 8px;
    color: var(--stepper-incomplete);
    font-size: 11px;
    font-weight: 500;
    cursor: default;
    white-space: nowrap;
    min-width: 70px;
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_incomplete {
    cursor: pointer;
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_complete {
    color: var(--stepper-complete);
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_incomplete {
    color: var(--stepper-incomplete);
}

/* Current page step - use primary color */
.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_incomplete.EZsaltStepperLarge_CurrentPage {
    color: var(--stepper-current);
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_incomplete.EZsaltStepperLarge_CurrentPage::after {
    background: var(--stepper-current);
    border-color: var(--stepper-current);
    color: white;
    cursor: default;
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_incomplete.EZsaltStepperLarge_CurrentPage:hover::after {
    background: var(--stepper-current);
    border-color: var(--stepper-current);
    color: white;
    cursor: default;
}

/* ========================================
   Connecting Lines
   ======================================== */
.stepper-banner .EZsaltStepperLarge_step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: calc(var(--box-size) / 2);
    left: calc(50% + var(--box-size) / 2 + 2px);
    width: calc(100% - var(--box-size) - 4px);
    height: var(--line-height);
    background-color: var(--ezs-outline-variant, #E5E7EB);
}

/* Completed step gets colored line */
.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_complete:not(:last-child)::before {
    background-color: var(--stepper-complete);
}

/* ========================================
   Number Circles
   ======================================== */
.stepper-banner .EZsaltStepperLarge_step::after {
    content: counter(steps);
    counter-increment: steps;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--box-size);
    height: var(--box-size);
    border-radius: var(--box-radius);
    background: var(--stepper-bg);
    border: 2px solid var(--ezs-outline-variant, #E5E7EB);
    color: var(--stepper-incomplete);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
    transition: all 0.2s ease;
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_complete::after {
    background: var(--stepper-complete);
    border-color: var(--stepper-complete);
    color: white;
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_incomplete::after {
    background: var(--stepper-bg);
    border-color: var(--ezs-outline-variant, #E5E7EB);
    color: var(--stepper-incomplete);
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_incomplete:hover::after {
    background: var(--ezs-primary-50, #e9f4fb);
    border-color: var(--stepper-current);
    color: var(--stepper-current);
}

.stepper-banner .EZsaltStepperLarge_step.EZsaltStepperLarge_incomplete:hover {
    color: var(--stepper-current);
}

/* ========================================
   Mobile Responsive (< 768px)
   ======================================== */
@media screen and (max-width: 767px) {
    .stepper-banner {
        --box-size: 20px;
        --label-spacing: 8px;
        padding: 12px;
    }

    .stepper-banner .EZsaltStepperLarge_step {
        padding: calc(var(--box-size) + var(--label-spacing)) 4px 0 4px;
        font-size: 9px;
        min-width: 50px;
    }

    .stepper-banner .EZsaltStepperLarge_step::after {
        font-size: 10px;
    }
}

/* Very small screens - hide labels, show only circles */
@media screen and (max-width: 400px) {
    .stepper-banner .EZsaltStepperLarge_step {
        font-size: 0; /* Hide text */
        min-width: 40px;
        padding-top: var(--box-size);
    }
}

/* ========================================
   Legacy Container Styles (for backward compatibility)
   ======================================== */
.EZsaltStepperLarge_stepper-container {
    display: none; /* Hide old container */
}

.EZsaltStepperLarge_stepper {
    display: none; /* Hide old stepper */
}