/* =========================================================
   Arabic RTL — Argon dashboard + frontend
   Rule: html[dir=rtl] already reverses flexbox.
   Do NOT row-reverse those containers again.
   ========================================================= */

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

html[dir="rtl"],
html[dir="rtl"] body,
body.rtl-layout {
  text-align: right;
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

html[dir="rtl"] code,
html[dir="rtl"] pre {
  direction: ltr;
  text-align: left;
}

/* ---------------------------------------------------------
   Sidenav (right)
   --------------------------------------------------------- */

html[dir="rtl"] .sidenav.fixed-right,
html[dir="rtl"] .navbar-vertical.fixed-right {
  left: auto !important;
  right: 0 !important;
}

html[dir="rtl"] .navbar-vertical.navbar-expand-xs.fixed-right {
  margin: 1%;
  border-radius: 1rem;
  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
  border-width: 0 0 0 1px;
}

html[dir="rtl"] .main-content {
  margin-left: 0 !important;
}

@media (min-width: 1200px) {
  html[dir="rtl"] .sidenav.fixed-right + .main-content,
  html[dir="rtl"] .navbar-vertical.fixed-right + .main-content {
    margin-left: 0 !important;
    margin-right: 62px !important;
  }

  html[dir="rtl"] .g-sidenav-pinned .sidenav.fixed-right + .main-content,
  html[dir="rtl"] .g-sidenav-pinned .navbar-vertical.fixed-right + .main-content {
    margin-left: 0 !important;
    margin-right: 250px !important;
  }
}

@media (max-width: 1199.98px) {
  html[dir="rtl"] .sidenav,
  html[dir="rtl"] .sidenav.fixed-right {
    transform: translateX(110%) !important;
  }

  html[dir="rtl"] .g-sidenav-pinned .sidenav,
  html[dir="rtl"] .g-sidenav-pinned .sidenav.fixed-right {
    transform: translateX(0) !important;
  }

  html[dir="rtl"] .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Fix LTR-only padding-left:0 on lists (RTL needs start/right cleared too) */
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .list-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

/* Brand row: logo on the right, toggler on the left */
html[dir="rtl"] .sidenav-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 1.25rem !important;
  height: auto !important;
  min-height: 78px;
}

html[dir="rtl"] .sidenav-header .ml-auto,
html[dir="rtl"] .sidenav-header .mr-auto {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .sidenav .navbar-brand {
  margin: 0 !important;
  padding: 0 !important;
}

html[dir="rtl"] .sidenav .navbar-brand-img {
  max-height: 2.5rem;
}

/* Fix Argon negative margins that break RTL sidebar padding */
html[dir="rtl"] .navbar-vertical .navbar-nav,
html[dir="rtl"] .navbar-vertical.navbar-expand-xs .navbar-nav,
html[dir="rtl"] .navbar-vertical.navbar-expand-xs .navbar-collapse {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .navbar-vertical.navbar-expand-xs .navbar-collapse {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

html[dir="rtl"] .sidenav .navbar-inner {
  padding: 0.5rem 0 1rem !important;
}

/* Nav links: even padding, icon beside label */
html[dir="rtl"] .navbar-vertical .navbar-nav .nav-link,
html[dir="rtl"] .navbar-vertical.navbar-expand-xs .navbar-nav .nav-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: right !important;
  gap: 0.75rem;
  padding: 0.65rem 1rem !important;
  margin: 0.15rem 0 !important;
}

html[dir="rtl"] .navbar-vertical .navbar-nav .nav-link > i,
html[dir="rtl"] .navbar-vertical .navbar-nav .nav-link > .ni,
html[dir="rtl"] .navbar-vertical .navbar-nav .nav-link > .fi,
html[dir="rtl"] .navbar-vertical .navbar-nav .nav-link > .fas,
html[dir="rtl"] .navbar-vertical .navbar-nav .nav-link > .far {
  margin: 0 !important;
  min-width: 1.5rem !important;
  width: 1.5rem;
  text-align: center;
  flex: 0 0 auto !important;
}

html[dir="rtl"] .navbar-vertical .navbar-nav .nav-link .nav-link-text {
  flex: 0 1 auto !important;
  text-align: right !important;
  white-space: nowrap;
}

html[dir="rtl"] .navbar-vertical.navbar-expand-xs .navbar-nav > .nav-item {
  margin-top: 0 !important;
  padding: 0 !important;
}

html[dir="rtl"] .navbar-vertical.navbar-expand-xs .navbar-nav > .nav-item > .nav-link.active,
html[dir="rtl"] .navbar-vertical.navbar-expand-xs .navbar-nav > .nav-item > .nav-link:hover {
  margin-left: 0.35rem !important;
  margin-right: 0.35rem !important;
  padding: 0.65rem 0.85rem !important;
}

html[dir="rtl"] .navbar-vertical .navbar-nav .nav .nav-link {
  padding: 0.5rem 1rem 0.5rem 0.75rem !important;
  padding-right: 2.25rem !important;
}

html[dir="rtl"] .navbar-vertical .navbar-nav .nav-link[data-toggle="collapse"]:after {
  margin-right: auto !important;
  margin-left: 0 !important;
  content: "\f104";
}

html[dir="rtl"] .navbar-heading {
  text-align: right !important;
  padding: 0.75rem 1rem 0.35rem !important;
  margin: 0.75rem 0 0.25rem !important;
}

/* ---------------------------------------------------------
   Top navbar
   --------------------------------------------------------- */

html[dir="rtl"] .navbar-top {
  direction: rtl;
}

html[dir="rtl"] .navbar-top .navbar-collapse,
html[dir="rtl"] .navbar-top #navbarSupportedContent {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100%;
}

html[dir="rtl"] .navbar-top .navbar-nav {
  flex-direction: row !important;
  align-items: center !important;
}

html[dir="rtl"] .navbar-top .navbar-nav.ml-md-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .navbar-top .navbar-nav.ml-auto,
html[dir="rtl"] .navbar-top .navbar-nav.ml-md-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .language-dropdown-menu {
  right: 0 !important;
  left: auto !important;
  text-align: right;
}

html[dir="rtl"] .language-dropdown-menu .dropdown-item {
  flex-direction: row;
  text-align: right;
}

html[dir="rtl"] .language-dropdown-menu .dropdown-item i {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

html[dir="rtl"] .navbar-top .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem;
}

html[dir="rtl"] .navbar-top .media {
  flex-direction: row !important;
  align-items: center !important;
}

html[dir="rtl"] .navbar-top .media-body {
  margin: 0 0.5rem 0 0 !important;
  text-align: right !important;
}

html[dir="rtl"] .navbar-top .dropdown-menu {
  text-align: right;
  right: 0 !important;
  left: auto !important;
}

html[dir="rtl"] .navbar-top .dropdown-item {
  text-align: right;
}

html[dir="rtl"] .navbar-top .dropdown-item i,
html[dir="rtl"] .navbar-top .dropdown-item .ni,
html[dir="rtl"] .navbar-top .dropdown-item .fas {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* ---------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------- */

html[dir="rtl"] .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  background: transparent;
}

html[dir="rtl"] .breadcrumb-item {
  display: flex;
  align-items: center;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
  padding-right: 0.5rem;
  padding-left: 0;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  float: none;
  padding-left: 0.5rem;
  padding-right: 0;
  color: #8898aa;
}

html[dir="rtl"] .header .ml-md-4 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

/* ---------------------------------------------------------
   Cards / stats — trust dir=rtl (no extra reverse)
   --------------------------------------------------------- */

html[dir="rtl"] .card-stats .card-body > .row {
  /* do NOT reverse — dir=rtl already puts text on the right, icon on the left */
  flex-direction: row !important;
}

html[dir="rtl"] .card-stats .card-title,
html[dir="rtl"] .card-stats .h2,
html[dir="rtl"] .card-stats h5 {
  text-align: right !important;
}

html[dir="rtl"] .card .card-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

html[dir="rtl"] .card .card-header h3,
html[dir="rtl"] .card .card-header h4 {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  margin: 0 !important;
  text-align: right !important;
}

html[dir="rtl"] .card .card-header h4 .ml-1,
html[dir="rtl"] .card .card-header h4 .ml-2,
html[dir="rtl"] .card .card-header h3 .ml-1,
html[dir="rtl"] .card .card-header h3 .ml-2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .card-header-form,
html[dir="rtl"] .card-header-action {
  margin: 0 !important;
}

/* Dashboard statics list */
html[dir="rtl"] .list-group-item {
  text-align: right;
}

html[dir="rtl"] .list-group-item .row {
  flex-direction: row !important;
}

html[dir="rtl"] .list-group-item .ml-2,
html[dir="rtl"] .list-group-item .ml--2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .list-group-item h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: row !important; /* icon first in DOM → right side in RTL */
  text-align: right;
}

html[dir="rtl"] .list-group-item h4 i {
  margin: 0 !important;
  order: 0;
}

/* ---------------------------------------------------------
   Forms / search
   --------------------------------------------------------- */

html[dir="rtl"] .input-group {
  flex-direction: row !important; /* dir=rtl mirrors: button ends on the left */
}

html[dir="rtl"] .input-group > .form-control,
html[dir="rtl"] .input-group > select.form-control {
  text-align: right;
}

html[dir="rtl"] .input-group > .form-control:not(:last-child) {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

html[dir="rtl"] .input-group > select.form-control {
  border-radius: 0 !important;
}

html[dir="rtl"] .input-group .input-group-btn .btn,
html[dir="rtl"] .input-group-append .btn,
html[dir="rtl"] .search-table button {
  border-radius: 0.375rem 0 0 0.375rem !important;
}

html[dir="rtl"] .form-group select,
html[dir="rtl"] select.form-control {
  background-position: left 10px center;
  padding-left: 2rem;
  padding-right: 0.75rem;
}

html[dir="rtl"] .custom-control {
  padding-left: 0;
  padding-right: 1.75rem;
}

html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after {
  left: auto;
  right: -1.75rem;
}

/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
  text-align: right !important;
}

html[dir="rtl"] .table th.text-center,
html[dir="rtl"] .table td.text-center {
  text-align: center !important;
}

html[dir="rtl"] .dropdown-menu {
  text-align: right;
}

html[dir="rtl"] .dropdown-item {
  text-align: right;
}

html[dir="rtl"] .modal-title,
html[dir="rtl"] .alert {
  text-align: right;
}

html[dir="rtl"] .close {
  float: left;
}

html[dir="rtl"] .modal-header .close {
  margin: -1rem auto -1rem -1rem;
}

html[dir="rtl"] .pagination {
  justify-content: flex-start;
}

/* ---------------------------------------------------------
   Spacing utilities (physical sides — these do NOT auto-flip)
   --------------------------------------------------------- */

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

/* Keep semantic text alignment for Arabic content */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }

