/* ================================================================
   移动端搜索区改版  search-mobile.css
   ----------------------------------------------------------------
   只在 ≤768px 生效，PC 端样式完全不受影响。
   仅做覆盖（load 在 help.css 之后），不修改 help.css 原件。

   解决的问题：
   1. 热词深灰字压深蓝底，几乎不可读（#525956 on #033F9D）
   2. 热词 position:absolute 脱流 + 面板 height:200px 固定，
      文字一多就溢出到面板外、被裁切
   3. 输入框靠 width:81%/79%/77%/75%/73%/71% 逐档硬调，
      与 padding 相互打架，左右留白不对称
   4. 搜索动作只剩回车，移动端没有可点的明确提交入口
   5. 手册配图 714px 固定宽，窄屏撑出横向滚动
   ================================================================ */

@media (max-width: 768px) {

    /* ---------- 0. 横向溢出兜底 ---------- */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ---------- 1. 搜索卡：自适应高度 + 更贴合屏幕的边距 ---------- */
    .help_xin {
        width: auto !important;          /* 原 82%，窄屏只剩半屏可用 */
        max-width: none !important;
        margin: 0 12px !important;
        padding: 0 !important;
    }

    .price-section-7 {
        height: auto !important;         /* 原固定 200px，内容一多必溢出 */
        margin-top: 74px !important;     /* 导航栏 60px + 14px 呼吸 */
        padding: 22px 16px 20px !important;
        display: block !important;
        border-radius: 16px;
        background: linear-gradient(135deg, #0a54cc 0%, #03409e 55%, #02307a 100%) !important;
        box-shadow: 0 6px 18px rgba(3, 63, 157, .22);
    }

    /* ---------- 2. 标题 ---------- */
    .search-value {
        height: auto;
        margin: 0 0 14px;
        font-size: 15px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: .5px;
        color: #fff;
        opacity: .95;
    }

    /* ---------- 3. 搜索框：白色胶囊 + 左侧放大镜 + 右侧实心按钮 ---------- */
    .search-docs {
        width: 100% !important;
    }

    .search-d {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background: #fff;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
    }

    /* 左侧装饰性放大镜（不吞点击） */
    .search-d::before {
        content: '\e88b';
        font-family: "finex help" !important;
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        line-height: 1;
        color: #9aa4b8;
        pointer-events: none;
    }

    /* 输入框改为流内弹性宽度，彻底去掉 81%/79%/77%… 的手调 */
    .search-docs .search-d input,
    .search_content {
        position: static !important;
        flex: 1 1 auto;
        width: auto !important;
        height: 48px !important;
        line-height: 48px !important;
        padding: 0 76px 0 44px !important;
        border: none !important;
        border-radius: 999px !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 16px !important;      /* 16px：避免 iOS 聚焦时页面自动放大 */
        color: #333 !important;
        box-sizing: border-box;
    }

    .search_content::placeholder,
    .search-docs .search-d input::placeholder {
        font-size: 14px !important;
        color: #a0a6b2 !important;
    }

    .search_content::-webkit-input-placeholder,
    .search-docs .search-d input::-webkit-input-placeholder {
        font-size: 14px !important;
        color: #a0a6b2 !important;
    }

    .search_content:-moz-placeholder,
    .search_content::-moz-placeholder,
    .search_content:-ms-input-placeholder {
        font-size: 14px !important;
        color: #a0a6b2 !important;
    }

    /* 清除按钮：落在胶囊内部，垂直居中 */
    .search-docs .search-d .x-icon-del {
        top: 50% !important;
        right: 50px !important;
        height: 18px !important;
        line-height: 18px !important;
        font-size: 18px !important;
        color: #c2c8d4 !important;
        transform: translateY(-50%);
    }

    /* 提交按钮：右下角实心蓝圆，移动端有明确的“可点”入口 */
    .search-docs .x-icon {
        position: absolute !important;
        right: 6px;
        top: 50% !important;
        transform: translateY(-50%);
        margin: 0 !important;
        width: 36px;
        height: 36px;
        line-height: 36px !important;
        font-size: 17px !important;
        text-align: center;
        border: none;
        border-radius: 50%;
        color: #fff !important;
        background: #0265ff !important;
        box-shadow: 0 2px 6px rgba(2, 101, 255, .35);
        -webkit-tap-highlight-color: transparent;
    }

    .search-docs .x-icon:hover,
    .search-docs .x-icon:active {
        color: #fff !important;
        background: #0353d6 !important;
    }

    /* ---------- 4. 热词：改为可换行的胶囊标签组 ---------- */
    .searchHot {
        position: static !important;     /* 原 absolute，脱流导致溢出面板 */
        display: block !important;
        width: 100% !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
        text-align: left;
    }

    .searchHot .hot-word {
        display: block;
        margin: 0 0 8px;
        font-size: 12px !important;
        line-height: 1.4;
        color: rgba(255, 255, 255, .72) !important;
    }

    .searchHot .iblock {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .searchHot .iblock a {
        float: none !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        font-size: 12.5px !important;
        line-height: 1.3;
        color: #fff !important;          /* 原 #525956，蓝底上几乎看不见 */
        background: rgba(255, 255, 255, .15);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 999px;
        white-space: nowrap;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .searchHot .iblock a:active {
        background: rgba(255, 255, 255, .28);
        color: #fff !important;
    }

    /* ---------- 5. 卡片下方内容 ---------- */
    .search-cont {
        padding-top: 18px !important;
        margin-top: 12px !important;
    }

    .manual {
        padding-bottom: 12px;
    }

    .manual img {
        width: 100% !important;          /* 原 714px 固定宽，窄屏撑出横向滚动条 */
        max-width: 100%;
        padding-top: 8px;
    }
}

/* 小屏进一步压缩内边距，保证 320px 也不挤 */
@media (max-width: 400px) {
    .help_xin {
        margin: 0 10px !important;
    }

    .price-section-7 {
        padding: 20px 14px 18px !important;
    }

    .search-docs .search-d input,
    .search_content {
        padding: 0 68px 0 40px !important;
    }

    .search_content::placeholder,
    .search-docs .search-d input::placeholder,
    .search_content::-webkit-input-placeholder,
    .search-docs .search-d input::-webkit-input-placeholder {
        font-size: 13px !important;
    }

    .searchHot .iblock a {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
}