/* ============================================================
   Saqrion ERP website — Arabic (right-to-left) layer, v1.10.0
   Loaded ONLY by the Arabic pages in /ar/, after neu.css.
   The English pages never load this file, so they are unchanged.
   - IBM Plex Sans Arabic (the font Saqrion ERP uses), bundled
   - mirrors everything in neu.css that is physically left/right
   - mirrors motion that implies direction (sheens, ticker,
     phone carousel, hover nudges); decorative motion is kept
   Page-level <style> blocks in /ar/ pages are already written
   with logical properties when the pages are generated.
   ============================================================ */
@font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2")}

/* ---------- typography ---------- */
html[dir="rtl"]{--font:"IBM Plex Sans Arabic","Inter",-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}
[dir="rtl"] body{line-height:1.75}
/* Arabic is cursive: tracking breaks the joins. Keep the Latin wordmark as designed. */
[dir="rtl"] body *{letter-spacing:0!important}
[dir="rtl"] .brand{letter-spacing:-.5px!important}
[dir="rtl"] .brand .tag{letter-spacing:1.5px!important}
/* no capitals in Arabic; keep Latin names (iPhone, Saqrion) as written */
[dir="rtl"] body *{text-transform:none!important}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{text-wrap:balance}
[dir="rtl"] .hero h1 .accent{white-space:nowrap}
/* Plex Arabic has tall ascenders/dots: give display type room to breathe */
[dir="rtl"] .hero h1{line-height:1.3; font-size:clamp(34px,5.6vw,58px)}
[dir="rtl"] .page-hero h1{line-height:1.35!important}
[dir="rtl"] .appshow h2{line-height:1.3}
[dir="rtl"] .sec-head h2,[dir="rtl"] .band h2,[dir="rtl"] .final h2,[dir="rtl"] .tabpanel h3{line-height:1.4}
[dir="rtl"] .mod-head h2{line-height:1.4}
[dir="rtl"] .eyebrow,[dir="rtl"] .appshow-kicker{font-size:12px; line-height:1.4}
[dir="rtl"] .kpi .lab,[dir="rtl"] .mock .mk small{font-size:10px; line-height:1.4}
[dir="rtl"] .mock .steps span{font-size:9.5px; line-height:1.3}
[dir="rtl"] .mock .pill{line-height:1.2}
[dir="rtl"] footer h4{font-size:12.5px}
/* email, phone and web-address fields are typed left to right */
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="url"]{direction:ltr; text-align:right}
[dir="rtl"] input[type="email"]::placeholder,[dir="rtl"] input[type="tel"]::placeholder,[dir="rtl"] input[type="url"]::placeholder{text-align:right}
/* Latin snippets (codes, prices, versions) keep their own direction inside Arabic lines */
[dir="rtl"] .ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}

/* ---------- header, hero, dashboard ---------- */
[dir="rtl"] .dash .ttl{margin-left:0; margin-right:7px}
[dir="rtl"] nav.main a.lnk::after{transform-origin:right; background:linear-gradient(270deg,var(--c1),var(--c3))}
[dir="rtl"] .hero::before,[dir="rtl"] .page-hero::before{right:auto; left:-80px}
[dir="rtl"] .hero::after,[dir="rtl"] .page-hero::after{left:auto; right:-90px}
[dir="rtl"] .crumbs li + li::before{content:"‹"}

/* primary-button sheen sweeps right to left */
[dir="rtl"] .btn--primary::after{left:auto; right:-60%; transform:skewX(18deg); animation-name:btnsheen-rtl}
@keyframes btnsheen-rtl{0%,72%{right:-60%}100%{right:135%}}

/* directional icons (arrows) */
[dir="rtl"] .flip{transform:scaleX(-1)}

/* ---------- cards ---------- */
[dir="rtl"] .grid3 .mod::before,[dir="rtl"] .fcard::before{background:linear-gradient(270deg,var(--c1),var(--c2) 55%,var(--c3))}
[dir="rtl"] .grid3 .mod:hover .ic{transform:translateY(-3px) rotate(6deg) scale(1.06)}
[dir="rtl"] .strip span:hover .ico{transform:translateY(-3px) rotate(8deg) scale(1.08)}

/* chat mock: my messages sit on the left in a right-to-left chat */
[dir="rtl"] .bub.me{margin-left:0; margin-right:auto}
[dir="rtl"] .bub.me .tk{margin-left:0; margin-right:6px}
[dir="rtl"] .remrow .rep{margin-left:0; margin-right:auto}

