/* Fiqrah product demo — Arabic (Saudi) RTL layer for fq-demo.ar.js.
   Load AFTER fq-demo.css (and after fiqrah-ar.css on /ar/). Everything is scoped to html[dir=rtl].
   Source file (hand-written); ar/src/build_demo_ar.py writes the hashed copy fq-demo-ar.<sha8>.css.
   Font files (IBM Plex Sans Arabic 400-700) come from fiqrah-ar-fonts.css on the Arabic page. */

/* ---------- font: Arabic never letter-spaced or slanted ---------- */
html[dir=rtl] .fqd,html[dir=rtl] .fqd-back,html[dir=rtl] .fqt-steps li,html[dir=rtl] .fqt-cap,html[dir=rtl] .fqt-note,html[dir=rtl] .fqd-phone{
  font-family:'IBM Plex Sans Arabic',Inter,system-ui,sans-serif;letter-spacing:0;font-feature-settings:normal}
html[dir=rtl] .fqd *,html[dir=rtl] .fqd-back,html[dir=rtl] .fqt-steps li,html[dir=rtl] .fqt-cap,html[dir=rtl] .fqt-cap *,html[dir=rtl] .fqd-phone *{letter-spacing:0!important}
html[dir=rtl] .fqd i,html[dir=rtl] .fqd em{font-style:normal}
html[dir=rtl] .fqd{text-align:right}
html[dir=rtl] .fqd-phone{text-align:right}
/* numbers, times and ⌘K stay in Latin digits/order */
html[dir=rtl] .fqd-srch kbd{font-family:Inter,system-ui,sans-serif}

/* Arabic needs a little more line height than the Latin design; pin p heights (fiqrah-ar.css sets .fq p{line-height:1.75}) */
html[dir=rtl] .fqd .fqd-ban p{line-height:20px}
html[dir=rtl] .fqd .fqd-cv p{line-height:19px}
html[dir=rtl] .fqd .fqd-tl p{line-height:20px}
html[dir=rtl] .fqd.m .fqd-tl p{line-height:19px}
html[dir=rtl] .fqd-phone .it p{line-height:17px}
html[dir=rtl] .fqt p.fqt-cap{line-height:27px}
html[dir=rtl] .fqt p.fqt-note{line-height:20px}
html[dir=rtl] .fqd-tip{line-height:19px}

/* directional icons */
html[dir=rtl] .fqd-i[data-i=send],html[dir=rtl] .fqd-i[data-i=panel]{transform:scaleX(-1)}

