/* rtl-fixes.css — Arabic-only overrides for the mdlf theme.
   Loaded only when Lang::locale()=='ar' (see partials/_head), AFTER the
   rtlcss-generated mirrors (custom.rtl.css, custom2.rtl.css, shared.rtl.css,
   slicknav.rtl.min.css, responsive-fixes.rtl.css) and bootstrap.rtl.min.css.

   Those mirrors already swap every physical left/right rule, so this file must
   NOT re-flip anything. In particular the old `flex-direction: row-reverse`
   hacks are gone: under direction:rtl a flex row already runs right-to-left,
   and reversing it again put the menu back in LTR order (Home ended up on the
   far left). What is left here is what a mechanical mirror cannot know about:
   icon glyphs that point somewhere, and a few plugin quirks. */

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

/* ---- Directional icons ----
   Font Awesome arrows are NOT mirrored here. Every template in this codebase
   picks the arrow per language (fa-arrow-{{ trans('layout.float_rev') }} /
   trans('messages.rev_align')), and Bootstrap's carousel controls are mirrored
   by bootstrap.rtl.css itself; a blanket scaleX(-1) on .fa-arrow-* turned all
   of them back the wrong way. Only the arrow IMAGES the theme hardcodes
   (arrow-primary.svg / arrow-dark.svg) still need flipping. */
.readmore-btn img, .newsletter-btn img, .about-content-btn img, .quick-access-arrow img {
    transform: scaleX(-1);
    display: inline-block;
}

/* ---- Diagonal arrow SVGs (arrow-dark.svg / arrow-white.svg) ----
   The artwork points up-right; the theme rotates it 45deg so it reads as a
   plain "→". rtlcss mirrors a rotation by negating the angle, which turns
   rotate(45deg) into rotate(-45deg) -- the arrow then points UP, not left
   (that is the Quick Access arrow reported on /ar). The mirror of "→" is
   "←", so rotate first and then flip: scaleX(-1) rotate(45deg). */
.service-item .service-footer a img { transform: scaleX(-1) rotate(45deg); }

/* Newsletter submit: at rest the raw "↗" mirrors to "↖"; the hover state
   rotates it to a flat arrow, which must mirror to "←" for the same reason. */
.footer-newsletter-form .form-group .newsletter-btn:hover img { transform: scaleX(-1) rotate(45deg); }

/* Slider controls are the same artwork: next reads "→" (45deg) and prev "←"
   (225deg) in English, so in Arabic they simply swap. Negating the angles left
   them pointing up and down. */
.testimonial-slider .testimonial-button-next::before { transform: rotate(225deg); }
.testimonial-slider .testimonial-button-prev::before { transform: rotate(45deg); }

/* Phone / fax numbers in the footer address are LTR islands; never break them
   across lines in the narrow footer column. */
html[dir="rtl"] .footer-links span[dir="ltr"],
html[dir="rtl"] .widgets-footer-element span[dir="ltr"] { white-space: nowrap; display: inline-block; }

/* Theme buttons draw a diagonal "↗" arrow in ::before (arrow-white.svg /
   arrow-dark.svg). custom.rtl.css already moved it to the left edge; the glyph
   itself still has to be mirrored so it points "↖", and the 45° hover spin has
   to run the other way. The translate values must match custom.rtl.css. */
.btn-default::before, .btn-highlighted::before {
    transform: translate(15px, -50%) scaleX(-1);
}
.btn-default:hover::before, .btn-highlighted:hover::before {
    transform: translate(15px, -50%) scaleX(-1) rotate(45deg);
}

/* nested dropdown caret in the main menu (custom.css sets rotate(90deg) on
   hover; mirrored it should turn the other way) */
.main-menu ul li.submenu ul li.submenu > a:after { transform: scaleX(-1); }
.main-menu ul li.submenu ul li.submenu > a:hover:after { transform: scaleX(-1) rotate(-90deg); }

/* ---- Arabic typography ---- */
/* Latin display fonts (Manrope/Sora) have no Arabic glyphs; custom2.css already
   maps body/h1-h6 to TheSansArabic. Letter-spacing is meaningless in a
   connected script and breaks the joining, so it is neutralised everywhere. */
html[dir="rtl"] *, html[dir="rtl"] .section-title h3, html[dir="rtl"] .hero .section-title h3 {
    letter-spacing: 0 !important;
}
html[dir="rtl"] .section-title h1,
html[dir="rtl"] .section-title h2 { line-height: 1.35; }
html[dir="rtl"] p, html[dir="rtl"] li { line-height: 1.8; }

/* ---- Numbers / Latin fragments inside Arabic text keep their own direction ---- */
html[dir="rtl"] .about-counter .num { direction: ltr; }

/* ---- Slick/mobile menu (slicknav) ---- */
html[dir="rtl"] .slicknav_menu { text-align: right; }

/* ---- Swiper: it reads the dir attribute itself; make sure nothing overrides ---- */
html[dir="rtl"] .swiper-wrapper { direction: rtl; }

/* ---- Forms ---- */
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }