/*
 * 搜索页（/v-search/，模板 v_search.html）：消除结果返回时的布局位移 + 分批渲染 / 状态提示的样式。
 * 配套脚本：static/js/v-search-paging.js（逻辑与背景说明见那里的文件头）。
 *
 * 位移来源（速度与体验诊断 HA-02，cn 平板 CLS 约 1.0）：
 *   1. 结果区初始几乎是空的，页脚就在首屏里；规格表出来后把页脚推出首屏。
 *   2. 新闻和产品两个请求先后返回，新闻块在规格表下方，先出现、随后被规格表推下去。
 *   3. Vue 挂载前，模板里的 v-for 行 / v-if 块按原样显示一帧，挂载后消失。
 * 对策：结果区预留到首屏底部（页脚一开始就在首屏外，表格怎么长都推不到可见内容）；
 * 新闻等产品表渲染完再显示（v-search-paging.js）；挂载前用 v-cloak 隐藏模板占位。
 */

/* Vue 挂载完成后会去掉 v-cloak 属性 */
.vsearch [v-cloak] {
    display: none !important;
}

/* 结果区至少撑满首屏：页头占位 .h120_80 桌面 130px，≤1200 时搜索头折行、占位 200px（见 v_search.html 内联样式）。
   ≥2048 时 html 整体放大（vh-layout.css §5，--vh-z = zoom），100vh 先除回版式 px，未放大时按 1。 */
.vsearch .vsearch_box {
    min-height: calc(100vh / var(--vh-z, 1) - 130px);
}

@media (max-width: 1200px) {
    .vsearch .vsearch_box {
        min-height: calc(100vh / var(--vh-z, 1) - 200px);
    }
}

/* 状态行：放在「搜索结果 | 产品」标题行右侧，不额外占一行，出现 / 变化都不引起位移 */
.vsearch .vsearch_right_top .vs-status {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    color: #555;
}

.vsearch .vsearch_right_top .vs-status--error {
    color: #C30D23;
}

.vsearch .vs-status--loading::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid #efc9cd;
    border-top-color: #C30D23;
    border-radius: 50%;
    animation: vs-spin .8s linear infinite;
}

@keyframes vs-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vsearch .vs-status--loading::before {
        animation: none;
    }
}

/* 换词重新搜索时，旧结果先保留但变淡，表示正在刷新 */
.vsearch .vs-busy .apcprotlist_box {
    opacity: .45;
    transition: opacity .2s;
}

/* 加载更多 */
.vsearch .vs-more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.vsearch .vs-more__btn,
.vsearch .vs-state__retry {
    min-height: 44px;
    padding: 0 28px;
    font-size: 15px;
    line-height: 1.2;
    color: #C30D23;
    background: #fff;
    border: 1px solid #C30D23;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.vsearch .vs-more__btn:hover,
.vsearch .vs-state__retry:hover {
    color: #fff;
    background: #C30D23;
}

/* 空结果 / 出错：给出可继续的入口，而不是一片空白 */
.vsearch .vs-state {
    margin-top: 8px;
}

.vsearch .vs-state__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vsearch .vs-state__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    font-size: 14px;
    color: #333;
    background: #f4f4f4;
    border-radius: 4px;
    transition: color .2s, background-color .2s;
}

.vsearch .vs-state__links a:hover {
    color: #fff;
    background: #C30D23;
}

/* 键盘焦点可见：原样式给输入框设了 outline:none */
.vsearch .vsearch_top_search > .vsearch_top_st:focus-visible {
    outline: 2px solid #C30D23;
    outline-offset: 1px;
}

.vsearch .vsearch_top_on:focus-visible,
.vsearch .vsearch_top_remove:focus-visible,
.vsearch .vsearch_top_right a:focus-visible,
.vsearch .vs-more__btn:focus-visible,
.vsearch .vs-state__retry:focus-visible,
.vsearch .vs-state__links a:focus-visible,
.vsearch .npro2list_t:focus-visible {
    outline: 2px solid #C30D23;
    outline-offset: 2px;
}

/* 新闻日期对比度：#999 对白底只有 2.85:1，改 #666（5.74:1） */
.vsearch .vsearch_news_item_time {
    color: #666;
}

/* 触屏：放大镜（12×19px）、清空（20px）和每行 5 个资料图标（23×20px）点不准。
   用透明伪元素把命中区扩到约 44px 高，不改元素本身尺寸和布局；图标之间原有 10px 间距，左右各扩 5px 不重叠。 */
@media (pointer: coarse) {
    .vsearch .vsearch_top_on,
    .vsearch .vsearch_top_remove,
    .vsearch .npro2liston > a {
        position: relative;
    }

    .vsearch .vsearch_top_on::before,
    .vsearch .vsearch_top_remove::before {
        content: '';
        position: absolute;
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
    }

    .vsearch .npro2liston > a::before {
        content: '';
        position: absolute;
        top: -12px;
        right: -5px;
        bottom: -12px;
        left: -5px;
    }
}