/************************************************************ * Kids Path 2 Engineering - RTL overrides for Arabic (ar) * * This file is only linked on Arabic pages (html[dir="rtl"]). * It does NOT touch style.css and has zero effect on the other * 6 languages. Modern flexbox/grid layouts already reverse their * "start/end" direction automatically when dir="rtl" is set on * , so most of the site (nav bar, hero sections, card grids, * button rows, footer columns, forms) mirrors correctly on its * own. The rules below fix the remaining spots that use hardcoded * left/right values instead of logical start/end values. * * Decorative background shapes (blurred blobs, rotated stickers) * are intentionally left as-is - they read as abstract art rather * than directional UI, and professional RTL sites commonly leave * this kind of ornament unmirrored. ************************************************************/ html[dir="rtl"] body { font-family: "Cairo", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] label, html[dir="rtl"] a { font-family: "Cairo", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; } /* ---------- Checklists (✓ icon side) ---------- */ html[dir="rtl"] .check-list li { padding-left: 0; padding-right: 30px; } html[dir="rtl"] .check-list li:before { left: auto; right: 0; } /* ---------- FAQ accordion ---------- */ html[dir="rtl"] .faq-question { text-align: right; } /* ---------- Project stickers (Basic/Standard/Premium badges) ---------- */ html[dir="rtl"] .project-sticker, html[dir="rtl"] .floating-project-visual .project-sticker { text-align: right; } /* ---------- WhatsApp floating button: mirror to the other side ---------- */ html[dir="rtl"] .whatsapp-float { right: auto; left: 22px; } @media (max-width: 640px) { html[dir="rtl"] .whatsapp-float { right: auto; left: 16px; } } /* ---------- Language / activities dropdown caret ---------- */ html[dir="rtl"] .nav-dropdown-toggle span { transform: scaleX(-1); } html[dir="rtl"] .nav-dropdown.is-open > .nav-dropdown-toggle span, html[dir="rtl"] .nav-dropdown:hover > .nav-dropdown-toggle span, html[dir="rtl"] .nav-dropdown:focus-within > .nav-dropdown-toggle span { transform: scaleX(-1) rotate(180deg); } /* ---------- Form fields: right-aligned text, RTL-friendly numerics ---------- */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select, html[dir="rtl"] label { text-align: right; } html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="date"] { direction: ltr; text-align: right; } /* ---------- Timeline / step numbers stay visually left of their text ---------- */ html[dir="rtl"] .timeline, html[dir="rtl"] .pathway-timeline, html[dir="rtl"] .challenge-timeline { direction: rtl; } /* ---------- Practical-info icons and inline SVGs: keep icon glyphs unmirrored ---------- */ html[dir="rtl"] .practical-icon svg, html[dir="rtl"] .nav-cta svg, html[dir="rtl"] .whatsapp-float svg { transform: none; } /* ---------- Quote / blockquote accents ---------- */ html[dir="rtl"] blockquote { border-left: 0; border-right: 3px solid var(--orange, #f05a24); padding-left: 0; padding-right: 18px; } /* ---------- Role selector / radio & checkbox rows: keep the input glued to its label ---------- */ html[dir="rtl"] .role-option, html[dir="rtl"] .check-option, html[dir="rtl"] .privacy-check, html[dir="rtl"] .agreement-row { text-align: right; } /* ---------- Enrollment step arrows ("→") read backwards in RTL: flip them ---------- */ html[dir="rtl"] .enrollment-steps span { display: inline-block; transform: scaleX(-1); } /* ---------- Footer bottom / copyright line ---------- */ html[dir="rtl"] .footer-bottom { text-align: center; } /* ---------- Generic numeric badges (progress %, steps 01/02/03) stay LTR digits ---------- */ html[dir="rtl"] .progress, html[dir="rtl"] .steps span, html[dir="rtl"] .level { direction: ltr; text-align: right; unicode-bidi: isolate; }