/* ============================================================
 * 房飞布 · 首页视觉升级  home-beautify.css
 * 作用域：body.home-page，只影响首页，不污染全局 style.css
 * 设计语言：品牌橙 #ff6e00 → #ff9a3c，圆角 14px，柔和投影
 * ============================================================ */

/* ---------- 0. 页面底色与节奏 ---------- */
body.home-page {
    background: #f2f4f7;
    /* 底部导航 + 居中悬浮发布按钮的让位由 mobile-enhance.js 统一处理，此处不重复 */
}
body.home-page #box {
    padding: 0 12px;
    box-sizing: border-box;
}

/* ---------- 1. 顶部搜索栏 ----------
 * 顶栏已抽到全局样式 header-unify.css（由 Index/new_top.html 与 Index/n_head.html
 * 两个头部模板共同引入），实现全站一致。此处不再重复定义，避免两处维护走样。 */


/* ---------- 2. 四入口（最新求购 / 业主急售 / 最新求租 / 房东急租） ---------- */
body.home-page .index_block.home-entry {
    background: #fff;
    margin-top: 12px;
    padding: 16px 8px 12px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(31, 39, 51, .05);
    box-sizing: border-box;
}
body.home-page a.list_index_bar {
    width: 25%;
    display: block;
    text-align: center;
    transition: transform .15s;
}
body.home-page a.list_index_bar:active {
    transform: scale(.94);
}
body.home-page a.list_index_bar img {
    width: 46px;
    height: 46px;
    margin: 0 auto;
    display: block;
}
body.home-page .index_top_txt {
    height: auto;
    line-height: 20px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-align: center;
    letter-spacing: .2px;
}

/* ---------- 3. 服务区（过户员/贷款专员/法拍专员 + 八宫格） ---------- */
body.home-page .index_block[style*="border-radius: 5px"] {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 14px !important;
    padding-bottom: 4px !important;
    margin-top: 12px !important;
    box-shadow: 0 2px 12px rgba(31, 39, 51, .05);
    box-sizing: border-box;
}
/* 三个专员大卡：圆角 + 按压 */
body.home-page a.index_width30 {
    width: calc(33.33% - 8px);
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(31, 39, 51, .07);
    transition: transform .15s;
}
body.home-page a.index_width30:active {
    transform: scale(.96);
}
body.home-page a.index_width30 img {
    width: 100%;
    display: block;
    border-radius: 12px;
}
/* 八宫格服务项 */
body.home-page a.index_width25 {
    width: 25%;
    margin-bottom: 12px;
    text-align: center;
    border-radius: 10px;
    padding: 6px 0;
    transition: background .15s, transform .15s;
}
body.home-page a.index_width25:active {
    background: #fff6ef;
    transform: scale(.95);
}
body.home-page a.index_width25 img {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
}
body.home-page .index_top_text {
    margin-top: 6px;
    font-size: 12px;
    color: #4a5058;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 4. VIP 横幅：收圆角 ---------- */
body.home-page #box > a > img[src*="indexbanner"] {
    border-radius: 12px;
    display: block;
    box-shadow: 0 3px 12px rgba(255, 110, 0, .16);
}

/* ---------- 5. 四宫格（我要买房/卖房/出租/租房） ---------- */
body.home-page .index_block.home-grid4 {
    margin-top: 12px;
    gap: 0;
    /* 两行卡片间距由卡片的 margin-bottom 撑开；再锁死 row-gap 并让内容顶部对齐，
     * 避免某些 WebView 把容器剩余高度摊到两行之间，出现一大块空白 */
    row-gap: 0;
    align-content: flex-start;
}
body.home-page a.index_width48 {
    width: calc(50% - 5px);
    padding: 14px 8px;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(31, 39, 51, .05);
    box-sizing: border-box;
    align-items: center;
    transition: transform .15s, box-shadow .15s;
}
body.home-page a.index_width48:active {
    transform: scale(.97);
    box-shadow: 0 1px 6px rgba(31, 39, 51, .08);
}
body.home-page a.index_width48 div.index_img img {
    width: 50px;
    margin-left: 6px;
    display: block;
}
body.home-page a.index_width48 div.index_txt {
    margin-left: 8px;
    flex: 1;
    min-width: 0;
}
body.home-page .index_title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2733;
    line-height: 24px;
    letter-spacing: .3px;
}
body.home-page .index_detail {
    color: #9aa0aa;
    font-size: 12px;
    line-height: 18px;
    margin-top: 2px;
}

