/* ===================================================================
   MOBILE NAVIGATION ALIGNMENT FIXES
   ================================================================== */

/* Ensure consistent alignment for all mobile navigation items */
#mobileMenu nav a,
#mobileMenu nav button {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure dropdown buttons align with other navigation items */
.models-dropdown-mobile button,
.services-dropdown-mobile button {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===================================================================
   HEADER AND NAVIGATION RTL STYLES
   ================================================================== */

/* ===================================================================
   1. MOBILE HEADER RTL STYLES
   ================================================================== */

/* Mobile hamburger button positioning */
html[dir="rtl"] #menuToggle {
    flex-direction: row-reverse !important;
    right: auto !important;
    left: 0 !important;
}

/* Mobile hamburger icon positioning */
html[dir="rtl"] #menuToggle img[alt="Menu"] {
    order: -1 !important;
}

/* Mobile logo centering in RTL - FIXED */
html[dir="rtl"] #menuToggle .flex-grow {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1 !important;
}

/* Ensure logo container is properly centered */
html[dir="rtl"] #menuToggle .flex-grow a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Position search icon and menu button above the centered logo */
html[dir="rtl"] #menuToggle .flex.pt-2 {
    position: relative !important;
    z-index: 2 !important;
}

html[dir="rtl"] #menuToggle img[alt="Menu"] {
    position: relative !important;
    z-index: 2 !important;
}

/* Additional mobile header RTL fixes */
html[dir="rtl"] #menuToggle {
    position: relative !important;
    overflow: visible !important;
}

/* Ensure proper spacing in mobile header */
html[dir="rtl"] #menuToggle > div {
    position: relative !important;
    z-index: 2 !important;
}

/* Fix mobile menu close button layout */
html[dir="rtl"] #mobileMenu .flex.justify-end {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] #mobileMenu .flex-grow.flex.justify-center {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1 !important;
}

/* Mobile Menu RTL Fixes */
html[dir="rtl"] #mobileMenu {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
}

html[dir="rtl"] #mobileMenu.translate-x-0 {
    transform: translateX(0) !important;
}

html[dir="rtl"] #mobileMenu.-translate-x-full {
    transform: translateX(-100%) !important;
}

/* Ensure mobile menu overlay works properly */
html[dir="rtl"] #overlay {
    z-index: 40 !important;
}

/* Fix mobile menu button positioning */
html[dir="rtl"] #menuToggle {
    z-index: 50 !important;
    position: relative !important;
}

/* Ensure mobile menu content is properly aligned */
html[dir="rtl"] #mobileMenu nav {
    direction: rtl !important;
}

/* Fix mobile submenu positioning in RTL */
html[dir="rtl"] #mobile-models-submenu,
html[dir="rtl"] #mobile-services-submenu {
    margin-right: 1rem !important;
    margin-left: 0 !important;
    direction: rtl !important;
}

/* Ensure mobile menu transitions work smoothly */
html[dir="rtl"] #mobileMenu * {
    transition: all 0.3s ease-in-out !important;
}

/* ===================================================================
   2. MOBILE MENU RTL STYLES
   ================================================================== */

/* Mobile menu slide direction */
html[dir="rtl"] #mobileMenu {
    right: 0 !important;
    left: auto !important;
}

html[dir="rtl"] #mobileMenu.-translate-x-full {
    transform: translateX(100%) !important;
}

html[dir="rtl"] #mobileMenu.translate-x-0 {
    transform: translateX(0) !important;
}

/* Mobile menu content alignment */
html[dir="rtl"] #mobileMenu nav {
    text-align: right !important;
}

/* Mobile menu background decoration RTL */
html[dir="rtl"] #mobileMenu .absolute.right-0 {
    right: auto !important;
    left: 0 !important;
}

/* Mobile menu close button area RTL */
html[dir="rtl"] #mobileMenu .flex.justify-end {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] #mobileMenu .flex-grow.flex.justify-center {
    order: 2 !important;
}

/* Mobile navigation links - ensure consistent alignment */
html[dir="rtl"] .mobile-nav-link {
    text-align: right !important;
    padding-right: 1.5rem !important;
    padding-left: 1rem !important;
}

