/* ============================================================
 * 房飞布 · 过户服务页  service-beautify.css
 * 作用域：body.service-page，只影响 service.html
 *
 * 设计语言与首页保持一致：
 *   品牌橙 #ff6e00 → #ff9a3c，白卡圆角 14px，阴影 0 2px 12px rgba(31,39,51,.05)
 *
 * ⚠️ 本文件不含任何 `{xxx}` 形式的 CSS 块嵌套（@keyframes / @media 内的花括号也避免），
 *    因为项目模板用 ThinkPHP 编译，内联花括号会被当模板标签。
 *    独立 .css 文件由浏览器加载，不经模板引擎，所以安全。
 * ============================================================ */

/* ---------- 0. 页面底色与横向留白 ---------- */
body.service-page {
    background: #f2f4f7;
}
body.service-page #box {
    padding: 0 12px;
    box-sizing: border-box;
}

/* ---------- 1. 顶部轮播 Banner ---------- */
body.service-page .wntx_header_loop_play {
    margin-top: 12px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(31, 39, 51, .08);
    background: #eef1f5;
    position: relative;
}
body.service-page .wntx_header_loop_play ul {
    margin: 0;
    padding: 0;
}
body.service-page .wntx_header_loop_play ul li {
    margin: 0;
    padding: 0;
    text-align: center;
}
body.service-page .wntx_header_loop_play ul li img {
    width: 100%;
    display: block;
    border-radius: 0;
}

/* 圆点指示器：原本被注释掉，这里恢复并浮到图片底部居中。
 * 没有指示器时用户不知道有 8 张图在轮播 —— 这是可用性问题，不只是美观。
 *
 * ⚠️ index_new.css 里 .wntx_header_loop_play_index span 写死了
 *    position:absolute; top:-60px; width:80px，会把我这层 flex 撑塌（实测只剩 18×10）。
 *    必须逐项 !important 覆盖，否则圆点会挤成一团。 */
body.service-page .wntx_header_loop_play_index {
    position: absolute !important;
    left: 50% !important;
    bottom: 9px !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    /* 不要深色底胶囊：截图里它像块膏药贴在图上。
     * 改为白色圆点 + 轻投影，在任何底色的图上都看得清，也不抢画面。 */
    background: transparent;
    border-radius: 10px;
    box-sizing: border-box !important;
    clear: none !important;
}
body.service-page .wntx_header_loop_play_index span {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    line-height: 0 !important;
    top: auto !important;
    margin: 0 !important;
    z-index: auto !important;
    text-align: center !important;
}
body.service-page .wntx_header_loop_play_index span a {
    display: block !important;
    float: none !important;
    width: 5px !important;
    height: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: width .22s ease, background .22s ease;
}
/* 激活态：拉长成短横条，比单纯变色更醒目 */
body.service-page .wntx_header_loop_play_index span a.active {
    width: 14px !important;
    background: #fff !important;
    border: none !important;
}

