/* ===================================================
   FORM WRAPPER
=================================================== */

.ulg-audit-form{
	width:100%;
	position:relative;
}

.ulg-audit-form-wrap{
	position:relative;
	overflow:hidden;
	isolation:isolate;
}

/* ===================================================
   FORM STEP
=================================================== */

.ulg-form-step{
	display:none;

	animation:
	ulgFormFade
	.35s ease;

	will-change:
	opacity,
	transform;
}

.ulg-form-step.active{
	display:block;
}

@keyframes ulgFormFade{

	from{
		opacity:0;

		transform:
		translate3d(
			0,
			12px,
			0
		);
	}

	to{
		opacity:1;

		transform:
		translate3d(
			0,
			0,
			0
		);
	}
}

/* ===================================================
   STEP TITLE
=================================================== */

.ulg-form-step h3{
	font-size:30px;
	margin-bottom:12px;
	line-height:1.2;
}

.ulg-form-step p{
	margin-bottom:26px;

	color:
	rgba(
		255,
		255,
		255,
		.72
	);

	line-height:1.8;
}

/* ===================================================
   INPUTS
=================================================== */

.ulg-audit-form input,
.ulg-audit-form textarea,
.ulg-audit-form select{
	width:100%;
	min-height:60px;

	border:
	1px solid
	rgba(
		255,
		255,
		255,
		.10
	);

	background:
	rgba(
		255,
		255,
		255,
		.05
	);

	backdrop-filter:
	blur(16px);

	-webkit-backdrop-filter:
	blur(16px);

	border-radius:
	20px;

	color:#fff;

	padding:
	18px 22px;

	font-size:16px;
	line-height:1.5;

	outline:none;

	transition:
	border-color .28s ease,
	box-shadow .28s ease,
	background-color .28s ease;

	margin-bottom:18px;

	appearance:none;
}

.ulg-audit-form textarea{
	min-height:140px;
	resize:vertical;
}

.ulg-audit-form input::placeholder,
.ulg-audit-form textarea::placeholder{
	color:
	rgba(
		255,
		255,
		255,
		.45
	);
}

/* ===================================================
   FOCUS
=================================================== */

.ulg-audit-form input:focus,
.ulg-audit-form textarea:focus,
.ulg-audit-form select:focus{
	border-color:
	var(--ulg-primary);

	box-shadow:
	0 0 0 4px
	rgba(
		0,
		209,
		255,
		.08
	);

	background:
	rgba(
		255,
		255,
		255,
		.06
	);
}

/* ===================================================
   SELECT
=================================================== */

.ulg-audit-form select{
	cursor:pointer;

	background-image:
	linear-gradient(
		45deg,
		transparent 50%,
		#fff 50%
	),

	linear-gradient(
		135deg,
		#fff 50%,
		transparent 50%
	);

	background-position:
	calc(100% - 24px)
	calc(50% - 4px),

	calc(100% - 18px)
	calc(50% - 4px);

	background-size:
	6px 6px,
	6px 6px;

	background-repeat:
	no-repeat;

	padding-right:
	56px;
}

.ulg-audit-form select option{
	color:#111827;
	background:#fff;
}

/* ===================================================
   VALIDATION
=================================================== */

.ulg-input-error{
	border-color:
	#ff5f5f !important;

	box-shadow:
	0 0 0 4px
	rgba(
		255,
		95,
		95,
		.08
	) !important;
}

.ulg-error-text{
	font-size:14px;
	line-height:1.5;

	color:#ff7f7f;

	margin-top:-8px;
	margin-bottom:16px;
}

/* ===================================================
   BUTTON GROUP
=================================================== */

.ulg-form-buttons{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-top:14px;
	align-items:center;
}

.ulg-next-step,
.ulg-prev-step,
.ulg-submit-btn{
	min-width:180px;
	min-height:58px;
}

/* ===================================================
   BUTTON STATES
=================================================== */

.ulg-submit-btn:disabled,
.ulg-next-step:disabled,
.ulg-prev-step:disabled{
	opacity:.6;
	cursor:not-allowed;
	pointer-events:none;
}

/* ===================================================
   LOADING STATE
=================================================== */

.ulg-btn-loading{
	position:relative;
	pointer-events:none;
	opacity:.92;
}

.ulg-btn-loading::after{
	content:"";

	position:absolute;
	right:20px;
	top:50%;

	width:18px;
	height:18px;

	margin-top:-9px;

	border-radius:50%;

	border:
	2px solid
	rgba(
		255,
		255,
		255,
		.25
	);

	border-top:
	2px solid
	#fff;

	animation:
	ulgSpin .7s linear infinite;
}

@keyframes ulgSpin{

	to{
		transform:
		rotate(360deg);
	}
}

/* ===================================================
   SUCCESS STATE
=================================================== */

.ulg-success-box{
	text-align:center;
	padding:20px;
}

.ulg-success-icon{
	width:90px;
	height:90px;

	margin:
	0 auto 24px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:50%;

	font-size:42px;

	background:
	linear-gradient(
		135deg,
		var(--ulg-primary),
		var(--ulg-secondary)
	);

	box-shadow:
	0 20px 50px
	rgba(
		0,
		209,
		255,
		.25
	);
}

.ulg-success-box h3{
	font-size:34px;
	margin-bottom:14px;
	line-height:1.2;
}

.ulg-success-box p{
	max-width:420px;
	margin:0 auto;
}

/* ===================================================
   CHECKBOX / RADIO
=================================================== */

.ulg-check-group{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-bottom:20px;
}

.ulg-check-item{
	display:flex;
	align-items:center;
	gap:10px;

	padding:
	14px 18px;

	border-radius:
	18px;

	background:
	rgba(
		255,
		255,
		255,
		.05
	);

	border:
	1px solid
	rgba(
		255,
		255,
		255,
		.08
	);

	cursor:pointer;

	transition:
	border-color .25s ease,
	background-color .25s ease,
	transform .25s ease;
}

.ulg-check-item:hover{
	transform:
	translateY(-1px);

	border-color:
	rgba(
		255,
		255,
		255,
		.14
	);
}

.ulg-check-item input{
	width:auto;
	min-height:auto;
	margin:0;
	accent-color:
	var(--ulg-primary);
}

/* ===================================================
   WPFORMS / ELEMENTOR SUPPORT
=================================================== */

.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select,
.elementor-form input,
.elementor-form textarea,
.elementor-form select{
	max-width:100%;
}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:768px){

	.ulg-form-step h3{
		font-size:24px;
	}

	.ulg-audit-form input,
	.ulg-audit-form textarea,
	.ulg-audit-form select{
		font-size:15px;

		padding:
		16px 18px;
	}

	.ulg-form-buttons{
		flex-direction:column;
		align-items:stretch;
	}

	.ulg-next-step,
	.ulg-prev-step,
	.ulg-submit-btn{
		width:100%;
		min-width:100%;
	}

	.ulg-check-group{
		flex-direction:column;
	}

	.ulg-check-item{
		width:100%;
	}

	.ulg-success-box h3{
		font-size:28px;
	}
}