/* Выравниваем Фото и Карточку сведений бок о бок в один ряд на ПК */
.top-story-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 25px;
    font-family: Arial, sans-serif;
    width: 100%;
}

@media (min-width: 768px) {
    .top-story-block {
        grid-template-columns: 1fr 1.3fr; /* Левая колонка фото, правая шире под два столбика */
    }
}

/* ГЛАВНЫЙ КОНТЕЙНЕР ШАПКИ: На мобилках выстраивает всё в один столбик */
.top-story-block {
    display: flex !important;
    flex-direction: column !important; /* По умолчанию для телефонов - всё друг под другом */
    gap: 15px !important;
    margin-bottom: 25px !important;
    font-family: Arial, sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ЛЕВЫЙ БЛОК (Фото кузова): На телефоне занимает 100% ширины экрана, как в приложении */
.car-photo-side {
    width: 100% !important;
    background: #fff !important;
    border-radius: 8px !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important; /* Идеальные пропорции автомобильного фото */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #666 !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    text-align: center !important;
    font-size: 14px !important;
}

/* ПРАВЫЙ БЛОК (Сведения): На телефоне тоже встает во всю ширину */
.car-info-header-side {
    width: 100% !important;
    background: #fff !important;
    padding: 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    border: 1px solid #eee !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.car-info-header-side h3 {
    color: #00a884 !important; /* Наш фирменный зеленый цвет из приложения */
    border-bottom: 2px solid #00a884 !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-size: 16px !important;
}

/* Внутренние два столбика сведений: на телефоне идут рядышком */
.summary-columns-container {
    display: flex !important;
    gap: 15px !important;
    width: 100% !important;
}

.summary-col-left, .summary-col-right {
    flex: 1 !important;
    width: 50% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.summary-col-left p, .summary-col-right p {
    font-size: 13px !important;
    color: #495057 !important;
    margin: 6px 0 !important;
    line-height: 1.4 !important;
    border-bottom: 1px dashed #f1f3f5 !important; 
    padding-bottom: 3px !important;
}

/* 🖥️ МЕДИА-ЗАПРОС ДЛЯ КОМПЬЮТЕРОВ (Экран шире 768px) */
@media (min-width: 768px) {
    .top-story-block {
        flex-direction: row !important; /* На ПК принудительно разворачиваем бок о бок в одну линию */
        gap: 20px !important;
    }
    .car-photo-side {
        width: 40% !important; /* На ПК фото занимает аккуратные 40% */
        max-width: 400px !important; /* Защита, чтобы фото не раздувало на огромных мониторах */
    }
    .car-info-header-side {
        width: 60% !important; /* На ПК сведения занимают оставшиеся 60% */
    }
}


/* Правый блок (Сведения): Убираем жесткую высоту, делаем ее авто! */
.car-info-header-side {
    width: 58% !important;
    background: #fff !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    border: 1px solid #eee !important;
    height: auto !important; /* Текст больше физически не сможет вывалиться наружу */
    min-height: 280px !important; /* Но держим минималку, чтобы красиво смотрелось с фото */
    box-sizing: border-box !important;
}

.car-info-header-side h3 {
    color: #00a884 !important; /* Твой фирменный зеленый цвет CarsHub */
    border-bottom: 2px solid #00a884 !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
}

/* ФЛЕКС-КОНТЕЙНЕР ДЛЯ РАЗДЕЛЕНИЯ НА ДВА ВНУТРЕННИХ СТОЛБИКА */
.summary-columns-container {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
}

.summary-col-left, .summary-col-right {
    flex: 1 !important;
    width: 50% !important;
    word-wrap: break-word !important; /* Если фраза слишком длинная, она аккуратно перенесется на новую строку */
    overflow-wrap: break-word !important;
}

.summary-col-left p, .summary-col-right p {
    font-size: 13px !important;
    color: #495057 !important;
    margin: 8px 0 !important;
    line-height: 1.4 !important;
    border-bottom: 1px dashed #f1f3f5 !important; 
    padding-bottom: 4px !important;
}









/* Контейнер для фотографии */
.car-photo-side {
    width: 100%;
    max-width: 320px;          /* Ограничиваем максимальную ширину карточки */
    display: flex;
    align-items: center;       /* Центрируем машину по вертикали */
    justify-content: center;   /* Центрируем машину по горизонтали */
    background: #ffffff;       /* Задаем чистый белый фон карточки */
    border-radius: 12px;       /* Мягкие скругленные углы */
    padding: 10px;             /* Внутренний аккуратный отступ */
    box-sizing: border-box;
}

/* Сама картинка машины */
.car-photo-img {
    width: 100%;               /* Занимает всю ширину контейнера */
    height: auto;              /* Сохраняем пропорции, чтобы BMW не растягивало */
    display: block;
    object-fit: contain;       /* Вписываем машину без обрезки краев */
    
    /* ЭТИ ДВЕ СТРОЧКИ УБИРАЮТ СЕРЫЙ ФОН И ДЕЛАЮТ ЕГО ПРОЗРАЧНЫМ: */
    mix-blend-mode: multiply;  
    background-color: transparent; 
}












/* Шапка навигации вкладок */
.carshub-tabs-nav {
    display: flex;
    background-color: #1a2a3a; /* Фирменный темный тон приложения */
    border-radius: 8px 8px 0 0;
    overflow-x: auto;
    border-bottom: 2px solid #111e2e;
    margin-top: 25px;
}

/* Кнопки переключения */
.tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: #a0b0c0;
    padding: 16px 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    outline: none;
    white-space: nowrap;
}

.tab-btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.03);
}

