/* 进度条显示修复 - 确保在所有设备上都可见 */

/* 基础修复 */
.progress-section,
.progress-item,
.progress-label,
.progress-bar,
.progress-fill,
.progress-percentage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.progress-item {
    display: flex !important;
}

/* 移动端强制显示 */
@media (max-width: 1024px) {
    .progress-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        margin: 15px 0 !important;
        padding: 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
    }
    
    .progress-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .progress-label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #EDF0EF !important;
        min-width: 60px !important;
        flex-shrink: 0 !important;
    }
    
    .progress-bar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 !important;
        height: 8px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        position: relative !important;
        min-width: 100px !important;
    }
    
    .progress-fill {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 100% !important;
        background: linear-gradient(90deg, #4CAF50, #8BC34A) !important;
        border-radius: 4px !important;
        position: relative !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    .progress-percentage {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #EDF0EF !important;
        min-width: 40px !important;
        text-align: right !important;
        flex-shrink: 0 !important;
    }
}

/* iPad 特定修复 */
@media (min-width: 768px) and (max-width: 1024px) {
    .progress-section {
        margin: 18px 0 !important;
        padding: 18px !important;
    }
    
    .progress-label {
        font-size: 15px !important;
        min-width: 70px !important;
    }
    
    .progress-bar {
        height: 10px !important;
    }
    
    .progress-percentage {
        font-size: 15px !important;
        min-width: 45px !important;
    }
}

/* 手机端特定修复 */
@media (max-width: 767px) {
    .progress-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .progress-label {
        width: 100% !important;
        text-align: left !important;
        min-width: auto !important;
    }
    
    .progress-bar {
        width: 100% !important;
        height: 8px !important;
    }
    
    .progress-percentage {
        width: 100% !important;
        text-align: left !important;
        min-width: auto !important;
    }
}

/* 横屏手机修复 */
@media (max-width: 767px) and (orientation: landscape) {
    .progress-item {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .progress-label {
        width: auto !important;
        min-width: 50px !important;
        text-align: center !important;
    }
    
    .progress-bar {
        width: auto !important;
        flex: 1 !important;
        height: 6px !important;
    }
    
    .progress-percentage {
        width: auto !important;
        min-width: 35px !important;
        text-align: right !important;
    }
}

/* 修复可能的CSS冲突 */
.craft-slides .progress-section,
.craft-slides.active .progress-section,
.elementor-image-box-content .progress-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 确保进度条内容不被隐藏 */
.progress-section * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.progress-item * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 强制显示进度条填充 */
.progress-fill {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, #4CAF50, #8BC34A) !important;
    border-radius: 4px !important;
    position: relative !important;
    z-index: 1 !important;
}