/* ============================================================================
   阿拉伯语 RTL（从右到左）适配
   ----------------------------------------------------------------------------
   只对 [dir="rtl"] 生效，因此英文与其他 LTR 语言完全不受影响。
   处理三类问题：
     1. 基线方向与文本对齐（direction / text-align）
     2. 物理方向属性（margin-left/right、padding-left/right、left/right）——这些
        在 RTL 下不会自动翻转，必须显式镜像
     3. 方向性图标（箭头、chevron）——需要水平镜像
   布局容器用 flex/grid 的地方，RTL 下主轴会自动反向，通常无需额外处理。
   ============================================================================ */

/* ---------- 1. 基线 ---------- */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body {
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Traditional Arabic", "Arial", sans-serif;
}

/* 列表缩进方向 —— 这条规则**故意不写**：
   style.css 已有 `ul, ol { margin:0; padding:0; list-style:none }`，全站列表都没有
   项目符号，本来就不需要缩进；而 `[dir="rtl"] ul` 的特异性 (0,1,1) 高于 (0,0,1)，
   会覆盖掉它、给每个 <ul> 加上 padding-right:1.2em(=19.2px)。
   后果实测：阿语首页 14 个 <ul> 被整体内缩 19.2px，其中 .hero__track 是当成轮播轨道
   用的 <ul>（子项 flex:0 0 100%），padding-right 把内容盒从 1425 压成 1405.81px，
   而 main.js 的 translateX(-index*100%) 是按 border-box 宽 1425 计算的 →
   每翻一屏漂移 19.19px，右边缘露出下一张 banner 的窄带。
   如将来确实需要给正文列表做 RTL 缩进，请写成限定的选择器，不要用裸 ul/ol。 */

/* ---------- 2. 物理方向属性的镜像 ---------- */

/* 页头：logo 在右、CTA 在左 */
[dir="rtl"] .header__inner {
  flex-direction: row-reverse;
}

/* 导航列表与子菜单 */
[dir="rtl"] .nav__list,
[dir="rtl"] .nav__submenu {
  text-align: right;
}
[dir="rtl"] .nav__submenu {
  right: 0;
  left: auto;
}

/* 语言切换器（下拉）—— 展开面板要从左边缘对齐，否则会溢出到屏幕外 */
[dir="rtl"] .lang-switch {
  margin-left: 0;
  margin-right: 14px;
}
[dir="rtl"] .lang-switch__list {
  right: auto;
  left: 0;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Hero 轮播：图片自带标题与按钮，没有叠加文字，所以内部强制 LTR 布局。
   原因：main.js 用 track.style.transform = translateX(-index*100%) 推进，
   而 RTL 下 flex 轨道从右往左排，负向位移会把三屏全部推出视口 ——
   自动播放到第二屏后首屏变成一块空白底色（实测桌面 1440 全屏空白）。
   --------------------------------------------------------------------------- */
[dir="rtl"] .hero__track,
[dir="rtl"] .hero__slide {
  direction: ltr;
}

/* 面包屑 */
[dir="rtl"] .breadcrumb__list {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
[dir="rtl"] .breadcrumb__list li + li::before {
  content: "‹";
}

/* 侧栏分类与相关产品 */
[dir="rtl"] .side-cats li,
[dir="rtl"] .side-list li {
  text-align: right;
}
[dir="rtl"] .side-cats a,
[dir="rtl"] .side-list a {
  padding-right: 0;
  padding-left: 0;
}

/* 按钮内图标与文字顺序 */
[dir="rtl"] .btn {
  flex-direction: row-reverse;
}
[dir="rtl"] .link-arrow {
  flex-direction: row-reverse;
}

/* 卡片 */
[dir="rtl"] .pcard__body,
[dir="rtl"] .pcard__foot {
  text-align: right;
}
[dir="rtl"] .pcard__foot {
  flex-direction: row-reverse;
}

/* 规格表与快速参数：左列标签右对齐 */
[dir="rtl"] .spec-table th,
[dir="rtl"] .qspec dt {
  text-align: right;
  padding-right: 0;
  padding-left: 12px;
}
[dir="rtl"] .spec-table td {
  text-align: right;
}

/* 清单类（卖点列表）勾选图标在右 */
[dir="rtl"] .checklist li {
  padding-right: 28px;
  padding-left: 0;
  text-align: right;
}
[dir="rtl"] .checklist li::before {
  right: 0;
  left: auto;
}

/* 表单：标签与输入框右对齐 */
[dir="rtl"] .field label,
[dir="rtl"] .form label {
  text-align: right;
}
[dir="rtl"] .field input,
[dir="rtl"] .field select,
[dir="rtl"] .field textarea {
  text-align: right;
  direction: rtl;
}
/* 邮箱、电话、网址字段保持 LTR，避免输入错乱 */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: left;
}

/* 页脚栏位 */
[dir="rtl"] .footer__grid {
  direction: rtl;
}
[dir="rtl"] .footer__col {
  text-align: right;
}
[dir="rtl"] .footer__bottom-inner {
  flex-direction: row-reverse;
}

/* 浮动按钮与回到顶部：移到左下/右下互换 */
[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 20px;
}
[dir="rtl"] .to-top {
  right: auto;
  left: 20px;
}

/* 主图与缩略图条方向 */
[dir="rtl"] .pd-thumbs {
  direction: rtl;
}

/* 灯箱/弹层文字 */
[dir="rtl"] .accordion__head,
[dir="rtl"] .acc__head {
  text-align: right;
}

/* ---------- 3. 方向性图标镜像 ---------- */
[dir="rtl"] .caret,
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .btn svg {
  transform: scaleX(-1);
}
/* 勾选图标不应镜像 */
[dir="rtl"] .checklist li::before {
  transform: none;
}

/* ---------- 4. 数字与拉丁片段保持可读 ---------- */
[dir="rtl"] .spec-table td,
[dir="rtl"] .qspec dd {
  unicode-bidi: plaintext;
}