/* ============================================================
   webhosting-compare.css
   HostPage 产品配置表（多线/ASP/JSP 等所有机型的 4 张子表对比）
   2026-07-21 重写：严格 1:1 复刻 Tpl_2016/css2016/common/webhosting-common.css
   ============================================================ */

/* ====== 容器 ====== */
.whp-compare-wrapper {
    width: 100%;
    background: #f2f3f5;
    /* 2026-07-21 v30：把顶部留白从内部 .whp-compare margin 改到 wrapper padding，
       避免 margin collapse 在 #content 和 wrapper 之间产生白色间隙 */
    padding-top: 30px;
    /* 2026-07-21 v32（方案A）：小屏时允许整体横向滚动，tab 与表格保持一行不被挤换行 */
    overflow-x: auto;
    /* 隐藏滚动条视觉干扰但仍可滚动（WebKit） */
    -webkit-overflow-scrolling: touch;
}

.whp-compare {
    width: 1216px;
    max-width: 100%;
    /* 2026-07-21 v32：保证 4 个 tab 最小总宽 1214px，小屏时被压缩到此宽度并触发横向滚动，而非换行 */
    min-width: 1214px;
    margin: 0 auto;
    background: transparent;
    padding: 0 0 40px;
}

/* ====== 标题区 ====== */
.whp-compare .webhosting-title {
    text-align: center;
    background: transparent;
}
.whp-compare .webhosting-title h3 {
    font-size: 24px;
    color: #505050;
    font-weight: 500;
    margin: 0;
}
.whp-compare .webhosting-title .web-line {
    margin: 10px auto 0;
    width: 94px;
    border-bottom: 2px solid #777;
}
.whp-compare .webhosting-title .web-wavy-line {
    width: 47px;
    background: #f2f3f5;
    margin: -12px auto 0;
    position: relative;
    z-index: 1;
}
.whp-compare .webhosting-title .web-wavy-line i {
    display: inline-block;
    width: 37px;
    height: 6px;
    background: url(/images/webhosting/triangle2.jpg) repeat-x;
}

/* ====== Sub-tab 按钮 ====== */
.whp-compare .webhosting-tab {
    margin-top: 20px;
}
.whp-compare .webhosting-tab-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.whp-compare .webhosting-tab-list::after {
    content: '';
    display: table;
    clear: both;
}
.whp-compare .webhosting-tab-list li {
    float: left;
    margin-right: 10px;
    display: inline-block;
    width: 296px;
    height: 50px;
    line-height: 50px;
    background: #2086ee;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.whp-compare .webhosting-tab-list li:last-child {
    margin-right: 0;
}
.whp-compare .webhosting-tab-list li.active {
    width: 294px;
    background: #fff;
    border: 1px solid #dfdfdf;
    border-bottom: 0;
}
.whp-compare .webhosting-tab-list li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0 10px;
}
.whp-compare .webhosting-tab-list li.active a {
    padding: 0 10px;
    color: #313131;
    position: relative;
}
.whp-compare .webhosting-tab-list li.active a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;             /* 蓝色下划线贴近 tab 底部，与模板一致 */
    transform: translateX(-50%);
    width: 4em;              /* 约等于 4 个汉字宽度 */
    height: 2px;
    background: #00a0e9;
}
.whp-compare .webhosting-tab-list li:hover {
    opacity: 0.92;
}

/* ====== Sub-tab 内容区 ====== */
.whp-compare .wjf-ui-tab-content {
    display: none;
}
.whp-compare .wjf-ui-tab-content.active {
    display: block;
}
.whp-compare .wjf-ui-tab-content.webhosting-server.active {
    /* 2026-07-21 v34：降低 stacking context，避免高亮层遮挡 fixed 顶部导航下拉菜单 (header z-index 50) */
    position: relative;
    z-index: 1;
}
.whp-compare .webhosting-info {
    padding: 26px 10px 20px;
    background: #fff;
    position: relative;
}

