/* RTL-Specific Styles */

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

/* LTR-Specific Styles */
[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* Navbar Container RTL/LTR */
/* RTL Layout: [Logo (left)] [Nav Links (center)] [Actions (right)] - Using Row Reverse to flip Brand/Toggle */
/* Mobile: We want Brand (Right or Left). The user screenshot showed Brand Left. */
/* Standard RTL Mobile: Brand (Right), Toggle (Left). */
/* If user wants Brand Left, Toggle Right in RTL, we use row-reverse */

[dir="rtl"] .navbar-container {
  flex-direction: row-reverse; /* Brand (Start) -> End (Left). Toggle (End) -> Start (Right). */
}

/* On mobile, justify-between handles spacing. */

[dir="ltr"] .navbar-container {
  flex-direction: row; /* Normal order: Logo | Nav | Actions */
}

/* Navbar Brand RTL/LTR - Logo alignment */
[dir="rtl"] .navbar-brand {
  flex-direction: row-reverse;
}

[dir="ltr"] .navbar-brand {
  flex-direction: row;
}

/* Navbar Nav RTL/LTR - Links flow normally, first link on left */
/* In RTL: Nav links start from LEFT, first link (الرئيسية) appears on left side */
/* In LTR: Nav links start from LEFT, first link appears on left side */
[dir="rtl"] .navbar-nav {
  flex-direction: row; /* Normal order - first item (الرئيسية) on left */
}

[dir="ltr"] .navbar-nav {
  flex-direction: row; /* Normal flow - first item on left */
}

/* Navbar Actions RTL/LTR - Buttons should be on left in RTL, right in LTR */
[dir="rtl"] .navbar-actions {
  flex-direction: row-reverse; /* Reverse button order in RTL */
  align-items: center; /* Ensure vertical centering */
  align-self: center; /* Center vertically within navbar */
}

[dir="ltr"] .navbar-actions {
  flex-direction: row; /* Normal button order in LTR */
  align-items: center; /* Ensure vertical centering */
  align-self: center; /* Center vertically within navbar */
}

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

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

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

[dir="rtl"] .stat-card {
  text-align: center;
}

[dir="rtl"] .footer-link:hover {
  padding-inline-end: var(--spacing-sm);
  padding-inline-start: 0;
}

/* Nav Link Underline RTL/LTR */
[dir="rtl"] .nav-link::after {
  left: auto;
  right: var(--spacing-md);
}

[dir="ltr"] .nav-link::after {
  left: var(--spacing-md);
  right: auto;
}

/* Mobile Nav RTL/LTR */
@media (max-width: 968px) {
  [dir="rtl"] .navbar-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  
  [dir="ltr"] .navbar-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  
  /* Reset order on mobile for proper stacking */
  [dir="rtl"] .navbar-brand,
  [dir="ltr"] .navbar-brand {
    order: 0;
  }
  
  [dir="rtl"] .navbar-nav,
  [dir="ltr"] .navbar-nav {
    order: 1;
  }
  
  [dir="rtl"] .navbar-actions,
  [dir="ltr"] .navbar-actions {
    order: 2;
  }
}

/* Icons RTL */
[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

/* Flex utilities RTL */
[dir="rtl"] .flex-row-reverse {
  flex-direction: row;
}

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

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

/* Grid alignment RTL */
[dir="rtl"] .grid {
  direction: rtl;
}

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

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

/* Hero variants RTL/LTR */
[dir="rtl"] .hero--about .hero-content {
  direction: rtl;
}

[dir="ltr"] .hero--about .hero-content {
  direction: ltr;
}

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

[dir="ltr"] .hero--kg .hero-content {
  direction: ltr;
}

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

[dir="ltr"] .hero--primary .hero-content {
  direction: ltr;
}

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

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

/* Stepper RTL/LTR */
[dir="rtl"] .stepper {
  direction: rtl;
}

[dir="ltr"] .stepper {
  direction: ltr;
}

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

[dir="ltr"] .hero-stepper {
  direction: ltr;
}

/* Values Carousel RTL/LTR */
[dir="rtl"] .carousel-card[data-position="left"] {
  transform: translateX(280px) scale(0.85) rotateY(-15deg);
}

[dir="rtl"] .carousel-card[data-position="right"] {
  transform: translateX(-280px) scale(0.85) rotateY(15deg);
}

[dir="rtl"] .carousel-card[data-position="far-left"] {
  transform: translateX(500px) scale(0.7) rotateY(-25deg);
}

[dir="rtl"] .carousel-card[data-position="far-right"] {
  transform: translateX(-500px) scale(0.7) rotateY(25deg);
}

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

@media (max-width: 768px) {
  [dir="rtl"] .carousel-card[data-position="left"] {
    transform: translateX(220px) scale(0.8) rotateY(-15deg);
  }
  
  [dir="rtl"] .carousel-card[data-position="right"] {
    transform: translateX(-220px) scale(0.8) rotateY(15deg);
  }
}

@media (max-width: 480px) {
  [dir="rtl"] .carousel-card[data-position="left"] {
    transform: translateX(160px) scale(0.75) rotateY(-10deg);
  }
  
  [dir="rtl"] .carousel-card[data-position="right"] {
    transform: translateX(-160px) scale(0.75) rotateY(10deg);
  }
}