.sp-eap-setup-wizard-wrapper {
	position: relative;
	overflow-x: hidden;
	min-height: calc(100vh - 32px);
	background: linear-gradient(110deg, #F5FBFF 0%, #FFFEF9 100%);
	margin-bottom: -97px;
	padding: 30px 0;

	.setup-wizard-bg {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.spl-weather-select-field {
		.components-input-base {
			height: 48px;
		}
	}

	.sp-eab-visibility-setting-card {
		box-shadow: none;
		border: 1px solid #ddd;
	}
}

.sp-eap-setup-wizard-content {
	// margin-top: 32px;
	width: 1140px;
	z-index: 1;
	gap: 32px;

	.sp-eap-setup-wizard-nav-btn {
		padding: 8px 16px 8px 20px;
		border-radius: 4px;
		font-size: 16px;
		font-weight: 600;
		border: none;
		outline: none;
		line-height: 160%;
		cursor: pointer;
		height: 48px;
		display: inline-flex;
		align-items: center;
		gap: 3px;
		transition: all 0.3s ease;

		&.prev-btn {
			background: transparent;
			color: #4E4F52;
			border: 1px solid #CACBCF;

			&:hover {
				border-color: #adaeb1;
			}
		}

		&.next-btn {
			// background: var(--eab-wp-primary-color);
			background: var(--eab-primary-color);
			color: #ffffff;
			border: 1px solid var(--eab-primary-color);
			margin-left: 12px;

			&:hover {
				background: var(--eab-primary-color-hover);
			}

			path {
				fill: currentColor;
			}
		}

		&.explore-button:hover {
			background-color: var(--eab-primary-color);
			border-color: var(--eab-primary-color);
		}

		&.explore-button:hover svg path {
			fill: currentColor;
		}

		svg {
			height: 14px;
			width: 17px;
		}

		&:not(.eab-pro-btn, .next-btn) path {
			fill: #4E4F52;
		}

		&.eab-pro-btn {
			background: #159E2E;
			color: #ffffff;
			border: 1px solid #159E2E;
			position: relative;

			svg {
				height: 24px;
				width: 24px;
				margin-right: 4px;
			}
		}
	}

	.eap-setup-wizard-finish {
		width: 232px;
	}

	.components-select-control__input {
		font-size: 14px !important;
		background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55% !important;
	}

	.components-input-control__suffix {
		display: none;
	}
}

.sp-eap-setup-steps {
	display: flex;
	gap: 28px;
}

.sp-eap-setup-step {
	.sp-eap-setup-step-number {
		color: #2C2D2F;
		font-size: 16px;
		font-weight: 600;
		border-radius: 100%;
		border: 1px solid #F0F0F0;
		background: #F0F0F0;
		width: 36px;
		height: 36px;
		margin-right: 12px;
		transition: all 0.3s ease-in-out;

		&.active {
			background: #ffffff;
			color: #FF5B2E;
			border: 1px solid #FF5B2E;
		}

		&.previous {
			color: #ffffff;
			border: 1px solid #FF5B2E;
			background: #FF5B2E;
		}
	}

	&-title {
		color: #000;
		font-size: 20px;
		font-weight: 600;
	}

	>svg {
		margin-left: 28px;
	}
}

.sp-eap-setup-step-page {
	border-radius: 12px;
	background: #FFF;
	box-shadow: 0 16px 32px -4px rgba(12, 12, 13, 0.05), 0 4px 4px -4px rgba(12, 12, 13, 0.02);
	width: 100%;
	padding: 48px;

	&:not(:has(.sp-eap-setup-finish-page)) {
		height: 550px;
	}

	&.is-exiting {
		animation: sp-eap-setup-wizard-fade-out 0.2s forwards;
	}

	&.is-entering {
		animation: sp-eap-setup-wizard-fade-in 0.2s forwards;
	}

	>div {
		height: 100%;
		width: 100%;
	}

	.sp-eap-setup-page-title,
	.sp-eap-setup-page-desc {
		margin: 0;
	}

	.sp-eap-setup-page-title {
		color: #2C2D2F;
		font-size: 24px;
		font-weight: 600;
		line-height: 1.3;

		span {
			background: linear-gradient(90deg, #FF4751 0%, #FF910A 100%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		&.sp-welcome-title {
			font-size: 28px;
		}
	}

	.sp-eap-setup-page-desc {
		color: #4E4F52;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.6;
	}

	.sp-eap-settings-page-container {
		all: unset;
		position: relative;
	}

	.sp-eap-settings-license-key {
		padding: 186px 0;
	}

	// visibility page.
	.sp-eab-visibility-page {
		overflow-y: auto;
		max-height: 344px;
		height: 100%;
		padding-right: 48px;
		margin-right: -48px;

		&::-webkit-scrollbar {
			width: 4px;
			height: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: #b3b3b3;
			border-radius: 4px;
			visibility: hidden;
		}
	}

	&:hover {
		.sp-eab-visibility-page::-webkit-scrollbar-thumb {
			visibility: visible;
		}
	}
}

@keyframes sp-eap-setup-wizard-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes sp-eap-setup-wizard-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.sp-eap-setup-wizard-btn-wrapper {
	width: 100%;
	justify-content: flex-end;
}

/*
* Welcome page css.
*/
.sp-eap-setup-welcome-page {
	gap: 24px;

	.sp-eap-setup-welcome-page-left {
		flex: 1;
		gap: 20px;
	}

	.sp-eap-setup-welcome-page-right {
		width: 510px;
		height: 410px;
		position: relative;
		overflow: hidden;
		border-radius: 8px;
		background-size: cover;

		#sp-eap-setup-video {
			width: 100%;
			height: auto;
			display: block;
		}
	}

	.sp-eap-setup-feature-list {
		position: relative;
	}

	.sp-eap-feature-list-title {
		color: #2C2D2F;
		font-weight: 500;
		font-size: 14px;
		line-height: 1.6;

		.sp-eap-badge-hot {
			color: #FF33AC;
			font-size: 8px;
			font-style: normal;
			font-weight: 500;
			padding: 2px 6px;
			border-radius: 20px;
			border: 1px solid #FF33AC;
			margin-left: 6px;
		}

		.sp-eap-badge-upcoming {
			color: #A02DE3;
			font-size: 8px;
			font-style: normal;
			font-weight: 500;
			padding: 2px 6px;
			border-radius: 20px;
			border: 1px solid #A02DE3;
			margin-left: 6px;
		}
	}

	.sp-eap-setup-feature-check-icon svg path {
		fill: Green;
	}

	.sp-eap-setup-welcome-page-greeting {
		color: #2C2D2F;
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 1.3;
		margin-bottom: -15px;
		text-transform: capitalize;
	}
}

.sp-eap-setup-video-overlay {
	background: #00000026;
	visibility: visible;
	position: absolute;
	height: 100%;
	width: 100%;

	#sp-eap-play-btn {
		width: 60px;
		height: 60px;
		border-radius: 60px;
		background: #FFFFFF;
		border: none;

		img {
			z-index: 11;
		}
	}
}

.sp-eap-play-btn-sonar {
	position: relative;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		background-color: #ffffff3b;
		animation: sp-eap-sonar-wave 1.5s infinite linear;
	}

	&::after {
		animation-delay: 0.5s;
	}
}

