/* -------------------------------------------
	Popup
		- Popup
		- Popup Close
		- Popup Content
		- Popup Login
		- Popup Newsletter
		- Popup Video
		- Popup Zoom, Flip effect
		- Popup Product
		- Popup Product Quickview Zoom
---------------------------------------------- */
// issue: not optimized newsletter, (newsletter,login,quickview)

// Popup
.mfp-bg {
	background: #000;
	opacity: 0;
	transition: opacity .3s ease-out;

	&.mfp-ready {
		opacity: .7;
	}
}
.mfp-container {
	padding: 4rem 2rem;
}
.mfp-preloader {
	margin-top: 0;
}

.mfp-wrap {
	overflow: hidden !important;
}

// Popup Close
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.4
}
.mfp-bg.mfp-removing, 
.mfp-bg.mfp-removing.mfp-fade {
	opacity: 0;
}
.mfp-product .mfp-container {
	overflow-y: auto;
}
.mfp-product .product {
	box-shadow: 0 10px 20px 5px rgba(0,0,0,0.2);
}
.mfp-close {
	transform: rotateZ(45deg);
	transition: transform .3s;
	opacity: 1;
	width: 18px;
	height: 18px;
	text-indent: -9999px;

	.mfp-wrap & {
		top: 20px;
		#{$right}: 20px;
	}
	.mfp-content & {
		top: -25px;
		#{$right}: 0;
	}
	.mfp-image-holder &,
	.mfp-iframe-holder & {
		top: 15px;
		#{$right}: 15px;
		width: 18px;
		text-align: $left;
	}
	// .mfp-removing &, // issue
	span {
		display: none;
	}
	&::before,
	&::after {
		content: '';
		display: block;
		position: absolute;
		background: #fff;
		width: 2px;
		height: 100%;
		top: 0;
		left: calc(50% - 1px);
	}
	&::before {
		width: 100%;
		height: 2px;
		top: calc(50% - 1px);
		left: 0;
	}

	&:hover,
	&:focus {
		transform: rotateZ(135deg) scale(1.5);
	}
}
button.mfp-close {
	overflow: hidden;	
}

// Popup Content
.mfp-content > * {
	position: relative;
	margin: auto;
	background: #fff;
	box-shadow: 5px 5px 20px rgba(0,0,0,.1);
	opacity: 0;

	.mfp-ready & {
		opacity: 1;
	}

	.mfp-removing & {
		opacity: 0;
	}
}

// Popup - Login
	.login-popup {
		position: relative;
		max-width: 490px;
		margin-left: auto;
		margin-right: auto;
		padding: 4rem;

		a {
			color: #999;

			&:hover,
			&:focus {
				color: var(--rio-primary-color);
			}
		}

		.login {
			display: block;
		}
		
		.tab-pane {
			padding-bottom: 0;
		}

		.tab .nav-tabs {
			justify-content: center;
			align-items: center;
			font-size: font-size(1.8rem);
			border-bottom: none;
			color: #ccc;

			.nav-item {
				margin-#{$right}: 0;
			}

			.delimiter {
				margin: 0 8px;
			}
		}

		.tab .nav-link {
			padding: 0;
			font-weight: 700;
			color: #999;
			transition: color .4s, font-size .1s;
			font-size: font-size(18px);

			&:hover {
				color: var(--rio-primary-color);
			}

			&.active {
				font-size: font-size(3rem);
				color: #222;
			}
		}

		.social-login {
			margin-top: 2.5rem;
			color: #999;

			.title {
				margin-bottom: 1.5rem;
				font-size: font-size(1.2rem);
				font-weight: 400;
				color: #666;

				&::before,
				&::after {
					height: 1px;
				}
			}
		}

		.social-login .social-icon {
			font-size: font-size(1.4rem);
			width: font-size(3.6rem);
			height: font-size(3.6rem);
		}
		.submit-status {
			display: none;
		}
	}
	@include mq(md, max) {
		.login-popup {
			padding: 3.5rem 1.5rem;
		}
	}
	.mfp-login .mfp-preloader {
		max-width: 50rem;
		transform: translateY(-50%);
		margin-left: auto;
		margin-right: auto;
	}

	.mfp-preloader .login-popup {
		height: 43.5rem;
		background: #fff;
	}

