/* public/css/pagination.css */

/* --- Estilos de Paginación --- */
.csc-pagination {
    width: 100%; /* Ocupa el ancho de su contenedor (.csc-product-grid) */
    text-align: center; /* Centra los números de página (que son inline-block) */
    padding: 20px 0; /* Espaciado vertical */
    margin-top: auto; /* Ayuda a empujarlo hacia abajo si el contenido de arriba es corto */
    border-top: 1px solid #eee; /* Separador opcional */
}
.csc-pagination:empty { /* Oculta el contenedor si no hay enlaces de paginación */
    display: none;
    border-top: none; /* También oculta el borde si está vacío */
}

.csc-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px 5px; /* Margen inferior para manejo de envoltura si hay muchas páginas */
    border: 1px solid #ddd;
    
    /* TEMATIZACIÓN DINÁMICA: Hereda el color principal del panel de ajustes */
    color: var(--csc-primary-color, #E74C3C); 
    
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.csc-pagination .page-numbers.current,
.csc-pagination .page-numbers:hover {
    /* TEMATIZACIÓN DINÁMICA: Aplica el color de fondo y de texto de marca al estar activo o en hover */
    background-color: var(--csc-primary-color, #E74C3C);
    color: var(--csc-primary-text-color, white);
    border-color: var(--csc-primary-color, #E74C3C);
}

.csc-pagination .page-numbers.dots { /* Los "..." en la paginación */
    border: none;
    background-color: transparent;
    color: #777;
}