/* ---------- 2. 八大服务宫格 ---------- */
body.service-page .index_block {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 16px 10px 6px !important;
    margin-top: 12px !important;
    box-shadow: 0 2px 12px rgba(31, 39, 51, .05);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0;
}
body.service-page a.index_width25 {
    width: 25%;
    margin: 0 0 10px 0;
    padding: 8px 2px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 12px;
    transition: background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
body.service-page a.index_width25:active {
    background: #fff6ef;
    transform: scale(.94);
}
body.service-page a.index_width25 .index_top_img {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7f1;
    border-radius: 13px;
}
body.service-page a.index_width25 .index_top_img img {
    width: 28px;
    height: 28px;
    display: block;
}
body.service-page a.index_width25 .index_top_text {
    margin-top: 7px;
    font-size: 12px;
    line-height: 17px;
    color: #4a5058;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 3. 平台优势大图 ----------
 * 原图 1029×1683，底部自带一个「为您服务」白胶囊 —— 它是**图片像素**，点不了。
 * 处理：容器高度卡到 88%（正好裁掉那个假按钮），底部做白色渐隐过渡，
 *       下方接一个**真实可点**的咨询按钮。 */
body.service-page .svc-hero {
    margin-top: 12px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(31, 39, 51, .05);
    background: #eaf1fb;
    position: relative;
}
body.service-page .svc-hero > img {
    width: 100%;
    display: block;
    /* 原图 1029×1683，底部「为您服务」假按钮约在 90% 高度处。
     * 取 1029/1520（= 原图 90.3% 高度）：裁掉假按钮，同时保住书本/文件夹插画。 */
    aspect-ratio: 1029 / 1520;
    object-fit: cover;
    object-position: top center;
}
/* 底部渐隐：只做 28px 的极轻过渡，仅用于软化裁切边。
 * 原来 64px + 78% 不透明会把插画（书本、文件夹）盖掉一大片。 */
body.service-page .svc-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background: linear-gradient(180deg, rgba(234, 241, 251, 0) 0%, rgba(234, 241, 251, .85) 100%);
    pointer-events: none;
}
/* 外层容器由模板挂 .svc-hero 类名，不用 :has()（老 WebView 不支持） */

/* 真实可点的咨询按钮 */
body.service-page .svc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    margin: 12px 0 0;
    border-radius: 23px;
    background: linear-gradient(135deg, #ff9a3c, #ff6e00);
    box-shadow: 0 4px 14px rgba(255, 110, 0, .3);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s;
}
body.service-page .svc-cta:active {
    transform: scale(.97);
}
body.service-page .svc-cta svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

/* ---------- 4. Tab 切换 ---------- */
body.service-page .indexBanner {
    background: #fff;
    height: 52px;
    line-height: 52px;
    margin-top: 12px;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 2px 12px rgba(31, 39, 51, .05);
    overflow: hidden;
}
body.service-page .indexBanner ul {
    width: auto;
    margin: 0 14px;
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0;
}
body.service-page .indexBanner ul li {
    flex: 0 0 auto;
    float: none;
    position: relative;
    height: 52px;
    line-height: 52px;
    padding: 0 15px;
    color: #6b7280;
    font-size: 15px;
    transition: color .15s;
}
body.service-page .indexBanner ul li.hover {
    background-image: none !important;
    background: none !important;
    color: #ff6e00;
    font-weight: 600;
}
body.service-page .indexBanner ul li.hover::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff9a3c, #ff6e00);
}

/* ---------- 5. 内容区容器 ---------- */
body.service-page #vue_box {
    background: #fff;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 2px 12px rgba(31, 39, 51, .05);
    padding-bottom: 8px;
    margin-top: 0;
}
/* 模板里写死了 width: calc(100% - 30px)，与 #box 的 padding 叠加会变窄，这里拉回 */
body.service-page #vue_box > div[style*="calc(100%"] {
    width: 100% !important;
    margin: 0 !important;
}