/* Ensure all mobile navigation items have consistent alignment */
html[dir="rtl"] #mobileMenu nav a,
html[dir="rtl"] #mobileMenu nav button {
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Mobile dropdown arrows */
html[dir="rtl"] #mobile-models-arrow,
html[dir="rtl"] #mobile-services-arrow {
    transform: scaleX(-1) !important;
}

/* Mobile dropdown button layout for Arabic */
html[dir="rtl"] .models-dropdown-mobile button,
html[dir="rtl"] .services-dropdown-mobile button {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Mobile submenu positioning */
html[dir="rtl"] #mobile-models-submenu,
html[dir="rtl"] #mobile-services-submenu {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

/* Mobile submenu links */
html[dir="rtl"] #mobile-models-submenu a,
html[dir="rtl"] #mobile-services-submenu a {
    text-align: right !important;
}

/* Mobile submenu icons */
html[dir="rtl"] #mobile-models-submenu svg,
html[dir="rtl"] #mobile-services-submenu svg {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* Mobile language switcher */
html[dir="rtl"] .mobile-nav-link .flex {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .mobile-nav-link img {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* ===================================================================
   3. DESKTOP HEADER RTL STYLES
   ================================================================== */

/* Desktop navigation container */
html[dir="rtl"] nav .md\\:flex {
    flex-direction: row-reverse !important;
}

/* Desktop navigation links container */
html[dir="rtl"] .hidden.md\\:flex.items-center.justify-between {
    flex-direction: row-reverse !important;
}

/* Desktop navigation links */
html[dir="rtl"] .nav-link {
    text-align: right !important;
}

/* Desktop logo positioning */
html[dir="rtl"] .flex-grow.flex.justify-center.items-center a {
    margin-right: -10rem !important;
    margin-left: 0 !important;
}

/* Desktop right section (language switcher, etc.) */
html[dir="rtl"] .hidden.md\\:flex.items-center.space-x-2 {
    flex-direction: row-reverse !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ===================================================================
   4. DROPDOWN MENU RTL STYLES
   ================================================================== */

/* Models dropdown positioning */
html[dir="rtl"] #models-menu {
    right: 0 !important;
    left: auto !important;
}

/* Services dropdown positioning */
html[dir="rtl"] #services-menu {
    right: 0 !important;
    left: auto !important;
}

/* Dropdown content alignment */
html[dir="rtl"] .dropdown-content {
    text-align: right !important;
}

/* Dropdown arrows */
html[dir="rtl"] .dropdown-arrow svg {
    transform: scaleX(-1) !important;
}

/* Desktop navigation dropdown buttons for Arabic */
html[dir="rtl"] #models-toggle,
html[dir="rtl"] #services-toggle {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

html[dir="rtl"] #models-toggle svg,
html[dir="rtl"] #services-toggle svg {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

/* Model links in dropdown */
html[dir="rtl"] .model-link {
    text-align: right !important;
    transform: translateX(-4px) !important;
}

html[dir="rtl"] .model-link:hover {
    transform: translateX(-8px) !important;
}

html[dir="rtl"] .model-link.active {
    transform: translateX(-8px) !important;
}

html[dir="rtl"] .model-link.active::after {
    right: auto !important;
    left: 0 !important;
    border-radius: 0 2px 2px 0 !important;
}

/* ===================================================================
   5. LANGUAGE SWITCHER RTL STYLES
   ================================================================== */

/* Desktop language switcher */
html[dir="rtl"] .language-switcher {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .language-switcher img {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

/* Language switcher text alignment */
html[dir="rtl"] .language-switcher a {
    text-align: right !important;
}

/* ===================================================================
   6. REGISTER INTEREST BUTTON RTL STYLES
   ================================================================== */

/* Register Interest button underline */
html[dir="rtl"] .ri-button::after {
    right: auto !important;
    left: -14px !important;
    transform: skewX(20deg) !important;
}

/* Register Interest button in mobile */
html[dir="rtl"] .open-register-modal {
    text-align: center !important;
}

/* ===================================================================
   7. SEARCH ICON RTL STYLES
   ================================================================== */

/* Search icon positioning */
html[dir="rtl"] .open-search {
    order: 1 !important;
}

/* ===================================================================
   8. SERVICES DROPDOWN SPECIFIC RTL STYLES
   ================================================================== */

/* Services dropdown grid layout */
html[dir="rtl"] .services-grid {
    direction: rtl !important;
}

/* Services dropdown items */
html[dir="rtl"] .services-grid a {
    text-align: right !important;
}

/* Services dropdown icons */
html[dir="rtl"] .services-grid svg {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* Services dropdown text */
html[dir="rtl"] .services-grid span {
    text-align: right !important;
}

/* ===================================================================
   9. RESPONSIVE RTL ADJUSTMENTS
   ================================================================== */

/* Mobile specific RTL adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .md\\:hidden {
        direction: rtl !important;
    }

    html[dir="rtl"] .mobile-menu-container {
        text-align: right !important;
    }

    html[dir="rtl"] .mobile-nav-item {
        text-align: right !important;
    }
}

/* Desktop specific RTL adjustments */
@media (min-width: 769px) {
    html[dir="rtl"] .desktop-nav {
        flex-direction: row-reverse !important;
    }

    html[dir="rtl"] .desktop-nav-links {
        text-align: right !important;
    }
}

/* ===================================================================
   10. ANIMATION RTL ADJUSTMENTS
   ================================================================== */

/* Mobile menu slide animation RTL */
html[dir="rtl"] #mobileMenu.transition-transform {
    transition: transform 0.3s ease-in-out !important;
}

/* Ensure proper initial state for RTL mobile menu */
html[dir="rtl"] #mobileMenu {
    transform: translateX(100%) !important;
}

html[dir="rtl"] #mobileMenu.-translate-x-full {
    transform: translateX(100%) !important;
}

html[dir="rtl"] #mobileMenu.translate-x-0 {
    transform: translateX(0) !important;
}

