/**
 * evf-form-preview.scss
 * General User Registration form preview styles.
 */

/**
 * Imports
 */
@import "variables/variables";

.evf-multi-device-form-preview {
	#nav-menu-header {
		padding: 12px;
		display: flex;
		align-items: center;
		position: relative;
		border-color: #dee0e9;
		background-color: $white;
		z-index: 9;

		.evf-form-title {
			font-weight: 600;
			font-size: 16px;
			line-height: 150%;
			color: #414141;
			padding-left: 18px;
			padding-right: 8px;
		}

		.evf-brand-logo {
			border-right: 1px solid #dee0e9;

			img {
				width: 32px;
				height: 32px;
				margin-right: 8px;
				display: flex;
			}
			a {
				text-decoration: none;
				border: none;
			}
			a:focus {
				outline: none;
				box-shadow: none;
			}
		}

		&::before,
		&::after {
			content: "";
			display: flex;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background: $white;
		}

		&::before {
			top: 0;
			z-index: -1;
		}

		&::after {
			height: 10px;
			box-shadow: 0px 4px 8px transparentize(#2d3559, 0.92);
			z-index: -2;
		}
	}
	.major-publishing-actions {
		clear: both;
		line-height: 28px;
		margin-left: auto;

		.publishing-action {
			text-align: right;
			float: right;

			input {
				&.code {
					width: 280px;
					height: 33px;
					font-size: 14px;
					font-weight: 400;
					padding: 0 6px;
					margin: 0;
					border-color: #F6F3FA !important;
					background: #F6F3FA !important;
					border-radius: 3px 0 0 3px;
				}
			}
		}

		#copy-shortcode {
			margin-left: -5px;
			border-radius: 0 4px 4px 0;
			background: #F6F3FA !important;
			border-color: #F6F3FA !important;
			position: absolute;
			right: 5px;
			top: 50%;
			transform: translateY(-50%);
			background: $grey-0 !important;
			border: 0;
			width: 30px;
			height: 30px;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer !important;

			svg {
				width: 18px;
				height: 18px;
			}
		}
	}
	.evf-form-preview-devices {
		clear: both;
		line-height: 28px;
		margin-left: auto;

		svg {
			width: 18px;
			height: 18px;
			cursor: pointer;
		}
	}
	.evf-form-preview-main-content {
		display: flex;
		background: #f2f2f2;

		.evf-form-preview-form {
			width: 1060px;
			padding: 30px;
			gap: 30px;
			border: 1px solid #dee0e9;
			border-radius: 25px;
			margin: 38px;
			background: #fff;

			.evf-form-preview-title {
				padding: 24px;
				font-size: 20px;
				font-style: normal;
				font-weight: 500;
				line-height: 150%;
				color: #414141;
			}
			.evf-form-preview-content {
				padding: 24px;
			}
		}

		.evf-form-side-panel {
			display: flex;
			max-width: 380px;
			width: 100%;
			padding: 20px;
			flex-direction: column;
			gap: 36px;
			border: 1px solid #dee0e9;
			margin-left: auto;
			background: #fff;
			box-sizing: border-box;

			.hidden {
				display: none !important;
			}
			.evf-form-preview-save,
			.evf-form-preview-upgrade {
				background: #7545BB;
				width: max-content;
				padding: 10px;
				margin-bottom: 0px;
				display: flex;
				margin-left: auto;
				margin-right: auto;
				gap: 8px;
				border-radius: 4px;
				border: 1px solid #7545BB;
				cursor: pointer;

				.evf-form-preview-save-title {
					font-size: 14px;
					font-style: normal;
					font-weight: 500;
					line-height: 150%;
				}
			}

			.evf-from-preview-theme-toggle {
				display: flex;
				justify-content: space-between;

				.evf-form-preview-toggle-title {
					color: #222;
					font-size: 16px;
					font-style: normal;
					font-weight: 500;
					line-height: 150%;
				}
			}

			.evf-form-preview-pro-features {
				display: flex;
				flex-direction: column;
				gap: 16px;
				margin: 0;

				.evf-form-preview-sidebar__body--list-item {
					svg {
						height: 18px;
						width: 18px;
						position: relative;
						top: 5px;
						margin-right: 10px;
					}
				}
			}
		}
		.hidden {
			display: none;
		}
	}

	.evf-small-screen-preview {
		.evf-form-row {
			display: -webkit-flex;
			display: flex;

			-webkit-flex-direction: column;
			flex-direction: column;
			.evf-form-grid {
				width: 100% !important;
				margin-bottom: 20px;
				&:nth-child(1n + 2) {
					border-left: 1px solid #dee0e9;
				}
				&:last-child {
					margin-bottom: 0;
					border-left: 0 none;
				}
			}
		}
	}
	.evf-form-preview-sidepanel-toggler {
		position: absolute;
		width: 27px;
		height: 48px;
		top: 50%;
		left: calc(100% - 457px);
	}
	.inactive {
		left: calc(100% - 27px);
	}
}

