/* ==================== БАЗОВЫЕ СТИЛИ ==================== */
:root {
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --secondary-color: #6c757d;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --border-color: #e9ecef;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --transition: all 0.2s ease;

    /* Третье, более новое семейство токенов (избранное/бюджет/калькулятор) — раньше нигде
       не объявлялось как переменная, везде использовалось только через var(--x, #литерал),
       поэтому и не было переопределено для тёмной темы: --x просто никогда не существовал,
       CSS всегда брал предложенный тут же светлый fallback. Объявляем явно, чтобы у тёмной
       темы (html[data-theme="dark"] ниже) было что переопределить. */
    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --text: #222222;
    --text-2: #5b6570;
    --border: #e3e6ea;
    --accent: #d32f2f;

    /* Четвёртое семейство (--bg-body/--bg-card/--text-color) объявлялось ТОЛЬКО внутри
       [data-bs-theme="dark"], а правило `body { background-color: var(--bg-body) }` идёт
       ниже светлого `body { background-color: var(--bg-light) }` и перебивает его. В светлой
       теме переменной не существовало, объявление становилось невалидным — и страница
       оставалась вообще без фона и без цвета текста. */
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --text-color: #212529;
}

body {
    background-color: var(--bg-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
}


.custom-tooltip {
    --bs-tooltip-bg: #cc0000;
    --bs-tooltip-color: #fff;
    font-size: 1.2em;
}


/* ==================== ПАНЕЛЬ ФИЛЬТРОВ ====================
   Desktop (>=768px): обычная липкая (sticky) карточка в колонке слева — всегда "под рукой"
   при прокрутке списка, независимо от высоты экрана (шапка/подвал закреплены, скроллится
   только средняя часть с самими фильтрами).
   Mobile (<768px): та же самая панель превращается в шторку снизу (bottom sheet), скрытую за
   пределами экрана по умолчанию — открывается плавающей кнопкой "Фильтры" (filter-fab),
   которая видна всегда, из любой точки страницы. */
:root {
    --filter-accent: #1E4FE0;
    --filter-accent-b: #3E7BFF;
    --filter-ink: #12131a;
    --filter-ink-soft: #6b7280;
    --filter-line: #eceef2;
}
.filter-panel {
    background: var(--bg-white);
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(20,25,40,.05), 0 1px 2px rgba(20,25,40,.04);
    border: 1px solid var(--filter-line);
    margin-bottom: 24px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--filter-line);
    flex: none;
}
.filter-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Unbounded', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--filter-ink);
}
.filter-panel-icon {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--filter-accent), var(--filter-accent-b));
    color: #fff; font-size: 13px;
}
.filter-count-badge, .filter-fab-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--filter-accent); color: #fff; font-size: 11.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif;
}
.filter-panel-header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.filter-reset-btn {
    display: flex; align-items: center; gap: 6px; border: none; background: var(--bg-light);
    color: var(--filter-ink-soft); font-size: 12.5px; font-weight: 600; border-radius: 20px;
    padding: 7px 12px; cursor: pointer; transition: background .2s ease, color .2s ease;
    font-family: 'Manrope', sans-serif;
}
.filter-reset-btn:hover { background: #ffe9ea; color: #e5484d; }
.filter-panel-close {
    display: none; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg-light);
    align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--filter-ink);
    flex: none;
}
.filter-panel-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px 20px;
}
.filter-panel-scroll::-webkit-scrollbar {
    width: 5px;
}
.filter-panel-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.filter-panel-scroll::-webkit-scrollbar-thumb {
    background: #d7dbe3;
    border-radius: 4px;
}
.filter-panel-footer { display: none; }
.filter-backdrop {
    position: fixed; inset: 0; background: rgba(12,14,22,.5); backdrop-filter: blur(3px);
    z-index: 1040; opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.filter-backdrop.show { opacity: 1; pointer-events: auto; }
.filter-fab { display: none; }
.filter-panel h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 5px;
}
.filter-group {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}
.filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.filter-group h5 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
    border-bottom: none;
    display: block;
    padding-bottom: 0;
}
.filter-group .form-check {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-group .form-check-label {
    flex: 1;
    cursor: pointer;
}
.filter-group .badge {
    font-size: 0.7rem;
    background-color: var(--secondary-color);
    color: white;
    border-radius: 20px;
    padding: 2px 8px;
}
/* Текст под листингом каталога, собранный из выбранных фильтров (см. seoCatalogIntroText()) */
.catalog-seo-text {
    margin-top: 28px; padding: 18px 20px; border-radius: 14px;
    background: var(--premium-chip-bg, #F4F6FA); color: var(--premium-ink-soft, #5B6472);
    font-size: 13.5px; line-height: 1.6;
}
.catalog-seo-text p { margin: 0; }

/* Подпись к группе фильтров, действующей только для части выбранных стран */
.filter-scope-note {
    display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 4px; padding: 8px 10px;
    border-radius: 10px; background: var(--premium-chip-bg, #F4F6FA);
    font-size: 12px; line-height: 1.4; color: var(--premium-ink-soft, #5B6472);
}
.filter-scope-note i { margin-top: 2px; color: var(--premium-accent-a, #1E4FE0); }

/* Страны — мультивыбор галочками (см. left_sidebar.php / initCountryCheckboxes()) */
/* Страна — тот же компактный аккордеон-чекбокс, что и у остальных групп фильтра
   (Тип двигателя/КПП/Привод, см. checkboxItem() в catalog.js) */
.filter-group-accordion { margin-bottom: 1rem; }
.country-check .form-check-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.country-check-flag { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex: none; }
.country-check-count { font-size: .7rem; border-radius: 20px; padding: 2px 8px; flex: none; }
/* «Все страны» над списком стран (include/catalog/left_sidebar.php) */
.country-check-all { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border-color, #e6e8ee); }
.country-check-all .form-check-label { font-weight: 700; }
/* заголовок группы внутри списка фильтра (оценки: «Отличные / Хорошие / …») */
.filter-subgroup-title { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8b93a5; margin: 10px 0 4px; }
.filter-subgroup-title:first-child, .filter-search + .filter-subgroup-title { margin-top: 2px; }

/* Фасетный фильтр: вариант, который при текущем выборе в других группах не даёт ни одного
   авто — серый и недоступен для выбора (пока сам не будет снят выбор, из-за которого count=0). */
.filter-group .form-check.filter-option-empty { opacity: .45; }
.filter-group .form-check.filter-option-empty .form-check-label { cursor: not-allowed; }
.filter-group .form-check.filter-option-empty .badge { background-color: var(--text-muted, #adb5bd); }
.filter-group .range-inputs {
    display: flex;
    gap: 10px;
}
.filter-group .range-inputs .form-control {
    flex: 1;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}
.filter-group .range-inputs .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
}
.filter-search {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    font-size: 0.85rem;
    margin-bottom: 12px;
    width: 100%;
}
.filter-search:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
}
.filter-checkboxes {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 8px;
}
.filter-checkboxes::-webkit-scrollbar {
    width: 4px;
}
.filter-checkboxes::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 4px;
}
.filter-checkboxes::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 4px;
}


/* Фильтр-аккордеон */
.filter-panel .accordion {
    box-shadow: none;
}
.filter-panel .accordion-item {
    border: none;
    border-bottom: 1px solid var(--filter-line);
    margin-bottom: 0;
    background: transparent;
}
.filter-panel .accordion-item:last-child { border-bottom: none; }
.filter-panel .accordion-button {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 13px 4px;
    border-radius: 0 !important;
    background: transparent;
    color: var(--filter-ink);
    transition: color .2s ease;
    box-shadow: none !important;
}
.filter-panel .accordion-button i {
    width: 22px; text-align: center; color: var(--filter-ink-soft); transition: color .2s ease;
}
.filter-panel .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--filter-accent);
}
.filter-panel .accordion-button:not(.collapsed) i {
    color: var(--filter-accent);
}
.filter-panel .accordion-button:focus {
    box-shadow: none;
}
.filter-panel .accordion-button::after {
    transition: transform 0.3s ease;
    width: 14px; height: 14px; background-size: 14px;
}
.filter-panel .accordion-body {
    padding: 2px 4px 16px;
    background: transparent;
    border-radius: 0;
}
.filter-panel .form-check-input:checked {
    background-color: var(--filter-accent);
    border-color: var(--filter-accent);
}
.filter-panel .form-check-input:focus {
    border-color: var(--filter-accent);
    box-shadow: 0 0 0 3px rgba(30,79,224,.15);
}
.filter-panel .badge {
    font-weight: 600;
}
.range-inputs {
    display: flex;
    gap: 8px;
}
.range-inputs input {
    flex: 1;
}
.filter-checkboxes {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 8px;
}
.form-check {
    transition: background 0.2s ease;
    padding: 4px 8px;
    padding-left: 36px;
    border-radius: 4px;
}
.form-check:hover {
    background: rgba(0,123,255,0.05);
}

.badge.bg-light {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    font-weight: normal;
    font-size: 0.75rem;
    border: 1px solid #dee2e6;
}




/* ==================== СТРАНИЦА МАРОК ==================== */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    color: inherit;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.brand-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(13,110,253,0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.brand-card:hover {
    transform: scale(1.04);
    box-shadow: var(--shadow-lg);
}

.brand-card:hover::before {
    opacity: 0.05;
}

.brand-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.brand-card:hover img {
    transform: scale(1.05);
}

.brand-name {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    color: var(--text-dark);
}

.brand-country {
    font-size: 0.8rem;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

/* ==================== СТРАНИЦА МОДЕЛЕЙ ==================== */
.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

.model-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    color: inherit;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.model-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(13,110,253,0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.model-card:hover {
    transform: scale(1.04);
    box-shadow: var(--shadow-lg);
}

.model-card:hover::before {
    opacity: 0.05;
}

.model-card img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.model-card:hover img {
    transform: scale(1.05);
}

.model-name {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    color: var(--text-dark);
}

.model-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.country-btn {
    padding: 6px 12px;
    border-radius: 30px;
    background: var(--bg-light);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.country-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.02);
}

/* ==================== СТРАНИЦА ВЫБОРА СТРАНЫ ==================== */
.countries-grid {
    display: flex;
    /* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); */
    gap: 24px;
    padding: 20px 0;
    align-items: center;
    justify-content: space-between;
}

.country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    color: inherit;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: -webkit-fill-available;
}

.country-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(13,110,253,0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.country-card:hover {
    transform: scale(1.04);
    box-shadow: var(--shadow-lg);
}

.country-card:hover::before {
    opacity: 0.05;
}

.country-flag {
    max-width: 50px;
    max-height: 50px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}
.country-flag img {
    max-width: 50px;
    max-height: 50px;
}

.country-card:hover .country-flag {
    transform: scale(1.1);
}
.country-flag-all {
    display: flex; align-items: center; justify-content: center; width: 50px; height: 50px;
    border-radius: 50%; background: var(--premium-chip-bg, #F4F6FA); color: var(--premium-accent-a, #1E4FE0);
    font-size: 22px;
}
.country-card-all { border: 1px dashed var(--premium-line, #e4e8ef); }

.country-name {
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    color: var(--text-dark);
}



/* ==================== КНОПКИ ПЕРЕКЛЮЧЕНИЯ ВИДА ==================== */
.view-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.view-switcher .btn {
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
}

.view-switcher .btn:hover {
    background: var(--bg-light);
    transform: scale(1.01);
}

.view-switcher .btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* ==================== КАРТОЧКИ ==================== */
.car-card {
    background: var(--bg-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    border: 1px solid #ccc;
}
.car-card:hover {
    /* transform: scale(1.04); */
    box-shadow: var(--shadow-lg);
}
.car-images {
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #f1f3f5;
}
.car-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.car-card:hover .car-images img {
    transform: scale(1.05);
}
.car-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.car-base-title{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
}
.car-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.car-price {
    margin-bottom: 12px;
}
.car-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}
.car-details-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}
.car-details-item i {
    width: 18px;
    font-size: 0.9rem;
}
.car-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    justify-content: flex-start;
}
.car-prices {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    justify-content: space-between;
}
.price-fiz {
    font-size: 1.0rem;
    font-weight: 700;
}
.price-ur {
    font-size: 0.9rem;
    color: var(--secondary-color);
    display: none;
}
.price-fiz,
.price-ur,
.car-list-prices .price-fiz,
.car-list-prices .price-ur,
.car-prices .price-fiz,
.car-prices .price-ur {
    white-space: nowrap;
}

/* ==================== ВИД СПИСКОМ ==================== */
.car-list-item {
    display: flex;
    background: var(--bg-white);
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    cursor: pointer;
}
.car-list-item:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-md);
}
.car-list-image {
    width: 220px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    margin-right: 20px;
    flex-shrink: 0;
    background: #f1f3f5;
}
.car-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.car-list-item:hover .car-list-image img {
    transform: scale(1.05);
}
.car-list-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.car-list-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.car-list-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.car-list-specs span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.car-list-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.badge-info {
    background: var(--bg-light);
    color: var(--text-dark);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 500;
}
.car-list-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.action-btn {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.action-btn:hover {
    background: #f8f9fa;
    color: #0d6efd;
}
.action-btn.active {
    color: #dc3545;
}
/* Кратковременная зелёная вспышка на кнопке "Поделиться" после копирования ссылки в буфер
   обмена (см. shareCar() в js/catalog.js). */
.action-btn.share-copied, .premium-icon-btn.share-copied i {
    color: #198754 !important;
}
.car-list-prices {
    text-align: right;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}
.car-list-price-fiz {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline dotted;
}
.car-list-price-ur {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-top: 4px;
}

/* ==================== ТАБЛИЦА ==================== */
.table-view {
    background: var(--bg-white);
    border-radius: 16px;
    overflow: auto;
    box-shadow: var(--shadow-sm);
}
.table-view table {
    margin-bottom: 0;
    width: 100%;
}
.table-view th {
    background-color: var(--bg-light);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    padding: 12px;
}
.table-view td {
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}
.table-view tr {
    cursor: pointer;
    transition: var(--transition);
}
.table-view tr:hover {
    background-color: rgba(13,110,253,0.05);
}
.table-view img {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 8px;
}
.table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.table-actions {
    white-space: nowrap;
    text-align: center;
}
.table-actions .action-btn {
    background: none;
    border: none;
    padding: 6px 8px;
    border-radius: 30px;
    font-size: 0.9rem;
    color: var(--secondary-color);
    cursor: pointer;
    transition: var(--transition);
    margin: 0 2px;
}
.table-actions .action-btn:hover {
    background: var(--bg-light);
    color: var(--primary-color);
}
.table-actions .favorite-btn.active {
    color: #dc3545;
}


/* Основные кнопки действий */
.consult-btn, .details-btn {
    font-weight: 500;
    white-space: nowrap;
}
/* Скрываем текст у второстепенных, если места мало (опционально) */
.action-text {
    display: inline;
}
@media (max-width: 768px) {
    .consult-btn .action-text, .details-btn .action-text {
        display: none; /* на маленьких экранах только иконки */
    }
}
.btn-dop-actions{width: 100%;
    margin-top:10px;
    display: flex;
    align-items: center;
    justify-content: space-between;}
/* ========== Основная кнопка "Консультация" ========== */
.btn-consult-primary {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 18px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    width: 100%;
}
.btn-consult-primary:hover {
    background: linear-gradient(135deg, #22903b 0%, #1aa179 100%);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.5);
    transform: scale(1.01);
    color: #fff;
}
.btn-consult-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.4);
}
/* Пульсация для привлечения внимания */
@keyframes pulse-consult {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
.btn-consult-primary {
    animation: pulse-consult 2s infinite;
}
@media (max-width: 576px) {
    .btn-consult-primary,
    .btn-details-primary {
        padding: 6px 12px;
        font-size: 0.8rem;
        gap: 4px;
    }
    .btn-dop-actions .btn {
        padding: 4px 8px;
    }
}
.btn-consult-primary-sm {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
    transition: all 0.2s;
}

/* ========== Основная кнопка "Подробнее" ========== */
.btn-details-primary {
    background: transparent;
    border: 2px solid #0d6efd;
    color: #0d6efd;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 18px;
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.15);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    text-decoration: none;
    width: 100%;
    margin-top: 10px;
}
.btn-details-primary:hover {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.35);
    transform: scale(1.01);
    text-decoration: none;
}
.btn-details-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.2);
}

/* Улучшаем вид popover */
.popover {
    font-size: 0.8rem;
    max-width: 180px;
}


/* ==================== ЭФФЕКТ НАВЕДЕНИЯ ДЛЯ ИЗОБРАЖЕНИЙ ==================== */
.car-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.car-image-main, .car-image-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.car-image-hover {
    opacity: 0;
}

.car-image-wrapper:hover .car-image-main {
    opacity: 0;
}

.car-image-wrapper:hover .car-image-hover {
    opacity: 1;
}

/* ==================== ПАНЕЛЬ СОРТИРОВКИ ==================== */
.sort-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    align-items: center;
}

.sort-btn {
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 0.85rem;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    cursor: pointer;
}

.sort-btn:hover {
    background: var(--bg-light);
    transform: scale(1.01);
}

.sort-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ==================== ЗАГРУЗЧИК ==================== */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 40px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==================== ХЛЕБНЫЕ КРОШКИ ==================== */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 24px;
}

.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

/* ==================== АДАПТИВНОСТЬ ==================== */
@media (max-width: 767.98px) {
    .filter-col { margin-bottom: 0; }

    /* Панель фильтров становится шторкой снизу (bottom sheet): скрыта под экраном, пока
       не открыта кнопкой filter-fab. Так фильтр не занимает место в ленте и при этом
       доступен одним тапом из любой точки страницы, независимо от высоты экрана. */
    .filter-panel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: auto;
        max-height: 88vh;
        margin-bottom: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(110%);
        transition: transform .35s cubic-bezier(.16,1,.3,1);
        z-index: 1050;
        box-shadow: 0 -12px 40px rgba(10,14,22,.25);
    }
    .filter-panel.is-open {
        transform: translateY(0);
    }
    .filter-panel-header { padding: 14px 16px; }
    .filter-panel-header::before {
        content: '';
        position: absolute;
        top: 8px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 3px; background: var(--filter-line);
    }
    .filter-panel-header { position: relative; padding-top: 20px; }
    .filter-panel-close { display: flex; }
    .filter-panel-scroll { padding: 14px 16px 16px; }
    .filter-panel-footer {
        display: block;
        flex: none;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--filter-line);
        background: var(--bg-white);
    }
    .filter-apply-btn {
        width: 100%; border: none; border-radius: 14px; padding: 14px;
        background: linear-gradient(135deg, var(--filter-accent), var(--filter-accent-b));
        color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer;
        font-family: 'Manrope', sans-serif; transition: transform .2s ease;
    }
    .filter-apply-btn:active { transform: scale(.98); }

    /* Плавающая кнопка — открывает шторку с фильтрами из любой точки экрана. */
    .filter-fab {
        display: flex; align-items: center; gap: 8px;
        position: fixed; right: 16px; bottom: 22px; z-index: 1030;
        border: none; border-radius: 30px; padding: 13px 20px;
        background: linear-gradient(135deg, var(--filter-accent), var(--filter-accent-b));
        color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
        font-family: 'Manrope', sans-serif;
        box-shadow: 0 10px 24px -6px rgba(30,79,224,.55);
        transition: transform .2s ease;
    }
    .filter-fab:active { transform: scale(.96); }
    .filter-fab-badge { background: #fff; color: var(--filter-accent); }

    .brands-grid,
    .models-grid,
    .countries-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 16px;
        padding: 15px 0;
    }

    .brand-card img,
    .model-card img {
        width: 80px;
        height: 80px;
    }

    .country-flag {
        font-size: 3rem;
    }

    .brand-card,
    .model-card,
    .country-card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .brands-grid,
    .models-grid,
    .countries-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .brand-name,
    .model-name,
    .country-name {
        font-size: 0.85rem;
    }
    .car-list-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .car-list-image {
        width: 100%;
        height: 160px;
        margin-right: 0;
        margin-bottom: 12px;
    }
    .car-list-info {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .car-list-prices {
        text-align: left;
        margin-top: 8px;
    }
    .table-view {
        overflow-x: auto;
    }
    .sort-buttons {
        justify-content: center;
    }
}

/* ==================== МОДАЛЬНЫЕ ОКНА ==================== */
.modal-content {
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

.modal-header {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
}

.modal-title {
    font-weight: 600;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

/* ==================== МОДАЛЬНОЕ ОКНО ДЕТАЛЬНОГО ПРОСМОТРА ==================== */
.car-modal-images {
    margin-bottom: 20px;
    position: relative;
}
.car-modal-images .owl-carousel .owl-item img {
    border-radius: 12px;
    cursor: pointer;
}
.car-modal-info {
    padding: 0 10px;
}
.car-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.car-modal-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    background: var(--bg-light);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.car-modal-specs-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.car-modal-description {
    background: var(--bg-light);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    line-height: 1.5;
}
.price-details {
    background: var(--bg-light);
    padding: 16px;
    border-radius: 12px;
}
.price-details table {
    width: 100%;
    margin-bottom: 0;
}
.price-details td {
    padding: 8px 0;
    border: none;
}
.price-details td:last-child {
    text-align: right;
    font-weight: 500;
}
.price-details .total {
    border-top: 2px solid var(--border-color);
    padding-top: 8px;
    font-weight: 700;
    font-size: 1.1rem;
}

/* ==================== КАРУСЕЛЬ В МОДАЛЬНОМ ОКНЕ ==================== */
.car-modal-carousel {
    position: relative;
}
.car-modal-carousel .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
.car-modal-carousel .owl-nav button {
    pointer-events: auto;
    background: rgba(0,0,0,0.5) !important;
    color: white !important;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.car-modal-carousel .owl-nav button:hover {
    background: rgba(0,0,0,0.8) !important;
}
.car-modal-carousel .owl-nav .owl-prev {
    margin-left: 10px;
}
.car-modal-carousel .owl-nav .owl-next {
    margin-right: 10px;
}
.car-modal-carousel .owl-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.car-modal-carousel .owl-dot {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transition: all 0.2s ease;
}
.car-modal-carousel .owl-dot.active {
    background: white;
    width: 20px;
    border-radius: 10px;
}
/* Прежняя фиксация z-index:1060 !important здесь перебивала переменную --fancybox-zIndex
   (см. её объявление у .qvm-backdrop выше) и не давала поднять фотогалерею выше qvm-модалки
   быстрого просмотра (1080) — из-за этого fancybox открывался визуально под ней. Больше
   не переопределяем z-index здесь — библиотека сама берёт значение из переменной. */

/* Стилизация стрелок карусели Owl Carousel */
.car-modal-images .owl-carousel {
    position: relative;
}
.car-modal-images .owl-nav button.owl-prev,
.car-modal-images .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.car-modal-images .owl-nav button.owl-prev:hover,
.car-modal-images .owl-nav button.owl-next:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}
.car-modal-images .owl-nav button.owl-prev {
    left: 10px;
}
.car-modal-images .owl-nav button.owl-next {
    right: 10px;
}
.car-modal-images .owl-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
}
.car-modal-images .owl-dot span {
    background: rgba(255,255,255,0.5);
}
.car-modal-images .owl-dot.active span {
    background: #fff;
}
.car-modal-images .owl-carousel .owl-item img {
    border-radius: 12px;
    cursor: pointer;
}
@media (max-width: 768px) {
    .car-modal-images .owl-carousel .owl-item img {
    }
}

/* ==================== КНОПКА СБРОСА ФИЛЬТРОВ ==================== */
#reset-filters {
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 0.85rem;
    transition: var(--transition);
}

