/* ================================================== */
/* Mobile Step Indicator Fix - No Horizontal Scroll */
/* ================================================== */

/* Mobile-specific adjustments for step indicator */
@media (max-width: 767px) {
    /* Container adjustments */
    .row.justify-content-center.mt-4 .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* Main flex container for mobile - use existing structure */
    .d-flex.justify-content-center.align-items-center {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    
    /* Individual step indicators - equal width distribution */
    .step-indicator {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 0.25rem !important;
        border-radius: 0.375rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow: hidden !important;
    }
    
    /* Badge styling for mobile */
    .step-indicator .badge {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 50% !important;
        min-width: 1.5rem !important;
        height: 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 0.25rem 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Text styling for mobile */
    .step-indicator span {
        font-size: 0.6875rem !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        word-break: break-word !important;
        hyphens: auto !important;
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Arrow separators - smaller for mobile */
    .d-flex.justify-content-center.align-items-center > div.mx-3.text-muted {
        font-size: 0.875rem !important;
        margin: 0 0.25rem !important;
        flex-shrink: 0 !important;
        color: #6b7280 !important;
        font-weight: 300 !important;
    }
    
    /* Active state styling */
    .step-indicator:not(.text-muted) {
        background: rgba(59, 130, 246, 0.15) !important;
        border: 1px solid rgba(59, 130, 246, 0.3) !important;
    }
    
    .step-indicator:not(.text-muted) .badge {
        background: #3b82f6 !important;
        color: white !important;
    }
    
    /* Inactive state styling */
    .step-indicator.text-muted {
        opacity: 0.7 !important;
    }
    
    .step-indicator.text-muted .badge {
        background: #6b7280 !important;
        color: white !important;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 480px) {
    /* Container padding adjustment */
    .row.justify-content-center.mt-4 .col-md-8 {
        padding: 0 8px !important;
    }
    
    /* Even tighter spacing */
    .d-flex.justify-content-center.align-items-center {
        gap: 0.25rem !important;
    }
    
    /* More compact step indicators */
    .step-indicator {
        padding: 0.375rem 0.125rem !important;
    }
    
    /* Smaller badges */
    .step-indicator .badge {
        font-size: 0.625rem !important;
        min-width: 1.25rem !important;
        height: 1.25rem !important;
        padding: 0.25rem 0.375rem !important;
        margin-bottom: 0.1875rem !important;
    }
    
    /* Smaller text */
    .step-indicator span {
        font-size: 0.625rem !important;
        line-height: 1.0 !important;
    }
    
    /* Even smaller arrows */
    .d-flex.justify-content-center.align-items-center > div.mx-3.text-muted {
        font-size: 0.75rem !important;
        margin: 0 0.125rem !important;
    }
}

/* Ultra-small mobile adjustments */
@media (max-width: 360px) {
    /* Minimal container padding */
    .row.justify-content-center.mt-4 .col-md-8 {
        padding: 0 5px !important;
    }
    
    /* Minimal spacing */
    .d-flex.justify-content-center.align-items-center {
        gap: 0.125rem !important;
    }
    
    /* Ultra compact indicators */
    .step-indicator {
        padding: 0.25rem 0.0625rem !important;
    }
    
    /* Ultra small badges */
    .step-indicator .badge {
        font-size: 0.5625rem !important;
        min-width: 1.125rem !important;
        height: 1.125rem !important;
        padding: 0.1875rem 0.25rem !important;
        margin-bottom: 0.125rem !important;
    }
    
    /* Ultra small text */
    .step-indicator span {
        font-size: 0.5625rem !important;
        line-height: 0.9 !important;
    }
    
    /* Minimal arrows */
    .d-flex.justify-content-center.align-items-center > div.mx-3.text-muted {
        font-size: 0.625rem !important;
        margin: 0 0.0625rem !important;
    }
}

/* Ensure no overflow on the body */
@media (max-width: 767px) {
    body {
        overflow-x: hidden !important;
    }
    
    html {
        overflow-x: hidden !important;
    }
}