@charset "UTF-8";
/* ============================================================================
   rtl.css —— RTL（从右到左）书写方向样式表
   适用语种：阿拉伯语 ar（2026-10-02 上线的第 17 语种），
             以及将来可能补入的 he（希伯来语）/ fa（波斯语）/ ur（乌尔都语）——
             白名单只有一处：app/common.php 的 lang_dir()。

   ---------------------------------------------------------------------------
   一、为什么本文件的**每一条**规则都必须以 html[dir="rtl"] 作为前缀
   ---------------------------------------------------------------------------
   ① 本站 17 个语种共用同一套模板（app/index/view/**）与同一套样式
      （public/static/module/english/css/**），没有按语种拆分样式目录。
      因此任何一条「不带作用域」的新规则，都会同时作用在另外 16 个 LTR 语种的页面上
      —— 而「为了让阿拉伯语好看，把英文站/中文站的排版改坏」是本任务唯一不能接受的后果。
   ② html[dir="rtl"] 这个前缀，把命中条件绑定在 <html dir="rtl"> 这个属性上；
      该属性只由 app/common.php 的 lang_dir() 对白名单语种输出，
      其余 16 个语种渲染出来的是 dir="ltr" —— 前缀不匹配，规则一律不命中。
      也就是说本文件对 LTR 语种的影响不是「很小」，而是结构性为零。
      正因如此，top.html 里可以**无条件**引入本文件（不需要按语种做条件加载、
      也不需要内联 <style>）：对 LTR 语种而言，它等同于一个空文件。
   ③ 前缀还带来了「可删除性」：出问题时把 top.html 里那一行 <link> 删掉，
      站点就完全回到改动前的样子 —— 没有任何一条规则泄漏到别处，便于一键回滚。
   ④ 注意：不要反过来写成 body{ direction: rtl } 这种全局规则。
      那样 LTR 语种也会跟着反向（float 不镜像、文字右对齐、固定浮标跑到左边），
      是本次改动最容易踩的坑。

   ---------------------------------------------------------------------------
   二、为什么很多「物理方向」属性必须在这里显式翻转（而不是靠 direction 自动生效）
   ---------------------------------------------------------------------------
   direction: rtl 能自动处理的只有：
     · 行内文本/块级盒的起始边（text-align:start、块级定宽盒的贴边侧）；
     · flex / grid 的行内主轴方向（顺序、justify-content:flex-start|end）；
     · 列表标记（list-style 圆点）的所在侧；
     · 表单控件（select 下拉箭头、input 光标）的起始侧。
   以下这些是**物理**属性，direction 管不到，必须逐条镜像：
     float、left / right、margin-left / right、padding-left / right、
     border-left / right、background-position-x、position 的 left / right、
     box-shadow 的 x 偏移、transform 里的旋转角度。
   ========================================================================= */

/* ========================= 1. 根方向 ========================= */
/* 页面基准方向与默认对齐。只此一条就把「无显式方向」的大量文本、
   块级定宽盒（如 .xq-chakan）与列表标记翻到右侧，是后文所有镜像规则的基础。 */
html[dir="rtl"] body {
	direction: rtl;
	text-align: right;
}

/* 无障碍跳转链接（top.html 内联样式里 left:-9999px / :focus{left:0}）：
   是物理 left，RTL 下要贴右边。否则键盘 Tab 聚焦时它会从左上角冒出来。 */
html[dir="rtl"] .cb-skip-link {
	left: auto;
	right: -9999px;
}

html[dir="rtl"] .cb-skip-link:focus {
	left: auto;
	right: 0;
}

/* ===================== 2. 数字 / 型号 / 电话 / 邮箱等 LTR 片段 ===================== */
/* 阿拉伯语页面里最容易被方向搞乱的不是阿拉伯文，而是夹杂其中的 LTR 片段：
   型号（CP-2000）、电话（+86-755-83866822）、邮箱、URL。
   这些片段两侧常有 + - : / @ . 这类「中性字符」，在 RTL 段落里会被 bidi 算法
   挪到片段另一端（例如 "+86..." 的加号跑到末尾），看起来像号码写错了。
   处理原则（按内容形态分两种，不要一刀切）：
     a) **纯 LTR 内容**的元素 → 直接写 direction: ltr + unicode-bidi: isolate，
        让它在自己的方向上排版，并把内部顺序与外部 RTL 语境隔离开；
     b) **标签 + 数值混排**的元素（如页脚「服务热线：0755-…」）→ 只做 isolate，
        不强行 ltr，否则阿拉伯语标签本身会被按 LTR 顺序重排（标签跑到左边）。 */
html[dir="rtl"] .cb-model,
html[dir="rtl"] .cb-pro-contact-im,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .cb-contact-nap a,
html[dir="rtl"] .zxkf {
	unicode-bidi: isolate;
}

