/*
  Interface language switch (Arabic / English) + switching animation.
  Loaded in both languages (app header and login page). Uses logical
  properties, so the same rules work right-to-left and left-to-right.
*/

.crm-lang-item {
  display: flex;
  align-items: center;
}

.crm-lang-switch {
  --pos: 0;
  --opt-w: 42px;

  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(14, 42, 71, 0.06);
  border: 1px solid rgba(14, 42, 71, 0.10);
  box-shadow: inset 0 1px 2px rgba(14, 42, 71, 0.06);
  isolation: isolate;
  direction: inherit;
}

.crm-lang-switch.is-en {
  --pos: 1;
}

.crm-lang-switch__thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  width: var(--opt-w);
  inset-inline-start: calc(3px + var(--pos) * var(--opt-w));
  border-radius: 999px;
  background: linear-gradient(135deg, var(--crm-teal, #0f9f9a), var(--crm-navy, #0e2a47));
  box-shadow: 0 6px 16px rgba(15, 159, 154, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: inset-inline-start 460ms cubic-bezier(0.68, -0.35, 0.27, 1.35);
}

.crm-lang-switch__opt {
  position: relative;
  z-index: 1;
  width: var(--opt-w);
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--crm-muted, #6d7d8d);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  transition: color 260ms ease, transform 160ms ease;
}

.crm-lang-switch__opt[lang="ar"] {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
}

.crm-lang-switch__opt[lang="en"] {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
}

.crm-lang-switch__opt:hover,
.crm-lang-switch__opt:focus-visible {
  color: var(--crm-navy, #0e2a47);
  outline: none;
}

.crm-lang-switch__opt:active {
  transform: scale(0.94);
}

.crm-lang-switch__opt.is-active,
.crm-lang-switch__opt.is-active:hover {
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Switching: the page softly dims while a light bar sweeps across the top,
   then the new language fades in. Skipped for reduced-motion users.
--------------------------------------------------------------------------- */
html.crm-lang-leaving body {
  opacity: 0.4;
  filter: blur(1.5px) saturate(0.85);
  transition: opacity 320ms ease, filter 320ms ease;
}

html.crm-lang-leaving::after {
  content: "";
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 100000;
  background: linear-gradient(90deg, #0f9f9a, #6fe9dd, #0e2a47);
  transform-origin: left center;
  animation: crmLangSweep 420ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

html[dir="rtl"].crm-lang-leaving::after {
  transform-origin: right center;
}

html.crm-lang-arrive .content-wrapper,
html.crm-lang-arrive .auth-scene {
  animation: crmLangArrive 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html.crm-lang-arrive .main-header,
html.crm-lang-arrive .main-sidebar {
  animation: crmLangFade 480ms ease both;
}

@keyframes crmLangSweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes crmLangArrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes crmLangFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-lang-switch__thumb,
  html.crm-lang-leaving body {
    transition: none;
  }

  html.crm-lang-leaving::after,
  html.crm-lang-arrive .content-wrapper,
  html.crm-lang-arrive .auth-scene,
  html.crm-lang-arrive .main-header,
  html.crm-lang-arrive .main-sidebar {
    animation: none;
  }
}

/* Login page placement: top corner, above the scene. */
.auth-page .crm-lang-floating {
  position: fixed;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 20;
}

.auth-page .crm-lang-switch {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.auth-page .crm-lang-switch__opt {
  color: rgba(255, 255, 255, 0.72);
}

.auth-page .crm-lang-switch__opt:hover {
  color: #ffffff;
}

/* Login page in English: English font, text starts on the left. */
html[dir="ltr"] .auth-page {
  font-family: "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
}

html[dir="ltr"] .auth-page .auth-story {
  text-align: left;
}

@media (max-width: 767px) {
  .crm-lang-switch {
    --opt-w: 36px;
    height: 34px;
  }

  .crm-lang-switch__opt {
    height: 26px;
  }
}