/* ==========================================================================
   MICRO-EFFECTS & UX IMPROVEMENTS - Enhanced Edition
   ========================================================================== */

/* 0. Глобальный шрифт Roboto для всего сайта */
body, 
input, 
textarea, 
select, 
button, 
h1, .title-h1, 
h2, .title-h2, 
h3, .title-h3, 
h4, .title-h4, 
h5, .title-h5,
.aside-menu-title,
.button {
    font-family: 'Roboto', sans-serif !important;
}

/* 1. Плавные CSS-переходы для всех интерактивных элементов */
.button, 
.services-elements .element, 
.catalog .element, 
.news .element, 
.social a, 
.form-control,
.top-bar .button,
.catalog .element .button,
.pagination a,
#up {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 2. Заметные живые hover-эффекты для кнопок */
.button:hover,
.catalog .element .button:hover,
.top-bar .button:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

.button:active,
.catalog .element .button:active,
.top-bar .button:active {
    transform: translateY(-1px) scale(1.0) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* 3. Эффект глубокого размытия заднего фона (Glassmorphism) для оверлея FancyBox */
.fancybox-overlay, 
#fancybox-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease !important;
}

/* Красивая анимация всплытия модального окна */
.fancybox-wrap {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 4. Заметное выделение карточек услуг и каталога при наведении */
.services-elements .element:hover,
.catalog .element:hover,
.news .element:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}

/* 5. Стильный и плавный фокус для полей ввода форм */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal textarea,
.form-control {
    border-radius: 4px !important;
    border: 1px solid #cccccc !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.modal input[type="text"]:focus,
.modal input[type="email"]:focus,
.modal input[type="tel"]:focus,
.modal textarea:focus,
.form-control:focus {
    border-color: #4a90e2 !important; /* Современный элегантный синий фокус */
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.4) !important;
    outline: none !important;
}

/* 6. Плавные иконки соцсетей */
.social a:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18) !important;
}

/* 7. Плавный подъем кнопки "Наверх" */
#up:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   8. Интерактивная таблица цен на страницах категорий услуг
   ========================================================================== */
.category-prices-wrapper {
    margin-top: 40px;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

.category-prices-wrapper .title-h3 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 26px; /* В тон остальных h3 на сайте */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 2px solid #014273; /* Наш фирменный темно-синий акцент */
    display: inline-block;
}

.interactive-price-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 15px !important;
}

.interactive-price-table th {
    background-color: rgba(1, 66, 115, 0.02) !important;
    color: #333333 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    padding: 14px 18px !important;
    border-bottom: 2px solid rgba(1, 66, 115, 0.15) !important;
    text-align: left !important;
}

.interactive-price-table th:last-child {
    text-align: right !important;
}

.interactive-price-table td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #eef2f5 !important;
    font-size: 14px !important;
    color: #444444 !important;
    transition: all 0.2s ease !important;
}

.interactive-price-table tr.price-row {
    transition: background-color 0.2s ease !important;
}

/* Эффект наведения на строку таблицы - Мягкий синий тон */
.interactive-price-table tr.price-row:hover {
    background-color: rgba(1, 66, 115, 0.02) !important; 
}

/* Стилизация интерактивной ссылки на услугу */
.price-service-link {
    color: #014273 !important; /* Наш фирменный синий, как и все ссылки */
    font-weight: 500 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(1, 66, 115, 0.3) !important;
    transition: all 0.2s ease !important;
}

.price-service-link:hover {
    color: #02599c !important; /* Чуть светлее при наведении */
    border-bottom-color: #02599c !important;
}

/* Стилизация ячейки цены */
.price-cell {
    text-align: right !important;
    white-space: nowrap !important;
}

.price-value {
    font-weight: 700 !important;
    color: #014273 !important; 
    background: rgba(1, 66, 115, 0.06) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-size: 14px !important;
    white-space: nowrap !important;
}

/* Адаптивность для мобильных телефонов */
@media (max-width: 767px) {
    .category-prices-wrapper {
        padding: 15px !important;
    }
    
    .interactive-price-table td {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
    
    .interactive-price-table th {
        padding: 10px 10px !important;
        font-size: 11px !important;
    }
    
    .price-value {
        font-size: 12px !important;
        padding: 3px 6px !important;
    }
    
    .price-intro-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }
}

.price-intro-text {
    font-size: 14px !important;
    color: #666666 !important;
    line-height: 1.6 !important;
    margin-top: 5px !important;
    margin-bottom: 25px !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   9. Оптимизация типографики Roboto и стилизация детальных цен
   ========================================================================== */

/* Настройки читаемости для Roboto по всему сайту */
body {
    line-height: 1.5 !important;
}

h1, .title-h1, 
h2, .title-h2, 
h3, .title-h3, 
h4, .title-h4 {
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
}

/* Стилизация блока цен на детальной странице услуги (Шаблон ID 3) */
.prices {
    margin-top: 40px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

.prices .title-h3 {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: relative !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #014273 !important; /* Фирменный темно-синий акцент */
    display: inline-block !important;
}

.prices .price-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 15px !important;
}

.prices .price-table td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #eef2f5 !important;
    font-size: 14px !important;
    color: #444444 !important;
    transition: all 0.2s ease !important;
}

.prices .price-table tr {
    transition: background-color 0.2s ease !important;
}

/* Мягкий синий тон при наведении на строку цены */
.prices .price-table tr:hover {
    background-color: rgba(1, 66, 115, 0.02) !important;
}

.prices .price-table td:first-child {
    color: #333333 !important;
    font-weight: 500 !important;
}

/* Выделение стоимости фирменным синим цветом и выравнивание */
.prices .price-table td:last-child {
    text-align: right !important;
    font-weight: 700 !important;
    color: #014273 !important;
}

