/* ----------------------------------------------------------------
	CUSTOM CSS • DIVI GALLERY
-----------------------------------------------------------------*/

/* Cambia il colore del background della lightbox */
.mfp-bg {
	background-color: #365250 !important;
	opacity: 0.85!important;

}

/* Cambia la stile dell'icona di chiusura */
.mfp-close {
	font-size: 50px!important;
	color: #B39D79!important;
    top: -50px !important;
    right: -10px !important;
	opacity: 1!important;
	transform: translate;
	transition: 200ms ease-in-out!important;
}

/* Cambia la stile dell'icona di chiusura on hover */
.mfp-close:hover {
	color: #fff!important;
	transform: translateY(2px)!important;	
}

/* Translate delle frecce */
.mfp-arrow  {
	transform: translate;
	transition: 150ms ease-in-out!important;
	opacity: 1!important;
}

/* Translate delle frecce on hover */
.mfp-arrow:hover {
	transform: translateY(2px)!important;
	color: #fff!important;
}

/* Posizionamento delle frecce*/
.mfp-arrow-left {
    left: 24px !important;
}

.mfp-arrow-right {
    right: 32px !important;
}

/* Colore del background delle frecce di navigazione */
.mfp-arrow:before, .mfp-arrow:after {
    background-color: #365250 !important; /* Verde scuro */
	border-radius: 32px!important;
	font-size: 40px!important;
	padding: 8px 8px 8px 8px!important;
}

/* Colore delle frecce (simbolo) */
.mfp-arrow-left:before, .mfp-arrow-right:before {
    color: #ffffff !important; /* Bianco per il simbolo della freccia */
}

/* Cambia l'icona della freccia sinistra */
.mfp-arrow-left .mfp-a,.mfp-arrow-left:after {
    content: "\23"
}

/* Cambia l'icona della freccia destra */
.mfp-arrow-right .mfp-a,.mfp-arrow-right:after {
    content: "\24"
}

/* Cambia lo stile del contenitore principale dell'immagine nella lightbox */
.mfp-img {
    background: #fff !important; /* Sfondo chiaro per l'immagine */
    padding: 0px !important; /* Spaziatura intorno all'immagine */
    border-radius: 6px; /* Angoli arrotondati per l'immagine */
}

/* Nascondi il counter delle immagini */
.mfp-counter {
	display: none;
}


/* ----------------------------------------------------------------
	CUSTOM CSS • DIVI GALLERY animazione apertura
-----------------------------------------------------------------*/

/* Nascondi la lightbox e riducila leggermente per l'inizio */
.mfp-wrap {
    opacity: 0;
    transform: scale(0.9); /* Inizia al 80% della dimensione */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Quando la lightbox è pronta, ingrandiscila alla dimensione normale */
.mfp-wrap.mfp-ready {
    opacity: 1;
    transform: scale(1);
}

/* Animazione di uscita (riduci nuovamente) */
.mfp-wrap.mfp-removing {
    opacity: 0;
    transform: scale(0.8);
}

/* Per l'overlay, un fade semplice */
.mfp-bg {
    transition: opacity 0.4s ease-in-out;
}
.mfp-bg.mfp-ready {
    opacity: 0.8;
}
.mfp-bg.mfp-removing {
    opacity: 0;
}


/* ----------------------------------------------------------------
	NO TAP HIGHLIGHTS ON MOBILE
-----------------------------------------------------------------*/

a, button, input, textarea, select, * {
    /* Per nascondere l'effetto su browser basati su WebKit (es. Chrome, Safari) */
    -webkit-tap-highlight-color: transparent;
    
    /* Per rimuovere l'outline quando l'elemento è attivo/focalizzato, 
       che a volte può apparire come un effetto di tocco. 
       Usare con cautela per non danneggiare l'accessibilità da tastiera. */
    outline: none;
    
    /* Per alcuni browser o elementi specifici (es. Firefox) */
    -moz-user-select: none;
}