/*
 * CSS冲突修复文件
 * 解决项目中所有CSS和JS冲突问题
 * 优先级：999999 确保覆盖所有其他样式
 */

/* ===== 1. 滑动条冲突修复 ===== */

/* 强制覆盖所有jslider隐藏规则 */
.jslider-label,
.jslider-limitless .jslider-label,
.jslider-single .jslider-bg .v,
.jslider-single .jslider-pointer-to,
.jslider-value,
.jslider-bg,
.jslider-pointer {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 20px !important;
    position: relative !important;
    z-index: 999999 !important;
    transform: none !important;
    clip: auto !important;
    overflow: visible !important;
}

/* 确保原生range input正常工作 */
input[type="range"],
.amount-slider,
#amountSlider {
    display: block !important;
    width: 100% !important;
    height: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background: rgba(255,255,255,0.9) !important;
    border: 2px solid rgba(255,255,255,1) !important;
    border-radius: 6px !important;
    outline: none !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    position: relative !important;
    margin: 10px 0 !important;
}

/* 滑动条滑块样式 */
input[type="range"]::-webkit-slider-thumb,
.amount-slider::-webkit-slider-thumb,
#amountSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4) !important;
    cursor: grab !important;
    transition: all 0.2s ease !important;
    border: 3px solid #ff6b35 !important;
    margin-top: -10px !important;
    z-index: 999999 !important;
}

input[type="range"]::-moz-range-thumb,
.amount-slider::-moz-range-thumb,
#amountSlider::-moz-range-thumb {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4) !important;
    cursor: grab !important;
    border: 3px solid #ff6b35 !important;
    transition: all 0.2s ease !important;
}

/* 滑动条轨道样式 */
input[type="range"]::-webkit-slider-track,
.amount-slider::-webkit-slider-track,
#amountSlider::-webkit-slider-track {
    height: 8px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(255,255,255,0.9) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}

input[type="range"]::-moz-range-track,
.amount-slider::-moz-range-track,
#amountSlider::-moz-range-track {
    height: 8px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(255,255,255,0.9) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* ===== 2. MUI框架冲突修复 ===== */

/* 修复MUI slider冲突 */
.mui-slider-progress-bar {
    height: 2px !important;
    background-color: #007aff !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999999 !important;
}

.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
    display: block !important;
    background: 0 0 !important;
    height: 2px !important;
}

/* 确保MUI slider组件不干扰原生滑动条 */
.mui-slider:not(.mui-slider-group) {
    position: relative !important;
    z-index: 1 !important;
}

/* ===== 3. 按钮冲突修复 ===== */

/* 金额调整按钮样式修复 */
.amount-btn,
.amount-decrease,
.amount-increase {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background: #ff6b35 !important;
    border: 3px solid #fff !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    z-index: 999999 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

.amount-btn:hover,
.amount-decrease:hover,
.amount-increase:hover {
    background: #e55a2b !important;
    transform: scale(1.15) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
}

.amount-btn:active,
.amount-decrease:active,
.amount-increase:active {
    transform: scale(0.95) !important;
}

.amount-btn:disabled,
.amount-decrease:disabled,
.amount-increase:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ===== 4. 容器冲突修复 ===== */

/* 滑动条容器样式修复 */
.slider-container,
.amount-controls,
.amount-display-mini {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-bottom: 15px !important;
    z-index: 999998 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    padding: 15px 10px !important;
    box-shadow: 0 3px 15px rgba(0,0,0,0.2) !important;
}

/* 金额显示容器 */
.amount-display-mini {
    background: rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    padding: 8px 15px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    min-width: 120px !important;
    text-align: center !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999997 !important;
    position: relative !important;
}

/* 标签样式修复 */
.slider-labels,
.min-amount,
.max-amount {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999995 !important;
    position: relative !important;
    width: 100% !important;
}

.min-amount, .max-amount {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 999995 !important;
}

/* ===== 5. 进度条冲突修复 ===== */

/* 滑动条进度显示 */
.slider-progress {
    position: absolute !important;
    top: 50% !important;
    left: 10px !important;
    right: 10px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #ff6b35 0%, #1e3d59 100%) !important;
    border-radius: 2px !important;
    width: 10% !important;
    transition: width 0.3s ease !important;
    pointer-events: none !important;
    z-index: 999996 !important;
    transform: translateY(-50%) !important;
    margin-top: 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== 6. 移动端特殊处理 ===== */

/* 移动端优化 */
@media (max-width: 768px) {
    .slider-container,
    .amount-controls,
    .amount-btn,
    .amount-slider {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 40px !important;
    }
    
    .amount-slider {
        display: block !important;
        width: 100% !important;
        height: 14px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .amount-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 26px !important;
    }
}

/* 超小屏幕特殊处理 */
@media (max-width: 480px) {
    .amount-btn {
        width: 55px !important;
        height: 55px !important;
        font-size: 28px !important;
    }
    
    .amount-slider {
        height: 16px !important;
    }
}

/* ===== 7. 强制覆盖所有可能的隐藏规则 ===== */

/* 最终覆盖 - 确保所有元素可见 */
.loan-amount-section .slider-container,
.loan-amount-section .amount-controls,
.loan-amount-section .amount-btn,
.loan-amount-section .amount-slider,
.loan-amount-section .amount-display-mini,
.loan-amount-section .slider-labels,
.loan-amount-section .min-amount,
.loan-amount-section .max-amount,
.loan-amount-section .slider-progress {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 40px !important;
    position: relative !important;
    z-index: 999999 !important;
    transform: none !important;
    clip: auto !important;
    overflow: visible !important;
}

.loan-amount-section .amount-slider {
    display: block !important;
    width: 100% !important;
    height: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background: rgba(255,255,255,0.9) !important;
    border: 2px solid rgba(255,255,255,1) !important;
    border-radius: 6px !important;
}

.loan-amount-section .amount-btn {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background: #ff6b35 !important;
    border: 3px solid #fff !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    z-index: 999999 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

.loan-amount-section .amount-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-bottom: 15px !important;
    z-index: 999998 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
}

/* ===== 8. 禁用外部插件干扰 ===== */

/* 禁用外部jslider插件 */
.jslider {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
}

/* 禁用外部MUI slider干扰 */
.mui-slider:not(.mui-slider-group) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
}

/* ===== 9. 安全样式 ===== */

/* 防止XSS攻击的样式 */
* {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
}

/* 确保所有交互元素可见 */
button, input, select, textarea {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* 防止外部CSS隐藏重要元素 */
.important-element,
.critical-component,
.essential-control {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 999999 !important;
}