/* ===================================================== RTL overrides — Arabic (direction: rtl on ) Rule: direction:rtl already reverses flex rows. Never use flex-direction:row-reverse here — it double-flips back to LTR. Only override what direction:rtl cannot handle automatically. ===================================================== */ /* Base */ body { font-family: 'Cairo', 'Poppins', sans-serif; direction: rtl; } /* ── Header ───────────────────────────────────────── direction:rtl on the flex row naturally places: first DOM child (logo) → right ✓ middle (nav) → center ✓ last (join + lang) → left ✓ */ header#main-header { direction: rtl; } .lang-switcher { margin-right: 8px; margin-left: 0; } .mobile-nav { direction: rtl; text-align: right; } /* ── Index hero ────────────────────────────────────── .hero-inner is a CSS grid (not flex), direction:rtl makes columns flow right-to-left automatically: hero-content on right, hero-visual on left ✓ */ .hero-content { text-align: right; } /* Buttons inside .hero-content: align to right edge */ .hero-content .hero-btns { justify-content: flex-start; /* start = right in RTL */ } .hero-trust { justify-content: flex-start; } /* ── Page hero (Host / Agency) ─────────────────────── .page-hero-inner is text-align:center, buttons are justify-content:center — keep them centred in RTL */ .page-hero-inner { text-align: center; } .page-hero-inner .hero-btns { justify-content: center; } /* ── FAQ ───────────────────────────────────────────── .faq-q: flex + justify-content:space-between With direction:rtl the main-axis start is on the right, so: h3 (first DOM item) → right side ✓ faq-icon (second) → left side ✓ No row-reverse needed — it would flip it back wrong. */ .faq-a-inner { text-align: right; } /* ── Policy list bullets ───────────────────────────── Bullet ▶ moves from left edge to right edge */ .policy-list li { padding-left: 0; padding-right: 18px; } .policy-list li::before { left: auto; right: 0; margin-right: 0; margin-left: 8px; } /* ── Benefit item (agency page) ────────────────────── direction:rtl puts icon (first DOM) on right, text on left — correct. Just fix the gap direction. */ .benefit-item { text-align: right; } /* ── Requirement item (host page) ─────────────────── Same as benefit-item above */ .req-item { text-align: right; } /* ── Cards ───────────────────────────────────────────*/ .card, .why-card, .policy-card, .step-card, .earn-chip, .commission-card { text-align: right; } /* ── Split CTA benefits list ───────────────────────── direction:rtl puts check icon (first DOM) on right, text on left — correct for Arabic ✓ */ .split-benefits li { text-align: right; } /* ── Footer ──────────────────────────────────────────*/ footer .footer-grid { direction: rtl; } footer .footer-brand p, footer .footer-col ul { text-align: right; } /* ── Section headings / badges ─────────────────────── Centred sections stay centred */ .section-badge, .section-title, .section-sub, .text-center, .final-cta, .wa-section, .commission-grid { text-align: center; } .final-cta-btns { justify-content: center; } /* ── Float WA tooltip ──────────────────────────────── In LTR tooltip appears left of the button; in RTL flip it to the right */ .float-wa-tooltip { right: auto; left: calc(100% + 10px); } /* ── Misc text alignment ─────────────────────────────*/ .hero-tag { margin-left: auto; margin-right: 0; } .page-hero-inner .hero-tag { margin-left: auto; margin-right: auto; }