/* ============================================================
   TIANROU — RTL overrides (Arabic, versioned to bypass stale CDN 404s)
   Loaded ONLY when the active language is right-to-left
   (see i18n.php → is_rtl()). Kept in a separate file so the LTR
   stylesheet stays byte-identical and cacheable.
   ============================================================ */

/* ---------- 1. Typography ---------- */
html[dir="rtl"] {
  --font-sans: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI Arabic",
               "Geeza Pro", Tahoma, Arial, Inter, "Noto Sans SC", sans-serif;
  --font-display: "Noto Naskh Arabic", "Noto Kufi Arabic", "Segoe UI Arabic",
                  Georgia, "Times New Roman", serif;
}
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.5; }

/* Machine-readable / Latin-only content stays left-to-right inside RTL pages */
html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] kbd,
html[dir="rtl"] .mono, html[dir="rtl"] .table .num,
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="number"],
html[dir="rtl"] .force-ltr {
  direction: ltr; text-align: left; unicode-bidi: embed;
}

/* ---------- 2. Block alignment ---------- */
html[dir="rtl"] .table th,
html[dir="rtl"] .about-card,
html[dir="rtl"] .support-card,
html[dir="rtl"] .service-card { text-align: right; }
html[dir="rtl"] .skip-link { left: auto; right: 8px; }

/* ---------- 3. Spacing flips ---------- */
html[dir="rtl"] .color-dots { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .head-actions,
html[dir="rtl"] .head-burger { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nav-main li:first-child a { padding-left: 0; padding-right: clamp(8px, .72vw, 11px); }
html[dir="rtl"] .nav-caret { margin-left: 0; margin-right: 2px; }
html[dir="rtl"] .nav-cta { margin-left: 0; margin-right: 0; }
html[dir="rtl"] .process-connector { margin-left: 0; margin-right: 17px; }
html[dir="rtl"] .metric small { margin-left: 0; margin-right: 2px; }
html[dir="rtl"] .dropdown-list li a .chev { margin-left: 0; margin-right: auto; transform: scaleX(-1); }
html[dir="rtl"] .dropdown-list li a:hover { padding-left: 0; padding-right: 4px; }
html[dir="rtl"] .guide-entry { border-left: 0; border-right: 3px solid var(--brand-300); }
html[dir="rtl"] .article-body blockquote {
  border-left: 0; border-right: 4px solid var(--brand-300);
  padding-left: 0; padding-right: 16px; margin-right: 0;
}
html[dir="rtl"] .article-body ul,
html[dir="rtl"] .article-body ol { padding-left: 0; padding-right: 2em; }

/* Form controls */
html[dir="rtl"] .select {
  padding-right: 12px !important; padding-left: 40px !important;
  background-position: left 12px center !important;
}
html[dir="rtl"] .input-icon .ico { left: auto; right: 14px; }
html[dir="rtl"] .input-icon .input { padding-left: 12px !important; padding-right: 42px !important; }

/* ---------- 4. Absolutely positioned elements ---------- */
html[dir="rtl"] .nav-dropdown { left: auto; right: 0; }
html[dir="rtl"] .mobile-lang-select .mlg { right: auto; left: 0; }
html[dir="rtl"] .featured-product .badge-brand { right: auto; left: var(--sp-3); }
html[dir="rtl"] .check-mark::before { left: auto; right: 3px; }
html[dir="rtl"] .table-compare td:first-child,
html[dir="rtl"] .table-compare th:first-child { left: auto; right: 0; }
html[dir="rtl"] .step::before { left: auto; right: calc(-50% + 15px); }
html[dir="rtl"] .site-foot::before,
html[dir="rtl"] .nav-main { left: 0; right: 0; }

/* Floating contact bar flips to the opposite edge */
html[dir="rtl"] .contact-bar { right: auto; left: 18px; }
html[dir="rtl"] .contact-bar .cb-btn .cb-tip { right: auto; left: calc(100% + 10px); }
html[dir="rtl"] .contact-bar .cb-btn:hover .cb-tip { right: auto; left: calc(100% + 14px); }
html[dir="rtl"] .contact-bar .cb-top .cb-tip { right: auto; left: calc(100% + 14px); }
html[dir="rtl"] .cb-wechat .qr-pop { right: auto; left: calc(100% + 14px); }
@media (max-width: 760px) {
  html[dir="rtl"] .contact-bar { left: 12px; right: auto; }
}

/* ---------- 5. Directional icons ---------- */
/* Chevron/arrow icons encode "forward"; mirror them for RTL reading order. */
html[dir="rtl"] .i-chevron-right { transform: scaleX(-1); }
html[dir="rtl"] .btn .i-chevron-right,
html[dir="rtl"] .nav-link .i-chevron-right { transform: scaleX(-1); }

/* ---------- 6. Arabic numerals / mixed content ---------- */
html[dir="rtl"] .table td, html[dir="rtl"] .table th { unicode-bidi: plaintext; }
html[dir="rtl"] .legal-page, html[dir="rtl"] .article-body { text-align: right; }