/* Адаптивность детальной цены для мобильных телефонов */
@media (max-width: 767px) {
    .prices {
        padding: 15px !important;
    }
    
    .prices .price-table td {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   10. Корректировка размеров Roboto (Устранение эффекта слишком крупного текста)
   ========================================================================== */

/* Заголовки на стандартных экранах (Десктоп) */
h1, .title-h1 {
    font-size: 30px !important;
}
h2, .title-h2 {
    font-size: 24px !important;
}
h3, .title-h3 {
    font-size: 20px !important;
}
h4, .title-h4 {
    font-size: 18px !important;
}
h5, .title-h5 {
    font-size: 16px !important;
}

/* Формы и акционные блоки */
.top-form-box .title {
    font-size: 22px !important;
}
.aside-application .title-h4 {
    font-size: 18px !important;
}

/* Корректировка слайдера на стандартном экране */
.top-slider .title {
    font-size: 28px !important;
    line-height: 1.25 !important;
}

/* Корректировки для очень больших экранов (Desktop Wide >= 1200px) */
@media only screen and (min-width: 1200px) {
    .top-slider .title {
        font-size: 38px !important; /* Уменьшили с 58px до аккуратных 38px */
        line-height: 1.2 !important;
    }
    h2, .title-h2 {
        font-size: 32px !important; /* Уменьшили с 46px до гармоничных 32px */
    }
    h1, .title-h1 {
        font-size: 34px !important;
    }
}

/* Корректировки размеров для мобильных устройств (смартфоны) */
@media only screen and (max-width: 767px) {
    h1, .title-h1 {
        font-size: 24px !important;
    }
    h2, .title-h2 {
        font-size: 20px !important;
    }
    h3, .title-h3 {
        font-size: 18px !important;
    }
    h4, .title-h4 {
        font-size: 16px !important;
    }
    h5, .title-h5 {
        font-size: 14px !important;
    }
    .top-slider .title {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    .top-form-box .title {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   11. Исправление обрезания длинных названий услуг и товаров (Ellipsis Fix)
   ========================================================================== */

/* Включение полноценного переноса строк вместо обрезания троеточием */
.services-elements .title-h5,
.catalog .title-h5 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-height: 48px !important; /* Гарантирует одинаковую высоту блоков (2-3 строки) для идеального выравнивания сетки */
    display: block !important;
    line-height: 1.3 !important;
}

/* Корректировка позиционирования иконки-стрелки при многострочном заголовке */
.services-elements .title-h5:after,
.catalog .title-h5:after {
    top: 4px !important;
    right: 0 !important;
}

/* Для мобильных экранов уменьшаем минимальную высоту заголовков */
@media only screen and (max-width: 767px) {
    .services-elements .title-h5,
    .catalog .title-h5 {
        min-height: auto !important; /* На мобильных карточки идут друг под другом, фиксированная высота не требуется */
        margin-bottom: 5px !important;
    }
}

/* ==========================================================================
   12. Премиальный дизайн интерактивного аккордеона (Цены)
   ========================================================================== */
.accordeon {
    margin-top: 30px !important;
    background: transparent !important;
}

.accordeon .element {
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Эффект легкого приподнятия при наведении */
.accordeon .element:hover {
    box-shadow: 0 8px 24px rgba(1, 66, 115, 0.06) !important;
    border-color: rgba(1, 66, 115, 0.15) !important;
}

/* Сброс тяжелого серого плюса слева из 2000-х */
.accordeon .element .title:before,
.accordeon .element.active .title:before {
    display: none !important;
    content: none !important;
}

.accordeon .element .title {
    cursor: pointer !important;
    padding: 18px 50px 18px 24px !important; /* Больше отступов, центрировано */
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #333333 !important;
    line-height: 1.4 !important;
    position: relative !important;
    background: #ffffff !important;
    border-left: 4px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Ховер на заголовок */
.accordeon .element .title:hover {
    color: #014273 !important;
}

/* Активное (открытое) состояние элемента аккордеона */
.accordeon .element.active {
    border-color: rgba(1, 66, 115, 0.2) !important;
    box-shadow: 0 8px 24px rgba(1, 66, 115, 0.08) !important;
}

.accordeon .element.active .title {
    background: rgba(1, 66, 115, 0.03) !important; /* Нежный светло-синий фон */
    color: #014273 !important;
    border-left: 4px solid #014273 !important; /* Акцентная линия слева */
}

/* Современная векторная иконка-стрелка справа на чистом CSS (FontAwesome) */
.accordeon .element .title:after {
    font-family: 'FontAwesome' !important;
    content: "\f078" !important; /* chevron-down */
    display: block !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    color: #aaaaaa !important;
    font-size: 14px !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Поворот стрелки при открытии */
.accordeon .element.active .title:after {
    transform: translateY(-50%) rotate(-180deg) !important;
    color: #014273 !important;
}

.accordeon .element-content {
    padding: 10px 24px 24px 24px !important; /* Удобные внутренние отступы для контента */
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
    background: #ffffff !important;
}

/* Для мобильных устройств делаем отступы чуть компактнее */
@media (max-width: 767px) {
    .accordeon .element .title {
        padding: 14px 40px 14px 16px !important;
        font-size: 15px !important;
    }
    
    .accordeon .element .title:after {
        right: 16px !important;
        font-size: 12px !important;
    }
    
    .accordeon .element-content {
        padding: 8px 16px 16px 16px !important;
    }
}

/* ==========================================================================
   СТИЛЬНЫЙ БЭДЖ СТОИМОСТИ УСЛУГИ НА ДЕТАЛЬНОЙ СТРАНИЦЕ
   ========================================================================== */
.service-price-tag {
    display: inline-block !important;
    padding: 10px 20px !important;
    background: #fdf2e9 !important;
    border-left: 4px solid #e67e22 !important;
    border-radius: 0 6px 6px 0 !important;
    color: #e67e22 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.08) !important;
    transition: all 0.3s ease !important;
}

.service-price-tag:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.15) !important;
}

.service-price-tag i {
    margin-right: 8px !important;
    font-size: 15px !important;
}

.service-price-tag span {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #d35400 !important;
}

/* СТИЛЬНЫЙ БЭДЖ ВРЕМЕНИ ВЫПОЛНЕНИЯ УСЛУГИ НА ДЕТАЛЬНОЙ СТРАНИЦЕ */
.service-time-tag {
    display: inline-block !important;
    padding: 10px 20px !important;
    background: #eef7fc !important;
    border-left: 4px solid #3498db !important;
    border-radius: 0 6px 6px 0 !important;
    color: #3498db !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
    margin-bottom: 25px !important;
    margin-left: 10px !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.08) !important;
    transition: all 0.3s ease !important;
}

.service-time-tag:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.15) !important;
}

.service-time-tag i {
    margin-right: 8px !important;
    font-size: 15px !important;
}

.service-time-tag span {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #2980b9 !important;
}

/* Адаптивность для бэджей цены и времени на мобильных устройствах */
@media (max-width: 767px) {
    .service-time-tag {
        margin-left: 0 !important;
        margin-top: 10px !important;
        display: block !important;
    }
    .service-price-tag {
        display: block !important;
        margin-bottom: 10px !important;
    }
}

/* ПРЕМcomplete СТИЛЬНЫЙ ВИДЖЕТ БЫСТРОЙ ИНФОРМАЦИИ ОБ УСЛУГЕ (QUICK INFO CARD) */
.service-quick-card {
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-left: 4px solid #014273 !important;
    padding: 16px 24px !important;
    border-radius: 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 30px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.service-quick-card:hover {
    box-shadow: 0 10px 25px rgba(1, 66, 115, 0.08) !important;
    border-color: rgba(1, 66, 115, 0.15) !important;
    transform: translateY(-2px) !important;
}

.service-quick-card .info-item .label-text {
    font-size: 11px !important;
    color: #888888 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 5px !important;
    letter-spacing: 0.8px !important;
}

.service-quick-card .info-item .value-text {
    font-size: 15px !important;
    color: #333333 !important;
    font-weight: 700 !important;
}

.service-quick-card .info-item .value-text i {
    margin-right: 6px !important;
    color: #3498db !important;
}

.service-quick-card .info-item .price-value-text {
    font-size: 18px !important;
    color: #e67e22 !important;
    font-weight: 700 !important;
}

.service-quick-card .info-item .price-value-text i {
    margin-right: 6px !important;
    color: #e67e22 !important;
}

@media (max-width: 767px) {
    .service-quick-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 16px !important;
    }
    .service-quick-card .info-item:last-child {
        text-align: left !important;
        width: 100% !important;
        border-top: 1px solid #f5f5f5 !important;
        padding-top: 12px !important;
    }
}

/* ==========================================================================
   14. Блок «Симптомы забитого катализатора»
   ========================================================================== */
.symptoms-container {
    margin: 30px 0 !important;
}

.symptoms-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-top: 25px !important;
}

.symptom-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.symptom-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(230, 30, 30, 0.15) !important;
}

