/* ============================================================================
 * i18n.css —— 「中文 / EN」语言切换控件 + 轻提示 + translate.js 自带控件的兜底隐藏
 * 说明：打包产物里那颗 .lang-btn 是空壳按钮，由 i18n.js 在它旁边插入本控件
 *       （两个语种都摆在明面上、当前项高亮），并把空壳按钮隐藏。这里只负责样式。
 * ==========================================================================*/

.i18n-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  flex: none;
  border: 1px solid var(--c-line-2, #e6d8cf);
  border-radius: 8px;
  background: #fff;
}

.i18n-seg {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-ink-soft, #6b5b52);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.i18n-seg:hover {
  color: var(--c-primary, #c93628);
}

/* 当前语言 */
.i18n-seg.is-on {
  background: linear-gradient(180deg, #d84435, var(--c-primary, #c93628));
  color: #fff;
  cursor: default;
}

.i18n-seg.is-on:hover {
  color: #fff;
}

/* 翻译中 / 加载中 */
.i18n-seg:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* 窄屏收一点，避免顶栏被挤到换行 */
@media (max-width: 420px) {
  .i18n-switch { gap: 1px; padding: 1px; }
  .i18n-seg { font-size: 12.5px; padding: 5px 7px; }
}

/* 兜底：万一 translate.js 还是渲染了自带的语言下拉框，一律藏掉（我们用站内控件） */
#translate,
#translateSelectLanguage,
.translateSelectLanguage,
[id^='translateSelectLanguage'] {
  display: none !important;
}

/* ============================================================================
 * 英文模式排版加固
 * ----------------------------------------------------------------------------
 * 英文单词普遍比中文长（Products / Industrial / Mobile login …），实测：
 *   首页 390px 下文档被撑到 444px、320px 下 345px，手机端出现横向滚动。
 * 根因是打包 CSS 里大量栅格写的是 repeat(N, 1fr)，而 1fr ≡ minmax(auto, 1fr)，
 * 下限是 min-content —— 一个长单词就能把整格顶宽，再顶出整个页面。
 * 下面只做三件事，且全部限定 html[lang='en']：中文 min-content 本来很小，观感与行为完全不变。
 * ==========================================================================*/

/* ① 栅格子项解除 min-content 下限，并允许长单词折行（否则文字会从卡片里戳出来） */
html[lang='en'] :where([class$='-grid'], [class*='-grid ']) > * {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ② 横向 flex 行：英文更长，允许换行而不是把整行顶出视口 */
html[lang='en'] :where(.sec-head, .request-head, .foot-reward, .foot-reward-txt,
    .quote-mall-actions, .catalog-main-row, .request-filter-main) {
  flex-wrap: wrap;
}
/* 报价广场头部：标题 + 两个按钮一行排不下（641px 实测溢出 19px） */
html[lang='en'] .quote-mall-hero .wrap {
  flex-wrap: wrap;
}
html[lang='en'] .foot-reward-txt {
  min-width: 0;
}
/* 页脚二维码下方那行文案原本 white-space:nowrap，英文会撑到 308px */
html[lang='en'] .foot-reward-qr span {
  white-space: normal;
  text-align: center;
}
/* 需求卡片页脚：member.js 注入的 .mv-foot-actions 在 member.css 里是 flex:none
   （不收缩）+ 内部 nowrap。中文「查看联系方式/去报价」合计 197px 放得下，英文
   「View contact details / Go to quote」变 286px，直接把父级 .demand-foot(235px)
   和整页顶到 321px（320px 视口出现横向滚动）。这里解除不可收缩 + 允许内部换行。 */
html[lang='en'] .mv-foot-actions {
  flex-shrink: 1;
  min-width: 0;
  flex-wrap: wrap;
}

/* ③ 顶栏：极窄屏再收一档（英文「Mobile login」+ 中英切换同时在场，320px 会溢出 ~25px） */
@media (max-width: 400px) {
  html[lang='en'] .header-in { gap: 12px; }
  html[lang='en'] .header-right { gap: 6px; }
  html[lang='en'] .btn-login { font-size: 12px; padding-left: 8px; padding-right: 8px; }
}
/* 再窄就只留「冀」字标，避免英文模式下 320~345px 之间顶栏横向溢出 */
@media (max-width: 360px) {
  html[lang='en'] .logo-txt { display: none; }
}

/* 底部导航：7 个格子 flex:1 1 0，320px 下每格只有 44px，而 .bn-item 是
   white-space:nowrap 且没裁切 —— 英文标签比中文长，会直接溢出格子压到隔壁
   （实测「Products」46px /「Demands」48px > 44px，渲染成 QuotesDemandsMember）。
   对策：① mobile-nav.js 里英文标签已改短（Catalog / Demand）；
        ② 这里做硬保险，任何标签都不许溢出格子。 */
html[lang='en'] .bottom-nav .bn-item > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  html[lang='en'] .bottom-nav .bn-item { font-size: 9.5px; letter-spacing: 0; }
}

/* 轻提示 */
.hb-i18n-toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  z-index: 100000;
  max-width: 86vw;
  padding: 11px 18px;
  border-radius: 12px;
  background: rgba(32, 22, 18, 0.93);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.65);
  animation: hbI18nIn 0.18s ease-out;
}

@keyframes hbI18nIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* 底部有导航栏的手机端，提示条再抬高一点，别压住底栏 */
@media (max-width: 640px) {
  .hb-i18n-toast {
    bottom: 92px;
    font-size: 13px;
    padding: 10px 14px;
  }
}