/* 
 * css/custom/products.css 
 * Sovrascritture per la pagina products
 * (Aggiungere alla fine del file)
 */

/* ============================================
   PAGINAZIONE
   ============================================ */

/* Contenitore paginazione */
nav[aria-label="Paginazione prodotti"] {
    margin-top      : 40px !important;
}

/* Lista paginazione */
.pagination {
    display         : flex !important;
    gap             : 8px !important;
    list-style      : none !important;
    padding         : 0 !important;
    margin          : 0 !important;
}

/* Elemento paginazione */
.page-item {
    margin          : 0 !important;
}

/* Link paginazione */
.page-link {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 40px !important;
    height          : 40px !important;
    border-radius   : 8px !important;
    background      : #fff !important;
    border          : 1px solid #ddd !important;
    color           : #555 !important;
    text-decoration : none !important;
    transition      : all 0.2s ease !important;
    font-size       : 0.9rem !important;
}

/* Hover sui link */
.page-link:hover {
    background-color: #fff5f0 !important;
    border-color    : #ff5f1f !important;
    color           : #ff5f1f !important;
}

/* Elemento attivo (pagina corrente) */
.page-item.active .page-link {
    background-color: #ff5f1f !important;
    border-color    : #ff5f1f !important;
    color           : #fff !important;
    cursor          : default !important;
}

/* Elemento disabilitato (frecce) */
.page-item.disabled .page-link {
    background-color: #f5f5f5 !important;
    border-color    : #eee !important;
    color           : #aaa !important;
    cursor          : not-allowed !important;
}

/* ============================================
   RESPONSIVE PAGINAZIONE
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
    nav[aria-label="Paginazione prodotti"] {
        margin-top      : 30px !important;
    }
    
    .page-link {
        width           : 36px !important;
        height          : 36px !important;
        font-size       : 0.85rem !important;
    }
    
    .pagination {
        gap             : 6px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    nav[aria-label="Paginazione prodotti"] {
        margin-top      : 25px !important;
    }
    
    .page-link {
        width           : 32px !important;
        height          : 32px !important;
        font-size       : 0.8rem !important;
    }
    
    .pagination {
        gap             : 5px !important;
    }
}

/* Mobile piccoli - riduci ancora se necessario */
@media (max-width: 380px) {
    .page-link {
        width           : 30px !important;
        height          : 30px !important;
        font-size       : 0.75rem !important;
    }
    
    .pagination {
        gap             : 4px !important;
    }
}