/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 */

.eb-form-wrapper {
	position: relative;
	padding: 0px 15px 15px;
	box-sizing: border-box;

	* {
		box-sizing: border-box;
	}

	.eb-form {
		&.form-layout-inline {
			display: flex;

			>div {
				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: 50%;
			}

			.eb-field-wrapper {
				position: relative;

				.eb-form-validation {
					position: absolute;
					margin-top: 5px;
				}
			}

			.eb-form-submit {
				margin-top: 0;
			}
		}

		&.form-layout-inline~.eb_form_submit_response {
			margin-top: 40px;
		}

		&.form-style-modern {
			// label {
			// 	position: absolute;
			// 	top: 50%;
			// 	// left: 0;
			// 	padding: 0;
			// 	margin: 0;
			// 	pointer-events: none;
			// 	transform: translateY(-50%);
			// 	transition: 0.5s;
			// }
			// .eb-field-wrapper ~ label {
			// 	position: unset;
			// }

			input:not([type="radio"]):not([type="checkbox"]) {
				outline: none;

				&~label {
					position: absolute;
					top: 50%;
					// left: 0;
					padding: 0;
					margin: 0;
					pointer-events: none;
					transform: translateY(-50%);
					transition: ease-in-out 0.2s;
				}

				&:focus~label,
				&~label.active {
					top: 15px;
					// left: 0;
					font-size: 12px;
				}

				&::placeholder {
					color: transparent !important;
					opacity: 0 !important;
				}
			}

			textarea {
				outline: none;

				&~label {
					position: absolute;
					top: 50%;
					// left: 0;
					padding: 0;
					margin: 0;
					pointer-events: none;
					transform: translateY(-50%);
					transition: 0.5s;
				}

				&:focus~label,
				&~label.active {
					top: 15px !important;
					font-size: 12px;
				}

				&::placeholder {
					color: transparent !important;
					opacity: 0 !important;
				}
			}

			.eb-select-field-wrapper .eb-field-input-wrap div {
				select {
					outline: none;

					&::placeholder {
						color: transparent !important;
						opacity: 0 !important;
					}

				}

				&~label {
					position: absolute;
					top: 50%;
					// left: 0;
					padding: 0;
					margin: 0;
					pointer-events: none;
					transform: translateY(-50%);
					transition: 0.5s;

					&.active {
						top: 15px;
						// left: 0;
						font-size: 12px;
					}
				}

				&:focus~label,
				&~label.active {
					top: 15px;
					// left: 0;
				}
			}

			select {
				outline: none;

				&~label {
					position: absolute;
					top: 15px;
					// left: 0;
					padding: 0;
					margin: 0;
					pointer-events: none;
					transform: translateY(-50%);
					transition: 0.5s;
					font-size: 12px;
				}

				// &:focus ~ label,
				// & ~ label.active {
				// }

				&::placeholder {
					color: transparent !important;
					opacity: 0 !important;
				}
			}

			.eb-datetime-field-wrapper .eb-field-input-wrap {

				// .eb-field-input {
				// }
				label {
					position: absolute;
					top: 50%;
					// left: 0;
					padding: 0;
					margin: 0;
					pointer-events: none;
					transform: translateY(-50%);
					transition: ease-in-out 0.2s;

					&.active {
						top: 15px;
						// left: 0;
						font-size: 12px;
					}
				}
			}
		}
	}

	.eb-form-fields {
		display: flex;
		flex-direction: column;

		.alignfull {
			margin-left: auto;
			margin-right: auto;
			padding: 0;
			width: 100%;
		}

		.eb-form-field {
			display: flex;
			flex-direction: column;
			margin: 0;
		}
	}

	.eb-field-wrapper {
		.eb-field-input {
			font-family: inherit;

			&:hover,
			&:focus-visible {
				border-color: #000;
			}

			::placeholder {
				font-size: inherit;
				font-family: inherit;
				font-weight: inherit;
				line-height: inherit;
			}
		}

		label {
			line-height: 1.2em;
			display: block;
			margin-bottom: 5px;
			// width: 100%;
		}

		input:not([type="radio"]):not([type="checkbox"]) {
			line-height: 1.2em;
			min-height: 40px;
			height: auto;
			display: block;
			// width: 100%;
			// padding: 15px;
			max-width: 100%;
		}

		// Textarea
		textarea {
			line-height: 1.2rem;
			min-height: 40px;
			padding: 15px;
			border-radius: 4px;
			resize: vertical;
		}

		input:not([type="radio"]):not([type="checkbox"]),
		select,
		textarea {
			// background-color: transparent;
			// border-radius: 4px;
			// border: 1px solid #98a2b3;
			box-shadow: 0 0 transparent;
			// color: #495057;
			min-height: 40px;

			&:hover,
			&:focus-visible {
				// border-color: #9b8afb;
				outline: none;
			}
		}

		input[type="checkbox"],
		input[type="radio"] {
			box-sizing: border-box;
			padding: 0;
			border: 1px solid #8c8f94;
			background: transparent;
			color: #50575e;
			clear: none;
			cursor: pointer;
			display: inline-block;
			min-width: auto;
			height: 1rem;
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
			transition: 0.05s border-color ease-in-out;
			appearance: none;

			&:checked::before {
				display: inline-block;
				vertical-align: middle;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		}

		input[type="radio"] {
			border-radius: 50%;
			position: relative;

			&::before {
				content: "";
				border-radius: 50%;
				width: 0.5rem;
				height: 0.5rem;
				background-color: #3582c4;

				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) scale(0);
				transition: 0.5ms all ease-in-out;
			}

			&:checked::before {
				transform: translate(-50%, -50%) scale(1);
				margin: 0;
			}
		}

		.eb-radio-inputarea {
			margin-bottom: 5px;

			label {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
				width: auto;
			}
		}

		// checkbox
		input[type="checkbox"] {
			border-radius: 2px;
			position: relative;
			overflow: hidden;

			&::before {
				position: absolute;
				display: block;
				color: #fff;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: red;
				font-size: 12px;
				margin: 0;
				height: auto;
				width: auto;
			}

			&:checked::before {
				content: "\f00c";
				font-weight: 700;
				font-family: "Font Awesome 5 Free";
			}
		}

		.eb-checkbox-inputarea {
			margin-bottom: 5px;

			label {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
				width: auto;
				margin-bottom: 0;
			}
		}

		// select
		select {
			line-height: 1.5em;
			width: 100%;
			min-height: 40px;
			max-width: 100%;
			display: block;
			background-color: transparent;
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cpath fill='%23000' d='M293.751,455.868c-20.181,20.179-53.165,19.913-73.673-0.595l0,0c-20.508-20.508-20.773-53.493-0.594-73.672 l189.999-190c20.178-20.178,53.164-19.913,73.672,0.595l0,0c20.508,20.509,20.772,53.492,0.595,73.671L293.751,455.868z'/%3E%3Cpath fill='%23000' d='M220.249,455.868c20.18,20.179,53.164,19.913,73.672-0.595l0,0c20.509-20.508,20.774-53.493,0.596-73.672 l-190-190c-20.178-20.178-53.164-19.913-73.671,0.595l0,0c-20.508,20.509-20.772,53.492-0.595,73.671L220.249,455.868z'/%3E%3C/svg%3E");
			background-position: right 13px center;
			background-repeat: no-repeat;
			background-size: auto 13px;
			color: #404246;
			padding: 13px 30px 13px 15px;
			outline: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			appearance: none;

			&::-ms-expand {
				display: none;
			}
		}

		@-moz-document url-prefix() {
			select {
				color: rgba(0, 0, 0, 0);
				text-shadow: 0 0 0 #ffffff;
			}
		}

		&.eb-validation-error {
			.eb-field-input {
				border-color: #dc072f;
			}

			.eb-form-validation {
				display: block;
				color: #ca3521;
				font-style: normal;
				font-weight: 400;
				line-height: 20px;
				margin-top: 10px;
				padding: 0;
			}
		}
	}

	.eb-form-submit {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;

		.eb-form-submit-button {
			font-size: 1em;
			padding: 15px 30px;
			transition: ease-in-out 0.3s;
			cursor: pointer;

			// for Shapely theme
			line-height: normal;

			.eb-form-submit-loader {
				display: none;
				height: 1.4em;
				width: auto;
				margin-left: 15px;
			}

			&.loading {
				.eb-form-submit-loader {
					display: inline-block;
				}
			}

			// &.success:after {
			// 	content: "\f15e";
			// 	font-family: "dashicons";
			// 	color: greenyellow;
			// }
		}

		.eb-button-icon {
			display: inline;
		}
	}

	.block-list-appender {
		width: 100%;

		button {
			box-shadow: none;
			border: 1px solid rgb(195 195 195);
			background: #cccccc47;
			border-radius: 5px;
			/* color: white; */

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

		}
	}
}

