/* Сравнение товаров */

.compare-table {
	/* min-height: 100dvh; */
	min-height: auto;
}

.compare-table.server-side:not(:has(.no-compare)) {
	filter: blur(0.625rem);
	transition: .2s;
	pointer-events: none;
	opacity: 0.3;
}

body:has(.compare-table.server-side):not(:has(.no-compare))::before {
	content: '';
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotateY(0deg);
	transform-style: preserve-3d;
	background-image: url(/wp-content/uploads/2025/11/logo.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 13.75rem;
	height: 3.4375rem;
	z-index: 99;
	animation: logo-spin 1.5s linear infinite;
}

/* небольшая перспектива для всей страницы, чтобы 3D выглядело лучше */
/* body {
    perspective: 50rem;
} */

@keyframes logo-spin {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}

	50% {
		transform: translate(-50%, -50%) scale(.9);
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

.compare-tabs__container {
	/* background: var(--dark-grey);
    padding: 3.5rem 2.25rem;
    width: 100%; */
	overflow: hidden;
	position: relative;
	border-radius: 0.625rem;
}



.tab-content {
	max-width: 97.5rem;
	width: 100%;
	background: var(--dark-grey);
	padding: 3.5rem 2.25rem;
	border-radius: 0.625rem;
	overflow: hidden;
	display: none;
	transition: .2s;
	cursor: grab;
}

.tab-content.full-width {
	max-width: 100%;

}

.tab-content.active {
	display: block;
}




@starting-style {
	.tab-content {
		opacity: 0;
		/* filter: blur(1.875rem); */

	}
}

.tab-content.active {
	--compare-fade-width: 13.4375rem;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--compare-fade-width),
		#000 calc(100% - var(--compare-fade-width)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--compare-fade-width),
		#000 calc(100% - var(--compare-fade-width)),
		transparent 100%
	);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: -webkit-mask-image .2s, mask-image .2s;
}

.tab-content.active:has(.compare-swiper.reach-start) {
	-webkit-mask-image: linear-gradient(
		to right,
		#000 0,
		#000 calc(100% - var(--compare-fade-width)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		#000 0,
		#000 calc(100% - var(--compare-fade-width)),
		transparent 100%
	);
}

.tab-content.active:has(.compare-swiper.reach-end) {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--compare-fade-width),
		#000 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--compare-fade-width),
		#000 100%
	);
}

.tab-content.active:has(.compare-swiper.reach-start.reach-end) {
	-webkit-mask-image: none;
	mask-image: none;
}


.compare-item {
	position: relative !important;
	background: radial-gradient(
		ellipse 70% 55% at 50% 0%,
		color-mix(in srgb, var(--main-blue) 20%, transparent) 0%,
		transparent 75%
	);
	max-width: 30rem;
	border-radius: 0.625rem;
	margin-right: 1.875rem;
	color: #fff !important;
}

.compare-item__title {
	background: var(--main-blue);
	min-height: 15rem;
	gap: 2.25rem;
	padding: 1.5rem;
	border-radius: 0.625rem;
	position: relative;
}

.compare-item__title>button.to-compare {
	position: absolute;
	right: 1.5rem;
	top: 1.5rem;
	width: 2.75rem;
	height: 2.75rem;
	background: #fff;
	border-radius: 3.125rem;
	border: none;
	padding: 0;
	margin: 0;
	opacity: 0;
	transition: .2s;
}


.compare-item__title:hover>button.to-compare {
	opacity: .5;
	transition: .2s;
}

.compare-item__title>button.to-compare:hover {
	opacity: 1;
	transition: .2s;
}

.compare-item__title>button.to-compare svg path {
	transition: .2s;
}

.compare-item__title>button.to-compare svg {
	left: 0.0313rem;
	position: relative;
	top: 0.0313rem;
}

.compare-item__title>button.to-compare:hover svg path {
	transition: .2s;
	fill: #F00000;
}


.compare-item>* {
	position: relative;
	z-index: 1;
}

.compare-swiper .swiper-wrapper {
	/* gap: 1.875rem; */
	gap: 0;
}


.tab-content .compare-swiper {
	/* transform: translateY(1.25rem); */
	transition: .2s;
}

@starting-style {
	.compare-table:not(.compare-table.server-side) .tab-content .compare-swiper {
		/* transform: translateY(1.25rem); */
		opacity: 0;

	}
}




.compare-item__title h3 {
	max-width: calc(100% - 3.75rem);
	font-size: 2rem;
	transition: .2s;
	will-change: transform;

}

