/*
 * 品牌主题差异化 CSS
 *
 * 5 套配色方案对应不同品牌类型：
 * - .theme-variant-red    (体育博彩 — 红色)
 * - .theme-variant-blue   (电竞 — 蓝色)
 * - .theme-variant-gold   (真人视讯 — 金色)
 * - .theme-variant-green  (棋牌彩票 — 绿色)
 * - .theme-variant-purple (电子游艺 — 紫色)
 *
 * @package Brand_CTA
 */

/* ═══════════════════════════════════════════════════════
   变体 1: 经典红 — 体育博彩
   ═══════════════════════════════════════════════════════ */
.theme-variant-red {
    --variant-primary: #D32F2F;
    --variant-primary-hover: #B71C1C;
    --variant-primary-light: #FFEBEE;
    --variant-accent: #FFC107;
    --variant-accent-secondary: #FF5722;
    --variant-bg-dark: #1A1A2E;
    --variant-hero-bg: linear-gradient(135deg, #B71C1C 0%, #D32F2F 50%, #880E4F 100%);
    --variant-badge-bg: #FFD600;
    --variant-badge-color: #212121;
    --variant-section-bg: #FFF5F5;
    --variant-border: #FFCDD2;
    --variant-card-accent: #D32F2F;
}

/* ═══════════════════════════════════════════════════════
   变体 2: 科技蓝 — 电竞
   ═══════════════════════════════════════════════════════ */
.theme-variant-blue {
    --variant-primary: #1565C0;
    --variant-primary-hover: #0D47A1;
    --variant-primary-light: #E3F2FD;
    --variant-accent: #00E5FF;
    --variant-accent-secondary: #2979FF;
    --variant-bg-dark: #0D1117;
    --variant-hero-bg: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #00BCD4 100%);
    --variant-badge-bg: #00E5FF;
    --variant-badge-color: #0D47A1;
    --variant-section-bg: #F0F8FF;
    --variant-border: #BBDEFB;
    --variant-card-accent: #1565C0;
}

/* ═══════════════════════════════════════════════════════
   变体 3: 奢华金 — 真人视讯
   ═══════════════════════════════════════════════════════ */
.theme-variant-gold {
    --variant-primary: #E65100;
    --variant-primary-hover: #BF360C;
    --variant-primary-light: #FFF3E0;
    --variant-accent: #FFD700;
    --variant-accent-secondary: #FFAB00;
    --variant-bg-dark: #1B1B1B;
    --variant-hero-bg: linear-gradient(135deg, #3E2723 0%, #4E342E 50%, #212121 100%);
    --variant-badge-bg: #FFD700;
    --variant-badge-color: #3E2723;
    --variant-section-bg: #FFFBF0;
    --variant-border: #FFE0B2;
    --variant-card-accent: #E65100;
}

/* ═══════════════════════════════════════════════════════
   变体 4: 幸运绿 — 棋牌彩票
   ═══════════════════════════════════════════════════════ */
.theme-variant-green {
    --variant-primary: #2E7D32;
    --variant-primary-hover: #1B5E20;
    --variant-primary-light: #E8F5E9;
    --variant-accent: #FFD600;
    --variant-accent-secondary: #00C853;
    --variant-bg-dark: #1B2E1B;
    --variant-hero-bg: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #4CAF50 100%);
    --variant-badge-bg: #FFD600;
    --variant-badge-color: #1B5E20;
    --variant-section-bg: #F5FFF5;
    --variant-border: #C8E6C9;
    --variant-card-accent: #2E7D32;
}

/* ═══════════════════════════════════════════════════════
   变体 5: 魅惑紫 — 电子游艺
   ═══════════════════════════════════════════════════════ */
.theme-variant-purple {
    --variant-primary: #7B1FA2;
    --variant-primary-hover: #4A148C;
    --variant-primary-light: #F3E5F5;
    --variant-accent: #E040FB;
    --variant-accent-secondary: #FF4081;
    --variant-bg-dark: #1A0A2E;
    --variant-hero-bg: linear-gradient(135deg, #4A148C 0%, #7B1FA2 50%, #E040FB 100%);
    --variant-badge-bg: #E040FB;
    --variant-badge-color: #FFFFFF;
    --variant-section-bg: #FDF5FF;
    --variant-border: #E1BEE7;
    --variant-card-accent: #7B1FA2;
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：Hero CTA
   ═══════════════════════════════════════════════════════ */
.theme-variant-red .hero-cta,
.theme-variant-blue .hero-cta,
.theme-variant-gold .hero-cta,
.theme-variant-green .hero-cta,
.theme-variant-purple .hero-cta {
    background: var(--variant-hero-bg) !important;
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：CTA 按钮
   ═══════════════════════════════════════════════════════ */
.cta-btn.cta-primary {
    background: linear-gradient(135deg, var(--variant-primary, var(--color-primary)), var(--variant-accent-secondary, #E53935));
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.cta-btn.cta-primary:hover {
    background: linear-gradient(135deg, var(--variant-primary-hover, var(--color-primary-hover)), var(--variant-primary, #C62828));
}

.cta-btn.cta-secondary {
    color: var(--variant-accent, var(--color-accent-gold-dark));
    border: 2px solid var(--variant-accent, var(--color-accent-gold));
}
.cta-btn.cta-secondary:hover {
    background: var(--variant-accent, var(--color-accent-gold));
    color: #212121;
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：下载按钮
   ═══════════════════════════════════════════════════════ */
.cta-btn.cta-download {
    background: linear-gradient(135deg, var(--variant-bg-dark, var(--bg-dark)), var(--bg-dark-secondary, #16213E));
    border: 2px solid var(--variant-accent, var(--color-accent-gold));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：文章卡片
   ═══════════════════════════════════════════════════════ */
.post-card {
    border-top: 3px solid var(--variant-card-accent, var(--color-primary));
}

.post-card .card-category {
    color: var(--variant-card-accent, var(--color-primary));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：侧边栏排名徽章
   ═══════════════════════════════════════════════════════ */
.sidebar-top-list .rank-num.top-1 {
    background: var(--variant-accent, #FFD700);
}

.theme-variant-red .sidebar-top-list .rank-num.top-1 { background: #FFD700; color: #5D4037; }
.theme-variant-blue .sidebar-top-list .rank-num.top-1 { background: #00E5FF; color: #0D47A1; }
.theme-variant-gold .sidebar-top-list .rank-num.top-1 { background: #FFD700; color: #3E2723; }
.theme-variant-green .sidebar-top-list .rank-num.top-1 { background: #FFD600; color: #1B5E20; }
.theme-variant-purple .sidebar-top-list .rank-num.top-1 { background: #E040FB; color: #fff; }

/* ═══════════════════════════════════════════════════════
   变体覆盖：品牌页面 Hero 区域
   ═══════════════════════════════════════════════════════ */
.page-sports .hero-cta,
.page-esports .hero-cta,
.page-casino .hero-cta,
.page-chess .hero-cta,
.page-lottery .hero-cta,
.page-slots .hero-cta {
    background: var(--variant-hero-bg) !important;
}

/* 页面专属 Hero 覆盖 */
.page-sports  { --page-accent: #FF5722; }
.page-esports { --page-accent: #00E5FF; }
.page-casino  { --page-accent: #FFD700; }
.page-chess   { --page-accent: #FFD600; }
.page-lottery { --page-accent: #FFD600; }
.page-slots   { --page-accent: #E040FB; }

/* ═══════════════════════════════════════════════════════
   变体覆盖：面包屑
   ═══════════════════════════════════════════════════════ */
.breadcrumbs a:hover {
    color: var(--variant-primary, var(--color-primary));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：H2 下划线
   ═══════════════════════════════════════════════════════ */
h2 {
    border-bottom-color: var(--variant-primary, var(--color-primary));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：CTA 盒子
   ═══════════════════════════════════════════════════════ */
.cta-box {
    border-color: var(--variant-accent, var(--color-accent-gold));
}

.cta-box-content h4 {
    color: var(--variant-primary, #E65100);
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：评测分数
   ═══════════════════════════════════════════════════════ */
.review-score .score-num {
    color: var(--variant-primary, var(--color-primary));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：底部 CTA 金色标题
   ═══════════════════════════════════════════════════════ */
.bottom-cta h3 {
    color: var(--variant-accent, var(--color-accent-gold));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：导航 Logo
   ═══════════════════════════════════════════════════════ */
.site-logo {
    color: var(--variant-accent, var(--color-accent-gold));
}
.site-logo:hover {
    color: var(--variant-accent-secondary, var(--color-accent-gold-dark));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：促销徽章
   ═══════════════════════════════════════════════════════ */
.promo-badge {
    background: linear-gradient(135deg, var(--variant-primary, var(--color-primary)), var(--variant-accent-secondary, #E53935));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：链接
   ═══════════════════════════════════════════════════════ */
a {
    color: var(--variant-primary, var(--color-primary));
}
a:hover {
    color: var(--variant-primary-hover, var(--color-primary-hover));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：试玩账号盒子
   ═══════════════════════════════════════════════════════ */
.test-id-box {
    border-color: var(--variant-primary, var(--color-primary));
}
.test-id-box h4 {
    color: var(--variant-primary, var(--color-primary));
}
.test-id-box .cred-row code {
    color: var(--variant-primary, var(--color-primary));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：价格/优惠表格高亮行
   ═══════════════════════════════════════════════════════ */
.comparison-table tbody tr:hover {
    background: var(--variant-section-bg, #FFF8E1);
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：退出弹窗标题
   ═══════════════════════════════════════════════════════ */
.exit-popup h3 {
    color: var(--variant-primary, var(--color-primary));
}
.exit-popup .countdown {
    color: var(--variant-primary, var(--color-primary));
}

/* ═══════════════════════════════════════════════════════
   变体覆盖：品牌页面特征卡片
   ═══════════════════════════════════════════════════════ */
.brand-feature-card {
    border-left: 4px solid var(--variant-primary, var(--color-primary));
}

.brand-feature-icon {
    color: var(--variant-primary, var(--color-primary));
}

/* ═══════════════════════════════════════════════════════
   品牌内页：优势网格
   ═══════════════════════════════════════════════════════ */
.brand-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

.brand-benefit-item {
    background: var(--bg-white);
    border: 1px solid var(--variant-border, var(--border-light));
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.brand-benefit-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.brand-benefit-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
}

.brand-benefit-item h4 {
    color: var(--variant-primary, var(--color-primary));
    margin-bottom: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════
   品牌内页：赛事/彩种覆盖表
   ═══════════════════════════════════════════════════════ */
.brand-coverage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.brand-coverage-item {
    background: var(--variant-section-bg, #FAFAFA);
    border: 1px solid var(--variant-border, var(--border-light));
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   品牌内页：步骤流程
   ═══════════════════════════════════════════════════════ */
.brand-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

.brand-step {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.brand-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--variant-primary, var(--color-primary));
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: var(--space-md);
}

.brand-step h4 {
    color: var(--variant-primary, var(--color-primary));
}

/* ═══════════════════════════════════════════════════════
   品牌内页：App 下载区域
   ═══════════════════════════════════════════════════════ */
.brand-app-section {
    background: var(--variant-bg-dark, var(--bg-dark));
    color: var(--text-on-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    margin: var(--space-xl) 0;
}

.brand-app-section h2 {
    color: var(--variant-accent, var(--color-accent-gold));
    border-bottom: none;
}

.brand-app-section .app-features {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
    margin: var(--space-lg) 0;
}

.app-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.app-feature-item .feature-icon {
    font-size: 2rem;
}

.app-feature-item .feature-text {
    font-size: 0.85rem;
    color: var(--text-on-dark-secondary);
}

/* ═══════════════════════════════════════════════════════
   品牌内页：VIP / 优惠表格
   ═══════════════════════════════════════════════════════ */
.brand-vip-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-lg) 0;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.brand-vip-table thead th {
    background: var(--variant-primary, var(--color-primary));
    color: #fff;
    font-weight: 700;
    padding: 12px 14px;
}

.brand-vip-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--variant-border, var(--border-light));
    text-align: center;
}

.brand-vip-table .vip-highlight {
    background: var(--variant-section-bg, #FFF8E1);
}

/* ═══════════════════════════════════════════════════════
   品牌内页：响应式
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .brand-benefits,
    .brand-steps {
        grid-template-columns: 1fr;
    }

    .brand-coverage {
        grid-template-columns: repeat(3, 1fr);
    }

    .brand-app-section .app-features {
        gap: var(--space-md);
    }
}

@media (max-width: 479px) {
    .brand-coverage {
        grid-template-columns: repeat(2, 1fr);
    }
}