@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@400;500;700&display=swap');

/* Arabic-friendly typefaces in place of the Latin display/body fonts */
:root{
  --display:'Cairo','Fredoka','Poppins',system-ui,sans-serif;
  --body:'Tajawal','Nunito','Poppins',system-ui,sans-serif;
}

html[dir="rtl"] body{direction:rtl;text-align:right}

/* Numbers, macros and the brand wordmark read better left-to-right */
[dir="rtl"] .kcal,
[dir="rtl"] .stat .num,
[dir="rtl"] .fstat b,
[dir="rtl"] .deal .txt{direction:ltr}

/* ---- Hero ---- */
[dir="rtl"] .hero .sub{margin-left:auto;margin-right:0}
/* flip the darkening scrim so the dark/legible side sits on the right (text side) */
[dir="rtl"] .hero .scrim{
  background:
    linear-gradient(270deg,rgba(30,18,6,.82) 0%,rgba(30,18,6,.55) 36%,rgba(30,18,6,.15) 68%,rgba(30,18,6,0) 100%),
    linear-gradient(0deg,rgba(30,18,6,.5) 0%,rgba(30,18,6,0) 42%),
    radial-gradient(120% 100% at 70% 40%,transparent 55%,rgba(20,12,4,.35) 100%)}
[dir="rtl"] .hero .vbadge{right:auto;left:20px}

/* ---- Plans banner: copy block moves to the right ---- */
[dir="rtl"] .plansbanner .ptext{left:auto;right:0}
[dir="rtl"] .plansbanner .pin{right:auto;left:18px}
[dir="rtl"] .plansbanner .pscrim{
  background:linear-gradient(270deg,rgba(40,25,10,.7) 0%,rgba(40,25,10,.35) 45%,rgba(40,25,10,.05) 80%)}

/* ---- How-it-works: number badge mirrors to the right ---- */
[dir="rtl"] .hstep .badge{left:auto;right:-8px}

/* ---- Decorative photo pins flip corners ---- */
[dir="rtl"] .etile .pin,
[dir="rtl"] .gimg .pin,
[dir="rtl"] .cmpphoto .pin,
[dir="rtl"] .plansbanner .pbg .pin{right:auto;left:14px}
[dir="rtl"] .loopbadge{left:auto;right:16px}
[dir="rtl"] .mcard .pic .ph,
[dir="rtl"] .hstep .img .pin{right:auto;left:10px}

/* ---- Floating WhatsApp button to the left in RTL ---- */
[dir="rtl"] .wafloat{right:auto;left:22px}
@media(max-width:560px){[dir="rtl"] .wafloat{right:auto;left:16px}}

[dir="rtl"] .marq,
[dir="rtl"] .scroller,
[dir="rtl"] .track{direction:ltr}
[dir="rtl"] .marq .run span,
[dir="rtl"] .mcard,
[dir="rtl"] .quote{direction:rtl;text-align:right}

[dir="rtl"] .footbottom .meta{direction:rtl}

[dir="rtl"] .ab-collage .doodle{
  font-family:'Cairo','Tajawal',sans-serif;
  font-weight:700;font-size:28px;letter-spacing:0;
  transform:rotate(-5deg)}

[dir="rtl"] .getbadge b{font-size:11px;font-weight:700;letter-spacing:0;margin-bottom:2px}
[dir="rtl"] .getbadge i{direction:ltr;font-size:19px}
[dir="rtl"] .footsocial .getbadge{margin-left:0;margin-right:auto}

[dir="rtl"] .navbar{padding:9px 22px 9px 9px}
@media(max-width:768px){[dir="rtl"] .navbar{padding:8px 16px 8px 8px}}
[dir="rtl"] .navbar .brand::after{right:-8px;top:-7px}
[dir="rtl"] .navbar .brand:hover::after{transform:rotate(18deg)}

/* hero CTA arrows point the other way (left) in RTL */
[dir="rtl"] .btn .barr{transform:scaleX(-1)}
/* same for the footer's "see the plans" button, which every Arabic page carries */
[dir="rtl"] footer.ft .ft-btn svg{transform:scaleX(-1)}

/* review source badge sits top-left in RTL */
[dir="rtl"] .qsrc{right:auto;left:24px}

[dir="rtl"] .bandtext{line-height:1.45;letter-spacing:normal;font-size:clamp(24px,4.4vw,48px)}
[dir="rtl"] .bandtext .ln{margin-block:.06em}