// Popup - Newsletter
.mfp-popup-template {
	.popup {
		background: none;
		margin-left: auto;
		margin-right: auto;
		max-width: 600px;
		background: #fff;
		width: calc(100% - 20px);
	}

	.mfp-content {
		position: static;
	}

	.mfp-preloader {
		max-width: 60rem;
		transform: translateY(-50%);
		margin-left: auto;
		margin-right: auto;
		height: 40rem;
		transition: max-width .3s;
	}
	.d-loading {
		background: transparent;
	}
}

// Popup - Video
.mfp-video-popup {
	.mfp-content {
		max-width: 1000px;
	}
	video {
		width: 100%;
	}
}

// Popup Zoom, Flip effect: issue: used?
/*
.mfp-ready.mfp-zoom-popup .mfp-content{
	transform: scale(1); 
}
.mfp-zoom-popup .mfp-content, .mfp-removing.mfp-zoom-popup .mfp-content {
	transition: .2s ease-in-out; 
	transform: scale(0.8); 
}
.mfp-ready.mfp-flip-popup .mfp-content {
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}
.mfp-flip-popup .mfp-content, .mfp-removing.mfp-flip-popup .mfp-content {
	transition: .3s ease-out;
	transform: translateY(-20px) perspective( 600px ) rotateX( 20deg );
}*/

.mfp-figure {
	line-height: normal;
}

// Responsive