.compare-item__title h3 button {
	color: #fff;
	font-size: 2rem;
	background: none;
	text-align: start;
	transition: .2s;
}

.compare-item__title h3 a {
	color: #fff;
	font-size: 2rem;
	background: none;
	text-align: start;
	transition: .2s;
}


.compare-item__title h3:hover {
	transition: .2s;
	transform: scale(1.02);
}

.compare-item__title h3:hover a {
	color: #fff !important;
}

.compare-item .show-info {
	border: none;
	text-align: start;
	word-break: break-word;
}


.compare-item__price {
	max-width: 21.5625rem;
}

.compare-item__price strong {
	font-size: 1.25rem;
	margin-top: -0.4375rem;
}

.compare-item__price span {
	gap: 0.75rem;
}

.tab-nav__item {
	position: relative;
	opacity: .5;
	padding: 0.625rem;
}


.tab-nav__item::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.125rem;
	background: var(--main-blue);
	transform: scale(0) translate(-50%);
	transition: .2s;
}

.tab-nav__item.active::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100%;
	transform: scale(1) translate(-50%);
	transition: .2s;
}

.tab-nav__item.active {
	opacity: 1;
}

.tab-nav__item a {
	color: #fff !important;
}

.tab-nav {
	list-style: none;
	margin: 0 0 1.5rem 0;
	padding: 0;
}


.no-compare {
	gap: 2.25rem;
	margin: 3.125rem auto;
	font-size: 1.25rem;
	max-width: 28.75rem;
	position: relative;
	min-height: 50vh;
}

.no-compare::before {
	content: '';
	filter: blur(9.375rem);
	background: var(--unnamed, rgba(0, 96, 240, .4));
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	width: 12.5rem;
	height: 16.875rem;
	border-radius: 50%;
}

.no-compare>* {
	position: relative;
	z-index: 1;
}

.no-compare>span {
	font-size: 2rem;
}

.no-compare>p {
	font-size: 1rem;
	margin: 0;
}

.compare-item__chars {
	margin: 0;
	padding: 3.5rem 0 0 0;
}

.compare-item__chars li {
	gap: 0.75rem;
	padding: 2.25rem 1.5rem;
	border-bottom: 0.125rem solid #fff;
	min-height: 5.9375rem;

}


.compare-item__chars li:first-child {
	padding-top: 0;
}

.compare-item__chars li:last-child {
	border: none;
}


.compare-item__chars li span:nth-child(1) {
	color: var(--main-blue);
}

.compare-item__chars li span:nth-child(2) {
	font-size: 1.25rem;
	word-break: break-word;
}


.compare-item__chars li span:nth-child(2) button {
	color: #fff;
	font-size: 1.25rem;
	background: none;
	transition: .2s;
}

.compare-item__chars li span:nth-child(2) button:hover {
	transition: .2s;
	color: var(--main-blue);
}


@media screen and (max-width: 1399px) {
	.tab-content {
		padding: 2rem 1.5rem;
	}

	.compare-item__title {
		padding: 1rem;
		gap: 1.5rem;
	}

	.compare-item__chars li {
		gap: 0.75rem;
		padding: 1.5rem 1rem;
	}
}

@media screen and (max-width: 1199px) {
	.compare-item__chars {
		padding: 2rem 0 0 0;
	}

	.compare-item__title h3 button {
		font-size: 1.5rem;
	}

	.compare-item__title {
		min-height: 10rem;
	}

	.compare-item__chars li {
		gap: 0.75rem;
		padding: 1rem .75rem;
	}
}


@media screen and (max-width: 1023px) {
	.tab-content.active {
		--compare-fade-width: .75rem;
	}

	.compare-item__chars li {
		min-height: 4rem;
	}

	.compare-item__title>button.to-compare {
		width: 2rem;
		height: 2rem;
		opacity: 1;
		right: .75rem;
		top: .75rem;
	}

	.compare-item__title h3 a {
		font-size: 1.5rem;
		margin: 0;
	}

	.compare-item__title h3 {
		margin: 0;
		max-width: calc(100% - 2.5rem);
	}
	

	.compare-item__chars li span:nth-child(2) {
		font-size: 1rem;
	}

	.tab-nav {
		margin: 0 0 .75rem 0;
		width: 100%;
		overflow-x: auto;
		padding-bottom: .75rem;
	}

	.tab-nav__item a {
		white-space: nowrap;
	}

	.compare-item__chars li span:nth-child(2) button {
    font-size: 1rem;

}
}