/* Основные стили */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #333;
    overflow-x: hidden;
}

body.dark {
    background: #000;
    color: #e0e0e0;
}

main {
    overflow-x: hidden;
    max-width: 100%;
}

/* Контейнер страницы */
.car-detail-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
}

/* Шапка для десктопа */
.desktop-header {
    display: block;
}

.header-container {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
    gap: 15px;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#catalog-title {
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

#catalog-title h1 {
    font-size: 24px;
    margin: 0;
    color: #438ef4;
}

body.dark #catalog-title h1 {
    color: #4a90e2;
}

/* Поиск */
.search-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    max-width: 700px;
    min-width: 200px;
}

#search, #mobile-search {
    padding: 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

body.dark #search, body.dark #mobile-search {
    background: #1c1c1c;
    border-color: #555;
    color: #e0e0e0;
}

#search-button, #mobile-search-button {
    padding: 8px 16px;
    background: #438ef4;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

body.dark #search-button, body.dark #mobile-search-button {
    background: #4a90e2;
}

/* Верхняя панель */
.top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.exchange-rates {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

body.dark .exchange-rates {
    color: #ccc;
}

.selection-btn, .favorites-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.dark .selection-btn, body.dark .favorites-btn {
    color: #ccc;
}

.profile-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #438ef4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s;
    flex-shrink: 0;
}

body.dark .profile-circle {
    background: #4a90e2;
}

/* Мобильная шапка */
.mobile-header {
    display: none;
    padding: 10px;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

body.dark .mobile-header {
    background: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mobile-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.mobile-back-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    margin-left: -5px;
}

body.dark .mobile-back-btn {
    color: #ccc;
}

.mobile-header-actions {
    display: flex;
    gap: 10px;
    margin-right: -5px;
}

.mobile-action-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #333;
}

body.dark .mobile-action-btn {
    color: #ccc;
}

/* Специфично для кнопки подборки */
#mobile-add-to-selection {
    color: #333;
}

body.dark #mobile-add-to-selection {
    color: #ccc;
}

#mobile-add-to-selection.active {
    color: red;
}

body.dark #mobile-add-to-selection.active {
    color: #ff5555;
}

/* Специфично для кнопки избранного */
#mobile-add-favorite svg {
    stroke: #333;
}

body.dark #mobile-add-favorite svg {
    stroke: #e0e0e0;
}

#mobile-add-favorite.active svg {
    fill: red;
    stroke: red;
}

body.dark #mobile-add-favorite.active svg {
    fill: #ff5555;
    stroke: #ff5555;
}

.mobile-header .search-container {
    gap: 5px;
}

.mobile-header #mobile-search {
    flex-grow: 1;
    padding: 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    height: 16px;
}

.mobile-header #mobile-search-button {
    padding: 0 12px;
    height: 40px;
    white-space: nowrap;
}

.mobile-rates {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    white-space: nowrap;
    margin-right: 5px;
    min-width: 80px;
    width: 0;
}

/* Десктопная версия контента */
.desktop-content {
    display: block;
}

/* Заголовок и цена */
.car-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.car-title h1 {
    font-size: 24px;
    margin: 0;
}

.car-price {
    display: flex;
    align-items: center;
}

#total-price, #mobile-total-price {
    font-size: 24px;
    font-weight: bold;
    color: #438ef4;
}

#total-price {
    margin-right: 10px;
}

body.dark #total-price, body.dark #mobile-total-price {
    color: #4a90e2;
}

#price-details-btn {
    font-size: 14px;
    padding: 5px 10px;
    background: #438ef4;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

body.dark #price-details-btn {
    background: #4a90e2;
}

.car-meta {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    margin-bottom: 40px;
}

body.dark .car-meta {
    color: #aaa;
}

.meta-left {
    display: flex;
    align-items: center;
}

.views {
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.views img {
    height: 1em;
    width: auto;
    margin-right: 5px;
    vertical-align: middle;
}

/* Контент страницы */
.car-content {
    display: flex;
    gap: 20px;
}

/* Спецификации */
.car-specs {
    width: 25%;
    font-size: 14px;
}

.spec-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.spec-label {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
    width: 100px;
    text-align: left;
}

body.dark .spec-label {
    color: rgba(255, 255, 255, 0.6);
}

.spec-item span:not(.spec-label) {
    color: #000;
    font-weight: 500;
    text-align: left;
    margin-left: 10px;
}

body.dark .spec-item span:not(.spec-label) {
    color: #e0e0e0;
}

/* Блок с фотографиями */
.car-photos {
    width: 75%;
    position: relative;
    min-height: 400px;
}

/* Главное фото */
.main-photo {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 66.67%;
    background-color: transparent;
}

body.dark .main-photo {
    background-color: #333;
}

.main-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-color: transparent;
    cursor: pointer;
}

/* Стрелки для фото */
.photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

#prev-photo {
    left: 10px;
}

#next-photo {
    right: 10px;
}

/* Миниатюры фото */
.thumbnails {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #aaa transparent;
    -webkit-overflow-scrolling: touch;
}

.thumbnails::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

.thumbnails::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}

.thumbnails::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

.thumbnail-container {
    flex: 0 0 auto;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0;
    overflow: hidden;
    display: inline-block;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: #f5f5f5;
}

body.dark .thumbnail-container {
    background-color: #333;
}

.thumbnail-container.active {
    border-color: #438ef4;
}

body.dark .thumbnail-container.active {
    border-color: #4a90e2;
}

.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Стрелки для навигации по миниатюрам */
.thumbnails-container {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

.thumbnail-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.thumbnail-nav:hover {
    opacity: 1;
}

.thumbnail-prev {
    left: 0;
}

.thumbnail-next {
    right: 0;
}

/* Стили для плейсхолдера фото при загрузке */
.photo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
    font-size: 16px;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
    overflow: hidden;
    animation: photo-placeholder-pulse 1.4s ease-in-out infinite;
}

.main-photo img:not([src]) {
    opacity: 0;
}

.thumbnail-skeleton {
    animation: photo-placeholder-pulse 1.4s ease-in-out infinite;
}

@keyframes photo-placeholder-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.68; }
}

@media (prefers-reduced-motion: reduce) {
    .photo-placeholder,
    .thumbnail-skeleton {
        animation: none;
    }
}

body.dark .photo-placeholder {
    background-color: #333;
    color: #aaa;
}

/* Анимация появления фото */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* A DCD page is known from its URL before the API and remote gallery finish.
   Keep legacy Encar-only blocks out of view during that short loading phase. */
body.china-car-pending .car-history,
body.china-car-pending .seller-comment,
body.china-car-pending .car-options {
    visibility: hidden;
}

body.china-car-detail .car-history {
    display: none !important;
}

/* История автомобиля */
.car-history {
    margin-top: 40px;
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

body.dark .car-history {
    background: #1c1c1c;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.car-history h2, .car-options h2, .seller-comment h2 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #000;
}

body.dark .car-history h2, body.dark .car-options h2, body.dark .seller-comment h2 {
    color: #4a90e2;
}

.car-vin {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
}

body.dark .car-vin {
    color: rgba(255, 255, 255, 0.6);
}

.history-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.history-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.history-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.history-label {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

body.dark .history-label {
    color: rgba(255, 255, 255, 0.6);
}

.history-value {
    color: #000;
    font-weight: 500;
    margin-left: 5px;
}

body.dark .history-value {
    color: #e0e0e0;
}

#full-report-btn {
    width: 100%;
    padding: 15px;
    background: #e0e0e0;
    color: #333;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

#full-report-btn:hover {
    background: #d0d0d0;
}

body.dark #full-report-btn:hover {
    background: #4a4a4a;
}

/* Комментарий продавца */
.seller-comment {
    margin-top: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

body.dark .seller-comment {
    background: #1c1c1c;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.translation-note {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 15px;
    font-style: italic;
}

body.dark .translation-note {
    color: rgba(255, 255, 255, 0.6);
}

.seller-comment-content {
    font-size: 14px;
    line-height: 1.6;
}

#seller-comment-content p {
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

#seller-comment-content p.truncated {
    max-height: 13.5em;
    overflow: hidden;
}

.original-comment {
    display: none;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 16px;
    margin-top: 15px;
    border-left: 3px solid #438ef4;
}

body.dark .original-comment {
    background: #333;
    border-left-color: #4a90e2;
}

.original-comment h4 {
    margin-top: 0;
    font-size: 14px;
    color: #666;
}

body.dark .original-comment h4 {
    color: #aaa;
}

