Fix single checkbox styling

Author: enejb

projects/packages/forms/src/contact-form/css/grunion.css

@@ -143,10 +143,12 @@
 .contact-form .grunion-checkbox-multiple-options .contact-form-field,
 .contact-form .grunion-radio-options .contact-form-field {
 	display: flex;
-	align-items: baseline;
-
+	align-items: center;
 	margin: 0;
 }
+.contact-form .grunion-radio-options .contact-form-field {
+	align-items: baseline;
+}
 
 .contact-form label span.required,
 .grunion-label-required {
@@ -570,6 +572,8 @@ on production builds, the attributes are being reordered, causing side-effects
 	padding-top: 8px;
 }
 
+.contact-form .grunion-field-wrap input.consent,
+.contact-form .grunion-field-wrap input.checkbox,
 .contact-form .grunion-field-wrap input.checkbox-multiple,
 .contact-form .grunion-field-wrap input.radio {
 	position: relative;
@@ -589,10 +593,11 @@ on production builds, the attributes are being reordered, causing side-effects
 
 .contact-form .grunion-field-wrap input.radio {
 	border-radius: 50%;
-
 	transform: translateY(15%); /* Small offset to compensate the slightly odd perceived alignment that's due to the circular shape */
 }
 
+.contact-form .grunion-field-wrap input.consent:checked::before,
+.contact-form .grunion-field-wrap input.checkbox:checked::before,
 .contact-form .grunion-field-wrap input.checkbox-multiple:checked::before {
 	content: "\2713";
 
@@ -785,10 +790,8 @@ on production builds, the attributes are being reordered, causing side-effects
 	font-style: normal;
 	font-weight: bold;
 }
-
-.contact-form__checkbox-wrap {
+.contact-form .contact-form__checkbox-wrap {
 	display: inline-flex;
-	align-items: baseline;
 }
 
 .contact-form :is([type="submit"],button:not([type="reset"])) {
@@ -807,7 +810,7 @@ on production builds, the attributes are being reordered, causing side-effects
 	display: block;
 }
 
-.visually-hidden {
+.contact-form .visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;