/* ShareMix landing page — language switcher + per-language fixes.
   Unlayered on purpose: it must win over the Tailwind @layer utilities. */

/* ---------- Fonts per language ----------
   Persian and Arabic keep the original Vazirmatn stack. Latin-script languages
   use Inter first; Hindi/Chinese/Japanese/Korean fall back to the system fonts
   every phone and PC already has for those scripts. */
html[lang="en"], html[lang="fr"], html[lang="es"], html[lang="tr"] {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
}
html[lang="hi"] {
  --font-sans: "Inter", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
  --font-display: "Inter", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
}
html[lang|="zh"] {
  --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-display: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
html[lang="ja"] {
  --font-sans: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
  --font-display: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
}
html[lang="ko"] {
  --font-sans: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
  --font-display: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
}
/* Devanagari needs a little more room between the two headline lines */
html[lang="hi"] .sm-hero h1 { line-height: 1.45; }

/* ---------- Direction fixes for left-to-right languages ---------- */
/* Hero text stays on the same side of the card as in Persian (the transfer
   beam runs on the other side), but reads left-aligned. */
html[dir="ltr"] .sm-hero { align-items: flex-start; text-align: left; }
/* "Get the app" arrow points forward in reading direction */
html[dir="ltr"] .lucide-chevron-left { transform: scaleX(-1); }
/* The "12 seconds" chip sits beside the Download button in Persian; in LTR the
   button is on the other edge of the text block, so the chip moves to the open
   right-hand side of the card instead of overlapping it. */
html[dir="ltr"] .left-\[16\%\].bottom-\[30\%\] { left: auto; right: 8%; }

/* ---------- Header ---------- */
/* Above the hero card so the language menu is never hidden behind it */
.sm-head { z-index: 40; }
.sm-head-end { display: flex; align-items: center; gap: 14px; }

/* ---------- Language switcher ---------- */
.sm-lang { position: relative; }
.sm-lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px 0 11px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #e8edf7;
  font: 600 12px/1 var(--font-sans);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.sm-lang-btn:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.26); }
.sm-lang-btn:focus-visible, .sm-lang-item:focus-visible { outline: 2px solid #4c8dff; outline-offset: 2px; }
.sm-lang-btn svg { flex: none; opacity: .85; }
.sm-lang-caret { transition: transform .2s ease; }
.sm-lang-btn[aria-expanded="true"] .sm-lang-caret { transform: rotate(180deg); }

.sm-lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 184px; margin: 0; padding: 6px; list-style: none;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 16, 30, 0.88);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  animation: sm-lang-in .16s ease-out;
}
@keyframes sm-lang-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sm-lang-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; height: 38px; padding: 0 12px;
  border: 0; border-radius: 12px; background: transparent;
  color: #c9d2e3; font-size: 13px; font-weight: 600;
  font-family: "Inter", "Vazirmatn", "Noto Sans Devanagari", "Nirmala UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Yu Gothic UI", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  text-align: start; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sm-lang-item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.sm-lang-item.is-active { background: rgba(76, 141, 255, 0.16); color: #ffffff; }
.sm-lang-item svg { color: #4c8dff; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .sm-lang-menu { animation: none; }
  .sm-lang-caret, .sm-lang-btn { transition: none; }
}