/* ===================================================================== * RTL Stylesheet for Arabic (LANGUAGE_CODE == 'ar') * --------------------------------------------------------------------- * Loaded ONLY when . Mirrors physical CSS properties * (margin-left ↔ margin-right, padding-left ↔ padding-right, float-left * ↔ float-right, text-align, etc.) for the most common UI components. * * Strategy: target [dir="rtl"] selectors so that this stylesheet is * a pure additive override on top of styles.css. No risk to LTR * languages because dir="rtl" is only set for Arabic in base.html. * =====================================================================*/ /* ---------- 1. Bootstrap utility flips ---------- */ [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } [dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } [dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; } [dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } [dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; } [dir="rtl"] .pe-1 { padding-left: 0.25rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; } [dir="rtl"] .ps-1 { padding-right: 0.25rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; } /* ---------- 2. Header / nav ---------- */ [dir="rtl"] .header-inner { flex-direction: row-reverse; } [dir="rtl"] .navigation { padding-right: 0; } [dir="rtl"] .navigation li { margin-left: 0; margin-right: 30px; } [dir="rtl"] .navigation li:first-child { margin-right: 0; } [dir="rtl"] .header-right { flex-direction: row-reverse; } [dir="rtl"] .navigation .has-children > .sub-menu { transform: translateX(50%); right: 50%; left: auto; } [dir="rtl"] .ciao-nav-ext-icon { transform: scaleX(-1); } /* ---------- 3. Top bar (language switcher) ---------- */ [dir="rtl"] .top-bar-inner { flex-direction: row-reverse; } [dir="rtl"] .lang-switcher { margin-left: 0; margin-right: 16px; } /* ---------- 4. Hero / search form ---------- */ [dir="rtl"] .hero-search-form { direction: rtl; } [dir="rtl"] .hero-search-form .form-group { text-align: right; } [dir="rtl"] .hero-search-form input, [dir="rtl"] .hero-search-form select { text-align: right; padding-right: 16px; padding-left: 40px; } [dir="rtl"] .form-group label { text-align: right; } [dir="rtl"] .form-control { text-align: right; } /* Latin-only inputs (name, lastname, email, phone, flight) keep LTR for RentHub compatibility */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input.input-latin-only { direction: ltr !important; text-align: left !important; } /* ---------- 5. Booking page layout ---------- */ [dir="rtl"] .bk-header-back { transform: scaleX(-1); } [dir="rtl"] .bk-header-back svg { transform: scaleX(-1); } [dir="rtl"] .bk-steps { flex-direction: row-reverse; } [dir="rtl"] .bk-summary-panel { float: left; margin-right: 0; margin-left: 24px; } [dir="rtl"] .bk-form-panel { float: right; margin-left: 0; margin-right: 0; } [dir="rtl"] .bk-info-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .bk-info-item svg { margin-right: 0; margin-left: 8px; } [dir="rtl"] .bk-card { text-align: right; } [dir="rtl"] .bk-detail-row { flex-direction: row-reverse; } [dir="rtl"] .bk-ins-radio { margin-right: 0; margin-left: 12px; } [dir="rtl"] .bk-qty-selector { flex-direction: row-reverse; } [dir="rtl"] .bk-extra-item { flex-direction: row-reverse; } [dir="rtl"] .bk-privacy { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .bk-privacy input[type="checkbox"] { margin-right: 0; margin-left: 12px; } [dir="rtl"] .bk-submit-secure { flex-direction: row-reverse; } /* ---------- 6. Listing (vehicle results) ---------- */ [dir="rtl"] .lr-card { text-align: right; } [dir="rtl"] .lr-filter-section { text-align: right; } [dir="rtl"] .lr-card-features li { padding-right: 24px; padding-left: 0; } [dir="rtl"] .lr-card-features li::before { right: 0; left: auto; } /* ---------- 7. Footer ---------- */ [dir="rtl"] .ciao-footer-grid { direction: rtl; } [dir="rtl"] .ciao-footer-col { text-align: right; } [dir="rtl"] .ciao-footer-col ul li { padding-right: 0; padding-left: 0; } [dir="rtl"] .ciao-footer-bottom { flex-direction: row-reverse; } /* ---------- 8. Modals (auth, gestisci, recensioni) ---------- */ [dir="rtl"] .modal-content { text-align: right; } [dir="rtl"] .modal-header { flex-direction: row-reverse; } [dir="rtl"] .modal-header .btn-close { margin-right: auto; margin-left: 0; } [dir="rtl"] .gestisci-result-row { flex-direction: row-reverse; } [dir="rtl"] .gestisci-result-header { flex-direction: row-reverse; } [dir="rtl"] .gestisci-result-total { flex-direction: row-reverse; } [dir="rtl"] .gestisci-back-btn { text-align: right; } /* ---------- 9. Cookie banner ---------- */ [dir="rtl"] .cookie-banner-content { text-align: right; } [dir="rtl"] .cookie-banner-buttons { flex-direction: row-reverse; } /* ---------- 10. Mobile menu offcanvas ---------- */ [dir="rtl"] .mobile-nav-wrap { right: auto; left: 0; } [dir="rtl"] .item-menu-mobile { text-align: right; padding-right: 16px; padding-left: 0; } /* ---------- 11. Profile dropdown ---------- */ [dir="rtl"] .ciao-profile-btn { flex-direction: row-reverse; } [dir="rtl"] .ciao-profile-menu { right: auto; left: 0; } [dir="rtl"] .ciao-profile-menu-item { flex-direction: row-reverse; text-align: right; } /* ---------- 12. Numbers / prices stay LTR (Western numerals) ---------- */ [dir="rtl"] .price-val, [dir="rtl"] .gestisci-result-total-val, [dir="rtl"] .bk-total-display, [dir="rtl"] [class*="price"] { direction: ltr; unicode-bidi: bidi-override; } /* ---------- 13. Icon flips ---------- */ [dir="rtl"] .icon-CaretRight, [dir="rtl"] .icon-arrow-right, [dir="rtl"] [class*="chevron-right"] { transform: scaleX(-1); } [dir="rtl"] .lang-flag { margin-left: 6px; margin-right: 0; } /* ---------- 14. Form latin-only hint banner (booking page) ---------- */ .bk-latin-hint { background: #fff8e6; border: 1px solid #ffd864; color: #8a6300; font-size: 13px; line-height: 1.4; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } [dir="rtl"] .bk-latin-hint { flex-direction: row-reverse; text-align: right; } .bk-latin-hint svg { flex-shrink: 0; } /* ---------- 15. Cairo font weight tuning (Cairo runs heavier than Figtree) ---------- */ [dir="rtl"] body { font-weight: 400; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-weight: 700; letter-spacing: 0; } [dir="rtl"] strong, [dir="rtl"] b { font-weight: 700; }