#topBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(66, 133, 244, 0.8);
	height: 50px;
	left: 0;
	top: 50px;
	color: white;
	position: fixed;
	z-index: 10049;
	width: 100%;
	/* 	box-shadow: 0 4px 10px rgba(66, 133, 244, 0.8); */
	/* border-bottom: 1px solid #f6f5f4; */
	transition: all 0.3s ease-in-out;
	box-shadow: 0 6px 12px -4px rgba(66, 133, 244,0.8);
}

/* #topBar::after { */
/*     content: ""; */
/*     position: absolute; */
/*     bottom: -10px; sposta il bordo fuori dalla barra */
/*     left: 0; */
/*     width: 100%; */
/*     height: 10px; */
/*     pointer-events: none; */
/*     z-index: -1; sta sotto al pannello */
/*     background: linear-gradient( */
/*         to right, */
/*         rgba(66,133,244,0.8), */
/*         rgba(66,133,244,0), */
/*         rgba(66,133,244,0.8) */
/*     ); */
/* } */
#underTopBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 	background: rgba(229, 229, 229, 0.8); #4285F4; */
	background: rgba(66, 133, 244, 0.8); /* #4285F4;*/
	/* 	padding: 0 15px; */
	top: 0px;
	height: 50px;
	color: white;
	position: fixed;
	z-index: 10049;
	width: 100%;
	/* border-radius: 0px 0px 8px 0px;	border-radius: 0px 0px 100% 0px; */
	/* 	box-shadow: 0px 0px 10px rgba(66, 133, 244, 0.8); */
	transition: all 0.3s ease-in-out;
	border-bottom: 1px solid #f6f5f4;
}

#overTopBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 	background: rgba(229, 229, 229, 0.8); #4285F4; */
	background: rgba(246, 245, 244, 1); /* #4285F4;*/
	/* 	padding: 0 15px; */
	top: 0px;
	right: 0px;
	height: 100px;
	/* 	color: white; */
	position: fixed;
	z-index: 10050;
	width: 140px;
	border-left: 1px solid #f6f5f4;
	border-radius: 100% 0px 0px 1px;
	/* 	border-radius: 50% 0px 0px 0px; */
/* 		box-shadow: 0px 0px 0px rgba(66, 133, 244, 0.8); */
	transition: all 0.3s ease-in-out;
	height: 100px;
}
/* ===================== MENU DESKTOP ===================== */
#menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 15px;
	margin-top: 12px;

	/* 	border-left: 1px solid white; */
	/* 	border-top: 1px solid white; */
}

#loginReg {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 15px;
	margin-top: 12px;
	margin-right: 160px;
}

#menu li {
	position: relative;
	width: auto;
	transition: all 0.3s ease-in-out;
}

#loginReg li {
	position: relative;
	width: auto;
	display: block;
	padding: 10px 12px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

#menu li a {
	display: block;
	padding: 10px 12px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	white-space: nowrap;
	transition: background0.5s;
}

/* --- Submenu --- */
#menu li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: rgba(48, 106, 201, 0.8);
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 160px;
	z-index: 1055;
	border-top: 1px solid #f6f5f4;
	/* 	box-shadow: 0px 0px 10px rgba(66, 133, 244, 0.8); */
	list-style: none;
}

#menu li:has(ul)>a::after {
	content: " ▼"; /* freccina verso il basso */
	display: inline-block; /* necessario per far funzionare transform */
	font-size: 12px;
	margin-left: 5px;
	transition: transform 0.5s;
	/* 	transform: rotate(90deg); ruota verso l'alto quando aperto */
}

/* --- Stato login --- */
body.logged-in #loginBtn, body.logged-in #regBtn {
	display: none;
}

body.logged-in #logoutBtn, body.logged-in  #profiloBtn {
	display: inline-block !important;
}

/* ===================== HAMBURGER BUTTON ===================== */
#hamburgerBtn {
	display: none; /* nascosto su desktop */
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 20px;
	cursor: pointer;
	margin-right: auto; /* allineamento a sinistra */
	margin-left: 15px;
	margin-top: 2px;
}

#hamburgerBtn div {
	height: 2px;
	background: white;
	transition: 0.5s;
}

/* --- animazione apertura hamburger --- */
#hamburgerBtn.open div:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

#hamburgerBtn.open div:nth-child(2) {
	opacity: 0;
}

#hamburgerBtn.open div:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

#quotePanel {
	width: calc(100vw - 190px);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	/* 	padding: 5px 25px; */
	/* 	padding: 5px; */
	padding-left: 15px;
	padding-right: 15px;
	gap: 10px;
	transition: all 0.5s ease;
}

.quoteCard {
	flex: 1 1 0; /* tutte le card uguali di base */
	display: flex;
	align-items: flex-start;
	justify-content: left;
	background: rgba(246, 245, 244, 0.8);
	border-radius: 8px;
	padding: 5px;
	font-style: italic;
	color: #333;
	font-size: 13px;
	height: 30px;
	min-height: 30px;
	max-height: 30px;
	/* 	margin: 5px; */
	opacity: 0;
	transition: all 0.3s ease; /* più rapido per hover */
}

/* Mostra gradualmente */
.quoteCard.show {
	opacity: 1;
	transform: translateY(0);
}

.statoQuote {
	position: fixed;
	top: 10px;
	right: 115px;
	z-index: 15000;
	border-radius: 6px;
}

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

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

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

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

