.mg-lang { position: fixed; top: 16px; right: 16px; z-index: 1200; font-family: var(--font-main); }
html[dir="rtl"] .mg-lang { right: auto; left: 16px; }

/* --- Pill button (identical in EN/AR) --- */
.mg-lang__btn{
  display: grid;
  grid-template-columns: 20px 1fr 20px; /* flag | label | chevron (symmetric) */
  align-items: center;
  gap: 10px;

  background: var(--primary-bg); color: var(--primary-text);
  border: 1px solid var(--light-border); border-radius: 10px;
  padding: 8px 12px; min-width: 140px; cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: background .2s, border-color .2s, transform .12s;
}
.mg-lang__btn:hover { border-color: var(--accent-color); transform: translateY(-1px); }
.mg-lang__btn:active { transform: scale(.98); }

.mg-lang__flag { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; display: block; justify-self: start; }
.mg-lang__label { font-weight: 800; font-size: 13px; text-align: center; }
.mg-lang__chev  { width: 20px; height: 20px; opacity: .8; justify-self: end; }

/* --- Base menu --- */
.mg-lang__menu {
  position: absolute; margin-top: 8px; background: var(--primary-bg);
  border: 1px solid var(--neutral-border); border-radius: 10px;
  box-shadow: var(--card-shadow-lg); min-width: 220px; padding: 6px; display: none;
}
.mg-lang.open .mg-lang__menu { display: block; }

/* Keep pill + menu layout LTR in RTL pages so nothing shifts right */
html[dir="rtl"] .mg-lang__btn,
html[dir="rtl"] .mg-lang__menu { direction: ltr; }

.mg-lang__opt{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--primary-text);
}
.mg-lang__opt[aria-selected="true"] { background: rgba(140,223,140,.12); border: 1px solid var(--accent-color); }
.mg-lang__opt:hover { background: #151515; }
.mg-lang__opt .mg-lang__flag { width: 20px; height: 20px; }
.mg-lang__opt .mg-lang__sub { color: var(--muted-text); font-size: 12px; margin-left: auto; }

/* --- Inline variant for sidebar/footer --- */
.mg-lang--inline { position: relative; top: auto; right: auto; width: 100%; margin: 10px 0 0; }
.mg-lang--inline .mg-lang__menu { left: 0; right: 0; }
/* In RTL, keep the inline wrapper LTR so content doesn't slide right */
html[dir="rtl"] .mg-lang--inline { direction: ltr; }

/* Compact pill */
.mg-lang--compact .mg-lang__btn { min-width: 100px; padding: 6px 10px; border-radius: 10px; }
.mg-lang--compact .mg-lang__flag { width: 16px; height: 16px; }
.mg-lang--compact .mg-lang__label { font-weight: 800; font-size: 13px; }
.mg-lang--compact .mg-lang__chev { width: 20px; height: 20px; }

/* Drop-UP menu for footer placement */
.mg-lang--dropup .mg-lang__menu { bottom: calc(100% + 8px); top: auto; }

/* Match Logout width */
.sidebar-footer .mg-lang--inline { width: 100%; }
.sidebar-footer .mg-lang--inline .mg-lang__btn { width: 100%; }

/* Guards vs global UL/IMG rules + fixed-position sizing */
.mg-lang ul, .mg-lang li { width:auto !important; }
.mg-lang img { max-width:none !important; }
.mg-lang__menu[style*="position: fixed"]{
  width:auto !important; min-width:200px; max-width:260px; white-space:nowrap;
}

@media (max-width: 768px){
  .mg-lang { top: 12px; right: 12px; }
  html[dir="rtl"] .mg-lang { left: 12px; }
}