/* Mobile Button Colors Fix - 修复移动端按钮颜色配置不生效的问题 */
/* 这个文件需要在所有移动端样式之后加载 */

/* ============================================
   移动端按钮颜色配置支持
   使用 CSS 变量来实现动态颜色配置
   只在移动端应用，不影响PC端
   ============================================ */

/* 手机设备 (最大 767px) - 只在移动端应用 */
@media screen and (max-width: 767px) {
    /* 移动端按钮基础颜色 - 无背景图情况 */
    body .curelight-hero .hero-nav-buttons .nav-btn {
        /* 如果设置了移动端专用颜色，使用移动端颜色，否则使用桌面端颜色 */
        background: var(--mobile-nav-btn-bg-color, var(--nav-btn-bg-color)) !important;
        color: var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)) !important;
    }
    
    /* 有背景图时的按钮颜色 */
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn,
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn.nav-btn-bg {
        /* 使用配置的移动端按钮颜色的半透明版本 */
        background: var(--mobile-nav-btn-bg-rgba, var(--nav-btn-bg-rgba)) !important;
        color: var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* 按钮悬停/激活状态 - 移动端 */
    body .curelight-hero .hero-nav-buttons .nav-btn:hover,
    body .curelight-hero .hero-nav-buttons .nav-btn:active {
        /* 使用悬停颜色或者加深当前颜色 */
        background: var(--mobile-nav-btn-hover-bg-color, var(--nav-btn-hover-bg-color)) !important;
        color: var(--mobile-nav-btn-hover-text-color, var(--nav-btn-hover-text-color, var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)))) !important;
        transform: translateY(-1px);
    }
    
    /* 有背景图时的悬停状态 - 移动端 */
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn:hover,
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn:active,
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn.nav-btn-bg:hover,
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn.nav-btn-bg:active {
        background: var(--mobile-nav-btn-hover-bg-rgba, var(--nav-btn-hover-bg-rgba)) !important;
        color: var(--mobile-nav-btn-hover-text-color, var(--nav-btn-hover-text-color, var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)))) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
    }
}

/* 小手机设备 (最大 575px) */
@media screen and (max-width: 575px) {
    /* 确保超小屏幕也应用配置的颜色 */
    body .curelight-hero .hero-nav-buttons .nav-btn {
        background: var(--mobile-nav-btn-bg-color, var(--nav-btn-bg-color)) !important;
        color: var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)) !important;
    }
    
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn,
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn.nav-btn-bg {
        /* 在超小屏幕上使用半透明 */
        background: var(--mobile-nav-btn-bg-rgba, var(--nav-btn-bg-rgba)) !important;
        color: var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)) !important;
    }
}

/* 超小手机设备 (最大 375px) */
@media screen and (max-width: 375px) {
    body .curelight-hero .hero-nav-buttons .nav-btn {
        background: var(--mobile-nav-btn-bg-color, var(--nav-btn-bg-color)) !important;
        color: var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)) !important;
    }
}

/* ============================================
   触摸设备特殊处理
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* 确保触摸设备上的按钮颜色正确 */
    .hero-nav-buttons .nav-btn {
        background: var(--mobile-nav-btn-bg-color, var(--nav-btn-bg-color)) !important;
        color: var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)) !important;
    }
    
    /* 触摸激活状态 */
    .hero-nav-buttons .nav-btn:active {
        background: var(--mobile-nav-btn-hover-bg-color, var(--nav-btn-hover-bg-color)) !important;
        color: var(--mobile-nav-btn-hover-text-color, var(--nav-btn-hover-text-color, var(--mobile-nav-btn-text-color, var(--nav-btn-text-color)))) !important;
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ============================================
   调试辅助 - 可以通过控制台查看当前应用的颜色
   ============================================ */
@media (max-width: 767px) {
    .hero-nav-buttons::before {
        content: "";
        display: none;
        /* 用于调试：在控制台可以看到当前的颜色配置 */
        --debug-mobile-bg: var(--mobile-nav-btn-bg-color);
        --debug-mobile-text: var(--mobile-nav-btn-text-color);
        --debug-desktop-bg: var(--nav-btn-bg-color);
        --debug-desktop-text: var(--nav-btn-text-color);
    }
}