/* ===========================================================================
   RTL + language switcher styles.
   Everything under html[dir="rtl"] is INERT unless the active language is a
   right-to-left one, so this file is safe to load on every page.
   Flips: fixed sidebar, content offset, dropdown anchoring, mobile drawer
   direction and directional icons. Machine-readable values (prices, links,
   emails, API keys, code) stay LTR so they never render backwards.
   =========================================================================== */

html[dir="rtl"] body{direction:rtl;text-align:right}

/* --- shell: sidebar to the right, content offset mirrored --- */
html[dir="rtl"] .nv-sidebar{left:auto;right:0;border-right:0;border-left:1px solid var(--nv-border)}
html[dir="rtl"] .nv-shell{margin-left:0;margin-right:var(--nv-sb)}

/* --- dropdowns anchor to the opposite edge --- */
html[dir="rtl"] .nv-dd-menu{right:auto;left:0}

/* --- mobile drawer slides in from the right (matches the theme breakpoint) --- */
@media(max-width:860px){
  html[dir="rtl"] .nv-shell{margin-right:0}
  html[dir="rtl"] .nv-sidebar{transform:translateX(100%)}
  html[dir="rtl"] body.nv-drawer .nv-sidebar{transform:translateX(0)}
}

/* --- directional icons mirror --- */
html[dir="rtl"] .fa-arrow-right,html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-right,html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-right,html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angles-right,html[dir="rtl"] .fa-angles-left,
html[dir="rtl"] .fa-right-to-bracket,html[dir="rtl"] .fa-arrow-right-from-bracket,
html[dir="rtl"] .fa-arrow-trend-up,html[dir="rtl"] .fa-share{display:inline-block;transform:scaleX(-1)}

/* --- tables + form controls --- */
html[dir="rtl"] th,html[dir="rtl"] td{text-align:right}
html[dir="rtl"] input,html[dir="rtl"] select,html[dir="rtl"] textarea{text-align:right}

/* --- keep machine-readable values LTR --- */
html[dir="rtl"] input[type="url"],html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] code,html[dir="rtl"] pre,html[dir="rtl"] .nv-price,
html[dir="rtl"] .lm-price,html[dir="rtl"] .nv-mono,html[dir="rtl"] [data-ltr]{
  direction:ltr;text-align:left;unicode-bidi:plaintext}

/* ===========================  language switcher  =========================== */
#nvLang .nv-dd-menu{min-width:236px;max-height:62vh;overflow:auto}
#nvLang .nv-lang-item{display:flex;align-items:center;gap:10px;justify-content:flex-start}
#nvLang .nv-lang-item .nv-lang-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nvLang .nv-lang-item .nv-lang-code{font-size:11px;font-weight:800;opacity:.5;letter-spacing:.04em}
#nvLang .nv-lang-item.on{background:var(--nv-surface-2);color:var(--nv-text)}
#nvLang .nv-lang-search{width:100%;margin:2px 0 6px;padding:8px 10px;border:1px solid var(--nv-border);
  border-radius:10px;background:var(--nv-bg);color:inherit;font-size:13px;outline:none}
#nvLang .nv-lang-search:focus{border-color:var(--nv-accent)}

/* mobile: the language list becomes a bottom sheet */
@media(max-width:560px){
  #nvLang .nv-dd-menu{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;min-width:0;
    max-height:72vh;border-radius:18px 18px 0 0;z-index:9001;
    padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -18px 50px rgba(10,15,25,.35)}
  #nvLang .nv-lang-item{padding:13px 12px}
}

/* ====================  landing-page (guest) switcher  ====================
   Self-contained <details> dropdown — no JS dependency, so it works on the
   marketing page which does not load the panel's nvToggle helper.          */
.lp-lang{position:relative;display:inline-block}
.lp-lang>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.lp-lang>summary::-webkit-details-marker{display:none}
.lp-lang>summary::marker{content:''}
.lp-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:212px;max-height:60vh;overflow:auto;
  background:#fff;color:#0b1220;border:1px solid rgba(10,15,25,.12);border-radius:14px;
  box-shadow:0 18px 50px rgba(10,15,25,.24);padding:6px;z-index:9999}
.lp-lang-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:inherit;text-decoration:none;font-weight:600;font-size:14px}
.lp-lang-menu a:hover{background:rgba(10,15,25,.06)}
.lp-lang-menu a.on{background:rgba(10,15,25,.08)}
.lp-lang-menu .nv-lang-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-lang-menu .nv-lang-code{font-size:11px;font-weight:800;opacity:.5;letter-spacing:.04em}
@media(prefers-color-scheme:dark){
  .lp-lang-menu{background:#131a22;color:#e8edf2;border-color:#232d38}
  .lp-lang-menu a:hover{background:rgba(255,255,255,.07)}
  .lp-lang-menu a.on{background:rgba(255,255,255,.1)}
}
html[dir="rtl"] .lp-lang-menu{right:auto;left:0}
/* mobile: bottom sheet */
@media(max-width:560px){
  .lp-lang-menu{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;min-width:0;max-height:72vh;
    border-radius:18px 18px 0 0;padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -18px 50px rgba(10,15,25,.35)}
  .lp-lang-menu a{padding:13px 12px}
}
