/* =============================================
   Pro 会员页
   ============================================= */

/* ---- Hero ---- */
.membership-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 80px 0;
    color: #fff;
    text-align: center;
}
.membership-hero .container { padding: 0 24px; }
.membership-pro-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
    color: #1a1a2e;
    padding: 8px 20px;
    border-radius: var(--fb-radius-pill);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
}
.membership-hero h1 { font-size: 48px; font-weight: 900; margin: 0 0 16px; }
.membership-hero-sub {
    font-size: 18px;
    opacity: 0.8;
    margin: 0 auto;
    max-width: 680px;
}

.membership-body { padding: 60px 24px; }

/* ---- 会员权益卡 ---- */
.membership-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}
.benefit-card {
    background: var(--fb-surface);
    border-radius: var(--fb-radius-lg);
    border: 1px solid var(--fb-gray-200);
    padding: 32px;
    text-align: center;
}
.benefit-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--fb-radius-lg);
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
}
.benefit-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.benefit-card p { color: var(--fb-gray-text); margin: 0; }

/* ---- 权益对比表 ---- */
.membership-compare {
    max-width: 700px;
    margin: 0 auto 60px;
    overflow-x: auto;
}
.membership-compare h2 { font-size: 28px; font-weight: 900; text-align: center; margin: 0 0 32px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table thead tr { border-bottom: 2px solid var(--fb-gray-200); }
.compare-table th { padding: 12px 16px; font-weight: 600; }
.compare-table th.col-feature { text-align: left; }
.compare-table th.col-free { text-align: center; color: var(--fb-gray-text); }
/* 对比表 Pro 列用加深琥珀色：在浅底 #f4f7f2 上达 ≥4.5:1(WCAG AA)，保留暖色识别 */
.compare-table th.col-pro { text-align: center; font-weight: 700; color: #a55a00; }
.compare-table tbody tr { border-bottom: 1px solid var(--fb-gray-100); }
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table td { padding: 12px 16px; }
.compare-table td.cell-center { text-align: center; padding: 12px; }
.compare-table td.cell-pro { text-align: center; padding: 12px; font-weight: 600; color: #a55a00; }

/* ---- 价格方案 ---- */
.membership-pricing-title { font-size: 32px; font-weight: 900; text-align: center; margin: 0 0 40px; }
.membership-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.price-card {
    background: var(--fb-surface);
    border-radius: var(--fb-radius-lg);
    border: 1px solid var(--fb-gray-200);
    padding: 40px;
    text-align: center;
    position: relative;
}
.price-card-featured {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    border: 2px solid #ffd700;
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.15);
    overflow: hidden;
}
.price-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    border-radius: var(--fb-radius-pill);
    font-weight: 700;
    font-size: 12px;
}
.price-badge-red { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; }
.price-badge-gold { background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%); color: #1a1a2e; }
.price-card h3 { font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.price-card-desc { color: var(--fb-gray-text); margin: 0 0 24px; }
.price-card-featured .price-card-desc { color: rgba(255, 255, 255, 0.8); }
.price-amount { margin-bottom: 8px; }
.price-amount-24 { margin-bottom: 24px; }
.price-amount-num { font-size: 48px; font-weight: 900; }
.price-amount-num.is-discount { color: #dc2626; }
.price-amount-unit { color: var(--fb-gray-text); }
.price-card-featured .price-amount-unit { color: rgba(255, 255, 255, 0.8); }
.price-note { font-size: 14px; margin: 0 0 24px; color: var(--fb-gray-text); }
.price-card-featured .price-note { color: rgba(255, 255, 255, 0.6); }

/* ---- 支付按钮 ---- */
.pay-form { margin: 0; }
.pay-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--fb-radius-pill);
    border: none;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.pay-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.pay-btn-alipay { background: #1677ff; color: #fff; }
.pay-btn-wechat { background: #07c160; color: #fff; }
.pay-btn-gold { background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%); color: #1a1a2e; }

/* ---- 已是会员 / 底部说明 ---- */
.pro-active-note {
    text-align: center;
    margin: 40px auto 0;
    padding: 20px;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: var(--fb-radius-md);
    max-width: 600px;
}
.pro-active-note p { margin: 0; font-weight: 700; color: #d97706; }
.pro-active-note .pro-active-sub { margin: 8px 0 0; color: var(--fb-gray-text); font-weight: 400; font-size: 14px; }
/* 价格卡下方的"邀请得 Pro"入口行 */
.membership-invite-entry {
    text-align: center;
    margin: 32px auto 0;
    color: var(--fb-gray-text);
    font-size: 15px;
}
.membership-invite-entry a { font-weight: 700; }

.membership-footnote { text-align: center; margin-top: 60px; color: var(--fb-gray-text); }
.membership-footnote p { margin: 0 0 8px; }
.membership-footnote p:last-child { margin: 0; }

@media (max-width: 768px) {
    .membership-hero h1 { font-size: 32px; }
    .membership-hero { padding: 48px 0; }
    .membership-benefits { grid-template-columns: 1fr; }
    .benefit-card { padding: 24px; }
    .membership-pricing { grid-template-columns: 1fr; }
    .membership-pricing-title { font-size: 24px; }
}