/* Опции автомобиля */
.car-options {
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

body.dark .car-options {
    background: #1c1c1c;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.options-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.options-column {
    width: 48%;
}

.options-column h3 {
    font-size: 1em;
    margin: 15px 0 2px;
    color: #000;
}

body.dark .options-column h3 {
    color: #e0e0e0;
}

.options-column ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 0;
    color: #000;
}

body.dark .options-column ul {
    color: #e0e0e0;
}

.options-column li {
    margin: 8px 0;
    font-size: 14px;
}

.car-options .option-list li {
    font-weight: 400;
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.4;
}

.car-options .option-list.truncated {
    max-height: 120px;
    overflow: hidden;
}

.car-options .option-list {
    transition: max-height 0.3s ease;
}

.options-column li.option-with-price span {
    color: #666;
    font-weight: 400;
}

body.dark .options-column li.option-with-price span {
    color: #aaa;
}

/* Кнопки переключения контента */
.toggle-btn {
    display: inline-block;
    margin: 10px 0 0 0;
    padding: 12px 18px;
    background: #f0f0f0;
    color: #438ef4;
    border: 1px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

body.dark .toggle-btn {
    background: #1c1c1c;
    color: #4a90e2;
    border-color: #555;
}

.toggle-btn:hover {
    background: #e0e0e0;
}

body.dark .toggle-btn:hover {
    background: #4a4a4a;
}

/* Модальные окна */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

body.dark .modal-content {
    background-color: #1c1c1c;
    color: #e0e0e0;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    color: #aaa;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    z-index: 10;
}

.close-modal:hover {
    color: #333;
}

body.dark .close-modal:hover {
    color: #eee;
}

/* Модальное окно с фото */
.photo-modal-content {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9) !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    position: relative;
}

#photo-modal {
    background-color: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.gallery {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#gallery-photo {
    max-width: 95%;
    max-height: 90vh;
    object-fit: cover;
    background-color: transparent;
    border-radius: 0;
    transition: opacity 0.3s ease;
    cursor: default;
}

#gallery-prev, #gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#gallery-prev {
    left: 20px;
}

#gallery-next {
    right: 20px;
}

.photo-modal-content .close-modal {
    color: white;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

/* Модальное окно отчета */
.report-modal-content {
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    z-index: 100;
}

#report-content {
    font-size: 14px;
    margin-bottom: 20px;
}

#report-download {
    display: block;
    text-align: center;
    padding: 10px;
    background: #e0e0e0;
    color: #333;
    text-decoration: none;
    border-radius: 12px;
    transition: background-color 0.3s ease;
}

body.dark #report-download {
    background: #1c1c1c;
    color: #e0e0e0;
}

#report-download:hover {
    background: #d0d0d0;
}

body.dark #report-download:hover {
    background: #4a4a4a;
}

.report-button {
    display: block;
    width: 100%;
    padding: 10px;
    background: #e0e0e0;
    color: #333;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin: 10px 0;
    transition: background-color 0.3s ease;
}

body.dark .report-button {
    background: #1c1c1c;
    color: #e0e0e0;
}

.report-button:hover {
    background: #d0d0d0;
}

body.dark .report-button:hover {
    background: #4a4a4a;
}

/* Модальное окно цены */
#price-breakdown {
    font-size: 14px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

/* Модальное окно заказа осмотра */
.inspection-modal-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.inspection-car-preview {
    display: flex;
    margin-bottom: 20px;
    background: #f8f8f8;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}

body.dark .inspection-car-preview {
    background: #1c1c1c;
}

.inspection-car-image {
    width: 100px;
    height: 75px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 15px;
    border-radius: 4px;
}

.inspection-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inspection-car-info {
    flex: 1;
    min-width: 0;
}

.inspection-car-info h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark .inspection-car-info h3 {
    color: #fff;
}

.inspection-car-year, .inspection-car-id {
    margin: 3px 0;
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark .inspection-car-year, body.dark .inspection-car-id {
    color: #aaa;
}

.inspection-form {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.inspection-input, .inspection-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

body.dark .inspection-input, body.dark .inspection-textarea {
    background-color: #333;
    color: #fff;
    border-color: #444;
}

.inspection-textarea {
    min-height: 80px;
    resize: vertical;
}

.inspection-validation-message {
    display: none;
    color: red;
    margin-bottom: 10px;
    font-size: 14px;
}

.inspection-buttons {
    display: flex;
    justify-content: space-between;
}

.submit-inspection-btn, .cancel-inspection-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}

.submit-inspection-btn {
    background-color: #3a7bd5;
    color: white;
    flex-grow: 1;
    margin-right: 10px;
}

.submit-inspection-btn:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}

body.dark .submit-inspection-btn:disabled {
    background-color: #555;
    color: #aaa;
}

.cancel-inspection-btn {
    background-color: #f0f0f0;
    color: #333;
}

body.dark .cancel-inspection-btn {
    background-color: #444;
    color: #eee;
}

.submit-inspection-btn:hover:not(:disabled) {
    background-color: #2a6bc5;
}

.cancel-inspection-btn:hover {
    background-color: #e0e0e0;
}

body.dark .cancel-inspection-btn:hover {
    background-color: #555;
}

/* Стили для цены с отображением города доставки */
.price-destination {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    margin-top: 2px;
}

/* Кнопки действий */
.car-action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.order-inspection-btn {
    flex: 1;
    padding: 12px 15px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.3s ease;
    text-transform: uppercase;
}

.order-inspection-btn:hover {
    background: #218838;
}

.original-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

body.dark .original-link-btn {
    background: #1c1c1c;
    color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.original-link-btn:hover {
    background: #e5e5e5;
}

body.dark .original-link-btn:hover {
    background: #444;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    color: #333;
    text-decoration: none;
}

body.dark .nav-item {
    color: #ccc;
}

.nav-item:hover {
    color: #438ef4;
}

body.dark .nav-item:hover {
    color: #4a90e2;
}

/* Мобильный блок контента */
.mobile-photos {
    position: relative;
    margin-bottom: 15px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.mobile-photos .main-photo {
    width: 100%;
    overflow: hidden;
    background-color: #f5f5f5;
}

.mobile-photos .main-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom; /* Выравнивание по центру по горизонтали и по верху по вертикали */
    transition: opacity 0.3s ease;
}

body.dark .mobile-photos .main-photo img {
    background-color: #333;
}

.mobile-photo-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.mobile-photo-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    transition: all 0.3s;
}

body.dark .mobile-photo-indicator {
    background: #555;
}

.mobile-photo-indicator.active {
    width: 24px;
    border-radius: 12px;
    background: #438ef4;
}

body.dark .mobile-photo-indicator.active {
    background: #4a90e2;
}

.mobile-price-info {
    padding: 0 15px;
    margin-bottom: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.mobile-price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mobile-car-title {
    font-size: 20px;
    margin: 0 0 5px 0;
    color: #333;
}

body.dark .mobile-car-title {
    color: #e0e0e0;
}

.mobile-specs {
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    margin-bottom: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    overflow-x: hidden;
}

body.dark .mobile-specs {
    background: #1c1c1c;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.mobile-specs h2 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 15px 0;
    color: #438ef4;
}

body.dark .mobile-specs h2 {
    color: #4a90e2;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mobile-spec-item {
    display: flex;
    flex-direction: column;
}

.mobile-spec-item .spec-label {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
    width: auto;
    margin-bottom: 4px;
    font-size: 14px;
}

.mobile-spec-item span:not(.spec-label) {
    color: #000;
    font-weight: 500;
    font-size: 14px;
}

body.dark .mobile-spec-item span:not(.spec-label) {
    color: #e0e0e0;
}

.mobile-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    font-size: 13px;
    margin: 0;
    padding: 10px 15px !important;
    flex-wrap: nowrap;
    white-space: nowrap;
    box-sizing: border-box;
    overflow-x: hidden;
	margin-bottom: 80px; /* Увеличиваем отступ снизу */
}

body.dark .mobile-meta {
    color: #aaa;
}

.mobile-meta .views {
    display: flex;
    align-items: center;
}

.mobile-meta .views img {
    height: 10px;
    margin-right: 4px;
}

.mobile-specs-footer {
    margin-bottom: 60px;
}

.mobile-fixed-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    padding: 10px 15px;
    z-index: 1000;
    justify-content: space-between;
    gap: 10px;
    display: none;
    box-sizing: border-box;
    overflow-x: hidden;
}

.mobile-fixed-buttons::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
    z-index: -1;
}

	.mobile-fixed-buttons {
    display: none !important;
    }	

