/* ========================================
   通用悬停效果增强样式
   目的：优化所有卡片、按钮和图标的悬停体验
   特点：增加羽化阴影、扩大容器、提升兼容性
   ======================================== */

/* ========================================
   容器优化 - 确保有足够空间显示阴影（四边放大）
   ======================================== */
.steps-container,
.features-grid,
.tips-container,
.faq-container,
.income-cards,
.support-grid,
.stories-container,
.contact-methods,
.info-container,
.books-grid,
.reasons-grid {
    padding: 50px 40px !important; /* 四边都增加更多空间 */
    overflow: visible !important; /* 确保子元素阴影不被裁剪 */
}

/* ========================================
   卡片悬停增强 - 更明显的羽化效果
   ======================================== */
.step-card,
.feature-card,
.tip-card,
.faq-item,
.income-card,
.support-card,
.story-card,
.method-card,
.info-card,
.book-card,
.reason-card,
.vip-card {
    overflow: visible !important; /* 确保阴影不被裁剪 */
    margin: 30px 25px !important; /* 四边都增加更多margin */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 更平滑的过渡 */
}

/* 卡片默认状态阴影增强 - 降低色调更柔和 */
.step-card {
    box-shadow: 0 8px 32px rgba(245, 127, 23, 0.06), 
                0 2px 8px rgba(245, 127, 23, 0.04) !important;
}

.feature-card,
.support-card,
.reason-card {
    box-shadow: 0 6px 24px rgba(245, 127, 23, 0.05), 
                0 2px 6px rgba(245, 127, 23, 0.03) !important;
}

.tip-card {
    box-shadow: 0 6px 20px rgba(245, 127, 23, 0.05), 
                0 2px 6px rgba(245, 127, 23, 0.03),
                inset 0 0 0 1px rgba(245, 127, 23, 0.02) !important;
}

.income-card,
.method-card,
.story-card {
    box-shadow: 0 10px 40px rgba(245, 127, 23, 0.06), 
                0 4px 12px rgba(245, 127, 23, 0.04) !important;
}

.book-card {
    box-shadow: 0 8px 30px rgba(245, 127, 23, 0.06), 
                0 4px 12px rgba(245, 127, 23, 0.04) !important;
}

/* 卡片悬停状态 - 超级羽化阴影（降低色调） */
.step-card:hover {
    transform: translateY(-12px) scale(1.02) translateZ(0) !important;
    box-shadow: 0 20px 60px rgba(245, 127, 23, 0.08), 
                0 8px 24px rgba(245, 127, 23, 0.06),
                0 2px 8px rgba(245, 127, 23, 0.04) !important;
}

.feature-card:hover,
.support-card:hover,
.reason-card:hover {
    transform: translateY(-10px) scale(1.02) translateZ(0) !important;
    box-shadow: 0 16px 48px rgba(245, 127, 23, 0.07), 
                0 6px 18px rgba(245, 127, 23, 0.05),
                0 2px 6px rgba(245, 127, 23, 0.03) !important;
}

.tip-card:hover {
    transform: translateX(8px) scale(1.01) translateZ(0) !important;
    box-shadow: 0 8px 32px rgba(245, 127, 23, 0.06), 
                0 4px 12px rgba(245, 127, 23, 0.04),
                inset 0 0 0 2px rgba(245, 127, 23, 0.05) !important;
}

.income-card:hover,
.method-card:hover,
.story-card:hover {
    transform: translateY(-12px) scale(1.02) translateZ(0) !important;
    box-shadow: 0 24px 64px rgba(245, 127, 23, 0.08), 
                0 10px 28px rgba(245, 127, 23, 0.06),
                0 4px 12px rgba(245, 127, 23, 0.04) !important;
}

.book-card:hover {
    transform: translateY(-10px) scale(1.02) translateZ(0) !important;
    box-shadow: 0 18px 56px rgba(245, 127, 23, 0.07), 
                0 8px 24px rgba(245, 127, 23, 0.05),
                0 4px 12px rgba(245, 127, 23, 0.04) !important;
}

.info-card:hover {
    transform: translateY(-10px) scale(1.02) translateZ(0) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08), 
                0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

/* FAQ项特殊处理 */
.faq-item:hover {
    transform: translateX(4px) translateZ(0) !important;
    box-shadow: 0 6px 24px rgba(245, 127, 23, 0.05), 
                0 2px 8px rgba(245, 127, 23, 0.03) !important;
}

