/* Москитон — калькулятор москитных сеток.
   Правила живут под .mk, чтобы модуль не задевал стили сайта, куда его поставили.
   Раскладка считается от ширины САМОГО модуля (container queries), а не от ширины окна:
   калькулятор одинаково верно ложится и в узкую колонку блога, и на всю ширину страницы. */

.mk {
	--mk-accent: #c6f04b;
	/* Цвет надписи на акценте и акцент, пригодный для текста, приходят из PHP:
	   считаются от выбранного заказчиком акцента (MK_Color). Здесь — запасные значения. */
	--mk-on-accent: #10130f;
	--mk-accent-ink: var(--mk-accent);
	--mk-ink: #12161a;
	--mk-mute: #7b8288;
	--mk-line: #e3e5e6;
	--mk-plate: #fefefe;
	--mk-mat: #23272b;
	--mk-ease: cubic-bezier(.4, 0, .2, 1);

	container-type: inline-size;
	container-name: mk;
	box-sizing: border-box;
	display: block;
	max-width: 1280px;
	margin-inline: auto;
	padding: 0;
	background: var(--mk-mat);
	color: var(--mk-ink);
	font-family: "Golos Text", "PT Root UI", "Manrope", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	-webkit-text-size-adjust: 100%;
}

.mk *,
.mk *::before,
.mk *::after { box-sizing: inherit; }

.mk__plate {
	padding: 20px 16px 22px;
	background: var(--mk-plate);
}

/* Шапка: имя слева, телефон-пилюля справа — единственное цветное пятно. */
.mk__head {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "brand" "tag" "pill";
	gap: 10px;
	align-items: start;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--mk-line);
}

.mk__brand {
	grid-area: brand;
	margin: 0;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.mk__tagline {
	grid-area: tag;
	margin: 0;
	max-width: 46ch;
	color: var(--mk-mute);
	font-size: 15px;
}

.mk__pill {
	grid-area: pill;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--mk-accent);
	color: var(--mk-on-accent);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s var(--mk-ease);
}

.mk__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	padding-top: 20px;
}

.mk__step + .mk__step { margin-top: 20px; }