#reset-filters:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ==================== СЕЛЕКТОР ЛИМИТА ==================== */
.limit-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.limit-selector label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.limit-selector select {
    width: auto;
    min-width: 70px;
    border-radius: 30px;
    padding: 5px 12px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Мини-сравнение в каталоге (попап) */
.mini-compare-popup {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 10px;
    z-index: 1050;
    display: none;
    width: 250px;
}
.mini-compare-popup .car-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
}
.mini-compare-popup .car-mini img {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
}
.mini-compare-popup .car-mini-name {
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
}
.mini-compare-popup .remove-mini {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 5px;
}
.mini-compare-popup .car-mini img {
    width: 50px;
    object-fit: cover;
    border-radius: 4px;
}
/* Элемент списка в мини-сравнении */
.mini-compare-popup .car-mini {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 25px 4px 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.mini-compare-popup .car-mini:hover {
    background-color: #e9ecef;
}
.mini-compare-popup .car-mini a.car-mini-name {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}
.mini-compare-popup .car-mini a.car-mini-name:hover {
    text-decoration: underline;
}
/* Кнопка удаления */
.mini-compare-popup .car-mini .remove-mini {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 5px;
}
.mini-compare-popup .car-mini .remove-mini:hover {
    color: #a71d2a;
}


/* Тёмная тема */
[data-bs-theme="dark"] {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --text-color: #e0e0e0;
    --border-color: #2c2c2c;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .filter-panel,
[data-bs-theme="dark"] .brand-card,
[data-bs-theme="dark"] .model-card,
[data-bs-theme="dark"] .country-card {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-bs-theme="dark"] .filter-panel-header,
[data-bs-theme="dark"] .filter-panel-footer,
[data-bs-theme="dark"] .filter-panel .accordion-item {
    border-color: #333;
    background: transparent;
}
[data-bs-theme="dark"] .filter-panel-footer { background-color: #1e1e1e; }
[data-bs-theme="dark"] .filter-panel-title,
[data-bs-theme="dark"] .filter-panel .accordion-button {
    color: #e0e0e0;
}
[data-bs-theme="dark"] .filter-reset-btn,
[data-bs-theme="dark"] .filter-panel-close {
    background: #2a2a2a;
    color: #cfcfcf;
}
[data-bs-theme="dark"] .filter-panel-header::before {
    background: #3a3a3a;
}
body {
    background-color: var(--bg-body);
    color: var(--text-color);
    transition: background-color 0.3s;
}
.car-card, .table-view, .brand-card, .model-card, .country-card {
    background: var(--bg-card);
}
/* Скелетон */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}





/* car.php */
.car-detail-page { padding: 20px 0; }
.car-detail-images { margin-bottom: 30px; }
.car-detail-info { background: var(--bg-card); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); }
.price-detail { background: var(--bg-light); border-radius: 12px; padding: 16px; margin-top: 20px; }
.recommendations { margin-top: 40px; }
.similar-cars-container { display: flex; flex-direction: column; gap: 16px; }
.car-list-item { cursor: pointer; }
.car-description{max-height: 300px; overflow-y: auto;}

/* ==================== 4-Й ВИД КАТАЛОГА: "Премиум" ====================
   Адаптировано из TMP/elements/cars/includes/card1.php ("Вариант 1 — Премиум минимал").
   Классы переименованы с префиксом premium- во избежание конфликтов с остальным сайтом;
   вложенные (.ph/.ph-a/.ph-b/.val/.cur/.sep/.act) всегда используются через descendant-селектор
   от переименованного родителя, как и в исходнике — глобально не текут. */
:root {
    --premium-ink: #0B1220;
    --premium-ink-soft: #5B6472;
    --premium-line: #E4E8EF;
    --premium-bg: #FFFFFF;
    --premium-accent-a: #1E4FE0;
    --premium-accent-b: #3E7BFF;
    --premium-price: #E23B4F;
    --premium-chip-bg: #F4F6FA;
}

.premium-view { display: flex; flex-direction: column; gap: 24px; }

.premium-card {
    background: var(--premium-bg);
    border-radius: 22px;
    padding: 20px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 28px;
    box-shadow: 0 1px 0 rgba(16,24,40,.03), 0 20px 45px -20px rgba(16,24,40,.12);
    border: 1px solid #EEF0F4;
    position: relative;
    overflow: hidden;
    transition: box-shadow .45s ease, transform .45s ease;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    color: var(--premium-ink);
}
.premium-card:hover { box-shadow: 0 1px 0 rgba(16,24,40,.03), 0 30px 60px -20px rgba(30,79,224,.22); transform: scale(1.01); }

.premium-photo { position: relative; border-radius: 16px; overflow: hidden; background: #0d1117; height: 260px; }
.premium-photo .ph {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    transition: opacity .5s cubic-bezier(.4,0,.2,1), filter .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.premium-photo .ph-a { opacity: 1; filter: blur(0) saturate(1); transform: scale(1.02); z-index: 2; }
.premium-photo .ph-b { opacity: 0; filter: blur(10px) saturate(1.15); transform: scale(1.12); z-index: 1; }
.premium-card:hover .premium-photo .ph-a { opacity: 0; filter: blur(10px) saturate(1.15); transform: scale(1.12); }
.premium-card:hover .premium-photo .ph-b { opacity: 1; filter: blur(0) saturate(1); transform: scale(1.02); }
.premium-photo .no-image { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8a93a3; background: #0d1117; }

.premium-top-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 4; }
.premium-icon-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.15); transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s;
    padding: 0;
}
.premium-icon-btn:hover { transform: scale(1.1) rotate(-4deg); }
.premium-icon-btn i { font-size: 14px; color: var(--premium-ink); }
.premium-icon-btn.active i { color: #ff3b5c; }

.premium-info { padding: 6px 6px 0 0; display: flex; flex-direction: column; min-width: 0; }
.premium-info h2 { font-family: 'Unbounded', sans-serif; font-size: 21px; font-weight: 700; margin: 2px 0 6px; letter-spacing: -.01em; }
.premium-info h2 span { font-weight: 500; color: var(--premium-ink-soft); font-size: 17px; }
.premium-meta { color: var(--premium-ink-soft); font-size: 13.5px; display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.premium-meta .sep { opacity: .4; }

.premium-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.premium-chip {
    display: flex; align-items: center; gap: 7px; background: var(--premium-chip-bg); border-radius: 10px;
    padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--premium-ink);
    transition: transform .25s ease, background .25s ease;
}
.premium-chip:hover { transform: scale(1.02); background: #EAF0FF; }
.premium-chip i { color: var(--premium-accent-a); width: 15px; text-align: center; }

.premium-price { border-top: 1px solid var(--premium-line); padding-top: 14px; margin-top: auto; }
/* Цена и CTA "Подробнее" — на одной линии: цена слева, кнопка справа. */
.premium-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.premium-price-orig { font-size: 13.5px; color: var(--premium-ink-soft); margin-bottom: 4px; }
.premium-price-rub { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.premium-price-rub .val { font-family: 'Unbounded', sans-serif; font-size: 26px; font-weight: 700; color: var(--premium-price); letter-spacing: -.01em; }
.premium-price-rub .cur { font-size: 14px; color: var(--premium-ink-soft); font-weight: 600; }

.premium-price-link {
    display: flex; width: fit-content; align-items: center; gap: 5px; background: none; border: none; padding: 0;
    font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer;
    color: var(--premium-accent-a); margin-top: 6px; letter-spacing: .01em;
}
.premium-price-link:hover { text-decoration: underline; }

/* Вспышка сердечек при добавлении в избранное (см. toggleFavorite() в catalog.js) — работает
   на всех 4 видах каталога, т.к. toggleFavorite() общий. */
.heart-fx { position: absolute; pointer-events: none; font-size: 16px; z-index: 2000; }

.premium-cta {
    position: relative; overflow: hidden; border: none; border-radius: 14px; padding: 14px 22px;
    background: linear-gradient(135deg, var(--premium-accent-a), var(--premium-accent-b));
    color: #fff; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px;
    display: flex; width: fit-content; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(30,79,224,.55); text-decoration: none;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.premium-cta:hover { transform: scale(1.02); box-shadow: 0 16px 30px -8px rgba(30,79,224,.6); color: #fff; }

.premium-actions { display: flex; gap: 22px; padding: 16px 8px 4px; border-top: 1px solid var(--premium-line); margin-top: 16px; flex-wrap: wrap; }
.premium-actions .act {
    display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--premium-ink-soft);
    cursor: pointer; text-align: center; font-weight: 600; transition: color .25s; background: none; border: none;
    text-decoration: none;
}
.premium-actions .act i { font-size: 16px; transition: transform .3s cubic-bezier(.34,1.56,.64,1); color: var(--premium-ink-soft); }
.premium-actions .act:hover { color: var(--premium-accent-a); }
.premium-actions .act:hover i { transform: scale(1.1); color: var(--premium-accent-a); }
.premium-actions .act.active { color: var(--premium-accent-a); }
.premium-actions .act.active i { color: var(--premium-accent-a); }

@media (max-width: 980px) {
    .premium-card { grid-template-columns: 1fr; }
    .premium-photo { height: 220px; }
}
@media (max-width: 480px) {
    .premium-card { padding: 14px; border-radius: 18px; }
    .premium-photo { height: 190px; }
    .premium-actions { gap: 14px 18px; justify-content: center; }
}

/* ==================== «РАСШИРЕННЫЙ» (бывший «Премиум») и «СПИСОК»: адаптив, цена, подписанные кнопки ====================
   Раскладка карточки зависит от ширины самого списка (контейнер .premium-view), а не окна: слева фильтры, и при окне уже ~1400px
   колонка с текстом сжималась до 200px, кнопка «Подробнее» вылезала, значки наезжали друг на друга. */
.premium-view { container-type: inline-size; container-name: pv; }
.premium-card { grid-template-columns: minmax(240px, 40%) minmax(0, 1fr); gap: 24px; }
.premium-photo { height: auto; min-height: 260px; }
.premium-info { min-width: 0; }
.premium-info h2 { overflow-wrap: anywhere; }
/* цена в рублях и цена в стране лота — одним блоком, почти вплотную; зона наведения/клика (FEATURE_LISTING_PREMIUM_PRICE_POPOVER) */
.premium-price-row { flex-wrap: wrap; gap: 10px 16px; margin-bottom: 0; }
.premium-price-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; width: fit-content; max-width: 100%; }
.premium-price-main .premium-price-orig { margin: 0; line-height: 1.3; }
.premium-price-main .premium-price-rub { gap: 0 8px; }
.premium-price-main .premium-price-rub .val { line-height: 1.15; }
.premium-price-main[data-pop] { cursor: pointer; padding: 6px 10px; margin: -6px -10px; border-radius: 12px; transition: background .2s; }
.premium-price-main[data-pop]:hover, .premium-price-main[data-pop]:focus-visible { background: var(--premium-chip-bg, #F4F6FA); outline: none; }
.premium-price-i { align-self: center; font-size: 13px; color: var(--premium-ink-soft, #5B6472); opacity: .65; transition: color .2s, opacity .2s; }
.premium-price-main[data-pop]:hover .premium-price-i { color: var(--premium-accent-a, #1E4FE0); opacity: 1; }
/* четыре действия — ровной сеткой, подписи переносятся, а не расползаются */
.premium-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 0 0; }
.premium-actions .act { padding: 8px 4px; border-radius: 12px; line-height: 1.25; transition: color .25s, background .25s; }
.premium-actions .act:hover { background: var(--premium-chip-bg, #F4F6FA); }

@container pv (max-width: 860px) {
    .premium-card { grid-template-columns: minmax(220px, 40%) minmax(0, 1fr); gap: 18px; padding: 16px; border-radius: 20px; }
    .premium-photo { min-height: 220px; }
    .premium-info h2 { font-size: 18px; }
    .premium-info h2 span { font-size: 15px; }
    .premium-meta { margin-bottom: 12px; }
    .premium-chips { gap: 6px; margin-bottom: 14px; }
    .premium-chip { padding: 6px 10px; font-size: 12.5px; }
    .premium-price-rub .val { font-size: 22px; }
    .premium-cta { padding: 12px 18px; font-size: 14px; }
}
@container pv (max-width: 680px) {
    .premium-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .premium-photo { min-height: 0; aspect-ratio: 16 / 9; max-height: 320px; }
    .premium-info { padding: 0; }
    .premium-cta { width: 100%; justify-content: center; }
    .premium-price-row { align-items: stretch; }
    .premium-price-main { width: 100%; }
}
@container pv (max-width: 420px) {
    .premium-card { padding: 12px; border-radius: 18px; }
    .premium-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .premium-price-rub .val { font-size: 20px; }
}
@supports not (container-type: inline-size) {
    @media (max-width: 1280px) {
        .premium-card { grid-template-columns: minmax(0, 1fr); }
        .premium-photo { min-height: 0; height: 240px; }
        .premium-cta { width: 100%; justify-content: center; }
    }
}

/* «Список»: кнопки действий с подписями (FEATURE_LISTING_LIST_LABELS) */
.car-actions-lbl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.car-actions-lbl .action-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; white-space: nowrap;
    border: 1px solid var(--premium-line, #E4E8EF); background: var(--bg-white, #fff); color: var(--premium-ink-soft, #5B6472);
    font: 700 12.5px/1.2 'Manrope', sans-serif; text-decoration: none; transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.car-actions-lbl .action-btn i { font-size: 13px; color: var(--premium-accent-a, #1E4FE0); }
.car-actions-lbl .action-btn:hover { border-color: var(--premium-accent-a, #1E4FE0); color: var(--premium-accent-a, #1E4FE0); background: var(--premium-chip-bg, #F4F6FA); }
.car-actions-lbl .favorite-btn.active { color: #dc3545; border-color: rgba(220, 53, 69, .45); }
.car-actions-lbl .favorite-btn.active i { color: #dc3545; }
.car-actions-lbl .action-btn.share-copied { color: #198754 !important; border-color: #198754; }
.car-actions-lbl .action-btn.share-copied i { color: #198754; }
.car-actions-lbl .action-primary {
    margin-left: auto; border-color: transparent; color: #fff;
    background: linear-gradient(135deg, var(--premium-accent-a, #1E4FE0), var(--premium-accent-b, #3E7BFF)); box-shadow: 0 8px 18px -8px rgba(30, 79, 224, .55);
}
.car-actions-lbl .action-primary i { color: #fff; }
.car-actions-lbl .action-primary:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--premium-accent-a, #1E4FE0), var(--premium-accent-b, #3E7BFF)); transform: scale(1.03); }
@media (max-width: 575.98px) { .car-actions-lbl .action-primary { margin-left: 0; } }

/* ==================== ЕДИНЫЙ ВИД МОДАЛОК (быстрый просмотр / цена / заявка) ====================
   Адаптировано из TMP/elements/cars — но только внутреннее содержимое (.modal-body), сама
   "рамка" модалки (открытие/закрытие/фон) остаётся штатной Bootstrap (.modal/.modal-dialog/
   .modal-content) — переопределять сам класс .modal нельзя, он используется по всему сайту. */
/* Каркас модалки (задник + окно) — свои классы с префиксом qvm-, чтобы не конфликтовать
   с классами .modal/.modal-backdrop/.modal-body/.btn-dark/.btn-light из Bootstrap,
   которые используются в других местах сайта (например #historyModal). */
/* Fancybox (открывается кликом по фото внутри qvm-modal, см. initFullscreenGallery() в
   catalog.js) по умолчанию всплывает на z-index:1050 — ниже качмодалки быстрого просмотра
   (1080), поэтому галерея открывалась визуально ПОД ней. Поднимаем через штатную переменную
   библиотеки (--fancybox-zIndex), выше самого верхнего оверлея сайта (qvm/photo-request: 1080). */
:root { --fancybox-zIndex: 2100; }

.qvm-backdrop {
    position: fixed; inset: 0; background: rgba(10,12,20,.55); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 1080;
    opacity: 0; pointer-events: none; transition: opacity .3s ease; padding: 32px 16px;
}
.qvm-backdrop.show { opacity: 1; pointer-events: auto; }
.qvm-modal {
    display: none; background: #fff; border-radius: 22px; width: 100%; max-width: 640px;
    max-height: 88vh; overflow: hidden; box-shadow: 0 40px 80px -20px rgba(0,0,0,.4);
    transform: translateY(24px) scale(.97); opacity: 0;
    transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease;
    flex-direction: column;
}
.qvm-backdrop.show .qvm-modal.active { display: flex; transform: translateY(0) scale(1); opacity: 1; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between; padding: 22px 26px;
    border-bottom: 1px solid var(--premium-line); flex: none;
}
.modal-head h3 { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; margin: 0; }
.modal-close {
    width: 34px; height: 34px; border-radius: 50%; border: none; background: #F1F3F7; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .2s, transform .3s; flex: none;
}
.modal-close:hover { background: #E7EBF2; transform: rotate(90deg); }
.modal-close svg { width: 15px; height: 15px; }
.qvm-body { padding: 22px 26px; overflow-y: auto; }
.modal-foot { display: flex; gap: 12px; padding: 18px 26px; border-top: 1px solid var(--premium-line); flex: none; background: #FBFBFD; }
.modal-foot button {
    flex: 1; border: none; border-radius: 12px; padding: 14px 18px; font-weight: 700; font-size: 14px;
    cursor: pointer; font-family: 'Manrope', sans-serif; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.qvm-btn-dark { background: var(--premium-ink); color: #fff; }
.qvm-btn-dark:hover { background: #1c2537; transform: scale(1.02); }
.qvm-btn-light { background: #EEF1F6; color: var(--premium-ink); }
.qvm-btn-light:hover { background: #E3E7EF; transform: scale(1.02); }
@media (max-width: 640px) {
    .qvm-modal { max-width: 94vw; border-radius: 18px; }
    .modal-head, .qvm-body, .modal-foot { padding-left: 16px; padding-right: 16px; }
    .modal-foot { flex-direction: column; }
}

/* Модалка "Подробно о комплектации" (include/catalog/complectation_modal.php) — механика та
   же, что у обычных Bootstrap-модалок сайта, а .modal-head/.qvm-body/.modal-foot внутри неё
   дают ту же стилистику, что у "Быстрого просмотра" — тут только форма самого .modal-content
   (скругления/тень), т.к. Bootstrap задаёт на него свои. */
.qvm-style-content { border-radius: 22px; border: none; box-shadow: 0 40px 80px -20px rgba(0,0,0,.4); overflow: hidden; }
.qvm-style-content .modal-head { border-radius: 22px 22px 0 0; }
@media (max-width: 640px) {
    .qvm-style-content { border-radius: 18px; }
    .qvm-style-content .modal-head { border-radius: 18px 18px 0 0; }
}

.qv-gallery { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 20px; background: #0d1117; }
.qv-gallery .owl-carousel .item { height: 300px; }
.qv-gallery .owl-carousel .item img { width: 100%; height: 300px; object-fit: cover; display: block; }
.qv-gallery .owl-nav button.owl-prev, .qv-gallery .owl-nav button.owl-next {
    position: absolute !important; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50% !important;
    background: rgba(10,14,22,.45) !important; color: #fff !important; display: flex; align-items: center; justify-content: center;
    font-size: 18px !important; margin: 0 !important; transition: background .25s;
}
.qv-gallery .owl-nav button.owl-prev { left: 12px; } .qv-gallery .owl-nav button.owl-next { right: 12px; }
.qv-gallery .owl-nav button:hover { background: rgba(10,14,22,.75) !important; }
.qv-gallery .owl-dots { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; z-index: 5; }
.qv-gallery .owl-dots .owl-dot span { background: rgba(255,255,255,.45) !important; width: 6px; height: 6px; margin: 0 3px; }
.qv-gallery .owl-dots .owl-dot.active span { background: #fff !important; width: 18px !important; border-radius: 5px !important; }

/* Аукционный лист (открытые аукционы stats/main, AUCTION_TYPE = 2) — выводится под
   характеристиками на всю ширину модалки, отдельно от карусели фото. */
.qv-auction-sheet { margin: 20px 0; }
.qv-auction-sheet img { width: 100%; display: block; border-radius: 16px; }
.qv-auction-legend { margin-top: 16px; }
.qv-auction-legend h4 { font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--premium-ink); }
.qv-auction-legend p { font-size: 13.5px; line-height: 1.9; color: var(--premium-ink-soft); margin: 0 0 14px; }
.qv-auction-legend p strong { color: var(--premium-ink); font-weight: 700; margin-right: 4px; }

.spec-table { display: flex; flex-direction: column; }
.spec-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--premium-line); font-size: 14.5px; }
.spec-row:last-of-type { border-bottom: none; }
.spec-row .k { color: var(--premium-ink-soft); }
.spec-row .v { font-weight: 700; text-align: right; }
.spec-row.total { padding-top: 15px; margin-top: 6px; border-top: 2px solid var(--premium-ink); border-bottom: none; }
.spec-row.total .k { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--premium-ink); }
.spec-row.total .v { font-family: 'Unbounded', sans-serif; font-size: 19px; color: var(--premium-price); }

.pd-section-title { font-size: 12.5px; font-weight: 700; color: var(--premium-ink-soft); text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 12px; }
.pd-tabs { display: flex; background: #F1F3F7; border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.pd-tab { flex: 1; text-align: center; padding: 9px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--premium-ink-soft); transition: all .25s ease; border: none; background: none; }
.pd-tab.active { background: var(--premium-ink); color: #fff; }
.pd-rows { display: none; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--premium-line); }
.pd-rows.active { display: flex; }
.pd-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; font-size: 13.5px; background: #fff; }
.pd-row:nth-child(even) { background: #FAFBFD; }
.pd-row .k { color: var(--premium-ink-soft); font-weight: 500; }
.pd-row .v { font-weight: 700; }
.pd-row.pd-total { background: var(--premium-ink) !important; }
.pd-row.pd-total .k { color: #fff; font-family: 'Unbounded', sans-serif; font-weight: 700; }
.pd-row.pd-total .v { color: #5EEFA0; font-family: 'Unbounded', sans-serif; font-size: 18px; }

.fx-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fx-title svg { width: 15px; height: 15px; color: var(--premium-accent-a); }
.fx-note { font-size: 12.5px; color: var(--premium-ink-soft); margin: 0 0 14px; }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-item { display: flex; align-items: center; justify-content: space-between; background: #F7F8FB; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.fx-item .code { font-weight: 700; color: var(--premium-ink); }
.fx-item .rate { color: var(--premium-ink-soft); font-weight: 600; }
@media (max-width: 480px) { .fx-grid { grid-template-columns: 1fr; } }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.contact-item {
    display: flex; align-items: center; gap: 12px; border: 1px solid var(--premium-line); border-radius: 14px;
    padding: 14px; text-decoration: none; color: var(--premium-ink); transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.contact-item:hover { transform: scale(1.03); box-shadow: 0 12px 22px -10px rgba(16,24,40,.2); }
.contact-item .ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.contact-item .ic svg { width: 21px; height: 21px; }
.contact-item .tt { font-weight: 700; font-size: 14px; }
.contact-item .ss { font-size: 12px; color: var(--premium-ink-soft); }
.ic-tg { background: #E7F3FF; color: #229ED9; }
.ic-wa { background: #E6F9EE; color: #25D366; }
.ic-mail { background: #FFF0E5; color: #F2762E; }
.ic-phone { background: #F1EEFF; color: #7C5CFC; }
.contact-divider { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; color: var(--premium-ink-soft); font-size: 12.5px; font-weight: 600; }
.contact-divider::before, .contact-divider::after { content: ""; flex: 1; height: 1px; background: var(--premium-line); }
@media (max-width: 480px) { .contact-grid { grid-template-columns: 1fr; } }

.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--premium-ink-soft); margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; border: 1px solid var(--premium-line); border-radius: 12px; padding: 11px 14px; font-family: 'Manrope', sans-serif;
    font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; resize: none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--premium-accent-a); box-shadow: 0 0 0 3px rgba(30,79,224,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-submit {
    width: 100%; border: none; border-radius: 12px; padding: 14px; background: linear-gradient(135deg, var(--premium-accent-a), var(--premium-accent-b));
    color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; margin-top: 4px; font-family: 'Manrope', sans-serif;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.form-submit:hover { transform: scale(1.02); }
.form-submit:disabled { opacity: .6; cursor: default; transform: none; }
.form-note { font-size: 12.5px; color: var(--premium-ink-soft); margin: 10px 0 0; }
.form-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 0; }
.form-success .ic { font-size: 36px; }
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ==================== ШАПКА САЙТА (include/header.php) ====================
   Тот же визуальный язык, что и "премиум"-вид каталога/единые модалки: Unbounded для
   акцентов, Manrope для текста, синий градиент --premium-accent-a/b, скруглённые карточки
   с мягкими тенями. Шапка sticky (не fixed) — не выпадает из потока документа, поэтому
   <main> не нужно вручную поджимать отступом; но другие sticky-элементы страницы (сайдбар
   фильтра каталога) должны знать о её высоте — см. переопределение .filter-panel { top }
   ниже и переменную --hdr-height. */
:root {
    --hdr-height: 78px;
}
@media (max-width: 767.98px) {
    :root { --hdr-height: 64px; }
}
/* Скролл к якорям (кнопка "наверх" вкладок text_model.php и обычные #anchor-ссылки) не должен
   прятать заголовок под sticky-шапкой. */
html {
    scroll-padding-top: calc(var(--hdr-height) + 20px);
    /* Полноширинные (full-bleed) секции вроде .cta-block в lead-form-concurent.php растягивают
       себя через width:100vw с отрицательными полями — стандартный приём "вылезти" за пределы
       <main class="container">. У него известный побочный эффект: 100vw считается от полной
       ширины ОКНА, а не от видимой области документа (которая на десктопе уже за вычетом
       вертикального скроллбара), поэтому такая секция всегда чуть шире реально видимой области
       и превращает эти лишние ~15-17px в горизонтальный скролл всей страницы. Обрезаем именно
       здесь (на html, а не на самой секции) — тогда сама секция по-прежнему визуально
       дотягивается до обоих краёв экрана, обрезается только невидимый технический излишек. */
    overflow-x: hidden;
}
/* Сайдбар фильтров каталога тоже sticky — раньше цеплялся за верх вьюпорта (top:20px), теперь
   должен цепляться на 20px НИЖЕ шапки, иначе первая же прокрутка спрячет его часть под шапкой. */
.filter-panel {
    top: calc(var(--hdr-height) + 20px);
    max-height: calc(100vh - var(--hdr-height) - 40px);
}
@media (max-width: 767.98px) {
    /* Мобильная версия .filter-panel — это нижняя шторка (position:fixed, top:auto), шапка её не касается. */
    .filter-panel { top: auto; max-height: 88vh; }
}

/* Контактная полоска над шапкой (header.php, FEATURE_HEADER_CONTACTS): в потоке документа, не
   sticky — уезжает при прокрутке, шапка ниже остаётся. Тот же синий градиент, что у кнопок
   (.hdr-cta), поверх — мягкие световые пятна и тонкая «стеклянная» линия снизу. */
.hdr-contacts {
    position: relative; z-index: 1001; overflow: hidden;
    background: linear-gradient(90deg, #163FBF 0%, var(--premium-accent-a) 38%, var(--premium-accent-b) 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
}
.hdr-contacts::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 140% at 8% 50%, rgba(255, 255, 255, .22), transparent 60%),
        radial-gradient(40% 160% at 70% 0%, rgba(255, 255, 255, .16), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%);
}
.hdr-contacts::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, 0));
}
/* Мессенджер MAX (CONTACT_MAX): svg-иконки вместо шрифтовой — img/icons/max-*.svg */
.hdr-soc-max img, .footer-social-max img, .contact-item .ic-max img, .m-nav-contact.is-max img { width: 16px; height: 16px; display: block; }
.hdr-soc-max img.max-hover { display: none; }
.hdr-soc-max:hover img.max-hover { display: block; }
.hdr-soc-max:hover img.max-default { display: none; }
.contact-item .ic-max img { width: 22px; height: 22px; }
.hdr-contacts-inner {
    position: relative; max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 36px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.hdr-contacts-left, .hdr-contacts-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hdr-contact {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; height: 28px; border-radius: 999px;
    color: rgba(255, 255, 255, .92); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s;
}
.hdr-contact b { font-weight: 800; letter-spacing: .02em; }
.hdr-contact-ico {
    width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: 9.5px; color: #fff;
}
a.hdr-contact:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.hdr-contact-phone { padding-left: 4px; }
.hdr-contact-phone .hdr-contact-ico { animation: hdr-ring 3.6s ease-in-out infinite; }
@keyframes hdr-ring {
    0%, 80%, 100% { transform: rotate(0); }
    84% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 92% { transform: rotate(-9deg); } 96% { transform: rotate(6deg); }
}
.hdr-soc {
    width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px; text-decoration: none; background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s, box-shadow .2s;
}
.hdr-soc:hover { color: var(--premium-accent-a); background: #fff; transform: scale(1.06); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .35); text-decoration: none; }
.hdr-soc-msg { background: rgba(255, 255, 255, .2); }
.hdr-soc-sep { width: 1px; height: 18px; margin: 0 6px; background: rgba(255, 255, 255, .35); }
html[data-theme="dark"] .hdr-contacts { background: linear-gradient(90deg, #0F2A80 0%, #1A3FB8 40%, #2C5FE0 100%); }
/* общий html[data-theme=dark] a { color } сильнее .hdr-contact — закрепляем белый явно */
html[data-theme="dark"] .hdr-contacts a.hdr-contact, html[data-theme="dark"] .hdr-contacts a.hdr-soc { color: #fff; }
html[data-theme="dark"] .hdr-contacts a.hdr-soc:hover { color: var(--premium-accent-a); }
@media (max-width: 1100px) { .hdr-contact-email { display: none; } }
@media (max-width: 900px) { .hdr-contact-hours { display: none; } }
@media (max-width: 767.98px) { .hdr-contacts { display: none; } }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled {
    border-bottom-color: var(--premium-line);
    box-shadow: 0 8px 24px -14px rgba(16, 24, 40, .25);
}
.site-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    height: var(--hdr-height);
    display: flex;
    align-items: center;
    gap: 28px;
}
.site-logo { display: flex; align-items: center; flex: none; height: 42%; }
.site-logo img { height: 100%; width: auto; display: block; }
/* Логотип по теме (header.php / nav.php выводят оба <img>): светлая — Black.svg (.logo-light),
   тёмная — White.svg (.logo-dark); переключается вместе с data-theme без перезагрузки. */
.logo-dark { display: none !important; }
html[data-theme="dark"] .logo-light { display: none !important; }
html[data-theme="dark"] .logo-dark { display: block !important; }

.site-nav-desktop { display: flex; align-items: center; gap: 4px; flex: 1; }
.site-nav-desktop a {
    position: relative;
    padding: 9px 14px;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--premium-ink);
    text-decoration: none;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.site-nav-desktop a:hover { background: var(--premium-chip-bg); color: var(--premium-accent-a); }
.site-nav-desktop a::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--premium-accent-a), var(--premium-accent-b));
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-nav-desktop a:hover::after { transform: scaleX(1); }

.site-header-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.hdr-icon-btn {
    display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer;
    padding: 9px 12px; border-radius: 12px; font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: 13.5px; color: var(--premium-ink); text-decoration: none; position: relative;
    transition: background .2s;
}
.hdr-icon-btn:hover { background: var(--premium-chip-bg); }
.hdr-icon-btn i:first-child { font-size: 16px; color: var(--premium-ink-soft); transition: color .2s; }
.hdr-icon-btn:hover i:first-child { color: var(--premium-accent-a); }
.hdr-icon-only { padding: 10px; }
.hdr-caret { font-size: 9px !important; color: var(--premium-ink-soft) !important; margin-left: -2px; }

.hdr-badge {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--premium-accent-a); color: #fff; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif;
    box-shadow: 0 0 0 2px #fff;
}
/* Раньше фон был завязан на --premium-price — эта переменная в тёмной теме специально
   становится белой (чтобы цена читалась на тёмном фоне), но бейдж переиспользовал её не по
   смыслу: получались белые цифры на белом фоне. --premium-accent-a — фирменный синий,
   не меняется по смыслу между темами, только сам оттенок. */
html[data-theme="dark"] .hdr-badge { box-shadow: 0 0 0 2px var(--bg-white); }

.hdr-dropdown { position: relative; }
.hdr-dropdown-panel {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; background: #fff;
    border-radius: 16px; border: 1px solid var(--premium-line); box-shadow: 0 24px 48px -18px rgba(16, 24, 40, .28);
    padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
    transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 20;
}
.hdr-dropdown-panel-right { left: auto; right: 0; }
.hdr-dropdown.open .hdr-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.hdr-dd-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--premium-ink);
    text-decoration: none; transition: background .15s;
}
.hdr-dd-item i { width: 16px; text-align: center; color: var(--premium-accent-a); font-size: 14px; }
.hdr-dd-item:hover { background: var(--premium-chip-bg); color: var(--premium-ink); }
.hdr-dd-sep { height: 1px; background: var(--premium-line); margin: 6px 4px; }

.hdr-cta {
    display: flex; align-items: center; gap: 8px; border: none; border-radius: 12px; padding: 11px 20px;
    background: linear-gradient(135deg, var(--premium-accent-a), var(--premium-accent-b)); color: #fff;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 10px 22px -10px rgba(30, 79, 224, .6);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.hdr-cta:hover { transform: scale(1.02); box-shadow: 0 16px 30px -10px rgba(30, 79, 224, .65); }

.hdr-burger {
    display: none; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; border: none; background: none; cursor: pointer; border-radius: 10px; flex: none;
}
.hdr-burger:hover { background: var(--premium-chip-bg); }
.hdr-burger span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--premium-ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.hdr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
    .site-nav-desktop { display: none; }
    .hdr-icon-btn-label { display: none; }
    .hdr-caret { display: none; }
}
@media (max-width: 767.98px) {
    .site-header-inner { padding: 0 16px; gap: 10px; }
    .hdr-dropdown, .hdr-icon-only { display: none; }
    .hdr-cta { padding: 10px 14px; }
    .hdr-burger { display: flex; }
}

/* ==================== МОБИЛЬНОЕ МЕНЮ (include/nav.php) ====================
   Шторка справа, раскрывается бургер-кнопкой из шапки. На десктопе не видна: opacity:0 +
   pointer-events:none по умолчанию (класс .show добавляет JS в nav.php), плюс сама
   бургер-кнопка скрыта на десктопе (см. .hdr-burger выше) — открыть её не с чего. */
.mobile-nav-backdrop {
    position: fixed; inset: 0; z-index: 1070; background: rgba(10, 12, 20, .55);
    backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.mobile-nav-backdrop.show { opacity: 1; pointer-events: auto; }
.mobile-nav-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); background: #fff;
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .35); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.mobile-nav-backdrop.show .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-head {
    display: flex; align-items: center; justify-content: space-between; padding: 18px 20px;
    border-bottom: 1px solid var(--premium-line); flex: none;
}
.mobile-nav-head .site-logo img { height: 28px; }
.mobile-nav-close {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--premium-chip-bg);
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .3s;
}
.mobile-nav-close:hover { background: #E7EBF2; transform: rotate(90deg); }

.mobile-nav-links { flex: 1; overflow-y: auto; padding: 14px 12px 24px; display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-links > a {
    display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 12px; text-decoration: none;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; color: var(--premium-ink);
}
.mobile-nav-links > a:hover { background: var(--premium-chip-bg); }
.mobile-nav-links > a i:first-child { width: 20px; text-align: center; color: var(--premium-accent-a); font-size: 16px; }
.mobile-nav-badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--premium-price);
    color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.mobile-nav-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: 12px;
    margin: 10px 4px; padding: 14px; background: linear-gradient(135deg, var(--premium-accent-a), var(--premium-accent-b));
    color: #fff; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(30, 79, 224, .55);
}

.mobile-nav-accordion { border-top: 1px solid var(--premium-line); margin-top: 6px; padding-top: 6px; }
.mobile-nav-accordion-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 12px;
    border: none; background: none; cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px;
    color: var(--premium-ink); border-radius: 12px;
}
.mobile-nav-accordion-toggle:hover { background: var(--premium-chip-bg); }
.mobile-nav-accordion-toggle span { display: flex; align-items: center; gap: 12px; }
.mobile-nav-accordion-toggle span i:first-child { width: 20px; text-align: center; color: var(--premium-accent-a); font-size: 16px; }
.mobile-nav-accordion-toggle > i:last-child { font-size: 12px; color: var(--premium-ink-soft); transition: transform .25s; }
.mobile-nav-accordion.open .mobile-nav-accordion-toggle > i:last-child { transform: rotate(180deg); }
.mobile-nav-accordion-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding-left: 8px; }
.mobile-nav-accordion-body a {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px; text-decoration: none; border-radius: 10px;
    font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px; color: var(--premium-ink-soft);
}
.mobile-nav-accordion-body a:hover { background: var(--premium-chip-bg); color: var(--premium-ink); }
.mobile-nav-accordion-body a i { width: 16px; text-align: center; color: var(--premium-accent-a); }

/* ==================== ФУТЕР (include/footer.php) ====================
   Тёмная навигационная подложка (--premium-ink) — контраст с белым сайтом, тот же
   голубой градиентный акцент и Unbounded/Manrope, что и в шапке/модалках. */
.site-footer {
    background: var(--premium-ink);
    color: #C4CAD6;
    font-family: 'Manrope', sans-serif;
    margin-top: 64px;
    padding-top: 60px;
}
.site-footer-top {
    max-width: 1320px; margin: 0 auto; padding: 0 24px 40px;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
/* Белый логотип (White.svg) прямо на тёмном подвале — без белой плашки, которая была под старым цветным логотипом */
.site-footer-brand .footer-logo {
    display: inline-flex; margin-bottom: 18px;
}
.site-footer-brand .footer-logo img { height: 26px; display: block; }
.footer-tagline { font-size: 14px; line-height: 1.6; color: #9AA3B2; margin: 0 0 20px; max-width: 320px; }
.footer-contacts { display: flex; flex-direction: column; gap: 10px; }
.footer-contacts > a { display: flex; align-items: center; gap: 10px; color: #E7EAF0; text-decoration: none; font-weight: 700; font-size: 14.5px; transition: color .2s; }
.footer-contacts > a:hover { color: #fff; }
.footer-contacts > a i { width: 18px; color: var(--premium-accent-b); }
.footer-social { display: flex; gap: 10px; margin-top: 6px; }
.footer-social-btn {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 16px;
    transition: background .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
    text-decoration: none;
}
.footer-social-btn:hover { background: var(--premium-accent-a); transform: scale(1.03); color: #fff; }

.site-footer-col h4 { font-family: 'Unbounded', sans-serif; font-size: 14px; font-weight: 700; color: #fff; margin: 4px 0 18px; letter-spacing: .01em; }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer-col ul a, .site-footer-col ul button {
    color: #9AA3B2; text-decoration: none; font-size: 14px; font-weight: 600; background: none; border: none; padding: 0;
    cursor: pointer; text-align: left; transition: color .2s; font-family: 'Manrope', sans-serif;
}
.site-footer-col ul a:hover, .site-footer-col ul button:hover { color: #fff; }

.footer-app-badges { display: flex; flex-direction: column; gap: 10px; }
.footer-app-badge {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06);
    color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px; transition: background .2s, transform .2s;
}
.footer-app-badge i { font-size: 17px; color: var(--premium-accent-b); width: 18px; text-align: center; }
.footer-app-badge:hover { background: rgba(255, 255, 255, .12); transform: scale(1.02); color: #fff; }

.site-footer-legal { max-width: 1320px; margin: 0 auto; padding: 24px 24px; border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer-legal p { font-size: 12px; line-height: 1.7; color: #7C8494; margin: 0 0 10px; }
.site-footer-legal p:last-child { margin-bottom: 0; }
.site-footer-legal a { color: #9AB4FF; text-decoration: underline; }
.site-footer-legal a:hover { color: #C3D3FF; }

.site-footer-bottom {
    max-width: 1320px; margin: 0 auto; padding: 20px 24px 28px; border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-legal-entity { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #6E7787; max-width: 640px; }
.footer-legal-entity i { color: #4B5567; }
.footer-copyright { font-size: 12.5px; color: #6E7787; font-weight: 600; }

@media (max-width: 980px) {
    .site-footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .site-footer-top { grid-template-columns: 1fr; }
    .site-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==================== СТРАНИЦА АВТОМОБИЛЯ (views/template/car.php) ====================
   Тот же визуальный язык, что и в шапке/модалках/премиум-виде каталога: Unbounded для
   заголовков, Manrope для текста, синий градиент --premium-accent-a/b, мягкие тени.
   Много блоков сознательно переиспользуют уже готовые классы модалок (.spec-row/.pd-tabs/
   .pd-row/.premium-chip) — тот же расчёт стоимости, что и в "Быстром просмотре", только
   сразу на странице, без необходимости открывать модалку. */
.cdp-section { max-width: 1240px; margin: 28px auto 0; padding: 0 24px; font-family: 'Manrope', sans-serif; color: var(--premium-ink); }
.cdp-breadcrumb { font-size: 13px; color: var(--premium-ink-soft); margin-bottom: 20px; }
.cdp-breadcrumb a { color: var(--premium-ink-soft); text-decoration: none; }
.cdp-breadcrumb a:hover { color: var(--premium-accent-a); }
.cdp-breadcrumb .sep { margin: 0 6px; opacity: .5; }

.cdp-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 980px) { .cdp-hero-grid { grid-template-columns: 1fr; } }
/* Грид-элементы по умолчанию min-width:auto — их минимальный размер считается по
   min-content ребёнка. Owl Carousel растягивает свой .owl-stage на огромную ширину ДО того,
   как грид досчитает финальный размер колонки, грид пытается подстроиться под этот
   min-content, а owl на следующий тик меряет уже "подросший" контейнер и растягивается ещё
   больше — реальный бесконечный (точнее, быстро сходящийся к абсурдному числу) цикл роста,
   пойманный на этой же странице. min-width:0 отключает эту эвристику: колонка не может расти
   от содержимого, ширина карусели остаётся равна её собственному треку. */
.cdp-hero-grid > * { min-width: 0; }

.cdp-gallery { border-radius: 24px; overflow: hidden; background: #0d1117; position: relative; box-shadow: 0 30px 60px -30px rgba(16, 24, 40, .35); }
.cdp-gallery .owl-carousel .item { aspect-ratio: 4/3; }
.cdp-gallery .owl-carousel .item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.cdp-gallery .owl-nav button.owl-prev, .cdp-gallery .owl-nav button.owl-next {
    position: absolute !important; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50% !important;
    background: rgba(255, 255, 255, .92) !important; color: var(--premium-ink) !important; display: flex; align-items: center; justify-content: center;
    font-size: 16px !important; margin: 0 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); transition: background .2s, transform .2s;
}
.cdp-gallery .owl-nav button:hover { background: #fff !important; transform: translateY(-50%) scale(1.08); }
.cdp-gallery .owl-nav button.owl-prev { left: 16px; }
.cdp-gallery .owl-nav button.owl-next { right: 16px; }
.cdp-gallery .owl-dots { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; z-index: 5; }
.cdp-gallery .owl-dots .owl-dot span { background: rgba(255, 255, 255, .5) !important; width: 7px; height: 7px; margin: 0 3px !important; }
.cdp-gallery .owl-dots .owl-dot.active span { background: #fff !important; width: 22px !important; border-radius: 5px !important; }
.cdp-no-image { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: #8a93a3; background: #0d1117; border-radius: 24px; }

/* Кнопка "развернуть на весь экран" поверх галереи — открывает тот же Fancybox, что и клик
   по фото, просто более заметный/явный способ для тех, кто не догадается кликнуть по фото. */
.cdp-gallery-expand {
    position: absolute; top: 14px; right: 14px; z-index: 6; width: 38px; height: 38px; border: none; border-radius: 50%;
    background: rgba(13, 17, 23, .55); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .2s, transform .2s;
}
.cdp-gallery-expand:hover { background: rgba(13, 17, 23, .8); transform: scale(1.08); }

/* Миниатюры под галереей — синхронизированы с owl-carousel через JS (car.php). Последняя
   плашка (.cdp-thumb-locked), если есть скрытые фото — заблокированный превью-кадр с тем же
   размытым фото, что и слайд-призыв регистрации, а не настоящая миниатюра. */
.cdp-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; cursor: grab; }
.cdp-thumbs::-webkit-scrollbar { display: none; }
.cdp-thumbs.cdp-thumbs-dragging { cursor: grabbing; user-select: none; }
.cdp-thumbs.cdp-thumbs-dragging * { pointer-events: none; }
.cdp-thumb {
    flex: none; width: 64px; height: 48px; border-radius: 10px; overflow: hidden; border: 2px solid transparent;
    padding: 0; cursor: pointer; background: #0d1117; background-size: cover; background-position: center;
    opacity: .6; transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.cdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdp-thumb:hover { opacity: .9; transform: scale(1.02); }
.cdp-thumb.active { opacity: 1; border-color: var(--premium-accent-a); }
.cdp-thumb-locked { position: relative; opacity: 1; }
.cdp-thumb-locked-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
    background: rgba(11, 18, 32, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    color: #fff; font-size: 10.5px; font-weight: 700;
}
.cdp-thumb-locked.active { border-color: var(--premium-accent-a); }

/* Слайд-призыв зарегистрироваться — 3-м элементом карусели для неавторизованных (см.
   car.php: $galleryImages/$hiddenImagesCount). Фон — реальное (заблокированное) фото,
   размытое под матовым стеклом, чтобы дать "подсмотреть", не показывая чётко. */
.cdp-gallery-cta { position: relative; background-size: cover; background-position: center; cursor: default; }
.cdp-gallery-cta-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,18,32,.5) 0%, rgba(11,18,32,.85) 60%, rgba(11,18,32,.96) 100%);
    backdrop-filter: blur(20px) saturate(110%);
    -webkit-backdrop-filter: blur(20px) saturate(110%);
}
.cdp-gallery-cta-content {
    position: relative; z-index: 2; height: 100%; width: 100%; max-width: 320px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20px 22px; color: #fff; box-sizing: border-box;
}
.cdp-gallery-cta-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cdp-gallery-cta-lock {
    flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b)); color: #fff; font-size: 13px;
    box-shadow: 0 12px 26px -8px rgba(30, 79, 224, .7); animation: cdpCtaPulse 2.6s ease-in-out infinite;
}
@keyframes cdpCtaPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 12px 26px -8px rgba(30, 79, 224, .7); }
    50% { transform: scale(1.08); box-shadow: 0 16px 32px -6px rgba(30, 79, 224, .85); }
}
.cdp-gallery-cta-headtext { font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .85); text-align: left; }
.cdp-gallery-cta-headtext b {
    display: block; font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 800;
    background: linear-gradient(95deg, #fff, #c7d4ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cdp-gallery-cta-benefits {
    list-style: none; margin: 0 0 16px; padding: 0; width: 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
}
.cdp-gallery-cta-benefits li {
    display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.25; text-align: left;
    color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9px; padding: 6px 8px;
}
.cdp-gallery-cta-benefits li i { flex: none; color: var(--premium-accent-b); font-size: 11px; width: 13px; text-align: center; }

.cdp-gallery-cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 18px;
    border-radius: 100px; text-decoration: none;
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b)); color: #fff !important;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; white-space: nowrap;
    box-shadow: 0 16px 30px -12px rgba(30, 79, 224, .6); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.cdp-gallery-cta-btn:hover { transform: scale(1.03); box-shadow: 0 20px 38px -10px rgba(30, 79, 224, .7); }
.cdp-gallery-cta-login { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .6) !important; text-decoration: none; }
.cdp-gallery-cta-login:hover { color: #fff !important; text-decoration: underline; }

.cdp-info-panel { display: flex; flex-direction: column; gap: 18px; }
.cdp-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cdp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; background: var(--premium-chip-bg); font-size: 12.5px; font-weight: 700; color: var(--premium-ink); }
.cdp-badge img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.cdp-badge-dark { background: var(--premium-ink); color: #fff; }

/* Избранное/сравнить/поделиться — на одной строке со страной и номером лота, справа. */
.cdp-badges .cdp-icon-actions { margin-left: auto; }
.cdp-badges .cdp-icon-btn { width: 38px; height: 38px; }
.cdp-badges .cdp-icon-btn.compare-btn { height: 38px; }

.cdp-title { font-family: 'Unbounded', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -.01em; margin: 0; line-height: 1.15; }
.cdp-subtitle { font-size: 15px; color: var(--premium-ink-soft); font-weight: 600; }

/* Характеристики — переиспользуем .spec-table/.spec-row из "Быстрого просмотра" (styles.css,
   секция модалок), см. car.php. Последняя строка (цена) — она же .price-calc-btn, кликабельна
   и открывает ту же модалку "Расчёт стоимости", что и кнопка "Расчёт цены в РФ" ниже. */
.spec-row.price-calc-btn { cursor: pointer; border-radius: 10px; transition: background .15s ease; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.spec-row.price-calc-btn:hover { background: var(--premium-chip-bg); }
.spec-row.price-calc-btn .v { color: var(--premium-price); }

.cdp-auction-sheet-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px;
    padding: 12px; border-radius: 12px; border: 1px solid var(--premium-line); background: #fff;
    color: var(--premium-ink); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.cdp-auction-sheet-btn:hover { border-color: var(--premium-accent-a); color: var(--premium-accent-a); background: var(--premium-chip-bg); }

.cdp-price-calc-btn {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--premium-line); background: #fff;
    border-radius: 12px; padding: 0 20px; height: 52px; color: var(--premium-ink); font-family: 'Manrope', sans-serif;
    font-weight: 700; font-size: 13.5px; cursor: pointer; transition: border-color .2s, color .2s, transform .2s;
}
.cdp-price-calc-btn:hover { border-color: var(--premium-accent-a); color: var(--premium-accent-a); transform: scale(1.02); }

.cdp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.cdp-icon-actions { display: flex; gap: 8px; }
.cdp-icon-btn {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--premium-line); background: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--premium-ink-soft);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, border-color .2s, color .2s;
}
.cdp-icon-btn:hover { transform: scale(1.03); box-shadow: 0 10px 20px -8px rgba(16, 24, 40, .25); border-color: var(--premium-accent-a); color: var(--premium-accent-a); }
.cdp-icon-btn.active { color: #ff3b5c; border-color: #ff3b5c; }
/* compare-btn получает текстовую метку от общего JS-обработчика (compareHandler в
   catalog.js, общий для всех видов каталога) — даём ему овал вместо круга, чтобы текст
   помещался, а не обрезался. */
.cdp-icon-btn.compare-btn { width: auto; padding: 0 18px; border-radius: 24px; gap: 8px; font-size: 13px; font-weight: 700; }
.cdp-icon-btn.compare-btn.active { color: var(--premium-accent-a); border-color: var(--premium-accent-a); }

.cdp-description { max-width: 1240px; margin: 40px auto 0; padding: 0 24px; }
.cdp-description-card { background: #fff; border-radius: 20px; padding: 26px; border: 1px solid var(--premium-line); }
.cdp-description-card h3 { font-family: 'Unbounded', sans-serif; font-size: 18px; margin: 0 0 12px; }
.cdp-description-card p { color: var(--premium-ink-soft); line-height: 1.7; margin: 0; white-space: pre-line; }

.cdp-similar-heading { max-width: 1240px; margin: 48px auto 0; padding: 0 24px 4px; }
.cdp-similar-heading h2 { font-family: 'Unbounded', sans-serif; font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.cdp-similar-heading p { color: var(--premium-ink-soft); font-size: 14px; margin: 0; }

@media (max-width: 640px) {
    .cdp-title { font-size: 24px; }
}

/* ==================== СТРАНИЦЫ ВХОДА / РЕГИСТРАЦИИ / ВОССТАНОВЛЕНИЯ ====================
   views/template/register.php, login.php, forgot-password.php — общий "премиальный,
   воздушный" каркас: светлый градиентный визуальный блок слева, белая карточка формы
   справа, тот же язык, что и везде (Unbounded/Manrope, --premium-accent-a/b, мягкие тени,
   пружинные transition). Полностью независим от .cta-block (тот — тёмный/золотой, для
   лид-формы; здесь — светлая, воздушная тема, как и просили). */
.auth-page {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 640px;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 40px 80px -32px rgba(16, 24, 40, .18), 0 1px 0 rgba(16,24,40,.04);
    border: 1px solid var(--premium-line);
    font-family: 'Manrope', sans-serif;
    margin: 12px 0 40px;
}

.auth-visual {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #eef3ff 0%, #f7f9ff 55%, #fff 100%);
    padding: 72px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-visual::before, .auth-visual::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(2px);
    background: radial-gradient(circle, rgba(30,79,224,.16), transparent 70%);
    animation: authBlobFloat 12s ease-in-out infinite;
}
.auth-visual::before { width: 420px; height: 420px; top: -140px; right: -120px; }
.auth-visual::after {
    width: 320px; height: 320px; bottom: -100px; left: -80px;
    background: radial-gradient(circle, rgba(226,59,79,.12), transparent 70%);
    animation-delay: -6s;
}
@keyframes authBlobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-16px, 18px) scale(1.06); }
}
.auth-visual-inner { position: relative; z-index: 2; max-width: 440px; }
.auth-visual-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px;
    background: #fff; border: 1px solid var(--premium-line); font-size: 12.5px; font-weight: 700;
    color: var(--premium-accent-a); margin-bottom: 24px; box-shadow: 0 6px 16px -8px rgba(16,24,40,.12);
}
.auth-visual h1 {
    font-family: 'Unbounded', sans-serif; font-size: 34px; font-weight: 800; line-height: 1.22;
    letter-spacing: -.01em; margin: 0 0 16px; color: var(--premium-ink);
}
.auth-visual h1 span {
    background: linear-gradient(95deg, var(--premium-accent-a), var(--premium-accent-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-visual p.auth-visual-sub { font-size: 15.5px; line-height: 1.65; color: var(--premium-ink-soft); margin: 0 0 32px; }

.auth-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.auth-benefit { display: flex; align-items: flex-start; gap: 14px; }
.auth-benefit-icon {
    flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff;
    display: flex; align-items: center; justify-content: center; color: var(--premium-accent-a);
    font-size: 16px; box-shadow: 0 8px 20px -10px rgba(16,24,40,.18); border: 1px solid var(--premium-line);
}
.auth-benefit-text b { display: block; font-size: 14.5px; font-weight: 700; color: var(--premium-ink); margin-bottom: 2px; }
.auth-benefit-text span { font-size: 13px; color: var(--premium-ink-soft); }

.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-card {
    width: 100%; max-width: 400px;
    animation: authCardIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes authCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card-head { margin-bottom: 32px; }
.auth-card-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--premium-accent-a); margin-bottom: 10px; }
.auth-card-title { font-family: 'Unbounded', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; color: var(--premium-ink); }
.auth-card-sub { font-size: 14px; color: var(--premium-ink-soft); margin: 0; line-height: 1.5; }

.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--premium-ink-soft); margin-bottom: 7px; }
.auth-field-control { position: relative; }
.auth-field input {
    width: 100%; border: 1.5px solid var(--premium-line); border-radius: 14px; padding: 14px 16px;
    font-family: 'Manrope', sans-serif; font-size: 14.5px; color: var(--premium-ink); background: #fbfcff;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-field input::placeholder { color: #b7bdc9; }
.auth-field input:focus {
    outline: none; border-color: var(--premium-accent-a); background: #fff;
    box-shadow: 0 0 0 4px rgba(30,79,224,.12);
}
.auth-field.has-error input { border-color: var(--premium-price); box-shadow: 0 0 0 4px rgba(226,59,79,.1); }
.auth-field-hint { font-size: 12px; margin-top: 6px; color: var(--premium-ink-soft); }
.auth-field-hint.is-ok { color: #1f9e4c; }
.auth-field-hint.is-bad { color: var(--premium-price); }

.auth-password-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: none; background: none; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; color: var(--premium-ink-soft); cursor: pointer;
    transition: background .2s, color .2s;
}
.auth-password-toggle:hover { background: var(--premium-chip-bg); color: var(--premium-ink); }
.auth-field:has(.auth-password-toggle) input { padding-right: 46px; }

.auth-submit {
    width: 100%; border: none; border-radius: 14px; padding: 15px 18px; margin-top: 6px;
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b));
    color: #fff; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 16px 30px -12px rgba(30,79,224,.55);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, opacity .2s ease;
}
.auth-submit:hover { transform: scale(1.02); box-shadow: 0 20px 36px -12px rgba(30,79,224,.6); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: .65; cursor: default; transform: none; }
.auth-submit .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: authSpin .7s linear infinite; }
@keyframes authSpin { to { transform: rotate(360deg); } }

.auth-banner {
    display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.5; margin-bottom: 18px;
}
.auth-banner-error { background: #FEEEEF; color: #B3212F; }
.auth-banner-success { background: #EAF9F0; color: #1f9e4c; }
.auth-banner i { margin-top: 2px; }

.auth-switch { text-align: center; margin-top: 26px; font-size: 13.5px; color: var(--premium-ink-soft); }
.auth-switch a { color: var(--premium-accent-a); font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-links-row { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 18px; font-size: 13px; }
.auth-links-row a { color: var(--premium-ink-soft); text-decoration: none; }
.auth-links-row a:hover { color: var(--premium-accent-a); }

.auth-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 13.5px; color: var(--premium-ink-soft); margin-bottom: 20px; }
.auth-checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.auth-checkbox-box {
    flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--premium-line);
    display: flex; align-items: center; justify-content: center; background: #fbfcff;
    transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.auth-checkbox-box i { font-size: 11px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1); }
.auth-checkbox input:checked + .auth-checkbox-box {
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b));
    border-color: transparent; transform: scale(1.04);
}
.auth-checkbox input:checked + .auth-checkbox-box i { opacity: 1; transform: scale(1); }
.auth-checkbox input:focus-visible + .auth-checkbox-box { box-shadow: 0 0 0 4px rgba(30,79,224,.15); }
.auth-links-row .auth-checkbox { margin-bottom: 0; }

.auth-success-state { text-align: center; padding: 12px 0; }
.auth-success-icon {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center;
    justify-content: center; background: #EAF9F0; color: #1f9e4c; font-size: 26px;
    animation: authSuccessPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes authSuccessPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.auth-success-state h3 { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; margin: 0 0 10px; color: var(--premium-ink); }
.auth-success-state p { font-size: 14px; color: var(--premium-ink-soft); line-height: 1.6; margin: 0 0 22px; }
.auth-new-password {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px;
    background: var(--premium-chip-bg); font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 700;
    letter-spacing: .06em; color: var(--premium-ink); margin-bottom: 22px;
}

@media (max-width: 980px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .auth-form-side { padding: 40px 20px; }
}
@media (max-width: 480px) {
    .auth-card-title { font-size: 24px; }
}

/* ==================== СТРАНИЦА "СРАВНЕНИЕ АВТОМОБИЛЕЙ" ====================
   views/template/compare.php + views/template/js/compare.js. Старые классы .compare-table/
   .comment-cell/.cell-highlight-* удалены (были продублированы дважды в этом файле и нигде,
   кроме самой этой страницы, не использовались) — вся вёрстка таблицы теперь на классах
   ниже с префиксом cmp-. */

.cmp-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 4px 0 28px; }
.cmp-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--premium-accent-a); margin-bottom: 8px; }
.cmp-title { font-family: 'Unbounded', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; color: var(--premium-ink); }
.cmp-subtitle { font-size: 14.5px; color: var(--premium-ink-soft); margin: 0; max-width: 540px; line-height: 1.5; }
.cmp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-action-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; height: 46px; border-radius: 100px;
    border: 1px solid var(--premium-line); background: #fff; color: var(--premium-ink); font-family: 'Manrope', sans-serif;
    font-weight: 700; font-size: 13.5px; cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cmp-action-btn:hover { border-color: var(--premium-accent-a); color: var(--premium-accent-a); transform: scale(1.02); box-shadow: 0 12px 22px -12px rgba(16,24,40,.25); }
.cmp-action-btn.cmp-action-accent {
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b)); color: #fff; border-color: transparent;
    box-shadow: 0 14px 26px -10px rgba(30,79,224,.5);
}
.cmp-action-btn.cmp-action-accent:hover { color: #fff; transform: scale(1.02); box-shadow: 0 18px 32px -8px rgba(30,79,224,.6); }
.cmp-action-btn.cmp-action-danger:hover { border-color: var(--premium-price); color: var(--premium-price); }

/* ---- Анализ сравнения (лидеры по параметрам) ---- */
.cmp-insights { background: #fff; border: 1px solid var(--premium-line); border-radius: 22px; padding: 24px; margin-bottom: 24px; box-shadow: 0 24px 50px -36px rgba(16,24,40,.3); }
.cmp-insights-head { display: flex; align-items: center; gap: 8px; font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 800; color: var(--premium-ink); margin-bottom: 16px; }
.cmp-insights-head i { color: var(--premium-accent-a); }
.cmp-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cmp-insight-chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--premium-chip-bg); min-width: 0; }
.cmp-insight-icon {
    flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; display: flex; align-items: center;
    justify-content: center; color: var(--premium-accent-a); font-size: 13.5px; box-shadow: 0 6px 14px -8px rgba(16,24,40,.25);
}
.cmp-insight-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-insight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--premium-ink-soft); }
.cmp-insight-value { font-size: 13px; font-weight: 700; color: var(--premium-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-insight-value a { color: var(--premium-ink); text-decoration: none; }
.cmp-insight-value a:hover { color: var(--premium-accent-a); }

.cmp-winner-banner {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(30,79,224,.08), rgba(62,123,255,.08)); border: 1px solid rgba(30,79,224,.18);
}
.cmp-winner-icon {
    flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b)); color: #fff; font-size: 17px;
    box-shadow: 0 14px 26px -10px rgba(30,79,224,.6);
}
.cmp-winner-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cmp-winner-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--premium-accent-a); }
.cmp-winner-value { font-size: 15px; font-weight: 800; color: var(--premium-ink); font-family: 'Unbounded', sans-serif; }
.cmp-winner-value a { color: inherit; text-decoration: none; }
.cmp-winner-score { flex: none; font-size: 12px; font-weight: 700; color: var(--premium-ink-soft); background: #fff; padding: 6px 12px; border-radius: 100px; }

/* ---- Таблица сравнения ---- */
.cmp-table-card { position: relative; background: #fff; border: 1px solid var(--premium-line); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(16,24,40,.35); }
/* Наведение на левый/правый край таблицы сравнения плавно скроллит её в эту сторону — заметнее
   обычного скроллбара, когда сравниваемых авто много и таблица шире экрана. */
.cmp-edge-scroll {
    position: absolute; top: 0; bottom: 0; width: 64px; z-index: 6; display: none;
    align-items: center; justify-content: center; cursor: pointer; opacity: 0;
    transition: opacity .18s ease; color: var(--premium-accent-a); font-size: 18px;
}
.cmp-edge-scroll.is-active { display: flex; }
.cmp-edge-scroll:hover { opacity: 1; }
.cmp-edge-scroll.at-edge { opacity: 0 !important; pointer-events: none; }
.cmp-edge-scroll-left {
    left: 0; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 100%);
}
.cmp-edge-scroll-right {
    right: 0; background: linear-gradient(270deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 100%);
}
[data-bs-theme="dark"] .cmp-edge-scroll-left { background: linear-gradient(90deg, rgba(24,26,32,.96) 0%, rgba(24,26,32,0) 100%); }
[data-bs-theme="dark"] .cmp-edge-scroll-right { background: linear-gradient(270deg, rgba(24,26,32,.96) 0%, rgba(24,26,32,0) 100%); }
.cmp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp-table th, .cmp-table td { padding: 14px 18px; font-size: 13.5px; border-bottom: 1px solid var(--premium-line); position: relative; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table td { text-align: center; color: var(--premium-ink); font-weight: 600; white-space: nowrap; }
.cmp-table th:first-child, .cmp-table td:first-child {
    position: sticky; left: 0; z-index: 2; background: #fbfcff; font-weight: 700; color: var(--premium-ink-soft);
    font-size: 12px; text-transform: uppercase; letter-spacing: .03em; min-width: 150px; border-right: 1px solid var(--premium-line);
    text-align: left; white-space: normal;
}
.cmp-table thead th { background: #fbfcff; vertical-align: top; padding-top: 22px; padding-bottom: 22px; }
.cmp-table tbody tr:nth-child(even) td:not(:first-child) { background: #fbfcff; }
.cmp-table tbody tr:nth-child(even) td:first-child { background: #f4f6fa; }

.cmp-table td.cmp-cell-best { background: rgba(30,79,224,.07) !important; font-weight: 800; color: var(--premium-accent-a); }
.cmp-table td.cmp-cell-best::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 8px; color: #fff;
    position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--premium-accent-a);
    display: flex; align-items: center; justify-content: center;
}

.cmp-table tr.cmp-row-price td:not(:first-child) { font-family: 'Unbounded', sans-serif; font-size: 15px; color: var(--premium-price); }
.cmp-table tr.cmp-row-price td.cmp-cell-best { color: var(--premium-accent-a); }
.cmp-table td.cmp-price-cell { cursor: pointer; transition: background .15s ease; }
.cmp-table td.cmp-price-cell:hover { background: var(--premium-chip-bg) !important; }

.cmp-car-header { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 150px; }
.cmp-car-photo {
    display: flex; align-items: center; justify-content: center; width: 100%; max-width: 170px; aspect-ratio: 4/3;
    border-radius: 14px; overflow: hidden; background: #0d1117; cursor: zoom-in;
}
.cmp-car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-car-photo-empty { color: #8a93a3; font-size: 20px; cursor: default; }
.cmp-car-name { font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 700; color: var(--premium-ink); text-decoration: none; text-align: center; white-space: normal; }
.cmp-car-name:hover { color: var(--premium-accent-a); }
.cmp-remove-btn {
    position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: none;
    background: rgba(11,18,32,.06); color: var(--premium-ink-soft); display: flex; align-items: center; justify-content: center;
    font-size: 11px; cursor: pointer; transition: background .2s ease, color .2s ease; z-index: 3;
}
.cmp-remove-btn:hover { background: var(--premium-price); color: #fff; }

.cmp-table tr.cmp-row-comment td { white-space: normal; vertical-align: top; }
.cmp-table tr.cmp-row-comment textarea {
    width: 100%; min-width: 150px; min-height: 64px; border: 1.5px solid var(--premium-line); border-radius: 12px; padding: 10px 12px;
    font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--premium-ink); resize: vertical; background: #fbfcff;
    transition: border-color .2s ease, background .2s ease;
}
.cmp-table tr.cmp-row-comment textarea:focus { outline: none; border-color: var(--premium-accent-a); background: #fff; }

/* ---- Пустое состояние ---- */
.cmp-empty { text-align: center; padding: 72px 24px; background: #fff; border: 1.5px dashed var(--premium-line); border-radius: 24px; }
.cmp-empty-icon {
    width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
    background: var(--premium-chip-bg); color: var(--premium-accent-a); font-size: 26px;
}
.cmp-empty h3 { font-family: 'Unbounded', sans-serif; font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--premium-ink); }
.cmp-empty p { font-size: 13.5px; color: var(--premium-ink-soft); margin: 0 auto 22px; max-width: 380px; line-height: 1.6; }
.cmp-empty-cta {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 100px; text-decoration: none;
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b)); color: #fff; font-weight: 700; font-size: 13.5px;
    box-shadow: 0 16px 30px -12px rgba(30,79,224,.55); transition: transform .2s ease, box-shadow .2s ease;
}
.cmp-empty-cta:hover { transform: scale(1.02); box-shadow: 0 20px 36px -10px rgba(30,79,224,.65); color: #fff; }

/* ---- Загрузка ---- */
.cmp-loader { display: flex; align-items: center; justify-content: center; padding: 90px 0; }
.cmp-loader .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--premium-line); border-top-color: var(--premium-accent-a); animation: cmpSpin .8s linear infinite; display: block; }
@keyframes cmpSpin { to { transform: rotate(360deg); } }

/* ---- Модалки: История сравнений / Быстрый просмотр ---- */
#historyModal .modal-content { border-radius: 22px; border: none; box-shadow: 0 40px 80px -30px rgba(16,24,40,.35); }
#historyModal .modal-header { border-bottom: 1px solid var(--premium-line); padding: 20px 24px; }
#historyModal .modal-title { font-family: 'Unbounded', sans-serif; font-size: 17px; font-weight: 800; color: var(--premium-ink); }
#historyModal .modal-body { padding: 24px; }

.cmp-history-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--premium-line); }
.cmp-history-item:last-child { border-bottom: none; }
.cmp-history-name { font-weight: 700; color: var(--premium-ink); font-size: 14px; }
.cmp-history-date { font-size: 12px; color: var(--premium-ink-soft); margin-top: 2px; }
.cmp-history-load {
    flex: none; padding: 8px 18px; border-radius: 100px; border: 1.5px solid var(--premium-accent-a); background: #fff; color: var(--premium-accent-a);
    font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.cmp-history-load:hover { background: var(--premium-accent-a); color: #fff; }
.cmp-history-empty { text-align: center; padding: 40px 20px; color: var(--premium-ink-soft); font-size: 13.5px; }

@media (max-width: 640px) {
    .cmp-title { font-size: 24px; }
    .cmp-actions { width: 100%; }
    .cmp-action-btn { flex: 1; padding: 0 12px; }
}

/* ==================== СТРАНИЦА ИЗ ТАБЛИЦЫ pages (/page/ЧПУ) ====================
   views/template/page.php. Переиспользует .cdp-section/.cdp-breadcrumb/.cdp-gallery/
   .cdp-thumbs/.cdp-gallery-expand/.cdp-similar-heading (car.php) и include/catalog/
   model_carousels.php как есть — новые классы ниже только для того, чего там нет. */

/* align-items: stretch (по умолчанию) — принципиально: .pdp-sidebar должен растягиваться на
   высоту всей строки грида (= высоту .pdp-main с длинным контентом), иначе sticky-элементу
   внутри него буквально некуда "ехать" вниз — он упрётся в нижнюю границу собственной короткой
   колонки и пропадёт из вида при дальнейшей прокрутке, а не останется приклеенным к шапке. */
.pdp-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; margin-top: 8px; }
/* Без этого дочерние элементы грида (в частности .pdp-main с owl-каруселью/видео внутри)
   получают неявный min-width:auto по содержимому — если внутри есть <video> с большим
   собственным разрешением, колонка может раздуться шире вьюпорта и потянуть за собой
   горизонтальный скролл всей страницы (тот же баг, что уже ловили на .cdp-hero-grid в car.php). */
.pdp-layout > * { min-width: 0; }

/* ---- Галерея: видео/iframe в тех же слайдах, что и фото (см. .cdp-gallery в car.php) ---- */
.cdp-gallery .owl-carousel .item video,
.cdp-gallery .owl-carousel .item iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.pdp-thumb-video { display: flex; align-items: center; justify-content: center; background: var(--premium-ink) !important; color: #fff; font-size: 12px; }

/* ---- Заголовок и описание ---- */
.pdp-title { font-family: 'Unbounded', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin: 28px 0 20px; color: var(--premium-ink); }
.pdp-content {
    font-size: 15.5px; line-height: 1.85; color: var(--premium-ink-soft); margin-bottom: 36px;
}
.pdp-content p { margin: 0 0 18px; }
.pdp-content h2, .pdp-content h3 { font-family: 'Unbounded', sans-serif; font-weight: 800; color: var(--premium-ink); margin: 28px 0 14px; }
.pdp-content h2 { font-size: 21px; }
.pdp-content h3 { font-size: 17px; }
.pdp-content a { color: var(--premium-accent-a); font-weight: 600; }
.pdp-content img { max-width: 100%; height: auto; border-radius: 16px; margin: 8px 0; }
.pdp-content ul, .pdp-content ol { padding-left: 22px; margin: 0 0 18px; }
.pdp-content strong { color: var(--premium-ink); }

/* ---- Текстовые блоки — карточки с воздухом между ними, чтобы страница не читалась одной
   сплошной стеной текста. При наведении — без translateY/сдвигов: вместо этого у карточки
   "загорается" тонкая градиентная рамка (псевдоэлемент ::before, обрезанный маской строго
   по контуру) и усиливается цветное свечение тени — карточка остаётся на месте, но заметно
   "оживает". ---- */
.pdp-blocks { display: flex; flex-direction: column; gap: 26px; margin-bottom: 40px; }
.pdp-block {
    position: relative; background: #fff; border: 1px solid var(--premium-line); border-radius: 26px; padding: 34px;
    box-shadow: 0 22px 44px -34px rgba(16, 24, 40, .3);
    transition: box-shadow .4s ease, border-color .4s ease;
    scroll-margin-top: calc(var(--hdr-height) + 20px);
}
.pdp-block::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.pdp-block:hover {
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(30, 79, 224, .1), 0 32px 56px -26px rgba(30, 79, 224, .38);
}
.pdp-block:hover::before { opacity: 1; }
.pdp-block-img { margin: -34px -34px 22px; aspect-ratio: 21/9; overflow: hidden; border-radius: 26px 26px 0 0; background: #f4f6fa; }
.pdp-block-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-block-index {
    display: inline-flex; align-items: center; font-family: 'Unbounded', sans-serif; font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--premium-accent-a); background: var(--premium-chip-bg);
    padding: 5px 12px; border-radius: 100px; margin-bottom: 14px;
}
.pdp-block h2 { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; margin: 0 0 14px; color: var(--premium-ink); line-height: 1.3; }
.pdp-block-text { font-size: 15px; line-height: 1.8; color: var(--premium-ink-soft); }
.pdp-block-text p { margin: 0 0 14px; }
.pdp-block-text p:last-child { margin-bottom: 0; }

/* ---- CTA-форма запроса (pages.cta_form) ---- */
.pdp-cta {
    position: relative; overflow: hidden; border-radius: 28px; padding: 44px; margin-bottom: 44px;
    background: linear-gradient(155deg, var(--premium-ink) 0%, #131c30 100%); color: #fff;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
    scroll-margin-top: calc(var(--hdr-height) + 20px);
}
.pdp-cta-glow {
    position: absolute; top: -120px; right: -100px; width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(62, 123, 255, .35), transparent 70%); pointer-events: none;
}
.pdp-cta-inner { position: relative; z-index: 2; display: contents; }
.pdp-cta-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #9fb4ff; margin-bottom: 14px;
}
.pdp-cta-text h2 { font-family: 'Unbounded', sans-serif; font-size: 25px; font-weight: 800; line-height: 1.3; margin: 0 0 12px; }
.pdp-cta-text p { font-size: 14.5px; color: rgba(255, 255, 255, .7); margin: 0; line-height: 1.6; }
.pdp-cta-form { display: flex; flex-direction: column; gap: 12px; }
.pdp-cta-form input, .pdp-cta-form textarea {
    width: 100%; border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 14px 16px;
    font-family: 'Manrope', sans-serif; font-size: 14px; color: #fff; background: rgba(255, 255, 255, .06); resize: none;
    transition: border-color .2s ease, background .2s ease;
}
.pdp-cta-form input::placeholder, .pdp-cta-form textarea::placeholder { color: rgba(255, 255, 255, .45); }
.pdp-cta-form input:focus, .pdp-cta-form textarea:focus { outline: none; border-color: var(--premium-accent-b); background: rgba(255, 255, 255, .1); }
.pdp-cta-submit {
    position: relative; overflow: hidden; border: none; border-radius: 100px; padding: 15px 22px; margin-top: 4px; cursor: pointer;
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b)); color: #fff;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14.5px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 16px 30px -12px rgba(30, 79, 224, .6); transition: box-shadow .3s ease;
}
/* Без translateY — вместо сдвига кнопки по ней слева направо пробегает световой блик
   (тот же приём, что и градиентная рамка у .pdp-block: эффект живёт "внутри" элемента, а не
   двигает его самого), плюс усиливается цветное свечение тени. */
.pdp-cta-submit::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
}
.pdp-cta-submit:hover { box-shadow: 0 22px 40px -10px rgba(30, 79, 224, .75); }
.pdp-cta-submit:hover::after { left: 130%; }
.pdp-cta-submit:disabled { opacity: .65; cursor: default; }
.pdp-cta-submit:disabled::after { display: none; }
.pdp-cta-success, .pdp-cta-error { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 11px 14px; border-radius: 12px; margin-bottom: 4px; }
.pdp-cta-success { background: rgba(31, 158, 76, .18); color: #7fe8a4; }
.pdp-cta-error { background: rgba(226, 59, 79, .18); color: #ff8a97; }

/* ---- Сайдбар-оглавление ---- */
.pdp-sidebar { position: relative; }
.pdp-sidebar-inner {
    position: sticky; top: calc(var(--hdr-height) + 20px); display: flex; flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--premium-line); border-radius: 22px; padding: 22px 16px;
    max-height: calc(100vh - var(--hdr-height) - 40px); overflow-y: auto;
}
.pdp-sidebar-label {
    font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--premium-ink-soft); margin: 0 10px 10px;
}
.pdp-sidebar-inner a {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
    font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--premium-ink-soft);
    transition: background .2s ease, color .2s ease;
}
.pdp-sidebar-inner a i { flex: none; width: 16px; text-align: center; font-size: 13px; }
.pdp-sidebar-inner a:hover { background: var(--premium-chip-bg); color: var(--premium-ink); }
.pdp-sidebar-inner a.active {
    background: linear-gradient(120deg, var(--premium-accent-a), var(--premium-accent-b)); color: #fff;
    box-shadow: 0 12px 24px -12px rgba(30, 79, 224, .55);
}

.pdp-not-found { max-width: 640px; margin: 80px auto; text-align: center; font-family: 'Manrope', sans-serif; }
.pdp-not-found h1 { font-family: 'Unbounded', sans-serif; font-size: 24px; margin-bottom: 12px; }
.pdp-not-found a { color: var(--premium-accent-a); font-weight: 700; text-decoration: none; }

@media (max-width: 980px) {
    .pdp-layout { grid-template-columns: 1fr; }
    .pdp-sidebar { order: -1; }
    .pdp-sidebar-inner { position: static; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; }
    .pdp-sidebar-label { display: none; }
    .pdp-sidebar-inner a { flex: none; white-space: nowrap; }
    .pdp-cta { grid-template-columns: 1fr; padding: 30px 22px; }
}
@media (max-width: 640px) {
    .pdp-title { font-size: 24px; }
    .pdp-block { padding: 22px; }
    .pdp-block-img { margin: -22px -22px 18px; }
}

/* ==================== Панель управления каталогом: тулбар, дропдауны, оверлей ====================
   Общий язык — та же премиальная палитра, что и .premium-view/PDP (--premium-*, см. выше). */

/* ---- Строка "хлебные крошки + Вид/Сортировка" ---- */
.catalog-toolbar-row {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 10px 16px; margin-bottom: 18px;
}
.catalog-toolbar-row .breadcrumb,
.catalog-toolbar-row nav { margin-bottom: 0; flex: 1 1 auto; min-width: 200px; }
.catalog-toolbar-dropdowns { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---- Компактный кастомный дропдаун (Вид / Сортировка) ---- */
.ctlg-dropdown { position: relative; }
.ctlg-dropdown-btn {
    display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
    border: 1px solid var(--premium-line, #e4e8ef); background: #fff; color: var(--premium-ink, #0B1220);
    font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.ctlg-dropdown-btn:hover { border-color: var(--premium-accent-b, #3E7BFF); box-shadow: 0 6px 18px -10px rgba(30,79,224,.35); }
.ctlg-dropdown-btn:active { transform: scale(.98); }
.ctlg-dropdown-btn i.ctlg-lead-icon { color: var(--premium-accent-a, #1E4FE0); font-size: 13px; }
.ctlg-dropdown-btn .ctlg-caret { margin-left: 2px; font-size: 10px; color: var(--premium-ink-soft, #5B6472); transition: transform .18s ease; }
.ctlg-dropdown.open .ctlg-dropdown-btn .ctlg-caret { transform: rotate(180deg); }
.ctlg-dropdown.open .ctlg-dropdown-btn { border-color: var(--premium-accent-a, #1E4FE0); box-shadow: 0 8px 22px -10px rgba(30,79,224,.45); }

.ctlg-dropdown-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px;
    background: #fff; border-radius: 14px; border: 1px solid var(--premium-line, #e4e8ef);
    box-shadow: 0 18px 40px -16px rgba(11,18,32,.28); padding: 6px; opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.98); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ctlg-dropdown.open .ctlg-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ctlg-dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px;
    border: none; background: none; text-align: left; font-size: 13.5px; font-weight: 500;
    color: var(--premium-ink, #0B1220); cursor: pointer; transition: background .14s ease;
}
.ctlg-dropdown-item i { width: 16px; text-align: center; color: var(--premium-ink-soft, #5B6472); font-size: 13px; }
.ctlg-dropdown-item:hover { background: var(--premium-chip-bg, #F4F6FA); }
.ctlg-dropdown-item.active { background: linear-gradient(120deg, var(--premium-accent-a, #1E4FE0), var(--premium-accent-b, #3E7BFF)); color: #fff; }
.ctlg-dropdown-item.active i { color: #fff; }
.ctlg-dropdown-item .ctlg-sort-dir { margin-left: auto; font-size: 11px; opacity: .8; }

/* ---- Строка "Показывать по" / счётчик результатов над списком ---- */
.catalog-results-bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 10px; margin-bottom: 16px;
}
.catalog-results-count { font-size: 13.5px; color: var(--premium-ink-soft, #5B6472); font-weight: 600; }
.catalog-results-count b { color: var(--premium-ink, #0B1220); }

/* ---- Оверлей загрузки, "автомобильная" анимация ---- */
.results-wrapper { position: relative; min-height: 220px; }
.catalog-loading-overlay {
    position: absolute; inset: 0; z-index: 30; background: rgba(255,255,255,.86); backdrop-filter: blur(3px);
    border-radius: 16px; animation: cl-fade-in .18s ease;
}
[data-bs-theme="dark"] .catalog-loading-overlay { background: rgba(18,20,26,.86); }
@keyframes cl-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Оверлей растягивается на всю высоту списка (может быть очень длинным при большом лимите) —
   контент "прилипает" к центру текущей области просмотра (sticky top:50% + сдвиг на свою
   половину высоты), а не к середине всей высоты списка, где его пришлось бы искать скроллом. */
.cl-content {
    position: sticky; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 18px;
}

.cl-scene { position: relative; width: 220px; height: 74px; }
.cl-road {
    position: absolute; left: 0; right: 0; bottom: 14px; height: 4px; border-radius: 2px;
    background: var(--premium-line, #e4e8ef); overflow: hidden;
}
.cl-road-line {
    position: absolute; inset: 0; background-image: repeating-linear-gradient(
        90deg, var(--premium-accent-b, #3E7BFF) 0 16px, transparent 16px 32px
    );
    animation: cl-road-move .6s linear infinite;
}
@keyframes cl-road-move { from { transform: translateX(0); } to { transform: translateX(-32px); } }

.cl-car {
    position: absolute; bottom: 14px; left: 0; font-size: 30px; color: var(--premium-accent-a, #1E4FE0);
    animation: cl-drive 1.15s ease-in-out infinite;
    filter: drop-shadow(0 6px 8px rgba(30,79,224,.25));
}
.cl-car i { display: block; animation: cl-bounce 1.15s ease-in-out infinite; }
.cl-car-shadow {
    position: absolute; left: 6px; bottom: -10px; width: 34px; height: 7px; border-radius: 50%;
    background: rgba(11,18,32,.18); animation: cl-shadow 1.15s ease-in-out infinite;
}
@keyframes cl-drive {
    0% { left: 0; }
    50% { left: calc(100% - 34px); }
    100% { left: 0; }
}
@keyframes cl-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-2deg); }
}
@keyframes cl-shadow {
    0%, 100% { transform: scaleX(1); opacity: .5; }
    50% { transform: scaleX(.75); opacity: .3; }
}

.cl-text { font-size: 14px; font-weight: 600; color: var(--premium-ink-soft, #5B6472); display: flex; align-items: baseline; gap: 2px; }
.cl-dots span { animation: cl-dot-pulse 1.2s ease-in-out infinite; opacity: .2; }
.cl-dots span:nth-child(2) { animation-delay: .15s; }
.cl-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes cl-dot-pulse { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

.cl-loading-more {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 0;
    font-size: 13.5px; font-weight: 600; color: var(--premium-ink-soft, #5B6472);
}
.cl-loading-more i { color: var(--premium-accent-a, #1E4FE0); animation: cl-bounce 1s ease-in-out infinite; }

/* Оверлей ожидания при смене страны на странице модели/комплектаций (селект в
   left_sidebar.php — переход на другой адрес, а не AJAX; см. showNavigatingOverlay()
   в catalog.js). Та же "автомобильная" анимация, что и у catalog-loading-overlay, но во
   весь экран: на этих уровнях каталога блока .results-wrapper в разметке нет. */
.ctlg-nav-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .2s ease;
}
.ctlg-nav-overlay.is-visible { opacity: 1; }
[data-bs-theme="dark"] .ctlg-nav-overlay { background: rgba(18,20,26,.92); }
.ctlg-nav-overlay .cl-content { position: static; transform: none; }

@media (max-width: 767px) {
    .catalog-toolbar-row { flex-direction: column; align-items: stretch; }
    .catalog-toolbar-dropdowns { justify-content: flex-end; }
    .ctlg-dropdown-menu { left: 0; right: auto; }
}

/* ---- Поиск в списках Марка/Модель (сайдбар фильтра) ---- */
.ctlg-combobox { position: relative; }
.ctlg-combobox-input-wrap { position: relative; }
.ctlg-combobox-input-wrap i.ctlg-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px;
    color: var(--premium-ink-soft, #5B6472); pointer-events: none;
}
.ctlg-combobox-input {
    width: 100%; padding: 9px 34px 9px 32px; border-radius: 10px; border: 1px solid var(--premium-line, #e4e8ef);
    font-size: 13.5px; background: #fff; color: var(--premium-ink, #0B1220);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.ctlg-combobox-input:disabled { background: var(--premium-chip-bg, #F4F6FA); color: var(--premium-ink-soft, #5B6472); cursor: not-allowed; }
.ctlg-combobox-input:focus { outline: none; border-color: var(--premium-accent-b, #3E7BFF); box-shadow: 0 0 0 3px rgba(62,123,255,.15); }
.ctlg-combobox-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none;
    color: var(--premium-ink-soft, #5B6472); font-size: 12px; padding: 4px 6px; cursor: pointer; display: none;
}
.ctlg-combobox.has-value .ctlg-combobox-clear { display: block; }
.ctlg-combobox-list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 35; max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid var(--premium-line, #e4e8ef); border-radius: 12px;
    box-shadow: 0 18px 40px -16px rgba(11,18,32,.28); padding: 6px; display: none;
}
.ctlg-combobox.open .ctlg-combobox-list { display: block; }
.ctlg-combobox-option {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
    font-size: 13.5px; color: var(--premium-ink, #0B1220);
}
.ctlg-combobox-option:hover, .ctlg-combobox-option.highlighted { background: var(--premium-chip-bg, #F4F6FA); }
.ctlg-combobox-option.selected { background: linear-gradient(120deg, var(--premium-accent-a, #1E4FE0), var(--premium-accent-b, #3E7BFF)); color: #fff; }
.ctlg-combobox-empty { padding: 12px 10px; font-size: 13px; color: var(--premium-ink-soft, #5B6472); text-align: center; }


/* Кнопка "Показать ещё" под листингом — она же индексируемая ссылка на ?page=N+1
   (см. include/catalog/cars.php и syncCatalogMoreBtn() в js/catalog.js). */
.catalog-more-wrap { display: flex; justify-content: center; margin: 28px 0 8px; }
.catalog-more-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 30px; border-radius: 14px;
    border: 1px solid var(--premium-line, #e4e8ef); background: #fff;
    font-weight: 700; font-size: 15px; color: var(--premium-ink, #131722);
    text-decoration: none; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.catalog-more-btn:hover {
    background: var(--premium-chip-bg, #f4f6fa);
    border-color: var(--premium-accent-a, #1e4fe0);
    color: var(--premium-accent-a, #1e4fe0);
    transform: scale(1.01);
}
.catalog-more-btn.is-loading { opacity: .6; pointer-events: none; }
.catalog-more-btn.is-loading::after {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: catalog-more-spin .7s linear infinite;
}
@keyframes catalog-more-spin { to { transform: rotate(360deg); } }

/* Блок "Частые вопросы" на главной (см. include/top/faq.php) */
.top-faq { padding: 50px 0; }
.top-faq-title { font-size: 28px; font-weight: 800; margin-bottom: 24px; }
.top-faq-list { display: flex; flex-direction: column; gap: 10px; }
.top-faq-item { background: #fff; border: 1px solid var(--premium-line, #e4e8ef); border-radius: 14px; padding: 4px 18px; }
.top-faq-q { cursor: pointer; font-weight: 700; font-size: 16px; padding: 14px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top-faq-q::-webkit-details-marker { display: none; }
.top-faq-q::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--premium-accent-a, #1e4fe0); flex: none; }
.top-faq-item[open] .top-faq-q::after { content: '\2212'; }
.top-faq-a { padding: 0 0 16px; color: var(--premium-ink-soft, #5b6478); line-height: 1.6; }

/* Бейджи на карточке авто (см. carBadgesHtml() в js/catalog.js) */
.car-images, .car-list-image, .premium-photo { position: relative; }
.car-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 3; pointer-events: none; }
.car-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700; line-height: 1; color: #fff; backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(16,24,40,.18); }
.car-badge i { font-size: 10px; }
.car-badge-new { background: rgba(22,163,74,.94); }
.car-badge-price { background: rgba(234,88,12,.94); }
.car-badge-auction { background: rgba(220,38,38,.94); }

/* Страна лота (Корея/Китай/Япония) — маленький чип с флагом поверх фото карточки.
   Верхний левый угол уже занят .car-badges (новое/цена обновлена/торги скоро), поэтому
   ставим в правый — там свободно во всех видах, кроме "Премиум" (см. .premium-chip-country
   ниже — там для страны своя плашка среди остальных характеристик, правый угол занят
   кнопками избранное/поделиться). */
.car-country-badge {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
    background: #fff; box-shadow: 0 2px 8px rgba(16,24,40,.25); border: 1px solid rgba(255,255,255,.6);
    display: flex; align-items: center; justify-content: center;
}
.car-country-badge img { width: 100%; height: 100%; object-fit: cover; }

.table-country-cell { white-space: nowrap; }
.table-country-flag, .table-view img.table-country-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 4px; }

.premium-chip-country img { width: 15px; height: 15px; border-radius: 50%; object-fit: cover; }

/* Счётчик просмотров лота (см. getCarViewsStats() в model/inc/views_tracking.php) */
.cdp-views { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 10px; font-size: 13px; color: var(--premium-ink-soft, #5b6478); }
.cdp-views i { color: var(--premium-accent-a, #1e4fe0); }
.cdp-views-total { opacity: .7; }

/* История изменения цены (грузится отдельным запросом, см. api/get-price-history) */
.cdp-price-history { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--premium-line, #e4e8ef); border-radius: 14px; background: #fff; }
.cdp-price-history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cdp-price-history-title { font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.cdp-price-history-title i { color: var(--premium-accent-a, #1e4fe0); }
.cdp-price-history-delta { font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; }
.cdp-price-history-delta.is-down { color: #16a34a; }
.cdp-price-history-delta.is-up { color: #dc2626; }
.cdp-ph-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.cdp-ph-date { color: var(--premium-ink-soft, #5b6478); }
.cdp-ph-bar { height: 8px; background: var(--premium-chip-bg, #f4f6fa); border-radius: 6px; overflow: hidden; }
.cdp-ph-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #93b4ff, var(--premium-accent-a, #1e4fe0)); border-radius: 6px; }
.cdp-ph-row.is-current .cdp-ph-val { font-weight: 700; }
.cdp-ph-val { white-space: nowrap; }
.cdp-price-history-note { margin-top: 10px; font-size: 11.5px; color: var(--premium-ink-soft, #5b6478); opacity: .85; }

/* Липкая панель с ценой и CTA на странице авто */
/* .container (Bootstrap) на этом же элементе ограничивает и центрирует ширину вместо
   растягивания от края до края — position:fixed;left:0;right:0 остаётся, но реальную
   ширину теперь задаёт .container (100% + max-width по брейкпоинтам + margin:auto), поэтому
   рамка/фон/тень уже не на весь экран. Верхние углы скруглены — нижние вплотную к низу
   экрана, там скругление не нужно. */
.cdp-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff; border: 1px solid var(--premium-line, #e4e8ef); border-bottom: none; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(16,24,40,.10); transform: translateY(110%); transition: transform .25s ease; overflow: hidden; }
.cdp-sticky-bar.is-visible { transform: translateY(0); }
.cdp-sticky-inner { max-width: 1320px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; }
.cdp-sticky-car { min-width: 0; flex: 1; }
.cdp-sticky-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdp-sticky-meta { font-size: 12.5px; color: var(--premium-ink-soft, #5b6478); }
.cdp-sticky-price { display: flex; align-items: baseline; gap: 7px; flex: none; }
.cdp-sticky-price-val { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 700; color: var(--premium-price, #131722); }
.cdp-sticky-price-cur { font-size: 12.5px; color: var(--premium-ink-soft, #5b6478); }
.cdp-sticky-actions { display: flex; gap: 10px; flex: none; }
.cdp-sticky-calc { border: 1px solid var(--premium-line, #e4e8ef); background: #fff; border-radius: 12px; padding: 11px 18px; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cdp-sticky-calc:hover { border-color: var(--premium-accent-a, #1e4fe0); color: var(--premium-accent-a, #1e4fe0); }
.cdp-sticky-cta { border: none; border-radius: 12px; padding: 12px 22px; font-weight: 700; font-size: 14px; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--premium-accent-a, #1e4fe0), var(--premium-accent-b, #6b3df5)); }

/* Стрелки перехода между авто в модалке быстрого просмотра (см. qvNavigate() в js/catalog.js) */
/* Быстрый просмотр: панель действий под фото (qvActionsHtml() в js/catalog.js) */
.qv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.qv-act {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 11px;
    border: 1px solid var(--premium-line, #e4e8ef); background: transparent; color: inherit;
    font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none;
    transition: border-color .2s, color .2s, transform .2s, background .2s;
}
.qv-act i { font-size: 13px; }
.qv-act:hover { border-color: var(--premium-accent-a, #1e4fe0); color: var(--premium-accent-a, #1e4fe0); text-decoration: none; transform: scale(1.01); }
.qv-act.favorite-btn.active, .qv-act.favorite-btn.active i { color: #e0245e; border-color: rgba(224, 36, 94, .4); }
.qv-act.compare-btn.active { color: var(--premium-accent-a, #1e4fe0); border-color: var(--premium-accent-a, #1e4fe0); }
.qv-act-primary, .qv-act-primary:hover {
    margin-left: auto; color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--premium-accent-a, #1e4fe0), var(--premium-accent-b, #3e7bff));
    box-shadow: 0 10px 22px -12px rgba(30, 79, 224, .7);
}
@media (max-width: 640px) { .qv-act-primary { margin-left: 0; width: 100%; justify-content: center; } }
.qvm-nav { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 12px; }
.qvm-nav-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--premium-line, #e4e8ef); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--premium-ink, #131722); }
.qvm-nav-btn:hover:not(:disabled) { border-color: var(--premium-accent-a, #1e4fe0); color: var(--premium-accent-a, #1e4fe0); }
.qvm-nav-btn:disabled { opacity: .35; cursor: default; }
.qvm-nav-pos { font-size: 12.5px; color: var(--premium-ink-soft, #5b6478); min-width: 46px; text-align: center; }

/* Кнопка "на весь экран" над галереей в модалке быстрого просмотра */
.qv-gallery { position: relative; }
.qv-gallery-expand { position: absolute; top: 10px; right: 10px; z-index: 5; width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(11,18,32,.62); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.qv-gallery-expand:hover { background: rgba(11,18,32,.82); }

/* Пресеты периода торгов в фильтре (см. auctionPresetRange() в js/catalog.js) */
.auction-date-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.auction-date-preset { border: 1px solid var(--premium-line, #e4e8ef); background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--premium-ink, #131722); }
.auction-date-preset:hover { border-color: var(--premium-accent-a, #1e4fe0); color: var(--premium-accent-a, #1e4fe0); }
.auction-date-preset.active { background: var(--premium-accent-a, #1e4fe0); border-color: var(--premium-accent-a, #1e4fe0); color: #fff; }
.auction-date-preset-reset { color: var(--premium-ink-soft, #5b6478); }

/* ==================== ТЁМНАЯ ТЕМА ====================
   Включается атрибутом data-theme="dark" на <html> (переключатель в шапке, см.
   include/header.php; выбор хранится в localStorage + cookie, чтобы сервер отдавал уже
   правильную тему и не было "вспышки" светлого фона до применения JS).

   Переопределяем в первую очередь переменные — на них завязана бОльшая часть вёрстки.
   Дальше — только те поверхности, где в проекте цвет задан литералом (#fff и т.п.). */
html[data-theme="dark"] {
    --primary-color: #5b8cff;
    --primary-hover: #7ba2ff;
    --secondary-color: #9aa4b2;
    --bg-light: #10131a;
    --bg-white: #171b24;
    --border-color: #262b36;
    --text-dark: #e7eaf0;
    --text-muted: #9aa4b2;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.55);

    --filter-accent: #5b8cff;
    --filter-accent-b: #7ba2ff;
    --filter-ink: #e7eaf0;
    --filter-ink-soft: #9aa4b2;
    --filter-line: #262b36;

    --premium-ink: #e7eaf0;
    --premium-ink-soft: #9aa4b2;
    --premium-line: #262b36;
    --premium-chip-bg: #1e2430;
    --premium-accent-a: #5b8cff;
    --premium-accent-b: #8b6bff;
    --premium-price: #ffffff;

    --surface: #171b24;
    --surface-2: #10131a;
    --text: #e7eaf0;
    --text-2: #9aa4b2;
    --border: #262b36;
    --accent: #ff5a5a;

    color-scheme: dark;
}

html[data-theme="dark"] body { background-color: var(--bg-light); color: var(--text-dark); }

/* Поверхности, где в вёрстке зашит белый/светлый фон */
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .car-card,
html[data-theme="dark"] .car-list-item,
html[data-theme="dark"] .premium-card,
html[data-theme="dark"] .mc-card,
html[data-theme="dark"] .qvm-modal,
html[data-theme="dark"] .cdp-description-card,
html[data-theme="dark"] .cdp-price-history,
html[data-theme="dark"] .cdp-sticky-bar,
html[data-theme="dark"] .top-faq-item,
html[data-theme="dark"] .catalog-more-btn,
html[data-theme="dark"] .auction-date-preset,
html[data-theme="dark"] .qvm-nav-btn,
html[data-theme="dark"] .cdp-sticky-calc,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .ctlg-dropdown-btn,
html[data-theme="dark"] .ctlg-dropdown-menu,
html[data-theme="dark"] .ctlg-combobox-input-wrap,
html[data-theme="dark"] .ctlg-combobox-input,
html[data-theme="dark"] .ctlg-combobox-list,
html[data-theme="dark"] .item-slide,
html[data-theme="dark"] .cp-card,
html[data-theme="dark"] .mobile-nav-panel,
html[data-theme="dark"] .cdp-price-calc-btn,
html[data-theme="dark"] .cdp-photo-request-btn,
html[data-theme="dark"] .cdp-auction-sheet-btn,
html[data-theme="dark"] .cmp-empty,
html[data-theme="dark"] .cmp-action-btn,
html[data-theme="dark"] .cmp-insights,
html[data-theme="dark"] .cmp-insight-icon,
html[data-theme="dark"] .cmp-winner-score,
html[data-theme="dark"] .cmp-table-card {
    background: var(--bg-white);
    color: var(--text-dark);
    border-color: var(--border-color);
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table-view table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-dark);
    --bs-table-border-color: var(--border-color);
    color: var(--text-dark);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: #1e2430; color: var(--text-dark); }

html[data-theme="dark"] .feedbacks-list { background: #0d1016; }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background: #1e2430; color: var(--text-dark); }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] .form-control::placeholder { color: #6b7482; }
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
html[data-theme="dark"] .badge.bg-light { background: #232936 !important; color: var(--text-muted) !important; }
html[data-theme="dark"] .mc-card-img,
html[data-theme="dark"] .cdp-no-image { background: #1e2430; }
html[data-theme="dark"] a { color: var(--primary-color); }
html[data-theme="dark"] .mobile-nav-close:hover { background: #2a3040; }
/* .premium-icon-btn (сердце/поделиться поверх фото карточки) — сам кружок всегда
   полупрозрачно-белый, независимо от темы (лежит на фото, а не на фоне страницы), но иконка
   внутри брала --premium-ink, который в тёмной теме становится светлым — белая иконка на
   белом кружке. Возвращаем тёмный цвет иконки явно, кружок не меняется. */
html[data-theme="dark"] .premium-icon-btn i { color: #131722; }
html[data-theme="dark"] .premium-icon-btn.active i { color: #ff3b5c; }
/* Стрелки галереи на странице автомобиля — тот же белый кружок поверх фото, тот же
   сломанный var(--premium-ink) для иконки внутри. */
html[data-theme="dark"] .cdp-gallery .owl-nav button.owl-prev,
html[data-theme="dark"] .cdp-gallery .owl-nav button.owl-next { color: #131722 !important; }
/* .cdp-badge-dark — всегда должен быть сплошной тёмный чип (например номер лота), но фон
   брал --premium-ink, а он в тёмной теме специально становится светлым (это же основной
   цвет текста) — получался светлый фон с белым текстом. Возвращаем фиксированный тёмный. */
html[data-theme="dark"] .cdp-badge-dark { background: #10131a; color: #fff; }
/* Модалка быстрого просмотра: нижняя панель с кнопками была захардкожена в светлый (#FBFBFD),
   .qvm-btn-dark брал фон из --premium-ink (в тёмной теме — светлый, тот же приём, что и
   выше), .qvm-btn-light был захардкожен в светло-серый — итого весь футер и обе кнопки
   оставались светлыми поверх тёмной модалки. */
html[data-theme="dark"] .modal-foot { background: var(--bg-white); border-top-color: var(--border-color); }
html[data-theme="dark"] .modal-close { background: #232936; }
html[data-theme="dark"] .modal-close:hover { background: #2b3342; }
html[data-theme="dark"] .qvm-btn-dark { background: #2f3d5c; color: #fff; }
html[data-theme="dark"] .qvm-btn-dark:hover { background: #3a4a6e; }
html[data-theme="dark"] .qvm-btn-light { background: var(--premium-chip-bg); color: var(--premium-ink); }
html[data-theme="dark"] .qvm-btn-light:hover { background: #262d3c; }
/* Детализация расходов в модалке расчёта (.pd-row) — строки были захардкожены в белый/почти
   белый, а итоговая строка брала фон из --premium-ink (в тёмной теме светлый) с белым
   текстом поверх — та же история, что и с .cdp-badge-dark/.qvm-btn-dark выше. */
html[data-theme="dark"] .pd-row { background: var(--bg-white); }
html[data-theme="dark"] .pd-row:nth-child(even) { background: #1c212b; }
html[data-theme="dark"] .pd-row.pd-total { background: #0d1016 !important; }
html[data-theme="dark"] .fx-item { background: var(--premium-chip-bg); }
/* Страницы входа/регистрации/восстановления пароля (.auth-*) — не были адаптированы вовсе. */
html[data-theme="dark"] .auth-page { background: var(--bg-white); }
html[data-theme="dark"] .auth-visual { background: linear-gradient(155deg, #182238 0%, #141a28 55%, var(--bg-white) 100%); }
html[data-theme="dark"] .auth-visual-badge,
html[data-theme="dark"] .auth-benefit-icon { background: var(--premium-chip-bg); }
html[data-theme="dark"] .auth-field input,
html[data-theme="dark"] .auth-checkbox-box { background: #10131a; border-color: var(--premium-line); color: var(--premium-ink); }
html[data-theme="dark"] .auth-field input:focus { background: #171b24; }
html[data-theme="dark"] .auth-field input::placeholder { color: #6b7482; }
html[data-theme="dark"] .auth-banner-error { background: #3a1a1e; color: #ff8a92; }
html[data-theme="dark"] .auth-banner-success { background: #163024; color: #4ade80; }
html[data-theme="dark"] .auth-success-icon { background: #163024; color: #4ade80; }
/* Таблица сравнения (/compare/, /compare/share/...) — "почти белые" #fbfcff/#f4f6fa под
   первую колонку и чётные строки, светлая полупрозрачная кнопка удаления, синяя подсветка
   лучшего значения по строке — переводим на тёмную палитру. */
html[data-theme="dark"] .cmp-table th:first-child, html[data-theme="dark"] .cmp-table td:first-child,
html[data-theme="dark"] .cmp-table thead th { background: #171b24; }
html[data-theme="dark"] .cmp-table tbody tr:nth-child(even) td:not(:first-child) { background: #1a1f29; }
html[data-theme="dark"] .cmp-table tbody tr:nth-child(even) td:first-child { background: #1e2430; }
html[data-theme="dark"] .cmp-table tr.cmp-row-comment textarea { background: #171b24; }
html[data-theme="dark"] .cmp-table tr.cmp-row-comment textarea:focus { background: #1a2030; }
html[data-theme="dark"] .cmp-table td.cmp-cell-best { background: rgba(91,140,255,.14) !important; }
html[data-theme="dark"] .cmp-remove-btn { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .cmp-winner-banner { background: linear-gradient(120deg, rgba(91,140,255,.12), rgba(139,107,255,.12)); border-color: rgba(91,140,255,.25); }
/* Переключатель "Физлицам/Юрлицам" в модалке расчёта — тот же приём с --premium-ink как
   фоном активной вкладки, что и .cdp-badge-dark/.qvm-btn-dark выше: в тёмной теме ink светлый,
   получались белые буквы на светлом фоне. */
html[data-theme="dark"] .pd-tabs { background: #10131a; }
html[data-theme="dark"] .pd-tab.active { background: #2f3d5c; color: #fff; }
/* Крестик закрытия модалок (.modal-close) — SVG со штрихом, зашитым атрибутом stroke="#0B1220"
   прямо в разметке (views/template/include/catalog/modals.php), а не через currentColor —
   фон кружка мы уже красим тёмным, а сам крестик оставался тёмным на тёмном. CSS-правило для
   stroke перебивает inline-атрибут (у presentation attributes низкий приоритет). */
html[data-theme="dark"] .modal-close svg path { stroke: #e7eaf0; }
/* .premium-cta — это <a>, глобальное правило выше перекрашивает её текст в синий поверх
   собственного сине-фиолетового градиента фона кнопки (текст сливается с фоном) — возвращаем
   белый явно, с более высокой специфичностью, чем у html[data-theme="dark"] a. */
html[data-theme="dark"] .premium-cta,
html[data-theme="dark"] .premium-cta:hover { color: #fff; }
html[data-theme="dark"] .cdp-breadcrumb a, html[data-theme="dark"] .breadcrumb a { color: var(--primary-color); }

/* Скелетоны — на тёмном фоне светлый шиммер выглядит вспышкой */
html[data-theme="dark"] .rec-skel-img,
html[data-theme="dark"] .rec-skel-line,
html[data-theme="dark"] .mcl-card-img,
html[data-theme="dark"] .mcl-card-line,
html[data-theme="dark"] .summary-skeleton-line,
html[data-theme="dark"] .summary-skeleton-table {
    background: linear-gradient(90deg, #1b212c 25%, #232a37 37%, #1b212c 63%);
    background-size: 400% 100%;
}

/* Переключатель темы в шапке */
.theme-toggle {
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-color);
    background: transparent; color: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { border-color: var(--primary-color); color: var(--primary-color); }
.theme-toggle .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }

/* Тёмная тема: шапка/подменю/футер (в вёрстке цвета заданы литералами) */
html[data-theme="dark"] .site-header { background: rgba(16, 19, 26, .92); border-bottom-color: var(--border-color); }
html[data-theme="dark"] .site-nav a,
html[data-theme="dark"] .hdr-icon-btn { color: var(--text-dark); }
html[data-theme="dark"] .hdr-dropdown-panel { background: var(--bg-white); border-color: var(--border-color); }
html[data-theme="dark"] .hdr-dropdown-panel a { color: var(--text-dark); }
html[data-theme="dark"] .site-footer { background: #0a0d13; }
/* Иконка переключателя: показываем ровно одну, независимо от display у .fas */
.theme-toggle i { font-size: 15px; line-height: 1; }
.theme-toggle .theme-icon-dark { display: none !important; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline-block !important; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: none !important; }

/* ===== Профиль: сохранённые поиски, уведомления, анкета ===== */
.ctlg-save-search { border: 1px solid var(--premium-line, #e4e8ef); background: #fff; border-radius: 12px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--premium-ink, #131722); }
.ctlg-save-search:hover { border-color: var(--premium-accent-a, #1e4fe0); color: var(--premium-accent-a, #1e4fe0); }
.ctlg-save-search.is-saved { border-color: #16a34a; color: #16a34a; }

.hdr-notify { position: relative; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; border: 1px solid transparent; }
.hdr-notify:hover { border-color: var(--premium-line, #e4e8ef); color: var(--premium-accent-a, #1e4fe0); }
.hdr-notify-badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.saved-search-list { display: flex; flex-direction: column; gap: 10px; }
.saved-search-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--premium-line, #e4e8ef); border-radius: 14px; background: #fff; }
.saved-search-main { flex: 1; min-width: 0; }
.saved-search-title { font-weight: 700; font-size: 15px; color: var(--premium-ink, #131722); text-decoration: none; }
.saved-search-title:hover { color: var(--premium-accent-a, #1e4fe0); }
.saved-search-meta { font-size: 12.5px; color: var(--premium-ink-soft, #5b6478); margin-top: 3px; }
.saved-search-notify { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--premium-ink-soft, #5b6478); cursor: pointer; white-space: nowrap; }
.saved-search-delete { border: none; background: transparent; color: #b6bcc8; cursor: pointer; padding: 6px; }
.saved-search-delete:hover { color: #dc2626; }

.notify-list { display: flex; flex-direction: column; gap: 8px; }
.notify-item { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--premium-line, #e4e8ef); border-radius: 14px; background: #fff; text-decoration: none; color: inherit; }
.notify-item:hover { border-color: var(--premium-accent-a, #1e4fe0); }
.notify-item.is-unread { background: #f4f7ff; border-color: #cfe0ff; }
.notify-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--premium-chip-bg, #f4f6fa); color: var(--premium-accent-a, #1e4fe0); display: flex; align-items: center; justify-content: center; }
.notify-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notify-title { font-weight: 700; font-size: 14.5px; }
.notify-text { font-size: 13px; color: var(--premium-ink-soft, #5b6478); }
.notify-date { font-size: 11.5px; color: #9aa4b2; }

.prefs-form { max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
.prefs-row { display: flex; flex-direction: column; gap: 8px; }
.prefs-row > label { font-weight: 700; font-size: 14px; }
.prefs-row input[type="number"], .prefs-row input[type="text"] { border: 1px solid var(--premium-line, #e4e8ef); border-radius: 10px; padding: 10px 12px; font-size: 14px; max-width: 320px; }
.prefs-inline { display: flex; gap: 10px; }
.prefs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prefs-chip { position: relative; }
.prefs-chip input { position: absolute; opacity: 0; pointer-events: none; }
.prefs-chip span { display: inline-block; padding: 8px 14px; border: 1px solid var(--premium-line, #e4e8ef); border-radius: 10px; font-size: 13.5px; cursor: pointer; background: #fff; }
.prefs-chip input:checked + span { background: var(--premium-accent-a, #1e4fe0); border-color: var(--premium-accent-a, #1e4fe0); color: #fff; }
.prefs-actions { display: flex; align-items: center; gap: 14px; }
.prefs-status.is-ok { color: #16a34a; font-size: 13.5px; }
.prefs-status.is-error { color: #dc2626; font-size: 13.5px; }

html[data-theme="dark"] .saved-search-item,
html[data-theme="dark"] .notify-item,
html[data-theme="dark"] .prefs-chip span,
html[data-theme="dark"] .ctlg-save-search { background: var(--bg-white); border-color: var(--border-color); color: var(--text-dark); }
html[data-theme="dark"] .notify-item.is-unread { background: #1a2233; border-color: #2b3547; }

/* ===== Избранное: папки и заметки ===== */
.fav-folders-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 12px 14px;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea); border-radius: 10px;
}
.fav-folders-label { margin: 0; font-weight: 600; color: var(--text-2, #5b6570); }
.fav-folders-filter {
    min-width: 200px; padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.fav-folder-add, .fav-folder-delete {
    padding: 7px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.fav-folder-add:hover { border-color: var(--accent, #d32f2f); color: var(--accent, #d32f2f); }
.fav-folder-delete { color: #b3261e; }
.fav-folder-delete:hover { background: #fdecea; border-color: #b3261e; }

.fav-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fav-note-btn {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text-2, #7a838d);
}
.fav-note-btn:hover { border-color: var(--accent, #d32f2f); color: var(--accent, #d32f2f); }
.fav-note-btn.has-note { border-color: #f0a500; color: #f0a500; background: #fff8e6; }
.fav-folder-select {
    flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 13px; border-radius: 8px;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.fav-note-text {
    margin-top: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4;
    color: var(--text-2, #5b6570); background: var(--surface-2, #f6f7f9);
    border-left: 3px solid #f0a500; border-radius: 0 6px 6px 0;
    white-space: pre-wrap; word-break: break-word;
}
[data-theme="dark"] .fav-note-btn.has-note { background: #3a3117; }
[data-theme="dark"] .fav-folder-delete:hover { background: #3a1f1d; }

/* ===== Подбор по бюджету (/budget/) ===== */
.budget-page { max-width: 1280px; margin: 0 auto; }
.budget-title { margin-bottom: 10px; }
.budget-lead { max-width: 780px; color: var(--text-2, #5b6570); margin-bottom: 22px; }
.budget-form {
    padding: 18px; margin-bottom: 20px; border-radius: 12px;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea);
}
.budget-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.budget-preset {
    padding: 8px 14px; border-radius: 20px; cursor: pointer; font-size: 14px;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.budget-preset:hover { border-color: var(--accent, #d32f2f); color: var(--accent, #d32f2f); }
.budget-preset.is-active { background: var(--accent, #d32f2f); border-color: var(--accent, #d32f2f); color: #fff; }
.budget-fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.budget-field { display: flex; flex-direction: column; gap: 6px; }
.budget-field > span { font-size: 13px; font-weight: 600; color: var(--text-2, #5b6570); }
.budget-field input[type="number"] {
    width: 190px; padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.budget-countries { display: flex; gap: 14px; padding-bottom: 4px; }
.budget-country { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.budget-submit {
    padding: 11px 26px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 600;
    background: var(--accent, #d32f2f); color: #fff;
}
.budget-submit:hover { filter: brightness(1.07); }
.budget-status { margin-bottom: 18px; font-size: 15px; }
.budget-status.is-loading { color: var(--text-2, #5b6570); }
.budget-status.is-ok { color: #1e7a3c; }
.budget-status.is-error, .budget-status.is-empty { color: #b3261e; }
.budget-models { margin-top: 36px; }
.budget-models-hint { color: var(--text-2, #5b6570); font-size: 14px; }
.budget-models-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px;
}
.budget-model {
    display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 10px;
    text-decoration: none; background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e6ea); color: var(--text, #222);
}
.budget-model:hover { border-color: var(--accent, #d32f2f); }
.budget-model-name { font-weight: 600; }
.budget-model-price { color: var(--accent, #d32f2f); font-weight: 600; }
.budget-model-meta { font-size: 13px; color: var(--text-2, #5b6570); }

/* ===== Калькулятор растаможки (/calculator/) ===== */
.calc-page { max-width: 1100px; margin: 0 auto; }
.calc-title { margin-bottom: 10px; }
.calc-lead { max-width: 760px; color: var(--text-2, #5b6570); margin-bottom: 24px; }
.calc-layout { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 28px; align-items: start; }
.calc-form {
    padding: 20px; border-radius: 12px;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea);
}
.calc-row { display: flex; gap: 14px; margin-bottom: 14px; }
.calc-field { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calc-field > span { font-size: 13px; font-weight: 600; color: var(--text-2, #5b6570); }
.calc-field > span em { font-style: normal; font-weight: 400; opacity: .75; }
.calc-field input[type="number"], .calc-field select {
    width: 100%; padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.calc-field-check { flex-direction: row; align-items: center; gap: 8px; align-self: flex-end; padding-bottom: 9px; }
.calc-field-check input { width: auto; }
.calc-field-check > span { font-weight: 400; }
.calc-submit {
    width: 100%; padding: 12px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 600;
    background: var(--accent, #d32f2f); color: #fff;
}
.calc-submit:hover { filter: brightness(1.07); }
.calc-submit:disabled { opacity: .6; cursor: default; }
.calc-note { margin: 12px 0 0; font-size: 12px; color: var(--text-2, #7a838d); }
.calc-total { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.calc-total-item {
    flex: 1 1 200px; padding: 16px 18px; border-radius: 12px;
    background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea);
}
.calc-total-item.is-primary { border-color: var(--accent, #d32f2f); }
.calc-total-label { display: block; font-size: 13px; color: var(--text-2, #5b6570); margin-bottom: 6px; }
.calc-total-value { display: block; font-size: 26px; font-weight: 700; }
.calc-total-item.is-primary .calc-total-value { color: var(--accent, #d32f2f); }
.calc-breakdown { width: 100%; border-collapse: collapse; }
.calc-breakdown th, .calc-breakdown td {
    padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border, #e3e6ea);
}
.calc-breakdown th { font-size: 13px; color: var(--text-2, #5b6570); font-weight: 600; }
.calc-breakdown td:not(:first-child), .calc-breakdown th:not(:first-child) { text-align: right; white-space: nowrap; }
.calc-cta { margin-top: 18px; color: var(--text-2, #5b6570); }
.calc-delivery { margin-top: 20px; }
.calc-delivery-title { margin: 0 0 4px; font-weight: 800; font-size: 15px; }
.calc-delivery-hint { margin: 0 0 10px; font-size: 13px; color: var(--text-2, #5b6570); }
.calc-breakdown tr.calc-row-delivery td { color: var(--premium-accent-a, #1e4fe0); font-weight: 700; }
.calc-cta-link { font-weight: 600; }
@media (max-width: 900px) { .calc-layout { grid-template-columns: 1fr; } }

/* ===== Статистика реальных цен продаж (/stats/) ===== */
.stats-page { max-width: 1180px; margin: 0 auto; }
.stats-crumbs { font-size: 14px; color: var(--text-2, #7a838d); margin-bottom: 10px; }
.stats-title { margin-bottom: 10px; }
.stats-lead { max-width: 800px; color: var(--text-2, #5b6570); margin-bottom: 22px; }
.stats-picker {
    display: flex; gap: 16px; flex-wrap: wrap; padding: 16px; margin-bottom: 20px;
    border-radius: 12px; background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea);
}
.stats-field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.stats-field > span { font-size: 13px; font-weight: 600; color: var(--text-2, #5b6570); }
.stats-field select {
    padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.stats-status { margin-bottom: 16px; }
.stats-status.is-loading { color: var(--text-2, #5b6570); }
.stats-status.is-error, .stats-status.is-empty { color: #b3261e; }
.stats-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 30px; }
.stats-card {
    padding: 16px 18px; border-radius: 12px;
    background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea);
}
.stats-card.is-primary { border-color: var(--accent, #d32f2f); }
.stats-card-label { display: block; font-size: 13px; color: var(--text-2, #5b6570); margin-bottom: 6px; }
.stats-card-value { display: block; font-size: 21px; font-weight: 700; }
.stats-card.is-primary .stats-card-value { color: var(--accent, #d32f2f); }
.stats-block { margin-bottom: 34px; }
.stats-block h2 { font-size: 20px; margin-bottom: 6px; }
.stats-hint { font-size: 14px; color: var(--text-2, #7a838d); margin-bottom: 12px; }
.stats-table { width: 100%; border-collapse: collapse; }
.stats-table td, .stats-table th { padding: 8px 10px; border-bottom: 1px solid var(--border, #e3e6ea); }
.stats-table th { text-align: left; font-size: 13px; color: var(--text-2, #5b6570); }
.stats-key { white-space: nowrap; font-weight: 600; width: 1%; }
.stats-count { white-space: nowrap; color: var(--text-2, #7a838d); font-size: 13px; width: 1%; }
.stats-value { white-space: nowrap; font-weight: 600; text-align: right; width: 1%; }
.stats-chart { width: 100%; }
.stats-bar { display: block; height: 10px; border-radius: 5px; background: var(--surface-2, #eef0f3); overflow: hidden; }
.stats-bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--accent, #d32f2f); }
.stats-scroll { overflow-x: auto; }
.stats-recent { min-width: 720px; }
.stats-cta { margin-top: 10px; }
.stats-cta-link { font-weight: 600; }

/* ===== Тематические подборки (/do-3-mln/, /gibrid/ и т.п.) ===== */
.collection-page { max-width: 1280px; margin: 0 auto; }
.collection-title { margin-bottom: 10px; }
.collection-lead { max-width: 820px; color: var(--text-2, #5b6570); margin-bottom: 12px; }
.collection-count { color: var(--text-2, #5b6570); margin-bottom: 20px; }
.collection-text { max-width: 860px; margin: 30px 0; color: var(--text-2, #5b6570); line-height: 1.6; }
.collection-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border, #e3e6ea); }
.collection-related h2 { font-size: 20px; margin-bottom: 14px; }
.collection-related ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.collection-related a {
    display: inline-block; padding: 8px 14px; border-radius: 20px; text-decoration: none;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea); color: var(--text, #222);
}
.collection-related a:hover { border-color: var(--accent, #d32f2f); color: var(--accent, #d32f2f); }
.collection-empty {
    padding: 18px 20px; border-radius: 10px; margin-bottom: 22px;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea);
    color: var(--text-2, #5b6570);
}

/* ===== Перелинковка со страницы модели ===== */
.model-links { margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--border, #e3e6ea); }
.model-links-primary {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px;
    text-decoration: none; font-weight: 600; margin-bottom: 16px;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea); color: var(--text, #222);
}
.model-links-primary:hover { border-color: var(--accent, #d32f2f); color: var(--accent, #d32f2f); }
.model-links-collections { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.model-links-label { color: var(--text-2, #7a838d); font-size: 14px; }
.model-links-collections a {
    padding: 6px 12px; border-radius: 16px; font-size: 14px; text-decoration: none;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea); color: var(--text, #222);
}
.model-links-collections a:hover { border-color: var(--accent, #d32f2f); color: var(--accent, #d32f2f); }

/* ===== Блок гарантий ===== */
.guarantees { margin: 46px 0; }
.guarantees-title { font-size: 24px; margin-bottom: 20px; }
.guarantees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.guarantee {
    padding: 20px; border-radius: 12px;
    background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea);
}
.guarantee-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px; margin-bottom: 12px;
    background: var(--surface-2, #f6f7f9); color: var(--accent, #d32f2f); font-size: 18px;
}
.guarantee-name { font-size: 17px; margin-bottom: 8px; }
.guarantee-text { font-size: 14px; line-height: 1.5; color: var(--text-2, #5b6570); margin: 0; }

/* ===== Лента заявок ===== */
.orders-feed {
    margin: 40px 0; padding: 20px 22px; border-radius: 12px;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea);
}
.orders-feed-title { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 14px; }
.orders-feed-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #2ea44f;
    box-shadow: 0 0 0 0 rgba(46,164,79,.6); animation: ordersPulse 2s infinite;
}
@keyframes ordersPulse {
    70% { box-shadow: 0 0 0 8px rgba(46,164,79,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,164,79,0); }
}
@media (prefers-reduced-motion: reduce) { .orders-feed-dot { animation: none; } }
.orders-feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.orders-feed-item { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 14px; }
.orders-feed-name { font-weight: 600; }
.orders-feed-action { color: var(--text-2, #7a838d); }
.orders-feed-car { font-weight: 600; }
.orders-feed-ago { color: var(--text-2, #9aa3ac); margin-left: auto; white-space: nowrap; }

/* ===== Квиз-подбор (/kviz/) ===== */
.quiz-page { max-width: 900px; margin: 0 auto; }
.quiz-title { margin-bottom: 10px; }
.quiz-lead { color: var(--text-2, #5b6570); margin-bottom: 24px; }
.quiz {
    padding: 24px; border-radius: 14px;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea);
}
.quiz-progress { height: 6px; border-radius: 3px; background: var(--border, #e3e6ea); overflow: hidden; }
.quiz-progress-bar { height: 100%; width: 0; border-radius: 3px; background: var(--accent, #d32f2f); transition: width .25s; }
.quiz-step-counter { margin: 12px 0 20px; font-size: 13px; color: var(--text-2, #7a838d); }
.quiz-step { display: none; }
.quiz-step.is-active { display: block; }
.quiz-question { font-size: 22px; margin-bottom: 8px; }
.quiz-hint { color: var(--text-2, #7a838d); font-size: 14px; margin-bottom: 18px; }
.quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.quiz-option {
    padding: 16px 18px; border-radius: 10px; cursor: pointer; text-align: left; font-size: 15px;
    background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea); color: var(--text, #222);
}
.quiz-option:hover { border-color: var(--accent, #d32f2f); }
.quiz-option.is-chosen { border-color: var(--accent, #d32f2f); box-shadow: inset 0 0 0 1px var(--accent, #d32f2f); }
.quiz-back { border: 0; background: none; cursor: pointer; color: var(--text-2, #7a838d); padding: 6px 0; }
.quiz-back:hover { color: var(--accent, #d32f2f); }
.quiz-result { margin-bottom: 24px; }
.quiz-result-count, .quiz-result-loading, .quiz-result-empty { color: var(--text-2, #5b6570); margin-bottom: 14px; }
.quiz-cars { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.quiz-car {
    display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; text-decoration: none;
    background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea); color: var(--text, #222);
}
.quiz-car:hover { border-color: var(--accent, #d32f2f); }
.quiz-car img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.quiz-car-name { font-weight: 600; font-size: 14px; }
.quiz-car-meta { font-size: 12px; color: var(--text-2, #7a838d); }
.quiz-car-price { font-weight: 700; color: var(--accent, #d32f2f); }
.quiz-result-more { font-weight: 600; }
.quiz-form { padding: 20px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea); }
.quiz-form-title { font-size: 18px; margin-bottom: 6px; }
.quiz-form-hint { font-size: 14px; color: var(--text-2, #7a838d); margin-bottom: 14px; }
.quiz-form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.quiz-form input, .quiz-form textarea {
    flex: 1 1 200px; padding: 10px 12px; border-radius: 8px; width: 100%;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.quiz-form textarea { margin-bottom: 12px; }
.quiz-submit {
    padding: 12px 26px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 600;
    background: var(--accent, #d32f2f); color: #fff;
}
.quiz-submit:disabled { opacity: .6; cursor: default; }
.quiz-form-status { margin: 10px 0 0; font-size: 14px; }
.quiz-form-status.is-ok { color: #1e7a3c; }
.quiz-form-status.is-error { color: #b3261e; }

/* ===== Trade-in (/trade-in/) ===== */
.tradein-page { max-width: 1100px; margin: 0 auto; }
.tradein-title { margin-bottom: 10px; }
.tradein-lead { max-width: 780px; color: var(--text-2, #5b6570); margin-bottom: 24px; }
.tradein-layout { display: grid; grid-template-columns: minmax(320px, 1.4fr) 1fr; gap: 28px; align-items: start; }
.tradein-form {
    padding: 22px; border-radius: 12px;
    background: var(--surface-2, #f6f7f9); border: 1px solid var(--border, #e3e6ea);
}
.tradein-section { font-size: 17px; margin: 20px 0 12px; }
.tradein-section:first-child { margin-top: 0; }
.tradein-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tradein-field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tradein-field > span { font-size: 13px; font-weight: 600; color: var(--text-2, #5b6570); }
.tradein-form input, .tradein-form select, .tradein-form textarea {
    padding: 10px 12px; border-radius: 8px; width: 100%;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.tradein-form textarea { margin-bottom: 14px; }
.tradein-submit {
    padding: 12px 28px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 600;
    background: var(--accent, #d32f2f); color: #fff;
}
.tradein-submit:disabled { opacity: .6; cursor: default; }
.tradein-status { margin: 10px 0 0; font-size: 14px; }
.tradein-status.is-ok { color: #1e7a3c; }
.tradein-status.is-error { color: #b3261e; }
.tradein-side { padding: 22px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea); }
.tradein-side h2 { font-size: 18px; margin-bottom: 14px; }
.tradein-steps { padding-left: 20px; margin: 0 0 16px; }
.tradein-steps li { margin-bottom: 10px; color: var(--text-2, #5b6570); line-height: 1.5; }
.tradein-note { font-size: 13px; color: var(--text-2, #9aa3ac); margin-bottom: 14px; }
.tradein-calc-link { font-weight: 600; }
@media (max-width: 900px) { .tradein-layout { grid-template-columns: 1fr; } }

/* ===== Запрос фото/видео по лоту =====
   Стоит под галереей, рядом с .cdp-auction-sheet-btn (там же, когда он есть) — та же ширина
   в 100% колонки и те же цвета/отступы, что и у неё, вместо своей отдельной палитры
   (--surface/--border/--text), которая не совпадала с остальными кнопками страницы авто. */
.cdp-photo-request-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px;
    padding: 12px; border-radius: 12px; border: 1px solid var(--premium-line); background: #fff;
    color: var(--premium-ink); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.cdp-photo-request-btn:hover { border-color: var(--premium-accent-a); color: var(--premium-accent-a); background: var(--premium-chip-bg); }
.photo-request-modal {
    display: none; position: fixed; inset: 0; z-index: 1080; padding: 20px;
    background: rgba(0, 0, 0, .55); overflow-y: auto;
}
.photo-request-modal.active { display: flex; align-items: center; justify-content: center; }
.photo-request-dialog {
    position: relative; width: 100%; max-width: 520px; padding: 26px; border-radius: 14px;
    background: var(--surface, #fff); color: var(--text, #222);
}
.photo-request-close {
    position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px;
    border: 0; cursor: pointer; background: var(--surface-2, #f6f7f9); color: var(--text-2, #5b6570);
}
.photo-request-title { font-size: 20px; margin-bottom: 8px; }
.photo-request-lead { font-size: 14px; color: var(--text-2, #7a838d); margin-bottom: 16px; }
.photo-request-checks { display: grid; gap: 8px; margin-bottom: 16px; }
.photo-request-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.photo-request-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.photo-request-modal input[type="text"],
.photo-request-modal input[type="tel"],
.photo-request-modal textarea {
    flex: 1 1 180px; width: 100%; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); color: var(--text, #222);
}
.photo-request-modal textarea { margin-bottom: 14px; }
.photo-request-submit {
    width: 100%; padding: 12px; border: 0; border-radius: 8px; cursor: pointer;
    font-weight: 600; background: var(--accent, #d32f2f); color: #fff;
}
.photo-request-submit:disabled { opacity: .6; cursor: default; }
.photo-request-status { margin: 10px 0 0; font-size: 14px; }
.photo-request-status.is-ok { color: #1e7a3c; }
.photo-request-status.is-error { color: #b3261e; }

/* ===== "Сервисы" — выпадающее меню внутри основной навигации ===== */
/* Кнопка должна выглядеть и вести себя как соседние пункты меню, поэтому повторяет
   их размеры и подчёркивание при наведении (.site-nav-desktop a). */
.site-nav-services-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--premium-ink);
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.site-nav-services-toggle:hover,
.site-nav-services.open .site-nav-services-toggle {
    background: var(--premium-chip-bg);
    color: var(--premium-accent-a);
}
.site-nav-services-toggle::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--premium-accent-a), var(--premium-accent-b));
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-nav-services-toggle:hover::after,
.site-nav-services.open .site-nav-services-toggle::after { transform: scaleX(1); }
.site-nav-services.open .hdr-caret { transform: rotate(180deg); }
.hdr-caret { transition: transform .2s ease; }

/* ===== Подвал: блок "Подписывайтесь" (в колонке со скачиванием приложения) ===== */
.footer-subscribe-title { margin-top: 26px !important; }
.footer-subscribe { display: flex; flex-direction: column; gap: 10px; }
.footer-subscribe-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9AA3B2;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: color .2s;
}
.footer-subscribe-link i {
    width: 18px;
    text-align: center;
    font-size: 16px;
    color: var(--premium-accent-b);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.footer-subscribe-link:hover { color: #fff; }
.footer-subscribe-link:hover i { transform: scale(1.15); }

/* ===== Всплывающее уведомление (тост) — window.showToast() в catalog.js =====
   Нарочно с фиксированными тёмными цветами вне зависимости от темы сайта — как обычные
   системные тосты/снекбары, не часть страницы, а поверх неё. */
.site-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px);
    z-index: 3000; display: flex; align-items: center; gap: 10px;
    padding: 13px 20px; border-radius: 12px; background: #1a1f2b; color: #fff;
    font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600;
    box-shadow: 0 12px 32px rgba(0,0,0,.28); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; max-width: calc(100vw - 32px); text-align: left;
}
.site-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.site-toast i { color: #5b8cff; font-size: 15px; flex-shrink: 0; }
@media (max-width: 480px) { .site-toast { left: 16px; right: 16px; bottom: 16px; transform: translateY(16px); max-width: none; } .site-toast.is-visible { transform: translateY(0); } }

/* Якорное меню текстовых блоков модели (include/catalog/text_model.php): Bootstrap .sticky-top
   липнет к top:0 и заезжало ПОД липкую шапку сайта — цепляем ниже шапки, как и остальные
   sticky-элементы (см. --hdr-height выше). */
.nav-yakor-menu.sticky-top { top: calc(var(--hdr-height) + 20px); z-index: 5; }

/* ==================== ХАРАКТЕРИСТИКИ АВТО: поля-документы (js/car-details.js) ====================
   Строка .spec-row[data-detail] открывает модалку .cd-modal с текстом или JSON площадки таблицами. */
.spec-row.is-link { cursor: pointer; }
.spec-row.is-link:hover .v { color: var(--premium-accent-a, #1e4fe0); }
.spec-open { display: inline-flex; align-items: center; gap: 6px; color: var(--premium-accent-a, #1e4fe0); font-weight: 600; }
.spec-open i { font-size: 11px; }
.spec-row.is-mono .v { font-family: 'Manrope', monospace; letter-spacing: .3px; }
.spec-row.is-rate .v { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 8px; border-radius: 8px; background: rgba(30,79,224,.08); color: var(--premium-accent-a, #1e4fe0); font-weight: 800; }
.spec-row .v small { display: block; font-size: 11px; font-weight: 500; color: var(--premium-ink-soft, #5b6478); }
.cd-modal { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cd-modal[hidden] { display: none; }
.cd-modal-back { position: absolute; inset: 0; background: rgba(10,14,22,.5); }
.cd-modal-box { position: relative; width: min(640px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); overflow: hidden; }
html[data-theme="dark"] .cd-modal-box { background: #171b24; color: #e7eaf0; }
.cd-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--premium-line, #e4e8ef); }
.cd-modal-title { font-family: 'Unbounded', sans-serif; font-size: 16px; }
.cd-modal-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--premium-line, #e4e8ef); background: transparent; cursor: pointer; color: inherit; }
.cd-modal-body { padding: 14px 20px 20px; overflow: auto; font-size: 14px; }
.cd-text { white-space: pre-wrap; line-height: 1.55; }
.cd-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.cd-table td { padding: 8px 6px; border-bottom: 1px solid var(--premium-line, #e4e8ef); vertical-align: top; font-size: 13.5px; }
.cd-table td:first-child { color: var(--premium-ink-soft, #5b6478); width: 42%; }
.cd-table td:last-child { font-weight: 600; overflow-wrap: anywhere; }
.cd-group { margin: 12px 0 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--premium-ink-soft, #5b6478); }
.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.cd-chips span { padding: 6px 10px; border-radius: 9px; background: rgba(30,79,224,.06); font-size: 13px; font-weight: 600; }
html[data-theme="dark"] .cd-chips span { background: rgba(255,255,255,.08); }
.cd-empty { color: var(--premium-ink-soft, #5b6478); padding: 12px 0; }

/* ==================== ЛИСТИНГ: быстрые чипы и бейдж «ниже средней» (перенос из мобильной версии) ==================== */
.ctlg-quick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ctlg-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--premium-line, #e4e8ef); background: #fff; color: var(--premium-ink, #12131a); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ctlg-chip i { font-size: 11px; opacity: .7; }
.ctlg-chip:hover { border-color: var(--premium-accent-a, #1e4fe0); color: var(--premium-accent-a, #1e4fe0); }
.ctlg-chip.is-active { background: var(--premium-ink, #12131a); border-color: var(--premium-ink, #12131a); color: #fff; }
.ctlg-chip.is-watch { background: rgba(30,79,224,.08); border-color: transparent; color: var(--premium-accent-a, #1e4fe0); }
.ctlg-chip.is-watch.is-active { background: #34c759; color: #fff; }
html[data-theme="dark"] .ctlg-chip { background: #171b24; color: #e7eaf0; border-color: #262b36; }
.ctlg-deal { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 7px; background: rgba(52,199,89,.12); color: #1f9d48; font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.car-list-prices .ctlg-deal { margin: 4px 0 0; display: block; width: max-content; }


/* ==================== СТРАНИЦА МОДЕЛИ (ПК): «Сравнить рынки» · «Что чаще берут» · «Статистика продаж» ==================== */
.mi { margin: 30px 0 10px; display: flex; flex-direction: column; gap: 22px; }
.mi-block { padding: 24px; border-radius: 20px; background: var(--bg-white, #fff); border: 1px solid var(--premium-line, #e4e8ef); }
.mi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.mi-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.mi-head p { margin: 0; color: var(--text-muted, #6c757d); font-size: 14px; }
.mi-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; background: var(--premium-ink, #12131a); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
.mi-cta.is-light { background: rgba(30,79,224,.08); color: var(--premium-accent-a, #1e4fe0) !important; }
.mi-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mi-country { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: var(--bg-light, #f6f7f9); text-decoration: none !important; color: inherit !important; transition: transform .2s, box-shadow .2s; }
.mi-country:hover { transform: scale(1.03); box-shadow: 0 12px 28px rgba(20,25,40,.1); }
.mi-country-flag img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }
.mi-country-name { font-weight: 700; font-size: 15px; margin-top: 6px; }
.mi-country-stat { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.mi-country-price { font-size: 14px; font-weight: 700; color: var(--premium-accent-a, #1e4fe0); min-height: 18px; }
.mi-country-years { font-size: 12.5px; color: var(--text-muted, #6c757d); min-height: 16px; }
.mi-country-link { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--premium-accent-a, #1e4fe0); }
.mi-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mi-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--bg-light, #f6f7f9); color: inherit !important; text-decoration: none !important; font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.mi-chip:hover { border-color: var(--premium-accent-a, #1e4fe0); }
.mi-chip b { color: var(--text-muted, #6c757d); font-weight: 600; }
.mi-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mi-kpi { padding: 14px 16px; border-radius: 14px; background: var(--bg-light, #f6f7f9); display: flex; flex-direction: column; gap: 4px; }
.mi-kpi small { font-size: 12px; color: var(--text-muted, #6c757d); font-weight: 600; }
.mi-kpi b { font-size: 18px; letter-spacing: -.2px; }
.mi-recent-title { margin: 16px 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #6c757d); }
.mi-recent-list { display: flex; flex-direction: column; }
.mi-recent-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 9px 0; border-top: 1px solid var(--premium-line, #e4e8ef); font-size: 14px; }
.mi-recent-row b { color: var(--premium-accent-a, #1e4fe0); }
html[data-theme="dark"] .mi-block { background: #171b24; border-color: #262b36; }
html[data-theme="dark"] .mi-country, html[data-theme="dark"] .mi-chip, html[data-theme="dark"] .mi-kpi { background: #1e2430; }
@media (max-width: 991px) { .mi-kpis { grid-template-columns: 1fr 1fr; } }

/* ==================== СТРАНИЦА АВТО (ПК): разбивка цены, торги, бронь/перевод, «Есть варианты», WhatsApp ==================== */
.cdp-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.cdp-bd { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-light, #f6f7f9); font-size: 12.5px; color: var(--text-muted, #6c757d); }
.cdp-bd i { grid-row: 1 / 3; align-self: center; color: var(--premium-accent-a, #1e4fe0); font-size: 15px; }
.cdp-bd b { font-size: 15px; color: var(--premium-ink, #12131a); }
.cdp-auction { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(30,79,224,.08); }
.cdp-auction-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cdp-auction-lbl { font-size: 12.5px; color: var(--text-muted, #6c757d); font-weight: 600; }
.cdp-auction-timer { font-size: 16px; color: var(--premium-accent-a, #1e4fe0); }
.cdp-auction-btn { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--premium-accent-a, #1e4fe0); color: #fff; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cdp-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin: 14px 0 0; }
.cdp-extra-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--premium-line, #e4e8ef); border-radius: 14px; background: var(--bg-white, #fff); color: inherit; text-align: left; cursor: pointer; transition: border-color .15s; }
.cdp-extra-btn:hover { border-color: var(--premium-accent-a, #1e4fe0); }
.cdp-extra-btn > i:first-child { width: 38px; height: 38px; border-radius: 11px; background: var(--bg-light, #f6f7f9); color: var(--premium-accent-a, #1e4fe0); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cdp-extra-btn span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cdp-extra-btn b { font-size: 14px; }
.cdp-extra-btn small { font-size: 12px; color: var(--text-muted, #6c757d); }
.cdp-extra-btn > i:last-child { color: var(--text-muted, #6c757d); font-size: 12px; }
.cdp-alt { margin: 16px 0 0; }
.cdp-alt-title { font-size: 12.5px; font-weight: 800; color: var(--text-muted, #6c757d); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.cdp-alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cdp-alt-card { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--bg-white, #fff); border: 1px solid var(--premium-line, #e4e8ef); text-decoration: none !important; color: inherit !important; }
.cdp-alt-card .ph { flex: none; width: 84px; height: 64px; border-radius: 10px; background: var(--bg-light, #f6f7f9) center/cover no-repeat; }
.cdp-alt-body { display: flex; flex-direction: column; min-width: 0; }
.cdp-alt-card .tag { font-size: 11.5px; font-weight: 800; color: #1f9d48; }
.cdp-alt-card b { font-size: 15px; }
.cdp-alt-card small { font-size: 12px; color: var(--text-muted, #6c757d); }
.cdp-sticky-calc.is-wa { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; text-decoration: none !important; }
html[data-theme="dark"] .cdp-bd, html[data-theme="dark"] .cdp-extra-btn > i:first-child, html[data-theme="dark"] .cdp-alt-card .ph { background: #1e2430; }
html[data-theme="dark"] .cdp-extra-btn, html[data-theme="dark"] .cdp-alt-card { background: #171b24; border-color: #262b36; }


/* ==================== ГЛАВНАЯ (ПК): блоки, перенесённые из мобильной версии (include/blocks/home_extras.php) ==================== */
/* Блоки главной в одной сетке с фильтром (.page) и подбором по кузову (.bt-section): 1240px + поля 24px */
.hx { max-width: 1240px; margin: 56px auto 0; padding: 0 24px; box-sizing: border-box; }
/* «Вы смотрели» идёт сразу под фильтром: у .page снизу padding 80px, поэтому сверху −24 (итого 56), снизу 56 до следующего блока */
.hx-recent { margin-top: -24px; margin-bottom: 56px; }
.hx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.hx-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.3px; }
.hx-head p { margin: 4px 0 0; color: var(--text-muted, #6c757d); font-size: 14.5px; flex-basis: 100%; }
.hx-link { border: 0; background: none; color: var(--premium-accent-a, #1e4fe0); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; padding: 0; }
.hx-link i { font-size: 11px; }
/* Вы смотрели */
.hx-continue { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 18px; border-radius: 14px; background: rgba(30,79,224,.08); color: inherit !important; text-decoration: none !important; }
.hx-continue > i:first-child { width: 36px; height: 36px; border-radius: 10px; background: var(--premium-accent-a, #1e4fe0); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hx-continue span { display: flex; flex-direction: column; }
.hx-continue b { font-size: 15px; }
.hx-continue small { font-size: 13px; color: var(--text-muted, #6c757d); }
.hx-recent-lane { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.hx-recent-car { display: flex; flex-direction: column; text-decoration: none !important; color: inherit !important; border-radius: 16px; background: var(--bg-white, #fff); border: 1px solid var(--premium-line, #e4e8ef); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.hx-recent-car:hover { transform: scale(1.03); box-shadow: 0 12px 28px rgba(20,25,40,.1); }
.hx-recent-car .ph { aspect-ratio: 4/3; background: var(--bg-light, #f6f7f9) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #b7b7bc; font-size: 24px; }
.hx-recent-car b { padding: 10px 12px 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-recent-car small { padding: 2px 12px 12px; font-size: 13px; color: var(--text-muted, #6c757d); }
.hx-recent-car small.is-price { color: var(--premium-accent-a, #1e4fe0); font-weight: 800; }
/* сейчас N авто */
.hx-live { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0 0; font-size: 13px; color: var(--text-muted, #6c757d); font-weight: 600; }
.hx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgba(52,199,89,.5); animation: hxLivePulse 1.8s infinite; }
@keyframes hxLivePulse { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.5); } 70% { box-shadow: 0 0 0 8px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } }
/* С чего начать */
.hx-scen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hx-scen-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: var(--bg-white, #fff); border: 1px solid var(--premium-line, #e4e8ef); color: inherit !important; text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.hx-scen-card:hover { transform: scale(1.03); box-shadow: 0 12px 28px rgba(20,25,40,.1); }
.hx-scen-card i { width: 40px; height: 40px; border-radius: 12px; background: rgba(30,79,224,.08); color: var(--premium-accent-a, #1e4fe0); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 8px; }
.hx-scen-card b { font-size: 15px; }
.hx-scen-card small { font-size: 13px; color: var(--text-muted, #6c757d); }
/* Отзывы */
.hx-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hx-review { border-radius: 16px; background: var(--bg-white, #fff); border: 1px solid var(--premium-line, #e4e8ef); overflow: hidden; display: flex; flex-direction: column; }
.hx-review-media { position: relative; height: 0; padding-top: 58%; background: var(--bg-light, #f6f7f9); overflow: hidden; }
.hx-review-media img, .hx-review-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-review-body { padding: 14px 16px 16px; }
.hx-review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hx-review-ava { width: 36px; height: 36px; border-radius: 50%; background: rgba(30,79,224,.1); color: var(--premium-accent-a, #1e4fe0); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hx-review-who { display: flex; flex-direction: column; min-width: 0; }
.hx-review-who b { font-size: 14.5px; }
.hx-review-who small { font-size: 12.5px; color: var(--text-muted, #6c757d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-review p { margin: 0; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Мини-калькулятор */
.hx-calc-card { padding: 20px; border-radius: 20px; background: var(--bg-white, #fff); border: 1px solid var(--premium-line, #e4e8ef); }
.hx-calc-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--bg-light, #f6f7f9); margin-bottom: 14px; }
.hx-calc-tabs .m-mcalc-tab { height: 36px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted, #6c757d); font-weight: 700; font-size: 14px; cursor: pointer; }
.hx-calc-tabs .m-mcalc-tab.is-active { background: #fff; color: var(--premium-ink, #12131a); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.hx-calc-fields { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: end; }
.hx-calc-field { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 12px; background: var(--bg-light, #f6f7f9); }
.hx-calc-field span { font-size: 12px; color: var(--text-muted, #6c757d); font-weight: 600; }
.hx-calc-field em { font-style: normal; }
.hx-calc-field input { border: 0; background: transparent; font-size: 18px; font-weight: 700; color: inherit; width: 100%; outline: none; -moz-appearance: textfield; }
.hx-calc-field input::-webkit-outer-spin-button, .hx-calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.hx-calc-btn { height: 58px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--premium-ink, #12131a); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.hx-calc-result { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(30,79,224,.06); display: flex; flex-direction: column; gap: 2px; }
.hx-calc-result .m-mcalc-total { font-size: 16px; }
.hx-calc-result .m-mcalc-total b { font-size: 24px; color: var(--premium-accent-a, #1e4fe0); }
.hx-calc-result small { font-size: 13px; color: var(--text-muted, #6c757d); }
.hx-calc-result.is-error small { color: #d33; }
.hx-calc .hx-link { display: inline-block; margin-top: 12px; }
/* Лента заявок с логотипом и статусом */
.orders-feed-rich .orders-feed-item { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; padding: 8px 10px; border-radius: 12px; background: var(--bg-light, #f6f7f9); }
.orders-feed-logo { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #b7b7bc; overflow: hidden; }
.orders-feed-logo img { width: 30px; height: 30px; object-fit: contain; }
.orders-feed-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.orders-feed-main small { font-size: 12px; color: var(--text-muted, #6c757d); }
.orders-feed-status { color: var(--premium-accent-a, #1e4fe0); font-weight: 600; }
.orders-feed-item.is-done .orders-feed-status { color: #1f9d48; }
.orders-feed-rich .orders-feed-ago { margin-left: 0; }
/* Недавние / счётчики в каталоге */
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.hx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--bg-light, #f6f7f9); color: inherit !important; text-decoration: none !important; font-weight: 600; font-size: 13.5px; }
.hx-chip img { width: 20px; height: 20px; object-fit: contain; }
.hx-chip i { color: var(--text-muted, #6c757d); }
.brand-card .m-count, .model-card .m-count { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-muted, #6c757d); font-weight: 600; }
.m-count.is-zero { display: none !important; }
html[data-theme="dark"] .hx-recent-car, html[data-theme="dark"] .hx-scen-card, html[data-theme="dark"] .hx-review, html[data-theme="dark"] .hx-calc-card { background: #171b24; border-color: #262b36; }
html[data-theme="dark"] .hx-calc-field, html[data-theme="dark"] .hx-calc-tabs, html[data-theme="dark"] .orders-feed-rich .orders-feed-item, html[data-theme="dark"] .hx-chip { background: #1e2430; }
html[data-theme="dark"] .hx-calc-tabs .m-mcalc-tab.is-active { background: #171b24; color: #e7eaf0; }
@media (max-width: 991px) { .hx-scen-grid { grid-template-columns: 1fr 1fr; } .hx-reviews-grid { grid-template-columns: 1fr; } .hx-calc-fields { grid-template-columns: 1fr 1fr; } }
.model-card .model-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-direction: column; }
.model-card .model-flags { display: inline-flex; gap: 3px; }
.model-card .model-flags img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.model-card .model-meta .m-count { margin-top: 0; }
/* сравнение (ПК): «только различия», итог «N из M параметров» */
.cmp-tools { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.cmp-diff-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.cmp-diff-toggle input { width: 18px; height: 18px; accent-color: var(--premium-accent-a, #1e4fe0); }
.cmp-winner-score small { display: block; font-size: 10px; font-weight: 600; opacity: .8; }
/* избранное (ПК): шапка, «Сравнить всё», вход для синхронизации, бейдж изменения цены */
.fav-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.fav-compare-all { height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--premium-ink, #12131a); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.fav-login { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: rgba(30,79,224,.08); color: inherit !important; text-decoration: none !important; }
.fav-login > i:first-child { width: 40px; height: 40px; border-radius: 12px; background: var(--premium-accent-a, #1e4fe0); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.fav-login span { display: flex; flex-direction: column; }
.fav-login b { font-size: 15px; }
.fav-login small { font-size: 13px; color: var(--text-muted, #6c757d); }
.ctlg-delta { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.ctlg-delta.is-down { color: #1f9d48; background: rgba(52,199,89,.12); }
.ctlg-delta.is-up { color: #d33; background: rgba(255,59,48,.1); }
/* статистика продаж (ПК): фильтры год/оценка/объём, график цена×год, ожидаемая цена, подписка на цену (перенос из мобильной версии) */
.stats-year-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: var(--bg-light, #f6f7f9); flex-wrap: wrap; }
.stats-year-filter.is-active { background: rgba(30,79,224,.08); }
.stats-year-label { font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.stats-year-filter select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--premium-line, #e4e8ef); background: #fff; font-size: 14px; font-weight: 600; min-width: 110px; }
.stats-year-reset { border: 0; background: none; color: #d33; font-weight: 700; font-size: 13px; cursor: pointer; }
.stats-extra-filters { display: flex; gap: 10px; }
.stats-extra-filters select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--premium-line, #e4e8ef); background: #fff; font-size: 14px; font-weight: 600; }
.stats-scatter { width: 100%; max-width: 760px; height: auto; display: block; }
.stats-scatter .grid { stroke: var(--premium-line, #e4e8ef); stroke-width: 1; }
.stats-scatter .lbl { font-size: 10px; fill: var(--text-muted, #6c757d); }
.stats-scatter-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--text-muted, #6c757d); }
.stats-scatter-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.stats-expected { margin: 0 0 22px; padding: 18px 20px; border-radius: 16px; background: var(--bg-light, #f6f7f9); display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; }
.stats-expected.is-active { background: rgba(30,79,224,.08); }
.stats-expected-head { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--text-muted, #6c757d); }
.stats-expected.is-active .stats-expected-head { color: var(--premium-accent-a, #1e4fe0); }
.stats-expected-val { font-size: 28px; font-weight: 800; display: flex; flex-direction: column; }
.stats-expected-val small { font-size: 12.5px; font-weight: 500; color: var(--text-muted, #6c757d); }
.stats-alert label { font-size: 12.5px; font-weight: 600; color: var(--text-muted, #6c757d); }
.stats-alert-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.stats-alert-row input { width: 160px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--premium-line, #e4e8ef); background: #fff; font-size: 15px; font-weight: 700; }
.stats-alert-row button { height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--premium-ink, #12131a); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
html[data-theme="dark"] .stats-year-filter, html[data-theme="dark"] .stats-expected { background: #1e2430; }
html[data-theme="dark"] .stats-year-filter select, html[data-theme="dark"] .stats-extra-filters select, html[data-theme="dark"] .stats-alert-row input { background: #171b24; color: #e7eaf0; border-color: #262b36; }
.orders-feed-rich { grid-template-columns: 1fr 1fr; gap: 10px; }

/* ==================== Расчёт стоимости: доставка по России (js/delivery-calc.js) ==================== */
.pd-delivery-box { margin-bottom: 22px; }
.dlv { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg-light, #f6f7f9); }
.dlv-loading, .dlv-hint { font-size: 13px; color: var(--text-muted, #6c757d); }
.dlv-step { display: flex; flex-direction: column; gap: 6px; }
.dlv-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #6c757d); }
.dlv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dlv-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--premium-line, #e4e8ef); background: #fff; color: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dlv-chip.is-active { background: var(--premium-ink, #12131a); border-color: var(--premium-ink, #12131a); color: #fff; }
.dlv-select { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--premium-line, #e4e8ef); background: #fff; color: inherit; font-size: 14px; font-weight: 600; width: 100%; }
.dlv-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(30,79,224,.08); font-size: 13.5px; }
.dlv-result > b { font-size: 16px; color: var(--premium-accent-a, #1e4fe0); white-space: nowrap; }
.pd-row.pd-delivery .k { color: var(--premium-accent-a, #1e4fe0); font-weight: 600; }
html[data-theme="dark"] .dlv { background: #1e2430; }
html[data-theme="dark"] .dlv-chip, html[data-theme="dark"] .dlv-select { background: #171b24; color: #e7eaf0; border-color: #262b36; }
/* выбранная кнопка расчёта доставки в тёмной теме: яркая синяя заливка вместо тёмной (раньше сливалась с фоном) */
html[data-theme="dark"] .dlv-chip.is-active { background: #3b6bff; border-color: #3b6bff; color: #fff; box-shadow: 0 0 0 2px rgba(91,140,255,.35); }

/* ---------- общий «умный» поиск (js/smart-search.js): подсветка совпадений, подсказка «Ищем …», пункт под стрелками ---------- */
mark.ss-hl { padding: 0 1px; border-radius: 3px; background: rgba(255, 196, 0, .35); color: inherit; }
html[data-theme="dark"] mark.ss-hl { background: rgba(255, 196, 0, .28); }
.ss-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 7px 12px; border-radius: 9px; background: rgba(30, 79, 224, .07); color: #4b5563; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ss-hint i { color: #1e4fe0; }
html[data-theme="dark"] .ss-hint { background: rgba(91, 140, 255, .12); color: #aab3c2; }
html[data-theme="dark"] .ss-hint i { color: #6f9bff; }
.popover-item.ss-active { background: var(--blue-bg, #eef3ff); color: var(--blue, #1e4fe0); }
html[data-theme="dark"] .popover-item.ss-active { background: #1e2430; }
.ctlg-combobox-option.ss-active:not(.selected) { background: var(--premium-chip-bg, #f4f6fa); }
html[data-theme="dark"] .ctlg-combobox-option.ss-active:not(.selected) { background: #1e2430; }
.ctlg-combobox-option.ss-active.selected { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.ss-hint[hidden] { display: none; }

/* ---------- хлебные крошки с выбором соседней страницы того же уровня (include/crumb_menu.php, js/crumbs.js) ---------- */
.breadcrumb-item.cx-crumb { display: inline-flex; align-items: center; }
.cx-crumb-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 0; border-radius: 6px; background: rgba(30, 79, 224, .08); color: #1e4fe0; font-size: 10px; line-height: 1; cursor: pointer; vertical-align: middle; transition: background .15s, color .15s; }
.cx-crumb-btn:hover, .cx-crumb-btn[aria-expanded="true"] { background: #1e4fe0; color: #fff; }
.cdp-breadcrumb .cx-crumb-btn, .lp-crumbs .cx-crumb-btn { margin: 0 2px 0 4px; }
html[data-theme="dark"] .cx-crumb-btn { background: rgba(91, 140, 255, .15); color: #6f9bff; }
html[data-theme="dark"] .cx-crumb-btn:hover, html[data-theme="dark"] .cx-crumb-btn[aria-expanded="true"] { background: #6f9bff; color: #0b1220; }
.cx-crumb-pop { --cp-ink: #0b1220; --cp-sub: #5b6472; --cp-faint: #8b93a5; --cp-line: #e4e8ef; --cp-card: #fff; --cp-accent: #1e4fe0; --cp-accent-bg: rgba(30, 79, 224, .08);
                position: absolute; z-index: 1060; width: 320px; max-width: calc(100vw - 24px); padding: 8px; border-radius: 16px; background: var(--cp-card); box-shadow: 0 24px 60px -20px rgba(20, 25, 40, .5), 0 0 0 1px rgba(20, 25, 40, .08); font-family: inherit; animation: cxCrumbIn .12s ease; }
html[data-theme="dark"] .cx-crumb-pop { --cp-ink: #eef1f6; --cp-sub: #9aa4b2; --cp-faint: #6b7482; --cp-line: #262b36; --cp-card: #151922; --cp-accent: #6f9bff; --cp-accent-bg: rgba(91, 140, 255, .15); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
.cx-crumb-pop[hidden] { display: none; }
@keyframes cxCrumbIn { from { opacity: 0; transform: translateY(-4px); } }
.cx-crumb-pop input { width: 100%; height: 40px; margin-bottom: 6px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--cp-line); background: var(--cp-card); color: var(--cp-ink); font: inherit; font-size: 14px; outline: none; }
.cx-crumb-pop input:focus { border-color: var(--cp-accent); }
.cx-crumb-list { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.cx-crumb-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 9px; color: var(--cp-ink); font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.cx-crumb-list a:hover, .cx-crumb-list a.is-current, .cx-crumb-list a.ss-active { background: var(--cp-accent-bg); color: var(--cp-accent); text-decoration: none; }
.cx-crumb-list a.is-current::after { content: "\2713"; margin-left: auto; font-size: 12px; }
.cx-crumb-list small { flex: none; max-width: 45%; color: var(--cp-faint); font-size: 12px; font-weight: 600; text-align: right; }
.cx-crumb-list .ss-hint { margin: 2px 0 6px; }
.cx-crumb-empty { padding: 12px; color: var(--cp-sub); font-size: 13.5px; text-align: center; }
.crumbs-bar .breadcrumb { margin-bottom: 14px; font-size: 13.5px; }

/* Каталог: при догрузке каждая порция — свой контейнер (.row g-4, .table-view, .premium-view, .mcar-list).
   У .row отрицательный верхний отступ сетки — вторая порция наезжала на первую. Между порциями — обычный отступ. */
#results-container > * + * { margin-top: 24px; }
#results-container > .row + .row { margin-top: 0; }

/* «Вы смотрели»: несколько строк «Продолжить подбор» (FEATURE_HOME_RECENT_SEARCHES) — в ряд; первая — главная, остальные спокойнее */
.hx-continue-list { display: flex; flex-wrap: wrap; gap: 0 12px; }
.hx-continue-list .hx-continue + .hx-continue { background: transparent; box-shadow: inset 0 0 0 1px rgba(30,79,224,.18); }
.hx-continue-list .hx-continue + .hx-continue > i:first-child { background: rgba(30,79,224,.12); color: var(--premium-accent-a, #1e4fe0); }
#mRecentLane[hidden], .hx-continue-list[hidden] { display: none !important; }

/* «Модели в выдаче» — режим фильтра «несколько моделей» (include/catalog/multi_models.php) */
.mm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border-radius: 14px; background: var(--bg-white, #fff); border: 1px solid rgba(16, 24, 40, .08); }
.mm-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--text-muted, #6c757d); margin-right: 4px; }
.mm-label i { color: var(--primary-color, #1e4fe0); }
.mm-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border-radius: 999px; background: rgba(30, 79, 224, .08); color: var(--text-dark, #212529); font-size: 13.5px; font-weight: 700; }
.mm-chip.is-base { padding-right: 12px; background: var(--primary-color, #1e4fe0); color: #fff; }
.mm-chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: inherit; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }
.mm-chip button:hover { background: #ff2f52; color: #fff; }
.mm-add { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-add-btn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed rgba(30, 79, 224, .45); background: transparent; color: var(--primary-color, #1e4fe0); font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.mm-add-btn:hover { background: rgba(30, 79, 224, .06); }
.mm-pick { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mm-pick[hidden] { display: none; }
.mm-pick select { height: 34px; border-radius: 10px; border: 1px solid rgba(16, 24, 40, .15); padding: 0 8px; font-size: 13.5px; background: var(--bg-white, #fff); color: inherit; max-width: 180px; }
.mm-ok { height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--primary-color, #1e4fe0); color: #fff; font-weight: 800; font-size: 13.5px; }
.mm-ok:disabled { opacity: .45; }
.mm-reset { margin-left: auto; font-size: 13px; font-weight: 700; }
html[data-theme="dark"] .mm-bar { background: #171b24; border-color: #262b36; }
html[data-theme="dark"] .mm-chip:not(.is-base) { background: rgba(91, 140, 255, .14); color: #e7eaf0; }
html[data-theme="dark"] .mm-pick select { background: #1e2430; border-color: #333a48; }

/* фильтр главной: несколько моделей (FEATURE_FILTER_MODEL_MODE = 'multi') */
.mm-home { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.mm-home-chips { display: contents; }
.mm-home .mm-chip { height: 32px; }
.mm-home-add { height: 32px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed rgba(30, 79, 224, .45); background: transparent; color: var(--primary-color, #1e4fe0); font-size: 13px; font-weight: 800; cursor: pointer; }
.mm-home-add:hover { background: rgba(30, 79, 224, .06); }
.mm-home-add[hidden], .mm-home-hint[hidden] { display: none; }
.mm-home-hint { font-size: 12.5px; color: var(--text-muted, #6c757d); }

/* профиль: карточка теста «Идеальный автомобиль» (views/*/profile.php) */
.pf-ideal { display: flex; align-items: center; gap: 16px; max-width: 620px; margin: 0 0 18px; padding: 16px 18px; border-radius: 18px; color: #fff !important; text-decoration: none !important; background: radial-gradient(400px 200px at 100% 0%, rgba(123,92,255,.55), transparent 60%), linear-gradient(130deg, #0d1222, #1b1530); box-shadow: 0 18px 40px -24px rgba(30,79,224,.7); transition: transform .2s; }
.pf-ideal:hover { transform: scale(1.02); }
.pf-ideal-ico { width: 48px; height: 48px; flex: none; border-radius: 14px; background: linear-gradient(135deg, #ff5470, #ff2f52); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.pf-ideal-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-ideal-text small { font-size: 12px; color: #ffd1da; font-weight: 700; }
.pf-ideal-text b { font-size: 16px; }
.pf-ideal-text em { font-style: normal; font-size: 13px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ideal-go { font-weight: 800; font-size: 14px; white-space: nowrap; }