услуги

<!--
 =========================================
УК «УПРАВСТРОЙСОЮЗ»
СТРАНИЦА ПЛАТНЫХ УСЛУГ
/content/16630
========================================= -->

<style>
/* Стили только для нужной таблицы */

.uss-price-section {
 width: 100%;
 margin: 24px 0 36px;
 font-family: 'Manrope', Arial, sans-serif;
 color: #454D52;
}

.uss-price-section * {
 box-sizing: border-box;
}

/* Панель поиска */

.uss-price-tools {
 padding: 24px;
 margin-bottom: 18px;
 background: #F7F5EF;
 border: 1px solid #E7E1D3;
 border-radius: 16px;
}

.uss-price-tools-title {
 margin: 0 0 6px;
 font-size: 23px;
 line-height: 1.3;
 font-weight: 700;
 color: #454D52;
}

.uss-price-tools-description {
 margin: 0 0 18px;
 color: #69757C;
 font-size: 14px;
 line-height: 1.5;
}

.uss-price-search {
 width: 100%;
 height: 50px;
 padding: 0 18px;
 border: 1px solid #DDD8CB;
 border-radius: 10px;
 outline: none;
 background: #fff;
 color: #252D32;
 font: 400 15px 'Manrope', Arial, sans-serif;
 transition: border-color .2s, box-shadow .2s;
}

.uss-price-search:focus {
 border-color: #D7B45A;
 box-shadow: 0 0 0 3px rgba(215,180,90,.16);
}

.uss-price-count {
 margin-top: 12px;
 font-size: 13px;
 color: #69757C;
}

/* Таблица */

.uss-price-table-wrap {
 width: 100%;
 overflow-x: auto;
 border: 1px solid #E5E5E0;
 border-radius: 16px;
 background: #FFFFFF;
 box-shadow: 0 5px 24px rgba(37,45,50,.06);
}

table.uss-price-table {
 width: 100% !important;
 margin: 0 !important;
 border: 0 !important;
 border-collapse: separate !important;
 border-spacing: 0 !important;
 table-layout: auto !important;
 background: #FFFFFF !important;
 font-family: 'Manrope', Arial, sans-serif !important;
}

/* Заголовки колонок */

.uss-price-table tr.uss-price-header {
 background: #454D52 !important;
}

.uss-price-table tr.uss-price-header th,
.uss-price-table tr.uss-price-header td {
 padding: 18px 20px !important;
 background: #454D52 !important;
 color: #FFFFFF !important;
 font-size: 14px !important;
 font-weight: 600 !important;
 text-align: left !important;
 border: none !important;
}

.uss-price-table tr.uss-price-header > :last-child {
 text-align: right !important;
}

/* Разделы прейскуранта */

.uss-price-table tr.uss-price-category > td,
.uss-price-table tr.uss-price-category > th {
 padding: 16px 20px !important;
 background: #EDF0F0 !important;
 color: #454D52 !important;
 font-size: 15px !important;
 font-weight: 700 !important;
 line-height: 1.45 !important;
 border-top: 2px solid #D7B45A !important;
 border-bottom: 1px solid #DFE3E3 !important;
 text-transform: uppercase;
}

/* Обычные строки */

.uss-price-table tr.uss-price-row > td {
 padding: 15px 20px !important;
 border: none !important;
 border-bottom: 1px solid #ECEDEC !important;
 background: #FFFFFF !important;
 color: #454D52 !important;
 font-size: 14px !important;
 line-height: 1.55 !important;
 vertical-align: middle !important;
 overflow-wrap: anywhere;
}

.uss-price-table tr.uss-price-row:nth-child(even) > td {
 background: #FAFAF8 !important;
}

.uss-price-table tr.uss-price-row:hover > td {
 background: #F7F2E5 !important;
}

/* Название услуги */

.uss-price-table tr.uss-price-row > td:first-child {
 width: 68%;
 font-weight: 500 !important;
}

/* Единица измерения */

