/* ── Nav container layout ──────────────────────────────────────── */ /* direction:ltr locks the flex axis to left-to-right regardless of the page's dir attribute, so logo is always on the left and the menu is always on the right in both EN and AR. */ .site-nav .site-navigation { display: flex; flex-direction: row; direction: ltr; align-items: center; justify-content: space-between; } /* ── Base nav positioning ──────────────────────────────────────── */ .site-nav { padding-top: 20px; padding-bottom: 20px; position: absolute; top: 0; z-index: 9; width: 100%; } /* ── Desktop menu: flex container + LTR item order ────────────── */ /* Making site-menu a flex row lets us use `order` to control item sequence independently in LTR and RTL without touching the HTML. */ .site-nav .site-navigation .site-menu { display: flex; align-items: center; } .site-nav .site-navigation .site-menu .nav-item-home { order: 1; } .site-nav .site-navigation .site-menu .nav-item-properties { order: 2; } .site-nav .site-navigation .site-menu .nav-item-residence { order: 3; } .site-nav .site-navigation .site-menu .nav-item-language { order: 4; } .site-nav .site-navigation .site-menu .nav-item-login { order: 5; } .site-nav .site-navigation .site-menu .nav-item-user { order: 5; } .site-nav .site-navigation .site-menu .nav-item-register { order: 6; } /* ── Language switcher ─────────────────────────────────────────── */ .site-menu .language-switcher { display: inline-block; } .site-menu .language-switcher a { color: rgba(255, 255, 255, 0.5); font-size: 14px; padding: 6px 10px; text-decoration: none; transition: all 0.3s ease; } .site-menu .language-switcher a:hover { color: white; } .site-menu .language-switcher a.active { color: white; font-weight: 600; } .site-menu .language-switcher .separator { color: rgba(255, 255, 255, 0.3); padding: 0 5px; } /* ── User dropdown ─────────────────────────────────────────────── */ .site-menu .user-dropdown .user-menu-link { display: flex; align-items: center; gap: 8px; } .site-menu .user-dropdown .user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3); transition: border-color 0.3s ease; } .site-menu .user-dropdown .user-avatar:hover { border-color: white; } .site-menu .user-dropdown .user-icon-circle { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: white; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; border: 2px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; text-transform: uppercase; } .site-menu .user-dropdown .user-icon-circle:hover { background: rgba(255, 255, 255, 0.3); border-color: white; } .site-menu .user-dropdown .logout-form { display: block; margin: 0; padding: 0; } .site-menu .user-dropdown .logout-form a { display: block; width: 100%; } /* ── Mobile menu overlay ───────────────────────────────────────── */ .site-mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; background: rgba(0, 0, 0, 0.96); transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } /* JS adds offcanvas-menu to */ body.offcanvas-menu .site-mobile-menu { transform: translateX(0); } .site-mobile-menu-header { display: flex; align-items: center; justify-content: flex-end; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .site-mobile-menu-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; background: rgba(255, 255, 255, 0.08); transition: background 0.2s; } .site-mobile-menu-close:hover { background: rgba(255, 255, 255, 0.18); } .site-mobile-menu-close span { color: #fff; font-size: 20px; line-height: 1; } .site-mobile-menu-body { flex: 1; padding: 10px 0 30px; } /* ── Mobile nav list ───────────────────────────────────────────── */ .site-mobile-menu .site-nav-wrap { list-style: none; margin: 0; padding: 0; } .site-mobile-menu .site-nav-wrap li a { display: block; padding: 14px 24px; color: rgba(255, 255, 255, 0.75); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: color 0.2s, background 0.2s; } .site-mobile-menu .site-nav-wrap li a:hover, .site-mobile-menu .site-nav-wrap li.active > a { color: #fff; background: rgba(255, 255, 255, 0.06); } .site-mobile-menu .site-nav-wrap li.has-children { position: relative; } /* Arrow is inherited dark from style.css (designed for white sidebar) — force white on dark overlay */ .site-mobile-menu .site-nav-wrap .arrow-collapse { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.2); } .site-mobile-menu .site-nav-wrap .arrow-collapse::before { color: rgba(255, 255, 255, 0.6); } /* Let Bootstrap collapse handle show/hide — do NOT set display:none here */ .site-mobile-menu .site-nav-wrap > li > ul { list-style: none; padding: 0; background: rgba(255, 255, 255, 0.04); } .site-mobile-menu .site-nav-wrap > li > ul > li > a { padding-left: 40px; font-size: 14px; color: rgba(255, 255, 255, 0.6); } .site-mobile-menu .site-nav-wrap > li > ul > li > ul > li > a { padding-left: 56px; font-size: 13px; } /* ── Mobile menu open button ───────────────────────────────────── */ .mobile-menu-btn { background: transparent; border: none; padding: 4px 6px; line-height: 1; cursor: pointer; color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin-top: 2px; } /* ── Tablet (iPad): 768px – 991px ─────────────────────────────── */ @media (max-width: 991px) { .site-nav { padding-top: 12px; padding-bottom: 12px; } .language-switcher { display: none !important; } /* Keep the nav bar compact; full desktop menu hidden by Bootstrap d-none d-lg-inline-block */ } /* ── Phone: ≤ 575px ────────────────────────────────────────────── */ @media (max-width: 575px) { .site-nav { padding-top: 10px; padding-bottom: 10px; } .site-nav .logo img { height: 28px !important; } .site-mobile-menu .site-nav-wrap li a { padding: 16px 20px; font-size: 16px; } .site-mobile-menu .site-nav-wrap > li > ul > li > a { padding-left: 36px; } }