/*
Template: understrap
Theme Name: Understrap Child
Theme URI: https://understrap.com
Template: understrap
Author: Howard Development & Consulting
Author URI: https://howarddc.com
Description: The renowned WordPress starter theme framework that combined Underscores and Bootstrap. Trusted by more than 100,000 developers for building handcrafted, custom WordPress sites.
Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,translation-ready,block-styles,wide-blocks,editor-style,threaded-comments,accessibility-ready
Version: 1.2.4.1753431576
Updated: 2025-07-25 11:19:36
Text Domain:  understrap-child
*/
/*
 * @FILE:           style.css (Дочерняя тема Understrap Child)
 * @PURPOSE:        Основной файл стилей проекта. Определяет весь кастомный внешний вид сайта, переопределяя и дополняя базовые стили фреймворка Understrap (Bootstrap 5).
 * @VERSION:        v2.0 (Single Car Page Styling)
 * 
 * @ARCHITECTURE:   Файл организован по методологии ITCSS (перевернутый треугольник CSS), где стили идут от общих к частным:
 *  - БЛОК 1: ГЛОБАЛЬНЫЕ СТИЛИ. Переменные CSS (--color-primary), базовые стили для body, заголовков.
 *  - БЛОК 2: ОБЩИЕ КОМПОНЕНТЫ. Стили для элементов, используемых по всему сайту (кнопки .btn, карточки .card).
 *  - БЛОК 3: КОМПОНЕНТЫ ПРОЕКТА. Стили для специфичных компонентов (карточки авто в каталоге, фильтры).
 *  - БЛОК 4: СТИЛИ ШАБЛОНОВ. Детальная стилизация крупных страниц и шаблонов (калькулятор, страница одного авто).
 *  - БЛОК 5: АДАПТИВНОСТЬ. Media-запросы для корректного отображения на планшетах и мобильных устройствах.
 *
 * @INTEGRATION:
 *  - ЗАВИСИТ ОТ: /css/theme.min.css (стили родительской темы Understrap).
 *  - ВЛИЯЕТ НА: Весь фронтенд сайта, в особенности на шаблоны single-encart_car.php, archive-*.php и кастомные страницы.
 * 
 * @LAST_MODIFIED: 19.08.2025
 */

/*
 * @CHANGELOG: Журнал выполненных работ для отчета заказчику
 *
 * v2.0 (19.08.2025):
 *  - ЗАДАЧА: Привести внешний вид страницы автомобиля в полное соответствие с дизайн-макетом.
 *  - РЕШЕНИЕ: Добавлены стили для финальной полировки интерфейса:
 *      - Стилизованы новые модальные окна "Забронировать" и "Схема привоза".
 *      - Улучшено отображение галереи (растягивание фото без искажений).
 *      - Переработан сайдбар для создания эффекта единой информационной карточки.
 *      - Увеличена читаемость за счет корректировки размеров шрифтов и отступов.
 *  - ЦЕННОСТЬ: Достигнуто 100% соответствие утвержденному дизайну, улучшен пользовательский опыт (UX/UI).
 *
 * v1.0 (Дата начала работ):
 *  - ЗАДАЧА: Создать базовую стилизацию для основных элементов сайта.
 *  - РЕШЕНИЕ: Написаны стили для глобальных переменных, кнопок, карточек товаров в каталоге и фильтров.
 *  - ЦЕННОСТЬ: Заложена основа для визуального оформления проекта.
 */

/* ===================================================================
 *  1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ
 * =================================================================== */

:root {
    --color-primary: #007bff;          /* Основной синий (кнопки, ссылки, акценты) */
    --color-primary-dark: #0056b3;     /* Темно-синий для ховеров */
    --color-text: #212529;             /* Основной цвет текста */
    --color-text-secondary: #6c757d;   /* Вторичный, серый цвет текста */
    --color-background: #fff;          /* Основной фон сайта */
    --color-background-light: #f8f9fa; /* Слегка серый фон для секций */
    --color-border: #dee2e6;           /* Цвет границ, разделителей */
    --border-radius: 8px;              /* Стандартный радиус скругления */
}

*, *::before, *::after {
    box-sizing: border-box;
}


body {
    /* Заменяем старый темный #dee2e6 на премиальный светлый серо-голубой */
    background-color: #F3F5F8 !important; 
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--color-text);
    line-height: 1.6;
}

/* Добавляем тень контейнеру, чтобы он красиво "парил" над светлым фоном */
#content.container {
    background-color: #fff;
    /* Мягкая, размытая тень вместо жесткой границы */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.04); 
    border-radius: 0 0 12px 12px; /* Скругление снизу, если нужно */
}



h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

@font-face {
  font-family: 'Gunship';
  src: url('fonts/gunship.ttf') format('truetype'); 
}

@font-face {
  font-family: 'ethnocentric rg it';
  src: url('fonts/ethnocentric rg it.ttf') format('truetype'); 
}

