/**
 * Mobile Sticky Search and Filter Bar CSS
 * 移动端固定搜索栏和筛选栏样式
 */

/* 移动端固定搜索栏 */
@media (max-width: 991px) {
    /* 搜索栏容器固定定位 */
    .page-search .search-header {
        position: sticky;
        top: 50px; /* 导航栏高度，根据实际情况调整 */
        z-index: 990;
        background: #fff;
        padding: 10px 0;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* 筛选栏固定定位 */
    .page-search .filter-section {
        position: sticky;
        top: 110px; /* 导航栏 + 搜索栏高度 */
        z-index: 980;
        background: #fff;
        padding: 10px 0;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* 确保内容不被遮挡 */
    .page-search .products-section {
        padding-top: 10px;
    }
    
    /* 滚动时的阴影效果 */
    .page-search .search-header.scrolled,
    .page-search .filter-section.scrolled {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    /* 搜索框样式调整 */
    .page-search .search-form .input-group {
        margin: 0 15px;
        max-width: none;
    }
    
    .page-search .search-form .form-control {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .page-search .search-form .btn {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    /* 筛选栏样式调整 */
    .page-search .filter-bar {
        margin: 0 15px;
        padding: 8px;
        background: #f8f9fa;
        border-radius: 5px;
    }
    
    /* 移动端筛选按钮突出显示 */
    .page-search .filter-bar .btn-outline-secondary.d-lg-none {
        background: #fd560f;
        color: white;
        border-color: #fd560f;
    }
    
    /* 结果信息样式 */
    .page-search .search-result-info {
        padding: 0 15px;
        margin-top: 10px;
    }
    
    .page-search .search-result-info h4 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .page-search .search-result-info p {
        font-size: 13px;
        margin-bottom: 0;
    }
}

/* 小屏幕优化 */
@media (max-width: 576px) {
    .page-search .search-header {
        top: 45px; /* 小屏幕导航栏可能更矮 */
        padding: 8px 0;
    }
    
    .page-search .filter-section {
        top: 100px; /* 调整为搜索栏下方 */
        padding: 8px 0;
    }
    
    .page-search .search-form .input-group {
        margin: 0 10px;
    }
    
    .page-search .filter-bar {
        margin: 0 10px;
        padding: 5px;
    }
}

/* 固定元素的过渡动画 */
.page-search .search-header,
.page-search .filter-section {
    transition: all 0.3s ease;
}

/* 防止固定元素影响其他内容 */
body.has-sticky-search {
    padding-top: 0;
}

/* 确保 z-index 层级正确 */
.page-search {
    position: relative;
    z-index: 1;
}

/* 移动端横屏优化 */
@media (max-width: 991px) and (orientation: landscape) {
    .page-search .search-header {
        top: 40px;
        padding: 5px 0;
    }
    
    .page-search .filter-section {
        top: 85px;
        padding: 5px 0;
    }
    
    .page-search .search-form .form-control,
    .page-search .search-form .btn {
        padding: 5px 10px;
        font-size: 13px;
    }
}