/* 手机端Filter按钮功能修复 */
/* 解决手机端filter按钮点击无法显示筛选内容的问题 */

/* 确保filter_box在手机端正确显示 */
@media (max-width: 767px) {
    /* filter_box基础样式修复 */
    .filter_box {
        display: none !important;
        background: #f7f7f7 !important;
        padding: 20px !important;
        flex-wrap: wrap !important;
        padding-bottom: 50px !important;
        margin-bottom: 50px !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* 当filter_box显示时 */
    .filter_box:not(.hide) {
        display: flex !important;
    }
    
    /* 确保filter_box在手机端占满宽度 */
    .filter_box .filteritem {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* 手机端筛选按钮样式优化 */
    .hdt-filter_btn {
        position: relative !important;
        z-index: 1001 !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* 确保筛选按钮可以点击 */
    .hdt-filter_btn.lanxian {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* 修复可能的z-index问题 */
    .tabbox1 {
        position: relative !important;
        z-index: 999 !important;
    }
    
    /* 确保筛选内容在手机端正确显示 */
    .filter_box .filteritem h2 {
        font-size: 16px !important;
        color: #06323d !important;
        margin: 15px 0 15px !important;
        text-transform: uppercase !important;
    }
    
    /* 手机端价格滑块样式优化 */
    .filter_box .price-slider {
        width: 100% !important;
        margin-top: 15px !important;
    }
    
    .filter_box .slider-container {
        width: 100% !important;
        height: 6px !important;
        background: #e0e0e0 !important;
        border-radius: 3px !important;
        position: relative !important;
        margin: 20px 0 !important;
    }
    
    .filter_box .slider-thumb {
        width: 20px !important;
        height: 20px !important;
        background: #007bff !important;
        border-radius: 50% !important;
        position: absolute !important;
        top: -7px !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }
    
    .filter_box .slider-range {
        height: 6px !important;
        background: #007bff !important;
        border-radius: 3px !important;
        position: absolute !important;
        top: 0 !important;
    }
    
    /* 手机端价格输入区域样式 */
    .filter_box .price-inputs {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 20px !important;
    }
    
    .filter_box .price-range {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    
    .filter_box .price-item {
        flex: 1 !important;
        text-align: center !important;
    }
    
    .filter_box .price-text {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    .filter_box .price-separator {
        font-size: 18px !important;
        color: #666 !important;
        font-weight: 600 !important;
    }
    
    /* 手机端筛选按钮样式 */
    .filter_box .filter_btn {
        background: #007bff !important;
        color: white !important;
        border: none !important;
        padding: 12px 24px !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        text-align: center !important;
        width: 100% !important;
        margin-top: 20px !important;
        transition: background-color 0.3s ease !important;
    }
    
    .filter_box .filter_btn:hover {
        background: #0056b3 !important;
    }
    
    /* 确保筛选内容在手机端有足够的空间 */
    .filter_box {
        margin-top: 20px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* 修复可能的overflow问题 */
    .filter_box .xuanxiang {
        overflow: visible !important;
        position: relative !important;
    }
    
    /* 确保下拉选择器在手机端正确显示 */
    .filter_box .select2-container {
        width: 100% !important;
        z-index: 1002 !important;
    }
    
    .filter_box .select2-selection {
        height: 40px !important;
        line-height: 40px !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
    }
    
    .filter_box .select2-selection__rendered {
        line-height: 40px !important;
        padding-left: 15px !important;
        padding-right: 30px !important;
    }
    
    .filter_box .select2-selection__arrow {
        height: 40px !important;
        width: 30px !important;
    }
}

/* 平板端样式优化 */
@media (min-width: 768px) and (max-width: 1023px) {
    .filter_box .filteritem {
        width: calc((100% - 30px) / 2) !important;
        margin-right: 15px !important;
    }
    
    .filter_box .filteritem:nth-child(2n) {
        margin-right: 0 !important;
    }
}

/* 确保在所有设备上filter按钮都能正常工作 */
.hdt-filter_btn.lanxian {
    transition: all 0.3s ease !important;
}

.hdt-filter_btn.lanxian:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* 修复可能的JavaScript冲突 */
.filter_box.hide {
    display: none !important;
}

.filter_box:not(.hide) {
    display: flex !important;
}

/* 确保筛选内容在手机端有正确的动画效果 */
@media (max-width: 767px) {
    .filter_box {
        animation: slideDown 0.3s ease-out !important;
    }
    
    .filter_box.hide {
        animation: slideUp 0.3s ease-out !important;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* 修复Product type下拉值不显示的问题 */
.filter_box .select2-container {
    z-index: 9999 !important;
    position: relative !important;
}

.filter_box .select2-dropdown {
    z-index: 10000 !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.filter_box .select2-results {
    max-height: 200px !important;
    overflow-y: auto !important;
}

.filter_box .select2-results__option {
    padding: 8px 15px !important;
    cursor: pointer !important;
    background: #fff !important;
    color: #333 !important;
}

.filter_box .select2-results__option:hover {
    background: #f7f7f7 !important;
}

.filter_box .select2-results__option--highlighted {
    background: #007bff !important;
    color: #fff !important;
}

/* 确保filter_box在显示状态下正确显示所有内容 */
.filter_box:not(.hide) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.filter_box:not(.hide) .select2-container {
    visibility: visible !important;
    opacity: 1 !important;
}

.filter_box:not(.hide) .select2-dropdown {
    visibility: visible !important;
    opacity: 1 !important;
}