/* ========================================
   图标容器悬停增强
   ======================================== */
.step-icon,
.feature-icon,
.tip-icon,
.income-icon,
.support-icon,
.reason-icon,
.method-icon,
.info-icon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    filter: drop-shadow(0 2px 4px rgba(245, 127, 23, 0.05));
}

.step-card:hover .step-icon {
    transform: scale(1.15) rotate(5deg) translateZ(0) !important;
    filter: drop-shadow(0 6px 16px rgba(245, 127, 23, 0.08));
}

.feature-card:hover .feature-icon {
    transform: rotateY(180deg) scale(1.1) translateZ(0) !important;
    filter: drop-shadow(0 6px 16px rgba(245, 127, 23, 0.08));
}

.tip-card:hover .tip-icon,
.support-card:hover .support-icon,
.reason-card:hover .reason-icon {
    transform: scale(1.12) translateZ(0) !important;
    filter: drop-shadow(0 4px 12px rgba(245, 127, 23, 0.07));
}

.method-card:hover .method-icon,
.income-card:hover .income-icon {
    transform: scale(1.15) translateY(-5px) translateZ(0) !important;
    filter: drop-shadow(0 8px 20px rgba(245, 127, 23, 0.1));
}

.info-card:hover .info-icon {
    transform: scale(1.12) translateZ(0) !important;
    filter: drop-shadow(0 6px 16px rgba(245, 127, 23, 0.08));
}

/* ========================================
   按钮悬停增强
   ======================================== */
.vip-btn,
.method-btn,
.guide-btn,
.contact-btn,
.retry-btn,
.browse-btn,
.refresh-btn,
.cta-btn {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
}

.vip-btn:hover,
.method-btn:hover,
.guide-btn.primary:hover,
.contact-btn:hover,
.retry-btn:hover,
.browse-btn:hover,
.refresh-btn:hover {
    transform: translateY(-3px) scale(1.03) translateZ(0) !important;
    box-shadow: 0 12px 36px rgba(245, 127, 23, 0.1), 
                0 6px 16px rgba(245, 127, 23, 0.08),
                0 2px 8px rgba(245, 127, 23, 0.05) !important;
}

.guide-btn.secondary:hover,
.cta-btn.secondary:hover {
    transform: translateY(-3px) scale(1.03) translateZ(0) !important;
    box-shadow: 0 8px 24px rgba(245, 127, 23, 0.08), 
                0 4px 12px rgba(245, 127, 23, 0.06) !important;
}