/* 纯 LTR 型号：产品型号一定是拉丁字母/数字/连字符，且常被当作字符串阅读，
   故额外用 inline-block 保证它作为一个整体参与父级排版（不会被从中间折行拆开）。 */
html[dir="rtl"] .cb-model {
	direction: ltr;
	display: inline-block;
}

/* 纯邮箱地址与即时通信账号（contact 页 / 产品详情页的 .cb-pro-contact、.cb-contact-channel）：
   这两处渲染出来的文本就是邮箱或账号本身，没有标签前缀，可以安全地整体设为 LTR。 */
html[dir="rtl"] .cb-contact-channel[href^="mailto:"],
html[dir="rtl"] .cb-pro-contact a[href^="mailto:"] {
	direction: ltr;
}

/* 规格清单（.cb-specs li）是「阿拉伯语短语 + 拉丁型号/数字」的混排行，
   用 plaintext 让每一行按自身首个强方向字符决定基准方向，
   比强行 ltr 更稳（强行 ltr 会让整行阿拉伯语右对齐失效、冒号位置反转）。 */
html[dir="rtl"] .cb-specs,
html[dir="rtl"] .cb-specs li {
	unicode-bidi: plaintext;
}

/* ========================= 3. 工具类与栅格 ========================= */
/* .fl/.fr（layout.css 定义的浮动工具类，各页面仍在使用约定） */
html[dir="rtl"] .fl,
html[dir="rtl"] .commonleft {
	float: right;
}

html[dir="rtl"] .fr,
html[dir="rtl"] .commonright {
	float: left;
}

/* Bootstrap 风格栅格（layout.css 里自带的一套，前台多个栏目页在用）：
   列必须整行一起镜像，否则第 1 列与第 2 列的相对次序会反，
   阿拉伯语用户会先看到视觉上的「第二列」。 */
html[dir="rtl"] .col-xs-1, html[dir="rtl"] .col-xs-2, html[dir="rtl"] .col-xs-3,
html[dir="rtl"] .col-xs-4, html[dir="rtl"] .col-xs-5, html[dir="rtl"] .col-xs-6,
html[dir="rtl"] .col-xs-7, html[dir="rtl"] .col-xs-8, html[dir="rtl"] .col-xs-9,
html[dir="rtl"] .col-xs-10, html[dir="rtl"] .col-xs-11, html[dir="rtl"] .col-xs-12,
html[dir="rtl"] .col-sm-1, html[dir="rtl"] .col-sm-2, html[dir="rtl"] .col-sm-3,
html[dir="rtl"] .col-sm-4, html[dir="rtl"] .col-sm-5, html[dir="rtl"] .col-sm-6,
html[dir="rtl"] .col-sm-7, html[dir="rtl"] .col-sm-8, html[dir="rtl"] .col-sm-9,
html[dir="rtl"] .col-sm-10, html[dir="rtl"] .col-sm-11, html[dir="rtl"] .col-sm-12,
html[dir="rtl"] .col-md-1, html[dir="rtl"] .col-md-2, html[dir="rtl"] .col-md-3,
html[dir="rtl"] .col-md-4, html[dir="rtl"] .col-md-5, html[dir="rtl"] .col-md-6,
html[dir="rtl"] .col-md-7, html[dir="rtl"] .col-md-8, html[dir="rtl"] .col-md-9,
html[dir="rtl"] .col-md-10, html[dir="rtl"] .col-md-11, html[dir="rtl"] .col-md-12 {
	float: right;
}

/* ========================= 4. 头部（header.html 顶栏 + 主导航） ========================= */
/* 4.1 顶部条 .cb-global-top（display:flex）：flex 主轴会随 direction 自动反向，
       所以 logo / 标语 / 搜索 / 语言切换的**顺序**已经是正确的镜像，
       这里只需要处理 margin:auto 这类物理属性和图标位置。 */

/* .cb-search 与 .language-switch 在 LTR 下用 margin-left:auto 把「搜索 + 语言」这一组
   推到右端。margin-left 是物理属性，RTL 下不会自动变成「推到左端」：
   在 ≤1180px（标语 .cb-global-caption 被隐藏、flex:1 的占位消失）时，
   自由空间会跑到两个控件之间，视觉上「搜索贴着 logo、语言切换掉到最左」。
   所以必须把 auto 外边距换到另一侧。 */
html[dir="rtl"] .cb-search {
	margin-left: 0;
	margin-right: auto;
}

html[dir="rtl"] .language-switch {
	margin-left: 0;
	margin-right: auto;
}

/* header.html 里 .cb-search + .language-switch{ margin-left:0 }（语言切换紧跟在搜索框之后）
   的镜像：RTL 下要把上面那条的 margin-right:auto 复位，两个控件才会贴在一起。 */
html[dir="rtl"] .cb-search + .language-switch {
	margin-right: 0;
}

