/* ================================
   RTL (RIGHT-TO-LEFT) STYLES
   ================================ */

/* Base RTL adjustments for all elements */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Reset text alignment for centered elements */
[dir="rtl"] [style*="text-align: center"],
[dir="rtl"] .text-center {
  text-align: center;
}

/* Common layout adjustments */
[dir="rtl"] .container,
[dir="rtl"] .wrapper {
  direction: rtl;
}

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

/* Float adjustments */
[dir="rtl"] .float-left {
  float: right;
}

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

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

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

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

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

/* Transform adjustments */
[dir="rtl"] .transform-x {
  transform: scaleX(-1);
}

/* Border radius (swap left/right) */
[dir="rtl"] .rounded-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

[dir="rtl"] .rounded-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

/* Icons and arrows */
[dir="rtl"] .icon-arrow-left::before {
  content: '\2192'; /* Right arrow */
}

[dir="rtl"] .icon-arrow-right::before {
  content: '\2190'; /* Left arrow */
}

/* Form inputs - keep LTR for numbers/emails but allow auto detection */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: left;
}

[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea {
  direction: rtl;
  text-align: right;
}

/* List styles */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-left: 0;
  padding-right: 2rem;
}

/* Grid adjustments - auto-handles in most cases, but can be overridden per component */

/* Shadow directions (optional - shadows usually don't need mirroring) */
[dir="rtl"] .shadow-left {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .shadow-right {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Gradient directions (if needed) */
[dir="rtl"] .gradient-left-to-right {
  background: linear-gradient(to left, var(--start-color), var(--end-color));
}

/* Positioning adjustments - components will override as needed */
[dir="rtl"] .absolute-left {
  left: auto;
  right: 0;
}

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

/* Animation and transform origins */
[dir="rtl"] .origin-left {
  transform-origin: right center;
}

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

/* Carousel/slider adjustments (common pattern) */
[dir="rtl"] .carousel,
[dir="rtl"] .slider {
  direction: ltr; /* Keep slides in LTR order visually, but content inside is RTL */
}

[dir="rtl"] .carousel-inner,
[dir="rtl"] .slider-inner {
  direction: rtl;
}

/* Menu and navigation */
[dir="rtl"] .menu-item {
  text-align: right;
}

/* Breadcrumbs */
[dir="rtl"] .breadcrumb-separator::before {
  content: '\2039'; /* Left angle bracket */
}

/* Tables */
[dir="rtl"] table {
  direction: rtl;
}

[dir="rtl"] th,
[dir="rtl"] td {
  text-align: right;
}

/* Tooltips and popovers (may need per-component adjustment) */
[dir="rtl"] .tooltip-left {
  /* Will be positioned to the right in RTL */
}

[dir="rtl"] .tooltip-right {
  /* Will be positioned to the left in RTL */
}

/* Print styles */
@media print {
  [dir="rtl"] {
    direction: rtl;
  }
}

/* Accessibility - ensure focus indicators work correctly */
[dir="rtl"] :focus-visible {
  outline-offset: 2px;
}

/* Override specific vendor prefixes if needed */
[dir="rtl"] input::-webkit-input-placeholder {
  text-align: right;
}

[dir="rtl"] input::-moz-placeholder {
  text-align: right;
}

[dir="rtl"] input:-ms-input-placeholder {
  text-align: right;
}

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

/* ================================
   MEGA MENU RTL STYLES
   ================================ */

/* Mega menu text alignment */
[dir="rtl"] .mega-menu__category-header {
  text-align: right;
}

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

/* Mega menu lists */
[dir="rtl"] .mega-menu__list {
  padding-left: 0;
  padding-right: 0;
  text-align: right;
}

/* Mega menu grid - CSS Grid auto-handles RTL, but ensure text flows correctly */
[dir="rtl"] .mega-menu__grid {
  direction: rtl;
}

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

/* Brands mega menu */
[dir="rtl"] .mega-menu-brands__grid {
  direction: rtl;
}

[dir="rtl"] .mega-menu-brands__item {
  text-align: center; /* Keep centered */
}

[dir="rtl"] .mega-menu-brands__name {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 400;
}

[dir="rtl"] .mega-menu-brands__view-more {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 400;
}

/* Occasions mega menu */
[dir="rtl"] .mega-menu-occasions__grid {
  direction: rtl;
}

[dir="rtl"] .mega-menu-occasions__card {
  text-align: center; /* Keep centered */
}

[dir="rtl"] .mega-menu-occasions__label {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 400;
  text-align: center;
}

[dir="rtl"] .mega-menu-occasions__view-more {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 400;
}

/* Arabic fonts for mega menu text */
[dir="rtl"] .mega-menu__category-header {
  font-family: 'Alexandria', sans-serif;
  font-weight: 400; /* Match the lightness of Sora Light */
  text-transform: none; /* Arabic doesn't use uppercase */
  letter-spacing: 0; /* Arabic doesn't need letter-spacing like Latin */
}

[dir="rtl"] .mega-menu__link {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 300; /* Match Sora Light */
}

/* Fix hover effect for RTL - padding should be on the right */
[dir="rtl"] .mega-menu__link:hover {
  padding-left: 0;
  padding-right: 4px;
}