/* Fiqrah front — Arabic (Saudi) RTL layer. Loaded after fiqrah.css (+ fiqrah-ar-fonts.css) on /ar/ only.
   Headings: Cairo. Everything else: IBM Plex Sans Arabic (same pair as the Arabic GHL page). */

/* ---------- fonts ---------- */
html[dir=rtl]{
  --head:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --jak:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --inter:"IBM Plex Sans Arabic",Inter,system-ui,sans-serif;
  --mono:"IBM Plex Sans Arabic","Sometype Mono",ui-monospace,monospace;
  --ar:"IBM Plex Sans Arabic",Inter,sans-serif;
}
html[dir=rtl] .fq{font-family:var(--inter);font-feature-settings:normal}
/* Cairo only on headings and display numbers; small UI labels that used --jak go back to Plex */
html[dir=rtl] .fq h1,html[dir=rtl] .fq h2,html[dir=rtl] .fq h3,html[dir=rtl] .fq h4,html[dir=rtl] .q-xl,html[dir=rtl] .q-ai2,
html[dir=rtl] .q-roi .n,html[dir=rtl] .q-sizes dt,html[dir=rtl] .q-tile .nm{font-family:var(--head);font-feature-settings:normal}
html[dir=rtl] .q-cell,html[dir=rtl] .fq .q-btn,html[dir=rtl] .q-fcols h5,html[dir=rtl] .q-banner .bl{font-family:var(--inter)}
/* Arabic must never be letter-spaced or slanted (breaks joining). Logo wordmarks keep their own styling. */
html[dir=rtl] .fq *:not(.lgw):not(.lgw *),html[dir=rtl] .q-playcur *,html[dir=rtl] .q-modal *{letter-spacing:0!important}
html[dir=rtl] .fq i,html[dir=rtl] .fq em{font-style:normal}
html[dir=rtl] .q-brain h2 em{padding-right:0;padding-left:6px}
html[dir=rtl] .q-xl{background-image:linear-gradient(270deg,#202020,#8f8f8f)}
html[dir=rtl] .q-badge b{white-space:nowrap}
html[dir=rtl] .fq .q-mono,html[dir=rtl] .q-sa__tag,html[dir=rtl] .q-avail span{text-transform:none}

/* Arabic needs taller line boxes than Latin display type */
html[dir=rtl] .q-hero h1{line-height:1.3}
html[dir=rtl] .q-h2,html[dir=rtl] .q-sol-h,html[dir=rtl] .q-scard h3,html[dir=rtl] .q-rate h2,html[dir=rtl] .q-ent h2,
html[dir=rtl] .q-banner h3,html[dir=rtl] .q-nothing h3,html[dir=rtl] .q-only h3,html[dir=rtl] .q-fin h2,html[dir=rtl] .q-ctx3 h3{line-height:1.35}
html[dir=rtl] .q-xl,html[dir=rtl] .q-brain h2{line-height:1.3;padding-bottom:.12em}
html[dir=rtl] .fq p,html[dir=rtl] .q-hero__sub,html[dir=rtl] .q-sub{line-height:1.75}

/* ---------- mirror physical left/right ---------- */
html[dir=rtl] .fq .q-logo{margin-right:0;margin-left:20px}
html[dir=rtl] .q-mega{left:auto;right:-12px}
html[dir=rtl] .q-nav__r{margin-left:0;margin-right:auto}
html[dir=rtl] .q-srch .ai,html[dir=rtl] .q-chat__h .dots,html[dir=rtl] .q-chat__in .tl .snd,html[dir=rtl] .q-models div.on::after,
html[dir=rtl] .q-team .m i,html[dir=rtl] .q-amb .g svg,html[dir=rtl] .q-card .m .v,html[dir=rtl] .q-bdash .w.t em{margin-left:0;margin-right:auto}
html[dir=rtl] .q-m .n small{margin-left:0;margin-right:5px}
@media (min-width:821px){html[dir=rtl] .q-trust .lg{padding-left:0;padding-right:40px}}
/* phones: logo wordmarks are wider than a 3-column cell; in RTL that overflow becomes scrollable on the left */
@media (max-width:820px){html[dir=rtl] .q-trust .lg .lgw{zoom:.78}html[dir=rtl] .q-trust{overflow-x:clip}}
html[dir=rtl] .q-tr::before{left:auto;right:6px}
html[dir=rtl] .q-art .ship{right:auto;left:16px}
html[dir=rtl] .q-tl .dates{padding:0 0 0 50px}
html[dir=rtl] .q-tl .now{left:auto;right:calc(200px + 40%)}
html[dir=rtl] .q-ctx3>div{border-left:0;border-right:1px solid #ececec}
html[dir=rtl] .q-ctx3>div:first-child{border-right:0}
html[dir=rtl] .q-ctx3>div::before{left:auto;right:-1px}
html[dir=rtl] .q-kv{margin-right:0;margin-left:-20px;border-right:1px solid #2a2a2e;border-left:0;border-radius:0 10px 0 0}
html[dir=rtl] .q-amb .s:nth-child(3){padding-left:0;padding-right:40px}
html[dir=rtl] .q-roi>div{padding:20px 0 20px 20px;border-right:0;border-left:1px solid #ececec}
html[dir=rtl] .q-roi>div+div{padding-left:20px;padding-right:22px}
html[dir=rtl] .q-roi>div:last-child{border-left:0}
html[dir=rtl] .tart .fs span{margin-right:0;margin-left:-4px}
html[dir=rtl] .tart .mc b{right:auto;left:30px}
html[dir=rtl] .q-fin .dev .q-app,html[dir=rtl] .q-phone{text-align:right}
/* banner dashboard sits on the left in RTL, text on the right */
html[dir=rtl] .q-bdash{right:auto;left:0;border-radius:0 24px 0 0;border-right:6px solid rgba(255,255,255,.35);border-left:0;box-shadow:20px -10px 40px rgba(0,0,0,.35)}
html[dir=rtl] .q-bdash .q-app__top{transform-origin:100% 50%}
html[dir=rtl] .q-banner .gl{transform:scaleX(-1)}
html[dir=rtl] .fq .q-banner .q-btn{padding:14px 24px 14px 18px}
html[dir=rtl] .q-bdash .w p{font-family:var(--inter);font-size:7px;line-height:10px;color:#55555c;margin-top:4px}
html[dir=rtl] .q-fin .dev .q-app{left:120px;right:0}
html[dir=rtl] .q-phone{right:auto;left:20px}
@media (min-width:821px){html[dir=rtl] .q-banner .tx{max-width:520px}}

/* directional icons point the other way */
html[dir=rtl] .q-ann svg,html[dir=rtl] .q-badge .ch,html[dir=rtl] .q-banner .q-btn svg{transform:scaleX(-1)}
html[dir=rtl] .q-ann:hover svg{transform:scaleX(-1) translateX(2px)}

/* language switch */
.fq .q-nav__r .q-lang{font-family:Inter,system-ui,sans-serif!important;font-weight:600}

/* ---------- mobile ---------- */
html[dir=rtl] body.fq-body{overflow-x:clip}
@media (max-width:820px){
  html[dir=rtl] .q-roi>div{border-left:0;padding:20px 0!important}
  html[dir=rtl] .q-ctx3>div{border-right:0}
  html[dir=rtl] .q-bdash{margin:30px 24px 0 0;left:auto;border-radius:24px 0 0 0;border-right:0;border-left:6px solid rgba(255,255,255,.35)}
  html[dir=rtl] .q-fin .dev .q-app{left:-200px;right:0}
  html[dir=rtl] .q-phone{left:50%;right:auto;margin-left:-120px}
  html[dir=rtl] .q-hero h1{line-height:1.35}
  html[dir=rtl] .q-h2,html[dir=rtl] .q-xl,html[dir=rtl] .q-brain h2,html[dir=rtl] .q-only h3,html[dir=rtl] .q-fin h2{line-height:1.4}
  /* the burger opens a real menu on phones */
  /* .q-nav has backdrop-filter, so it is the containing block: hang the panel off its bottom edge */
  html[dir=rtl] .q-nav.open .q-menu{display:block;position:absolute;top:100%;right:0;left:0;height:calc(100dvh - var(--qnav-b,60px));overflow-y:auto;overscroll-behavior:contain;background:#fff;padding:8px 20px calc(24px + env(safe-area-inset-bottom));z-index:80;box-shadow:0 1px 0 #ececec inset}
  html[dir=rtl] .q-nav.open .q-mi{display:block;height:auto;border-bottom:1px solid #f0f0f2}
  html[dir=rtl] .q-nav.open .q-mi>button,html[dir=rtl] .q-nav.open .q-mi>a{display:flex;width:100%;align-items:center;justify-content:space-between;padding:16px 4px;font-size:17px;font-weight:600;color:#202020;min-height:48px}
  html[dir=rtl] .q-nav.open .q-mega{position:static;display:none;opacity:1;visibility:visible;transform:none;min-width:0;box-shadow:none;padding:0 0 12px;grid-template-columns:1fr}
  html[dir=rtl] .q-nav.open .q-mi.on .q-mega{display:grid}
  html[dir=rtl] .q-nav.open .q-mi.on>button .ch{transform:rotate(180deg)}
  html[dir=rtl] .q-nav.open .q-mob{display:grid}
  html[dir=rtl] .q-mob{display:none;grid-template-columns:1fr 1fr;gap:10px;padding:18px 0 4px}
  html[dir=rtl] .q-mob a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;font-size:16px;font-weight:600;background:#f3f3f5;color:#202020}
  html[dir=rtl] .q-mob a.dk{background:#202020;color:#fff}
  html[dir=rtl] .q-mob a.wide{grid-column:1/-1;background:none;border:1px solid #e6e6ea}
  html[dir=rtl] .q-nav.open .q-burger i{background:transparent;box-shadow:none;position:relative}
  html[dir=rtl] .q-nav.open .q-burger i::before,html[dir=rtl] .q-nav.open .q-burger i::after{content:"";position:absolute;left:0;top:0;width:16px;height:1.5px;background:#202020;transform:rotate(45deg)}
  html[dir=rtl] .q-nav.open .q-burger i::after{transform:rotate(-45deg)}
  html.q-lock,html.q-lock body{overflow:hidden}
}
@media (min-width:821px){html[dir=rtl] .q-mob{display:none}}

/* ---------- 2026-10-31: RTL for the new English sections (FAQ, demo booking, setups, footer accordion) ---------- */
html[dir=rtl] .q-faq__q p{padding:0 0 20px 32px}
html[dir=rtl] .q-demo__tx li{padding:8px 28px 8px 0}
html[dir=rtl] .q-demo__tx li::before{left:auto;right:2px}
html[dir=rtl] .q-ex .cap .kd{letter-spacing:0}
html[dir=rtl] .q-wins .w b{letter-spacing:0}
html[dir=rtl] .q-kv{margin-right:0;margin-left:-20px;border-right:1px solid #2a2a2e;border-left:0;border-radius:0 10px 0 0}
html[dir=rtl] .q-kv span:last-child{direction:rtl}
html[dir=rtl] .q-trust .lg .wk{letter-spacing:0}
html[dir=rtl] .q-playm{padding:0 8px 0 20px}
html[dir=rtl] .q-more,html[dir=rtl] .q-playm,html[dir=rtl] .q-faq__q summary,html[dir=rtl] .q-fcols .fc h5 button{letter-spacing:0}
@media (max-width:820px){html[dir=rtl] .q-rope .q-bub{right:auto!important;left:3%}}