/* ============================================================
   OneNav 搜索模块美化（子主题 search-pretty.css）
   根据用户指定视觉效果全新定制重构：
   1. 顶部 Tab 分类 & 底部引擎项：毛玻璃微拟物圆角卡片（柔白微透 + 上边缘亮光 + 柔和弥散阴影）
   2. 激活态：高亮白色底 + 发光辉光投影 + 鲜明蓝色文字（#2f65ff）
   3. 搜索框本体：极高圆角药丸胶囊（rounded-pill）+ 毛玻璃渐变白 + 顶部微高光内阴影 + 大弥散投影
   4. 搜索按钮：紧贴内嵌右侧圆角矩形按钮（高饱和度鲜红渐变 #ff4757 ~ #ff2d3d + 白色搜索放大镜）
   5. 激活项倒三角指示标：底部当前激活搜索引擎顶部显示白色精致倒三角箭头指向输入框
   激活方式：body 类 ochild-search-pretty（总开关）+ ochild-sp-anim（微交互）
   ============================================================ */

/* ============================================================
   一、大搜索容器与通用层叠上下文
   ============================================================ */
body.ochild-search-pretty .big-search {
  position: relative;
  z-index: 1000 !important;
}

body.ochild-search-pretty .big-search .search-box-big {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
}

body.ochild-search-pretty .big-search .search-form {
  position: relative;
  z-index: 110;
  margin-bottom: 22px;
}

body.ochild-search-pretty .big-search .search-smart-tips {
  position: absolute;
  z-index: 9999 !important;
}

/* ============================================================
   二、顶部分类 Tab（.search-list-menu .slider-li）
   视觉形态：高圆角毛玻璃微拟物卡片形态（白透渐变、上亮微发光、柔和扩散投影）
   ============================================================ */
body.ochild-search-pretty .big-search .search-list-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 4px 18px;
  overflow: visible !important;
}

body.ochild-search-pretty .big-search .search-list-menu .slider-li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 500;
  color: #334155;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(240, 244, 250, 0.62) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  cursor: pointer;
  opacity: 1 !important;
  text-shadow: none !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

body.ochild-search-pretty .big-search .search-list-menu .slider-li:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 248, 255, 0.8) 100%);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12), inset 0 1px 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  color: #1e293b;
}

/* 顶部 Tab 激活状态：高亮白底微拟物发光，文字呈现鲜亮蓝色 */
body.ochild-search-pretty .big-search .search-list-menu .slider-li.active {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%) !important;
  border-color: #ffffff !important;
  color: #2f65ff !important;
  font-weight: 600;
  box-shadow: 0 12px 30px -2px rgba(47, 101, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px);
}

/* 隐藏父主题的原生底部小滑动线条 */
body.ochild-search-pretty .big-search .search-list-menu .anchor {
  display: none !important;
}

/* ============================================================
   三、搜索输入框本体与外边框（.search-form .search-key）
   视觉形态：极高圆角胶囊形态，白透毛玻璃微渐变，上高光内阴影，柔和外发光扩散投影
   ============================================================ */
body.ochild-search-pretty .big-search .search-form .search-key {
  height: 64px;
  line-height: 64px;
  padding: 0 76px 0 32px !important;
  font-size: 18px;
  color: #1e293b;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 249, 255, 0.78) 100%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 42px -8px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1.5px 2px 0 rgba(255, 255, 255, 1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.ochild-search-pretty .big-search .search-form .search-key::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

body.ochild-search-pretty .big-search .search-form .search-key:focus {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 252, 255, 0.92) 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 22px 50px -8px rgba(47, 101, 255, 0.16), 0 0 0 4px rgba(255, 255, 255, 0.6), inset 0 1.5px 2px 0 rgba(255, 255, 255, 1) !important;
}

/* 搜索工具栏与提交按钮位置微调 */
body.ochild-search-pretty .big-search .search-tools {
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
}

