/**
 * 特别为修复header宽度问题创建的样式文件
 * 使用最高优先级选择器和!important来覆盖所有其他样式
 */

/* 重要：强制设置header宽度为516px和高度为79px */
html body .header,
html body .fixed-header-section .header,
body .header,
.fixed-header-section .header,
.header {
    width: 100% !important;
    max-width: 516px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 确保fixed-header-section也有正确的宽度 */
html body .fixed-header-section,
body .fixed-header-section,
.fixed-header-section {
    width: 100% !important;
    max-width: 516px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 强制设置横向标签宽度和高度，确保4等分且左右不留空隙 */
html body .horizontal-tabs,
body .horizontal-tabs,
.horizontal-tabs {
    width: 100% !important;
    max-width: 516px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 92px !important; /* 设置固定高度为92px */
    display: flex !important;
    justify-content: space-between !important; /* 改为space-between确保两端对齐 */
    padding: 0 !important; /* 移除内边距 */
}

/* 设置标签图标大小及其内部元素 */
html body .tab-icon,
body .tab-icon,
.tab-icon {
    font-size: 39px !important;
    height: 39px !important;
    width: 39px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 确保图标内部的所有元素（图片、i标签、svg等）都能正确缩放 */
html body .tab-icon i,
body .tab-icon i,
.tab-icon i,
html body .tab-icon img,
body .tab-icon img,
.tab-icon img,
html body .tab-icon svg,
body .tab-icon svg,
.tab-icon svg,
html body .tab-icon .icon-normal,
body .tab-icon .icon-normal,
.tab-icon .icon-normal,
html body .tab-icon .icon-selected,
body .tab-icon .icon-selected,
.tab-icon .icon-selected {
    font-size: 39px !important;
    height: 39px !important;
    width: 39px !important;
    max-height: 39px !important;
    max-width: 39px !important;
    object-fit: contain !important;
}

/* 设置标签文字字体大小 */
html body .tab span:not(.tab-icon),
body .tab span:not(.tab-icon),
.tab span:not(.tab-icon) {
    font-size: 16px !important;
}

/* 确保tab占据等分空间 */
html body .tab,
body .tab,
.tab {
    flex: 1 1 25% !important; /* 确保每个tab占据25%的空间 */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important; /* 移除外边距 */
    box-sizing: border-box !important;
    position: relative !important; /* 添加相对定位 */
}

/* 设置选中标签的边框颜色 - 使用::after伪元素，宽度50%并居中 */
html body .tab.active::after,
body .tab.active::after,
.tab.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 25% !important; /* 从左侧25%开始，确保居中 */
    width: 50% !important; /* 宽度为50% */
    height: 3px !important;
    background-color: #fff390 !important;
    z-index: 10 !important; /* 确保在其他元素之上 */
}

/* 设置logo容器尺寸 - 增加响应式适配 */
html body .logo-container,
body .logo-container,
.logo-container {
    width: 150px !important;
    height: 53px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: -15px !important; /* 增加左边距，避免与menu-btn重叠 */
}

/* 设置logo尺寸 - 增加响应式适配 */
html body .logo,
body .logo,
.logo {
    height: 53px !important;
    width: 150px !important;
    max-width: 150px !important;
    object-fit: contain !important;
}

/* 设置登录按钮尺寸 */
html body .login-btn,
body .login-btn,
.login-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 设置注册按钮尺寸 */
html body .register-btn,
body .register-btn,
.register-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 设置菜单按钮样式 - 确保不会与logo重叠 */
html body .menu-btn,
body .menu-btn,
.menu-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 0 !important;
    flex-shrink: 0 !important; /* 防止按钮被压缩 */
    margin-right: 5px !important; /* 增加右边距 */
}

/* 设置菜单按钮图标 */
html body .menu-btn-icon,
body .menu-btn-icon,
.menu-btn-icon {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* 默认状态下显示normal图标，隐藏active图标 */
html body .menu-btn-icon.active-icon,
body .menu-btn-icon.active-icon,
.menu-btn-icon.active-icon {
    opacity: 0 !important;
}

/* 激活状态下隐藏normal图标，显示active图标 */
html body .menu-btn.active .menu-btn-icon.normal-icon,
body .menu-btn.active .menu-btn-icon.normal-icon,
.menu-btn.active .menu-btn-icon.normal-icon {
    opacity: 0 !important;
}

html body .menu-btn.active .menu-btn-icon.active-icon,
body .menu-btn.active .menu-btn-icon.active-icon,
.menu-btn.active .menu-btn-icon.active-icon {
    opacity: 1 !important;
}

/* 添加响应式适配 */
@media (max-width: 480px) {
    html body .logo-container,
    body .logo-container,
    .logo-container {
        width: 120px !important; /* 小屏幕下减小宽度 */
        height: 42px !important; /* 小屏幕下减小高度 */
    }
    
    html body .logo,
    body .logo,
    .logo {
        height: 42px !important; /* 小屏幕下减小高度 */
        width: 120px !important; /* 小屏幕下减小宽度 */
        max-width: 120px !important;
    }
    
    html body .menu-btn,
    body .menu-btn,
    .menu-btn {
        width: 36px !important; /* 小屏幕下减小按钮尺寸 */
        height: 36px !important;
    }
    
    html body .menu-btn-icon,
    body .menu-btn-icon,
    .menu-btn-icon {
        width: 36px !important; /* 小屏幕下减小图标尺寸 */
        height: 36px !important;
    }
}

/* 超小屏幕适配 */
@media (max-width: 360px) {
    html body .logo-container,
    body .logo-container,
    .logo-container {
        width: 100px !important; /* 超小屏幕下进一步减小宽度 */
        height: 35px !important; /* 超小屏幕下进一步减小高度 */
    }
    
    html body .logo,
    body .logo,
    .logo {
        height: 35px !important; /* 超小屏幕下进一步减小高度 */
        width: 100px !important; /* 超小屏幕下进一步减小宽度 */
        max-width: 100px !important;
    }
    
    html body .menu-btn,
    body .menu-btn,
    .menu-btn {
        width: 32px !important; /* 超小屏幕下进一步减小按钮尺寸 */
        height: 32px !important;
    }
    
    html body .menu-btn-icon,
    body .menu-btn-icon,
    .menu-btn-icon {
        width: 32px !important; /* 超小屏幕下进一步减小图标尺寸 */
        height: 32px !important;
    }
}