/* Окремо для прапорців, якщо вони в спанах */
#vza-auction-root .vza-flag-container,
#vza-auction-root .vza-grid-item span,
#vza-auction-root .vza-specs-desktop span {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif !important;
    font-size: 1.4rem !important;
    vertical-align: middle;
    margin-right: 5px;
}



/* Контент модалки */
#vza-auction-root .vza-modal-content {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    padding: 40px !important;
    max-width: 500px !important;
    border: none !important;
    animation: slideUp 0.3s ease-out;
}

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


/* 1. Основна сітка */
#vza-auction-root .vza-grid {
    display: flex !important;
    flex-direction: row !important;
    max-width: 1400px !important;
    margin: 30px auto !important;
    gap: 25px !important;
    padding: 0 20px !important;
    align-items: flex-start !important;
}

/* 2. Сайдбар */
/* Контейнер сайдбара */
#vza-auction-root .vza-sidebar {
    display: block !important;
    width: 280px !important;
    min-width: 280px !important;
    background: #fff !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid #eee !important;
    position: sticky !important;
    top: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

/* Заголовки груп (Марка, Модель) */
#vza-auction-root .vza-filter-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #3498db !important;
    display: block !important;
}

/* Контейнер для списку (з внутрішнім скролом) */
/* Налаштування полоси прокрутки для блоків фільтра */
/* Контейнер для списку марок/моделей */
#vza-auction-root .vza-f-box {
    display: block !important;
    max-height: 400px !important;
    overflow-y: auto !important; /* Автоматично покаже скрол, якщо контенту багато */
    position: relative;
}
/* Робимо заголовок всередині скролу липким, щоб завжди бачити "Марка" */
#vza-auction-root .vza-filter-title {
    position: sticky !important;
    top: -10px; /* Прилипає до верху внутрішнього блоку */
    background: #fafafa !important;
    z-index: 10;
    padding: 10px 0 !important;
    margin-top: 0 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    border-bottom: 2px solid #3498db !important;
}

/* Жирний синій скролбар (як домовлялися) */
#vza-auction-root .vza-f-box::-webkit-scrollbar {
    width: 10px !important;
}
#vza-auction-root .vza-f-box::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}
#vza-auction-root .vza-f-box::-webkit-scrollbar-thumb {
    background: #3498db !important;
    border-radius: 5px !important;
    border: 2px solid #f1f1f1 !important;
}
/* Рядок з чекбоксом */
#vza-auction-root .vza-f-row {
    display: flex !important;
    align-items: center !important;
    padding: 6px 0 !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}

#vza-auction-root .vza-f-row:hover {
    color: #3498db !important;
}

#vza-auction-root .vza-f-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
}

#vza-auction-root .vza-f-row span {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* Кнопка "Застосувати" */
#vza-auction-root .vza-btn-apply {
    width: 100% !important;
    padding: 12px !important;
    background: #3498db !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
}

#vza-auction-root .vza-btn-apply:hover {
    background: #2980b9 !important;
}


#vza-auction-root .vza-main-content {
    flex: 1 !important;
    min-width: 0 !important;
}

/* 3. Картка */
#vza-auction-root .vza-card {
    display: flex !important;
    flex-direction: row !important;
    background: #fff !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    height: 230px !important;
    overflow: hidden !important;
    border: 1px solid #eee !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 4. Фото (Виправляємо відображення) */
#vza-auction-root .vza-img-wrap {
    width: 320px !important;
    min-width: 320px !important;
    height: 100% !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background: #000;
}

#vza-auction-root .vza-car-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Фото заповнює блок без деформації */
    display: none;
}
#vza-auction-root .vza-car-img.active {
    display: block !important;
}

/* Стрілки на фото */
#vza-auction-root .vza-nav-btn {
    display: block !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    padding: 10px 5px;
    cursor: pointer;
    z-index: 10;
}
#vza-auction-root .vza-prev { left: 0; }
#vza-auction-root .vza-next { right: 0; }

/* 5. Інфо блок (Центр) */
#vza-auction-root .vza-info {
    flex: 1 !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-right: 1px solid #f0f0f0 !important;
    min-width: 0 !important;
}

#vza-auction-root .vza-title {
    font-size: 1.3rem !important;
    font-weight: bold !important;
    color: #2c3e50 !important;
    margin: 0 0 10px 0 !important;
}

/* Характеристики десктоп */
.vza-specs-desktop {
    display: block !important;
    font-size: 1.1rem !important;
    color: #666 !important;
}
.vza-timer-dt {
    margin-top: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #e67e22;
}

/* 6. Права колонка (Ціна + Кнопки) */
#vza-auction-root .vza-price-side {
    width: 220px !important;
    min-width: 220px !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: right !important;
    background: #fafafa !important;
}

#vza-auction-root .vza-main-price {
    font-size: 1.8rem !important;
    color: #27ae60 !important;
    font-weight: 900 !important;
}
#vza-auction-root .vza-sub-price {
    font-size: 1rem !important;
    color: #7f8c8d !important;
}

/* Кнопки на десктопі */
#vza-auction-root .vza-actions-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

#vza-auction-root .btn-vza {
    height: 40px !important;
    font-size: 0.9rem !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Приховуємо все мобільне */
#vza-auction-root .vza-mobile-grid-info,
#vza-auction-root .vza-dots,
#vza-auction-root #vza-mobile-filter-btn {
    display: none !important;
}

