/* Кнопка фільтра */
#vza-mobile-filter-btn { 
    display: block !important; 
    margin: 0 10px 15px 10px; 
    width: calc(100% - 20px); 
    padding: 20px !important; 
    background: #34495e; 
    color: #fff; 
    border-radius: 12px; 
    font-weight: bold; 
    font-size: 2rem !important; 
    text-align: center; 
}

/* Сайдбар (Фільтр) */
.vza-sidebar { display: none; width: 100% !important; margin-bottom: 20px !important; border: 2px solid #3498db !important; }
.vza-sidebar.active { display: block !important; }


/* Ховаємо десктопний текст на мобільці */
.vza-gi-docs-desktop {
    display: none !important;
}

/* Наш еталонний синій бейдж для мобілки */
.vza-gi-docs-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #ebf5fb !important;
    border: 1px solid #3498db !important;
    color: #3498db !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    font-size: 1.4rem !important;
    line-height: 1;
    margin-top: 4px;
}

.vza-gi-docs-mobile::after {
    content: "ЗВІТ";
    display: block;
    font-size: 0.7rem;
    font-weight: 900;
    margin-top: -1px;
}

.vza-m-price-col {
    display: flex !important;
    flex-direction: column !important; /* Ціна NOK буде ПІД ціною EUR */
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
}
.filter-cols-wrap { 
    display: flex !important; 
    flex-direction: row !important; /* Тільки горизонтально */
    gap: 10px !important; 
    width: 100% !important;
    background: #fff;
}

.vza-f-box { 
    flex: 1 !important; 
    max-height: 500px !important; /* Обмежуємо висоту, щоб не листали вічність */
    overflow-y: auto !important;  /* Внутрішній скрол */
    border: 1px solid #ddd !important; 
    border-radius: 8px !important;
    padding: 10px !important;
    background: #fafafa !important;
}

.vza-f-box div[style*="font-weight: bold"] {
    font-size: 2rem !important;
    margin-bottom: 15px !important;
    color: #2c3e50 !important;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    position: sticky; /* Заголовок завжди зверху при скролі */
    top: 0;
    background: #fafafa;
    z-index: 5;
}

.vza-f-row { 
    display: flex !important; 
    flex-direction: row !important; /* Чекбокс зліва, текст справа */
    align-items: center !important; 
    justify-content: flex-start !important;
    padding: 12px 5px !important; 
    border-bottom: 1px solid #eee !important;
    width: 100% !important;
    cursor: pointer;
}

/* Самі чекбокси */
.vza-f-row input[type="checkbox"] { 
    width: 28px !important; 
    height: 28px !important; 
    margin-right: 12px !important; 
    flex-shrink: 0 !important; /* Щоб чекбокс не сплющувався */
}

/* Текст бренду/моделі */
.vza-f-row span { 
    font-size: 1.8rem !important; 
    font-weight: 600 !important; 
    color: #333 !important;
    line-height: 1.2;
    white-space: nowrap; /* Щоб назва не переносилась */
    overflow: hidden;
    text-overflow: ellipsis;
}

.vza-btn-apply { 
    width: 100% !important; 
    padding: 22px !important; 
    background: #3498db !important; 
    color: #fff !important; 
    border-radius: 12px !important; 
    font-size: 2.2rem !important; 
    font-weight: bold !important;
    margin-top: 15px !important; 
    border: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}


/* Хедер: Знайдено / Пошук / Сортування */
.vza-main-header { 
    padding: 10px !important; 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    gap: 10px !important; 
    background: #fff; 
    border-radius: 12px;
}
.vza-found-count { font-size: 1.8rem !important; font-weight: 800; flex: 0 0 auto; }
.vza-search-form { display: flex !important; flex: 1 1 auto; justify-content: center; align-items: center; gap: 5px; }
.vza-search-form input { width: 100px !important; padding: 8px !important; font-size: 1.6rem !important; }
.vza-sort-select { font-size: 1.6rem !important; padding: 8px !important; flex: 0 0 auto; width: auto !important; border: 1px solid #ddd; border-radius: 8px; }

/* Картка та Фото */
.vza-grid { flex-direction: column !important; padding: 0 10px !important; }
.vza-card { flex-direction: column !important; height: auto !important; margin-bottom: 25px !important; border-radius: 12px; }


.vza-img-wrap { 
    width: 100% !important; 
    height: auto !important; 
    aspect-ratio: 16 / 10 !important; 
    position: relative !important; 
    background: #eee !important; 
    overflow: hidden !important;
    touch-action: pan-y !important; /* Дозволяє скрол сторінки вгору-вниз, але ловить свайп вбік */
}


.vza-car-img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: none; 
}