@keyframes sp-eap-sonar-wave {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}

/*
* Block visibility setup page css.
*/
.sp-eap-setup-blocks-page-header {
	margin-bottom: 36px;

	>div {
		width: 50%;
	}

	.header-left {
		.sp-eap-setup-page-desc {
			margin-top: 8px;
		}
	}

	.header-right {
		.sp-eap-setup-page-desc {
			font-size: 16px;
			margin-bottom: 8px;
		}
	}

	.required-star {
		color: #EB48A8
	}

	.spl-weather-select-field {
		margin-top: 8px;
	}

	.components-input-control__backdrop {
		border: 1px solid #CACBCF !important;
		border-radius: 4px !important;
	}
}

/*
* Finish page css.
*/
.sp-eap-setup-finish-page {
	gap: 24px;

	.spl-weather-checkbox-component-wrapper {
		flex-direction: row-reverse;
		margin-top: 4px;

		.components-checkbox-control__input {
			&-container {
				margin-right: 8px;
			}

			&:checked {
				background-color: #838487;
				border: none;
			}

			&:focus {
				box-shadow: none;
			}
		}
	}

	.sp-eap-modal-btn {
		cursor: pointer;
		text-decoration: underline;
		font-weight: 600;
	}
}

.sp-eap-setup-finish-page-banner {
	width: 100%;
	height: 280px;
	background-color: #EDFAEF;
	border: 1px solid #ACDEB5;
	border-radius: 8px;
	position: relative;
	overflow: hidden;

	.sp-eap-setup-finish-page-banner-left {
		margin: 48px;
		width: 45%;
		gap: 16px;
		z-index: 9;
	}

	img {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.sp-eap-setup-wizard-nav-btn {
		max-width: 220px;

		&:hover {
			color: #fff;
			background-color: #008c23;
			border-color: #008c23;
			transition: all 0.4s ease-in-out;
		}
	}

}

.sp-eap-setup-page-modal {
	.components-modal__content {
		margin: 0;
		padding: 32px;
		width: 558px;

	}

	.components-modal__header {
		height: auto;
		padding: 0;
		position: static;

		.components-modal__header-heading {
			color: #2F2F2F;
			font-size: 18px;
			font-weight: 600;
			line-height: 130%;
		}

		svg {
			width: 16px;
			height: 16px;
		}

		.components-button {
			justify-content: end;
			height: 16px;
			width: 16px;

			&:focus {
				box-shadow: none;
			}
		}
	}

	hr {
		color: #ECEDF0;
		margin: 16px 0;
	}

	.modal-description {
		color: #4E4F52;
		font-size: 14px;
		font-weight: 400;
		line-height: 160%;
	}

	li {
		list-style: disc;
		margin-left: 18px;
	}

	a {
		display: inline-flex;
		align-items: center;
		text-decoration: underline dotted;
		cursor: pointer;

		svg {
			transform: scale(0.7);
			fill: #4E4F52;
		}
	}
}