/* ============================================================
   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;
  }
}

/* ============================================================
   FX 站专属：首页恢复 header-actions（第二行搜索框移除后由
   Follow Us / Contact Us 承接右侧位置），并兜底按钮样式
   ============================================================ */
.site-header .header-actions{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}
.site-header .action-btn{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.site-header .action-btn.follow{
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}
.site-header .action-btn.follow:hover{
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-1px) !important;
}
.site-header .action-btn.contact{
  background: linear-gradient(135deg, #bd9e62, #a98a50) !important;
  border: 1px solid #bd9e62 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(189, 158, 98, 0.4) !important;
}
.site-header .action-btn.contact:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(189, 158, 98, 0.55) !important;
  color: #ffffff !important;
}
.site-header .action-btn svg{
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
}
.home-hero .site-header .header-actions{
  display: flex !important;
}
.home-hero .site-header .action-btn{
  padding: 11px 20px !important;
  font-size: 13.5px !important;
}
@media (max-width: 768px){
  .home-hero .site-header .header-actions{
    display: none !important;
  }
}
@media (max-width: 768px){
  /* 移动端与中文站一致：第二行按钮隐藏，移动菜单内有联系入口 */
  .site-header .header-actions{
    display: none !important;
  }
}

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

/* ---------- 修复：第二行三件套（logo/导航/按钮）下导航被 width:100% 压缩，
   内容居中溢出压到 logo；恢复导航自然宽度，容器两端对齐 ---------- */
.site-header .header-middle .nav-main{
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: center !important;
}
.site-header .header-middle > .container{
  justify-content: space-between !important;
  gap: 24px !important;
}
/* 首页保持导航居中伸缩的原有行为 */
.home-hero .site-header .header-middle .nav-main{
  flex: 1 1 auto !important;
  justify-content: center !important;
}
/* 同优先级(0,4,0)覆盖旧规则：导航不收缩、不居中、不 margin-left:auto */
.site-header .header-middle > .container > .nav-main{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: center !important;
  margin-left: 0 !important;
}
/* 紧凑化：1440 及以下逐级收紧导航，保证三件套不溢出 */
@media (max-width:1500px){
  .site-header .header-middle .nav-main > li > a{padding:14px 7px !important;}
  .site-header .header-middle > .container{gap:16px !important;}
  .site-header .header-actions{gap:10px !important;}
}
@media (max-width:1360px){
  .site-header .header-middle .nav-main > li > a{padding:12px 6px !important;font-size:13px !important;}
  .site-header .action-btn{padding:12px 16px !important;font-size:13px !important;}
}
@media (max-width:1360px){
  /* 中窄屏隐藏次要按钮，保证 Contact Us 完整显示 */
  .site-header .header-actions .action-btn.follow{display:none !important;}
}
@media (max-width:1100px){
  /* 临近移动断点：右侧按钮组让位，1024 以下导航整体收进移动菜单 */
  .site-header .header-actions{display:none !important;}
}
@media (max-width:1150px){
  .site-header .header-middle .nav-main > li > a{padding:10px 4px !important;font-size:12.5px !important;}
}

/* ---------- 第二行仅保留 Contact Us：全宽隐藏 Follow Us ---------- */
.site-header .header-actions .action-btn.follow{
  display: none !important;
}