/* 
 * css/custom/categories.css 
 * Stili personalizzati per le categorie
 * 
 * @package ItticiSurgelati
 * @version 1.0.0
 * 
 */

/* ============================================
   CARD CATEGORIA
   ============================================ */
.category-card-overlay {
    position        : relative !important;
    width           : 100% !important;
    height          : 270px !important;
    border-radius   : 0px !important;  
    overflow        : hidden !important;
    margin          : 0px !important; 

    border          : 1px solid #ffffff !important; 

}

/* ============================================
   IMMAGINE CATEGORIA
   ============================================ */
.category-image-link {
    position    : absolute !important;
    top         : 0 !important;
    left        : 0 !important;
    width       : 100% !important;
    height      : 100% !important;
    z-index     : 1 !important;
}

.category-image-link img {
    width       : 100% !important;
    height      : 100% !important;
    object-fit  : cover !important;
}


/* ============================================
   EFFETTO HOVER SULL'INTERA CARD CATEGORIA
   Bordo arancione #ff5f1f quando si passa sopra
   ============================================ */
.category-card-overlay {
    position        : relative !important;
    width           : 100% !important;
    height          : 270px !important;
    border-radius   : 0px !important;  
    overflow        : hidden !important;
    margin          : 0;
    
    /* Transizione per effetto smooth */
    /* transition      : all 0.3s ease !important;*/
    /* Box-shadow iniziale (opzionale) */
    /* box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.1) !important; */ 
}

.category-card-overlay:hover {

    /* Bordo arancione di 1px */
    border          : 1px solid #ff5f1f !important; 
    
    /* Leggero ingrandimento per feedback visivo */
    /* transform       : scale(1.02) !important; */ 
    /* Ombra più pronunciata */
    /* box-shadow      : 0 8px 24px rgba(255, 95, 31, 0.25) !important; */ 
    /* box-shadow      : 0 4px 12px rgba(255, 95, 31, 0.15) !important; */ 
}


/* Assicuriamoci che l'immagine interna si adatti al bordo */
.category-card-overlay:hover .category-bg-image img {
    /** transform       : scale(1.05) !important;  */
    /** transition      : transform 0.5s ease !important; */
}


/* ============================================
   OVERLAY (gradiente)
   ============================================ */
.category-overlay-content {
    position        : absolute !important;
    top             : 0 !important;
    left            : 0 !important;
    width           : 100% !important;
    height          : 100% !important;
    z-index         : 2 !important;
    
    display         : flex !important;
    flex-direction  : column !important;
    justify-content : flex-start !important;
    padding-left    : 24px !important;
    padding-top     : 18px !important;
    
    background      : linear-gradient(to bottom,
                        rgba(0,0,0,0.75) 0%,
                        rgba(0,0,0,0.45) 30%,
                        rgba(0,0,0,0.25) 60%,
                        rgba(0,0,0,0.05) 85%
                        ) !important;     
}

/* ============================================
   TITOLO CATEGORIA
   ============================================ */
.category-header {
    margin-bottom   : 6px !important;
}

.category-title {
    margin          : 0 !important;
    font-size       : 1.6rem !important;
    font-weight     : 300 !important;
    line-height     : 1.1 !important;
    color           : #fff !important;

}

.category-link {
    color           : #fff !important;
    text-decoration : none !important;
    /** transition      : color 0.2s ease !important; */ 
}

.category-link:hover {
    color           : #ffffff !important;
    transform       : translateX(1.2px) !important;
    font-size       : 1.8rem !important;
    /** border-bottom   : 1px solid rgba(255,255,255, 0.9) !important; */ 
}

/* ============================================
   SOTTOCATEGORIE
   ============================================ */
.subcategory-section {
    margin-top      : 2px !important;
}

.subcategory-list {
    list-style      : none !important;
    margin          : 0 !important;
    padding         : 0 !important;
    display         : flex !important;
    flex-direction  : column !important;
    gap             : 5px !important;
}

.subcategory-item {
    margin          : 0 !important;
    padding         : 0 !important;
}

.subcategory-link {
    display         : inline-block !important;
    color           : #fff !important;
    font-size       : 1.1rem !important;
    font-weight     : 300 !important;
    text-decoration : none !important;
    padding         : 0px 0 !important;

    /** border-bottom   : 1px solid rgba(255,255,255, 0.0) !important; */ 
    /** transition      : all 0.2s ease !important;   */

}

.subcategory-link:hover {
    color                : #ffffff !important;
    transform       : translateX(2px) !important;
    font-size       : 1.4rem !important;

    /** border-bottom   : 1px solid rgba(255,255,255, 0.9) !important; */ 

}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .category-card-overlay {
        height          : 220px !important;
        border-radius   : 0px !important;
    }
    
    .category-title {
        font-size       : 1.6rem !important;
    }
    
    .subcategory-link {
        font-size       : 1.2rem !important;
    }
}


/* ============================================
   PAGINAZIONE CAROUSEL CATEGORIE
   Punti sempre visibili, non solo all'hover
   ============================================ */

.sw-dot-default {
    display         : flex !important;
    justify-content : center !important;
    gap             : 10px !important;
    margin-top      : 24px !important;
    position        : relative !important;
    z-index         : 10 !important;
}

/* Punto inattivo - SEMPRE VISIBILE */
.sw-dot-default .swiper-pagination-bullet {
    width           : 10px !important;
    height          : 10px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;  /* Bianco semitrasparente */
    border-radius   : 50% !important;
    opacity         : 1 !important;  /* Forza opacità piena */
    transition      : all 0.3s ease !important;
    cursor          : pointer !important;
    margin          : 0 4px !important;
}

/* Punto attivo */
.sw-dot-default .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #ff5f1f !important;
    transform       : scale(1.2) !important;
}

/* Hover - effetto interattivo */
.sw-dot-default .swiper-pagination-bullet:hover {
    background-color: #ff5f1f !important;
    transform       : scale(1.5) !important;
}

/* ============================================
   SE SFONDO CHIARO, USA QUESTA VARIANTE
   ============================================ */
/* Scommenta se lo sfondo è chiaro */
.sw-dot-default .swiper-pagination-bullet {
    /** background-color: rgba(0, 0, 0, 0.3) !important; */ 
    background-color: rgba(255, 95, 31, 0.4) !important;
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .sw-dot-default {
        gap         : 8px !important;
        margin-top  : 20px !important;
    }
    
    .sw-dot-default .swiper-pagination-bullet {
        width       : 8px !important;
        height      : 8px !important;
        margin      : 0 3px !important;
    }
}

@media (max-width: 480px) {
    .sw-dot-default {
        gap         : 6px !important;
        margin-top  : 16px !important;
    }
    
    .sw-dot-default .swiper-pagination-bullet {
        width       : 6px !important;
        height      : 6px !important;
        margin      : 0 2px !important;
    }
}

/* ============================================
   ACCESSIBILITÀ
   ============================================ */
.sw-dot-default .swiper-pagination-bullet:focus-visible {
    outline         : 2px solid #ff5f1f !important;
    outline-offset  : 2px !important;
}