/* 
WSVip 完整黑色主题样式
适用于: https://shop3.wsvip.net/
包含头部、脚部的完整黑色主题，以及下拉菜单的基础悬浮功能
*/

/* ========== 全局强制黑色背景 ========== */

/* Body 强制黑色背景 */
html, body {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    min-height: 100vh !important;
}

/* 确保主要内容区域透明，显示body背景 */
main, .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    background: transparent !important;
    background-color: transparent !important;
}

/* ========== HEADER 强制黑色样式 ========== */

/* Header 整体 */
header, 
header * {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* 顶部导航栏 - 多重选择器确保覆盖 */
.top-wrap,
header .top-wrap,
div.top-wrap {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 主导航栏 - 多重选择器确保覆盖 */
.header-content,
header .header-content,
div.header-content {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #000000 !important;
    border-bottom-color: #000000 !important;
}

/* Header 内的所有子元素强制样式 */
.top-wrap *,
.header-content *,
.header-mobile * {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Header 链接和按钮 */
.top-wrap a,
.top-wrap .btn,
.top-wrap .dropdown-toggle,
.header-content .nav-link,
.header-content .navbar-nav .nav-link,
.header-content a,
.header-mobile a,
.header-mobile .nav-link {
    color: #ffffff !important;
    border-color: transparent !important;
    background-color: transparent !important;
}

/* Header 图标 */
.top-wrap .iconfont,
.header-content .iconfont,
.header-mobile .iconfont,
.header-mobile .bi {
    color: #ffffff !important;
}

/* 移动端Header */
.header-mobile,
header .header-mobile {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ========== FOOTER 强制黑色样式 ========== */

/* Footer 整体 - 多重选择器确保覆盖 */
footer,
footer *,
.footer-content,
.footer-bottom,
.services-wrap {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Footer 服务区域 */
footer .services-wrap,
.services-wrap {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Footer 主要内容区域 */
footer .footer-content,
.footer-content {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Footer 底部区域 */
footer .footer-bottom,
.footer-bottom {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Footer 文字颜色 */
footer,
footer h6,
footer .title,
footer .sub-title,
footer p,
footer .intro-title,
footer .text,
.footer-content h6,
.footer-content .intro-title,
.footer-content p,
.footer-content .text,
.service-item .title,
.service-item .sub-title {
    color: #ffffff !important;
}

/* Footer 链接 */
footer a,
.footer-content a,
.footer-bottom a {
    color: #e0e0e0 !important;
}

footer a:hover,
.footer-content a:hover,
.footer-bottom a:hover {
    color: #ffffff !important;
}

/* Footer 图标 */
footer .bi,
.footer-content .bi {
    color: #ffffff !important;
}

/* ========== 下拉菜单基础样式 ========== */

/* 下拉菜单悬浮显示 - 基础功能 */
.dropdown:hover .dropdown-menu {
    display: block !important;
}

/* 下拉菜单容器 */
.dropdown,
.nav-item.dropdown,
header .dropdown,
.header-content .dropdown,
.top-wrap .dropdown {
    background: transparent !important;
    background-color: transparent !important;
}

/* 下拉菜单主体 */
.dropdown-menu,
header .dropdown-menu,
.header-content .dropdown-menu,
.top-wrap .dropdown-menu,
.nav-item .dropdown-menu {
    background: #000000 !important;
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    max-height: 280px; /* 原始的固定最大高度 - 可能导致显示不全 */
    overflow-y: auto; /* 超出部分滚动 */
}

/* 下拉菜单项 */
.dropdown-item,
.dropdown-menu .dropdown-item,
header .dropdown-item,
.header-content .dropdown-item,
.top-wrap .dropdown-item {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* 下拉菜单项悬停效果 */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
header .dropdown-item:hover,
.header-content .dropdown-item:hover,
.top-wrap .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* 下拉菜单项激活状态 */
.dropdown-item:active,
.dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
    background: rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* 下拉菜单按钮/触发器 */
.dropdown-toggle,
header .dropdown-toggle,
.header-content .dropdown-toggle,
.top-wrap .dropdown-toggle {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    color: #e0e0e0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: transparent !important;
}

/* ========== 其他元素样式 ========== */

/* 表单元素 */
.header-content input,
.footer-content input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.header-content input::placeholder,
.footer-content input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 按钮 */
.header-content .btn,
.footer-content .btn {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* 悬停效果 */
.header-content .nav-link:hover,
.header-mobile .nav-link:hover,
.top-wrap .btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

/* 购物车徽章 */
.header-content .cart-badge-quantity {
    background-color: #FF4D00 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* Logo 亮度调整 */
.header-content .logo img,
.header-mobile .logo img,
.header-mobile .center img,
.footer-content .logo img {
    filter: brightness(1.2) !important;
}

/* 图标亮度调整 */
.service-item .icon img,
.social-network img,
.footer-bottom .right-img img {
    filter: brightness(1.2) contrast(1.1) !important;
}

.social-network a:hover img {
    filter: brightness(1.4) contrast(1.2) !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .header-mobile .mobile-content {
        padding: 10px 15px !important;
    }
    
    .footer-content .col-lg-3,
    .footer-content .col-md-6 {
        margin-bottom: 20px !important;
    }
    
    /* 移动端下拉菜单的问题保持原样 */
    .dropdown-menu {
        max-height: 280px !important; /* 在小屏幕上可能显示不全 */
    }
}

/* ========== Hero区域移动端居中修复 ========== */

/* 平板端修复 */
@media (max-width: 1024px) {
    #hero-module .hero-content {
        grid-template-columns: 1fr !important;
        gap: 60px !important;
        text-align: center !important;
        justify-items: center !important;
        align-items: center !important;
    }
    
    #hero-module .hero-text {
        width: 100% !important;
        max-width: 600px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #hero-module .hero-image {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* 手机端修复 */
@media (max-width: 768px) {
    #hero-module .container {
        padding: 0 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    #hero-module .hero-content {
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 40px !important;
    }
    
    #hero-module .hero-text {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 auto !important;
    }
    
    #hero-module .hero-image {
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
    }
    
    #hero-module .hero-title {
        text-align: center !important;
        width: 100% !important;
    }
    
    #hero-module .hero-description {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    #hero-module .hero-features {
        align-items: center !important;
        width: 100% !important;
    }
    
    #hero-module .feature-item {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }
    
    #hero-module .hero-cta {
        align-items: center !important;
        width: 100% !important;
    }
    
    #hero-module .hero-product-image {
        display: block !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 769px) {
    .footer-content .row {
        align-items: flex-start !important;
    }
}