/* ===================================================
   RTL Styles for Arabic Language - css/rtl.css
   =================================================== */

/* Base RTL Setup */
body[dir="rtl"], 
html[dir="rtl"] {
  direction: rtl !important;
  text-align: right !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* ===================================================
   Navigation RTL Fixes
   =================================================== */
[dir="rtl"] .navbar-nav {
  margin-left: auto !important;
  margin-right: 0 !important;
}

[dir="rtl"] .navbar-nav .nav-item {
  margin-left: 1rem;
  margin-right: 0;
}

[dir="rtl"] .navbar-nav .nav-item:last-child {
  margin-left: 2rem; /* Extra space for language switcher */
}

[dir="rtl"] .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  text-align: right !important;
}

[dir="rtl"] .navbar-brand {
  margin-right: 0;
  margin-left: 1rem;
}

/* ===================================================
   Text Alignment Overrides
   =================================================== */
[dir="rtl"] .text-left {
  text-align: right !important;
}

[dir="rtl"] .text-right {
  text-align: left !important;
}

[dir="rtl"] .text-md-left {
  text-align: right !important;
}

[dir="rtl"] .text-md-right {
  text-align: left !important;
}

[dir="rtl"] .text-center {
  text-align: center !important;
}

/* ===================================================
   Header and Top Bar RTL
   =================================================== */
[dir="rtl"] .top-info {
  text-align: right !important;
}

[dir="rtl"] .top-social {
  text-align: left !important;
}

