/*
 * 多国语言切换（公开组件 · 下拉菜单）
 *
 * 位置：顶部导航（Site Header）Contact Us 按钮右侧，由组件自身插入，页面无需在页头写死结构。
 * 形态：胶囊按钮（当前语言 → 展开下拉列表），不再是页面顶部的独立横栏。
 *
 * 主题适配：
 * - 默认（透明页头 / 深色 Hero）：白色文字与浅色描边；
 * - 吸顶态 `--scrolled`（浅色玻璃页头）与 `--dark-links` / products 页：深色文字与描边。
 *
 * 类名统一 `.aoyea-lang-switcher*`，业务页不覆盖尺寸与配色。
 */

.aoyea-lang-switcher {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: 12px;
  font-family: inherit;
}

/* 后台「右侧内容」关闭多国语言下拉按钮时整体隐藏 */
.aoyea-component-site-header.aoyea-hide-language-switcher .aoyea-lang-switcher {
  display: none !important;
}

/* 触发按钮：高度与 Contact Us 一致，胶囊形 */
.aoyea-lang-switcher__button {
  display: inline-flex;
  height: 44px;
  padding: 0 14px;
  gap: 7px;
  align-items: center;
  color: #fff;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.aoyea-lang-switcher__button:hover,
.aoyea-lang-switcher__button:focus-visible,
.aoyea-lang-switcher.is-open .aoyea-lang-switcher__button {
  color: #fff;
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 65%);
  outline: none;
}

.aoyea-lang-switcher__flag {
  font-size: 16px;
  line-height: 1;
}

.aoyea-lang-switcher__chevron {
  width: 12px;
  height: 12px;
  transition: transform 160ms ease;
}

.aoyea-lang-switcher.is-open .aoyea-lang-switcher__chevron {
  transform: rotate(180deg);
}

/* 下拉面板：与主导航 Solutions 下拉一致的深色面板，宽度保持原有取值 */
.aoyea-lang-switcher__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  min-width: 196px;
  max-height: 320px;
  padding: 6px;
  overflow-y: auto;
  background: #121212;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 12px;
  box-shadow:
    inset 0 4px 6px rgb(92 92 92 / 40%),
    inset 0 -4px 6px #2c2c2c;
}

.aoyea-lang-switcher__menu[hidden] {
  display: none;
}

/* 移动端弹窗遮罩：黑色半透明全屏层，位于弹窗之下 */
.aoyea-lang-switcher__mask {
  position: fixed;
  inset: 0;
  z-index: 219;
  background: rgb(0 0 0 / 50%);
}

.aoyea-lang-switcher__mask[hidden] {
  display: none;
}

/* 移动端弹窗打开时锁定页面滚动：有遮罩时底层内容不响应滚动 */
body.aoyea-lang-modal-open {
  overflow: hidden;
}

.aoyea-lang-switcher__option {
  display: flex;
  width: 100%;
  padding: 9px 12px;
  gap: 8px;
  align-items: center;
  color: #9d9d9d;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.2;
  font-family: inherit;
  text-align: left;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.aoyea-lang-switcher__option:hover,
.aoyea-lang-switcher__option:focus-visible {
  color: var(--aoyea-color-brand);
  background: #272729;
  box-shadow:
    inset 0 0 2px rgb(92 92 92 / 40%),
    inset 0 0 4px #606060;
  outline: none;
}

.aoyea-lang-switcher__option.is-active {
  color: var(--aoyea-color-brand);
  font-weight: 600;
  background: #272729;
}

.aoyea-lang-switcher__option .aoyea-lang-switcher__name {
  flex: 1 1 auto;
}

.aoyea-lang-switcher__check {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0;
}

.aoyea-lang-switcher__option.is-active .aoyea-lang-switcher__check {
  opacity: 1;
}

/* 吸顶态（浅色玻璃页头）与浅色 Hero 页：改用深色文字与描边 */
.aoyea-component-site-header.aoyea-component-site-header--scrolled .aoyea-lang-switcher__button,
.aoyea-component-site-header--dark-links .aoyea-lang-switcher__button,
.aoyea-page-products .aoyea-component-site-header .aoyea-lang-switcher__button,
.aoyea-page-products-filter .aoyea-component-site-header .aoyea-lang-switcher__button {
  color: #111;
  border-color: rgb(0 0 0 / 20%);
}

.aoyea-component-site-header.aoyea-component-site-header--scrolled .aoyea-lang-switcher__button:hover,
.aoyea-component-site-header.aoyea-component-site-header--scrolled .aoyea-lang-switcher__button:focus-visible,
.aoyea-component-site-header.aoyea-component-site-header--scrolled .aoyea-lang-switcher.is-open .aoyea-lang-switcher__button,
.aoyea-component-site-header--dark-links .aoyea-lang-switcher__button:hover,
.aoyea-component-site-header--dark-links .aoyea-lang-switcher__button:focus-visible,
.aoyea-component-site-header--dark-links .aoyea-lang-switcher.is-open .aoyea-lang-switcher__button,
.aoyea-page-products .aoyea-component-site-header .aoyea-lang-switcher__button:hover,
.aoyea-page-products .aoyea-component-site-header .aoyea-lang-switcher__button:focus-visible,
.aoyea-page-products .aoyea-component-site-header .aoyea-lang-switcher.is-open .aoyea-lang-switcher__button,
.aoyea-page-products-filter .aoyea-component-site-header .aoyea-lang-switcher__button:hover,
.aoyea-page-products-filter .aoyea-component-site-header .aoyea-lang-switcher__button:focus-visible,
.aoyea-page-products-filter .aoyea-component-site-header .aoyea-lang-switcher.is-open .aoyea-lang-switcher__button {
  color: #111;
  background: rgb(0 0 0 / 6%);
  border-color: rgb(0 0 0 / 45%);
}

/* 移动端：只保留旗帜与箭头，压缩按钮宽度 */
@media (max-width: 600px) {
  .aoyea-lang-switcher {
    margin-left: 8px;
  }

  .aoyea-lang-switcher__button {
    height: 40px;
    padding: 0 10px;
    gap: 5px;
  }

  .aoyea-lang-switcher__name {
    display: none;
  }

  .aoyea-component-site-header.aoyea-component-site-header--scrolled .aoyea-lang-switcher__button {
    height: 36px;
  }

  /* 移动端：下拉改为屏幕居中的弹窗，宽度自适应并带全屏遮罩
   * 纵向用视口单位（vh/dvh）而不是 50%：页头的 backdrop-filter 会成为 fixed 的包含块，
   * 一旦菜单仍挂在页头内，百分比 top 会按页头高度计算，弹窗会整体上移被屏幕顶部裁切。
   * 视口单位始终以屏幕高度为基准，菜单无论挂在哪一层都居中于屏幕。 */
  .aoyea-lang-switcher__menu {
    position: fixed;
    top: 50vh;
    top: 50dvh;
    right: auto;
    left: 50%;
    z-index: 220;
    width: min(320px, calc(100vw - 48px));
    min-width: 0;
    max-height: min(70vh, 420px);
    max-height: min(70dvh, 420px);
    padding: 10px;
    transform: translate(-50%, -50%);
  }


  .aoyea-lang-switcher__menu .aoyea-lang-switcher__name {
    display: inline;
  }
}