.cta-btn.primary:hover {
    transform: translateY(-4px) scale(1.03) translateZ(0) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 
                0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ========================================
   FAQ问题悬停增强
   ======================================== */
.faq-question {
    transition: all 0.3s ease !important;
    overflow: visible !important;
}

.faq-question:hover {
    box-shadow: 0 4px 16px rgba(245, 127, 23, 0.05), 
                0 2px 6px rgba(245, 127, 23, 0.03) !important;
}

/* ========================================
   标识徽章悬停增强（降低色调）
   ======================================== */
.step-number {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    filter: drop-shadow(0 2px 6px rgba(245, 127, 23, 0.06));
}

.step-card:hover .step-number {
    transform: scale(1.15) rotate(10deg) translateZ(0) !important;
    filter: drop-shadow(0 6px 18px rgba(245, 127, 23, 0.1));
}

.hot-badge {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.book-card:hover .hot-badge {
    transform: scale(1.1) translateZ(0) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.12) !important;
}

.popular-tag {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vip-card:hover .popular-tag {
    transform: scale(1.08) translateZ(0) !important;
    box-shadow: 0 6px 20px rgba(230, 85, 0, 0.12) !important;
}

/* ========================================
   头像/图标圆形容器增强（降低色调）
   ======================================== */
.story-avatar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    filter: drop-shadow(0 4px 12px rgba(245, 127, 23, 0.06));
}

.story-card:hover .story-avatar {
    transform: scale(1.12) translateZ(0) !important;
    filter: drop-shadow(0 8px 24px rgba(245, 127, 23, 0.1));
}

/* ========================================
   封面图片悬停增强（降低色调）
   ======================================== */
.book-cover {
    overflow: hidden !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.book-card:hover .book-cover {
    box-shadow: inset 0 0 0 2px rgba(245, 127, 23, 0.06),
                0 4px 16px rgba(245, 127, 23, 0.05) !important;
}

/* ========================================
   关闭按钮增强（降低色调）
   ======================================== */
.guide-close {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
}

.guide-close:hover {
    box-shadow: 0 4px 16px rgba(245, 127, 23, 0.08), 
                0 2px 8px rgba(245, 127, 23, 0.05) !important;
}

/* ========================================
   Section整体容器优化
   ======================================== */
.guide-section,
.contact-section,
.books-section,
.recommendations-section,
.weekly-main section,
.alt-bg {
    overflow: visible !important; /* 确保子元素阴影不被裁剪 */
    padding-top: 100px !important; /* 增加顶部padding，防止卡片向上移动时被裁剪 */
    padding-bottom: 100px !important; /* 增加底部padding，确保阴影完整显示 */
    margin-top: -20px !important; /* 通过负margin抵消部分padding，保持视觉间距 */
    margin-bottom: -20px !important;
}

/* ========================================
   响应式优化
   ======================================== */
@media (max-width: 768px) {
    /* 移动端减小悬停效果强度 */
    .step-card:hover,
    .feature-card:hover,
    .book-card:hover {
        transform: translateY(-6px) scale(1.01) translateZ(0) !important;
    }
    
    .tip-card:hover {
        transform: translateX(4px) translateZ(0) !important;
    }
    
    /* 移动端容器padding调整 */
    .guide-section,
    .contact-section,
    .books-section,
    .recommendations-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
        margin-top: -10px !important;
        margin-bottom: -10px !important;
    }
    
    /* 移动端卡片margin调整 */
    .step-card,
    .feature-card,
    .tip-card,
    .book-card {
        margin: 15px 8px !important;
    }
}

/* ========================================
   触摸设备优化
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备使用active状态代替hover */
    .step-card:active,
    .feature-card:active,
    .tip-card:active,
    .book-card:active {
        transform: scale(0.98) translateZ(0) !important;
    }
}

/* ========================================
   高性能优化
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    /* 减少动画用户偏好 */
    * {
        transition-duration: 0.1s !important;
    }
    
    .step-card:hover,
    .feature-card:hover,
    .book-card:hover {
        transform: none !important;
    }
}

/* ========================================
   确保所有容器都有足够空间
   ======================================== */
html {
    overflow-y: visible !important; /* html标签也要visible */
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important; /* 水平方向隐藏溢出 */
    overflow-y: visible !important; /* 垂直方向显示溢出（阴影） */
    min-height: 100vh;
    padding-bottom: 50px !important; /* body底部padding确保最后的元素不被裁剪 */
}

.hero-section,
.guide-main,
.contact-main,
.weekly-main,
main {
    overflow-x: hidden !important; /* 水平方向隐藏溢出 */
    overflow-y: visible !important; /* 垂直方向显示溢出（阴影） */
}

/* 特别处理：确保tips-grid等网格容器不裁剪 */
.tips-grid,
.steps-grid {
    overflow: visible !important;
    padding: 20px 0 !important;
}

/* ========================================
   额外的容器防裁剪规则
   ======================================== */
/* 确保所有可能包含卡片的容器都不裁剪 */
section,
div[class*="container"],
div[class*="grid"],
div[class*="wrapper"] {
    overflow: visible !important;
}

/* 特别处理快速开始section */
.guide-section:first-of-type,
.guide-section:nth-of-type(2) {
    padding-top: 120px !important; /* 第一个section需要更多顶部空间 */
}

/* VIP卡片特殊处理 */
.vip-cards {
    padding: 40px 20px !important;
    overflow: visible !important;
}

/* CTA区域和按钮特殊处理 */
.guide-cta,
.cta-section {
    padding: 100px 30px !important; /* 增加padding确保按钮悬停效果不被裁剪 */
    overflow: visible !important;
}

.cta-content {
    overflow: visible !important;
    padding: 20px !important;
}

.cta-buttons {
    overflow: visible !important;
    padding: 20px 0 !important;
    margin: 20px 0 !important;
}

/* CTA按钮增加margin防止裁剪 */
.cta-btn {
    margin: 15px 10px !important;
}

