/**
 * Estilos para el buscador AJAX
 * 
 * @package MF_Concessionarias_2025
 */

/* Animaciones para el overlay */
#search-overlay {
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
}

#search-overlay.hidden {
    animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Animación para la barra de búsqueda */
#search-bar {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animación para el contenedor de resultados */
#search-results-container {
    animation: fadeInDown 0.3s ease-out;
}

@keyframes fadeInDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Estilos para los resultados */
.search-result-item:hover {
    transform: translateX(4px);
    transition: transform 0.2s ease;
}

/* Truncar texto en múltiples líneas */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Loader personalizado */
.search-loader-spin {
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 640px) {
    #search-overlay .bg-white {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    #search-overlay .pt-20 {
        padding-top: 2rem;
    }
}