.uss-price-table tr.uss-price-row > td:nth-child(2) {
 width: 12%;
 white-space: nowrap;
 color: #7B868C !important;
}

/* Цена */

.uss-price-table tr.uss-price-row > td:nth-child(3) {
 width: 20%;
 text-align: right !important;
 white-space: nowrap;
 color: #454D52 !important;
 font-weight: 700 !important;
 font-size: 16px !important;
 font-variant-numeric: tabular-nums;
}

/* Ничего не найдено */

.uss-price-empty {
 display: none;
 margin-top: 16px;
 padding: 22px;
 border-radius: 12px;
 background: #F7F5EF;
 color: #69757C;
 text-align: center;
 font-size: 14px;
}

/* =========================================
 МОБИЛЬНАЯ ВЕРСИЯ
 ========================================= */

@media (max-width: 767px) {

 .uss-price-section {
 margin: 18px 0 28px;
 }

 .uss-price-tools {
 padding: 18px 15px;
 border-radius: 14px;
 }

 .uss-price-tools-title {
 font-size: 21px;
 }

 .uss-price-tools-description {
 font-size: 13px;
 }

 .uss-price-search {
 height: 48px;
 font-size: 16px;
 }

 .uss-price-table-wrap {
 overflow: visible;
 border: none;
 border-radius: 0;
 box-shadow: none;
 background: transparent;
 }

 table.uss-price-table,
 .uss-price-table tbody,
 .uss-price-table thead {
 display: block !important;
 width: 100% !important;
 background: transparent !important;
 }

 /* Скрываем табличную шапку */
 .uss-price-table tr.uss-price-header {
 display: none !important;
 }

 /* Заголовки разделов */
 .uss-price-table tr.uss-price-category {
 display: block !important;
 width: 100% !important;
 margin: 24px 0 12px !important;
 }

 .uss-price-table tr.uss-price-category > td,
 .uss-price-table tr.uss-price-category > th {
 display: block !important;
 width: 100% !important;
 padding: 14px 16px !important;
 border-radius: 10px !important;
 background: #454D52 !important;
 color: #FFFFFF !important;
 font-size: 13px !important;
 line-height: 1.5 !important;
 border: none !important;
 border-left: 4px solid #D7B45A !important;
 }

 /* Каждая услуга — отдельная карточка */
 .uss-price-table tr.uss-price-row {
 display: grid !important;
 grid-template-columns: minmax(0,1fr) auto;
 gap: 8px 12px;
 width: 100% !important;
 margin-bottom: 10px !important;
 padding: 16px !important;
 background: #FFFFFF !important;
 border: 1px solid #E5E5E0 !important;
 border-radius: 12px !important;
 box-shadow: 0 3px 12px rgba(37,45,50,.04);
 }

 .uss-price-table tr.uss-price-row > td {
 display: block !important;
 width: auto !important;
 min-width: 0 !important;
 padding: 0 !important;
 border: none !important;
 background: transparent !important;
 }

 /* Название */
 .uss-price-table tr.uss-price-row > td:first-child {
 grid-column: 1 / -1;
 font-size: 14px !important;
 font-weight: 600 !important;
 line-height: 1.5 !important;
 color: #454D52 !important;
 }

 /* Единица измерения */
 .uss-price-table tr.uss-price-row > td:nth-child(2) {
 grid-column: 1;
 align-self: end;
 font-size: 12px !important;
 color: #7B868C !important;
 }

 /* Цена */
 .uss-price-table tr.uss-price-row > td:nth-child(3) {
 grid-column: 2;
 align-self: end;
 text-align: right !important;
 font-size: 19px !important;
 font-weight: 700 !important;
 color: #A4833E !important;
 white-space: nowrap;
 }

 .uss-price-table tr.uss-price-row > td:nth-child(3)::after {
 content: " ₽";
 }
}
</style>

