/* ==========================================================================
   Right-to-left (Arabic). Loaded after every other theme stylesheet.
   The other stylesheets use logical properties (margin-inline-start, inset-inline-end,
   border-inline-start, text-align: start …), so most of the layout mirrors by itself.
   This file holds only what logical properties can't express: direction-aware transforms
   and gradients, mirrored arrow icons, Arabic typography and left-to-right islands
   (phone numbers, e-mail addresses, figures). Every rule is scoped, so loading this file
   on a left-to-right page changes nothing.
   ========================================================================== */

/* ---------- Arabic typography ----------
   --font-arabic: the Arabic font chosen in Theme Options (output as a CSS variable, e.g.
   :root { --font-arabic: "Cairo"; }). --font-sans-latin: optional Latin fallback stack.
   Headings follow the body font unless --font-arabic-heading is set. */
:root[lang^="ar"],
[dir="rtl"] {
  --font-sans: var(--font-arabic, "IBM Plex Sans Arabic"), "Noto Kufi Arabic", "Noto Sans Arabic", var(--font-sans-latin, "Figtree"), system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-heading: var(--font-arabic-heading, var(--font-sans));
  /* Arabic is a joined script: never track it out or case-transform it */
  --btn-ls: 0;
  --btn-tt: none;
  --eyebrow-case: none;
}

/* No letter-spacing anywhere in Arabic (it breaks the joins between letters): headings,
   eyebrows, labels, buttons, counters. !important because many components set their own. */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after { letter-spacing: 0 !important; }

/* Arabic needs more room for ascenders, dots and diacritics */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] .hero__title,
[dir="rtl"] .hyp-s--faq > h2,
[dir="rtl"] .section--night .hyp-s--band:not(.has-media) h2 { line-height: 1.35; }
[dir="rtl"] h3,
[dir="rtl"] h4 { line-height: 1.45; }
[dir="rtl"] .lead,
[dir="rtl"] .hero__text,
[dir="rtl"] .section-head__text { line-height: 1.75; }

/* ---------- Left-to-right islands ---------- */
/* Utility for numbers, codes, URLs written in the content: <span class="ltr">+971 4 123 4567</span> */
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }

/* Phone and e-mail links whose text is the number / address (optionally after an icon).
   In flex links (icon + text) row-reverse keeps the icon on the right-hand (start) side. */