span.statoQuote.active .icon-pause {
    display: inline-block;
    opacity: 1;
    transform: scale(0.9);
}
	.quoteCard.active {
		flex: 2;
		opacity: 1;
		z-index: 10;
		color: #333;
		transform: scale(1.05);
		background: rgba(255, 255, 255, 0.90);
		box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
		filter: blur(0);
		font-size: 15px;
	}

/* MOBILE: max 600px */
@media ( max-width : 600px) {
	.statoQuote {
		position: fixed;
		top: 11px;
		right: 87px;
		z-index: 15000;
	}
	span.statoQuote .icon-pause {
	    width: 23px;
	    height: 23px;
	}
	
	/* ✅ Animazione transizione Play → Pause */
	span.statoQuote .icon-play {
	    width: 25px;
	    height: 25px;
	}
	#hamburgerBtn {
		display: flex;
	}
	#menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 38px;
		left: 0;
		width: 300px;
		background: rgba(66, 133, 244, 0.8);
		z-index: 1000;
		padding: 0;
		border-top: 1px solid #f6f5f4;
	}
	#menu.show {
		display: flex;
	}
	#menu li {
		position: relative;
		/*     background: rgba(244, 244, 244, 0.1); solo leggero background per voci principali */
	}

	/* Sottomenu verticale nel flusso */
	#menu li ul {
		display: none;
		position: relative; /* rimane nel flusso del menu */
		flex-direction: column;
		/*     padding-left: 15px;  indent per distinguere il livello */
		width: 100%;
		background: rgba(48, 106, 201, 0.8);
		margin: 0;
		border-top: 1px solid #f6f5f4;
		border-bottom: 1px solid #f6f5f4;
	}

	/* Sottomenu aperto */
	#menu li.open>ul, #menu li.active>ul {
		display: flex;
	}

	/* Evidenziazione voce aperta/attiva */
	#menu li.open>a, #menu li.active>a {
		background: rgba(244, 244, 244, 0.3);
	}
	#menu li.active>a::after, #menu li.open>a::after {
		transform: rotate(180deg);
	}
}


@media ( min-width :601px) and (max-width:900px) {
	.statoQuote {
		position: fixed;
		top: 10px;
		right: 85px;
		z-index: 15000;
	}
	span.statoQuote .icon-pause {
	    width: 23px;
	    height: 23px;
	}
	
	/* ✅ Animazione transizione Play → Pause */
	span.statoQuote .icon-play {
	    width: 25px;
	    height: 25px;
	}
	
	#hamburgerBtn {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		z-index: 10060 !important; /* sopra al topbar */
	}

	/* Nasconde il menu desktop su schermi piccoli */
	/*     #menu { */
	/*         display: none !important; */
	/*     } */

	/* Menu nascosto di default, verticale */
	#menu li:has(ul)>a::after {
		transform: rotate(-90deg);
	}

	/* Menu nascosto di default */
	#menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 38px;
		left: 0;
		padding:0;
		width: 200px;
		background: rgba(66, 133, 244, 0.8);
		z-index: 1000;
		border-top: 1px solid #f6f5f4;
	}

	/* Menu visibile quando aperto */
	#menu.show {
		display: flex;
	}

	/* Sottomenu inizialmente nascosto */
	#menu li ul {
		display: none;
		position: absolute;
		top: 0;
		left: 100%;
		flex-direction: column;
		padding-left: 0;
		min-width: 300px;
		z-index: 1005;
		background: rgba(48, 106, 201, 0.8);
		border: none;
	}

	/* Sottomenu aperto */
	#menu li.open>ul {
		display: flex;
	}

	/* Sottomenu visibile quando aperto */
	#menu li.open, #menu li.active {
		background: rgba(244, 244, 244, 0.2);
		box-shadow: 0 2px 6px rgba(59, 89, 152, 0.6);
	}
	#menu li.active>a::after, #menu li.open>a::after {
		transform: rotate(90deg); /* ruota verso l'alto quando aperto */
	}
	
}

@media (( max-width :900px) ) {
	#overTopBar {
		top: 0px;
		right: 0px;
		height: 50px;
		width: 100px;
			border-radius: 100% 0px 0px 0px;

		height: 50px;
	}
	#regBtn, #logoutBtn {
		margin-right: 0;
	}

	/* Forza la visualizzazione dell'hamburger su tutti i device touch */
	/* Pulsanti login/registrazione */
	#loginReg {
		margin-right: 10px;
		display: flex;
		/* 		gap: 8px; */
		order: 1;
		margin-left: auto;
	}

	/* Icone pulsanti */
	#loginBtn::before, #regBtn::before, 
	#logoutBtn::before, #profiloBtn::before {
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		/* 		margin-right: 8px; */
		vertical-align: middle;
	}
	#loginBtn::before {
		background-image: url("../img_own/login-30.png");
	}
	#regBtn::before {
		background-image: url("../img_own/regis-30.png");
	}
	#profiloBtn::before {
		background-image: url("../img_own/profilo-30.png");
	}
	#logoutBtn::before {
		background-image: url("../img_own/logout-30.png");
	}

	/* Pulsanti puliti */
	#loginReg li {
		/* 		background: #4285F4 !important; */
		border: none;
		color: white;
		font-size: 0;
		padding: 0;
		margin-left: 15px;
		margin-bottom: 10px;
	}
	#quotePanel {
		width: calc(100vw - 135px);
	}

}