/*
 * RTL overrides for the theme's own style.css (Bootstrap's grid/utility RTL
 * is handled separately by loading bootstrap.rtl.min.css instead of
 * bootstrap.min.css when dir="rtl" — see layouts/app.blade.php).
 *
 * Covers hardcoded physical-direction rules (margin/padding-left/right,
 * left/right positioning, border-left/right, float, text-align) in every
 * component actually used across the site: header/nav/footer chrome,
 * buttons/badges/floating corner buttons, homepage (hero slider, features,
 * stats, about teaser, practice-area cards, team teaser, CTA banner),
 * about page image collage, practice-area detail sidebar/service list,
 * team detail bio layout, and the contact page/form.
 */

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

/* Tajawal for all Arabic copy — overrides every font-family in style.css
   (DM Sans body text, Crimson Pro/Prata headings, none of which cover
   Arabic glyphs anyway). The universal selector + !important beats both
   the theme's plain rules and its few !important-marked ones (h1-h6,
   .body_font, .pr_font) on specificity. Icon elements (Font Awesome
   .fa/.far/.fas/.fab/.fal and the custom "lawyer" icon font's icon-*
   classes) are excluded — they rely on their own glyph font, not text. */
[dir="rtl"] *:not(.fa):not(.far):not(.fas):not(.fab):not(.fal):not([class*="icon-"]) {
  font-family: "Tajawal", sans-serif !important;
}

/* Global list text-align (style.css hardcodes `ul li { text-align: left }`) */
[dir="rtl"] ul li {
  text-align: right;
}

/* Directional "arrow" icons used on Learn More / Service Details / View Profile
   links are rotated 90deg to point up-right; mirror them to point up-left. */
[dir="rtl"] .btnd i,
[dir="rtl"] .theme-btn.style-1 i,
[dir="rtl"] .about_content a i,
[dir="rtl"] .service_wrapper.service-3 .single_service a i,
[dir="rtl"] .single_service_card a i,
[dir="rtl"] .single_service_items .content a i,
[dir="rtl"] .single_team_item .content a i,
[dir="rtl"] .single_blog_widget .content a i,
[dir="rtl"] .blog_items .share a.btnd i,
[dir="rtl"] .blog_items .share a.theme-btn i,
[dir="rtl"] .hero_wrapper.hero-3 .hero-contents span i {
  -webkit-transform: rotate(90deg) scaleX(-1);
  transform: rotate(90deg) scaleX(-1);
}

/* fa-long-arrow-alt-right / fa-chevron-double-right / fa-level-up-alt used as
   plain left-to-right arrows elsewhere (buttons, CTAs, 404 back-home link) */
[dir="rtl"] .theme-btn i.far.fa-long-arrow-alt-right,
[dir="rtl"] .theme-btn i.far.fa-chevron-double-right,
[dir="rtl"] .icon-arrow-right-2 {
  display: inline-block;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* Section badge icon (small svg before "Our Practice" / "About Us" etc. labels) */
[dir="rtl"] .section-title h6 img {
  margin-right: 0;
  margin-left: 10px;
}
[dir="rtl"] .section-title h6::after {
  left: auto;
  right: 0;
}

/* Header "Need help? Let's Talk" phone button — icon/text order already
   flips correctly via flexbox in RTL, only the icon's internal spacing needs
   to flip from margin-right to margin-left. */
[dir="rtl"] header .right_button .right_icon,
[dir="rtl"] .action-bar .right_button .right_icon,
[dir="rtl"] .single_service_details_right.single_service-2 .right_button .right_icon {
  margin-right: 0;
  margin-left: 15px;
}

/* Main nav dropdown panel — anchor it to the same edge as the parent link in RTL */
[dir="rtl"] header.header_1 .main-menu ul > li > ul,
[dir="rtl"] header.header_1 .main-menu_2 ul > li > ul {
  left: auto;
  right: 0;
}

/* Footer widget icon+text rows (address/phone/email) */
[dir="rtl"] .footer .single_footer_widget .single_footer_address .single_address {
  flex-direction: row;
}
[dir="rtl"] footer .single_footer_widget .single_footer_link ul li i,
[dir="rtl"] .far.fa-angle-double-right {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  display: inline-block;
}
[dir="rtl"] footer .single_footer_widget .single_footer_link ul > li > a i {
  margin-right: 0;
  margin-left: 8px;
}
[dir="rtl"] footer .single_footer_widget .single_footer_link ul > li > a:hover {
  padding-left: 0;
  padding-right: 10px;
}

/* Scroll-to-top and WhatsApp floating buttons swap corners in RTL so they
   keep sitting on opposite sides instead of overlapping. */
[dir="rtl"] #scrollUp {
  right: auto;
  left: 20px;
}
[dir="rtl"] .whatsapp-float {
  left: auto;
  right: 20px;
}

/* Base button icon spacing (theme-btn is used on hero buttons, the contact
   form submit button, and the 404 "Back to Homepage" link). The arrow icons
   themselves are already flipped above; this is just the gap beside them. */
