/* ========================================
   Стили сервисных страниц (Обучение / Удаление вмятин)
   Подключается глобально для HtmlContent из БД
   ======================================== */

/* Страховка от горизонтальной прокрутки на мобильных (defect 05).
   Это подстраховка, а не замена сворачиванию меню в бургер. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ==== Мобильное бургер-меню (< 900px), defect 05 ==== */
.mobileNavBurger { display: none; }
/* Чекбокс-переключатель прячется через CSS, а не атрибутом hidden:
   hidden убирает элемент из дерева доступности, и меню переставало открываться с клавиатуры. */
.mobileNavCheckbox { display: none; }
/* Список главного меню внутри панели нужен только на мобильной ширине:
   на десктопе те же ссылки уже есть в горизонтальном меню шапки. */
.mobileNavLinksWrap { display: none; }

@media (max-width: 900px) {
    /* Кнопка-бургер: только иконка, без подписи.
       Название для скринридеров осталось в aria-label самого label.
       .mobileNavBurger — flex-СТРОКА, поэтому три полоски лежат в отдельном
       контейнере-колонке: напрямую они выстраивались бы в ряд. */
    .mobileNavBurger {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        user-select: none;
        min-height: 44px;
        box-sizing: border-box;
    }
    .mobileNavBurgerIcon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        flex: 0 0 24px;
        width: 24px;
    }
    .mobileNavBurgerIcon span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
    }

    /* Чекбокс уводится с глаз, но остаётся в фокусе для клавиатуры. */
    .mobileNavCheckbox {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .mobileNavCheckbox:focus-visible ~ #headerLine2 .mobileNavBurger {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
    /* Повёрнутая в крестик иконка, когда меню раскрыто. */
    .mobileNavCheckbox:checked ~ #headerLine2 .mobileNavBurgerIcon span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobileNavCheckbox:checked ~ #headerLine2 .mobileNavBurgerIcon span:nth-child(2) {
        opacity: 0;
    }
    .mobileNavCheckbox:checked ~ #headerLine2 .mobileNavBurgerIcon span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .mobileNavBurgerIcon span {
        transition: transform .2s ease, opacity .2s ease;
    }

    /* Горизонтальное текстовое меню сворачиваем.
       Селектор с #headerLine2 обязателен: в легаси-стилях шаблона есть правило
       «#headerLine2 .headerLineColumn { display: table-cell }» со специфичностью
       (1,1,0). Медиазапрос специфичность не повышает, поэтому вариант из двух
       классов (0,2,0) проигрывал, меню оставалось видимым на 1130px и его пункты
       обрезались через overflow-x. Здесь (1,2,0) — правило выигрывает. */
    .headerLineColumn.headerLineMenu,
    #headerLine2 .headerLineColumn.headerLineMenu { display: none; }

    /* Мега-каталог по умолчанию скрыт, раскрывается по бургеру */
    #mainMenuStaticContainer { display: none; }
    .mobileNavCheckbox:checked ~ .menuContainerColor #mainMenuStaticContainer { display: block; }

    /* Каталог-меню в мобильном виде — вертикальный список во всю ширину */
    #mainMenuContainer .limiter { width: 100%; padding: 0; }

    /* Шапка: бургер слева, «Вход | Регистрация» справа — одной строкой.
       Оба элемента лежат в последней колонке: две предыдущие на мобильной
       ширине скрыты (topmenuHeaderLine — жёстко в app.css, меню — правилом ниже). */
    #headerLine2 .headerLineContainer {
        display: flex;
        align-items: center;
    }
    #headerLine2 .headerLineContainer > .headerLineColumn:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex: 1 1 100%;
        width: 100%;
        text-align: left;
    }
    #headerLine2 .headerLineContainer > .headerLineColumn:last-child > .mobileNavBurger {
        order: -1;
        flex: 0 0 auto;
        margin-left: -12px;
    }
    #headerLine2 .headerLineContainer > .headerLineColumn:last-child > #topAuth {
        flex: 0 0 auto;
    }
    .mobileNavBurger { padding: 8px 12px; }

    /* Ссылки главного меню внутри раскрытой панели. */
    .mobileNavLinksWrap {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
    }
    .mobileNavLinks {
        list-style: none;
        margin: 0;
        padding: 4px 0;
    }
    .mobileNavLinks li { margin: 0; }
    .mobileNavLinks a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 16px;
        font-size: 16px;
        text-decoration: none;
        color: inherit;
    }
    .mobileNavLinks a.selected { font-weight: 700; }

    /* Клик-таргеты не меньше 44px (defect 05) */
    #subMenu li a,
    #mainMenu li a,
    .toolsContainer a { min-height: 44px; display: flex; align-items: center; }
}



