/* An e-mail address, a phone number, a web address and a number are written
   left to right in every language. Bootstrap's own right-to-left build adds
   the same rule. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
	direction: ltr;
	text-align: right;
}

/* A price is written left to right ("89 EUR", the sign last) in every language.
   WooCommerce wraps it in <bdi> for that, and where a template passes the
   price through a filter that drops the tag - the table of variations, the
   lines of the quote popup - the sign changed sides: "EUR 89" in the table,
   "89 EUR" above it. */
html[dir="rtl"] .woocommerce-Price-amount {
	direction: ltr;
	unicode-bidi: isolate;
}

/* A phone number is read left to right in every language. Standing alone in a
   right-to-left line it has no letter to say so, and the browser sets its
   groups down from the right: "773 450 70 386+" in the top bar. */
html[dir="rtl"] .bs-tb__num {
	direction: ltr;
	unicode-bidi: isolate;
}

/* The same for every link that dials. Where its text is the number alone, the
   line takes its direction from what is written in it (no letters: left to
   right); icon and text keep the order of the page. */
html[dir="rtl"] a[href^="tel:"] {
	unicode-bidi: plaintext;
}

/* The footer writes "Phone: +386 ..." as one link. Behind an Arabic label the
   number would follow the label, so the two become two boxes: the label keeps
   the direction of the page and its place on the right, the number is left to
   right. */
html[dir="rtl"] a[href^="tel:"]:has(> .footer-contact-label) {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: .35em;
	direction: ltr;
	unicode-bidi: isolate;
}
html[dir="rtl"] a[href^="tel:"] > .footer-contact-label {
	direction: rtl;
	unicode-bidi: isolate;
}

/* An address is written in the direction of its own script, line by line:
   "3320 Velenje, Slovenia" set right to left came out as "Velenje, Slovenia
   3320", and "Robomatis d.o.o." with its full stop in front. A line in Arabic
   stays right to left. */
html[dir="rtl"] address {
	unicode-bidi: plaintext;
	text-align: right;
}

/* Inside a drawing the coordinates run left to right whatever the page does:
   text set at x="240" has to start there. Right to left it ended there and lay
   over the icon beside it (the three badges under the home page's slider). */
html[dir="rtl"] svg {
	direction: ltr;
}

/* A picture of an arrow does not turn with the page. The mirror moves the
   button to the other side and leaves the drawing as it is, so "previous", now
   on the right, kept pointing left: both arrows of a slider pointed at its
   middle. The drawing itself is mirrored here, whatever it is made of:
     - the arrow beside a category of the mega menu (a glyph of the icon font
       in the theme, a mask since bs-poppins - which is why swapping the glyph,
       as 0.1.1 did, changed nothing);
     - the arrows of the product carousels (FlexSlider, drawn as SVG);
     - the arrows of the home page's banner slider;
     - Bootstrap's carousel, whose own right-to-left build does the same. */
html[dir="rtl"] .has-children .mega-heading a::after,
html[dir="rtl"] .flex-direction-nav a svg,
html[dir="rtl"] .kw-hero-slider__arrow-icon,
html[dir="rtl"] .carousel-control-prev-icon,
html[dir="rtl"] .carousel-control-next-icon {
	transform: scaleX(-1);
}

/* Arabic script is joined-up writing: spacing between letters tears the words
   apart. The theme spaces out headings, buttons and labels. */
html[lang^="ar"] body,
html[lang^="ar"] body * {
	letter-spacing: 0 !important;
}