/* RTL support for Arabic locale. Loaded only when (see Layout.astro). Strategy: flip the major layout primitives that Bootstrap/jQuery plugins don't auto-mirror. Site-wide horizontal flow already follows dir attribute in modern browsers — these rules cover the legacy float/text-align/transform patterns used by style21.css and the carousel plugins. */ html[dir="rtl"] body { text-align: right; } /* Bootstrap floats */ html[dir="rtl"] .pull-left, html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .pull-right, html[dir="rtl"] .float-right { float: left !important; } /* Bootstrap column ordering: text alignment */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* Navigation: keep menu items right-to-left */ html[dir="rtl"] .mainmenu ul#nav { direction: rtl; } html[dir="rtl"] .mainmenu ul#nav > li { float: right; } html[dir="rtl"] .mainmenu ul#nav li ul.sub-menu { left: auto; right: 0; text-align: right; } /* Language switcher dropdown */ html[dir="rtl"] .language_area .dropdown-menu { left: auto; right: 0; text-align: right; } html[dir="rtl"] .language_area .dropdown-menu img { margin-right: 0; margin-left: 6px; } /* Logo area keep LTR for brand */ html[dir="rtl"] .logo_area { direction: ltr; text-align: left; } /* Carousel arrows */ html[dir="rtl"] .owl-nav .owl-prev, html[dir="rtl"] .owl-nav .owl-next { transform: scaleX(-1); } html[dir="rtl"] .slick-prev { right: auto; left: 25px; } html[dir="rtl"] .slick-next { left: auto; right: 25px; } /* Owl dots — center, already symmetric, no flip needed */ /* Headers and breadcrumbs */ html[dir="rtl"] .breadcrumb { text-align: right; } html[dir="rtl"] .breadcrumb > li + li::before { content: "\\\\"; padding: 0 5px; } /* Tables keep numeric columns aligned */ html[dir="rtl"] table { direction: rtl; } html[dir="rtl"] table th, html[dir="rtl"] table td { text-align: right; } html[dir="rtl"] table th:first-child, html[dir="rtl"] table td:first-child { text-align: right; } /* List bullets to right side */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 40px; padding-left: 0; } /* Footer */ html[dir="rtl"] footer { text-align: right; } html[dir="rtl"] .footer-area .social-icons { text-align: right; } /* Form inputs */ html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] textarea { text-align: right; direction: rtl; } /* Arabic font fallback chain */ html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] li { font-family: "Noto Sans Arabic", "Tahoma", "Geeza Pro", "Arial", sans-serif; } /* Brand wordmark + reservation iframe stays LTR */ html[dir="rtl"] iframe { direction: ltr; } html[dir="rtl"] .p-serif { font-family: "Noto Sans Arabic", "Tahoma", serif; }