@font-face {
  font-family: 'ethnocentric rg';
  src: url('fonts/ethnocentric rg.ttf') format('truetype'); 
}


/* ===================================================================
 *  2. ОБЩИЕ КОМПОНЕНТЫ
 * =================================================================== */

.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}
.btn-secondary {
    background-color: var(--color-background-light);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-secondary:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}
.btn-full {
    width: 100%;
}


/* ===================================================================
 *  HEADER STYLES 2025 (FINAL CLEAN VERSION - ALIGNMENT FIX)
 * =================================================================== */

/* 1. Настройка контейнера и Сетки */
#wrapper-navbar .container {
    padding-top: 15px;
    padding-bottom: 15px;
}

.header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* ИЗМЕНЕНИЕ: stretch заставляет боковые колонки быть одинаковой высоты */
    align-items: stretch; 
    width: 100%;
}

/* 2. Логотип (Центральный слот) */
.header__item:nth-child(2) {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center; /* Логотип остается по центру вертикально */
}

.header-logo img {
    max-width: 185px; 
    max-height: 85px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 3. Левая колонка (Телефон + Меню) */
.header__item:first-child {
    justify-self: start; 
    text-align: left;
    /* ИЗМЕНЕНИЕ: Включаем Flex для управления вертикалью */
    display: flex;
    flex-direction: column;
    /* ИЗМЕНЕНИЕ: Раскидываем контент по краям (Телефон вверх, Меню вниз) */
    justify-content: space-between; 
}

.header__tel {
    font-family: 'ethnocentric rg', sans-serif; 
    font-size: 18px !important; 
    color: #2c2d33; 
    margin-bottom: 2px;
    line-height: 1.1; 
    white-space: nowrap; 
}

/* 4. Слоган */
.header__text {
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 0.8px; 
    color: #6c757d;
    opacity: 0.8;
    margin-top: 5px;
    font-weight: 600; 
    /* Доп. отступ снизу, чтобы меню не прилипало к слогану на мобильных */
    margin-bottom: 5px; 
}

/* 5. Правая колонка (Соцсети + Меню) */
.header__item:last-child {
    justify-self: end;
    /* ИЗМЕНЕНИЕ: Тоже включаем Flex и выравнивание */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; /* Прижимаем контент вправо */
}

.menu .nav-link {
    font-size: 16px;       
    font-weight: 500;      
    color: #2c2d33;
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-transform: capitalize; 
    transition: color 0.2s ease;
}

.menu .nav-link:hover {
    color: var(--color-primary);
}

/* 6. Соцсети */
.header__socials a {
    width: 38px; 
    height: 38px;
    background-color: #f8f9fa !important; 
    border: 1px solid #e9ecef; 
    border-radius: 10px; 
    color: #2c2d33;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); 
}

.header__socials a:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary);
    color: #fff !important;
    transform: translateY(-3px); 
    box-shadow: 0 4px 10px rgba(29, 117, 184, 0.3); 
}

/* --- АДАПТИВ (Tablet & Mobile) --- */
@media (max-width: 992px) {
    .header__inner {
        display: flex; /* Возвращаем обычный поток */
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .header__item:first-child,
    .header__item:last-child {
        justify-self: center;
        text-align: center;
        width: 100%;
        align-items: center; /* Центрируем на мобильных */
        justify-content: center;
        gap: 10px; /* Отступ между телефоном и меню на мобильных */
    }

    .header-logo img {
        max-width: 150px;
    }
    
    .header__tel {
        font-size: 16px !important;
        text-align: center !important;
    }
    
    .header__text {
        text-align: center !important;
    }
    
    .menu {
        justify-content: center;
    }
}

/* ===================================================================
 *  3. СТИЛИ ДЛЯ КОМПОНЕНТОВ САЙТА
 * =================================================================== */

/* --- Компонент: Карточка-плитка (Главная, Похожие авто) --- */
.car-card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
}
.car-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.car-card__image-wrapper {
    position: relative;
    padding-top: 66.66%;
    background-color: #f0f2f5;
}
.car-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.car-card__content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.car-card__title {
    font-size: 18px;
    margin: 0 0 10px;
    font-weight: 600;
}
.car-card__title a {
    text-decoration: none;
    color: var(--color-text);
}
.car-card__price {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
}
.car-card__specs {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--color-text-secondary);
    flex-grow: 1;
}
.car-card__specs li {
    padding: 4px 0;
    border-bottom: 1px dashed #e9ecef;
}
.car-card__footer {
    margin-top: auto;
}

