/* Phase 4 RTL overrides for Arabic public pages. The shared redesign CSS was authored for LTR pages. Keep the semantic attribute, but pin the viewport flow to LTR so mobile screenshots and browsers do not start from the wrong horizontal edge. */ html[dir="rtl"], html[dir="rtl"] body { direction: ltr; overflow-x: hidden; } html[dir="rtl"] .hero-left, html[dir="rtl"] .features, html[dir="rtl"] .pricing, html[dir="rtl"] .closer, html[dir="rtl"] .page-hero, html[dir="rtl"] .toc, html[dir="rtl"] .faq-section, html[dir="rtl"] .lead-intro, html[dir="rtl"] .section { direction: rtl; text-align: right; } html[dir="rtl"] .masthead { direction: ltr; } html[dir="rtl"] .masthead .right { direction: rtl; } html[dir="rtl"] .hero-meta, html[dir="rtl"] .ctas, html[dir="rtl"] .toc-list, html[dir="rtl"] .faq-item, html[dir="rtl"] .feat-item, html[dir="rtl"] .step, html[dir="rtl"] .compare-table { direction: rtl; } /* ---------- Chat-demo: mirror to native Arabic Telegram layout ---------- Outgoing (user) bubbles → left edge. Incoming (bot) bubbles → right edge. The chat-area is flex-direction:column, so cross-axis is horizontal: in RTL, flex-end becomes left and flex-start becomes right. The bubble align-self rules in index-en.css therefore flip automatically; we only need to flip the corner-tail radii, the play arrow and the trailing timestamp anchor. */ html[dir="rtl"] .chat-frame, html[dir="rtl"] .tg-chat-area, html[dir="rtl"] .tg-header { direction: rtl; } /* Bubble tails: mirror the rounded-corner pattern */ html[dir="rtl"] .tg-voice, html[dir="rtl"] .tg-text-out { border-radius: 14px 14px 14px 4px; } html[dir="rtl"] .tg-processing, html[dir="rtl"] .tg-result, html[dir="rtl"] .tg-welcome { border-radius: 14px 4px 14px 14px; } html[dir="rtl"] .tg-voice { padding: 6px 6px 6px 10px; } /* Play-button arrow points "forward in time" — in RTL UIs that is left */ html[dir="rtl"] .tg-voice .play svg { transform: scaleX(-1); } /* Result/welcome timestamp sits at the bubble's trailing edge. In LTR that's right; in RTL that's left. */ html[dir="rtl"] .tg-result .rstamp, html[dir="rtl"] .tg-welcome .rstamp { text-align: left; } /* Isolate latin-digit/checkmark/punctuation runs and force LTR base direction inside, so "21:31 ✓✓" / "0:38 ● 148 KB" / "[00:00]" / "/start" stay in their natural LTR order inside the Arabic chat paragraph. */ html[dir="rtl"] .stamp, html[dir="rtl"] .rstamp, html[dir="rtl"] .dur, html[dir="rtl"] .ts, html[dir="rtl"] .tg-text-out .tx { unicode-bidi: isolate; direction: ltr; } html[dir="rtl"] .compare-table th, html[dir="rtl"] .compare-table td { text-align: right; } html[dir="rtl"] .price-table { direction: rtl; } html[dir="rtl"] .price-table thead th, html[dir="rtl"] .price-table tbody td, html[dir="rtl"] .price-table tfoot td { text-align: right; } html[dir="rtl"] .price-table thead th.featured::after { left: auto; right: 14px; content: "★ الأكثر اختياراً"; } html[dir="rtl"] .price-card { direction: rtl; text-align: right; } html[dir="rtl"] .price-card .badge { left: auto; right: 18px; } @media (max-width: 720px) { html[dir="rtl"] .masthead { padding-inline: 20px; } html[dir="rtl"] .masthead .brand { min-width: 0; } html[dir="rtl"] .masthead .right { gap: 12px; /* On mobile keep the right-side toolbar in LTR flow so the burger ends up at the far right edge (matching LTR locales). Without this the RTL-flowing .right puts the burger between brand and CTA, which reads as a layout glitch. Inside-burger nav links are hidden on mobile anyway, so LTR flow has no other consequence. */ direction: ltr; } html[dir="rtl"] .hero-inner, html[dir="rtl"] .hero-left, html[dir="rtl"] .hero-right, html[dir="rtl"] .features-inner, html[dir="rtl"] .pricing-inner, html[dir="rtl"] .closer-inner, html[dir="rtl"] .page-hero-inner, html[dir="rtl"] .toc-inner, html[dir="rtl"] .faq-section-inner, html[dir="rtl"] .lead-intro-inner, html[dir="rtl"] .section-inner { min-width: 0; width: calc(100vw - 48px); max-width: calc(100vw - 48px); margin-left: auto; margin-right: auto; } html[dir="rtl"] .hero, html[dir="rtl"] .features, html[dir="rtl"] .pricing, html[dir="rtl"] .closer, html[dir="rtl"] .page-hero, html[dir="rtl"] .toc, html[dir="rtl"] .faq-section, html[dir="rtl"] .lead-intro, html[dir="rtl"] .section { padding-inline: 24px; } html[dir="rtl"] .hero-h, html[dir="rtl"] .page-h { overflow-wrap: anywhere; } html[dir="rtl"] .chat-frame { width: 100%; max-width: 100%; } html[dir="rtl"] .hero-left, html[dir="rtl"] .page-hero, html[dir="rtl"] .page-aside, html[dir="rtl"] .lead-intro, html[dir="rtl"] .section-h, html[dir="rtl"] .faq-section-head, html[dir="rtl"] .closer { text-align: center; } html[dir="rtl"] .hero-meta, html[dir="rtl"] .ctas { justify-content: center; } html[dir="rtl"] .hero-h, html[dir="rtl"] .page-h { font-size: clamp(34px, 11vw, 52px); line-height: 1.04; } /* AR mobile keeps the masthead CTA visible just like other locales. (Previously this rule hid `.cta` on AR mobile — restored 2026-05 for parity with EN/RU/UK/DE.) */ html[dir="rtl"] p, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .lead, html[dir="rtl"] .sub, html[dir="rtl"] .blurb { max-width: 100%; overflow-wrap: anywhere; } html[dir="rtl"] .copy, html[dir="rtl"] .copy p, html[dir="rtl"] .page-aside, html[dir="rtl"] .page-aside p, html[dir="rtl"] .lead-intro-inner p, html[dir="rtl"] .section-h .blurb { width: 100%; max-width: calc(100vw - 48px); margin-left: auto; margin-right: auto; } html[dir="rtl"] .copy p, html[dir="rtl"] .page-aside p, html[dir="rtl"] .lead-intro-inner p, html[dir="rtl"] .feat-item p, html[dir="rtl"] .step p { text-align: left; } html[dir="rtl"] .hero-left, html[dir="rtl"] .features, html[dir="rtl"] .pricing, html[dir="rtl"] .closer, html[dir="rtl"] .page-hero, html[dir="rtl"] .toc, html[dir="rtl"] .faq-section, html[dir="rtl"] .lead-intro, html[dir="rtl"] .section { direction: ltr; text-align: left; } html[dir="rtl"] .hero-meta, html[dir="rtl"] .ctas { justify-content: flex-start; } html[dir="rtl"] .hero-meta { direction: ltr; flex-wrap: wrap; gap: 8px 12px; max-width: 100%; overflow: hidden; } html[dir="rtl"] .ctas { direction: ltr; flex-direction: column; align-items: flex-start; } html[dir="rtl"] .ctas .btn-solid, html[dir="rtl"] .ctas .btn-link { max-width: 100%; } html[dir="rtl"] .hero-h, html[dir="rtl"] .page-h { text-align: left; } html[dir="rtl"] .pricing, html[dir="rtl"] .pricing-inner, html[dir="rtl"] .price-cards, html[dir="rtl"] .price-card, html[dir="rtl"] .price-card ul { direction: rtl; text-align: right; } html[dir="rtl"] .price-card .pc-head { direction: rtl; } html[dir="rtl"] .pricing { overflow-x: hidden; } html[dir="rtl"] .pricing-inner, html[dir="rtl"] .price-cards, html[dir="rtl"] .price-card { width: 100%; max-width: 100%; } html[dir="rtl"] .price-card { overflow: hidden; } /* Mobile-nav panel — restore RTL flow that the global body override pinned to LTR. direction:rtl alone is enough — flex's space-between then puts the first child on the right edge (Arabic text) and the trailing code/×-button on the left. */ html[dir="rtl"] .mobile-nav, html[dir="rtl"] .mobile-nav-inner, html[dir="rtl"] .mobile-nav-section { direction: rtl; text-align: right; } }