/* 
 * CSS: Contact form
 * @desc: Contact form custom styles.
 */

/* Disable textarea resize */
textarea {
  resize: none;
}

/* How to avoid "-internal-autofill-selected" style to be applied? https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */
input:-webkit-autofill,
input:-webkit-autofill:focus {
	transition: background-color 600000s 0s, color 600000s 0s;
}

/* All elements below the form */
.jpf-comp-contact-form-bottom {
	margin-top: 1rem;
	display: flex;
	align-items: flex-start;
}

/* Hide useless <br> */
.jpf-comp-contact-form-bottom br {
	display: none;
}

/* Legal mentions */
.jpf-comp-contact-form-bottom__text-legals-mentions {
	margin-bottom: 2rem;
	font-size: 12px;
	font-family: 'Source Sans Pro', sans-serif;
	text-align: justify;
}

/* Flex submit button and spinner */
.jpf-comp-contact-form-bottom p:last-of-type {
    display: flex!important;
    flex-direction: column!important;
    align-items: flex-end!important;
}

/* Spinner size and margin */
.jpf-comp-contact-form-bottom .wpcf7-spinner {
    width: 30px;
    height: 30px;
    margin: 1rem 0 0 0!important;
}

/* Submit Messages */
.jpf-comp-contact-form .wpcf7-response-output {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
    margin: 0!important;
	border: 1px solid white!important;    
}

/* Custom styles under 675px */
@media (max-width: 674px) {
	
	/* All elements below the form */
	.jpf-comp-contact-form-bottom {
		flex-direction:column;
		align-items: flex-end;
	}

	/* Legal mentions */
	.jpf-comp-contact-form-bottom__text-legals-mentions {
		font-size: 10px;
	}
}