.fptf-magazine-viewport .shadow{

	-webkit-transition: -webkit-box-shadow 0.5s;

	-moz-transition: -moz-box-shadow 0.5s;

	-o-transition: -webkit-box-shadow 0.5s;

	-ms-transition: -ms-box-shadow 0.5s;



	-webkit-box-shadow:0 0 20px #ccc;

	-moz-box-shadow:0 0 20px #ccc;

	-o-box-shadow:0 0 20px #ccc;

	-ms-box-shadow:0 0 20px #ccc;

	box-shadow:0 0 20px #ccc;

}



.fptf-magazine .page{

	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);

	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);

	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);

	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);

	box-shadow:0 0 20px rgba(0,0,0,0.2);

}




.fptf-magazine .even .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

.fptf-magazine .odd .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.10)));
	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.10) 100%);
	background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.10) 100%);
	background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.10) 100%);
	background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.10) 100%);
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.10) 100%);
}

.fptf-magazine-viewport .zoom-in .even .gradient,
.fptf-magazine-viewport .zoom-in .odd .gradient{

	display:none;

}

/* Il viewport di base ha il cursore normale */
.fptf-magazine-viewport {
   /* overflow: hidden;
    width: 1000px; */
    width:100%;
    max-width:100%;
    height: auto;
    position: relative;
    z-index: 1000;
}


.fptf-magazine-viewport .page{

	background-color:white;

	background-repeat:no-repeat;

	background-size:100% 100%;

}

/* Il cursore a lente appare SOLO sulla pagina */
.page {
    cursor: zoom-in;
}

/* Evita la lente sugli angoli (gestiti da Turn.js per girare pagina) */
.page .turn-page-wrapper {
    cursor: default !important;
}

/* Quando il flipbook è zoomato, il cursore diventa una manina */
.fptf-magazine-viewport.zoomed .page {
    cursor: grab;
}

/* Mentre l'utente trascina, il cursore diventa "presa" */
.fptf-magazine-viewport.zoomed.dragging .page {
    cursor: grabbing;
}

/* ?? Stile base delle frecce */
/* ?? Stile base delle frecce */
.flipbook1-arrow1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3); /* Sfondo semi-trasparente */
    color: white;
    border: none;
    font-size: 20px; /* Dimensione della freccia */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s ease-in-out;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif !important; /* Evita che si trasformi in emoji */
    z-index: 100;
}

/* ?? Effetto hover */
.flipbook1-arrow1:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* ?? Aggiunge il simbolo delle frecce via CSS */
.left-arrow1::before {
    content: "<"; /* Simbolo freccia sinistra */
    font-size: 16px;
}

.right-arrow1::before {
    content: ">"; /* Simbolo freccia destra */
    font-size: 16px;
}

/* ?? Posizionamento delle frecce dentro il viewport */
.left-arrow1 {
    left: 10px; /* Distanza dal bordo sinistro */
}

.right-arrow1 {
    right: 10px; /* Distanza dal bordo destro */
}


#flipbook-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.loading-spinner {
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}