// Form Preview Revamp CSS
body {
	&.evf-multi-device-form-preview {
		// font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		margin: 0;

		.evf-form-preview-main-content {
			min-height: calc(100vh - 76px); //------container height

			.evf-form-preview-form {
				width: auto;
				flex: 1;
				padding: 0px;
				background: none;
				border-radius: 8px;
				border: none;

				select,
				textarea,
				input:not([type="range"]) {
					min-height: 38px;
					border-radius: 4px;
					padding: 0 12px;
				}

				.evf-preview-content {
					height: 100%;
					background: #fff;
					border: 1px solid #e1e1e1;
					border-radius: 8px;
					transition: all 0.3s ease-in-out;
					max-width: 100%;
					margin: 0 auto;
				}

				.evf-preview-tablet-wrapper {
					max-width: 768px;
					margin: 0 auto;
					border-radius: 8px;
				}
				.evf-preview-mobile-wrapper {
					max-width: 420px;
					margin: 0 auto;
					border-radius: 8px;
					.everest-forms {
						.evf-field-container {
							.evf-frontend-row {
								flex-direction: column;
								margin: 0;

								.evf-frontend-grid {
									padding: 0;

									&:last-child {
										margin-bottom: 0;
									}

									&.evf-grid-2,
									&.evf-grid-3,
									&.evf-grid-4 {
										width: 100%;
										max-width: 100%;
									}
								}
							}
						}
						.evf-recaptcha-container {
							margin: 25px 0;
						}
					}
				}
				.evf-form-preview-title {
					padding: 24px;
					border-top-left-radius: 8px;
					border-top-right-radius: 8px;
					display: block;
					color: #222;
					background: #fafafa;
					box-sizing: border-box;
				}
				.everest-forms {
					background: #fff;
					border: none;
					padding: 24px 12px;
					margin-bottom: 0;
					box-shadow: none;

					.evf-registration-title {
						color: #1f1f1f;
						font-size: 32px;
						font-weight: 600;
						line-height: 48px;
						letter-spacing: 0.15px;
						display: block;
						text-align: center;
					}

					.evf-registration-description {
						color: #333;
						font-size: 14px;
						font-weight: 400;
						line-height: 21px;
						letter-spacing: 0.15px;
						margin-bottom: 30px;
						margin-top: 0px;
						text-align: center;
					}
					.evf-button-container {
						display: block;
					}
					.evf-form-row {
						gap: 24px;
						margin-bottom: 28px;

						.evf-form-grid {
							input,
							textarea,
							select {
								border-color: #e9e9e9;
							}

							textarea {
								padding-top: 6px;
								padding-bottom: 6px;
							}

							ul {
								padding-left: 0;
							}
						}
					}
					.evf-button-container {
						display: block;
						margin-top: 36px;

						.evf-submit-button {
							width: max-content;

							&:hover {
								color: $white;
							}
						}
					}

					.everest-form {
						.evf-field-container {
							.evf-frontend-row {
								.evf-frontend-grid {
									.evf-field {
										&-label {
											color: #383838;
											font-size: 14px;
											font-weight: inherit;
											line-height: 20px;
										}

										ul {
											li {
												margin-bottom: 12px;

												input {
													&[type="radio"],
													&[type="checkbox"] {
														min-height: 20px;
														margin-top: 0;
													}
												}
											}
										}

										&.evf-field-privacy-policy {
											input[type="checkbox"],
											input[type="radio"] {
												min-height: auto;
												margin-right: 6px;
											}

											.evf-privacy-policy-consent-message {
												font-weight: inherit;
											}
										}

										.everest-forms-image-choices {
											.everest-forms-image-choices-item {
												margin-bottom: 20px !important;
												
												&:has(input:checked) {
													.everest-forms-field-label-inline {
														border-color: var(--wp--preset--color--vivid-cyan-blue);
														box-shadow: 0px 6px 24px 0px rgba(10, 10, 10, 0.06);
													}
												}
											}

											.everest-forms-field-label-inline {
												flex-direction: column;
												gap: 8px;
												border: 1px solid #e9e9e9;
												padding: 12px;

												br {
													display: none;
												}
											}

											input {
												&[type="radio"],
												&[type="checkbox"] {
													display: none;
												}
											}

											&-image {
												margin-right: 0 !important;

												img {
													width: 200px;
													height: 200px;
													object-fit: cover;
												}
											}
										}
									}
								}
							}
						}

						.evf-submit-container {
							margin-top: 12px;
						}
					}

					&:not(.evf-frontend-form-preview) {
						.everest-form {
							.evf-field-container {
								.evf-frontend-row {
									.evf-frontend-grid {
										.evf-field {
											input,
											textarea,
											select {
												border-color: #e9e9e9;

												&:focus {
													border-color: #7545BB;
												}
											}

											&-label {
												font-weight: 500;
											}
										}
									}
								}
							}

							.evf-submit-container {
								.everest-forms-submit-button {
									padding: 8px 16px;
									color: #fff;
									font-size: 14px;
									font-weight: 500;
									line-height: 22px;
									border-radius: 4px;
									border-color: #7545BB;
									background: #7545BB;
								}
							}
						}
					}
				}
			}
			.evf-form-side-panel {
				border-left: 1px solid #edeff7;
				border: none;
				margin-left: unset;
				z-index: 1;
				.evf-form-preview-pro-features-title {
					padding-bottom: 12px;
					margin: 0 0 4px 0;
					border-bottom: 1px solid #edeff7;
					font-weight: 500;
					font-size: 16px;
					color: #222222;
					line-height: 24px;
				}

				.evf-form-preview-pro-features {
					.evf-form-preview-sidebar__body--list-item {
						span {
							font-size: 14px;
						}
						svg {
							margin-right: 8px;
						}
					}
					.evf-form-preview-upgrade {
						margin-top: 16px;
						padding: 8px 18px 8px 16px;

						.evf-form-preview-upgrade-title {
							color: #fff;
							font-size: 14px;
						}
					}
				}
				.evf-form-preview-save {
					padding: 8px 18px 8px 16px;
					color: #fff;
				}
				.evf-form-preview-toggle-theme-preview {
					position: relative;
					display: inline-block;
					width: 36px;
					height: 20px;

					input[type="checkbox"] {
						position: relative;
						z-index: 99;
						opacity: 0;
						height: 22px;
						width: 40px;
						cursor: pointer;

						&:checked + .slider {
							background-color: #7545BB;
						}

						&:focus + .slider {
							box-shadow: 0 0 1px #2196f3;
						}

						&:checked + .slider::before {
							transform: translateX(16px);
						}
					}

					.slider {
						position: absolute;
						cursor: pointer;
						inset: 0;
						background-color: #dfe1ea;
						transition: 0.4s;

						&.round {
							border-radius: 30px;
						}

						&.round::before {
							border-radius: 50%;
						}

						&::before {
							position: absolute;
							content: "";
							height: 16px;
							width: 16px;
							left: 2px;
							bottom: 2px;
							background-color: white;
							transition: 0.4s;
							border-radius: 100%;
						}
					}
				}
			}
			@media (max-width: 992px) {
				.evf-form-side-panel {
					position: absolute;
					right: 0;
					height: 100%;
					border-left: 1px solid #edeff7;
				}
				&.evf-form-preview-overlay::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					background: #1a1a1a;
					opacity: 0.5;
					width: 100%;
					height: 100%;
				}
			}
		}

		.evf-form-preview-sidepanel-toggler {
			right: 380px;
			left: unset;
			border: 1px solid #edeff7;
			border-right: 0px;
			width: 26px;
			background: #fff;
			padding: 0px 8px;
			fill: #9b9b9b;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
			z-index: 1;
			cursor: pointer;
			box-sizing: border-box;

			&.inactive {
				right: 0;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
				border-top-left-radius: 0px;
				border-bottom-left-radius: 0px;
				transform: rotate(180deg);
			}
		}

		#nav-menu-header {
			padding: 0 20px 0 30px;

			.evf-brand-logo {
				padding-left: 0 !important;
				padding-right: 30px !important;
				padding-top: 20px;
				padding-bottom: 20px;
				margin-right: 30px;

				img {
					width: 36px;
					height: 36px;
					margin-right: 0;
				}
			}

			.evf-form-title {
				padding: 0;
				color: $grey-500;
				font-size: 18px;
				font-weight: 500;
				line-height: 26px;
			}

			.evf-form-preview-devices {
				border-radius: 8px;
				background: #edeff7;
				padding: 4px;
				display: flex;
				align-items: center;
				gap: 2px;

				.evf-form-preview-device {
					&.active {
						background: #fff;
						border-radius: 4px;

						path {
							fill: rgb(117, 69, 187);
						}
					}
				}

				svg {
					padding: 8px;
					width: auto;
					height: auto;
				}
			}

			.major-publishing-actions {
				.publishing-action {
					position: relative;

					input[type="text"] {
						all: unset;
						height: 38px;
						background: #edeff7;
						border: $border_width solid #edeff7;
						text-align: left;
						border-radius: 4px;
						padding: 0 12px;
						font-size: 14px;
					}
				}
			}

			.evf-form-preview-dropdown-container {
				position: relative;
				display: inline-block;
			}

			.evf-form-preview-dropdown-content {
				opacity: 0;
				visibility: hidden;
				position: absolute;
				background-color: #FFFFFF;
				min-width: 280px;
				box-shadow: 0 4px 24px rgba(44, 33, 180, 0.12);
				border-radius: 4px;
				margin: 2px 0;
				transition: opacity 0.2s ease, visibility 0.2s ease;
				z-index: 1;
				padding: 0;
				list-style: none;
				right: 0;
			}

			.evf-form-preview-dropdown-container:hover .evf-form-preview-dropdown-content,
			.evf-form-preview-dropdown-content:hover {
				opacity: 1;
				visibility: visible;
			}

			.evf-form-preview-dropdown-content li {
				padding: 0;
				background-color: #FFFFFF;
			}

			.evf-form-preview-dropdown-content li a {
				display: block;
				color: #383838;
				padding: 12px;
				text-decoration: none;
				font-size: 14px;
				cursor: pointer;
				transition: background-color 0.3s;
			}

			.evf-form-preview-dropdown-content li a:hover {
				background-color: #f4f4f4;
			}

			#evf-form-preview-more-option {
				cursor: pointer;
				background: none;
				border: none;
				background: #f4f4f4;
				border-radius: 4px;
				margin-left: 12px !important;
				transition: all .3s ease-in-out;

				svg {
					width: 36px;

					rect {
						fill: transparent;
					}
				}

				&:hover {
					background: #F6F3FA;
				}
			}
		}
	}
}

.tooltipster-base {
	.tooltipster-box {
		// background-color: #4c5477 !important;
		background: $grey-800 !important;
		padding: 4px 8px;
		border-radius: 2px;
		text-align: center;

		.tooltipster-content {
			padding: 2px 0;
			font-size: 12px;
		}

		.tooltipster-content a {
			color: #9ef01a !important;
		}
	}

	.tooltipster-arrow {
		.tooltipster-arrow-uncropped {
			.tooltipster-arrow-border {
				border-top-color: $grey-800 !important;
				border-bottom-color: $grey-800 !important;
			}
		}
	}
}
