/* lang-switch.css - the language picker in the nav bar.
 *
 * Markup contract:
 *   <div class="lang-switch">
 *     <button class="lang-btn" data-lang="en">🌐 EN</button>
 *     <button data-lang="zh-CN">中文</button>
 *     <button data-lang="zh-TW">繁中</button>
 *     <button data-lang="fa">فارسی</button>
 *   </div>
 *
 * The first button is the toggle; the rest are options revealed on
 * hover/focus. Works identically in LTR and RTL.
 */

.lang-switch {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-inline-start: .4rem;
}

/* toggle button */
.lang-switch .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .55em 1em;
  font: 600 .9rem/1 system-ui, sans-serif;
  color: #dfe6e9;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .2s;
  white-space: nowrap;
}
.lang-switch .lang-btn:hover {
  background: rgba(0, 206, 201, .15);
  border-color: rgba(0, 206, 201, .4);
}
.lang-switch .lang-btn .chev {
  font-size: .7em;
  opacity: .7;
  transition: transform .3s;
}
.lang-switch:hover .lang-btn .chev,
.lang-switch:focus-within .lang-btn .chev { transform: rotate(180deg); }

/* option list */
.lang-switch .lang-opts {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;            /* flips under RTL automatically */
  display: flex;
  flex-direction: column;
  min-width: 130px;
  padding: .35rem;
  background: rgba(20, 20, 40, .96);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
  max-height: 80vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 60;
}
.lang-switch:hover .lang-opts,
.lang-switch:focus-within .lang-opts,
.lang-switch.open .lang-opts {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switch .lang-opts button {
  padding: .55em .9em;
  font: 500 .92rem/1 system-ui, sans-serif;
  color: #c0c0d8;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: start;
  transition: background .2s, color .2s;
}
.lang-switch .lang-opts button:hover {
  background: rgba(0, 206, 201, .12);
  color: #fff;
}
.lang-switch .lang-opts button.active {
  background: linear-gradient(90deg, rgba(108, 92, 231, .3), rgba(0, 206, 201, .25));
  color: #fff;
  font-weight: 700;
}

/* On touch / small screens, keep it compact and always reachable via tap. */
@media (max-width: 560px) {
  .lang-switch .lang-btn { padding: .5em .8em; font-size: .82rem; }
  .lang-switch .lang-opts { min-width: 116px; }
}