/* ============================================
   KBI Beauty — Arabic RTL Stylesheet
   Loaded only on /ar/ pages, after theme.css
   ============================================ */

/* --- Arabic Font --- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

html[lang="ar"] {
  font-family: 'Cairo', sans-serif !important;
}

html[lang="ar"] body,
html[lang="ar"] div,
html[lang="ar"] p,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] a,
html[lang="ar"] span:not([class^="icofont-"]):not([class*=" icofont-"]):not([class^="mkov-"]):not([class*=" mkov-"]):not([class^="noun-"]):not([class*=" noun-"]),
html[lang="ar"] li,
html[lang="ar"] td,
html[lang="ar"] th,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button {
  font-family: 'Cairo', sans-serif !important;
}

/* --- Base RTL Direction --- */
html[lang="ar"] body {
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
}

/* --- Navigation --- */
html[lang="ar"] .navbar-nav {
  flex-direction: row-reverse;
}

html[lang="ar"] .navbar-brand {
  margin-right: 0;
  margin-left: auto;
}

html[lang="ar"] .dropdown-menu {
  right: 0;
  left: auto;
  text-align: right;
}

html[lang="ar"] .navbar-toggler {
  margin-left: 0;
  margin-right: auto;
}

/* --- Header sidebar/popup menu --- */
html[lang="ar"] .side-menu {
  right: auto;
  left: 0;
}

html[lang="ar"] .side-menu .close-btn {
  right: auto;
  left: 15px;
}

/* --- Header Alignment Fix --- */
html[lang="ar"] .header_01 .row {
  flex-direction: row-reverse;
}

/* --- Hero Section Fix (About, Contact, Blog) --- */
/* Mirror English structure: Text left, Image right */
html[lang="ar"] .page_banner .layer_img {
  text-align: left !important;
}

html[lang="ar"] .page_banner .row {
  flex-direction: row-reverse;
}

html[lang="ar"] .page_banner .offset-lg-1 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[lang="ar"] .banner-title {
  text-align: left;
}

html[lang="ar"] .cusLogo {
  text-align: left;
}

html[lang="ar"] .navAccess {
  justify-content: flex-start;
}

/* --- Why Be Organic Section Refinement --- */
/* Un-flip layout: Image left, Features right */
html[lang="ar"] .featureSection2 .row {
  flex-direction: row !important;
}

/* Ensure icons and text align left (English style) */
html[lang="ar"] .featureSection2 .icon_box_02 {
  text-align: left !important;
}