/* --- Компонент: Карточка-строка (Каталог) --- */
.car-list-item {
    display: flex;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 20px;
    gap: 20px;
    transition: box-shadow 0.2s ease-in-out;
}
.car-list-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
.car-list-item__image {
    flex: 0 0 280px;
    height: 200px;
    border-radius: var(--border-radius);
    overflow: hidden;
    min-width: 300px !important;

}
.car-list-item__image a { display: block; height: 100%; }
.car-list-item__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.3s ease;
}
.car-list-item:hover .car-list-item__image img {
    transform: scale(1.05);
}
.car-list-item__content {
    flex: 1; display: flex; flex-direction: column;
}
.car-list-item__header {
    display: flex; justify-content: space-between; gap: 20px; margin-bottom: 15px;
}
.car-list-item__title {
    font-size: 22px; margin: 0;
}
.car-list-item__title a {
    text-decoration: none; color: var(--color-text);
}
.car-list-item__price {
    font-size: 24px; font-weight: 700; color: var(--color-primary); white-space: nowrap;
}
.car-list-item__specs {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    font-size: 15px; color: var(--color-text-secondary); margin-bottom: 20px;
    border-top: 1px solid var(--color-border); padding-top: 15px;
}
.car-list-item__specs div {
    display: flex; align-items: center; gap: 8px;
}
.car-list-item__specs i.fas {
    color: var(--color-primary); width: 16px; text-align: center;
}
.car-list-item__footer {
    margin-top: auto; text-align: right;
}


/* ===================================================================
 *  4. СТИЛИ ДЛЯ ШАБЛОНОВ СТРАНИЦ
 * =================================================================== */

/* --- Шаблон: Каталог --- */
.car-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}
.catalog-tabs {
    list-style: none; padding: 0; margin: 0 0 2.5rem 0;
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    border-bottom: 2px solid var(--color-border);
}
.catalog-tabs li a {
    display: block; padding: 12px 24px; text-decoration: none;
    font-size: 16px; font-weight: 600; color: var(--color-text-secondary);
    border: 2px solid transparent; border-radius: var(--border-radius) var(--border-radius) 0 0;
    position: relative; bottom: -2px; transition: all 0.2s ease-in-out;
}
.catalog-tabs li.active a, .catalog-tabs li a:hover {
    color: var(--color-primary); background-color: var(--color-background);
}
.catalog-tabs li.active a {
    border-color: var(--color-border); border-bottom-color: var(--color-background);
}


.main-image-wrapper {
    border-radius: var(--border-radius); overflow: hidden;
    margin-bottom: 15px; border: 1px solid var(--color-border);
}
.main-image-wrapper img { display: block; width: 50% !important; }
.thumbnail-strip {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px;
}
.thumbnail-item img {
    border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s;
}
.thumbnail-item img:hover {
    border-color: var(--color-primary);
}

.price-main {
    font-size: 32px; font-weight: 700; color: var(--color-primary);
}

