/* =========================================================
 * rtl.css — 阿语 RTL 镜像布局覆盖
 * 由 main-eng.js 在切到阿语时通过 document.documentElement.dir="rtl" 触发
 *
 * 原则
 *  - 物理属性（margin-left/right、float:left/right）在 RTL 下不自动镜像，
 *    需要在这里显式覆盖
 *  - 逻辑属性（margin-inline-start 等）自动 RTL，不用写
 *  - 只覆盖有明显视觉错位的场景，不重复写全部规则
 * ========================================================= */

html[dir="rtl"] body {
  text-align: right;
}

/* === 导航栏：logo 与菜单对齐反转 === */
html[dir="rtl"] .navbar-brand {
  margin-right: 0;
  margin-left: 1rem;
}
html[dir="rtl"] .navbar-nav .nav-link {
  text-align: right;
}

/* Bootstrap utility 镜像：ms-auto/me-auto 在 RTL 下语义反转 */
html[dir="rtl"] .ms-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}
html[dir="rtl"] .me-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}
html[dir="rtl"] .ms-2,
html[dir="rtl"] .ms-3 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}
html[dir="rtl"] .me-2,
html[dir="rtl"] .me-3 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* 文本对齐工具类在 RTL 下保留原始语义 */
html[dir="rtl"] .text-start {
  text-align: right !important;
}
html[dir="rtl"] .text-end {
  text-align: left !important;
}

/* === 顶部 header（地址 + 邮箱那行）=== */
html[dir="rtl"] .top-header ul li {
  padding-right: 0;
  padding-left: 1rem;
}

/* === 列表：项目符号位置 === */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* === 联系信息列表（地址/电话/邮箱，图标在左）=== */
html[dir="rtl"] .contact-info li,
html[dir="rtl"] .info-item {
  padding-right: 2.5rem;
  padding-left: 0;
}
html[dir="rtl"] .contact-info li i,
html[dir="rtl"] .info-item i {
  right: 0;
  left: auto;
}

/* === 表单 input/textarea：图标在右 === */
html[dir="rtl"] .form-icon {
  left: auto;
  right: 1rem;
}

/* === Hero slider 左右箭头 === */
html[dir="rtl"] .owl-nav .owl-prev {
  left: auto;
  right: 10px;
}
html[dir="rtl"] .owl-nav .owl-next {
  right: auto;
  left: 10px;
}
html[dir="rtl"] .owl-nav .owl-prev::before {
  content: "\f054"; /* fa-chevron-right */
}
html[dir="rtl"] .owl-nav .owl-next::before {
  content: "\f053"; /* fa-chevron-left */
}

/* === 面包屑：分隔符从 / 改为 \（RTL 视觉习惯）=== */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "\\";
}

/* === 证书区块：标题仍居中 === */
html[dir="rtl"] #certificates .fw-bold.small {
  text-align: center;
}

/* === 底部 footer：列顺序反转 + 右对齐 === */
html[dir="rtl"] .footer .row > [class*="col-"] {
  direction: rtl;
}
html[dir="rtl"] .footer-social,
html[dir="rtl"] .footer-menu {
  text-align: right;
}

/* === 产品卡片：hover 浮层方向 === */
html[dir="rtl"] .product-overlay,
html[dir="rtl"] .product-hover {
  left: auto;
  right: 0;
}

/* === 表单复选框和单选：标签在右 === */
html[dir="rtl"] .form-check {
  padding-right: 1.5rem;
  padding-left: 0;
}
html[dir="rtl"] .form-check-input {
  margin-right: -1.5rem;
  margin-left: 0;
}

/* === 浮动方向反转 === */
html[dir="rtl"] .float-start {
  float: right !important;
}
html[dir="rtl"] .float-end {
  float: left !important;
}

/* === 模态框（微信二维码）关闭按钮 === */
html[dir="rtl"] .modal-header .btn-close {
  margin-left: 0;
  margin-right: auto;
}

/* === 防止阿语长串溢出 === */
html[dir="rtl"] {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* === Bootstrap carousel（hero 区轮播）RTL 修正 ===
 * 症状：阿语下 .carousel-item 同时有 margin-left:-100% 与 margin-right:-100%
 *       （来自 scoped Bootstrap RTL），加上 float:right，把 active 项推到
 *       视口右侧外一整屏宽度，整张 hero 看似空白。
 * 修复：取消双向负边距，让 active 项正常显示在 inner 内。
 * 注：carousel 切换方向由 .carousel-item-{next,prev,start,end} 的 transform
 *     控制；transform translateX 是「视觉方向」，与 RTL 文本方向无冲突，
 *     不需要翻转。
 */
html[dir="rtl"] .carousel-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* === 方向性图标在 RTL 下镜像（箭头/尖括号跟随阅读方向）===
 * 覆盖 FontAwesome 的 content，让「前进/右」图标在阿语下指向左。
 * 覆盖范围：页脚列表小箭头、Hero 按钮「Explore →」、轮播缩略图前后箭头等。
 */
html[dir="rtl"] .fa-angle-right::before { content: "\f104"; } /* → 变 ← */
html[dir="rtl"] .fa-angle-left::before  { content: "\f105"; } /* ← 变 → */
html[dir="rtl"] .fa-arrow-right::before  { content: "\f060"; } /* → 变 ← */
html[dir="rtl"] .fa-arrow-left::before   { content: "\f061"; } /* ← 变 → */
html[dir="rtl"] .fa-chevron-right::before { content: "\f053"; }
html[dir="rtl"] .fa-chevron-left::before  { content: "\f054"; }

/* === 页脚列表：list-unstyled 在 RTL 下不应被 ul 通用规则额外缩进 === */
html[dir="rtl"] .list-unstyled {
  padding-right: 0;
  padding-left: 0;
}

/* === 页脚列顺序与对齐：Bootstrap 5 flex .row 会随 direction 自动反转，
 *    这里再显式兜底，确保三列（产品/联系/客服）在阿语下从右往左排、文字右对齐。 === */
html[dir="rtl"] .sidebar-footer {
  direction: rtl;
}
html[dir="rtl"] .sidebar-footer .sf-product,
html[dir="rtl"] .sidebar-footer .sf-contact,
html[dir="rtl"] .sidebar-footer .sf-social {
  text-align: right;
}

/* === 顶部 header 地址行：图标与文字在 RTL 下从右开始 === */
html[dir="rtl"] .top-header ul {
  text-align: right;
}
html[dir="rtl"] .top-header .fa-map-marker,
html[dir="rtl"] .top-header .fa-envelope {
  margin-right: 0;
  margin-left: 0.35rem;
}