/*buonooooooooooooooo*/
.slider-container {
	position: relative;
	width: 100%;
	grid-column: 1;
	grid-row: 3;
	border-top: 1px solid #4285F4;
	border-bottom: 1px solid #4285F4;
	background: #f6f5f4;
}

.slider-container h4 {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	color: #4285F4;
	margin: 0;
	margin-left: 10px;
	font-size: 20px;
	min-height: 25px;  /* 👈 Altezza costante */
}

.slider-wrapper {
	position: relative;
}

.slider {
	display: flex;
	transition: transform 2s ease;
	align-items: center;
	padding-top: 15px;
	padding-bottom: 10px;
}

.slide {
	flex: 0 0 auto;
	padding: 0;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	transition: background 0.6s ease, box-shadow 0.6s ease;
}

.slide:last-child {
	margin-right: 0; /* niente margine per l’ultima slide */
}

.pause {
	cursor:
		url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="%23cc0000">\
<rect x="6" y="4" width="4" height="16" fill="%23cc0000"/>\
<rect x="14" y="4" width="4" height="16" fill="%23cc0000"/>\
</svg>') 12 12, auto;
}

.slideImage {
	position: relative;
	width: 96%;
	transition: transform 0.5s ease, box-shadow 0.5s ease, scale 0.5s ease;
	border-radius: inherit;
	margin: 2%;
	z-index: 1000;
cursor: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 30 24" fill="none">\
<circle cx="10" cy="10" r="6" stroke="white" stroke-width="2" fill="none"/>\
<line x1="10" y1="7" x2="10" y2="13" stroke="white" stroke-width="2"/>\
<line x1="7" y1="10" x2="13" y2="10" stroke="white" stroke-width="2"/>\
<line x1="14" y1="14" x2="20" y2="20" stroke="white" stroke-width="2"/>\
<!-- Simbolo pausa -->\
<rect x="20" y="4" width="3" height="11" fill="white"/>\
<rect x="25" y="4" width="3" height="11" fill="white"/>\
</svg>') 12 12, auto;
}

.slideImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.slideImage .slide-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20%;
	background: rgba(66, 133, 244, 0.5);
/* 	background: rgba(0, 0, 0, 0.5); */
	color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: height 0.5s ease, background 0.5s ease;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: inherit;
}

.selSlide .slideImage {
	color: #fff !important;
	font-weight: 500 !important;
	transform: scale(1.5) !important;
	cursor:inherit;
/* cursor: url('data:image/svg+xml;utf8,\ */
/* <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 30 24" fill="none">\ */
/* <circle cx="10" cy="10" r="6" stroke="white" stroke-width="2" fill="none"/>\ */
/* <line x1="7" y1="10" x2="13" y2="10" stroke="white" stroke-width="2"/>\ */
/* <line x1="14" y1="14" x2="20" y2="20" stroke="white" stroke-width="2"/>\ */
/* <!-- Simbolo pausa -->\ */
/* <rect x="20" y="4" width="3" height="11" fill="white"/>\ */
/* <rect x="25" y="4" width="3" height="11" fill="white"/>\ */
/* </svg>') 12 12, auto;	 */
z-index: 1050;
}

.selSlide {
	transform: scale(1.05);
	box-shadow: 0 8px 0 0 #4285F4 !important;
	border-radius: 8px 8px 0 0;
	z-index: 1050;
}

.selSlide .slideImage .slide-overlay {
	font-weight: 500 !important;
	height: 100% !important;
}

.slide .click-icon {
	display: none;
	position: absolute;
	top: 15px;
	right: 15px;
	width: 30px;
	height: 30px;
	background: rgb(66, 133, 244);
	color: rgba(255, 255, 255, 1);
	justify-content: center;
	align-content: center;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.5s ease, box-shadow 0.5s ease;
	font-size: 20px;
	font-weight: bold;
	font-family: Courier;
	overflow: hidden;
	position: absolute;
}

.slide .click-icon i {
	font-size: 20px;
}

