
@import "mixins";

/**
 * Quick View Style
 */

/*=======================
* MODAL POPUP STYLE
========================*/

html.ast-quick-view-is-open {
	&,
	body {
	    overflow: hidden;
	}

	.main-header-bar.ast-sticky-active,
	.ast-above-header.ast-sticky-active,
	.ast-below-header.ast-sticky-active {
		margin-left: 0;
	}
}

.ast-quick-view-bg {
	position: fixed;
	visibility: hidden;
    overflow: hidden;
    background: #0b0b0b;
    opacity: 0;
    transition: opacity .25s;
    z-index: 1042;
}

.ast-quick-view-loader {
	z-index: 1000;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
 	
 	&.blockUI.blockOverlay::before {
 		content: "";
 		background: none !important;
 		width: 48px;
 		height: 48px;
 		display: block;
    	position: absolute;
    	top: 50%;
    	left: 50%;
		border: 3px solid white;
		margin: 0 auto;
		border-radius: 50%;
		border-left-color: transparent;
		border-right-color: transparent;
		animation: ast-qv-spin 575ms infinite linear;
 	}
}

@keyframes ast-qv-spin {
    100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes ast-qv-spin {
    100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes ast-qv-spin {
    100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes ast-qv-spin {
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes ast-qv-spin {
    100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

.ast-quick-view-bg-ready {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    opacity: 0.6;
    visibility: visible;
}

body #ast-quick-view-modal div.product .flex-viewport {
	width: 100%;
    float: none;
}

#ast-quick-view-modal {
	
	position: fixed;
	visibility: hidden;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1400;
	text-align: center;
	transition: all 0.3s;
	overflow-x: hidden;
	overflow-y: auto;
	
	.ast-content-main-wrapper {

		text-align: center;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		padding: 30px;
		
		&:before {
		    content: '';
		    display: inline-block;
		    vertical-align: middle;
		    height: 100%;
		}
	}
	
	.ast-content-main {
		position: relative;
		pointer-events: none;
    	display: inline-block;
    	vertical-align: middle;
    	max-width: 100%;
    	margin: 0 auto;
    	text-align: left;
    	z-index: 1045;
    	transform: translateY(-30px);
    	opacity: 0;
    	transition: transform .5s, opacity .3s;

		&:after,
		&:before {
		    content: '';
		    display: table;
		    clear: both;
		}
	}

	.ast-lightbox-content {
		display: table;
		pointer-events: auto;
		background-color: #fff;
	    max-width: 975px;
	    margin: 20px auto;
	    transform: translateZ(0);
	    box-shadow: 3px 3px 20px 0 rgba(0,0,0,0.15);
	    position: relative;
	}
	
	&.open{
		visibility: visible;
		opacity: 1;

		.ast-content-main {
			transform: translateY(0);
			opacity: 1;
			width: 100%;
		}
	}
	
	.ast-qv-image-slider {
		position: relative;
		
		.ast-qv-slides li {
			list-style: none;
		}

		.flex-control-nav {
			margin: 0;
			padding: 0;
			width: 100%;
			position: absolute;
			bottom: 10px;
			text-align: center;
		}
		
		.flex-control-nav li {
			margin: 0 6px;
			display: inline-block;
			zoom: 1;
			vertical-align: middle;
		}
		
		.flex-control-paging li a {
			width: 11px;
			height: 11px;
			display: block;
			background: #666;
			background: rgba(0, 0, 0, 0.5);
			cursor: pointer;
			text-indent: -9999px;
			box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
			border-radius: 20px;
			
			&.flex-active {
				background: #000;
				background: rgba(0, 0, 0, 0.9);
				cursor: default;
			}
		}

		.flex-direction-nav {
		    margin: 0;
		    padding: 0;
		    list-style: none;
			
			a {
			    text-decoration: none;
			    display: block;
			    width: 20px;
			    height: 20px;
			    margin: -20px 0 0;
			    position: absolute;
			    top: 50%;
			    z-index: 10;
			    overflow: hidden;
			    opacity: 0;
			    cursor: pointer;
			    color: rgba(0, 0, 0, 0.8);
			    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
			    transition: all 0.3s ease-in-out;
			}
			
			.flex-prev:before,
			.flex-next:before {
				content: "\e900";
				font-family: 'Astra' !important;
				speak: none;
				font-size: 20px;
				font-style: normal;
				font-weight: normal;
				font-variant: normal;
				text-transform: none;
				line-height: 1;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}

			.flex-prev {
			    left: -50px;
			    transform: rotate(90deg);
			}
			
			.flex-next {
			    right: -50px;
			    text-align: right;
			    transform: rotate(-90deg);
			}
		}

		&:hover .flex-direction-nav{
			.flex-prev {
			    opacity: 0.7;
			    left: 10px;
			}
			
			.flex-next {
			    opacity: 0.7;
			    right: 10px;
			}
		}
	}
}

#ast-quick-view-content {
    height: 100%;
	
	div.product {
		padding: 0;
		display: inline-block;
    	vertical-align: middle;
	}

	div.images {
	    width: 50%;
	    float: left;
	    opacity: 1 !important;
	    margin: 0;
	}

	div.summary {
	    margin: 0;
	    padding: 30px;
	    width: 50%;
	    float: left;
	    
	    @media( max-width: $mx-col-md ) {
	    	form.cart .button {
				padding: 10px;
	    	}
	    }
	    @media( min-width: $col-sm ) {
	    	content: '544';
		    overflow-y: auto;
		    padding-bottom: calc(70px + 1em);

		    form.cart {
				position: absolute;
				bottom: 0;
				background: #fff;
				margin: 0 -30px;
				padding: 20px 30px 30px;
				width: 50%;
				width: calc( 50% - 30px );
		    }
	    }

	    .added_to_cart {
	    	padding-top: 5px;
	    }
	}
	
	div.woocommerce-product-rating{
		
		&:after,
		&:before {
	    	content: '';
	    	display: table;
	    	clear: both;
	    }
		
		a.woocommerce-review-link {
		    display: none;
		}
	}
	
	.onsale {
	    top: 15px;
	    left: 15px;
	    right: auto;
	}
}

#ast-quick-view-close {
	position: absolute;
	font-size: 22px;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    opacity: .7;
	text-align: center;
	z-index: 2;

	&:before{
		content: "\e5cd";
	    font-family: 'Astra';
	    text-decoration: inherit;
	}
	
	&:hover {
		opacity: 1;
		transition: all 0.2s ease;
	}
}

@media( max-width: $mx-col-sm ) {
    #ast-quick-view-content{
		div.images,
		div.summary {
        	width: 100%;
        	float: none;
    	}
		div.summary {
			margin: 0;
			padding: 15px;
			width: 100%;
			float: left;
		}
    }
}

/* Button On Page and Image */
.astra-shop-thumbnail-wrap {
	position: relative;
}

.ast-quick-view-text {
    position: absolute;
    opacity: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    min-height: 2em;
    background: rgba(0, 0, 0, 0.7 );
    color: #fff;
	
	&:hover {
    	background: #000000;
    	color: #fff;
	}
}

.astra-shop-thumbnail-wrap:hover .ast-quick-view-text {
	opacity: 1;
}

.woocommerce #ast-quick-view-modal div.product form.cart .button.single_add_to_cart_button {
    padding: 10px 20px;
}

.woocommerce #ast-quick-view-modal div.product form.cart .button.single_add_to_cart_button.loading {
    padding-right: 40px;
}