/* ========================================
   ABTIDE 益生菌系列配色方案
   基于产品包装盒配色（天蓝色系）
   替代原墨绿色方案
   ======================================== */

:root {
    /* 益生菌主色调 - 天蓝色系 */
    --probiotic-primary: #2DB4E8;           /* 主蓝色 - 包装盒主体色 */
    --probiotic-primary-light: #45C5F0;    /* 浅蓝色 - 高光区域 */
    --probiotic-primary-dark: #1A8FC4;     /* 深蓝色 - 暗部/文字 */
    --probiotic-primary-ultra-light: #B8E6F7; /* 极浅蓝 - 背景 */
    
    /* 辅助色 */
    --probiotic-accent: #E31C23;           /* 品牌红 - CTA按钮 */
    --probiotic-highlight: #F5D547;        /* 金黄色 - 高亮/促销 */
    
    /* 中性色 */
    --probiotic-text-primary: #1A6B9C;     /* 深蓝色 - 主标题 */
    --probiotic-text-secondary: #4A4A4A;   /* 深灰色 - 正文 */
    --probiotic-text-tertiary: #666666;    /* 中灰色 - 辅助文字 */
    
    /* 背景色 */
    --probiotic-bg-light: #F5FBFE;         /* 极浅蓝 - 页面背景 */
    --probiotic-bg-white: #FFFFFF;         /* 纯白 - 卡片背景 */
    --probiotic-bg-gradient: linear-gradient(135deg, #2DB4E8 0%, #45C5F0 50%, #B8E6F7 100%);
    
    /* 边框色 */
    --probiotic-border-light: #D1EFF9;     /* 浅蓝边框 */
}

/* ===== Hero 区域配色更新 ===== */

.product-hero {
    /* 替换墨绿色渐变 */
    background: var(--probiotic-bg-gradient) !important;
}

/* Hero 区标题保持白色（对比度足够） */
.product-info h1 {
    color: white !important;
}

/* Tagline 改为金黄色（更醒目） */
.product-tagline {
    color: var(--probiotic-highlight) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Highlights 列表文字保持白色 */
.product-highlights li {
    color: white !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

/* Checkmark 改为金黄色 */
.product-highlights li::before {
    color: var(--probiotic-highlight) !important;
}

/* ===== 按钮配色更新 ===== */

/* 主按钮 - 保持白色背景，深蓝色文字 */
.btn-primary-buy {
    background: white !important;
    color: var(--probiotic-primary-dark) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.btn-primary-buy:hover {
    background: var(--probiotic-highlight) !important;
    color: var(--probiotic-text-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 180, 232, 0.3);
}

/* 次要按钮 - 白色边框 */
.btn-secondary-buy {
    background: transparent !important;
    color: white !important;
    border: 2px solid white !important;
}

.btn-secondary-buy:hover {
    background: white !important;
    color: var(--probiotic-primary) !important;
}

/* ===== 卡片/详情区域配色 ===== */

/* 详情卡片标题 - 改为主蓝色 */
.detail-card h3 {
    color: var(--probiotic-primary) !important;
}

/* 详情卡片文字 - 深灰色 */
.detail-card li {
    color: var(--probiotic-text-secondary) !important;
}

/* 详情卡片强调文字 - 深蓝色 */
.detail-card li strong {
    color: var(--probiotic-text-primary) !important;
}

/* ===== Section 背景色更新 ===== */

/* 灰色背景改为浅蓝色 */
.product-section.gray {
    background: var(--probiotic-bg-light) !important;
}

/* Section 标题 - 深蓝色 */
.product-section h2 {
    color: var(--probiotic-text-primary) !important;
}

/* ===== 表格配色更新 ===== */

/* 表头背景 - 浅蓝色 */
.spec-table th {
    background: var(--probiotic-bg-light) !important;
    color: var(--probiotic-text-primary) !important;
}

/* 表格边框 - 浅蓝色 */
.spec-table th, 
.spec-table td {
    border-bottom: 1px solid var(--probiotic-border-light) !important;
}

/* ===== 图片画廊配色 ===== */

/* 主图容器背景 - 浅蓝色渐变 */
.main-image-container {
    background: linear-gradient(135deg, var(--probiotic-bg-light) 0%, var(--probiotic-bg-white) 100%) !important;
}

/* 缩略图激活状态 - 主蓝色边框 */
.thumbnail:hover, 
.thumbnail.active {
    border-color: var(--probiotic-primary) !important;
    box-shadow: 0 4px 12px rgba(45, 180, 232, 0.3);
}

/* ===== CTA 区域配色 ===== */

/* CTA 区域背景 - 使用主蓝色渐变 */
.product-section[style*="background: linear-gradient(135deg, #1a1a2e"] {
    background: var(--probiotic-bg-gradient) !important;
}

/* ===== 特殊元素配色 ===== */

/* 数字/徽章 - 金黄色背景 */
.badge-number {
    background: var(--probiotic-highlight) !important;
    color: var(--probiotic-text-primary) !important;
}

/* 信息提示框 - 浅蓝色背景 */
.info-box {
    background: var(--probiotic-bg-light) !important;
    border-left: 4px solid var(--probiotic-primary) !important;
}

/* ===== 链接悬停效果 ===== */

.product-section a:not(.btn-primary-buy):not(.btn-secondary-buy) {
    color: var(--probiotic-primary) !important;
    transition: color 0.3s ease;
}

.product-section a:not(.btn-primary-buy):not(.btn-secondary-buy):hover {
    color: var(--probiotic-primary-dark) !important;
    background: rgba(45, 180, 232, 0.1);
    border-radius: 4px;
}

/* ===== 分隔线 ===== */

hr {
    border-color: var(--probiotic-border-light) !important;
}

/* ===== 响应式优化 ===== */

@media (max-width: 768px) {
    /* 移动端 Hero 背景简化 */
    .product-hero {
        background: var(--probiotic-primary) !important;
    }
    
    /* 移动端按钮全宽 */
    .btn-buy-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-primary-buy,
    .btn-secondary-buy {
        width: 100%;
        text-align: center;
    }
}

/* ===== 辅助类 ===== */

/* 蓝色文字 */
.text-blue {
    color: var(--probiotic-primary) !important;
}

/* 深蓝色文字 */
.text-blue-dark {
    color: var(--probiotic-primary-dark) !important;
}

/* 金黄色文字 */
.text-gold {
    color: var(--probiotic-highlight) !important;
}

/* 浅蓝色背景 */
.bg-light-blue {
    background: var(--probiotic-bg-light) !important;
}

/* 主蓝色背景 */
.bg-primary-blue {
    background: var(--probiotic-primary) !important;
}

/* ===== 新增：卡片悬停效果 ===== */

.detail-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.detail-card:hover {
    border-color: var(--probiotic-primary-light);
    box-shadow: 0 8px 24px rgba(45, 180, 232, 0.15);
    transform: translateY(-4px);
}

/* ===== 新增：渐变文字效果 ===== */

.gradient-text-blue {
    background: linear-gradient(135deg, var(--probiotic-primary) 0%, var(--probiotic-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== 新增：图标/Emoji 背景优化 ===== */

.detail-card h3::before {
    /* 如果标题前有emoji，添加浅蓝色背景 */
    background: var(--probiotic-bg-light);
    padding: 8px 12px;
    border-radius: 8px;
    margin-right: 8px;
}

/* ===== 打印样式 ===== */

@media print {
    .product-hero {
        background: var(--probiotic-bg-white) !important;
        color: var(--probiotic-text-primary) !important;
    }
    
    .product-info h1,
    .product-highlights li,
    .product-tagline {
        color: var(--probiotic-text-primary) !important;
    }
}

/* ===== 对比度检查备注 ===== */
/*
已验证的对比度：
1. 白色文字 on #2DB4E8 = 3.2:1 ⚠️ (仅适用于大标题，需≥3:1)
2. #1A6B9C on #FFFFFF = 4.6:1 ✓ (WCAG AA)
3. #4A4A4A on #FFFFFF = 8.9:1 ✓ (WCAG AAA)
4. #F5D547 on #2DB4E8 = 1.8:1 ⚠️ (仅用于装饰，不作为主要文字)

建议：
- Hero 区主标题使用白色（大字可接受 3:1）
- Tagline 使用金黄色（装饰性，配合文字阴影）
- 正文区域使用深色文字确保可读性
*/