/* Modal effects adapted from https://codepen.io/ol-ivier/pen/VYPzYJo */

.ptik-modal[data-ptik-modal-open-effect] {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

.ptik-modal[data-ptik-modal-open-effect].is-open {
	visibility: visible;
	opacity: 1;
}

.ptik-modal--sheet {
	align-items: flex-start;
	justify-content: center;
	padding: 0;
}

.ptik-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.ptik-modal__content {
	position: relative;
	z-index: 1;
}

.ptik-modal.is-closing {
	pointer-events: none;
}

@keyframes ptik-mfx-bounce-in {
	0% { transform: scale(0.3); opacity: 0; }
	50% { transform: scale(1.1); }
	70% { transform: scale(0.9); }
	100% { transform: scale(1); opacity: 1; }
}

/* 1 roll-top */
.ptik-mfx-roll-top { perspective: 800px; }
.ptik-mfx-roll-top .ptik-modal__content { transform: translate3d(0, 0, 0) rotateX(90deg); transform-origin: top center; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-roll-top.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotateX(0deg); }

/* 2 roll-left */
.ptik-mfx-roll-left { perspective: 1000px; }
.ptik-mfx-roll-left .ptik-modal__content { transform: translate3d(0, 0, 0) rotateY(90deg); transform-origin: left center; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-roll-left.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotateY(0deg); }

/* 3 roll-bottom */
.ptik-mfx-roll-bottom { perspective: 800px; }
.ptik-mfx-roll-bottom .ptik-modal__content { transform: translate3d(0, 0, 0) rotateX(-90deg); transform-origin: bottom center; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-roll-bottom.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotateX(0deg); }

/* 4 roll-right */
.ptik-mfx-roll-right { perspective: 1000px; }
.ptik-mfx-roll-right .ptik-modal__content { transform: translate3d(0, 0, 0) rotateY(-90deg); transform-origin: right center; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-roll-right.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotateY(0deg); }

/* 5 slide-roll-left */
.ptik-mfx-slide-roll-left { perspective: 1000px; }
.ptik-mfx-slide-roll-left .ptik-modal__content { transform: translate3d(-150%, 0, 0) rotateY(90deg); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-slide-roll-left.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotateY(0deg); }

/* 6 slide-roll-right */
.ptik-mfx-slide-roll-right { perspective: 1000px; }
.ptik-mfx-slide-roll-right .ptik-modal__content { transform: translate3d(150%, 0, 0) rotateY(-90deg); transform-origin: right center; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-slide-roll-right.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotateY(0deg); }

/* 7 slide-roll-top */
.ptik-mfx-slide-roll-top { perspective: 800px; }
.ptik-mfx-slide-roll-top .ptik-modal__content { transform: translate3d(0, -150%, 0) rotateX(90deg); transform-origin: top center; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-slide-roll-top.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotateX(0deg); }

/* 8 slide-roll-bottom */
.ptik-mfx-slide-roll-bottom { perspective: 800px; }
.ptik-mfx-slide-roll-bottom .ptik-modal__content { transform: translate3d(0, 150%, 0) rotateX(-90deg); transform-origin: bottom center; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-slide-roll-bottom.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotateX(0deg); }

/* 9 spring */
.ptik-mfx-spring .ptik-modal__content { transform: scale(0); transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.ptik-mfx-spring.is-open .ptik-modal__content { transform: scale(1); }

/* 10 zoom-rotate */
.ptik-mfx-zoom-rotate .ptik-modal__content { transform: scale(0) rotate(45deg); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-zoom-rotate.is-open .ptik-modal__content { transform: scale(1) rotate(0deg); }

/* 11 perspective-3d */
.ptik-mfx-perspective-3d { perspective: 600px; }
.ptik-mfx-perspective-3d .ptik-modal__content { transform: translateZ(-300px) rotateX(30deg); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-perspective-3d.is-open .ptik-modal__content { transform: translateZ(0) rotateX(0deg); }

/* 12 origami-left */
.ptik-mfx-origami-left .ptik-modal__content { transform: rotate(-90deg) scale(0.3) skewX(20deg); transform-origin: top left; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-origami-left.is-open .ptik-modal__content { transform: rotate(0deg) scale(1) skewX(0deg); }

/* 13 bounce */
.ptik-mfx-bounce .ptik-modal__content { transform: scale(0.3); opacity: 0; }
.ptik-mfx-bounce.is-open .ptik-modal__content { animation: ptik-mfx-bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }

/* 14 diagonal-tl */
.ptik-mfx-diagonal-tl .ptik-modal__content { transform: translate3d(-200%, 200%, 0) rotate(45deg); transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-diagonal-tl.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotate(0deg); }

/* 15 convex */
.ptik-mfx-convex { perspective: 800px; }
.ptik-mfx-convex .ptik-modal__content { transform: scale(0.3) rotateX(20deg) rotateY(20deg); border-radius: 50%; opacity: 0; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease; }
.ptik-mfx-convex.is-open .ptik-modal__content { transform: scale(1) rotateX(0deg) rotateY(0deg); border-radius: var(--radius1, 10px); opacity: 1; }

/* 16 diagonal-tr */
.ptik-mfx-diagonal-tr .ptik-modal__content { transform: translate3d(200%, -200%, 0) rotate(-45deg); transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-diagonal-tr.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotate(0deg); }

/* 17 diagonal-bl */
.ptik-mfx-diagonal-bl .ptik-modal__content { transform: translate3d(-200%, -200%, 0) rotate(-45deg); transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-diagonal-bl.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotate(0deg); }

/* 18 diagonal-br */
.ptik-mfx-diagonal-br .ptik-modal__content { transform: translate3d(200%, 200%, 0) rotate(45deg); transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-diagonal-br.is-open .ptik-modal__content { transform: translate3d(0, 0, 0) rotate(0deg); }

/* 19 origami-right */
.ptik-mfx-origami-right .ptik-modal__content { transform: rotate(90deg) scale(0.3) skewX(-20deg); transform-origin: top right; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-origami-right.is-open .ptik-modal__content { transform: rotate(0deg) scale(1) skewX(0deg); }

/* 20 flip-x */
.ptik-mfx-flip-x { perspective: 800px; }
.ptik-mfx-flip-x .ptik-modal__content { transform: rotateX(180deg); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-flip-x.is-open .ptik-modal__content { transform: rotateX(0deg); }

/* 21 flip-ys */
.ptik-mfx-flip-ys { perspective: 800px; }
.ptik-mfx-flip-ys .ptik-modal__content { transform: rotateY(180deg) scale(0.3); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-flip-ys.is-open .ptik-modal__content { transform: rotateY(0deg) scale(1); }

/* 22 flip-ys-reverse */
.ptik-mfx-flip-ys-reverse { perspective: 800px; }
.ptik-mfx-flip-ys-reverse .ptik-modal__content { transform: rotateY(-180deg) scale(0.3); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-flip-ys-reverse.is-open .ptik-modal__content { transform: rotateY(0deg) scale(1); }

/* 23 flip-mix */
.ptik-mfx-flip-mix { perspective: 800px; }
.ptik-mfx-flip-mix .ptik-modal__content { transform: rotateX(180deg) rotateY(180deg) scale(0.3); transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptik-mfx-flip-mix.is-open .ptik-modal__content { transform: rotateX(0deg) rotateY(0deg) scale(1); }

/* 25 fade */
.ptik-mfx-fade .ptik-modal__content { opacity: 0; transition: opacity 0.45s ease; }
.ptik-mfx-fade.is-open .ptik-modal__content { opacity: 1; }

/* بعد از اتمام انیمیشن، transform را پاک می‌کنیم تا دکمه‌های داخل مودال جابجا نشوند */
.ptik-modal.is-open.is-settled .ptik-modal__content {
	transform: none !important;
	transition: none !important;
}

.ptik-modal.is-open.is-settled.ptik-mfx-fade .ptik-modal__content {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ptik-modal,
	.ptik-modal__content,
	[class*="ptik-mfx-"] .ptik-modal__content {
		transition: none !important;
		animation: none !important;
	}
}

.ptik-content-image-modal .ptik-modal__content {
	max-width: min(96vw, 1200px);
	max-height: 92vh;
	background: transparent;
}

.ptik-content-image-modal__img {
	display: block;
	max-width: 96vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	border-radius: var(--radius1, 10px);
}

.ptik-content-image-modal__close {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}