@charset "UTF-8";

#couponInput {
	text-transform: uppercase;
}

/* RTL support (new: body.l_rtl). Keep .rtl as fallback */
body.l_rtl .contentAreaStyle,
.rtl .contentAreaStyle {
	direction: rtl;
}

/* Make headings/labels/messages align right in RTL */
body.l_rtl .topicStyle,
body.l_rtl .labelStyle,
body.l_rtl .messagebox,
body.l_rtl .snInfo,
.rtl .topicStyle,
.rtl .labelStyle,
.rtl .messagebox,
.rtl .snInfo {
	text-align: right;
}

/* Keep code/number inputs readable (LTR) */
body.l_rtl #couponInput,
body.l_rtl #smartcardSelect,
.rtl #couponInput,
.rtl #smartcardSelect {
	direction: ltr;
	text-align: left;
}

/* If the select is used, its selected text should still read left-to-right */
body.l_rtl select#smartcardSelect,
.rtl select#smartcardSelect {
	direction: ltr;
}

/* Buttons: spacing + right alignment (works in LTR + RTL) */
.buttonRow {
	display: flex;
	align-items: center;
	justify-content: flex-end;	/* always stick to the right edge */
	gap: 12px;					/* real spacing between buttons */
	width: 100%;
	direction: ltr;				/* prevent RTL from flipping flex “end” to the left */
}

/* Make anchor behave like a proper flex item */
.buttonRow > a {
	display: inline-flex;
}

/* Ensure buttons don't stretch / float / collapse into each other */
.buttonRow .buttonStyle {
	margin: 0;
	float: none;
	width: 200px;
}

/* In RTL: put primary action visually on the left (Next left, Back right) */
body.l_rtl .buttonRow > button,
.rtl .buttonRow > button {
	order: 1;
}

body.l_rtl .buttonRow > a,
.rtl .buttonRow > a {
	order: 2;
}