
body.wpcb-panel-active {

	.wpcb-configurator-wrapper,
	.wpcb-configurator-popup-wrapper {

		&:before {
			content: '';
			display: block;
			position: fixed;
			z-index: 1000;
			right: 0;
			left: 0;
			bottom: 0;
			top: 0;
			background: $template_background;
			opacity: 0.75;
			transition: all .3s ease-in-out;
		}
	}
}

.wpcb-configurator-popup {
	position: fixed;
	transition: all .3s ease-in-out;
	top: 50%;
	left: 50%;
	border-radius: 12px;
	overflow: hidden;
	transform: translate(-50%, -50%);
	background-color: $template_accent;
	width: calc(100% - 30px);
	max-height: 90vh;
	z-index: 1000;
	display: none;
	box-shadow: 0 0 10px rgba(0,0,0,0.14);
	overflow: auto;

	@media (min-width: 768px) {
		width: 712px;
	}

	&.active {
		display: block;
	}

	.wpcb-configurator-popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: $template_background;
		padding: 15px 20px;

		@media (min-width: 768px) {
			padding: 20px 30px;
		}
	}

	.wpcb-configurator-popup-close {
		appearance: none;
		border: 1px solid $template_border;
		background-color: $template_accent;
		border-radius: 6px;
		padding: 5px;
		margin-left: auto;
		cursor: pointer;

		img {
			display: block;
			width: 24px;
			height: 24px;
		}
	}

	.wpcb-configurator-popup-gallery.active + .wpcb-configurator-popup-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: transparent;

		.wpcb-configurator-popup-details {
			display: none;
		}
	}

	.wpcb-configurator-popup-title {
		padding: 15px 20px 0;

		@media (min-width: 768px) {
			padding: 20px 30px 0;
		}
	}

	.wpcb-configurator-popup-title:empty {
		padding: 0;
	}

	.wpcb-configurator-popup-gallery {
		background-color: $template_background;
		color: $template_title_color;

		.slick-prev.slick-arrow,
		.slick-next.slick-arrow {
			appearance: none;
			display: inline-block;
			border: 1px solid $template_border;
			background-color: $template_accent;
			border-radius: 8px;
			padding: 8px;
			width: 42px;
			height: 42px;
			visibility: hidden;
			cursor: pointer;
			z-index: 1;

			img {
				display: block;
				width: 24px;
				height: 24px;
			}

			&.slick-disabled {
				opacity: 0.3;
			}
		}

		&:hover {
			.slick-prev.slick-arrow,
			.slick-next.slick-arrow {
				visibility: visible;
			}
		}

		.slick-prev.slick-arrow {
			position: absolute;
			left: 30px;
			top: 50%;
			transform: translateY(-50%);

			img {
				transform: rotate(-180deg);
			}
		}

		.slick-next.slick-arrow {
			position: absolute;
			right: 30px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.wpcb-configurator-popup-label {
		font-weight: 700;
	}
	
	.wpcb-configurator-popup-details {
		p {
			margin: 0;
		}
	}

	.wpcb-configurator-popup-content {
		padding: 15px 20px;

		@media (min-width: 768px) {
			padding: 20px 30px;
		}

		p {
			word-wrap: break-word;
		}
	}

	.wpcb-price-table-totals {
		background-color: $template_background;
	}

	.wpcb-popup-form {
		background-color: $template_background;
		padding: 15px 20px;

		@media (min-width: 768px) {
			padding: 20px 30px;
		}

		p {
			margin: 0 0 20px;
		}

		.wpcb-form-notice {
			margin: 0;
			margin-top: 12px;

			p {
				margin: 0;
			}
		}

		.wpcb-configurator-input {
			display: flex;
			align-items: center;
			gap: 12px;
			
			@media (max-width: 599px) {
				flex-direction: column;
				align-items: stretch;
			}
		}

		.wpcb-privacy-form-input {
			margin-top: 12px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			cursor: pointer;

			input {
				position: relative;
				box-sizing: border-box;
				appearance: none;
				width: 24px;
				height: 24px;
				border: 1px solid $option_border;
				display: block;
				flex-shrink: 0;
				margin: 0 12px 0 0;
				border-radius: 4px;
				padding: 0;
				
				&:hover {
					border-color: $option_active_border;
					background-color: $option_active_background;
				}

				&:checked {
					background-color: $button_background;
					background-image: $checkbox_url;
					background-size: 18px;
					background-repeat: no-repeat;
					background-position: center;
				}
			}

			a {
				margin-left: 4px;
			}
		}

		input[type=email] {
			font-size: 16px;
			padding: 14px 16px;
			line-height: 1;
		}

		.wpcb-button {
			padding: 14px 16px;
			border-radius: 8px;
			font-size: 16px;
			line-height: 1;
			font-weight: 700;
			background-color: $button_background;
			color: $button_color;
			border: 1px solid $button_border;
			text-decoration: none;
			cursor: pointer;

			&:hover,
			&:focus {
				background-color: $button_hover_background;
				color: $button_hover_color;
				border-color: $button_hover_border;
			}
		}
	}

	#wpcb_download_pdf {
		background-color: $template_accent;
		padding: 10px;
		margin: 0;
		border-radius: 6px;
		display: flex;
		align-items: center;

		img {
			margin-right: 10px;
		}
	}

	.wpcb-configurator-popup-action {
		bottom: 0;
		width: inherit;
		background-color: $template_background;
		padding: 20px 30px;

		form,
		button,
		a {
			display: block;
			width: 100%;
			text-align: center;
			text-decoration: none;
		}

		.wpcb-button {
			color: $button_color;
		}
	}

	&.wpcb-border-square {

		.wpcb-popup-form,
		button,
		input[type=email],
		.wpcb-privacy-form-input input[type=checkbox],
		.wpcb-button,
		.wpcb-configurator-popup-gallery .slick-prev.slick-arrow,
		.wpcb-configurator-popup-gallery .slick-next.slick-arrow,
		div.wpcb-wishlist-table-item-actions a.wpcb-wishlist-action,
		.wpcb-configurator-panel-action a,
		.wpcb-form-notice,
		.wpcb-form-notice:before,
		.wpcb-price-table-totals {
			border-radius: 0;
		}
	}

	&.wpcb-border-pill {

		.wpcb-popup-form,
		button,
		input[type=email],
		.wpcb-privacy-form-input input[type=checkbox],
		.wpcb-button,
		.wpcb-configurator-popup-gallery .slick-prev.slick-arrow,
		.wpcb-configurator-popup-gallery .slick-next.slick-arrow,
		div.wpcb-wishlist-table-item-actions a.wpcb-wishlist-action,
		.wpcb-configurator-panel-action a,
		.wpcb-form-notice,
		.wpcb-form-notice:before,
		.wpcb-price-table-totals {
			border-radius: 25px;
		}
	}
}

.wpcb-configurator-options {

	.wpcb-form-field-pdf,
	.wpcb-form-field-url {
		position: relative;
		height: 46px;
		overflow: hidden;
	}

	.wpcb-form-field-image {
		position: relative;

		input {
			display: none;
		}

		.wpcb-form-field-preview {
			img {
				height: 64px;
				width: auto;
				max-width: 100%;
			}
		}
	}

	.wpcb-form-field-preview {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-color: $template_accent;
		padding: 10px;
		border-radius: 6px;
		display: flex;
		align-items: center;

		img {
			margin-right: 10px;
		}
	}
}