/* Свой UI темы вместо bootstrap.min.css и owl.carousel.min.css.
   Модальные окна, аккордеон, карусели и те утилиты Bootstrap, что реально
   встречались в разметке. Всё остальное из библиотек не использовалось. */

/* ============================ Утилиты из Bootstrap ======================== */
/* Проверено по шаблонам и по всей базе: в контенте страниц классов сетки нет,
   а из библиотеки живут только перечисленные ниже. */
.rounded {border-radius: 25px;}
.text-center {text-align: center;}
.d-flex {display: flex;}
.align-items-center {align-items: center;}
.btn {display: inline-block;padding: 6px 12px;border: 0;background: none;font: inherit;cursor: pointer;}
.btn-link {color: inherit;text-decoration: none;}
.form-control {display: block;width: 100%;padding: 14px 18px;border: 2px solid #e8e8ee;border-radius: 14px;background: #fff;font: inherit;color: #1b1c22;transition: border-color .15s ease, box-shadow .15s ease;}
.form-control:focus {outline: 0;border-color: #004dff;box-shadow: 0 0 0 4px rgba(0, 77, 255, .12);}
/* col-lg-6 из разметки убран: колонки задаёт собственная сетка темы
   (.grid + .col-pc-15-1). Правило только мешало — резало колонку hero
   до половины её грид-области, и баннер разъезжался. */

/* ============================== Модальные окна =========================== */
.modal {position: fixed;inset: 0;z-index: 1050;display: flex;align-items: center;justify-content: center;padding: 24px;overflow-y: auto;background: rgba(16, 18, 26, .55);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);opacity: 0;visibility: hidden;transition: opacity .25s ease, visibility .25s ease;}
.modal.is-open {opacity: 1;visibility: visible;}
.modal-dialog {position: relative;width: 100%;max-width: 560px;margin: auto;transform: translateY(14px) scale(.98);transition: transform .28s cubic-bezier(.2, .8, .25, 1);}
.modal.is-open .modal-dialog {transform: none;}
.modal-content {position: relative;background: #fff !important;border: 0 !important;border-radius: 26px;box-shadow: 0 32px 80px rgba(12, 16, 30, .28);overflow: hidden;}
.modal-body {padding: 38px 34px 34px !important;}
.modal .close {position: absolute;top: 14px;right: 14px;z-index: 2;display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;padding: 0;border: 0;border-radius: 50%;background: #f1f2f6;color: #5a5c6b;cursor: pointer;transition: background .15s ease, color .15s ease, transform .15s ease;}
.modal .close:hover {background: #004dff;color: #fff;transform: rotate(90deg);}
.modal .close svg {width: 18px;height: 18px;}
.modal .title {font-size: 26px;line-height: 1.25;font-weight: 700;}
.modal .text {color: #545560;font-size: 17px;line-height: 1.6;}
body.modal-open {overflow: hidden;}

/* Полноэкранные окна — мобильное меню и выбор города */
.modal.fullscreen {padding: 0;}
.modal.fullscreen .modal-dialog {max-width: none;height: 100%;margin: 0;}
.modal.fullscreen .modal-content {height: 100%;border-radius: 0;background: #f6f7fb !important;}
.modal.fullscreen .modal-body {padding: 64px 20px 32px !important;height: 100%;overflow-y: auto;}

@media (max-width: 767px) {
	/* на телефоне окно выезжает снизу — привычнее и не прыгает под клавиатурой */
	.modal {padding: 0;align-items: flex-end;}
	.modal-dialog {max-width: none;transform: translateY(100%);}
	.modal-content {border-radius: 24px 24px 0 0;max-height: 92vh;overflow-y: auto;}
	.modal-body {padding: 30px 20px 24px !important;}
	.modal .title {font-size: 22px;}
}

@media (prefers-reduced-motion: reduce) {
	.modal, .modal-dialog {transition: none;}
}

/* ================================ Аккордеон ============================== */
.collapse {overflow: hidden;height: 0;transition: height .28s ease;}
.collapse.show {height: auto;}
@media (prefers-reduced-motion: reduce) {.collapse {transition: none;}}

/* ================================= Карусели ============================== */
.c-slider {position: relative;--c-per: 1;--c-gap: 10px;}
.c-track {display: flex;gap: var(--c-gap);overflow-x: auto;scroll-snap-type: x mandatory;scroll-behavior: smooth;scrollbar-width: none;-ms-overflow-style: none;-webkit-overflow-scrolling: touch;}
.c-track::-webkit-scrollbar {display: none;}
.c-slide {flex: 0 0 calc((100% - (var(--c-per) - 1) * var(--c-gap)) / var(--c-per));scroll-snap-align: start;min-width: 0;}
.c-slide img {display: block;max-width: 100%;}
/* Точки и стрелки рисует сама тема — у неё для каждого блока свой вид
   (#svusl выносит стрелки влево, #prim и #rews делают круглые с SVG).
   Здесь только сбросы, чтобы кнопки не выглядели как кнопки браузера. */
/* ☠️ display:flex у .crsl__controls перебивает атрибут hidden — ровно та же
   ловушка, что ловили на странице городов. Гасим явно, иначе под каруселью
   из одной страницы остаются пустые отступы и нерабочие стрелки. */
.crsl__controls[hidden] {display: none !important;}

/*
 * Точки переносятся по строкам: у блока «варианты услуг» их бывает
 * два десятка, и в одну линию они уезжали за край экрана — на 390 px
 * это давало горизонтальную прокрутку всей страницы.
 */
.crsl__dots {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 2px;max-width: 100%;}
.crsl__dot {padding: 0;border: 0;background: none;line-height: 0;cursor: pointer;}
.crsl__nav {display: flex;}
.crsl__nav button {display: flex;padding: 0;border: 0;background-color: transparent;background-repeat: no-repeat;background-position: center;cursor: pointer;}

/* Ниже своего порога карусель выключается совсем: раскладку задаёт тема,
   как было до появления owl. Ничего своего не навязываем. */
.c-slider.c-off .c-track {display: block;overflow: visible;scroll-snap-type: none;}
.c-slider.c-off .c-slide {flex: none;scroll-snap-align: none;}

@media (prefers-reduced-motion: reduce) {
	.c-track {scroll-behavior: auto;}
}

/* ============================ Согласие в формах ========================== */
/* Строка над кнопкой отправки: обязательная по 152-ФЗ и по требованию
   рекламных площадок. Не должна перетягивать внимание с самой кнопки. */
.form-consent {margin: 0 0 16px;font-size: 13px;line-height: 1.5;color: #6f7484;max-width: 52ch;}
.form-consent a {color: #454b59;text-decoration: underline;text-underline-offset: 2px;text-decoration-thickness: 1px;transition: color .15s ease;}
.form-consent a:hover {color: #004dff;}

/* Галочка согласия. Contact Form 7 отдаёт разметку
   label > input[type=checkbox] + span.wpcf7-list-item-label — системный
   чекбокс прячем, квадрат рисуем псевдоэлементами на самом label,
   чтобы нажималась вся строка с текстом (на телефоне это важно). */
.form-consent .wpcf7-list-item {margin: 0;}
.form-consent label {position: relative;display: block;padding-left: 30px;cursor: pointer;}
.form-consent input[type="checkbox"] {position: absolute;width: 1px;height: 1px;opacity: 0;}
.form-consent label::before {content: '';position: absolute;left: 0;top: 0;width: 20px;height: 20px;border: 2px solid #c9ced9;border-radius: 6px;background: #fff;transition: border-color .15s ease, background .15s ease;}
.form-consent label::after {content: '';position: absolute;left: 7px;top: 4px;width: 5px;height: 10px;border: solid #fff;border-width: 0 2px 2px 0;transform: rotate(45deg) scale(.5);opacity: 0;transition: opacity .15s ease, transform .15s ease;}
.form-consent label:hover::before {border-color: var(--cp-blue, #004dff);}
.form-consent label:has(input:checked)::before {border-color: #004dff;background: #004dff;}
.form-consent label:has(input:checked)::after {opacity: 1;transform: rotate(45deg) scale(1);}
.form-consent label:has(input:focus-visible)::before {box-shadow: 0 0 0 4px rgba(0, 77, 255, .18);}
/* сообщение «нужно поставить галочку» — от CF7, показываем внятно */
.form-consent .wpcf7-not-valid-tip {display: block;margin-top: 6px;color: #d13b3b;font-size: 12.5px;}

/* Оформление содержимого окна — перенесено из style.css, где оно лежало
   вперемешку с позиционированием старой шторки. */
.modal p {font-weight: 600;padding-bottom: 10px;}
.modal div.st {padding: 10px 0;}
.modal .uk {margin: 0;padding: 12px 18px;background: #eef0f6;font-weight: 600;border-radius: 12px;}
/* Отрицательных полей тут быть не должно: у окна и у полноэкранного меню
   разные внутренние отступы, и блок вылезал за край — в мобильном меню
   появлялась горизонтальная прокрутка. */
.modal .grid {gap: 20px;}

/* ====================== Защита от горизонтальной прокрутки ================ */
/* ☠️ У элемента внутри grid/flex по умолчанию min-width: auto — он не может
   стать уже своего содержимого. Поля формы Contact Form 7 приходят с size="40"
   и cols="40", их минимальная ширина около 430 px, и на телефоне колонка
   распирала страницу: документ 465 px при экране 390. Лечится в одном месте. */
.grid > *, .c-slide, .modal-content > * {min-width: 0;}

/* Поля не должны быть шире своего контейнера, какой бы size им ни поставили */
input:not([type="checkbox"]):not([type="radio"]),
textarea, select {max-width: 100%;}
textarea {resize: vertical;}

/* Кнопки темы: обёртка имеет фиксированную ширину 222px и декоративные точки,
   вынесенные за правый край на 15px. На узком экране это давало
   горизонтальную прокрутку всей страницы. */
.grad-button {max-width: 100%;}
.grad-button__link {max-width: 100%;}

@media (max-width: 767px) {
	.grad-button {width: 100%;margin-right: 0;}
	.grad-button__link {width: 100%;}
	/* точки-декор за краем кнопки на телефоне только мешают */
	.grad-button::after {display: none;}
}

/* Пока галочка согласия не стоит, Contact Form 7 держит кнопку отправки
   заблокированной. Без визуального отличия это выглядит как поломка:
   человек жмёт, а ничего не происходит. Показываем состояние явно. */
.wpcf7-submit:disabled {opacity: .5;cursor: not-allowed;filter: saturate(.4);}
.wpcf7-submit:disabled:hover {transform: none;}

/* ========================= Плавающая кнопка связи ======================== */
/* Было: пять голых иконок в столбик. Фиолетовый кружок Max опознать нельзя,
   не сказано, как быстро ответят, и не было главного действия — «перезвоните
   мне», хотя форма на сайте есть. Стало: карточка с подписями и выбором. */

.cw {position: fixed;right: 24px;bottom: 24px;z-index: 9990;}

.cw__toggle {position: relative;display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;padding: 0;border: 0;border-radius: 50%;background: linear-gradient(135deg, #2f6dff, #004dff);box-shadow: 0 10px 26px rgba(0, 55, 180, .38);cursor: pointer;transition: transform .2s ease, box-shadow .2s ease;}
.cw__toggle:hover {transform: scale(1.06);box-shadow: 0 14px 32px rgba(0, 55, 180, .46);}
.cw__toggle:focus-visible {outline: 3px solid #8ef78d;outline-offset: 3px;}
.cw__ico-close {display: none;}
.cw.is-open .cw__ico-chat {display: none;}
.cw.is-open .cw__ico-close {display: block;}

/* Пульс — только пока панель закрыта, иначе мешает читать список */
.cw__toggle::before {content: '';position: absolute;inset: -6px;border-radius: 50%;border: 2px solid rgba(0, 77, 255, .45);opacity: 0;animation: cwpulse 2.2s ease-out infinite;}
.cw.is-open .cw__toggle::before {animation: none;}
@keyframes cwpulse {0% {transform: scale(.9);opacity: .7;} 70% {transform: scale(1.35);opacity: 0;} 100% {opacity: 0;}}

.cw__panel {position: absolute;right: 0;bottom: 74px;width: 320px;background: #fff;border-radius: 22px;box-shadow: 0 24px 60px rgba(10, 16, 38, .26);overflow: hidden;transform: translateY(10px) scale(.98);transform-origin: bottom right;opacity: 0;transition: opacity .2s ease, transform .24s cubic-bezier(.2, .8, .25, 1);}
.cw.is-open .cw__panel {opacity: 1;transform: none;}
.cw__panel[hidden] {display: none;}

.cw__head {padding: 18px 20px 14px;border-bottom: 1px solid #eef0f5;}
.cw__title {margin: 0;font-family: 'Noto Sans SemiBold', 'Noto Sans', sans-serif;font-size: 17px;line-height: 1.3;color: #14161f;}
.cw__sub {margin: 4px 0 0;font-size: 13px;line-height: 1.4;color: #767c8b;}

.cw__list {display: flex;flex-direction: column;padding: 8px;}
.cw__item {display: flex;align-items: center;gap: 12px;width: 100%;padding: 10px 12px;border: 0;border-radius: 14px;background: none;text-align: left;text-decoration: none;cursor: pointer;transition: background .14s ease;}
.cw__item:hover {background: #f3f6ff;}
.cw__item:focus-visible {outline: 2px solid #004dff;outline-offset: -2px;}
.cw__ico {flex: 0 0 auto;display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}
.cw__ico img {display: block;width: 40px;height: 40px;border-radius: 50%;}
.cw__ico--call {background: linear-gradient(135deg, #8ef78d, #21b573);}
.cw__ico--tel {background: #ff6b6b;}
.cw__ico--mail {background: #2196f3;}
.cw__text {display: flex;flex-direction: column;gap: 1px;min-width: 0;}
.cw__text b {font-size: 15px;font-weight: 600;color: #1b1d26;}
.cw__text i {font-style: normal;font-size: 12.5px;color: #7b8090;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.cw__item--call {background: #f2fbf5;}
.cw__item--call:hover {background: #e7f7ee;}

@media (max-width: 767px) {
	.cw {right: 14px;bottom: 14px;}
	.cw__toggle {width: 54px;height: 54px;}
	/* панель шире кнопки, поэтому прижимаем к краям экрана, а не к кнопке */
	.cw__panel {position: fixed;right: 12px;left: 12px;bottom: 78px;width: auto;}
	.cw__item {padding: 12px;}
}

@media (prefers-reduced-motion: reduce) {
	.cw__toggle, .cw__panel {transition: none;}
	.cw__toggle::before {animation: none;}
}

/* ═══════════════════════════ Формы заявок ═══════════════════════════
 * Своя форма вместо Contact Form 7. Разметка описана в inc/forms.php,
 * поведение — в assets/forms.js. Класс .form-consent общий с прежними
 * формами, поэтому галочка согласия стилями выше уже покрыта.
 */

.bkf {display: grid;gap: 18px;}
.bkf__intro {margin: 0;color: #6f7484;line-height: 1.55;}
.bkf__fields {display: grid;gap: 18px;}
.bkf__field {display: grid;gap: 8px;min-width: 0;}
.bkf__field label {font-size: 15px;font-weight: 600;color: #1b1d26;}
.bkf__req {color: #d13b3b;}

.bkf input[type="text"], .bkf input[type="tel"], .bkf input[type="email"], .bkf textarea {width: 100%;max-width: 100%;padding: 14px 18px;border: 1.5px solid #dfe3ec;border-radius: 14px;background: #fff;font: inherit;font-size: 15px;color: #1b1d26;outline: none;transition: border-color .15s ease, box-shadow .15s ease;}
.bkf input::placeholder, .bkf textarea::placeholder {color: #a8adba;}
.bkf input:focus, .bkf textarea:focus {border-color: #004dff;box-shadow: 0 0 0 4px rgba(0, 77, 255, .12);}
.bkf textarea {resize: vertical;min-height: 96px;line-height: 1.5;}

.bkf__field--invalid input, .bkf__field--invalid textarea {border-color: #d13b3b;}
.bkf__error {font-size: 13px;color: #d13b3b;}

.bkf__submit {margin: 0;}
.bkf__submit button {cursor: pointer;border: none;font: inherit;}
.bkf__submit button[disabled] {opacity: .6;cursor: progress;}

/* ловушка для роботов: человек её не видит, но и с экрана читалка не озвучит */
.bkf__trap {position: absolute;left: -9999px;width: 1px;height: 1px;overflow: hidden;}

.bkf__result {margin: 0;padding: 14px 16px;border-radius: 12px;font-size: 14.5px;line-height: 1.5;}
.bkf__result--ok {background: #eefaf1;border: 1.5px solid #43b06a;color: #22683f;}
.bkf__result--error {background: #fdeeee;border: 1.5px solid #e08282;color: #a02b2b;}

/*
 * Большая форма заявки: контакты в один ряд, описание заказа на всю ширину.
 * Раскладка «два поля слева, одно справа» оставляла справа пустое место —
 * недоделанный дизайн, а не воздух.
 */
@media (min-width: 768px) {
	.bkf--order .bkf__fields {grid-template-columns: 1fr 1fr;}
	.bkf--order .bkf__field--message {grid-column: 1 / -1;}
}
@media (min-width: 992px) {
	.bkf--order .bkf__fields {grid-template-columns: repeat(3, 1fr);gap: 22px;}
}

/*
 * Форма в тёмном блоке (#form2) — поля на белом остаются, а подписи
 * и текст согласия должны читаться на тёмном фоне.
 */
#form2 .bkf__field label, #form2 .bkf__intro {color: #fff;}
#form2 .form-consent {max-width: none;font-size: 14px;color: rgba(255, 255, 255, .92);}
#form2 .form-consent a {color: #fff;}
#form2 .form-consent label::before {border-color: rgba(255, 255, 255, .5);background: transparent;}
#form2 .form-consent label:has(input:checked)::before {border-color: #8ef78d;background: #8ef78d;}
#form2 .form-consent label:has(input:checked)::after {border-color: #10331d;}

/* блок способов связи под большой формой */
#form2 .form-footer {margin-top: 48px;}
#form2 .contact-info {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 18px 32px;}
#form2 .sv, #form2 .tw, #form2 .ve {display: flex;align-items: center;gap: 12px;}
#form2 .sv a {display: grid;place-items: center;width: 46px;height: 46px;border-radius: 50%;background: rgba(255, 255, 255, .16);transition: background .15s ease, transform .15s ease;}
#form2 .sv a:hover {background: rgba(255, 255, 255, .3);transform: translateY(-2px);}
#form2 .sv img {width: 24px;height: 24px;}
#form2 .pb a.phone {display: inline-flex;align-items: center;gap: 10px;font-size: 20px;font-weight: 600;color: #fff;}
#form2 .pb a.phone img {width: 22px;height: 22px;}

/* ═══════════════════════ Калькулятор стоимости ═══════════════════════
 * Своё решение вместо EZ Form Calculator. Слева поля расчёта, справа
 * липкий блок с итогом и формой заявки: сумма видна, пока листаешь поля.
 */

.bkc {display: grid;gap: 28px;align-items: start;}
.bkc__fields {display: grid;gap: 20px;min-width: 0;}

.bkc__heading {grid-column: 1 / -1;margin: 12px 0 0;padding-top: 14px;border-top: 1.5px solid #e6e9f0;font-size: 19px;font-weight: 700;color: #1b1d26;}
.bkc__heading:first-child {margin-top: 0;padding-top: 0;border-top: none;}

.bkc__field {display: grid;gap: 10px;align-content: start;min-width: 0;}
.bkc__field[hidden] {display: none !important;}
.bkc__label {font-size: 15.5px;font-weight: 600;color: #1b1d26;}
.bkc__req {color: #d13b3b;font-style: normal;}

.bkc__select, .bkc__number {width: 100%;max-width: 100%;padding: 13px 16px;border: 1.5px solid #dfe3ec;border-radius: 12px;background: #fff;font: inherit;font-size: 15px;color: #1b1d26;outline: none;transition: border-color .15s ease, box-shadow .15s ease;}
.bkc__select:focus, .bkc__number:focus {border-color: #004dff;box-shadow: 0 0 0 4px rgba(0, 77, 255, .12);}

.bkc__options {display: grid;gap: 8px;}
/* «Да / Нет» — в один ряд, а не столбиком на две строки */
.bkc__field--toggle .bkc__options:not(.bkc__options--img) {grid-template-columns: 1fr 1fr;}
/* на телефоне пояснение уходит под поле: в узкой колонке оно рвалось на пять строк */
.bkc__hint--top {display: block;margin: -4px 0 2px;}
.bkc__num-row {display: grid;gap: 8px;}
.bkc__num-main {display: grid;gap: 10px;min-width: 0;}
.bkc__stepper {display: flex;align-items: center;gap: 8px;}
.bkc__stepper .bkc__number {flex: 1 1 auto;width: auto;min-width: 0;height: 46px;padding: 0 12px;text-align: center;font-size: 16px;font-weight: 600;-moz-appearance: textfield;}
.bkc__stepper .bkc__number::-webkit-outer-spin-button, .bkc__stepper .bkc__number::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.bkc__stepper .bkc__count-btn {flex: 0 0 46px;width: 46px;height: 46px;font-size: 21px;}
/* ползунок: дорожка тонкая, ручка крупная — попасть пальцем */
/* ☠ touch-action: none обязателен. При значении auto палец на ползунке
   уводит жест в прокрутку страницы, и слайдер «не тянется» — работают
   только кнопки. Ловилось на калькуляторах 08.09.2026. */
.bkc__range {width: 100%;height: 28px;margin: 0;padding: 0;background: transparent;-webkit-appearance: none;appearance: none;cursor: grab;touch-action: none;}
.bkc__range:active {cursor: grabbing;}
.bkc__range::-webkit-slider-runnable-track {height: 6px;border-radius: 3px;background: #e3e7f0;}
.bkc__range::-moz-range-track {height: 6px;border-radius: 3px;background: #e3e7f0;}
.bkc__range::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 26px;height: 26px;margin-top: -10px;border: 0;border-radius: 50%;background: #004dff;box-shadow: 0 2px 6px rgba(0, 77, 255, .35);}
.bkc__range::-moz-range-thumb {width: 26px;height: 26px;cursor: grab;border: 0;border-radius: 50%;background: #004dff;box-shadow: 0 2px 6px rgba(0, 77, 255, .35);}
.bkc__range:focus-visible {outline: none;}
.bkc__range:focus-visible::-webkit-slider-thumb {box-shadow: 0 0 0 4px rgba(0, 77, 255, .25);}
@media (min-width: 600px) {
	.bkc__num-row {grid-template-columns: minmax(180px, 270px) 1fr;gap: 14px;align-items: center;}
}
.bkc__hint {font-size: 13px;line-height: 1.45;color: #7b8090;}
.bkc__option {display: flex;align-items: center;gap: 10px;padding: 11px 14px;border: 1.5px solid #e6e9f0;border-radius: 12px;background: #fff;cursor: pointer;font-size: 14.5px;line-height: 1.4;color: #2b2f3a;transition: border-color .15s ease, background .15s ease;}
.bkc__option:hover {border-color: #b9c3dd;background: #fbfcff;}
/*
 * Тема глушит нативный вид переключателей (appearance: none), поэтому
 * кружок и галочку рисуем сами — иначе в калькуляторе не видно,
 * что именно выбрано.
 */
.bkc__option input {flex: none;position: relative;width: 20px;height: 20px;margin: 0;padding: 0;appearance: none;-webkit-appearance: none;border: 2px solid #c9ced9;background: #fff;cursor: pointer;transition: border-color .15s ease, background .15s ease;}
.bkc__option input[type="radio"] {border-radius: 50%;}
.bkc__option input[type="checkbox"] {border-radius: 6px;}
.bkc__option input:hover {border-color: #8fa2d6;}
.bkc__option input:checked {border-color: #004dff;background: #004dff;}
.bkc__option input[type="radio"]:checked::after {content: '';position: absolute;left: 50%;top: 50%;width: 8px;height: 8px;border-radius: 50%;background: #fff;transform: translate(-50%, -50%);}
.bkc__option input[type="checkbox"]:checked::after {content: '';position: absolute;left: 5px;top: 1px;width: 5px;height: 10px;border: solid #fff;border-width: 0 2px 2px 0;transform: rotate(45deg);}
.bkc__option input:focus-visible {outline: none;box-shadow: 0 0 0 4px rgba(0, 77, 255, .18);}
.bkc__option:has(input:checked) {border-color: #004dff;background: #f3f7ff;}

/* Плитки с фотографией.
   ☠️ История правок, чтобы не ходить по кругу:
     1) было `height:130px; object-fit:cover` — квадратные снимки резались,
        а колонки в разных группах выходили разной ширины;
     2) было непонятно, куда жать: кружок радио и фото спорили за роль;
     3) Михаил: «сделай микс-бленд, чтобы фото были как будто прозрачные»,
        «клик по фото это выбор, лупа отдельно», «не вижу цены».
   Итог: снимки сняты на белом фоне, поэтому multiply убирает подложку
   и предмет ложится прямо на карточку. Фото внутри label — клик по нему
   выбирает вариант; лупа лежит вне label и только открывает просмотрщик. */
/* ☠️ auto-fit, а не auto-fill: при четырёх плитках на широком экране
   auto-fill оставлял пустые колонки справа — Михаил показал скриншотом. */
.bkc__options--img {grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));gap: 14px;justify-content: start;grid-auto-rows: 1fr;}
/* ☠️ Потолок ширины плитки обязателен. Колонка поля — 408 px, и при одной
   опции («Вывозить грунт?», «Скобировать кольца?») трек 1fr растягивал
   карточку на все 408 px, а картинка с aspect-ratio 1/1 вырастала до
   408×408 — на главной это выглядело как случайно вставленное фото
   с пустотой вокруг. С потолком одиночная плитка того же размера,
   что и плитки в группах на три-четыре варианта. */
.bkc__options--img > * {max-width: 200px;width: 100%;}
/* ☠️ На десктопе ширина плитки фиксированная. С резиновым 1fr она зависела
   от того, на сколько колонок разложено поле: в узкой колонке выходило
   200 px, в поле на всю ширину — 156, и на одной странице («Чистка
   колодца») карточки были разного размера. Ряд теперь просто вмещает
   разное их число, а сама плитка везде одинаковая. */
@media (min-width: 900px) {
	.bkc__options--img {grid-template-columns: repeat(auto-fit, 176px);}
	.bkc__options--img > * {max-width: none;}
	.bkc__field[data-opts="1"] .bkc__options--img {grid-template-columns: 1fr;}
}
.bkc__tile {position: relative;}
/* ☠️ Одиночный вариант — это «да/нет», а не выбор из ряда. Квадратная
   плитка 200 px в колонке шириной 408 оставляла рядом столько же пустоты
   («Вывозить грунт?», «Скобировать кольца?» на главной). Поэтому при
   единственной опции карточка разворачивается в строку: фото слева,
   название и цена справа, карточка занимает колонку целиком. */
.bkc__field[data-opts="1"] .bkc__options--img {grid-template-columns: 1fr;}
.bkc__field[data-opts="1"] .bkc__options--img > * {max-width: none;}
.bkc__field[data-opts="1"] .bkc__options--img .bkc__option {flex-direction: row;align-items: center;text-align: left;gap: 14px;padding: 10px 14px;}
.bkc__field[data-opts="1"] .bkc__media {flex: 0 0 84px;width: 84px;}
.bkc__field[data-opts="1"] .bkc__name {flex: 1 1 auto;}
.bkc__field[data-opts="1"] .bkc__price {margin: 0 44px 0 auto;padding: 0;white-space: nowrap;}
.bkc__options--img .bkc__option {flex-direction: column;align-items: stretch;text-align: center;gap: 8px;padding: 12px 10px 14px;height: 100%;border-radius: 14px;transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.bkc__options--img .bkc__option:hover {border-color: #b9c3dd;box-shadow: 0 6px 18px rgba(20, 32, 61, .08);transform: translateY(-2px);}
.bkc__options--img .bkc__option:has(input:checked) {border-color: #004dff;box-shadow: 0 0 0 1.5px #004dff inset, 0 8px 22px rgba(0, 77, 255, .14);}
.bkc__options--img .bkc__option:has(input:focus-visible) {box-shadow: 0 0 0 4px rgba(0, 77, 255, .22);}
/* кружок выбора в плитке не нужен: роль берёт вся карточка */
.bkc__options--img .bkc__option input[type="radio"],
.bkc__options--img .bkc__option input[type="checkbox"] {position: absolute;opacity: 0;width: 1px;height: 1px;margin: 0;pointer-events: none;}
.bkc__media {display: flex;align-items: center;justify-content: center;aspect-ratio: 1 / 1;}
/* ☠️ multiply работает только потому, что кадры сняты на чистом белом фоне.
   Появится снимок с цветным фоном — он ляжет грязным пятном, тогда сначала
   пересъёмка, а не отключение режима. */
.bkc__options--img img {display: block;width: 100%;height: 100%;object-fit: contain;mix-blend-mode: multiply;background: transparent;border: 0;padding: 2px;}
/* вариант-отказ: предмет обесцвечен, поверх перечёркнутый круг */
.bkc__media {position: relative;}
.bkc__media--off img {filter: grayscale(1) contrast(.85);opacity: .3;}
.bkc__media--off:not(:has(img)) {background: #f7f9fc;border-radius: 10px;}
.bkc__off {position: absolute;left: 50%;top: 50%;width: 46%;height: 46%;transform: translate(-50%, -50%);color: #aab1c0;pointer-events: none;}
.bkc__name {display: block;font-size: 13.5px;line-height: 1.35;color: #2b2f3a;}
.bkc__price {display: block;margin-top: auto;padding-top: 2px;font-size: 13.5px;font-weight: 600;color: #004dff;letter-spacing: -.2px;}
.bkc__price--zero {color: #8a90a0;font-weight: 500;}
/* галочка выбранного варианта */
.bkc__options--img .bkc__option::after {content: '';position: absolute;left: 10px;top: 10px;width: 24px;height: 24px;border-radius: 50%;background: #004dff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;opacity: 0;transform: scale(.6);transition: opacity .15s ease, transform .15s ease;}
.bkc__options--img .bkc__option:has(input:checked)::after {opacity: 1;transform: scale(1);}
/* лупа: отдельная кнопка поверх плитки, вне label */
.bkc__zoom {position: absolute;right: 8px;top: 8px;z-index: 2;display: flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 50%;background: rgba(255, 255, 255, .92);color: #2b2f3a;box-shadow: 0 2px 8px rgba(20, 32, 61, .18);transition: background .15s ease, color .15s ease, transform .15s ease;}
.bkc__zoom:hover {background: #004dff;color: #fff;transform: scale(1.06);}
.bkc__zoom:focus-visible {outline: none;box-shadow: 0 0 0 4px rgba(0, 77, 255, .25);}
/* цена в обычных списках без картинок */
.bkc__options:not(.bkc__options--img) .bkc__option {justify-content: flex-start;}
.bkc__options:not(.bkc__options--img) .bkc__price {margin: 0 0 0 auto;padding: 0;white-space: nowrap;}
@media (max-width: 480px){.bkc__options--img {grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));gap: 10px;}.bkc__zoom {width: 30px;height: 30px;}}

/* набор приборов с количеством */
/* ☠️ Поле «куда подвести воду» раньше имело собственную вёрстку — иконка
   44 px и поле ввода в строку. На странице водоснабжения оно выпадало
   из общего ряда карточек, поэтому теперь это те же плитки, что у radio
   и checkbox, плюс счётчик количества внизу. */
.bkc__option--multi {flex-direction: column;align-items: stretch;text-align: center;gap: 8px;padding: 12px 10px 12px;height: 100%;border: 1.5px solid #e6e9f0;border-radius: 14px;background: #fff;display: flex;transition: border-color .15s ease, box-shadow .15s ease;}
.bkc__option--multi.is-picked {border-color: #004dff;box-shadow: 0 0 0 1.5px #004dff inset, 0 8px 22px rgba(0, 77, 255, .14);}
.bkc__count {display: flex;align-items: center;gap: 6px;margin-top: auto;}
.bkc__count input {flex: 1 1 auto;width: auto;min-width: 46px;height: 32px;padding: 0 4px;border: 1.5px solid #dfe3ec;border-radius: 9px;font: inherit;text-align: center;outline: none;-moz-appearance: textfield;}
.bkc__count input::-webkit-outer-spin-button, .bkc__count input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.bkc__count input:focus {border-color: #004dff;}
.bkc__count-btn {flex: 0 0 32px;width: 32px;height: 32px;border: 1.5px solid #dfe3ec;border-radius: 9px;background: #f6f8fd;color: #2b2f3a;font-size: 17px;line-height: 1;cursor: pointer;transition: background .15s ease, border-color .15s ease, color .15s ease;}
.bkc__count-btn:hover {background: #004dff;border-color: #004dff;color: #fff;}
/* на телефоне кнопка счётчика должна быть не меньше 40 px: 32 px пальцем
   промахиваются, а стрелок у числового поля на мобильных браузерах нет */
@media (max-width: 700px) {
	.bkc__count-btn {flex: 0 0 40px;width: 40px;height: 40px;font-size: 19px;}
	.bkc__count input {height: 40px;padding: 0 4px;min-width: 52px;font-size: 16px;}
}

/* итог и заявка */
.bkc__side {display: grid;gap: 18px;align-content: start;}
.bkc__total {display: grid;gap: 6px;padding: 22px;border-radius: 18px;background: linear-gradient(135deg, #27ce6a, #004dff);color: #fff;}
.bkc__total-label {font-size: 14px;opacity: .9;}
.bkc__total-value {font-size: 34px;font-weight: 700;line-height: 1.15;letter-spacing: -.5px;}
.bkc__total-note {font-size: 12.5px;line-height: 1.45;opacity: .88;}
/* расшифровка расчёта под суммой */
.bkc__lines {display: grid;gap: 5px;margin: 4px 0 2px;padding: 12px 0 0;list-style: none;border-top: 1px solid rgba(255,255,255,.28);}
.bkc__lines li {font-size: 13px;line-height: 1.4;opacity: .95;}

.bkc .bkf {padding: 22px;border: 1.5px solid #e6e9f0;border-radius: 18px;background: #fff;}

@media (min-width: 992px) {
	.bkc {grid-template-columns: minmax(0, 1fr) 360px;gap: 34px;}
	.bkc__fields {grid-template-columns: 1fr 1fr;}
	.bkc__field--multi, .bkc__field--radio:has(.bkc__options--img) {grid-column: 1 / -1;}
	/* числовое поле с пояснением занимает ряд целиком */
	.bkc__field--number:has(.bkc__hint) {grid-column: 1 / -1;}

	/*
	 * Список от четырёх вариантов занимает всю ширину и раскладывается
	 * в две колонки: иначе напротив него в соседней колонке зияет пустота.
	 */
	.bkc__field--radio[data-opts="4"], .bkc__field--radio[data-opts="5"],
	.bkc__field--radio[data-opts="6"], .bkc__field--radio[data-opts="7"],
	.bkc__field--radio[data-opts="8"], .bkc__field--checkbox[data-opts="4"],
	.bkc__field--checkbox[data-opts="5"], .bkc__field--checkbox[data-opts="6"] {grid-column: 1 / -1;}
	.bkc__field--radio[data-opts="4"] .bkc__options:not(.bkc__options--img),
	.bkc__field--radio[data-opts="5"] .bkc__options:not(.bkc__options--img),
	.bkc__field--radio[data-opts="6"] .bkc__options:not(.bkc__options--img),
	.bkc__field--radio[data-opts="7"] .bkc__options:not(.bkc__options--img),
	/* ☠️ Только для списков без картинок: плиточные группы держат свою
	   сетку auto-fill, иначе четыре плитки растягивались на пол-экрана. */
	.bkc__field--checkbox[data-opts="4"] .bkc__options:not(.bkc__options--img),
	.bkc__field--checkbox[data-opts="5"] .bkc__options:not(.bkc__options--img),
	.bkc__field--checkbox[data-opts="6"] .bkc__options:not(.bkc__options--img) {grid-template-columns: 1fr 1fr;}
	.bkc__side {position: sticky;top: 90px;}
}

/*
 * Кнопка «наверх» и виджет связи стояли в одном углу и налезали друг на друга.
 * Ставим кнопку строго над виджетом и по его оси; форму берём такую же круглую,
 * чтобы угол выглядел одним элементом, а не двумя случайными.
 */
/*
 * Появление — только прозрачностью. Прежний translateY(20px) уводил кнопку
 * вниз на двадцать пикселей, и в скрытом состоянии она всё равно налезала
 * на виджет: расстояние между ними считать было не от чего.
 */
.btn-back-top {right: 31px;bottom: 98px;left: auto;border-radius: 50%;z-index: 9989;transform: none;box-shadow: 0 8px 20px rgba(0, 55, 180, .28);}
.btn-back-top.visible {opacity: .92;transform: none;}
.btn-back-top:hover {transform: none;}

@media (max-width: 767px) {
	.btn-back-top {right: 21px;bottom: 80px;left: auto;}
}

/* ═══════════════ Текстовый блок услуги и врезка ═══════════════
 * Абзацы в #text были сужены до 70 % под фоновую картинку, а списки
 * и заголовки шли на всю ширину — край текста получался рваным, и на
 * длинных страницах справа зияла полоса пустоты во всю высоту блока.
 * Теперь ширина одна для всего текста, а освободившееся поле занимает
 * врезка с ценой и заявкой.
 */

.text-grid {display: grid;gap: 28px;align-items: start;}
.text-main {min-width: 0;}

/* ширину задаём сетке, поэтому старое сужение абзацев снимаем */
#text .text-main p {width: auto;}

.text-card {display: grid;gap: 16px;padding: 24px;border-radius: 18px;background: #f5f8ff;border: 1.5px solid #e2e9f8;}
.text-card__price {display: grid;gap: 2px;}
.text-card__price span {font-size: 13.5px;color: #7b8090;}
.text-card__price b {font-size: 26px;font-weight: 700;color: #1b1d26;line-height: 1.2;}

.text-card__list {display: grid;gap: 9px;margin: 0;padding: 0;list-style: none;}
.text-card__list li {position: relative;padding-left: 24px;font-size: 14.5px;line-height: 1.45;color: #2b2f3a;}
.text-card__list li::before {content: '';position: absolute;left: 2px;top: 5px;width: 6px;height: 10px;border: solid #27ce6a;border-width: 0 2px 2px 0;transform: rotate(45deg);}

.text-card .grad-button {width: 100%;margin: 0;}
.text-card .grad-button__link {width: 100%;text-align: center;padding: 13px 20px;}
.text-card .grad-button::after {display: none;}

.text-card__phone {font-size: 20px;font-weight: 700;color: #1b1d26;text-align: center;}
.text-card__phone:hover {color: #004dff;}
.text-card__note {font-size: 12.5px;line-height: 1.45;color: #7b8090;text-align: center;}

@media (min-width: 992px) {
	.text-grid {grid-template-columns: minmax(0, 1fr) 300px;gap: 40px;}
	.text-side {position: sticky;top: 90px;}
	/* фоновая картинка блока пряталась под врезкой — убираем её на широком экране */
	#text .container {background: none;}
}

/* раскрывающаяся секция: «Добавить второй колодец» в калькуляторе углубления */
.bkc__more {grid-column: 1 / -1;border: 1px solid #e3e7f0;border-radius: 14px;background: #fbfcff;}
.bkc__more-sum {display: flex;align-items: center;gap: 10px;cursor: pointer;padding: 14px 16px;font-weight: 600;color: #004dff;list-style: none;}
.bkc__more-sum::-webkit-details-marker {display: none;}
.bkc__more-sum::before {content: '+';display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 50%;background: #004dff;color: #fff;font-size: 17px;line-height: 1;}
.bkc__more[open] .bkc__more-sum::before {content: '−';}
.bkc__more-body {display: grid;gap: 18px;padding: 0 16px 16px;}
@media (min-width: 900px) {
	.bkc__more-body {grid-template-columns: 1fr 1fr;}
}