/* =========================================================================
   i18n.css — language picker modal + RTL layout support
   ========================================================================= */

.lang-picker-overlay {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  font-family: Inter, sans-serif;
}
.lang-picker-overlay.open { opacity: 1; pointer-events: auto; }

.lang-picker-card {
  width: 100%; max-width: 480px; max-height: 78vh;
  background: var(--surface, #12172A);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(24px);
  transition: transform 0.25s cubic-bezier(.32,.72,0,1);
  overflow: hidden;
}
@media (min-width: 640px) {
  .lang-picker-overlay { align-items: center; }
  .lang-picker-card { border-radius: 20px; max-height: 70vh; }
}
.lang-picker-overlay.open .lang-picker-card { transform: translateY(0); }

.lang-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.lang-picker-title { font-size: 15px; font-weight: 800; color: var(--text, #fff); }
.lang-picker-close {
  background: none; border: none; color: var(--muted, #8B93A7);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
}

.lang-picker-search-wrap { padding: 12px 18px; }
.lang-picker-search {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text, #fff); font-size: 13px; outline: none;
}
.lang-picker-search:focus { border-color: var(--accent, #C9A227); }

.lang-picker-list { overflow-y: auto; padding: 4px 10px 16px; flex: 1; }
.lang-picker-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 13px 12px; margin: 2px 0; border-radius: 12px;
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--text, #fff); font-size: 14px;
}
.lang-picker-item:hover { background: rgba(255,255,255,0.05); }
.lang-picker-item.active { background: rgba(var(--accent-rgb, 201,162,39), 0.12); }
.lang-picker-native { font-weight: 700; }
.lang-picker-english { color: var(--muted, #8B93A7); font-size: 12px; margin-inline-start: auto; margin-inline-end: 8px; }
.lang-picker-check { width: 16px; height: 16px; color: var(--accent, #C9A227); flex-shrink: 0; }
.lang-picker-empty { padding: 24px 12px; text-align: center; color: var(--muted, #8B93A7); font-size: 13px; }

/* RTL-specific item direction */
html[dir="rtl"] .lang-picker-item { text-align: right; }
html[dir="rtl"] .lang-picker-english { margin-inline-start: auto; }

/* =========================================================================
   RTL layout support for the whole app
   Most flex/grid layouts flip automatically once html[dir="rtl"] is set,
   because browsers resolve flex-start/flex-end against writing direction.
   These rules cover the handful of spots that use hardcoded left/right or
   need icons mirrored.
   ========================================================================= */
html[dir="rtl"] body { direction: rtl; }

html[dir="rtl"] .bottom-nav { direction: rtl; }
html[dir="rtl"] #hamburger-menu { right: 0; left: auto; transform: translateX(100%); }
html[dir="rtl"] #hamburger-menu.open { transform: translateX(0); }

/* Chevrons / back arrows that visually point the wrong way once mirrored */
html[dir="rtl"] .icon-flip-rtl { transform: scaleX(-1); }

/* Text inputs & textareas should follow reading direction, not force LTR */
html[dir="rtl"] input:not([type="tel"]):not([type="email"]):not([type="url"]),
html[dir="rtl"] textarea {
  direction: rtl;
}
/* Numbers/phone/currency stay LTR even inside an RTL page */
html[dir="rtl"] .force-ltr,
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: right;
}