/* 确保Font Awesome正确加载 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2") format("woff2");
}

/* 天猫风格悬浮菜单 - 核心修复 */
.tmall-floating-menu {
    position: fixed !important;
    z-index: 99999 !important;
    display: flex !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    transition: all 0.3s ease;
}

/* 设备显示控制 */
@media (max-width: 1023px) {
    .desktop-device {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .mobile-device {
        display: none !important;
    }
}

/* 通用菜单项样式 */
.tmall-floating-menu .menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: inherit !important;
    flex: 1 0 auto !important;
    min-width: 0 !important;
    position: relative;
    transition: all 0.2s ease;
    padding: 8px 12px !important;
}

.tmall-floating-menu .menu-item:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* 水平布局菜单项 (顶部和底部) */
.tmall-floating-menu .menu-item.horizontal {
    flex-direction: row !important;
    height: 100% !important;
}

/* 垂直布局菜单项 (左侧和右侧) */
.tmall-floating-menu .menu-item.vertical {
    flex-direction: column !important;
    width: 100% !important;
    padding: 15px 0 !important;
}

/* 修复图标样式 */
.tmall-floating-menu .menu-item i {
    display: block !important;
    font-size: 24px !important;
    color: inherit !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    transition: transform 0.2s ease;
}

.tmall-floating-menu .menu-item:hover i {
    transform: scale(1.1);
}

/* 修复文字样式 */
.tmall-floating-menu .menu-item span {
    display: block !important;
    font-size: var(--menu-font-size, 14px) !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease;
}

/* 水平布局中图标和文字的间距 */
.tmall-floating-menu .menu-item.horizontal i {
    margin-right: 8px !important;
}

/* 垂直布局中图标和文字的间距 */
.tmall-floating-menu .menu-item.vertical i {
    margin-bottom: 5px !important;
}

/* 修复顶部菜单 */
.tmall-floating-menu.position-top {
    top: var(--offset-top, 0) !important;
    left: var(--offset-left, 0) !important;
    right: var(--offset-right, 0) !important;
    width: 100vw !important;
    height: var(--menu-height, 60px) !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    border-radius: 0 0 8px 8px;
}

/* 修复底部菜单 */
.tmall-floating-menu.position-bottom {
    bottom: var(--offset-bottom, 0) !important;
    left: var(--offset-left, 0) !important;
    right: var(--offset-right, 0) !important;
    width: 100vw !important;
    height: var(--menu-height, 60px) !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    border-radius: 8px 8px 0 0;
}

/* 修复左侧菜单 */
.tmall-floating-menu.position-left {
    left: var(--offset-left, 0) !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: var(--menu-width, 80px) !important;
    height: auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 0 8px 8px 0;
    z-index: 99998;
    margin-top: var(--offset-top, 0) !important;
    margin-bottom: var(--offset-bottom, 0) !important;
}

/* 修复右侧菜单 */
.tmall-floating-menu.position-right {
    right: var(--offset-right, 0) !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: var(--menu-width, 80px) !important;
    height: auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 8px 0 0 8px;
    z-index: 99998;
    margin-top: var(--offset-top, 0) !important;
    margin-bottom: var(--offset-bottom, 0) !important;
}

/* 移动端通用样式调整 */
@media (max-width: 768px) {
    .tmall-floating-menu .menu-item.horizontal {
        padding: 5px 8px !important;
    }
    
    .tmall-floating-menu .menu-item.horizontal i {
        font-size: 20px !important;
        margin-right: 5px !important;
    }
    
    .tmall-floating-menu .menu-item.horizontal span {
        font-size: calc(var(--menu-font-size, 14px) - 2px) !important;
    }
    
    .tmall-floating-menu .menu-item.vertical {
        padding: 10px 0 !important;
    }
    
    .tmall-floating-menu .menu-item.vertical i {
        font-size: 20px !important;
    }
    
    .tmall-floating-menu .menu-item.vertical span {
        font-size: calc(var(--menu-font-size, 14px) - 3px) !important;
    }
    
    .tmall-floating-menu.position-top,
    .tmall-floating-menu.position-bottom {
        height: 50px !important;
    }
}

/* 超小屏幕隐藏侧边菜单 */
@media (max-width: 480px) {
    .tmall-floating-menu.position-left,
    .tmall-floating-menu.position-right {
        display: none !important;
    }
    
    .tmall-floating-menu .menu-item.horizontal {
        flex-direction: column !important;
        padding: 3px 5px !important;
    }
    
    .tmall-floating-menu .menu-item.horizontal i {
        margin-right: 0 !important;
        margin-bottom: 2px !important;
        font-size: 18px !important;
    }
    
    .tmall-floating-menu .menu-item.horizontal span {
        font-size: calc(var(--menu-font-size, 14px) - 4px) !important;
    }
}

/* 防止菜单项内容被压缩 */
.tmall-floating-menu .menu-item {
    flex-shrink: 1 !important;
    overflow: visible !important;
}

/* 确保菜单项在IE11上正确显示 */
.tmall-floating-menu {
    -ms-flex-wrap: nowrap !important;
}

.tmall-floating-menu .menu-item {
    -ms-flex: 1 0 auto !important;
}

/* 添加激活状态样式 */
.tmall-floating-menu .menu-item.active {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05);
}

/* === 边距一致性修复 === */
/* 强制重置所有位置的内外边距 */
.tmall-floating-menu.position-top,
.tmall-floating-menu.position-bottom,
.tmall-floating-menu.position-left,
.tmall-floating-menu.position-right {
    margin: 0 !important;
    padding: 0 !important;
}

/* 确保内边距应用到菜单项容器 */
.tmall-floating-menu .menu-item {
    margin: 0 !important;
}

/* 为所有菜单添加内部容器 */
.tmall-floating-menu .menu-inner-container {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    padding: inherit !important;
    margin: inherit !important;
}

/* 水平菜单内部容器 */
.tmall-floating-menu.position-top .menu-inner-container,
.tmall-floating-menu.position-bottom .menu-inner-container {
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
}

/* 垂直菜单内部容器 */
.tmall-floating-menu.position-left .menu-inner-container,
.tmall-floating-menu.position-right .menu-inner-container {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 边距一致性保障 */
.tmall-floating-menu .menu-inner-container {
    padding: var(--menu-padding, 0) !important;
    margin: var(--menu-margin, 0) !important;
}