/* ---------- 6. 文章 / 问答列表卡片 ---------- */
body.service-page .news-List ul {
    padding: 0;
    margin: 0;
}
body.service-page .news-List li {
    margin: 0 14px;
    padding: 14px 0;
    background: transparent;
    border-bottom: 1px solid #f2f4f7;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 0;
}
body.service-page .news-List li:last-child {
    border-bottom: none;
}
body.service-page .news-List li > div:first-child {
    flex: 1;
    min-width: 0;
    padding-right: 12px;
}
body.service-page .article_title {
    height: auto;
    max-height: 42px;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    color: #1f2733;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.service-page .article_time {
    margin-top: 6px;
    line-height: 18px;
    font-size: 11.5px;
    color: #a0a6b0;
    text-align: left;
}
body.service-page .article_image {
    flex: 0 0 92px;
    width: 92px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f5f7;
}
body.service-page .news-List li img {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

/* 问答：左侧图标（原为橙色方块 + 「问」字，改为矢量对话气泡问号）
 * ⚠️ index_new.css 里写死了 width:30px; height:30px; border-radius:2px，
 *    且父级 li 是 flex，不锁 flex-shrink 会被拉成横向椭圆（实测变成 200×30）。
 *    这里尺寸类属性全部 !important，把宽高锁死。
 * 模板里的文本「问」用 font-size:0 隐藏，视觉由背景 SVG 承担
 * （这样无需改模板，服务端渲染的文本仍保留在 DOM 里）。 */
body.service-page .question_icon {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    /* 圆角方形（iOS squircle 观感）比正圆更现代，也与站内卡片圆角呼应 */
    border-radius: 9px !important;
    /* 渐变 + 矢量气泡问号图标，居中、按 17px 渲染 */
    background-color: #ff7a1a;
    background-image: url(../images/icons/qa_bubble.svg),
                      linear-gradient(135deg, #ff9a3c 0%, #ff6e00 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 17px 17px, 100% 100%;
    color: transparent;
    font-size: 0 !important;   /* 隐藏模板里的「问」字 */
    text-align: center;
    margin: 0 10px 0 0 !important;
    box-shadow: 0 2px 8px rgba(255, 110, 0, .26);
    box-sizing: border-box !important;
    overflow: hidden;
    flex-shrink: 0 !important;
}
body.service-page .question_txt {
    flex: 1;
    min-width: 0;
}
body.service-page .question_answer {
    margin-top: 2px;
    color: #8a9099;
    font-size: 12.5px;
    line-height: 19px;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.service-page .cl15 {
    display: none;
}

/* ---------- 7. 收尾留白（底部导航 50 + 凸起按钮 45 + 呼吸 25） ---------- */
body.service-page #box + .cl {
    height: 120px !important;
}

/* ---------- 8. 悬浮分享按钮在服务页的避让 ---------- */
body.service-page .share_user {
    top: 74% !important;
    right: -6px !important;
}

/* ==========================================================================
 * 9. 「相关知识 / 相关问答」列表（v2 强化）
 * 背景：这两个列表由服务端一次性返回 18 篇 + 9 条（共 27 行），
 *       且 17 张列表图合计约 7.1MB（13 张单张 >300KB）。
 *       不加处理时首屏极慢、图片逐张跳出、页面被拉得很长。
 * 处理：列表图懒加载 + 固定容器尺寸防抖动；长列表默认折叠。
 * ========================================================================== */

/* Tab 上的条数徽标 */
body.service-page .indexBanner ul li .tab_num {
    display: inline-block;
    min-width: 18px;
    height: 17px;
    line-height: 17px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f2f4f7;
    color: #8a9099;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    vertical-align: 1px;
    box-sizing: border-box;
}
body.service-page .indexBanner ul li.hover .tab_num {
    background: #fff2e8;
    color: #ff6e00;
}

/* 折叠：默认隐藏第 N 条之后的内容 */
body.service-page .news-List li.art_hidden {
    display: none !important;
}

/* 「展开全部」按钮 */
body.service-page .list_more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 2px 14px 6px;
    border-radius: 22px;
    background: #f7f8fa;
    color: #6b7280;
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
}
body.service-page .list_more:active {
    background: #fff2e8;
    color: #ff6e00;
}
body.service-page .list_more .lm_arrow {
    width: 7px;
    height: 7px;
    margin: -3px 0 0 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

/* 列表行：补点击反馈 + 更清晰的上下留白 */
body.service-page .news-List li {
    transition: background-color .12s;
    -webkit-tap-highlight-color: transparent;
}
body.service-page .news-List li:active {
    background: #fafbfc;
}
/* 相关知识：文字区（原来用的是无类名的裸 div，这里显式声明，避免被别的规则误伤） */
body.service-page .news-List li > .art_txt {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 12px;
}
/* 标题链接继承文字色，避免默认蓝色下划线 */
body.service-page .article_title a,
body.service-page .article_title a.link {
    color: inherit;
    text-decoration: none;
}
body.service-page .news-List li:active .article_title {
    color: #ff6e00;
}

/* 时间行：前置一个小圆点，弱化但与标题分行清晰 */
body.service-page .article_time {
    position: relative;
    padding-left: 0;
}

/* 缩略图容器：固定尺寸 + 占位底色，图片未加载/失败时不塌陷、不出现裂图标 */
body.service-page .article_image {
    position: relative;
    background: #f4f5f7;
}
body.service-page .article_image img {
    display: block;
}

/* 「暂无回答」：弱化成浅灰胶囊，与真实答案区分开 */
body.service-page .question_answer.no_answer {
    display: inline-block !important;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 9px;
    background: #f2f4f7;
    color: #9aa2ad;
    font-size: 11.5px;
    line-height: 17px;
    -webkit-line-clamp: none;
}
/* 有真实回答时：左侧一条细竖线，强化「这是回答」 */
body.service-page .question_answer:not(.no_answer) {
    padding-left: 9px;
    border-left: 2px solid #ffe3ca;
}