/* ==========================================================================
   AL THURAYYA ALUMINIUM — RTL overrides (Arabic)
   --------------------------------------------------------------------------
   The base theme (public/css/style.css) was built English/LTR-only. Its
   grid is actually Bootstrap 5 (flex-based .row/.col-*, not Bootstrap 3's
   float grid — check public/assets/css/bootstrap.min.css before assuming
   otherwise), which means a plain `direction: rtl` on <body> silently
   mirrors every .row's column order for free — sometimes exactly what you
   want, sometimes not (see the "main navigation row" section below, where
   it isn't). Rewriting every rule in the ~5,000-line theme for a
   pixel-perfect mirror was out of scope for this pass, so this file takes a
   pragmatic, targeted approach instead: it fixes the pieces that would
   otherwise look actively broken or unreadable in Arabic (text direction,
   icon/text spacing, dropdown menus, breadcrumb arrows, form fields,
   top bar / footer alignment) while leaving the overall Bootstrap column
   layout as-is. Loaded only when app()->getLocale() === 'ar'
   (see resources/views/layouts/app.blade.php).
   ========================================================================== */

body {
   direction: rtl;
   text-align: right;
}

/* Cairo used to be set here, Arabic-only. The site now runs Cairo
   everywhere (English pages included) via the `body, body * { ... }
   !important` rule in tsdur-overrides.css, which always wins over a
   plain-tag rule like this one would be regardless — so it moved there
   instead of being duplicated in both files. That rule's own comment
   carries the icon-font warning that used to live here: icofont/
   flaticon/fontawesome set their own font-family directly on the icon
   element with !important too, and must never be overridden with
   "font-family: inherit !important" on the icon classes — that was
   tried once and it broke every icon in Arabic. Do not re-add it here
   either. */

/* --------------------------------------------------------------------
   Generic alignment utility overrides (Bootstrap 3 has no RTL variant)
   -------------------------------------------------------------------- */
.text-left { text-align: right !important; }
.text-right { text-align: left !important; }
.pull-left { float: right !important; }
.pull-right { float: left !important; }

/* --------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------- */
.top-address .text-left,
.top-address.text-left {
   text-align: right;
}
.top-address p a i,
.top-address p span i,
.top-welcome p span i,
.top-welcomet p span i {
   margin-right: 0;
   margin-left: 6px;
}
.top-right-menu ul.social-icons.text-right {
   text-align: left !important;
}
.tsdur-lang-switch {
   margin-left: 12px;
   display: inline-block;
}

/* --------------------------------------------------------------------
   Logo + main navigation row — full mirror
   --------------------------------------------------------------------
   `.row.logo-left` (logo column + `.tx_menu_together` column) is a
   Bootstrap 5 flex row, so under the page-wide `direction: rtl` above,
   Bootstrap mirrors it for free: the logo column (first in the HTML)
   moves to the physical right and the menu column (second) moves to
   the physical left — logo top-right, like a native Arabic site.

   `.tx_menu_together` packs its two children (the menu, then the
   "get in touch" button) with the PHYSICAL keyword
   `justify-content: right` (style.css), which never responds to
   `direction`. Left alone, that keeps hugging the container's true
   right edge even after the column above has moved into the page's
   left half — pulling the whole nav + button into the middle of the
   header instead of spreading edge-to-edge. Flipping it to
   `justify-content: left` re-anchors the group to the column's outer
   edge, which is now the page's true left edge, so "Get in touch"
   lands flush left — the mirror of where it sits flush right in
   English.

   Menu item order needs no manual reordering: the `<li>`s are
   inline-block inside a `direction: rtl` list, so the browser's own
   bidi algorithm already renders the first `<li>` (Home) nearest the
   reading start — now the right, next to the logo — and the last one
   (Contact) at the far end — now the left, next to the button.
   -------------------------------------------------------------------- */
.tx_menu_together {
   justify-content: left !important;
}
.logo-left {
   text-align: right;
}
.trading_menu > ul {
   padding-right: 0;
}
.trading_menu ul .sub-menu {
   right: 0;
   left: auto;
   text-align: right;
}
.trading_menu ul .sub-menu li:before {
   right: auto;
   left: 15px;
}
.trading_menu ul .sub-menu li:hover {
   margin-left: 0;
   margin-right: 15px;
}

/* Mobile menu toggle icons swap sides */
.mobile_menu_option {
   direction: rtl;
}
.mobile_menu_inner {
   right: auto;
   left: 0;
}

/* --------------------------------------------------------------------
   Breadcrumb — mirror the "you here" arrow so it points toward the
   previous crumb instead of away from it
   -------------------------------------------------------------------- */
.breadcumb-inner ul {
   direction: rtl;
}
.breadcumb-inner li i.icofont-thin-right {
   display: inline-block;
   transform: scaleX(-1);
}

/* --------------------------------------------------------------------
   Icon + heading / paragraph spacing (icon-before-text pattern used
   throughout service, contact and feature blocks)
   -------------------------------------------------------------------- */
.service-item .flaticon,
.text_box .flaticon {
   margin-left: 0;
}
.witr_label,
.witr_percent {
   direction: rtl;
}

/* --------------------------------------------------------------------
   Forms (contact page)
   -------------------------------------------------------------------- */
.twr_form_box input,
.twr_form_box textarea {
   text-align: right;
   direction: rtl;
}
.text-danger {
   display: block;
   text-align: right;
}

/* --------------------------------------------------------------------
   Cards / lists that use a left border or left padding as a rail
   -------------------------------------------------------------------- */
.witri_texti_list ul,
.prots-contentg ul {
   padding-right: 0;
   text-align: right;
}
.eleft {
   margin-left: 6px;
   margin-right: 0;
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.footer-social-icon,
.copy-right-text {
   direction: rtl;
}

/* --------------------------------------------------------------------
   Sliders / carousels keep their existing left-to-right animation
   direction (WOW.js classes are set in the Blade markup, not here);
   only the caption text itself is right-aligned so it reads naturally.
   -------------------------------------------------------------------- */
.em_slider_inner.text-center,
.em_slider_inner.container.text-center {
   text-align: center;
}

/* --------------------------------------------------------------------
   "What our clients say" testimonial carousel (home page)
   --------------------------------------------------------------------
   Root cause: the theme's own plugin CSS flips slick's slides to
   float:right whenever an ancestor has dir="rtl":
      [dir='rtl'] .slick-slide { float: right }
   (public/assets/css/plugin_theme_css.css). But theme.js's `.test_active`
   slick() call never passes the matching `rtl: true` option, so Slick's
   JS keeps computing each slide's `left` offset assuming LTR flow. The
   float:right from the CSS and the left-offset math from the JS fight
   each other, so every slide lands outside the visible .slick-list
   (which clips overflow) — only the independently-positioned dots
   still show. Force this one carousel's internals back to the plain
   LTR flow Slick's JS expects; the card content itself is already
   center-aligned in style.css, so no text-direction change is needed
   here for readability.
   -------------------------------------------------------------------- */
.tr_test_area .test_active.slick-slider,
.tr_test_area .test_active .slick-list,
.tr_test_area .test_active .slick-track {
   direction: ltr;
}
.tr_test_area .test_active .slick-slide {
   float: left;
}