/*
 * Right-to-left layout for the configurator.
 *
 * The part below this header is written by hand; everything after it is
 * generated from the app's own stylesheet by tools/build-rtl-css.js. Edit this
 * file (tools/rtl-head.css) rather than public/rtl.css, which the script
 * overwrites.
 *
 * The bundle sets `direction:ltr` and `text-align:left` on `.stellar-app`
 * explicitly — it was built to sit on an English page and to be immune to
 * whatever the host document does. On an Arabic site that is the wrong answer,
 * so it is turned round here rather than in the build.
 */

.stellar-app {
	direction: rtl;
	text-align: right;
}

/* The 3D scene has no reading order. Mirroring it would mirror the court. */
.stellar-app canvas {
	direction: ltr;
}

/*
 * Arrows point the way the reader is going.
 *
 * `scale` is a property of its own, separate from `transform`, so flipping the
 * icon here does not disturb Tailwind's `--tw-translate-*` chain — which the
 * generated half of this file negates so the hover nudge also runs the right
 * way. The only other icons carrying `transition-transform` are the accordion
 * chevrons, and a chevron is symmetrical about the vertical axis, so this is a
 * no-op on them.
 */
.stellar-app svg.transition-transform {
	scale: -1 1;
}

/*
 * Latin text inside an Arabic paragraph.
 *
 * A dimension like `6.1 × 13.4 m regulation court` starts with digits, and the
 * bidi algorithm then reorders the whole run — the client's screenshot showed
 * it rendered as `m regulation court… 13.4 × 6.1`. Any element still holding
 * untranslated English is marked by public/i18n.js and pinned back to LTR here,
 * so a string the dictionary has not caught yet is merely untranslated rather
 * than scrambled.
 */
.stellar-app [data-stellar-ltr] {
	direction: ltr;
	/* Resolved against the element’s own direction, which is now ltr, so this
	   is `left` — right for a multi-line block, and the only thing that reads
	   correctly for a specification printed as plain text. */
	text-align: start;
}

/* Numbers a customer types stay left to right, aligned to the start of the
   Arabic flow like every other field on the page. */
.stellar-app input[type="number"],
.stellar-app input[type="tel"],
.stellar-app input[type="email"],
.stellar-app input[type="url"] {
	direction: ltr;
	text-align: right;
}

/*
 * The size sliders run the other way.
 *
 * A range input is one of the handful of controls the browser mirrors on its
 * own, so under `direction:rtl` the thumb travels from the right. The filled
 * part of its track is a gradient, and a gradient has no reading direction —
 * `linear-gradient(to right, …)` paints from the left in every language — so
 * the fill and the handle disagreed: at 68% the bar reached 68% from the left
 * and the thumb stood 68% from the right.
 *
 * The generator below cannot see this. It mirrors PROPERTIES that set a left or
 * a right, and `to right` is a keyword inside a value. So public/theme.css §5
 * puts the direction in a custom property and this flips that one token.
 *
 * `input.stellar-range` is (0,2,1) against theme.css's (0,2,0), which is what
 * lets it win from the stylesheet that loads FIRST of the two.
 */
.stellar-app input.stellar-range {
	--stellar-range-dir: left;
}

/* ------------------------------------------------------------------ */
/* Generated by tools/build-rtl-css.js from index-KylEAywO.css.
   Do not edit by hand: run the script again after a new app build.    */
/* ------------------------------------------------------------------ */

.stellar-app{text-align:start}
.stellar-app .left-0\.5{left:auto;inset-inline-start:.125rem}
.stellar-app .left-1\.5{left:auto;inset-inline-start:.375rem}
.stellar-app .left-1\/2{left:auto;inset-inline-start:50%}
.stellar-app .left-\[22px\]{left:auto;inset-inline-start:22px}
.stellar-app .right-2{right:auto;inset-inline-end:.5rem}
.stellar-app .right-4{right:auto;inset-inline-end:1rem}
.stellar-app .ml-1{margin-left:0;margin-inline-start:.25rem}
.stellar-app .-translate-x-1\/2{--tw-translate-x:50%}
.stellar-app .border-l{border-left-width:0;border-inline-start-width:1px}
.stellar-app .border-l-2{border-left-width:0;border-inline-start-width:2px}
.stellar-app .border-r{border-right-width:0;border-inline-end-width:1px}
.stellar-app .pl-\[30px\]{padding-left:0;padding-inline-start:30px}
.stellar-app .pr-8{padding-right:0;padding-inline-end:2rem}
.stellar-app .text-left{text-align:start}
.stellar-app .group:hover .group-hover\:translate-x-1{--tw-translate-x:-.25rem}

@media(width>=768px){
	.stellar-app .md\:left-6{left:auto;inset-inline-start:1.5rem}
	.stellar-app .md\:translate-x-0{--tw-translate-x:0px}
}