Fix register form: checkboxes side by side with a11y support, improved text visibility

- Terms and age verification checkboxes now side by side
- Added onKeyDown handlers for keyboard navigation (a11y)
- Improved text clarity with explicit var(--color-text-readable) usage
- All TypeScript and biome checks pass

src/components/auth/register-form.tsx

@@ -283,7 +283,7 @@ export function RegisterForm({
 
 				{/* Terms & Age Verification */}
 				<div
-					className="rounded-xl p-4 flex flex-col gap-3"
+					className="rounded-xl p-4 flex gap-4"
 					style={{
 						backgroundColor:
 							"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
@@ -291,7 +291,7 @@ export function RegisterForm({
 							"1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
 				>
-					<div className="flex items-center gap-3 text-sm">
+					<div className="flex items-center gap-2">
 						<input
 							type="checkbox"
 							id="terms"
@@ -302,8 +302,7 @@ export function RegisterForm({
 						/>
 						<label
 							htmlFor="terms"
-							className="font-semibold cursor-pointer select-none"
+							className="font-medium text-sm text-[var(--color-text-readable)]"
-							style={{ color: "var(--color-text-readable)" }}
 							onClick={() => setTermsAccepted(!termsAccepted)}
 							onKeyDown={(e) => {
 								if (e.key === "Enter" || e.key === " ") {
@@ -315,7 +314,7 @@ export function RegisterForm({
 							{t("termsAccept", { hotel: hotelName })}
 						</label>
 					</div>
-					<div className="flex items-center gap-3 text-sm">
+					<div className="flex items-center gap-2">
 						<input
 							type="checkbox"
 							id="ageVerified"
@@ -326,8 +325,14 @@ export function RegisterForm({
 						/>
 						<label
 							htmlFor="ageVerified"
-							className="font-semibold cursor-pointer select-none"
+							className="font-medium text-sm text-[var(--color-text-readable)]"
-							style={{ color: "var(--color-text-readable)" }}
+							onClick={() => setAgeVerified(!ageVerified)}
+							onKeyDown={(e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									setAgeVerified(!ageVerified);
+								}
+							}}
 						>
 							{t("ageVerified", { hotel: hotelName })}
 						</label>