/* Основные стили страницы */
.av-wrapper {
    color: #333;
    line-height: 1.7;
    margin: 0 auto;
    padding: 20px;
}

/* Заголовок и расширенное введение */
.av-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 50px 30px;
    background: linear-gradient(to bottom, #f9fbfd, #ffffff);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}
.av-header h1 {
    color: #0061b2;
    margin-bottom: 25px;
    line-height: 1.2;
    text-align:center;
}
.av-header .av-lead {
    color: #0061b2;
    font-weight: 600;
    max-width: 1000px;
    margin: 0 auto 25px auto;
}
.av-header p {
    color: #555;
    max-width: 1000px;
    margin: 0 auto 20px auto;
    text-align: justify;
    text-align-last: center;
}

/* Блок преимуществ с иконками */
.av-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}
.av-feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid #eef2f6;
}
.av-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,97,178,0.1);
    border-bottom: 4px solid #0061b2;
}
.av-icon {
    margin-bottom: 25px;
}
.av-feature-card h3 {
    color: #222;
    margin-bottom: 15px;
}
.av-feature-card p {
    color: #666;
}

/* Текстовые секции */
.av-text-section {
    margin-bottom: 50px;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
}
.av-text-section.highlight-bg {
    background: #f0f7ff;
    border-left: 5px solid #0061b2;
}
.av-text-section h2 {
    color: #0061b2;
    margin-top: 0;
    margin-bottom: 25px;
}
.av-text-section h3 {
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
}
.av-text-section p {
    margin-bottom: 15px;
}

/* Списки */
.av-list {
    list-style: none;
    padding: 0;
}
.av-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
}
.av-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #0061b2;
    font-weight: bold;
}

/* Блок сравнения */
.av-comparison {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}
.av-comp-col {
    flex: 1;
    padding: 25px;
    border-radius: 8px;
}
.av-comp-bad {
    background: #fff5f5;
    border-top: 4px solid #dc3545;
}
.av-comp-good {
    background: #f0fdf4;
    border-top: 4px solid #28a745;
}

