/* 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; }

/* 26 fade + zoom — باز و بسته شدن نرم، مثل Fancybox */
.ptik-mfx-fade-zoom .ptik-modal__content {
	opacity: 0;
	transform: scale(0.75);
	transition: opacity 0.45s cubic-bezier(0.5, 0, 0.14, 1), transform 0.45s cubic-bezier(0.5, 0, 0.14, 1);
}
.ptik-mfx-fade-zoom.is-open .ptik-modal__content {
	opacity: 1;
	transform: scale(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 {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: min(96vw, 1200px);
	max-height: 100%;
	background: transparent;
}

.ptik-cim__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 96vw;
	border-radius: var(--ptik-modal-radius, 0px);
}

.ptik-content-image-modal__img,
.ptik-cim__video,
.ptik-cim__frame {
	display: block;
	max-width: 96vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	border-radius: var(--ptik-modal-radius, 0px);
	background: transparent;
}

.ptik-content-image-modal__img {
	--ptik-pan-x: 0px;
	--ptik-pan-y: 0px;
	--ptik-zoom: 1;
	transform: translate3d(var(--ptik-pan-x), var(--ptik-pan-y), 0) scale(var(--ptik-zoom));
	transform-origin: center center;
	transition: transform 0.45s cubic-bezier(0.5, 0, 0.14, 1);
}

.ptik-cim__video,
.ptik-cim__frame {
	width: min(96vw, 960px);
	height: min(54vw, 540px);
	max-height: 78vh;
	background: #000;
	border: 0;
}

.ptik-cim__video[hidden],
.ptik-cim__frame[hidden],
.ptik-content-image-modal__img[hidden] {
	display: none;
}

.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;
}

.ptik-content-image-modal--dark .ptik-modal__backdrop {
	background: rgba(24, 24, 27, 0.7);
}

.ptik-content-image-modal--dark .ptik-content-image-modal__close {
	display: none;
}

.ptik-cim__toolbar {
	display: none;
}

.ptik-content-image-modal--dark .ptik-cim__toolbar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	color: #dbdbdb;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.ptik-cim__tool,
.ptik-cim__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(24, 24, 27, 0.65);
	color: #dbdbdb;
	cursor: pointer;
}

.ptik-cim__tool:hover,
.ptik-cim__nav:hover {
	color: #fff;
	background: rgba(70, 70, 73, 0.65);
}

.ptik-cim__tool svg,
.ptik-cim__nav svg,
.ptik-cim__thumb-play svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ptik-cim__tool[hidden] {
	display: none;
}

.ptik-cim__counter {
	padding: 0 12px;
	font-size: 17px;
	line-height: 46px;
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.ptik-content-image-modal--simple .ptik-cim__toolbar:has(.ptik-cim__counter:not([hidden])) {
	position: absolute;
	bottom: 14px;
	left: 50%;
	z-index: 5;
	display: flex;
	transform: translateX(-50%);
}

.ptik-content-image-modal--simple .ptik-cim__tool {
	display: none;
}

.ptik-content-image-modal--simple .ptik-cim__counter {
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	line-height: 1.4;
}

.ptik-content-image-modal--simple.has-thumbs .ptik-cim__toolbar {
	bottom: 108px;
}

.ptik-cim__nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	transform: translateY(-50%);
}

.ptik-content-image-modal--simple .ptik-cim__nav {
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
}

.ptik-cim__nav--prev { right: 12px; }
.ptik-cim__nav--next { left: 12px; }

[dir="rtl"] .ptik-cim__nav svg {
	transform: scaleX(-1);
}

html[dir="ltr"] .ptik-cim__nav--prev { left: 12px; right: auto; }
html[dir="ltr"] .ptik-cim__nav--next { right: 12px; left: auto; }

.ptik-cim__nav[hidden] {
	display: none;
}

.ptik-cim__stage.is-zoomed,
.ptik-cim__stage.is-zoomed .ptik-content-image-modal__img {
	touch-action: none;
	cursor: grab;
	user-select: none;
}

.ptik-cim__stage.is-zoomed.is-dragging,
.ptik-cim__stage.is-zoomed.is-dragging .ptik-content-image-modal__img {
	cursor: grabbing;
}

.ptik-cim__stage.is-panning .ptik-content-image-modal__img {
	transition: none;
}

.ptik-content-image-modal.is-image-zoomed {
	overflow: hidden;
}

.ptik-content-image-modal.is-image-zoomed .ptik-modal__content,
.ptik-content-image-modal.is-image-zoomed .ptik-cim__stage {
	overflow: visible;
}

.ptik-cim__caption--below {
	margin: 16px auto;
	max-width: min(92vw, 900px);
	padding: 0 8px 16px;
	color: #fff;
	line-height: 1.5;
	text-align: center;
}

.ptik-content-image-modal--dark .ptik-cim__caption--below {
	color: #dbdbdb;
}

.ptik-cim__caption--overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	line-height: 1.5;
	text-align: center;
}

.ptik-content-image-modal--caption-overlay .ptik-cim__stage {
	overflow: hidden;
}

.ptik-cim__spinner {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ptik-cim__spinner[hidden] {
	display: none;
}

.ptik-cim__spinner svg {
	width: 50px;
	height: 50px;
	animation: ptik-cim-spin 2s linear infinite;
}

.ptik-cim__spinner circle {
	fill: none;
	stroke-width: 3.6;
}

.ptik-cim__spinner circle:first-child {
	stroke: rgba(255, 255, 255, 0.1);
}

.ptik-cim__spinner circle:last-child {
	stroke: #bbb;
	stroke-linecap: round;
	stroke-dasharray: 80 150;
	stroke-dashoffset: -20;
	animation: ptik-cim-dash 1.6s ease-in-out infinite;
}

.ptik-content-image-modal--simple .ptik-cim__spinner circle:first-child {
	stroke: rgba(0, 0, 0, 0.12);
}

.ptik-content-image-modal--simple .ptik-cim__spinner circle:last-child {
	stroke: #333;
}

@keyframes ptik-cim-spin {
	to { transform: rotate(360deg); }
}

@keyframes ptik-cim-dash {
	0% { stroke-dasharray: 1 150; stroke-dashoffset: 0; }
	50% { stroke-dasharray: 90 150; stroke-dashoffset: -35; }
	100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; }
}

.ptik-cim__thumbs {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: flex;
	gap: 8px;
	justify-content: safe center;
	overflow-x: auto;
	padding: 8px 16px 12px;
}

.ptik-cim__thumbs[hidden] {
	display: none;
}

.ptik-cim__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 96px;
	height: 72px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	opacity: 0.5;
	cursor: pointer;
}

.ptik-cim__thumb:hover,
.ptik-cim__thumb.is-active {
	opacity: 1;
}

.ptik-cim__thumb.is-active {
	box-shadow: inset 0 0 0 2px #ededed;
}

.ptik-cim__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ptik-cim__thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ptik-cim__thumb .ptik-cim__thumb-play svg {
	width: 28px;
	height: 28px;
	fill: rgba(0, 0, 0, 0.45);
	stroke: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.ptik-cim__thumb-play path {
	fill: #fff;
	stroke: none;
}

.ptik-content-image-modal.has-thumbs .ptik-content-image-modal__img,
.ptik-content-image-modal.has-thumbs .ptik-cim__video,
.ptik-content-image-modal.has-thumbs .ptik-cim__frame {
	max-height: calc(100vh - 180px);
}