.symptom-icon-wrapper {
    width: 60px !important;
    height: 60px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

/* Цвета для разных симптомов */
.symptom-card:nth-child(1) .symptom-icon-wrapper {
    background: rgba(255, 152, 0, 0.1) !important; /* Оранжевый для Check Engine */
}
.symptom-card:nth-child(2) .symptom-icon-wrapper {
    background: rgba(244, 67, 54, 0.1) !important; /* Красный для потери динамики */
}
.symptom-card:nth-child(3) .symptom-icon-wrapper {
    background: rgba(76, 175, 80, 0.1) !important; /* Зеленый для пуска */
}
.symptom-card:nth-child(4) .symptom-icon-wrapper {
    background: rgba(156, 39, 176, 0.1) !important; /* Фиолетовый для запаха */
}

.symptom-card-content {
    flex-grow: 1 !important;
}

.symptom-card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    color: #2e2e2e !important;
    text-transform: none !important;
}

.symptom-card-text {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #666666 !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .symptoms-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .symptom-card {
        padding: 20px !important;
        gap: 15px !important;
    }
    .symptom-icon-wrapper {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ==========================================================================
   15. Блок «Плюсы и минусы удаления катализатора»
   ========================================================================== */
.pros-cons-container {
    margin: 40px 0 !important;
}

.pros-cons-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    margin-top: 25px !important;
}

.pros-column,
.cons-column {
    border-radius: 14px !important;
    padding: 30px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
}

.pros-column {
    background: rgba(76, 175, 80, 0.03) !important; /* Нежно-зеленый фон */
    border: 1px solid rgba(76, 175, 80, 0.15) !important;
}

.cons-column {
    background: rgba(244, 67, 54, 0.03) !important; /* Нежно-красный фон */
    border: 1px solid rgba(244, 67, 54, 0.15) !important;
}

.pros-column:hover {
    box-shadow: 0 12px 35px rgba(76, 175, 80, 0.08) !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
    transform: translateY(-2px) !important;
}

.cons-column:hover {
    box-shadow: 0 12px 35px rgba(244, 67, 54, 0.08) !important;
    border-color: rgba(244, 67, 54, 0.3) !important;
    transform: translateY(-2px) !important;
}

.column-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 25px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.04) !important;
}

.pros-column .column-header {
    border-bottom-color: rgba(76, 175, 80, 0.1) !important;
}

.cons-column .column-header {
    border-bottom-color: rgba(244, 67, 54, 0.1) !important;
}

.column-icon {
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pros-column .column-icon {
    color: #4caf50 !important;
}

.cons-column .column-icon {
    color: #f44336 !important;
}

.column-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.pros-column .column-title {
    color: #2e7d32 !important;
}

.cons-column .column-title {
    color: #c62828 !important;
}

.pros-cons-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pros-cons-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #444444 !important;
}

.pros-cons-item:last-child {
    margin-bottom: 0 !important;
}

.item-check-icon {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
}

.pros-column .item-check-icon {
    color: #4caf50 !important;
}

.cons-column .item-check-icon {
    color: #f44336 !important;
}

.item-text {
    flex-grow: 1 !important;
}

.item-text strong {
    color: #1a1a1a !important;
}

@media (max-width: 991px) {
    .pros-cons-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .pros-column,
    .cons-column {
        padding: 24px !important;
    }
}

/* ==========================================================================
   9. Фирменное оформление вкладок отзывов под стиль КатСервис 56 (Яндекс и 2ГИС)
   ========================================================================== */
