/**
 * customize-controls.scss
 * Customize controls styles.
 */

// Imports.
@import 'variables';

/**
 * Styling begins.
 */

$customizerPrimaryColor: #3858e9;
$whiteColor: #ffffff;
$toggleDefaultColor: #9ca3af;
$inputBorderColor: #cccccc;

#customize-theme-controls {
	// Pre-built templates.
	.control-section-evf-templates {
		border: none;

		> .accordion-section-title,
		> .accordion-section-title:hover {
			cursor: default;
			background: #fff;
			color: #555d66;
			border-top: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			border-left: none;
			border-right: none;
			margin: 0 0 15px 0;
			padding-right: 100px;
			transition:
				0.15s color ease-in-out,
				0.15s background-color ease-in-out,
				0.15s border-color ease-in-out;

			&::after {
				display: none;
			}
		}

		.accordion-section-title {
			padding-right: 100px; /* Space for the button */

			span.customize-action {
				display: block;
				font-size: 13px;
				font-weight: 400;
			}

			.change-template {
				position: absolute;
				right: 10px;
				top: 50%;
				margin-top: -14px;
				font-weight: 400;
			}
		}

		#everest-forms-save-template-container {
			input {
				width: 100%;
				margin-bottom: 10px;
			}

			> div {
				display: block;
				text-align: right;

				.button-primary {
					background: $customizerPrimaryColor;
					border-color: $customizerPrimaryColor;
					transition: all 0.3s;

					&:hover {
						background: darken($color: $customizerPrimaryColor, $amount: 8);
					}
				}
			}
		}

		.customize-control-evf-image_radio {
			.image-radio-wrapper {
				flex-wrap: wrap;
				margin-top: 15px;

				li {
					margin-right: 20px;
					margin-bottom: 20px;
					flex: 0 0 calc(50% - 10px);
					position: relative;

					&:nth-child(2n) {
						margin-right: 0;
					}

					label {
						height: auto;
						border: none;
						display: flex;
						padding: 15px;
						flex-wrap: wrap;
						overflow: hidden;
						border-radius: 5px;
						background: #dedede;
						transition: all 0.25s;
						border: 2px solid transparent;

						img {
							width: 100%;
							height: auto;
							border-radius: 5px;
							margin-bottom: 10px;
							transition: all 0.25s;
						}

						&:hover {
							color: $color__primary;
							background: #d9d9d9;

							img {
								box-shadow: 0 2px 7px rgba(128, 128, 128, 0.3);
							}
						}
					}

					input {
						&:checked {
							+ label {
								color: $color__primary;
								border: 2px solid $color__primary;

								img {
									box-shadow: 0 2px 7px rgba(128, 128, 128, 0.3);
								}
							}
						}
					}

					.evf-delete-template-btn {
						position: absolute;
						top: 1px;
						right: 1px;
						color: red;
						cursor: pointer;
					}
				}
			}
		}
	}

	// Colorpicker control.
	.customize-control-evf-color,
	.customize-control-evf-background_image {
		.wp-picker-container {
			button.wp-color-result {
				overflow: hidden;
			}

			input[type='text'].wp-color-picker {
				width: 80px !important;
			}
		}
	}

	// Toogle switch contol.
	.customize-control-evf-toggle {
		position: relative;

		label {
			display: flex;
			flex-wrap: wrap;

			.customize-control-title {
				width: calc(100% - 55px);
				margin-bottom: 0 !important;
			}
		}

		.switch {
			top: 4px;
			width: 36px;
			height: 18px;
			cursor: pointer;
			user-select: none;
			position: relative;
			border-radius: 15px;
			display: inline-block;
			border: 2px solid $color__gray-dark;
			background: $color__white;
			vertical-align: middle;
			transition: background 350ms ease;

			&::before,
			&::after {
				content: '';
				top: 50%;
				left: 2px;
				width: 16px;
				height: 16px;
				display: block;
				position: absolute;
				background: $color__gray-dark;
				border-radius: 50%;
				transform: translate3d(0, -50%, 0);
				transition:
					all 350ms cubic-bezier(0, 0.95, 0.38, 0.98),
					background 150ms ease;
			}

			&::before {
				left: -2px;
				background: rgba(0, 0, 0, 0.2);
				transform: translate3d(0, -50%, 0) scale(0);
			}

			.switch-content {
				&::before,
				&::after {
					content: '';
					height: 6px;
					display: inline-block;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
				}

				&::before {
					left: 8px;
					width: 2px;
					background: $color__white;
				}

				&::after {
					height: 4px;
					width: 4px;
					border: 2px solid $color__gray-dark;
					border-radius: 4px;
					right: 6px;
				}
			}
		}

		input:checked + .switch {
			background: $color__primary;
			border: 2px solid $color__primary;

			&::after {
				background: $color__white;
				transform: translate3d(100%, -50%, 0);
			}
		}
	}

	// Range slider control.
	.customize-control-evf-slider {
		.customize-control-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.everest-forms-slider {
			height: 4px;
			display: flex;
			border-radius: 3px;
			position: relative;
			align-items: center;
			width: calc(65% - 12px);
			background: transparentize($color__gray-base, 0.75);
			border: 0;

			.ui-slider-handle {
				width: 16px;
				height: 16px;
				cursor: pointer;
				position: absolute;
				border-radius: 16px;
				background: $customizerPrimaryColor;
				top: 50%;
				transform: translateY(-50%);

				&::after {
					top: 50%;
					content: '';
					z-index: -1;
					width: 16px;
					height: 16px;
					display: block;
					position: absolute;
					border-radius: 50%;
					transform: translate3d(0, -50%, 0) scale(0);
					transition:
						all 350ms cubic-bezier(0, 0, 0, 0.25),
						background 150ms ease;
					background: transparentize($color__gray-base, 0.7);
				}

				&:active {
					&::after {
						transform: translate3d(0, -50%, 0) scale(1.75);
					}
				}
			}

			.ui-slider-range {
				height: 100%;
				border-top-left-radius: 2px;
				border-bottom-left-radius: 2px;
				background: $customizerPrimaryColor;
			}
		}

		.everest-forms-slider-input {
			display: flex;
			align-items: center;
			width: calc(35% - 12px);

			.reset {
				width: 16px;
				height: 16px;
				font-size: 16px;
				cursor: pointer;
				color: #8b8b8b;
				transition: all 0.3s;

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

	// Dimension picker control.
	.customize-control-evf-dimension {
		label {
			display: flex;

			.customize-control-title {
				display: flex;
				align-items: center;
				margin-right: 10px;
			}
		}
	}

	.responsive-tabs {
		display: flex;
		margin-right: 7px;
		align-items: center;

		li {
			display: flex;
			margin-right: 7px;
			align-items: center;

			.responsive-tab-item {
				span {
					width: 16px;
					height: 16px;
					padding: 5px;
					border-radius: 16px;
					background-color: $color__gray-light;

					svg {
						fill: $color__gray-dark;
					}

					&:hover {
						svg {
							fill: $color__gray-base;
						}
					}
				}

				input {
					display: none;

					&:checked {
						+ span {
							background: $color__primary;

							svg {
								fill: $color__white;
							}
						}
					}
				}
			}
		}
	}

	.dimension-units {
		display: flex;
		margin-left: auto;
		align-items: center;

		li {
			margin-right: 5px;

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

			label {
				font-size: 10px;
				text-transform: uppercase;

				& + input {
					&:not(:checked) {
						color: $color__gray-light;
					}
				}
			}

			input {
				display: none;

				&:checked {
					+ .unit-switcher {
						text-decoration: underline;
					}
				}

				&:not(:checked) {
					+ .unit-switcher {
						opacity: 0.7;
					}
				}
			}
		}
	}

	.dimension-wrapper {
		.dimension-input-wrapper {
			.dimension-inputs {
				display: flex;

				li {
					flex: 1;

					&:not(:first-child) {
						input {
							border-left: none;
						}
					}

					&:first-child {
						input {
							border-radius: 3px 0 0 3px;
						}
					}

					input {
						height: 35px;
						box-shadow: none;
						text-align: center;
						border-radius: 0;
						border-color: $color__gray;
					}

					.dimension-anchor-wrapper {
						padding: 0;
						width: auto;
						font-size: 0;
						height: 33px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 0 3px 3px 0;
						background-color: $color__gray;
						border: 1px solid $color__gray;
						border-left: none;

						.unlinked-icon {
							display: none;
						}

						span {
							width: 16px;
							height: 16px;

							svg {
								fill: $color__gray-dark;
							}

							&:hover {
								svg {
									fill: $color__gray-dark;
								}
							}
						}

						&.unlinked {
							background-color: $color__white;

							.linked-icon {
								display: none;
							}

							.unlinked-icon {
								display: block;
							}
						}

						input {
							&[type='checkbox'] {
								display: none;
							}
						}
					}

					label {
						font-size: 12px;
						justify-content: center;
						color: $color__gray-dark;
					}
				}
			}
		}
	}

	// Image radio and checkbox control.
	.image-radio-wrapper,
	.image-checkbox-wrapper {
		display: flex;

		li {
			flex: 1;
			text-align: center;

			&:first-child {
				label {
					border-radius: 3px 0 0 3px;
					border-left: 1px solid darken($color__gray, 10%);
				}
			}

			&:last-child {
				label {
					border-radius: 0 3px 3px 0;
				}
			}

			label {
				height: 35px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: $color__white;
				border: 1px solid darken($color__gray, 10%);
				border-left: none;

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

				&.selected {
					background: $color__gray;
				}
			}

			input {
				display: none;

				&:checked {
					+ label {
						background: $color__gray;
					}
				}
			}
		}
	}

	// Dimension control reset
	.everest-forms-dimension-reset {
		display: flex;
		align-items: center;
		width: calc(35% - 12px);

		.reset {
			width: 16px;
			height: 16px;
			font-size: 16px;
			padding: 7px;
			cursor: pointer;
			margin-left: 10px;
			color: #8b8b8b;
			transition: all 0.3s;

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

	// Select2 control.
	.select2-container {
		width: 100% !important;

		&.select2-container--default {
			.select2-selection--single,
			.select2-selection--multiple {
				outline: none;
				border-radius: 0;
				border-color: $color__gray;
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);

				.select2-selection__clear {
					line-height: 24px;
				}
			}

			.select2-selection--multiple {
				ul {
					&.select2-selection__rendered {
						display: block;

						.select2-selection__clear {
							margin-top: 2px;
						}

						li {
							border-radius: 3px;
						}
					}
				}
			}
		}
	}
}

/**
 * Section styling.
 */
#customize-controls {
	.customize-info {
		.customize-section-description {
			margin: 0;
		}
	}
}

/**
 * Select2 Dropdown.
*/
.wp-customizer {
	.select2-dropdown {
		z-index: 900000;
		border-color: $color__gray;
	}

	.select2-container--default {
		.select2-results__option {
			&[area-selected],
			&[data-selected],
			&[aria-selected='true'],
			&[data-selected='true'] {
				&:focus {
					outline: none;
				}
			}

			&.select2-results__option--highlighted {
				&[area-selected],
				&[data-selected] {
					background-color: $color__blue;
				}
			}
		}

		.select2-search--dropdown {
			.select2-search__field {
				border-color: $color__gray;
			}
		}
	}
}

// Custom checkbox color palette.

.color-palette {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;

	.color-palette-item {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-right: 10px;
		margin-bottom: 10px;
		cursor: pointer;

		input[type='checkbox'] {
			display: none;
		}

		.color-palette-color {
			display: inline-block;
			width: 24px;
			height: 24px;
			border-radius: 3px;
			margin-bottom: 5px;
			border: 1px solid #ccc;
			cursor: pointer;
			transition: border-color 0.3s;
			&:hover,
			&:focus {
				border-color: #333;
			}
		}

		.color-palette-label {
			text-align: center;
		}

		input[type='checkbox']:checked + .color-palette-color {
			border-color: #333;
		}

		.tooltip {
			position: absolute;
			top: calc(100% + 5px);
			left: 50%;
			transform: translateX(-50%);
			background-color: #333;
			color: #fff;
			padding: 5px 10px;
			border-radius: 5px;
			font-size: 12px;
			white-space: nowrap;
			z-index: 999;
			display: none;
		}

		&:focus-within .tooltip {
			display: inline-block;
		}
	}
}

/* Custom styles for accordion effect */
.accordion-toggle {
	cursor: pointer;
	display: block;
	background: #f1f1f1;
	padding: 10px;
	border: 1px solid #ccc;
	margin-bottom: 10px;
}

.accordion-content {
	display: none;
	padding: 10px;
	border-top: 1px solid #ccc;
	background: #fff;
}

.accordion-content.active {
	display: block;
}

/*---------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
------------ Style Customizer ReVamp Design CSS -----------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
---------------------------------------------------------------*/

.wpeverest-customizer-style {
	&#customize-controls {
		#customize-theme-controls {
			.customize-pane-parent {
				> li {
					&:not([id*='everest_forms_']) {
						display: none !important;
					}

					&#accordion-section-custom_css {
						display: list-item !important;
					}
				}
			}

			.accordion-section {
				&::-webkit-scrollbar {
					width: 7px !important;
				}

				&::-webkit-scrollbar-track {
					border-radius: 10px !important;
				}

				&::-webkit-scrollbar-thumb {
					background: #b0b0b0 !important;
					border-radius: 10px !important;
				}

				&::-webkit-scrollbar-thumb:hover {
					background: #7a7a7a !important;
				}
			}

			.customize-panel-back,
			.customize-section-back {
				&:hover,
				&:focus {
					border-left-color: $customizerPrimaryColor !important;

					&::before {
						color: $customizerPrimaryColor !important;
					}
				}
			}

			.accordion-section {
				h3.accordion-section-title {
					background: $whiteColor !important;
					border-bottom: 1px solid #dcdcde !important;
					border-left: 4px solid #fff !important;
					transition:
						0.15s color ease-in-out,
						0.15s background-color ease-in-out,
						0.15s border-color ease-in-out !important;
					padding: 10px 30px 10px 14px !important;
					border-right: none !important;
					line-height: 1.55 !important;

					&:hover,
					&:focus {
						color: $customizerPrimaryColor !important;
						background: #f6f7f7 !important;
						border-left-color: $customizerPrimaryColor !important;
					}
				}
			}

			.customize-control {
				padding: 16px;
				margin-top: 12px;
				margin-bottom: 0;
				box-sizing: border-box;
				background: $whiteColor;
				position: relative;

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

				.customize-control-title {
					margin-bottom: 8px;
					color: #222222;
					font-size: 14px;
					font-weight: 600;
					line-height: 18px;
					text-transform: capitalize;
				}

				label {
					justify-content: space-between;
					align-items: center;

					.switch {
						width: 30px;
						height: 16px;
						top: 0;
						border: 0;
						background: $toggleDefaultColor;

						&::after {
							width: 12px;
							height: 12px;
							left: 2px;
							background: $whiteColor;
						}

						&-content {
							&::before,
							&::after {
								content: none;
							}
						}
					}
				}

				input:checked {
					+ .switch {
						background: $customizerPrimaryColor;
						border-color: $customizerPrimaryColor;

						&::after {
							right: 14px;
							left: unset;
						}
					}
				}

				&.customize-control-evf-select2 {
					.customize-control-title {
						margin-bottom: 8px;
					}

					select {
						height: 38px;
						border-radius: 2px;
						border-color: $inputBorderColor;

						&:focus {
							border-color: $customizerPrimaryColor;
						}
					}

					.select2 {
						&-selection {
							height: 38px;
							border-radius: 2px;

							&:focus {
								border-color: $customizerPrimaryColor;
							}

							&__rendered {
								line-height: 36px;
							}

							&__arrow {
								height: 36px;
							}

							&__clear {
								line-height: 36px;
							}
						}
					}
				}

				// Margin and Padding Option CSS
				&-evf-dimension {
					position: relative;

					> label {
						.customize-control-title {
							margin-right: 0;
						}

						.responsive-tabs {
							display: none;
							margin-right: 0;
							gap: 4px;

							li {
								margin: 0;
							}
						}
					}

					.dimension {
						&-inputs {
							gap: 8px;

							li {
								margin-bottom: 0;

								input[type='number'] {
									width: 100%;
									height: 2.1vw;
									padding: 0;
									text-align: center;
									border: 1px solid $inputBorderColor;
									border-radius: 3px;
									transition: all 0.3s;

									&::-webkit-inner-spin-button,
									&::-webkit-outer-spin-button {
										-webkit-appearance: none;
										margin: 0;
									}

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

									&:focus {
										box-shadow: none;
										outline: none;
										border-color: $customizerPrimaryColor;
									}
								}

								> label {
									justify-content: center;
								}

								> label {
									&.dimension-anchor-wrapper {
										width: 100%;
										height: 2.1vw;
										box-sizing: border-box;
										justify-content: center;
										border-radius: 3px;
										cursor: pointer;
										border: 0;
										background: transparent;
									}
								}

								&:has(.dimension-anchor-wrapper) {
									flex: unset;

									.dimension-anchor-wrapper {
										.linked-icon {
											svg {
												fill: $customizerPrimaryColor;
											}
										}
									}
								}

								&:has(.customize-control-content) {
									position: absolute;
									top: 16px;
									right: 16px;
								}

								.customize-control-content {
									.everest-forms-dimension-reset {
										.reset {
											position: absolute;
											top: 0;
											right: 0;
											padding: 0;
											margin-left: 0;
										}
									}
								}
							}
						}
					}
				}

				&-evf-color_palette {
					border: 2px solid transparent !important;

					.color-palette-edit-interface {
						.color-palette-edit-item {
							> label {
								font-weight: 500;
							}
						}
					}
				}

				select {
					border: 1px solid $inputBorderColor;
				}
			}

			.customize-pane-child {
				margin-bottom: 0;
			}

			#sub-accordion-section-everest_forms {
				&_templates {
					background: #f0f0f1 !important;

					#everest-forms-save-template-container {
						background: $whiteColor;
						padding: 16px;
						margin-top: 12px;

						.customize-control-title {
							margin-top: 0;
						}

						.customize-control-description {
							padding: 0;
						}
					}

					.customize-control-evf-image_radio {
						.image-radio-wrapper {
							margin-top: 0;
							gap: 16px;

							> li {
								margin: 0;

								.image-radio-item {
									background: $whiteColor;
									border: 1px solid $inputBorderColor;
									padding: 8px;
									transition: all 0.3s;

									&:hover {
										background: #f5f5f5 !important;
										color: $customizerPrimaryColor;
										border-color: $customizerPrimaryColor;

										img {
											box-shadow: none;
										}
									}

									img {
										border: 1px solid $inputBorderColor;
										border-radius: 3px;
									}

									.image-radio-label {
										font-size: 13px;
										line-height: 18px;
									}
								}

								input[type='radio'] {
									&:checked + label {
										color: $customizerPrimaryColor;
										border-color: $customizerPrimaryColor;

										img {
											box-shadow: none;
										}
									}
								}

								.evf-delete-template-btn {
									color: #ea4741;
								}

								&:has(.everest-forms-pro-template) {
									// cursor: not-allowed;

									> label {
										opacity: 0.5;
									}

									&::after {
										content: '';
										background-image: url('../images/evf-premium-icon.png');
										background-repeat: no-repeat;
										background-size: 100%;
										background-position: center;
										position: absolute;
										width: 22px;
										height: 22px;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
									}
								}
							}
						}
					}
				}

				// Color Palettes Part CSS
				&_color_palette {
					.customize-control {
						> label {
							display: block;

							.customize-control-title {
								display: flex;
								align-items: center;
								justify-content: space-between;
								cursor: pointer;

								.color-palette-edit-icon,
								.evf-pro-feature {
									border-radius: 2px;
									border: 1px solid #f4f4f4;
									width: 20px;
									height: 20px;
									display: flex;
									align-items: center;
									justify-content: center;
									background: #f4f4f4;
								}

								.evf-pro-feature {
									opacity: 0.4;
								}
							}
						}

						&:has(.evf-active-color-palette) {
							border: 2px solid $customizerPrimaryColor !important;
						}

						&:has(.evf-pro-palette) {
							> label {
								opacity: 0.5;
							}

							&::after {
								content: '';
								background-image: url('../images/evf-premium-icon.png');
								background-repeat: no-repeat;
								background-size: 100%;
								background-position: center;
								position: absolute;
								width: 22px;
								height: 22px;
								top: 16px;
								right: 16px;
								z-index: 2;
							}
						}

						.color-palette {
							gap: 8px;

							&-item {
								margin: 0;

								input[type='checkbox'] {
									&:checked + .color-palette-color {
										border-color: $inputBorderColor;
									}
								}

								label {
									.color-palette-color {
										margin-bottom: 0;
										border-radius: 50%;
									}
								}
							}
						}

						.color-palette-edit-interface {
							display: flex;
							flex-direction: column;
							gap: 16px;
							margin-top: 16px;

							.color-palette-items {
								display: flex;
								flex-direction: column;
								gap: 16px;
							}

							.color-palette-save-button {
								width: max-content;
								padding: 4px 10px;
								cursor: pointer;
							}

							input[type='text'] {
								height: 34px;
								border-color: $inputBorderColor;

								&:focus {
									box-shadow: none;
									outline: none;
									border-color: $customizerPrimaryColor;
								}
							}

							.color-palette-edit-item {
								display: flex;
								justify-content: space-between;
								align-items: center;
								position: relative;
								height: 24px;

								.wp-picker-container {
									width: 24px;
									height: 24px;

									.wp-color-result {
										width: 24px !important;
										height: 24px !important;
										padding: 0 !important;
										margin: 0;
										min-height: unset;
										border-radius: 50%;
										border-color: $inputBorderColor;

										&::after {
											content: none !important;
										}

										.wp-color-result-text {
											display: none;
										}
									}

									&.wp-picker-active {
										height: auto;
										background-color: #fff;
										border-radius: 5px;
										-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
										box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
										top: 30px;
										left: 50%;
										position: absolute;
										z-index: 9999;
										padding-top: 16px;
										width: 270px;
										padding: 12px;
										transform: translateX(-50%);

										.wp-picker-open {
											margin: 0 12px 0 0 !important;
										}

										.wp-picker-holder {
											padding: 0 8px 8px;
										}
									}
								}
							}
						}
					}
				}

				// General > Typography Part CSS
				&_general_typography {
					.customize-section-description-container {
						padding: 12px 12px 0;
						margin-bottom: 0;
					}

					.customize-control {
						margin-bottom: 0;
						border-bottom: 1px solid #dcdcde;

						> label {
							input[type='checkbox'] {
								display: none;
							}
						}
					}
				}
			}

			.wp-picker-container {
				&.wp-picker-active {
					background-color: $whiteColor;
					border-radius: 5px;
					-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
					box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
					top: 50px;
					left: 50%;
					position: absolute;
					z-index: 9999;
					padding-top: 16px;
					width: 270px;
					padding: 12px;
					transform: translateX(-50%);

					.wp-picker-open {
						margin: 0 12px 0 0 !important;
					}
				}
			}

			.customize-control-evf-color {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.customize-control-title {
					margin-bottom: 0;
				}

				.customize-control-content {
					.wp-color-result {
						margin: 0;
						padding: 0;
						width: 24px;
						height: 24px;
						max-height: unset;
						min-height: unset;
						border-radius: 50%;
						border-color: $inputBorderColor;

						.wp-color-result-text {
							display: none;
						}
					}
				}

				.customize-control-description {
					display: none;
				}

				.wp-picker-active {
					.wp-picker-holder {
						width: 260px !important;

						.iris-picker {
							width: 260px !important;
						}
					}
				}
			}

			.accordion-section {
				h3 {
					&.accordion-section-title {
						button {
							&.accordion-trigger {
								padding: 0;

								&:hover,
								&:focus {
									background: transparent;
									color: $customizerPrimaryColor;
								}
							}
						}
					}
				}
			}
		}
	}

	#customize-theme-controls {
		.customize-pane-child.accordion-section-content {
			padding: 12px;
		}

		.customize-info {
			margin-bottom: 0;

			.customize-section-title {
				margin: -12px -12px 0 !important;
			}
		}

		#sub-accordion-section-everest_forms {
			&_general_font,
			&_submission_success_message,
			&_submission_error_message,
			&_submission_validation_message {
				.customize-control-evf-toggle {
					margin-top: 12px !important;
				}
			}

			&_color_palette,
			&_general_font,
			&_general_form_container,
			&_general_field_styles,
			&_file_upload_styles,
			&_general_typography,
			&_general_buttons,
			&_submission_success_message,
			&_submission_error_message,
			&_submission_validation_message {
				height: 100%;
				background: #f0f0f1 !important;
			}

			&_general_typography {
				padding: 12px !important;

				.customize-section-description-container.customize-info {
					margin: -12px -12px 0;
				}

				.customize-control {
					border-bottom: 0 !important;

					&-evf-toggle {
						margin-top: 12px !important;
					}
				}
			}
		}
	}

	.customize-control {
		border-top: 0 !important;

		&-select {
			select {
				&:hover,
				&:active {
					color: $customizerPrimaryColor;
				}

				&:focus {
					border-color: $customizerPrimaryColor;
					box-shadow: none;
					outline: none;
				}
			}
		}

		.customize-control-title {
			margin-top: 0;
			line-height: 24px !important;
		}

		&-evf-dimension {
			> label {
				align-items: flex-start !important;
			}

			.dimension-units {
				margin-right: 28px;

				> li {
					.dimension-unit-item {
						cursor: pointer;

						input[type='radio'] {
							&:checked + .unit-switcher {
								color: $customizerPrimaryColor;
							}
						}
					}
				}
			}
		}

		> label {
			.customize-control-title {
				margin-top: 0;
			}
		}

		&-evf-color {
			min-height: 56px;

			.customize-control-content {
				width: 24px;
				height: 24px;

				.wp-picker-container {
					width: 24px;
					height: 24px;

					&.wp-picker-active {
						width: 100%;
						height: auto;
					}

					.wp-color-result {
						width: 24px;
						height: 24px !important;
						padding: 0 !important;

						.color-alpha {
							top: 0 !important;
							left: 0 !important;
							border: 0;
						}
					}
				}
			}
		}

		&-evf-slider {
			.customize-control-content {
				flex-direction: unset;

				.everest-forms-slider-input {
					.reset {
						position: absolute;
						top: 16px;
						right: 16px;
						margin-left: 0;
					}
				}
			}
		}

		&-evf-dimension {
			&.everest-forms-padding_option {
				margin-top: 0 !important;
				border-top: 1px dashed #e0e0e0 !important;
			}
		}

		&-evf-toggle {
			margin-top: 0 !important;
		}

		&-evf-image_checkbox,
		&-evf-image_radio {
			.image-checkbox,
			.image-radio {
				&-item {
					justify-content: center !important;
					cursor: pointer;
					transition: all 0.3s;

					&:hover {
						background: #e5e7e9 !important;
					}
				}

				&-wrapper {
					> li {
						margin-bottom: 0;
					}
				}
			}
		}

		&.everest-forms {
			&-border_option,
			&-background_image_option,
			&-typography_font_option {
				margin-top: 0 !important;
				border-top: 1px dashed #e0e0e0 !important;
			}

			&-border_type_option {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.customize-control-title {
					margin-bottom: 0 !important;
				}

				.customize-control-description {
					display: none;
				}

				select {
					width: 100%;
					min-width: 100px;
					max-width: 100px;
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					border: 0 !important;
					text-align: center;
					padding: 0 12px;
					background: #f4f4f4;
					letter-spacing: 0.4px;

					&:focus {
						color: $customizerPrimaryColor;
					}
				}
			}
		}

		.customize-control-description {
			padding: 0 !important;
		}

		// Hide Zakra Customizer tooltip
		.zakra-control-tooltip {
			&.dashicons-editor-help {
				display: none;
			}
		}

		.customize-control-content {
			.reset {
				position: absolute;
				top: 16px;
				right: 16px;
			}
		}
	}
}

