/* ==========================================================================
   RIFAL — RTL overrides (loaded only when dir="rtl")
   --------------------------------------------------------------------------
   main.css is written in logical properties, so almost everything flips on
   its own. What is left here is genuinely physical: mirrored transforms,
   a background-image position, chevrons, and the vertical rhythm Arabic
   glyphs need.
   ========================================================================== */

/* Arabic carries more vertical detail than Latin — give it air */
body.lang-ar { line-height: 1.85; }
body.lang-ar .hero-title { line-height: 1.28; }
body.lang-ar .section-title,
body.lang-ar .page-head h1,
body.lang-ar .pdp-title,
body.lang-ar .confirm h1 { line-height: 1.35; }

/* uppercase is meaningless in Arabic and breaks the shaping */
body.lang-ar .eyebrow,
body.lang-ar .hero-eyebrow,
body.lang-ar .pdp-cat,
body.lang-ar .pdp-field-label,
body.lang-ar .contact-info h3,
body.lang-ar .footer-col h3,
body.lang-ar .search-heading,
body.lang-ar .flag { text-transform: none; letter-spacing: .04em; }

/* drawers: transform is not direction-aware. main.css already re-signs the
   base translateX for [dir="rtl"]; the search drawer drops from the top and
   needs nothing. Nothing further to do here. */

/* select caret sits on the inline-start (= left) edge in RTL */
.shop-sort select {
  padding: .5rem .8rem .5rem 2rem;
  background-position: left .8rem center;
}

/* chevrons / arrows that encode direction */
[dir="rtl"] .link-arrow,
[dir="rtl"] .hero-link,
[dir="rtl"] .banner-body a { /* underlines only, no glyph — nothing to mirror */ }

/* latin-ordered runs inside Arabic copy: prices, sizes, order numbers, the
   card fields. Keep the box right-aligned so an Arabic placeholder still
   starts at the right, but type/display digits left-to-right. */
.price, .price-now, .price-was,
.cart-line-total, .summary-row span:last-child,
.checkout-line span:last-child, .radio-card-price,
.confirm-order, .hero-badge-price,
.qty span, .icon-btn .count {
  direction: ltr;
  unicode-bidi: isolate;
}
.cart-line-total, .summary-row span:last-child { text-align: left; }

[dir="rtl"] input[name="cardNumber"],
[dir="rtl"] input[name="cardExpiry"],
[dir="rtl"] input[name="cardCvc"],
[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }

[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder { color: var(--muted); opacity: 1; }

/* the promo marquee reads centred either way; nothing to flip */