/* Таблицы цен */
.av-tables-section {
    margin-bottom: 60px;
}
.av-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}
.av-table th, .av-table td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.av-table th {
    background: #0061b2;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.av-table tr:last-child td { border-bottom: none; }
.av-table tr:hover td { background: #f9fbfd; }
.av-price {
    font-weight: bold;
    color: #0061b2;
    white-space: nowrap;
}

/* Онлайн оценка */
.av-online-calc {
    background: #fff;
    border: 2px dashed #0061b2;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 50px;
    text-align: center;
}

/* Гарантия */
.av-guarantee {
    text-align: center;
    background: #0061b2;
    color: #fff;
    padding: 25px;
    border-radius: 8px;
    font-weight: bold;
    margin: 50px 0;
    box-shadow: 0 10px 20px rgba(0,97,178,0.2);
}

/* Адаптивность */
@media (max-width: 900px) {
    .av-comparison { flex-direction: column; }
}
@media (max-width: 768px) {
    .av-table th, .av-table td { padding: 12px; }
    .av-text-section { padding: 25px; }
    .av-header { padding: 30px 15px; }
}

/* ========================================
   Стили страницы оценки ущерба (/req)
   ======================================== */

.av-photo-guide {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    margin: 0 auto 40px auto;
    color: #333;
    line-height: 1.6;
}
.av-photo-guide h2 {
    color: #0061b2;
    margin-top: 0;
    margin-bottom: 15px;
}
.av-photo-guide > p {
    margin-bottom: 30px;
    color: #555;
}
.av-tips-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 30px;
}
.av-tip-card {
    display: flex;
    align-items: flex-start;
    background: #fdfdfd;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #0061b2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}
.av-tip-card:hover {
    transform: translateX(5px);
    background: #fff;
}
.av-tip-icon {
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f0f7ff;
    border-radius: 50%;
}
.av-tip-content strong {
    display: block;
    color: #222;
    margin-bottom: 5px;
}
.av-tip-content p {
    margin: 0;
    color: #666;
}
.av-photo-disclaimer {
    background: #f0f7ff;
    padding: 20px;
    border-radius: 8px;
    color: #444;
    border: 1px solid #cce0ff;
}
.av-photo-disclaimer strong {
    color: #0061b2;
}
@media (min-width: 768px) {
    .av-tips-grid {
        grid-template-columns: 1fr 1fr;
    }
    .av-tip-card:last-child {
        grid-column: span 2;
    }
}
@media (max-width: 600px) {
    .av-photo-guide {
        padding: 25px 15px;
    }
}

/* ========================================
   Стили страницы обучения удалению вмятин
   ======================================== */

/* Заголовок страницы */
.av-header {
    text-align: center;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    padding: 60px 20px;
    border-radius: 12px;
    margin-bottom: 50px;
    box-shadow: 0 4px 20px rgba(0,97,178,0.05);
}
.av-header h1 {
    color: #0061b2;
    font-size: 2.8em;
    margin-bottom: 20px;
    line-height: 1.2;
}
.av-header p {
    font-size: 1.2em;
    color: #555;
    max-width: 900px;
    margin: 0 auto;
}

/* Секционные заголовки */
.av-section-title {
    text-align: center;
    color: #0061b2;
    font-size: 2.2em;
    margin: 60px 0 30px 0;
    position: relative;
}

/* Блоки: Теория / Практика */
.av-course-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 0 auto 50px auto;
    max-width: 1050px;
}
.av-course-block-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border-top: 5px solid #0061b2;
    flex: 1 1 400px;
    max-width: 500px;
    box-sizing: border-box;
}
.av-course-block-card.full-width {
    flex: 1 1 100%;
    max-width: 100%;
    border-top-color: #28a745;
    background: #f4fdf6;
}
.av-course-block-card h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: #222;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    text-align: center;
}

