/* =========================================
    Dropdown Trigger (左侧触发按钮)
    ========================================= */
.top-dropdown-menu {
  position: static;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1.5em;
  color: #fff;
  font-weight: 500;
  border-right: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
  transition: background-color 0.3s;
}

.top-dropdown-menu:hover,
.top-dropdown-menu.open {
  background-color: rgba(0,0,0,0.2);
}

.top-dropdown-menu i {
  margin-left: 10px;
  font-size: var(--font-size-nav);
  transition: transform 0.3s;
  opacity: 0.8;
}

.top-dropdown-menu.open i {
  transform: rotate(180deg);
}

#top-current-menu-item {
  font-size: var(--font-size-nav);
}

.top-menu-label-wrapper {
  position: relative; /* Tip 参照它定位 */
  display: flex;      /* 保持内部文字和图标横向排列 */
  align-items: center;
  height: 100%;       /* 撑满高度，保证点击区域 */
}

/* =========================================
    Mega Menu Container (下拉列表)
    ========================================= */
.top-dropdown-menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0; /* 左右均为0，确保充满父容器宽度 */
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;

  /* 背景色调整 */
  background-color: #334466;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  padding-bottom: 15px;
  padding-top: 0;
  padding-left: 20px;
  padding-right: 20px;

  display: flex;
  flex-direction: column;
  z-index: 1002;

  /* 动画状态 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.2s ease-in-out;
}

/* 显示状态 */
.top-dropdown-menu-list:not(.hidden) {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.top-dropdown-menu-list.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

/* =========================================
    Mega Menu Content Structures
    ========================================= */

.top-mega-menu-section-title {
  margin-top: 10px !important;
}

/* 左侧：分类名称 */
.top-mega-menu-category-label {
  flex: 0 0 140px; /* 固定左侧宽度 */
  font-size: var(--font-size-nav);
  color: #fff;
  margin-right: 20px;
  padding-top: 5px; /* 与右侧按钮视觉对齐 */
  /* 已移除 ::after 下划线样式 */
}

/* 右侧：芯片列表容器 */
.top-mega-menu-items-wrapper {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 让 Item 容器占满宽度，不需要左侧留白 */
.top-mega-menu-items-wrapper.full-width {
  flex: 1 1 100%;
  padding-left: 0;
  margin-left: 0;
}

/* 具体的芯片链接 Item */
.top-mega-menu-item,
.top-mega-menu-item:visited,
.top-mega-menu-item:link,
.top-mega-menu-item:active {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: #fff !important;
  text-decoration: none;
  font-size: var(--font-size-nav);
  font-weight: normal;
  transition: all 0.2s;
  /* 移除固定宽度，改为自适应 */
  min-width: 60px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.top-mega-menu-item:hover {
  background-color: #FF6D65;
  border-color: #FF6D65;
  /* color: #fff !important; */
  transform: translateY(-1px);
}

/* 激活状态 */
.top-mega-menu-item.active {
  background-color: #FF6D65;
  border-color: #FF6D65;
  /* color: #fff !important; */
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(255, 109, 101, 0.4);
}

/* =========================================
  Mega Menu Tabs Styling (Bootstrap Adapter)
  ========================================= */

/* 覆盖默认的 Bootstrap nav-tabs 样式以适应深色背景 */
.top-mega-menu-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
  padding-bottom: 5px;
  padding-left: 0;
  display: flex !important;
}

.top-mega-menu-tabs .nav-item {
  list-style: none !important;
  margin-left: 0 !important;
}

.top-mega-menu-tabs .nav-link {
  color: #aebfd4;
  border: none;
  border-bottom: 3px solid transparent; /* 预留底部边框位置 */
  font-size: var(--font-size-nav);
  padding-top: 10px;
  padding-bottom: 8px;
  padding-left: 0;
  padding-right: 20px;
  background-color: transparent !important; /* 确保背景透明 */
  transition: all 0.3s;
}

.top-mega-menu-tabs .nav-link:hover {
  color: #fff;
  border-color: transparent; /* hover时不显示边框，只变色 */
}

/* 选中状态 */
.top-mega-menu-tabs .nav-link.active {
  color: #fff !important;
  background-color: transparent !important;
  border-color: transparent;
  border-bottom: 3px solid #FF6D65; /* 选中时底部的亮色条 */
}

/* 内容区域的间距调整 */
.top-mega-menu-content {
  /* 可以在这里添加 fade 动画相关的 padding */
  width: 100%;
}

.top-mega-menu-row {
  display: flex;
  align-items: flex-start;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05); /* 可选：增加极淡的分隔线 */
}

.top-mega-menu-row:last-child {
  border-bottom: none;
}

/* =========================================
  Dropdown Tip (新增提示框样式)
  ========================================= */
.top-menu-tip {
  position: absolute;
  bottom: 100%; /* 位于父元素上方 */
  left: 0;
  right: auto;
  transform: translateY(5px);
  background-color: #FF6D65; /* 使用你网站的强调色 (橙红色) */
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: var(--font-size-p);
  font-weight: normal;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  pointer-events: none; /* 防止遮挡鼠标点击 */
  z-index: 1003;
}

/* 显示状态 */
.top-menu-tip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-20px);
}

/* 底部的小箭头 */
.top-menu-tip .tip-arrow {
  position: absolute;
  bottom: -6px;
  left: 30px;
  transform: none;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #FF6D65;
}

/* 只要下拉菜单打开了，提示框就必须强制隐藏 */
.top-dropdown-menu.open .top-menu-tip {
  display: none !important;
}

/* =========================================
    Mobile Adaptation
    ========================================= */
@media (max-width: 768px) {
  .top-dropdown-menu-list {
    padding-left: 18px;
    padding-right: 18px;
    max-height: 60vh;
    overflow-y: auto;
    /* 突破父容器宽度 */
    width: 100vw;
    left: 50%;
    right: auto;
    margin-left: -50vw;
    border-radius: 0;
    box-sizing: border-box; /* 确保 padding 不会撑破 100vw */
  }

  .top-mega-menu-row {
      flex-direction: column;
      padding: 2px 0;
  }
  .top-mega-menu-category-label {
      margin-bottom: 5px;
      flex: auto;
  }
  /* 移动端稍微增加点击区域 */
  .top-mega-menu-item {
      padding: 8px 12px;
  }
}

/* 移动端适配：如果屏幕太窄，防止 Tip 溢出屏幕，可以微调位置 */
@media (max-width: 480px) {
  .top-menu-tip {
      left: 20px; /* 左对齐一点，避免右边溢出 */
      transform: translateY(-10px);
  }
  .top-menu-tip.show {
      transform: translateY(-15px);
  }
  .top-menu-tip .tip-arrow {
      left: 20px; /* 箭头也要跟着移 */
  }
}