/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 12 2025 | 13:44:52 */
:root {
	--accent: #ff4b3a;
	--border: #f1f1f5;
	--bg-card: #ffffff;
	--text-muted: #777;
	--radius: 18px;
}
.pricing {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 16px 80px;
}

.pricing__title {
	font-size: 44px;
	font-weight: 700;
	color: #FF4342;
	margin-bottom: 55px;
}

.pricing__table {
	display: flex;
	gap: 16px;
}

.pricing__col--features,
.pricing__col {
	background: var(--bg-card);
	border-radius: var(--radius);
	box-shadow: 0 12px 25px rgba(15, 23, 42, 0.05);
}


/* Левая колонка с услугами */
.pricing__col--features {
	min-width: 220px;
	padding: 24px 16px;
	box-shadow: none !important;
}

.pricing__features-title {
	font-weight: 700;
	margin-bottom: 10px;
	font-size: 20px;
}

.pricing__feature {
	padding: 11px 0;
	font-size: 20px;
	font-weight: 500;
}

.pricing__feature:last-child {
	border-bottom: none;
}

/* Правый блок с тарифами */
.pricing__scroll {
	flex: 1 1 auto;
	overflow-x: visible; /* без скролла на десктопе */
}

.pricing__plans {
	display: flex;
	gap: 16px;
}

.pricing__col {
	flex: 1 1 0;
	padding: 24px 16px 40px;
}

.pricing__plan-name {
	font-weight: 500;
	font-size: 28px;
	text-align: center;
	margin-bottom: 8px;
}

.pricing__cell {
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	font-size: 20px;
	text-align: center;
}

.pricing__cell:last-of-type {
	border-bottom: none;
}

.pricing__cell--price {
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	color: #FF4342;
}

.pricing__icon {
	font-size: 16px;
}

.pricing__icon--yes {
	color: #16a34a;
}

.pricing__icon--no {
	color: #ef4444;
}

.pricing__cta {
	margin-top: 16px;
	display: block;
	text-align: center;
	color: var(--accent);
	font-weight: 600;
	font-size: 18px;
	text-decoration: none;
}

.pricing__cta::after {
	content: " ↗";
}

/* Мобилка: фиксируем первый столбец и даём скролл тарифам */
@media (max-width: 767px) {
	.pricing__table {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: stretch;
	}

	.pricing__col--features {
		position: sticky;
		left: 0;
		top: 0; /* можно убрать, если не нужно прилипающее к верху поведение */
		z-index: 5;
		background: var(--bg-card);
	}

	.pricing__scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.pricing__plans {
		display: flex;
		gap: 12px;
		min-height: 100%;
	}

	.pricing__col {
		flex: 0 0 230px; /* ширина одной карточки тарифа */
	}
}