<script>
(function () {
 "use strict";

 /* Работаем исключительно на странице платных услуг */
 if (window.location.pathname.replace(/\/+$/, "") !== "/content/16630") {
 return;
 }

 function initPriceList() {

 if (document.querySelector(".uss-price-section")) {
 return;
 }

 /* Находим таблицу именно по её содержимому */
 const tables = Array.from(
 document.querySelectorAll("table")
 );

 const table = tables.find(function (item) {
 const text = item.textContent || "";

 return (
 text.includes("Стоимость") &&
 text.includes("Отключение") &&
 text.includes("стояка")
 );
 });

 if (!table) return;

 table.classList.add("uss-price-table");

 /* Создаём контейнер */
 const section = document.createElement("section");
 section.className = "uss-price-section";

 const tools = document.createElement("div");
 tools.className = "uss-price-tools";

 tools.innerHTML = `
 <h2 class="uss-price-tools-title">
 Найти услугу
 </h2>

 <p class="uss-price-tools-description">
 Введите название работы, например:
 смеситель, радиатор, розетка или счётчик.
 </p>

 <input
 class="uss-price-search"
 type="search"
 placeholder="Поиск по прейскуранту"
 aria-label="Поиск платной услуги"
 >

 <div
 class="uss-price-count"
 aria-live="polite"
 ></div>
 `;

 const wrap = document.createElement("div");
 wrap.className = "uss-price-table-wrap";

 const empty = document.createElement("div");
 empty.className = "uss-price-empty";
 empty.textContent =
 "По вашему запросу ничего не найдено.";

 table.parentNode.insertBefore(section, table);

 section.appendChild(tools);
 section.appendChild(wrap);
 wrap.appendChild(table);
 section.appendChild(empty);

 /* Определяем типы строк */
 const rows = Array.from(table.querySelectorAll("tr"));

 const serviceRows = [];

 rows.forEach(function (row) {

 const cells = Array.from(
 row.querySelectorAll(":scope > td, :scope > th")
 );

 if (!cells.length) return;

 const fullText = row.textContent
 .replace(/\s+/g, " ")
 .trim();

 /* Заголовок колонок */
 if (
 cells.some(cell => cell.tagName === "TH") ||
 (
 fullText.includes("Наименование") &&
 fullText.includes("Стоимость")
 )
 ) {
 row.classList.add("uss-price-header");
 return;
 }

 /* Строки-разделы */
 const isCategory =
 cells.length < 3 ||
 cells.some(function (cell) {
 return Number(cell.getAttribute("colspan")) > 1;
 });

 if (isCategory) {
 row.classList.add("uss-price-category");
 return;
 }

 /* Обычные услуги */
 row.classList.add("uss-price-row");
 serviceRows.push(row);
 });

 const input = tools.querySelector(".uss-price-search");
 const count = tools.querySelector(".uss-price-count");

 function updateSearch() {

 const query = input.value
 .toLocaleLowerCase("ru")
 .trim()
 .replace(/\s+/g, " ");

 let visible = 0;

 serviceRows.forEach(function (row) {

 const text = row.textContent
 .toLocaleLowerCase("ru")
 .replace(/\s+/g, " ");

 const match =
 !query || text.includes(query);

 row.style.display = match ? "" : "none";

 if (match) visible++;
 });

 /* При поиске скрываем заголовки разделов:
 так результаты выглядят компактнее */
 table.querySelectorAll(
 ".uss-price-category"
 ).forEach(function (row) {
 row.style.display = query ? "none" : "";
 });

 count.textContent = query
 ? "Найдено услуг: " + visible
 : "Услуг в прейскуранте: " +
 serviceRows.length;

 empty.style.display =
 visible === 0 ? "block" : "none";
 }

 input.addEventListener("input", updateSearch);

 updateSearch();
 }

 if (document.readyState === "loading") {
 document.addEventListener(
 "DOMContentLoaded",
 initPriceList
 );
 } else {
 initPriceList();
 }

})();
</script>

<!-- КОНЕЦ ОФОРМЛЕНИЯ ПЛАТНЫХ УСЛУГ -->
услуги

Новости ЖКХ
