/* rtl.css — Shared structural RTL overrides for Arabic + Urdu Loaded when dir="rtl" is set on . Contains ONLY layout flips — no fonts, no sizes. ================================================================ */ /* Prevent horizontal overflow caused by RTL element bleed */ html[dir="rtl"] body { overflow-x: hidden; } /* ── HEADER ── */ /* Dropdown item: flip indicator dot + padding */ html[dir="rtl"] .pf-nav-dd__item { padding-left: 10px; padding-right: 28px; } html[dir="rtl"] .pf-nav-dd__item::before { left: auto; right: 12px; } /* Hover/focus left-border accent → right */ html[dir="rtl"] .pf-nav-dd__item:hover, html[dir="rtl"] .pf-nav-dd__item:focus-visible { box-shadow: inset -3px 0 0 rgba(37,150,190,0.95), inset 0 0 0 1px rgba(37,150,190,0.26); } /* Breadcrumb home icon margin */ html[dir="rtl"] .pf-bc-list::before { margin-right: 0; margin-left: 10px; } /* Breadcrumb separator chevron → mirror */ html[dir="rtl"] .pf-bc-item:not(:last-child)::after { transform: scaleX(-1); } /* Search divider: left border → right */ html[dir="rtl"] .pf-hdr__search { border-left: none; border-right: 1px solid rgba(255,255,255,0.06); } /* Language dropdown item padding */ html[dir="rtl"] .pf-lang-dd__item { padding-left: 10px; padding-right: 16px; } /* Active language indicator → right side */ html[dir="rtl"] .pf-lang-dd__item--active { box-shadow: inset -3px 0 0 var(--pf-primary); } /* ── FOOTER ── */ /* Footer link hover slide → right padding */ html[dir="rtl"] .pf-link-list a:hover { padding-left: 10px; padding-right: 14px; } /* CTA arrow → flip direction */ html[dir="rtl"] .pf-card-cta::after { content: "\2190"; /* ← */ } html[dir="rtl"] .pf-card-cta:hover::after { transform: translateX(-3px); } /* Footer languages: align start */ html[dir="rtl"] .pf-ftr-langs { flex-direction: row-reverse; } /* ── DIRECTORY CARDS ── */ /* Text alignment for card content */ html[dir="rtl"] .name, html[dir="rtl"] .meta, html[dir="rtl"] .kpi .t { text-align: right; } /* ── COMPARISON PAGES ── */ /* Scroll container MUST stay LTR so scroll origin is on the left and the scrollbar / trackpad / arrow keys work naturally. ONLY the scroller — the wrap and everything else stays RTL. */ html[dir="rtl"] .pf-compare-scroller { direction: ltr; } /* Table content inside scroller is RTL — metric-label column on the right */ html[dir="rtl"] .pf-compare-table { direction: rtl; } html[dir="rtl"] .pf-compare-metric-cell { text-align: right; } html[dir="rtl"] .pf-compare-table td { text-align: right; } /* Section headings + titles stay centered */ html[dir="rtl"] .pf-compare-title, html[dir="rtl"] .pf-compare-sub, html[dir="rtl"] .pf-compare-section-heading, html[dir="rtl"] .pf-compare-firm-header { text-align: center; } /* Sticky scrollbar stays LTR (natural scroll direction) */ html[dir="rtl"] .pf-compare-sticky-scrollbar, html[dir="rtl"] .pf-compare-sticky-scrollbar * { direction: ltr; } /* ── GUIDE PAGES ── */ html[dir="rtl"] .pf-guide-section-title, html[dir="rtl"] .pf-guide-section-sub { text-align: right; } /* Guide hero sections — centered */ html[dir="rtl"] .pf-compare-hero, html[dir="rtl"] .pf-guide-hero, html[dir="rtl"] .pf-guide-hero--directory { text-align: center; } /* ── FAQ PAGES ── */ html[dir="rtl"] .pf-faq-q { text-align: right; } html[dir="rtl"] .pf-faq-a, html[dir="rtl"] .pf-faq-a p { text-align: right; } /* ── HOMEPAGE — keep centered (matches English) ── */ html[dir="rtl"] body.home .pf-shell, html[dir="rtl"] body.home .pf-shell * { text-align: center; } /* ── GEO TOAST ── */ html[dir="rtl"] .pf-geo-toast { right: auto; left: 24px; } html[dir="rtl"] .pf-geo-toast__close { right: auto; left: 12px; } html[dir="rtl"] .pf-geo-toast__header { padding-right: 0; padding-left: 28px; } html[dir="rtl"] .pf-geo-toast__lang-en { margin-left: 0; margin-right: 6px; } /* ── COOKIE BANNER ── */ html[dir="rtl"] .pf-cookie-banner__inner { flex-direction: row-reverse; } /* ── MOBILE OVERRIDES ── */ @media (max-width: 980px) { /* Drawer opens from left on RTL */ html[dir="rtl"] .pf-nav-dd__menu { right: auto !important; left: 0 !important; transform: translateX(-105%) !important; border-radius: 0 24px 24px 0 !important; } html[dir="rtl"] .pf-nav-dd.is-open .pf-nav-dd__menu, html[dir="rtl"] .pf-nav-dd:focus-within .pf-nav-dd__menu { transform: translateX(0) !important; } /* Drawer header strip */ html[dir="rtl"] .pf-nav-dd__menu::before { right: auto; left: 0; width: var(--pf-mobile-drawer-w); border-radius: 0 24px 0 0; } /* Close button flips */ html[dir="rtl"] .pf-dd-close { right: auto; left: 12px; } /* Drawer items flip padding */ html[dir="rtl"] .pf-nav-dd__item { padding-left: 14px; padding-right: 42px; } html[dir="rtl"] .pf-nav-dd__item::before { left: auto; right: 16px; } /* Active accent border flips */ html[dir="rtl"] .pf-nav-dd__item:hover, html[dir="rtl"] .pf-nav-dd__item:focus-visible, html[dir="rtl"] .pf-nav-dd__item:active { box-shadow: inset -4px 0 0 rgba(37,150,190,0.95), 0 4px 16px rgba(0,0,0,0.2); } /* Breadcrumb fade → flip */ html[dir="rtl"] .pf-hdr__crumbs::after { right: auto; left: 0; background: linear-gradient(270deg, transparent, rgba(15,23,42,0.9)); } html[dir="rtl"] .pf-bc-list { padding-right: 0; padding-left: 20px; } /* Scroll fade at bottom of drawer */ html[dir="rtl"] .pf-nav-dd__menu-fade { right: auto; left: 0; border-radius: 0 0 24px 0; } /* Nav aligns end in RTL */ html[dir="rtl"] .pf-hdr__nav { justify-content: flex-end; } } @media (max-width: 520px) { html[dir="rtl"] .pf-bc-list::before { margin-right: 0; margin-left: 8px; } html[dir="rtl"] .pf-geo-toast { left: 12px; right: 12px; } } @media (max-width: 768px) { html[dir="rtl"] .pf-ftr-langs { flex-direction: column; align-items: flex-end; } }