// Popup - Product
.mfp-product {
	.mfp-container {
		padding: 4rem 2rem 2rem;
	}
	.mfp-content,
	.mfp-preloader {
		width: 100%;
		max-width: 98.8rem;
		margin: auto;
	}
	.mfp-figure {
		background: transparent;
	}
	.mfp-preloader {
		transform: translateY(-50%);
		width: calc(100% - 6rem);
	}
	.woocommerce-product-gallery {
		margin-bottom: 0;
	}
	.product {
		background: #fff;
		padding: 3rem 2rem;
		transition: opacity .3s;

		.woocommerce-product-gallery__image {
			width: 100%;
		}

		img {
			width: 100%;
		}

		.col-md-6 {
			min-height: 15rem;
		}
	}
	figcaption {
		display: none;
	}
	.product {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.mfp-close {
		position: absolute;
		top: -2.7rem;
		#{$right}: 0;
	}
	img.mfp-img {
		padding: 0;
	}
	.thumbs {
		display: flex;
		> img {
			flex: 0 0 25%;
			max-width: 25%;
		}
	}
	.mfp-animated-image {
		margin: 5px;
	}
	@include mq(md) {
		.product-gallery {
			margin-bottom: 0;
		}
		&:not(.mfp-offcanvas) .product-single.product-quickview .summary {
			position: absolute;
			left: 1rem;
			right: 1rem;
			top: 0;
			overflow-y: auto;
			padding-bottom: 0;
			height: 100%;
		}
	}
	@include mq(md, max) {
		.product {
			padding: 2rem 1rem;
		}
		&:not(.mfp-offcanvas) .summary {
			margin-top: 2rem;
			padding-bottom: 1rem;
		}
	}
}

.mfp-figure:after {
	content: none;
}

.mfp-with-zoom {
	.mfp-container,
	&.mfp-bg {
		opacity: 0;
		-webkit-backface-visibility: hidden;
		transition: all 0.3s ease-out;
	}

	&.mfp-ready .mfp-container {
		opacity: 1;
	}
	&.mfp-ready.mfp-bg {
		opacity: 0.4;
	}

	&.mfp-removing .mfp-container, 
	&.mfp-removing.mfp-bg {
		opacity: 0;
	}
}
.mfp-image-holder .mfp-close {
	width: 18px;
	top: -30px;
	color: transparent;
}
// Load Animation
.mfp-anim {
	.summary > * {
		opacity: 0;
		transform: translateY(30px);
		transition: transform 0.55s cubic-bezier(.2,.75,.5,1), opacity 0.55s cubic-bezier(.2,.75,.5,1);
		transition-delay: .35s;
	}
	.summary > :nth-child(1) {
		transition-delay: .05s;
	}
	.summary > :nth-child(2) {
		transition-delay: .1s;
	}
	.summary > :nth-child(3) {
		transition-delay: .15s;
	}
	.summary > :nth-child(4) {
		transition-delay: .2s;
	}
	.summary > :nth-child(5) {
		transition-delay: .25s;
	}
	.summary > :nth-child(6) {
		transition-delay: .3s;
	}
	&.mfp-anim-finish .summary > * {
		opacity: 1;
		transform: none;
	}
}
// Off Canvas
.offcanvas {
	.offcanvas-overlay {
		position: fixed;
		#{$left}: 0;
		width: 100vw;
		top: -10vh;
		height: 120vh;
		background: rgba(0,0,0,.3);
		z-index: 9998;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s, visibility .3s;
	}

	.offcanvas-content {
		padding: 3rem;
		width: 34rem;
		max-width: 95vw;
		position: fixed;
		top: 0;
		right: -34rem;
		height: 110vh;
		min-width: auto;
		opacity: 1;
		visibility: visible;
		transition: right 0.6s;
		transform: none;
		z-index: 9999;
		background: #fff;
		overflow-y: auto;
	}

	&.opened .offcanvas-overlay {
		visibility: visible;
		opacity: 1;
	}

	&.opened .offcanvas-content {
		right: 0;
	}
}
.mfp-offcanvas {
	.mfp-container {
		animation: .4s ease-out if-ltr(slideInRight, slideInLeft);
	}
	.mfp-removing + & {
		.mfp-container {
			animation: .4s ease-in if-ltr(slideOutRight, slideOutLeft);
		}

		.mfp-container .mfp-content,
		.mfp-content > * {
			opacity: 1;
		}
	}
	.mfp-bg {
		transition: .4s;
	}
	.mfp-container {
		padding: 0;
		text-align: $right;
	}
	.mfp-content {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
	}
	.mfp-close {
		position: fixed;
		#{$right}: 42rem;
		top: 2rem;
		border-radius: 50%;
		width: 40px;
		height: 40px;

		&:before,
		&:after {
			background: #fff;
			transition: transform .3s;
		}

		&:before {
			width: 50%;
			left: 50%;
			transform: translateX(-50%);
		}

		&:after {
			height: 50%;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	// Product Quickview
	.woocommerce-product-gallery {
		padding: 0;
		margin-bottom: 0;
	}
	.product {
		width: 40rem;
		height: 100%;
		padding: 1.5rem;
		margin: side-values(0 0 0 auto);
		overflow-x: hidden;
		overflow-y: auto;
	}
	.mfp-preloader {
		overflow: hidden;
		width: 40rem;
		transform: none;
		height: 100%;
		top: 0;
		right: 0;
		margin: 0;
		left: auto;
	}
	.product-gallery, .product-single-carousel, .owl-stage-outer, .owl-stage, .owl-item, .woocommerce-product-gallery__image, .woocommerce-product-gallery__image a, .woocommerce-product-gallery__image img {
		height: 100%;
	}
	.summary .yith-wcwl-add-to-wishlist + .compare {
		margin-#{$left}: 1rem;
		&::after {
			border-#{$left}-width: 0;
	}
		&.remove_from_compare {
			margin-#{$left}: 3rem;
			top: -4px;
			&::after {
				border-#{$left}-width: 1px;
				#{$left}: -11px;
	}
	}
	}
}
@include mq(sm, max) {
	.mfp-offcanvas {
		.product {
			width: 31rem;
		}
		.mfp-close {
			#{$right}: 31rem;
			top: .5rem;
		}
		.summary .social-icons {
			display: inline-flex;
			margin-#{$right}: 1rem;
		}
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.product-quickview .cart .button {
		padding: 0 3rem;
	}
}

// Page Builders
body.riode_popup_template {
	main {
		min-height: 100vh;
	}

	.popup-overlay {
		content: '';
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(#000, 0.8);
		z-index: 10001;
	}

	.popup-container {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding-bottom: 0;
		background: #fff;
		width: calc(100% - 40px);
		z-index: 10001;
	}
}