/* ═══════════════════════════════════════════════════════════ rtl.css — Arabic right-to-left layer for DentGen Included ONLY on Arabic pages (). Keeps the approved design; flips text flow + key alignments. ═══════════════════════════════════════════════════════════ */ [dir="rtl"] body { direction: rtl; text-align: right; } /* Arabic-friendly body font stack (latin display kept for brand/headings) */ [dir="rtl"] body, [dir="rtl"] .lead, [dir="rtl"] p { font-family: "Albert Sans", "Noto Kufi Arabic", "Tajawal", sans-serif; } /* Eyebrow: leading line on the right */ [dir="rtl"] .eyebrow::before { order: 2; } [dir="rtl"] .eyebrow { flex-direction: row; } /* Arrows / chevrons point left in RTL */ [dir="rtl"] .arr, [dir="rtl"] .btn .arr, [dir="rtl"] .feat-link span, [dir="rtl"] .jr-arrow, [dir="rtl"] .back-link svg { display: inline-block; transform: scaleX(-1); } /* Nav: keep centred logo; mirror the two side groups */ [dir="rtl"] nav { direction: rtl; } [dir="rtl"] .nav-side.left { justify-content: flex-start; } [dir="rtl"] .nav-side.right { justify-content: flex-end; } [dir="rtl"] .nav-side a:not(.nav-cta)::after { left: auto; right: 0; } /* Dropdown aligns right */ [dir="rtl"] .drop { left: auto; right: 0; transform: none; } [dir="rtl"] .has-drop:hover .drop { transform: none; } /* Forms: right-aligned, RTL inputs */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } [dir="rtl"] .field label { right: 0; left: auto; } [dir="rtl"] .field-select-arrow { right: auto; left: 0; } /* Footer right-aligned */ [dir="rtl"] .foot-grid, [dir="rtl"] .foot-contact, [dir="rtl"] .foot-bot { direction: rtl; } [dir="rtl"] .socials { direction: ltr; } /* icons stay logical order */ /* Lists / chips keep natural RTL flow */ [dir="rtl"] .why-chips, [dir="rtl"] .chips { direction: rtl; } /* Latin runs (phone numbers, brand, EN labels) render LTR inside RTL text */ [dir="rtl"] .ltr, [dir="rtl"] .logo, [dir="rtl"] .nav-cta { unicode-bidi: isolate; } /* Keep numerals/prices readable */ [dir="rtl"] .tprice, [dir="rtl"] .kv { direction: ltr; display: inline-block; }