/* ===================================
   RTL (Right-to-Left) STYLESHEET
   Arabic Language Support
   =================================== */

/* ===================================
   GLOBAL RTL ADJUSTMENTS
   =================================== */

[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Typography Adjustments for Arabic */
[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', 'Almarai', 'Arial', sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: 'Cairo', 'Tajawal', 'Arial', sans-serif;
  font-weight: 700;
}

/* Better line-height for Arabic text */
[dir="rtl"] p,
[dir="rtl"] .about-description,
[dir="rtl"] .service-description,
[dir="rtl"] .product-description {
  line-height: 2;
}

[dir="rtl"] .hero-title,
[dir="rtl"] .hero-subtitle {
  line-height: 1.6;
  word-spacing: 0.1em;
}

[dir="rtl"] .btn {
  letter-spacing: 0;
}

/* ===================================
   NAVIGATION RTL
   =================================== */

[dir="rtl"] .navbar {
  direction: rtl;
  justify-content: space-between;
}

[dir="rtl"] .nav-menu {
  direction: rtl;
  justify-content: flex-start;
  text-align: right;
}

[dir="rtl"] .nav-link {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .nav-link::after {
  right: 0;
  left: auto;
  transform: none;
}

[dir="rtl"] .nav-actions {
  direction: rtl;
  justify-content: flex-end;
}

[dir="rtl"] .language-toggle {
  flex-direction: row-reverse;
}

/* Mobile Menu RTL */
@media (max-width: 768px) {
  [dir="rtl"] .nav-menu {
    right: 0;
    left: auto;
    transform: translateX(100%);
  }

  [dir="rtl"] .nav-menu.active {
    transform: translateX(0);
  }
}

/* ===================================
   HERO SECTION RTL
   =================================== */

[dir="rtl"] .hero-content {
  align-items: flex-end;
  text-align: right;
}

[dir="rtl"] .hero-text {
  direction: rtl;
}

[dir="rtl"] .hero-buttons {
  flex-direction: row-reverse;
}

[dir="rtl"] .hero-stats {
  flex-direction: row-reverse;
}

[dir="rtl"] .btn {
  flex-direction: row-reverse;
}

/* Swiper RTL Navigation */
[dir="rtl"] .swiper-button-next {
  right: auto;
  left: 10px;
}

[dir="rtl"] .swiper-button-prev {
  left: auto;
  right: 10px;
}

[dir="rtl"] .swiper-button-next::after {
  content: 'prev';
}

[dir="rtl"] .swiper-button-prev::after {
  content: 'next';
}

/* ===================================
   SECTION HEADERS RTL
   =================================== */

[dir="rtl"] .section-tag::after {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}

/* ===================================
   PRODUCTS SECTION RTL
   =================================== */

[dir="rtl"] .product-badge {
  right: auto;
  left: var(--space-md);
}

[dir="rtl"] .product-features {
  align-items: flex-start;
}

[dir="rtl"] .feature {
  flex-direction: row;
  text-align: right;
}

[dir="rtl"] .btn-product {
  flex-direction: row-reverse;
  justify-content: center;
}

/* ===================================
   SERVICES SECTION RTL
   =================================== */

[dir="rtl"] .service-link {
  flex-direction: row-reverse;
}

[dir="rtl"] .service-link:hover {
  gap: var(--space-md);
}

[dir="rtl"] .service-link:hover i {
  transform: translateX(-5px);
}

/* ===================================
   ABOUT SECTION RTL
   =================================== */

[dir="rtl"] .about-content {
  direction: rtl;
  overflow: hidden;
}

[dir="rtl"] .about-image-wrapper {
  /* Keep image on the left when in RTL */
  grid-column: 1;
  overflow: hidden;
}

[dir="rtl"] .about-text {
  /* Ensure the features/stats column sits on the right in RTL */
  grid-column: 2;
  text-align: right;
}

[dir="rtl"] .about-text .section-tag {
  text-align: right;
}

[dir="rtl"] .about-text .section-tag::after {
  right: 0;
  left: auto;
  transform: none;
}

[dir="rtl"] .about-text .section-title {
  text-align: right;
}

[dir="rtl"] .about-badge {
  right: auto;
  left: var(--space-xl);
}

[dir="rtl"] .about-image-decoration {
  right: -20px;
  left: auto;
}

[dir="rtl"] .about-features {
  align-items: flex-start;
}

[dir="rtl"] .about-feature {
  flex-direction: row;
  text-align: right;
}

[dir="rtl"] .about-stats {
  flex-direction: row;
}

/* Tablet RTL Adjustments */
@media (max-width: 768px) {
  [dir="rtl"] .hero-stats {
    direction: rtl;
  }

  [dir="rtl"] .stat-item {
    direction: rtl;
  }

  [dir="rtl"] .about-text .section-tag::after {
    right: 50%;
    left: auto;
    transform: translateX(50%);
  }

  [dir="rtl"] .about-text .section-title {
    text-align: center;
  }

  /* Reset explicit grid placement on single-column layout */
  [dir="rtl"] .about-text,
  [dir="rtl"] .about-image-wrapper {
    grid-column: auto !important;
  }

  [dir="rtl"] .about-badge {
    left: var(--space-md);
  }
}

/* Mobile RTL Adjustments */
@media (max-width: 480px) {
  [dir="rtl"] .hero-stats {
    direction: rtl;
  }

  [dir="rtl"] .stat-item {
    flex-direction: row-reverse;
    text-align: right;
  }

  [dir="rtl"] .stat-label,
  [dir="rtl"] .stat-number {
    text-align: right;
  }

  [dir="rtl"] .hero-buttons {
    flex-direction: column-reverse;
  }

  [dir="rtl"] .hero-title {
    font-size: 1.4rem;
  }

  [dir="rtl"] .hero-subtitle {
    font-size: 0.85rem;
  }

  [dir="rtl"] .about-badge {
    left: var(--space-sm);
  }

  [dir="rtl"] .about-image-decoration {
    right: -10px;
  }

  [dir="rtl"] .info-item {
    flex-direction: column;
    text-align: center;
  }

  [dir="rtl"] .info-item:hover {
    transform: none;
  }
}

/* ===================================
   CONTACT SECTION RTL
   =================================== */

[dir="rtl"] .contact-content {
  direction: rtl;
}

[dir="rtl"] .form-group label {
  flex-direction: row-reverse;
  text-align: right;
}

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

[dir="rtl"] .error-message {
  text-align: right;
}

[dir="rtl"] .info-item {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .info-item:hover {
  transform: translateX(-10px);
}

[dir="rtl"] .social-icons {
  flex-direction: row-reverse;
}

/* Mobile Contact RTL */
@media (max-width: 480px) {
  [dir="rtl"] .info-item {
    flex-direction: column;
    text-align: center;
  }

  [dir="rtl"] .info-item:hover {
    transform: none;
  }
}

/* ===================================
   FOOTER RTL
   =================================== */

[dir="rtl"] .footer-brand {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-social {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-links a:hover {
  transform: translateX(-5px);
}

[dir="rtl"] .footer-contact li {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .footer-bottom-content {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-legal {
  flex-direction: row-reverse;
}

/* Mobile Footer RTL */
@media (max-width: 768px) {
  [dir="rtl"] .footer-bottom-content {
    flex-direction: column;
  }
}

/* ===================================
   BUTTONS RTL
   =================================== */

[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-outline,
[dir="rtl"] .btn-product {
  flex-direction: row-reverse;
}

[dir="rtl"] .btn-submit .btn-loading {
  flex-direction: row-reverse;
}

/* ===================================
   BACK TO TOP RTL
   =================================== */

[dir="rtl"] #back-to-top {
  right: auto;
  left: 30px;
}

@media (max-width: 768px) {
  [dir="rtl"] #back-to-top {
    left: 20px;
  }
}

@media (max-width: 480px) {
  [dir="rtl"] #back-to-top {
    left: 15px;
  }
}

/* ===================================
   MARGINS & PADDINGS RTL
   =================================== */

/* Reverse margin/padding left-right */
[dir="rtl"] .ml-auto { 
  margin-left: 0;
  margin-right: auto;
}

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

[dir="rtl"] .pl-0 { 
  padding-left: auto;
  padding-right: 0;
}

[dir="rtl"] .pr-0 { 
  padding-right: auto;
  padding-left: 0;
}

/* ===================================
   ICONS RTL
   =================================== */

/* Flip icons that need directional adjustment */
[dir="rtl"] .fa-arrow-right::before {
  content: "\f060"; /* fa-arrow-left */
}

[dir="rtl"] .fa-arrow-left::before {
  content: "\f061"; /* fa-arrow-right */
}

[dir="rtl"] .fa-chevron-right::before {
  content: "\f053"; /* fa-chevron-left */
}

[dir="rtl"] .fa-chevron-left::before {
  content: "\f054"; /* fa-chevron-right */
}

/* ===================================
   ANIMATIONS RTL
   =================================== */

/* Reverse slide/fade animations */
[dir="rtl"] .fadeInLeft {
  animation-name: fadeInRight;
}

[dir="rtl"] .fadeInRight {
  animation-name: fadeInLeft;
}

[dir="rtl"] .slideInLeft {
  animation-name: slideInRight;
}

[dir="rtl"] .slideInRight {
  animation-name: slideInLeft;
}

/* ===================================
   BORDERS RTL
   =================================== */

[dir="rtl"] .border-left {
  border-left: none;
  border-right: 1px solid var(--border-color);
}

[dir="rtl"] .border-right {
  border-right: none;
  border-left: 1px solid var(--border-color);
}

/* ===================================
   FLOATS RTL
   =================================== */

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

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

/* ===================================
   TEXT ALIGNMENT RTL
   =================================== */

[dir="rtl"] .text-left {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

/* ===================================
   FLEXBOX DIRECTION RTL
   =================================== */

[dir="rtl"] .flex-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .flex-row-reverse {
  flex-direction: row;
}

/* ===================================
   LISTS RTL
   =================================== */

[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-right: 0;
  padding-left: 0;
}

[dir="rtl"] ul li,
[dir="rtl"] ol li {
  text-align: right;
}

/* ===================================
   FORM ELEMENTS RTL
   =================================== */

[dir="rtl"] input[type="checkbox"],
[dir="rtl"] input[type="radio"] {
  margin-left: var(--space-sm);
  margin-right: 0;
}

/* ===================================
   TOOLTIPS & POPOVERS RTL
   =================================== */

[dir="rtl"] .tooltip {
  direction: rtl;
  text-align: right;
}

/* ===================================
   NUMBERS IN ARABIC
   =================================== */

/* Keep numbers in Western (European) format even in RTL */
[dir="rtl"] .stat-number,
[dir="rtl"] .product-price,
[dir="rtl"] .phone-number {
  direction: ltr;
  unicode-bidi: embed;
}

/* ===================================
   SPECIAL CHARACTERS RTL
   =================================== */

/* Adjust quotation marks for Arabic */
[dir="rtl"] q::before {
  content: "«";
}

[dir="rtl"] q::after {
  content: "»";
}

/* ===================================
   GRID LAYOUTS RTL
   =================================== */

/* Services and Products grids maintain order but align right */
[dir="rtl"] .services-grid,
[dir="rtl"] .products-grid {
  direction: rtl;
}

/* ===================================
   TRANSFORM ORIGIN RTL
   =================================== */

[dir="rtl"] .transform-origin-left {
  transform-origin: right center;
}

[dir="rtl"] .transform-origin-right {
  transform-origin: left center;
}

/* ===================================
   CUSTOM SCROLLBAR RTL
   =================================== */

[dir="rtl"] ::-webkit-scrollbar {
  direction: rtl;
}

/* ===================================
   LOADING SCREEN RTL
   =================================== */

[dir="rtl"] .loader {
  direction: rtl;
}

/* ===================================
   ACCESSIBILITY RTL
   =================================== */

/* Ensure focus indicators work correctly in RTL */
[dir="rtl"] *:focus {
  outline-offset: 2px;
}

/* ===================================
   PRINT RTL
   =================================== */

@media print {
  [dir="rtl"] body {
    direction: rtl;
    text-align: right;
  }
}

/* ===================================
   LANGUAGE-SPECIFIC ADJUSTMENTS
   =================================== */

/* Increase font size slightly for better Arabic readability */
[dir="rtl"][lang="ar"] {
  font-size: 1.05rem;
}

/* Adjust letter spacing for Arabic */
[dir="rtl"][lang="ar"] h1,
[dir="rtl"][lang="ar"] h2,
[dir="rtl"][lang="ar"] h3 {
  letter-spacing: 0;
}

/* ===================================
   SWIPER RTL SPECIFIC
   =================================== */

/* Ensure Swiper works correctly in RTL */
[dir="rtl"] .swiper-container {
  direction: rtl;
}

[dir="rtl"] .swiper-wrapper {
  direction: rtl;
}

/* ===================================
   UTILITY CLASSES RTL
   =================================== */

/* RTL-specific utility classes */
.rtl-only {
  display: none;
}

[dir="rtl"] .rtl-only {
  display: block;
}

[dir="rtl"] .ltr-only {
  display: none;
}

.ltr-only {
  display: block;
}

/* ===================================
   FINAL POLISH
   =================================== */

/* Ensure smooth transitions when switching between LTR and RTL */
[dir="rtl"] * {
  transition-property: margin, padding, transform, left, right;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Disable transitions on first load to prevent flash */
[dir="rtl"].no-transition * {
  transition: none !important;
}