/**
 * Стили лендинга «SEO на WordPress» (/services/cms-wordpress/).
 *
 * Файл отдельный, а не в dist/css/main.css: сборку темы делят несколько
 * параллельных сессий, и пересборка бандла затянула бы в прод чужие
 * незавершённые правки. Подключается только на этой странице
 * (см. agency_cms_wordpress_assets() в inc/cms-wordpress-landing.php).
 * Всё оформление опирается на переменные темы — палитра общая с сайтом.
 */

/* Подпись-пояснение под полем калькулятора. */
.cw-hint {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-mute);
}

/* Модули расчёта: карточка с чекбоксом, названием, описанием и ценой. */
.cw-mods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 12px;
}

.cw-mod {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg-alt);
	cursor: pointer;
	transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.cw-mod:hover {
	border-color: var(--color-accent);
}

.cw-mod:has(input:checked) {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
}

.cw-mod input {
	flex: none;
	margin-top: 4px;
	accent-color: var(--color-accent);
}

.cw-mod__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.cw-mod__name {
	font: 700 16px/1.3 var(--font-display);
	letter-spacing: -0.01em;
}

.cw-mod__desc {
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--color-text-dim);
}

.cw-mod__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-deep);
}

/* Длинные подписи строк расчёта («Разово: техническая оптимизация, …»)
   сжимают колонку со суммой — сумма не должна рваться по «0» и «₽». */
.adc-calc[data-adc-calc="wp-price"] .adc-line {
	flex-wrap: wrap;
}

.adc-calc[data-adc-calc="wp-price"] .adc-line span {
	min-width: 0;
}

.adc-calc[data-adc-calc="wp-price"] .adc-line b {
	white-space: nowrap;
	margin-left: auto;
}

/* Интерактивный график прогноза: подсказка при наведении. */
.cw-chart {
	position: relative;
}

.cw-chart__tip {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: grid;
	gap: 2px;
	padding: 8px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg-surface);
	box-shadow: var(--shadow-card);
	font-size: 14px;
	line-height: 1.35;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.14s var(--ease);
}

.cw-chart__tip.is-on {
	opacity: 1;
}

.cw-chart__tip b {
	font: 700 16px var(--font-display);
	color: var(--color-accent);
}

.cw-chart__tip span {
	color: var(--color-text-mute);
}

/* Сетка графика и опорные линии. */
.cw-chart .cw-grid {
	stroke: var(--border-weak);
	stroke-width: 1;
}

.cw-chart .cw-axis {
	font: 500 11.5px var(--font-body);
	fill: var(--color-text-mute);
}

.cw-chart .cw-cursor {
	stroke: var(--color-accent);
	stroke-width: 1.4;
	stroke-dasharray: 3 3;
	opacity: 0;
}

.cw-chart .cw-cursor.is-on {
	opacity: 1;
}

.cw-chart .cw-point {
	fill: var(--color-accent);
	stroke: var(--bg-surface);
	stroke-width: 2;
	opacity: 0;
}

.cw-chart .cw-point.is-on {
	opacity: 1;
}

/* Компактнее на узких экранах: подписи графика не наезжают друг на друга. */
@media (max-width: 600px) {
	.cw-chart__tip {
		top: 6px;
		left: 6px;
		padding: 6px 10px;
		font-size: 13px;
	}
}