/* Mobile menu opens from and closes toward the physical left edge. */
/* Mobile navigation drawer: anchor to the physical LEFT, so both entry and
   exit happen on the left. The page is RTL, therefore logical inset properties
   are reset explicitly as well as physical left/right. */
@media (max-width: 1150px) {
  html body #mobileNav.mobile-nav,
  html body #mobileNav.mobile-nav.is-open {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    width: min(86vw, 360px) !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    border-left: 0 !important;
    border-right: 1px solid #e4e6f2 !important;
    border-radius: 0 !important;
    transform: translateX(-105%) !important;
    transition: transform .26s ease !important;
    direction: rtl !important;
    z-index: 3205 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html body #mobileNav.mobile-nav.is-open {
    transform: translateX(0) !important;
  }

  html body #mobileNavBackdrop.mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2998 !important;
  }
}

/* These compact mobile menus are anchored under their hamburger at the left already;
   keep their physical anchoring explicit and independent of RTL logical properties. */
@media (max-width: 620px) {
  html body.mobile-approved-rendered .mar-menu-panel {
    left: 10px !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 10px !important;
  }
}
