/* =============================================================================
 * h5-lang-switch-20260622.css — 头部右上语言入口样式(币安暗色)
 * 配套 h5-lang-switch-20260622.js。总开关同 JS: window.__H5_LANGSWITCH_OFF__。
 * 红线: 仅样式; 不挡其它按钮(z-index 受控 + 浮层右上角窄区)。
 * ========================================================================== */

/* ---------- 语言入口按钮(fixed 右上角浮层, 两处场景共用) ---------- */
.jp-langsw-btn.jp-langsw-fixed {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  z-index: 2147483000; /* 高于主包内容, 低于自绘全屏弹层(本菜单更高) */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(24, 26, 32, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #EAECEF;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.jp-langsw-btn.jp-langsw-fixed:hover {
  background: rgba(34, 37, 45, 0.9);
  border-color: rgba(240, 185, 11, 0.45);
}
.jp-langsw-btn.jp-langsw-fixed:active { transform: scale(0.96); }

.jp-langsw-btn .jp-langsw-code { color: #EAECEF; }
.jp-langsw-btn svg { display: block; color: #B7BDC6; }

/* 登录/注册场景: 背景为深蓝渐变, 按钮稍透更融合 */
.jp-langsw-btn.on-auth {
  background: rgba(20, 26, 44, 0.62);
  border-color: rgba(255, 255, 255, 0.16);
}
.jp-langsw-btn.on-auth:hover {
  background: rgba(28, 36, 60, 0.82);
}

/* ---------- 下拉/弹层 ---------- */
.jp-langsw-menu {
  position: fixed;
  z-index: 2147483600; /* 高于按钮 */
  min-width: 224px;
  max-width: 280px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1E2026;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  padding: 6px;
  animation: jpLangswIn 0.13s ease-out;
}
@keyframes jpLangswIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.jp-langsw-list { display: flex; flex-direction: column; }

.jp-langsw-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  color: #EAECEF;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}
.jp-langsw-item:hover { background: rgba(255, 255, 255, 0.06); }
.jp-langsw-item.is-active { background: rgba(240, 185, 11, 0.1); }
.jp-langsw-item.is-active .jp-langsw-name { color: #F0B90B; font-weight: 600; }

.jp-langsw-flag {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  object-fit: cover;
}
.jp-langsw-name { flex: 1 1 auto; min-width: 0; }
.jp-langsw-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #F0B90B;
}