/* ====== 表格 ====== */
.whp-compare .webhosting-table {
    width: 100%;
    border: 1px solid #e9e9e9;
    text-align: center;
    table-layout: fixed;
    border-collapse: collapse;
}
.whp-compare .webhosting-table tr {
    height: 70px;
}
.whp-compare .webhosting-table tbody tr:nth-child(even) {
    background-color: #f4faff;
}
.whp-compare .webhosting-table tr th {
    height: 56px;
    background: #e6f5ff;
    font-size: 14px;
    font-weight: 700;
    color: #555;
    border-right: 1px solid #d5e3f5;
    border-bottom: 1px solid #e9e9e9;
    position: relative;
    z-index: 1;
}
.whp-compare .webhosting-table tr td {
    border-right: 1px solid #d5e3f5;
    font-size: 12px;
    color: #202020;
    border-bottom: 1px solid #e9e9e9;
    word-break: break-all;
    padding: 10px;
    vertical-align: middle;
}
.whp-compare .webhosting-table tr .left {
    padding-left: 10px;
    width: 120px;
    background: #f9f9f9;
    border-right-color: #e9e9e9;
    font-size: 14px;
    font-weight: 400;
    color: #202020;
    text-align: left;
}
.whp-compare .webhosting-table tr .left small {
    display: block;
    color: #888;
    font-size: 12px;
    margin-top: 2px;
}

/* ====== 价格单元格 ====== */
.whp-compare .info-price {
    padding-top: 30px;
    color: #8c8b8b;
    position: relative;
}
.whp-compare .info-price span {
    font-size: 26px;
    font-weight: 700;
    color: #ff5f20;
}

/* ====== 立即购买按钮 ====== */
.whp-compare .info-btn {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 35px;
    width: 90px;
    height: 30px;
    line-height: 30px;
    background: #2086ee;
    font-size: 14px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease;
}
.whp-compare .info-btn:hover {
    background: #1a76d4;
    color: #fff;
}

/* ====== info-icon（雪碧图 right/no/add） ====== */
.whp-compare .info-icon {
    display: inline-block;
    margin-right: 5px;
    width: 12px;
    height: 12px;
    background: url(/images/webhosting/compare/basic-icon.jpg) no-repeat;
    vertical-align: middle;
}
.whp-compare .info-icon.no {
    width: 12px;
    background-position: -164px 0;
}
.whp-compare .info-icon.add {
    width: 16px;
    height: 16px;
    background-position: -326px 0;
}
.whp-compare .info-icon.right {
    width: 14px;
    background-position: 0 0;
}
.whp-compare .webhosting-table tbody tr:nth-child(even) .info-icon.no {
    background-position: -164px -110px;
}
.whp-compare .webhosting-table tbody tr:nth-child(even) .info-icon.add {
    background-position: -326px -110px;
}
.whp-compare .webhosting-table tbody tr:nth-child(even) .info-icon.right {
    background-position: 0 -110px;
}

/* ====== link（蓝色文字链接） ====== */
.whp-compare .link {
    color: #0a74e0;
    text-decoration: none;
}
.whp-compare .link:hover {
    text-decoration: underline;
}

/* ====== 鼠标悬停列高亮（模板 high-light-table） ====== */
.whp-compare .high-light-table {
    position: absolute;
    top: 24px;
    left: 10px;
    width: 144px;
    background-color: #fff;
    border: 1px solid #ffaf90;
    box-shadow: 0 0 5px 1px #ffaf90;
    /* 2026-07-21 修复：与原表 webhosting-table 一致，table-layout: fixed + border-collapse: collapse
       让 tr height 表现为 min-height（被 td 内容撑开）；不设这俩属性时 tr height 失效 */
    table-layout: fixed;
    border-collapse: collapse;
    z-index: 1;              /* 与父 stacking context 同级，不高于顶部导航 */
    display: none;
    pointer-events: none;
}
.whp-compare .high-light-table.show {
    display: table;
}
.whp-compare .high-light-table th,
.whp-compare .high-light-table td {
    text-align: center;
    /* 2026-07-21 修复：hlTable 内部必须 border: none（恢复 v30 模板原版），
       否则会出现水平分割线，破坏"纯净白底红边框"高亮效果。
       之前 v6 误加 border-bottom: 1px solid #e9e9e9 导致每行显示灰色横线，撤掉。*/
    border: none;
    font-size: 12px;
    color: #202020;
    background: transparent;
    padding: 10px;              /* 与原表单元格一致，避免克隆后内容错位 */
    vertical-align: middle;     /* 与原表单元格一致 */
}
/* 2026-07-21 修复：tr height: 70px 在 table-layout:fixed + border-collapse:collapse 模式下表现为 min-height
   - 70px 行：height 70px 生效
   - 80px 行（PHP/MSSQL/图片组件副标题）：被 td 内容撑到 80
   - 165px 行（价格 + 按钮多行）：被 td 内容撑到 165
   与 webhosting-table tr { height: 70px } 行为完全一致 */