html[lang="ar"] .mainMenu {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html[lang="ar"] .mainMenu ul {
  text-align: center !important;
}

html[lang="ar"] .mainMenu ul li {
  margin: 0 0 0 50px !important;
}

html[lang="ar"] .mainMenu ul li:last-child {
  margin-left: 0 !important;
}

html[lang="ar"] .mainMenu ul li ul.sub-menu {
  left: auto !important;
  right: 0 !important;
}

html[lang="ar"] .mainMenu ul li ul.sub-menu li a {
  text-align: right !important;
}

html[lang="ar"] .mainMenu>ul ul li.menu-item-has-children>a:after {
  float: left !important;
}

/* --- Welcome Section: keep product boxes in same LTR order as English --- */
html[lang="ar"] .welcomeSection .row:last-child {
  flex-direction: row-reverse;
}

/* --- Action Boxes (welcome section products): mirror left padding to right for RTL --- */
html[lang="ar"] .actionBox {
  padding-left: 0 !important;
  padding-right: 55px !important;
  text-align: right;
  background: url('../images/bg/2-ar.jpg') no-repeat right bottom #f0f0f1 !important;
}

html[lang="ar"] .actionBox.abBg2 {
  background: url('../images/bg/3-ar.jpg') no-repeat right bottom #e9f9fd !important;
}

/* --- Layout: margins and paddings --- */
html[lang="ar"] .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[lang="ar"] .mr-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

html[lang="ar"] .ml-1 {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

html[lang="ar"] .ml-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

html[lang="ar"] .ml-3 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

html[lang="ar"] .ml-4 {
  margin-left: 0 !important;
  margin-right: 1.5rem !important;
}

html[lang="ar"] .ml-5 {
  margin-left: 0 !important;
  margin-right: 3rem !important;
}

html[lang="ar"] .mr-1 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}

html[lang="ar"] .mr-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

html[lang="ar"] .mr-3 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

html[lang="ar"] .mr-4 {
  margin-right: 0 !important;
  margin-left: 1.5rem !important;
}

html[lang="ar"] .mr-5 {
  margin-right: 0 !important;
  margin-left: 3rem !important;
}

html[lang="ar"] .pl-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html[lang="ar"] .offset-lg-1 {
  margin-left: 0 !important;
  margin-right: 8.333333% !important;
}

html[lang="ar"] .pr-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* --- Text alignment overrides --- */
html[lang="ar"] .text-left {
  text-align: right !important;
}

html[lang="ar"] .text-right {
  text-align: left !important;
}

/* --- Float overrides --- */
html[lang="ar"] .float-left {
  float: right !important;
}

html[lang="ar"] .float-right {
  float: left !important;
}

/* --- Icons that sit to the left of text — flip to right --- */
html[lang="ar"] .icon-left {
  margin-left: 8px;
  margin-right: 0;
}

/* --- List items --- */
html[lang="ar"] ul,
html[lang="ar"] ol {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* --- Form inputs --- */
html[lang="ar"] input[type="text"],
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] textarea,
html[lang="ar"] select {
  text-align: right;
  direction: rtl;
}

/* --- Breadcrumbs --- */
html[lang="ar"] .breadcrumb {
  flex-direction: row-reverse;
}

html[lang="ar"] .breadcrumb-item+.breadcrumb-item::before {
  content: "\\";
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* --- Section dividers / icon decorations that use left positioning --- */
html[lang="ar"] [class*="section-"] {
  direction: rtl;
}

/* --- Owl Carousel RTL --- */
html[lang="ar"] .owl-carousel {
  direction: ltr;
  /* Owl carousel handles its own direction internally */
}

/* Fix for product gallery images not appearing in RTL */
html[lang="ar"] .product_gallery .lSSlideOuter {
  direction: ltr !important;
}

/* Fix for product gallery thumbnails wrapping in Arabic */
html[lang="ar"] .product_gallery .lSSlideOuter .lSPager {
  padding: 0 !important;
  margin: 0 !important;
}

html[lang="ar"] .owl-carousel .owl-item {
  direction: rtl;
  /* But flip the content inside each slide back to RTL */
}

/* --- Slick Slider RTL --- */
html[lang="ar"] .slick-slider {
  direction: ltr;
}

html[lang="ar"] .slick-slide {
  direction: rtl;
}

/* Testimonial sliders use Slick rtl:true — must have direction:rtl on the container */
html[lang="ar"] .tw_testiSlider,
html[lang="ar"] .testiNav {
  direction: rtl !important;
}

html[lang="ar"] .tw_testiSlider .slick-slide,
html[lang="ar"] .testiNav .slick-slide {
  direction: rtl;
}

/* --- Revolution Slider RTL --- */
html[lang="ar"] .rev_slider_wrapper {
  direction: ltr;
}

html[lang="ar"] .rev_slider .tp-caption {
  direction: rtl;
  text-align: right;
}

/* --- Footer --- */
html[lang="ar"] .footer-widget {
  text-align: right;
}

html[lang="ar"] .footer-social-links {
  flex-direction: row-reverse;
}

/* --- Product page tabs --- */
html[lang="ar"] .nav-tabs {
  justify-content: flex-start !important;
}

/* --- Blog sidebar --- */
html[lang="ar"] .sidebar {
  border-right: none;
  border-left: 1px solid #eee;
  padding-right: 0;
  padding-left: 30px;
}

/* --- WhatsApp button — keep LTR so phone number reads correctly --- */
html[lang="ar"] .whatsapp-btn,
html[lang="ar"] a[href*="wa.me"],
html[lang="ar"] a[href*="whatsapp"] {
  direction: ltr;
  unicode-bidi: embed;
}

/* --- Language switcher button (will be added in nav) --- */


/* --- FIX 1: Newsletter Button Position --- */
html[lang="ar"] .news_letter_form,
html[lang="ar"] .mc4wp-form-fields input[type="email"] {
  text-align: right;
  padding-left: 110px !important;
  padding-right: 40px !important;
}

html[lang="ar"] .mc4wp-form-fields button {
  right: auto !important;
  left: 2px !important;
  border-radius: 30px !important;
}

/* --- FIX 4: About Page Features Section Layout --- */
html[lang="ar"] .featureSection2 .row {
  flex-direction: row-reverse;
}

html[lang="ar"] .featureSection2 [class*="col"]:first-child {
  order: 2;
}

html[lang="ar"] .featureSection2 [class*="col"]:last-child {
  order: 1;
}

/* --- FIX 5: About Page Founder Section Centering --- */
html[lang="ar"] .teamSection {
  text-align: center !important;
}

html[lang="ar"] .teamSection .row {
  justify-content: center;
}

html[lang="ar"] .teamSection [class*="col"] {
  text-align: center !important;
}

html[lang="ar"] .teamSection h2,
html[lang="ar"] .teamSection h3,
html[lang="ar"] .teamSection p,
html[lang="ar"] .teamSection span {
  text-align: center !important;
}

/* --- Phone Numbers Direction Fix --- */
html[lang="ar"] .phone-number,
html[lang="ar"] [class*="phone"],
html[lang="ar"] [class*="tel"],
html[lang="ar"] a[href^="tel"] {
  direction: ltr !important;
  display: inline-block !important;
  unicode-bidi: embed !important;
}

/* --- Contact/Form Section Mirror Fix --- */
html[lang="ar"] .appointment_area {
  transform: scaleX(-1);
}

html[lang="ar"] .appointment_area>* {
  transform: scaleX(-1);
}

/* --- Testimonials Active State Fix --- */
html[lang="ar"] .owl-item .navitem img {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

html[lang="ar"] .owl-item.active .navitem img,
html[lang="ar"] .owl-item.center .navitem img {
  opacity: 1 !important;
  filter: none !important;
}

/* --- Product Cards Fixes --- */
html[lang="ar"] .package_item {
  padding-left: 0 !important;
  padding-right: 90px !important;
}

html[lang="ar"] .package_item img {
  transform: scaleX(-1) !important;
  left: auto !important;
  right: 0 !important;
}

/* --- Contact info icon spacing (mirror margin-right → margin-left for RTL) --- */
html[lang="ar"] .icon_box_01 i {
  margin-right: 0 !important;
  margin-left: 13px !important;
}

/* --- Footer info_box: mirror icon to right side for RTL --- */
html[lang="ar"] .info_box {
  padding-left: 0 !important;
  padding-right: 90px !important;
}

html[lang="ar"] .info_box i {
  left: auto !important;
  right: 0 !important;
}

/* --- Product Item (Related Products) Fixes --- */
html[lang="ar"] .product_item,
html[lang="ar"] .product_item .pi_content {
  text-align: right !important;
}

html[lang="ar"] .product_item .product_price {
  justify-content: flex-start !important;
  display: flex !important;
}
/* Fix related products carousel alignment in Arabic (RTL) */
html[lang="ar"] .related_area .owl-carousel .owl-stage,
html[lang="ar"] .related_area .owl-carousel .owl-item {
  float: right !important;
}

/* Adjust icon spacing in product share section for Arabic (RTL) */
html[lang="ar"] .pro_m_social a {
  margin-left: 0 !important;
  margin-right: 30px !important;
}

/* Ensure the label doesn't overlap the first icon in RTL */
html[lang="ar"] .pro_m_social h5 {
  margin-left: 13px !important;
  margin-right: 0 !important;
}