/* ============================================================
 * translate-switcher.css
 * 国旗下拉语言切换器样式（可移植，强隔离，不与主站冲突）
 *
 * 设计原则：
 *   1. 所有内部类名统一 ts- 前缀，彻底避免与主站 class 冲突
 *   2. 根容器 [data-translate-switcher] 做防御性 reset，阻断主站样式渗透
 *   3. CSS 变量以 --ts- 前缀，在根容器作用域内隔离
 *   4. 不使用 :root 选择器，不污染全局
 *
 * 实战经验（Fasteners0801 适配中遇到的问题）：
 *   主站 CSS 常用 .parent .container span / ul / li 这类选择器，
 *   特异性 (0,2,1) 高于本文件原始选择器 (0,2,0)，
 *   导致 span/ul/li 元素的 display/background/width/height/opacity
 *   等属性被主站样式覆盖。
 *
 *   解决方案：
 *   a) 对 span/ul/li 子元素添加类型选择器（如 span.ts-lang-label），
 *      将特异性提升到 (0,2,1)，与主站选择器持平；
 *   b) 由于本文件在主站 CSS 之后加载，相同特异性下本文件规则生效；
 *   c) 对关键属性追加 !important 作为终极保险；
 *   d) flex 容器内子元素的 inline-block 会被计算为 block（CSS 规范），
 *      需配合 white-space:nowrap 和 flex-shrink:0 防止文字换行。
 * ============================================================ */

/* 隐藏 translate.js 自动注入的默认 select */
.translateSelectLanguage,
#translate { display: none !important; }

/* ========== 根容器防御性 reset ========== */
.lang-switcher,
[data-translate-switcher]{
  /* CSS 变量：全部在此作用域内，不泄漏 */
  --ts-primary:#4f46e5;
  --ts-primary-dark:#4338ca;
  --ts-primary-soft:#eef2ff;
  --ts-text:#1f2937;
  --ts-muted:#6b7280;
  --ts-line:#e5e7eb;
  --ts-radius:16px;
  --ts-shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --ts-shadow-md:0 8px 24px rgba(16,24,40,.10);

  /* 防御性 reset：阻断主站样式渗透 */
  all: initial;
  box-sizing: border-box;
  display: inline-block !important;
  position: relative;
  margin: 0;
  padding: 0;
  font: 400 14px/1.4 "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ts-text);
  background: transparent;
  border: 0;
  outline: 0;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  word-spacing: normal;
  letter-spacing: normal;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
}

/* ========== 触发按钮 ========== */
.lang-switcher .ts-lang-btn{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  padding:9px 16px 9px 12px;
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:999px;
  cursor:pointer;
  font:600 14px/1.4 inherit;
  color:var(--ts-text);
  box-shadow:var(--ts-shadow-sm);
  transition:border-color .18s, box-shadow .18s, transform .18s;
  font-family: inherit;
}
.lang-switcher .ts-lang-btn:hover{
  border-color:#c7d2fe;
  box-shadow:0 6px 18px rgba(79,70,229,.14);
}
.lang-switcher .ts-lang-btn:active{ transform:translateY(1px); }
.lang-switcher .ts-lang-btn:focus-visible{
  outline:2px solid var(--ts-primary);
  outline-offset:2px;
}

/* 下拉箭头 SVG */
.lang-switcher .ts-chev{
  display:inline-block;
  width:14px;
  height:14px;
  transition:transform .2s ease;
  color:var(--ts-muted);
}
.lang-switcher .ts-lang-btn[aria-expanded="true"] .ts-chev{ transform:rotate(180deg); }

/* 标签文字 —— 添加 span 类型选择器提升特异性，对抗主站 .parent .container span */
.lang-switcher span.ts-lang-label{
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  line-height:1 !important;
  font-size:14px;
  font-weight:600;
  color:var(--ts-text);
  background:transparent !important;
  text-align:left !important;
  cursor:inherit;
  /* 防止在 flex 容器中文字换行导致高度异常 */
  white-space:nowrap !important;
  flex-shrink:0 !important;
}

/* ========== 国旗容器（按钮与下拉项共用） ========== */
/* 添加 span 类型选择器提升特异性，对抗主站 .parent .container span */
.lang-switcher span.ts-lang-flag{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:24px !important;
  height:18px !important;
  flex-shrink:0;
  line-height:0;
  overflow:hidden;
  background:transparent !important;
  text-align:left !important;
  cursor:inherit;
}
/* 本地 SVG 国旗图片 */
.lang-switcher .ts-lang-flag .ts-flag-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:2px;
}

/* ========== 下拉面板 ========== */
/* 添加 ul 类型选择器提升特异性，对抗主站 .parent .container ul */
.lang-switcher ul.ts-lang-menu{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  right:0 !important;
  min-width:230px;
  max-width:86vw;
  margin:0 !important;
  padding:7px !important;
  list-style:none !important;
  background:#fff !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-radius) !important;
  box-shadow:var(--ts-shadow-md) !important;
  max-height:380px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.98);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:99999;
  box-sizing:border-box;
  font-size:14px;
  width:auto !important;
}
.lang-switcher ul.ts-lang-menu.open{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1) !important;
}
.lang-switcher .ts-lang-menu::-webkit-scrollbar{ width:8px; }
.lang-switcher .ts-lang-menu::-webkit-scrollbar-thumb{
  background:#e5e7eb;
  border-radius:8px;
}

/* ========== 下拉选项 ========== */
/* 添加 li 类型选择器提升特异性，对抗主站全局 li 样式 */
.lang-switcher li.ts-lang-item{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:#374151;
  line-height:1.4;
  transition:background .14s ease, color .14s ease;
  box-sizing:border-box;
  margin:0;
  text-decoration:none;
  text-transform:none;
  list-style:none !important;
}
.lang-switcher li.ts-lang-item:hover{ background:#f3f4f6; }
.lang-switcher li.ts-lang-item.active{
  background:var(--ts-primary-soft);
  color:var(--ts-primary);
}
.lang-switcher .ts-check{
  margin-left:auto;
  color:var(--ts-primary);
  opacity:0;
  font-weight:700;
  font-size:14px;
}
.lang-switcher li.ts-lang-item.active .ts-check{ opacity:1; }