/* ================================
   OpenCart 4 – 3rd Level Menu RTL Fix
   ================================ */

/* Global RTL direction */
#menu {
    direction: rtl;
    text-align: right;
}

/* Ensure dropdown parents position correctly */
#menu .dropdown-menu li {
    position: relative;
}

/* Reset Bootstrap interference */
#menu .dropdown-menu {
    border-radius: 6px;
}

/* ---------- 3rd level flyout ---------- */

#menu .menu3rdlevel {
    position: absolute;
    top: 0;
    right: 100%; /* RTL mirror */
    left: auto;
    display: none;

    min-width: 220px;
    padding: 8px 0;

    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);

    z-index: 9999;
}

/* Inner container */
#menu .menu3rdlevel_inner {
    display: flex;
    flex-direction: column;
}

/* Links inside 3rd level */
#menu .menu3rdlevel a {
    display: block;
    padding: 8px 14px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    text-align: right;
}

#menu .menu3rdlevel a:hover {
    background: #229ac8;
    color: #fff;
}

/* “Show all” link styling */
#menu .menu3rdlevel .see-all {
    border-top: 1px solid #eee;
    font-weight: 600;
}

/* ---------- arrow indicator ---------- */

#menu a.arrow {
    position: relative;
    padding-left: 22px !important;
    padding-right: 15px !important;
}

#menu a.arrow::after {
    content: ">"; /* flipped arrow */
    position: absolute;
    left: 8px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: .6;
}

/* ---------- desktop hover behavior ---------- */

@media (min-width: 992px) {

    #menu .dropdown-menu li:hover > .menu3rdlevel {
        display: block;
    }

}

/* ---------- mobile safe behavior ---------- */

@media (max-width: 991px) {

    #menu .menu3rdlevel {
        position: relative;
        right: 0;
        top: 0;
        box-shadow: none;
        border: none;
        display: block;
        padding-right: 15px;
        padding-left: 0;
    }

    #menu a.arrow::after {
        content: "";
    }

}

/* ---------- smooth layering ---------- */

#menu,
#menu .dropdown-menu,
#menu .menu3rdlevel {
    overflow: visible !important;
}
