/* ==========================================================================
   Jemas Healthcare — Arabic / RTL corrections
   Loaded only when is_rtl() is true (see functions.php).

   Nurse ships no front-end RTL stylesheet and Elementor generates no RTL
   variant for per-page CSS, so every direction-sensitive value from
   post-32.css, post-93.css and post-99.css lands unmirrored on /ar/.
   Those files are regenerated by Elementor and must never be edited —
   corrections go here instead.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Typography

   The theme exposes its whole type scale as custom properties on :root, so the
   Arabic face is applied by redefining a handful of variables rather than
   chasing selectors. html[dir="rtl"] outranks :root, which also means these
   values survive the responsive redefinitions inside __custom.css media
   queries — no need to repeat them per breakpoint.

   font-size is deliberately left alone. Only three things change:

     family          Work Sans has no Arabic glyphs.
     line-height     1.0–1.14em clips Arabic ascenders (ل ك ط) and descenders
                     (ج ح خ ع غ م ي). Arabic needs noticeably more room.
     letter-spacing  Every heading carried a negative value (down to -0.04em).
                     Latin tolerates tightening; Arabic is a connected script
                     and tightening degrades the joins.
   -------------------------------------------------------------------------- */

html[dir="rtl"] {
	--jemas-font-ar: "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

	--theme-font-p_font-family: var(--jemas-font-ar);
	--theme-font-h1_font-family: var(--jemas-font-ar);
	--theme-font-h2_font-family: var(--jemas-font-ar);
	--theme-font-h3_font-family: var(--jemas-font-ar);
	--theme-font-h4_font-family: var(--jemas-font-ar);
	--theme-font-h5_font-family: var(--jemas-font-ar);
	--theme-font-h6_font-family: var(--jemas-font-ar);
	--theme-font-menu_font-family: var(--jemas-font-ar);
	--theme-font-submenu_font-family: var(--jemas-font-ar);
	--theme-font-button_font-family: var(--jemas-font-ar);
	--theme-font-input_font-family: var(--jemas-font-ar);
	--theme-font-info_font-family: var(--jemas-font-ar);

	--theme-font-h1_line-height: 1.4em;
	--theme-font-h2_line-height: 1.4em;
	--theme-font-h3_line-height: 1.45em;
	--theme-font-h4_line-height: 1.5em;
	--theme-font-h5_line-height: 1.5em;
	--theme-font-h6_line-height: 1.55em;
	--theme-font-p_line-height: 1.85em;
	--theme-font-menu_line-height: 1.6em;
	--theme-font-info_line-height: 1.6em;
	--theme-font-input_line-height: 1.7em;

	--theme-font-h1_letter-spacing: 0;
	--theme-font-h2_letter-spacing: 0;
	--theme-font-h3_letter-spacing: 0;
	--theme-font-h4_letter-spacing: 0;
	--theme-font-h5_letter-spacing: 0;
	--theme-font-h6_letter-spacing: 0;
	--theme-font-button_letter-spacing: 0;
	--theme-font-logo_letter-spacing: 0;

	/* Elementor keeps its own global type scale, independent of the theme's. */
	--e-global-typography-primary-font-family: "Tajawal";
	--e-global-typography-secondary-font-family: "Tajawal";
	--e-global-typography-text-font-family: "Tajawal";
	--e-global-typography-accent-font-family: "Tajawal";
}

/* The Elementor kit sets font-family on its own wrapper class, which the theme
   variables above never reach. Scoped to [dir="rtl"] so it outranks the kit
   without !important, and kept to these two elements so icon fonts (fontello,
   eicons, trx_addons_icons) keep their own families. */
[dir="rtl"] body,
[dir="rtl"] .elementor-kit-1 {
	font-family: var(--jemas-font-ar);
}

/* Buttons keep their fixed 19px line-height so button heights do not shift,
   but the family and spacing still need correcting. */
[dir="rtl"] .sc_button,
[dir="rtl"] button,
[dir="rtl"] input[type="submit"],
[dir="rtl"] .elementor-button {
	font-family: var(--jemas-font-ar);
	letter-spacing: 0;
}


/* --------------------------------------------------------------------------
   2. Heading scale

   Arabic has no upper and lower case, and its letterforms fill far more of the
   em box than Latin ones do, so a heading set at the size that suits English
   reads noticeably larger and heavier in Arabic. The theme's scale was tuned
   for Work Sans, and every heading inherits it unchanged.

   The two knobs below are deliberately separate: --jemas-ar-heading-scale
   trims the theme's own scale, while the hero is pulled back further because
   68px was the single most oversized value on the site.

   Sizes are derived with calc() from the theme's own variables, so the
   responsive steps in __custom.css keep working and there is nothing to
   maintain per breakpoint.
   -------------------------------------------------------------------------- */

html[dir="rtl"] {
	--jemas-ar-heading-scale: 0.9;
	--jemas-ar-hero-scale: 1.11;
}

[dir="rtl"] h1 { font-size: calc(var(--theme-font-h1_font-size) * var(--jemas-ar-heading-scale)); }
[dir="rtl"] h2 { font-size: calc(var(--theme-font-h2_font-size) * var(--jemas-ar-heading-scale)); }
[dir="rtl"] h3 { font-size: calc(var(--theme-font-h3_font-size) * var(--jemas-ar-heading-scale)); }
[dir="rtl"] h4 { font-size: calc(var(--theme-font-h4_font-size) * var(--jemas-ar-heading-scale)); }