.messenger-links { display: flex; gap: 10px; }
.messenger-link {
    flex: 1; text-align: center; padding: 10px;
    border: 1px solid var(--color-border); border-radius: 6px;
    text-decoration: none; color: var(--color-text); font-weight: 500;
}
.messenger-link.telegram { background: #EAF5FF; }
.messenger-link.whatsapp { background: #E7F8E9; }

.specs-summary {
    border-top: 1px solid var(--color-border); padding-top: 20px;
}
.sidebar-title { font-size: 18px; margin: 0 0 15px; }
.specs-summary ul { list-style: none; padding: 0; margin: 0; }
.specs-summary li {
    display: flex; justify-content: space-between; font-size: 15px; padding: 8px 0;
    border-bottom: 1px dashed var(--color-border);
}
.specs-summary li span { color: var(--color-text-secondary); }
.specs-summary li strong { color: var(--color-text); }

.car-section {
    margin-top: 2.5rem;
}
.section-title {
    font-size: 24px; margin-bottom: 1.5rem;
}

.options-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;
}
.option-item {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    border-radius: 6px; background-color: var(--color-background-light); font-size: 14px;
}
.option-item .option-icon { display: inline-flex; }
.option-item.available { color: var(--color-text); }
.option-item.available .option-icon { color: #28a745; }
.option-item.unavailable { color: var(--color-text-secondary); text-decoration: line-through; }
.option-item.unavailable .option-icon { color: #dc3545; }

.similar-cars-section {
    border-top: 1px solid var(--color-border); margin-top: 40px; padding-top: 40px;
}


/* --- Стили для блока "Поиск по цене" --- */
.price-card .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.price-card:hover .card {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.price-card .card-title {
    color: var(--color-text);
}

.brands-list a {
    padding: 5px;
}

span.brand-count {
    padding: 3px;
}

.brands-list {
    display: flex;
}
.gallery-image-wrapper {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Скрывает углы, если у img нет border-radius */
}

/* --- Стили для слайдера Swiper.js --- */
.car-gallery-slider {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

/* Стили для стрелок */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-primary) !important; /* Используем наш основной синий цвет */
    background-color: rgba(255, 255, 255, 0.8);
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: 900;
}

/* Стили для пагинации (точек) */
.swiper-pagination-bullet-active {
    background: var(--color-primary) !important;
}

/* ===================================================================
 *  6. СТИЛИ ДЛЯ КАЛЬКУЛЯТОРА РФ (ФИНАЛЬНЫЙ ДИЗАЙН V4)
 * =================================================================== */

/* --- ОСНОВНАЯ СТРУКТУРА --- */
.customs-calculator-rf-wrapper {
    background-color: white;
    padding: 0;
    margin: 40px auto;
}
.calculator-title {
    font-size: 28px;
    margin-bottom: 30px;
    font-weight: 700;
    color: #212529;
    padding-left: 5px;
}
.customs-calculator-rf {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1050px;
    margin: 0 auto;
    align-items: flex-start;
}
.calculator-form-col { flex: 1 1 500px; }
.calculator-results-col { flex: 1 1 420px; }


/* --- ЭЛЕМЕНТЫ ФОРМЫ --- */
.customs-calculator-rf .form-group {
    margin-bottom: 25px;
}
.customs-calculator-rf .form-group label {
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    color: #343a40;
}
.customs-calculator-rf input[type="number"], .customs-calculator-rf select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 5px;
}
.customs-calculator-rf .input-group {
    display: flex;
}
.customs-calculator-rf .input-group input {
    border-radius: 8px !important;
}
.customs-calculator-rf .input-group select {
    border-radius: 0 8px 8px 0;
    background-color: #f8f9fa;
}

/* --- СТИЛИ ДЛЯ КАСТОМНЫХ РАДИО-КНОПОК --- */
.customs-calculator-rf .radio-group {
    display: flex;
    gap: 8px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 6px;
}
.customs-calculator-rf .radio-group input[type="radio"] {
    /* display: none; /* Полностью скрываем стандартный input */
}
.customs-calculator-rf .radio-group label {
    flex: 1;
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    font-weight: 500;
    color: #495057;
    position: relative; /* Для дочерних псевдо-элементов */
}
/* Стиль для выбранной кнопки (Возраст) */
.customs-calculator-rf .radio-group input[type="radio"]:checked + label {
    background-color: #e4002b;
    color: white;
    border-color: #e4002b;
}

/* --- СТИЛИ ДЛЯ ОДИНОЧНОЙ ГАЛОЧКИ "ДЛЯ ЛИЧНОГО ПОЛЬЗОВАНИЯ" --- */
.customs-calculator-rf .radio-group.purpose-group {
    border: none;
    padding: 0;
}
.customs-calculator-rf .purpose-group label {
    border: 1px solid #ced4da;
    text-align: left;
    padding-left: 40px; /* Оставляем место для нашей кастомной галочки */
}
/* Рисуем квадратик */
.customs-calculator-rf .purpose-group label::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #adb5bd;
    border-radius: 3px;
    transition: all 0.2s;
    display: none;
}
/* Рисуем саму галочку (она изначально невидима) */
.customs-calculator-rf .purpose-group label::after {
    content: '✓';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%) scale(0); /* Скрываем через размер */
    font-size: 16px;
    font-weight: bold;
    color: white;
    transition: all 0.2s;
}
/* Когда input выбран, меняем стили квадратика и показываем галочку */
.customs-calculator-rf .purpose-group input[type="radio"]:checked + label::before {
    background-color: #e4002b;
    border-color: #e4002b;
}
.customs-calculator-rf .purpose-group input[type="radio"]:checked + label::after {
    transform: translateY(-50%) scale(1); /* Показываем галочку */
}


.customs-calculator-rf .form-group small {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: #6c757d;
}
.customs-calculator-rf .btn-calculate {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: var(--color-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* --- КАРТОЧКА РЕЗУЛЬТАТОВ (без изменений) --- */
.result-card-wrapper {
    position: sticky;
    top: 40px;
}
.result-card {
    border-radius: 16px;
    padding: 25px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.result-card.placeholder .placeholder-title {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 10px;
}
.result-card.placeholder p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.5;
}
.final-price {
    background-color: #e4002b;
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    position: relative;
}
.final-price .rub-icon {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    padding: 6px;
    margin-right: 10px;
}
.final-price .result-car-img {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 180px;
    opacity: 0.1;
}
.final-price span {
    font-size: 14px;
    font-weight: 500;
    display: block;
    opacity: 0.9;
    margin-top: 5px;
}
.currency-rates {
    text-align: center;
    font-size: 13px;
    color: #6c757d;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
}
.currency-rates span {
    font-weight: 700;
    color: #212529;
}
.result-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 15px;
}
.result-row, .result-sub-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 15px;
}
.result-row {
    font-weight: 600;
    color: #343a40;
}
.result-sub-row {
    color: #6c757d;
    padding-left: 15px;
}
.result-sub-row:not(:last-child) {
    border-bottom: 1px dashed #e9ecef;
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 992px) {
    .customs-calculator-rf {
        flex-direction: column;
    }
    .calculator-form-col,
    .calculator-results-col {
        flex-basis: auto;
        max-width: 100%;
    }
    .result-card-wrapper {
        position: static; /* Отключаем "прилипание" на мобильных */
    }
}

