/* RTL Support Styles */
/* This file provides common RTL support that can be used across components */

/* Base RTL Classes */
.rtl-mode {
  direction: rtl;
  text-align: right;
}

.ltr-mode {
  direction: ltr;
  text-align: left;
}

/* Arabic Font Support */
.arabic-font,
body.arabic-font {
  font-family: 'Tajawal', 'Inter', 'Poppins', sans-serif !important;
}

.english-font,
body.english-font {
  font-family: 'Inter', 'Poppins', sans-serif !important;
}

/* Header RTL Support */
.rtl-header {
  .flex-row-reverse {
    flex-direction: row-reverse !important;
  }
  
  .order-rtl-1 {
    order: 1 !important;
  }
  
  .order-rtl-2 {
    order: 2 !important;
  }
  
  .justify-content-rtl-start {
    justify-content: flex-start !important;
  }
  
  .justify-content-rtl-end {
    justify-content: flex-end !important;
  }
}

/* Common RTL Utilities */
[dir="rtl"] {
  .text-start {
    text-align: right !important;
  }
  
  .text-end {
    text-align: left !important;
  }
  
  .float-start {
    float: right !important;
  }
  
  .float-end {
    float: left !important;
  }
  
  .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
  }
  
  .me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Bootstrap RTL Adjustments */
[dir="rtl"] {
  .dropdown-menu {
    right: 0;
    left: auto;
  }
  
  .navbar-nav {
    .nav-link {
      padding-right: 0.5rem;
      padding-left: 0.5rem;
    }
  }
  
  .btn {
    .fas,
    .fa {
      margin-left: 0.5rem;
      margin-right: 0;
    }
  }
}

/* Common Animation Classes for RTL */
.rtl-slide-in {
  animation: slideInRight 0.3s ease-out;
}

.ltr-slide-in {
  animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Flexbox RTL Support */
[dir="rtl"] {
  .d-flex {
    &.flex-row {
      flex-direction: row-reverse;
    }
  }
  
  .justify-content-start {
    justify-content: flex-end !important;
  }
  
  .justify-content-end {
    justify-content: flex-start !important;
  }
}

/* Common CSS Custom Properties for RTL */
:root {
  --text-align-start: left;
  --text-align-end: right;
  --margin-start: margin-left;
  --margin-end: margin-right;
  --padding-start: padding-left;
  --padding-end: padding-right;
  --border-start: border-left;
  --border-end: border-right;
}

[dir="rtl"] {
  --text-align-start: right;
  --text-align-end: left;
  --margin-start: margin-right;
  --margin-end: margin-left;
  --padding-start: padding-right;
  --padding-end: padding-left;
  --border-start: border-right;
  --border-end: border-left;
}