/* ============================================================
   AI CALLER — RTL
   Loaded only on Arabic pages. Most of the layout uses flex,
   grid and logical properties and mirrors on its own, so this
   file only patches the places that used physical directions
   or direction-carrying glyphs and animations.
   ============================================================ */

html[dir="rtl"] body{
  font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',var(--font-body);
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .logo,html[dir="rtl"] .price-amt,html[dir="rtl"] .roi-big,
html[dir="rtl"] .stat b,html[dir="rtl"] .pcard-metric{
  font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',var(--font-display);
  letter-spacing:0;
}
html[dir="rtl"] .mono,html[dir="rtl"] .eyebrow,html[dir="rtl"] .pill,
html[dir="rtl"] .panel-key,html[dir="rtl"] .ftr-col h5,html[dir="rtl"] .lc-who,
html[dir="rtl"] .lc-title,html[dir="rtl"] .lc-actions-label,html[dir="rtl"] .crumb,
html[dir="rtl"] .icard-tag,html[dir="rtl"] .int span,html[dir="rtl"] .ichip span,
html[dir="rtl"] .spec h4,html[dir="rtl"] .marq-label,html[dir="rtl"] .step-n,
html[dir="rtl"] .roi-val,html[dir="rtl"] .trust-item span,html[dir="rtl"] .phero-meta span{
  font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',var(--font-mono);
  letter-spacing:0;
}

html[dir="rtl"] .skip-link{left:auto;right:var(--s-s)}

/* Arrows and direction-carrying glyphs */
html[dir="rtl"] .btn-arrow,
html[dir="rtl"] .ia,
html[dir="rtl"] .lc-btn svg{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .btn-arrow{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] a.icard:hover .ia{transform:scaleX(-1) translateX(3px)}
html[dir="rtl"] .icard .ia{animation:nudge-x-rtl 4.5s var(--ease-soft) infinite}
@keyframes nudge-x-rtl{0%,72%,100%{transform:scaleX(-1) translateX(0)}82%{transform:scaleX(-1) translateX(4px)}}

/* Nav and mega menu */
html[dir="rtl"] .nav{margin-inline:auto}
html[dir="rtl"] .mega{left:50%;transform:translateX(-50%) translateY(-6px)}
html[dir="rtl"] .nav-item.open .mega{transform:translateX(-50%) translateY(0)}

/* Marquees: reverse the travel so text still reads into the page */
html[dir="rtl"] .marq-track{animation-name:marq-rev}
html[dir="rtl"] .marq-track--rev{animation-name:marq}
html[dir="rtl"] .imarq-track{animation-name:marq-rev}
html[dir="rtl"] .imarq--rev .imarq-track{animation-name:marq}

/* Rails, timelines and progress that were anchored left */
html[dir="rtl"] .flow{padding-left:0;padding-right:var(--s-xl)}
html[dir="rtl"] .flow::before,html[dir="rtl"] .flow::after{left:auto;right:11px}
html[dir="rtl"] .flow-item::before{left:auto;right:calc(-1 * var(--s-xl) + 6px)}
html[dir="rtl"] .flow-item > *{transform:translateX(10px)}
html[dir="rtl"] .flow.in .flow-item > *{transform:none}

html[dir="rtl"] .step::after{left:auto;right:0}
html[dir="rtl"] .spec::after{left:auto;right:0}
html[dir="rtl"] .faq details::before{left:auto;right:0}
html[dir="rtl"] .faq details:hover,html[dir="rtl"] .faq details[open]{padding-left:0;padding-right:var(--s-s)}
html[dir="rtl"] .lc-progress-bar{left:auto;right:0}
html[dir="rtl"] .callout{border-left:none;border-right:3px solid var(--amber)}
html[dir="rtl"] .proof-note{border-left:none;border-right:2px solid var(--amber);padding-left:0;padding-right:var(--s-s)}
html[dir="rtl"] .ftr-col h5{padding-left:0;padding-right:14px}
html[dir="rtl"] .ftr-col h5::before{left:auto;right:0;transform-origin:right}
html[dir="rtl"] .ftr-col a:hover{transform:translateX(-2px)}
html[dir="rtl"] .price:hover li{transform:translateX(-3px)}
html[dir="rtl"] .cmp li{transform:translateX(8px)}
html[dir="rtl"] .compare.in .cmp li{transform:none}
html[dir="rtl"] .versus-col + .versus-col{border-left:none;border-right:1px solid var(--ink-12)}

/* Table and panel edges */
html[dir="rtl"] .panel-val{text-align:left}
html[dir="rtl"] .roi-inputs{border-right:none;border-left:1px solid var(--ink-12)}
@media (max-width:900px){html[dir="rtl"] .roi-inputs{border-left:none}}
html[dir="rtl"] .lc-talk{border-right:none;border-left:1px solid var(--ink-12)}
@media (max-width:820px){html[dir="rtl"] .lc-talk{border-left:none}}
html[dir="rtl"] .lc-out-item{border-right:none;border-left:1px solid var(--ink-12)}
html[dir="rtl"] .lc-out-item:last-child{border-left:none}
html[dir="rtl"] .lc-scenarios{margin-left:0;margin-right:auto}

/* Sweeps travel the other way */
html[dir="rtl"] .sweep::after,html[dir="rtl"] .cmp--win::after,
html[dir="rtl"] .fcard::before,html[dir="rtl"] .pcard::after,
html[dir="rtl"] .price--best::after,html[dir="rtl"] .panel::after,
html[dir="rtl"] .ftr-badge::after{animation-name:sweep-x-rtl}
@keyframes sweep-x-rtl{0%{left:130%}55%,100%{left:-60%}}
html[dir="rtl"] .seci::after{animation-name:stream-x-rtl}
@keyframes stream-x-rtl{from{left:100%}to{left:-34%}}
html[dir="rtl"] .step .step-pulse{animation-name:pulse-travel-rtl}
@keyframes pulse-travel-rtl{0%{left:100%;opacity:0}4%{opacity:1}22%{left:-12%;opacity:0}100%{left:-12%;opacity:0}}

/* Numbers and money stay in logical order inside Arabic text */
html[dir="rtl"] .price-amt,html[dir="rtl"] .roi-big,html[dir="rtl"] .roi-val,
html[dir="rtl"] .stat b,html[dir="rtl"] .trust-item b,html[dir="rtl"] .phero-meta b,
html[dir="rtl"] .lc-out-item strong,html[dir="rtl"] .roi-stat b{
  direction:ltr;unicode-bidi:embed;display:inline-block}

/* Price amount anchors to the logical start (right) of the card */
html[dir="rtl"] .price-amt{direction:rtl;text-align:right}

/* Toggle switch mirrors */
html[dir="rtl"] .pt-switch::after{left:auto;right:3px}
html[dir="rtl"] .pt-switch[aria-checked="true"]::after{transform:translateX(-22px)}

/* Language switcher menu anchors to the other edge */
html[dir="rtl"] .lang-menu{right:auto;left:0}

/* the shader field flows left-to-right; mirror it for Arabic */
.cta-canvas{transform:scaleX(-1)}