.eb_form_submit_response {
	font-size: 1em;
	padding: 8px 15px;
	margin-top: 25px;
	border-radius: 4px;
}

// editor style
.wp-admin .eb-form-wrapper .eb-multistep-form .eb-form-fields>.block-editor-inner-blocks>.block-editor-block-list__layout {
	gap: 0px !important;
}

.eb-multistep-form {
	.step-bar-wrapper {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 20px;

		.step-item {
			padding: 10px;
			display: flex;
			justify-content: flex-start;
			gap: 10px;
			align-items: center;
			position: relative;
			width: 100%;
			cursor: pointer;
			transition: all 0.3s ease;
			border-bottom: 2px solid #eee;

			&:hover {
				background-color: rgba(0, 0, 0, 0.05);
			}

			&:focus {
				outline: 2px solid #007cba;
				outline-offset: 2px;
			}

			&.active {
				color: #673AB7;
				border-bottom-color: #673AB7;
				font-weight: bold;
			}

			.step-item-icon {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		// Different styles for step navigation
		&.step-style-numbered {
			.step-item {
				counter-increment: step-counter;

				&::before {
					content: counter(step-counter);
					width: 24px;
					height: 24px;
					border-radius: 50%;
					background: #eee;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 8px;
				}

				&.active::before {
					background: #673AB7;
					color: white;
				}
			}
		}

		&.step-style-dots {
			.step-item {
				&::before {
					content: '';
					width: 12px;
					height: 12px;
					border-radius: 50%;
					background: #eee;
					display: block;
					margin-right: 8px;
				}

				&.active::before {
					background: #673AB7;
				}
			}
		}
	}

	.block-editor-block-list__layout {
		// .wp-block-essential-blocks-pro-form-multistep-wrapper:not(:first-child) {
		// 	display: none;
		// }

		.wp-block-essential-blocks-pro-form-multistep-wrapper {
			border: 2px dashed #eee;
		}
	}


	// step Navigation styles
	.step-navigation-wrapper {
		margin: 0 10px 30px;

		.step-content {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 7px;
		}
	}

	// Progress Bar style
	.step-navigation-progress-bar {
		.step-progress-bar {
			position: relative;
			width: 100%;
			height: 8px;
			background-color: #EFF0F6;
			border-radius: 4px;
			overflow: visible;
			margin-bottom: 15px;

			.step-progress-bar-inner {
				height: 100%;
				background-color: #3C3C3C;
				transition: width 0.3s ease;
				border-radius: 4px;
			}

			.step-progress-markers {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.step-marker {
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 6px;
			height: 6px;
			background-color: #CCCCCC;
			// border: 2px solid #ccc;
			border-radius: 50%;
			z-index: 2;

			&.active {
				background-color: #3C3C3C !important;
			}

			&:first-child {
				left: 0 !important;
				transform: translate(0%, -50%);
			}

			&:last-child {
				left: 100% !important;
				transform: translate(-100%, -50%);
			}
		}

		.step-progress-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-top: 10px;
		}
	}

	// Breadcrumb style
	.step-navigation-breadcrumb {

		.step-breadcrumb {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 98%;
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.step-nav-item {
			position: relative;
			background-color: #f5f5f5;
			color: #333;
			padding: 10px 15px;
			font-weight: 500;
			clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
			margin-right: -20px;
			flex: 1;
			text-align: center;
			min-width: 120px;

			&:first-child {
				clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 0% 0%);
			}

			// &:last-child {
			// 	clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 15% 50%, 0% 0%);
			// }

			&.active {
				background-color: #333;
				color: white;
				z-index: 2;
			}
		}
	}

	// Step Titles style
	.step-navigation-step-titles {

		.step-step-titles {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.step-nav-item {
			padding: 8px 16px;
			color: #777;
			flex: 1;

			&.active {
				color: #673AB7;
				// font-weight: bold;
				border-bottom: 2px solid #673AB7;
			}

			.step-count {
				background: #EBEEF2;
				color: #333;
				border-radius: 50%;
				width: 32px;
				height: 32px;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				margin-right: 15px;
			}
		}
	}

	// Dots style
	.step-navigation-dots {
		padding: 0 10px;

		.step-dots {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: space-between;
			position: relative;
		}

		.step-nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			text-align: center;
			position: relative;
			flex: 1;

			&:not(:last-child)::after {
				content: '';
				position: absolute;
				top: 10px;
				right: -50%;
				width: 100%;
				height: 2px;
				background-color: #ddd;
				z-index: 1;
			}

			&:not(:first-child)::before {
				content: '';
				position: absolute;
				top: 10px;
				left: -50%;
				width: 100%;
				height: 2px;
				background-color: #ddd;
				z-index: 0;
			}

			&.active:not(:first-child)::before {
				background-color: #333;
			}

			.step-dot {
				width: 24px;
				height: 24px;
				border-radius: 50%;
				background-color: #E7E7E7;
				border: 2px solid #fff;
				margin-bottom: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					transition: transform 0.3s ease;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					background-color: #A2A2A2;
					z-index: 3;
				}
			}

			.step-title {
				font-size: 14px;
				color: #777;
				margin-top: 5px;
				font-weight: normal;
			}

			.step-subtitle {
				font-size: 16px;
				color: #333;
				font-weight: 500;
				margin-top: 2px;
			}

			&.active {
				.step-dot {
					background-color: #333;
					border-color: #fff;

					&::after {
						content: none;
					}

					&::before {
						content: "\f00c";
						font-weight: 700;
						font-family: "Font Awesome 5 Free";
						color: #fff;
						font-size: 12px;
					}
				}

				.step-title {
					color: #333;
					font-weight: 500;
				}
			}

			&.completed {
				.step-dot {
					background-color: #333;

					&::after {
						content: '✓';
						color: #fff;
						font-size: 12px;
					}
				}
			}
		}
	}


	// step title count
	.step-navigation-step-title-2 {
		.step-step-title-2 {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}

		.step-nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			flex: 1;
			gap: 10px;

			.label {
				font-size: 14px;
				color: #7a7a7a;
				margin-bottom: 8px;
				text-align: center;
				font-weight: 600;
			}

			.step-count {
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background-color: #fff;
				border: 2px solid #c3c7cf;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				// font-weight: bold;
				color: #7a7a7a;
				position: relative;
				z-index: 1;
			}

			.step-line {
				position: absolute;
				top: auto;
				bottom: 14px;
				left: 50%;
				width: 100%;
				height: 2px;
				background-color: #c3c7cf;
				z-index: 0;
			}

			&.completed {
				.circle {
					background-color: #333;
					color: #fff;
					border-color: #333;
				}

				.line {
					background-color: #333;
				}

				.label {
					color: #000;
				}
			}

			&.active {
				.step-count {
					border: 2px solid #333;
					background-color: #fff;
					color: #333;

					&::before {
						transform: translate(-50%, -50%) scale(1);
						border-color: #333;
					}
				}

				.label {
					color: #333;
				}

				.step-line {
					background-color: #c3c7cf;
				}
			}

			&:last-child .step-line {
				display: none;
			}
		}
	}

	// step title 3
	.step-navigation-step-title-3 {
		.step-step-title-3 {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}

		.step-nav-item {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			// padding: 0 12px;
			flex: 1;
			border-right: 1px solid #eee;

			&:last-child {
				border-right: none;
			}

			.step-icon {
				width: 48px;
				height: 48px;
				background-color: #f7f7f7;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 24px;
					height: 24px;
					opacity: 0.3;
				}
			}

			.text {
				display: none;
				margin-left: 10px;
				// display: flex;
				flex-direction: column;

				.step-label {
					font-size: 12px;
					color: #9ca3af;
				}

				.step-subtitle {
					font-weight: 600;
					font-size: 14px;
					color: #111827;
				}
			}

			&.active {
				flex-direction: row;

				.step-icon {
					background-color: #e5e7eb;

					img {
						opacity: 1;
					}
				}

				.text {
					display: flex;
				}
			}

			.divider {
				height: 48px;
				width: 1px;
				background-color: #eee;
			}

		}
	}


	// Step Buttons style

	.eb-form-submit {
		// button:not(#ebFormNextBtn) {
		// 	display: none;
		// }
	}

	.eb-form-submit {
		display: flex;
		justify-content: flex-end !important;
		align-items: center;

		#ebFormPrevBtn {
			margin-right: auto;
		}

		#ebFormNextBtn {
			.eb-form-next-loader {
				display: none;
				height: 1em;
				width: auto;
				margin-left: 10px;
			}

			&.loading {
				.eb-form-next-loader {
					display: inline-block;
				}
			}
		}

		#ebFormNextBtn,
		.eb-form-submit-button {
			margin-left: 10px;
		}

		button {
			// display: none;

			font-size: 1em;
			padding: 15px 30px;
			transition: ease-in-out 0.3s;
			cursor: pointer;

			// for Shapely theme
			line-height: normal;

			box-shadow: none;
			border: 1px solid rgb(195 195 195);
			background: #cccccc47;
			border-radius: 5px;
			width: auto !important;

			&:hover {
				color: #000;
			}
		}
	}
}

.eb-form-add-step-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
	padding: 25px !important;
	font-size: 16px;
	background-color: #f7f7f7;
	border: 1px dashed #ccc;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover {
		background-color: #e9e9e9;
		border-color: #999;
	}

	.eb-form-add-step-button-label {
		margin-left: 8px;
	}
}

// Add this CSS for the loading indicator
.eb-form-template-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	width: 100%;
	background-color: #f8f9fa;
	border-radius: 4px;

	img {
		width: 45px;
		margin: 0 0 10px;
	}

	p {
		margin: 0;
		color: #757575;
		font-size: 16px;
		font-weight: 500;
	}
}