/* ---------- 6. 需求大厅 Tab ----------
 * 与「查客户」页（body.wt-page / wt-beautify.css）**逐项对齐**：
 *   48px 高、全宽白条、无圆角、5 项均分（每项 75px）、
 *   选中橙色 600 字重 + 24px 渐变短横条（bottom 5px）。
 * 首页原来是 52px + 左对齐 + 圆角卡片的一部分，视觉上跟查客户是两个东西。 */
body.home-page .indexBanner {
    /* 破出 #box 的两层收缩，做成和查客户一样的 390px 全宽白条：
     *   #box { width: calc(100% - 30px); margin: 0 auto }  → 左右各 15px
     *   我再加的 #box { padding: 0 12px }                → 左右各 12px
     * 合计每侧 27px，所以 margin 取 -27px、width 补 +54px。 */
    margin: 12px -27px 0;
    width: calc(100% + 54px);
    background: #fff;
    height: 48px;
    line-height: 48px;
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(31, 39, 51, .05);
    font-size: 15px;
    overflow: visible;
}
body.home-page .indexBanner ul {
    /* 96% 宽居中：390px 视口下每项正好 75px，与查客户完全一致 */
    width: 96%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    height: 48px;
}
body.home-page .indexBanner ul li {
    flex: 1 1 0;
    float: none;
    position: relative;
    height: 48px;
    line-height: 48px;
    padding: 0;
    text-align: center;
    color: #666;
    /* 16px：查客户页实测 li 是 16px（.search_area 上写的 15px 没落到 li） */
    font-size: 16px;
    box-sizing: border-box;
    transition: color .2s;
}
/* 选中态：橙色 + 渐变短横条 */
body.home-page .indexBanner ul li.hover {
    background-image: none !important;
    background: none !important;
    color: #ff6e00;
    font-weight: 600;
}
body.home-page .indexBanner ul li.hover::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ffa14d, #ff6e00);
}
/* 「更多 >」：查客户页没有这个入口，且 5 个 Tab 已覆盖全部分类、
 * 底部导航也有「查客户」，保留会挤掉每项 75px 的均分布局，故隐藏。
 * 如需恢复，把下面 display 改成 inline-block 即可（HTML 未删除）。 */
body.home-page .indexBanner > span {
    display: none !important;
}

/* ---------- 7. 需求卡片列表 ----------
 * 与查客户页对齐：**从"合并成一张大卡"改为"每张独立卡片"**。
 * 查客户是独立白卡 + 14px 圆角 + 12px 间距，首页原来是同一张卡内用 1px 分隔线。 */
body.home-page .index_wt_block {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 4px;
    margin-top: 0;
}
body.home-page .listCustomer {
    background: #fff;
    margin: 12px 0;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(31, 39, 51, .06);
    border-bottom: none;
    transition: transform .15s ease;
    overflow: hidden;
    font-size: 13px;
}
body.home-page .listCustomer:active {
    transform: scale(.985);
}
/* 头部行：34px 与头像同高 */
body.home-page .listCustomer div.top {
    display: flex;
    align-items: center;
    height: 34px;
}
body.home-page .listCustomer span.photo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    float: none;
    border-radius: 50%;
    background: #fff3e9 url("/Public/images/agent.png") no-repeat center bottom;
    background-size: 28px;
    border: none;
    box-sizing: border-box;
}
body.home-page .listCustomer span.sex {
    flex: 0 1 auto;
    float: none;
    width: auto;
    height: 34px;
    line-height: 34px;
    margin-left: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}