.reviews-tabs-wrapper {
    margin-top: 30px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
    padding: 30px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.reviews-tabs-buttons {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
    border-bottom: 2px solid #edf2f7 !important;
    padding-bottom: 15px !important;
    flex-wrap: wrap !important;
}

/* Кнопки вкладок в стиле .button.invert / .button.navvy / .button */
.reviews-tab-btn {
    background: transparent !important;
    border: 1px solid #014273 !important; /* Фирменная темно-синяя рамка */
    color: #014273 !important; /* Фирменный темно-синий текст */
    padding: 12px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 0 !important; /* Убираем скругление для строгого соответствия стилю сайта */
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    text-transform: uppercase !important; /* Заглавные буквы, как на всем сайте */
    letter-spacing: 1px !important;
    transition: all 0.2s ease-out !important;
    outline: none !important;
}

.reviews-tab-btn:hover {
    background: #FF3324 !important; /* При наведении — фирменный красный */
    border-color: #FF3324 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255, 51, 36, 0.2) !important;
}

.reviews-tab-btn.active {
    background: #014273 !important; /* Активная — фирменный темно-синий */
    border-color: #014273 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(1, 66, 115, 0.2) !important;
}

/* Иконки в кнопках вкладок */
.tab-icon-svg {
    transition: transform 0.2s ease-out !important;
}

.reviews-tab-btn:hover .tab-icon-svg {
    transform: scale(1.1) rotate(5deg) !important;
}

.reviews-tab-pane {
    display: none !important;
}

.reviews-tab-pane.active {
    display: block !important;
    animation: reviewsFadeIn 0.4s ease-out !important;
}

@keyframes reviewsFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Верхняя информационная панель рейтинга (в виде фирменного Callout-блока) */
.widget-action-panel {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(1, 66, 115, 0.02) !important; /* Легкая синяя подложка под стиль заголовков */
    border: 1px solid rgba(1, 66, 115, 0.1) !important;
    border-left: 4px solid #FF3324 !important; /* Яркий красный левый акцент под стиль карточек */
    border-radius: 6px !important;
    padding: 15px 25px !important;
    margin-bottom: 25px !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.widget-rating-info {
    font-size: 15px !important;
    color: #2E3841 !important; /* Цвет текста под стиль основного контента */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
}

.widget-rating-info i.fa-star {
    color: #ffb000 !important; /* Красивый золотой цвет для рейтинга */
    font-size: 18px !important;
    text-shadow: 0 1px 3px rgba(255, 176, 0, 0.2) !important;
}

.widget-rating-info strong {
    color: #014273 !important; /* Рейтинг выделен фирменным синим */
    font-weight: 700 !important;
    font-size: 16px !important;
}

.widget-reviews-count {
    color: #718096 !important; /* Элегантный сланцево-серый цвет для количества отзывов */
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-left: 5px !important;
}

/* Кнопки призыва к действию «Оставить отзыв» */
.btn-write-review {
    padding: 12px 28px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    border-radius: 0 !important; /* Убираем скругление под стиль основных кнопок сайта */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease-out !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.btn-write-review i {
    font-size: 13px !important;
}

.btn-write-review.yandex-btn {
    background: #fc3f1d !important;
    border: 1px solid #fc3f1d !important;
}

.btn-write-review.yandex-btn:hover {
    background: #014273 !important; /* При наведении — темно-синий */
    border-color: #014273 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(1, 66, 115, 0.25) !important;
}

.btn-write-review.twogis-btn {
    background: #2ebd59 !important;
    border: 1px solid #2ebd59 !important;
}

.btn-write-review.twogis-btn:hover {
    background: #014273 !important; /* При наведении — темно-синий */
    border-color: #014273 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(1, 66, 115, 0.25) !important;
}

/* Контейнеры iframe виджетов */
.yandex-iframe-container,
.twogis-iframe-container {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important;
    max-width: 760px !important; /* Ограничиваем ширину под размер контента виджетов */
    margin-left: auto !important;
    margin-right: auto !important;
}

.reviews-iframe {
    width: 100% !important;
    height: 824px !important; /* Устанавливаем высоту 824px вровень с виджетом 2ГИС */
    border: none !important;
    display: block !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .reviews-tabs-wrapper {
        padding: 15px !important;
    }
    
    .reviews-tabs-buttons {
        gap: 10px !important;
        justify-content: center !important;
    }
    
    .reviews-tab-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 15px !important;
        font-size: 12px !important;
    }
    
    .widget-action-panel {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 15px !important;
        text-align: center !important;
    }
    
    .widget-rating-info {
        display: block !important;
        text-align: center !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .widget-rating-info i.fa-star {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-right: 4px !important;
    }
    
    .widget-rating-info strong {
        white-space: nowrap !important;
        display: inline-block !important;
    }
    
    .widget-reviews-count {
        display: inline-block !important;
        white-space: nowrap !important;
        margin-left: 4px !important;
    }
    
    .btn-write-review {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 16px !important;
        font-size: 11px !important;
    }
    
    .reviews-iframe {
        height: 500px !important;
    }
    
    iframe#big_light_70000001045987801 {
        height: 500px !important;
    }
}

/* Перестановка кнопки меню (бургер) вправо и кнопки "Заказать звонок" влево на мобильных и планшетах */
@media only screen and (max-width: 991px) {
    .mob-menu-btn {
        left: auto !important;
        right: 15px !important; /* Удобный отступ справа */
    }
    
    .top-bar .button {
        right: auto !important;
        left: 0 !important; /* Начинается от левого края */
        border-left: none !important;
        border-right: 1px solid rgba(0, 0, 0, 0.08) !important; /* Мягкая граница справа от кнопки */
    }
}

/* Сдвиг режима работы ТОЛЬКО на планшетах (в диапазоне от 768px до 991px), 
   где он имеет fixed-позиционирование в шапке и не должен накладываться на кнопку звонка.
   На мобильных (меньше 768px) он остается в стандартном потоке и не смещается. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .shedule {
        left: 200px !important;
    }
}

/* Динамический премиальный виджет режима работы */
.shedule {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.schedule-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 12px !important;
    margin-left: 8px !important;
    transition: all 0.3s ease !important;
    vertical-align: middle !important;
}

/* Состояние "Открыто" */
.schedule-badge.status-open {
    background: rgba(46, 189, 89, 0.1) !important;
    color: #2ebd59 !important;
    border: 1px solid rgba(46, 189, 89, 0.2) !important;
}

.schedule-badge.status-open::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #2ebd59 !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
    animation: pulse-green 2s infinite !important;
}

/* Состояние "Закрыто" */
.schedule-badge.status-closed {
    background: rgba(252, 63, 29, 0.08) !important;
    color: #fc3f1d !important;
    border: 1px solid rgba(252, 63, 29, 0.15) !important;
}

.schedule-badge.status-closed::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #fc3f1d !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 189, 89, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(46, 189, 89, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 189, 89, 0);
    }
}

/* Отображение верхней синей полосы с адресом на мобильных устройствах и планшетах */
@media only screen and (max-width: 991px) {
    .header-top {
        display: block !important;
        text-align: center !important;
        padding: 8px 0 !important;
        background: #014273 !important; /* Наш фирменный темно-синий */
    }
    
    .header-top .header-address {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important; /* Белый цвет текста, как на десктопе */
        font-size: 12px !important;
        width: 100% !important;
        text-align: center !important;
        font-weight: 500 !important;
        letter-spacing: 0.5px !important;
    }
    
    .header-top .header-address i {
        color: #ffffff !important; /* Белая иконка маркера */
        font-size: 15px !important;
        margin-right: 6px !important;
        vertical-align: middle !important;
    }
}

/* ==========================================================================
   10. PREMIUM CONTACT CARDS & MAP STYLING FOR CONTACTS PAGE
   ========================================================================== */

/* Контейнер карточек контактов */
.contacts-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 10px !important;
}

/* Базовая карточка контакта */
.contact-card {
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Интерактивный hover-эффект для карточек */
.contact-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(1, 66, 115, 0.06) !important;
    border-color: rgba(1, 66, 115, 0.12) !important;
}

/* Обводка иконки */
.contact-card .card-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    transition: all 0.3s ease !important;
}

/* Анимация иконки при наведении на карточку */
.contact-card:hover .card-icon-wrapper {
    transform: scale(1.08) !important;
}

.contact-card:hover .card-icon-wrapper i {
    transform: rotate(10deg) scale(1.1) !important;
}

.contact-card .card-icon-wrapper i {
    transition: transform 0.3s ease !important;
}

/* Контент карточки */
.contact-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Метка карточки (маленький заголовок) */
.contact-card .card-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #8c9ba5 !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
    line-height: 1 !important;
}

