/* =========================================================================
   Arabic: right-to-left layout
   Core sets dir="rtl" on <html> for Arabic. Rules written with physical
   sides (left/right) are mirrored here; prefer logical properties
   (margin-inline-start, inset-inline-end…) in new CSS so they need no entry.
   ========================================================================= */

/* Letter-spacing breaks the joins between Arabic letters, and Arabic has no
   capitals, so the uppercase/tracking styling of eyebrows does not apply. */
[dir="rtl"] body,
[dir="rtl"] body * { letter-spacing: 0 !important; }

/* Arrows point the reading way: the arrow icons, mirrored. */
[dir="rtl"] {
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix(-1 0 0 1 24 0)'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/g%3E%3C/svg%3E");
  --icon-arrow-disc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='matrix(-1 0 0 1 24 0)'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='M7 12h10M13 8l4 4-4 4' fill='none' stroke='%23009933' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  --icon-arrow-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009933' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix(-1 0 0 1 24 0)'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/g%3E%3C/svg%3E");
  --icon-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='matrix(-1 0 0 1 24 0)'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Slider chevrons: "next" points left, "previous" right. */
[dir="rtl"] .features__next::after { transform: none; }
[dir="rtl"] .features__prev::after { transform: scaleX(-1); }
[dir="rtl"] .features__next:hover::after { transform: translateX(-3px); }
[dir="rtl"] .features__prev:hover::after { transform: scaleX(-1) translateX(-3px); }

[dir="rtl"] .card-grid__next::after { transform: none; }
[dir="rtl"] .card-grid__prev::after { transform: scaleX(-1); }

/* Arrows that glide on hover move the reading way too. */
[dir="rtl"] .features--icons .feature:hover .feature__link .card__arrow,
[dir="rtl"] .features--icons .feature:focus-within .feature__link .card__arrow { transform: translateX(-8px); }
[dir="rtl"] .btn-pill--read:hover::after { transform: translateX(-4px); }

/* Latin brand names ("VERTIMEC®") keep their own direction, so a trailing
   ® or digit is not flipped to the front; the line stays right-aligned. */
[dir="rtl"] :is(.product-card__title, .product__name, .product__brand-name) {
  unicode-bidi: plaintext;
  text-align: right;
}

/* Icons drawn as backgrounds sit on the other side: dropdown chevrons at the
   left end, input icons at the right, as the padding already does. */
[dir="rtl"] .lead-crop__form select { background-position: left 15px center; }
[dir="rtl"] .lead-gen__form select { background-position: left 16px center; }
[dir="rtl"] .contact__form select { background-position: left 15px center; }
[dir="rtl"] .mixsyn__field select { background-position: left 18px center; }
[dir="rtl"] .filters__cluster select { background-position: left 16px center; }
[dir="rtl"] .dealers__panel .filters__cluster select { background-position: left 16px center; }
[dir="rtl"] .lead-crop__icon input { background-position: right 15px center; }
[dir="rtl"] .filters__search input { background-position: right 18px center; }
[dir="rtl"] .countries__search { background-position: right 18px center; }

/* The form's submit arrow: on the left, pointing left. */
[dir="rtl"] .lead-crop__form .webform-button--submit {
  background-image: url("../../images/icon-lead-arrow-rtl.svg");
  background-position: left 22px center;
}

/* Timeline arrows: the chevron's borders swap sides, so the turn changes to
   keep "next" pointing left and "previous" right. */
[dir="rtl"] .timeline__nav--next::before { transform: rotate(45deg); }
[dir="rtl"] .timeline__nav--prev::before { transform: rotate(-135deg); }

/* Figures, phone numbers and e-mails take their direction from their own
   characters: "+212 522 667 910" and "−50 %" stay in order, "2 مليار دولار"
   still reads right to left. Aligned like the surrounding text. */
[dir="rtl"] :is(.metric__value, .panel__number, .contact__value, .help-banner__value, .dealer__phone, .doc-item__meta, .download-card__size) {
  unicode-bidi: plaintext;
  text-align: right;
}

/* Arrows typed as characters point left too. */
[dir="rtl"] .resources__card-link::after { content: "  ←"; }
[dir="rtl"] .features--tools .feature__link::after { content: "←"; }

/* Phone numbers and e-mail addresses are typed left to right, even in
   Arabic; the box keeps its right alignment. */
[dir="rtl"] input:is([type="tel"], [type="email"]) {
  direction: ltr;
  text-align: right;
}
[dir="rtl"] .auth-arrow--next::before { content: "\00a0\00a0←"; }
[dir="rtl"] .auth-arrow--back::before { content: "→\00a0\00a0"; }