.mobile-fixed-buttons .order-inspection-btn,
.mobile-fixed-buttons .original-link-btn {
    padding: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mobile-fixed-buttons .order-inspection-btn {
    flex: 1;
    font-size: 13px;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
    /* Скрываем десктопные элементы */
    .desktop-header,
    .desktop-actions,
    .car-content,
    .car-header {
        display: none !important;
    }
    
    .desktop-content {
        display: block;
        width: calc(100% - 30px);
    }
    
    /* Показываем мобильные элементы */
    .mobile-header,
    .mobile-photos,
    .mobile-price-info,
    .mobile-specs,
    .mobile-meta,
    .mobile-specs-footer,
    .car-history,
    .seller-comment,
    .car-options,
    .mobile-fixed-buttons {
        display: block !important;
    }
    
    .mobile-fixed-buttons {
        display: flex !important;
    }
    
    /* Модальные окна */
    .modal {
        z-index: 2000;
    }
    
    .modal-content {
        max-width: 95%;
        padding: 15px;
        z-index: 2000 !important;
    }
    
    /* Размеры и отступы */
    .car-detail-container {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }
    
    .mobile-photos {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }
    
    .mobile-photos .main-photo {
        border-radius: 0;
    }
    
    /* Стили текста */
    #mobile-total-price {
        font-size: 22px;
    }
    
    .mobile-car-title {
        font-size: 18px;
    }
    
    .mobile-specs h2,
    .car-history h2,
    .seller-comment h2,
    .car-options h2 {
        font-size: 20px;
    }
    
    /* Блоки контента */
    .car-history,
    .seller-comment,
    .car-options {
        margin: 15px;
        width: calc(100% - 30px);
        padding: 15px;
    }
    
    .history-items {
        grid-template-columns: 1fr;
    }
    
    .options-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .options-column {
        width: 100%;
    }
    
    .mobile-specs,
    .mobile-specs-footer {
        margin: 0 15px;
        width: calc(100% - 30px);
    }
    
    .mobile-specs {
        margin-bottom: 15px;
    }
    
    .mobile-meta {
        margin: 5px 0;
        padding: 5px 15px !important;
        font-size: 14px;
        display: flex !important;
    }
    
    /* Кнопки */
    #full-report-btn {
        padding: 12px;
        font-size: 14px;
    }
    
    #gallery-prev, #gallery-next {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    #gallery-prev {
        left: 10px;
    }
    
    #gallery-next {
        right: 10px;
    }
    
    #gallery-photo {
        max-width: 95%;
        max-height: 80vh;
    }
    
    .thumbnail-nav {
        display: none;
    }
}

@media (max-width: 576px) {
    .modal-content {
        width: 95%;
        padding: 15px;
    }
    
    .inspection-modal-content {
        width: 100%;
        padding: 0;
    }
    
    .inspection-car-image {
        width: 80px;
        height: 60px;
    }
    
    .inspection-car-info h3 {
        font-size: 14px;
    }
    
    .inspection-car-year, 
    .inspection-car-id {
        font-size: 12px;
    }
    
    .inspection-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .submit-inspection-btn {
        margin-right: 0;
    }
    
    .inspection-input, 
    .inspection-textarea {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    #mobile-total-price {
        font-size: 22px;
    }
    
    .mobile-car-title {
        font-size: 15px;
    }
    
    .mobile-specs h2 {
        font-size: 20px;
    }
	
}

@media (min-width: 769px) and (max-width: 1024px) {
    .mobile-header {
        display: block;
    }
    
    .desktop-content {
        display: block;
    }
    
    header.desktop-header {
        display: none;
    }
    
    .desktop-actions {
        margin-top: 20px;
    }	
}

@media (min-width: 769px) {
    .mobile-photos,
    .mobile-price-info,
    .mobile-specs {
        display: none;
    }
}


/* Модальное окно цены */
#price-breakdown {
    font-size: 14px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.price-item.note {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 10px;
}

body.dark .price-item.note {
    color: #aaa;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    #price-breakdown {
        font-size: 12px;
    }

    .price-item {
        margin-bottom: 3px;
    }

    .price-item.note {
        font-size: 11px;
        margin-top: 8px;
    }

    .modal-content {
        max-width: 95%;
        padding: 15px;
    }
}

/* Убираем курсы валют из шапки */
.exchange-rates {
    display: none !important;
}

/* Обновляем стили кнопок действий */
.action-btn, #add-favorite, #compare, #add-to-selection {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

body.dark .action-btn, 
body.dark #add-favorite, 
body.dark #compare, 
body.dark #add-to-selection {
    background: #1c1c1c;
    color: #e0e0e0;
    border-color: #555;
}

.action-btn:hover, 
#add-favorite:hover, 
#compare:hover, 
#add-to-selection:hover {
    background: #f5f5f5;
    border-color: #438ef4;
    transform: translateY(-1px);
}

body.dark .action-btn:hover, 
body.dark #add-favorite:hover, 
body.dark #compare:hover, 
body.dark #add-to-selection:hover {
    background: #1c1c1c;
    border-color: #4a90e2;
}

/* Активное состояние избранного */
#add-favorite.active {
    background: #ff6b6b;
    color: white;
    border-color: #ff6b6b;
}

body.dark #add-favorite.active, {
    background: #e63946;
    border-color: #e63946;
}

/* Кнопка подробнее про цену */
#price-details-btn, #mobile-price-details-btn {
    padding: 8px 12px;
    background: #f8f9fa;
    color: #333;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark #price-details-btn, 
body.dark #mobile-price-details-btn {
    background: #1c1c1c;
    color: #e0e0e0;
    border-color: #555;
}

#price-details-btn:hover, 
#mobile-price-details-btn:hover {
    background: #e9ecef;
    border-color: #438ef4;
    transform: translateY(-1px);
}

body.dark #price-details-btn:hover, 
body.dark #mobile-price-details-btn:hover {
    background: #4a4a4a;
    border-color: #4a90e2;
}

/* Кнопки заказа осмотра и оригинальной ссылки */
.order-inspection-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    text-transform: uppercase;
    flex: 1;
}

.order-inspection-btn:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.original-link-btn {
    background: white;
    color: #333;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

body.dark .original-link-btn {
    background: #1c1c1c;
    color: #e0e0e0;
    border-color: #555;
}

.original-link-btn:hover {
    background: #f5f5f5;
    border-color: #438ef4;
    transform: translateY(-1px);
}

body.dark .original-link-btn:hover {
    background: #1c1c1c;
    border-color: #4a90e2;
}

/* Стили модальных окон как в каталоге */
.modal {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: none;
}

body.dark .modal-content {
    background: #1c1c1c;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Кнопки в модальных окнах */
.modal-content button, 
.inspection-buttons button,
.submit-inspection-btn,
.cancel-inspection-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.submit-inspection-btn, 
.confirm-btn {
    background: #438ef4;
    color: white;
}

.submit-inspection-btn:hover, 
.confirm-btn:hover {
    background: #1e3c72;
    transform: translateY(-1px);
}

body.dark .submit-inspection-btn, 
body.dark .confirm-btn {
    background: #4a90e2;
}

body.dark .submit-inspection-btn:hover, 
body.dark .confirm-btn:hover {
    background: #357abd;
}

.cancel-inspection-btn, 
.cancel-btn {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #dee2e6;
}

.cancel-inspection-btn:hover, 
.cancel-btn:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

body.dark .cancel-inspection-btn, 
body.dark .cancel-btn {
    background: #1c1c1c;
    color: #e0e0e0;
    border-color: #555;
}

body.dark .cancel-inspection-btn:hover, 
body.dark .cancel-btn:hover {
    background: #4a4a4a;
}

/* Кнопки переключения (Read more, Show options) */
.toggle-btn {
    background: #f8f9fa;
    color: #438ef4;
    border: 1px solid #dee2e6;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.toggle-btn:hover {
    background: #e9ecef;
    border-color: #438ef4;
    transform: translateY(-1px);
}

body.dark .toggle-btn {
    background: #1c1c1c;
    color: #4a90e2;
    border-color: #555;
}

body.dark .toggle-btn:hover {
    background: #4a4a4a;
    border-color: #4a90e2;
}

/* Кнопка полного отчета */
#full-report-btn {
    background: white;
    color: #333;
    border: 1px solid #ddd;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    font-size: 16px;
}

#full-report-btn:hover {
    background: #f5f5f5;
    border-color: #438ef4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark #full-report-btn:hover {
    background: #1c1c1c;
    border-color: #4a90e2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Стили цены */
#total-price, #mobile-total-price {
    font-size: 19px;
    font-weight: 700;
    color: #000;
    border-radius: 8px;
    display: inline-block;
}

body.dark #total-price, 
body.dark #mobile-total-price {
    color: #fff;
}

