/* ==========================================================================
   EasyUni Edu — Language switcher + right-to-left support
   --------------------------------------------------------------------------
   Arabic and Urdu set dir="rtl" on <html> (see assets/js/i18n.js). Most of
   the layout mirrors automatically because it uses flexbox and logical
   properties, but anything with a hardcoded left/right needs an explicit
   counterpart — those are collected here rather than scattered through the
   other stylesheets, so RTL is one file to audit.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   Floating language switcher (bottom-right) — replaces the old nav <select>.
   A gradient globe button that opens a glass popover of flags + native names.
   ══════════════════════════════════════════════════════════════════════════ */
.lang-widget {
  position: fixed;
  bottom: 160px;
  right: 24px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.lang-widget-toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: var(--gradient-primary);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.lang-widget-toggle:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 34px rgba(99, 102, 241, 0.55);
}
.lang-widget-toggle:active { transform: scale(0.95); }
.lang-toggle-flag { font-size: 20px; line-height: 1; }
.lang-toggle-chev { transition: transform .25s ease; }
.lang-widget.open .lang-toggle-chev { transform: rotate(180deg); }

.lang-widget-menu {
  position: absolute;
  bottom: 60px;
  right: 0;
  min-width: 224px;
  max-height: 344px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15, 30, 53, 0.20);
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.lang-widget.open .lang-widget-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: none;
  background: transparent;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.lang-option:hover { background: rgba(99, 102, 241, 0.09); }
.lang-option.active {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.lang-flag { font-size: 20px; line-height: 1; }
.lang-name { flex: 1; }

/* RTL: mirror the floating widget to the opposite side. */
[dir="rtl"] .lang-widget { right: auto; left: 24px; align-items: flex-start; }
[dir="rtl"] .lang-widget-menu { right: auto; left: 0; transform-origin: bottom left; }

/* ══════════════════════════════════════════════════════════════════════════
   RTL
   ══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] { text-align: right; }

/* Anything explicitly left-aligned in LTR must flip. */
[dir="rtl"] .nav-links,
[dir="rtl"] .footer-inner,
[dir="rtl"] .dash-nav-link,
[dir="rtl"] .admin-nav-link,
[dir="rtl"] .doc-row-label,
[dir="rtl"] .pricing-features li { text-align: right; }

/* Feature ticks, doc icons and sidebar rails sit on the left in LTR. */
[dir="rtl"] .pricing-features li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .pricing-features li::before { left: auto; right: 0; }

[dir="rtl"] .dash-sidebar,
[dir="rtl"] .admin-sidebar { inset: 0 0 0 auto; }
[dir="rtl"] .dash-main  { margin-left: 0; margin-right: 264px; }
[dir="rtl"] .admin-main { margin-left: 0; margin-right: 260px; }
[dir="rtl"] .dash-nav-link[aria-selected="true"],
[dir="rtl"] .admin-nav-link[aria-selected="true"] {
  box-shadow: inset -2px 0 0 var(--color-primary-light);
}

/* Off-canvas drawers slide in from the opposite edge. */
@media (max-width: 900px) {
  [dir="rtl"] .dash-main { margin-right: 0; }
  [dir="rtl"] .dash-sidebar { transform: translateX(100%); }
  [dir="rtl"] .dash-sidebar.is-open { transform: translateX(0); }
}
@media (max-width: 1000px) {
  [dir="rtl"] .admin-main { margin-right: 0; }
  [dir="rtl"] .admin-sidebar { transform: translateX(100%); }
  [dir="rtl"] .admin-sidebar.is-open { transform: translateX(0); }
}

/* Modals and floating controls anchored to a side. */
[dir="rtl"] .admin-drawer { right: auto; left: 0; }
[dir="rtl"] .uni-modal-close,
[dir="rtl"] .dash-modal-close { right: auto; left: var(--space-4); }
[dir="rtl"] .whatsapp-float { right: auto; left: 24px; }
[dir="rtl"] .back-to-top    { right: auto; left: 24px; }
[dir="rtl"] .dash-toast     { right: auto; left: var(--space-6); }
[dir="rtl"] .admin-search::before { left: auto; right: 12px; }
[dir="rtl"] .admin-search .dash-input { padding-left: var(--space-4); padding-right: 38px; }

/* Directional glyphs written into copy ("→", "←") read backwards in RTL. */
[dir="rtl"] .dash-app-chevron,
[dir="rtl"] .dash-card-link,
[dir="rtl"] .blog-rel-meta { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .dash-app-chevron > *,
[dir="rtl"] .dash-card-link > *,
[dir="rtl"] .blog-rel-meta > * { transform: scaleX(-1); }

/* Arabic and Urdu need a little more line height to stay legible at these
   sizes; Inter falls back to a system Arabic face. */
[dir="rtl"] body { line-height: 1.85; }