/* Elementor writes explicit pixel sizes onto .elementor-heading-title, which
   never consult the theme variables above. Only the hero is far enough out to
   need its own line — the other headings on the page sit at 24–26px and read
   fine once the family and line-height are corrected.

   The doubled .elementor-element.elementor-element-XXX is not a typo: it is how
   Elementor writes its own selector, and matching that shape is what lets this
   rule reach the same weight. Loading later then settles it, so no !important.

   NOTE: 54 / 42 / 34px mirror the values stored in Elementor for e5703bb since
   the hero became the full-bleed scene. If that heading is ever resized in the
   editor, these lines have to move with it. */
[dir="rtl"] .elementor-element.elementor-element-e5703bb .elementor-heading-title {
	font-size: calc(54px * var(--jemas-ar-hero-scale));

	/* Measured: the ink of this heading in Tajawal spans 1.20em, so 1.3 clears
	   the ascenders while keeping the two lines reading as one block. */
	line-height: 1.3;

	/* Tried at 700 to match the optical weight of the Latin face, which reads
	   heavier at the same number. The client preferred the lighter setting. */
	font-weight: 500;

	/* Where the line breaks, measured rather than guessed: the break falls on
	   the ellipsis — where the sentence itself pauses — so the two lines read
	   as two phrases. The cap tracks the size: at 60px the longest line inks to
	   562px, so 600 holds the break while anything near 660 lets the whole
	   sentence onto one line and the pause is lost. */
	max-width: 600px;
}

/* Elementor sizes this heading three times: 54px, 42px on tablet, 34px on
   phones. Pinning a single value overrode all three, so phones once got a
   desktop-sized headline. Each breakpoint now gets the Arabic scale applied to
   its own value, and the width cap is released where the column is narrower
   than the cap anyway. */
@media (max-width: 1024px) {
	[dir="rtl"] .elementor-element.elementor-element-e5703bb .elementor-heading-title {
		font-size: calc(42px * var(--jemas-ar-hero-scale));
		max-width: none;
	}
}
@media (max-width: 767px) {
	[dir="rtl"] .elementor-element.elementor-element-e5703bb .elementor-heading-title {
		/* Not the shared scale here. On a 350px column the break is a cliff, not
		   a slope: measured character by character, every size up to 37px keeps
		   the first line ending on the ellipsis, and 37.7px — what the scale
		   would give — drops "مؤهّلة…" onto the second line and puts the pause
		   mid-sentence. 36px takes the size with a margin under that edge. */
		font-size: 36px;
	}
}

/* The eyebrow above it — the page's H1, kept as an H1. It sits inside a pill
   on the dark scrim now, and its colour comes from Elementor (the lifted teal
   is the one that reads on navy), so only the size is trimmed here: Arabic
   runs larger than Latin at the same number. */
[dir="rtl"] .elementor-element.elementor-element-32100d5 .elementor-heading-title {
	font-size: 14.5px;
	font-weight: 700;
	margin-bottom: 0;
	/* no letter-spacing here on purpose: section 14 forces normal tracking on
	   all Arabic text, and it is right to. */
}

@media (max-width: 767px) {
	[dir="rtl"] .elementor-element.elementor-element-32100d5 .elementor-heading-title {
		font-size: 13px;
	}
}

/* The title on the booking bar. Elementor holds 20px for English; Arabic at
   the same number crowds the two-line note underneath it. */
[dir="rtl"] .elementor-element.elementor-element-6f9d96d3 .elementor-heading-title {
	font-size: 19px;
}

/* The hero paragraph. Measured against the English: both are set at 16px, but
   Arabic wraps this sentence into three lines where English takes five, so the
   block reads shorter and lighter next to a headline that just grew. 18px puts
   the two columns at the same weight; the widget's 560px cap is left alone, so
   the extra size is spent on a fourth line rather than a longer one. */
[dir="rtl"] .elementor-element.elementor-element-4626a539 p {
	font-size: 18px;

	/* The leading is written in pixels upstream, so growing the type quietly
	   tightened it from 1.85 to 1.64 — enough for a tanween to reach the line
	   above. Restating it as a ratio keeps the rhythm section 1 settled on. */
	line-height: 1.8;
}

/* The photograph and its scrim are mirrored for Arabic.

   Two things force this. Elementor writes the overlay as one physical
   linear-gradient, and a gradient does not follow dir — so the dark end would
   stay on the left and sit on top of the nurse instead of behind the text.
   And the photograph is laid in at 132% width precisely so it can be panned:
   English shows its left portion, which puts the nurse right of centre, away
   from the text; Arabic needs the opposite end.

   From 768px up: the text still sits to one side at tablet width, so the mirror
   is needed there too. Below that the text spans the full width and the scrim
   becomes a vertical one (style.css), so there is nothing left to mirror.

   Elementor draws a container overlay on the container's own ::before, not on
   a child element — the div only exists on the older Section widget.

   The !important is forced: Elementor's page stylesheet is enqueued after the
   child theme, and both selectors carry the same weight. */
@media (min-width: 768px) {
	[dir="rtl"] .elementor-element.elementor-element-5db7d5c5 {
		background-position-x: 100% !important;
	}
	[dir="rtl"] .elementor-element.elementor-element-5db7d5c5::before {
		background-image: linear-gradient(
			270deg,
			rgba(6, 51, 94, 0.96) 30%,
			rgba(6, 51, 94, 0) 82%
		) !important;
	}
}