.price-destination {
    font-size: 13px;
    color: #666;
    font-weight: normal;
    margin-top: 4px;
    opacity: 0.8;
}

body.dark .price-destination {
    color: #aaa;
}

.car-photo, .main-photo img, #mobile-current-photo {
  object-fit: cover;
  object-position: inherit; /* Показываем верх, обрезаем низ */
}

/* Для миниатюр тоже */
.thumbnail {
  object-fit: cover;
  object-position: center top;
}

/* Для галереи в полноэкранном режиме оставляем contain */
#gallery-photo {
  object-fit: contain;
  object-position: center;
}

/* Стили для кнопки узнать стоимость */
.price-inquiry-btn {
  background: #ffc107;
  color: #000;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  text-transform: uppercase;
  flex: 1;
}

.price-inquiry-btn:hover {
  background: #e0a800;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* Мобильные фиксированные кнопки - желтая кнопка */
.mobile-fixed-buttons .price-inquiry-btn {
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

/* Стили для обрезки комментария */
#seller-comment-content.truncated {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

#seller-comment-content.truncated::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(to right, transparent, white 20px);
    padding-left: 20px;
    width: 50px;
    text-align: right;
}

body.dark #seller-comment-content.truncated::after {
    background: linear-gradient(to right, transparent, #1c1c1c 20px);
}

/* ОБЯЗАТЕЛЬНЫЕ стили для модального окна авторизации */
.auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 1000;
    overflow-y: auto;
}

.auth-modal.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.auth-modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp 0.4s ease-out;
}

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

.modal-header {
    padding: 25px 30px 15px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: #f5f5f5;
}

.auth-form {
    padding: 25px 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: white;
}

.input-wrapper input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.input-icon {
    position: absolute;
    left: 14px;
    color: #666;
    pointer-events: none;
    z-index: 1;
}