body.home-page .listCustomer span.is_top {
    flex: 0 0 auto;
    float: none;
    width: auto;
    min-width: 40px;
    height: 20px;
    line-height: 20px;
    margin: 7px 0 0 8px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 11px;
    background: linear-gradient(90deg, #ff9a3c, #ff6e00);
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    box-shadow: 0 2px 6px rgba(255, 110, 0, .3);
}
/* 电话按钮 / 联系按钮：统一为橙色渐变填充（查客户页规格）
 * 原来「联系房东」是浅橙描边，与查客户的实心渐变成两种按钮，这里统一。 */
body.home-page .top_contact_mobile,
body.home-page .top_contact {
    /* 与查客户页（.wt-page .top_contact）完全一致：
     * 定宽 90px + padding 0 + 文字居中 + 左上角压电话图标。
     * 图标占 10~22px，文字居中后自然落在图标右侧，不需要额外左内边距。 */
    position: static !important;
    margin-left: auto !important;
    flex: 0 0 90px !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 16px !important;
    background-image: url("../images/wt_mobile.png"), linear-gradient(90deg, #ff9a3c, #ff6e00) !important;
    background-repeat: no-repeat !important;
    background-position: 10px center, 0 0 !important;
    background-size: 12px, cover !important;
    /* 纯色兜底：渐变不生效的老 WebView 上仍显示橙底，不会变透明 */
    background-color: #ff6e00 !important;
    font-size: 12px !important;
    font-weight: 400;
    color: #fff !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(255, 110, 0, .28);
}
/* 电话按钮左边留图标位；联系按钮不需要图标，左内边距收小 */
body.home-page .top_contact_mobile {
    /* ⚠️ 电话按钮不能跟「联系 xx」一样锁 90px：
     * 11 位号码文本宽 77px + 图标位 22px = 99px，90px 下会被裁掉 3 位数字（实测溢出 9px）。
     * 这里放开宽度让号码完整显示，其余属性与基准一致。 */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 11px 0 24px !important;
    letter-spacing: -.3px;
}
body.home-page .top_contact {
    /* 与查客户页完全一致：定宽 90px + padding 0 + 居中。
     * 图标压在左侧 10~22px，文字居中后自然落在图标右侧，不需要额外左内边距。
     * （之前用 padding-left:26px 自适应宽度，按钮会涨到 115px，比基准宽 25px） */
    width: 90px !important;
    min-width: 90px !important;
    padding: 0 !important;
    background-image: url("../images/wt_mobile.png"), linear-gradient(90deg, #ff9a3c, #ff6e00) !important;
    background-repeat: no-repeat !important;
    background-position: 10px center, 0 0 !important;
    background-size: 12px, cover !important;
    letter-spacing: .2px;
}
/* 主体：左图右文（图 92×92，与查客户一致） */
body.home-page .listBody {
    margin-top: 16px !important;
    display: flex;
    align-items: flex-start;
}
body.home-page .listBody_left {
    float: none !important;
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f3f4;
}
body.home-page .listBody_left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}
body.home-page .listBody_right {
    flex: 1 1 auto;
    width: calc(100% - 104px);
    min-width: 0;
    margin-left: 12px;
    padding-left: 0;
    float: none !important;
}
/* 标题行：26px 高，14px / #222 */
body.home-page .body_main {
    height: 26px;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
body.home-page .body_main span.type {
    flex: 1 1 auto;
    /* min-width:0 + nowrap + ellipsis 三件套缺一不可：
     * 少了 min-width:0 长标题会把价格顶出卡片 */
    min-width: 0;
    width: auto;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
body.home-page .body_main span.price {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: #ff6e00;
    line-height: 26px;
    white-space: nowrap;
    letter-spacing: -.2px;
}
/* 明细行：21px 行高，12px / #555，标签 #999 */
body.home-page .listCustomer div.detail {
    margin-top: 3px;
    font-size: 12px;
    line-height: 21px;
    color: #555;
}
body.home-page .listCustomer div.detail div {
    height: 21px;
    line-height: 21px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.home-page .listCustomer div.detail div:first-child {
    margin-top: 0;
}
body.home-page .listCustomer div.detail span {
    color: #999;
}

/* ---------- 8. 底部资讯四栏 ---------- */
body.home-page .index_block.home-news {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 14px 12px !important;
    margin-top: 12px !important;
    box-shadow: 0 2px 12px rgba(31, 39, 51, .05);
    box-sizing: border-box;
    gap: 4px;
}
body.home-page .width24 {
    width: calc(25% - 6px);
    transition: transform .15s;
}
body.home-page .width24:active {
    transform: scale(.95);
}
body.home-page .main_title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2733;
    height: auto;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.home-page .subtitle {
    font-size: 11px;
    color: #9aa0aa;
    line-height: 16px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.home-page .width24 > div:last-child {
    margin-top: 8px;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f5f7;
}
body.home-page .width24 img {
    width: 100%;
    height: 68px;
    object-fit: cover;
    display: block;
}

/* ---------- 9. 吸底元素避让 ----------
 * 首页有 3 个 fixed 元素会压内容：.new_foot（底部导航 50px）、
 * .middle_send（凸起的 + 发布按钮，比导航再高出约 45px）、.share_user（右侧分享 50px）。
 * 这里只做「让位」，不动它们的位置和功能——因为它们是全站组件，改位置会影响其它页面。 */
body.home-page #box > .cl:last-child {
    /* 底部导航 50 + 凸起按钮 45 + 呼吸 25 */
    height: 120px !important;
}
/* 右侧分享按钮：原样式 50×50 固定 60% 高度，正好压住卡片的「联系房东」按钮。
 * 处理思路——保留功能，只降低视觉与操作上的侵占：
 *   1) 缩到 44×44，向右贴边（right:-2px），实际露出宽度更小
 *   2) 白底橙字，压在内容上不刺眼，也和浅色卡片更协调
 *   3) 下移到 78%，避开卡片右上角操作按钮密集区 */
body.home-page .share_user {
    /* ⚠️ share_new.png 是纯白图标（实测 RGB 255,255,255）。
     * 上一版把按钮改成白底，图标与底色同色 → 完全隐形。这里改回品牌橙底 + 白图标。
     *
     * 尺寸账（44×44 内含 2px 白描边，可用内容区 40px）：
     *   图标 16px 放在 center 3px → 占 3~19px
     *   文字 10px 行高 11px，从 20px 起 → 占 20~31px，落在 40px 内不会被裁 */
    top: 78% !important;
    right: -7px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 20px 0 0 0 !important;
    box-sizing: border-box !important;
    line-height: 11px !important;
    font-size: 10px !important;
    text-align: center !important;
    color: #fff !important;
    background-color: #ff6e00 !important;
    background-image: url("/Public/images/share_new.png") !important;
    background-repeat: no-repeat !important;
    background-position: center 3px !important;
    background-size: 16px 16px !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 12px rgba(255, 110, 0, .35);
    opacity: 1 !important;
    overflow: hidden !important;
}
/* 中间凸起按钮：加一点投影，让它和内容有层次，减少贴脸感 */
body.home-page .middle_send {
    filter: drop-shadow(0 3px 10px rgba(255, 110, 0, .28));
}

/* ---------- 10. 说明 ----------
 * 本文件不使用 :has() 等新特性，全部靠模板上挂的显式类名定位：
 *   .home-entry（四入口）/ .home-grid4（我要买房等四卡）/ .home-news（底部资讯四栏）
 * 保证 App 内置老 WebView 也能正确渲染。 */

/* ---------- 11. 需求卡片标题单行兜底 ----------
 * 部分卡片没有 price 节点（如部分求租/出租），标题会独占整行；
 * 个别安卓 WebView 下   连写的「求租  |  整租」仍可能折行，这里再兜一层。 */
body.home-page .listCustomer .body_main {
    flex-wrap: nowrap;
    overflow: hidden;
}
body.home-page .listCustomer .body_main span.type {
    white-space: nowrap !important;
    word-break: keep-all;
    overflow-wrap: normal;
}