/* RTL only for main navigation when Arabic is active (scoped to header only) */

/* 1) Single-header layout: set container to flex and order children explicitly */
#header.rtl-menu-active .navbar.navbar-light > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Place toolbar first, main nav second, logo last (appears at far right) */
#header.rtl-menu-active .navbar.navbar-light > .container > .tt-toolbar-wrap { order: 1; }
#header.rtl-menu-active .navbar.navbar-light > .container > .main-navbar-wrapper { order: 2; }
#header.rtl-menu-active .navbar.navbar-light > .container > .navbar-brand { order: 3; }

/* Reverse item flow inside nav lists so items read right-to-left */
#header.rtl-menu-active #nav,
#header.rtl-menu-active .tt-secondary-list {
  display: flex;
  flex-direction: row-reverse;
}

/* Dropdown alignment when reversed */
#header.rtl-menu-active .dropdown-menu-right {
  right: auto !important;
  left: 0 !important;
}

/* 2) Double-header top bar: order toolbar, custom menu, then logo */
#header.rtl-menu-active.tt-double-header .tt-top-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#header.rtl-menu-active.tt-double-header .tt-top-header > .container > .tt-toolbar-wrap { order: 1; }
#header.rtl-menu-active.tt-double-header .tt-top-header > .container > .tt-custom-navbar { order: 2; }
#header.rtl-menu-active.tt-double-header .tt-top-header > .container > .navbar-brand { order: 3; }

/* Reverse item flow in both main and secondary navbars for double-header */
#header.rtl-menu-active.tt-double-header #nav,
#header.rtl-menu-active.tt-double-header .tt-secondary-list,
#header.rtl-menu-active.tt-double-header .tt-custom-navbar {
  display: flex;
  flex-direction: row-reverse;
}

/* Optional: flip hamburger icon to maintain visual direction */
#header.rtl-menu-active .d-xl-none .btn.nav-link { transform: scaleX(-1); }

/* Offcanvas drawer behavior for mobile - always slide from left for consistency */
@media (max-width: 1199.98px) {
  /* Default (English/LTR): slide from left */
  .offcanvas-collapse {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    max-width: 100%;
    overflow-y: auto;
    visibility: hidden;
    background-color: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(0);
  }
  
  /* RTL (Arabic): slide from right instead */
  #header.rtl-menu-active .offcanvas-collapse {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  #header.rtl-menu-active .offcanvas-collapse.open {
    transform: translateX(0);
  }
}
