/* ==========================================================================
   折云网络 · 官网顶部导航「下拉大菜单」美化
   --------------------------------------------------------------------------
   覆盖对象（都只改样式，不动模板与数据）：
     · 产品与服务下拉：.Submenu-container.product_services
     · 页面服务下拉：  .page_services（同样的左列表结构）
     · 通用分组面板：  .Submenu-middle-content .Submenu-item
   说明：nav.css 里的选择器层级非常深，这里统一加 .Submenu-background 前缀
        （多一层类名）来稳定压过它，个别被原样式写了 !important 的地方跟着加。
   ========================================================================== */

/* ---------- 左侧一级分类列表 ---------- */
.Submenu-background .Submenu-container.product_services .Submenu-product-list,
.Submenu-background .page_services .Submenu-page-list {
  gap: 3px;
  width: 100%;
}

.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  line-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
}

.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name:hover,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name:hover {
  background: rgba(0, 82, 217, 0.06);
}

/* 选中态：淡蓝底 + 左侧竖条，替掉原来那条细下划线 */
.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name.active,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name.active {
  background: linear-gradient(90deg, rgba(0, 82, 217, 0.12), rgba(0, 82, 217, 0.01));
}

.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name.active::before,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--Original);
}

.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name a,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name a {
  font-size: 14px;
  transition: color 0.18s ease;
}

.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name:hover a,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name:hover a {
  color: var(--Original);
}

.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name.active a,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name.active a {
  color: var(--Original) !important;
  font-weight: 600;
}

/* 隐藏原有的下划线动画 */
.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name a::after,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name a::after {
  display: none;
}

/* 一级分类上的小角标（火爆 / 热销 …） */
.Submenu-background .Submenu-container.product_services .Submenu-product-list .Submenu-product-name .Submenu-product-hot,
.Submenu-background .page_services .Submenu-page-list .Submenu-page-name .Submenu-page-hot {
  height: 17px;
  line-height: 17px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-family: inherit;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255, 90, 60, 0.28);
}

/* ---------- 右侧二级分类卡片 ---------- */
.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 16px;
  padding-bottom: 4px;
}

.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content {
  position: relative;
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid #eaeff6;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 42, 90, 0.04);
  min-height: 116px;
  max-height: none;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

/* 左上角品牌色装饰条，hover 时延展 */
.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 3px;
  border-radius: 12px 0 0 0;
  background: linear-gradient(90deg, var(--Original), #4d8dff);
  transition: width 0.3s ease;
}

/* 没有描述的卡片（如「代理自助开通」）：不再留一大块空白，标题垂直居中 */
.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content:not(:has(.list-product-desc:not(:empty))) {
  min-height: 88px;
  justify-content: center;
}

.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content:hover {
  background: #fff;
  border-color: rgba(0, 82, 217, 0.3);
  box-shadow: 0 10px 22px rgba(0, 82, 217, 0.13);
  transform: translateY(-3px);
  animation: none !important;
}

.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content:hover::before {
  width: 46px;
}

.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content .list-product-title {
  align-items: center;
  margin-bottom: 9px;
}

.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content .list-product-title .list-product-name {
  font-size: 15px;
  font-weight: 700;
  color: #1f2d3d;
  transition: color 0.2s ease;
}

.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content:hover .list-product-name {
  color: var(--Original) !important;
}

/* 卡片上的角标（CTG / CN2 / 专线 …） */
.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content .list-product-title .list-product-hot {
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 38, 38, 0.26);
  background: rgba(255, 38, 38, 0.07);
  color: #ff2626;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content .list-product-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: #8a94a6;
}

.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content:hover .list-product-desc {
  color: #6b7686 !important;
}

/* 国旗小图圆角 */
.Submenu-background .Submenu-container.product_services .menu-product-content .Submenu-middle-product .Submenu-product-content-list .list-product-content .list-product-title .list-product-img .list-product-img-country {
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 42, 90, 0.12);
}

/* ---------- 面板容器与搜索框 ---------- */
.Submenu-background .Submenu-container.product_services .Submenu-middle-right {
  padding: 24px 34px 28px;
}

.Submenu-background .Submenu-container.product_services .Submenu-middle-search .Submenu-middle-search-flex .Submenu-middle-search-box .Submenu-middle-search-box-left {
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.Submenu-background .Submenu-container.product_services .Submenu-middle-search .Submenu-middle-search-flex .Submenu-middle-search-box .Submenu-middle-search-box-left:hover {
  border-color: #dbe2ee;
}

.Submenu-background .Submenu-container.product_services .Submenu-middle-search .Submenu-middle-search-flex .Submenu-middle-search-box .Submenu-middle-search-box-left:focus-within {
  border-color: var(--Original);
  box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.08);
}

.Submenu-background .Submenu-container.product_services .Submenu-middle-search .Submenu-middle-search-flex .Submenu-middle-search-box .Submenu-middle-search-icon {
  font-size: 18px;
  color: #9aa6b8;
}

.Submenu-background .Submenu-container.product_services .Submenu-middle-search .Submenu-middle-search-flex .search-right-content li {
  border-radius: 999px;
  padding: 0 15px;
  background: #f4f7fc;
  border: 1px solid #eef2f8;
}

.Submenu-background .Submenu-container.product_services .Submenu-middle-search .Submenu-middle-search-flex .search-right-content li .search-right-content-text {
  font-weight: 400;
  color: #5b6678;
}

.Submenu-background .Submenu-container.product_services .Submenu-middle-search .Submenu-middle-search-flex .search-right-content li:hover {
  background: var(--Original);
  border-color: var(--Original);
}

/* ---------- 通用分组面板（其他导航项的下拉） ---------- */
.Submenu-background .Submenu-container .Submenu-middle-content {
  grid-gap: 6px 24px;
}

.Submenu-background .Submenu-container .Submenu-middle-content .Submenu-item {
  border: 1px solid transparent;
  border-radius: 12px;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.Submenu-background .Submenu-container .Submenu-middle-content .Submenu-item:hover {
  background: #fff !important;
  border-color: rgba(0, 82, 217, 0.28);
  box-shadow: 0 10px 22px rgba(0, 82, 217, 0.12);
  transform: translateY(-3px);
  animation: none !important;
}

.Submenu-background .Submenu-container .Submenu-middle-content .Submenu-item .Submenu-item-title .Submenu-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2d3d;
}

.Submenu-background .Submenu-container .Submenu-middle-content .Submenu-item .Submenu-item-title .Submenu-tag {
  height: 18px;
  line-height: 16px;
  padding: 0 8px;
  border-radius: 999px;
  border-color: rgba(255, 38, 38, 0.26);
  background: rgba(255, 38, 38, 0.07);
  font-weight: 600;
}

.Submenu-background .Submenu-container .Submenu-middle-content .Submenu-item .Submenu-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: #8a94a6;
  min-height: 0;
}

/* ---------- 关闭按钮：更精致 ---------- */
.Submenu-background .CloseButtonMount .menu-dropdown-close {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.Submenu-background .CloseButtonMount .menu-dropdown-close:hover {
  opacity: 1;
}

.Submenu-background .CloseButtonMount .menu-dropdown-close::before,
.Submenu-background .CloseButtonMount .menu-dropdown-close::after {
  width: 2px;
  height: 15px;
  border-radius: 1px;
  background-color: #5b6678;
}