/*
 * RTL Override for custom.css
 * Auto-generated RTL overrides - loads on top of the LTR base styles
 * Direction: Right-to-Left (Arabic)
 */

/* ==========================================
   1. Base & Floating Element Overrides
   ========================================== */

/* Scroll to top floating arrow fix in RTL */
html .scroll-to-top,
html[dir="rtl"] .scroll-to-top {
  left: 10px !important;
  right: auto !important;
  width: 50px !important;
  min-width: 50px !important;
}

/* Footer contact form submit button alignment in RTL */
html[dir="rtl"] #footer .contact-form .btn,
html[dir="rtl"] #footer #contactForm input[type="submit"] {
  float: right !important;
}

/* Base body direction */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Revolution Slider RTL coordinate grid fix */
html[dir="rtl"] .slider-container,
html[dir="rtl"] .rev_slider_wrapper,
html[dir="rtl"] .rev_slider,
html[dir="rtl"] .tp-parallax-wrap,
html[dir="rtl"] .tp-loop-wrap,
html[dir="rtl"] .tp-mask-wrap {
  direction: ltr !important;
}

/* ==========================================
   2. Bootstrap 4 Directional Utility Overrides
   Flips physical directional classes for RTL.
   ========================================== */

/* --- Text Alignment --- */
html[dir="rtl"] .text-left {
  text-align: right !important;
}
html[dir="rtl"] .text-right {
  text-align: left !important;
}

/* Preserve text-center on explicitly centered elements and their children */
html[dir="rtl"] .text-center,
html[dir="rtl"] .text-center *,
html[dir="rtl"] [class*="text-center"] {
  text-align: center !important;
}

/* --- Float --- */
html[dir="rtl"] .float-left {
  float: right !important;
}
html[dir="rtl"] .float-right {
  float: left !important;
}
html[dir="rtl"] .float-start {
  float: right !important;
}
html[dir="rtl"] .float-end {
  float: left !important;
}

/* --- Margin Right (mr-*) → margin-left in RTL --- */
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"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

/* --- Margin Left (ml-*) → margin-right in RTL --- */
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"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }

/* --- Padding Right (pr-*) → padding-left in RTL --- */
html[dir="rtl"] .pr-0 { padding-right: 0 !important; padding-left: 0 !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-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; }

/* --- Padding Left (pl-*) → padding-right in RTL --- */
html[dir="rtl"] .pl-0 { padding-left: 0 !important; padding-right: 0 !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"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; }

/* --- Margin End (me-*) → margin-start in RTL --- */
html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

/* --- Margin Start (ms-*) → margin-end in RTL --- */
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

/* --- Padding End (pe-*) → padding-start in RTL --- */
html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }

/* --- Padding Start (ps-*) → padding-end in RTL --- */
html[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; }

/* --- Border directional --- */
html[dir="rtl"] .border-left {
  border-left: 0 !important;
  border-right: 1px solid #dee2e6 !important;
}
html[dir="rtl"] .border-right {
  border-right: 0 !important;
  border-left: 1px solid #dee2e6 !important;
}
html[dir="rtl"] .border-start {
  border-left: 0 !important;
  border-right: 1px solid #dee2e6 !important;
}
html[dir="rtl"] .border-end {
  border-right: 0 !important;
  border-left: 1px solid #dee2e6 !important;
}

/* --- Rounded directional --- */
html[dir="rtl"] .rounded-left {
  border-radius: 0 0.25rem 0.25rem 0 !important;
}
html[dir="rtl"] .rounded-right {
  border-radius: 0.25rem 0 0 0.25rem !important;
}
html[dir="rtl"] .rounded-start {
  border-radius: 0 0.25rem 0.25rem 0 !important;
}
html[dir="rtl"] .rounded-end {
  border-radius: 0.25rem 0 0 0.25rem !important;
}

/* ==========================================
   3. Forms & Layout Overrides
   ========================================== */

html[dir="rtl"] label {
  text-align: right !important;
  display: block;
}

html[dir="rtl"] label.required:after {
  content: " *" !important;
  display: inline-block !important;
  margin-right: 4px !important;
  margin-left: 0 !important;
}

html[dir="rtl"] .form-control {
  text-align: right !important;
  direction: rtl !important;
}

html[dir="rtl"] .form-control::placeholder {
  text-align: right !important;
  direction: rtl !important;
}

html[dir="rtl"] .form-group input[type="submit"],
html[dir="rtl"] .form-group .btn-modern,
html[dir="rtl"] .contact-form .btn,
html[dir="rtl"] .contact-form-wrapper .btn {
  float: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ==========================================
   4. Header & Navigation Overrides
   ========================================== */

html[dir="rtl"] #header .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle .fa-chevron-down,
html[dir="rtl"] #header .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle:after {
  margin-right: 5px !important;
  margin-left: 0 !important;
}

html[dir="rtl"] .page-header .breadcrumb > li + li:before {
  content: "\f104" !important;
  padding: 0 5px 0 7px !important;
}

html[dir="rtl"] .list.list-icons li {
  padding-right: 28px !important;
  padding-left: 0 !important;
  text-align: right !important;
}

html[dir="rtl"] .list.list-icons li > [class*="fa-"]:first-child,
html[dir="rtl"] .list.list-icons li > .icons:first-child {
  right: 0 !important;
  left: auto !important;
}

/* ==========================================
   5. Target Views RTL Overrides
   (Articles, Customers, Events, Galleries, Products, Services)
   ========================================== */

