html[lang="ar"],
html[dir="rtl"] {
  direction: rtl;
}

html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button,
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: "Cairo", sans-serif;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  text-align: right;
  line-height: 1.8;
}

/* Keep icon fonts intact in Arabic/RTL */
html[lang="ar"] .fa,
html[lang="ar"] .fas,
html[lang="ar"] .fa-solid,
html[lang="ar"] .fa-regular,
html[lang="ar"] .far,
html[lang="ar"] .fal,
html[dir="rtl"] .fa,
html[dir="rtl"] .fas,
html[dir="rtl"] .fa-solid,
html[dir="rtl"] .fa-regular,
html[dir="rtl"] .far,
html[dir="rtl"] .fal {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
}

html[lang="ar"] .far,
html[lang="ar"] .fa-regular,
html[lang="ar"] .fal,
html[dir="rtl"] .far,
html[dir="rtl"] .fa-regular,
html[dir="rtl"] .fal {
  font-weight: 400;
}

html[lang="ar"] .fab,
html[dir="rtl"] .fab,
html[lang="ar"] .fa-brands,
html[dir="rtl"] .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400;
}

html[lang="ar"] [class^="flaticon-"],
html[lang="ar"] [class*=" flaticon-"],
html[dir="rtl"] [class^="flaticon-"],
html[dir="rtl"] [class*=" flaticon-"] {
  font-family: "Flaticon" !important;
}

html[lang="ar"] [class^="icon-"],
html[lang="ar"] [class*=" icon-"],
html[dir="rtl"] [class^="icon-"],
html[dir="rtl"] [class*=" icon-"] {
  font-family: "icomoon" !important;
}

html[lang="ar"] .main-menu .navigation,
html[dir="rtl"] .main-menu .navigation {
  direction: rtl;
}

html[lang="ar"] .main-menu .navigation > li,
html[dir="rtl"] .main-menu .navigation > li {
  float: right;
}

html[lang="ar"] .main-menu .navigation > li > ul,
html[dir="rtl"] .main-menu .navigation > li > ul {
  right: 0;
  left: auto;
  text-align: right;
}

html[lang="ar"] .breadcrumb-menu ul,
html[dir="rtl"] .breadcrumb-menu ul {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
}

html[lang="ar"] .breadcrumb-menu ul li,
html[dir="rtl"] .breadcrumb-menu ul li {
  float: none;
  margin: 0;
  padding: 0;
}

html[lang="ar"] .breadcrumb-area .title,
html[dir="rtl"] .breadcrumb-area .title {
  float: right;
  text-align: right;
}

html[lang="ar"] .breadcrumb-menu,
html[dir="rtl"] .breadcrumb-menu {
  float: left;
}

html[lang="ar"] .single-service-style2 .text-holder .inner .text p,
html[dir="rtl"] .single-service-style2 .text-holder .inner .text p,
html[lang="ar"] .top-text-box p,
html[dir="rtl"] .top-text-box p,
html[lang="ar"] .content-box .text,
html[dir="rtl"] .content-box .text {
  text-align: right;
}

/* Better Arabic numbers and punctuation flow */
html[lang="ar"] .price,
html[dir="rtl"] .price {
  unicode-bidi: plaintext;
}

/* Mobile optimization for Arabic */
@media only screen and (max-width: 1199px) {
  html[lang="ar"] .main-menu-box,
  html[dir="rtl"] .main-menu-box {
    float: none;
  }

  html[lang="ar"] .navbar-collapse,
  html[dir="rtl"] .navbar-collapse {
    text-align: right;
  }

  html[lang="ar"] .main-menu .navigation > li,
  html[dir="rtl"] .main-menu .navigation > li {
    float: none;
  }

  html[lang="ar"] .mainmenu-right.style2,
  html[dir="rtl"] .mainmenu-right.style2 {
    width: 100%;
    justify-content: flex-end;
  }
}

@media only screen and (max-width: 767px) {
  html[lang="ar"] .title,
  html[dir="rtl"] .title {
    line-height: 1.5;
  }

  html[lang="ar"] h1,
  html[lang="ar"] h2,
  html[lang="ar"] h3,
  html[dir="rtl"] h1,
  html[dir="rtl"] h2,
  html[dir="rtl"] h3 {
    line-height: 1.45;
    word-break: break-word;
  }

  html[lang="ar"] .breadcrumb-menu,
  html[dir="rtl"] .breadcrumb-menu {
    float: none;
    width: 100%;
    margin-top: 10px;
  }

  html[lang="ar"] .breadcrumb-menu ul,
  html[dir="rtl"] .breadcrumb-menu ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  html[lang="ar"] .brand-card,
  html[dir="rtl"] .brand-card {
    height: 110px;
  }

  html[lang="ar"] .language-switcher-pills,
  html[dir="rtl"] .language-switcher-pills {
    width: 100%;
  }

  html[lang="ar"] .language-pill,
  html[dir="rtl"] .language-pill {
    flex: 1 1 50%;
    min-width: 0;
  }
}