/**
 * 特别为修复header宽度和高度问题创建的样式文件
 * 使用最高优先级选择器和!important来覆盖所有其他样式
 * 采用响应式设计确保在各种设备上都能适配高度
 */

/* 重要：设置header宽度和响应式高度 */
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;
    min-height: 50px !important; /* 减小最小高度 */
    padding: 5px 0px !important; /* 减小padding来降低整体高度 */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !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;
    display: flex !important;
    justify-content: space-between !important; /* 改为space-between确保两端对齐 */
    padding: 0 !important; /* 移除内边距 */
    border-bottom:1px solid var(--secondary-color);
    background-color: transparent !important; /* 修改为透明背景 */
}

/* 设置标签图标大小及其内部元素 - 更紧凑的设计 */
html body .tab-icon,
body .tab-icon,
.tab-icon {
    font-size: 36px !important; /* 稍微减小图标大小 */
    height: 2rem !important;
    width: 2.6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0px !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: 36px !important; 与父元素保持一致 */
    height: 100% !important;
    width: 100% !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: 1rem !important; /* 基础文字大小 */
    line-height: 1.2 !important; /* 行高 */
    margin-top: 0 !important; /* 移除顶部边距 */
    height: auto !important; /* 默认高度自适应 */
}

/* 确保tab占据等分空间并使内部元素更紧凑 */
html body .tab,
body .tab,
.tab {
    flex: 1 1 25% !important; /* 确保每个tab占据25%的空间 */
    border: none !important; /* 移除边框 */
    margin: 0 !important; /* 移除外边距 */
    box-sizing: border-box !important;
    position: relative !important; /* 添加相对定位 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

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

/* 设置logo容器尺寸 - 添加响应式适配 */
html body .logo-container,
body .logo-container,
.logo-container {
    width: 130px !important;
    height: 45px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

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

/* 设置登录按钮尺寸 */
html body .login-btn,
body .login-btn,
.login-btn {
    width: 80px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 5px 10px !important;
}

/* 设置注册按钮尺寸 */
html body .register-btn,
body .register-btn,
.register-btn {
    width: 90px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 5px 10px !important;
}

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

/* 隐藏FontAwesome图标 */
html body .menu-btn i,
body .menu-btn i,
.menu-btn i {
    display: none !important;
}

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

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

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;
}

/* 响应式设计 - 根据屏幕尺寸调整header和内部元素 */

/* 大屏幕设备 (PC浏览器) */
@media (min-width: 516px) {
    html body .header,
    body .header,
    .header {
        min-height: 55px !important; /* 减小PC浏览器下的高度 */
        padding: 6px 15px !important;
    }

    html body .logo-container,
    body .logo-container,
    .logo-container {
        width: 130px !important;
        height: 45px !important;
    }

    html body .logo,
    body .logo,
    .logo {
        height: 45px !important;
        width: 130px !important;
        max-width: 130px !important;
    }

    html body .login-btn,
    body .login-btn,
    .login-btn {
        width: 80px !important;
        height: 36px !important;
    }

    html body .register-btn,
    body .register-btn,
    .register-btn {
        width: 90px !important;
        height: 36px !important;
    }
}

/* 中等屏幕设备 (平板) */
@media (max-width: 515px) and (min-width: 481px) {
    html body .header,
    body .header,
    .header {
        min-height: 50px !important;
        padding: 5px 15px !important;
    }

    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 .login-btn,
    body .login-btn,
    .login-btn {
        width: 75px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    html body .register-btn,
    body .register-btn,
    .register-btn {
        width: 85px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
}

/* 小屏幕设备 (手机) */
@media (max-width: 480px) and (min-width: 361px) {
    html body .header,
    body .header,
    .header {
        min-height: 48px !important;
        padding: 4px 12px !important;
    }

    html body .logo-container,
    body .logo-container,
    .logo-container {
        width: 110px !important; /* 小屏幕下减小宽度 */
        height: 40px !important; /* 小屏幕下减小高度 */
    }

    html body .logo,
    body .logo,
    .logo {
        height: 40px !important; /* 小屏幕下减小高度 */
        width: 110px !important; /* 小屏幕下减小宽度 */
        max-width: 110px !important;
    }

    html body .login-btn,
    body .login-btn,
    .login-btn {
        width: 70px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    html body .register-btn,
    body .register-btn,
    .register-btn {
        width: 80px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    /* 调整搜索按钮大小 */
    html body .search-btn,
    body .search-btn,
    .search-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
}

/* 超小屏幕设备 (小型手机) */
@media (max-width: 360px) {
    html body .header,
    body .header,
    .header {
        min-height: 45px !important;
        padding: 3px 8px !important;
    }
    html body .logo-container,
    body .logo-container,
    .logo-container {
        width: 90px !important; /* 超小屏幕下进一步减小宽度 */
        height: 35px !important; /* 超小屏幕下进一步减小高度 */
    }

    html body .logo,
    body .logo,
    .logo {
        height: 35px !important; /* 超小屏幕下进一步减小高度 */
        width: 90px !important; /* 超小屏幕下进一步减小宽度 */
        max-width: 90px !important;
    }

    html body .login-btn,
    body .login-btn,
    .login-btn {
        width: 65px !important;
        height: 30px !important;
        font-size: 11px !important;
        padding: 2px 5px !important;
    }

    html body .register-btn,
    body .register-btn,
    .register-btn {
        width: 75px !important;
        height: 30px !important;
        font-size: 11px !important;
        padding: 2px 5px !important;
    }

    /* 调整搜索按钮大小 */
    html body .search-btn,
    body .search-btn,
    .search-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }


    /* 调整充值按钮 */
    html body .deposit-btn,
    body .deposit-btn,
    .deposit-btn {
        font-size: 11px !important;
        padding: 3px 6px !important;
        height: 28px !important;
    }

    /* 调整充值下拉按钮 */
    html body .deposit-dropdown-toggle,
    body .deposit-dropdown-toggle,
    .deposit-dropdown-toggle {
        height: 28px !important;
    }
}