/* Progress Indicator CSS */
:root {
    --deep-purple: #570f41;
    --magenta-pink: #d52978;
    --orange: #e58824;
    --lime-green: #aed255;
    --teal-green: #56ba88;
    --cyan-blue: #0ba3c1;
    
    --primary-color: var(--deep-purple);
    --primary-hover: #48083A;
    --secondary-color: var(--magenta-pink);
    --accent-color: var(--orange);
    --success-color: var(--lime-green);
    --info-color: var(--cyan-blue);
    --alt-color: var(--teal-green);
    
    --primary-light: #f8ebf5;
}

/* Progress Indicator Container */
.progress-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 0 40px;
}

/* Background Line for Entire Progress Bar */
.progress-indicator::before {
    content: '';
    position: absolute;
    top: 18px; /* Aligns with the center of the circles */
    left: 17%;
    width: 68%; /* Extend to just before the last circle */
    height: 3px;
    background-color: #e6e6e6;
    z-index: 1;
}

/* Active Progress Line Overlay */
.progress-indicator::after {
    content: '';
    position: absolute;
    top: 18px; /* Same as the background line */
    left: 17%;
    height: 3px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    z-index: 1;
    transition: width 0.3s ease;
    max-width: 68%; /* Match the width of the background line */
}

/* Set Active Progress Width Based on Current Step */
.progress-indicator.step-1::after { width: 0%; }
.progress-indicator.step-2::after { width: 23%; }
.progress-indicator.step-3::after { width: 45%; }
.progress-indicator.step-4::after { width: 68%; } /* Full width of the background line */

/* Step Containers */
.step-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

/* Progress Step Circles */
.progress-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    z-index: 3; /* Above the lines */
    font-size: 0.9rem;
    color: #666;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.progress-step i {
    font-size: 1rem;
}

.progress-step.active {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.progress-step.complete {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Step Labels */
.step-label {
    font-size: 0.75rem;
    color: #666;
    text-align: center;
    white-space: nowrap;
    display: block;
}

.step-container.active .step-label {
    color: var(--secondary-color);
    font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .progress-indicator {
        padding: 0 10px;
        flex-direction: row; /* Force horizontal layout */
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    
    .progress-step {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border-width: 2px;
    }
    
    .progress-step i {
        font-size: 1rem;
    }
    
    .progress-indicator::before,
    .progress-indicator::after {
        top: 20px;
        left: 14%;
        width: 72%;
    }
    
    .progress-indicator.step-2::after { width: 23%; }
    .progress-indicator.step-3::after { width: 46%; }
    .progress-indicator.step-4::after { width: 70%; }
    
    .step-label {
        font-size: 0.65rem;
    }
    
    .step-container {
        flex: 1;
        max-width: 25%; /* Ensure equal width for 4 steps */
        min-width: 0;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .progress-indicator {
        padding: 0 5px;
        overflow: visible; /* Ensure everything is visible */
    }
    
    .progress-step {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        margin-bottom: 5px;
        border-width: 2px;
    }
    
    .progress-step i {
        font-size: 0.9rem;
    }
    
    .progress-indicator::before,
    .progress-indicator::after {
        top: 18px;
        left: 14%;
        width: 72%;
        height: 2px;
    }
    
    .progress-indicator.step-2::after { width: 24%; }
    .progress-indicator.step-3::after { width: 48%; }
    .progress-indicator.step-4::after { width: 72%; }
    
    .step-label {
        font-size: 0.6rem;
        margin-top: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    .step-container {
        padding: 0 2px;
    }
}

/* Extra Small Devices */
@media (max-width: 375px) {
    .progress-indicator {
        padding: 0;
        width: 100%;
    }
    
    .progress-step {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        border-width: 2px;
    }
    
    .progress-indicator::before,
    .progress-indicator::after {
        top: 16px;
        left: 12%;
        width: 76%;
    }
    
    .progress-indicator.step-2::after { width: 25%; }
    .progress-indicator.step-3::after { width: 50%; }
    .progress-indicator.step-4::after { width: 76%; }
    
    .step-label {
        font-size: 0.55rem;
        margin-top: 5px;
    }
    
    .progress-step i {
        font-size: 0.85rem;
    }
}