html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pr-0 { padding-right: 0 !important; padding-left: 0 !important; }

/* Icons */
html[dir="rtl"] .fa-arrow-left:before { content: "\f061"; }
html[dir="rtl"] .fa-arrow-right:before { content: "\f060"; }
html[dir="rtl"] .back_btn .icofont-arrow-left {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---------------------------------------------------------
   Frontend marketing
   --------------------------------------------------------- */

html[dir="rtl"] .page_wrapper {
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Keep header nav packed next to the logo (do NOT use global ml-auto flip here) */
html[dir="rtl"] header .navbar {
  flex-wrap: wrap;
}

html[dir="rtl"] header .navbar-brand {
  margin-left: 1rem;
  margin-right: 0;
}

html[dir="rtl"] header .navbar-nav.ml-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

html[dir="rtl"] header .navbar-expand-lg .navbar-nav {
  flex-direction: row !important;
  align-items: center;
}

html[dir="rtl"] header .navbar-expand-lg .navbar-nav .nav-link {
  text-align: center;
}

html[dir="rtl"] header .navbar-expand-lg .navbar-nav .nav-link.dark_btn {
  margin-left: 0;
  margin-right: 20px;
}

html[dir="rtl"] header .frontend-lang-item {
  margin-right: 0;
  margin-left: 0.75rem;
}

html[dir="rtl"] header .language-dropdown-menu {
  right: auto !important;
  left: 0 !important;
  text-align: right;
  min-width: 10rem;
}

html[dir="rtl"] .navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
  right: auto;
  left: 15px;
}

html[dir="rtl"] .navbar-expand-lg .navbar-nav .has_dropdown .sub_menu {
  border-radius: 10px 0 10px 10px;
  right: 0;
  left: auto;
}

/* Hero / banner — keep a clean RTL layout */
html[dir="rtl"] .banner_section .banner_text {
  text-align: right;
}

html[dir="rtl"] .banner_section .banner_text h1 {
  text-align: right;
}

html[dir="rtl"] .banner_section .app_btn {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: flex-start;
}

html[dir="rtl"] .banner_section .app_btn li:last-child {
  margin-left: 0;
  margin-right: 15px;
}

html[dir="rtl"] .banner_section .used_app {
  text-align: right;
}

html[dir="rtl"] .banner_section .used_app ul {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0 0 10px;
  list-style: none;
  justify-content: flex-start;
}

html[dir="rtl"] .banner_section .used_app ul li:not(:first-child) {
  margin-left: 0;
  margin-right: -15px;
}

html[dir="rtl"] .banner_section .used_app p {
  text-align: right;
}

html[dir="rtl"] .banner_section .banner_slider .left_icon {
  left: auto;
  right: 15px;
}

html[dir="rtl"] .banner_section .banner_slider .right_icon {
  right: auto;
  left: 15px;
}

html[dir="rtl"] .faq_section .faq_panel .card-header .icon_faq {
  right: auto;
  left: 20px;
}

html[dir="rtl"] .newsletter_box form .form-group {
  display: flex;
  flex-direction: row !important;
}

html[dir="rtl"] .owl-carousel {
  direction: ltr;
}

html[dir="rtl"] .owl-carousel .owl-item * {
  direction: rtl;
}

html[dir="rtl"] .section_title,
html[dir="rtl"] .about_app_section .about_text .section_title {
  text-align: right;
}

/* ---------------------------------------------------------
   Chat
   --------------------------------------------------------- */

html[dir="rtl"] .chat-system .user-list-box {
  border-right: 0;
  border-left: 1px solid #ebedf2;
  border-radius: 0 6px 6px 0;
}

html[dir="rtl"] .chat-system .user-list-box .search svg {
  left: auto;
  right: 30px;
}

html[dir="rtl"] .chat-system .user-list-box input,
html[dir="rtl"] .chat-system .chat-box .chat-input input {
  padding: 12px 43px 12px 16px;
  text-align: right;
}

html[dir="rtl"] .chat-system .chat-box .chat-input svg {
  left: auto;
  right: 11px;
}

html[dir="rtl"] .chat-system .user-list-box .people .person .user-info .f-head img {
  margin-right: 0;
  margin-left: 12px;
}

@media (max-width: 767px) {
  html[dir="rtl"] .chat-system .hamburger {
    right: auto;
    left: 9px;
  }

  html[dir="rtl"] .chat-system .user-list-box {
    left: auto;
    right: -341px;
  }

  html[dir="rtl"] .chat-system .user-list-box.user-list-box-show {
    left: auto;
    right: 15px;
  }
}