/* Form */
.form {
	@apply w-full max-w-full;
}
/* Styles for form field container */
form {
	@apply flex flex-col gap-5;
}

/* Styles for form field label */
form label {
	@apply block leading-none font-bold mb-2 uppercase;
}

form .form-required::after {
	content: ' *';
}

/* Styles for input fields and textareas, excluding submit, checkbox and radio inputs */
input:not([type=submit]):not([type=checkbox]):not([type=radio]),
form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
form textarea,
form.prose textarea,
form select {
	@apply py-4 px-gutter-1/2 text-lg text-content-primary resize-none w-full max-w-full outline outline-transparent outline-offset-0 outline-[1px];
}

/* Styles for focused input fields and textareas, excluding submit inputs */
input:not([type=submit]):focus,
form input:not([type=submit]):focus,
form textarea:focus,
form textarea:focus,
form input[type=checkbox]:focus + label:after, 
form input[type=radio]:focus + label:after {
	@apply outline outline-signal-primary outline-offset-0 outline-[1px];
}

/* Styles for placeholders in input fields and textareas, excluding submit inputs */
input:not([type=submit])::placeholder,
form input:not([type=submit])::placeholder,
form textarea::placeholder,
form textarea::placeholder {
	@apply text-outer-secondary opacity-80; 
}

/* Styles for error input fields, textareas and their placeholders */
form .messages--error input,
form .messages--error textarea,
form .messages--error input::placeholder,
form .messages--error textarea::placeholder {
	@apply text-error-color !important;
}

/* Styles for required symbol and error messages */
form .ninja-forms-req-symbol,
form .nf-error .nf-error-msg {
	@apply text-error-color;
}

/* Reset font weight for labels */
form .nf-form-content label {
	font-weight: unset;
}

.paragraph--type--form p,
.webform-confirmation__message,
.webform-confirmation__back a {
	font-weight: 300;
	font-size: var(--default-font-size);
	line-height: var(--default-line-height);
}

/* Styles for labels */
form .nf-form-content label,
form .nf-form-content .label-above .nf-field-label,
form label {
	@apply text-xs;
}

/* Margin bottom for labels above fields */
form .nf-form-content .label-above .nf-field-label {
	@apply mb-2;
}

/* Border color for password fields */
form .nf-pass .ninja-forms-field {
	@apply border-content-primary !important;
}

/* Background color for password input fields */
form .nf-pass input.ninja-forms-field  {
	@apply bg-content-secondary;
}

/* Text color for password field after pseudo-element */
form .nf-pass.field-wrap .nf-field-element::after {
	content: url('./check-blue.svg');
}

.theme-secondary .nf-form-cont .nf-form-title {
	@apply prose-theme-secondary;
}

/* Styles for submit button */
form input[type=submit] { 
	@apply break-normal flex justify-center items-center w-full py-3 px-8 text-black transition-all duration-300 border-1 cursor-pointer hover:bg-black hover:text-white sm:flex sm:w-auto sm:justify-start;
}

/* Styles for focused select fields */
form select {
	@apply focus:bg-content-secondary focus:border-signal-primary focus:border-[3px] focus:border-solid focus:outline focus:outline-[3px] focus:outline-offset-0 focus:outline-wcag;
}

/* Styles for checked options in select fields */
select:-internal-list-box option:checked  {
	@apply bg-signal-primary text-content-secondary;
}