/* logo 图内部用 object-position:left 对齐（header.html 里 .cb-logo img）。
   object-position 是物理值，RTL 下品牌图形应贴着盒子的右边缘。 */
html[dir="rtl"] .cb-logo img {
	object-position: right;
}

/* 4.2 语言面板 .language-panel：position:fixed; right:3% —— 物理定位，RTL 下贴左边。
       注意必须同时补一条 ≤800px 的移动端规则：header.html 在窄屏把它改成了
       底部弹层（left:0; right:0）。本文件的选择器加了 html[dir="rtl"] 前缀后
       权重高于那条媒体查询里的 .language-panel，若不补回来，
       窄屏下会变成 left:3% + right:auto + width:100%，直接溢出屏幕。 */
html[dir="rtl"] .language-panel {
	left: 3%;
	right: auto;
}

@media screen and (max-width: 800px) {
	html[dir="rtl"] .language-panel {
		left: 0;
		right: 0;
	}
}

/* 4.3 主导航 .header-nav
       · ≥1024px 时 header.css 把它设成 display:flex + justify-content:end ——
         flex 主轴的 end 是「逻辑末端」，RTL 下自动变成左侧，导航整体贴左，无需干预；
       · 下面这条 float 镜像在当前布局下其实是被 flex 忽略的（<1024px 导航又是 display:none），
         保留是为了防止将来有人改回 float 布局时又丢掉 RTL 支持。 */
html[dir="rtl"] .header-nav li {
	float: right;
}

/* 下拉子项文字：layout.css 里 .sub-item a 显式写了 text-align:left（物理值），
   子菜单在 RTL 下应贴右。 */
html[dir="rtl"] .header-nav .sub-item a,
html[dir="rtl"] .header-nav .sub-item .subnav-title a {
	text-align: right;
}

/* 4.4 移动端汉堡按钮容器 .header-right 与菜单图标
       .header-right 是 position:absolute; right:75px（物理定位）→ RTL 下贴左；
       它的 padding-right:71px 同理要换到左侧。
       说明：≥1024px 时 header.css 把 .header-right 隐藏了，所以这里只影响窄屏。 */
html[dir="rtl"] .header-right {
	left: 75px;
	right: auto;
	padding-left: 71px;
	padding-right: 0;
}

/* 站内搜索框（2026-10-01 新增）在窄屏的 .cb-search 输入框：
   input 的 text-align 默认是 start，会随 direction 自动靠右，
   但 placeholder 的省略号截断方向也跟着变，这里显式确认一次，避免被别的样式覆盖。 */
html[dir="rtl"] .cb-search input[type=search] {
	text-align: right;
}

/* ========================= 5. 页脚（footer.html） ========================= */
/* .footer-top ul li 在 LTR 下 float:left + padding-right:x%（x 随断点变化：
   layout.css 里 1.2%/2.7%/3.1%，footer.css 里 0.5%/1%/1.5%/2%/3%）。
   本文件权重更高（多了 html[dir] 这一层），所以下面的 padding 会覆盖所有断点。
   为什么这里敢用固定值：≥1024px 时 footer.css 的 .flex_b 已把这一列改成
   display:flex + justify-content:space-around（此时 float 不生效、主轴自动镜像），
   列间距主要由 flex 分配；padding 只影响列内留白，取 1.2% 与 LTR 断点中最常用的一档一致。 */
html[dir="rtl"] .footer-top ul li {
	float: right;
	padding-right: 0;
	padding-left: 1.2%;
}

/* 页脚最后一列在模板里带内联 style="margin-right:0"，是物理属性；
   RTL 下「最后一列」的收尾留白在左侧，故复位 margin-left。 */
html[dir="rtl"] .footer-top ul li:last-child {
	margin-left: 0;
}

/* 栏目标题 .footer-title：块级文本的对齐跟随 body 已靠右；
   但它是 position:relative 的定长子元素容器，折叠「+」按钮是绝对定位的物理 right。 */
html[dir="rtl"] .footer-top ul li .footer-title {
	text-align: right;
}

/* 折叠「+」按钮 .plus.icon（绝对定位 right:15px；footer.html 内联样式在 ≤768px 改成 right:30px）
   —— 物理定位，RTL 下应贴左。两条断点都要镜像，否则窄屏那一条会重新把它拉回右边。 */
html[dir="rtl"] .plus.icon {
	left: 15px;
	right: auto;
}

@media screen and (max-width: 768px) {
	html[dir="rtl"] .plus.icon {
		left: 30px;
	}
}

/* 在线客服胶囊 .zxkf 与二维码块 .ewm 都用 margin-right 与后续内容拉开距离，
   RTL 下这个间距应在左侧。 */
html[dir="rtl"] .zxkf {
	margin-right: 0;
	margin-left: 10px;
}