/* ---------- sidebar ---------- */
html[dir=rtl] .fqd-sb{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .fqd-brand{padding:0 16px 0 12px}
html[dir=rtl] .fqd.c .fqd-brand{padding:0}
html[dir=rtl] .fqd-srch kbd{margin-left:0;margin-right:auto}
html[dir=rtl] .fqd-it .bd{margin-left:0;margin-right:auto}

/* ---------- header / top bar ---------- */
html[dir=rtl] .fqd-hd{padding:0 24px 0 20px}
html[dir=rtl] .fqd.c .fqd-hd,html[dir=rtl] .fqd.m .fqd-hd{padding:0 14px}
html[dir=rtl] .fqd-hb .dot{right:auto;left:7px}
html[dir=rtl] .fqd.m .fqd-mi .dot{right:auto;left:6px}
html[dir=rtl] .fqd-toast{right:auto;left:20px}
html[dir=rtl] .fqd.m .fqd-toast{left:12px;right:12px}

/* ---------- dashboard ---------- */
html[dir=rtl] .fqd-ban{background:radial-gradient(90% 140% at 100% 10%,rgba(226,62,205,.95) 0%,rgba(226,62,205,0) 60%),radial-gradient(60% 120% at 28% 40%,rgba(166,170,245,.9) 0%,rgba(166,170,245,0) 70%),linear-gradient(260deg,#e248cf 0%,#f478bf 26%,#f99db8 44%,#e6a3d6 58%,#b2aef2 74%,#a6c9f6 88%,#a2edf8 100%)}
html[dir=rtl] .fqd-ban h4{line-height:30px}
html[dir=rtl] .fqd-st{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .fqd-st:last-child{border-left:0}
html[dir=rtl] .fqd.c .fqd-st:nth-child(2),html[dir=rtl] .fqd.m .fqd-st:nth-child(2n){border-left:0}
html[dir=rtl] .fqd-st em i{margin-left:0;margin-right:5px;display:inline-block;direction:ltr}
html[dir=rtl] .fqd-stg div{grid-template-columns:90px 1fr 74px}
html[dir=rtl] .fqd-stg b{text-align:left}
html[dir=rtl] .fqd-bars span{white-space:nowrap}

/* ---------- inbox ---------- */
html[dir=rtl] .fqd-cl{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .fqd.m .fqd-cl{border-left:0}
html[dir=rtl] .fqd-cv.on::before{left:auto;right:0;border-radius:3px 0 0 3px}
/* four filter tabs must fit the 230px compact list */
html[dir=rtl] .fqd-tabs span{white-space:nowrap}
html[dir=rtl] .fqd.c .fqd-tabs{gap:2px;padding:10px 8px}
html[dir=rtl] .fqd.c .fqd-tabs span{padding:4px 6px}
html[dir=rtl] .fqd-cp{border-left:0;border-right:1px solid var(--line)}
/* phone: the thread sits to the left of the list and slides in from the left */
html[dir=rtl] .fqd.m .fqd-ib.th .fqd-cl,html[dir=rtl] .fqd.m .fqd-ib.th .fqd-th{transform:translateX(100%)}

/* ---------- voice agent ---------- */
html[dir=rtl] .fqd-ag{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .fqd-ag .st{margin-left:0;margin-right:auto}
html[dir=rtl] .fqd-acts{border-left:0;border-right:1px solid var(--line)}
html[dir=rtl] .fqd.m .fqd-acts{border-right:0}
html[dir=rtl] .fqd-tr:empty::before{content:"يظهر نص المكالمة هنا فور الرد عليها."}

/* ---------- pipeline ---------- */
html[dir=rtl] .fqd-col .h{padding:8px 13px 8px 10px}
html[dir=rtl] .fqd-col .h::before{left:auto;right:0}
html[dir=rtl] .fqd-dc.ghost{transform:rotate(-2deg)}

/* ---------- calendar: hour gutter on the right, days run right to left ---------- */
html[dir=rtl] .fqd-grid .dh{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:10px}
html[dir=rtl] .fqd-grid .hr{text-align:left;padding:2px 0 0 8px}
html[dir=rtl] .fqd.m .fqd-grid .hr{padding-right:0;padding-left:5px}
html[dir=rtl] .fqd-grid .cell{border-left:0;border-right:1px solid var(--line)}
html[dir=rtl] .fqd-ev{border-left-width:1px;border-right-width:3px}
html[dir=rtl] .e-pu{border-color:#dcd6ff #673de6 #dcd6ff #dcd6ff}
html[dir=rtl] .e-gr{border-color:#cdeee5 #14998a #cdeee5 #cdeee5}
html[dir=rtl] .e-or{border-color:#ffe2c7 #e2621f #ffe2c7 #ffe2c7}
/* compact (3 days) and phone (2 days): the JS hides the extra day headers and events but each hour row still
   has 5 cells, which wrapped the grid out of line (same in the English build). Drop the hidden days' cells.
   Children: corner, 5 day headers, then per hour: label + 5 cells -> day d of a row is child 6n+8+d. */
html[dir=rtl] .fqd.c .fqd-grid .cell:nth-child(6n+11),html[dir=rtl] .fqd.c .fqd-grid .cell:nth-child(6n+12){display:none}
html[dir=rtl] .fqd.m .fqd-grid{grid-template-columns:40px repeat(2,1fr)}
html[dir=rtl] .fqd.m .fqd-grid .cell:nth-child(6n+10){display:none}

/* ---------- automation ---------- */
html[dir=rtl] .fqd-aut{left:auto;right:18px}
html[dir=rtl] .fqd.m .fqd-aut{left:auto;right:12px}
html[dir=rtl] .fqd-stats-mini{right:auto;left:18px}
html[dir=rtl] .fqd-stats-mini b{margin-left:0;margin-right:4px}
html[dir=rtl] .fqd-node .ok{margin-left:0;margin-right:auto}

/* ---------- callouts (positioned by JS from the right edge) ---------- */
html[dir=rtl] .fqd-tip.t::after,html[dir=rtl] .fqd-tip.b::after{left:auto;right:22px}

/* ---------- hero deck ---------- */
html[dir=rtl] .fqd-back::after{margin-left:0;margin-right:auto}

/* ---------- scroll tour ---------- */
html[dir=rtl] .fqt-steps li u{left:auto;right:0}
html[dir=rtl] .fqt-steps li .n{font-family:Inter,system-ui,sans-serif}
@media (max-width:700px){
  html[dir=rtl] .fqt-steps{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 18px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(270deg,transparent 0,#000 18px,#000 calc(100% - 36px),transparent)}
}
@media (max-width:760px){html[dir=rtl] .fqt p.fqt-cap{line-height:24px}}

/* ---------- final CTA: app on the left, phone on the left edge ---------- */
html[dir=rtl] .q-fin .dev .fqd-fin{left:120px;right:0}
html[dir=rtl] .fqd-phone{right:auto;left:20px}
@media (max-width:760px){html[dir=rtl] .fqd-phone{left:50%;right:auto;margin-left:-120px}}

/* ---------- modal close button ---------- */
html[dir=rtl] .q-modal .x{right:auto;left:-6px}