/*
 * Калькулятор стоимости.
 *
 * Оформление под фотографии на белом фоне: карточка варианта — это снимок,
 * подпись и цена. Старый плагин рисовал мелкие превью в рамках jQuery UI
 * и показывал «Итоговая стоимость: 0 руб.» до первого выбора.
 */

.kv-calc {background: var(--kv-bg); padding: 56px 0;}
.kv-calc__head {max-width: 760px; margin-bottom: 28px;}
.kv-calc__title {font-size: 34px !important; margin: 0 0 10px !important; padding: 0 !important; letter-spacing: -0.02em;}
.kv-calc__lead {margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--kv-muted);}

.kv-calc__body {display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start;}
.kv-calc__fields {display: grid; gap: 18px;}

.kv-calc__field {border: 1px solid var(--kv-line); border-radius: var(--kv-radius); background: #fff; padding: 20px 22px; margin: 0;}
/* ☠️ Заголовок поля — не <legend>: тот рисуется в разрыве рамки и наезжал
   на белый фон карточки, а float у него схлопывал сетку вариантов в ноль. */
.kv-calc__legend {display: block; padding: 0 0 14px; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--kv-ink); line-height: 1.35;}
.kv-calc__hint {display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 500; color: var(--kv-muted); vertical-align: 1px;}

.kv-calc__select {width: 100%; padding: 13px 15px; font-family: inherit; font-size: 16px; color: var(--kv-ink); background: #fff; border: 1.5px solid var(--kv-line); border-radius: var(--kv-radius-sm); outline: none; transition: border-color .16s var(--kv-ease), box-shadow .16s var(--kv-ease);}
.kv-calc__select:focus {border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(21,126,150,.12);}

.kv-calc__cards {display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px;}
.kv-calc__card {position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--kv-line); border-radius: var(--kv-radius-sm); overflow: hidden; cursor: pointer; background: #fff; transition: border-color .16s var(--kv-ease), box-shadow .16s var(--kv-ease), transform .12s var(--kv-ease);}
.kv-calc__card:hover {border-color: var(--primary-color); box-shadow: 0 8px 22px rgba(13,63,82,.10);}
.kv-calc__card input {position: absolute; opacity: 0; pointer-events: none;}
.kv-calc__card:has(input:checked) {border-color: var(--kv-wood); box-shadow: 0 0 0 3px rgba(200,129,60,.16);}
.kv-calc__card:has(input:checked)::after {content: "✓"; position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--kv-wood); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center;}

.kv-calc__card-pic {display: block; height: 124px; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--kv-line);}
.kv-calc__card-pic img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;}
.kv-calc__card-none {font-size: 26px; color: #c4ced5;}
.kv-calc__card-txt {padding: 11px 12px 3px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--kv-ink);}
.kv-calc__card-sum {padding: 0 12px 12px; font-size: 13.5px; font-weight: 700; color: var(--kv-wood); margin-top: auto;}

.kv-calc__result {position: sticky; top: 20px;}
.kv-calc__sticky {background: #fff; border: 1px solid var(--kv-line); border-radius: var(--kv-radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;}
.kv-calc__sum-label {font-size: 14px; color: var(--kv-muted);}
.kv-calc__sum {font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--kv-ink);}
.kv-calc__lines {list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--kv-line); display: grid; gap: 7px;}
.kv-calc__lines[hidden] {display: none;}
.kv-calc__lines li {display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--kv-ink); line-height: 1.35;}
.kv-calc__lines li > span {display: block;}
.kv-calc__lines li i {display: block; font-style: normal; font-size: 12px; color: var(--kv-muted); margin-bottom: 1px;}
.kv-calc__lines b {color: var(--kv-ink); white-space: nowrap; font-weight: 700;}
.kv-calc__note {font-size: 13px; line-height: 1.5; color: var(--kv-muted); padding-top: 10px; border-top: 1px solid var(--kv-line);}
.kv-calc__btn {text-align: center; margin-top: 4px;}
.kv-calc__phone {font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--kv-ink) !important; text-align: center;}
.kv-calc__phone:hover {color: var(--primary-color) !important;}
.kv-calc__sticky small {font-size: 12.5px; color: var(--kv-muted); text-align: center;}

@media (max-width: 991px) {
	.kv-calc__body {grid-template-columns: 1fr;}
	.kv-calc__result {position: static;}
}
@media (max-width: 575px) {
	.kv-calc {padding: 36px 0;}
	.kv-calc__title {font-size: 25px !important;}
	.kv-calc__lead {font-size: 15.5px;}
	.kv-calc__field {padding: 16px 15px;}
	.kv-calc__cards {grid-template-columns: 1fr 1fr; gap: 10px;}
	.kv-calc__card-pic {height: 104px;}
	.kv-calc__sum {font-size: 32px;}
}