[dir="rtl"] .top-info-box {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .info-box-content {
  text-align: right;
}

/* ===================================================
   Content Sections RTL
   =================================================== */
[dir="rtl"] p {
  text-align: right !important;
}

[dir="rtl"] .text-center p {
  text-align: center !important;
}

[dir="rtl"] h1, 
[dir="rtl"] h2, 
[dir="rtl"] h3, 
[dir="rtl"] h4, 
[dir="rtl"] h5, 
[dir="rtl"] h6 {
  text-align: inherit;
}

[dir="rtl"] .section-title,
[dir="rtl"] .section-sub-title,
[dir="rtl"] .into-title,
[dir="rtl"] .into-sub-title {
  text-align: center !important;
}

/* ===================================================
   Service Boxes RTL
   =================================================== */
[dir="rtl"] .ts-service-box {
  flex-direction: row-reverse !important;
}

[dir="rtl"] .ts-service-box-info {
  text-align: right !important;
  margin-right: 1rem;
  margin-left: 0;
}

[dir="rtl"] .ts-service-box-img {
  margin-left: 1rem;
  margin-right: 0;
}

/* ===================================================
   Flexbox RTL Adjustments
   =================================================== */
[dir="rtl"] .d-flex {
  flex-direction: row-reverse;
  display: flex !important;
  justify-content: flex-end;
}

[dir="rtl"] .justify-content-between {
  flex-direction: row-reverse;
}

/* ===================================================
   Button and Icon RTL
   =================================================== */
[dir="rtl"] .btn .fas,
[dir="rtl"] .btn .fa {
  margin-left: 0.0rem;
  margin-right: 0;
}

[dir="rtl"] .btn .fas.ml-2,
[dir="rtl"] .btn .fa.ml-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .btn .fas.mr-2,
[dir="rtl"] .btn .fa.mr-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* ===================================================
   Slider Content RTL
   =================================================== */
[dir="rtl"] .slider-content {
  text-align: right !important;
}

[dir="rtl"] .slider-content.text-left {
  text-align: right !important;
}

[dir="rtl"] .slider-content.text-right {
  text-align: left !important;
}

[dir="rtl"] .slide-title,
[dir="rtl"] .slide-sub-title,
[dir="rtl"] .slide-title-box {
  text-align: inherit;
}

/* ===================================================
   Call to Action RTL
   =================================================== */
[dir="rtl"] .call-to-action-text {
  text-align: right !important;
}

[dir="rtl"] .call-to-action-btn {
  text-align: left !important;
}

[dir="rtl"] .action-title,
[dir="rtl"] .action-subtitle {
  text-align: right !important;
}

/* ===================================================
   Footer RTL
   =================================================== */
[dir="rtl"] .footer-widget {
  text-align: right !important;
}

[dir="rtl"] .footer-menu {
  text-align: left !important;
}

[dir="rtl"] .copyright-info {
  text-align: right !important;
}

[dir="rtl"] .working-hours {
  text-align: right !important;
}

[dir="rtl"] .working-hours .text-left {
  float: left;
}

[dir="rtl"] .working-hours .text-right {
  float: right;
}

/* ===================================================
   List and Accordion RTL
   =================================================== */
[dir="rtl"] ul.list-arrow {
  text-align: right !important;
}

[dir="rtl"] ul.list-arrow li {
  text-align: right !important;
}

[dir="rtl"] .accordion .btn {
  text-align: right !important;
}

[dir="rtl"] .card-body {
  text-align: right !important;
}

/* ===================================================
   Facts Section RTL
   =================================================== */
[dir="rtl"] .ts-facts-content {
  text-align: center !important;
}

[dir="rtl"] .ts-facts-title {
  text-align: center !important;
}

/* ===================================================
   Bootstrap Grid RTL Adjustments
   =================================================== */
[dir="rtl"] .row {
  margin-right: -15px;
  margin-left: -15px;
}

[dir="rtl"] .mr-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ml-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ===================================================
   Social Media Icons RTL
   =================================================== */
[dir="rtl"] .footer-social ul {
  text-align: right;
}

[dir="rtl"] .top-social ul {
  text-align: left;
}

/* ===================================================
   Responsive RTL Adjustments
   =================================================== */
@media (max-width: 768px) {
  [dir="rtl"] .text-md-left {
    text-align: center !important;
  }
  
  [dir="rtl"] .text-md-right {
    text-align: center !important;
  }
  
  [dir="rtl"] .navbar-nav .nav-item {
    margin: 0;
  }
  
  [dir="rtl"] .call-to-action-text,
  [dir="rtl"] .call-to-action-btn {
    text-align: center !important;
  }
}

/* ===================================================
   Custom RTL Utilities
   =================================================== */
[dir="rtl"] .rtl-right {
  text-align: right !important;
}

[dir="rtl"] .rtl-left {
  text-align: left !important;
}

[dir="rtl"] .rtl-center {
  text-align: center !important;
}

.ltr-text {
  direction: ltr !important;
  unicode-bidi: embed !important;
  text-align: left !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* فقط تغيير اتجاه السهم */
ul.list-arrow li:before {
  content: "\f104" !important; /* ◀ بدلاً من ▶ */
  margin-left: 5px !important; /* زيادة المسافة من 10px إلى 15px */
}

    /* Arabic Font and Text Direction */
    body {
      font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
      direction: rtl;
      text-align: right;
    }
    
    /* Navigation RTL Fixes */
    .navbar-nav {
      margin-left: auto !important;
      margin-right: 0 !important;
    }
    
    .navbar-nav .nav-item {
      margin-left: 1rem;
      margin-right: 0;
    }
    
    .dropdown-menu {
      right: 0 !important;
      left: auto !important;
      text-align: right;
    }
    
    /* Text Alignment Fixes */
    .text-center {
      text-align: center !important;
    }
    
    .text-md-left {
      text-align: right !important;
    }
    
    .text-md-right {
      text-align: left !important;
    }
    
    .text-left {
      text-align: right !important;
    }
    
    .text-right {
      text-align: left !important;
    }
    
    /* Header Info Boxes */
    .top-info-box {
      direction: rtl;
      text-align: right;
    }
    
    .top-info {
      text-align: right !important;
    }
    
    .top-social {
      text-align: left !important;
    }
    
    /* Service Boxes RTL */
    .ts-service-box {
      flex-direction: row-reverse !important;
    }
    
    .ts-service-box-info {
      text-align: right;
      margin-right: 1rem;
      margin-left: 0;
    }
    
    /* Flexbox RTL */
    .d-flex {
      flex-direction: row-reverse;
    }
    
    /* Buttons and Icons */
    .btn .fas {
      margin-left: 0.5rem;
      margin-right: 0;
    }
    
    .btn .fas.ml-2 {
      margin-right: 0.5rem !important;
      margin-left: 0 !important;
    }
    
    /* Slider Content */
    .slider-content {
      text-align: right !important;
    }
    
    .slider-content.text-left {
      text-align: right !important;
    }
    
    .slider-content.text-right {
      text-align: left !important;
    }
    
    /* Working Hours RTL */
    .working-hours {
      text-align: right;
    }
    
    .working-hours .text-left {
      float: left;
    }
    
    /* Copyright and Footer */
    .footer-menu {
      text-align: left !important;
    }
    
    .copyright-info {
      text-align: right !important;
    }
    
    /* Override any RTL or default text alignment */
    .accordion .btn {
      text-align: center !important;
    }
    
    /* Force center alignment with multiple methods */
    .accordion .btn.text-center,
    .accordion .btn[data-toggle="collapse"] {
      text-align: center !important;
      justify-content: center !important;
      display: flex !important;
      align-items: center !important;
    }
    
    /* Override Bootstrap default and any RTL styling */
    [dir="rtl"] .accordion .btn,
    body[dir="rtl"] .accordion .btn {
      text-align: center !important;
      justify-content: center !important;
    }
    
    /* Accordion body RTL */
    .accordion .card-body {
      text-align: right !important;
      padding: 1.25rem;
    }
    
    /* Facts Section */
    .ts-facts-content {
      text-align: center;
    }
    
    /* Action Boxes */
    .call-to-action-text {
      text-align: right !important;
    }
    
    .call-to-action-btn {
      text-align: left !important;
    }
    
    /* Section Titles */
    .section-title,
    .section-sub-title,
    .into-title,
    .into-sub-title {
      text-align: center !important;
    }
    
    /* Paragraph text */
    p {
      text-align: right !important;
    }
    
    .text-center p {
      text-align: center !important;
    }
    
    /* List items */
    ul.list-arrow {
      text-align: right;
    }
    
    ul.list-arrow li {
      text-align: right;
    }
    
    /* Top bar adjustments */
    .top-bar .container .row {
      direction: rtl;
    }
    
    /* Bootstrap grid RTL */
    .row {
      margin-right: -15px;
      margin-left: -15px;
    }
    
    /* Language switcher spacing */
    .navbar-nav .nav-item:last-child {
      margin-left: 3rem;
    }
    
    /* Dropdown Arrow RTL positioning */
    .nav-link .fa-angle-down {
      margin-left: 0.5rem;
      margin-right: 0.5rem;
    }
    
    /* Icon spacing in RTL */
    .nav-link .fas.fa-globe {
      margin-right: 0.5rem;
      margin-left: 0;
    }
    
  [dir="rtl"] .card-header .btn::after {
        content: '\f067';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: auto;   /* لإلغاء القيمة السابقة */
        left: 2rem;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background: linear-gradient(135deg, #c02529, #007bff);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        }
        
  [dir="rtl"] .accordion-group .card-header .btn:before {
        position: absolute;
        }

  [dir="rtl"] .footer .widget-title {
        border-left: none;                 /* إلغاء الخط في اليسار */
        border-right: 3px solid #c02529;   /* إضافة الخط في اليمين */
        padding-left: 0;                   /* إلغاء المسافة اليسار */
        padding-right: 5px;               /* إضافة مسافة يمين بعد الخط */
        }
        
  [dir="rtl"] .sidebar .widget-title {
        border-left: none;                /* إلغاء الخط في اليسار */
        border-right: 3px solid #c02529;  /* إضافة الخط في اليمين */
        padding-right: 5px;               /* إضافة مسافة يمين بعد الخط */
        }
        
  [dir="rtl"] .widget-title h4::after {
       left: auto;
       right: 0;
       }
       
  [dir="rtl"] .step-number {
       left: auto;        /* نلغي left */
       right: 0;          /* نجعلها على اليمين */
       margin-right: 10px; /* مسافة بين الدائرة والنص، عدل القيمة حسب التصميم */
       margin-left: 0;
       }
       
  [dir="rtl"] .step-item {
       padding-left: 0;          /* تلغي المسافة في اليسار */
       padding-right: 60px;      /* تضيفها في اليمين */
       }

  [dir="rtl"] .step-number {
       left: auto;               /* تلغي left */
       right: 0;                 /* تجعل الرقم يظهر في اليمين */
       }
       
  [dir="rtl"] .ts-service-box .ts-service-icon i {
       float: right;
       margin-right: 0;          /* إلغاء margin في اليمين إن وجد */
       margin-left: 15px;        /* تضيف مسافة يسار */
       }
       
  [dir="rtl"] .services-list li:hover {
       padding-left: 0;
       padding-right: 10px;
       background: rgba(0,123,255,0.05);
       }