/* Адаптивные стили для всех устройств */

/* Мобильные устройства */
@media (max-width: 576px) {
    /* Шапка */
    .navbar-brand {
        font-size: 1.2rem;
    }
    .navbar .w-50 {
        width: 100% !important;
        margin-top: 10px;
        order: 3;
    }
    
    /* Карточки объявлений */
    .ad-card .card-img-top {
        height: 160px;
    }
    .ad-card .price {
        font-size: 1rem;
    }
    .ad-card .title {
        font-size: 0.9rem;
    }
    
    /* Детальная страница */
    .ad-detail .gallery img {
        height: 200px;
    }
    .ad-detail .price {
        font-size: 1.5rem;
    }
    .ad-detail .thumbnails img {
        width: 60px;
        height: 60px;
    }
    
    /* Чат */
    .chat-message {
        max-width: 85%;
        font-size: 0.9rem;
    }
    .chat-message .time {
        font-size: 0.6rem;
    }
    
    /* Формы */
    .form-control, .form-select {
        font-size: 0.9rem;
    }
    
    /* Категории */
    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
    }
    .category-item {
        padding: 12px 5px;
    }
    .category-item .icon {
        font-size: 1.8rem;
    }
    .category-item .name {
        font-size: 0.75rem;
    }
    
    /* Пагинация */
    .pagination .page-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    
    /* Админ-панель */
    .admin-table {
        font-size: 0.8rem;
    }
    .admin-table td, .admin-table th {
        padding: 0.4rem 0.5rem;
    }
}

/* Планшеты */
@media (min-width: 577px) and (max-width: 992px) {
    /* Категории */
    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    /* Детальная страница */
    .ad-detail .gallery img {
        height: 300px;
    }
}

/* Ноутбуки и выше */
@media (min-width: 993px) {
    .ad-card .card-img-top {
        height: 200px;
    }
}

/* Анимации для загрузки */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}