/* ═══ Ползунок глубины ═════════════════════════════════════════════════ */
/* Главный множитель цены был выпадающим списком на 31 пункт: человек
   не видел, как глубина двигает сумму, и листал простыню. */
.kv-calc__range {display: grid; gap: 10px;}
.kv-calc__range-top {display: flex; align-items: baseline; justify-content: space-between; gap: 14px;}
.kv-calc__range-val {font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--kv-ink);}
.kv-calc__range-sum {font-size: 18px; font-weight: 800; color: var(--kv-wood); white-space: nowrap;}
.kv-calc__range-ends {display: flex; justify-content: space-between; font-size: 12.5px; color: var(--kv-muted);}

.kv-calc__slider {--kv-fill: 30%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; outline: none; background: linear-gradient(to right, var(--kv-wood) var(--kv-fill), var(--kv-line) var(--kv-fill)); cursor: pointer; touch-action: none;}
.kv-calc__slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--kv-wood); box-shadow: 0 3px 10px rgba(13,63,82,.22); cursor: grab; transition: transform .12s var(--kv-ease);}
.kv-calc__slider::-webkit-slider-thumb:active {cursor: grabbing; transform: scale(1.08);}
.kv-calc__slider::-moz-range-thumb {width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--kv-wood); box-shadow: 0 3px 10px rgba(13,63,82,.22); cursor: grab;}
.kv-calc__slider:focus-visible {outline: 3px solid var(--kv-fresh); outline-offset: 4px;}

/* ═══ Вариант «Без чего-то» ════════════════════════════════════════════ */
/* Раньше здесь был просто прочерк — он ничего не сообщал. Теперь тот же
   предмет, но обесцвеченный и перечёркнутый: видно, от чего отказываешься. */
.kv-calc__card--off .kv-calc__card-pic {position: relative;}
.kv-calc__card--off .kv-calc__card-pic img {filter: grayscale(1) contrast(.85); opacity: .42;}
.kv-calc__card--off .kv-calc__card-pic::before,
.kv-calc__card--off .kv-calc__card-pic::after {content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 2px; background: #9aa7b0; border-radius: 2px;}
.kv-calc__card--off .kv-calc__card-pic::before {transform: rotate(-24deg);}
.kv-calc__card--off .kv-calc__card-pic::after {transform: rotate(24deg);}
.kv-calc__card--off .kv-calc__card-txt {color: var(--kv-muted);}
/* Когда вариант выбран, перечёркивание остаётся, но становится спокойнее:
   человек уже понял, что отказался, и мешать чтению подписи не нужно. */
.kv-calc__card--off:has(input:checked) .kv-calc__card-pic img {opacity: .55;}
.kv-calc__card--off:has(input:checked) .kv-calc__card-txt {color: var(--kv-ink);}

/* ═══ Мультивыбор ══════════════════════════════════════════════════════ */
/* Восемь точек водоразбора лежали в выпадающем списке на один выбор:
   человек считал воду на весь дом, а видел цену одной раковины. */
.kv-calc__checks {display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;}
.kv-calc__check {position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--kv-line); border-radius: var(--kv-radius-sm); cursor: pointer; background: #fff; transition: border-color .18s var(--kv-ease), background-color .18s var(--kv-ease), box-shadow .18s var(--kv-ease);}
.kv-calc__check:hover {border-color: var(--primary-color); background: #fbfdfe;}
.kv-calc__check input {position: absolute; opacity: 0; pointer-events: none;}
.kv-calc__check-mark {flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--kv-line); background: #fff; position: relative; transition: border-color .18s var(--kv-ease), background-color .18s var(--kv-ease);}
.kv-calc__check-mark::after {content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity .16s var(--kv-ease), transform .16s var(--kv-ease);}
.kv-calc__check:has(input:checked) {border-color: var(--kv-wood); background: #fdf8f2;}
.kv-calc__check:has(input:checked) .kv-calc__check-mark {background: var(--kv-wood); border-color: var(--kv-wood);}
.kv-calc__check:has(input:checked) .kv-calc__check-mark::after {opacity: 1; transform: rotate(45deg) scale(1);}
.kv-calc__check-txt {flex: 1 1 auto; font-size: 14.5px; line-height: 1.35; color: var(--kv-ink);}
.kv-calc__check-sum {flex: none; font-size: 13.5px; font-weight: 700; color: var(--kv-wood); white-space: nowrap;}
.kv-calc__check input:focus-visible + .kv-calc__check-mark {outline: 3px solid var(--kv-fresh); outline-offset: 2px;}

@media (max-width: 575px) {
	.kv-calc__checks {grid-template-columns: 1fr;}
}

/* Итог словами вместо суммы — там, где работа считается по осмотру. */
.kv-calc__sum--words {font-size: 24px; line-height: 1.2; letter-spacing: -0.01em;}