/* ===================================================================
 *  7. СТИЛИ ДЛЯ ГОРИЗОНТАЛЬНЫХ ФИЛЬТРОВ (ФИНАЛЬНАЯ ВЕРСИЯ)
 * =================================================================== */

/* --- Контейнер для всего блока фильтров --- */
.car-filters-container {
    background-color: #f8f9fa; /* Светло-серый фон */
    padding: 30px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
}

/* --- Главная сетка для всех элементов фильтра --- */
/* Используем более сильный селектор, чтобы перебить стили темы */
body .fl-widget-content > div:not(.fl-apply-button-container) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

/* --- Стили для каждого отдельного фильтра --- */
.w-filter-item-inner {
    display: flex;
    flex-direction: column;
}

/* --- Заголовки фильтров (Марка, Модель и т.д.) --- */
.w-filter-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #495057;
}

/* --- Поля ввода и селекты --- */
.w-filter-item-inner select,
.w-filter-item-inner input[type="text"],
.w-filter-item-inner input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    font-size: 15px;
}

/* --- Контейнер для полей "от" и "до" --- */
.w-filter-item-inner .fe-range-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* --- Стили для чекбоксов (если будете добавлять опции) --- */
.w-filter-item.w-filter-taxonomy-checklist {
    grid-column: 1 / -1; /* Растягиваем на всю ширину */
    margin-top: 20px;
}

/* --- Кнопки "Применить" и "Сбросить" --- */
.fl-apply-button-container {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end; /* Кнопки справа */
    gap: 15px;
}

.fl-apply-button,
.fl-reset-button {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.2s;
}

.fl-apply-button {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.fl-apply-button:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.fl-reset-button {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}
.fl-reset-button:hover {
    color: var(--color-primary);
}
/* ===================================================================
 *  8. СТИЛИ ДЛЯ КАРТОЧКИ АВТОМОБИЛЯ В КАТАЛОГЕ (БЕЗ ГАЛЕРЕИ)
 * =================================================================== */

.car-list-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.car-list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* --- Левая колонка: Изображение --- */
.car-card-image-wrapper {
    position: relative;
    height: 100%;
}
.car-card-image-wrapper a {
    display: block;
    height: 100%;
}
.car-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 250px; /* Минимальная высота для красивого вида */
}
.new-listing-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background-color: #e4002b;
    color: white;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
}

/* --- Средняя колонка: Заголовок и цена --- */
.car-list-card .col-lg-4:nth-child(2) {
    border-right: 1px solid #e9ecef;
}
.car-card-title a {
    text-decoration: none;
    color: inherit; /* Используем переменную или цвет по умолчанию */
}
.car-card-title a:hover {
    text-decoration: underline;
}
.car-card-price {
    font-weight: 400;
    color: #212529;
    font-family: 'ethnocentric rg';
}

h3.car-card-title.h4 {
    font-family: 'ethnocentric rg';
    font-weight: 400 !important;
}

/* --- Правая колонка: Характеристики --- */
.car-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.spec-item i.fas {
    font-size: 20px;
    color: var(--color-primary, #007bff);
    opacity: 0.7;
}
.spec-item small {
    display: block;
    color: var(--color-text-secondary, #6c757d);
    font-size: 13px;
}
.spec-item strong {
    font-size: 15px;
    color: #212529;
}




/* ===================================================================
 *  5. АДАПТИВНОСТЬ (MEDIA QUERIES)
 * =================================================================== */
@media (max-width: 991px) {
    /* Планшеты */
    .car-list-item__specs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    /* Мобильные устройства */
    .car-list-item {
        flex-direction: column;
    }
    .car-list-item__image {
        flex-basis: auto; height: 250px;
    }
    .car-list-item__header {
        flex-direction: column; gap: 10px;
    }
    .car-list-item__price { text-align: left; }
    .car-list-item__footer { text-align: left; }
}





/*
Фильтры
*/

.widget-title.wpc-filter-title {
  margin-bottom: 2px;
}


/* ===================================================================
 *  ФИНАЛЬНЫЙ ФИКС: Проблема с модальным окном
 * =================================================================== */

/* Эта строчка заставит модальное окно всегда быть поверх затемняющего фона */
.modal-backdrop.fade.show {
    z-index: 999 !important;
}


/* ===================================================================
 * @AOK: Финальная стилизация single-car v10.0 (соответствие донору)
 * =================================================================== */

/* --- 0. Общий макет страницы --- */
#single-wrapper {
    background-color: #f8f9fa; /* Светло-серый фон для всей страницы */
}
#content.container {
    background-color: #fff; /* Белый фон для основной контентной области */
    box-shadow: 0 5px 30px rgba(0,0,0,0.05);
}
@media (min-width: 1200px) {
  #content.container {
    max-width: 1240px; /* Немного шире для "воздуха" */
  }
}

