/* Estilos personalizados para paginación */

/* Ajustes generales para todos los tamaños */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
    padding: 0;
    gap: 3px;
    max-width: 100%;
    overflow-x: hidden;
}

/* Estilos específicos para móviles */
.pagination-sm {
    gap: 1px;
}

/* Elementos de paginación */
.pagination li {
    margin: 0 1px;
}

/* Enlaces de paginación */
.pagination .page-link {
    min-width: 40px;
    text-align: center;
}

/* Solución CSS para limitar la paginación a exactamente 4 elementos visibles en desktop */

/* Ocultamos todos los elementos excepto los botones de navegación */
.pagination .page-item:not(.active):not(:first-child):not(:last-child) {
    display: none;
}

/* Siempre mostrar botones de navegación (Anterior/Siguiente) */
.pagination .page-item:first-child,
.pagination .page-item:last-child {
    display: flex !important;
}

/* Siempre mostrar página activa */
.pagination .page-item.active {
    display: flex !important;
}

/* En desktop, mostrar solo página actual y vecinos más cercanos (total: 4 elementos) */
@media (min-width: 576px) {
    /* Reestablecemos la regla general de ocultar */
    .pagination .desktop-page-number {
        display: none !important;
    }

    /* Mostramos solo los números adyacentes a la página activa */
    .pagination .page-item.active + .page-item,
    .pagination .page-item.active + .page-item + .page-item {
        display: flex !important;
    }

    /* Si hay una página anterior a la actual, mostrarla */
    .pagination .page-item.active:nth-child(n+3) ~ .page-item:nth-child(-n+2) {
        display: flex !important;
    }
}

/* Script complementario para agregar al archivo app.blade.php */
/*
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Limitar elementos de paginación visibles a 7
    const paginationLists = document.querySelectorAll('.pagination');
    paginationLists.forEach(pagination => {
        const items = pagination.querySelectorAll('.page-item');
        if (items.length > 9) {
            // Solo mostrar primero, último, actual, y algunos adyacentes
            for (let i = 0; i < items.length; i++) {
                if (i > 3 && i < items.length - 3 && !items[i].classList.contains('active')) {
                    items[i].style.display = 'none';
                }
            }
        }
    });
});
</script>
*/

/* Ajustes específicos para dispositivos móviles */
@media (max-width: 767.98px) {
    /* Contenedor principal de paginación */
    .pagination {
        gap: 2px;
    }

    /* Enlaces de paginación */
    .pagination .page-link {
        padding: 0.4rem 0.7rem;
        font-size: 0.9rem;
        min-width: 36px;
    }

    /* Ajustes adicionales para pantallas muy pequeñas */
    @media (max-width: 400px) {
        /* Reducir aún más el tamaño */
        .pagination .page-link {
            padding: 0.35rem 0.6rem;
            font-size: 0.85rem;
            min-width: 32px;
        }

        /* Para pantallas muy pequeñas, mostrar exactamente 3 números de página */
        /* Mostramos solamente: activo, anterior y siguiente */
        .pagination li.mobile-page-number {
            display: flex !important;
        }

        .pagination li.active,
        .pagination li:first-child,
        .pagination li:last-child {
            display: flex !important;
        }

        /* Adaptación para móviles muy pequeños */
        .pagination .page-link {
            padding: 0.3rem 0.5rem;
            font-size: 0.8rem;
            min-width: 30px;
        }
    }
}

/* Ajuste para mantener consistencia con tema Netflix */
.pagination .page-item.active .page-link {
    background-color: var(--nt-red, #E50914);
    border-color: var(--nt-red, #E50914);
}

.pagination .page-link {
    color: var(--nt-red, #E50914);
    background-color: var(--nt-black, #141414);
    border-color: #303030;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    color: var(--nt-white, #ffffff);
    background-color: var(--nt-red, #E50914);
    border-color: var(--nt-red, #E50914);
    box-shadow: none;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #0a0a0a;
    border-color: #303030;
}