/* ────────────────────────────────────────────────────────────
   i18n.css — minimal direction-aware overrides for English (LTR).
   Keep changes additive. The Arabic (RTL) styles already work.
   ──────────────────────────────────────────────────────────── */

/* When language is English, force document direction LTR. */
html[dir="ltr"] body { direction: ltr; }

/* Body fonts: Inter is a good neutral fallback for English. Tajawal renders
   English glyphs acceptably as well, so we keep it as a fallback. */
html[dir="ltr"] body,
html[dir="ltr"] input,
html[dir="ltr"] button,
html[dir="ltr"] select,
html[dir="ltr"] textarea {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Tajawal', sans-serif;
  letter-spacing: 0;
}

/* Inputs in LTR mode read left-to-right. */
html[dir="ltr"] input,
html[dir="ltr"] textarea {
  text-align: left;
  direction: ltr;
}

/* Bottom nav rendered by js/nav.js explicitly sets dir="rtl"; override for LTR. */
html[dir="ltr"] nav#bottomNav.unified-nav,
html[dir="ltr"] nav#bottomNav { direction: ltr !important; }

/* Common mirroring for chevrons / arrows used as "forward" hints.
   Kept conservative — only flips elements that opted in via class. */
html[dir="ltr"] .lv-arrow,
html[dir="ltr"] .arrow-rtl,
html[dir="ltr"] .auth-back {
  transform: scaleX(-1);
}

/* Stats pills / topbar already use flex; no change needed.
   Force inline elements that hard-coded right alignment to follow direction. */
html[dir="ltr"] .topbar { direction: ltr; }
html[dir="ltr"] .auth-card,
html[dir="ltr"] .field label { text-align: left; }

/* Some pages set "text-align:left" inline in RTL to mean "end-aligned to user".
   We can't fix those globally without breaking layout — leave them alone. */

/* Float overrides (rare in this codebase, but safe defaults). */
html[dir="ltr"] .float-end   { float: right; }
html[dir="ltr"] .float-start { float: left; }
html[dir="rtl"] .float-end   { float: left;  }
html[dir="rtl"] .float-start { float: right; }

/* When admin edits English, the form fields should read LTR even though the
   surrounding admin UI may stay RTL. Add `.lang-en` to a wrapper to opt in. */
.lang-en input,
.lang-en textarea {
  direction: ltr;
  text-align: left;
}
.lang-ar input,
.lang-ar textarea {
  direction: rtl;
  text-align: right;
}

/* Auto-translated draft tag (used in admin editor). */
.auto-translated-tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .18);
  border: 1px solid rgba(245, 158, 11, .35);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
}

/* Admin language switch (matches general toggle look). */
.admin-lang-switch {
  display: inline-flex;
  gap: 4px;
  background: #0f172a;
  border: 0.5px solid #1e293b;
  border-radius: 999px;
  padding: 3px;
}
.admin-lang-switch button {
  border: none;
  background: transparent;
  color: #94a3b8;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}
.admin-lang-switch button.active {
  background: #6366f1;
  color: #fff;
}

/* ────────────────────────────────────────────────────────────
   Side-by-side bilingual editor pair (Arabic + English together).
   - .bi-pair lays out two .bi-cell columns.
   - Arabic cell forces RTL inputs/textareas; English cell forces LTR.
   - On RTL admin pages (dir="rtl"), the first cell renders on the right
     (Arabic), the second on the left (English) — matches the requested
     layout. On LTR admin (dir="ltr") the visual order flips automatically
     and both still read in their natural direction inside their cell.
   - Stacks on narrow viewports.
   ──────────────────────────────────────────────────────────── */
.bi-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.bi-pair .bi-cell { display: flex; flex-direction: column; gap: 5px; }
.bi-pair .bi-cell .bi-label-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; font-size: 11px; color: #64748b;
}
.bi-pair .bi-cell .bi-lang-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px;
}
.bi-pair .bi-cell.bi-ar .bi-lang-tag { background: rgba(99,102,241,.18); color: #c7d2fe; }
.bi-pair .bi-cell.bi-en .bi-lang-tag { background: rgba(34,197,94,.18);  color: #86efac; }
.bi-pair .bi-cell.bi-ar input,
.bi-pair .bi-cell.bi-ar textarea {
  direction: rtl !important;
  text-align: right !important;
  font-family: 'Tajawal', sans-serif;
}
.bi-pair .bi-cell.bi-en input,
.bi-pair .bi-cell.bi-en textarea {
  direction: ltr !important;
  text-align: left !important;
  font-family: 'Inter', system-ui, sans-serif;
}
@media (max-width: 720px) {
  .bi-pair { grid-template-columns: 1fr; }
}

/* Hide the legacy admin Edit Arabic/English switch — replaced by side-by-side pair editing. */
#adminEditLangSwitch,
#adminEditLangBanner { display: none !important; }

/* Translate buttons within admin field rows. */
.btn-translate {
  border: 0.5px solid #334155;
  background: #1e293b;
  color: #c4b5fd;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.btn-translate:hover { background: #283045; color: #ddd6fe; }