/* ============================================================
   Vidnexa i18n — language switcher + RTL basics
   Loaded by includes/header.php on every page.
   Switcher rules apply in both directions; layout mirroring is
   scoped under [dir="rtl"] and only covers the core chrome
   (header, sidebars, mobile bar, account/bell dropdowns).
   ============================================================ */

/* ---------- Language switcher ---------- */
.vx-lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.vx-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--text-primary, #0f0f0f);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.vx-lang-btn:hover { background: var(--glass-bg-soft, #f0f0f0); }
.vx-lang-btn .bi { font-size: 19px; }
.vx-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--glass-bg-strong, #ffffff);
  border: 1px solid var(--glass-border, #e5e5e5);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 6px;
  z-index: 1300;
}
.vx-lang-menu[hidden] { display: none; }
.vx-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-primary, #0f0f0f);
  font-size: 14px;
  text-align: start;
  border-radius: 8px;
  cursor: pointer;
}
.vx-lang-item:hover { background: var(--glass-bg, #f5f5f5); }
.vx-lang-item.is-active { font-weight: 700; }
.vx-lang-item .vx-lang-check { color: var(--accent, #065fd4); font-weight: 700; }

/* Switcher inside the expanded sidebar / drawer: full-width list. */
.vx-lang-block { padding: 10px 0 4px; }
.vx-lang-block .vx-lang-menu {
  position: static;
  box-shadow: none;
  border: none;
  background: transparent;
  max-height: none;
  padding: 0;
  min-width: 0;
}
.vx-lang-block .vx-lang-btn { width: 100%; justify-content: flex-start; padding: 0 2px; }

/* ---------- RTL basics (ar / fa) ---------- */
[dir="rtl"] body { text-align: right; }

/* Mini sidebar: dock to the right edge. */
[dir="rtl"] .vid-sidebar-mini {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--sidebar-border, #ccc);
}

/* Expanded sidebar: hidden off the right edge, slides in from there. */
[dir="rtl"] .vid-sidebar-expanded {
  left: auto;
  right: calc(-1 * var(--sidebar-width-expanded, 240px));
  border-right: none;
  border-left: 1px solid var(--sidebar-border, #ccc);
  transition: right 0.3s ease-in-out;
}
[dir="rtl"] .vid-sidebar-expanded.show { right: 0; left: auto; }
[dir="rtl"] .vid-sidebar-expanded .close-btn { margin-left: 0; margin-right: auto; }
[dir="rtl"] .vid-sidebar-expanded nav a { text-align: right; }

/* Content push mirrors from margin-left to margin-right. */
[dir="rtl"] .vid-content-wrapper {
  margin-left: 0;
  margin-right: var(--sidebar-width-mini, 60px);
  transition: margin-right 0.3s ease;
}
@media (min-width: 769px) {
  [dir="rtl"] body:not(.home) .vid-content-wrapper { margin-right: 0; }
  [dir="rtl"] body.vx-sidebar-open .vid-content-wrapper {
    margin-left: 0;
    margin-right: var(--sidebar-width-expanded, 240px);
  }
  [dir="rtl"] body.vx-sidebar-open .vid-main-content,
  [dir="rtl"] body.vx-sidebar-open .cf-shell,
  [dir="rtl"] body.vx-sidebar-open .yt-wrap,
  [dir="rtl"] body.vx-sidebar-open .search-page,
  [dir="rtl"] body.vx-sidebar-open .library-page {
    margin-left: 0;
    margin-right: var(--sidebar-width-expanded, 240px);
  }
}
@media (max-width: 768px) {
  [dir="rtl"] .vid-sidebar-expanded.show ~ .vid-content-wrapper {
    margin-left: 0;
    margin-right: var(--sidebar-width-expanded, 240px);
  }
  [dir="rtl"] .vid-content-wrapper { margin-right: 0; }
}

/* Header clusters: grid/flex order follows direction automatically;
   keep the search field text right-aligned and its icons flipped. */
[dir="rtl"] .vid-search input { text-align: right; }
[dir="rtl"] .vid-search .back-btn .bi-arrow-left { transform: scaleX(-1); }

/* Dropdowns hang from the inline-end edge. */
[dir="rtl"] .user-dropdown-menu { right: auto; left: 0; text-align: right; }
[dir="rtl"] .vx-bell-dropdown { right: auto; left: 0; }
[dir="rtl"] .search-suggestions-dropdown { text-align: right; }

/* Sidebar footer + account menus read right-to-left. */
[dir="rtl"] .vidnexa-footer,
[dir="rtl"] #you-menu,
[dir="rtl"] #create-menu { text-align: right; }
[dir="rtl"] #you-menu a,
[dir="rtl"] #create-menu a { text-align: right; }

/* Skip link enters from the inline-start corner. */
[dir="rtl"] .vx-skip-link { left: auto; right: -9999px; border-radius: 0 0 0 8px; }
[dir="rtl"] .vx-skip-link:focus { right: 0; }