/* Force RTL mobile menu positioning */
html[dir="rtl"] #mobileMenu {
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
}

/* Override any conflicting styles */
html[dir="rtl"] #mobileMenu.fixed {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    z-index: 50 !important;
}

/* Dropdown fade animations RTL */
html[dir="rtl"] .dropdown-fade-in {
    animation-direction: reverse !important;
}

/* Arrow rotation animations RTL */
html[dir="rtl"] .arrow-rotate {
    transform: scaleX(-1) rotate(180deg) !important;
}

/* ===================================================================
   11. HOVER EFFECTS RTL ADJUSTMENTS
   ================================================================== */

/* Navigation link hover effects */
html[dir="rtl"] .nav-link:hover {
    transform: translateX(-2px) !important;
}

/* Mobile navigation link hover effects */
html[dir="rtl"] .mobile-nav-link:hover {
    padding-right: 2rem !important;
    padding-left: 1rem !important;
}

/* ===================================================================
   12. FOCUS STATES RTL ADJUSTMENTS
   ================================================================== */

/* Focus indicators for RTL */
html[dir="rtl"] .nav-link:focus {
    border-right: 2px solid #172154 !important;
    border-left: none !important;
}

html[dir="rtl"] .mobile-nav-link:focus {
    border-right: 2px solid #172154 !important;
    border-left: none !important;
}

/* ===================================================================
   13. ACCESSIBILITY RTL IMPROVEMENTS
   ================================================================== */

/* Screen reader text direction */
html[dir="rtl"] .sr-only {
    direction: rtl !important;
}

/* Skip links RTL */
html[dir="rtl"] .skip-link {
    right: 1rem !important;
    left: auto !important;
}

/* ===================================================================
   14. CUSTOM HEADER COMPONENTS RTL
   ================================================================== */

/* Custom header elements */
html[dir="rtl"] .header-custom {
    direction: rtl !important;
    text-align: right !important;
}

/* Header background elements */
html[dir="rtl"] .header-bg-element {
    transform: scaleX(-1) !important;
}

/* ===================================================================
   15. RESPONSIVE RTL HEADER FIXES
   ================================================================== */