/* Активный статус вкладки (бирюзовая подсветка) */
.tab-btn.active {
    color: #00fa9a; /* Цвет активного текста */
    border-bottom: 3px solid #00fa9a; /* Линия активности снизу */
    background-color: rgba(0, 250, 154, 0.02);
}

/* Общий блок контента под вкладками */
.carshub-tabs-content {
    background: #ffffff;
    padding: 20px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
}

/* Скрытие вкладок по умолчанию */
.tab-panel {
    display: none;
}

/* Отображение активного таба */
.tab-panel.active {
    display: block;
    animation: fadeInTabAnimation 0.2s ease;
}

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

/* Стилизация списка запчастей */
.parts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.parts-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 15px;
}
.part-sku {
    font-weight: bold;
    color: #1a2a3a;
}





/* Выравнивание твоего SVG-значка и текста по одной горизонтальной линии */
.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* b2b-отступ между иконкой и текстом */
}

/* Базовые размеры и цвет иконки (когда вкладка не активна) */
.tab-svg-icon {
    width: 24px;  /* Точные пропорции под твой viewBox */
    height: 18px;
    color: #a0b0c0; /* Приглушенный сероватый цвет */
    transition: color 0.2s ease;
}

/* При наведении мышки текст и SVG одновременно загораются белым */
.tab-btn:hover {
    color: #ffffff;
}

/* 🔥 АВТОМАТИЧЕСКОЕ ОКРАШИВАНИЕ: Когда кнопка получает класс .active */
.tab-btn.active {
    color: #00fa9a; /* Текст загорается зелёным, и SVG-контуры мгновенно меняют цвет вслед за ним */
}




/* --- СТИЛИ ДЛЯ СТРОК КОМПЛЕКТАЦИИ --- */

/* Каждая строчка опции автомобиля */
.komplekt-row {
    display: flex;
    align-items: center;
    gap: 12px;                  /* Отступ между кодом и текстом */
    padding: 12px 14px;
    background: #f8f9fa;        /* Приятный светло-серый фон плашки */
    border-radius: 10px;        /* Аккуратное закругление углов */
    margin-bottom: 8px;         /* Отступ между строчками */
    border: 1px solid #e9ecef;  /* Тонкая рамка */
}

/* Код опции (например, S205A) */
.option-code {
    background: #e9ecef;
    color: #495057;
    font-family: 'Courier New', monospace; /* Моноширинный шрифт */
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;        /* Код никогда не перенесется */
}

/* Описание опции (текст) */
.option-desc {
    font-size: 14px;
    color: #212529;
    line-height: 1.3;
}

/* Изменяем вид скрытых под замок опций */
.locked-option {
    background: #fff3cd;        /* Мягкий желтоватый фон */
    border-color: #ffeeba;
    cursor: pointer;
    transition: background 0.2s ease;
}
.locked-option:hover {
    background: #ffeeba;
}

.option-desc-locked .lock-text {
    font-size: 14px;
    color: #664d03;
    font-weight: 600;
}


/* Находим общий контейнер, в котором лежит весь твой список опций, и ровняем его по центру */
#tab-options .komplekt-group, #tab-options .centered-options-flow {
    max-width: 700px;           /* Фиксируем ширину текстового блока, чтобы он не растягивался во весь экран */
    margin: 30px auto !important; /* Автоматические отступы слева и справа сдвинут его ровно по центру */
    padding: 0 15px;
    box-sizing: border-box;
}









/* Контейнер для меню подвкладок */
.sub-tabs-menu {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid #2d3748; /* Тёмная линия под цвет интерфейса */
    padding-bottom: 8px;
    justify-content: space-between;
}

