/* ========== 移动端菜单样式 - 公共样式文件 ========== */

/* 隐藏手机端菜单的搜索框 */
#m_nav .tc_search {
  display: none !important;
}

/* ========== 移动端菜单新样式 - 莫兰迪蓝色系 ========== */
/* 移动端菜单整体样式 */
#m_nav {
  background: #F5F7F9 !important; /* 偏蓝的米白色背景 */
  box-shadow: -2px 0 15px rgba(0, 0, 0, 0.08);
  padding-top: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 移动端菜单顶部Header */
.m_nav_header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #E0E5E8; /* 偏蓝的灰色边框 */
  background: #F0F3F5; /* 偏蓝的浅灰色 */
  position: sticky;
  top: 0;
  z-index: 10;
}

.m_nav_header_left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.m_nav_logo {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m_nav_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.m_nav_close_btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 20px;
  flex-shrink: 0;
  border-radius: 50%;
}

.m_nav_close_btn:hover {
  transform: scale(1.1);
  background: rgba(127, 163, 181, 0.15); /* 更蓝的hover背景 */
}

.m_nav_close_btn svg path {
  stroke: #7FA3B5; /* 更蓝的灰蓝色 */
}

/* 移动端菜单列表样式 */
#m_nav .m_nav_list {
  padding-top: 0;
  margin-top: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 菜单项样式 */
#m_nav > ul > li {
  padding: 0 !important;
  border-top: 1px solid #E0E5E8 !important; /* 偏蓝的灰色分隔线 */
  background: #F5F7F9; /* 偏蓝的米白色背景 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#m_nav > ul > li:first-child {
  border-top: none !important;
}

/* 菜单项hover效果 */
#m_nav > ul > li:not(.active):hover {
  background: #EBF0F3; /* 偏蓝的hover背景 */
}

/* 激活状态的菜单项 */
#m_nav > ul > li.active {
  background: #7FA3B5 !important; /* 更蓝的灰蓝色激活背景 */
}

#m_nav > ul > li.active > .a,
#m_nav > ul > li.active > a {
  background: #7FA3B5 !important;
}

#m_nav > ul > li.active h3 {
  color: #FFFFFF !important;
  font-weight: 500;
}

#m_nav > ul > li.active .a i,
#m_nav > ul > li.active i {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* 菜单链接样式 */
#m_nav li .a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 50px;
  text-decoration: none;
  position: relative;
}

#m_nav li .a h3 {
  line-height: 50px;
  height: 50px;
  color: #4A5A6A !important; /* 偏蓝的深灰色文字 */
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  float: none;
  flex: 1;
  margin: 0;
  transition: color 0.3s ease;
}

/* 下拉菜单箭头（向下）- 只显示有子菜单的项 */
#m_nav .title .a i {
  display: none; /* 默认隐藏 */
}

/* 只显示有.list子元素的.title项的箭头 */
#m_nav .title:has(.list) .a i {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="%237FA3B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
  background-size: contain;
  opacity: 0.7;
  float: none;
  margin-left: auto;
  flex-shrink: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 展开状态的下拉箭头 */
#m_nav li.on.title .a i,
#m_nav .on.title .a i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* 非下拉菜单项的右箭头 */
#m_nav > ul > li:not(.title) .a::after {
  content: '';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="%237FA3B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
  background-size: contain;
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

/* 激活状态的箭头颜色 */
#m_nav > ul > li.active .a::after,
#m_nav > ul > li.active .a i {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* 下拉子菜单样式 */
#m_nav .title .list {
  display: none;
  background: #F8FAFB; /* 偏蓝的更浅背景 */
  padding: 8px 0;
  margin-left: 0;
  width: 100%;
  border-top: 1px solid #E0E5E8;
}

#m_nav .title.on .list {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#m_nav .title .list a {
  display: block;
  color: #6B7D9A !important; /* 更蓝的灰蓝色文字 */
  padding: 12px 20px 12px 40px;
  line-height: 1.6;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

#m_nav .title .list a::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7FA3B5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#m_nav .title .list a:hover {
  color: #4A5A6A !important;
  background: rgba(127, 163, 181, 0.12);
  padding-left: 45px;
}

#m_nav .title .list a:hover::before {
  opacity: 1;
}

/* 动态加载的子菜单容器 */
#m_nav .title .list .box {
  padding: 0;
}

#m_nav .title .list .box a {
  display: block;
  color: #6B7D9A !important; /* 统一使用灰蓝色 */
  padding: 12px 20px 12px 40px;
  line-height: 1.6;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

#m_nav .title .list .box a::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7FA3B5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#m_nav .title .list .box a:hover {
  color: #4A5A6A !important;
  background: rgba(127, 163, 181, 0.12);
  padding-left: 45px;
}

#m_nav .title .list .box a:hover::before {
  opacity: 1;
}

/* 手机端语言选择样式 */
.language-dropdown-mobile .dropdown-content-mobile {
  background: #F8FAFB; /* 偏蓝的更浅背景 */
  padding: 8px 0;
}

.language-dropdown-mobile .dropdown-content-mobile a {
  display: block;
  padding: 12px 20px 12px 40px;
  color: #6B7D9A; /* 更蓝的灰蓝色文字 */
  text-decoration: none;
  border-bottom: 1px solid #E0E5E8;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.language-dropdown-mobile .dropdown-content-mobile a:last-child {
  border-bottom: none;
}

.language-dropdown-mobile .dropdown-content-mobile a:hover {
  background: rgba(127, 163, 181, 0.12);
  color: #4A5A6A;
  padding-left: 45px;
}