/* Значение карточки */
.contact-card .card-value {
    font-size: 15px !important;
    color: #2c3e50 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Ссылки внутри карточек */
.contact-card .card-value a {
    color: #2c3e50 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-weight: 600 !important;
    border-bottom: 1px dashed rgba(44, 62, 80, 0.2) !important;
}

.contact-card .card-value a:hover {
    color: #FF3324 !important; /* Фирменный красный при наведении */
    border-bottom-color: rgba(255, 51, 36, 0.4) !important;
}

/* Специфические цветовые палитры для карточек */

/* 1. Карточка адреса */
.address-card .card-icon-wrapper {
    background: rgba(255, 51, 36, 0.07) !important;
    color: #FF3324 !important;
}
.address-card:hover {
    border-color: rgba(255, 51, 36, 0.15) !important;
    box-shadow: 0 10px 25px rgba(255, 51, 36, 0.05) !important;
}

/* 2. Карточка телефонов */
.phone-card .card-icon-wrapper {
    background: rgba(1, 66, 115, 0.07) !important;
    color: #014273 !important;
}
.phone-card .card-value a {
    color: #014273 !important;
    border-bottom-color: rgba(1, 66, 115, 0.2) !important;
}
.phone-card .card-value a:hover {
    color: #FF3324 !important;
    border-bottom-color: rgba(255, 51, 36, 0.4) !important;
}
.phone-card:hover {
    border-color: rgba(1, 66, 115, 0.15) !important;
    box-shadow: 0 10px 25px rgba(1, 66, 115, 0.05) !important;
}

/* 3. Карточка почты */
.email-card .card-icon-wrapper {
    background: rgba(123, 31, 162, 0.07) !important;
    color: #7B1FA2 !important;
}
.email-card .card-value a {
    color: #7B1FA2 !important;
    border-bottom-color: rgba(123, 31, 162, 0.2) !important;
}
.email-card .card-value a:hover {
    color: #FF3324 !important;
    border-bottom-color: rgba(255, 51, 36, 0.4) !important;
}
.email-card:hover {
    border-color: rgba(123, 31, 162, 0.15) !important;
    box-shadow: 0 10px 25px rgba(123, 31, 162, 0.05) !important;
}

/* 4. Карточка режима работы */
.schedule-card .card-icon-wrapper {
    background: rgba(230, 81, 0, 0.07) !important;
    color: #E65100 !important;
}
.schedule-card:hover {
    border-color: rgba(230, 81, 0, 0.15) !important;
    box-shadow: 0 10px 25px rgba(230, 81, 0, 0.05) !important;
}

/* Стилизация контейнера карты */
.contacts-template .map-wrapper {
    height: 420px !important; /* Увеличенная премиальная высота на десктопе */
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #eef2f5 !important;
    transition: all 0.3s ease !important;
}

.contacts-template .map-wrapper:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(1, 66, 115, 0.15) !important;
}

/* Адаптивные стили для планшетов и мобильных устройств */
@media only screen and (max-width: 991px) {
    .contacts-block {
        gap: 12px !important;
        margin-bottom: 10px !important;
    }
    
    .contact-card {
        padding: 14px 16px !important;
        border-radius: 10px !important;
    }
    
    .contact-card .card-icon-wrapper {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 16px !important;
    }
    
    .contact-card .card-value {
        font-size: 14px !important;
    }
    
    .contacts-template .map-wrapper {
        height: 300px !important; /* Компактная высота на телефонах */
        border-radius: 12px !important;
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   11. PREMIUM ABOUT US PAGE STYLING (О КОМПАНИИ)
   ========================================================================== */

/* Вводный лид-текст */
.about-lead {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #34495e !important;
    font-weight: 400 !important;
    margin-bottom: 25px !important;
}

/* Сетка статистики */
.about-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin: 30px 0 !important;
}

/* Карточка статистики */
.stat-card {
    background: rgba(1, 66, 115, 0.03) !important;
    border: 1px solid rgba(1, 66, 115, 0.07) !important;
    border-radius: 12px !important;
    padding: 20px 15px !important;
    text-align: center !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01) !important;
}

.stat-card:hover {
    transform: translateY(-4px) !important;
    background: #ffffff !important;
    border-color: rgba(1, 66, 115, 0.15) !important;
    box-shadow: 0 10px 25px rgba(1, 66, 115, 0.06) !important;
}

.stat-card .stat-number {
    display: block !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #FF3324 !important; /* Фирменный красный */
    margin-bottom: 6px !important;
    line-height: 1 !important;
}

.stat-card .stat-label {
    display: block !important;
    font-size: 11px !important;
    color: #556270 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Брендированный список услуг */
.about-services-list {
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 25px 0 !important;
}

.about-services-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-size: 15px !important;
    color: #2c3e50 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.about-services-list li i {
    color: #014273 !important; /* Фирменный синий */
    font-size: 15px !important;
    margin-top: 3px !important;
    min-width: 18px !important;
    text-align: center !important;
}

/* Премиальная стилизованная цитата */
.about-quote {
    background: #f8fafd !important;
    border-left: 4px solid #FF3324 !important; /* Красный бренд-акцент */
    border-radius: 0 10px 10px 0 !important;
    padding: 22px 26px !important;
    font-style: italic !important;
    color: #4f5f6f !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 35px 0 !important;
    position: relative !important;
    box-shadow: inset 0 0 10px rgba(1, 66, 115, 0.02) !important;
}

.about-quote::before {
    content: "“" !important;
    font-family: 'Georgia', serif !important;
    font-size: 60px !important;
    color: rgba(255, 51, 36, 0.08) !important;
    position: absolute !important;
    top: -5px !important;
    left: 15px !important;
    line-height: 1 !important;
}

/* Сетка преимуществ */
.about-features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin: 30px 0 !important;
}

/* Карточка преимущества */
.feature-card {
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    gap: 16px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

.feature-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(1, 66, 115, 0.06) !important;
    border-color: rgba(1, 66, 115, 0.12) !important;
}

.feature-card .feature-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 51, 36, 0.07) !important;
    color: #FF3324 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.feature-card:hover .feature-icon {
    transform: scale(1.08) !important;
    background: #FF3324 !important;
    color: #ffffff !important;
}

.feature-card .feature-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.feature-card .feature-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #014273 !important;
    line-height: 1.2 !important;
}

.feature-card .feature-desc {
    font-size: 13px !important;
    color: #667582 !important;
    line-height: 1.5 !important;
}

/* Адаптивные стили для планшетов и смартфонов */
@media only screen and (max-width: 991px) {
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media only screen and (max-width: 767px) {
    .about-lead {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .about-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 20px 0 !important;
    }
    
    .stat-card {
        padding: 16px 12px !important;
    }
    
    .stat-card .stat-number {
        font-size: 30px !important;
    }
    
    .about-services-list li {
        font-size: 13px !important;
    }
    
    .about-quote {
        padding: 16px 20px !important;
        font-size: 13px !important;
        margin: 25px 0 !important;
    }
    
    .about-features-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 20px 0 !important;
    }
    
    .feature-card {
        padding: 16px !important;
        border-radius: 10px !important;
    }
}

/* Стилизация адреса в подвале */
.footer-address {
    margin-top: 6px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 400 !important;
}

.footer-address i {
    color: #FF3324 !important; /* Фирменный красный */
    font-size: 14px !important;
}

.footer-credits {
    margin-top: 6px !important;
}

