/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#custom-form,
#custom-form *,
#custom-form *::after,
#custom-form *::before {
	box-sizing: border-box;
}
#custom-form.custom-form.instant form {
	border: 1px solid #d7d7d7;
	box-shadow: 10px 10px 5px #ffb4c078;
}
#custom-form.custom-form.instant {
	--form-bg-color-1: #ffffff;
	--form-bg-color-2: #ffffff;
	--form-padding-top-bottom: 20px;
	--form-border-radius: 10px;
}
#custom-form.custom-form.instant.full-quotation{
	--form-title-font-size:40px;
	--form-padding-top-bottom:60px;
}
#custom-form.side-bar-form{
	max-width: 350px;
	margin: auto;
}
#custom-form.custom-form {
	font-size: 16px;

	/* Variables for Customizing the form */

	/* !!!!!!!!!!!! Change the variable values as per Your Needs !!!!!!!!!!!!!!!!!!*/

	/* form Styling */
	--form-bg-color-1: transparent;
	--form-bg-color-2: transparent;
	--form-gradient-angle: 0deg;
	--form-padding-left-right: 20px;
	--form-padding-top-bottom: 40px;
	--form-margin-top: 20px;
	--form-title-font-size: 20px;
	--form-border-radius: 15px;

	/* Input Textarea Select Styling */
	--input-font-size: 15px;
	--input-font-family: sans-serif;
	--input-bg-color: white;
	--input-border-color: #e5e5e5;
	--input-border-width: 2px;
	--input-text-color: #000;
	--input-border-radius: 1.5em;
	--input-padding-left-right: 1em;
	--input-padding-top-bottom: 0.5em;

	/* Buttons stling */
	--button-bg-color: #d21f3c;
	--button-text-color: #ffffff;
	--button-border-color: transparent;

	/* Label Styling */
	--label-transition-speed: 150ms;

	/* additional Colors */
	--error-color: #dc3545;
	--success-color: #007bff;

	/* Variables for Customizing the form ENDs here*/

	/* !!!!!!!!!!!! Only Make changes below if you know what you are doing !!!!!!!!!!!!!!!!!!*/
}
#custom-form form {
	background: linear-gradient(
		var(--form-gradient-angle),
		var(--form-bg-color-1),
		var(--form-bg-color-2)
	);
	margin: var(--form-margin-top) 0px;
	padding: var(--form-padding-top-bottom) var(--form-padding-left-right);
	border-radius: var(--form-border-radius);
}
#custom-form .custom-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
#custom-form .custom-row > * {
	flex-grow: 1;
	width: 100%;
}
#custom-form .custom-form-input-holder {
	margin-top: calc(var(--input-font-size) * 2);
	position: relative;
}
#custom-form .custom-form-input-holder .error-message {
	color: var(--error-color);
	font-weight: 600;
	font-family: var(--input-font-family);
	display: none;
	font-size: 80%;
}
#custom-form .custom-form-input-holder:not(.animate-label) label {
	font-weight: bold;
	font-family: var(--input-font-family);
	font-size: 105%;
}
#custom-form .custom-form-input-holder.animate-label label {
	position: absolute;
	pointer-events: none;
	font-size: var(--input-font-size);
	line-height: 1em;
	color: var(--input-text-color);
	white-space: nowrap;
	font-family: var(--input-font-family);
	top: calc(var(--input-padding-top-bottom) + var(--input-padding-top-bottom) );
	left: var(--input-padding-left-right);
	opacity: 0.6;
	transition: opacity var(--label-transition-speed),
		font-size var(--label-transition-speed), top var(--label-transition-speed),
		left var(--label-transition-speed), transform var(--label-transition-speed);
}
#custom-form .custom-form-input-holder.animate-label label > span {
	font-size: 75%;
}
#custom-form
	.custom-form-input-holder.animate-label
	:is(input:not([type="submit"]), textarea):focus
	~ label,