/* Кнопка-плитка для мобильного интерфейса */
.sub-tab-btn {
    background: #1a202c; /* Тёмный фон под стать сайту */
    border: 1px solid #2d3748;
    border-radius: 8px;
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Иконка внутри кнопки */
.sub-tab-icon {
    font-size: 20px;
    display: block;
}

/* Текст под иконкой */
.sub-tab-text {
    font-size: 11px;
    color: #a0aec0; /* Серый текст для неактивных */
    font-weight: 500;
}

/* При наведении */
.sub-tab-btn:hover {
    background: #2d3748;
}

/* Активное состояние — ЧЁТКИЙ ЗЕЛЁНЫЙ */
.sub-tab-btn.sub-active {
    background: #1c3d27; /* Тёмно-зелёный благородный фон */
    border-color: #48bb78; /* Яркая зелёная граница */
}
.sub-tab-btn.sub-active .sub-tab-text {
    color: #48bb78; /* Сочный зелёный текст */
    font-weight: bold;
}

/* Кнопка рисков (оставляем предупреждающим оранжевым/красным, чтобы выделялась тревога) */
.sub-tab-btn.sub-tab-warning.sub-active {
    background: #4a2b15; /* Приглушенный коричнево-оранжевый */
    border-color: #ed8936; /* Оранжевая граница рисков */
}
.sub-tab-btn.sub-tab-warning.sub-active .sub-tab-text {
    color: #ed8936;
}





















/* ==========================================================================
   ПРОФЕССИОНАЛЬНЫЕ b2b СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ CARSHUB
   ========================================================================== */

/* Переменные для легкой смены зеленого цвета */
:root {
    --ch-green: #059669;
    --ch-green-hover: #047857;
    --ch-text-dark: #111827;
    --ch-text-gray: #6b7280;
}

/* Строгий хэдер сайта */
.ch-b2b-header {
    background: #fff;
    padding: 15px 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ch-b2b-logo {
    font-size: 22px;
    font-weight: 800;
    color: var(--ch-text-dark);
    letter-spacing: -0.5px;
}

.ch-b2b-logo span {
    color: var(--ch-green);
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    margin-left: 2px;
}

.ch-header-links {
    display: flex;
    gap: 25px;
    font-size: 13px;
    font-weight: 600;
    margin-left: auto; /* 🎯 ТОЧЕЧНО ВОЗВРАЩАЕМ ССЫЛКИ В ПРАВЫЙ УГОЛ ЭКРАНА */
}


.ch-header-links span {
    color: var(--ch-text-gray);
    cursor: pointer;
    transition: color 0.15s ease;
}

.ch-header-links span:hover {
    color: var(--ch-green);
}

/* Контейнер поиска — делаем его аккуратной узкой полосой (РАБОТАЕТ НА ПК) */
.ch-search-container {
    max-width: 460px; /* Сжали ширину до идеала */
    width: 100%;
    margin: 100px auto; /* Опустили чуть ниже хедера */
    padding: 0 15px;
}

/* Карточка поиска — ПОЛНОСТЬЮ СТИРАЕМ ТЯЖЕЛЫЙ БЕЛЫЙ БЛОК НА ПК */
.ch-search-card {
    background: transparent !important; /* Убрали белый фон */
    box-shadow: none !important;        /* Убрали массивную тень */
    padding: 0 !important;              /* Убрали раздутые отступы */
    text-align: center;
}

.ch-search-card h1 {
    color: var(--ch-text-dark);
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
}

.ch-search-card p {
    color: var(--ch-text-gray);
    font-size: 13px;
    margin: 0 0 25px 0;
    line-height: 1.4;
}

/* Форма ввода — плотная, без лишнего воздуха */
.ch-b2b-form {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Прижали элементы ближе друг к другу */
}

/* Инпут ввода VIN — делаем его изящной аккуратной строкой */
.ch-vin-input {
    width: 100%;
    box-sizing: border-box; /* 🎯 Выравниваем инпут */
    padding: 10px 15px;
    font-size: 15px;
    background: #fff; /* Сам инпут остается белым */
    border: 1px solid #cbd5e1; /* Сделали рамку тоньше */
    border-radius: 6px;
    outline: none;
    font-family: "SF Mono", SFMono-Regular, Consolas, monospace;
    letter-spacing: 2px; /* Буквы VIN теперь стоят свободно и красиво */
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02); /* Легкая, едва заметная тень под полем */
    transition: all 0.15s ease;
}

.ch-vin-input:focus {
    border-color: var(--ch-green);
    box-shadow: 0 0 0 3px rgba(5,150,105,0.08);
}

/* Рекламный разрыв Яндекса под инпутом — аккуратный и тонкий */
.ch-adv-banner-box {
    width: 100%;
    box-sizing: border-box; /* 🎯 Выравниваем баннер */
    min-height: 65px;
    background: #fff; /* Сделали белым в цвет инпута */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.01);
}

/* Кнопка проверки комплектации — собранная и строгая */
.ch-btn-submit {
    width: 100%;
    box-sizing: border-box; /* 🎯 Выравниваем кнопку */
    padding: 11px;
    font-size: 14px;
    background: var(--ch-green);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: background 0.15s ease;
    box-shadow: 0 2px 8px rgba(5,150,105,0.15);
}

/* Текст ошибки */
.ch-error-box {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #b91c1c;
    padding: 12px;
    border-radius: 4px;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    line-height: 1.4;
}

/* МОБИЛЬНАЯ АДАПТАЦИЯ (Перестраивает шапку на смартфонах) */
@media (max-width: 500px) {
    .ch-b2b-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 15px;
    }
    .ch-search-container {
        margin: 40px auto; /* На мобилке поднимаем чуть выше */
    }
}