.whp-compare .high-light-table thead tr {
    height: 56px;
}
.whp-compare .high-light-table tbody tr {
    height: 70px;
}
.whp-compare .high-light-table th {
    /* 2026-07-21 修复：th 必须 background: #fff（纯净白底，与 tbody td 一致）。
       之前 #e6f5ff 让标题行（如"体验型主机"）显示浅蓝色，破坏"纯净白底红边框"高亮效果。
       v30 模板原版的 th 是透明色，但我们这里要纯净白底以匹配 tbody 单元格。*/
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #555;
}
.whp-compare .high-light-table tr td .info-btn {
    background-color: #0eb7fd;  /* 列 hover 时按钮变亮蓝 */
}
.whp-compare .high-light-table tr.last-row td {
    border-bottom: 0;
}

/* ====== 高亮列 ====== */
.whp-compare .webhosting-table .highlight-cell {
    background-color: #eaf7ff;
    border-left: 2px solid #3db514;
    border-right: 2px solid #3db514;
}
.whp-compare .webhosting-table .highlight-cell.first {
    border-top: 2px solid #3db514;
}
.whp-compare .webhosting-table .highlight-cell.last {
    border-bottom: 2px solid #3db514;
}
.whp-compare .webhosting-table .highlight-cell .info-btn {
    background-color: #0eb7fd;
}

/* ====== 图标说明 ====== */
.whp-compare .webhosting-explain {
    margin-top: 20px;
    padding: 20px 30px;
    background: #fff;
}
.whp-compare .webhosting-explain .webhosting-explain-title {
    padding-bottom: 3px;
    border-bottom: 1px solid #ebebeb;
}
.whp-compare .webhosting-explain .webhosting-explain-title span {
    padding: 0 6px 4px;
    font-size: 14px;
    font-weight: 700;
    color: #4d4d4d;
    border-bottom: 2px solid #00a0e9;
}
.whp-compare .webhosting-explain h6 {
    padding-left: 5px;
    padding-top: 30px;
    color: #555;
    font-size: 12px;
    font-weight: 400;
}
.whp-compare .webhosting-explain .webhosting-explain-txt {
    padding-top: 30px;
    padding-left: 5px;
}
.whp-compare .webhosting-explain .webhosting-explain-txt span {
    color: #255bd6;
}
.whp-compare .webhosting-explain .webhosting-explain-txt p {
    padding-left: 60px;
    line-height: 2;
    color: #6b6b6b;
}

/* ====== 响应式（移动端） ====== */
@media screen and (max-width: 768px) {
    .whp-compare {
        padding: 10px;
    }
    .whp-compare .webhosting-tab-list li,
    .whp-compare .webhosting-tab-list li.active {
        width: 100%;
        margin-right: 0;
    }
}

/* ====== 后台 cell 矩阵编辑器专用样式 ====== */
.whp-compare-matrix {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}
.whp-compare-matrix th,
.whp-compare-matrix td {
    border: 1px solid #d9d9d9;
    padding: 6px 8px;
    text-align: center;
    font-size: 13px;
}
.whp-compare-matrix th {
    background: #f5f7fa;
    font-weight: 600;
    color: #303133;
}
.whp-compare-matrix td.row-label {
    background: #f9fafb;
    text-align: left;
    font-weight: 600;
    width: 160px;
}
.whp-compare-matrix td.cell-input input,
.whp-compare-matrix td.cell-input select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    font-size: 12px;
}
.whp-compare-matrix td.cell-input select {
    background: #fff;
}
/* ⭐ 2026-07-26：列头标签角标（推荐/新款/热销）— 三角折角型 */
.compare-col-tag {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}
.compare-col-tag::before {
    content: '';
    position: absolute;
    top: -65px;
    right: -65px;
    width: 100px;
    height: 100px;
    background: var(--tag-color, #ee0a0b);
    transform: rotate(45deg);
    transform-origin: 50% 50%;
}
.compare-col-tag-text {
    position: absolute;
    top: 5px;
    right: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    z-index: 1;
}