/* RTL overrides — applied when (i.e. Arabic).
Strategy: only mirror what truly needs mirroring. Most of the layout is flex/grid
and respects logical properties; we mostly fix specific decorative offsets, icons,
borders that read incorrectly when flipped. */
html[dir="rtl"] body { font-family: "DM Sans", "Tajawal", "Cairo", "Noto Sans Arabic", sans-serif; }
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 { font-family: "Fraunces", "Tajawal", "Cairo", Georgia, serif; }
/* Mirror the green active-link underline on nav so the underline is on the right of Arabic text */
html[dir="rtl"] .nav-links a.active::after { left: auto; right: 0; }
/* Eyebrow and body text alignment */
html[dir="rtl"] .eyebrow { letter-spacing: 0; } /* Latin letterspacing reads strange in Arabic */
html[dir="rtl"] .nav-logo-text em { letter-spacing: 0; }
html[dir="rtl"] .ins-tile { letter-spacing: 0; }
html[dir="rtl"] .pill { letter-spacing: 0; }
/* Breadcrumb arrow flip */
html[dir="rtl"] .breadcrumb .sep { transform: scaleX(-1); display: inline-block; }
/* Lucide arrow icons in CTAs — flip horizontally */
html[dir="rtl"] [data-lucide="arrow-right"],
html[dir="rtl"] .cta svg,
html[dir="rtl"] .btn [data-lucide="arrow-right"] { transform: scaleX(-1); }
/* Service-card meta + bottom-row CTAs — flex direction stays the same; just the
arrow icon flips above. */
/* Sticky-card "How to book" arrow on doctor page */
html[dir="rtl"] .booking-card .btn .ico-sm,
html[dir="rtl"] .sticky-book .btn .ico-sm { transform: scaleX(-1); }
/* Floating WhatsApp — keep on the right (it's a global helper, doesn't need flipping) */
html[dir="rtl"] .floating-whatsapp { right: auto; left: 20px; }
/* Topbar separators — periods and middle-dots already render fine */
/* Cards — borders/shadows are symmetric, no fix needed.
Lists with hanging bullets work fine in RTL via list-style + padding-inline. */
/* Articles: italic Latin deck looks wrong in Arabic, switch to upright */
html[dir="rtl"] .article .deck,
html[dir="rtl"] blockquote { font-style: normal; }
/* Form inputs — direction inherited from html, fine */
/* Numbers stay LTR within Arabic text */
html[dir="rtl"] .topbar-group a [class*="phone"],
html[dir="rtl"] .topbar a,
html[dir="rtl"] .stat .n,
html[dir="rtl"] .hero-proof .big {
direction: ltr;
unicode-bidi: embed;
}
/* The Arabic "switch back to English" link */
html[dir="rtl"] .lang-toggle { direction: ltr; }
/* Right-side sticky aside on doctor and service pages becomes left-side in RTL */
html[dir="rtl"] .sticky-book,
html[dir="rtl"] .booking-card { /* no change needed — sticky uses logical position */ }
/* Hero proof divider line: was on left of subsequent items; flip to right */
html[dir="rtl"] .hero-proof > * + *::before { left: auto; right: 0; }
html[dir="rtl"] .hero-proof > * + * { padding-left: 0; padding-right: var(--s-5); }
@media (max-width: 520px) {
html[dir="rtl"] .hero-proof > * + * { padding-right: var(--s-4); }
}
/* Translation-pending banner */
.aldiyafa-mt-banner {
background: #FFF5E6;
border-left: 4px solid #E29A23;
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
font-family: var(--font-ui);
font-size: .85rem;
color: var(--ink-80);
margin: 0 0 var(--s-5);
display: flex;
align-items: center;
gap: var(--s-3);
}
html[dir="rtl"] .aldiyafa-mt-banner { border-left: 0; border-right: 4px solid #E29A23; }
.aldiyafa-mt-banner strong { color: var(--ink); }