/* ============================================================ Arabic / RTL overrides for the Command theme. Loaded only when app locale is "ar" (dir="rtl" on ). ============================================================ */ /* Audiowide (headings) has no Arabic glyphs — use Cairo everywhere. */ html[dir="rtl"] body.cmd-dark, html[dir="rtl"] .cmd, html[dir="rtl"] .cmd h1, html[dir="rtl"] .cmd h2, html[dir="rtl"] .cmd h3, html[dir="rtl"] .cmd h4, html[dir="rtl"] .cmd .head, html[dir="rtl"] body.cmd-dark h1, html[dir="rtl"] body.cmd-dark h2, html[dir="rtl"] body.cmd-dark h3, html[dir="rtl"] body.cmd-dark h4, html[dir="rtl"] .cmd .eyebrow, html[dir="rtl"] .cmd .btn, html[dir="rtl"] .cmd .hero .motto, html[dir="rtl"] .cmd .hero .stats .n, html[dir="rtl"] .cmd .trust .item, html[dir="rtl"] .cmd .svc .inc-label, html[dir="rtl"] .cmd .why-card .num, html[dir="rtl"] .cmd .loc, html[dir="rtl"] .cmd-footer, html[dir="rtl"] .cmd-footer .foot h5, html[dir="rtl"] .cmd-footer .foot-bottom .motto, html[dir="rtl"] .cmd-drawer ul a, html[dir="rtl"] .cmd-topbar { font-family: 'Cairo', system-ui, 'Segoe UI', Tahoma, sans-serif; } /* Arabic reads better with a touch more line-height + no forced letter-spacing. */ html[dir="rtl"] .cmd h1, html[dir="rtl"] .cmd h2, html[dir="rtl"] .cmd h3, html[dir="rtl"] .cmd h4, html[dir="rtl"] .cmd .eyebrow, html[dir="rtl"] .cmd .hero .motto, html[dir="rtl"] .cmd .trust .item, html[dir="rtl"] .cmd .btn { letter-spacing: 0; } html[dir="rtl"] .cmd h1 { line-height: 1.3; } /* Accent left-border on value cards → right side. */ html[dir="rtl"] .cmd .value { border-left: 1px solid rgba(202,209,207,.07); border-right: 3px solid var(--red); } /* Nav underline animation anchor. */ html[dir="rtl"] .cmd-header .nav ul a::after { left: auto; right: 0; } /* Service top accent bar grows from the right. */ html[dir="rtl"] .cmd .svc::after { left: auto; right: 0; } /* Decorative glow corner. */ html[dir="rtl"] .cmd .vm-card::before { right: auto; left: -30px; } /* Floating WhatsApp button to the left in RTL. */ html[dir="rtl"] .cmd-wa { right: auto; left: 22px; } /* Button shine sweep direction. */ html[dir="rtl"] .cmd .btn::after { left: auto; right: -120%; transform: skewX(20deg); } html[dir="rtl"] .cmd .btn:hover::after { left: auto; right: 140%; } /* Drawer slides from the right edge in RTL (mirror of LTR). */ html[dir="rtl"] .cmd-drawer .close { right: auto; left: 28px; }