html[dir="rtl"] .ewm {
	margin-right: 0;
	margin-left: 20px;
}

/* 页脚底部版权条 .footer_bottom 是 display:flex + justify-content:space-around，
   主轴自动镜像，无需规则；备案号链接是行内文本，跟随 body 靠右即可。 */

/* ===================== 6. 面包屑与栏目页头部 ===================== */
/* 【先说清楚本节的实际效果，避免误解】
   本节 6.1 针对的 .full-inside-subnav .crumb 在 layout.css 里是 **display:none**
   （基准规则 layout.css:1574 `.full-inside-subnav .crumb{display:none}`；
    后面 ≥1024px 的那组规则只补了 float / padding / border，从未把 display 改回来），
   模板里对应的节点也是空的：`<div class="crumb"><div class="inner"></div></div>`。
   所以 6.1 这几条目前是**预防性**的（一旦有人把面包屑启用，方向已经是对的），
   不会在当前页面上产生任何可见效果，也就不会影响任何语种。

   真正会显示出来的面包屑是这三处，它们都是 **纯行内文本流**（a / span / 文本 + 分隔符），
   没有 float、没有 left/right 定位，direction:rtl 会自然把它们从右往左排、并靠右对齐，
   因此**不需要**任何 RTL 规则：
     · education / campus 的 `.cb-breadcrumb`（样式在 module/education|module/campus 各自的 css）
     · 智慧文旅的 `.tw-crumb`（样式在 module/tourism/tourism.css）
     · 产品 / 方案详情页顶部的 `.top_title`（`<a>…>></a>` 字符串式路径）
   下面 6.1 保留规则，是因为「隐藏」这件事是当前样式表的实现细节，而不是设计意图。 */

/* 6.1 .full-inside-subnav 的一行两列：左「栏目标题 + 子栏目」、右「面包屑」。
       两者都是物理 float，必须整对互换；面包屑还有一条用来分隔两列的 border-left
       与 padding-left（物理值）要一起搬到右侧。 */
html[dir="rtl"] .full-inside-subnav .inside-subnav {
	float: right;
}

html[dir="rtl"] .full-inside-subnav .crumb {
	float: left;
	padding-left: 0;
	padding-right: 28px;
	border-left: 0;
	border-right: 1px solid #e0e0e0;
}

html[dir="rtl"] .full-inside-subnav .crumb .inner {
	text-align: left;
}

/* 面包屑分隔符（layout.css: .crumb a:after 用 border 拼的三角形）：
   LTR 下只画 border-left-color，得到向右指的三角；RTL 下要指向左，
   于是改成只画 border-right-color，并把左右外边距对调。 */
html[dir="rtl"] .full-inside-subnav .crumb a:after {
	border-left-color: transparent;
	border-right-color: #757575;
	margin: -2px 8px 0 4px;
}

/* 面包屑里「首页」小图标用 background-position 0 center 贴在文字左侧，
   RTL 下要贴到文字右侧。 */
html[dir="rtl"] .full-inside-subnav .crumb .home {
	padding-left: 0;
	padding-right: 14px;
	background-position: right center;
}

/* 6.2 子栏目条（.full-inside-subnav .subnav a 的 padding-left:20px 是物理值） */
html[dir="rtl"] .full-inside-subnav .subnav a {
	padding-left: 0;
	padding-right: 20px;
}

/* 6.3 .common-clumb-min 的标题与「子栏目滑动条」容器也是一对 float。
       同样说明：模板里的 `.clumb-title` 并没有带 fl 类（layout.css:1906/1909 的
       `.clumb-title.fl` / `.common-clumb-box.fr` 是历史写法），而 `.common-clumb-box`
       在当前模板里只剩注释行 —— 所以这两条也是预防性的，当前无可见效果。 */
html[dir="rtl"] .common-clumb-min .clumb-title.fl {
	float: right;
}

html[dir="rtl"] .common-clumb-min .common-clumb-box.fr {
	float: left;
}

/* 6.4 其它模块自带的面包屑（education / campus / tourism 各自的 css 文件）
       都是「a / a / span」这种行内文本流，没有方向性属性，跟随 body 靠右即可，
       故此处不需要规则（详见本节开头的说明）。 */

/* ===================== 7. 列表 / 卡片 / 分页 ===================== */
/* 7.1 .xq（产品 / 方案卡片）：display:flex —— 图片与文字两栏的顺序会随 direction 自动镜像。
       唯一需要手动处理的是右上/右下方向的投影：box-shadow 的 x 偏移是物理值，
       RTL 下阴影应落在左下。 */
html[dir="rtl"] .xq {
	box-shadow: -5px 5px 10px 5px rgba(0, 0, 0, .2);
}

html[dir="rtl"] .xq:hover {
	box-shadow: -5px 5px 10px 5px rgba(0, 0, 0, .3);
}