/* Выравнивание по центру на мобильных */
@media only screen and (max-width: 767px) {
    .footer-address {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   16. Premium Hover-эффекты для плиток услуг на главной
   ========================================================================== */
.services-elements .element {
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.services-elements .element .img-wrapper {
    overflow: hidden !important;
    position: relative !important;
}

.services-elements .element .element-img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.services-elements .element .title-h5 {
    transition: color 0.3s ease !important;
}

/* Premium Hover - Оптимизированный вызов через родителя во избежание Hover Jitter */
.services-elements [class*="col-"]:hover .element {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 51, 36, 0.3) !important;
    box-shadow: 0 15px 35px rgba(255, 51, 36, 0.22) !important;
}

.services-elements [class*="col-"]:hover .element .element-img {
    transform: scale(1.08) !important;
}

.services-elements [class*="col-"]:hover .element .title-h5 {
    color: #FF3324 !important;
}

/* ==========================================================================
   17. Умный интерактивный поиск цен (Услуги на главной)
   ========================================================================== */
.homepage-search-container {
    position: relative !important;
    max-width: 800px;
    margin: 0 auto 35px auto;
    z-index: 100;
}

.search-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2px solid #eef2f5 !important;
    border-radius: 50px !important;
    padding: 6px 20px 6px 24px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
}

.search-input-wrapper:focus-within {
    border-color: #FF3324 !important;
    box-shadow: 0 8px 30px rgba(255, 51, 36, 0.12) !important;
}

.search-icon {
    font-size: 18px !important;
    color: #999999 !important;
    margin-right: 15px !important;
}

#price-smart-search {
    flex-grow: 1 !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #333333 !important;
    padding: 8px 0 !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
}

#price-smart-search::placeholder {
    color: #aaaaaa !important;
}

#clear-search-btn {
    border: none !important;
    background: transparent !important;
    color: #999999 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 5px 10px !important;
    outline: none !important;
    transition: color 0.2s ease !important;
}

#clear-search-btn:hover {
    color: #FF3324 !important;
}

/* Выпадающие результаты поиска */
#price-search-results {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15) !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    z-index: 101 !important;
    padding: 10px 0 !important;
}

.search-no-results {
    padding: 25px 20px !important;
    text-align: center !important;
    color: #777777 !important;
    font-size: 15px !important;
}

.search-results-list {
    display: flex !important;
    flex-direction: column !important;
}

.search-result-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid #f5f8fa !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.search-result-item:last-child {
    border-bottom: none !important;
}

.search-result-item:hover {
    background: rgba(255, 51, 36, 0.03) !important;
}

.result-info {
    flex-grow: 1 !important;
    padding-right: 20px !important;
}

.result-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 4px !important;
}

.result-category {
    font-size: 12px !important;
    color: #888888 !important;
}

.result-category i {
    margin-right: 4px !important;
}

.result-meta {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-shrink: 0 !important;
}

.result-time {
    font-size: 13px !important;
    color: #666666 !important;
    background: #eef2f5 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

.result-time i {
    margin-right: 4px !important;
}

.result-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #014273 !important;
}

.btn-search-book {
    background: #FF3324 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease !important;
}

.btn-search-book:hover {
    background: #d82316 !important;
    transform: scale(1.05) !important;
}

.highlight-word {
    color: #FF3324 !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    .search-input-wrapper {
        padding: 4px 15px 4px 18px !important;
    }
    
    #price-smart-search {
        font-size: 14px !important;
    }
    
    .search-result-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 18px !important;
        gap: 10px !important;
    }
    
    .result-info {
        padding-right: 0 !important;
    }
    
    .result-meta {
        width: 100% !important;
        justify-content: space-between !important;
        border-top: 1px solid #f0f3f5 !important;
        padding-top: 8px !important;
    }
}

/* ==========================================================================
   18. Интерактивный калькулятор стоимости ТО и ремонта
   ========================================================================== */
.calculator-section {
    padding: 60px 0 !important;
}

.card-glassmorphism {
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06) !important;
}

.calc-box {
    padding: 35px !important;
    max-width: 960px;
    margin: 0 auto !important;
    transition: all 0.3s ease !important;
}

.calc-step-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.step-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #FF3324 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Шаг 1: Сетка категорий */
.calc-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.calc-cat-card {
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 12px !important;
    padding: 25px 15px !important;
    text-align: center !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.calc-cat-card i {
    font-size: 32px !important;
    color: #014273 !important;
    transition: all 0.3s ease !important;
}

.calc-cat-card span {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    transition: color 0.3s ease !important;
}

.calc-cat-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(255, 51, 36, 0.3) !important;
    box-shadow: 0 12px 25px rgba(255, 51, 36, 0.12) !important;
}

.calc-cat-card:hover i {
    color: #FF3324 !important;
    transform: scale(1.1) !important;
}

.calc-cat-card:hover span {
    color: #FF3324 !important;
}

/* Шаг 2: Список услуг с чекбоксами */
.calc-step-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid #eef2f5 !important;
    padding-bottom: 15px !important;
}

.calc-step-header .calc-step-title {
    margin-bottom: 0 !important;
}

.btn-calc-back {
    background: transparent !important;
    border: 1px solid #014273 !important;
    color: #014273 !important;
    border-radius: 30px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.btn-calc-back:hover {
    background: #014273 !important;
    color: #ffffff !important;
}

.calc-services-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}

.calc-service-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
}

.calc-service-row:hover {
    border-color: rgba(1, 66, 115, 0.2) !important;
    background: rgba(1, 66, 115, 0.01) !important;
}

.calc-checkbox-container {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    user-select: none !important;
    flex-grow: 1 !important;
    padding-right: 15px !important;
}

.calc-checkbox-container input {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
}

.calc-checkmark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    width: 22px !important;
    background-color: #ffffff !important;
    border: 2px solid #cccccc !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.calc-checkmark i {
    font-size: 11px !important;
    color: #ffffff !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

.calc-checkbox-container input:checked ~ .calc-checkmark {
    background-color: #FF3324 !important;
    border-color: #FF3324 !important;
}

.calc-checkbox-container input:checked ~ .calc-checkmark i {
    opacity: 1 !important;
}

.calc-checkbox-container:hover input:not(:checked) ~ .calc-checkmark {
    border-color: #FF3324 !important;
}

.calc-service-label-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333333 !important;
}

.calc-checkbox-container input:checked ~ .calc-service-label-text {
    color: #FF3324 !important;
    font-weight: 600 !important;
}

.calc-service-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.calc-service-time {
    font-size: 12px !important;
    color: #666666 !important;
    background: #eef2f5 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

.calc-service-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #014273 !important;
    min-width: 90px !important;
    text-align: right !important;
}

/* Шаг 3: Итог и квитанция */
.calc-summary-row {
    margin-top: 10px !important;
}

.calc-receipt {
    padding: 25px !important;
    border-radius: 12px !important;
    border: 1px dashed rgba(1, 66, 115, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
}

.calc-receipt::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: repeating-linear-gradient(90deg, #014273, #014273 8px, transparent 8px, transparent 16px) !important;
}

.receipt-header {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #014273 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #eef2f5 !important;
    padding-bottom: 10px !important;
}

.receipt-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
}

.receipt-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    font-size: 13.5px !important;
    color: #444444 !important;
    gap: 15px !important;
}

.receipt-item-name {
    font-weight: 400 !important;
}

