/* ===== RTL overrides for Arabic (i18n 2026-08-07) ===== */
[dir="rtl"]{text-align:right}
[dir="rtl"] body{font-family:"Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif}

/* header + nav mirror */
[dir="rtl"] .logo{text-align:right}
[dir="rtl"] .lang-switch{margin-left:0;margin-right:18px}
[dir="rtl"] .lang-switch__menu{right:auto;left:0}
[dir="rtl"] .lang-switch__menu a{text-align:right}
/* content blocks */
[dir="rtl"] .hero-content,
[dir="rtl"] .section-title,
[dir="rtl"] .card,
[dir="rtl"] .product-card,
[dir="rtl"] .feature-item{text-align:right}
/* lists + tables */
[dir="rtl"] ul,[dir="rtl"] ol{padding-right:22px;padding-left:0}
[dir="rtl"] table{direction:rtl}
[dir="rtl"] th,[dir="rtl"] td{text-align:right}

/* footer */
[dir="rtl"] .footer-grid{direction:rtl}
[dir="rtl"] .footer-col{text-align:right}
[dir="rtl"] .footer-bottom{direction:rtl}

/* breadcrumbs read right-to-left naturally, just flip the box */
[dir="rtl"] nav[aria-label="Breadcrumb"]{direction:rtl;text-align:right}

/* keep latin technical strings LTR inside RTL text */
[dir="rtl"] .ltr,
[dir="rtl"] code,
[dir="rtl"] .spec-value-latin{direction:ltr;display:inline-block;unicode-bidi:embed}

/* floating social rail sits on the left in RTL */

/* ===== RTL patch 2 (2026-08-07) — audited against live style.css ===== */
/* Fixes found by _i18n_rtl_audit.py: the first pass targeted .social-float
   but the markup actually uses .float-social, so the whole social rail and
   its tooltips never mirrored. */

/* top info bar: email left / phone right must swap */
/* checkmark bullet: ::before is pinned to left:0 with padding-left */
[dir="rtl"] .feature-list li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .feature-list li::before { left: auto; right: 0; }

/* product card chlorine badge: pinned bottom-right */
[dir="rtl"] .product-card .ph .badge { right: auto; left: 14px; }

/* floating social rail: correct class is .float-social (not .social-float) */
[dir="rtl"] .float-social { right: auto; left: 18px; }
[dir="rtl"] .float-social a:hover { transform: translateX(4px) scale(1.08); }
[dir="rtl"] .float-social a::before {
    right: auto; left: 58px;
    transform: translateY(-50%) translateX(-8px);
}
[dir="rtl"] .float-social a:hover::before {
    transform: translateY(-50%) translateX(0);
}

/* news card meta row reads right-to-left */
[dir="rtl"] .news-body { text-align: right; }

/* mobile: rail also sits left */
@media (max-width: 768px) {
    [dir="rtl"] .float-social { right: auto; left: 12px; }
}

/* Latin technical strings keep LTR run direction inside Arabic sentences.
   Applies to the spec rows, stat numbers and the contact block, where
   SDIC / TCCA / 90% / 25kg / e-mail / +86 would otherwise reorder. */
[dir="rtl"] .stat-item .num,
[dir="rtl"] .spec,
[dir="rtl"] .ci,
[dir="rtl"] .top-bar a,
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: embed;
}
[dir="rtl"] .stat-item .num { display: block; }
[dir="rtl"] .spec, [dir="rtl"] .ci { text-align: right; }

/* hero + dots are centred, so they need no mirroring - documented so a
   later pass does not "fix" them by mistake:
   .hero justify-content:center, .hero-dots left:50% translateX(-50%)
   .news-card / .news-img-placeholder are column/centred flex - direction-neutral */

/* NOTE (2026-08-07): do NOT add `flex-direction: row-reverse` under
   [dir="rtl"]. `flex-direction: row` already follows the inline base
   direction, so row-reverse double-reverses the row back to LTR.
   Only absolute offsets (left/right) and transforms need manual mirroring. */