/**
 * Styles pour la pagination Ajax générique
 */

/* Animations pour les nouvelles cartes */
.vehicle-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vehicle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Animation d'apparition des nouvelles cartes */
.col.animated {
    animation: fadeInUp 0.6s ease forwards;
}

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

/* Styles pour le bouton "Charger plus" */
.load-more-btn {
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.load-more-btn:disabled {
    transform: none;
    box-shadow: none;
}

/* Indicateur de chargement */
.infinite-scroll-indicator {
    padding: 2rem 0;
}

/* Messages d'erreur */
.alert-dismissible {
    position: relative;
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .load-more-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .col.animated {
        animation-duration: 0.4s;
    }
}

/* État de chargement pour le container */
.pagination-container.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Optimisation pour les performances */
.pagination-container {
    will-change: contents;
}

/* Styles pour les filtres Ajax */
form[data-ajax="true"] {
    transition: opacity 0.3s ease;
}

form[data-ajax="true"].loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Compteur de résultats */
.results-counter {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Indicateur de progression */
.progress-indicator {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    margin: 1rem 0;
}

.progress-bar {
    height: 100%;
    background-color: #007bff;
    transition: width 0.3s ease;
}