/* CSS personalizzato per pagina creazione.asp */

/* Stabilizza layout durante caricamento FlexSlider - dimensioni fisse */
#immaginiarticolo #slider:not(.flexslider) {
    width: 60% !important;
    float: none !important;
    margin: 0 auto 1em auto !important;
    position: relative !important;
    height: 400px !important;
    background: #f8f8f8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#immaginiarticolo #carousel:not(.flexslider) {
    width: 60% !important;
    float: none !important;
    margin: 3em auto 0 auto !important;
    clear: both !important;
    height: 80px !important;
    background: #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Nascondi tutto il contenuto prima dell'inizializzazione */
#immaginiarticolo #slider:not(.flexslider) * {
    display: none !important;
}

#immaginiarticolo #carousel:not(.flexslider) * {
    display: none !important;
}

/* Messaggi di caricamento */
#immaginiarticolo #slider:not(.flexslider):after {
    content: 'Caricamento immagine principale...' !important;
    color: #999 !important;
    font-size: 14px !important;
}

#immaginiarticolo #carousel:not(.flexslider):after {
    content: 'Caricamento thumbnails...' !important;
    color: #999 !important;
    font-size: 12px !important;
}

/* Immagine principale FlexSlider ridotta del 50% */
#immaginiarticolo #slider.flexslider {
    width: 60% !important;
    float: none !important;
    margin: 0 auto 1em auto !important;
    position: relative !important;
}

/* Immagini dentro FlexSlider dimensioni normali */
#immaginiarticolo #slider.flexslider .slides li img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* Avvicina le frecce di navigazione FlexSlider con selettori ultra-specifici */
article#articoloshop section#immaginiarticolo #slider.flexslider .flex-direction-nav a.flex-prev {
    left: 20px !important;
    z-index: 999 !important;
}

article#articoloshop section#immaginiarticolo #slider.flexslider .flex-direction-nav a.flex-next {
    right: 20px !important;
    z-index: 999 !important;
}

/* Fallback con diversi selettori */
.flexslider .flex-direction-nav a.flex-prev {
    left: 20px !important;
}

.flexslider .flex-direction-nav a.flex-next {
    right: 20px !important;
}

/* Thumbnails FlexSlider sotto all'immagine principale - più piccoli e abbassati */
#immaginiarticolo #carousel.flexslider {
    width: 60% !important;
    float: none !important;
    margin: 3em auto 0 auto !important;
    clear: both !important;
}

/* Ridimensiona le singole immagini dei thumbnails */
#carousel.flexslider .slides li {
    width: 80px !important;
    height: 60px !important;
    margin: 0 5px !important;
}

#carousel.flexslider .slides li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Thumbnails immagini più piccole */
#carousel.flexslider .slides img {
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

#carousel.flexslider .slides img:hover {
    opacity: 1 !important;
}

/* Responsive: su mobile ingrandisci immagini */
@media all and (max-width: 800px) {

    /* Immagine principale più grande su mobile */
    #immaginiarticolo #slider.flexslider {
        width: 95% !important;
        margin: 0 auto 1em auto !important;
    }

    /* Thumbnails più grandi e orizzontali su mobile */
    #immaginiarticolo #carousel.flexslider {
        width: 95% !important;
        margin: 1em auto 0 auto !important;
    }

    /* Thumbnails più grandi su mobile */
    #carousel.flexslider .slides li {
        width: 120px !important;
        height: 90px !important;
        margin: 0 8px !important;
    }

    /* Frecce più visibili su mobile */
    article#articoloshop section#immaginiarticolo #slider.flexslider .flex-direction-nav a.flex-prev {
        left: 10px !important;
    }

    article#articoloshop section#immaginiarticolo #slider.flexslider .flex-direction-nav a.flex-next {
        right: 10px !important;
    }
}