/* ============================================================
   header-v2.css — 顶部栏改造（2026-11-04）
   1) 顶栏右上：搜索按钮（弹出搜索框）+ 单按钮语言下拉
   2) 第二行右侧：大搜索框换成"联系我们"按钮
   风格：站点深色 ink + 金色渐变，!important 对齐 base.css 既有优先级
   ============================================================ */

/* ---------- 顶栏按钮基础（搜索 / 语言共用） ---------- */
.site-header .topbar-right{
  gap: 10px !important;
}
.site-header .tb-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.site-header .tb-btn:hover,
.site-header .tb-btn:focus-visible{
  border-color: #bd9e62 !important;
  color: #ffffff !important;
  background: rgba(189, 158, 98, 0.28) !important;
}
.site-header .tb-btn svg{
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

/* ---------- 搜索：行内向左展开（点放大镜展开输入框，再点放大镜/回车搜索） ---------- */
.site-header .tb-search{
  display: flex !important;
  align-items: center !important;
}
.site-header .tb-search-input{
  width: 0 !important;
  height: 30px !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin-right: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  outline: none !important;
  pointer-events: none !important;
  transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease, margin 0.3s ease, border-color 0.2s ease !important;
  font-family: inherit !important;
}
.site-header .tb-search.open .tb-search-input{
  width: 230px !important;
  opacity: 1 !important;
  padding: 0 14px !important;
  margin-right: 8px !important;
  pointer-events: auto !important;
}
.site-header .tb-search-input::placeholder{
  color: rgba(255, 255, 255, 0.45) !important;
}
.site-header .tb-search-input:focus{
  border-color: #bd9e62 !important;
}
.site-header .tb-search.open .tb-btn{
  border-color: #bd9e62 !important;
  color: #ffffff !important;
  background: rgba(189, 158, 98, 0.28) !important;
}

/* ---------- 语言下拉 ---------- */
.site-header .lang-switch{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.site-header .lang-cur{
  /* 当前语言按钮：与 tb-btn 同款，仅稍宽 */
  min-width: 64px !important;
  justify-content: center !important;
}
.site-header .lang-chev{
  width: 12px !important;
  height: 12px !important;
  transition: transform 0.25s ease !important;
  opacity: 0.7 !important;
}
.site-header .lang-switch.open .lang-chev{
  transform: rotate(180deg) !important;
}
.site-header .lang-switch.open .lang-cur{
  border-color: #bd9e62 !important;
  color: #ffffff !important;
  background: rgba(189, 158, 98, 0.28) !important;
}
.site-header .lang-pop{
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  min-width: 200px !important;
  background: #0d2436 !important;
  border: 1px solid rgba(189, 158, 98, 0.45) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  transition: all 0.25s ease !important;
  z-index: 1200 !important;
}
.site-header .lang-switch.open .lang-pop{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.site-header .lang-opt{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
}
.site-header .lang-opt:hover{
  background: rgba(189, 158, 98, 0.16) !important;
  color: #ffffff !important;
}
.site-header .lang-opt .lang-code{
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}
.site-header .lang-opt.active{
  background: rgba(189, 158, 98, 0.22) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.site-header .lang-opt.active .lang-code{
  background: linear-gradient(135deg, #bd9e62, #a98a50) !important;
  border-color: #bd9e62 !important;
  color: #ffffff !important;
}

/* ---------- 第二行右侧：联系我们按钮（原搜索框位置） ---------- */
.site-header .header-contact-wrap{
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.site-header .header-contact{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #bd9e62, #a98a50) !important;
  border: 1px solid #bd9e62 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  box-shadow: 0 4px 16px rgba(189, 158, 98, 0.4) !important;
  transition: all 0.25s ease !important;
}
.site-header .header-contact:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(189, 158, 98, 0.55) !important;
  color: #ffffff !important;
}
.site-header .header-contact svg{
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
}

/* ---------- 首页 hero 头部适配 ---------- */
.home-hero .site-header .header-contact-wrap{
  margin-left: auto !important;
}
.home-hero .site-header .header-contact{
  padding: 11px 22px !important;
  font-size: 13.5px !important;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px){
  .site-header .header-contact{
    padding: 11px 18px !important;
    font-size: 13px !important;
  }
  .site-header .tb-search.open .tb-search-input{
    width: 190px !important;
  }
}
@media (max-width: 1024px){
  /* 导航收起后：联系我们靠右，与汉堡菜单并排 */
  .site-header .header-contact-wrap{
    margin-left: auto !important;
    order: 2 !important;
  }
  .site-header .nav-toggle{
    order: 3 !important;
  }
}
@media (max-width: 768px){
  /* 移动端顶栏整体隐藏（base.css 既有规则），联系按钮同步隐藏，移动菜单内有入口 */
  .site-header .header-contact-wrap{
    display: none !important;
  }
}

/* ---------- 顶栏层级抬高：保证弹出面板盖过第二行（header-middle 同为 z:2 且靠后） ---------- */
.site-header .topbar{
  z-index: 30 !important;
}