/* ============================================================================ rtl.css — Right-to-left + Arabic overrides for /ae/ and /sa/ Loaded AFTER ../stile.css on pages with . Only directional properties are flipped; colours/spacing scale are inherited. ========================================================================== */ /* Arabic type family (IBM Plex Sans Arabic matches the Latin IBM Plex family). Mono keeps IBM Plex Mono for Western-digit figures, with an Arabic fallback so the dirham mark (د.إ) still renders. */ [dir="rtl"] { --f-body: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, sans-serif; --f-display: "IBM Plex Sans Arabic", "Space Grotesk", system-ui, sans-serif; --f-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "SFMono-Regular", monospace; } [dir="rtl"] body { text-align: right; } /* Keep genuinely bidi-neutral runs (numbers, code, currency) left-to-right */ [dir="rtl"] .receipt__val, [dir="rtl"] .cronologia__amounts, [dir="rtl"] code, [dir="rtl"] .mail { unicode-bidi: plaintext; } /* --- Prose lists ---------------------------------------------------------- */ [dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.3em; } /* --- Callouts (accent bar) ------------------------------------------------ */ [dir="rtl"] .callout { border-left: 0; border-right: 4px solid var(--brand); } [dir="rtl"] .callout--iva { border-right-color: var(--iva); } /* --- Trust pills (leading dot) -------------------------------------------- */ [dir="rtl"] .trust li { padding: 7px 30px 7px 12px; } [dir="rtl"] .trust li::before { left: auto; right: 12px; } /* --- Data & prose tables -------------------------------------------------- */ [dir="rtl"] table.data caption { text-align: right; } [dir="rtl"] table.data th:first-child, [dir="rtl"] table.data td:first-child { text-align: right; } [dir="rtl"] .prose th, [dir="rtl"] .prose td { text-align: right; } /* --- Numbered steps (counter badge) --------------------------------------- */ [dir="rtl"] .steps li { padding: 18px 62px 18px 20px; } [dir="rtl"] .steps li::before { left: auto; right: 18px; } /* --- FAQ disclosure (+/- marker) ------------------------------------------ */ [dir="rtl"] .faq summary { padding: 18px 20px 18px 52px; } [dir="rtl"] .faq summary::after { right: auto; left: 20px; } /* --- Breadcrumb separator (mirror the chevron) ---------------------------- */ [dir="rtl"] .crumbs li::after { content: "\2039"; margin-left: 0; margin-right: 6px; } /* --- Calculator ----------------------------------------------------------- */ [dir="rtl"] .calc__mode { text-align: right; } [dir="rtl"] .calc__cur { padding: 0 16px 0 4px; } /* --- Pull-quote (opening mark) -------------------------------------------- */ [dir="rtl"] .prose blockquote { padding-left: 0; padding-right: 16px; } [dir="rtl"] .prose blockquote::before { left: auto; right: -2px; } /* --- Skip link ------------------------------------------------------------ */ [dir="rtl"] .skip-link { left: auto; right: -9999px; border-radius: 0 0 0 8px; } [dir="rtl"] .skip-link:focus { left: auto; right: 0; }