/* ============================================================
   四、搜索按钮（.search-submit-btn）
   视觉形态：贴合输入框右侧的圆角矩形方块，高饱和鲜红渐变背景，白色放大镜
   ============================================================ */
body.ochild-search-pretty .big-search .search-submit-btn {
  height: 50px !important;
  width: 54px !important;
  line-height: 50px !important;
  padding: 0;
  border-radius: 20px !important;
  border: none !important;
  background: linear-gradient(135deg, #ff4757 0%, #ff2d3d 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px -3px rgba(255, 45, 61, 0.5), inset 0 1px 1px 0 rgba(255, 255, 255, 0.4) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.ochild-search-pretty .big-search .search-submit-btn i,
body.ochild-search-pretty .big-search .search-submit-btn .iconfont {
  font-size: 20px !important;
  font-weight: 700;
  color: #ffffff !important;
  line-height: 1;
}

body.ochild-search-pretty .big-search .search-submit-btn:hover {
  background: linear-gradient(135deg, #ff5b69 0%, #ff3b4b 100%) !important;
  box-shadow: 0 12px 26px -2px rgba(255, 45, 61, 0.65), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
  transform: scale(1.03);
}

body.ochild-search-pretty .big-search .search-submit-btn:active {
  transform: scale(0.96);
  box-shadow: 0 4px 12px -2px rgba(255, 45, 61, 0.45) !important;
}

/* ============================================================
   五、底部搜索引擎列表（.search-group）与指示三角箭头
   视觉形态：排列整齐的微拟物半透明小卡片，激活项纯白高亮+蓝色字+正上方倒角小三角
   ============================================================ */
body.ochild-search-pretty .big-search .search-group {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 4px 0;
  overflow: visible !important;
  margin: 0 !important;
}

body.ochild-search-pretty .big-search .search-group.active {
  display: flex;
}

body.ochild-search-pretty .big-search .search-group li {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(240, 244, 250, 0.55) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 18px -3px rgba(0, 0, 0, 0.06), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  opacity: 1 !important;
  text-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

body.ochild-search-pretty .big-search .search-group li:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(245, 248, 255, 0.75) 100%);
  box-shadow: 0 10px 22px -3px rgba(0, 0, 0, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  color: #1e293b;
}

/* 底部激活项：高亮白底微拟物，亮蓝色文字 */
body.ochild-search-pretty .big-search .search-group li.active {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%) !important;
  border-color: #ffffff !important;
  color: #2f65ff !important;
  font-weight: 600;
  box-shadow: 0 10px 24px -2px rgba(47, 101, 255, 0.16), 0 3px 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px);
}

/* 精致倒角小三角指示器：位于激活项正上方，指向搜索输入框本体 */
body.ochild-search-pretty .big-search .search-group li::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-bottom: 8px solid #ffffff !important;
  border-top: none !important;
  opacity: 0 !important;
  filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.06));
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  pointer-events: none;
}

body.ochild-search-pretty .big-search .search-group li.active::before {
  display: block !important;
  opacity: 1 !important;
}

/* ============================================================
   六、智能提示下拉（.search-smart-tips）毛玻璃质感
   ============================================================ */
