/*
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 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
}

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

/* ===================================================================
 *  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%;
}

/* ===================================================================
 *  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;
}
.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;
}
.customs-calculator-rf .input-group {
    display: flex;
}
.customs-calculator-rf .input-group input {
    border-right: none;
    border-radius: 8px 0 0 8px;
}
.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;
}
/* Рисуем саму галочку (она изначально невидима) */
.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: var(--color-primary, #007bff); /* Используем переменную или цвет по умолчанию */
}
.car-card-title a:hover {
    text-decoration: underline;
}
.car-card-price {
    font-weight: 700;
    color: #212529;
}

/* --- Правая колонка: Характеристики --- */
.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: 800;
    margin-bottom: 0.5rem;
}
.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: -3px;
}

.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: 1.1rem;
    padding-right: 1rem;
}
.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; }


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