/* ============================================================
   /portal/assets/css/nav_mobile_search.css
   手机端搜索结果页第二层导航栏（独立组件）
   结构完全匹配 nav_mobile_search.php
   ============================================================ */

@media (max-width: 768px) {

    /* ================================
       ⭐ 外层导航栏容器（固定在第一层下面）
       ================================ */
	.mobile-search-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--portal-nav-height);   /* 紧贴第一层导航栏 */

        height: var(--portal-nav-second-height);
		
        /*background: #ffffff; */
        /*border-bottom: 1px solid #e5e7eb;	这两行注销换成下面这个，增加层次感*/	

        /* ⭐ 更白、更厚的背景层次（与 PC 第三层一致） */
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        /* ⭐ 更深的底部分割线（亚马逊风格） */
        border-bottom: 1px solid rgba(180, 180, 180, 0.55);

        /* ⭐ 双层阴影（核心立体感）新增---增加层次感 */
        box-shadow:
            0 2px 4px rgba(0,0,0,0.08),
            0 6px 18px rgba(0,0,0,0.12);

        z-index: 2390;

        display: flex;
        align-items: center;
        box-sizing: border-box;

        overflow: visible;  /* 让右侧筛选按钮绝对定位不被裁剪 */
    }

    /* ================================
       ⭐ 内部布局：左滑动区域 + 右侧筛选按钮
       ================================ */
    .mobile-search-nav-inner {
        position: relative; /* ⭐ 让右侧按钮 absolute 定位的参照物 */
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    /* ================================
       ⭐ 左侧横向滑动区域
       ================================ */
	 /* ⭐ 容器 */  
    .mobile-search-scroll {
        flex: 1;
        display: flex;
        align-items: center;

        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;

        padding-left: 16px;    /* ⭐ 第一个菜单与左侧的间距 */
        padding-right: 64px;   /* ⭐ 给右侧按钮留白 */

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-x;

        scrollbar-width: none;
    }

    .mobile-search-scroll::-webkit-scrollbar {
        display: none;
    }

    /* ================================
       ⭐ 菜单项（综合 / 价格 / 品牌 / 搜索结果）
       ================================ */
    /* 默认状态：未选中态 */	   
    .mobile-search-link {
        display: inline-flex;
        align-items: center;

        padding: 0 8px; /* ⭐ 菜单左右各 8px → 菜单间距 = 16px（与首页一致） */
        height: 44px;

        font-size: 15px;
        color: #333;            /* 未选中时默认文字的颜色 */
        text-decoration: none;

        white-space: nowrap;

        transition: color .2s ease, transform .2s ease;
    }
	
    /* ⭐ 修复第一个菜单左侧间距，使其与首页一致 */
    .mobile-search-link:first-child {
        padding-left: 0;  /* ⭐ 抵消了“容器 padding-left 16px + 菜单项间距的叠加，导致左侧间距叠加变大。 */
    }
	
    /* 选中态 */
    .mobile-search-link.active {
        color: #1d4ed8;
        font-weight: 600;
        transform: scale(1.12);
    }

    /* hover */
    .mobile-search-link:hover {
        color: #1d4ed8;
    }

    /* ================================
       ⭐ 搜索结果按钮箭头
       ================================ */
    .info-arrow {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 4px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #666;
        transition: transform .2s ease;
    }

    .info-arrow.open {
        transform: rotate(180deg);
    }

    /* 搜索结果按钮默认颜色 */
    #search-info-toggle {
        color: #333 !important;
    }

/* ================================
       ⭐ 价格箭头图标
 ================================ */
/* ⭐ --------------（价格箭头图标）------------------ */
/* ⭐ 拼多多双箭头样式（放在 @media 内部的最后） */
.price-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.1px;   /* 价格与箭头间距 */
}

.sort-icon {
    width: 20px;   /* 价格箭头大小调整 */
    height: 20px;
    stroke: #333;   /* 箭头默认颜色 */
    stroke-width: 1.6;  /* 价格箭头粗细 */
    fill: none;

    position: relative;
    top: -2.2px;   /* ⭐ 价格箭头竖向居中微调 -1px / -2px / -3px */
    margin-left: -4px;  /* ⭐ 抵消“价格”右侧的字形留白 */
}

/* 默认箭头颜色跟随文字颜色 */
.sort-icon .up,
.sort-icon .down {
    stroke: currentColor;
    opacity: 0.4; /* 默认半透明 */
}

/* 升序：上箭头高亮（跟随文字颜色） */
.price-asc .sort-icon .up {
    opacity: 1;
}

/* 降序：下箭头高亮（跟随文字颜色） */
.price-desc .sort-icon .down {
    opacity: 1;
}
/* ⭐ ------（价格箭头图标）代码结束 ------- */

    /* ================================
       ⭐ 右侧筛选按钮（悬浮）
       ================================ */
    .mobile-search-filter-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);

        width: 44px;
        height: 44px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(16,24,40,0.12);

        font-size: 18px;
        color: #111827;

        z-index: 9999;
    }

    .mobile-search-filter-btn:active {
        transform: translateY(-50%) scale(0.96);
        box-shadow: 0 4px 10px rgba(16,24,40,0.10);
    }

    /* PC 隐藏 */
    @media (min-width: 769px) {
        .mobile-search-nav {
            display: none !important;
        }
    }
		
}