/* 7.2 .partner-wrapper / .inxpart-list（首页与关于页的合作伙伴滑块）
       容器本身只有 overflow:hidden，没有方向性属性；滑块内部的 .swiper-wrapper
       由第 10.1 节主动保持 LTR（那里说明了原因），因此此处无需规则。 */

/* 7.3 新闻列表 .zxun（display:flex，日期图在左、正文在右）：顺序自动镜像。
       .zx-right 的 margin-left:20px 是物理值，要换到右侧，
       否则 RTL 下图片与正文之间的间距会跑到正文外侧、图片与正文贴在一起。 */
html[dir="rtl"] .zx-right {
	margin-left: 0;
	margin-right: 20px;
}

@media screen and (max-width: 768px) {
	html[dir="rtl"] .zx-right {
		margin-right: 10px;
	}
}

/* 7.4 产品规格清单的内缩进（模板内联样式，带 #id 权重要盖过它，
       所以这里把 #cb-product-catalog / #cb-product-specs 一起写上）：
       list-style:disc 的圆点由 direction 自动跑到右侧，但 padding-left 是物理值，
       不镜像的话圆点会压在文字上。 */
html[dir="rtl"] #cb-product-catalog .cb-specs,
html[dir="rtl"] #cb-product-specs .cb-specs {
	padding-left: 0;
	padding-right: 18px;
}

html[dir="rtl"] #cb-product-specs .cb-specs {
	padding-right: 20px;
}

/* 7.5 免责说明 .cb-notice：LTR 下左侧有一条竖色带（border-left）+ 非对称内边距，
       RTL 下竖色带应在右侧。 */
html[dir="rtl"] #cb-product-specs .cb-notice {
	border-left: 0;
	border-right: 3px solid #a2c570;
}

/* 7.6 分页 .pages / .pagination：整块是 text-align:center，
       li 是 inline-block（会随 direction 从右往左排列，页码顺序自动正确），
       margin 为左右对称的 0 1px —— 因此**不需要**任何 RTL 规则。
       此处保留说明，避免后续有人「补一条 .pages 的 RTL 规则」反而引入偏差。 */

/* ===================== 8. 表单（留言 .Comprepair / 联系页 .cb-contact-form） ===================== */
/* 留言表单在 ≥768px 起用 float 做「标签在左、输入框在右」的两列：
   标签 span 是 float:left + text-align:right（文字贴近右侧的输入框），
   输入框与多行文本是 float:left。RTL 下整对互换，
   且标签文字要改成左对齐（才能继续贴近它右边/左边的输入框）。 */
html[dir="rtl"] .Comprepair li {
	float: right;
}

html[dir="rtl"] .Comprepair li:nth-child(odd) {
	margin-right: 0;
	margin-left: 60px;
}

html[dir="rtl"] .Comprepair label span {
	float: right;
	margin-right: 0;
	margin-left: 20px;
	text-align: left;
}

html[dir="rtl"] .Comprepair label .inputext {
	float: right;
}

html[dir="rtl"] .Comprepair label textarea {
	float: right;
}

/* 必填星号用 margin-right 与标签文字拉开距离，RTL 下换到左侧 */
html[dir="rtl"] .Comprepair label em {
	margin-right: 0;
	margin-left: 2px;
}

/* 图形验证码盖在输入框右端（position:absolute; right:0），RTL 下应在左端 */
html[dir="rtl"] .Comprepair label .vccode {
	left: 0;
	right: auto;
}

/* 输入类控件：input/textarea/select 的 text-align 默认是 start，会随 direction 靠右，
   这里显式写一次，避免被页面内联样式或浏览器默认值拉回左对齐；
   select 的下拉箭头位置由浏览器按 direction 自动处理，无需伪元素补丁。 */
html[dir="rtl"] .Comprepair .inputext,
html[dir="rtl"] .Comprepair textarea,
html[dir="rtl"] .cb-contact-form .inputext,
html[dir="rtl"] .cb-contact-form textarea,
html[dir="rtl"] .cb-contact-form select.inputext {
	direction: rtl;
	text-align: right;
}

/* 前端校验提示 .cb-field-error：它是 display:block 的整行提示，
   位置由「在字段下方 + 右对齐」表达，这里显式右对齐，
   以免未来某个页面给它加了 text-align:left 之类而提示看起来挂错了字段。 */
html[dir="rtl"] .cb-field-error {
	text-align: right;
}

/* ===================== 9. 固定浮标（右侧贴边的元素全部改贴左边） ===================== */
/* 9.1 返回顶部 .zdsbacktop（position:fixed; right:20px）—— 出现在几乎所有内页 */
html[dir="rtl"] .zdsbacktop {
	left: 20px;
	right: auto;
}

