/* Syvo Shape Cuts – frontend styles */

:where(.syvo-sc-on) {
	position: relative;
	--syvo-sc-top-type: none;
	--syvo-sc-right-type: none;
	--syvo-sc-bottom-type: none;
	--syvo-sc-left-type: none;
	--syvo-sc-corner-type: none;
	--syvo-sc-preset: none;
	--syvo-sc-stroke: 0;
}

.syvo-sc-on > .elementor-widget-container {
	position: relative;
}

.syvo-sc-stroke {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
	overflow: visible;
}

/* ---------- Pinned element (button etc.) inside parent's cut ---------- */
.syvo-pin-on {
	position: absolute !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	flex: none !important;
	z-index: 10;
}

.syvo-pin-on.syvo-ps-top,
.syvo-pin-on.syvo-pa-top {
	top: calc(var(--syvo-e-top-d, var(--syvo-sc-top-d, 60px)) * var(--syvo-pin-f, .5));
	bottom: auto;
	right: auto;
	left: var(--syvo-e-top-c, var(--syvo-sc-top-pos, 50%));
	transform: translate(calc(-50% + var(--syvo-pin-x, 0px)), calc(-50% + var(--syvo-pin-y, 0px))) scale(var(--syvo-pin-s, 1));
}

.syvo-pin-on.syvo-ps-bottom,
.syvo-pin-on.syvo-pa-bottom {
	bottom: calc(var(--syvo-e-bottom-d, var(--syvo-sc-bottom-d, 60px)) * var(--syvo-pin-f, .5));
	top: auto;
	right: auto;
	left: var(--syvo-e-bottom-c, var(--syvo-sc-bottom-pos, 50%));
	transform: translate(calc(-50% + var(--syvo-pin-x, 0px)), calc(50% + var(--syvo-pin-y, 0px))) scale(var(--syvo-pin-s, 1));
}

.syvo-pin-on.syvo-ps-left,
.syvo-pin-on.syvo-pa-left {
	left: calc(var(--syvo-e-left-d, var(--syvo-sc-left-d, 60px)) * var(--syvo-pin-f, .5));
	right: auto;
	bottom: auto;
	top: var(--syvo-e-left-c, var(--syvo-sc-left-pos, 50%));
	transform: translate(calc(-50% + var(--syvo-pin-x, 0px)), calc(-50% + var(--syvo-pin-y, 0px))) scale(var(--syvo-pin-s, 1));
}

.syvo-pin-on.syvo-ps-right,
.syvo-pin-on.syvo-pa-right {
	right: calc(var(--syvo-e-right-d, var(--syvo-sc-right-d, 60px)) * var(--syvo-pin-f, .5));
	left: auto;
	bottom: auto;
	top: var(--syvo-e-right-c, var(--syvo-sc-right-pos, 50%));
	transform: translate(calc(50% + var(--syvo-pin-x, 0px)), calc(-50% + var(--syvo-pin-y, 0px))) scale(var(--syvo-pin-s, 1));
}

/* ---------- Slider navigation slot ---------- */
.syvo-nav-on.elementor-widget {
	position: relative;
}

.syvo-sc-nav-slot {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--syvo-nav-gap, 12px);
	width: max-content;
}

.syvo-sc-nav-slot > * {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: auto !important;
}

.syvo-sc-nav-slot > .elementor-swiper-button-prev,
.syvo-sc-nav-slot > .swiper-button-prev { order: 1; }
.syvo-sc-nav-slot > .swiper-pagination { order: 2; }
.syvo-sc-nav-slot > .elementor-swiper-button-next,
.syvo-sc-nav-slot > .swiper-button-next { order: 3; }

.syvo-nav-on.syvo-ns-top > .syvo-sc-nav-slot,
.syvo-nav-on.syvo-na-top > .syvo-sc-nav-slot {
	top: calc(var(--syvo-e-top-d, var(--syvo-sc-top-d, 60px)) * var(--syvo-nav-f, .5));
	left: var(--syvo-e-top-c, var(--syvo-sc-top-pos, 50%));
	transform: translate(calc(-50% + var(--syvo-nav-x, 0px)), calc(-50% + var(--syvo-nav-y, 0px)));
}

.syvo-nav-on.syvo-ns-bottom > .syvo-sc-nav-slot,
.syvo-nav-on.syvo-na-bottom > .syvo-sc-nav-slot {
	bottom: calc(var(--syvo-e-bottom-d, var(--syvo-sc-bottom-d, 60px)) * var(--syvo-nav-f, .5));
	left: var(--syvo-e-bottom-c, var(--syvo-sc-bottom-pos, 50%));
	transform: translate(calc(-50% + var(--syvo-nav-x, 0px)), calc(50% + var(--syvo-nav-y, 0px)));
}

.syvo-nav-on.syvo-ns-left > .syvo-sc-nav-slot,
.syvo-nav-on.syvo-na-left > .syvo-sc-nav-slot {
	left: calc(var(--syvo-e-left-d, var(--syvo-sc-left-d, 60px)) * var(--syvo-nav-f, .5));
	top: var(--syvo-e-left-c, var(--syvo-sc-left-pos, 50%));
	flex-direction: column;
	transform: translate(calc(-50% + var(--syvo-nav-x, 0px)), calc(-50% + var(--syvo-nav-y, 0px)));
}

.syvo-nav-on.syvo-ns-right > .syvo-sc-nav-slot,
.syvo-nav-on.syvo-na-right > .syvo-sc-nav-slot {
	right: calc(var(--syvo-e-right-d, var(--syvo-sc-right-d, 60px)) * var(--syvo-nav-f, .5));
	top: var(--syvo-e-right-c, var(--syvo-sc-right-pos, 50%));
	flex-direction: column;
	transform: translate(calc(50% + var(--syvo-nav-x, 0px)), calc(-50% + var(--syvo-nav-y, 0px)));
}

/* ---------- Auto button inside the cut ---------- */
.syvo-auto-btn {
	--syvo-pin-f: var(--syvo-btn-f, .5);
	--syvo-pin-x: var(--syvo-btn-x, 0px);
	--syvo-pin-y: var(--syvo-btn-y, 0px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	padding: 12px 28px;
	border-radius: 999px;
	background-color: #0b5ea8;
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
	--syvo-pin-s: var(--syvo-btn-scale, 1);
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, filter .25s ease;
}

.syvo-sc-on .syvo-auto-btn,
.syvo-sc-on .syvo-auto-btn:visited {
	color: #fff;
	text-decoration: none;
}

.syvo-auto-btn:hover,
.syvo-auto-btn:focus-visible {
	filter: brightness(1.08);
}

/* دکمه هم‌شکل جایگاه: اندازه و گردی از روی خود برش محاسبه می‌شود */
.syvo-pin-on.syvo-auto-fit {
	width: var(--syvo-btn-w) !important;
	height: var(--syvo-btn-h) !important;
	padding: 0 10px;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
	overflow: hidden;
	border-radius: var(--syvo-btn-r, 999px);
}