/*
Right-to-left layout overrides. WordPress automatically swaps this file in
for style.css whenever is_rtl() is true (Settings > General > Site Language
set to Arabic or another RTL language, or a multilingual plugin like
Polylang switching the locale per page). This file only needs to contain
the RULES THAT CHANGE for RTL — everything else keeps using style.css.
*/

body{ direction:rtl; text-align:right; }

/* Header */
.logo{ direction:ltr; right:50%; left:auto; transform:translateX(50%); } /* direction:ltr keeps the brand name "cell•mission" in that exact order — without it, the browser's right-to-left text handling reorders "cell", the dot, and "mission" as if they were three separate pieces of RTL content, since they're technically three separate inline elements sitting inside an RTL page */
.banner-logo{ direction:ltr; } /* same brand-name reordering fix — this exact "cell•mission" markup is repeated as a banner logo on every landing page (service, device, brand, sell, FAQ, all-repairs, track-repair, generic pages, service centers), so one rule here covers every one of them at once */
@media (min-width:860px){ .logo{ right:auto; transform:none; } }
/* .headbar and .head-icons need no RTL override at all — style.css uses
margin-inline-start (a logical property that flips direction
automatically), so the header lays out correctly in Arabic with zero
extra code. An earlier version tried to force this with
flex-direction:row-reverse plus a manual margin-right override, which
actively fought each other and caused the header icons to overlap the
centered logo — removed for that reason. */
.mobile-menu a{ text-align:right; }

/* Sticky rail + bottom nav */
.rail{ right:auto; left:16px; }
.bn-inner{ flex-direction:row; } /* tab order stays visually stable; only text/icon internals mirror */
.bn-item{ direction:rtl; }

/* Hero */
.promo-copy, .promo-copy h1, .promo-copy p{ text-align:right; }
.promo-card{ text-align:right; }
.promo-graphic{ left:-10px; right:auto; }
.hero-actions{ flex-direction:row-reverse; justify-content:flex-end; }
.promo-arrow.prev{ right:8px; left:auto; transform:translateY(-50%) scaleX(-1); }
.promo-arrow.next{ left:8px; right:auto; transform:translateY(-50%) scaleX(-1); }

/* Quick Access / Support tiles (icon + label rows) */
.qa-tile{ flex-direction:row-reverse; text-align:right; }
.support-tile{ text-align:right; }

/* Discover devices / brand pills */
.discover-heading, .discover-tile{ text-align:right; }
.brand-row{ flex-direction:row-reverse; }

/* Pricing cards */
.plan-card{ text-align:right; }
.tabs-row{ flex-direction:row-reverse; }

/* Certifications / testimonials */
.cert-card{ text-align:right; }

/* FAQ accordion */
.faq-item summary{ flex-direction:row-reverse; text-align:right; }

/* Forms */
.field label{ text-align:right; }
.field input, .field select, .field textarea{ text-align:right; }
.form-grid.two{ direction:rtl; }

/* CTA / banner */
.feature{ flex-direction:row-reverse; text-align:right; }
.cta-top h2, .cta-top p{ text-align:right; }
.banner-promo{ text-align:right; }

/* Footer */
.foot-logo{ direction:ltr; } /* same brand-name reordering issue as the header logo — keeps "cell•mission" in the correct order */
.foot-contact-item{ flex-direction:row-reverse; text-align:right; }
.foot-links{ flex-direction:row-reverse; }
.foot-bottom{ flex-direction:row-reverse; }
.newsletter-form{ flex-direction:row-reverse; }

/* Device picker (legacy component, kept for safety) */
.device-pill{ text-align:center; }

/*
Horizontal-scroll carousels (promo hero, pricing tabs, discover devices,
lab photos, order timeline). RTL scroll behavior is genuinely
inconsistent across browsers — Safari and Chrome disagree on where
scrollLeft:0 sits in a right-to-left flex container, which is exactly
what causes a carousel to feel like it has extra empty space to scroll
into, or to open on the wrong card. The reliable fix: keep the actual
scroll math in plain left-to-right (predictable, well-supported
everywhere), and instead just visually reverse the card order with
row-reverse — so it still reads right-to-left like the rest of the
page, without inheriting any of RTL's scroll-origin inconsistency.
*/
.promo-scroller, .plan-scroller, .discover-scroller, .lab-scroller, .ot-track{
	direction:ltr;
}
.promo-scroller{ flex-direction:row-reverse; }
.plan-scroller{ flex-direction:row-reverse; }
.discover-scroller{ flex-direction:row-reverse; }
.lab-scroller{ flex-direction:row-reverse; }
/* The order timeline stays in natural left-to-right progress order even
in Arabic — reversing a step-by-step "what happens next" sequence would
make it read backwards (delivered-to-received) rather than mirroring a
layout direction, so this one is deliberately left as normal LTR flow,
not row-reversed. */
.ot-step{ direction:ltr; }

/* Prevents any of the above (or anything else) from ever making the
whole page scroll further than its content, which is the layout-wide
symptom of an unconstrained RTL flex child — a single, cheap safety net
rather than chasing every individual component. */
html, body{ overflow-x:hidden; max-width:100%; }