/**
 * Right-to-left corrections for Arabic pages.
 *
 * Woodmart already ships RTL support, so this is deliberately a thin
 * corrective layer for the places that still read wrong — mostly prices and
 * anything this plugin renders itself. It only ever adds rules; it never
 * dequeues or overrides the theme's own stylesheets, because doing so would
 * break on the next theme update.
 *
 * Loaded only when the current language is Arabic.
 */

/* --------------------------------------------------------------------------
   Prices

   A price is a bidirectional string: the number runs left-to-right even
   inside an RTL paragraph, while the symbol should sit beside it in reading
   order. Without isolation the browser can render "353,70 درهم" with the
   symbol jumping to the wrong side, or push a minus sign to the far end of
   the line.
   -------------------------------------------------------------------------- */
.rtl .woocommerce-Price-amount,
.rtl .amount {
	unicode-bidi: isolate;
	direction: rtl;
}

.rtl .woocommerce-Price-currencySymbol {
	unicode-bidi: isolate;
	margin-inline-start: .25em;
}

/* Price ranges and strike-through sale prices keep their order. */
.rtl del .woocommerce-Price-amount,
.rtl ins .woocommerce-Price-amount {
	unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   Numbers that must stay left-to-right

   Phone numbers, SKUs, order numbers and tracking codes are Latin-digit
   strings. In an RTL paragraph a "+" or "-" inside them gets reordered, so
   "+212 612..." can render as "212 612...+". Isolating them fixes it without
   changing the surrounding text direction.
   -------------------------------------------------------------------------- */
.rtl .rc-ltr,
.rtl .rc-phone,
.rtl .rc-sku,
.rtl .rc-order-number,
.rtl .rc-tracking-number {
	direction: ltr;
	unicode-bidi: embed;
	display: inline-block;
}

/* Phone and email inputs: type Latin digits left-to-right even on an
   Arabic page, but keep the field itself aligned to the right margin. */
.rtl input[type="tel"],
.rtl input[type="email"],
.rtl input[type="url"] {
	direction: ltr;
	text-align: right;
}

/* --------------------------------------------------------------------------
   Plugin-rendered UI
   -------------------------------------------------------------------------- */
.rtl .rc-field-row {
	text-align: right;
}

.rtl .rc-inline-note {
	margin-inline-start: 0;
	margin-inline-end: .5em;
}

/* Anything using a logical float should mirror; use logical properties so
   these stay correct if the layout is reused LTR. */
.rtl .rc-align-start {
	text-align: right;
}

.rtl .rc-align-end {
	text-align: left;
}

/* --------------------------------------------------------------------------
   Elementor "left" alignment on an Arabic page

   Woodmart's RTL stylesheet treats `.text-left` as *literally* left: it keeps
   `--text-align: left` and adds `margin-right: auto`, so a widget aligned left
   in the Elementor layout stays pinned to the left margin even in Arabic. That
   is defensible for a deliberately-mirrored design, but the shop archive
   header is not one — its title and breadcrumb were set to "left" meaning "the
   side the text starts on", and on /ar/ that is the right.

   Scoped to the widgets in the archive header rather than to `.text-left`
   globally, so nothing that genuinely wants to stay left-pinned moves.
   -------------------------------------------------------------------------- */
.rtl .wd-woo-page-title.text-left,
.rtl .wd-el-breadcrumbs.text-left,
.rtl .wd-woo-page-title.text-left .title,
.rtl .wd-el-breadcrumbs.text-left .wd-breadcrumbs {
	--text-align: right;
	--content-align: flex-start;
	--wd-align: flex-start;
	text-align: right;
	margin-right: 0;
}

/* The breadcrumb trail itself has to run right-to-left, or "Accueil / Shop"
   renders with the separators in the wrong places. Woodmart already does this
   for its no-wrap variant; this extends it to the plain one. */
.rtl .wd-el-breadcrumbs .wd-breadcrumbs {
	direction: rtl;
	justify-content: flex-start;
}

/* The currency symbol now arrives with a real space in front of it (the store
   is set to "right with space"), so the extra gap this rule used to add is one
   space too many. */
.rtl .woocommerce-Price-currencySymbol {
	margin-inline-start: 0;
}

/* --------------------------------------------------------------------------
   Elementor widgets aligned "left" in a layout, on an Arabic page

   Same cause as the archive header above, and by now the common case rather
   than the exception: every widget in these layouts was set to "left" meaning
   "the side the text starts on", and Woodmart's RTL sheet keeps `.text-left`
   literally left. On /ar/ that strands section titles, the footer logo and
   the prefooter columns against the left margin while the text beside them
   reads from the right.

   Still scoped rather than a blanket `.rtl .text-left` override: these are
   the regions built from Elementor layouts, where "left" was a shorthand for
   "start". Anything Woodmart itself pins left — a header element, a widget
   deliberately mirrored — is left alone.
   -------------------------------------------------------------------------- */
.rtl .elementor .title-wrapper.text-left,
.rtl .elementor .wd-text-block.text-left,
.rtl .elementor .wd-image.text-left,
.rtl .wd-prefooter .title-wrapper.text-left,
.rtl .wd-prefooter .wd-text-block.text-left,
.rtl .wd-prefooter .wd-image.text-left,
.rtl .wd-footer .title-wrapper.text-left,
.rtl .wd-footer .wd-text-block.text-left,
.rtl .wd-footer .wd-image.text-left,
.rtl .rc-faq-title.text-left {
	--text-align: right;
	--content-align: flex-start;
	--wd-align: flex-start;
	text-align: right;
	margin-right: 0;
}

/* These blocks are a mix on this store: some have been translated, some are
   still the English the layout shipped with. A flat `direction: rtl` fixes
   the Arabic ones and breaks the English ones — it throws the full stop of an
   English sentence to the front of the line. `plaintext` resolves each
   paragraph's direction from its own first strong character instead, so
   Arabic runs right-to-left and English keeps running left-to-right, and a
   block flips by itself the day its text is translated. */
.rtl .wd-prefooter .wd-text-block,
.rtl .wd-footer .wd-text-block,
.rtl .wd-prefooter .wd-text-block p,
.rtl .wd-footer .wd-text-block p {
	unicode-bidi: plaintext;
	text-align: start;
}

/* An `<img>` is placed by its container's text-align, so the logo's anchor
   has to shrink to the image and start at the inline start rather than
   filling the row. */
.rtl .wd-prefooter .wd-image.text-left > a,
.rtl .wd-footer .wd-image.text-left > a {
	display: inline-block;
}