/* ======== sanxio 全站顶栏语种按钮/菜单 start =========== */
.sanxio-topbar-lang-btn {
  position: relative;
}

.sanxio-lang-chip-topbar {
  position: absolute;
  right: 4px;
  bottom: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--md3-color-primary, #178a72);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}

.sanxio-lang-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 2150;
  display: none;
  background: color-mix(in srgb, var(--md3-color-scrim, #000) 32%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

#languageMenu.sanxio-lang-menu,
#languageMenu.md3-menu-card {
  position: fixed;
  z-index: 2200;
  min-width: min(280px, calc(100vw - 24px));
  max-width: 320px;
  margin: 0;
  padding: var(--sanxio-gap-sm, 8px);
  box-sizing: border-box;
  border-radius: var(--md3-shape-lg, 16px);
  border: 1px solid var(--md3-color-outline-variant);
  background: var(--md3-color-surface-container-high);
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--md3-color-shadow, #000) 14%, transparent),
    0 2px 8px color-mix(in srgb, var(--md3-color-shadow, #000) 8%, transparent);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.sanxio-lang-menu__head {
  margin: 0;
  padding: var(--sanxio-gap-sm, 8px) var(--sanxio-gap-md, 12px) var(--sanxio-gap-sm, 8px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--md3-color-on-surface-variant);
  border-bottom: 1px solid var(--md3-color-outline-variant);
}

#languageMenu .sanxio-lang-menu__item,
#languageMenu .md3-menu-item {
  width: 100%;
  margin: 2px 0;
  padding: var(--sanxio-gap-md, 12px);
  border: none;
  border-radius: var(--md3-shape-md, 12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sanxio-gap-md, 12px);
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--md3-color-on-surface);
  transition:
    background 0.16s ease,
    color 0.16s ease;
  box-sizing: border-box;
}

#languageMenu .sanxio-lang-menu__item:hover,
#languageMenu .md3-menu-item:hover {
  background: var(--md3-color-surface-container-highest);
}

#languageMenu .sanxio-lang-menu__item.is-active,
#languageMenu .md3-menu-item.is-active {
  background: color-mix(in srgb, var(--md3-color-primary) 10%, var(--md3-color-surface-container-high));
}

.sanxio-lang-menu__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--md3-shape-sm, 8px);
  background: var(--md3-color-primary-container);
  color: var(--md3-color-on-primary-container);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sanxio-lang-menu__badge--en {
  font-size: 11px;
}

.sanxio-lang-menu__badge--fil {
  font-size: 10px;
}

#languageMenu .md3-menu-text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

#languageMenu .sanxio-lang-menu__item.is-active .md3-menu-text,
#languageMenu .md3-menu-item.is-active .md3-menu-text {
  color: var(--md3-color-primary);
  font-weight: 700;
}

.sanxio-lang-menu__check {
  flex: none;
  font-size: 20px;
  width: 20px;
  height: 20px;
  opacity: 0;
  color: var(--md3-color-primary);
  transition: opacity 0.15s ease;
}

#languageMenu .sanxio-lang-menu__item.is-active .sanxio-lang-menu__check,
#languageMenu .md3-menu-item.is-active .sanxio-lang-menu__check {
  opacity: 1;
}

body.sx-store-advanced .sca-lang-btn.is-lang-open,
body.sx-store-advanced .sca-lang-btn[aria-expanded='true'] {
  background: color-mix(in srgb, var(--md3-color-primary) 12%, transparent);
  color: var(--md3-color-primary);
}

@media (max-width: 767px) {
  #languageMenu.sanxio-lang-menu {
    min-width: min(260px, calc(100vw - 20px));
  }

  #languageMenu .sanxio-lang-menu__item,
  #languageMenu .md3-menu-item {
    min-height: 48px;
  }
}
/* ======== sanxio 全站顶栏语种按钮/菜单 end =========== */