/*
 * File: css/pricing.css
 * Description: 价格页面样式 - v2.0 (已移除双向吸顶效果)
 */

:root {
    --price-primary: #007bff;
    --price-dark: #1d2129;
    --price-gray: #86909c;
    --price-border: #e5e6eb;
    --price-bg-light: #f8f9fa;
    --price-bg-hover: #f2f7ff;
    /* 鼠标悬停背景色 */
    --price-flagship-bg: #fffbf0;
    /* 旗舰版淡黄背景 */
    --price-flagship-border: #e3c98d;
    /* 已移除吸顶高度变量，因为吸顶功能已禁用 */
}

/* 默认使用桌面端导航高度作为吸顶基准 */
.price-main {
    background-color: #fff;
    padding-bottom: 80px;
}

/* --- Hero 区域 --- */
.price-hero-section {
    text-align: center;
    padding: 60px 20px 40px;
    background: linear-gradient(180deg, #f0f7ff 0%, #fff 100%);
}

.price-hero-title {
    font-size: 32px;
    color: var(--price-dark);
    font-weight: 700;
    margin-bottom: 15px;
}

.price-hero-subtitle {
    font-size: 16px;
    color: var(--price-gray);
}

/* --- 卡片区域 --- */
.price-cards-section {
    margin-bottom: 60px;
}

.price-cards-grid {
    display: grid;
    gap: 20px;
    /* 默认移动端：1列 */
    grid-template-columns: 1fr;
}

/* 平板/中屏：2列 */
@media (min-width: 640px) {
    .price-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 电脑/大屏：4列 */
@media (min-width: 1024px) {
    .price-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.price-card {
    background: #fff;
    border: 1px solid var(--price-border);
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    position: relative;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--price-primary);
}

/* 旗舰版特殊样式 */
.price-card-flagship {
    background: linear-gradient(to bottom, #fffef9, #fff);
    border-color: var(--price-flagship-border);
    box-shadow: 0 8px 20px rgba(191, 161, 95, 0.1);
}

.price-card-flagship:hover {
    border-color: #bfa15f;
}

.price-card-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 20px;
}

.price-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--price-dark);
    margin-bottom: 10px;
}

.price-card-price {
    font-size: 36px;
    font-weight: 800;
    color: var(--price-dark);
    margin-bottom: 5px;
    font-family: Arial, sans-serif;
}

.price-card-price .unit {
    font-size: 14px;
    color: var(--price-gray);
    font-weight: normal;
}

.price-card-desc {
    font-size: 13px;
    color: var(--price-gray);
    height: 40px;
}

.price-card-body {
    flex-grow: 1;
    margin-bottom: 25px;
}

.price-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.price-card-features li {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--price-dark);
    margin-bottom: 12px;
}

/* 缩小对号图标 */
.price-card-features .icon-check {
    width: 14px;
    /* 减小尺寸 */
    height: 14px;
    /* 减小尺寸 */
    margin-right: 8px;
    flex-shrink: 0;
}

/* 按钮样式 */
.price-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.price-btn-outline {
    border: 1px solid var(--price-primary);
    color: var(--price-primary);
}

.price-btn-outline:hover {
    background: #e6f7ff;
}

.price-btn-primary {
    background: var(--price-primary);
    color: #fff;
    border: 1px solid var(--price-primary);
}