[dir="rtl"] a[href^="tel:"]:not(.btn, :has(> :not(svg))),
[dir="rtl"] a[href^="mailto:"]:not(.btn, :has(> :not(svg))),
[dir="rtl"] a[href^="sms:"]:not(.btn, :has(> :not(svg))) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] a[href^="tel:"]:not(.btn, :has(> :not(svg))):has(> svg),
[dir="rtl"] a[href^="mailto:"]:not(.btn, :has(> :not(svg))):has(> svg) { flex-direction: row-reverse; }
/* Links with richer markup (e.g. "Talk to us": icon + number + opening hours): only the number */
[dir="rtl"] a[href^="tel:"] :is(strong, b),
[dir="rtl"] a[href^="mailto:"] :is(strong, b) { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* Fields that take left-to-right values; the value and placeholder stay right-aligned with the form */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"] { direction: ltr; unicode-bidi: plaintext; text-align: right; }
[dir="rtl"] input[type="email"]::placeholder,
[dir="rtl"] input[type="tel"]::placeholder,
[dir="rtl"] input[type="url"]::placeholder,
[dir="rtl"] input[type="number"]::placeholder { direction: rtl; }

/* Figures such as "+38%" or "AED 1.2M": direction from their own content, aligned to the start */
[dir="rtl"] .stat__value,
[dir="rtl"] .kpi-card b,
[dir="rtl"] .roles__kpi b,
[dir="rtl"] .ui-mock__kpi b,
[dir="rtl"] .ui-mock__kpi i { unicode-bidi: plaintext; text-align: right; }

/* Contact Form 7 gives each form the direction of the locale it was created in (dir="ltr" for an
   English form that Polylang / WPML string translation reuses). The theme's forms follow the page. */
[dir="rtl"] .hyp-cf7 .wpcf7[dir="ltr"] { direction: rtl; }

/* ---------- Directional icons: arrows that mean "forward / next" point left ---------- */
[dir="rtl"] .icon--flip,
[dir="rtl"] .crumbs__sep,
[dir="rtl"] .card__more .icon,
[dir="rtl"] .mega__overview .icon,
[dir="rtl"] .proof__more .icon,
[dir="rtl"] .fit__links > li > a > .icon,
[dir="rtl"] .top-bar__note .icon,
[dir="rtl"] .hero-slider__arrow--next .icon,
[dir="rtl"] .listing__page--next .icon { transform: scaleX(-1); }
/* "Previous" arrows are drawn mirrored in left-to-right, so they point right here */
[dir="rtl"] .hero-slider__arrow--prev .icon,
[dir="rtl"] .listing__page--prev .icon,
[dir="rtl"] .workflow__back { transform: none; }
/* Text arrows */
[dir="rtl"] .hyp-more a::after { transform: scaleX(-1); }
/* Products menu, Apps & portals row: the small chevron before each item points left */
[dir="rtl"] .mega__group a::before { transform: rotate(-135deg); }

/* Hover nudges move toward the end (left) */
[dir="rtl"] .btn--link:hover .icon { transform: translateX(-3px); }
[dir="rtl"] .btn--link:hover .icon--flip,
[dir="rtl"] .card--link:hover .card__more .icon { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .hyp-more a:hover::after { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .hyp-s--cards .hyp-item:hover .hyp-more a::after { transform: scaleX(-1) translateX(4px); }

/* ---------- Motion and progress ---------- */
/* Hero slider: the next slide comes in from the left, the old one leaves to the right */
[dir="rtl"] .hero-slide:not(.is-active) { transform: translateX(-16px); }
[dir="rtl"] .hero-slide.is-leaving { transform: translateX(16px); }
/* Bars fill from the start (right) */
[dir="rtl"] .hero-slider__progress,
[dir="rtl"] .workflow__steps::after { transform-origin: right; }

/* Wide / full-width sections break out of the container from the right edge */
[dir="rtl"] .hyp-w-wide,
[dir="rtl"] .hyp-w-full { transform: translateX(50%); }

/* ---------- Artwork and shading that follow the reading direction ---------- */
/* Hero and closing CTA artwork sit at the end side, mirrored */
[dir="rtl"] .hero::before,
[dir="rtl"] .cta::after { transform: scaleX(-1); }
/* Dark overlays are darkest behind the text, which now starts on the right */
[dir="rtl"] .cta { background: linear-gradient(270deg, #EEF2F4 0%, #E9EEF1 45%, #DCE3E7 100%); }
[dir="rtl"] .apps__detail { background-image: linear-gradient(270deg, rgba(13, 26, 33, .85), rgba(13, 26, 33, .35)), var(--detail-art); }
[dir="rtl"] .hyp-s--band::before { background: linear-gradient(270deg, rgba(13, 26, 33, .92) 0%, rgba(13, 26, 33, .7) 55%, rgba(13, 26, 33, .15) 100%); }
[dir="rtl"] .hyp-s--band.has-media::before { background: linear-gradient(270deg, rgba(13, 26, 33, .94), rgba(13, 26, 33, .82)); }
[dir="rtl"] .hyp-s--tabs .tabs--side .tabs__panel { background-image: linear-gradient(260deg, rgba(13, 26, 33, .92), rgba(13, 26, 33, .55)), var(--detail-art); }
[dir="rtl"] .title-area--night .title-area__inner { background-image: linear-gradient(270deg, rgba(13, 26, 33, .94), rgba(13, 26, 33, .6)), var(--art-night-waves); }
[dir="rtl"] .talk__panel { background-image: linear-gradient(260deg, rgba(13, 26, 33, .96) 0%, rgba(13, 26, 33, .86) 50%, rgba(13, 26, 33, .6) 100%), var(--art-night-fold); }
[dir="rtl"] .proof__panel { background-image: linear-gradient(260deg, rgba(13, 26, 33, .96) 0%, rgba(13, 26, 33, .8) 55%, rgba(13, 26, 33, .45) 100%), var(--art-night-layers); }
[dir="rtl"] .gcc { background-image: linear-gradient(270deg, rgba(13, 26, 33, .95), rgba(13, 26, 33, .7)), var(--art-night-grid); }
[dir="rtl"] .roles__panel { background-image: linear-gradient(260deg, rgba(13, 26, 33, .94) 0%, rgba(13, 26, 33, .7) 45%, rgba(13, 26, 33, .35) 100%), var(--art-night-layers); }
/* Customer story header: the gradient is an inline style (inc/elementor/specs.php), hence !important.
   Remove once that markup moves the gradient into a class. */
[dir="rtl"] .story-hero { --shade-dir: 270deg; }