/* =====================================================
   Fexr — Language Switcher + RTL (Arabic) overrides
   ===================================================== */

/* ── Language Switcher ─────────────────────────────── */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: inherit;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  transition: border-color .2s, background .2s;
  white-space: nowrap;
}

.lang-switcher__btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.lang-switcher__btn i { font-size: 11px; opacity: .75; }

.lang-switcher__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0e0d18;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  min-width: 148px;
  z-index: 99999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lang-switcher.open .lang-switcher__menu { display: flex; flex-direction: column; }

.lang-option {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
  width: 100%;
}

.lang-option:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.lang-option.active { color: #fff; font-weight: 700; background: rgba(119, 64, 255, 0.2); }

/* Light mode overrides */
body:not(.dark-mode) .lang-switcher__btn {
  border-color: rgba(0, 0, 0, 0.15);
  color: #0f172a;
}
body:not(.dark-mode) .lang-switcher__btn:hover {
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.04);
}
body:not(.dark-mode) .lang-switcher__menu {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body:not(.dark-mode) .lang-option { color: #334155; }
body:not(.dark-mode) .lang-option:hover { background: rgba(0, 0, 0, 0.05); color: #0f172a; }
body:not(.dark-mode) .lang-option.active { background: rgba(119, 64, 255, 0.08); color: #7740ff; }

/* ── Arabic / RTL overrides ────────────────────────── */
body.lang-rtl { direction: rtl; }

/* Header */
body.lang-rtl .header__area-menubar          { flex-direction: row-reverse; }
body.lang-rtl .header__area-menubar-left     { margin-right: 0; margin-left: auto; }
body.lang-rtl .header__area-menubar-right    { margin-left: 0; margin-right: auto; flex-direction: row-reverse; }
body.lang-rtl .lang-switcher                 { margin-right: 0; margin-left: 8px; }
body.lang-rtl .lang-switcher__menu           { right: auto; left: 0; }
body.lang-rtl .lang-option                   { text-align: right; }

/* Sub-menus */
body.lang-rtl .header__area-menubar-center-menu ul li .sub-menu { left: auto; right: 0; }

/* Top bar */
body.lang-rtl .topBar__one-left  { text-align: right; }
body.lang-rtl .topBar__one-right { text-align: left;  }
body.lang-rtl .topBar__one-left ul  { padding-right: 0; }

/* Footer */
body.lang-rtl .footer__area-widget-company  { text-align: right; }
body.lang-rtl .footer-widget-menu ul        { padding-right: 0; }
body.lang-rtl .copyright__area p            { text-align: right; }
body.lang-rtl .copyright__area-menu         { text-align: left; }
body.lang-rtl .social__icon ul              { justify-content: flex-end; }

/* General text */
body.lang-rtl p,
body.lang-rtl h1, body.lang-rtl h2, body.lang-rtl h3,
body.lang-rtl h4, body.lang-rtl h5, body.lang-rtl h6,
body.lang-rtl li, body.lang-rtl label, body.lang-rtl span { text-align: right; }

body.lang-rtl .t-center,
body.lang-rtl .section-header.t-center p,
body.lang-rtl .section-header.t-center h2 { text-align: center; }

body.lang-rtl .t-right { text-align: left; }

/* Flex rows */
body.lang-rtl .row { flex-direction: row-reverse; }

/* Buttons and inputs */
body.lang-rtl input,
body.lang-rtl textarea { text-align: right; direction: rtl; }