/* ==========================================================================
   AZHA — Arabic / right-to-left layer. Loaded after azha.css on pages with dir="rtl".
   Arabic type: Tajawal (brand guideline), no letter-spacing, taller line height.
   ========================================================================== */
[dir=rtl]{
  --f-display:"Tajawal","Segoe UI",Tahoma,sans-serif;
  --f-body:"Tajawal","Segoe UI",Tahoma,sans-serif;
  --fs-body:17px;
  --fs-lead:19px;
}
[dir=rtl] body{line-height:1.85}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{line-height:1.4;font-weight:800}
[dir=rtl] .display{line-height:1.3;letter-spacing:0}
[dir=rtl] .h2{line-height:1.35}
[dir=rtl] .msg-p{line-height:1.75;font-weight:700}
[dir=rtl] .eyebrow,[dir=rtl] .tag,[dir=rtl] .hub-step,[dir=rtl] .num,[dir=rtl] .dd-tag,[dir=rtl] .dl-r dt,
[dir=rtl] .proof-k,[dir=rtl] .counter,[dir=rtl] .logo-slot{letter-spacing:0;text-transform:none}
[dir=rtl] .eyebrow{font-size:16px}
[dir=rtl] .tag,[dir=rtl] .hub-step{font-size:12px}

/* Directional icons point the reading way */
[dir=rtl] .bi svg,[dir=rtl] .btn-ghost svg,[dir=rtl] .hub-go svg,[dir=rtl] .circ svg,[dir=rtl] .side-links svg{transform:scaleX(-1)}
[dir=rtl] .btn-ghost:hover svg,[dir=rtl] .hub-card:hover .hub-go svg{transform:scaleX(-1) translateX(3px)}

/* Mirrored positions */
[dir=rtl] .skip{left:auto;right:12px}
[dir=rtl] .dd-menu{left:auto;right:-8px}
[dir=rtl] .banner::before{background:linear-gradient(270deg,rgba(16,31,80,.96) 20%,rgba(16,31,80,.72) 60%,rgba(16,31,80,.45))}
[dir=rtl] .orb .ring{inset:-6% 14% 14% -6%}
[dir=rtl] .orb::before{background:linear-gradient(160deg,rgba(16,31,80,0) 45%,rgba(16,31,80,.5))}
[dir=rtl] .pill-stat{left:auto;right:-8%;padding:10px 10px 10px 22px}
[dir=rtl] .about-art .pill-stat{right:auto;left:0}
[dir=rtl] .about-art .orb{inset:0 0 10% 10%}
[dir=rtl] .steps li::before{left:-28px;right:44px}
[dir=rtl] .sn{left:auto;right:0}
[dir=rtl] .sbar{margin-right:0;margin-left:auto}
[dir=rtl] .sbar i{inset:0 0 0 auto}
[dir=rtl] .vis-art{padding:40px 40px 40px 0}
[dir=rtl] .vis-art::before{inset:0 0 0 30%}
[dir=rtl] .g-art .g1{inset:0 0 18% 30%}
[dir=rtl] .g-art .g2{right:auto;left:0}
[dir=rtl] .course-img .tag{left:auto;right:14px}
[dir=rtl] .foot-base .rule-sm{margin-right:0;margin-left:10px}
[dir=rtl] .tbl th,[dir=rtl] .tbl td{text-align:right}
[dir=rtl] .pc-v{transform:translateX(-50%)}
[dir=rtl] .jstep.on::after{left:auto;right:50%;transform:translateX(50%) rotate(45deg);box-shadow:-2px 2px 0 0 var(--baby)}
[dir=rtl] .pc-plus{left:auto;right:50%;transform:translateX(50%)}

/* Numbers, phone numbers and emails keep left-to-right order */
[dir=rtl] [dir=ltr]{unicode-bidi:isolate}
[dir=rtl] input[type=email],[dir=rtl] input[type=tel]{text-align:right}

@media (max-width:900px){
  [dir=rtl] .m-nav details a{padding:12px 16px 12px 4px}
  [dir=rtl] .pc-v{transform:none;left:auto;right:20px}
  [dir=rtl] .pc-plus{right:auto;left:14px;transform:none}
}
@media (max-width:560px){
  [dir=rtl] .pill-stat{right:0}
  [dir=rtl] .vis-art{padding:24px 24px 24px 0}
}

/* Navigation: CMS icons and sub-menus (mirrored rules) */
[dir=rtl] .nav-ic.flip svg,[dir=rtl] .icon.flip svg{transform:scaleX(-1)}
@media (max-width:900px){
  /* the existing [dir=rtl] .m-nav details a rule is more specific than the nested one: mirror both */
  [dir=rtl] .m-nav details details a{padding:12px 32px 12px 4px}
  [dir=rtl] .m-nav details details>summary{padding:12px 16px 12px 4px}
}