/**
 * WSaaS RTL overrides — enqueued only when is_rtl() (Arabic).
 *
 * The theme (Kadence) sets <html dir="rtl"> for Arabic, so most flex/grid
 * layouts mirror automatically by inheriting direction. This file fixes the few
 * physical (non-logical) properties that don't auto-mirror, and flips the
 * wizard's motion direction.
 */

.wsaas-gallery,
.wsaas-detail,
.wsaas-dash,
.wsaas-support,
.wsaas-request,
.wsaas-req-thanks,
.wsaas-prov,
.wsaas-configure,
.wsaas-langswitch {
	direction: rtl;
	text-align: right;
}

/* Feature bullet indent flips to the right edge. */
.wsaas-features ul {
	padding-left: 0;
	padding-right: 18px;
}

/* Chat bubbles: flex-end/-start already move "me" to the left and "op" to the
   right under RTL — mirror each bubble's tail corner to match. */
.wsaas-support-msg.me {
	border-bottom-right-radius: 14px;
	border-bottom-left-radius: 4px;
}
.wsaas-support-msg.op {
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 4px;
}

/* Wizard steps slide in from the opposite side. */
.wsaas-request {
	--wsaas-dir: -1;
}

/* Wizard "Back" pushes to the visual left in RTL. */
.wsaas-request__nav [data-wsaas-back] {
	margin-right: 0;
	margin-left: auto;
}

/* ---------- Landing (RTL) ---------- */
/* Root direction so the whole storefront front page mirrors. */
.wsaas-landing { direction: rtl; text-align: right; }

/* "Forward" arrows point left in RTL, and their hover nudge follows. */
.wsaas-landing .wsaas-btn__arrow { transform: scaleX( -1 ); }
.wsaas-landing .wsaas-btn:hover .wsaas-btn__arrow { transform: scaleX( -1 ) translateX( 3px ); }

/* The eyebrow's decorative dash grows from the right edge. */
.wsaas-landing .wsaas-eyebrow::before { background: linear-gradient( 270deg, var( --gold ), transparent ); }

/* Preview device chrome reads left-to-right (a URL is always LTR). */
.wsaas-landing .wsaas-device__url { direction: ltr; }

@media ( prefers-reduced-motion: reduce ) {
	.wsaas-landing .wsaas-btn:hover .wsaas-btn__arrow { transform: scaleX( -1 ); }
}