/* ============================================================================
   RTL FIXES - MINIMAL & CORRECT
   Based on Martfury default theme behavior
   ============================================================================ */

/* ===========================================================================
   1. BLOCK MOBILE MENU ON DESKTOP (>= 992px)
   Prevent mobile menu popup from showing on hover/click
   =========================================================================== */
@media (min-width: 992px) {
    /* Hide mobile menu IDs completely on desktop */
    body[dir="rtl"] #menu-mobile,
    body[dir="rtl"] #navigation-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide mobile menu toggle buttons */
    body[dir="rtl"] .ps-toggle--sidebar[href="#menu-mobile"],
    body[dir="rtl"] .ps-toggle--sidebar[href="#navigation-mobile"],
    body[dir="rtl"] a[href="#menu-mobile"],
    body[dir="rtl"] a[href="#navigation-mobile"] {
        display: none !important;
        pointer-events: none !important;
    }
    
    /* Hide site overlay when triggered by mobile menu */
    body[dir="rtl"] .ps-site-overlay {
        display: none !important;
        pointer-events: none !important;
    }
}

/* ===========================================================================
   2. NAVIGATION SIDEBAR - POSITION ON RIGHT IN RTL
   Keep button on left, but sidebar slides from RIGHT
   =========================================================================== */
body[dir="rtl"] .navigation--sidebar {
    left: auto !important;
    right: 0 !important;
}

body[dir="rtl"] .navigation--sidebar .navigation__header .ps-btn--close {
    left: 10px !important;
    right: auto !important;
}

/* ===========================================================================
   3. MEGA MENU & DROPDOWN POSITIONING
   Copy exact behavior from Martfury rtl.css
   =========================================================================== */
body[dir="rtl"] .menu--product-categories .menu--dropdown > li.has-mega-menu .mega-menu {
    border-left: 1px solid #ccc !important;
    border-right: none !important;
    left: auto !important;
    right: 100% !important;
}

body[dir="rtl"] .sub-menu {
    left: auto !important;
    right: 0 !important;
}

/* ===========================================================================
   3B. DROPDOWN MENU - MATCH HEADER COLOR (CRITICAL FIX)
   Force dropdown menus to inherit header background color
   =========================================================================== */
body[dir="rtl"] .ps-dropdown-menu,
body[dir="rtl"] .navigation__extra .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
    background: var(--color-1st) !important;
}

body[dir="rtl"] .ps-dropdown-menu li a,
body[dir="rtl"] .navigation__extra .ps-dropdown-menu li a {
    color: #ffffff !important;
}

body[dir="rtl"] .ps-dropdown-menu li a:hover,
body[dir="rtl"] .navigation__extra .ps-dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Language dropdown specific */
body[dir="rtl"] .navigation__extra .ps-dropdown.language .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
}

body[dir="rtl"] .navigation__extra .ps-dropdown.language .ps-dropdown-menu img {
    filter: brightness(0) invert(1); /* Make flags visible on dark background */
}

/* ===========================================================================
   4. NAVIGATION EXTRAS (from Martfury)
   =========================================================================== */
body[dir="rtl"] .navigation__extra > li {
    margin-left: 20px !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
}

body[dir="rtl"] .navigation__extra > li:last-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body[dir="rtl"] .navigation__extra > li:before {
    left: 0 !important;
    position: absolute !important;
}

body[dir="rtl"] .navigation__extra > li > .ps-dropdown > a {
    padding: 15px 0 15px 20px !important;
}

body[dir="rtl"] .navigation .navigation__right {
    padding-left: 0 !important;
    padding-right: 35px !important;
}

/* ===========================================================================
   5. DROPDOWN MENUS
   =========================================================================== */
body[dir="rtl"] .ps-dropdown ul {
    text-align: right !important;
}

body[dir="rtl"] .ps-dropdown > a:before {
    left: 0 !important;
    right: auto !important;
}

/* ===========================================================================
   6. MENU ITEMS
   =========================================================================== */
body[dir="rtl"] .menu {
    text-align: right !important;
}

body[dir="rtl"] .menu > li.menu-item-has-children > a:before {
    left: 0 !important;
    right: auto !important;
}

body[dir="rtl"] .menu > li.menu-item-has-children > a:after {
    left: auto !important;
    right: 50% !important;
}

/* ===========================================================================
   7. ICON DIRECTIONS (from Martfury)
   =========================================================================== */
body[dir="rtl"] .icon-chevron-right:before {
    content: "" !important;
}

body[dir="rtl"] .icon-chevron-left:before {
    content: "" !important;
}

body[dir="rtl"] .icon-arrow-right:before {
    content: "" !important;
}

body[dir="rtl"] .icon-arrow-left:before {
    content: "" !important;
}

/* ===========================================================================
   8. MOBILE MENU (from Martfury)
   =========================================================================== */
body[dir="rtl"] .menu--mobile > li.menu-item-has-children .sub-toggle {
    left: 0 !important;
    right: auto !important;
}

body[dir="rtl"] .menu--mobile li a i {
    float: right !important;
    margin-left: 7px !important;
    margin-right: 0 !important;
}

body[dir="rtl"] .header--mobile-categories .header__filter > button {
    border-left: 1px solid #ccc !important;
    border-right: none !important;
}

/* ===========================================================================
   9. PRODUCT PAGE - BUTTON ALIGNMENT (from Martfury)
   =========================================================================== */
body[dir="rtl"] .ps-product--detail .ps-product__shopping > * {
    margin-left: 30px !important;
    margin-right: 0 !important;
}

body[dir="rtl"] .ps-product--detail .ps-product__shopping .ps-btn,
body[dir="rtl"] .ps-product--detail .ps-product__shopping figure {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

/* ===========================================================================
   10. SUBMENU - LEFT EXPANSION IN RTL (Critical Fix)
   =========================================================================== */
body[dir="rtl"] .sub-menu {
    left: auto !important;
    right: 100% !important;
    text-align: right !important;
}

body[dir="rtl"] .menu > li.menu-item-has-children .sub-menu {
    left: auto !important;
    right: 100% !important;
}

body[dir="rtl"] .menu--dropdown .sub-menu {
    left: auto !important;
    right: 0 !important;
}

/* ===========================================================================
   11. RESPONSIVE - ALLOW MOBILE MENU ON MOBILE DEVICES
   =========================================================================== */
@media (max-width: 991px) {
    /* Re-enable mobile menus on actual mobile devices */
    body[dir="rtl"] #menu-mobile,
    body[dir="rtl"] #navigation-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    body[dir="rtl"] .navigation--sidebar {
        width: 100% !important;
    }
}

@media (max-width: 479px) {
    body[dir="rtl"] .header--mobile .header__actions > * {
        margin-left: 20px !important;
        margin-right: 0 !important;
    }
}

/* ===========================================================================
   DEBUG MARKER - Shows when RTL fix is loaded
   =========================================================================== */
html[dir="rtl"]::after {
    content: 'RTL-FIXED';
    position: fixed;
    bottom: 0;
    right: 0;
    background: #10b981;
    color: white;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    z-index: 999999;
    opacity: 0.9;
    border-radius: 4px 0 0 0;
}