/* 确保页面底部有足够空间 */
.guide-main > section:last-child,
.guide-main > .guide-cta {
    padding-bottom: 120px !important; /* 底部额外空间确保按钮阴影完整 */
    margin-bottom: 0 !important;
}

/* 页面级别的overflow确保不裁剪 */
.guide-main,
.contact-main,
.weekly-main {
    overflow-y: visible !important;
    padding-bottom: 80px !important; /* 主容器底部padding */
}

/* Contact页面和Weekly页面的最后section也需要底部空间 */
.contact-main > section:last-child,
.weekly-main > section:last-child {
    padding-bottom: 120px !important;
    margin-bottom: 0 !important;
}

/* 特别处理按钮容器 */
.guide-btn,
.contact-btn,
.method-btn {
    margin: 15px 10px !important;
    overflow: visible !important;
}

/* ========================================
   Hero区域和Section标题防裁剪优化
   ======================================== */
/* Hero区域标题容器 */
.guide-hero,
.hero-section {
    overflow: visible !important;
    padding: 100px 30px !important; /* 增加padding确保图标和文字不被裁剪 */
}

.hero-content {
    overflow: visible !important;
    padding: 30px 20px !important;
}

.hero-title {
    overflow: visible !important;
    padding: 20px 10px !important;
    line-height: 1.8 !important; /* 增加行高确保文字不被裁剪 */
}

.hero-subtitle {
    overflow: visible !important;
    padding: 15px 10px !important;
}

/* Hero标题中的图标 */
.hero-title i,
.hero-title .fas,
.hero-title .far,
.hero-title .fab {
    display: inline-block !important;
    margin: 0 15px !important; /* 左右增加margin */
    padding: 10px !important;
    overflow: visible !important;
}

/* Section标题容器防裁剪 */
.section-header {
    overflow: visible !important;
    padding: 30px 20px !important; /* 增加padding */
    margin: 20px 0 !important;
}

.section-title {
    overflow: visible !important;
    padding: 20px 15px !important; /* 增加padding确保图标不被裁剪 */
    line-height: 2 !important; /* 增加行高 */
}

/* Section标题中的图标 */
.section-title i,
.section-title .fas,
.section-title .far,
.section-title .fab {
    display: inline-block !important;
    margin: 0 12px !important; /* 图标左右margin */
    padding: 8px !important;
    overflow: visible !important;
}

/* 确保图标动画不被裁剪 */
.section-title i:hover,
.hero-title i:hover {
    transform: scale(1.1) translateZ(0) !important;
    overflow: visible !important;
}

/* Panel标题防裁剪（侧边栏"最新资讯"、"本周热推"等） */
.panel-header {
    overflow: visible !important;
    padding: 20px 15px !important;
    margin: 10px 0 !important;
}

.panel-header h3,
.panel-title {
    overflow: visible !important;
    padding: 10px 8px !important;
    line-height: 1.8 !important;
}

/* Panel标题中的图标 */
.panel-header i,
.panel-title i {
    display: inline-block !important;
    margin: 0 10px !important;
    padding: 6px !important;
    overflow: visible !important;
}

/* 所有带图标的标题通用规则 */
h1 i, h2 i, h3 i, h4 i,
.title i, .heading i {
    overflow: visible !important;
    margin: 0 10px !important;
    padding: 5px !important;
}

/* ========================================
   特别处理有动画的图标（如bookFloat等）
   ======================================== */
/* Hero图标有上下浮动动画，需要额外空间 */
.hero-title {
    padding-top: 30px !important; /* 顶部额外空间防止图标上移时被裁剪 */
    padding-bottom: 30px !important; /* 底部额外空间 */
}

.hero-title i {
    margin: 0 20px !important; /* 左右更多空间 */
    padding: 15px 0 !important; /* 上下padding */
}

/* Section标题图标可能有hover动画 */
.section-title {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

.section-title i {
    margin: 0 15px !important;
    padding: 12px 0 !important;
}

/* 确保overlay不影响子元素 */
.hero-overlay {
    overflow: visible !important;
    pointer-events: none !important; /* overlay不阻止交互 */
}

/* Guide hero特殊处理 */
.guide-hero {
    padding-top: 120px !important; /* 顶部更多空间 */
    padding-bottom: 100px !important;
    overflow: visible !important;
}

/* 响应式：移动端减少padding但保持overflow:visible */
@media (max-width: 768px) {
    .hero-title {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    .guide-hero {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }
}