/* ================================
   🌟 定义全局 CSS 变量，方便调整
=================================== */
:root {
  /* 搜索框的默认宽度、高度 */
  --submenu-search-width: 90%;
  --submenu-search-height: 36px;

  /* PC 端二级菜单的尺寸 */
  --submenu-pc-width: 450px;
  --submenu-pc-height: 480px;
  --submenu-pc-top: 300px;

  /* 移动端二级菜单的尺寸 */
  --submenu-mobile-width: 400px;
  --submenu-mobile-height: 480px;
  --submenu-mobile-top: 300px;
}


/* ================================
   🌟 二级菜单容器（默认隐藏，点击按钮后显示）
=================================== */
#submenuWrapper {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
  /* ✅ 宽度固定，高度自适应 */
  width: var(--submenu-pc-width);
  aspect-ratio: 16 / 9; /* ✅ 让容器自动调整为 16:9 比例 */

  /* ✅ 设置背景层（可调整透明度） */
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), 
              url('../logo/ejbj.png');
  background-size: cover; /* ✅ 让背景图片完整填充，不留白 */
  background-position: center; /* ✅ 背景居中 */
  background-repeat: no-repeat; /* ✅ 不重复 */

  /* ✅ 其他样式 */
  border-radius: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 999;
  flex-direction: column;
  padding: 15px;
}

:root {
  --submenu-pc-width: 450px;
  --submenu-mobile-width: 400px;
  --submenu-pc-top: 250px; /* ✅ 设置距离顶部 120px */
  --submenu-mobile-top: 250px; /* ✅ 移动端也设置相同的顶部距离 */
}

/* ✅ PC 端适配（宽度 >= 480px） */
@media (min-width: 480px) {
  #submenuWrapper {
    width: var(--submenu-pc-width);
    height: var(--submenu-pc-height);
    top: var(--submenu-pc-top); /* ✅ 使用上面定义的顶部间距 */
  }
}

/* ✅ 移动端适配（宽度 < 480px） */
@media (max-width: 479px) {
  #submenuWrapper {
    width: var(--submenu-mobile-width);
    height: var(--submenu-mobile-height);
    top: var(--submenu-mobile-top); /* ✅ 使用上面定义的顶部间距 */
    background-color: rgba(0, 0, 0, 0.9); /* ✅ 移动端背景稍微深一点 */
  }
}


/* ================================
   🔍 现代极光搜索框 (Modern Aurora Search)
=================================== */

#searchInput {
  --submenu-search-width: 350px; /* 推荐设置默认值 */
  --submenu-search-height: 56px;
  --aurora-primary: linear-gradient(135deg, #6B8DD6 0%, #8E37D7 100%);
  --aurora-glow: rgba(107, 141, 214, 0.2);
  margin-bottom: 20px;
  width: var(--submenu-search-width);
  height: var(--submenu-search-height);
  padding: 0 52px 0 24px; /* 为图标预留空间 */
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 
    0 12px 40px -12px var(--aurora-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  
  font-size: 18px;
  font-weight: 500;
  color: #2C3E50;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  
  /* 添加搜索图标 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2390A4B4'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) center;
  background-size: 35px;
}

/* 动态光晕效果 */
#searchInput::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  opacity: 0;
  background: var(--aurora-primary);
  transition: opacity 0.3s ease;
  z-index: -1;
}

/* 焦点状态动画 */
#searchInput:focus {
  transform: translateY(-2px);
  box-shadow: 
    0 20px 50px -15px var(--aurora-glow),
    inset 0 0 0 2px rgba(107, 141, 214, 0.3);
}

#searchInput:focus::after {
  opacity: 0.2;
}

/* 动态占位符动画 */
#searchInput::placeholder {
  color: #90A4B4;
  transition: all 0.3s ease;
  transform-origin: left center;
}

#searchInput:focus::placeholder {
  transform: translateY(-24px) scale(0.85);
  opacity: 0.5;
}

/* 清空按钮美化 */
#searchInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2390A4B4'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  opacity: 0.6;
  transition: all 0.2s ease;
}

#searchInput::-webkit-search-cancel-button:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  #searchInput {
    background: rgba(30, 30, 30, 0.95);
    color: #F0F4F8;
    box-shadow: 
      0 12px 40px -12px rgba(0, 0, 0, 0.3),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  
  #searchInput::placeholder {
    color: #64748B;
  }
}

/* ================================
   📜 二级菜单的内容区域（可滚动）
=================================== */
.submenu-pages-container {
  position: relative;
  width: 100%;
  height: 90%;
  overflow-y: auto; /* ✅ 允许上下滚动 */
  overflow-x: hidden; /* ❌ 禁止左右滚动 */
  white-space: normal; /* ✅ 允许换行 */
  display: flex;
  flex-direction: column; /* ✅ 让所有分页块垂直排列 */
  scroll-snap-type: y mandatory; /* ✅ 吸附滚动 */
}

/* ✅ 确保每页占满整个容器 */
.submenu-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-snap-align: start; /* ✅ 让滚动停留在正确的位置 */
}

/* ================================
   🖼️ 图片网格布局（固定 4 列 x 4 行）
=================================== */
.page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ✅ 固定 4 列 */
  grid-template-rows: repeat(4, 1fr); /* ✅ 固定 4 行 */
  gap: 10px; /* ✅ 让每个元素之间保持间距 */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
}

/* ================================
   🖼️ 单个图片容器样式
=================================== */
.direction-item-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* ✅ 确保图片填充整个框 */
.direction-item {
  width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bbb;
  border-radius: 50px;
  overflow: hidden;
}

/* ✅ 图片自适应填充 */
.direction-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* ✅ 图片下方的文字（加粗 + 颜色调整） */
.direction-item-name {
  margin-top: 4px;  /* ✅ 增加与图片的间距 */
  font-size: 12px;  /* ✅ 字体大小 */
  font-weight: bold;  /* ✅ 加粗 */
  color: #ff0000;  /* ✅ 文字颜色 */
  text-align: center; /* ✅ 居中对齐 */
}


/* ================================
   🎯 角标（固定在整个二级菜单的第一排 4 个元素）
=================================== */
.direction-item-wrapper:nth-child(-n+4) .corner-label {
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  color: white;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}



/* ================================
   🎯 关闭按钮（位于右上角）
=================================== */
#submenuClose {
  position: absolute;
  top: 1px;  /* ✅ 距离顶部 10px */
  right: 1Px; /* ✅ 距离右侧 10px */
  width: 20px; /* ✅ 适当调整按钮大小 */
  height: 20px;
  background: url('../bg/gb.png') no-repeat center center; /* ✅ 确保路径正确 */
  background-size: contain; /* ✅ 确保完整显示 */
  border: none;
  cursor: pointer;
  z-index: 1000; /* ✅ 确保在最上层 */
  opacity: 1; /* ✅ 确保可见 */
}


/* ================================
   🚀 顶部按钮容器（始终居中）
=================================== */
.top-buttons {
  position: absolute;
  top: 160px; /* ✅ 固定顶部距离 180px */
  left: 50%;
  transform: translateX(-50%); /* ✅ 水平居中 */
  display: flex; /* ✅ 横向排列按钮 */
  gap: 10px; /* ✅ 按钮之间的间距 */
  z-index: 1000; /* ✅ 确保在最上层 */
}

/* ✅ 按钮的基础样式 */
.mini-btn {
  width: 60px; /* ✅ 按钮大小 */
  height: 60px;
  border-radius: 50%; /* ✅ 圆形按钮 */
  overflow: hidden;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ✅ 按钮内的图片 */
.mini-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ✅ 确保图片填充整个按钮 */
}