/* единая колонка для всей страницы - шапка и разделы ниже одной ширины */
.car-detail {
    max-width: 1100px;
    margin: 0 auto;
}

.car-detail__back {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-bottom: 20px;
    transition: color 0.15s ease;
}

.car-detail__back:hover { color: var(--color-accent); }

/* --- Заголовок (год/марка/модель) - отдельной строкой над шапкой --- */

.car-detail__heading { margin-bottom: 16px; }

.car-detail__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.car-detail__subtitle {
    font-size: 15px;
    color: var(--color-ink-muted);
    margin: 0;
}

/* тот же визуальный язык, что .car-card__spec в catalog.css, чуть крупнее */
.car-detail__quickfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 14px;
}

.quickfact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-ink-muted);
}

.quickfact img { width: 15px; height: 15px; opacity: 0.7; }

/* фото + карточка цены рядом. grid, не flex - карточка цены всегда забирает всю оставшуюся ширину.
   Фото шире (главный элемент), карточка цены - более узкий боковой блок, не равная по весу колонка. */
.car-detail__hero {
    display: grid;
    grid-template-columns: minmax(320px, 620px) 1fr;
    align-items: stretch;
    gap: 28px;
    margin-bottom: 36px;
}

.car-detail__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #F1F0EC;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 21, 24, 0.06);
}

.car-detail__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.car-detail__placeholder-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 68px;
    fill: none;
    stroke: #B9B6AC;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.car-detail__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.car-detail__badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-success);
    background: #fff;
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(20, 21, 24, 0.12);
}

.car-detail__badge--sold { color: #fff; background: var(--color-ink); }

.car-detail__badge--commercial { color: #fff; background: var(--color-accent); }

/* top, не bottom - у фото Encar внизу уже свой водяной знак "Trust Encar", наслаивалось бы */
.car-detail__source-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    background: rgba(20, 21, 24, 0.72);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.car-detail__source-badge:hover { background: var(--color-accent); }

/* --- Содержимое ниже шапки: разделы снова отдельными карточками --- */

.car-detail__section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
}

/* круглый бейдж-иконка перед заголовком раздела - визуальный акцент вместо голого текста */
.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
}

.section-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* без жёсткой обводки, только мягкая тень; лёгкий подъём тени при наведении (только где есть настоящий hover) */
.car-detail__section {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(20, 21, 24, 0.05), 0 10px 24px rgba(20, 21, 24, 0.05);
    margin-bottom: 20px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.car-detail__section:last-child { margin-bottom: 0; }

@media (hover: hover) {
    .car-detail__section:hover {
        box-shadow: 0 2px 4px rgba(20, 21, 24, 0.06), 0 16px 32px rgba(20, 21, 24, 0.08);
        transform: translateY(-2px);
    }
}

/* Состояние + Комплектация рядом, широкая/узкая пара. Комплектация шире (чек-лист), Состояние уже
   (схема кузова не теряется в узкой карточке). Без Комплектации :only-child растягивает Состояние на всю строку. */
.car-detail__row {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 420px);
    align-items: start;
    gap: 20px;
    margin-bottom: 20px;
}

.car-detail__row:last-child { margin-bottom: 0; }

.car-detail__row > .car-detail__section {
    margin-bottom: 0;
}

.car-detail__row > .car-detail__section:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 860px) {
    .car-detail__row { grid-template-columns: 1fr; }
}

/* --- Specs / general data --- */

.specs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 20px;
}

.specs-grid__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--color-border);
}

.specs-grid__row span { color: var(--color-ink-muted); }
.specs-grid__row strong { font-weight: 600; text-align: right; }

@media (max-width: 900px) {
    .specs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .specs-grid { grid-template-columns: 1fr; }
}

/* --- Condition --- */

.condition-clean {
    font-size: 13.5px;
    color: var(--color-success);
    font-weight: 600;
    margin: 0;
}

.condition-diagram-empty {
    font-size: 13px;
    color: var(--color-ink-muted, #6b7280);
    margin: 4px 0 0;
}

.condition-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.condition-flag {
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-ink-muted);
}

.condition-flag--warn { background: var(--color-accent-soft); color: var(--color-accent-hover); }

.condition-group { margin-bottom: 14px; }
.condition-group:last-child { margin-bottom: 0; }

.condition-group__label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-muted);
    margin-bottom: 8px;
    padding-left: 12px;
    position: relative;
}

.condition-group__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-ink-muted);
}