body.ochild-search-pretty .big-search .search-smart-tips {
  top: calc(100% + 10px);
  left: 12px;
  right: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   七、微交互动效（ochild-sp-anim）
   ============================================================ */
body.ochild-sp-anim .big-search .search-box-big {
  animation: ochild-sp-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ochild-sp-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  body.ochild-sp-anim .big-search .search-box-big {
    animation: none;
  }
  body.ochild-search-pretty .big-search .search-submit-btn,
  body.ochild-search-pretty .big-search .search-list-menu .slider-li,
  body.ochild-search-pretty .big-search .search-group li {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   八、暗色模式适配（.io-black-mode）
   ============================================================ */
html.io-black-mode body.ochild-search-pretty .big-search .search-list-menu .slider-li {
  color: #cbd5e1;
  background: linear-gradient(180deg, rgba(38, 43, 54, 0.75) 0%, rgba(28, 32, 42, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
}

html.io-black-mode body.ochild-search-pretty .big-search .search-list-menu .slider-li:hover {
  background: linear-gradient(180deg, rgba(48, 54, 68, 0.85) 0%, rgba(35, 40, 52, 0.75) 100%);
  color: #f8fafc;
}

html.io-black-mode body.ochild-search-pretty .big-search .search-list-menu .slider-li.active {
  background: linear-gradient(180deg, #2b3245 0%, #1e2433 100%) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
  color: #60a5fa !important;
  box-shadow: 0 12px 30px -2px rgba(96, 165, 250, 0.25), inset 0 1px 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html.io-black-mode body.ochild-search-pretty .big-search .search-form .search-key {
  color: #f1f5f9;
  background: linear-gradient(180deg, rgba(30, 35, 46, 0.82) 0%, rgba(22, 26, 36, 0.72) 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 18px 42px -8px rgba(0, 0, 0, 0.6), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.io-black-mode body.ochild-search-pretty .big-search .search-form .search-key::placeholder {
  color: #64748b;
}

html.io-black-mode body.ochild-search-pretty .big-search .search-form .search-key:focus {
  background: linear-gradient(180deg, rgba(35, 41, 54, 0.92) 0%, rgba(26, 31, 42, 0.85) 100%) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 22px 50px -8px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(96, 165, 250, 0.15), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html.io-black-mode body.ochild-search-pretty .big-search .search-group li {
  color: #cbd5e1;
  background: linear-gradient(180deg, rgba(38, 43, 54, 0.72) 0%, rgba(28, 32, 42, 0.6) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px -3px rgba(0, 0, 0, 0.35), inset 0 1px 1px 0 rgba(255, 255, 255, 0.08);
}

html.io-black-mode body.ochild-search-pretty .big-search .search-group li:hover {
  background: linear-gradient(180deg, rgba(48, 54, 68, 0.82) 0%, rgba(35, 40, 52, 0.7) 100%);
  color: #f8fafc;
}

html.io-black-mode body.ochild-search-pretty .big-search .search-group li.active {
  background: linear-gradient(180deg, #2b3245 0%, #1e2433 100%) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  color: #60a5fa !important;
  box-shadow: 0 10px 24px -2px rgba(96, 165, 250, 0.22), inset 0 1px 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html.io-black-mode body.ochild-search-pretty .big-search .search-group li::before {
  border-bottom-color: #2b3245 !important;
}

html.io-black-mode body.ochild-search-pretty .big-search .search-smart-tips {
  background: rgba(26, 30, 39, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   九、移动端适配（<= 767.98px）
   ============================================================ */
@media screen and (max-width: 767.98px) {
  body.ochild-search-pretty .big-search .search-list-menu {
    gap: 8px;
    padding-bottom: 12px;
  }
  body.ochild-search-pretty .big-search .search-list-menu .slider-li {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 14px;
  }
  body.ochild-search-pretty .big-search .search-form {
    margin-bottom: 16px;
  }
  body.ochild-search-pretty .big-search .search-form .search-key {
    height: 52px;
    line-height: 52px;
    font-size: 15px;
    padding: 0 62px 0 20px !important;
  }
  body.ochild-search-pretty .big-search .search-tools {
    right: 5px;
    height: 42px;
  }
  body.ochild-search-pretty .big-search .search-submit-btn {
    height: 42px !important;
    width: 44px !important;
    line-height: 42px !important;
    border-radius: 16px !important;
  }
  body.ochild-search-pretty .big-search .search-submit-btn i,
  body.ochild-search-pretty .big-search .search-submit-btn .iconfont {
    font-size: 17px !important;
  }
  body.ochild-search-pretty .big-search .search-group {
    gap: 6px;
  }
  body.ochild-search-pretty .big-search .search-group li {
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 13px;
  }
  body.ochild-search-pretty .big-search .search-group li::before {
    top: -6px !important;
    border-left-width: 5px !important;
    border-right-width: 5px !important;
    border-bottom-width: 6px !important;
  }
}