/* Lightbox (Повно екранний перегляд) */
.vza-lightbox {
    display: none; position: fixed; z-index: 10000;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); align-items: center; justify-content: center;
}
.vza-lightbox-content { position: relative; max-width: 90%; max-height: 90%; }
#vza-lightbox-img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; }

.vza-lightbox-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1); color: #fff; border: none;
    padding: 20px; font-size: 40px; cursor: pointer; border-radius: 50%;
}
.vza-l-prev { left: -80px; }
.vza-l-next { right: -80px; }
.vza-lightbox-close { position: absolute; top: -50px; right: 0; color: #fff; font-size: 40px; cursor: pointer; }

/* Показуємо "курсор-руку" тільки там, де є карусель */
.vza-img-wrap { cursor: default; }
.vza-img-wrap:has(.vza-nav-btn) { cursor: pointer; }

/* Хедер в одну лінію на десктопі */
#vza-auction-root .vza-main-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Розносимо по краях */
    align-items: center !important; /* Вирівнюємо по вертикалі */
    padding: 15px 20px !important;
    background: #fff !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    border: 1px solid #eee !important;
    gap: 20px !important; /* Відступ між елементами */
}

/* Кількість знайдених лотів */
#vza-auction-root .vza-found-count {
    font-size: 1.1rem !important;
    font-weight: 700;
    white-space: nowrap !important; /* Щоб не переносилось */
    color: #333;
}

/* Форма пошуку по центру */
#vza-auction-root .vza-search-form {
    display: flex !important;
    flex: 1 !important; /* Займає вільний простір по центру */
    max-width: 400px !important; /* Обмежуємо ширину пошуку */
    margin: 0 auto !important;
    gap: 0 !important;
}

#vza-auction-root .vza-search-form input {
    width: 100% !important;
    height: 40px !important;
    padding: 0 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px 0 0 8px !important; /* Закруглюємо тільки зліва */
    font-size: 0.95rem !important;
}

#vza-auction-root .vza-search-form button {
    height: 40px !important;
    width: 50px !important;
    background: #3498db !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important; /* Закруглюємо тільки справа */
    cursor: pointer;
}

/* Стилізація пагінації на десктопі */
#vza-auction-root .vza-pagination {
    display: flex !important;
    justify-content: center !important; /* Центруємо плитки */
    gap: 8px !important;
    margin: 40px 0 !important;
    flex-wrap: wrap !important;
}

#vza-auction-root .vza-page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 45px !important;
    height: 45px !important;
    padding: 0 10px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #333 !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
}

/* Ефект при наведенні */
#vza-auction-root .vza-page-link:hover {
    border-color: #3498db !important;
    color: #3498db !important;
    background: #f7fbff !important;
    transform: translateY(-2px) !important;
}

/* Активна сторінка (синя плитка) */
#vza-auction-root .vza-page-link.active {
    background: #3498db !important;
    color: #fff !important;
    border-color: #3498db !important;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3) !important;
}

/* Селект сортування справа */
#vza-auction-root .vza-sort-select {
    width: auto !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 0.95rem !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer;
}

#vza-auction-root {
    /* ▒~]аб▒~V▒~@ ▒~H▒~@и▒~D▒~B▒~Vв, ▒~Oк▒~V ▒~Bо▒~Gно п▒~Vд▒~B▒~Oгн▒~C▒~B▒~L п▒~@апо▒~@▒~F▒~V на Windows, Mac ▒~Bа Linux */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
}
/* --- СУЧАСНІ МОДАЛЬНІ ВІКНА ДЛЯ ДЕСКТОПА --- */

/* ПРИМУСОВІ СТИЛІ МОДАЛОК (index.php) */
#vza-auction-root .vza-modal {
    display: none;
    position: fixed !important;
    z-index: 99999 !important;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px);
    align-items: center; justify-content: center;
}

#vza-auction-root .vza-modal-content {
    background: #fff !important;
    padding: 30px !important;
    border-radius: 15px !important;
    max-width: 500px !important;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
    position: relative;
    border: none !important;
}

#vza-auction-root .vza-modal h3 {
    font-size: 22px !important;
    margin-bottom: 10px !important;
    color: #333 !important;
    text-align: left;
}

#vza-auction-root .vza-modal input,
#vza-auction-root .vza-modal textarea {
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    background: #f9f9f9 !important;
    display: block !important;
}

#vza-auction-root .vza-modal button.submit {
    width: 100% !important;
    padding: 15px !important;
    background: #3498db !important; /* Синій колір, як у фільтра */
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

#vza-auction-root .vza-modal-close {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 28px !important;
    cursor: pointer;
    color: #999 !important;
}

/* Зменшуємо розмір прапорця-картинки */
#vza-auction-root .vza-flag-img {
    height: 16px !important; /* Висота під рядок тексту */
    width: auto !important;  /* Пропорційна ширина */
    vertical-align: middle !important; /* Центрування по тексту */
    margin-right: 6px !important;      /* Відступ від палички | */
    border-radius: 2px !important;     /* Легке закруглення кутів */
    display: inline-block !important;
    position: relative;
    top: -1px; /* Мікро-корекція, щоб прапор стояв рівно по центру літер */
}

/* Якщо прапорець у мобільній сітці (яку видно на десктопі іноді) */
#vza-auction-root .vza-gi-flag .vza-flag-img {
    height: 20px !important; /* Там можна трохи більше */