/* ════════════════════════════════════════════════════════════════ MyLeadDone – RTL Overrides Active when ════════════════════════════════════════════════════════════════ */ /* ── Arabic font ── */ .rtl { --font-family: 'Noto Sans Arabic', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .rtl body { font-family: var(--font-family); } /* ── Global text alignment ── */ .rtl .prob-mobile-card, .rtl .solution-step-card, .rtl .feature-card, .rtl .hiw-details li, .rtl .hiw-card, .rtl .hiw-card--wide, .rtl .cs-card, .rtl .bna-col, .rtl .bna-col-header, .rtl .pricing-features { text-align: right; } /* ── Hero badge ── */ .rtl .hero-badge { padding: 6px 10px 6px 14px; margin-left: auto; margin-right: 0; } /* ── Proof avatars overlap direction ── */ .rtl .proof-avatar { margin-left: 0; margin-right: -8px; } .rtl .proof-avatar:first-child { margin-right: 0; } /* ── Hero orbs ── */ .rtl .hero-orb-1 { right: auto; left: -80px; } .rtl .hero-orb-2 { left: auto; right: -100px; } /* ── Hero notification chips ── */ .rtl .hero-notif-1 { right: auto; left: -4px; } .rtl .hero-notif-2 { left: auto; right: -4px; } @media (max-width: 767px) { .rtl .hero-notif-1 { left: 8px; right: auto; } .rtl .hero-notif-2 { right: 8px; left: auto; } } /* ── Solution stepper track line ── */ .rtl .solution-steps::before { left: 12.5%; right: 12.5%; } /* ── Solution step mobile vertical line ── */ @media (max-width: 767px) { .rtl .solution-step:not(:last-child)::after { left: auto; right: 18px; transform: translateX(50%); } } /* ── How It Works number badge (mobile) ── */ @media (max-width: 767px) { .rtl .hiw-number { left: 50%; right: auto; transform: translateX(-50%); } .rtl .hiw-card { padding: 28px 20px 24px; text-align: center; } } @media (max-width: 480px) { .rtl .hiw-card { padding: 24px 16px 20px; } } /* ── Pricing "Coming Soon" badge ── */ .rtl .pricing-soon-badge { margin-left: 0; margin-right: 6px; } /* ── Chat bubbles asymmetric radius ── */ .rtl .cs-chat-bubble--bot .cs-chat-text { border-radius: 12px 4px 12px 12px; } .rtl .cs-chat-bubble--user .cs-chat-text { border-radius: 4px 12px 12px 12px; } /* ── Chat bubble user alignment ── */ .rtl .cs-chat-bubble--user { flex-direction: row-reverse; } .rtl .cs-chat-bubble--bot { flex-direction: row; } /* ── Flow visual (Coming Soon section) ── */ .rtl .cs-flow { flex-direction: row-reverse; } .rtl .cs-flow-arrow { transform: scaleX(-1); } /* ── Workflow attempt dots ── */ .rtl .wf-attempt-dots { padding-left: 0; padding-right: 1px; } .rtl .wf-attempt-dot-label { margin-left: 0; margin-right: 2px; } /* ── Workflow carrier chips ── */ .rtl .wf-carrier { padding: 3px 5px 3px 7px; } /* ── Desktop nav / header actions ── */ .rtl .header-inner { flex-direction: row-reverse; } .rtl .nav-desktop { flex-direction: row-reverse; } .rtl .header-actions { flex-direction: row-reverse; } /* ── Hero layout ── */ .rtl .hero-content { text-align: right; } /* Subtitle is width-constrained — push to the right */ .rtl .hero-subtitle { margin-left: auto; margin-right: 0; } /* Actions row: right-align in both row (desktop) & column (mobile) */ .rtl .hero-actions { justify-content: flex-start; align-items: flex-end; } /* Reverse button order so primary is on the right in RTL row mode */ @media (min-width: 480px) { .rtl .hero-actions { flex-direction: row; } } /* Proof: avatars on the right, text on the left */ .rtl .hero-proof { justify-content: flex-end; flex-direction: row-reverse; } .rtl .hero-proof-text { text-align: right; } /* ── Feature grid cards icon alignment ── */ .rtl .feature-icon { margin-left: auto; margin-right: 0; } /* ── Footer grid ── */ .rtl .footer-brand { text-align: right; } .rtl .footer-links { text-align: right; } /* ── CTA section ── */ .rtl .cta-content { text-align: right; } /* ── Before & After section RTL ── */ /* Do NOT use flex-direction: row-reverse on flex rows — dir="rtl" already auto-reverses flex row to right→left. row-reverse would double-reverse it back to LTR. */ /* Row body text: stat + label right-aligned */ .rtl .bna-row-body { text-align: right; } /* ── Stats bar ── */ .rtl .stats-bar { direction: rtl; } /* ── KPI section ── */ .rtl .kpi-cities-label, .rtl .kpi-city-nm { text-align: right; } .rtl .kpi-city-val { text-align: left; } /* ── Integrations marquee — reverse animation for RTL ── */ .rtl .marquee-track { animation-direction: reverse; } /* ── Language switcher button ── */ .lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font-size: 13px; font-weight: 600; font-family: var(--font-family); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .lang-switch:hover { background: rgba(184, 51, 118, 0.05); border-color: rgba(184, 51, 118, 0.2); } /* ── Mobile nav RTL ── */ .rtl .nav-mobile { text-align: right; } .rtl .nav-mobile-actions { flex-direction: column; } /* ── Workflow section RTL ── */ /* Keep the workflow diagram always LTR (left → right flow) */ .rtl .wf-stage { direction: ltr; } /* Column labels right-aligned */ .rtl .wf-col-label { text-align: right; } /* Source cards: icon on the right */ .rtl .wf-node.wf-source { flex-direction: row-reverse; text-align: right; } /* Action card headers (Phone, WhatsApp) — icon on the right */ .rtl .wf-action-header { flex-direction: row-reverse; } /* Delivery header — icon on the right */ .rtl .wf-delivery-header { flex-direction: row-reverse; } /* Tracking items — icon on the right, text left-aligned visually */ .rtl .wf-track-item { flex-direction: row-reverse; } .rtl .wf-track-text { text-align: right; } /* AI badge: flip from right to left */ .rtl .wf-ai-badge { right: auto; left: 8px; } /* Feedback label: icon on the right */ .rtl .wf-feedback-label { flex-direction: row-reverse; } /* ── Pricing section RTL ── */ /* Card content: default to right-align in Arabic */ .rtl .pricing-card { text-align: right; } /* Keep header & price amount centered (design intent) */ .rtl .pricing-header { text-align: center; } /* Note stays centered under the CTA button */ .rtl .pricing-note { text-align: center; } /* ── General fixes for RTL flex gaps ── */ /* Do NOT add flex-direction: row-reverse here. dir="rtl" on already sets direction:rtl, which auto-reverses flex-direction:row to flow right→left. Adding row-reverse would double-reverse it back to LTR. */ .rtl .pricing-features li, .rtl .cs-card-points li { text-align: right; } .rtl .pricing-features svg, .rtl .cs-card-points svg { margin-top: 2px; } /* ── Process Deep-Dive Section ── */ .rtl .process-card { text-align: right; } .rtl .process-timeline { padding-left: 0; padding-right: 24px; } .rtl .process-timeline::before { left: auto; right: 7px; } .rtl .process-timeline-dot { left: auto; right: -24px; } .rtl .process-timeline-content { padding-left: 0; padding-right: 4px; } .rtl .process-flow { padding-left: 0; padding-right: 24px; } .rtl .process-flow::before { left: auto; right: 7px; } .rtl .process-flow-dot { left: auto; right: -24px; } .rtl .process-flow-content { padding-left: 0; padding-right: 4px; } .rtl .process-divider-icon svg { transform: scaleX(-1); } /* RTL mobile: arrow points downward */ @media (max-width: 767px) { .rtl .process-divider-icon svg { transform: rotate(90deg) scaleX(-1); } } /* ── Prevent FOUC: hide body until i18n is applied ── */ html:not([dir]) body { visibility: visible; }