/*!
Theme Name: Clean
Description: A clean and modern theme
Tags: Left  
Supports: columns, color_swatches
*/

@import 'scss/vars';

@-webkit-keyframes sk-scaleout {
	0% { -webkit-transform: scale(0) }
	100% {
		-webkit-transform: scale(1.0);
		opacity: 0;
	}
}

@keyframes sk-scaleout {
	0% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 100% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
		opacity: 0;
	}
}		
@-webkit-keyframes slide-in-left {
	0% { 
		-webkit-transform: translateX(50px); 
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-in-left {
	0% { 
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
		opacity: 0;
	} 100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}


@keyframes configurator-load {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1; 
	} 
	100% {
		opacity: 0; 
	}
}

/* Woocommerce  */
.configurator_is_opened:not(.configurator_is_inline) {
	overflow: hidden;
}

.is_configurable {
	// div.product form.cart {
	// display: none;
	div.product form.cart {
		border: none;
	}
	&:not(.enable-add-to-cart):not(.configurator_is_inline) {
		div.product form.cart {
			// .variations_button
			.quantity, .single_add_to_cart_button {
				display: none;
			}
		}
	}
	@media( max-width: $small_screen_width ) {
		button.configure-product {
			font-size: 1.4em;
			display: block;
			width: 100%;
		}
	}
}

/* CUSTOMIZER */
.mkl_pc {
	position: fixed;
	top:0;
	left:0;
	bottom: 0;
	width: 100%; 
	z-index: 100000;

	.overlay {
		position: absolute;
		top:0;
		left:0; 
		height: 100%; 
		width: 100%; 

		background: transparentize($overlay_bg, 0.2); 
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s;
	} 

	.mkl_pc_container {
		position: absolute;
		width: auto;
		height: auto;
		top: $distance;
		left: $distance;
		right: $distance;
		bottom: $distance;
		background: color(container-bg);

		visibility: hidden;
		opacity: 0;
		transform: translateY(-30px);
		// transition: all 0.3s;
		transition: all 0.5s;

		@media (max-width: $medium_screen_width) {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		@import 'scss/viewer';

		// TOOLBAR
		@import 'scss/toolbar';

		// FOOTER
		footer {

			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: var( --mkl_pc_footer_height );
			padding: $inner_space; 
			
			z-index: 5;

			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.footer__section-left {
				display: none;
				h3 {
					display: none;
				}
			}

			
			.footer__section-center {
				display: flex;
				align-items: center;
			}

			.single_add_to_cart_button {
				visibility: visible; 
			}
			.form,
			form,
			.quantity {
				display: inline-flex;
				padding: 0;
				input.qty {
					background: #fff;
					@media (max-width: $small_screen_width) {
						border: 2px solid #36383a;
					}
				}
			}
			form.cart {
				margin: 0;
			}
			form.save-form {
				display: block;
			}
			.sent-email form.save-form,
			.sending-email form.save-form {
				display: none;
			}
			.extra-cost {
				visibility: hidden;
				position: fixed;
				margin-bottom: 0;
			}
			.extra-cost.show {
				visibility: visible;
				position: relative;
				padding-right: 10px;
				display: inline-block !important;
				@media (max-width: $medium_screen_width) {
					display: none !important;
				}
			}
			span.pc-total-price {
				font-weight: bold;
				display: inline-block; 
				margin-right: .5em;
				@media (max-width: $small_screen_width) {
					position: absolute;
					right: 0;
					top: -30px;
				}				
			}

			.pc_configurator_form {
				display: inline-flex;
				align-items: stretch;
				padding-right: .5em;
				form.cart {
					margin: 0;
				}

				button.configurator-add-to-cart, button.add-to-quote {
					text-transform: uppercase;
					background: var(--mkl_pc_color-primary);
					color: #FFF;
					border-radius: 14px;
					border: 2px solid color( primary );
					font-weight: 300;
					letter-spacing: 1.2px;
					font-size: 12px;
					padding: 4px 16px;
					line-height: 12px;
					position: relative;
					z-index: 2;
				}
				
				button.add-to-quote {
					margin-left: 4px;
				}

				.quantity {
					border: 2px solid color( primary );
					border-radius: 0;
					border-top-left-radius: 12px;
					border-bottom-left-radius: 12px;
					padding-right: 0;
					margin-right: -12px;
					box-sizing: border-box;
					position: relative;
					height: auto;
					width: auto;

					// &::before {
					// 	content: 'x';
					// 	position: absolute;
					// 	left: 10px;
					// 	top: 50%;
					// 	transform: translateY( calc(-50% - 2px) );
					// 	line-height: 1;
					// 	color: color( primary );
					// }

					@media (max-width: $medium_screen_width) {
						[class*=minus], [class*=plus] {
							display: none !important;
						}
					}
				}
				
				.quantity input.qty {
					border: none;
					background: transparent;
					border-top-left-radius: 12px;
					border-bottom-left-radius: 12px;
					height: 40px;
					width: 60px;
					padding-left: 15px;
					padding-right: 12px;
					padding-top: 0;
					padding-bottom: 0;
					color: color( primary );
					box-sizing: content-box;
				}
			}

			h3.product-name {
				line-height: 1;
				margin: 0;
				@media (max-width: $small_screen_width) {
					display: none;
				}
			}
			button.configurator-add-to-cart {
				// @media (max-width: $small_screen_width) {
				// 	background: transparent !important;
				// }

				svg {
					display: none;
				}
				// span {
				// 	@media (max-width: $small_screen_width) {
				// 		display: none;
				// 	}
				// }
			}

			button.reset-configuration {
				background: transparent;
				color: inherit;
				appearance: none;
				box-shadow: none;
				border:  none;
				color: color( primary );
				font-weight: normal;
				margin: 0;
				padding: 4px 9px;
				letter-spacing: normal;
				display: inline-block;
				span {
					display: block;
					font-size: 10px;
					line-height: 1;
					text-transform: uppercase;
				}
				svg {
					height: 23px;
					fill: currentColor;
					width: 23px;
					display: block;
					margin: 0 auto;
				}
				&:hover,
				&:focus,
				&:active {
					color: color( primary_hover );
				}
				@media (max-width: $medium_screen_width) {
					display: none;
				}
			}
			

			@media (max-width: $medium_screen_width) {
				text-align: center;
			}
			@media (max-width: $small_screen_width) {
				// box-shadow: 0 -10px 20px rgba(0,0,0,.2);
				padding: 0;
				.form {
					display: flex;
					align-items: center;
					span.extra-cost-label {
						font-size: 12px;
						text-transform: uppercase;
						line-height: 1;
						display: block;
						text-align: left;
					}
					span.pc-price {
						text-align: left;
						font-size: 1.2em;
					}
					.extra-cost.show {
						padding: 0;
						text-align: left;
						line-height: 1;
					}
				}
			}

		}
	}

	&.floating {
		.mkl_pc_toolbar {
			top: 30px;
			left: 30px;
			bottom: 30px;
			border-radius: 14px;
			box-shadow: 0 11px 20px rgba(0, 0, 0, 0.1);
		}
		.mkl_pc_viewer {
			left: 0;
			bottom: 0;
			.mkl_pc_layers {
				left: var( --mkl_pc_toolbar_width );
			}
		}

		footer {
			left: auto;
			right: 0;
			width: auto;
			bottom: 30px;
			transition: .2s all;
			border-radius: 14px 0 0 14px;
			box-shadow: 0 11px 20px rgba(0, 0, 0, 0.1);
		}

	}

	&.right {
		.mkl_pc_toolbar {
			left: auto;
			right: 0;
			> header > .cancel {
				left: 30px;
				right: auto;
			}
		}
		.mkl_pc_viewer,
		.mkl_pc_bg {
			left: 0;
			right: var( --mkl_pc_toolbar_width );
		}
	}	
	&.opened {
		visibility: visible;
		.overlay {
			visibility: visible;
			opacity: 1;
		}
		.mkl_pc_container {
			visibility: visible;
			opacity: 1;
			transform: none;
		}
	}

	body.admin-bar:not(.configurator_is_inline) & {
		@media (min-width: $small_screen_width) {
			top: 32px;
		}
	}

}

.mkl_pc:not(.no-tooltip) .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choice > button span.description {
	display: none;
}

body.configurator_is_inline .mkl_pc {
    position: relative;
	height: 100vh;
	z-index: 1;

	.overlay {
		display: none;
	}

	.mkl_pc_container {
		box-shadow: none;
		.cancel {
			display: none;
		}
	}	
}

/* YITH Added to cart popup compat */
.mkl_pc.opened.adding-to-cart .mkl_pc_container {
    opacity: .4;
}

.mkl_pc.opened.adding-to-cart::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.save-your-design-modal-container,
.share-your-design-modal-container {
	a {
		&.mkl-footer--action-button {
			display: block;
			text-decoration: none;
		}
		color: color( primary );
		&:hover,
		&:focus,
		&:active {
			color: color( primary_hover );
		}
	}

	a.mkl-footer--action-button {
		span {
			display: block;
			font-size: 10px;
			line-height: 1;
			text-transform: uppercase;
		}
		svg {
			transform: none;
			margin-right: auto;
			margin-left: auto;
			display: block;			
		}
	}
}

.mkl_pc .icon-only {
	width: 44px;
	span {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		width: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
	}
}

a.save-your-design--pdf {
	color: color( primary );
	text-decoration: none;
	display: block;
	&:hover,
	&:focus,
	&:active {
		color: color( primary_hover );
	}

	span {
		display: block;
		font-size: 10px;
		line-height: 1;
		text-transform: uppercase;
	}
	svg {
		transform: scale(.8);
		margin-right: auto;
		margin-left: auto;
		display: block;			
	}
}

/* Color mode */
.mkl_pc .mkl_pc_container .mkl_pc_toolbar ul.display-mode-colors {
	li.choices-list {
		padding: 1em;
		ul {
			display: flex;
			flex-wrap: wrap;
			--mkl_pc_icon_border_radius: 50%;
			li.is-group {
				width: 100%;
			}

			li:not(.is-group) {
				padding: 5px;
				width: auto;
				--mkl_pc_choice_min_height: 0;
				&:nth-child(odd) {
					border: none;
				}
				button {
					padding: 0;
					border: none;
					box-shadow: none;
					.text.choice-name {
						display: none;
					}
					&:hover, &:focus {
						outline: none;
						background: transparent;
						box-shadow: none;
						i {
							box-shadow: 0 3px 20px 8px rgba(0, 0, 0, .1);
							outline-color: #FFF;
							outline-offset: 2px;
							outline-style: solid;				
						}
					}
				}

				i.mkl-pc-thumbnail {
					width: var( --mkl_pc_color_thumnail_size, 44px );
					height: var( --mkl_pc_color_thumnail_size, 44px );
					position: relative;
					top: auto;
					transform: none;
					right: auto;
					overflow: visible;
					border: none;
				}
				
				i.mkl-pc-thumbnail span {
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					box-shadow: none;
					overflow: visible;
					border-radius: 50%;
					img {
						border-radius: 50%;
					}
				}

				&.active button {
					background: transparent;
					i.mkl-pc-thumbnail {
						border-color: color( active_choice_button_bg_color );
					}
					i.mkl-pc-thumbnail span {
						img {
							box-shadow: 0 6px 15px -4px #00000091;
						}
						&::before {
							content: ' ';
							display: block;
							width: 20px;
							height: 20px;
							background: #FFF;
							position: absolute;
							top: -5px;
							right: -5px;
							z-index: 1;
							border-radius: 3px;
							box-shadow: 0 3px 8px #0000004a;
						}
						&::after {
							content: ' ';
							/* color: green; */
							position: absolute;
							top: 0;
							right: -1px;
							display: block;
							width: 10px;
							height: 4px;
							border-bottom: 2px solid #179608;
							border-left: 2px solid #179608;
							transform: rotate(-45deg);
							z-index: 2;
							box-sizing: content-box;
						}
					}			
					
				}

				&.out-of-stock {
					i.mkl-pc-thumbnail {
						svg {
							display: block;
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
						
							line.cls-1 {
								stroke: #FFF;
								stroke-width: 4px;
							}
						}
					}
					button:focus,
					button:hover {
						i.mkl-pc-thumbnail {
							outline-style: dashed;
						}
					}
				}
			}
		}
	}

	&.layer_choices.swatches-size--small {
		--mkl_pc_color_thumnail_size: 35px;
	}

	&.layer_choices.swatches-size--medium {
		--mkl_pc_color_thumnail_size: 50px;
	}
	
	&.layer_choices.swatches-size--large {
		--mkl_pc_color_thumnail_size: 74px;
	}	
}


.mkl_pc:not(.no-tooltip) .mkl_pc_container .mkl_pc_toolbar ul.display-mode-colors li.choices-list ul li:not(.is-group) span.text,
.mkl_pc .mkl_pc_container .mkl_pc_toolbar ul.display-mode-colors li.choices-list ul li span.description,
.mkl_pc:not(.no-tooltip) .mkl_pc_container .mkl_pc_toolbar ul.display-mode-colors li.choices-list ul li span.out-of-stock {
    display: none;
}

.tippy-content span.text, .tippy-content span.description, .tippy-content span.choice-price, .tippy-content span.out-of-stock {
    display: block;
	text-transform: uppercase;
	font-size: 80%;
}

.tippy-content span.choice-price {
    font-size: .8em;
    opacity: .6;
}

/* Dropdown mode */

body:not( .is-mobile ) {

	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.display-mode-dropdown {
		border-bottom: 1px solid #e5e5e5;
		padding: 13px;
		> button {
			border: 1px solid #d1d1d1;
			padding-top: 6px;
			padding-bottom: 6px;
			padding-left: 6px;
			&::after {
				content: '';
				display: block;
				position: absolute;
				right: 15px;
				top: 50%;
				width: 10px;
				height: 10px;
				border-left: 2px solid;
				border-bottom: 2px solid;
				transform: translateY(calc( -50% - 3px) ) rotate(-45deg);
				transform-origin: 50% 50%;
				transition: .2s all;
			}
		}
		@media (min-width: 660px) {
			&.has-thumbnail > button {
				padding-left: 60px;
			}
		}
		&.active > button {
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, .06);
			border-color: color( primary );
			::after {
				transform: translateY(calc( -50% + 3px) ) rotate(135deg);
			}
		}

	
		ul.display-mode-dropdown {
			position: absolute;
			top: calc(100% - 13px);
			height: auto;
			left: 13px;
			bottom: auto;
			right: auto;
			width: calc(100% - 26px);
			z-index: 3;
			max-height: 250px;
			transform: none;
			border: 1px solid #DEDEDE;
			box-shadow: 0 30px 30px -5px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.05);
			// --mkl_pc_color-active_choice_button_bg_color: var( --mkl_pc_color-primary );
			.layer-choices-title {
				display: none;
			}
			
			&:not( .active ) {
				display: none;
			}
			&.active li, li {
				animation-delay: 0s;
				animation-duration: 0s;
				border-right: none;
				width: 100%;
				min-height: 0;

			}
			
			li.is-group .choice-group-label {
				padding: 8px;
				opacity: .4;
			}
			
			.choice-text--container {
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				align-items: center;
			}

			button {
				padding: 8px;
				display: flex;
				flex-direction: row;
				align-items: center;
				--mkl_pc_thumbnail_size: 35px;

				i {
					left: auto;
					top: auto;
					transform: translateY(0);
				}
				
				span.text {
					flex: 1
				
				}
				span.choice-price {
					float: right;
				}
				&:hover, &:focus {
					background-color: color( active_choice_button_bg_color );
					color: color( primary );
				}
			}
			li.active {
				button {
					background-color: color( active_choice_button_bg_color );
					color: color( active_choice_button_text_color );
				}
			}
			
		}


	}

}