/* 9.2 首页右侧联系浮层 .right-fixed（position:fixed; right:0，含电话 / 回顶部）
       与它的提示气泡 .xlfs_modal（position:fixed; right:70px）。
       两者的 padding 也是非对称的（.right-fixed 的 padding-left:8px、
       .xlfs_modal 的 padding-left:20px），一并镜像。 */
html[dir="rtl"] .right-fixed {
	left: 0;
	right: auto;
	padding-left: 0;
	padding-right: 8px;
}

html[dir="rtl"] .xlfs_modal {
	left: 70px;
	right: auto;
	padding: 15px 20px 15px 25px;
}

/* 9.3 桌面端侧滑菜单 .headsideNav 是「从右侧滑出」的抽屉
       （right:-320px → .cur 时 right:0）。RTL 下应改为从左侧滑出，
       否则阿拉伯语用户点开菜单时内容从屏幕外右侧飞入，方向感完全相反。
       遮罩层 .exit-off-canvas 原本贴 left:0 盖住抽屉以外的区域，
       抽屉改到左边后它要改成贴 right:0。
       注意：这两条必须写在 min-width:1024px 里 —— 抽屉只在该断点显示。 */
@media screen and (min-width: 1024px) {
	html[dir="rtl"] .headsideNav {
		left: -320px;
		right: auto;
	}

	html[dir="rtl"] .headsideNav.cur {
		left: 0;
		right: auto;
	}

	html[dir="rtl"] .headsideNav .slide-colse {
		left: 30px;
		right: auto;
	}

	html[dir="rtl"] .exit-off-canvas {
		left: auto;
		right: 0;
	}
}

/* ===================== 10. 轮播 / 滑块与左右箭头 ===================== */
/* 10.1 .swiper-wrapper：本文件里**唯一**一条「主动抵制 direction:rtl」的规则，改之前请先读完。
       结论：把轮播内部拉回 LTR，RTL 的观感由箭头按钮的镜像（10.2）来承担。

   原因（都来自本仓库里真实存在的代码，不是推测）：
     · Swiper 判断 rtl 的方式是读「容器元素上的 dir 属性」。本仓库的
       public/static/module/english/js/swiper.jquery.min.js 里：
         x.rtl = x.isHorizontal() && ("rtl" === x.container[0].dir.toLowerCase()
                                      || "rtl" === x.container.css("dir"));
       其中 x.container[0].dir 只反映 HTML 的 dir **属性**，
       css("dir") 取的是名为 dir 的 CSS 属性（CSS 里不存在这个属性，永远取不到值）。
       也就是说：靠 CSS 给它 direction:rtl **不会**让 Swiper 进入 rtl 模式，
       它仍然老老实实按 LTR 计算所有偏移量。
     · Swiper 移动幻灯片靠给 .swiper-wrapper 写 transform: translate3d(-x, 0, 0)；
       而 .swiper-wrapper 是 display:flex，一旦继承 direction:rtl，
       子元素主轴顺序会整体镜像 —— 「Swiper 认为在 x=0 的那张」与「实际显示的那张」就错位了。
     · 最严重的是 loop:true 的两个轮播（layout.js 里初始化：
       首页 .indexbanner、产品/方案详情页 .minimg-wrapper）。
       loop 模式会先在容器前面插入副本，并把 wrapper 预先左移一个幻灯片宽度来对齐真实首张；
       主轴镜像之后这个初始偏移方向正好相反，结果是**首屏轮播整块空白**（只剩背景色）。
     · 因此这里明确把轮播内部拉回 LTR：轮播行为与 LTR 语种完全一致（已知可用、无回归），
       RTL 的观感交给箭头按钮的镜像来承担。这是权衡后的取舍 ——
       宁可轮播本身仍是「左→右」推进，也不能让阿拉伯语首页轮播白屏。

   为什么只写 .swiper-wrapper、不写 .swiper-container：
     · 决定主轴方向的是 wrapper 自己（它是那个 flex 容器），限制到它已经足够；
     · Swiper 初始化时会无条件给容器加上 swiper-container 这个类名，
       而本站有几处初始化其实**没有** .swiper-wrapper 子元素、等于空转
       （layout.js 里的 .inside-subnav .subnav、.common-clumb、.minimg-wrapper
        在原模板里都没有 .swiper-wrapper 节点，Swiper 取到的 wrapper 长度为 0）。
       如果连 .swiper-container 一起强制 LTR，这些「其实是普通列表」的子栏目条
       也会被拉成从左到右，阿拉伯语分类项的顺序就反了 ——
       而它们本来靠 direction:rtl 自动从右往左排，正是 RTL 想要的效果。
     · 所以只限制 wrapper：真正生效的两个轮播（.indexbanner、.partner-wrapper）
       在模板里都有 .swiper-wrapper 节点，能被覆盖到；空转的那些不受影响。 */
html[dir="rtl"] .swiper-wrapper {
	direction: ltr;
}