/* --- 1. Заголовок и мета-информация --- */
.car-single-header-new {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}
.car-single-title {
    font-size: 2.5rem; /* Значительно крупнее */
    font-weight: 400;
    margin-bottom: 0.5rem;
    font-family: "ethnocentric rg";
}
.car-single-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    color: var(--color-text-secondary);
}
.schema-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.schema-link:hover { text-decoration: underline; }

/* --- 2. Галерея --- */
.car-single-gallery-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.car-single-gallery-wrapper .img-fluid {
    border-radius: 12px;
}
.new-listing-badge-single {
    position: absolute; top: 20px; left: 20px; z-index: 10;
    background-color: #e4002b; color: white; padding: 6px 14px;
    border-radius: 50px; font-size: 14px; font-weight: 500;
}
.swiper-button-next, .swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.9);
    width: 48px; height: 48px; border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px !important; color: #333;
}

/* --- 3. Сайдбар - ГЛАВНОЕ ИЗМЕНЕНИЕ (ЕДИНАЯ КАРТОЧКА) --- */
.car-single-details.sticky-top {
    top: 30px;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
/* Сбрасываем стили дочерних блоков, т.к. родитель теперь карточка */
.price-box, .actions-box, .messenger-box, .specs-box {
    border: none; padding: 0; margin-bottom: 25px;
    background-color: transparent; box-shadow: none;
}
/* Разделитель после цены */
.price-box {
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}
.price-box small { font-size: 1rem; color: var(--color-text-secondary); }
.price-box .price-main { font-size: 2.5rem; /* Крупная цена */ }
.share-button {
    background: none; border: 1px solid var(--color-border);
    border-radius: 50%; width: 40px; height: 40px;
    color: var(--color-text-secondary);
}

.fa.fa-share-alt {
  left: -6px;
  position: relative;
  top: -13px;
}

.actions-box { display: flex; flex-direction: column; gap: 10px; }
.btn-secondary { background-color: #f8f9fa; }
.messenger-box p { text-align: left; margin-bottom: 1rem; }
.messenger-links { display: flex; gap: 10px; }
.messenger-link {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 10px; border-radius: 6px; text-decoration: none; font-weight: 500;
}
.messenger-link.telegram { background-color: #e3f2fd; color: #0d6efd; }
.messenger-link.whatsapp { background-color: #e6f6e8; color: #198754; }
.specs-box { margin-bottom: 0; }
.specs-box .sidebar-title {
    border-bottom: 1px solid #e9ecef; padding-bottom: 15px;
    margin-bottom: 10px; font-size: 1.25rem; font-weight: 700;
}
.specs-box ul { list-style: none; padding: 0; margin: 0; }
.specs-box li {
    display: flex; justify-content: space-between;
    padding: 0.7rem 0; border-bottom: 1px solid #f1f3f5; font-size: 1rem;
}
.specs-box li:last-child { border-bottom: none; }
.specs-box li span { color: var(--color-text-secondary); }

/* --- 4. Секции контента (Описание, Опции) --- */
.car-section { margin-top: 3.5rem; }
.section-title {
    font-size: 2rem; /* Крупные заголовки */
    font-weight: 800;
    margin-bottom: 2rem;
}
.options-category-title {
    font-size: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 1rem;
}
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px 30px;
}
/* Убираем фон у опций */
.option-item.available {
    background-color: transparent;
    padding: 5px 0;
    font-size: 1rem;
    display: flex; align-items: center; gap: 10px;
}
.option-item .option-icon { color: #28a745; font-weight: bold; }

/* --- 5. Секция "Похожие автомобили" --- */
.similar-cars-section {
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
}

/* ===================================================================
 * @AOK: Стили для блока ДТП (v11.0)
 * =================================================================== */

.subsection-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.insurance-payouts-list .payout-item {
    background-color: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 10px;
}

.payout-item .payout-date {
    font-weight: 600;
    margin-bottom: 5px;
}

.payout-item .payout-cost .cost-krw {
    font-weight: 700;
    color: var(--color-primary);
}

.payout-item .payout-cost .cost-rub {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* ===================================================================
 * @AOK: Финальная полировка (v12.0)
 * =================================================================== */

/* --- 1. Галерея: Растягивание фото без искажений --- */
.car-single-gallery-wrapper .swiper-slide {
    background-color: #f0f2f5; /* Фон на случай медленной загрузки */
}
.car-single-gallery-wrapper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Растягивает изображение, сохраняя пропорции, обрезая лишнее */
    min-height: 450px; /* Минимальная высота для крупных фото */
}
@media (max-width: 767px) {
    .car-single-gallery-wrapper .swiper-slide img {
        min-height: 250px;
    }
}

/* --- 2. Стили для кнопок мессенджеров с иконками --- */
.messenger-links .messenger-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Отступ между иконкой и текстом */
}
.messenger-links .messenger-link .fa {
    margin: 0 !important; /* Убираем лишние отступы у иконок */
}

/* --- 3. Стили для модального окна "Схема привоза" (v2.0) --- */
.scheme-card {
    border: 1px solid #e9ecef;
    border-radius: 16px; /* Более скругленные углы, как в эталоне */
    background-color: #f8f9fa; /* Слегка серый фон, как в эталоне */
    box-shadow: none; /* Убираем тень, в эталоне ее нет */
}
.scheme-card .card-header {
    background: none;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Идеальное выравнивание по вертикали */
    padding: 1.25rem;
}
.scheme-card__title {
font-weight: 600;
  font-size: 1rem;
  padding-right: 1rem;
  width: 68%;
}

.scheme-card__step {
    display: flex;
    align-items: center;
    gap: 12px;
}
.scheme-card__step span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-secondary); /* Серый цвет для "Шаг X" */
}
.scheme-card__step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: white;
}
.scheme-card__step-icon .fa {
    font-size: 16px;
}
.scheme-card .card-body {
    padding: 1.25rem;
    font-size: 0.95rem;
    color: #444;
}
.scheme-card .card-body ul {
    padding-left: 20px;
    margin-top: 10px;
    list-style: disc; /* Возвращаем стандартные маркеры списка */
}
.scheme-card .card-body li {
    margin-bottom: 5px;
}


