/**
 * کد سنتر — چیدمان تصویری حرفه‌ای.
 * تمام انتخاب‌گرها با cc-image-stage محدود شده‌اند تا روی قالب یا ویجت دیگری اثر نگذارند.
 */

.cc-image-stage,
.cc-image-stage *,
.cc-image-stage *::before,
.cc-image-stage *::after {
	box-sizing: border-box;
}

.cc-image-stage {
	--ccis-accent: #2563eb;
	--ccis-muted: #667085;
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	direction: rtl;
}

.cc-image-stage__canvas {
	position: relative;
	display: block;
	width: 100%;
	height: auto !important;
	min-height: 0;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	isolation: isolate;
	background: transparent;
	aspect-ratio: auto !important;
}

.cc-image-stage.has-no-background .cc-image-stage__canvas {
	min-height: 420px;
	background: #f4f6f8;
}

.cc-image-stage__background {
	position: relative;
	inset: auto;
	z-index: 0;
	display: block;
	width: 100%;
	height: auto !important;
	margin: 0;
	padding: 0;
}

.cc-image-stage__background-image {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain !important;
	object-position: center;
}

.cc-image-stage__layers {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.cc-image-stage__layer {
	--ccis-x: 10%;
	--ccis-y: 10%;
	--ccis-width: 24%;
	--ccis-height: auto;
	--ccis-rotation: 0deg;
	position: absolute;
	left: var(--ccis-x);
	top: var(--ccis-y);
	display: block;
	width: var(--ccis-width);
	height: var(--ccis-height);
	max-width: none;
	margin: 0;
	padding: 0;
	transform: rotate(var(--ccis-rotation));
	transform-origin: center;
	pointer-events: auto;
}

/* قفل نسبت باید از مقدار ارتفاع تولیدشده برای کنترل ریسپانسیو قوی‌تر باشد. */
.cc-image-stage .cc-image-stage__layer.is-ratio-locked {
	--ccis-height: auto;
}

.cc-image-stage__layer-visual {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-decoration: none;
}

.cc-image-stage__layer-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}

.cc-image-stage__layer.is-ratio-free .cc-image-stage__layer-image {
	height: 100%;
	object-fit: var(--ccis-object-fit, cover);
}

.cc-image-stage__layer[data-object-fit="contain"] {
	--ccis-object-fit: contain;
}

.cc-image-stage__layer[data-object-fit="fill"] {
	--ccis-object-fit: fill;
}

.cc-image-stage__empty-image {
	display: none;
}

.cc-image-stage.is-editor-ready .cc-image-stage__canvas {
	outline: 1px dashed rgba(37, 99, 235, 0.35);
	outline-offset: 2px;
}

.cc-image-stage.is-editor-ready .cc-image-stage__canvas::after {
	position: absolute;
	inset: 0;
	z-index: 900;
	display: none;
	content: "";
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(37, 99, 235, 0.09) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(37, 99, 235, 0.09) 1px, transparent 1px);
	background-size: 5% 5%;
}

.cc-image-stage.is-editor-ready[data-show-grid="yes"] .cc-image-stage__canvas::after {
	display: block;
}

.cc-image-stage.is-editor-ready .cc-image-stage__layer {
	cursor: grab;
	touch-action: none;
	will-change: left, top, width, height;
}

.cc-image-stage.is-editor-ready .cc-image-stage__layer.is-position-locked {
	cursor: not-allowed;
}

.cc-image-stage.is-editor-ready .cc-image-stage__layer a {
	cursor: inherit;
}

.cc-image-stage.is-editor-ready .cc-image-stage__layer.is-selected {
	outline: 2px solid var(--ccis-accent);
	outline-offset: 2px;
}

.cc-image-stage.is-editor-ready .cc-image-stage__layer.is-dragging,
.cc-image-stage.is-editor-ready .cc-image-stage__layer.is-resizing {
	cursor: grabbing;
	transition: none !important;
}

.cc-image-stage__handle {
	position: absolute;
	z-index: 20;
	display: none;
	width: 15px;
	height: 15px;
	padding: 0;
	background: #fff;
	border: 2px solid var(--ccis-accent);
	border-radius: 50%;
	box-shadow: 0 2px 7px rgba(20, 35, 65, 0.25);
	pointer-events: auto;
	touch-action: none;
}

.cc-image-stage__layer.is-selected .cc-image-stage__handle {
	display: block;
}

.cc-image-stage__handle[data-handle="nw"] {
	top: -9px;
	left: -9px;
	cursor: nwse-resize;
}

.cc-image-stage__handle[data-handle="ne"] {
	top: -9px;
	right: -9px;
	cursor: nesw-resize;
}

.cc-image-stage__handle[data-handle="sw"] {
	bottom: -9px;
	left: -9px;
	cursor: nesw-resize;
}

.cc-image-stage__handle[data-handle="se"] {
	right: -9px;
	bottom: -9px;
	cursor: nwse-resize;
}

.cc-image-stage.is-editor-ready .cc-image-stage__empty-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 80px;
	padding: 12px;
	color: var(--ccis-muted);
	font-size: 11px;
	font-weight: 700;
	background: repeating-linear-gradient(-45deg, #f7f8fa 0, #f7f8fa 8px, #eef1f5 8px, #eef1f5 16px);
	border: 1px dashed #aeb7c5;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.cc-image-stage *,
	.cc-image-stage *::before,
	.cc-image-stage *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}
}