/* Pulsanti */
button.prev, button.next {
	position: absolute;
	top: 0px;
	/* 	background: #4285F4; */
	/* 	color: #fff; */
	border: none;
	border-top: 1px solid #f6f5f4;
	border-radius: 0px 0px 8px 8px;
	background: rgba(48, 106, 201, 0.8);
	box-shadow: 0 3px 10px rgba(48, 106, 201, 0.3);
	width: 40px;
	height: 40px;
		padding-left: 4px;
	padding-top: 0px;
	padding-right: 6px;
	padding-bottom: 3px;
	cursor: pointer;
	z-index: 1500;
	font-weight: bold;
	font-size: 20px;
	color: #fff; 

		cursor : pointer;
	transition : all 0.3s ease-in-out;
}

 span.stato {
	position: absolute;
	top: 5px;
/* 		background: #4285F4; */
	color: #4285F4;
	border: none;
	width: 30px;
	height: 30px;
/* 	padding-left: 4px; */
/* 	padding-top: 0px; */
/* 	padding-right: 6px; */
/* 	padding-bottom: 3px; */
	z-index: 1500;
	font-weight: bold;
	font-size: 20px;
	cursor: inherit;
		transition: all 0.3s ease-in-out;
}

span.stato .icon-pause {
    display: none;
}

/* ✅ Animazione transizione Play → Pause */
span.stato .icon-play {
	color:#6EDCA0;
	padding-right:3px;
    opacity: 1;
    transform: scale(1);
    transition: 0.3s ease-in-out;
}

span.stato .icon-pause {
	color:#cc0000;
	padding-top:2px;
    opacity: 1;
    transform: scale(1);
    transition: 0.3s ease-in-out;
}

span.stato.active .icon-play {
    opacity: 0;
    transform: scale(0.4);
    display: none;
}

span.stato.active .icon-pause {
    display: inline-block;
    opacity: 1;
    transform: scale(1.1);
}

button.prev {
	right: 80px;
}

span.stato {
	right: 50px;
}
span.stato .icon-top {
/* 	font-size: 25px; */
	line-height: 1;
	font-weight: normal;
	vertical-align: middle;
}

button.next {
	right: 10px;
}

/* Pallini */
.dots {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	z-index: 10; /* sopra lo slider */
	pointer-events: auto; /* assicurati che riceva click */
}

.dots span {
	width: 20px;
	height: 20px;
	border-radius: 8px;
	background: rgba(66, 133, 244, 0.5);
	cursor: pointer; /* 👈 cambia il cursore */
	transition: background 0.5s ease, transform 0.5s ease;
	pointer-events: auto; /* fondamentale se ci sono overlay */
}

.dots span.active {
	background: #4285F4;
	cursor:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80'%3E%3Cdefs%3E%3ClinearGradient id='rainbowCursor' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FF3B30'/%3E%3Cstop offset='0.18' stop-color='%23FF9500'/%3E%3Cstop offset='0.36' stop-color='%23FFCC00'/%3E%3Cstop offset='0.54' stop-color='%234CD964'/%3E%3Cstop offset='0.72' stop-color='%23007AFF'/%3E%3Cstop offset='1' stop-color='%235856D6'/%3E%3C/linearGradient%3E%3Cfilter id='shadow' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1.2' flood-opacity='0.25'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M2 2 L2 74 L22 52 L34 78 L38 74 L26 52 L38 52 Z' fill='url(%23rainbowCursor)' stroke='%23000000' stroke-opacity='0.06' stroke-width='0.8' stroke-linejoin='round' filter='url(%23shadow)'/%3E%3C/svg%3E")
		5 5, auto !important;
}

.slider-wrapper button {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	user-select: none;
}

@media ( max-width : 600px) {
	.slide {
		min-width: 100%;
	}
	.dots span {
		width: 15px;
		height: 15px;
	}
}

@media ( min-width : 601px) and ( max-width : 901px) {
	.slide {
		min-width: 50%;
	}
}

@media ( min-width : 901px) {
	.slide {
		min-width: 25%;
	}
}