.vdp-bottom-nav {

	/* VDP: margine di sicurezza sotto la nav bar, per gesture bar/home indicator */
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 60px;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #fff;
	border-top: 1px solid #E3A18F;
	z-index: 9999;
	box-sizing: content-box;

}

.vdp-myvdp-nav {

	background: #E5E5E5;

}

.vdp-nav-item {

	display: flex;
	align-items: center;
	justify-content: center;
	width: 25%;
	height: 100%;
	text-decoration: none;

	/*
	 * Icone abbassate di 12px verso il centro della fascia bianca.
	 * Solo sui telefoni con la barretta Home in basso (iPhone
	 * senza tasto): dove quello spazio non c'è restano centrate.
	 */
	transform: translateY(min(12px, env(safe-area-inset-bottom, 0px)));

}

.vdp-nav-icon {

	width: 24px;
	height: 24px;
	display: block;

}
/*
 * Icona dei messaggi: grigia come le altre finché tutto è
 * letto, terracotta quando c'è qualcosa di nuovo. L'SVG usa
 * currentColor, quindi basta cambiare il colore del testo
 * dell'immagine — non serve un secondo file.
 */
/*
 * La nuvoletta piena resta nascosta finché tutto è letto: si
 * vede solo la versione a contorno, grigia come le altre icone.
 */
.vdp-nuvoletta-piena {
	display: none;
}

.vdp-nav-icon-message--unread .vdp-nuvoletta-piena {
	display: block;
	fill: #C1552E;
}

.vdp-nav-icon-message--unread .vdp-nuvoletta-linea {
	display: none;
}

.vdp-nav-icon-message {
	color: inherit;
	/*
	 * La sagoma della nuvoletta è più piccola e sottile delle
	 * altre icone: 26px invece di 24 (con contorno aggiunto
	 * nell'SVG) la porta alla stessa presenza visiva del cuore.
	 * Serve qui perché .vdp-nav-icon impone 24px da CSS, che
	 * vincerebbe sugli attributi width/height dell'SVG.
	 */
	width: 26px;
	height: 26px;
}

.vdp-nav-icon-message--unread {
	color: #b08a82;
}

/* Icona Prenotazioni (admin): disegno dentro il plugin, nero
   pieno come le altre icone della barra. */
.vdp-nav-icon-bookings {
	color: #000000;
}

/* Nuvoletta: nero pieno come le altre icone (non il colore del
   tema). Con un messaggio da leggere resta la versione piena
   terracotta, gestita dalle regole qui sopra. */
.vdp-nav-icon-message:not(.vdp-nav-icon-message--unread) {
	color: #000000;
}