.password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.submit-btn {
    width: 100%;
    padding: 14px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.submit-btn:hover {
    background: #1d4ed8;
}

.submit-btn:disabled {
    background: #666;
    cursor: not-allowed;
}

.btn-loader {
    display: none;
}

.loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.form-footer {
    text-align: center;
}

.form-footer p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.switch-link {
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
}

.error-message {
    background: #fee2e2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #fecaca;
    display: none;
}

/* Добавить в car_detail.css */

/* Десктопная кнопка поделиться */
.action-btn.referral-share-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.action-btn.referral-share-btn:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.action-btn.referral-share-btn .icon svg {
    stroke: white;
}

/* Мобильная кнопка поделиться */
.mobile-action-btn.referral-share-btn {
    color: white;
    border: 2px solid transparent;
}

.mobile-action-btn.referral-share-btn svg {
    stroke: white;
}

.mobile-action-btn.referral-share-btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* Скрыть кнопки если нет реферального кода */
.referral-share-btn.hidden {
    display: none !important;
}

/* Анимация пульсации для привлечения внимания */
.referral-share-btn.pulse {
    animation: referralPulse 2s infinite;
}

@keyframes referralPulse {
    0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

/* Добавить в car_detail.css */

/* Реферальные модальные окна */
.referral-auth-modal,
.referral-create-modal,
.referral-success-modal {
    max-width: 500px;
    width: 90%;
}

.referral-info {
    text-align: center;
}

.referral-benefit h4 {
    color: #667eea;
    margin-bottom: 10px;
}

.referral-example {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.referral-example h5 {
    margin: 0 0 8px 0;
    color: #495057;
}

.referral-features {
    margin-top: 20px;
}

.feature,
.benefit,
.tip {
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.feature:last-child,
.benefit:last-child,
.tip:last-child {
    border-bottom: none;
}

.success-content {
    text-align: center;
}

.success-icon {
    font-size: 48px;
    margin: 20px 0;
}

.share-tips {
    margin: 20px 0;
    text-align: left;
}

.share-tips h4 {
    text-align: center;
    margin-bottom: 15px;
    color: #495057;
}

.earnings-reminder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .referral-auth-modal,
    .referral-create-modal,
    .referral-success-modal {
        width: 95%;
        margin: 20px auto;
    }
    
    .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
	
	.partner-link-btn {
    background: white;
    color: #333;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

body.dark .partner-link-btn {
    background: #1c1c1c;
    color: #e0e0e0;
    border-color: #555;
}

.partner-link-btn:hover {
    background: #f5f5f5;
    border-color: #438ef4;
    transform: translateY(-1px);
}

body.dark .partner-link-btn:hover {
    background: #1c1c1c;
    border-color: #4a90e2;
}

/* ============================================
   ПРАВКА 2: Стили для мобильного модального окна
   ============================================ */

/* Мобильное модальное окно снизу */
.mobile-bottom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-bottom-modal.active {
  opacity: 1;
  pointer-events: all;
}

.mobile-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.mobile-modal-content {
  position: relative;
  background: white;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-height: 90vh;
  min-height: 50vh;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-bottom-modal.active .mobile-modal-content {
  transform: translateY(0);
}

body.dark .mobile-modal-content {
  background: #1c1c1c;
}

/* Заголовок модального окна */
.mobile-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

body.dark .mobile-modal-header {
  border-bottom-color: #333;
}

.mobile-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1c1c1c;
}

body.dark .mobile-modal-header h3 {
  color: #e0e0e0;
}

.mobile-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #8e8e93;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.mobile-modal-close:hover {
  background: #f0f0f0;
  color: #1c1c1c;
}

body.dark .mobile-modal-close:hover {
  background: #333;
  color: #e0e0e0;
}

/* Тело модального окна */
.mobile-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
}

/* Превью автомобиля */
.inspection-car-preview {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

body.dark .inspection-car-preview {
  border-bottom-color: #333;
}

.inspection-car-image {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f5f5;
}

body.dark .inspection-car-image {
  background: #333;
}

.inspection-car-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspection-car-info {
  flex: 1;
}

.inspection-car-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1c;
  line-height: 1.3;
}

body.dark .inspection-car-info h4 {
  color: #e0e0e0;
}

.inspection-car-year,
.inspection-car-id {
  margin: 0;
  font-size: 14px;
  color: #8e8e93;
  line-height: 1.3;
}

/* Форма */
.inspection-form {
  padding-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #1c1c1c;
}

body.dark .form-group label {
  color: #e0e0e0;
}

.mobile-input {
  width: 100%;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  background: white;
  color: #1c1c1c;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}

.mobile-input:focus {
  outline: none;
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

body.dark .mobile-input {
  background: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

body.dark .mobile-input:focus {
  border-color: #0A84FF;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1);
}

.mobile-input::placeholder {
  color: #8e8e93;
}

/* Подвал модального окна */
.mobile-modal-footer {
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #f0f0f0;
  background: white;
  backdrop-filter: blur(20px);
}

body.dark .mobile-modal-footer {
  background: #1c1c1c;
  border-top-color: #333;
}

.mobile-submit-btn {
  width: 100%;
  padding: 16px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-submit-btn:hover {
  background: #0056b3;
}

.mobile-submit-btn:active {
  transform: scale(0.98);
}

.mobile-submit-btn:disabled {
  background: #8e8e93;
  cursor: not-allowed;
  transform: none;
}

/* Стили для гостевых преимуществ */
.guest-benefits {
  background: rgba(0, 122, 255, 0.1);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

body.dark .guest-benefits {
  background: rgba(10, 132, 255, 0.15);
  border-color: rgba(10, 132, 255, 0.3);
}

.guest-benefits p {
  margin: 0;
  font-size: 14px;
  color: #1c1c1c;
  line-height: 1.4;
}

body.dark .guest-benefits p {
  color: #e0e0e0;
}

.guest-benefits a {
  color: #007AFF;
  text-decoration: none;
  font-weight: 500;
}

body.dark .guest-benefits a {
  color: #0A84FF;
}

/* ============================================
   ПРАВКА 3: Обновленные стили кнопок действий
   ============================================ */

/* Контейнер кнопок действий */
.car-action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  align-items: stretch;
}

.car-action-buttons > * {
  flex: 1;
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Базовые стили для всех кнопок действий */
.order-inspection-btn,
.price-inquiry-btn,
.partner-link-btn,
.original-link-btn {
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-sizing: border-box;
  gap: 8px;
}

/* Кнопка заказа осмотра */
.order-inspection-btn {
  background: #34C759;
  color: white;
}

.order-inspection-btn:hover {
  background: #30B954;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3);
}

/* Кнопка узнать стоимость */
.price-inquiry-btn {
  background: #FF9500;
  color: white;
}

.price-inquiry-btn:hover {
  background: #E8850C;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 149, 0, 0.3);
}

@media (max-width: 768px) {
  
  /* Скрываем десктопные кнопки на мобильных */
  .car-action-buttons {
    display: none;
  }
}

/* ============================================
   ПРАВКА 7: Стили для нового мобильного меню
   ============================================ */

/* Новое мобильное меню */

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #8e8e93;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 12px;
  min-width: 60px;
  position: relative;
}

.nav-item:hover,
.nav-item:active {
  color: #007AFF;
  background: rgba(0, 122, 255, 0.1);
  transform: scale(0.98);
}

body.dark .nav-item {
  color: #8e8e93;
}

body.dark .nav-item:hover,
body.dark .nav-item:active {
  color: #0A84FF;
  background: rgba(10, 132, 255, 0.15);
}

/* Активный элемент меню */
.nav-item.active {
  color: #007AFF;
}

body.dark .nav-item.active {
  color: #0A84FF;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  transition: transform 0.2s ease;
}

.nav-item:active .nav-icon {
  transform: scale(0.9);
}

.nav-label {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  opacity: 0.8;
}

.nav-item:hover .nav-label,
.nav-item.active .nav-label {
  opacity: 1;
}

/* Показываем меню только на мобильных */
@media (max-width: 768px) {
  
  /* Добавляем отступ снизу для контента */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
  
  /* Убираем отступ для модальных окон */
  .modal,
  .mobile-filter-modal,
  .mobile-bottom-modal {
    padding-bottom: 0;
  }
  
  .mobile-bottom-modal .mobile-modal-content {
    margin-bottom: 0;
  }
}

/* Анимация при загрузке страницы */
@keyframes slideUpFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ СТИЛЕЙ
   ============================================ */

/* Улучшенные стили для мобильной шапки */
.mobile-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark .mobile-header {
  background: rgba(0, 0, 0, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Стили для кнопки "Назад" */
.mobile-back-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #007AFF;
  margin-left: -5px;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-weight: 600;
}

.mobile-back-btn:hover {
  background: rgba(0, 122, 255, 0.1);
}

body.dark .mobile-back-btn {
  color: #0A84FF;
}

body.dark .mobile-back-btn:hover {
  background: rgba(10, 132, 255, 0.15);
}

/* Улучшенные стили для кнопок в шапке */
.mobile-action-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #007AFF;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.mobile-action-btn:hover {
  background: rgba(0, 122, 255, 0.1);
}

body.dark .mobile-action-btn {
  color: #0A84FF;
}

body.dark .mobile-action-btn:hover {
  background: rgba(10, 132, 255, 0.15);
}

/* Специальные стили для кнопки избранного */
#mobile-add-favorite svg {
  stroke: #8e8e93;
  transition: all 0.2s ease;
}

#mobile-add-favorite.active svg {
  fill: #FF3B30;
  stroke: #FF3B30;
}

body.dark #mobile-add-favorite svg {
  stroke: #8e8e93;
}

body.dark #mobile-add-favorite.active svg {
  fill: #FF453A;
  stroke: #FF453A;
}

/* ============================================
   АДАПТИВНЫЕ ИСПРАВЛЕНИЯ
   ============================================ */

/* Для планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
  
  body {
    padding-bottom: 0;
  }
  
  .car-action-buttons {
    display: flex !important;
  }
}

/* Для больших экранов */
@media (min-width: 1025px) {
  
  body {
    padding-bottom: 0;
  }
  
  .car-action-buttons {
    display: flex !important;
  }
  
  /* Улучшенные стили для десктопной версии */
  .car-action-buttons {
    max-width: 600px;
  }
  
  .car-action-buttons > * {
    max-width: 200px;
  }
}

/* ============================================
   ИСПРАВЛЕНИЯ ДЛЯ SAFARI iOS
   ============================================ */

/* Исправляем проблемы с backdrop-filter в Safari */
@supports (-webkit-backdrop-filter: blur(20px)) {
  
  .mobile-header {
    -webkit-backdrop-filter: blur(20px);
  }
  
  .mobile-modal-footer {
    -webkit-backdrop-filter: blur(20px);
  }
}

/* Исправляем проблемы с safe-area в старых браузерах */
@supports not (padding-bottom: env(safe-area-inset-bottom)) {
  
  .mobile-modal-footer {
    padding-bottom: 20px;
  }
  
  @media (max-width: 768px) {
    body {
      padding-bottom: 88px;
    }
  }
}

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ
   ============================================ */

/* Исправляем z-index конфликты */
.mobile-bottom-modal {
  z-index: 10001;
}

.mobile-header {
  z-index: 1001;
}

/* Исправляем проблемы с переполнением на очень маленьких экранах */
@media (max-width: 320px) {
  .nav-label {
    font-size: 9px;
  }
  
  .nav-item {
    min-width: 50px;
  }
  
  .mobile-modal-content {
    border-radius: 12px 12px 0 0;
  }
  
  .mobile-input {
    padding: 14px;
    font-size: 15px;
  }
}

/* Исправляем проблемы с высокими экранами */
@media (min-height: 812px) {
  .mobile-modal-content {
    max-height: 85vh;
  }
}

/* Исправляем проблемы с ландшафтной ориентацией на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-modal-content {
    max-height: 95vh;
    min-height: 70vh;
  }
  
  .mobile-modal-body {
    padding-bottom: 10px;
  }
  
  .inspection-form {
    padding-bottom: 10px;
  }
}

/* Улучшенные переходы для всех интерактивных элементов */
.mobile-input,
.mobile-submit-btn,
.mobile-modal-close,
.nav-item,
.mobile-action-btn,
.mobile-back-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Исправляем проблемы с фокусом на мобильных */
.mobile-input:focus {
  transform: none;
  -webkit-appearance: none;
}

/* Дополнительные стили для лучшей производительности */
.mobile-bottom-modal,
.mobile-header {
  will-change: transform;
}

.mobile-modal-content {
  will-change: transform;
}

.nav-icon,
.mobile-action-btn,
.mobile-back-btn {
  will-change: transform;
}

/* ============================================
   МОДАЛЬНЫЕ ОКНА - СВЕТЛАЯ И ТЁМНАЯ ТЕМА
   ============================================ */

/* Базовые стили модальных окон */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.show,
.modal[style*="display: flex"] {
    display: flex !important;
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 90%;
    max-width: 550px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

body.dark .modal-content {
    background: #1c1c1c;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Заголовок модального окна */
.modal-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.dark .modal-header {
    border-bottom-color: #333;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

body.dark .modal-header h3 {
    color: #e0e0e0;
}

/* Тело модального окна */
.modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

/* Подвал модального окна */
.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: #fff;
}

body.dark .modal-footer {
    border-top-color: #333;
    background: #1c1c1c;
}

/* Кнопка закрытия */
.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    color: #8e8e93;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-modal:hover {
    background: #f0f0f0;
    color: #333;
}

body.dark .close-modal {
    color: #8e8e93;
}

body.dark .close-modal:hover {
    background: #333;
    color: #e0e0e0;
}

/* ============================================
   ФОРМЫ В МОДАЛЬНЫХ ОКНАХ
   ============================================ */

/* Превью автомобиля */
.inspection-car-preview {
    display: flex;
    gap: 15px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

body.dark .inspection-car-preview {
    background: #2a2a2a;
    border-color: #444;
}

.inspection-car-image {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

body.dark .inspection-car-image {
    background: #333;
}

.inspection-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inspection-car-info {
    flex: 1;
    min-width: 0;
}

.inspection-car-info h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

body.dark .inspection-car-info h4 {
    color: #e0e0e0;
}

.inspection-car-year,
.inspection-car-id {
    margin: 2px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.3;
}

body.dark .inspection-car-year,
body.dark .inspection-car-id {
    color: #aaa;
}

/* Форма */
.inspection-form {
    margin-bottom: 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

body.dark .form-group label {
    color: #e0e0e0;
}

/* Поля ввода */
.inspection-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.inspection-input:focus {
    outline: none;
    border-color: #438ef4;
    box-shadow: 0 0 0 3px rgba(67, 142, 244, 0.1);
}

body.dark .inspection-input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

body.dark .inspection-input:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.inspection-input::placeholder {
    color: #8e8e93;
}

body.dark .inspection-input::placeholder {
    color: #666;
}

/* Textarea */
.inspection-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.inspection-textarea:focus {
    outline: none;
    border-color: #438ef4;
    box-shadow: 0 0 0 3px rgba(67, 142, 244, 0.1);
}

body.dark .inspection-textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

body.dark .inspection-textarea:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Кнопка отмены */
.cancel-inspection-btn {
    padding: 12px 20px;
    background: #f8f9fa;
    color: #333;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cancel-inspection-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
}

body.dark .cancel-inspection-btn {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}

body.dark .cancel-inspection-btn:hover {
    background: #333;
    border-color: #555;
}

/* Стили для гостевых преимуществ */
.guest-benefits {
    background: rgba(67, 142, 244, 0.1);
    border: 1px solid rgba(67, 142, 244, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

body.dark .guest-benefits {
    background: rgba(74, 144, 226, 0.15);
    border-color: rgba(74, 144, 226, 0.3);
}

.guest-benefits p {
    margin: 0;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

body.dark .guest-benefits p {
    color: #e0e0e0;
}

.guest-benefits a {
    color: #438ef4;
    text-decoration: none;
    font-weight: 500;
}

.guest-benefits a:hover {
    text-decoration: underline;
}

body.dark .guest-benefits a {
    color: #4a90e2;
}

/* ============================================
   СТИЛИ ДЛЯ ЗАГРУЗКИ ОТЧЁТА
   ============================================ */

/* Информация об авторизации */
.auth-required-info {
    text-align: center;
    padding: 20px 0;
}

.info-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.auth-required-info h4 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

body.dark .auth-required-info h4 {
    color: #e0e0e0;
}

.auth-required-info p {
    margin: 0 0 20px 0;
    color: #666;
    line-height: 1.5;
}

body.dark .auth-required-info p {
    color: #aaa;
}

/* Особенности отчёта */
.report-features {
    text-align: left;
    margin: 20px 0;
}

.report-features .feature {
    padding: 8px 0;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.report-features .feature:last-child {
    border-bottom: none;
}

body.dark .report-features .feature {
    color: #e0e0e0;
    border-bottom-color: #333;
}

/* Ссылка на пример */
.example-link {
    margin-top: 20px;
}

.sample-report-link {
    color: #438ef4;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.sample-report-link:hover {
    text-decoration: underline;
}

body.dark .sample-report-link {
    color: #4a90e2;
}

/* Загрузка отчёта */
.report-loading {
    text-align: center;
    padding: 30px 20px;
}

.report-loading h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

body.dark .report-loading h4 {
    color: #e0e0e0;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #438ef4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

body.dark .loading-spinner {
    border-color: #333;
    border-top-color: #4a90e2;
}

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

.loading-steps {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

body.dark .loading-steps {
    background: #2a2a2a;
    border-color: #444;
}

.loading-steps .step {
    padding: 8px 0;
    font-size: 14px;
    color: #6c757d;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

body.dark .loading-steps .step {
    color: #8e8e93;
}

#mobile-loading-status,
#desktop-loading-status {
    color: #666;
    font-size: 14px;
    margin: 15px 0;
    font-style: italic;
}

body.dark #mobile-loading-status,
body.dark #desktop-loading-status {
    color: #aaa;
}

/* ============================================
   МОБИЛЬНЫЕ МОДАЛЬНЫЕ ОКНА
   ============================================ */

/* Мобильное модальное окно снизу */
.mobile-bottom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-bottom-modal.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.mobile-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 90vh;
    min-height: 50vh;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mobile-bottom-modal.active .mobile-modal-content {
    transform: translateY(0);
}

body.dark .mobile-modal-content {
    background: #1c1c1c;
}

/* Заголовок мобильного модального окна */
.mobile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

body.dark .mobile-modal-header {
    border-bottom-color: #333;
}

.mobile-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

body.dark .mobile-modal-header h3 {
    color: #e0e0e0;
}

.mobile-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #8e8e93;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mobile-modal-close:hover {
    background: #f0f0f0;
    color: #333;
}

body.dark .mobile-modal-close:hover {
    background: #333;
    color: #e0e0e0;
}

/* Тело мобильного модального окна */
.mobile-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
}

/* Подвал мобильного модального окна */
.mobile-modal-footer {
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid #f0f0f0;
    background: #fff;
    backdrop-filter: blur(20px);
}

body.dark .mobile-modal-footer {
    background: #1c1c1c;
    border-top-color: #333;
}

.mobile-submit-btn {
    width: 100%;
    padding: 16px;
    background: #438ef4;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-submit-btn:hover {
    background: #1e3c72;
}

.mobile-submit-btn:active {
    transform: scale(0.98);
}

.mobile-submit-btn:disabled {
    background: #8e8e93;
    cursor: not-allowed;
    transform: none;
}

body.dark .mobile-submit-btn {
    background: #4a90e2;
}

body.dark .mobile-submit-btn:hover {
    background: #357abd;
}

/* Мобильные поля ввода */
.mobile-input {
    width: 100%;
    padding: 16px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 16px;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    transition: all 0.2s ease;
    resize: vertical;
}

.mobile-input:focus {
    outline: none;
    border-color: #438ef4;
    box-shadow: 0 0 0 3px rgba(67, 142, 244, 0.1);
}

body.dark .mobile-input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

body.dark .mobile-input:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.mobile-input::placeholder {
    color: #8e8e93;
}

body.dark .mobile-input::placeholder {
    color: #666;
}

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

@media (max-width: 768px) {
    .modal-content {
        max-width: 95%;
        border-radius: 12px;
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-footer button {
        width: 100%;
    }
    
    .inspection-car-preview {
        flex-direction: column;
        text-align: center;
    }
    
    .inspection-car-image {
        width: 100px;
        height: 75px;
        margin: 0 auto 10px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 98%;
        max-height: 95vh;
    }
    
    .loading-steps {
        padding: 15px;
    }
    
    .report-loading {
        padding: 20px 15px;
    }
}

/* ДОБАВИТЬ В КОНЕЦ ФАЙЛА style.css */

/* Уведомление об автоопределении города */
.city-detection-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 10000;
  max-width: 350px;
  padding: 20px;
  border-left: 4px solid #2a5298;
  animation: slideInRight 0.3s ease-out;
}

.city-detection-notification .notification-content p {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.city-detection-notification .notification-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.city-detection-notification .notification-buttons button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.city-detection-notification .accept-btn {
  background: #2a5298 !important;
  color: white !important;
  border-color: #2a5298 !important;
}

.city-detection-notification .accept-btn:hover {
  background: #1e3a73 !important;
}

.city-detection-notification .change-btn:hover {
  background: #f5f5f5;
}

.city-detection-notification .dismiss-btn {
  background: #dc3545 !important;
  color: white !important;
  border-color: #dc3545 !important;
  min-width: 32px;
  padding: 8px 12px;
}

.city-detection-notification .dismiss-btn:hover {
  background: #c82333 !important;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Мобильная версия */
@media (max-width: 768px) {
  .city-detection-notification {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    padding: 16px;
  }
  
  .city-detection-notification .notification-buttons {
    justify-content: space-between;
  }
  
  .city-detection-notification .notification-buttons button {
    flex: 1;
    min-width: 80px;
  }
  
  .city-detection-notification .dismiss-btn {
    flex: 0 0 40px;
  }
}

/* Добавить в CSS файл */

.city-change-notification .old-city-info {
  font-size: 12px;
  color: #666;
  margin: 5px 0 15px 0;
  font-style: italic;
}

.city-change-notification .notification-buttons {
  flex-wrap: wrap;
  gap: 6px;
}

.city-change-notification .notification-buttons button {
  font-size: 11px;
  padding: 6px 12px;
  flex: 1;
  min-width: 80px;
}

@media (max-width: 768px) {
  .city-change-notification .notification-buttons {
    flex-direction: column;
  }
  
  .city-change-notification .notification-buttons button {
    width: 100%;
    margin-bottom: 4px;
  }
  
  .city-change-notification .dismiss-btn {
    width: auto !important;
    align-self: flex-end;
    margin-bottom: 0;
  }
}

/* Мобильные модальные окна */
.mobile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-modal-content {
  background: white;
  width: 100%;
  max-height: 90vh;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-modal-overlay.active .mobile-modal-content {
  transform: translateY(0);
}

.mobile-modal-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
}

.mobile-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.mobile-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #666;
}

.mobile-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.car-summary {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 12px;
}

.car-summary-photo {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.car-summary-info {
  flex: 1;
}

.car-summary-info h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
}

.car-year {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.mobile-modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  background: white;
  position: sticky;
  bottom: 0;
}

.mobile-submit-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Форма в мобильном модальном окне */
.form-content .form-group {
  margin-bottom: 20px;
}

.form-content label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.mobile-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.mobile-input:focus {
  outline: none;
  border-color: #007bff;
}

.mobile-input[readonly] {
  background-color: #f8f9fa;
  color: #6c757d;
}

.guest-benefits {
  background: #f0f8ff;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.guest-benefits p {
  margin: 0;
  font-size: 14px;
  color: #0066cc;
}

.guest-benefits a {
  color: #0066cc;
  text-decoration: underline;
}

/* Стили для архивного автомобиля */
.archived-car-page {
  filter: brightness(0.8);
}

.archived-car-page .car-photos,
.archived-car-page .mobile-photos {
  opacity: 0.6;
  position: relative;
}

.archived-car-page .car-photos::after,
.archived-car-page .mobile-photos::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.archived-status {
  color: #dc3545;
  font-weight: bold;
  font-size: 18px;
}

.archived-car-notification {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 24px;
  margin: 15px;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.notification-icon {
  color: #856404;
  flex-shrink: 0;
}

.notification-text h3 {
  margin: 0 0 8px 0;
  color: #856404;
  font-size: 20px;
  font-weight: 600;
}

.notification-text p {
  margin: 0;
  color: #6c5700;
  font-size: 16px;
  line-height: 1.5;
}

.similar-cars-section {
  text-align: center;
  margin: 15px;
}

.find-similar-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.find-similar-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
}

.find-similar-btn:active {
  transform: translateY(0);
}

/* Мобильные стили */
@media (max-width: 768px) {
  .notification-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .notification-text h3 {
    font-size: 18px;
  }
  
  .notification-text p {
    font-size: 14px;
  }
  
  .find-similar-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
  }
}

/* Стили для архивного автомобиля */
.archived-car-page {
  filter: brightness(0.8);
}

.archived-car-page .car-photos,
.archived-car-page .mobile-photos {
  opacity: 0.6;
  position: relative;
}

.archived-car-page .car-photos::after,
.archived-car-page .mobile-photos::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.archived-status {
  color: #dc3545;
  font-weight: bold;
  font-size: 18px;
}

.archived-car-notification {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 24px;
  margin: 0 15px;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.notification-icon {
  color: #856404;
  flex-shrink: 0;
}

.notification-text h3 {
  margin: 0 0 8px 0;
  color: #856404;
  font-size: 20px;
  font-weight: 600;
}

.notification-text p {
  margin: 0;
  color: #6c5700;
  font-size: 16px;
  line-height: 1.5;
}

/* Кнопка поиска похожих автомобилей */
.find-similar-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  width: 100%;
  justify-content: center;
}

.find-similar-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
}

.find-similar-btn:active {
  transform: translateY(0);
}

/* Мобильная версия кнопки поиска похожих */
.mobile-find-similar-btn {
  width: 100%;
  padding: 16px;
  margin: 0;
  border-radius: 12px;
  font-size: 16px;
}

/* Мобильные стили для уведомления */
@media (max-width: 768px) {
  .notification-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .notification-text h3 {
    font-size: 18px;
  }
  
  .notification-text p {
    font-size: 14px;
  }
  
  .find-similar-btn {
    padding: 14px 24px;
  }
}

/* Летающая кнопка для мобильных */
.floating-similar-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  touch-action: none;
  user-select: none;
}

.floating-find-similar-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  padding: 16px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4);
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  touch-action: none;
  user-select: none;
}

.floating-find-similar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 123, 255, 0.5);
  background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
}

.floating-find-similar-btn:active {
  transform: scale(0.95);
}

/* Обычная кнопка для десктопа */
.find-similar-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  width: 100%;
  justify-content: center;
}

.find-similar-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
}

.find-similar-btn:active {
  transform: translateY(0);
}

/* Скрываем летающую кнопку на десктопе */
@media (min-width: 769px) {
  .floating-similar-button {
    display: none;
  }
}

/* На мобильных скрываем обычные кнопки действий */
@media (max-width: 768px) {
  .car-action-buttons {
    display: none !important;
  }
}

} /* Close the legacy mobile wrapper without changing its existing scope. */

/* АвтоСфера: читаемый паспорт автомобиля, общая система с каталогом. */
main.car-detail-container #car-company { box-sizing: border-box; margin: 16px 0; padding: 18px; border-radius: 18px; background: var(--surface-color); border: 1px solid var(--border-color); }
main.car-detail-container #car-company h2 { margin: 0 0 10px; color: var(--text-primary); font-size: 20px; line-height: 1.3; }
main.car-detail-container #car-company p { max-width: 840px; margin: 10px 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
main.car-detail-container #car-company .car-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 8px 0; }
main.car-detail-container #car-company a { display: inline-block; margin: 0; padding: 8px 0; border: 0; background: none; color: var(--primary-color); font-size: 14px; line-height: 1.5; text-decoration: none; white-space: normal; overflow-wrap: anywhere; }
main.car-detail-container #car-company summary { padding: 8px 0; cursor: pointer; color: var(--primary-color); font-size: 14px; line-height: 1.5; }
main.car-detail-container #car-company details[open] { padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
main.car-detail-container #car-company :is(a,summary):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
@media (max-width: 768px) {
  main.car-detail-container #car-company { width: 100%; margin: 0 0 16px; }
}
main.car-detail-container {
  color: var(--text-primary);
  padding-bottom: 24px;
}
.mobile-header-container > .car-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}
main.car-detail-container .car-title h1,
main.car-detail-container .mobile-car-title {
  color: var(--text-primary);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
main.car-detail-container :is(.car-history, .seller-comment, .car-options, .mobile-specs, .china-detail-panel) {
  box-sizing: border-box;
  padding: 18px;
  border-radius: 18px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  box-shadow: none;
}
main.car-detail-container :is(.car-history, .seller-comment, .car-options, .mobile-specs, .china-detail-panel) :is(h2, h3) {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}
main.car-detail-container :is(.car-history, .seller-comment, .car-options):not(.china-detail-panel) { margin-top: 16px; }
main.car-detail-container .history-items { gap: 0 20px; }
main.car-detail-container .history-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.5;
}
main.car-detail-container .history-icon { width: 20px; height: 20px; margin: 0; color: var(--text-secondary); }
main.car-detail-container :is(.car-vin, .history-label, .translation-note) { color: var(--text-secondary); font-weight: 400; }
main.car-detail-container .history-value { margin: 0; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
main.car-detail-container .translation-note { font-size: 12px; }
main.car-detail-container .seller-comment-content { color: var(--text-primary); overflow-wrap: anywhere; }
main.car-detail-container #seller-comment-content { line-height: 1.5; }
main.car-detail-container #seller-comment-content.truncated {
  max-height: 9em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
main.car-detail-container #seller-comment-content.truncated::after { content: none; }
main.car-detail-container #toggle-comment-btn { position: static; display: block; margin: 12px 0 0; }
main.car-detail-container #toggle-comment-btn[hidden],
main.car-detail-container #retry-comment-btn[hidden] { display: none; }
main.car-detail-container .original-comment { background: var(--surface-color); border-left-color: var(--primary-color); }
main.car-detail-container .original-comment h4 { color: var(--text-secondary); }
main.car-detail-container .options-column { min-width: 0; }
main.car-detail-container .options-column h3 { margin: 18px 0 10px; color: var(--text-primary); font-size: 15px; font-weight: 600; }
main.car-detail-container .options-column ul { color: var(--text-secondary); }
main.car-detail-container .options-column li { margin: 6px 0; line-height: 1.5; overflow-wrap: anywhere; }
main.car-detail-container .options-column li.option-with-price span { color: var(--text-secondary); }
main.car-detail-container .toggle-btn {
  padding: 8px 0;
  background: none;
  border: 0;
  color: var(--primary-color);
  text-align: left;
  transform: none;
}
main.car-detail-container .toggle-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
#price-modal .modal-content { padding: 20px; overflow-y: auto; background: var(--surface-color); color: var(--text-primary); }
#price-modal h3 { margin: 0 36px 18px 0; font-size: 20px; line-height: 1.3; }
#price-modal .price-item { gap: 16px; margin-bottom: 10px; line-height: 1.5; }
#price-modal .price-item > span { min-width: 0; overflow-wrap: anywhere; }
#price-modal .price-item > span + span { flex-shrink: 0; max-width: 45%; text-align: right; font-variant-numeric: tabular-nums; }
#price-modal .price-item.note { color: var(--text-secondary); margin-bottom: 0; }
main.car-detail-container :is(#total-price, #mobile-total-price) {
  color: var(--text-primary);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
main.car-detail-container :is(#price-details-btn, #mobile-price-details-btn) {
  color: var(--primary-color);
  border: 0;
  background: none;
  padding: 8px 0;
  font-size: 13px;
  text-align: left;
  white-space: normal;
}
main.car-detail-container :is(#price-details-btn, #mobile-price-details-btn):focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}
main.car-detail-container .order-inspection-btn,
.mobile-fixed-buttons .order-inspection-btn {
  font-size: 16px;
  min-height: 48px;
  border-radius: 12px;
  text-transform: none;
}
@media (min-width: 769px) {
  main.car-detail-container { margin-top: 24px; }
  main.car-detail-container .car-header { align-items: flex-start; gap: 24px; }
  main.car-detail-container .car-title { flex: 1; min-width: 0; }
  main.car-detail-container .car-title h1 { font-size: 28px; margin: 0; }
  main.car-detail-container .car-price { align-items: flex-start; flex-direction: column; width: 320px; flex-shrink: 0; }
  main.car-detail-container #total-price { font-size: 30px; }
  main.car-detail-container .car-content { gap: 24px; align-items: flex-start; }
  main.car-detail-container .car-photos { order: -1; width: calc(100% - 344px); min-width: 0; }
  main.car-detail-container .main-photo { border-radius: 18px; }
  main.car-detail-container .car-specs {
    width: 320px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--surface-color);
  }
  main.car-detail-container .spec-item { display: block; margin-bottom: 15px; }
  main.car-detail-container .spec-item .spec-label { display: block; width: auto; font-size: 12px; color: var(--text-secondary); }
  main.car-detail-container .spec-item span:not(.spec-label) { display: block; margin: 4px 0 0; font-size: 15px; color: var(--text-primary); }
  main.car-detail-container .car-action-buttons { margin-top: 20px; }
}
@media (max-width: 768px) {
  /* The legacy body already reserves 60px + safe area for the 48px action. */
  main.car-detail-container { padding-bottom: 16px; }
  main.car-detail-container .mobile-photos { width: 100%; margin: 0; }
  main.car-detail-container .mobile-price-info { padding: 12px 18px 18px; margin: 0; }
  main.car-detail-container .mobile-price-container { align-items: flex-start; flex-direction: column; gap: 0; margin-bottom: 6px; }
  main.car-detail-container #mobile-total-price { font-size: 27px; }
  main.car-detail-container .mobile-car-title { font-size: 20px; margin: 0; }
  main.car-detail-container .mobile-specs { width: calc(100% - 24px); margin: 0 12px 16px; padding: 18px; border-radius: 18px; }
  main.car-detail-container .specs-grid { gap: 18px 16px; }
  main.car-detail-container .mobile-spec-item { min-width: 0; overflow-wrap: anywhere; }
  main.car-detail-container .mobile-spec-item .spec-label { font-size: 12px; color: var(--text-secondary); }
  main.car-detail-container .mobile-spec-item span:not(.spec-label) { font-size: 15px; color: var(--text-primary); }
  main.car-detail-container .desktop-content { width: calc(100% - 24px); margin: 0 12px; }
  main.car-detail-container .china-source-details { width: 100%; margin: 16px 0; }
  main.car-detail-container .mobile-specs-footer { width: 100%; margin: 0; }
  main.car-detail-container .mobile-meta { margin: 0; }
  main.car-detail-container :is(.car-history, .seller-comment, .car-options):not(.china-detail-panel) { width: 100%; margin: 16px 0; padding: 18px; box-sizing: border-box; border-radius: 18px; }
  .mobile-fixed-buttons {
    box-sizing: border-box;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    padding: 0;
    border: 0;
    background: none;
  }
  .mobile-fixed-buttons :is(.order-inspection-btn, .price-inquiry-btn, .partner-link-btn, .original-link-btn) { min-height: 48px; box-shadow: 0 4px 14px var(--shadow-medium); }
  .mobile-fixed-buttons::before { display: none; }
}

/* Desktop detail actions: same surfaces and sizing as the customer shell. */
@media (min-width: 769px) {
  main.car-detail-container { margin-top: 24px; }
  .desktop-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 24px; }
  .desktop-actions .car-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .desktop-actions #back-to-catalog,
  .desktop-actions .car-actions :is(#add-favorite, #compare, #share-car) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; margin: 0; padding: 10px 14px; box-sizing: border-box;
    border: 1px solid var(--border-color); border-radius: 14px;
    background: var(--surface-color); color: var(--text-primary);
    font: inherit; font-size: 14px; font-weight: 500; line-height: 20px;
    text-decoration: none; cursor: pointer; box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .desktop-actions :is(#back-to-catalog, #add-favorite, #compare, #share-car):hover {
    background: var(--border-light); border-color: var(--primary-color); transform: none; box-shadow: none;
  }
  .desktop-actions :is(#back-to-catalog, #add-favorite, #compare, #share-car):focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 3px;
  }
  .desktop-actions #add-favorite[aria-pressed="true"] { color: var(--primary-color); border-color: var(--primary-color); }
  .desktop-actions #add-favorite[aria-pressed="true"] svg { fill: currentColor; }
  .desktop-actions .icon, .desktop-actions svg { display: block; flex-shrink: 0; width: 20px; height: 20px; }
}

/* Desktop detail header: compact controls, existing search/auth contracts. */
@media (min-width: 769px) {
  .desktop-header .header-container { gap: 20px; margin: 16px auto; box-sizing: border-box; }
  .desktop-header .header-container #catalog-title h1 { color: var(--primary-color); font-size: 26px; font-weight: 800; }
  .desktop-header .search-container {
    gap: 4px; min-width: 0; max-width: 640px; padding: 6px;
    border: 1px solid var(--border-color); border-radius: 18px;
    background: var(--surface-color); box-sizing: border-box;
  }
  .desktop-header .search-container #search {
    min-width: 0; min-height: 44px; padding: 10px 12px; border: 0;
    border-radius: 12px; background: none; color: var(--text-primary); font: inherit;
  }
  .desktop-header .search-container #search-button {
    width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 12px;
    background: none; color: var(--primary-color); box-sizing: border-box;
  }
  .desktop-header .top-bar { gap: 8px; }
  .desktop-header .top-bar :is(.favorites-btn, .profile-circle) {
    width: 44px; height: 44px; padding: 9px; box-sizing: border-box;
    border: 1px solid var(--border-color); border-radius: 14px;
    background: none; color: var(--text-primary);
  }
  .desktop-header :is(#search-button, .favorites-btn, .profile-circle) svg { display: block; flex-shrink: 0; }
  .desktop-header :is(#search, #search-button, .favorites-btn, .profile-circle):focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 3px;
  }
}

/* Desktop detail: one compact budget after publication metadata. */
@media (min-width: 769px) {
  main.car-detail-container { margin-bottom: 0; padding-bottom: 24px; }
  main.car-detail-container .mobile-specs-footer,
  main.car-detail-container .mobile-meta { margin: 0; }
}

/* A decoded replacement keeps gallery pixels stable instead of fading to blank. */
.main-photo img,
.mobile-photos .main-photo img,
#gallery-photo {
    transition: none;
    animation: none;
}