.receipt-item-price {
    font-weight: 600 !important;
    color: #333333 !important;
    white-space: nowrap !important;
}

.receipt-divider {
    border-top: 1px dashed #cccccc !important;
    margin: 20px 0 !important;
}

.receipt-total {
    padding-top: 5px !important;
}

.total-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 15px !important;
    color: #333333 !important;
}

.total-line strong {
    font-size: 20px !important;
    color: #FF3324 !important;
}

.calc-contact-form {
    padding: 25px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.form-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 10px !important;
}

/* Адаптивность для калькулятора */
@media (max-width: 991px) {
    .calc-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .calc-box {
        padding: 20px 15px !important;
    }
    
    .calc-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .calc-cat-card {
        padding: 16px 10px !important;
        gap: 10px !important;
    }
    
    .calc-cat-card i {
        font-size: 26px !important;
    }
    
    .calc-cat-card span {
        font-size: 13px !important;
    }
    
    .calc-service-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 14px !important;
        gap: 8px !important;
    }
    
    .calc-checkbox-container {
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    .calc-service-meta {
        width: 100% !important;
        justify-content: space-between !important;
        border-top: 1px solid #f5f8fa !important;
        padding-top: 8px !important;
    }
    
    .calc-summary-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    .calc-categories-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   19. Кнопка быстрой прокладки маршрута "Мобильный навигатор"
   ========================================================================== */
.btn-navigator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FF3324 !important;
    color: #ffffff !important;
    padding: 12px 22px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 51, 36, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.btn-navigator:hover {
    background: #d82316 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(255, 51, 36, 0.4) !important;
}

.btn-navigator:active {
    transform: translateY(-1px) scale(1.0) !important;
    box-shadow: 0 4px 10px rgba(255, 51, 36, 0.2) !important;
}

.btn-navigator i {
    font-size: 15px !important;
    transition: transform 0.3s ease !important;
}

.btn-navigator:hover i {
    transform: translate(2px, -2px) !important; /* Легкое движение стрелки по диагонали вверх-вправо */
}

/* Стильные бэйджи количества выбранных услуг для карточек категорий */
.calc-cat-card {
    position: relative !important;
}

.cat-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: #FF3324 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 8px rgba(255, 51, 36, 0.4) !important;
    animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 5 !important;
}

@keyframes badgePop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   20. Оптимизация первого экрана: Нативные изображения слайдера (LCP Fix)
   ========================================================================== */
.top-slider .img-wrapper {
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    margin-bottom: 0 !important;
}

.slider-native-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    min-height: 200px !important; /* Высота для мобильных устройств */
}

@media only screen and (min-width: 768px) {
    .top-slider .img-wrapper {
        height: 400px !important;
    }
    .slider-native-img {
        min-height: 400px !important; /* Высота для десктопных устройств */
    }
}

/* ==========================================================================
   21. Секция отзывов на главной (Яндекс и 2ГИС)
   ========================================================================== */
.reviews-homepage-section {
    background: #fafafa !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
    overflow: hidden !important;
}

.reviews-subtitle {
    font-size: 16px !important;
    color: #7f8c8d !important;
    margin-top: -10px !important;
    margin-bottom: 30px !important;
    font-weight: 400 !important;
    text-align: center !important;
}

/* Плашки рейтингов */
.reviews-rating-badges {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.rating-badge-card {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    width: 320px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.rating-badge-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}

.rating-badge-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
}

.rating-badge-card.yandex::before {
    background: #fc3f1d !important;
}

.rating-badge-card.twogis::before {
    background: #2ebd59 !important;
}

.badge-logo {
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 12px !important;
}

.badge-value {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.rating-num {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #2c3e50 !important;
    line-height: 1 !important;
}

.rating-stars {
    display: flex !important;
    gap: 2px !important;
    font-size: 14px !important;
}

.badge-count {
    font-size: 13px !important;
    color: #7f8c8d !important;
    margin-bottom: 12px !important;
}

.badge-link {
    font-size: 13px !important;
    color: #f39c12 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.badge-link:hover {
    color: #d35400 !important;
    text-decoration: underline !important;
}

/* Карточки отзывов */
.reviews-carousel-wrapper {
    margin: 0 -15px !important;
}

.reviews-carousel .slick-slide {
    padding: 15px !important;
    outline: none !important;
}

.review-card-wrapper {
    height: 100% !important;
}

.review-card {
    background: #ffffff !important;
    border: 1px solid #eef2f3 !important;
    border-radius: 14px !important;
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    height: 280px !important; /* Фиксированная высота для ровности карусели */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    cursor: grab !important;
}

.review-card:active {
    cursor: grabbing !important;
}

.review-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important;
    border-color: #f39c12 !important;
}

.review-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    position: relative !important;
}

.review-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f39c12, #d35400) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    box-shadow: 0 3px 8px rgba(243, 156, 18, 0.25) !important;
}

.review-meta {
    flex: 1 !important;
    min-width: 0 !important;
}

.review-author {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.review-car {
    font-size: 12px !important;
    color: #7f8c8d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
}

.review-platform-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.review-rating {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    margin-bottom: 15px !important;
}

.review-date {
    font-size: 12px !important;
    color: #bdc3c7 !important;
    margin-left: auto !important;
}

.review-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    flex: 1 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important; /* Обрезает текст после 6 строк */
    -webkit-box-orient: vertical !important;
    font-style: italic !important;
    position: relative !important;
}

/* Кнопка */
.reviews-more-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 14px 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.reviews-more-btn:hover {
    background: linear-gradient(135deg, #e67e22, #d35400) !important;
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   22. Секция Команда и Оборудование ремзоны
   ========================================================================== */
.team-equip-section {
    background: #ffffff !important;
    overflow: hidden !important;
}

.team-subtitle,
.equip-subtitle {
    font-size: 16px !important;
    color: #7f8c8d !important;
    margin-top: -10px !important;
    margin-bottom: 40px !important;
    font-weight: 400 !important;
    text-align: center !important;
}

.team-equip-divider {
    border: 0 !important;
    height: 1px !important;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.06), rgba(0,0,0,0)) !important;
    margin: 0 !important;
}

/* Карточки специалистов */
.team-card-wrapper {
    margin-bottom: 30px !important;
}

.team-card {
    background: #ffffff !important;
    border: 1px solid #eef2f3 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    height: 420px !important;
    display: flex !important;
    flex-direction: column !important;
}

.team-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(1, 66, 115, 0.06) !important;
    border-color: #014273 !important;
}

.team-photo-container {
    height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f7f9fa !important;
}

.team-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.team-card:hover .team-photo {
    transform: scale(1.05) !important;
}

.team-experience {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    background: rgba(1, 66, 115, 0.95) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
}

.team-info {
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.team-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 4px !important;
}

.team-position {
    font-size: 13px !important;
    color: #f39c12 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
}

