/* ===========================================================================
   rtl.css — Arabic / right-to-left support + the EN/AR language switch.
   ---------------------------------------------------------------------------
   The switch itself is always visible (LTR + RTL). Everything under
   `body.rtl` (set by app.js when Arabic is active) mirrors the layout:
   text aligns right, the details grid and choice rows flow right-to-left,
   comboboxes/inputs align right, and the "back" arrows flip direction.
   Only presentation changes — stored values remain English.
   ========================================================================= */

/* ---- language switch (direction-agnostic) ----
   Sticky: stays pinned to the top of the viewport on EVERY step, even when a
   long form scrolls, so the visitor can switch language at any point. */
.lang-switch{
  display:flex;justify-content:flex-end;gap:6px;
  margin:0 0 14px;
  position:sticky;top:0;z-index:45;
  padding:8px 0;
  background:var(--surface);
}
.lang-btn{
  font:inherit;font-size:13px;font-weight:600;line-height:1;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  color:var(--muted);background:transparent;
  border:1px solid var(--line);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.lang-btn:hover{border-color:var(--brand);color:var(--brand-700)}
.lang-btn.is-active{
  background:var(--brand);color:#fff;border-color:var(--brand);
}
.lang-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
body.rtl .lang-switch{justify-content:flex-start}

/* ---- language-first gate (the one-time "Choose your language" screen) ----
   Big, centred, touch-friendly choice buttons. Mirrors the .role look but
   larger and centred so it reads as the single decision on the screen. */
.lang-gate-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lang-gate-sep{color:var(--muted);font-weight:400}
.lang-gate{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;
}
.lang-gate-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:88px;cursor:pointer;text-align:center;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-input);
  padding:20px 18px;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);
  transition:border-color var(--t-fast),background var(--t-fast),transform .12s,box-shadow var(--t-fast);
}
.lang-gate-btn:hover{border-color:var(--brand);background:var(--brand-50);box-shadow:var(--shadow-sm)}
.lang-gate-btn:active{transform:scale(.99)}
.lang-gate-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
@media(max-width:420px){
  .lang-gate{grid-template-columns:1fr}   /* stack on small phones */
}

/* ---- global direction / alignment when Arabic is active ----
   Labels/questions/hints flow RTL, but the RESPONSES themselves (typed input
   values) are always English-only in the database — so text inputs stay LTR
   and left-aligned even in Arabic mode. Selects show translated Arabic option
   text, so they keep RTL alignment. */
body.rtl,
body.rtl select{ text-align:right; }
body.rtl input[type=text],
body.rtl input[type=email],
body.rtl textarea{ direction:ltr; text-align:left; }

/* Full-width action buttons stay CENTRED (they're centred in LTR too) — never
   pushed to the right edge. The back/link buttons are handled separately. */
body.rtl .cta,
body.rtl .link,
body.rtl .modal .cta{ text-align:center; }

body.rtl .eyebrow,
body.rtl .q,
body.rtl .hint,
body.rtl label,
body.rtl .group-head,
body.rtl .modal h3,
body.rtl .modal p{ text-align:right; }

/* The on-screen confirmation comes from the `_response` table, which may be
   bilingual (an id="en" block and an id="ar" block). The client shows the block
   matching the active language; each block sets its own direction so the Arabic
   response reads RTL while the English response reads LTR. */
.done-body #en{ direction:ltr; text-align:center; }
.done-body #ar{ direction:rtl; text-align:center; }
/* A legacy single-language response (no id blocks) keeps centred, and inherits
   the page direction (LTR in English mode, RTL under body.rtl). */
body.rtl .done-body{ text-align:center; }

/* Numeric / code inputs are LTR + left-aligned like every other response. */
body.rtl input[inputmode="numeric"],
body.rtl #email-input{ direction:ltr; text-align:left; }
body.rtl #otp-input{ direction:ltr; text-align:center; }

/* ---- role buttons ---- */
body.rtl .role{ text-align:right; flex-direction:row-reverse; }
body.rtl .role-go{ transform:scaleX(-1); }              /* arrow points left */
body.rtl .role:hover .role-go{ transform:scaleX(-1) translateX(4px); }

/* ---- back button: RTL so the "رجوع →" arrow renders on the left (points
   back toward the start), and the button hugs the right edge. ---- */
body.rtl .back{ direction:rtl; text-align:right; display:block; }

/* ---- details grid: keep the 12-col track, flow items right-to-left ---- */
body.rtl .field-grid{ direction:rtl; }
body.rtl .choices{ direction:rtl; }
body.rtl .choice{ flex-direction:row-reverse; text-align:right; }

/* ---- comboboxes (country / dial) ----
   Options are ALWAYS English ("Oman", "Oman (+968)") — same as the stored
   value — so the whole combobox stays LTR and left-aligned in Arabic mode:
   flag on the left, English name, caret on the right. */
body.rtl .combo,
body.rtl .combo-btn,
body.rtl .combo-panel,
body.rtl .combo-opt{ direction:ltr; text-align:left; }
body.rtl .combo-btn-label{ text-align:left; }
body.rtl .combo-search{ direction:ltr; text-align:left; }

/* ---- vital-line (ECG progress): mirror so step 1 lights from the RIGHT ----
   The SVG is drawn left-to-right with segment 0 first; flipping the whole SVG
   horizontally puts segment 0 on the right, so progress fills right-to-left to
   match the Arabic reading direction. */
body.rtl .vital-svg{ transform:scaleX(-1); }

/* ---- form top bar (progress + back) mirrors ---- */
body.rtl .form-top{ flex-direction:row-reverse; }

/* ---- badge card mirrors ---- */
body.rtl .badge-preview{ text-align:right; }

/* ---- Arabic tends to need a touch more line-height for legibility ---- */
body.rtl .q{ line-height:1.5; }