/* ============================================================
   Arabic / RTL layer  ·  chinesexcmg.com
   仅阿拉伯语页面引入（<link rel="stylesheet" href="../rtl.css">）
   只做方向镜像与字体，不覆盖已有的颜色/阴影/尺寸体系
   ============================================================ */

/* ---------- 1. 字体与方向 ---------- */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family: "Segoe UI", "Dubai", "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
}
/* 阿语字身比拉丁字母高，行高需要放宽，否则叠字 */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th {
  line-height: 1.9;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  line-height: 1.45;
  letter-spacing: 0;
}
/* 拉丁字母的品牌/型号保持 LTR，避免 XE215GA 之类的顺序错乱 */
[dir="rtl"] .mark,
[dir="rtl"] model,
[dir="rtl"] .model-code {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- 2. 顶栏 / 导航 ---------- */
[dir="rtl"] .topbar .wrap,
[dir="rtl"] nav .wrap {
  direction: rtl;
}
[dir="rtl"] .menu {
  flex-direction: row-reverse;
}
[dir="rtl"] .menu a {
  text-align: right;
}
/* 下拉子菜单在 RTL 下贴右侧对齐 */
[dir="rtl"] .has-sub .submenu {
  right: 0;
  left: auto;
  text-align: right;
}
[dir="rtl"] .has-sub .submenu a {
  text-align: right;
}
[dir="rtl"] .lang {
  direction: ltr;
}
[dir="rtl"] .logo {
  direction: ltr;
}

/* ---------- 3. 面包屑 ---------- */
[dir="rtl"] .crumb {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .crumb span {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- 4. 产品页 ---------- */
[dir="rtl"] .pd-hero .wrap {
  direction: rtl;
}
[dir="rtl"] .pd-hero h1,
[dir="rtl"] .pd-hero .ty,
[dir="rtl"] .pd-hero .lead {
  text-align: right;
}
[dir="rtl"] .pd-hero h1 {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}
[dir="rtl"] .pd-cta {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
/* 列表圆点从左边换到右边 */
[dir="rtl"] .pd-sec .intro li,
[dir="rtl"] .intro li {
  padding-left: 0;
  padding-right: 18px;
  text-align: right;
}
[dir="rtl"] .pd-sec .intro li::before,
[dir="rtl"] .intro li::before {
  left: auto;
  right: 0;
}
/* 规格表：第一列（标签）右对齐，数值列保持 LTR 读数 */
[dir="rtl"] .pd-spec th,
[dir="rtl"] .pd-spec td {
  text-align: right;
}
[dir="rtl"] .pd-spec td:last-child,
[dir="rtl"] .pd-spec th:last-child {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}
[dir="rtl"] .spec-wrap {
  direction: rtl;
}

/* ---------- 5. 页脚 ---------- */
[dir="rtl"] .ft-info,
[dir="rtl"] .cols {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .cols > div {
  text-align: right;
}
[dir="rtl"] .soc {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
[dir="rtl"] .ft2 {
  direction: rtl;
}
[dir="rtl"] .ft2 .terms {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- 6. 首页板块 ---------- */
[dir="rtl"] .hd-hero .wrap {
  text-align: right;
}
[dir="rtl"] .hd-row {
  direction: rtl;
}
[dir="rtl"] .hd-stats {
  direction: rtl;
}
[dir="rtl"] .hb-steps {
  direction: rtl;
}
[dir="rtl"] .hb-step {
  padding: 16px 0 0 26px;
  text-align: right;
}
[dir="rtl"] .hb-step::before {
  left: auto;
  right: 0;
}
[dir="rtl"] .hb-steps::before {
  right: 0;
  left: 0;
}
[dir="rtl"] .pl-head,
[dir="rtl"] .hm-l,
[dir="rtl"] .tw-head {
  text-align: right;
}
[dir="rtl"] .hm-list a {
  grid-template-columns: 132px 1fr auto;
  text-align: right;
}
/* 型号列在 RTL 下放到最右，保持「型号 → 说明 → 交期」的阅读顺序 */
[dir="rtl"] .hm-list a b {
  direction: ltr;
  text-align: right;
}
[dir="rtl"] .bcx-in {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .bcx-r {
  direction: rtl;
}

/* ---------- 7. 卡片栅格 ---------- */
[dir="rtl"] .plA,
[dir="rtl"] .tst-grid,
[dir="rtl"] .tw-docs,
[dir="rtl"] .gs-body {
  direction: rtl;
}
[dir="rtl"] .tst-item .who {
  text-align: right;
}

/* ---------- 8. 横向时间线（关于页）----------
   RTL 下第一张卡在最右，滚轮脚本按负向 scrollLeft 适配（见页内脚本） */
[dir="rtl"] .tl-track {
  padding: 4px 2px 10px 48px;
}
[dir="rtl"] .tl-card {
  border-right: none;
  border-left: 1px solid #e8eff7;
}
[dir="rtl"] .tl-card:last-child {
  border-left: none;
}
[dir="rtl"] .tl-card b {
  direction: ltr;
  unicode-bidi: isolate;
  display: block;
}
/* 轴线与刻度：镜像到右端起点 */
[dir="rtl"] .tl-axis .rail,
[dir="rtl"] .tl-axis .fill,
[dir="rtl"] .tl-axis .dots {
  right: 2px;
  left: auto;
}
[dir="rtl"] .tl-axis .rail {
  right: 14px;
  left: 2px;
}
[dir="rtl"] .tl-axis .dots {
  right: 2px;
  left: 25%;
}
[dir="rtl"] .tl-axis .lbls {
  right: calc(25% + 6px);
  left: 0;
}

/* ---------- 9. 浮动按钮 ---------- */
[dir="rtl"] .wa-float {
  right: auto;
  left: 22px;
}

/* ---------- 10. 箭头方向 ---------- */
[dir="rtl"] .hm-cta::after,
[dir="rtl"] .bcx-alt::after {
  content: "←";
}

/* ---------- 11. 表单 ---------- */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: right;
}

/* ---------- 12. 页脚版权行 ---------- */
/* 原文 span 内混有 © 与年份，LTR run 会把整段顶出右边界 */
[dir="rtl"] footer .ft2 {
  text-align: right;
  padding-left: 24px;
  padding-right: 24px;
}
[dir="rtl"] footer .ft2 > span {
  unicode-bidi: isolate;
}
[dir="rtl"] footer .ft2 .terms {
  text-align: left;
}

/* ---------- 13. 移动端 ---------- */
/* 阿语字串普遍比英文长，nowrap 元素会把页面撑出视口 */
[dir="rtl"] html,
[dir="rtl"] body {
  overflow-x: hidden;
}

@media (max-width: 760px) {
  [dir="rtl"] .wa-float {
    left: 14px;
  }
  [dir="rtl"] footer .ft2 .terms {
    text-align: center;
  }
  [dir="rtl"] .topbar .wrap {
    flex-wrap: wrap;
    gap: 4px;
  }
  [dir="rtl"] .topbar .wrap > div {
    white-space: normal;
  }
  [dir="rtl"] .hd-stats {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  [dir="rtl"] .hd-stats span {
    white-space: normal;
    flex: 1 1 30%;
  }
  [dir="rtl"] .gs-stats,
  [dir="rtl"] .tw-stats,
  [dir="rtl"] .tst-stats {
    flex-wrap: wrap;
  }
  [dir="rtl"] .fbar {
    flex-wrap: wrap;
  }
}