/* Desktop header responsive fixes for RTL */
@media (min-width: 768px) {
    /* Ensure proper spacing between navigation elements in RTL */
    html[dir="rtl"] nav .md\\:flex {
        gap: 1rem !important;
    }

    /* Prevent logo and navigation overlap in RTL */
    html[dir="rtl"] nav .flex-grow.flex.justify-center.items-center {
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Ensure navigation links don't wrap in RTL */
    html[dir="rtl"] nav .hidden.md\\:flex.items-center.justify-between {
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    /* Responsive logo sizing in RTL */
    html[dir="rtl"] nav .flex-grow.flex.justify-center.items-center img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* Align desktop left group in RTL without stretching */
@media (min-width: 768px) {
  html[dir="rtl"] nav .hidden.md\:flex.items-center.justify-between {
    width: auto !important;
    justify-content: flex-end !important; /* in RTL, end aligns visually left items to the right side of block */
    flex: 0 1 auto !important;
  }
  /* Removed neutralizing rule to allow RTL logo repositioning */
}

/* Medium screens (768px - 1024px) RTL */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Reduce spacing on medium screens in RTL */
    html[dir="rtl"] nav .hidden.md\\:flex.items-center.justify-between {
        gap: 0.5rem !important;
    }

    /* Adjust logo positioning for medium screens in RTL - moved more to the left (right in RTL) */
    html[dir="rtl"] nav .flex-grow.flex.justify-center.items-center a {
        margin-right: -4rem !important;
        margin-left: 0 !important;
    }
}

/* Large screens (1024px - 1280px) RTL */
@media (min-width: 1024px) and (max-width: 1280px) {
    /* Medium spacing on large screens in RTL */
    html[dir="rtl"] nav .hidden.md\\:flex.items-center.justify-between {
        gap: 0.75rem !important;
    }

    /* Adjust logo positioning for large screens in RTL - moved more to the left (right in RTL) */
    html[dir="rtl"] nav .flex-grow.flex.justify-center.items-center a {
        margin-right: -5rem !important;
        margin-left: 0 !important;
    }
}

/* Extra large screens (1280px+) RTL */
@media (min-width: 1280px) {
    /* Full spacing on extra large screens in RTL */
    html[dir="rtl"] nav .hidden.md\\:flex.items-center.justify-between {
        gap: 1rem !important;
    }

    /* Full logo positioning for extra large screens in RTL - moved more to the left (right in RTL) */
    html[dir="rtl"] nav .flex-grow.flex.justify-center.items-center a {
        margin-right: -6rem !important;
        margin-left: 0 !important;
    }
}

/* Ensure navigation links are properly spaced in RTL */
html[dir="rtl"] nav a {
    white-space: nowrap !important;
    padding: 0 0.5rem !important;
}

/* Prevent text overflow in navigation in RTL */
html[dir="rtl"] nav a, html[dir="rtl"] nav button {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ensure dropdown buttons don't cause layout issues in RTL */
html[dir="rtl"] nav .relative {
    flex-shrink: 0 !important;
}

/* Right section responsive adjustments in RTL */
html[dir="rtl"] nav .hidden.md\\:flex.items-center.space-x-2 {
    flex-shrink: 0 !important;
    min-width: 0 !important;
}

/* Register Interest button responsive sizing in RTL */
html[dir="rtl"] nav .open-register-modal {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Ensure proper container width in RTL */
html[dir="rtl"] nav .px-2.py-3.md\\:flex.hidden.items-center.justify-between.md\\:mx-6.h-full {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ===================================================================
   16. RTL MOBILE LAYOUT STABILITY FIXES FOR EXTREMELY NARROW SCREENS
   ================================================================== */

/* Ensure RTL mobile layout remains stable on screens below 393px */
@media (max-width: 393px) {
  /* Force RTL mobile navigation to stay visible */
  html[dir="rtl"] #menuToggle {
    display: flex !important;
    flex-direction: row !important;
  }
  
  html[dir="rtl"] #mobileMenu {
    display: flex !important;
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
  }
  
  html[dir="rtl"] #mobileMenu.translate-x-0 {
    transform: translateX(0) !important;
  }
  
  /* Hide RTL desktop navigation completely on narrow screens */
  html[dir="rtl"] .md\\:flex {
    display: none !important;
  }
  
  html[dir="rtl"] .md\\:hidden {
    display: block !important;
  }
  
  /* Ensure RTL mobile menu stays in mobile layout */
  html[dir="rtl"] #mobileMenu.md\\:hidden {
    display: flex !important;
  }
  
  /* Force RTL mobile header layout */
  html[dir="rtl"] nav .md\\:flex {
    display: none !important;
  }
  
  /* Ensure RTL mobile hamburger button stays visible */
  html[dir="rtl"] #menuToggle.md\\:hidden {
    display: flex !important;
  }
  
  /* Prevent any RTL desktop elements from showing */
  html[dir="rtl"] .hidden.md\\:flex {
    display: none !important;
  }
  
  html[dir="rtl"] .hidden.md\\:block {
    display: none !important;
  }
  
  /* Force RTL mobile content sections */
  html[dir="rtl"] .md\\:block.hidden {
    display: none !important;
  }
  
  /* Ensure RTL mobile-specific elements remain visible */
  html[dir="rtl"] .md\\:hidden.block {
    display: block !important;
  }
  
  html[dir="rtl"] .md\\:hidden.flex {
    display: flex !important;
  }
  
  /* Prevent RTL flex direction changes on narrow screens */
  html[dir="rtl"] .md\\:flex-row {
    flex-direction: column !important;
  }
  
  html[dir="rtl"] .md\\:flex-col {
    flex-direction: column !important;
  }
  
  /* Force RTL mobile grid layouts */
  html[dir="rtl"] .md\\:grid {
    display: block !important;
  }
  
  /* Ensure RTL mobile spacing */
  html[dir="rtl"] .md\\:space-x-2 > * + * {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  html[dir="rtl"] .md\\:space-y-2 > * + * {
    margin-top: 0.5rem !important;
  }
  
  /* Force RTL mobile text alignment */
  html[dir="rtl"] .md\\:text-center {
    text-align: right !important;
  }
  
  html[dir="rtl"] .md\\:text-left {
    text-align: right !important;
  }
  
  /* Prevent RTL desktop positioning */
  html[dir="rtl"] .md\\:absolute {
    position: relative !important;
  }
  
  html[dir="rtl"] .md\\:relative {
    position: relative !important;
  }
  
  /* Force RTL mobile margins and padding */
  html[dir="rtl"] .md\\:mx-6 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  
  html[dir="rtl"] .md\\:px-6 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  
  /* Ensure RTL mobile width constraints */
  html[dir="rtl"] .md\\:w-1/2 {
    width: 100% !important;
  }
  
  html[dir="rtl"] .md\\:w-1/3 {
    width: 100% !important;
  }
  
  html[dir="rtl"] .md\\:w-1/4 {
    width: 100% !important;
  }
  
  /* Force RTL mobile height */
  html[dir="rtl"] .md\\:h-screen {
    height: auto !important;
    min-height: 100vh !important;
  }
  
  /* Prevent RTL desktop-specific backgrounds */
  html[dir="rtl"] .md\\:bg-cover {
    background-size: cover !important;
  }
  
  /* Force RTL mobile font sizes */
  html[dir="rtl"] .md\\:text-lg {
    font-size: 1rem !important;
  }
  
  html[dir="rtl"] .md\\:text-xl {
    font-size: 1.125rem !important;
  }
  
  html[dir="rtl"] .md\\:text-2xl {
    font-size: 1.25rem !important;
  }
  
  /* Ensure RTL mobile button sizes */
  html[dir="rtl"] .md\\:px-4 {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
  }
  
  html[dir="rtl"] .md\\:py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Force RTL mobile gap spacing */
  html[dir="rtl"] .md\\:gap-6 {
    gap: 1rem !important;
  }
  
  html[dir="rtl"] .md\\:gap-8 {
    gap: 1.5rem !important;
  }
  
  /* Prevent RTL desktop-specific transforms */
  html[dir="rtl"] .md\\:transform {
    transform: none !important;
  }
  
  html[dir="rtl"] .md\\:-translate-y-6 {
    transform: none !important;
  }
  
  /* Force RTL mobile z-index */
  html[dir="rtl"] .md\\:z-10 {
    z-index: 10 !important;
  }
  
  /* Ensure RTL mobile overflow handling */
  html[dir="rtl"] .md\\:overflow-hidden {
    overflow: visible !important;
  }
  
  /* Force RTL mobile border radius */
  html[dir="rtl"] .md\\:rounded-lg {
    border-radius: 0.375rem !important;
  }
  
  /* Prevent RTL desktop shadows on mobile */
  html[dir="rtl"] .md\\:shadow-lg {
    box-shadow: none !important;
  }
  
  /* Force RTL mobile opacity */
  html[dir="rtl"] .md\\:opacity-70 {
    opacity: 1 !important;
  }
  
  /* Ensure RTL mobile transitions */
  html[dir="rtl"] .md\\:transition-all {
    transition: none !important;
  }
  
  /* Force RTL mobile cursor */
  html[dir="rtl"] .md\\:cursor-pointer {
    cursor: pointer !important;
  }
  
  /* Prevent RTL desktop hover effects on mobile */
  html[dir="rtl"] .md\\:hover\\:bg-gray-50:hover {
    background-color: transparent !important;
  }
  
  html[dir="rtl"] .md\\:hover\\:text-\\[\\#172154\\]:hover {
    color: inherit !important;
  }
  
  /* Force RTL mobile focus states */
  html[dir="rtl"] .md\\:focus\\:outline-none:focus {
    outline: none !important;
  }
  
  /* Ensure RTL mobile active states */
  html[dir="rtl"] .md\\:active\\:bg-gray-100:active {
    background-color: transparent !important;
  }
  
  /* RTL-specific mobile menu positioning */
  html[dir="rtl"] #mobileMenu {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
  }
  
  html[dir="rtl"] #mobileMenu.translate-x-0 {
    transform: translateX(0) !important;
  }
  
  html[dir="rtl"] #mobileMenu.-translate-x-full {
    transform: translateX(100%) !important;
  }
  
  /* RTL mobile navigation alignment */
  html[dir="rtl"] #mobileMenu nav {
    text-align: right !important;
  }
  
  html[dir="rtl"] #mobileMenu nav a,
  html[dir="rtl"] #mobileMenu nav button {
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  
  /* RTL mobile dropdown alignment */
  html[dir="rtl"] .models-dropdown-mobile button,
  html[dir="rtl"] .services-dropdown-mobile button {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    text-align: right !important;
  }
  
  /* RTL mobile submenu positioning */
  html[dir="rtl"] #mobile-models-submenu,
  html[dir="rtl"] #mobile-services-submenu {
    margin-right: 1rem !important;
    margin-left: 0 !important;
  }
  
  html[dir="rtl"] #mobile-models-submenu a,
  html[dir="rtl"] #mobile-services-submenu a {
    text-align: right !important;
  }
}