/* цвета статусов повреждения - общие для чипов "Состояние", легенды и схемы кузова (см. views.py:OUTER_STATUS_LABELS) */
:root {
    --status-x: var(--color-accent);
    --status-w: #2B6CB0;
    --status-c: #B45309;
    --status-a: #8B5CF6;
    --status-u: #556072;
    --status-t: #9F1239;
}

.condition-group__label--replacement::before,
.condition-group__label--x::before { background: var(--status-x); }
.condition-group__label--repair::before,
.condition-group__label--w::before { background: var(--status-w); }
.condition-group__label--c::before { background: var(--status-c); }
.condition-group__label--a::before { background: var(--status-a); }
.condition-group__label--u::before { background: var(--status-u); }
.condition-group__label--t::before { background: var(--status-t); }
.condition-group__label--other::before { background: var(--color-ink-muted); }

.condition-group__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.condition-chip {
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

/* --- Схема кузова (топ-вью) ---
 * Фон схемы - не белый, а цвет страницы (--color-bg): раздел "Состояние" сам белая карточка,
 * если бы у схемы тоже был белый фон, она бы слилась с карточкой вокруг и край стал бы не виден.
 */
.condition-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0 6px;
}

.condition-diagram--secondary {
    padding-top: 0;
    margin-top: -6px;
}

/* схема - картинка (static/images/condition-diagram.png) с метками через SVG-оверлей той же
   ширины/высоты; viewBox (640x606) - нативный пиксельный размер картинки, координаты в
   car_detail.html - реальные пиксели, не проценты - оверлей растягивается вместе с картинкой */
.condition-diagram__stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 20px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.condition-diagram__image { display: block; width: 100%; height: auto; }

.condition-diagram__markers {
    position: absolute;
    /* inset должен совпадать с padding .condition-diagram__stage - оверлей накладывается на картинку, не на всю карточку */
    inset: 20px;
}

/* метки повреждений - кружок со статусом поверх контура кузова (condition.diagram_panels в car_detail_view) */
.diagram-marker { stroke: #fff; stroke-width: 2; }
.diagram-marker--x { fill: var(--status-x); }
.diagram-marker--w { fill: var(--status-w); }
.diagram-marker--c { fill: var(--status-c); }
.diagram-marker--a { fill: var(--status-a); }
.diagram-marker--u { fill: var(--status-u); }
.diagram-marker--t { fill: var(--status-t); }

.diagram-marker__label {
    fill: #fff;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    text-anchor: middle;
    dominant-baseline: central;
}

.condition-diagram__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
}

.condition-diagram__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-ink-muted);
}

.condition-diagram__dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.condition-diagram__dot--x { background: var(--status-x); }
.condition-diagram__dot--w { background: var(--status-w); }
.condition-diagram__dot--c { background: var(--status-c); }
.condition-diagram__dot--a { background: var(--status-a); }
.condition-diagram__dot--u { background: var(--status-u); }
.condition-diagram__dot--t { background: var(--status-t); }

/* --- Equipment / комплектация ---
 * компактный текстовый список: .equipment-list раскладывается в колонки через column-width
 * (авто, по ширине контейнера), пункты разделены пунктирной линией и точкой-маркером слева
 */

.equipment-groups {
    column-width: 260px;
    column-gap: 32px;
}

.equipment-category {
    break-inside: avoid;
    margin-bottom: 18px;
}

.equipment-category:last-child {
    margin-bottom: 0;
}

.equipment-category__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
}

.equipment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.equipment-list__item {
    position: relative;
    font-size: 13.5px;
    line-height: 1.4;
    padding: 6px 0 6px 18px;
    border-bottom: 1px dashed var(--color-border);
}

/* галочка вместо точки - нарисована на CSS (уголок из двух границ, повёрнутый на 45°), без SVG */
.equipment-list__item::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 12px;
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(-45deg);
}

.equipment-list__item:last-child { border-bottom: none; }

/* --- Карточка "цена + связаться с менеджером" (в шапке, рядом с фото) --- */
.car-detail__price-block {
    position: relative;
    display: flex;
    flex-direction: column;
    /* space-between - карточка растянута на всю высоту фото, цена прижата к верху, кнопки к низу */
    justify-content: space-between;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    box-shadow: 0 12px 28px rgba(20, 21, 24, 0.07);
}

.car-detail__price-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* плашка с мягким акцентным фоном под ценой */
.car-detail__price-panel {
    background: var(--color-accent-soft);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}

.car-detail__price {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.5px;
    color: var(--color-signal);
}

.car-detail__price--unavailable {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--color-ink-muted);
    margin: 0;
}