/* --- Articles Section & Show --- */
html[dir="rtl"] .recent-posts article .row .col-auto {
  padding-right: 15px !important;
  padding-left: 0 !important;
}
html[dir="rtl"] .recent-posts article .row .col {
  padding-left: 15px !important;
  padding-right: 0.25rem !important;
}
html[dir="rtl"] .read-more .fas {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

/* --- Services Show & List --- */
html[dir="rtl"] .service-content {
  text-align: right;
  direction: rtl;
}
html[dir="rtl"] .service-content ul,
html[dir="rtl"] .service-content ol {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}
html[dir="rtl"] .service-image-rectangle img {
  left: auto !important;
  right: 0 !important;
}

/* --- Products Show & Catalog --- */
html[dir="rtl"] .product-card:not(.text-center) .card-body {
  text-align: right;
}

/* --- Galleries --- */
html[dir="rtl"] .gallery-overlay,
html[dir="rtl"] .portfolio-btn {
  inset: 0 !important;
}

/* --- Attachment Card (Articles Show) --- */
html[dir="rtl"] .attachment-card {
  text-align: center !important;
}

/* --- Form Select dropdown caret position --- */
html[dir="rtl"] .form-select,
html[dir="rtl"] .custom-select {
  background-position: left 0.75rem center !important;
  padding-left: 1.75rem !important;
  padding-right: 0.75rem !important;
}

/* --- Alert close button position --- */
html[dir="rtl"] .alert-dismissible .close,
html[dir="rtl"] .alert-dismissible .btn-close {
  left: 0 !important;
  right: auto !important;
}

/* --- Tables in RTL --- */
html[dir="rtl"] table,
html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
  text-align: right;
}

/* ==========================================
   Owl Carousel RTL & Mobile Navigation Fix
   Fixes missing/hidden navigation arrows on mobile in RTL.
   ========================================== */
html[dir="rtl"] .owl-carousel .owl-nav {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  pointer-events: none !important;
  direction: ltr !important;
  display: block !important;
}

html[dir="rtl"] .owl-carousel .owl-nav button.owl-prev,
html[dir="rtl"] .owl-carousel .owl-nav button.owl-next,
html[dir="rtl"] .owl-carousel .owl-nav .owl-prev,
html[dir="rtl"] .owl-carousel .owl-nav .owl-next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

/* Left Arrow button (triggers Next item in RTL) */
html[dir="rtl"] .owl-carousel .owl-nav button.owl-next,
html[dir="rtl"] .owl-carousel .owl-nav .owl-next {
  left: 5px !important;
  right: auto !important;
}

/* Right Arrow button (triggers Prev item in RTL) */
html[dir="rtl"] .owl-carousel .owl-nav button.owl-prev,
html[dir="rtl"] .owl-carousel .owl-nav .owl-prev {
  right: 5px !important;
  left: auto !important;
}

/* Icons inside Prev/Next buttons in RTL */
html[dir="rtl"] .owl-carousel .owl-nav button.owl-next:before,
html[dir="rtl"] .owl-carousel .owl-nav .owl-next:before {
  content: "\f053" !important; /* fa-chevron-left */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

html[dir="rtl"] .owl-carousel .owl-nav button.owl-prev:before,
html[dir="rtl"] .owl-carousel .owl-nav .owl-prev:before {
  content: "\f054" !important; /* fa-chevron-right */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

/* ==========================================
   6. Responsive RTL Overrides
   ========================================== */

/* --- Mobile & Tablet (< 992px) --- */
@media (max-width: 991.98px) {
  html[dir="rtl"] .service-content img,
  html[dir="rtl"] .article-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Disable image long-press download & context menu on mobile gallery images */
  .gallery-image img,
  .portfolio-item img,
  .mfp-img,
  .lb-image,
  img.mfp-img,
  [data-lightbox] img {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    pointer-events: none !important;
  }

  /* Mobile Header Navigation Dropdown Chevron Caret Icons in RTL */
  html[dir="rtl"] #header .header-nav-main nav > ul li a.dropdown-toggle .fa-chevron-down {
    right: auto !important;
    left: 0 !important;
  }

  html[dir="rtl"] #header .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle {
    padding-left: 30px !important;
    padding-right: 15px !important;
    position: relative !important;
  }

  html[dir="rtl"] #header .header-nav-main nav > ul > li.dropdown .dropdown-menu {
    text-align: right !important;
    padding-right: 15px !important;
    padding-left: 0 !important;
  }

  html[dir="rtl"] #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
    text-align: right !important;
  }
}

/* --- Mobile Phones (< 768px) --- */
@media (max-width: 767.98px) {
  html[dir="rtl"] .recent-posts article .row .col-auto,
  html[dir="rtl"] .recent-posts article .row .col {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  html[dir="rtl"] .form-group input[type="submit"],
  html[dir="rtl"] .form-group .btn-modern,
  html[dir="rtl"] .contact-form .btn {
    width: 100% !important;
    float: none !important;
  }

  /* Home page section spacing on mobile */
  .main section.section,
  .main section.section-height-3,
  .main section.section-height-4 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .main section .mb-5,
  .main section .pb-4,
  .main section .my-5 {
    margin-bottom: 25px !important;
    padding-bottom: 0 !important;
  }

  .main section h2.mb-5 {
    margin-bottom: 25px !important;
  }

  .main .slider-container {
    margin-bottom: 0 !important;
  }
}

/* --- Extra Small Devices (< 576px) --- */
@media (max-width: 575.98px) {
  html[dir="rtl"] h1,
  html[dir="rtl"] .display-5 {
    font-size: 1.75rem !important;
  }
}