/* Additional RTL stability fixes for screens below 320px */
@media (max-width: 320px) {
  /* Further reduce RTL spacing for very narrow screens */
  html[dir="rtl"] .px-4 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  
  html[dir="rtl"] .py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Ensure RTL text remains readable */
  html[dir="rtl"] .text-lg {
    font-size: 0.875rem !important;
  }
  
  html[dir="rtl"] .text-base {
    font-size: 0.75rem !important;
  }
  
  /* Force RTL single column layout */
  html[dir="rtl"] .flex {
    flex-direction: column !important;
  }
  
  /* Ensure RTL buttons remain tappable */
  html[dir="rtl"] button, html[dir="rtl"] a {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Prevent RTL horizontal scrolling */
  html[dir="rtl"] body {
    overflow-x: hidden !important;
  }
  
  /* Force RTL mobile menu to take full width */
  html[dir="rtl"] #mobileMenu {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  
  /* Ensure RTL mobile header takes full width */
  html[dir="rtl"] #menuToggle {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  
  /* RTL mobile menu close button positioning */
  html[dir="rtl"] #mobileMenu .flex.justify-end {
    flex-direction: row-reverse !important;
  }
  
  /* RTL mobile logo centering */
  html[dir="rtl"] #menuToggle .flex-grow {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
  }
}