/* RTL CSS Overrides for SaasoX - Applied when body.lang-ar */

/* Base RTL — Montserrat Arabic applied to ALL elements */
body.lang-ar {
  --heading-font: "Montserrat-Arabic-Regular", sans-serif;
  --body-font: "Montserrat-Arabic-Regular", sans-serif;
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

body.lang-ar *:not(i):not([class*="fa-"]):not([class*=" fa"]):not([class*="oi "]):not([class*=" oi"]) {
  font-family: "Montserrat-Arabic-Regular", sans-serif !important;
}

/* Typography RTL */
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4, body.lang-ar h5, body.lang-ar h6,
body.lang-ar p, body.lang-ar li, body.lang-ar blockquote {
  text-align: right;
}

/* Lists RTL */
body.lang-ar ul, body.lang-ar ol {
  padding-right: 20px;
  padding-left: 0;
}

/* Header/Nav RTL */
body.lang-ar .cs_main_header_in { flex-wrap: nowrap !important; }
body.lang-ar .cs_main_header_right { margin-right: 0; margin-left: 0; }
body.lang-ar .cs_site_branding + .cs_main_header_center { margin-left: 0 !important; margin-right: 40px; }

body.lang-ar .cs_nav_list > li { margin-right: 0; margin-left: 30px; }
body.lang-ar .cs_nav_list > li:last-child { margin-left: 0; }

/* Language Toggle RTL: Mirroring both labels and circle to maintain visibility */
body.lang-ar .cs_lang_toggle .switch > span.on { 
  left: auto !important; 
  right: 0 !important; 
  font-family: var(--heading-font) !important;
  font-weight: bold;
  padding-right: 2px !important;
}
body.lang-ar .cs_lang_toggle .switch > span.off { 
  right: auto !important; 
  left: 0 !important; 
  font-family: var(--heading-font) !important;
  font-weight: bold;
  padding-left: 4px !important;
}
body.lang-ar .cs_lang_toggle input.check-toggle-round-flat + label:after {
  left: auto !important;
  right: 4px !important; /* Circle starts on the RIGHT in RTL (covering the inactive label) */
}
body.lang-ar .cs_lang_toggle input.check-toggle-round-flat:checked + label:after {
  margin-right: 44px !important; /* Circle slides to the LEFT (covering EN when AR is active) */
  margin-left: 0 !important;
}

body.lang-ar .menu-item-has-children > ul {
  left: auto; right: 0;
}
body.lang-ar .cs_nav_list ul ul {
  left: auto; right: 100%;
}

/* Buttons RTL */
body.lang-ar .cs_btn .cs_btn_icon {
  margin-right: 0; margin-left: 8px;
}
/* Mirror Button Arrow */
body.lang-ar .cs_btn_icon i.fa-arrow-right,
body.lang-ar .cs_text_btn .cs_btn_icon i.fa-arrow-right {
  display: inline-block;
  transform: scaleX(-1);
}
body.lang-ar .cs_btn.cs_style_1:hover i.fa-arrow-right {
  transform: scaleX(-1) translateX(20px);
}


/* Padding/Margin RTL */
body.lang-ar .cs_workink_process_heading,
body.lang-ar .cs_sidebar.cs_style_1,
body.lang-ar .cs_post_details,
body.lang-ar .cs_team_details .cs_team_info {
  padding-right: 42px; padding-left: 0;
}

/* Position RTL */
body.lang-ar .cs_post_category { left: auto; right: 0; border-radius: 0 0 0 50px; }
/* Pricing Table RTL Fixes */
body.lang-ar .cs_pricing_table.cs_style_1 .cs_pricing_table_shape,
body.lang-ar .cs_pricing_table.cs_style_1 .cs_pricing_badge {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  transform: none; /* Remove left:50% translateX translation that bugs RTL */
}

/* Brands Slider RTL Fix */
body.lang-ar .cs_horizontal_slider_wrapper {
  direction: ltr; /* Keeps the infinite marquee running without layout bugs */
}
body.lang-ar .cs_slider_arrows.cs_style_1 { right: auto; left: 60px; }
body.lang-ar .cs_menu_toggle { right: auto; left: 30px; }

/* Iconbox RTL */
body.lang-ar .cs_features_list li { padding-right: 17px; padding-left: 0; }

/* Accordion RTL */
body.lang-ar .cs_accordian_head { padding-right: 66px; padding-left: 24px; }
body.lang-ar .cs_accordian.cs_style_2 .cs_accordian_toggler { right: auto; left: 24px; }

/* Forms RTL */
body.lang-ar input, body.lang-ar textarea { text-align: right; }
body.lang-ar .cs_search .cs_search_button { right: auto; left: 0; border-radius: 8px 0 0 8px; }

body.lang-ar .cs_post_meta:last-child { padding-right: 22px; padding-left: 0; }

/* Hero/Services RTL */
body.lang-ar .cs_hero_text,
body.lang-ar .cs_card.cs_style_1 .cs_card_content { padding-left: 0; padding-right: 40px; }

/* Footer RTL */
body.lang-ar .cs_footer_widget.cs_links_widget + .cs_footer_widget { margin-right: 0; margin-left: 30px; }
body.lang-ar .cs_footer_menu { padding-right: 20px; padding-left: 0; }

/* Custom Lang Toggle RTL */
body.lang-ar .cs_lang_toggle { margin-right: 20px; margin-left: 0; }
body.lang-ar .cs_lang_btn.active { border-radius: 20px 0 0 20px; }
body.lang-ar .cs_lang_btn:not(.active) { border-radius: 0 20px 20px 0; }

/* Fix layout issues */
body.lang-ar .container { padding-right: 15px; padding-left: 15px; }

/* Mirror Iconbox 2 border radius */
body.lang-ar .cs_iconbox.cs_style_2 .cs_iconbox_icon { border-radius: 20px 20px 20px 0; }

/* Additional RTL fixes for specific components */
body.lang-ar .cs_features_items_wrapper { grid-template-columns: 1fr 1fr 1fr; } /* Maintain grid */
body.lang-ar .cs_team.cs_style_1 .cs_team_info { margin-right: -156px; margin-left: 0; }

@media (max-width: 991px) {
  body.lang-ar .cs_nav .cs_nav_list { padding-right: 15px; padding-left: 0; }
}

@media (max-width: 1199px) {
  body.lang-ar .cs_site_header.cs_style_1 .cs_main_header_right {
    margin-right: 0px;
    margin-left: 50px;
  }
}

/* ─── Hide Odoo's built-in language selector everywhere ─────────────
   We use the custom EN/AR toggle instead.
   Covers desktop navbar, mobile overlay, and all Odoo 18 header layouts.
   ──────────────────────────────────────────────────────────────────── */
.o_locale_nav_item,
header .o_locale_nav_item,
#top_menu .o_locale_nav_item,
.navbar-collapse .o_locale_nav_item,
.o_header_locale,
header li[id*="locale"],
header li[class*="locale"],
header .o_locale_selector,
header a[href*="?lang="],
header a[href*="/web/set_lang"] {
  display: none !important;
}

/* ─── Custom EN/AR toggle in mobile menu ───────────────────────────── */
#top_menu li.nav-item:has(#language-toggle-mobile),
.navbar-collapse li.nav-item:has(#language-toggle-mobile) {
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 8px;
  padding-top: 8px;
}

/* ─── Service-details hero: fix RTL overlap ────────────────────────
   .cs_hero_thumbnail is position:absolute; right:0 in the base CSS,
   which puts it on the RIGHT — same side as RTL text flow → overlap.
   Move it to left:0 so image sits on the LEFT in Arabic mode.
   ──────────────────────────────────────────────────────────────────── */
body.lang-ar .cs_hero.cs_style_3 .cs_hero_thumbnail {
  right: auto;
  left: 0;
}
body.lang-ar .cs_hero.cs_style_3 .cs_hero_text {
  text-align: right;
  direction: rtl;
}
@media (min-width: 1600px) {
  body.lang-ar .cs_hero.cs_style_3 .cs_hero_text {
    transform: translateX(100px); /* mirror LTR translateX(-100px) */
  }
}