/* ============================================================
   i18n.css — language picker dropdown + RTL/LTR layout flip
   ============================================================ */

/* ---- language picker ---- */
.tb-langwrap{position:relative;}
.tb-lang svg{color:var(--ink-faint);margin-inline-start:1px;}
.lang-menu{position:absolute;top:40px;inset-inline-end:0;width:212px;z-index:41;border-radius:14px;padding:7px;
  box-shadow:var(--shadow-win);animation:fadeIn .15s both;}
.lang-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:11px;transition:.13s;text-align:start;}
.lang-item:hover{background:rgba(31,36,51,.06);}
.lang-on{background:var(--accent-soft)!important;}
.lang-flag{font-size:18px;line-height:1;flex:none;}
.lang-native{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lang-code{font-size:10.5px;font-weight:700;color:var(--ink-faint);letter-spacing:.04em;flex:none;}
.lang-on .lang-code{color:var(--accent-deep);}
[data-theme="dark"] .lang-item:hover{background:rgba(255,255,255,.08);}

/* ============================================================
   LTR languages (en, es) — mirror the desktop layout:
   icons start from the LEFT, the widget column sits on the RIGHT.
   (RTL languages fa/ar keep the default: icons right, widgets left.)
   ============================================================ */
html[dir="ltr"] .dash{order:2;direction:ltr;}
html[dir="ltr"] .desk-grid{order:1;direction:ltr;}

/* widget cards + carousel flip to ltr too */
html[dir="ltr"] .dash-card,
html[dir="ltr"] .dash-empty{direction:ltr;}

/* keep the desk-badge on the trailing (outer) corner in both directions */
html[dir="ltr"] .desk-badge{right:auto;left:-8px;}

/* mobile: the icon grid + carousel follow the document direction */
@media (max-width:760px){
  html[dir="ltr"] .desk-grid{direction:ltr;}
  html[dir="ltr"] .dash{direction:ltr;}
  html[dir="ltr"] .dash-dots{direction:ltr;}

  /* on phones the desk-area stacks into a single column (see dashboard.css),
     so the desktop left/right "order" swap above would stack widgets BELOW
     the app icons in LTR languages. Widgets stay on top in every language. */
  html[dir="ltr"] .dash{order:1;}
  html[dir="ltr"] .desk-grid{order:2;}

  /* language picker: pin the dropdown under the top bar so the full list of
     languages + flags is always visible and tappable (was clipped/offset). */
  .lang-menu{position:fixed;top:56px;inset-inline-start:8px;inset-inline-end:auto;
    width:min(264px,calc(100vw - 16px));max-height:calc(100dvh - 72px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;}
  .lang-item{padding:11px 12px;}
  .lang-native{font-size:14.5px;}
  .lang-flag{font-size:20px;}
}