/* ==========================================================================
   HAPI — language picker + right-to-left support (Arabic)
   ========================================================================== */

/* ---------------- language picker ---------------- */
.lang-picker{ position:relative; display:inline-flex; }

.lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:39px; padding:0 12px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line, rgba(22,17,10,.085));
  background:var(--glass, rgba(255,255,255,.62));
  color:var(--text, #16110A);
  font-size:13px; font-weight:550; letter-spacing:-.012em;
  box-shadow:var(--inset-lit, 0 1px 0 rgba(255,255,255,.9) inset);
  transition:all .35s cubic-bezier(.22,.61,.36,1);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.lang-btn:hover{ border-color:var(--accent-line, rgba(227,154,18,.28)); transform:translateY(-1px); }
.lang-btn > svg:first-child{ width:16px; height:16px; opacity:.75; flex:none; }
.lang-code{ font-variant-numeric:tabular-nums; }
.lang-caret{ width:13px; height:13px; opacity:.5; flex:none; transition:transform .35s; }
.lang-picker.open .lang-caret{ transform:rotate(180deg); }

/* landing navbar variant (no app tokens there) */
.nav .lang-btn{ height:36px; padding:0 11px; font-size:12.5px; }

.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:400;
  min-width:190px; padding:7px; border-radius:16px;
  background:var(--panel, #FFFDF9);
  border:1px solid var(--line, rgba(22,17,10,.085));
  box-shadow:0 4px 12px rgba(44,29,10,.06), 0 26px 64px rgba(44,29,10,.16);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transform-origin:top right;
  transition:opacity .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.16,1,.3,1), visibility .3s;
}
.lang-picker.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-menu button{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:9px 11px; border:0; border-radius:11px; cursor:pointer;
  background:transparent; color:var(--text, #16110A);
  font-size:13.5px; font-weight:500; letter-spacing:-.012em; text-align:left;
  transition:background .25s;
}
.lang-menu button:hover{ background:var(--line-2, rgba(22,17,10,.05)); }
.lang-menu button.on{
  background:var(--accent-soft, rgba(227,154,18,.12));
  color:var(--accent, #C97F09); font-weight:620;
}
.lang-menu button svg{ width:14px; height:14px; margin-left:auto; flex:none; }
.lang-flag{ font-size:16px; line-height:1; flex:none; }
.lang-native{ flex:1; min-width:0; }

@media (max-width:860px){
  .lang-btn{ height:42px; min-width:42px; }
  .lang-menu{ min-width:200px; }
  .lang-menu button{ min-height:46px; }
}

/* ==========================================================================
   RIGHT-TO-LEFT (Arabic)
   Logical properties do most of the work; these handle the rest.
   ========================================================================== */
html.rtl body{ direction:rtl; }

/* Arabic reads better slightly larger with more line height */
html.rtl{
  --sans:"Noto Kufi Arabic","Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
}
html.rtl body{ letter-spacing:0; }
html.rtl h1,html.rtl h2,html.rtl h3,html.rtl h4,html.rtl .display,html.rtl .h2,html.rtl .h3{
  letter-spacing:0;
  line-height:1.25;
}
html.rtl .page-head h2,html.rtl .auth-box h1{ line-height:1.22; }

/* ---- app shell mirroring ---- */
html.rtl .side{ inset:0 0 0 auto; border-right:0; border-left:1px solid var(--line); }
html.rtl .side::after{ right:auto; left:0; }
html.rtl .canvas{ margin-left:0; margin-right:var(--rail-w); }
html.rtl .nav-i.on::before{ left:auto; right:-14px; border-radius:3px 0 0 3px; }
html.rtl .nav-i .cnt{ margin-left:0; margin-right:auto; }
html.rtl .user-card svg{ margin-left:0; margin-right:auto; transform:scaleX(-1); }
html.rtl .side-brand small{ margin-left:0; margin-right:auto; }
html.rtl .search{ margin-left:0; margin-right:auto; }
html.rtl .search input{ padding:0 36px 0 34px; }
html.rtl .search .mag{ left:auto; right:13px; }
html.rtl .search kbd{ right:auto; left:10px; }
html.rtl .crumb .sep{ transform:scaleX(-1); }

@media (max-width:1080px){
  html.rtl .side{ transform:translateX(100%); }
  html.rtl .side.open{ transform:none; }
  html.rtl .canvas{ margin-right:0; }
}

/* ---- components ---- */
html.rtl .tbl thead th,
html.rtl .tbl tbody td{ text-align:right; }
html.rtl .tbl .num{ text-align:left; }
html.rtl .tbl .act{ justify-content:flex-start; }
html.rtl .row-v,html.rtl .legend b,html.rtl .stat-spark{ text-align:left; }
html.rtl .stat-spark{ right:auto; left:14px; }
html.rtl .modal-x{ right:auto; left:18px; }
html.rtl .lang-menu{ right:auto; left:0; transform-origin:top left; }
html.rtl .lang-menu button{ text-align:right; }
html.rtl .lang-menu button svg{ margin-left:0; margin-right:auto; }
html.rtl .toast-wrap{ right:auto; left:22px; }
html.rtl .feat-link svg,html.rtl .btn svg.ico,html.rtl .nav-links a svg{ transform:scaleX(-1); }
html.rtl .foot-col a:hover{ transform:translateX(-3px); }
html.rtl .nav-i:hover{ transform:translateX(-2px); }
html.rtl .tl{ padding-left:0; padding-right:26px; }
html.rtl .tl::before{ left:auto; right:7px; }
html.rtl .tl-i::before{ left:auto; right:-23px; }
html.rtl .flow-line{ left:auto; right:27px; }
html.rtl .pw-toggle{ right:auto; left:6px; }
html.rtl .pw-wrap input{ padding-right:15px !important; padding-left:46px !important; }
html.rtl .field svg{ left:auto; right:10px; }
html.rtl .field input,html.rtl .field select{ padding:0 30px 0 12px; }
html.rtl .field .caret{ right:auto; left:9px; }
html.rtl .field.plain input,html.rtl .field.plain select{ padding-right:12px; }
html.rtl .receipt::after{ transform:scaleX(-1); }
html.rtl .plan-badge{ left:50%; }
html.rtl .qa summary i{ margin-left:0; }
html.rtl .eyebrow::before{ order:2; }
html.rtl .split-old .ph{ transform:scaleX(-1); }

/* keep numeric / latin fragments readable inside RTL text */
html.rtl .tnum,html.rtl .mono,html.rtl .stat-v,html.rtl .kpi-v,html.rtl .row-v,
html.rtl .plan-price b,html.rtl .demo-metric b,html.rtl .bcard .bstat{
  direction:ltr; unicode-bidi:embed;
}
html.rtl .tbl .num,html.rtl .rc-total b,html.rtl .prod-num span{ direction:ltr; unicode-bidi:embed; }

/* the marquee should travel the other way */
html.rtl .marq-t{ animation-direction:reverse; }

/* device showcase & hero art stay physically laid out (they're pictures) */
html.rtl .dev-group,html.rtl .stage,html.rtl .auth-preview{ direction:ltr; }
html.rtl .auth-preview{ transform:perspective(1500px) rotateY(13deg) rotateX(5deg); }