/* 但每一张幻灯片「内部」仍按 RTL 排版：
   幻灯片之间的顺序由 wrapper 的方向决定（上一条），卡片内容的书写方向由幻灯片自己决定，
   两者互不干扰 —— 否则阿拉伯语说明文字会变成左对齐、标点跑到行首。
   当前实际用到轮播的页面（首页 banner、合作伙伴滑块）幻灯片里只有图片，
   这条是为将来在轮播里放文字准备的，对本就有文字的场景是必需的。 */
html[dir="rtl"] .swiper-slide {
	direction: rtl;
	text-align: right;
}

/* 10.2 .index-btn.index-prev / .index-next（首页与关于页合作伙伴滑块，
       用背景图 img/prev.png、img/next.png 做箭头，物理 left/right + 断点偏移）。
       处理方式：位置左右互换，同时用 scaleX(-1) 把箭头图案水平镜像 ——
       位置与图案必须**同时**镜像，否则会出现「按钮在左边画着指向右的箭头，
       点下去内容却往左走」这种自相矛盾的状态。
       说明：因为 10.1 让轮播内部保持 LTR，"下一张"仍然是内容向左推进，
       所以镜像后的「next 在左边 + 箭头指左」与实际运动方向是一致的。
       注意 .index-btn 自身有 transform: translateY(-50%)（垂直居中），
       CSS 的 transform 是整体覆盖，所以这里必须把 translateY 一起带上。 */
