﻿/* Site language selector based on the original Unimart switcher-language component.
   Scoped so neither the shop dropdowns nor the CMS inherit these rules. */
.techsouq-language-dropdown-wrap { position: relative; }
.rbt-dropdown-menu-elastic.techsouq-language-dropdown { margin: 0; padding: 0; }
.rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu {
    min-height: 34px;
    display: flex;
    align-items: center;
    position: relative;
}
.rbt-dropdown-menu-elastic.techsouq-language-dropdown .techsouq-language-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    direction: ltr;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 2px;
}
.rbt-dropdown-menu-elastic.techsouq-language-dropdown .left-image {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0;
    flex: 0 0 18px;
}
.rbt-dropdown-menu-elastic.techsouq-language-dropdown .techsouq-language-trigger .right-icon {
    margin: 0 0 0 2px;
    font-size: 11px;
}
.rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu > .sub-menu {
    left: auto;
    right: 0;
    width: 168px;
    min-width: 168px;
    padding: 7px 0;
    text-align: start;
    direction: ltr;
    background: #fff;
    z-index: 100;
    border-radius: 8px;
}
.rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.active > .sub-menu,
.rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.active-on-hover:hover > .sub-menu,
.rbt-dropdown-menu-elastic.techsouq-language-dropdown > li:focus-within > .sub-menu {
    left: auto;
    right: 0;
    top: 100%;
    opacity: 1;
    visibility: visible;
    clip-path: inset(-20px -20px -20px -20px);
}
.rbt-dropdown-menu-elastic.techsouq-language-dropdown .sub-menu li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: start;
    direction: ltr;
    padding: 8px 12px;
    margin: 2px 8px;
    white-space: nowrap;
}
.rbt-dropdown-menu-elastic.techsouq-language-dropdown .sub-menu li a:focus-visible,
.rbt-dropdown-menu-elastic.techsouq-language-dropdown .techsouq-language-trigger:focus-visible {
    outline: 2px solid var(--color-primary, #1da83c);
    outline-offset: 2px;
}
.techsouq-mobile-language-link {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}
.techsouq-mobile-language-link img { border-radius: 50%; width: 18px; height: 18px; }

/* Arabic topbar language menu: the Unimart template centers dropdowns with
   translateX(-50%). In RTL, that pushes this menu beyond the left viewport
   edge. Anchor it to its trigger and clear the inherited transform. */
html[lang="ar"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu > .sub-menu,
html[lang="ar"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu.active > .sub-menu,
html[lang="ar"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu.active-on-hover:hover > .sub-menu,
html[lang="ar"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu:focus-within > .sub-menu {
    left: auto !important;
    right: 0 !important;
    top: 100%;
    transform: none !important;
    max-width: calc(100vw - 16px);
}
html[lang="ar"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu > .sub-menu {
    direction: rtl;
    text-align: right;
}
html[lang="ar"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown .sub-menu > li > a {
    direction: rtl;
    text-align: right;
    justify-content: flex-start;
}

/* English topbar: keep the same template dropdown anchored directly below
   the language trigger. The original centered translateX(-50%) moves the
   menu too far to the left; AR already has its equivalent override above. */
html[lang="en"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu > .sub-menu,
html[lang="en"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu.active > .sub-menu,
html[lang="en"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu.active-on-hover:hover > .sub-menu,
html[lang="en"] .rbt-dropdown-menu-elastic.techsouq-language-dropdown > li.has-child-menu:focus-within > .sub-menu {
    left: auto !important;
    right: 0 !important;
    top: 100%;
    transform: none !important;
    max-width: calc(100vw - 16px);
}

/* Three-language mobile switcher. Same component in EN, AR and IT headers. */
.techsouq-mobile-language-options{display:flex;align-items:center;flex-wrap:wrap;gap:12px;max-width:100%}
.techsouq-mobile-language-options a{display:inline-flex;align-items:center;gap:6px;line-height:1.4;white-space:nowrap}
.techsouq-mobile-language-options a.active{color:var(--color-primary);font-weight:700}