.wp-customizer {
	.jconfirm {
		&-box {
			width: 360px !important;
			border: 0 !important;
			box-shadow: none !important;
			padding: 0 !important;

			.jconfirm-title-c {
				padding: 20px 20px 0 !important;
				margin-bottom: 20px !important;

				.jconfirm-icon-c {
					display: none !important;
				}

				.jconfirm-title {
					display: block !important;
					text-align: left !important;
					padding-bottom: 12px;
					border-bottom: 1px solid #d3d3d3;
					color: #222222 !important;
					font-size: 16px;
					line-height: 26px !important;
					margin-bottom: 0 !important;
				}
			}

			.jconfirm-content-pane {
				padding: 0 20px;
				box-sizing: border-box;
				margin-bottom: 4px !important;

				.jconfirm-content {
					> div {
						text-align: left;
						color: #383838;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;

						> div {
							background: #fff5f5;
							padding: 8px 10px !important;
							border-radius: 4px;
							margin-top: 12px;
						}
					}
				}
			}

			.jconfirm-buttons {
				background: #f4f4f4;
				padding: 18px 20px !important;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 16px;
				margin-top: 16px !important;

				.btn {
					margin: 0 !important;
					width: 50%;
					padding: 8px 20px !important;
					text-transform: capitalize !important;
					font-size: 15px !important;
					font-weight: 500;
					line-height: 22px !important;
					letter-spacing: 0.3px;
					font-weight: 400 !important;
					transition: all 0.3s ease-in-out !important;

					&-primary {
						background: $customizerPrimaryColor !important;
						color: #ffffff;

						&:hover {
							background: #7545bb !important;
						}
					}

					&-green {
						background: $customizerPrimaryColor !important;

						&:hover {
							background: #7545bb !important;
						}
					}

					&-light {
						color: #383838 !important;
						border-radius: 3px;
						background: #fff !important;

						&:hover {
							border-color: #4e4e4e !important;
							color: #4e4e4e !important;
						}
					}
				}
			}
		}

		&-holder {
			.container {
				max-width: 100%;
			}
		}

		&.everest-forms-upgrade-customizer {
			.jconfirm {
				&-box {
					padding: 40px 30px !important;
				}

				&-title-c {
					margin-bottom: 12px !important;
					padding: 0 12px !important;

					.jconfirm-title {
						border-bottom: 0;
						padding-bottom: 0;
						font-size: 26px !important;
						line-height: 34px !important;
						text-align: center !important;
						font-weight: 600;
						color: #222222 !important;
					}
				}

				&-content-pane {
					margin-bottom: 0 !important;

					.jconfirm-content {
						> div {
							text-align: center;
							color: #646464;
							font-size: 16px;
							line-height: 26px;
							font-weight: 400;
						}
					}
				}

				&-buttons {
					margin-top: 20px !important;
					padding: 0 !important;
					float: unset !important;
					background: none;

					.everst-forms-customizer-class {
						width: 100%;
						border-radius: 4px;
						background: #7545bb;
						color: #ffffff;
						font-size: 16px;
						font-weight: 600;
						line-height: 24px !important;
						padding: 10px !important;

						&:hover {
							background: #7545bb !important;
						}
					}
				}
			}
		}
	}
}