/* V30 Arabic reading direction.
 * Keep the document's semantic RTL language direction while preserving the
 * established LTR visual composition for navigation, grids, media and tools.
 */

html.locale-ar body {
  direction: ltr;
  text-align: right;
}

/* Let each translated text block resolve Arabic and mixed model/spec strings
 * naturally without reversing its flex or grid container. */
html.locale-ar :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  dt,
  dd,
  label,
  legend,
  summary,
  figcaption,
  caption,
  th,
  td,
  small,
  .eyebrow,
  .small-label,
  .body-copy,
  .field-title,
  .nav28-item,
  .nav28-group-trigger,
  .nav28-support-link,
  .mobile-nav-btn,
  .footer-grid > div > button,
  .faq-toggle,
  .gallery-tab,
  .oem-plat-btn,
  .care25-timeline-btn,
  .care25-night-controls button,
  .care25-vox-toggle,
  .care25-car-steps button,
  .sp-spec-table caption,
  .sp-spec-table th,
  .sp-spec-table td
) {
  text-align: right !important;
  unicode-bidi: plaintext;
}

/* Form layout stays in its original place. Arabic entry is right-aligned,
 * while addresses, URLs and numbers remain easy to enter left-to-right. */
html.locale-ar :where(input, textarea, select) {
  text-align: right;
}

html.locale-ar :where(
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="tel"]
) {
  direction: ltr;
  text-align: left;
}

/* Product photography, screen content, diagrams and brand marks must never
 * inherit a mirrored presentation. */
html.locale-ar :where(
  .brand,
  .product-photo,
  .hero-product-image,
  figure,
  picture,
  img,
  video,
  canvas,
  svg:not([data-lucide])
) {
  direction: ltr;
}

/* Directional UI icons describe the fixed site navigation, not the reading
 * direction, so keep the same orientation as every other language. */
html.locale-ar [data-lucide="arrow-right"],
html.locale-ar [data-lucide="chevron-right"],
html.locale-ar [data-lucide="arrow-left"] {
  transform: none;
}

