/* =========================================================
   VISIVA Digital – RTL overrides
   Load AFTER style.css:  <link rel="stylesheet" href="css/style-rtl.css">
   Every rule is scoped to [dir="rtl"], so this file has no
   effect on the English (LTR) page.
   ========================================================= */

/* Cairo – self-hosted Arabic font (files in /fonts) */
@font-face{font-family:'Cairo';src:url('../fonts/Cairo-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/Cairo-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/Cairo-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/Cairo-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/Cairo-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/Cairo-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/Cairo-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/Cairo-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}

/* ---------- Base ---------- */
/* Arabic font: Cairo */
[dir="rtl"] body,
[dir="rtl"] button,[dir="rtl"] input,[dir="rtl"] select,[dir="rtl"] textarea{
  font-family:'Cairo','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  text-align:right;
}
[dir="rtl"] body{line-height:1.8}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] .visiva-btn{font-family:'Cairo','Plus Jakarta Sans',sans-serif;letter-spacing:0;line-height:1.35}
[dir="rtl"] .visiva-step small,[dir="rtl"] .visiva-site-footer h4{letter-spacing:0}

/* Charts & diagrams keep their drawn (LTR) layout */
[dir="rtl"] svg{direction:ltr}

/* Phone numbers, e-mail, URLs read left-to-right */
[dir="rtl"] .visiva-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* Arrow icons point the other way */
[dir="rtl"] .visiva-btn > svg:last-child,
[dir="rtl"] .visiva-fi svg,
[dir="rtl"] svg:has(> use[href="#i-arrow"]){transform:scaleX(-1)}
[dir="rtl"] .visiva-btn:hover > svg:last-child{transform:scaleX(-1)}

/* ---------- Header ---------- */
[dir="rtl"] .visiva-dropdown{left:auto;right:-18px}
[dir="rtl"] .visiva-menu.visiva-open{align-items:flex-start}
[dir="rtl"] .visiva-menu.visiva-open .visiva-dropdown{padding:0 12px 0 0}

/* ---------- Hero ---------- */
[dir="rtl"] .visiva-hero::before{right:auto;left:-160px}
[dir="rtl"] .visiva-hero{background:
  radial-gradient(700px 520px at 8% 30%,rgba(30,220,196,.30),transparent 65%),
  radial-gradient(520px 380px at 30% 100%,rgba(30,220,196,.20),transparent 70%),
  linear-gradient(255deg,#FFFFFF 0%,#FFFFFF 44%,#EAF9F6 63%,#B2ECE2 100%)}
[dir="rtl"] .visiva-chip.visiva-c1{left:auto;right:40px}
[dir="rtl"] .visiva-chip.visiva-c2{right:auto;left:-24px}
[dir="rtl"] .visiva-chip.visiva-c3{left:auto;right:0}
[dir="rtl"] .visiva-phone{right:auto;left:10px;transform:rotate(3deg)}
[dir="rtl"] .visiva-desktop{left:auto;right:0}

/* ---------- Cards: hover line grows from the right ---------- */
[dir="rtl"] .visiva-benefit::before,
[dir="rtl"] .visiva-pillar::before,
[dir="rtl"] .visiva-step::before{transform-origin:right}

/* ---------- Quote ---------- */
[dir="rtl"] .visiva-quote{border-left:0;border-right:4px solid var(--primary)}

/* ---------- Included / callout ---------- */
[dir="rtl"] .visiva-callout{text-align:right}

/* ---------- Process steps ---------- */
[dir="rtl"] .visiva-step{text-align:right}
[dir="rtl"] .visiva-step:not(:last-child)::after{right:auto;left:-19px;transform:rotate(-135deg)}

/* ---------- Journey ---------- */
[dir="rtl"] .visiva-stage.visiva-current .visiva-here{right:auto;left:22px}

/* ---------- FAQ ---------- */
[dir="rtl"] .visiva-faq-list summary{text-align:right}

/* ---------- Final CTA background shapes (mirrored) ---------- */
[dir="rtl"] .visiva-s1{left:auto;right:-120px}
[dir="rtl"] .visiva-s2{right:auto;left:-60px}
[dir="rtl"] .visiva-s3{right:auto;left:12%}
[dir="rtl"] .visiva-s4{left:auto;right:14%}
[dir="rtl"] .visiva-s5{left:auto;right:8%}
[dir="rtl"] .visiva-s6{right:auto;left:22%}
[dir="rtl"] .visiva-s7{right:auto;left:6%}
[dir="rtl"] .visiva-s8{left:auto;right:30%}

/* ---------- Footer ---------- */
[dir="rtl"] .visiva-site-footer .visiva-regions span+span{border-left:0;margin-left:0;padding-left:0;border-right:2px solid #C9D3DD;margin-right:14px;padding-right:14px}
[dir="rtl"] .visiva-site-footer .visiva-backed{border-left:0;margin-left:0;padding-left:0;border-right:1px solid #DCE3E8;margin-right:26px;padding-right:26px}
[dir="rtl"] .visiva-site-footer .visiva-backed a{margin-left:0;margin-right:6px}
[dir="rtl"] .visiva-legend i{margin-right:0;margin-left:8px}

@media (max-width:600px){
  [dir="rtl"] .visiva-site-footer .visiva-backed{border:0;margin:6px 0 0;padding:0}
  [dir="rtl"] .visiva-phone{left:0}
  [dir="rtl"] .visiva-chip.visiva-c1{right:0}
  [dir="rtl"] .visiva-chip.visiva-c2{left:0}
}

/* Arabic content tweaks */
[dir="rtl"] .visiva-stage h3 .visiva-stage-ar{display:block;margin-top:6px;font-size:1rem;font-weight:700;letter-spacing:0;color:var(--primary)}
[dir="rtl"] .visiva-cta-final .visiva-cta-lead{white-space:normal}
[dir="rtl"] .visiva-with-label{text-align:center}

/* ---------- Force Cairo everywhere on the Arabic page ----------
   style.css sets several fonts with !important (Plus Jakarta Sans, Manrope,
   Inter, Roboto), so Cairo is applied with !important here.
   Icon fonts (Font Awesome / themify) are left untouched. */
[dir="rtl"] body,
[dir="rtl"] body *:not(i):not([class*="fa-"]):not([class^="ti-"]):not([class*=" ti-"]){
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif !important;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6{letter-spacing:0 !important;line-height:1.4 !important}
[dir="rtl"] .visiva-hero h1{line-height:1.35 !important}

/* Highlighted journey card: heading must stay white (style.css forces all
   headings to dark with !important) */
[dir="rtl"] .visiva-stage.visiva-current h3{color:#fff !important}
[dir="rtl"] .visiva-stage.visiva-current h3 .visiva-stage-ar{color:var(--accent)}

/* ---------- Footer (footer.html) ---------- */
[dir="rtl"] .visiva-footer .col ul li a .nav-ic svg{transform:scaleX(-1)}
[dir="rtl"] .visiva-footer .contact-col .contact-link{direction:rtl}
[dir="rtl"] .visiva-footer .bottom .backed-by{border-left:0;padding-left:0;border-right:1px solid rgba(16,42,67,.14);padding-right:20px}
@media (max-width:767px){[dir="rtl"] .visiva-footer .bottom .backed-by{border-right:0;padding-right:0}}