@charset "UTF-8";
/* =====================================================================
   NAFDAK — Arabic (RTL) layer.
   Loaded ONLY by /ar/* pages, after styles.css. Everything here is either
   a direction flip or an Arabic typography rule; no new components.
   ===================================================================== */

:root{
  --ff-ar:"IBM Plex Sans Arabic","Plus Jakarta Sans","Segoe UI",Tahoma,Arial,sans-serif;
}

html[dir="rtl"] body{
  font-family:var(--ff-ar);
  line-height:1.78;              /* Arabic needs more leading than Latin */
  letter-spacing:0;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3{
  letter-spacing:0;line-height:1.35;font-weight:700;
}
html[dir="rtl"] .h1,html[dir="rtl"] .hero h1{line-height:1.3}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .crumb,html[dir="rtl"] .num,
html[dir="rtl"] .promo-badge,html[dir="rtl"] table.mk th,html[dir="rtl"] table.cmp th{
  letter-spacing:0;                /* tracked-out capitals are a Latin device */
}

/* ---- numbers, tickers, prices and codes stay left-to-right ---- */
html[dir="rtl"] .tick,
html[dir="rtl"] .ticker-row,
html[dir="rtl"] .mk-px,
html[dir="rtl"] .mk-range,
html[dir="rtl"] .tw-price,
html[dir="rtl"] .tw-axis,
html[dir="rtl"] .tw-times,
html[dir="rtl"] .tw-hl,
html[dir="rtl"] .ph-list,
html[dir="rtl"] .ph-status,
html[dir="rtl"] .marquee-track,
html[dir="rtl"] .js-stamp,
html[dir="rtl"] .odo-in,
html[dir="rtl"] [data-count],
html[dir="rtl"] .promo-pct,
html[dir="rtl"] .acc-meta b,
html[dir="rtl"] .val,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .mini b,
html[dir="rtl"] .sg b,
html[dir="rtl"] .num-val{direction:ltr;unicode-bidi:isolate}
/* a bare RTL paragraph mirrors "<" into ">" — stat figures must stay LTR */

/* ---- hero device mockup: mirror the laptop/phone composition ---- */
html[dir="rtl"] .laptop{margin-left:0;margin-right:26%}
html[dir="rtl"] .phone{left:auto;right:0}
html[dir="rtl"] .tfs{margin-left:0;margin-right:auto}
html[dir="rtl"] .tw-hl{margin-left:0;margin-right:auto}
html[dir="rtl"] .tw-head{padding:2px 8px 10px 4px}
html[dir="rtl"] .tw-price{padding:10px 8px 4px 4px}
html[dir="rtl"] .ph-list .vals{margin-left:0;margin-right:auto;text-align:left}
html[dir="rtl"] .ph-list .nm-s{text-align:right}
@media (max-width:980px){
  html[dir="rtl"] .laptop{margin-left:0;margin-right:24%}
}
@media (max-width:680px){
  html[dir="rtl"] .laptop{margin-right:0}
}

/* ---- tables read right-to-left ---- */
html[dir="rtl"] table.cmp th,html[dir="rtl"] table.cmp td,
html[dir="rtl"] table.mk th,html[dir="rtl"] table.mk td{text-align:right}
html[dir="rtl"] table.mk td.mk-px,html[dir="rtl"] table.mk td.mk-chg,
html[dir="rtl"] table.mk td.mk-range,html[dir="rtl"] table.mk td.mk-spark{text-align:left}
html[dir="rtl"] .tick:last-child{border-right:1px solid var(--line);border-left:0}

/* ---- decoration that sat on a specific edge ---- */
html[dir="rtl"] .media-badge{right:auto;left:-14px}
@media (max-width:680px){html[dir="rtl"] .media-badge{left:8px;right:auto}}
html[dir="rtl"] .nav a::after{transform-origin:right}
html[dir="rtl"] #scrollbar{transform-origin:right}
html[dir="rtl"] .rv-left{transform:translateX(26px)}
html[dir="rtl"] .rv-right{transform:translateX(-26px)}
@media (max-width:980px){html[dir="rtl"] .rv-left,html[dir="rtl"] .rv-right{transform:translateY(18px)}}

/* ---- arrows point the way the language reads ---- */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .tlink svg,
html[dir="rtl"] .promo-go svg{transform:scaleX(-1)}
html[dir="rtl"] .tlink:hover svg{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] .btn-primary::after{left:auto;right:-60%;transform:translateX(140%)}   /* rest outside the button */
html[dir="rtl"] .btn-primary:hover::after{transform:translateX(-420%)}

/* ---- promotion: mirror the shine sweep ---- */
html[dir="rtl"] .promo-shine{left:auto;right:0;animation-name:promoShineRtl}
@keyframes promoShineRtl{
  0%{transform:translateX(160%) skewX(14deg)}
  55%,100%{transform:translateX(-360%) skewX(14deg)}
}
@media (prefers-reduced-motion:reduce){html[dir="rtl"] .promo-shine{animation:none;opacity:0}}

/* ---- language switch shows Latin text on the Arabic side ---- */
html[dir="rtl"] .langsw span{font-family:"Plus Jakarta Sans",sans-serif}

/* ---- Arabic body copy sizing ---- */
html[dir="rtl"] .lead{font-size:17px}
html[dir="rtl"] .fp p,html[dir="rtl"] .tile p,html[dir="rtl"] .acc .desc{font-size:15.5px;line-height:1.8}
html[dir="rtl"] .risk p{line-height:1.85}
html[dir="rtl"] .promo-copy > span{line-height:1.65}

/* ---- the "most popular" ribbon is CSS-generated, so it needs its own Arabic ---- */
html[dir="rtl"] .acc.pop::before{content:"الأكثر طلباً"}
/* Latin tracking pulls Arabic letters apart and breaks their joining */
html[dir="rtl"] .acc.pop::before{letter-spacing:0;font-size:12px;font-weight:600}

/* =====================================================================
   2026-09-13 - phone UI pass, Arabic side
   ===================================================================== */

/* numbers sit next to their Arabic label and icon, not at the far edge */
html[dir="rtl"] .mini b,html[dir="rtl"] .sg b{text-align:right}
/* the spread figure reads number-then-unit and aligns with the rest of the card */
html[dir="rtl"] .acc .val{direction:rtl;unicode-bidi:normal;text-align:right}

/* market table: a minus sign rendered on the wrong side ("0.10%-") */
html[dir="rtl"] .mk-chg{direction:ltr;unicode-bidi:isolate}
/* number column headings line up with their left-aligned numbers */
html[dir="rtl"] table.mk th:not(:first-child){text-align:left}

/* email and phone are typed left-to-right; RTL scrambled "name@gmail." into ".name@gmail" */
html[dir="rtl"] .field input[type="email"],
html[dir="rtl"] .field input[type="tel"]{direction:ltr;text-align:right}

/* ticker: the LIVE label divider belongs between the label and the prices */
html[dir="rtl"] .tick-live{padding:14px 0 14px 16px;border-right:0;border-left:1px solid var(--line)}

@media (max-width:680px){
  html[dir="rtl"] #calendar table.cmp td:nth-child(2)::after{content:" \063A\0631\064A\0646\062A\0634"}
  html[dir="rtl"] #calendar table.cmp td:nth-child(5)::before{content:"\0627\0644\0623\062B\0631\003A\0020"}

  html[dir="rtl"] #compare table.cmp th:first-child,
  html[dir="rtl"] #compare table.cmp td:first-child{left:auto;right:0;box-shadow:-1px 0 0 var(--line)}
  html[dir="rtl"] #compare .tablewrap{background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/40px 100% no-repeat local,
    linear-gradient(to right,rgba(79,70,229,.16),rgba(79,70,229,0)) left center/18px 100% no-repeat scroll,
    #fff}

  /* Arabic glyphs at 11.5-12px read far smaller than tracked Latin capitals */
  html[dir="rtl"] .eyebrow,html[dir="rtl"] .crumb,html[dir="rtl"] .tile .num{font-size:14px}
  html[dir="rtl"] .acc.pop::before{font-size:13px}
}