.price-btn-primary:hover {
    background: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.price-btn-dark {
    background: #1d2129;
    color: #fff;
    border: 1px solid #1d2129;
}

.price-btn-dark:hover {
    background: #000;
}


/* --- 表格区域 (已移除吸顶效果) --- */
.price-table-section {
    padding-bottom: 40px;
}

.price-section-title {
    text-align: center;
    font-size: 26px;
    margin-bottom: 40px;
    color: var(--price-dark);
    font-weight: 700;
}

.price-table-wrapper {
    width: 100%;
    overflow-x: auto;
    /* 允许横向滚动 */
    border: 1px solid var(--price-border);
    border-radius: 8px;
    position: relative;
    /* 已移除 z-index: 999; */
    z-index: 1;
    /* 恢复正常层级 */
    -webkit-overflow-scrolling: touch;
}

.price-compare-table {
    width: 100%;
    min-width: 900px;
    /* 强制表格宽度，触发横向滚动 */
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

/* --- 1. 吸顶逻辑 (已移除 sticky) --- */
/* 左上角 (交叉点) - 恢复静态定位 */
.price-sticky-corner {
    /* position: sticky; 已移除 */
    /* top: var(--price-nav-height-desktop); 已移除 */
    /* left: 0; 已移除 */
    z-index: 1;
    /* 恢复正常层级 */
    background-color: #f7f8fa;
    /* 优化对齐和边框 */
    border-bottom: 1px solid var(--price-border);
    border-right: 1px solid var(--price-border);
    padding: 16px 15px;
    /* 统一填充 */
    width: 220px;
    min-width: 220px;
}

/* 顶部表头 (套餐名) - 恢复静态定位 */
.price-compare-table thead th.price-col-plan {
    /* position: sticky; 已移除 */
    /* top: var(--price-nav-height-desktop); 已移除 */
    z-index: 1;
    /* 恢复正常层级 */
    background-color: #fff;
    /* 优化对齐和边框 */
    border-bottom: 1px solid var(--price-border);
    padding: 16px 10px;
    /* 统一填充 */
}

/* 左侧首列 (功能名) - 恢复静态定位 */
.price-sticky-col {
    /* position: sticky; 已移除 */
    /* left: 0; 已移除 */
    z-index: 1;
    /* 恢复正常层级 */
    background-color: #fff;
    /* 默认白色背景 */
    border-right: 1px solid var(--price-border);
}

/* --- 2. 表格内容样式 --- */
.price-sticky-name {
    font-size: 15px;
    color: var(--price-gray);
    margin-bottom: 4px;
    font-weight: normal;
}

.price-sticky-price {
    font-size: 18px;
    color: var(--price-dark);
    font-weight: 700;
}

.price-compare-table td {
    padding: 16px 10px;
    text-align: center;
    border-bottom: 1px solid #f2f3f5;
    color: var(--price-dark);
    font-size: 14px;
    vertical-align: middle;
}

.price-compare-table td .icon-check {
    width: 14px;
    /* 减小尺寸 */
    height: 14px;
    /* 减小尺寸 */
}

/* 左侧列文字样式 */
.price-feature-name {
    text-align: left;
    padding-left: 20px;
    font-weight: 500;
    color: #333;
}

/* 分组标题行 (内容遮挡修复) */
.price-group-title td {
    background-color: #f9fafb;
    font-weight: 700;
    font-size: 13px;
    color: #555;
    text-align: left;
    padding: 16px 20px;
    /* 统一填充 */
    /* 确保分组标题的内容 z-index 高于表格主体，防止被吸顶元素遮挡 */
    position: relative;
    z-index: 1;
    /* 恢复正常层级 */
    border-bottom: 1px solid #f2f3f5;
    /* 保持分割线 */
}

/* 分组标题的左侧固定列也需要背景色和更高的 z-index */
.price-group-title .price-sticky-col {
    background-color: #f9fafb;
    z-index: 1;
    /* 恢复正常层级 */
    padding: 16px 20px;
    /* 统一填充 */
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

/* 旗舰版列背景高亮 */
.price-bg-flagship,
.price-bg-flagship-head {
    background-color: var(--price-flagship-bg) !important;
}

.price-bg-flagship-head {
    border-bottom: 1px solid var(--price-flagship-border) !important;
    /* 匹配边框 */
}

/* --- 3. 鼠标悬停整行效果 --- */
.price-compare-table tbody tr:hover td {
    background-color: var(--price-bg-hover);
}

.price-compare-table tbody tr:hover .price-sticky-col {
    background-color: var(--price-bg-hover);
}

/* 旗舰版单元格 Hover 时保持淡黄微调 */
.price-compare-table tbody tr:hover .price-bg-flagship {
    background-color: #fff8e1 !important;
}

/* 辅助说明 */
.price-sub-text {
    font-size: 12px;
    color: #999;
    font-weight: normal;
    display: block;
    margin-top: 2px;
}

.price-scroll-hint {
    display: none;
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

/* --- FAQ 版块 (移除背景) --- */
.price-faq-section {
    padding-top: 40px;
    padding-bottom: 40px;
}

.price-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-faq-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.price-faq-question {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--price-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    transition: background-color 0.2s;
}

.price-faq-question:hover {
    background-color: #f7f7f7;
}

.price-faq-toggle {
    font-size: 24px;
    color: var(--price-primary);
    font-weight: normal;
    line-height: 1;
    transition: transform 0.3s;
}

.price-faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
}

/* 激活状态 */
.price-faq-item.active .price-faq-answer {
    padding: 0 20px 15px;
    max-height: 200px;
}

.price-faq-item.active .price-faq-toggle {
    transform: rotate(45deg);
}

/* --- 移动端调整 --- */
@media (max-width: 768px) {
    .price-hero-title {
        font-size: 24px;
    }

    .price-scroll-hint {
        display: block;
    }
}