/* RTL overrides — loaded only when dir="rtl" is active (Arabic language) */ /* ---------------------------------------------------------------- Global ---------------------------------------------------------------- */ [dir="rtl"] body { text-align: right; } /* Breadcrumbs: reverse flow + RTL separator */ [dir="rtl"] .breadcrumb-container .breadcrumb-link { direction: rtl; justify-content: flex-start; width: 100%; } [dir="rtl"] .breadcrumb-container { text-align: right; } /* In RTL, put separator AFTER each crumb (except last) */ [dir="rtl"] .breadcrumb-container .breadcrumb-link .item + .item::before { content: ""; display: none; } [dir="rtl"] .breadcrumb-container .breadcrumb-link .item:not(:last-child)::after { content: "‹"; display: inline-block; margin: 0 10px; color: #055; } /* ---------------------------------------------------------------- Arabic typography — enforce same font across pages in RTL (DM Sans is latin-focused and may override in many components) ---------------------------------------------------------------- */ [dir="rtl"] body, [dir="rtl"] body *:not(svg):not(path):not(.material-icons):not(.fa):not(i):not([class^="fa-"]):not([class*=" fa-"]) { font-family: 'Changa', sans-serif !important; } /* Keep icon fonts intact */ [dir="rtl"] .material-icons { font-family: 'Material Icons' !important; } /* ---------------------------------------------------------------- Language switcher (nav-bar) ---------------------------------------------------------------- */ [dir="rtl"] .lang-switcher .dropdown-menu { left: auto; right: 0; } /* ---------------------------------------------------------------- Back-arrow icons — flip the SVG to point right-to-left ---------------------------------------------------------------- */ [dir="rtl"] .left-icon-back svg, [dir="rtl"] .icon-back svg, [dir="rtl"] .icon-back-rdv svg { transform: scaleX(-1); } /* ---------------------------------------------------------------- Custom navbar layout direction: rtl inherited from already reverses the flex row, so logo moves right and menu moves left naturally. No flex-direction override needed here. ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- Intro / homepage search bar ---------------------------------------------------------------- */ [dir="rtl"] .intro .container .search-bar-left .desktop-search-form .search-bar #searchInput { padding-right: 10px; padding-left: 21px; border-right: none; border-left: 2px solid #D9D9D9; } [dir="rtl"] .intro .container .search-bar-left .desktop-search-form .search-bar .icon.city { padding-right: 15px; padding-left: 0; } [dir="rtl"] .intro .container .search-bar-left .desktop-search-form .search-bar .icon.recherche { padding-right: 20px; padding-left: 0; } [dir="rtl"] .intro .container .search-bar-left .mobile-search-form .header-top-form svg { left: auto; right: 10px; } [dir="rtl"] .intro .container .search-bar-left .mobile-search-form .search-bar-container .search-bar .icon { left: auto; right: 35px; margin-right: 0 !important; margin-left: unset; } [dir="rtl"] .intro .container .search-bar-left .mobile-search-form .search-bar-container .btn-location { text-align: right; } /* ---------------------------------------------------------------- List search page (desktop_recherche) ---------------------------------------------------------------- */ [dir="rtl"] .list-search .search-bar-wrapper .search-bar-container .search-bar .icon, [dir="rtl"] .list-search .search-bar-wrapper .search-bar-container .search-bar .fa-searchicon { margin-right: 0 !important; margin-left: unset; } [dir="rtl"] .list-search .left-icon-back { margin-left: 12px; margin-right: 0; } [dir="rtl"] .desktop_recherche .container-result .intro-list h1, [dir="rtl"] .desktop_recherche .container-result .intro-list h2, [dir="rtl"] .desktop_recherche .container-result .intro-list h3, [dir="rtl"] .desktop_recherche .container-result .intro-list p { text-align: right; } /* ---------------------------------------------------------------- Search/Detail calendar (next availability) — RTL layout fixes ---------------------------------------------------------------- */ [dir="rtl"] .dentist-calendar .header-calendar { direction: ltr; /* avoid RTL affecting flex start/end */ flex-direction: row-reverse !important; } [dir="rtl"] .dentist-calendar .header-calendar .dentist-calendar-title { direction: rtl; text-align: right; } /* Match high-specificity desktop search styles (style.css) */ [dir="rtl"] .desktop_recherche .container-result .dentist-calendar .header-calendar { direction: ltr; /* avoid RTL affecting flex start/end */ flex-direction: row-reverse !important; } [dir="rtl"] .desktop_recherche .container-result .dentist-calendar .header-calendar .dentist-calendar-title { direction: rtl; text-align: right; } /* Flip nav arrows to match RTL direction */ [dir="rtl"] .dentist-calendar .header-calendar .previous-calander svg, [dir="rtl"] .dentist-calendar .header-calendar .next-calander svg { transform: scaleX(-1); } /* Search page calendar header: keep arrow SVGs non-mirrored (user expectation) */ [dir="rtl"] .desktop_recherche .container-result .dentist-calendar .header-calendar .carousel-nav .previous-calander svg, [dir="rtl"] .desktop_recherche .container-result .dentist-calendar .header-calendar .carousel-nav .next-calander svg { transform: none !important; } /* Ensure "from" label reads correctly in Arabic */ [dir="rtl"] .grid-day .date-box span { direction: rtl; } /* ---------------------------------------------------------------- Detail page carousel nav (title + arrows + calendar) — RTL fixes ---------------------------------------------------------------- */ [dir="rtl"] .container-detail .row-detail .carousel-nav { flex-direction: row-reverse; } [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav { flex-direction: row-reverse; } [dir="rtl"] .container-detail .row-detail .carousel-nav .content-btn-rev .dentist-calendar-title { padding-left: 0; padding-right: 5px; text-align: right; } /* Flip arrows so previous points right, next points left */ [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav .previous-calander svg, [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav .next-calander svg { transform: scaleX(-1); transform-origin: center; display: inline-block; } /* Detail page — booking calendar week navigation (desktop header-calendar) */ [dir="rtl"] .container-detail .detail-rendev .header-calendar .carousel-nav { direction: ltr; /* keep arrows cluster consistent */ } [dir="rtl"] .container-detail .detail-rendev .header-calendar .carousel-nav .content-nav { direction: ltr; } [dir="rtl"] .container-detail .detail-rendev .header-calendar .carousel-nav .previous-calander, [dir="rtl"] .container-detail .detail-rendev .header-calendar .carousel-nav .next-calander { direction: rtl; /* label reads RTL */ } [dir="rtl"] .container-detail .detail-rendev .header-calendar .carousel-nav .previous-calander svg, [dir="rtl"] .container-detail .detail-rendev .header-calendar .carousel-nav .next-calander svg { transform: scaleX(-1); transform-origin: center; display: inline-block; } /* Inside prev/next buttons: keep icon on the LEFT, text on the RIGHT */ [dir="rtl"] .container-detail .row-detail .content-nav .previous-calander, [dir="rtl"] .container-detail .row-detail .content-nav .next-calander, [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav .previous-calander, [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav .next-calander { display: inline-flex; align-items: center; gap: 6px; direction: rtl; /* text direction */ } [dir="rtl"] .container-detail .row-detail .content-nav .previous-calander span, [dir="rtl"] .container-detail .row-detail .content-nav .next-calander span, [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav .previous-calander span, [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav .next-calander span { text-align: right; } /* `previous-calander` DOM is (svg, span) → icon already on the left */ [dir="rtl"] .container-detail .row-detail .content-nav .previous-calander, [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav .previous-calander { flex-direction: row; } /* `next-calander` DOM is (span, svg) → reverse to get (svg, span) visually */ [dir="rtl"] .container-detail .row-detail .content-nav .next-calander, [dir="rtl"] .container-detail .row-detail .carousel-nav .content-nav .next-calander { flex-direction: row-reverse; } /* ---------------------------------------------------------------- Doctor info section (homepage) ---------------------------------------------------------------- */ [dir="rtl"] .doctor-info__content { padding: 20px 31px 20px 0px; } [dir="rtl"] .doctor-info__list li { padding-right: 36px; padding-left: 0; } [dir="rtl"] .doctor-info__list > li::before { right: 0; left: auto; transform: scaleX(-1); } [dir="rtl"] .doctor-info__list > li ul li { padding-right: 20px; padding-left: 0; } [dir="rtl"] .doctor-info__list > li ul li::before { right: 0; left: auto; } /* ---------------------------------------------------------------- Confidentiality section ---------------------------------------------------------------- */ [dir="rtl"] .confidentiality-section .confidentiality-content { text-align: right; padding-right: 12px; padding-left: 0; } @media (max-width: 700px) { [dir="rtl"] .confidentiality-section .confidentiality-content { text-align: right; padding-right: 20px; padding-left: 0; } } /* ---------------------------------------------------------------- Top villes section ---------------------------------------------------------------- */ [dir="rtl"] .top-villes-section .top-villes-list { text-align: right; align-items: flex-end; } /* ---------------------------------------------------------------- Detail page — icon-back (mobile) ---------------------------------------------------------------- */ [dir="rtl"] .body-detail .container-detail .row-detail .detail-rendev .headerrdvMobile .icon-back-rdv { right: 14px; left: auto; } [dir="rtl"] .login-page.mobile-only .login-identification .icon-back { right: 16px; left: auto; } [dir="rtl"] .container-detail .row-detail .profile-detail .profile-card .content-profile .profile-details { padding-right: 12px !important; padding-left: 0 !important; } /* ---------------------------------------------------------------- Detail page — tabs text alignment ---------------------------------------------------------------- */ [dir="rtl"] .container-detail .row-tabs .tab-content .tab-pane, [dir="rtl"] .container-detail .row-tabs .nav-tabs { text-align: right; } /* Detail page — custom tabs nav (ul/li) */ [dir="rtl"] .container-detail .row-tabs nav.tabs ul { display: flex; direction: rtl; /* make the start on the right */ flex-direction: row; /* keep DOM order */ justify-content: flex-start; text-align: right; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } [dir="rtl"] .container-detail .row-tabs nav.tabs ul li { text-align: right; scroll-snap-align: start; } /* Detail page — section titles/labels alignment */ [dir="rtl"] .container-detail .row-tabs .title-sm, [dir="rtl"] .container-detail .row-tabs .location-title, [dir="rtl"] .container-detail .row-tabs .info p { text-align: right; } /* ---------------------------------------------------------------- Schedule / horaires (pro profile editor) ---------------------------------------------------------------- */ [dir="rtl"] .dispo-main .schedule-grid.head-checkbox { padding-right: 240px; padding-left: 0; } @media (max-width: 512px) { [dir="rtl"] .dispo-main .schedule-grid.head-checkbox { padding-right: 137px; padding-left: 0; } } [dir="rtl"] .info-section .horaire-travail .schedule-grid.addopen .apresmidi { padding-right: 60px; padding-left: 0; } [dir="rtl"] .info-section .horaire-travail .schedule-grid.addopen .apresmidi::before { right: 0; left: auto; border-right: 2px dotted #e0e0e0; border-left: none; } @media (max-width: 992px) { [dir="rtl"] .info-section .horaire-travail .schedule-grid.addopen .apresmidi { padding-right: 82px; padding-left: 0; } } @media (max-width: 512px) { [dir="rtl"] .info-section .horaire-travail .schedule-grid.addopen .apresmidi { padding-right: 12px; padding-left: 0; } } /* ---------------------------------------------------------------- Patient account / register page ---------------------------------------------------------------- */ [dir="rtl"] .compte-patient .terms-section .checkbox-container { padding-right: 27px; padding-left: 0; } [dir="rtl"] .compte-patient .terms-section .checkbox-container .checkmark { right: 0; left: auto; } /* ---------------------------------------------------------------- CMS page content ---------------------------------------------------------------- */ [dir="rtl"] .cms-page-content ul { margin-right: 20px; margin-left: 0; padding-right: 20px; padding-left: 0; } /* ---------------------------------------------------------------- Section doctor (static pages) ---------------------------------------------------------------- */ [dir="rtl"] .section-doctor h1, [dir="rtl"] .section-doctor h2, [dir="rtl"] .section-doctor h3, [dir="rtl"] .section-doctor .title-why-us { text-align: right; } /* ---------------------------------------------------------------- Search result cards — text alignment ---------------------------------------------------------------- */ [dir="rtl"] .dentist-content .dentist-details, [dir="rtl"] .dentist-content .dentist-name, [dir="rtl"] .dentist-content .dentist-speciality, [dir="rtl"] .dentist-content .dentist-address { text-align: right; } /* ---------------------------------------------------------------- Footer ---------------------------------------------------------------- */ [dir="rtl"] footer .footer-content { text-align: right; } [dir="rtl"] footer .footer-links ul { padding-right: 0; padding-left: 0; text-align: right; } /* ---------------------------------------------------------------- Bootstrap float helpers — override float: left in RTL ---------------------------------------------------------------- */ [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .float-right { float: left !important; } [dir="rtl"] .text-left { text-align: right !important; } /* ---------------------------------------------------------------- RDV modal / add_rdv ---------------------------------------------------------------- */ [dir="rtl"] #add_rdv .modal-header .modal-title .icon { margin-left: 0; margin-right: 5px; } /* ---------------------------------------------------------------- Mobile menu ---------------------------------------------------------------- */ [dir="rtl"] .mobile-menu { text-align: right; } [dir="rtl"] .mobile-menu .menu-item a { text-align: right; } /* ================================================================ RDV Pro page (menu-list + rdv-pro-section) ================================================================ */ /* Menu-list header nav: keep links on the RIGHT in RTL */ [dir="rtl"] .rdv-pro-section .rdv-pro-container header { justify-content: flex-start; } /* Nav links: align icon+label consistently in RTL */ [dir="rtl"] .rdv-pro-section .rdv-pro-container header .nav-link { display: flex; align-items: center; flex-direction: row-reverse; /* keep icon close to label in RTL */ gap: 6px; } [dir="rtl"] .rdv-pro-section .rdv-pro-container header .nav-link .material-icons { display: inline-flex; align-items: center; } [dir="rtl"] .rdv-pro-section .rdv-pro-container header .nav-link svg { margin: 0; } /* "Ajouter un RDV" button — remove absolute so it sits naturally as the last flex item in RTL flow = far LEFT */ [dir="rtl"] .rdv-pro-section .rdv-pro-container .tabs .btn-info { position: static; margin-inline-start: auto; } /* Table cells */ [dir="rtl"] .rdv-pro-section .rdv-pro-container th, [dir="rtl"] .rdv-pro-section .rdv-pro-container td { text-align: right; } /* Search bar: move icon to right, swap input padding */ [dir="rtl"] .rdv-pro-section .rdv-pro-container .search-bar .material-icons { left: auto; right: 1rem; } [dir="rtl"] .rdv-pro-section .rdv-pro-container .search-bar input { padding: 0.75rem 3rem 0.75rem 1rem; } /* Date filter icon alignment */ [dir="rtl"] .rdv-pro-section .rdv-pro-container .date-filter svg { right: auto; left: 4px; } [dir="rtl"] .rdv-pro-section .rdv-pro-container .date-filter .material-icons { margin-right: 0; margin-left: 5px; } /* Action buttons spacing */ [dir="rtl"] .rdv-pro-section .rdv-pro-container .action-btn { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .rdv-pro-section .rdv-pro-container .action-btn svg { margin-right: 0; margin-left: 5px; } /* Mobile draw-icon (dropdown arrow) — keep on left in RTL */ [dir="rtl"] .rdv-pro-section .rdv-pro-container header .draw-icon { right: auto; left: 0; justify-content: flex-start; padding-right: 0; padding-left: 6px; }