[dir="rtl"] .theme-btn i {
  margin-left: 0;
  margin-right: 10px;
}
[dir="rtl"] .cta_wrapper.cta-1 .theme-btn i {
  margin-right: 0;
  margin-left: 6px;
}

/* Contact form column — stays flush against the map column, which now sits
   on the opposite side in RTL. */
[dir="rtl"] .contact_form {
  margin-left: 0;
  margin-right: auto;
}

/* ---------- Hero slider (homepage) ---------- */
[dir="rtl"] .hero_wrapper.hero-1 .single-slide-hero .number {
  left: auto;
  right: 0px;
}
[dir="rtl"] .hero-1 .owl-nav {
  right: auto;
  left: 5%;
}
@media (max-width: 768px) {
  [dir="rtl"] .hero-1 .owl-nav {
    right: auto;
    left: 2%;
  }
}
[dir="rtl"] .hero-1 .owl-dots {
  left: auto;
  right: 2%;
}

/* ---------- Features (homepage) ---------- */
[dir="rtl"] .single_feature_item .law_element_1 {
  right: auto !important;
  left: 0 !important;
}
[dir="rtl"] .single_feature_item .law_element_2 {
  left: auto;
  right: 0;
}

/* ---------- Stats / funfact strip (homepage) ---------- */
[dir="rtl"] .funfact_wrapper.funfact_wrapper-1 .feature_element {
  left: auto;
  right: calc(5% - 30px);
}

/* ---------- About section (homepage teaser + full About Us page) ---------- */
[dir="rtl"] .about_wrapper .about_element {
  right: auto;
  left: 0%;
}
[dir="rtl"] .single_about_left .modal_funfact {
  left: auto;
  right: 0%;
}
[dir="rtl"] .single_about_left .modal_funfact .about_funfact::before {
  left: auto;
  right: 0%;
}
[dir="rtl"] .single_about_left .modal_funfact .about_funfact::after {
  left: auto;
  right: 30%;
}

/* ---------- Practice Area cards (homepage teaser + listing page) ---------- */
[dir="rtl"] .single_service_card .jus_element {
  right: auto;
  left: 0;
}
[dir="rtl"] .single_service_card .single_img {
  border-radius: 500px 6px 6px 6px;
}

/* ---------- Team teaser card + "Schedule a meeting" button ---------- */
[dir="rtl"] .team_wrapper .single_team_btn span a i {
  margin-left: 0;
  margin-right: 10px;
}

/* ---------- Team member detail page ---------- */
[dir="rtl"] .service_details_wrapper .feature_element {
  right: auto;
  left: 20px;
}
[dir="rtl"] .single_service_details_left.service_details-2 .single_damages_content ul > li {
  margin-left: 0;
  margin-right: 10px;
}

/* ---------- Practice-area sidebar link list (used on team detail's
   Practice Areas sidebar and on the practice-area detail page) ---------- */
[dir="rtl"] .single_service_details_right.single_service-2 ul > li > a {
  padding-left: 0;
  padding-right: 20px;
}
[dir="rtl"] .single_service_details_right.single_service-2 ul > li > a::after {
  left: auto;
  right: 0;
}

/* ---------- Practice area detail — service bullet list ---------- */
[dir="rtl"] .single_service_details_left.service_details-1 ul > li {
  margin-left: 0;
  margin-right: 20px;
}

/* ---------- Contact page — "Get In Touch" info cards ---------- */
[dir="rtl"] .single_touch_items.touch_items-1 {
  padding-right: 0;
  padding-left: 180px;
}
@media (max-width: 600px) {
  [dir="rtl"] .single_touch_items.touch_items-1 {
    padding-left: 0;
  }
}
[dir="rtl"] .single_touch_items h5 i {
  margin-right: 0;
  margin-left: 10px;
}

/* ---------- Directional decorative graphics ----------
   These watermark/accent images (leaf, gavel, scale, justice icon) sit
   behind/beside content and read left-to-right in the base artwork; their
   position is already mirrored above, so also flip the artwork itself to
   match, the same way a person or arrow illustration would need to. */
[dir="rtl"] .law_element_1 img,
[dir="rtl"] .law_element_2 img,
[dir="rtl"] .funfact_wrapper.funfact_wrapper-1 .feature_element img,
[dir="rtl"] .service_details_wrapper .feature_element img,
[dir="rtl"] .about_wrapper .about_element img,
[dir="rtl"] .single_service_card .jus_element img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* ---------- WOW.js / animate.css entrance animation — disabled in RTL ----------
   fadeInLeft/fadeInRight slide sections in from the side; requested off
   entirely for Arabic rather than mirrored. WOW.js sets element visibility
   via JS independently of the animation itself, so this just makes the
   content appear immediately instead of sliding in. */
[dir="rtl"] .fadeInLeft,
[dir="rtl"] .fadeInRight {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
}