/* RTL fixes for Neuros 2.2.1 — generated by comparing theme.css vs theme-rtl.css. Loaded only when is_rtl(). Theme-independent: lives in the child theme. */ /* NOTE (2026-09-12): the slider navigation is deliberately NOT mirrored. Owl Carousel keeps .owl-prev on the left edge and .owl-next on the right edge in RTL too, so the theme's own radii/decorations are already correct there. Auto-mirroring them (earlier version of this file) inverted the rounded corners — removed. */ /* NOTE (2026-09-13): same for the "decoration" notches of neuros_button, neuros_video_button and the Elementor icon widget — theme-rtl.css keeps their positions physical, so flipping only the radii broke the concave corners. Those generated rules were removed; the icon widget gets a real mirror below. */ html[dir="rtl"] .elementor-widget.title-alignment-left .neuros-heading.heading-with-pagination { text-align: right; } /* audio listing pills (e.g. markets flags): in RTL the image is the first flex item on the RIGHT edge and the title sits to its left, so the gap belongs on the image's LEFT side. The earlier generated mirror moved it to the right, pushing the flag away from the pill edge. */ html[dir="rtl"] .elementor-widget-neuros_audio_listing.title-position-left .audio-item img { margin-right: 0; } html[dir="rtl"] .elementor-widget-neuros_audio_listing.title-position-right .audio-item img { margin-right: 0; margin-left: 1em; } html[dir="rtl"] .elementor-widget-neuros_icon_box.icon-position-left.alignment-left .icon-box-item { text-align: right; } html[dir="rtl"] .elementor-widget-neuros_icon_box.icon-position-right.alignment-left .icon-box-item { text-align: right; } html[dir="rtl"] .elementor-widget-neuros_icon_box.icon-position-bottom.alignment-left .icon-box-item { text-align: right; } html[dir="rtl"] .content-slider-video .eicon-play, .neuros_video_button_widget .eicon-play { margin-left: 0; margin-right: 0.3em; } /* Manual RTL fixes observed on staging (2026-09-12) */ /* Animated/split headings (neuros_special_text, char-split animations) render reversed in RTL: keep their inner direction LTR only when text is Latin; for Persian we disable splitting via class .nadi-no-split */ html[dir="rtl"] .nadi-no-split .neuros-special-text, html[dir="rtl"] .nadi-no-split .neuros-heading { unicode-bidi: plaintext; } /* Button/icon arrow glyphs should mirror in RTL */ html[dir="rtl"] .neuros-button .button-icon i, html[dir="rtl"] .neuros-button .button-icon svg, html[dir="rtl"] .neuros-heading .heading-icon i { transform: scaleX(-1); display: inline-block; } /* ---------- neuros_button arrow (RTL) ---------- Theme choreography (LTR): the resting arrow sits AFTER the label (left slot) and on hover it swaps to the other side while the button padding shifts with it. theme-rtl.css mirrors the sides, which in Persian puts the resting arrow BEFORE the label. So: keep the theme's original (physical) sides and motion, and only swap the glyph for the theme's own left-pointing one (icon-button-arrow-left, \e833). */ html[dir="rtl"] .neuros-button span[class*="icon-button-arrow"], html[dir="rtl"] .body-container button:not(.customize-partial-edit-shortcut-button) span[class*="icon-button-arrow"], html[dir="rtl"] .body-container input[type="submit"] span[class*="icon-button-arrow"], html[dir="rtl"] .body-container input[type="button"] span[class*="icon-button-arrow"] { right: auto; left: 23px; /* without an explicit width the span shrink-to-fits the whole free width and, in RTL, paints its glyph at the far (inline-start) end — on top of the label */ width: 1.2em; text-align: center; } html[dir="rtl"] .neuros-button span[class*="icon-button-arrow"]:before, html[dir="rtl"] .body-container button:not(.customize-partial-edit-shortcut-button) span[class*="icon-button-arrow"]:before, html[dir="rtl"] .body-container input[type="submit"] span[class*="icon-button-arrow"]:before { content: '\e833'; } /* hover twin waits on the other side of the label and slides in */ html[dir="rtl"] .neuros-button span[class*="icon-button-arrow"].right, html[dir="rtl"] .body-container button:not(.customize-partial-edit-shortcut-button) span[class*="icon-button-arrow"].right { left: auto; right: 24px; -webkit-transform: translateY(-50%) translateX(1em); transform: translateY(-50%) translateX(1em); } html[dir="rtl"] .neuros-button:not(:disabled):not([disabled]):not(.disabled):hover span[class*="icon-button-arrow"].left, html[dir="rtl"] .body-container button:not(.customize-partial-edit-shortcut-button):not(:disabled):not([disabled]):not(.disabled):hover span[class*="icon-button-arrow"].left { -webkit-transform: translateY(-50%) translateX(-1em); transform: translateY(-50%) translateX(-1em); } html[dir="rtl"] .neuros-button:not(:disabled):not([disabled]):not(.disabled):hover span[class*="icon-button-arrow"].right, html[dir="rtl"] .body-container button:not(.customize-partial-edit-shortcut-button):not(:disabled):not([disabled]):not(.disabled):hover span[class*="icon-button-arrow"].right { -webkit-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } /* The label padding must follow the arrow: room on the LEFT at rest, on the RIGHT on hover (theme.css LTR values). theme-rtl.css mirrors it to the right, so the resting arrow was painted over the label. :where() keeps the theme's own specificity, so per-widget padding set in Elementor still wins. */ :where(html[dir="rtl"]) .neuros-button { padding: 10px 24px 11px calc(23px + 1.42857em); } :where(html[dir="rtl"]) .neuros-button:not(:disabled):hover { padding: 10px calc(23px + 1.42857em) 11px 24px; } html[dir="rtl"] .neuros-price-item-widget .price-item .price-item-button-container .neuros-button { padding: 10px 34px 11px 43px; } html[dir="rtl"] .neuros-price-item-widget .price-item .price-item-button-container .neuros-button:hover { padding: 10px 43px 11px 34px; } html[dir="rtl"] .single-project .project-post-content .project-post-button .neuros-button { padding-left: calc(23px + 1.42857em); padding-right: 34px; } html[dir="rtl"] .single-project .project-post-content .project-post-button .neuros-button:hover { padding-left: 34px; padding-right: 43px; } /* "alt" button type (text link with arrow, no box): arrow flush with the edges, no vertical centring transform */ html[dir="rtl"] .elementor-widget-neuros_button.neuros-button-type-alt .neuros-button { padding: 0 0 5px 1.42857em; } html[dir="rtl"] .elementor-widget-neuros_button.neuros-button-type-alt .neuros-button:hover { padding: 0 1.42857em 5px 0; } html[dir="rtl"] .elementor-widget-neuros_button.neuros-button-type-alt .neuros-button span[class^="icon"].left { left: 0; right: auto; -webkit-transform: none; transform: none; } html[dir="rtl"] .elementor-widget-neuros_button.neuros-button-type-alt .neuros-button span[class^="icon"].right { left: auto; right: 0; -webkit-transform: translateX(1em); transform: translateX(1em); } html[dir="rtl"] .elementor-widget-neuros_button.neuros-button-type-alt .neuros-button:hover span[class^="icon"].left { -webkit-transform: translateX(-1em) !important; transform: translateX(-1em) !important; } html[dir="rtl"] .elementor-widget-neuros_button.neuros-button-type-alt .neuros-button:hover span[class^="icon"].right { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } /* 404 button uses pseudo-elements instead of spans */ html[dir="rtl"] .error-404-wrapper .error-404-inner .error-404-button .neuros-button:before, html[dir="rtl"] .error-404-wrapper .error-404-inner .error-404-button .neuros-button:after { content: '\e833'; } html[dir="rtl"] .error-404-wrapper .error-404-inner .error-404-button .neuros-button:before { right: auto; left: 23px; } html[dir="rtl"] .error-404-wrapper .error-404-inner .error-404-button .neuros-button:after { left: auto; right: 24px; } /* Content-slider CTA: the theme offsets the arrow from --button-side-padding and flips the button padding on hover so the label slides as the arrow changes side. Restore those physical sides. */ html[dir="rtl"] .neuros-content-slider-widget .owl-carousel.owl-theme .neuros-button { padding: 15px 49px 16px var(--button-side-padding); } html[dir="rtl"] .neuros-content-slider-widget .owl-carousel.owl-theme .neuros-button:hover { padding: 15px var(--button-side-padding) 16px 49px; } html[dir="rtl"] .neuros-content-slider-widget .owl-carousel.owl-theme .neuros-button span[class^="icon"].left { right: auto; left: calc(var(--button-side-padding) - 20px); } html[dir="rtl"] .neuros-content-slider-widget .owl-carousel.owl-theme .neuros-button span[class^="icon"].right { left: auto; right: calc(var(--button-side-padding) - 20px); } /* ---------- Elementor icon widget with Neuros "decoration" (arrow circle notched into a box corner) ---------- LTR design: the circle sits in the END corner (right-aligned) and points forward. In RTL the end corner is the LEFT one, so right-aligned decorated icons render bottom-left and left-aligned ones bottom-right, with the notch geometry mirrored. Negative side margins are mirrored by mu-plugins/nadi-core/rtl-elementor.php. */ html[dir="rtl"] .elementor-widget-icon.neuros-icon-decoration-on.neuros-icon-alignment-right .elementor-widget-container { text-align: left; } html[dir="rtl"] .elementor-widget-icon.neuros-icon-decoration-on.neuros-icon-alignment-left .elementor-widget-container { text-align: right; } html[dir="rtl"] .elementor-widget-icon.neuros-icon-decoration-on.neuros-icon-alignment-right .elementor-icon-wrapper { padding: 20px 20px 0 0; } html[dir="rtl"] .elementor-widget-icon.neuros-icon-decoration-on.neuros-icon-alignment-right .elementor-icon-wrapper:before { left: 0; right: auto; top: -20px; bottom: auto; border-radius: 0; border-bottom-left-radius: 20px; } html[dir="rtl"] .elementor-widget-icon.neuros-icon-decoration-on.neuros-icon-alignment-right .elementor-icon-wrapper:after { right: 0; left: auto; top: auto; bottom: 0; border-radius: 0; border-bottom-left-radius: 20px; } html[dir="rtl"] .elementor-widget-icon.neuros-icon-decoration-on.neuros-icon-alignment-left .elementor-icon-wrapper { padding: 20px 0 0 20px; } html[dir="rtl"] .elementor-widget-icon.neuros-icon-decoration-on.neuros-icon-alignment-left .elementor-icon-wrapper:before { right: 0; left: auto; top: -20px; bottom: auto; border-radius: 0; border-bottom-right-radius: 20px; } html[dir="rtl"] .elementor-widget-icon.neuros-icon-decoration-on.neuros-icon-alignment-left .elementor-icon-wrapper:after { left: 0; right: auto; top: auto; bottom: 0; border-radius: 0; border-bottom-right-radius: 20px; } /* forward arrow points left in RTL (theme's own left glyph). The slide-horizontal hover already moves leftwards in theme-rtl.css, which matches a left-pointing arrow. */ html[dir="rtl"] .elementor-widget-icon .fontello.icon-button-arrow:before, html[dir="rtl"] .elementor-icon .fontello.icon-button-arrow:before { content: '\e833'; } /* Case study listing (and the Events (Nadi) widget built on it): theme-rtl.css dropped the `.post-meta-item-date > span` selector and kept only the `a` variant, so in RTL the coloured date box collapsed to an inline span with nothing to paint (2026-10-01). Same rules as theme.css, paddings mirrored. */ .case-study-listing-wrapper .case-study-item .post-meta-item-date > span{ display:block; min-width:81px; padding:8px 10px 11px 21px; border-radius:7px; box-sizing:border-box; } .case-study-listing-wrapper.case-study-classic-listing .classic-blog-item-wrapper .post-meta-item-date > span{ padding:8px 10px 19px 21px; min-width:104px; } /* the comment form's submit (a plain