/* --- 6. Стили для галереи с миниатюрами --- */
.main-gallery-slider { height: 75%; width: 100%; border-radius: 12px; }
.gallery-thumbnails-slider { height: 25%; box-sizing: border-box; padding: 10px 0; }
.gallery-thumbnails-slider .swiper-slide { width: 25%; height: 100%; opacity: 0.4; cursor: pointer; }
.gallery-thumbnails-slider .swiper-slide-thumb-active { opacity: 1; border: 2px solid var(--color-primary); border-radius: 6px; }
.main-gallery-slider img, .gallery-thumbnails-slider img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===================================================================
 * @AOK: Стили для шапки
 * =================================================================== */

.header .container,
.footer .container {
    max-width: 1215px;
}
.header a {
    text-decoration: none;
    color: inherit;
}

.header__inner {
    display: grid;
    grid-template-columns: 1fr 260px 1fr;
}

/* --- 1. Стили для левой части --- */

.header__tel {

    font-size: 22px;
    font-family: 'ethnocentric rg';
    font-weight: 400 !important;
}

.header__text {
    font-size: 16px;
}

/* --- 2. Стили для правой части --- */

.header__socials {
    margin-top: 12px;
    gap: 16px;
}

.header__socials a {
    width: 40px;
    height: 40px;
    transition: background-color 0.3s ease;
    color: #000;
}

.header__socials a:hover {
    background-color: #0570e2 !important;
    color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
}

.header__socials svg {
    transition: all 0.3s ease;
}

/* --- 3. Стили меню --- */

.menu {
    font-size: 15px;
}

.menu a, .header__tel {
    transition: opacity 0.3s ease;
}

.menu a:hover, .header__tel:hover {
    opacity: 0.8;
}

.nav-link {
  font-size: 16px;
}

/* --- 4. Медиа запросы --- */

@media (max-width: 1200px) {
    .header__tel {
        font-size: 26px;
    }
    .menu {
        font-size: 18px;
    }
}

@media (max-width: 992px) {
    .header-logo {
        width: 200px;
    }
    .car-specs-grid-inner {
        border: none !important;
    }
}

@media (max-width: 768px) {
    .header-logo {
        width: 150px;
    }
}

@media (max-width: 576px) {
    .header-logo {
        width: 130px;
    }
    .header__tel {
        font-size: 20px;
    }
    .header__text {
        font-size: 18px;
    }
    .menu {
        font-size: 16px;
    }
}

.car-grid {
   /* background-color: #dee2e6; */
}

.border-custom {
    border-color: #1d75b8 !important;
    border: 1px solid #1d75b8 !important;
}

.btn-custom {
    background-color: #1d75b8;

}

.form-select:focus, .form-control:focus, .form-check-input:focus {
    border-color: #1d75b8;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(29, 117, 184, 0.25);
}

.form-check-input:checked {
    background-color: #1d75b8;
    border-color: #1d75b8;
}

.wpc-filters-widget-wrapper a, .wpc-edit-filter-set a {
    color: inherit;
}

.wpc-filters-main-wrap a.wpc-toggle-a {
    color: #1d75b8;
}

.wpc-filters-range-inputs .ui-slider-horizontal .ui-slider-range {
    background-color: #1d75b8 !important;
}