#custom-form
	.custom-form-input-holder.animate-label
	:is(input:not([type="submit"]), textarea):not(:placeholder-shown)
	~ label {
	top: 0%;
	left: 0%;
	transform: translateY(-100%);
	opacity: 1;
	font-size: 105%;
}
#custom-form
	.custom-form-input-holder
	:is(input:not([type="submit"]), textarea, select) {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	background-color: var(--input-bg-color);
	border: var(--input-border-width) solid var(--input-border-color);
	color: var(--input-text-color);
	border-radius: var(--input-border-radius);
	font-size: var(--input-font-size);
	padding: var(--input-padding-top-bottom) var(--input-padding-left-right);
}
#custom-form .custom-form-input-holder :is(input:not([type="submit"])) {
	height: calc(
		1em + var(--input-padding-top-bottom) + var(--input-padding-top-bottom) + var(--input-padding-top-bottom) + var(--input-padding-top-bottom) / 2
	);
}
#custom-form .custom-form-input-holder textarea {
	resize: none;
}
#custom-form
	.custom-form-input-holder
	:is(input[type="file"])::file-selector-button {
	display: none;
}
#custom-form .custom-form-input-holder :is(input[type="file"], button) {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
	border: 2px solid var(--button-border-color);
	padding: var(--input-padding-top-bottom) var(--input-padding-left-right);
	border-radius: var(--input-border-radius);
	cursor: pointer;
	margin: auto;
	display: block;
}
#custom-form .custom-form-input-holder :is(input[type="file"], button):hover {
	background-color: var(--button-text-color);
	color: var(--button-bg-color);
	border-color: var(--button-bg-color);
}
#custom-form .custom-form-input-holder :is(input, textarea, select):focus {
	outline: none;
	box-shadow: 0px 0px 15px #0003;
}
#custom-form
	.custom-form-input-holder.animate-label
	:is(input, textarea, select)::placeholder {
	opacity: 0;
	visibility: hidden;
}

#custom-form .href-button {
	padding: 0.8em 1em;
	font-size: var(--input-font-size);
	width: 100%;
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
	border-radius: 1.5em;
	display: block;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--button-border-color);
	font-family: var(--input-font-family);
}
#custom-form .href-button:hover {
	background-color: var(--button-text-color);
	color: var(--button-bg-color);
	border-color: var(--button-bg-color);
}
#custom-form .custom-form-header .custom-form-title {
	text-align: center;
	font-size: var(--form-title-font-size);
	font-family: var(--input-font-family);
	text-transform: uppercase;
	margin: 0px;
	color: #d21f3c;
	font-weight: 500;
}
#custom-form .form-message {
	position: absolute;
	padding: 5px 20px;
	color: #fff;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	display: none;
}
#custom-form .form-message#cq_error_message {
	background-color: var(--error-color);
}
#custom-form .form-message#cq_success_message {
	background-color: var(--success-color);
}

#custom-form .custom-form-input-holder button .button-loader {
	display: none;
}
#custom-form .custom-form-input-holder button .button-loader.cq_loader {
	display: inline;
}
#custom-form
	.custom-form-input-holder
	button
	.button-loader.cq_loader
	span:nth-child(1) {
	animation: play-loader-1 600ms linear infinite;
}
#custom-form
	.custom-form-input-holder
	button
	.button-loader.cq_loader
	span:nth-child(2) {
	animation: play-loader-2 600ms linear infinite;
}
#custom-form
	.custom-form-input-holder
	button
	.button-loader.cq_loader
	span:nth-child(3) {
	animation: play-loader-3 600ms linear infinite;
}
#custom-form .custom-form-input-holder select {
	height: auto;
}

@keyframes play-loader-1 {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes play-loader-2 {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes play-loader-3 {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@media (max-width: 768px) {
	#custom-form .custom-row {
		flex-wrap: wrap;
	}
}