.team-quote {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #666666 !important;
    font-style: italic !important;
    flex: 1 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

/* Карточки оборудования */
.equip-card-wrapper {
    margin-bottom: 30px !important;
}

.equip-card {
    background: #ffffff !important;
    border: 1px solid #eef2f3 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    height: 380px !important;
    display: flex !important;
    flex-direction: column !important;
}

.equip-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    border-color: #f39c12 !important;
}

.equip-photo-container {
    height: 180px !important;
    overflow: hidden !important;
    background: #f7f9fa !important;
}

.equip-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.equip-card:hover .equip-photo {
    transform: scale(1.05) !important;
}

.equip-info {
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.equip-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 8px !important;
}

.equip-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #666666 !important;
    flex: 1 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
}

/* Адаптивность для отзывов, команды и оборудования */
@media (max-width: 1200px) {
    .team-card {
        height: 440px !important;
    }
    .equip-card {
        height: 400px !important;
    }
}

@media (max-width: 991px) {
    .team-card {
        height: 420px !important;
    }
    .equip-card {
        height: 380px !important;
    }
}

@media (max-width: 767px) {
    .rating-badge-card {
        width: 100% !important;
    }
    
    .reviews-rating-badges {
        gap: 15px !important;
    }
    
    .review-card {
        height: 250px !important;
    }
    
    .review-text {
        -webkit-line-clamp: 5 !important;
    }
    
    .team-card {
        height: auto !important;
    }
    
    .equip-card {
        height: auto !important;
    }
    
    .team-quote,
    .equip-desc {
        -webkit-line-clamp: none !important;
        display: block !important;
    }
}

/* ==========================================================================
   23. Полноширинная секция FAQ на главной
   ========================================================================== */
.faq-homepage-section {
    background: #ffffff !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
    overflow: hidden !important;
}

.faq-subtitle {
    font-size: 16px !important;
    color: #7f8c8d !important;
    margin-top: -10px !important;
    margin-bottom: 30px !important;
    font-weight: 400 !important;
    text-align: center !important;
}

.faq-accordion-wrapper {
    max-width: 860px !important;
    margin: 0 auto !important;
}

.faq-homepage-section .faq-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.faq-homepage-section .faq-item {
    background: #ffffff !important;
    border: 1px solid #eef2f3 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.faq-homepage-section .faq-item[open] {
    border-color: #f39c12 !important;
    box-shadow: 0 8px 25px rgba(243, 156, 18, 0.06) !important;
}

.faq-homepage-section .faq-question {
    padding: 18px 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    list-style: none !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
    border-left: 4px solid transparent !important;
}

.faq-homepage-section .faq-question::-webkit-details-marker {
    display: none !important;
}

.faq-homepage-section .faq-question:hover {
    color: #f39c12 !important;
    background: #fafafa !important;
}

.faq-homepage-section .faq-item[open] .faq-question {
    border-left-color: #f39c12 !important;
    background: rgba(243, 156, 18, 0.02) !important;
    color: #014273 !important;
}

.faq-homepage-section .faq-icon {
    font-size: 13px !important;
    color: #aaaaaa !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}

.faq-homepage-section .faq-item[open] .faq-icon {
    transform: rotate(-180deg) !important;
    color: #f39c12 !important;
}

.faq-homepage-section .faq-answer {
    padding: 5px 25px 22px 25px !important;
    background: #ffffff !important;
    color: #555555 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    border-top: 1px solid rgba(0,0,0,0.02) !important;
}

.faq-homepage-section .faq-answer p {
    margin: 0 !important;
    padding-top: 12px !important;
}

/* === СТИЛИ ДЛЯ БЛОКА ЦИФР "В ЦИФРАХ" (.numbers-section) === */
.numbers-section {
    background: linear-gradient(135deg, #014273 0%, #002848 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 20px 0 !important;
}

/* Световые блики на заднем фоне блока для премиального вида */
.numbers-section::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -30% !important;
    width: 80% !important;
    height: 180% !important;
    background: radial-gradient(circle, rgba(243, 156, 18, 0.08) 0%, transparent 60%) !important;
    pointer-events: none !important;
    transform: rotate(-15deg) !important;
}

.numbers-section::after {
    content: "" !important;
    position: absolute !important;
    bottom: -50% !important;
    right: -30% !important;
    width: 80% !important;
    height: 180% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 60%) !important;
    pointer-events: none !important;
    transform: rotate(15deg) !important;
}

.numbers-section h2, 
.numbers-section .title-h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.numbers-section h2 span,
.numbers-section .title-h2 span {
    color: #f39c12 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    display: inline !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    margin: 0 !important;
}

.numbers-subtitle {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-top: 5px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Адаптивная CSS-сетка для карточек */
.numbers-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Карточки с эффектом glassmorphism */
.numbers-section .number-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
}

/* Эффект при наведении на карточку */
.numbers-section .number-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(243, 156, 18, 0.4) !important;
    box-shadow: 0 15px 40px rgba(243, 156, 18, 0.15) !important;
}

/* Подложка для иконки с микро-анимацией */
.num-icon-wrapper {
    width: 65px !important;
    height: 65px !important;
    background: rgba(243, 156, 18, 0.15) !important;
    border: 1px solid rgba(243, 156, 18, 0.3) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    transition: all 0.4s ease !important;
}

.num-icon-wrapper i {
    font-size: 26px !important;
    color: #f39c12 !important;
    transition: all 0.4s ease !important;
}

.numbers-section .number-card:hover .num-icon-wrapper {
    background: #f39c12 !important;
    border-color: #f39c12 !important;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.4) !important;
}

.numbers-section .number-card:hover .num-icon-wrapper i {
    color: #ffffff !important;
    transform: rotate(360deg) !important;
}

/* Крупная цифра */
.num-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    transition: color 0.3s ease !important;
}

.numbers-section .number-card:hover .num-value {
    color: #f39c12 !important;
}

/* Описание */
.num-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 400 !important;
}

/* === АДАПТИВНОСТЬ ДЛЯ БЛОКА ЦИФР === */
@media (max-width: 991px) {
    .numbers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .numbers-section .number-card {
        padding: 25px 15px !important;
    }
}

@media (max-width: 767px) {
    .numbers-subtitle {
        font-size: 14px !important;
        padding: 0 15px !important;
    }
}

@media (max-width: 480px) {
    .numbers-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .numbers-section .number-card {
        padding: 25px 20px !important;
    }
}

/* === СТИЛИ ДЛЯ ТАБЛИЦЫ ЦЕН НА ГЛАВНОЙ (.seo-price-table) === */
.seo-price-table {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #eef2f5 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.seo-price-table thead th {
    background-color: #014273 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
}

.seo-price-table tbody td {
    padding: 11px 15px !important;
    vertical-align: middle !important;
    border: 1px solid #eef2f5 !important;
    color: #555555 !important;
    font-size: 13.5px !important;
}

.seo-price-table tbody tr {
    transition: background-color 0.2s ease !important;
}

.seo-price-table tbody tr:hover {
    background-color: rgba(243, 156, 18, 0.04) !important;
}

.seo-price-table .price-value {
    color: #f39c12 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}