/* ============================================================
   ZAMYU AUTO — RTL 方向性覆盖层（阿拉伯语）
   ------------------------------------------------------------
   加载方式：所有页面最后加载（responsive-fix.css 之后）；
   全部规则以 html[dir="rtl"] 开头，非阿语页面零影响。

   修复原则：
   1) 只处理「物理方向写死在 CSS 里」的点位（left/right/margin-left/
      background-position），这些属性不随 dir 自动镜像；
   2) grid / flex 的列序、文字对齐由浏览器按 dir 自动镜像，不重复干预；
   3) 不改留白尺度与排版节奏，避免与 responsive-fix.css 的叠层规则冲突。
   ============================================================ */

/* ---------- 1. 品牌标识内部不镜像（图形恒在左、字标恒在右） ----------
   默认 dir=rtl 会把 .logo 的 flex 主轴反向，导致金色标记跑到最右并被
   容器裁切、"ZAMYU AUTO" 被压成省略号。品牌标识属于不可镜像元素。 */
html[dir="rtl"] .site-header .header-row .logo {
  direction: ltr;
}
html[dir="rtl"] .site-header .header-row .logo .logo-txt {
  text-align: left;
}

/* ---------- 2. 语言下拉：箭头移到左侧、内边距镜像 ----------
   注意：responsive-fix.css 里有一条触屏可点区规则
   `html select#langSel,html .header-lang{padding:8px 12px!important}`，
   把下拉箭头所需的空间压没了。这里用同等以上特异性 + !important 反制，
   保留其 44px 触控高度，只镜像左右内边距与箭头位置。 */
html[dir="rtl"] .site-header .header-row .header-lang,
html[dir="rtl"] select#langSel.header-lang {
  margin-right: 0;
  margin-left: 14px;
  padding: 8px 10px 8px 26px !important;
  background-position: left 8px center !important;
  /* 原 max-width 58/64/70px 是按 EN/ES/RU/FR 两字母标签定的，
     العربية 需要更宽，否则尾字母会被裁掉 */
  max-width: 96px !important;
}
@media (max-width: 900px) {
  html[dir="rtl"] .site-header .header-row .header-lang,
  html[dir="rtl"] select#langSel.header-lang {
    margin-left: 0;
    padding: 8px 8px 8px 24px !important;
    max-width: 92px !important;
  }
}

/* ---------- 2b. 移动端 RTL：字标恢复完整（2026-10-30 决策反转） ----------
   旧版为了保住页头 CTA，390px 下把字标压成 "ZA…"、阿语更只剩 Z 图形。
   2026-10-30 起移动端页头不再放 CTA（改由 hero / 底部询价 / 浮球承接），
   省下的 106px 让 RTL 预算变成：logo 30+8+107 + 语言 65 + 汉堡 44 + gap ≈ 302 < 354，
   字标可以完整显示。真实排版由 mobile.css 统一接管，此处只保留兜底。 */
@media (max-width: 900px) {
  html[dir="rtl"] .site-header .header-row .logo {
    flex: 0 0 auto;
  }
}

/* ---------- 3. 导航与汉堡按钮：RTL 下用 margin-right:auto 顶齐 ---------- */
html[dir="rtl"] .site-header .header-row .nav {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .site-header .header-row .menu-btn {
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 900px) {
  /* 移动端 .nav 是 absolute 抽屉，left/right:0 已铺满，只需保证菜单项靠右 */
  html[dir="rtl"] .site-header .header-row .nav {
    align-items: flex-start;
    text-align: right;
  }
}

/* ---------- 4. 首页 Hero 轮播：左右键互换 + 箭头图形镜像 ----------
   LTR 语义是「左=上一条、右=下一条」；RTL 阅读方向相反，
   左键应指向下一条、右键指向上一条，箭头图形同步水平翻转。 */
html[dir="rtl"] .hs-prev {
  left: auto;
  right: 18px;
}
html[dir="rtl"] .hs-prev:before {
  transform: rotate(45deg);
  margin-left: 0;
  margin-right: -3px;
}
html[dir="rtl"] .hs-next {
  right: auto;
  left: 18px;
}
html[dir="rtl"] .hs-next:before {
  transform: rotate(-135deg);
  margin-right: 0;
  margin-left: -3px;
}
@media (max-width: 900px) {
  html[dir="rtl"] .hs-prev {
    left: auto;
    right: 8px;
  }
  html[dir="rtl"] .hs-next {
    right: auto;
    left: 8px;
  }
}

/* ---------- 5. 浮动 WhatsApp 按钮镜像 ---------- */
html[dir="rtl"] .whatsapp {
  right: auto;
  left: 22px;
}

/* ---------- 6. Hero 社交条：跟随阅读方向靠左 ---------- */
html[dir="rtl"] .social-bar--hero {
  right: auto !important;
  left: 26px !important;
}

/* ---------- 7. 首屏标题与副标题在 RTL 下保持右对齐（覆盖内联 text-align） ---------- */
html[dir="rtl"] .hero .hero-content {
  text-align: right;
}