/* A single availability status works in both layouts without replacing their controls. */
body.archived-car-page { filter: none; }
body.archived-car-page :is(.car-photos, .mobile-photos) { opacity: 1; }
body.archived-car-page :is(.car-photos, .mobile-photos)::after { content: none; }
body.archived-car-page :is(.car-photos, .mobile-photos) .main-photo img { filter: blur(1.5px); }
body.archived-car-page .photo-placeholder { animation: none; transition: none; }
body.archived-car-page :is(.car-action-buttons, .mobile-fixed-buttons, .car-history,
  .seller-comment, .car-options, .china-source-details, .mobile-car-history,
  .mobile-seller-comment, .mobile-car-options, #price-details-btn, #mobile-price-details-btn,
  [data-referral-estimate]) { display: none !important; }
.car-detail-container .car-availability-status {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 0 0 20px; padding: 18px; box-sizing: border-box;
  border: 1px solid var(--border-color); border-radius: 18px;
  background: var(--surface-color); color: var(--text-primary);
}
.car-detail-container .car-availability-status[hidden] { display: none; }
.car-availability-status h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; }
.car-availability-status p { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.car-availability-status .action-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-height: 44px; margin: 0; padding: 10px 16px; box-sizing: border-box;
  border: 1px solid var(--primary-color); border-radius: 12px;
  background: var(--primary-color); color: var(--bg-color); font: inherit;
  font-weight: 600; text-decoration: none; box-shadow: none;
}
.car-availability-status .action-btn:hover { background: var(--primary-hover); transform: none; }
.car-availability-status .action-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
@media (max-width: 768px) {
  .car-detail-container .car-availability-status { flex-direction: column; align-items: stretch; gap: 12px; margin: 12px 15px; }
}

/* Category notice spans the existing mobile specification grid. */
.specs-grid > [data-vehicle-classification] { grid-column: 1 / -1; }