/* ============================================================
   webhosting-basic-page.css
   虚拟主机子页（basic 等）专用样式（从 Tpl_2016/css/webhosting-common.css
   1:1 复刻 .content-title 系列样式）
   引用：webhosting-basic.blade.php
   ============================================================ */

/* ⭐ 2026-07-28 老板改主意：恢复外层灰色 #f2f3f5 容器背景，让"介绍区白底 + 外层灰色"形成层次
   （之前 v24 改 transparent 导致 .whp-basic-title 的白底被图片带透明，视觉融合） */
.whp-basic {
    background: #f2f3f5;
    padding: 20px 0 40px;
}
.whp-basic-inner {
    /* ⭐ 2026-07-20 老板实测：1216px = 1280px header 减去左右 32px 边距，跟 logo 视觉对齐 */
    width: 1216px;
    max-width: 100%;
    margin: 0 auto;
}

/* 主机介绍标题区（左图 + 右文） */
.whp-basic-title {
    /* 左边距 410px：图片宽 380 + 间距 30 ≈ 与原 1:1 比例一致，且适配 1280 容器 */
    padding: 50px 30px 20px 410px;
    min-height: 240px;
    height: auto;
    background-repeat: no-repeat;
    background-position: top left;
    /* ⭐ 2026-07-28 修复：v24 设计要求"红框内白底保留"（见 2026-07-20.md line 933），之前某次误改为 transparent 导致与网页背景视觉融合 */
    background-color: #fff;
    background-image: url(/images/webhosting/basic/webhosting-basic.jpg);
}
.whp-basic-title h1 {
    font-size: 30px;
    color: #585858;
    margin: 0 0 20px 0;
    font-weight: 700;
}
.whp-basic-title p {
    padding-right: 10px;
    line-height: 2;
    font-size: 14px;
    color: #727272;
    margin: 0 0 4px 0;
}

/* ============================================================
   ⭐ 2026-07-20 老板需求：3 icon 长卡片区域（1:1 复刻 Tpl_2016 .contactout）
   3 个 inline-block 元素：邮件说明 / QQ 在线咨询 / 24小时客服热线
   - 第 1 个：写死文字 "优惠赠送邮箱：5G，邮箱用户数量：5个"
   - 第 2 个：QQ 链接 url + qq_number 动态来自 side_bar_buttons.key=qq
   - 第 3 个：客服热线动态来自 side_bar_buttons.key=phone.featured_phones
   - 3 个 icon 都来自 /images/webhosting/basic/newhost-icon.png 雪碧图
   ============================================================ */
.whp-contactout {
    /* 1:1 复刻 Tpl_2016 .contactout（行 515-523）*/
    /* ⭐ 2026-07-20 老板实测：宽度 1190px（跟上面 wb-product-row 1190px 对齐 = 3 个产品卡总宽），高度 79px（line-height 79 让 3 个元素垂直居中） */
    width: 1190px;
    max-width: 100%;
    margin: 30px auto 0;
    height: 79px;
    line-height: 79px;
    border-top: 1px solid #e5f5ff;
    padding: 0 22px;
    text-align: center;
    font-size: 0; /* 消除行内元素白边距 */
    /* 1:1 复刻 Tpl_2016 .contactout 白底 + contact-bg1.jpg 贴右 */
    background: url(/images/webhosting/basic/contact-bg1.jpg) no-repeat right top #fff;
    box-shadow: 0px 5px 10px -3px rgba(15, 61, 104, 0.07);
    box-sizing: border-box;
}
.whp-contactout-item {
    display: inline-block;
    vertical-align: middle;
    padding: 0 40px;
    font-size: 16px;
    line-height: 1;
    color: #333;
    text-align: left;
}
/* 首项不增加左 padding，紧挨 whp-basic-inner 左对齐 */
.whp-contactout-gift {
    color: #fc7922; /* 旧模板：橙红色，匹配图标橙 */
}
.whp-contactout-gift .whp-contactout-i {
    background: url(/images/webhosting/basic/newhost-icon.png) no-repeat 0 0;
    width: 27px;
    height: 27px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
}
.whp-contactout-qq {
    border-left: 1px solid #cbcbcb;
    border-right: 1px solid #cbcbcb;
}
.whp-contactout-qq a {
    color: #2086ee; /* 旧模板：QQ 蓝色 */
}
.whp-contactout-qq a.whp-contactout-off {
    color: #ff7800; /* ⭐ 2026-07-27：下班文案用橙色（提示性而非客服在线色），跟电话浮窗 offHoursMessage 配色一致 */
}
.whp-contactout-qq .whp-contactout-i {
    background: url(/images/webhosting/basic/newhost-icon.png) no-repeat 0 -35px;
    width: 20px;
    height: 23px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
}
/* ⭐ 2026-07-27：下班时间 QQ 卡片显示"提交工单"图标（用 newhost-icon.png 第 3 行 -100px 偏移） */
.whp-contactout-qq a.whp-contactout-off .whp-contactout-i {
    background: url(/images/webhosting/basic/newhost-icon.png) no-repeat 0 -100px;
}
.whp-contactout-tel {
    /* 末项：只有左边框，跟 qq 共享 */
}
.whp-contactout-tel .whp-contactout-i {
    background: url(/images/webhosting/basic/newhost-icon.png) no-repeat 0 -68px;
    width: 18px;
    height: 23px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
}
.whp-contactout-text {
    display: inline-block;
    vertical-align: middle;
}
.whp-contactout-text strong {
    color: #fc7922;
}