body:not(.is-mobile) .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.display-mode-dropdown > button::after {
    content: '';
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    transform: translateY(calc( -50% - 3px) ) rotate(-45deg);
    transform-origin: 50% 50%;
    transition: .2s all;
}

body:not(.is-mobile) .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.display-mode-dropdown.active > button::after {
    transform: translateY(calc( -50% + 3px) ) rotate(135deg);
}

.mkl_pc .mkl_pc_container .mkl_pc_toolbar .layer_choices.display-mode-dropdown li.choices-list > ul li.is-group .choice-group-label {
    padding: 8px;
    opacity: .4;
}

.mkl-pc-syd-modal {
	left: 0;
	&::after {
		left: 24px;
	}
	@media (max-width: $medium_screen_width) {
		left: calc( -1 * var( --container-offset, 0 ) );
		&::after {
			left: calc( 24px + var( --container-offset, 0 ) );
		}
	}
}

nav.mkl-pc--steps {
    display: inline-flex;
    flex-direction: row;
}

.mkl_pc.has-steps:not(.last-step) .mkl_pc_container .form .pc_configurator_form {
    display: none;
}

.mkl_pc.has-steps .mkl_pc_container .mkl_pc_toolbar section.choices .layers.opened {
	transform: none;
}
.mkl_pc.has-steps.last-step {
    nav.mkl-pc--steps .step-next {
		display: none;
	}
}

.mkl_pc.has-steps:not(.right) {
	footer {
		.footer__section-left {
			order: 3;
		}
		
		.footer__section-right {
			order: 1;
		}
		
		.footer__section-center {
			order: 2;
		}
	}
}

/* Code For Loading Screen */

.mkl-configurator-inline.is-shortcode.configure-product:empty {
	height: 60vh;
}
.mkl-configurator-inline.is-shortcode.configure-product:empty::after {
	content: attr(data-loading);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	letter-spacing: 2px;
	-webkit-animation: configurator-load 1.0s infinite ease-in-out;
	animation: configurator-load 1.0s infinite ease-in-out; 
}

/* Divi fix */

.et_divi_theme:not(.configurator_is_inline) .mkl_pc {
	z-index: 100000;
}
