@import "addons/jet-popup-action-button";
@import "addons/jet-popup-mailchimp";

.jet-popup.jet-popup--front-mode {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: stretch;
	z-index: var( --jp-z-index, 999 );

	.jet-popup__inner {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: var( --jp-container-hor-position, center );
		align-items: var( --jp-container-ver-position, center );
	}

	.jet-popup__overlay {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		opacity: 0;
		background-color: var( --jp-overlay-bg-color, rgba( 0, 0, 0, 0.5) );
		background-image: var( --jp-overlay-bg-image, none );
		background-position: var( --jp-overlay-bg-position, center center );
		background-repeat: var( --jp-overlay-bg-repeat, no-repeat );
		background-size: var( --jp-overlay-bg-size, auto );
	}

	.jet-popup__container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: stretch;
		width: var( --jp-container-width, 800px );
		max-width: 100%;
		height: var( --jp-container-height, auto );
		max-height: 100%;
		margin-top: var( --jp-container-ver-margin, 0px );
		margin-right: var( --jp-container-hor-margin, 0px );
		margin-bottom: var( --jp-container-ver-margin, 0px );
		margin-left: var( --jp-container-hor-margin, 0px );

		z-index: 2;
		opacity: 0;
	}

	.jet-popup__container-inner {
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: var( --jp-content-ver-position, flex-start );
		align-items: stretch;
		padding-top: var( --jp-container-ver-padding, 20px );
		padding-right: var( --jp-container-hor-padding, 20px );
		padding-bottom: var( --jp-container-ver-padding, 20px );
		padding-left: var( --jp-container-hor-padding, 20px );
		background-color: var( --jp-container-bg-color, white );
		background-image: var( --jp-container-bg-image, initial );
		background-position: var( --jp-container-bg-position, center center );
		background-repeat: var( --jp-container-bg-repeat, no-repeat );
		background-size: var( --jp-container-bg-size, auto );
		border: var( --jp-container-border, none );
		border-radius: var( --jp-container-border-radius, inherit );
		box-shadow: var( --jp-container-box-shadow, none );
		z-index: 1;

		> .elementor {
			position: relative;
			z-index: 2;
		}
	}

	.jet-popup__container-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.jet-popup__container-content {
		position: relative;
		z-index: 2;
	}

	.jet-popup__close-button {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0px;
		right: 0px;
		cursor: pointer;
		z-index: 2;
		transition: all 0.2s ease;

		width: var( --jp-close-button-size, 32px );
		height: var( --jp-close-button-size, 32px );
		font-size: var( --jp-close-button-icon-size, 16px );
		border: var( --jp-close-button-border, none );
		border-radius: var( --jp-close-button-border-radius, inherit );
		color: var( --jp-close-button-icon-color, #fff );
		background-color: var( --jp-close-button-bg-color, #000 );
		transform: translate( var( --jp-close-button-translate-x, 0 ), var( --jp-close-button-translate-y, 0 ) );

		i {
			line-height: 1;
		}

		svg {
			width: var( --jp-close-button-icon-size, 16px );
			height: auto;
			fill: var( --jp-close-button-icon-color, #fff );

			path {
				fill: currentColor;
			}
		}
	}

	&.jet-popup--loading-state {

		.jet-popup-loader {
			display: block;
		}

		.jet-popup__container-inner {
			display: none;
		}

		.jet-popup__close-button {
			display: none;
		}
	}

	&.jet-popup--hide-state {
		opacity: 0;
		pointer-events: none;
	}

	&.jet-popup--show-state {
		opacity: 1;
		pointer-events: none;

		.jet-popup__inner {
			pointer-events: none;
		}

		.jet-popup__overlay {
			pointer-events: all;
		}

		.jet-popup__container {
			pointer-events: all;
		}
	}

	&.jet-popup--animation-flip-x {
		perspective: 1000px;

		.jet-popup__container {
			transform-style: preserve-3d;
		}
	}

	&.jet-popup--animation-flip-y {
		perspective: 1000px;

		.jet-popup__container {
			transform-style: preserve-3d;
		}
	}

}

.jet-popup.jet-popup--single-preview {
	.jet-popup__overlay {
		opacity: 1;
	}

	.jet-popup__container {
		opacity: 1;
	}

	#wpadminbar {

	}
}

.single-jet-popup {
	background-image: url( '../image/transparent.jpg' );
	background-repeat: repeat;
	height: 100vh;
}

.jet-popup-cursor-pointer {
	cursor: pointer;
}

.jet-popup-prevent-scroll {
	overflow: hidden;
	max-height: 100vh;
}

.jet-popup-loader {
	display: none;
	width: 48px;
	height: 48px;
	border: 4px rgba( #fff,0.15 ) solid;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #fff;
	border-radius: 50%;
	animation: spCircRot .6s infinite linear;
}

@keyframes spCircRot {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}