/* Карточки курсов (Тарифы) */
.av-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}
.av-upgrade-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.av-upgrade-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.av-upgrade-header {
    color: #fff;
    padding: 25px 20px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
}
.bg-green { background-color: #25b309; }
.bg-yellow { background-color: #fed407; color: #222; }
.bg-red { background-color: #fc3300; }
.bg-blue { background-color: #206bdc; }
.bg-orange { background-color: #ff9900; }
.bg-cyan { background-color: #09e8e8; color: #222; }

.av-upgrade-body {
    padding: 30px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.av-pricing-subtitle {
    font-size: 1.05em;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
    min-height: 48px;
}
.av-pricing-note {
    font-size: 0.85em;
    color: #777;
    text-align: center;
    margin-bottom: 25px;
    font-style: italic;
}
.av-upgrade-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}
.av-upgrade-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 25px;
    font-size: 0.95em;
}
.av-upgrade-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}
.av-upgrade-price {
    font-size: 1.8em;
    color: #222;
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 20px;
    border-top: 2px dashed #eee;
}

/* Таблица сравнения */
.av-table-container {
    overflow-x: auto;
    margin-bottom: 60px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border-radius: 10px;
}
.av-table th {
    color: #fff;
    padding: 20px;
    font-size: 1.1em;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.av-table th.col-title { background: #0061b2; text-align: left; }
.av-table th.col-green { background: #25b309; }
.av-table th.col-yellow { background: #fed407; color: #222; }
.av-table th.col-red { background: #fc3300; }

.av-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
}
.av-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: #444;
}
.av-check-green { color: #25b309; font-weight: bold; font-size: 1.4em; }
.av-check-yellow { color: #d4b000; font-weight: bold; font-size: 1.4em; }
.av-check-red { color: #fc3300; font-weight: bold; font-size: 1.4em; }
.av-dash { color: #ccc; font-weight: bold; }

/* Преимущества (Иконки) */
.av-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}
.av-feature {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    border-left: 4px solid #0061b2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.av-feature h3 {
    color: #0061b2;
    margin-top: 0;
    font-size: 1.2em;
}
.av-feature p {
    color: #555;
    margin: 0;
    font-size: 0.95em;
}

/* Команда */
.av-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}
.av-team-member {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.av-team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid #f0f7ff;
}
.av-team-member h3 { margin: 0 0 10px 0; color: #0061b2; font-size: 1.4em; }
.av-team-member p { color: #666; margin: 0; }

/* Блоки с акцентом (Цитаты / Важно) */
.av-alert {
    background: #fff;
    border: 2px dashed #0061b2;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 40px;
    text-align: center;
}
.av-alert strong { color: #0061b2; font-size: 1.2em; display: block; margin-bottom: 15px; }
.av-callout {
    background: #f0fdf4;
    border-left: 5px solid #28a745;
    padding: 25px 30px;
    border-radius: 0 10px 10px 0;
    margin-bottom: 40px;
}

/* Видео галерея */
.av-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.av-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.av-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Сертификаты */
.av-certs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 50px;
}
.av-certs img {
    height: 150px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.av-certs img:hover { transform: scale(1.05); }

@media (max-width: 768px) {
    .av-header h1 { font-size: 2.2em; }
    .av-section-title { font-size: 1.8em; }
    .av-video-grid { grid-template-columns: 1fr; }
    .av-course-blocks { flex-direction: column; }
}

/* ===== Якорное меню по разделам страницы (sticky + scroll-spy) ===== */
.dpAnchorNav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    margin: 0 0 24px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #eef0f3;
}
.dpAnchorLink {
    border: 1px solid #e2ecf6;
    background: #f5f9fd;
    color: #0061b2;
    font: 500 14px/1 robotomedium, arial, sans-serif;
    padding: 10px 18px;
    border-radius: 22px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.dpAnchorLink:hover { background: #0061b2; color: #fff; border-color: #0061b2; }
.dpAnchorLink.active { background: #0061b2; color: #fff; border-color: #0061b2; box-shadow: 0 2px 8px rgba(0, 97, 178, .25); }

/* ===== FAQ (аккордеон) ===== */
.av-faq-section { margin: 40px 0; }
.av-faq {
    border: 1px solid #e7e8ea;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}
.av-faq summary {
    cursor: pointer;
    padding: 18px 52px 18px 22px;
    font: 600 1.05em/1.4 robotomedium, arial, sans-serif;
    color: #1a1a1a;
    list-style: none;
    position: relative;
}
.av-faq summary::-webkit-details-marker { display: none; }
.av-faq summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 400;
    color: #0061b2;
    line-height: 1;
}
.av-faq[open] summary::after { content: '\2212'; }
.av-faq[open] summary { color: #0061b2; }
.av-faq-body { padding: 0 22px 20px; font-size: 1em; line-height: 1.7; color: #444; }

/* ===== Призыв к действию (CTA) ===== */
.av-cta {
    background: linear-gradient(135deg, #0061b2 0%, #0a7bd6 100%);
    border-radius: 14px;
    padding: 40px 32px;
    margin: 40px 0;
    text-align: center;
    color: #fff;
}
.av-cta h2 { color: #fff; margin: 0 0 14px; font-size: 1.7em; }
.av-cta p { color: #fff; opacity: .96; max-width: 720px; margin: 0 auto 24px; font-size: 1.08em; line-height: 1.6; }
.av-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.av-cta-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 8px;
    font: 600 1.02em/1 robotomedium, arial, sans-serif;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
}
.av-cta-btn:hover { opacity: .9; transform: translateY(-2px); }
.av-cta-btn-light { background: #fff; color: #0061b2; }
.av-cta-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .65); }

/* ===== Блок «Частые повреждения» (быстрая навигация) ===== */
.dpDamages { margin: 36px 0; }
.dpDamages h2 { text-align: center; color: #0061b2; margin-bottom: 24px; }
.dpDamagesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.dpDamageChip {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 18px 20px;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    background: #f7fbff;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dpDamageChip:hover { box-shadow: 0 8px 20px rgba(0, 97, 178, .12); transform: translateY(-3px); border-color: #b9d6ee; }
.dpDamageIco { font-size: 30px; line-height: 1; flex-shrink: 0; }
.dpDamageTxt { display: flex; flex-direction: column; gap: 3px; font-size: .95em; color: #555; line-height: 1.35; }
.dpDamageTxt strong { color: #1a1a1a; font-size: 1.02em; }
.dpDamagesCta { text-align: center; margin-top: 24px; }

/* ===== Отзывы клиентов (Review) ===== */
.dpReviews { margin: 40px 0; }
.dpReviews > h2 { text-align: center; color: #0061b2; margin-bottom: 12px; }
.dpReviewsSummary { text-align: center; margin-bottom: 26px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.dpRatingValue { font-size: 2em; font-weight: 700; color: #1a1a1a; line-height: 1; }
.dpStars { color: #ffb400; font-size: 1.4em; letter-spacing: 2px; }
.dpRatingCount { color: #777; font-size: .95em; }
.dpReviewsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.dpReview {
    margin: 0;
    padding: 22px 24px;
    border: 1px solid #e8eef4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dpReviewStars { color: #ffb400; letter-spacing: 2px; font-size: 1.05em; }
.dpReviewStarsOff { color: #e0e0e0; }
.dpReviewText { margin: 0; font-style: normal; color: #333; line-height: 1.55; font-size: .97em; }
.dpReviewAuthor { color: #0061b2; font-weight: 600; font-size: .92em; }

/* ===== Встроенная форма оценки по фото (в CTA) ===== */
.dpForm { max-width: 640px; margin: 22px auto 0; text-align: left; }
.dpFormRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dpInput, .dpTextarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 8px;
    font-size: 15px;
    background: rgba(255, 255, 255, .96);
    color: #1a1a1a;
    box-sizing: border-box;
}
.dpTextarea { margin-bottom: 12px; resize: vertical; font-family: inherit; }
.dpInput:focus, .dpTextarea:focus { outline: 2px solid #ffcc01; }
.dpFileLabel {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px dashed rgba(255, 255, 255, .8);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dpFileLabel:hover { background: rgba(255, 255, 255, .2); }
.dpFileInput { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dpFormError { background: #fde7e9; color: #842029; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.dpFormNote { color: rgba(255, 255, 255, .8); font-size: 12px; margin-top: 12px; }
.dpFormDone {
    max-width: 640px;
    margin: 22px auto 0;
    background: rgba(255, 255, 255, .95);
    border-radius: 10px;
    padding: 22px 24px;
    color: #256029;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dpFormDone strong { font-size: 1.15em; }
.dpFormDone span { color: #333; }

/* ===== Липкая мобильная панель действий ===== */
.dpStickyBar { display: none; }

@media (max-width: 768px) {
    .av-cta { padding: 30px 20px; }
    .av-cta h2 { font-size: 1.4em; }
    .dpAnchorNav { gap: 6px; padding: 10px 0; }
    .dpAnchorLink { padding: 8px 14px; font-size: 13px; }
    .dpDamagesGrid { grid-template-columns: 1fr; }
    .dpFormRow { grid-template-columns: 1fr; }
    .dpReviewsGrid { grid-template-columns: 1fr; }

    /* Липкая панель показывается только на мобильных */
    .dpStickyBar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        gap: 1px;
        background: #d9dee3;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
    }
    .dpStickyBtn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 8px;
        border: none;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
    }
    .dpStickyCall { background: #0061b2; color: #fff; }
    .dpStickyRequest { background: #ffcc01; color: #1a1a1a; }
    .dpStickyIco { font-size: 18px; line-height: 1; }
    /* Отступ снизу, чтобы панель не перекрывала контент/футер */
    #main { padding-bottom: 64px; }
}

/* ===== Галерея работ «до/после» ===== */
.dpGalleryHeading { text-align: center; color: #0061b2; margin: 36px 0 8px; }
.dpGallerySub { text-align: center; color: #666; max-width: 780px; margin: 0 auto 24px; line-height: 1.5; }
.dpGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.dpGalleryItem { margin: 0; }
.dpGalleryImgWrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e8eef4;
    aspect-ratio: 4 / 3;
    background: #f2f5f8;
}
.dpGalleryImgWrap .gallery-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.dpGalleryItem:hover .gallery-photo-img { transform: scale(1.04); }
.dpGalleryCaption { margin-top: 10px; color: #555; font-size: .92em; line-height: 1.4; }

/* ===== Похожие услуги (перелинковка) ===== */
.dpRelated { margin: 44px 0 20px; }
.dpRelated > h2 { text-align: center; color: #0061b2; margin-bottom: 24px; }
.dpRelatedGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.dpRelatedCard {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    background: #f7fbff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dpRelatedCard:hover { box-shadow: 0 10px 24px rgba(0, 97, 178, .14); transform: translateY(-3px); border-color: #b9d6ee; }
.dpRelatedIco { font-size: 30px; line-height: 1; flex-shrink: 0; }
.dpRelatedTxt { display: flex; flex-direction: column; gap: 4px; font-size: .92em; color: #555; line-height: 1.4; }
.dpRelatedTxt strong { color: #0061b2; font-size: 1.08em; }

@media (max-width: 768px) {
    .dpGallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .dpRelatedGrid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .dpGallery { grid-template-columns: 1fr; }
}

/* ===== Онлайн-калькулятор стоимости ===== */
.dpCalc {
    margin: 30px 0 10px;
    padding: 28px;
    border: 1px solid #e2ecf6;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fbff 0%, #eef5fc 100%);
}
.dpCalcTitle { color: #0061b2; margin: 0 0 6px; text-align: center; }
.dpCalcHint { text-align: center; color: #666; margin: 0 auto 22px; max-width: 640px; line-height: 1.5; }
.dpCalcRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.dpCalcField { display: flex; flex-direction: column; gap: 6px; }
.dpCalcLabel { font-weight: 600; color: #333; font-size: .95em; }
.dpCalcSelect {
    padding: 12px 14px;
    border: 1px solid #cdd9e5;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
}
.dpCalcSelect:focus { outline: 2px solid #0061b2; border-color: #0061b2; }
.dpCalcFieldCheck {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: #333;
    font-size: .95em;
    cursor: pointer;
}
.dpCalcFieldCheck input { width: 18px; height: 18px; cursor: pointer; }
.dpCalcResult {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px;
    background: #fff;
    border: 2px dashed #0061b2;
    border-radius: 12px;
    margin-bottom: 18px;
}
.dpCalcResultLabel { color: #555; font-size: 1.05em; }
.dpCalcResultValue { color: #0061b2; font-size: 1.9em; font-weight: 700; line-height: 1; }
.dpCalcActions { text-align: center; margin-bottom: 12px; }
.dpCalcNote { text-align: center; color: #888; font-size: .82em; max-width: 720px; margin: 0 auto; line-height: 1.5; }

/* ===== Как нас найти (карта) ===== */
.dpMap { margin: 44px 0 10px; }
.dpMap > h2 { text-align: center; color: #0061b2; margin-bottom: 24px; }
.dpMapGrid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px;
    align-items: stretch;
}
.dpMapInfo {
    padding: 24px;
    border: 1px solid #e2ecf6;
    border-radius: 14px;
    background: #f7fbff;
}
.dpMapAddr { display: flex; gap: 10px; align-items: flex-start; font-size: 1.02em; color: #1a1a1a; margin: 0 0 16px; line-height: 1.45; }
.dpMapIco { font-size: 22px; line-height: 1; flex-shrink: 0; }
.dpMapLine { color: #444; margin: 0 0 12px; line-height: 1.5; }
.dpMapLine a { color: #0061b2; }
.dpMapRoute { display: inline-block; margin-top: 6px; }
.dpMapFrame {
    min-height: 360px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2ecf6;
}
.dpMapFrame iframe { display: block; min-height: 360px; }

@media (max-width: 768px) {
    .dpCalcRow { grid-template-columns: 1fr; }
    .dpMapGrid { grid-template-columns: 1fr; }
    .dpMapFrame { min-height: 300px; }
    .dpMapFrame iframe { min-height: 300px; }
}

/* ===== Контакты в ряд с выравниванием по центру ===== */
.information-list.dpContactRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    margin: 20px auto 0;
}
.information-list.dpContactRow .information-list-item {
    flex: 1 1 200px;
    max-width: 260px;
    margin: 0;
}
.information-list.dpContactRow .information-list-item .tb {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    height: 100%;
}
.information-list.dpContactRow .information-item-icon { display: flex; justify-content: center; }
.information-list.dpContactRow .information-item-icon img { display: block; }
.information-list.dpContactRow .tc { text-align: center; line-height: 1.5; }

@media (max-width: 768px) {
    .information-list.dpContactRow { gap: 22px; }
    .information-list.dpContactRow .information-list-item {
        flex: 1 1 100%;
        max-width: 320px;
    }
}

/* ===== Виджет отзывов Яндекс.Карт ===== */
.dpYandexReviews { margin-top: 30px; }
.dpYandexReviews h3 { color: #0061b2; margin-bottom: 16px; }
.dpYandexReviewsFrame,
.contactsYandexReviewsFrame {
    width: 100%;
    height: 520px;
    border: 1px solid #e2ecf6;
    border-radius: 14px;
    box-sizing: border-box;
}
.contactsYandexReviews { margin: 36px 0; }
.contactsYandexReviews h2 { color: #0061b2; margin-bottom: 18px; }

@media (max-width: 768px) {
    .dpYandexReviewsFrame,
    .contactsYandexReviewsFrame { height: 440px; }
}

/* ===== Блог ===== */
.blogIntro { color: #666; max-width: 820px; margin: 0 0 28px; line-height: 1.6; }
.blogGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
.blogCard {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2ecf6;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}
.blogCard:hover { box-shadow: 0 12px 28px rgba(0, 97, 178, .14); transform: translateY(-3px); }
.blogCardImg { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #f2f5f8; }
.blogCardImg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blogCardBody { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.blogCardDate { color: #999; font-size: 13px; }
.blogCardTitle { font-size: 1.15em; line-height: 1.35; margin: 0; }
.blogCardTitle a { color: #1a1a1a; text-decoration: none; }
.blogCardTitle a:hover { color: #0061b2; }
.blogCardSummary { color: #555; font-size: .93em; line-height: 1.5; margin: 0; }
.blogCardMore { color: #0061b2; font-weight: 600; text-decoration: none; margin-top: auto; }

.blogArticle { margin: 0 auto; }
.blogArticle h1 { margin-bottom: 12px; }
.blogArticleMeta { display: flex; gap: 16px; color: #999; font-size: 14px; margin-bottom: 20px; }
.blogArticleImg { max-width: 100%; width: auto; height: auto; display: block; border-radius: 14px; margin-bottom: 24px; }
.blogToc { background: #f7fafd; border: 1px solid #e3e9f0; border-radius: 12px; padding: 16px 22px; margin: 0 0 28px; }
.blogTocTitle { font-family: robotobold, arial, sans-serif; color: #0061b2; margin-bottom: 10px; font-size: 1.05em; }
.blogToc ol { margin: 0; padding-left: 20px; }
.blogToc li { margin: 6px 0; }
.blogToc a { color: #0061b2; text-decoration: none; }
.blogToc a:hover { text-decoration: underline; }
.blogArticleContent { color: #333; line-height: 1.7; font-size: 1.02em; }
.blogArticleContent img { max-width: 100%; width: auto; height: auto; }
.blogArticleContent h2 { color: #0061b2; margin: 28px 0 12px; scroll-margin-top: 90px; }
.blogArticleContent ul, .blogArticleContent ol { padding-left: 22px; margin: 0 0 16px; }
.blogArticleContent li { margin-bottom: 8px; }
.blogArticleContent p { margin: 0 0 16px; }
.blogArticleContent a { color: #0061b2; }
.blogArticleBack { margin: 32px auto 0; }

.blogArticleTags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.blogTag { display: inline-block; padding: 4px 12px; background: #eef4fb; color: #0061b2; border-radius: 14px; font-size: 0.85em; text-decoration: none; }
.blogTag:hover { background: #dceaf9; }
.blogTagCloud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.blogTagCloudLabel { color: #666; font-size: 0.9em; margin-right: 4px; }
.blogTagChip { display: inline-block; padding: 4px 12px; background: #eef4fb; color: #0061b2; border-radius: 14px; font-size: 0.85em; text-decoration: none; }
.blogTagChip:hover { background: #dceaf9; }
.blogTagChip.active { background: #0061b2; color: #fff; }

.blogRelated { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid #e3e9f0; }
.blogRelated h2 { color: #0061b2; margin: 0 0 20px; }

@media (max-width: 992px) {
    .blogGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .blogGrid { grid-template-columns: 1fr; }
}

.av-blog-links { margin: 40px 0; padding: 24px 28px; background: #f7fafd; border: 1px solid #e3e9f0; border-radius: 14px; }
.av-blog-links h2 { color: #0061b2; margin: 0 0 16px; font-size: 1.3em; }
.av-blog-links-list { list-style: none; padding: 0; margin: 0 0 16px; }
.av-blog-links-list li { margin: 0 0 10px; padding-left: 20px; position: relative; }
.av-blog-links-list li::before { content: '→'; position: absolute; left: 0; color: #0061b2; }
.av-blog-links-list a { color: #0061b2; text-decoration: none; }
.av-blog-links-list a:hover { text-decoration: underline; }
.av-blog-links-all { display: inline-block; font-weight: 600; color: #0061b2; text-decoration: none; }
.av-blog-links-all:hover { text-decoration: underline; }

/* Блок «Полезные статьи о PDR» на главной */
.homeBlogSection { padding: 40px 0 8px; }
.homeBlogHead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.homeBlogHead h2 { margin: 0; font-size: 1.6em; color: #1a1a1a; }
.homeBlogAll { color: #0061b2; font-weight: 600; text-decoration: none; white-space: nowrap; }
.homeBlogAll:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .mobileNavBurgerIcon span { transition: none; }
}