/**
 * Nova RTL Overrides
 * Applied on Arabic pages (html[dir="rtl"])
 * 
 * NOTE: Most RTL support comes from CSS logical properties in nova-ui.css.
 * This file handles edge cases and visual adjustments that logical properties don't cover.
 */

/* ============================================
   BASE RTL ADJUSTMENTS
   ============================================ */

[dir="rtl"] {
  /* Mirror icons that have directional meaning */
  --nova-arrow-transform: scaleX(-1);
}

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

[dir="rtl"] .nova-global-nav__links {
  /* Already handled by logical properties, but ensure order is correct */
}

[dir="rtl"] .nova-mega-menu__item a {
  /* Flex direction is already inline, works in RTL */
}

/* Chevrons and arrows should flip */
[dir="rtl"] .nova-chevron,
[dir="rtl"] .nova-arrow,
[dir="rtl"] [data-icon="arrow"],
[dir="rtl"] [data-icon="chevron"] {
  transform: var(--nova-arrow-transform);
}

/* ============================================
   BREADCRUMBS
   ============================================ */

[dir="rtl"] .nova-breadcrumb-separator {
  transform: scaleX(-1);
}

/* ============================================
   PRODUCT CARDS
   ============================================ */

[dir="rtl"] .nova-product-card {
  text-align: start; /* Logical, works in RTL */
}

/* ============================================
   BUTTONS WITH ICONS
   ============================================ */

[dir="rtl"] .nova-btn svg:last-child,
[dir="rtl"] .nova-btn .btn-arrow {
  transform: scaleX(-1);
}

/* ============================================
   FORMS
   ============================================ */

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: start;
}

/* Select dropdown arrow */
[dir="rtl"] select {
  background-position: left 12px center;
  padding-left: 36px;
  padding-right: 16px;
}

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

[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-inline-start: 1.5em;
}

[dir="rtl"] .nova-check-list li::before {
  /* Checkmarks don't flip */
}

/* ============================================
   TABLES
   ============================================ */

[dir="rtl"] table {
  text-align: start;
}

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

/* ============================================
   SLIDER / CAROUSEL
   ============================================ */

[dir="rtl"] .nova-slider-prev,
[dir="rtl"] .nova-slider-next {
  transform: scaleX(-1);
}

/* ============================================
   PROGRESS / STEPS
   ============================================ */

[dir="rtl"] .nova-progress-bar {
  transform-origin: right;
}

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

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

[dir="rtl"] .nova-footer__grid {
  /* Grid auto-flows correctly in RTL */
}

/* ============================================
   SPECIFIC COMPONENT FIXES
   ============================================ */

/* Configurator price alignment */
[dir="rtl"] .config-price {
  text-align: start;
}

/* Spec table labels */
[dir="rtl"] .spec-label {
  text-align: start;
}

/* Feature bullets */
[dir="rtl"] .feature-bullets li::before {
  margin-inline-end: var(--nova-space-3);
  margin-inline-start: 0;
}

/* ============================================
   TYPOGRAPHY ADJUSTMENTS
   ============================================ */

[dir="rtl"] .nova-headline,
[dir="rtl"] .nova-body,
[dir="rtl"] .nova-kicker {
  text-align: start;
}

/* Numbers should remain LTR for readability */
[dir="rtl"] .nova-price,
[dir="rtl"] .nova-stat__value,
[dir="rtl"] [data-counter],
[dir="rtl"] .nova-phone,
[dir="rtl"] .nova-date {
  direction: ltr;
  unicode-bidi: embed;
}

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

/* Slide-in animations should come from the correct side */
@keyframes nova-slide-in-rtl {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[dir="rtl"] .nova-slide-in {
  animation-name: nova-slide-in-rtl;
}