/* 添加到现有的CSS文件末尾 */

/* 快递查询下拉菜单相关样式 */
#tracking-dropdown-container {
  position: relative;
}

#tracking-dropdown-menu {
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out,
    width 0.2s ease-out; /* 添加宽度过渡效果 */
  opacity: 0;
  transform: translateY(-5px); /* 稍微增加移动距离，配合圆角效果 */
  display: block;
  pointer-events: none;
  border: none; /* 移除所有边框 */
  margin-top: 0;
  box-shadow:
    0 6px 16px -2px rgba(0, 0, 0, 0.12),
    0 4px 8px -2px rgba(0, 0, 0, 0.07); /* 增强阴影效果 */
  transform-origin: top left;
  border-radius: 10px !important; /* 增大圆角半径 */
  overflow: hidden; /* 确保内容不会超出圆角边界 */
  /* 注意：不在CSS中设置固定宽度，所有宽度由JavaScript动态控制 */
}

#tracking-dropdown-menu.hidden {
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  visibility: hidden; /* 添加 visibility 以确保完全隐藏 */
}

#tracking-dropdown-menu:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible; /* 确保可见 */
}

/* 确保菜单项文本在一行内显示 */
#tracking-dropdown-menu a {
  white-space: nowrap; /* 防止文本换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  overflow: hidden; /* 隐藏超出部分 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
}

#tracking-dropdown-menu a i {
  flex-shrink: 0; /* 图标不缩小 */
}

#tracking-dropdown-menu a span {
  flex-grow: 1; /* 文本占用剩余空间 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 创建一个透明的连接区域，确保从主菜单移动到子菜单时不会失去hover状态 */
#tracking-dropdown-container::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px; /* 增加高度以确保覆盖间隙 */
  background: transparent;
  z-index: 99998; /* 确保在下拉菜单之下但在其他元素之上 */
  pointer-events: auto; /* 确保可以捕获鼠标事件 */
}