/* MyRihla site — additions: language switcher + light RTL handling. */

.lang-switch { position: relative; }
.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--mr-line); background: #fff; color: var(--mr-ink);
  border-radius: 999px; padding: 8px 12px; font: 700 12px/1 var(--font-sans); cursor: pointer;
}
.lang-switch-btn b { font-weight: 800; }
.nav.on-photo:not(.scrolled) .lang-switch-btn {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32);
  color: #fff; backdrop-filter: blur(6px);
}
.lang-switch-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--mr-line); border-radius: 14px;
  box-shadow: var(--shadow-card); padding: 6px; min-width: 172px; z-index: 60;
  display: flex; flex-direction: column;
}
[dir="rtl"] .lang-switch-menu { right: auto; left: 0; }
.lang-switch-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 9px 12px; border-radius: 9px; cursor: pointer;
  font: 600 14px/1.1 var(--font-sans); color: var(--mr-ink); text-align: start;
}
.lang-switch-menu button:hover { background: var(--mr-cream); }
.lang-switch-menu button.active { background: var(--mr-cream); color: var(--mr-emerald); }
.lang-switch-menu .ls-code { font-weight: 800; font-size: 11px; color: var(--mr-gold-deep); width: 22px; flex-shrink: 0; }

/* ── RTL (Arabic) ── */
[dir="rtl"] body { text-align: right; }
/* keep the phone status bars / tab bars and other inherently-LTR app chrome readable */
[dir="rtl"] .statusbar, [dir="rtl"] .mk-tabbar, [dir="rtl"] .store-badge, [dir="rtl"] .sb-txt { direction: ltr; }
/* Arabic body text reads better in a naskh-style face; fall back gracefully */
html[lang="ar"] body { font-family: "Amiri", var(--font-sans); }
html[lang="ar"] .display, html[lang="ar"] .h-sec, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; }