/* --------------------------------------------------------------------------
   3. Circular "Get in touch" badge

   The Text Path widget carries letter-spacing: 6.5px, which is what gives the
   English caption its airy look around the ring. Arabic is a connected script:
   the same 6.5px prises every joined letter apart, so تواصل arrives on screen
   as five loose shapes rather than one word.

   Zeroing it on RTL pages only leaves the English badge exactly as designed.
   -------------------------------------------------------------------------- */

[dir="rtl"] .elementor-widget-text-path svg text,
[dir="rtl"] .elementor-widget-text-path svg textPath,
[dir="rtl"] .elementor-widget-text-path .e-text-path text {
	letter-spacing: 0;
	word-spacing: 0.15em;
}


/* --------------------------------------------------------------------------
   4. Header — menu spacing and dropdown arrows

   Elementor writes the header widget's spacing settings into post-99.css as
   physical four-value shorthands. It emits no RTL variant, so on /ar/ every one
   of these lands on the wrong side: the gap that should sit between a menu item
   and its dropdown arrow opens on the far side of the arrow instead, and the
   submenu drifts away from the item that owns it.

   ThemeREX does ship body.rtl variants for some widgets — the icon lists in
   post-32.css mirror themselves correctly — but the nav menu is not among them.

   Each rule below is the same declaration with left and right swapped, scoped
   to [dir="rtl"] and carrying Elementor's own selector so it outranks the
   original without !important. Values are mirrored, never redesigned.
   -------------------------------------------------------------------------- */

/* logo / widget gap */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-5bbcc31 > .elementor-widget-container {
	margin: 0px 10px 0px 0px;
}

/* main menu — dropdown arrow beside the top-level item */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-main-nav-menu > .trx-addons-nav-menu-item > .trx-addons-menu-link .trx-addons-dropdown-icon {
	margin: -1px 6px 0px 0px;
}

/* main menu — first-level submenu panel */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-nav-menu-container > .trx-addons-nav-menu > .trx-addons-nav-menu-item > .trx-addons-submenu,
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-mobile-menu-container > .trx-addons-nav-menu > .trx-addons-nav-menu-item > .trx-addons-submenu {
	margin: 7px -5px 0px 0px;
}

/* main menu — nested submenu panel */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-nav-menu-container .trx-addons-submenu .trx-addons-nav-menu-item > .trx-addons-submenu,
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-mobile-menu-container .trx-addons-submenu .trx-addons-nav-menu-item > .trx-addons-submenu {
	margin: -14px 5px 0px 0px;
}

/* main menu — arrow inside a submenu row */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-main-nav-menu .trx-addons-submenu .trx-addons-submenu-link .trx-addons-dropdown-icon {
	margin: 1px 0px -1px 10px;
}

/* main menu — submenu row padding (25/20 either side, so it does show) */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-main-nav-menu .trx-addons-submenu .trx-addons-submenu-item > .trx-addons-submenu-link {
	padding: 8px 20px 8px 25px;
}

/* mobile / hamburger menu widget — same three shapes again */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-main-nav-menu > .trx-addons-nav-menu-item > .trx-addons-menu-link .trx-addons-dropdown-icon {
	margin: -3px 8px 0px 0px;
}