.car-detail__price-caption {
    font-size: 12.5px;
    color: var(--color-ink-muted);
    margin: 6px 0 0;
}

/* краткий отчёт по цене - всегда виден под плашкой цены, простой видимый блок вместо скрытой подсказки */
.car-detail__price-breakdown {
    display: flex;
    flex-direction: column;
}

.car-detail__price-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink-muted);
}

.car-detail__price-breakdown-row strong {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-ink);
}

.car-detail__price-full-link {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 13px;
    padding: 12px 0 0;
    cursor: pointer;
}

.car-detail__price-full-link:hover { color: var(--color-accent-hover); }

/* --- Contacts ---
 * Базовый .contact-btn переиспользуется и мобильной панелью снизу экрана
 * (.car-detail__mobile-bar - см. её собственный, более компактный override
 * ниже), поэтому "в столбец на всю ширину" (см. итерация 7) задаётся ТОЛЬКО
 * через .car-detail__contacts .contact-btn, а не в самом .contact-btn -
 * иначе сломалась бы узкая инлайн-кнопка "Позвонить" в мобильной панели.
 */
.car-detail__contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13.5px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.contact-btn svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

/* сетка 2x2 - 4 кнопки в 2 колонки дают те же 2 строки высоты, что раньше 3 кнопки в 1 колонку */
.car-detail__contacts .contact-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 10px;
    font-size: 13.5px;
}

/* фирменные цвета сразу в состоянии покоя, не только на hover */
.contact-btn--telegram { border-color: #BFE4FB; color: #1D8FD0; background: #F3FAFE; }
.contact-btn--telegram:hover { border-color: #2AABEE; color: #2AABEE; background: #EAF7FE; }
.contact-btn--whatsapp { border-color: #BEEBCB; color: #128C4A; background: #F2FCF6; }
.contact-btn--whatsapp:hover { border-color: #25D366; color: #128C4A; background: #E8FBEF; }
/* фирменный цвет MAX - #471AFF (см. брендбук go.max.ru/brandbook), пастельный вариант читается и на чёрном, и на светлом фоне */
.contact-btn--max { border-color: #D6C9FF; color: #471AFF; background: #F2EFFF; }
.contact-btn--max:hover { border-color: #471AFF; color: #471AFF; background: #E9E3FF; }

/* точный векторный файл значка MAX недоступен - обводка вместо заливки (в отличие от остальных иконок) */
.contact-btn--max svg { fill: none; stroke: currentColor; stroke-width: 2; }
.contact-btn--phone {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(211, 32, 47, 0.22);
}
.contact-btn--phone:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* --- Связаться с менеджером (внутри карточки цены) --- */

.car-detail__manager {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-border);
}

.car-detail__manager-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin: 0 0 10px;
}

/* --- Мобильная закреплённая панель "цена + позвонить" ---
 * скрыта на десктопе/планшете; padding-bottom с env(safe-area-inset-bottom) - не залезать под чёлку на iPhone
 */
.car-detail__mobile-bar {
    display: none;
}

@media (max-width: 640px) {
    .car-detail__mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -8px 20px rgba(20, 21, 24, 0.08);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

    .car-detail__mobile-bar-price {
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: 17px;
        color: var(--color-signal);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .car-detail__mobile-bar .contact-btn--phone {
        flex-shrink: 0;
        padding: 10px 20px;
    }

    /* Чтобы панель внизу не перекрывала последний блок страницы. */
    .car-detail { padding-bottom: 72px; }
}

/* --- Full price modal --- */

.price-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(20, 21, 24, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.price-modal-overlay[hidden] { display: none; }

.price-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 28px 26px 22px;
    box-shadow: 0 24px 60px rgba(20, 21, 24, 0.3);
}

.price-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--color-ink-muted);
    cursor: pointer;
}

.price-modal__close:hover { color: var(--color-accent); }

.price-modal__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 18px;
}

.price-modal__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.price-modal__row span { font-size: 13.5px; font-weight: 600; }
.price-modal__row strong { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; }

.price-modal__hint {
    font-size: 12px;
    color: var(--color-ink-muted);
    margin: 4px 0 0;
    font-weight: 400;
}

.price-modal__row--total {
    border-bottom: none;
    padding-top: 16px;
}

.price-modal__row--total span { font-size: 14.5px; }
.price-modal__row--total strong { font-size: 18px; }

/* --- Responsive --- */

/* узкий экран - шапка в столбец: фото сверху, карточка цены/менеджера под ним */
@media (max-width: 640px) {
    .car-detail__hero { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .car-detail__title { font-size: 22px; }
}