/**
 * Bilingual RTL/LTR Support Styles
 * Automatically adjusts layout based on language direction
 * @package TopPick
 */

/* ==========================================================================
   Text Direction Helpers
   ========================================================================== */

/* Ensure proper text alignment based on direction */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* ==========================================================================
   Navigation and Menu Adjustments
   ========================================================================== */

/* RTL navigation */
[dir="rtl"] .navbar ul {
  direction: rtl;
}

[dir="rtl"] .navbar ul li {
  float: right;
}

/* LTR navigation */
[dir="ltr"] .navbar ul {
  direction: ltr;
}

[dir="ltr"] .navbar ul li {
  float: left;
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */

/* RTL dropdowns */
[dir="rtl"] .dropdown-content {
  left: auto;
  right: 0;
}

/* LTR dropdowns */
[dir="ltr"] .dropdown-content {
  left: 0;
  right: auto;
}

/* ==========================================================================
   Flexbox Direction Helpers
   ========================================================================== */

/* Flex containers should respect direction */
[dir="rtl"] .flex-row {
  flex-direction: row-reverse;
}

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

/* ==========================================================================
   Margin and Padding Helpers
   ========================================================================== */

/* 
 * Use logical properties for margins and paddings
 * These automatically adjust based on text direction
 */

/* Instead of margin-left/right, use margin-inline-start/end */
.spacing-start {
  margin-inline-start: 1rem;
}

.spacing-end {
  margin-inline-end: 1rem;
}

.padding-start {
  padding-inline-start: 1rem;
}

.padding-end {
  padding-inline-end: 1rem;
}

/* ==========================================================================
   Language Switcher Button
   ========================================================================== */

.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.language-switcher:hover {
  opacity: 0.8;
}

#langFlag {
  transition: transform 0.3s ease;
}

.language-switcher:hover #langFlag {
  transform: scale(1.1);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

/* RTL form inputs */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

/* LTR form inputs */
[dir="ltr"] input,
[dir="ltr"] textarea,
[dir="ltr"] select {
  text-align: left;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

/* RTL breadcrumbs */
[dir="rtl"] .breadcrumb {
  direction: rtl;
}

[dir="rtl"] .breadcrumb a::after {
  content: " < ";
  margin: 0 0.5rem;
}

/* LTR breadcrumbs */
[dir="ltr"] .breadcrumb {
  direction: ltr;
}

[dir="ltr"] .breadcrumb a::after {
  content: " > ";
  margin: 0 0.5rem;
}

/* Remove separator from last item */
.breadcrumb a:last-child::after {
  content: "";
}

/* ==========================================================================
   Icons and Images
   ========================================================================== */

/* Flip icons in RTL that have directional meaning */
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .arrow-icon {
  transform: scaleX(-1);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

/* RTL pagination */
[dir="rtl"] .pagination {
  direction: rtl;
}

/* LTR pagination */
[dir="ltr"] .pagination {
  direction: ltr;
}

/* ==========================================================================
   Text Transformation Helpers
   ========================================================================== */

/* Numbers should always be LTR */
.number,
.price,
.date {
  direction: ltr;
  display: inline-block;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Force RTL */
.force-rtl {
  direction: rtl !important;
  text-align: right !important;
}

/* Force LTR */
.force-ltr {
  direction: ltr !important;
  text-align: left !important;
}

/* Center text regardless of direction */
.text-center {
  text-align: center !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  [dir="rtl"] {
    direction: rtl;
  }
  
  [dir="ltr"] {
    direction: ltr;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Ensure focus indicators respect direction */
[dir="rtl"] a:focus,
[dir="rtl"] button:focus {
  outline-offset: -2px;
}

[dir="ltr"] a:focus,
[dir="ltr"] button:focus {
  outline-offset: 2px;
}

/* ==========================================================================
   Animation Adjustments
   ========================================================================== */

/* Slide animations should respect direction */
@keyframes slideInRTL {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

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

[dir="rtl"] .slide-in {
  animation: slideInRTL 0.3s ease;
}

[dir="ltr"] .slide-in {
  animation: slideInLTR 0.3s ease;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
  /* Ensure mobile menu respects direction */
  [dir="rtl"] .mobile-menu {
    right: auto;
    left: 0;
  }
  
  [dir="ltr"] .mobile-menu {
    left: auto;
    right: 0;
  }
}