body .wpc-filters-main-wrap a.wpc-filters-submit-button {
    background-color: #1d75b8 !important;
    border: 3px solid #1d75b8 !important;
}

.wpc-horizontal-layout a.wpc-filters-reset-button {
    border: 1px solid #1d75b8 !important;
}

.intro {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* --- ЗАГОЛОВОК БАННЕРА (GENESIS G80...) --- */

.intro__title {
    /* Desktop (ПК) */
    font-family: 'ethnocentric rg', sans-serif;
    font-size: 76px; /* Оптимальный размер для этого шрифта */
    line-height: 0.95; /* Плотный межстрочный интервал для эффекта "блока" */
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 25px; /* Отступ до кнопки */
    
    /* Легкая тень для отделения текста от фона/машины */
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- АДАПТИВНОСТЬ --- */

/* Ноутбуки и маленькие десктопы */
@media (max-width: 1200px) {
    .intro__title {
        font-size: 60px;
    }
}

/* Планшеты (вертикальные) */
@media (max-width: 992px) {
    .intro__title {
        font-size: 48px;
        line-height: 1.1; /* Чуть больше воздуха на планшетах */
        margin-bottom: 20px;
    }
}

/* Мобильные телефоны */
@media (max-width: 576px) {
    .intro__title {
        font-size: 34px; /* Достаточно крупно, но влезает в экран */
        line-height: 1.1;
        margin-bottom: 15px;
    }
}

@media (min-width: 768px) {
    .wpc-horizontal-layout a.wpc-filters-reset-button, .wpc-horizontal-layout a.wpc-filters-submit-button {
        width: unset !important;
        max-width: 16% !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
    }
}
@media (max-width: 576px) {
    .wpc-horizontal-layout a.wpc-filters-reset-button, .wpc-horizontal-layout a.wpc-filters-submit-button {
        margin: 0 10px !important;
    }
    .intro__title {
        font-size: 28px;
    }
}





/* ===================================================================
 *  АНИМАЦИЯ БЛИКА НА ЛОГОТИПЕ
 * =================================================================== */

/* 1. Создаем контейнер для анимации и скрываем все, что выходит за его пределы */
.header-logo {
    position: relative; /* Обязательно для позиционирования псевдо-элемента */
    overflow: hidden;   /* Скрывает блик, когда он за пределами логотипа */
    display: inline-block; /* Чтобы overflow работал корректно */
}

/* 2. Создаем сам блик с помощью псевдо-элемента ::after */
.header-logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Изначально блик находится далеко слева, за пределами видимости */
    width: 50%;  /* Ширина блика */
    height: 100%;

    /* Магия: создаем диагональный градиент, который и будет нашим бликом */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );

    /* Наклоняем блик */
    transform: skewX(-25deg);
    
    /* Плавный переход для анимации */
    transition: left 0.75s cubic-bezier(0.23, 1, 0.32, 1); /* cubic-bezier для эффекта ускорения и замедления */
}

/* 3. Запускаем анимацию при наведении курсора */
.header-logo:hover::after {
    left: 150%; /* При наведении сдвигаем блик далеко вправо, заставляя его "пробежать" по логотипу */
}
/* ===================================================================
 *  ФИНАЛЬНЫЕ ИНТЕРАКТИВНЫЕ АНИМАЦИИ V3.1
 * =================================================================== */

/* --- ОБЩАЯ ПОДГОТОВКА --- */
.intro,
.car-filters-container,
.category-card {
    position: relative;
    transition: transform 0.3s ease;
}



.intro,
.category-card {
    overflow: hidden;
    display: block;
}

/* --- АНИМАЦИЯ МЯГКОГО СВЕЧЕНИЯ --- */

.car-filters-container:hover {
    border: 1px solid #1d75b8;
}


.intro::before,
.car-filters-container::before,
.category-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: var(--border-radius); 
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease-out;
}

.intro:hover,
.car-filters-container:hover,
.category-card:hover {
    transform: translateY(-3px);
    /* border: 1px solid #1d75b8; */
}

.intro:hover::before,
.car-filters-container:hover::before,
.category-card:hover::before {
    opacity: 1;
}

/* --- АНИМАЦИЯ ПРОБЕГАЮЩЕГО БЛИКА --- */
.intro::after,
.category-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 40%;
    height: 100%;
    background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% );
    transform: skewX(-25deg);
    transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

.intro:hover::after,
.category-card:hover::after {
    left: 150%;
}


.entry-title {
  padding-top: 12px;
}


/*
 * @CHANGELOG: Журнал выполненных работ для отчета заказчику
 *
 * v3.0 (12.12.2025):
 *  - ЗАДАЧА: Сверстать новую шапку.
 *  - РЕШЕНИЕ: Написаны и добавлены CSS- классы bootstrap и правила для шапки, обеспечивающие правильное отображение и интерактивность.
 *  - ЦЕННОСТЬ: Завершено визуальное оформление шапки.
 *
 */