/* Gravity Form - Currently Book a Visit */

.contact-form-wrapper:has(.gform_wrapper) {
	max-width: 900px;
}

.gform_confirmation_wrapper {
	text-align: center;
}

#top .gform_wrapper.gravity-theme.gform-theme--no-framework:not(#top .pricing-calendar-modal .gform_wrapper.gravity-theme.gform-theme--no-framework) {
	.gform_submission_error, .gform_validation_errors, .gform_required_legend {
		display: none;
	}

	p {
		margin: 0;
		line-height: 1.4;

		small {
			color: #8b8681;
			font-size: 14px;
		}
	}

	p a {
		color: #B9808A;
		text-decoration: underline;
	}

		form {
			display: block;
			width: 100%;
		}

		form[data-active-form="true"] button {
			pointer-events: none;
		}
		form[data-active-form="true"] button:before {
			opacity: 1;
		}

		form[data-active-form="true"] button span {
			opacity: 0;
		}

		form[data-active-form="true"] button span:after {
			opacity: 0;
		}

	.gform_fields {
		display: grid;

		@media screen and (min-width: 1024px) {
			gap: 38px!important;
		}
	}

	.gfield:not(.wedding-year-of-interest) {
		position: relative;
	}

	.gfield:not(.wedding-year-of-interest).gfield_error {
		color: red;
	}

	.gfield:not(.wedding-year-of-interest).gfield_error input,
	.gfield:not(.wedding-year-of-interest).gfield_error textarea {
		background-color: rgba(255, 0, 0, 0.05);
	}

	.gfield:not(.wedding-year-of-interest).gfield_error input:not(:focus),
	.gfield:not(.wedding-year-of-interest).gfield_error textarea:not(:focus) {
		border-bottom-color: red;
	}

	.gfield:not(.wedding-year-of-interest).gfield_error select {
		background-color: rgba(255, 0, 0, 0.05);
		border-bottom-color: red;
	}

	.gfield:not(.wedding-year-of-interest).gfield--type-email .gfield_validation_message {
		position: static;
	}

	label, legend {
		text-align: left;
	    font-family: inherit;
		font-family: "butler-light", sans-serif;
		font-size: 18px !important;
		position: relative;
		letter-spacing: 0.02em;
		font-weight: 400;
		color: #454F5C !important;
	}

	input, textarea, select {
		display: block;
		-webkit-appearance: none;
		font-family: inherit!important;
		border: none!important;
		border-bottom: 1px solid #cec7c1!important;
		height: 57px;
		padding: 12px 16px;
		padding-left: 0;
		font-weight: 400;
		border: 2px solid transparent;
		font-size: 16px;
		outline: 0;
		font-weight: 400;
		border-radius: 0;
		margin: 0;
		width: 100%;
		font-size: 16px;
		line-height: 2;
		font-weight: 400;
		color: #444e5a !important;
		outline: 0;
		box-shadow: none!important;

		&:focus {
			border-bottom: 1px solid #454F5C !important;
		}

		@media screen and (max-width: 1023px) {
			height: 48px;
			padding-left: 15px;
			font-size: 16px;
			line-height: 20px;
		}
	}


	input[type=checkbox] {
		display: block;
		-webkit-appearance: none;
		 font-family: inherit;
		border: none;
		height: 57px;
		padding: 12px 16px;
		font-weight: 400;
		border: 2px solid transparent;
		font-size: 16px;
		outline: 0;
		font-weight: 400;
		border-radius: 0;
		margin: 0;
		width: 100%;
		border: 1px solid #cec7c1!important;
	}

	input[type="text"], input[type="number"], input[type="email"], textarea {
		background: none!important;
	}

	textarea {
		padding-top: 20px;
		height: 150px!important;
		resize: none;

		@media screen and (min-width: 768px) {
			height: 215px!important;
		}
	}

	.gfield_label {
		display: block;
		margin-bottom: 10px;
	}

	.gfield_required, .gfield_required_text, .gform-field-label--type-sub, .gf_clear {
		display: none;
	}

	.gfield_checkbox {
		display: flex;
		gap: 5px;

		.gchoice {
			position: relative;
			width: 100%;
			margin: 0;

			.gform-field-label--type-inline {
				pointer-events: none;
				position: absolute;
				width: 100%;
				transform: translateY(-50%);
				top: 50%;
				left: 0;
				text-align: center;
				font-size: 14px!important;
				line-height: 1;
				margin-top: 2px;
			}
		}
	}

	input[type=checkbox] {
		width: 100%;
		cursor: pointer;
		padding: 0;
		transition: none;
	}

	.gfield--type-consent {
		.ginput_container_consent {
			display: flex;
			align-items: center;
			gap: 10px;

		@media screen and (max-width: 1023px) {
				font-size: 13px;
				line-height: 19px;
				gap: 15px;
			}

			input[type=checkbox] {
				width: 57px;
				aspect-ratio: 1;
				flex-shrink: 0;
				transition: background-color .25s ease-in-out;
			}

			input[type=checkbox]:checked {
				background-image: url('img/tick.svg');
					background-size: 20px;
					background-repeat: no-repeat;
					background-position: center;

					@include max-width(1023) {
						background-size: 30px;
					}
			}
		}
	}

	select {
		background: url('img/down-chevron.svg');
		background-repeat: no-repeat;
		background-size: 20px;
		background-position: right 15px center;
		cursor: pointer;
		color: #8b8681;
	}

	.wedding-year-of-interest, .gfield--type-select {
		input[type=checkbox] {
			&:checked, &:hover {
				~ label {
					color: #FFF!important;
				}
			}

			&:hover, &:checked {
				background-color: #B9808A;
			}
		}

		.gchoice:last-of-type {
			flex-shrink: 0;
			width: 80px;

			@media screen and (min-width: 1024px) {
				width: 115px;
			}
		}

		input[type=checkbox]:hover {
			background-color: #B9808A;
		}

		input[type=checkbox]:hover ~ label {
			color: #FFF;
		}
		input[type=checkbox]:checked {
			background-color: #B9808A;
		}

		input[type=checkbox]:checked ~ label {
			color: #FFF;
		}
	}

	@include max-width(767) {
		.wedding-year-of-interest.gfield_error {
			margin-bottom: 15px;
		}
	}

	.gfield_validation_message {
		pointer-events: none;
		display: block;
		color: red;
		z-index: 2;
		opacity: 1;
		font-size: 12px;
		margin-top: 10px;
		text-align: left;
	}

	.ginput_container_email.ginput_complex {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 10px;

		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 30px;
		}

			@media screen and (max-width: 1023px) {
			grid-column-gap: 2%;
		}

			@media screen and (min-width: 1024px) {
			gap: 38px;
		}

		input {
			width: 100%;
		}
	}

	.gform_footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 28px;

		p {
			display: block;
		}
	}

	button {
			position: relative;
			cursor: pointer;
			transition: .25s all ease-in-out;
			min-width: 262px;
			text-align: center;
			border: 1px solid #444e5b;
    		background-color: #444e5b;
    		color: #FFF!important;
			margin: 0 auto;
			text-align: center;
			padding: 12px 0 ;
			text-transform: uppercase;
			width: 240px;
			letter-spacing: 1px;
			cursor: pointer;
			display: block;
			text-decoration: none;
			margin-bottom: 28px;
			position: relative;
			letter-spacing: 0.02em;
			font-weight: 400;
			font-family: "butler-light", sans-serif;
		    line-height: 1.4;
		    letter-spacing: 0.06em;
		    font-size: 16px!important;
		    width: auto !important;
		    position: relative;
		    padding: 16px 28px 14px;

		span {
			transition: .25s all ease-in-out;
			position: relative;
			z-index: 2;
		}

		@media screen and (max-width: 767px) {
			margin-top: 20px;

			&:after {
				height: 100%;
			}
		}
	}

	button:hover {
    	background-color: transparent;
		color: #444e5b!important;
	}

	button:before {
		transition: .25s all ease-in-out;
		background-color: #444e5b;
		background-image: url('img/processing.gif');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 30px;
		content:'';
		position: absolute;
		z-index: 5;
		opacity: 0;
		top: -2px;
		left: -2px;
		height: calc(100% + 4px);
		width: calc(100% + 4px);
	}

	.button-container {
		margin: 0 auto 0 auto;

		.submit-btn {
			cursor: pointer;
			transition: .25s all ease-in-out;
			min-width: 262px;
			text-align: center;
			border: 1px solid #B9808A;
    		background-color: #B9808A;
    		color: #fff;
			margin: 0 auto;
			text-align: center;
			padding: 12px 0 ;
			text-transform: uppercase;
			font-size: 12px;
			line-height: 18px;
			width: 240px;
			letter-spacing: 1px;
			cursor: pointer;
			display: block;
			text-decoration: none;

			span {
				transition: .25s all ease-in-out;
				position: relative;
				z-index: 2;
			}

			@media screen and (max-width: 767px) {
				margin-top: 20px;

				&:after {
					height: 100%;
				}
			}
		}

			.submit-btn:before {
				transition: .25s all ease-in-out;
				background-color: #B9808A;
				background-image: url('img/processing.gif');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 30px;
				content:'';
				position: absolute;
				z-index: 5;
				opacity: 0;
				top: -2px;
				left: -2px;
				height: calc(100% + 4px);
				width: calc(100% + 4px);
			}

		.submit-btn.submitted {
			pointer-events: none;
		}

		.submit-btn.submitted:before {
			opacity: 1;
		}

			.submit-btn:hover {
    		background-color: transparent;
				color: #B9808A;
			}
	}

	.gform_ajax_spinner {
		display: none;
	}

	.gf_invisible, .gfield_visibility_hidden {
		position: absolute!important;
	}
}