[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-nav-menu-container .trx-addons-submenu .trx-addons-nav-menu-item > .trx-addons-submenu,
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-mobile-menu-container .trx-addons-submenu .trx-addons-nav-menu-item > .trx-addons-submenu {
	margin: 0px 10px 0px 0px;
}

[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-main-nav-menu .trx-addons-submenu .trx-addons-submenu-link .trx-addons-dropdown-icon {
	margin: -2px 8px 0px 0px;
}

/* drawer close button — pinned to the far corner, so it must swap corners */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-mobile-menu-outer-container .trx-addons-mobile-menu-close {
	margin: 30px 0px 0px 30px;
}

@media (max-width: 767px) {
	[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-mobile-menu-outer-container .trx-addons-mobile-menu-close {
		margin: 22px 0px 0px 20px;
	}
}


/* --------------------------------------------------------------------------
   5. Home page — counters, accordion, tabs

   The four statistic counters are pinned text-align: left, which in an Arabic
   column leaves the numbers hanging off the wrong edge of their own block.
   -------------------------------------------------------------------------- */

[dir="rtl"] .elementor-32 .elementor-element.elementor-element-6566f8d1 .trx-addons-counter-container,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-48d4b458 .trx-addons-counter-container,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-5d85313f .trx-addons-counter-container,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-18fd66c2 .trx-addons-counter-container {
	text-align: right;
}

/* the "+" after each number sits on the wrong side of it */
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-6566f8d1 .trx-addons-counter-number-suffix,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-48d4b458 .trx-addons-counter-number-suffix,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-5d85313f .trx-addons-counter-number-suffix,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-18fd66c2 .trx-addons-counter-number-suffix {
	margin-left: 0px;
	margin-right: 5px;
}

/* accordion — leading icon and the open/close toggle */
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-1904657d .trx-addons-accordion .trx-addons-accordion-tab-title .trx-addons-accordion-tab-icon {
	margin-right: 0px;
	margin-left: 10px;
}

[dir="rtl"] .elementor-32 .elementor-element.elementor-element-1904657d .trx-addons-toggle-icon-align-left .trx-addons-accordion-toggle-icon {
	margin-right: 0px;
	margin-left: 30px;
}

[dir="rtl"] .elementor-32 .elementor-element.elementor-element-1904657d .trx-addons-toggle-icon-align-right .trx-addons-accordion-toggle-icon {
	margin-left: 0px;
	margin-right: 30px;
}

/* tabs — the separator border belongs on the opposite edge */
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-73ade3d.elementor-widget-n-tabs.e-n-tabs-heading-border-as-separator.e-n-tabs-direction-block-start .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:first-child,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-73ade3d.elementor-widget-n-tabs.e-n-tabs-heading-border-as-separator.e-n-tabs-direction-block-end .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:first-child {
	border-left-color: transparent;
	border-right-color: var( --e-global-color-theme_color_bd_color );
}

/* Section 6 (hero header clearance) was removed: the hero section's desktop top
   padding was the real culprit — 50px against a 96px header, where tablet and
   mobile already used 110px and 100px. Corrected to 150px in Elementor, which
   fixes both languages at once and needs no per-language CSS. */


/* --------------------------------------------------------------------------
   7. Header — menu weight and the button's gap

   Tajawal at 400 is noticeably lighter than Work Sans at 400: Arabic strokes
   are thinner and more uniform, so the same numeric weight reads faint against
   the header. 500 restores the presence the English menu has without changing
   the size or the layout.

   The "تواصل معنا" button carries margin-left: 1.3vw from Elementor — a
   physical side. Mirrored in Arabic it opens the gap away from the social
   icons instead of between them and the button.
   -------------------------------------------------------------------------- */

html[dir="rtl"] {
	--theme-font-menu_font-weight: 500;
	--theme-font-submenu_font-weight: 500;
}

[dir="rtl"] .elementor-99 .elementor-element.elementor-element-74dea66 {
	margin-left: 0;
	margin-right: 1.3vw;
}


/* --------------------------------------------------------------------------
   8. Inner pages — the main menu runs backwards

   Inner pages do not use the Elementor header (layout 99) that the home page
   uses; they fall back to the theme's own top_panel_default markup, so none of
   the header mirroring in section 4 reaches them.

   That header lays its menu out with float: left on each item. Floats are
   physical — they do not follow direction — so in Arabic the items still stack
   from the left edge rightwards and the whole menu reads back to front:
   الرئيسية lands furthest left where it should be furthest right.

   Floating them right restores the reading order. The submenus need the same
   treatment or they open from the wrong edge of their parent.
   -------------------------------------------------------------------------- */

[dir="rtl"] .sc_layouts_menu_nav > li,
[dir="rtl"] ul.sc_layouts_menu_nav > li {
	float: right;
}

[dir="rtl"] .sc_layouts_menu_nav li > ul {
	left: auto;
	right: 0;
	text-align: right;
}

[dir="rtl"] .sc_layouts_menu_nav li > ul li > ul {
	left: auto;
	right: 100%;
}

/* The theme's header columns carry physical alignment classes. Mirroring the
   flex order moves the columns to the correct sides, but the alignment inside
   each one keeps pointing the old way: the menu column lands on the left while
   its contents still hug the right, so the menu ends up pressed against the
   logo instead of sitting out at the edge of the header. Swapping the two
   classes puts each column's contents on its outer edge, as in the English
   header. */

[dir="rtl"] .sc_layouts_column_align_right {
	text-align: left;
}

[dir="rtl"] .sc_layouts_column_align_left {
	text-align: right;
}


/* --------------------------------------------------------------------------
   9. Blog — the sidebar sits on the wrong side

   Same cause as the header menu in section 8: the theme positions the sidebar
   and the content column with float, and floats are physical. The theme option
   is "sidebar on the right", which is right for English, but in Arabic the
   reading column belongs on the right and the sidebar on the left. Left
   unmirrored, the Arabic reader starts at the far side of the page.

   Swapped for both possible settings so the rule survives if the option is
   ever changed in Theme Options.
   -------------------------------------------------------------------------- */

[dir="rtl"] .content_wrap > .sidebar.right,
[dir="rtl"] .content_wrap > aside.sidebar.right {
	float: left;
}

[dir="rtl"] .content_wrap > .sidebar.left,
[dir="rtl"] .content_wrap > aside.sidebar.left {
	float: right;
}

[dir="rtl"] body.sidebar_right .content_wrap > .content,
[dir="rtl"] .content_wrap > .sidebar.right + .content,
[dir="rtl"] .content_wrap > .content {
	float: right;
}

[dir="rtl"] body.sidebar_left .content_wrap > .content {
	float: left;
}


/* --------------------------------------------------------------------------
   10. Sidebar — the widgets were still laid out for English

   A sweep of the theme's own stylesheets found 226KB of CSS containing exactly
   zero RTL rules, and 67 unmirrored physical declarations — 41 of them in the
   sidebar and widgets.

   These rules carry !important, which nothing else in this project does. The
   sidebar is built from Elementor widgets, so the competing declarations live
   in the page's own post-NN.css with a longer selector chain and load after
   this file. Matching that chain would mean hard-coding an element id per page
   and re-doing it whenever a widget is moved, which is more fragile than the
   flag. Verified: without !important these rules parse, match the element, and
   still lose.
   -------------------------------------------------------------------------- */

/* The sidebar's rule and its inset both sit on the left: a border-left on the
   outer Elementor container plus 40px of padding-left inside it. Mirrored, the
   rule has to move to the edge facing the article and the inset with it, or the
   thumbnails end up pressed against the line while 40px goes to waste on the
   far side.

   Scoped to that one container by id. An earlier attempt used
   `.sidebar .elementor-element.e-con` and drew a line down five nested
   containers at once. */
[dir="rtl"] .sidebar .elementor-element.elementor-element-40a5bf60 {
	border-left-width: 0 !important;
	border-right-width: 1px !important;
	border-right-style: solid !important;
	border-right-color: var( --e-global-color-theme_color_bd_color, #DDE8EC ) !important;
	padding-left: 0 !important;
	padding-right: 40px !important;
}

/* …and nothing nested inside it should carry a rule of its own. */
[dir="rtl"] .sidebar .elementor-element.elementor-element-40a5bf60 .e-con,
[dir="rtl"] .content_wrap > .sidebar > .sidebar_inner {
	border-left-width: 0 !important;
	border-right-width: 0 !important;
}

/* The search button is pinned with left: 0 and the field reserves its 42px of
   room for the icon on the same physical side, so the placeholder ran under the
   magnifier once the icon crossed over. */
[dir="rtl"] .sidebar .search_form .search_submit,
[dir="rtl"] .search_wrap .search_form .search_submit {
	left: auto !important;
	right: 0 !important;
}

[dir="rtl"] .sidebar .search_form .search_field,
[dir="rtl"] .search_wrap .search_form .search_field {
	padding-left: 12px !important;
	padding-right: 42px !important;
	text-align: right !important;
}

/* margin-right: 22px opened a gap against the sidebar's outer edge and left the
   title touching the thumbnail. Moving it puts the breathing room back between
   the picture and the text it belongs to. */
[dir="rtl"] .sidebar .post_item .post_thumb,
[dir="rtl"] .widget_recent_posts .post_item .post_thumb {
	margin-left: 22px !important;
	margin-right: 0 !important;
}

[dir="rtl"] .sidebar .post_item,
[dir="rtl"] .widget_recent_posts .post_item,
[dir="rtl"] .sidebar .post_item .post_title,
[dir="rtl"] .sidebar .post_item .post_info,
[dir="rtl"] .sidebar .post_item .post_date,
[dir="rtl"] .sidebar .widget_title,
[dir="rtl"] .sidebar aside > h5 {
	text-align: right !important;
}


/* --------------------------------------------------------------------------
   11. What the live audit turned up last

   Rather than parse the theme's CSS again, this pass walked the rendered
   Arabic page and flagged every element whose box was physically asymmetric.
   Most of what it found was the mirroring already done above; these were the
   genuine leftovers.
   -------------------------------------------------------------------------- */

/* The mobile drawer's menu is left-aligned, so Arabic labels sat away from the
   edge the reader starts from. */
[dir="rtl"] .menu_mobile_nav_area,
[dir="rtl"] ul.menu_mobile_nav,
[dir="rtl"] ul.menu_mobile_nav li,
[dir="rtl"] ul.menu_mobile_nav li > a {
	text-align: right;
}

/* The blog grid is built from a negative gutter on the row and matching padding
   on each column, both on the right. Unmirrored, the whole grid shifts 30px off
   its container in Arabic. */
[dir="rtl"] .posts_container.classic_wrap,
[dir="rtl"] .posts_container.columns_wrap {
	margin-right: 0;
	margin-left: -30px;
}

[dir="rtl"] .posts_container.classic_wrap > [class*="column-"],
[dir="rtl"] .posts_container.columns_wrap > [class*="column-"] {
	padding-right: 0;
	padding-left: 30px;
}

/* The category label reserves a 42px indent with padding, so its text started
   42px inside the box while the title beneath began at the box edge — the two
   lines did not share a margin. Same cascade problem as the rest of the
   sidebar, so the same flag. */
[dir="rtl"] .post_categories,
[dir="rtl"] .post_item .post_categories {
	padding-right: 0 !important;
	padding-left: 42px !important;
}

/* The search icon is pinned with right: 0 but keeps its inset as margin-left,
   which does nothing to an element positioned from the right. English shows a
   17px gap from the field edge; Arabic showed the icon flush against it. */
[dir="rtl"] .sidebar .search_form .search_submit,
[dir="rtl"] .search_wrap .search_form .search_submit {
	margin-left: 0 !important;
	margin-right: 17px !important;
}


/* --------------------------------------------------------------------------
   12. Everything the page-by-page sweep found

   Walked the rendered Arabic markup on the single post, the contact page and
   the services page, flagging boxes that were still physically asymmetric and
   excluding the ones sections 1–11 mirror on purpose. These are the remainder.
   -------------------------------------------------------------------------- */

/* -- Main menu text (inner-page header) ------------------------------------
   The nav itself was mirrored in section 8, but the text inside every level
   still aligned left. */
[dir="rtl"] .menu_main_nav_area,
[dir="rtl"] ul.sc_layouts_menu_nav,
[dir="rtl"] ul.sc_layouts_menu_nav li,
[dir="rtl"] ul.sc_layouts_menu_nav li > a,
[dir="rtl"] ul.sc_layouts_menu_nav li > a > span {
	text-align: right;
}

/* -- Info boxes (the service cards) ----------------------------------------
   The whole widget subtree carries text-align: left, so every card's icon,
   heading and description sat against the wrong edge. */
[dir="rtl"] .trx-addons-info-box {
	/* the outer box is styled per-element by Elementor, so it needs the flag
	   for the same reason the sidebar widgets did */
	text-align: right !important;
}

[dir="rtl"] .trx-addons-info-box-icon-wrap,
[dir="rtl"] .trx-addons-info-box-content,
[dir="rtl"] .trx-addons-info-box-title-wrap,
[dir="rtl"] .trx-addons-info-box-title-container,
[dir="rtl"] .trx-addons-info-box-title,
[dir="rtl"] .trx-addons-info-box-description {
	text-align: right;
}

/* -- Icon lists ------------------------------------------------------------
   ThemeREX ships body.rtl variants for some icon lists but not this wrapper. */
[dir="rtl"] .trx-addons-icon-wrapper {
	margin-left: 0;
	margin-right: 14px;
}

/* -- Column grids ----------------------------------------------------------
   Section 11 caught the blog's grid; the same negative gutter is used by the
   bare .columns_wrap on the contact and services pages. */
[dir="rtl"] .columns_wrap {
	margin-right: 0;
	margin-left: -30px;
}

[dir="rtl"] .columns_wrap > [class*="column-"] {
	padding-right: 0;
	padding-left: 30px;
}

/* -- Previous / next post navigation ---------------------------------------
   Floated and aligned left, so on an Arabic post the "previous" link sat where
   the reader expects "next". */
[dir="rtl"] .nav-links,
[dir="rtl"] .nav-links .nav-arrow-label,
[dir="rtl"] .nav-links h6.post-title {
	text-align: right;
}

[dir="rtl"] .nav-links .nav-previous {
	float: right;
	padding-right: 0;
	padding-left: 15px;
	text-align: right;
}

[dir="rtl"] .nav-links .nav-next {
	float: left;
	padding-left: 0;
	padding-right: 15px;
	text-align: left;
}

/* -- Comment form ----------------------------------------------------------
   Name and email sit side by side using floats, which put them in the reverse
   order in Arabic. */
[dir="rtl"] .comments_field.comments_author {
	float: right;
}

[dir="rtl"] .comments_field.comments_email {
	float: left;
}

/* -- Checkbox and radio labels ---------------------------------------------
   The label reserves room for its box with padding-left. */
[dir="rtl"] input[type="checkbox"] + label,
[dir="rtl"] input[type="radio"] + label,
[dir="rtl"] label.optional {
	padding-left: 0;
	padding-right: 24px;
}

/* -- Core block lists ------------------------------------------------------ */
[dir="rtl"] ul.wp-block-latest-posts__list,
[dir="rtl"] ol.wp-block-latest-comments,
[dir="rtl"] .wp-block-latest-comments {
	padding-left: 0;
	padding-right: 19.2px;
}


/* --------------------------------------------------------------------------
   13. Icons sitting flush against their labels

   Every icon in the post meta, the icon lists and the menus reserves its gap
   with a right-hand margin. In Arabic the icon moves to the right of its label,
   so that margin now opens on the outside and the icon ends up touching the
   word: the calendar glyph runs straight into the date, the speech bubble into
   "لا توجد تعليقات".

   The gaps are mirrored rather than resized — same values, other side.
   -------------------------------------------------------------------------- */

/* The side is right; the size was not. 4.2px was tuned for Work Sans, where the
   glyphs are narrow and upright. Arabic letters are wider and sit closer to the
   baseline, so the same gap reads as the icon touching the word. Measured on the
   page: the calendar sat 4px from the date and looked joined to it. */
[dir="rtl"] .post_meta_item::before,
[dir="rtl"] .post_meta .post_meta_item::before,
[dir="rtl"] .post_meta_item > .trx_addons_icon::before,
[dir="rtl"] .post_meta a.post_meta_item::before,
[dir="rtl"] .post_meta span.post_meta_item::before {
	margin-right: 0 !important;
	margin-left: 8px !important;
}

[dir="rtl"] .post_meta_item + .post_meta_item::before {
	margin-left: 4.2px;
}

/* Elementor icon lists: the SVG or icon span, then its text. */
[dir="rtl"] .elementor-icon-list-item .elementor-icon-list-icon,
[dir="rtl"] .elementor-icon-list-item svg {
	margin-right: 0;
	margin-left: 9px;
}

[dir="rtl"] .elementor-icon-list-text {
	padding-right: 0;
	padding-left: 5px;
}

/* ThemeREX icon wrapper — the earlier rule set the outer gap; this is the one
   between the glyph and the words next to it. */
[dir="rtl"] .trx-addons-icon-wrapper {
	margin-right: 8px;
	margin-left: 14px;
}

/* Header columns hold their inner gutter on the left. */
[dir="rtl"] .sc_layouts_column {
	padding-left: 0;
	padding-right: 30px;
}

/* The "more" ellipsis in the menu keeps an asymmetric pad for its caret. */
[dir="rtl"] .sc_layouts_menu_nav a.sf-with-ul {
	padding-left: 16px;
	padding-right: 32px;
}


/* --------------------------------------------------------------------------
   14. letter-spacing has no place in Arabic

   Section 1 zeroed the theme's own heading variables, but Elementor sets
   letter-spacing per element too — the small eyebrow labels above headings
   carry 0.07rem, and the category links 1.12px. On a connected script that
   spacing does not "breathe", it severs the joins: نهتم بأحبائكم renders as a
   row of loose glyphs.

   So this is deliberately broad. Arabic is cursive; there is no case where
   positive tracking helps it, and the rule is scoped to [dir="rtl"] so the
   English design keeps its tracking untouched.

   text-transform goes with it: uppercase does nothing to Arabic letterforms,
   and leaving it set only invites the next person to add tracking back.
   -------------------------------------------------------------------------- */

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li,
[dir="rtl"] div, [dir="rtl"] label, [dir="rtl"] button,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] blockquote,
[dir="rtl"] .elementor-heading-title,
[dir="rtl"] .elementor-widget-text-editor,
[dir="rtl"] .post_title, [dir="rtl"] .post_categories,
[dir="rtl"] .trx-addons-info-box-title,
[dir="rtl"] .trx-addons-info-box-description,
[dir="rtl"] .sc_layouts_title_caption {
	letter-spacing: normal !important;
	word-spacing: normal;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .elementor-heading-title,
[dir="rtl"] .post_categories,
[dir="rtl"] .post_categories a {
	text-transform: none !important;
}

/* The rotating badge is the one place a gap is wanted — between whole words,
   never between letters. word-spacing does that safely. */
[dir="rtl"] .elementor-widget-text-path svg text,
[dir="rtl"] .elementor-widget-text-path svg textPath {
	letter-spacing: 0 !important;
	word-spacing: 0.08em;
}

/* Icon fonts are exempt: their glyphs are not script and some rely on spacing. */
[dir="rtl"] [class^="trx_addons_icon-"],
[dir="rtl"] [class*=" trx_addons_icon-"],
[dir="rtl"] .elementor-icon,
[dir="rtl"] i[class*="icon"] {
	letter-spacing: normal !important;
}


/* --------------------------------------------------------------------------
   15. The scrolling banner

   Elementor emits the marquee gutter as padding-left on every element, which is
   why the first CSS sweep counted ~200 of these and dismissed them as unused
   boilerplate. On the About page the widget is real, and in Arabic the gutter
   opened on the trailing side — the text ran up against the edge it scrolls
   toward and left a gap behind it.
   -------------------------------------------------------------------------- */

/* Elementor writes this gutter per element with a five-class selector, so the
   flag is needed here for the same reason as the sidebar widgets. */
[dir="rtl"] .trx_addons_marquee_wrap:not(.trx_addons_marquee_reverse) .trx_addons_marquee_element {
	padding-left: 0 !important;
	padding-right: 50px !important;
}

[dir="rtl"] .trx_addons_marquee_wrap.trx_addons_marquee_reverse .trx_addons_marquee_element {
	padding-right: 0 !important;
	padding-left: 50px !important;
}


/* --------------------------------------------------------------------------
   16. Search results page

   The no-results page was laid out for English: its heading, its explanatory
   line and the search field under them all aligned left, so the Arabic ran
   away from the edge the reader starts at. The stray full stop that appeared
   at the start of the sentence was the same cause — a left-aligned line in an
   RTL paragraph puts its terminal punctuation on the wrong end.
   -------------------------------------------------------------------------- */

[dir="rtl"] .search_wrap_page,
[dir="rtl"] .page_content_wrap .search_wrap,
[dir="rtl"] body.search .content,
[dir="rtl"] body.search .content_wrap,
[dir="rtl"] .search_results_notice,
[dir="rtl"] .post_item_none_search,
[dir="rtl"] .post_item_none_search .post_content,
[dir="rtl"] .post_item_none_search .post_title {
	text-align: right !important;
	direction: rtl;
}

[dir="rtl"] .post_item_none_search .search_form,
[dir="rtl"] body.search .search_form {
	margin-left: auto;
	margin-right: 0;
}

[dir="rtl"] .post_item_none_search .search_field,
[dir="rtl"] body.search .search_field {
	text-align: right !important;
	padding-right: 42px !important;
	padding-left: 12px !important;
}

[dir="rtl"] .post_item_none_search .search_submit,
[dir="rtl"] body.search .search_submit {
	left: auto !important;
	right: 0 !important;
	margin-left: 0 !important;
	margin-right: 17px !important;
}


/* --------------------------------------------------------------------------
   17. The scrolling banner

   An earlier attempt here set animation-direction: reverse. It did nothing:
   measured on the page, these elements carry animation: none — the movement
   comes from the widget's own script, not from CSS. Removed rather than left
   in place looking like it does something.

   The real fault was a race, and it is fixed in functions.php: the widget
   clones its text until the row is wide enough, measuring the original as it
   goes. TranslatePress swaps the text after that, so in Arabic the widget
   measured an empty element, cloned it 31 times (English needs 3), and only
   the first clone ever received the Arabic.

   What is left here is direction, which CSS does own. */
[dir="rtl"] .trx_addons_marquee_wrap,
[dir="rtl"] .trx_addons_bg_text {
	direction: rtl;
	unicode-bidi: isolate;
}

/* The banner pins its line of text to the top of the strip: a 126px line in a
   155px strip, with the 29px of slack all below. Latin ascenders fit in that;
   Arabic dots do not. The dot of ض and the two dots of ة were being clipped
   clean off, so "راحة ورعاية لكل مريض" was reading on screen as
   "راحه ورعايه لكل مريص" — a spelling mistake made entirely by CSS.

   Centring the line in the strip it already occupies puts about 15px above and
   below. No extra height, no shift to anything around it. */
[dir="rtl"] .trx_addons_bg_text.trx_addons_marquee_wrap,
[dir="rtl"] .trx_addons_bg_text {
	align-items: center;
}


/* --------------------------------------------------------------------------
   18. Arrows, icon boxes and post navigation

   Four separate faults, all the same shape: a value that reads correctly in
   English and is simply wrong once the page runs right-to-left. */

/* 18.1  The CTA arrows on the services page point the way you read. In Arabic
   that is leftwards. Scoped to the "icon on the right" widgets, which on this
   site are only ever arrows and chevrons — the tick marks on the home page
   use the "icon on the left" variant and must not be flipped. */
[dir="rtl"] .trx-addons-icon-right .trx-addons-icon-list-icon svg {
	transform: scaleX(-1);
}

/* 18.2  Post-card meta. The icon carries margin-right, which in RTL puts the
   gap on the outside and leaves the icon touching the text it labels. */
[dir="rtl"] .trx-addons-posts-item-meta .trx-addons-icon {
	margin-right: 0 !important;
	margin-left: 8px !important;
}

/* 18.3  Icon boxes set to "start" alignment. Elementor writes text-align:end
   for them, which resolves to the right in English and to the LEFT in Arabic
   — so both the icon and the heading drifted to the wrong edge with 100px of
   dead space beside them. Pinned to the right for the start-aligned preset. */
[dir="rtl"] .elementor-position-block-start .elementor-icon-box-icon,
[dir="rtl"] .elementor-position-block-start .elementor-icon-box-content,
[dir="rtl"] .elementor-position-block-start .elementor-icon-box-title,
[dir="rtl"] .elementor-position-block-start .elementor-icon-box-description {
	text-align: right;
}

/* 18.4  Previous / next post links. The two blocks already swap sides, but
   three things inside them did not: the headings still hug the inner edge,
   and both arrow glyphs point inwards with their gap on the wrong side. */
[dir="rtl"] .nav-links-single .nav-previous .post-title,
[dir="rtl"] .nav-links-single .nav-previous .post_date,
[dir="rtl"] .nav-links-single .nav-previous a {
	text-align: right;
}

[dir="rtl"] .nav-links-single .nav-next .post-title,
[dir="rtl"] .nav-links-single .nav-next .post_date,
[dir="rtl"] .nav-links-single .nav-next a {
	text-align: left;
}

[dir="rtl"] .nav-links-single .nav-arrow-label::before,
[dir="rtl"] .nav-links-single .nav-arrow-label::after {
	display: inline-block;
	transform: scaleX(-1);
}

[dir="rtl"] .nav-links-single .nav-previous .nav-arrow-label::before {
	margin-right: 0;
	margin-left: 0.36em;
}

[dir="rtl"] .nav-links-single .nav-next .nav-arrow-label::after {
	margin-left: 0;
	margin-right: 0.36em;
}


/* 19. The scrolling banner, Arabic sizing.

   15em is tuned for Latin capitals. Arabic sits taller and heavier at the
   same size, so the band read as a wall of type. Dropped to 12.5em and to a
   medium weight — closer in visual weight to the English original, and it
   gives the dots more clearance inside the strip as a side effect. */
[dir="rtl"] .elementor-element.elementor-element-c1b37ed .trx_addons_bg_text_char {
	font-size: 129px;
}

@media (max-width: 1279px) {
	[dir="rtl"] .elementor-element.elementor-element-c1b37ed .trx_addons_bg_text_char {
		font-size: 82px;
	}
}

@media (max-width: 767px) {
	[dir="rtl"] .elementor-element.elementor-element-c1b37ed .trx_addons_bg_text_char {
		font-size: 49px;
	}
}


/* 19b. The strip is still too short for Arabic.

   Centring the line (section 17) was enough at the desktop size but not at the
   tablet one: the theme sets line-height 0.8em, which is shorter than the font
   asks for, and the strip is then pinned to a fixed pixel height. Whatever the
   breakpoint, the dot of ض and the dots of ة sat above the ceiling and were
   sliced off — measured and photographed at both sizes before changing this.

   Letting the strip size itself and giving the line a full 1.0em is the least
   that renders every letter. It makes the band taller in Arabic than it is in
   English; that is the price of showing the text correctly, and English is
   untouched. */
[dir="rtl"] .trx_addons_bg_text.trx_addons_marquee_wrap {
	height: auto !important;
	min-height: 0 !important;
}

[dir="rtl"] .trx_addons_bg_text .trx_addons_bg_text_inner .trx_addons_bg_text_char {
	line-height: 1em !important;
}


/* 20. Phone numbers keep their country code on the left.

   "+974 44156516" is two digit runs with a space between them and no strong
   character anywhere. Inside an RTL paragraph the bidi algorithm is entitled
   to reorder the runs, and it does: the number rendered as "44156516 974+".
   Measured, not guessed — the "+974" range sat to the right of the rest.

   unicode-bidi: plaintext resolves each item's direction from its own first
   strong character, so a digits-only string falls to LTR and reads correctly
   while an Arabic label in the same list stays RTL. No need to mark up which
   list items happen to be phone numbers. */
[dir="rtl"] .elementor-icon-list-text,
[dir="rtl"] .trx-addons-icon-list-text,
[dir="rtl"] a[href^="tel:"] {
	unicode-bidi: plaintext;
}