/* Служебные строки — моно-капс с разрядкой. */
.mk__label,
.mk__cap {
	margin: 0 0 12px;
	color: var(--mk-mute);
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.mk__num { color: var(--mk-ink); }

.mk__dims {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 10px;
}

.mk__field { display: block; min-width: 0; }

.mk__field-cap {
	display: block;
	margin-bottom: 6px;
	color: var(--mk-mute);
	font-size: 13px;
}

.mk__input {
	width: 100%;
	height: 54px;
	padding: 0 14px;
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	background: #fff;
	color: var(--mk-ink);
	font: inherit;
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	transition: border-color .2s var(--mk-ease);
}

.mk__input:focus-visible {
	outline: none;
	border-color: var(--mk-ink);
}

.mk__times {
	padding-bottom: 16px;
	color: var(--mk-mute);
	font-size: 18px;
}

.mk__hint {
	margin: 8px 0 0;
	color: var(--mk-mute);
	font-size: 13px;
}

/* Конструкция — сегменты. */
.mk__seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.mk__seg-item {
	display: block;
	min-height: 64px;
	padding: 12px 14px;
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	background: #fff;
	color: var(--mk-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s var(--mk-ease), box-shadow .2s var(--mk-ease);
}

.mk__seg-title {
	display: block;
	font-size: 15px;
	font-weight: 500;
}

.mk__seg-desc {
	display: block;
	margin-top: 2px;
	color: var(--mk-mute);
	font-size: 12px;
	line-height: 1.3;
}

.mk__seg-item.is-on {
	border-color: var(--mk-ink);
	box-shadow: inset 0 0 0 1px var(--mk-ink);
}

/* Полотно и опции — строки прайса. */
.mk__rows { display: grid; gap: 8px; }

.mk__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 60px;
	padding: 12px 14px;
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	background: #fff;
	color: var(--mk-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s var(--mk-ease), box-shadow .2s var(--mk-ease);
}

.mk__row-main { flex: 1 1 auto; min-width: 0; }

.mk__row-title {
	display: block;
	font-size: 15px;
	font-weight: 500;
}

.mk__row-desc {
	display: block;
	margin-top: 2px;
	color: var(--mk-mute);
	font-size: 12.5px;
	line-height: 1.3;
}

.mk__row-price {
	flex: 0 0 auto;
	color: var(--mk-mute);
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mk__row.is-on {
	border-color: var(--mk-ink);
	box-shadow: inset 0 0 0 1px var(--mk-ink);
}

.mk__row.is-on .mk__row-price { color: var(--mk-ink); }

.mk__check {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mk-ink);
}

/* Количество. */
.mk__qty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mk__qty-btn {
	width: 48px;
	height: 48px;
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	background: #fff;
	color: var(--mk-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s var(--mk-ease);
}

.mk__input--qty {
	width: 88px;
	height: 48px;
	text-align: center;
}

/* Правая колонка — итог. */
.mk__sum { min-width: 0; }

.mk__sum-inner {
	padding: 18px;
	border: 1px solid var(--mk-line);
	border-radius: 10px;
	background: #fafafa;
}

.mk__meta {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--mk-line);
}

.mk__meta-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.mk__meta-row + .mk__meta-row { margin-top: 6px; }

.mk__meta dt { color: var(--mk-mute); }

.mk__meta dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.mk__lines {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.mk__line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	color: var(--mk-mute);
	font-size: 13.5px;
}

.mk__line span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mk__total {
	margin: 0 0 6px;
	font-size: 36px;
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.mk__total.is-bump { animation: mk-bump .3s var(--mk-ease); }

@keyframes mk-bump {
	from { opacity: .35; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

.mk__cap--muted {
	margin: 10px 0 16px;
	letter-spacing: .04em;
	text-transform: none;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.4;
}

.mk__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: 999px;
	background: var(--mk-ink);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: transform .2s var(--mk-ease);
}

/* Липкая плашка с ценой — пока модуль узкий (телефон или узкая колонка сайта). */
.mk__dock {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: var(--mk-plate);
	border-top: 1px solid var(--mk-line);
}

.mk__dock-price {
	font-size: 22px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.mk__dock-cta {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--mk-accent);
	color: var(--mk-on-accent);
	font-weight: 500;
	text-decoration: none;
}

/* Итог продублирован в доке — в карточке кнопку не повторяем. */
.mk__sum-inner .mk__cta { display: none; }

/* Планшет и широкая колонка. */
@container mk (min-width: 560px) {
	.mk { padding: 24px; }

	.mk__plate {
		padding: 28px 26px 30px;
		border-radius: 12px;
	}

	.mk__head {
		grid-template-columns: 1fr auto;
		grid-template-areas: "brand pill" "tag tag";
		gap: 6px 16px;
		padding-bottom: 24px;
	}

	.mk__brand { font-size: 32px; }

	.mk__seg { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

	.mk__step + .mk__step { margin-top: 26px; }

	.mk__sum-inner { padding: 24px; }

	.mk__total { font-size: 44px; }
}

/* Десктоп: форма слева, итог липнет справа, док не нужен. */
@container mk (min-width: 900px) {
	.mk { padding: 36px; }

	.mk__plate { padding: 38px 36px 40px; }

	.mk__brand { font-size: 36px; }

	.mk__body {
		grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
		gap: 40px;
		padding-top: 28px;
	}

	.mk__sum-inner {
		position: sticky;
		top: 20px;
	}

	.mk__total { font-size: 50px; }

	.mk__sum-inner .mk__cta { display: flex; }

	.mk__dock { display: none; }
}

@container mk (max-width: 359px) {
	.mk__seg { grid-template-columns: 1fr; }
}

/* Браузеры без container queries: раскладка по ширине окна. */
@supports not (container-type: inline-size) {
	@media (min-width: 900px) {
		.mk { padding: 36px; }
		.mk__plate { padding: 38px 36px 40px; border-radius: 12px; }
		.mk__head { grid-template-columns: 1fr auto; grid-template-areas: "brand pill" "tag tag"; }
		.mk__body { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 40px; }
		.mk__seg { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
		.mk__total { font-size: 50px; }
		.mk__sum-inner { position: sticky; top: 20px; }
		.mk__sum-inner .mk__cta { display: flex; }
		.mk__dock { display: none; }
	}
}

@media (hover: hover) {
	.mk__pill:hover,
	.mk__cta:hover,
	.mk__dock-cta:hover { transform: translateY(-1px); }

	.mk__row:hover,
	.mk__seg-item:hover,
	.mk__qty-btn:hover { border-color: #b9bec2; }
}

@media (prefers-reduced-motion: reduce) {
	.mk *,
	.mk *::before,
	.mk *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}


/* Тёмный вариант оформления — переключается в админке («Оформление → Тема»).
   Меняются только переменные: раскладка, размеры и поведение общие со светлым. */
.mk--dark {
	--mk-ink: #f2f3f5;
	--mk-mute: #9aa1a7;
	--mk-line: #2c3238;
	--mk-plate: #16191c;
	--mk-mat: #0d0f11;
}

.mk--dark .mk__input,
.mk--dark .mk__row,
.mk--dark .mk__seg-item,
.mk--dark .mk__qty-btn {
	background: #1d2126;
	color: var(--mk-ink);
}

.mk--dark .mk__sum-inner { background: #1b1f23; }

.mk--dark .mk__row.is-on,
.mk--dark .mk__seg-item.is-on {
	border-color: var(--mk-accent);
	box-shadow: inset 0 0 0 1px var(--mk-accent);
}

.mk--dark .mk__row.is-on .mk__row-price { color: var(--mk-accent-ink); }

.mk--dark .mk__check { accent-color: var(--mk-accent); }

.mk--dark .mk__cta {
	background: var(--mk-accent);
	color: var(--mk-on-accent);
}

.mk--dark .mk__dock { background: var(--mk-plate); }

.mk--dark .mk__input:focus-visible { border-color: var(--mk-accent); }

@media (hover: hover) {
	.mk--dark .mk__row:hover,
	.mk--dark .mk__seg-item:hover,
	.mk--dark .mk__qty-btn:hover { border-color: #454c53; }
}

/* Форма заявки — показывается, только если включена в админке. */
.mk__lead {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--mk-line);
}

.mk__lead-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 500;
}

.mk__lead-input {
	height: 50px;
	margin-bottom: 8px;
	font-size: 16px;
}

.mk__lead-submit {
	display: flex;
	width: 100%;
	margin-top: 4px;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.mk__lead-consent {
	margin: 10px 0 0;
	color: var(--mk-mute);
	font-size: 11.5px;
	line-height: 1.35;
}

.mk__lead-result:empty { display: none; }

.mk__lead-result {
	margin: 10px 0 0;
	font-size: 13.5px;
}

.mk__lead-result.is-error { color: #b3261e; }

.mk--dark .mk__lead-result.is-error { color: #ff8a80; }

.mk__lead-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}