.vza-car-img.active { 
    display: block !important; 
}


.vza-dots { 
    position: absolute !important; 
    bottom: 12px !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
    display: flex !important; 
    gap: 8px !important; 
    z-index: 20 !important; 
    background: rgba(0,0,0,0.2);
    padding: 4px 8px;
    border-radius: 10px;
}

.vza-dot { 
    width: 10px !important; 
    height: 10px !important; 
    background: rgba(255,255,255,0.5) !important; 
    border-radius: 50% !important; 
    border: 1px solid rgba(0,0,0,0.1) !important; 
    transition: all 0.2s;
}

.vza-dot.active { 
    background: #fff !important; 
    transform: scale(1.3) !important; 
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* Заголовок та Інфо */
.vza-info { padding: 15px !important; width: 100% !important; }
.vza-info h2 { font-size: 2.2rem !important; font-weight: 800 !important; line-height: 1.2 !important; margin-bottom: 15px !important; }

/* СІТКА ХАРАКТЕРИСТИК (Еталонна) */
.vza-mobile-grid-info { 
display: grid !important; 
    grid-template-columns: 0.6fr 1.2fr 1.2fr 1.5fr 1.5fr !important; 
    align-items: center; 
    border-bottom: 1px solid #eee; 
    margin-bottom: 15px; 
    padding-bottom: 15px; 
    gap: 5px;
}
.vza-grid-item { 
    text-align: center; 
    font-size: 2.1rem !important; 
    font-weight: 800; 
    color: #222; 
    display: flex !important; 
    flex-direction: row !important; /* Примусово в один рядок */
    align-items: center !important; 
    justify-content: center !important; 
    gap: 4px !important; /* Відступ між іконкою та текстом */
}



.vza-share-icon svg {
    display: inline-block;
    margin-right: 4px;
}
.btn-share b {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vza-timer-col { 
    flex-direction: column !important; /* Тут залишаємо стовпчик */
}
.vza-gi-flag {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}

.vza-gi-docs-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 8px !important;
    background-color: #f1f8ff !important;
    border-radius: 10px !important;
    border: 1px dashed #3498db !important;
}

.vza-gi-docs-row span {
    /* Змініть це число. Чим більше, тим крупніший шрифт */
    font-size: 2.2rem !important; 
    
    font-weight: 800 !important; /* Робить текст жирним */
    color: #2c3e50 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important; /* Відступ між іконкою 📋 та текстом */
}

.vza-doc-icon {
    font-size: 1.8rem !important;
    background: #ebf5fb;
    border: 1px solid #3498db;
    border-radius: 6px;
    padding: 2px 6px;
    color: #3498db;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.vza-doc-icon::after {
    content: "ЗВІТ";
    font-size: 0.9rem;
    display: block;
    margin-top: -2px;
}

.vza-m-price { 
    color: #2ecc71; 
    font-weight: 900; 
    font-size: 2.2rem !important; 
    line-height: 1.1;
    white-space: nowrap;
}

.vza-m-price-col .vza-m-subtext {
    font-size: 1.2rem !important;
    color: #888;
    font-weight: bold;
    display: block !important;
    white-space: nowrap;
}
.vza-timer { font-size: 2rem !important; color: #e67e22; }
.vza-m-subtext { font-size: 1.1rem !important; color: #888; font-weight: bold; margin-top: 3px; }

/* КНОПКИ В ОДИН РЯДОК (40 / 20 / 40) */
.vza-price-side { padding: 10px !important; width: 100% !important; border-left: none !important; }
.vza-price-side .vza-timer { display: none !important; } /* Прибираємо дубль таймера знизу */

.vza-actions-row { 
    display: flex !important; 
    flex-direction: row !important; 
    gap: 6px !important; 
    width: 100% !important; 
}
.btn-vza { 
    height: 65px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    padding: 5px !important; 
    margin-bottom: 0 !important; 
}
//.btn-learn-more, .btn-bid { flex: 2 !important; }
.btn-share { flex: 1 !important; min-width: 50px !important; }
.btn-vza span { font-size: 1.8rem !important; font-weight: 800; }
.btn-vza b { font-size: 1.8rem !important; }

/* Мета-дані (ID та Оновлення) */
.vza-meta-footer { display: flex !important; justify-content: space-between !important; margin-top: 10px; }
.vza-id-tag, .vza-upd-tag { font-size: 1.6rem !important; color: #aaa; font-weight: bold; }

@media (max-width: 1000px) {
    /* Робимо фон ще темнішим для контрасту */
    .vza-modal {
        background-color: rgba(0, 0, 0, 0.85) !important;
        padding: 5px !important; /* Мінімальні відступи по краях екрана */
    }

    .vza-modal-content {
        width: 96% !important; /* Майже на всю ширину екрана */
        max-width: none !important;
        border-radius: 25px !important;
        padding: 40px 20px 30px 20px !important; /* Більше місця всередині */
    }

    /* Дуже великий заголовок */
    .vza-modal h3 {
        font-size: 3.2rem !important; /* Збільшено з 2.4 */
        margin-bottom: 10px !important;
        line-height: 1.1 !important;
    }

    /* Назва авто під заголовком */
    #modal-car-name, #info-car-name {
        font-size: 2rem !important; /* Збільшено з 1.6 */
        line-height: 1.3 !important;
        margin-bottom: 30px !important;
        padding: 0 10px;
    }

    /* Величезні поля вводу */
    .vza-modal input, 
    .vza-modal textarea {
        height: 75px !important; /* Високі поля, щоб зручно влучати */
        font-size: 2.2rem !important; /* Дуже великий текст вводу */
        padding: 20px !important;
        border: 3px solid #eee !important; /* Товстіша рамка */
        margin-bottom: 20px !important;
    }

    .vza-modal textarea {
        height: auto !important;
        min-height: 120px !important;
    }

    /* Кнопка "ВІДПРАВИТИ СТАВКУ" на весь екран */
    .vza-modal button.submit {
        height: 90px !important; /* Максимальна висота */
        font-size: 2.6rem !important; /* Дуже великий шрифт на кнопці */
        letter-spacing: 0;
        margin-top: 20px !important;
    }

    /* Величезний хрестик закриття */
    .vza-modal-close {
        top: 5px !important;
        right: 15px !important;
        font-size: 5.5rem !important; /* Щоб точно не промахнутися */
        color: #ccc !important;
    }

/* Робимо заголовки фільтрів великими тільки для мобілки */
#vza-auction-root .vza-filter-title {
    display: block !important;
    font-weight: bold !important;
    padding: 10px 5px !important;
    font-size: 2.1rem !important; /* Повертаємо ваш великий розмір */
    color: #2c3e50 !important;
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
}
    
    /* Додаємо підписи над полями, якщо хочете, щоб вони були ще чіткішими */
    .vza-modal input::placeholder {
        color: #999;
        font-size: 2rem;
    }
}


/* 1. Приховуємо десктопні характеристики (рядок з дрібним прапором і текстом) */
#vza-auction-root .vza-specs-desktop {
    display: none !important;
}

/* Приховуємо тільки блок з ціною всередині правої панелі на мобільці */
#vza-auction-root .vza-price-block-desktop {
    display: none !important;
}

/* Сам контейнер vza-price-side робимо видимим, бо там кнопки */
#vza-auction-root .vza-price-side {
    display: block !important; 
    width: 100% !important;
    padding: 10px !important;
    background: transparent !important; /* Прибираємо сірий фон, якщо він заважає */
    border: none !important;
}

/* На всякий випадок переконуємось, що кнопки видимі */
#vza-auction-root .vza-actions-row {
    display: flex !important;
}
@media (max-width: 1000px) {
    /* Додаємо ID на початок, щоб перебити будь-які десктопні стилі */
    #vza-auction-root .vza-nav-btn { 
        display: none !important; 
    } 
    
    #vza-auction-root .vza-dots { 
        display: flex !important; 
    }

    .vza-pagination {
        display: flex !important;
        justify-content: center;
        gap: 10px;
        margin: 30px 0;
        flex-wrap: wrap;
    }
    .vza-page-link {
        padding: 15px 20px !important;
        font-size: 1.8rem !important;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        text-decoration: none;
        color: #333;
    }
    .vza-page-link.active {
        background: #3498db !important;
        color: #fff !important;
        border-color: #3498db;
    }
}