/* Mobile Button Colors Final Override - 最终覆盖移动端按钮颜色 */
/* 此文件必须最后加载以确保优先级最高 */

/* ============================================
   移动端按钮颜色最终覆盖
   只影响移动端，不影响PC端
   ============================================ */

/* 手机设备 - 覆盖所有之前的样式 */
@media only screen and (max-width: 767px) {
    /* 强制应用移动端按钮颜色配置 */
    body .curelight-hero .hero-nav-buttons .nav-btn,
    body .curelight-hero .hero-nav-buttons .nav-btn.nav-btn-bg,
    body section.curelight-hero .hero-nav-buttons .nav-btn {
        /* 使用移动端配置的颜色，如果没有设置则降级到桌面端颜色 */
        background: var(--mobile-nav-btn-bg-color, var(--nav-btn-bg-color)) !important;
        background-image: none !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,
    body section.curelight-hero.with-bg .hero-nav-buttons .nav-btn {
        /* 使用半透明背景 */
        background: var(--mobile-nav-btn-bg-rgba, var(--nav-btn-bg-rgba)) !important;
        background-image: none !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;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* 更小的设备 */
@media only screen and (max-width: 575px) {
    body .curelight-hero .hero-nav-buttons .nav-btn,
    body section.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 section.curelight-hero.with-bg .hero-nav-buttons .nav-btn {
        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;
    }
}

/* 最小设备 */
@media only 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;
    }
}

/* 确保PC端不受影响 - 恢复PC端原有样式 */
@media only screen and (min-width: 768px) {
    /* PC端保持原有样式逻辑，不使用移动端变量 */
    body .curelight-hero .hero-nav-buttons .nav-btn {
        /* 使用桌面端颜色变量 */
        background: var(--nav-btn-bg-color) !important;
        color: var(--nav-btn-text-color) !important;
    }
    
    body .curelight-hero .hero-nav-buttons .nav-btn:hover {
        background: var(--nav-btn-hover-bg-color) !important;
        color: var(--nav-btn-hover-text-color) !important;
    }
    
    /* PC端有背景图时 */
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn,
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn.nav-btn-bg {
        /* 使用桌面端的RGBA颜色 */
        background: var(--nav-btn-bg-rgba) !important;
        color: var(--nav-btn-text-color) !important;
    }
    
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn:hover,
    body .curelight-hero.with-bg .hero-nav-buttons .nav-btn.nav-btn-bg:hover {
        background: var(--nav-btn-hover-bg-rgba) !important;
        color: var(--nav-btn-hover-text-color) !important;
    }
}