html[dir="rtl"] .index-btn {
	transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .index-btn.index-prev {
	left: auto;
	right: 0;
}

html[dir="rtl"] .index-btn.index-next {
	left: 0;
	right: auto;
}

/* 与 layout.css 中 .index-btn 的三档断点偏移一一对应地镜像（-30px / -80px / -106px） */
@media (min-width: 1024px) {
	html[dir="rtl"] .index-btn.index-prev {
		right: -30px;
	}

	html[dir="rtl"] .index-btn.index-next {
		left: -30px;
	}
}

@media (min-width: 1400px) {
	html[dir="rtl"] .index-btn.index-prev {
		right: -80px;
	}

	html[dir="rtl"] .index-btn.index-next {
		left: -80px;
	}
}

@media (min-width: 1440px) {
	html[dir="rtl"] .index-btn.index-prev {
		right: -106px;
	}

	html[dir="rtl"] .index-btn.index-next {
		left: -106px;
	}
}

/* 10.3 子栏目滑动条的左右按钮 .sub-btn.sub-prev / .sub-next
       （fangan / kehuanli / job / service / about / news / solution / support /
         project / case / products 等页面都在用）。
       这两个按钮的箭头是纯 CSS 画的：一个 14~16px 的方块只留「左边框 + 下边框」
       组成「└」，再靠 transform 旋转出箭头。镜像的做法是把两个按钮的旋转角度对调
       （等价于对图形做水平翻转）：sub-prev 用 225deg（指向右），sub-next 用 40deg（指向左），
       同时把 margin 里的左右偏移对调。

       【当前实际效果】layout.css 的基准规则里
       `.full-inside-subnav .subnav .sub-btn { display:none }`（layout.css:1571，基准层、
       不在任何媒体查询里），而 ≥1024px 那组规则只补了 width/height/position，
       从未把 display 改回 block —— 也就是说这两个箭头当前**在所有宽度下都是隐藏的**；
       `.common-clumb-box` 这个容器在当前模板里也只剩注释行。
       所以本节规则同样是预防性的：一旦上游把箭头启用（补一句 display:block 即可），
       阿拉伯语页面的箭头方向已经是对的，不需要再改一次 CSS。
       这属于既有样式表的遗留问题（模板里有元素、样式里被隐藏），与 RTL 无关，
       已在交付说明中单列，供后续决定是补 display 还是删元素。 */
html[dir="rtl"] .common-clumb-box .sub-btn.sub-prev,
html[dir="rtl"] .full-inside-subnav .subnav .sub-btn.sub-prev {
	left: auto;
	right: 0;
}

html[dir="rtl"] .common-clumb-box .sub-btn.sub-next,
html[dir="rtl"] .full-inside-subnav .subnav .sub-btn.sub-next {
	left: 0;
	right: auto;
}

html[dir="rtl"] .full-inside-subnav .subnav .sub-btn.sub-prev:before {
	transform: rotate(225deg);
	margin: 22px 17px 0 0;
}

html[dir="rtl"] .full-inside-subnav .subnav .sub-btn.sub-next:before {
	transform: rotate(40deg);
	margin: 22px 8px 0 0;
}

html[dir="rtl"] .common-clumb-box .sub-btn.sub-prev:before {
	transform: rotate(225deg);
	margin: 18px 17px 0 0;
}

html[dir="rtl"] .common-clumb-box .sub-btn.sub-next:before {
	transform: rotate(40deg);
	margin: 18px 8px 0 0;
}

/* 10.4 产品 / 方案详情页大图的左右翻页按钮
       （模板里就是 <p class="left" data-img-nav="prev">&lt;</p> 与
         <p class="right" data-img-nav="next">&gt;</p>，样式在 changping_detail.css）。
       · 位置：.left{left:-20px} 与 .right{right:-20px} 左右互换；
       · 字符：&lt; / &gt; 是 HTML 实体字符，CSS 无法把字形镜像，
         只能用 scaleX(-1) 把整个 <p> 水平翻转（它内部只有一个箭头字符，
         翻转不会影响任何正文文字），这样「按钮在右、箭头指向右」是自洽的。
       · 只写 left/right，不重复声明 position ——
         这两个类名太通用（职位页 job/rencailinian.html 里也有 <div class="left">），
         若在这里补 position:absolute 会波及那个页面（changping_detail.css 没被它引用，
         所以它在那边本来是普通块级元素）。只改左右偏移，对静态元素是无副作用的空操作。 */
html[dir="rtl"] .product-detail .home > .left {
	left: auto;
	right: -20px;
	transform: scaleX(-1);
}

html[dir="rtl"] .product-detail .home > .right {
	left: -20px;
	right: auto;
	transform: scaleX(-1);
}

/* ===================== 11. 其余左右方向指示的图标 ===================== */
/* 11.1 移动端主导航的「展开子菜单」小三角 .phsearchicon:after
        （layout.css：10×10 方块只留 border-right + border-top，再 rotate(45deg)，
          得到一个指向右的「>」；.cur 展开时 rotate(135deg) 变成向下的「∨」）。
        RTL 下收起状态应指向左，故把 45deg 改成 -45deg（等价于水平镜像）；
       展开状态的 135deg 是「向下」，与方向无关，保持不变。
        说明：≥1024px 时 header.html 的内联样式已把该伪元素 content 置为 none，
        这条规则只在窄屏生效。 */
html[dir="rtl"] .phsearchicon:after {
	transform: rotate(-45deg);
}

/* ===================== 12. 404 页（纯 HTML、不走 layout 的独立页面） ===================== */
/* 该页由 app/common/exception/Handler.php 直接输出，除本文件外还链了它；
   <html> 上的 dir 由 Handler 把占位符 {:lang_dir()} 替换成真实值得到。
   页面自身是「居中卡片 + flex 居中」的结构，方向性属性只有 logo 方块用
   margin-right 与文字拉开距离这一处（.eb-logo span）。 */
html[dir="rtl"] .eb-logo span {
	margin-right: 0;
	margin-left: 10px;
}

html[dir="rtl"] .eb-card,
html[dir="rtl"] .eb-footer {
	text-align: center;
}

/* ============================================================================
   附：本次已核对、但**无需** RTL 规则的组件（写在这里避免后续重复排查）
   ----------------------------------------------------------------------------
   · .pages / .pagination        居中 + inline-block + 左右对称 margin，方向自洽
   · .partner-wrapper/.inxpart-list 容器本身无方向性属性（只有 overflow:hidden）；
                              内部 swiper 由第 10.1 节强制 LTR，故容器无需规则
   · .cb-global-top / .cb-global-caption  flex + gap，主轴自动反向
   · .language-trigger/.language-grid/.language-item  flex/grid + gap，自动反向
   · .header-nav（≥1024px）        display:flex + justify-content:end，自动反向
   · .footer_bottom / .footer-top .flex_b  flex + space-around，自动反向
   · .zx_text / .cb-pro-contact li / .cb-contact-nap li  flex + gap，自动反向
   · .yzm（验证码行）              flex + gap，自动反向
   · .ewm（二维码块）              flex-direction:column，垂直方向，无镜像需求
   · .cb-breadcrumb / .tw-crumb    纯行内文本流，跟随 body 靠右
   · .plus.icon:before/:after      「+」由一横一竖组成，左右对称，无镜像需求
   · .mobnav-btn span              三横线，左右各留 5px/3px，视觉近似对称
   · .prodatile-prev/.prodatile-next  仅在 layout.css 中定义，前台模板里已无对应元素
                                    （Swiper 的 nextButton/prevButton 选择器指向空节点），
                                    属遗留样式，本次不做镜像
   · .relat-next/.relat-prev/.hisswiper-*/.arrivals-*/.Career-wrapper 等
                                    同上：只有样式、模板里已无标记，属遗留样式
   · .index-btn 以外的箭头字符     如模板正文里的 &rarr;（.cb-text-link）、面包屑里的
                                    板块分隔符等「文本型箭头」，CSS 无法镜像字形本身；
                                    这类需要改模板文案/字符，不在本次样式改动范围内，
                                    已在交付说明中列为需人工确认项
   ========================================================================= */