/* ---------- "app coming soon" bar ---------- */
[dir="rtl"] .appbar{background:linear-gradient(245deg,#0b1020 0%,#3a0a18 30%,#c0152a 52%,#3a0a18 74%,#0b1020 100%); background-size:300% 100%}
[dir="rtl"] .appbar::after{animation-name:abshine-rtl}
@keyframes abshine-rtl{0%{transform:translateX(100%)}55%,100%{transform:translateX(-100%)}}
[dir="rtl"] .appbar-dot{right:auto; left:-3px}
/* the feature ticker runs left-to-right so each Arabic phrase enters from its beginning */
[dir="rtl"] .appbar-track{animation-name:abticker-rtl}
@keyframes abticker-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ---------- home: app showcase ---------- */
[dir="rtl"] .appshow{background:radial-gradient(120% 90% at 20% 10%,#2a0b18 0%,#0d1222 55%,#070a14 100%)}
[dir="rtl"] .appshow-bg .b1{left:auto; right:-120px}
[dir="rtl"] .appshow-bg .b2{right:auto; left:-80px}
[dir="rtl"] .appshow-bg .b3{right:auto; left:28%}
[dir="rtl"] .appshow-grid-lines{-webkit-mask-image:radial-gradient(70% 70% at 30% 50%,#000,transparent); mask-image:radial-gradient(70% 70% at 30% 50%,#000,transparent)}
[dir="rtl"] .appshow-store{padding:9px 12px 9px 16px}
[dir="rtl"] .appshow-cta::after{animation-name:abshine-rtl}
[dir="rtl"] .appshow-cta:hover span{transform:translateX(-4px)}
/* the phone turns towards the text, which is now on its right */
[dir="rtl"] .appshow-phone{transform:rotateY(14deg) rotateX(6deg)}
/* screen carousel: the next screen slides in from the left */
[dir="rtl"] .appshow-screen img{transform:translateX(-40px) scale(1.04)}
[dir="rtl"] .appshow-screen img.on{transform:none}
[dir="rtl"] .appshow-screen img.out{transform:translateX(40px) scale(.98)}
/* notifications mirror around the phone */
[dir="rtl"] .appshow-note{padding:11px 11px 11px 15px}
[dir="rtl"] .appshow-note.n1{left:auto; right:-10px}
[dir="rtl"] .appshow-note.n2{right:auto; left:-14px}
[dir="rtl"] .appshow-note.n3{left:auto; right:-24px}
[dir="rtl"] .appshow-note.n4{right:auto; left:4px}
@media (max-width:900px){ [dir="rtl"] .appshow-in{text-align:right} }
@media (max-width:520px){
  [dir="rtl"] .appshow-note{padding:9px 9px 9px 12px}
  [dir="rtl"] .appshow-note.n1{right:-4px} [dir="rtl"] .appshow-note.n2{left:-6px}
  [dir="rtl"] .appshow-note.n3{right:-8px} [dir="rtl"] .appshow-note.n4{left:-2px}
}

/* ---------- v1.9 components ---------- */
[dir="rtl"] .mock .mtop b{margin-left:0; margin-right:6px}
[dir="rtl"] .mock-cap{text-align:left}
[dir="rtl"] .ov-img .mock{transform-origin:top right}
[dir="rtl"] .mock .gantt span{background:linear-gradient(270deg,var(--c2),#6f95ef)}
[dir="rtl"] .ticks li{padding-left:0; padding-right:28px}
[dir="rtl"] .ticks li::before{left:auto; right:0}
[dir="rtl"] .ticks li::after{left:auto; right:6px}
[dir="rtl"] .sf{padding:16px 18px 16px 16px}
[dir="rtl"] .m-red .sf h3,[dir="rtl"] .m-teal .sf h3,[dir="rtl"] .m-amber .sf h3{border-left:0; padding-left:0; margin-left:0; padding-right:9px; margin-right:-12px}
[dir="rtl"] .m-red .sf h3{border-right:3px solid var(--c1)}
[dir="rtl"] .m-teal .sf h3{border-right:3px solid var(--c2)}
[dir="rtl"] .m-amber .sf h3{border-right:3px solid var(--c3)}
[dir="rtl"] .mx tbody th{text-align:right}
[dir="rtl"] .agent .badge.ai{background:linear-gradient(250deg,var(--c1),#e0506a 50%,var(--c3))}

/* ---------- legal note on the Arabic partner terms ---------- */
.lang-note{display:flex; gap:12px; align-items:flex-start; margin:0 auto 26px; max-width:860px; padding:16px 18px; border-radius:16px;
  background:#fff4dc; color:#5b3d00; font-size:14.5px; line-height:1.7; box-shadow:var(--in-sm)}
.lang-note b{color:#3d2900}
.lang-note svg{flex:none; width:22px; height:22px; margin-top:3px; color:var(--c3)}

/* ---------- small sample screens: keep short values on one line ---------- */
[dir="rtl"] .spill,[dir="rtl"] .kpi .val{white-space:nowrap}
@media (max-width:520px){ [dir="rtl"] .kpi .val{font-size:18px} }

/* ---------- v1.10.0 Arabic review: small-screen fixes ---------- */
[dir="rtl"] .dash .presence{white-space:nowrap}
@media (max-width:520px){
  /* Arabic labels in the sample screens are longer than the English capitals: let them wrap instead of cutting them off */
  [dir="rtl"] .mock .mk small{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25}
}

/* 1.10.1: hero news pill */
[dir=rtl] .hero-news{padding:7px 7px 7px 14px}
[dir=rtl] .hero-news i{transform:scaleX(-1)}
[dir=rtl] .hero-news b{letter-spacing:0}
/* v1.11.0 — Arabic header with the country switch: keep every link on one line */
@media(min-width:900px) and (max-width:1439px){
  [dir=rtl] nav.main a.lnk{white-space:nowrap; padding:11px 8px}
  [dir=rtl] nav.main a.lnk::after{left:8px; right:8px}
  [dir=rtl] .ccsw{margin-inline:2px 4px}
}