/* ===================== RESET E BASE ===================== */
html, body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	overflow-Y: visible;
	overflow-X: hidden;
	flex: 1;
	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;
	/* 	cursor:url('data:image/svg+xml;utf8,\ */
	/* <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">\ */
	/* <path fill="%23FF0000" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09\ */
	/*   C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>\ */
	/* </svg>') 16 16, auto; */
}

html, body, button, input, select {
	font-size: 16px;
}

.cursor_default {
	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;
}
/* ===================== MAIN CONTENT CENTRALE ===================== */
#mainContent {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	overflow: hidden;
	margin-top: 130px;
}

#waiterModal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(66, 133, 244, 0.1);
	z-index: 15001;
}

#heart {
	width: 50px;
	animation: heartbeat 2s infinite; /* animazione continua */
}

@keyframes heartbeat { 
	0% {
		transform: scale(1);
	}
	25%{
		transform: scale(1.2);
	}
	50%{
		transform: scale(1);
	}
	75%{
		transform:scale(1.2);
	}
	100%{
		transform:scale(1);
	}
}

.sharePanel button {
	width: 30px;
	height: 30px;
	display: flex; /* centra il contenuto */
	align-items: center; /* centra verticalmente */
	justify-content: center; /* centra orizzontalmente */
	border-radius: 8px;
	border: none;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	padding: 0; /* nessun padding */
	margin: 3px;
}

.sharePanel button i {
	font-size: 16px; /* dimensione icona */
	line-height: 1; /* elimina extra spazio verticale */
	display: flex;
	align-items: center;
	justify-content: center;
}

button.fb {
	background: #3b5998;
	transform: scale(1.2);
}

button.wa {
	background: #25D366;
	transform: scale(1.2);
}

button.ig {
	background: #E1306C;
	transform: scale(1.2);
}

button.tk {
	background: #010101;
	transform: scale(1.2);
}

button.yt {
	background: #FF0000;
	transform: scale(1.2);
}

button.gb {
	background: #4285F4;
	transform: scale(1.2);
}

#contextBar {
	position: fixed;
	top: 103px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: auto;
	height: 35px;
	padding: 6px;
	padding-right: 0px;
	padding-left: 4px;
	padding-top: 0px;
	color: #333;
	border-radius: 0px 0px 8px 8px;
	z-index: 14040;
	animation: slideCtx 0.3s ease-in-out;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	gap: 20px;
}

#contextBar.visible {
	opacity: 1;
	pointer-events: auto;
}

#contextBar.hidden {
	opacity: 0;
}

#contextPath {
	width: 100%;
	padding: 5px;
	background: rgba(246, 245, 244, 1);
	border-radius: 8px;
}

#contextPath span {
	width: 100%;
	cursor: pointer;
	vertical-align: middle;
	font-size: 14px;
	padding: 0px 5px;
	transition: all 0.3s ease-in-out;
}

/* Container pulsanti */
#contextActionsSpan {
	width: 100%;
	height: 30px;
	background: rgba(48, 106, 201, 0.8);
	border-radius: 0px 0px 8px 8px;
	padding: 5px;
	box-shadow: 0 2px 6px rgba(48, 106, 201, 0.3);
	border-top: 1px solid #f6f5f4;
	transition: all 0.3s ease-in-out;
}
#contextActionShare,
#contextActionsSearch, #contextActionsBack {
	display: flex;
	gap: 6px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
	background: transparent;
	border-radius: 0px 0px 8px 8px;
	margin: 0;
	padding: 0;
	border-top: 1px solid #f6f5f4;
	transition: all 0.3s ease-in-out;
}
#contextActionShare button,
#contextActionsSearch button, #contextActionsBack button {
	position: relative; /* per pseudo-elementi o linee */
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 0px 0px 8px 8px;
	box-shadow: 0 2px 6px rgba(48, 106, 201, 0.3);
	cursor: pointer;
	margin: 0;
	padding: 0;
	transition: all 0.3s ease-in-out;
	line-height: 1;
	z-index: 2000;
	width: 40px;
	height: 40px;
}

#breadcrumbSearchBtn, /* Pulsante torna su */ #contextBackBtn,#contextShareBtn {
	width: 28px;
	height: 28px;
	font-weight: bold;
	color: #fff;
	background: rgba(48, 106, 201, 0.8);
	box-shadow: 0 3px 10px rgba(48, 106, 201, 0.3);
}

#breadcrumbSearchBtn.active {
	border-radius: 0px;
	border-top: 3px solid #f6f5f4;
	box-shadow: 0 4px 0px #f6f5f4;
/* 	background: rgba(48, 106, 201, 1); */
}

#breadcrumbSearchBtn .icon-top, #contextBackBtn .icon-top {
	font-size: 25px;
	line-height: 1;
	font-weight: normal;
	vertical-align: middle;
}

/* Default: mostra lente */
#breadcrumbSearchBtn .icon-close {
    display: none;
}
#breadcrumbSearchBtn .icon-search {
    display: inline-block;
}

/* Quando pannello aperto -> inverti icone */
#breadcrumbSearchBtn.active .icon-search {
    display: none;
}
#breadcrumbSearchBtn.active .icon-close {
    display: inline-block;
}
/* Pulsante chiudi extra */
/* #contextCloseExtra { */
.contextBarButton {
	pointer-events: auto;
	border: none;
	border-radius: 8px;
	z-index: 12000;
	width: 20px;
	height: 20px;
	font-size: 11px;
	color: #fff;
	box-shadow: 0 3px 10px rgba(66, 133, 244, 0.3);
	background: rgba(48, 106, 201, 0.8);
}

.ctxItem {
	margin: 0px;
	padding: 0px;
}

.ctxText {
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	pointer-events: auto; /* riattivo il click/hov solo sul testo */
	transition: all 0.3s ease-in-out;
}
/* ===================== MOBILE MENU ===================== */
@media ( max-width : 900px) {
	html, body {
		overflow-Y: auto;
		overflow-X: hidden;
	}
	html, button, body, input, select {
		font-size: 18px;
	}
 #contextBar {
        max-width: calc(100vw);    /* mai più largo dello schermo */
        width: auto;
        gap: 10px;
/*         left: 0; */
/*         transform: none; */
/*         overflow: hidden; nasconde traboccamenti */
        justify-content: space-between;
/*         padding-right: 5px; */
    }

    #contextPath {
/*         flex: 1; occupa tutto lo spazio disponibile */
/*         overflow-x: auto; scroll orizzontale solo qui */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* scroll morbido su iOS */
    }

    #contextActionsSpan {
    width: auto;
        flex-shrink: 0; /* i pulsanti non si comprimono mai */
    }/* 	#contextBar { */
/* 		left: 0; */
/* 		transform: none; */
/* 		width: 100%; */
/* 		justify-content: flex-start; */
/* 		o space-between, dipende dal tuo design */
/* 		padding-right: 10px; bilancia il padding sinistro esistente */
/* 	} */
/* 	#contextPath { */
/* 		width: 100%; */
/* 		overflow-x: auto; Breadcrumb scrollabile senza rompere layout */
/* 		white-space: nowrap; */
/* 	} */
}
/* ===================== MOBILE MENU ===================== */
@media ( min-width : 901px) {
	a:hover {
		text-decoration: underline;
	}
	button, select, input[type="checkbox"] {
		cursor: pointer;
		transition: background 0.3s, color 0.3s;
	}

	/* Hover sugli elementi cliccabili */
	.regPanel  label:hover {
		color: #4285F4;
		cursor: pointer;
	}
	input[type="text"], input[type="email"], input[type="password"] {
		cursor: text;
	}
	button.fb:hover {
		background: #4c70ba;
		box-shadow: 0 2px 6px rgba(59, 89, 152, 0.6);
	}
	button.wa:hover {
		background: #5CE080;
		box-shadow: 0 2px 6px rgba(37, 211, 102, 0.6);
	}
	button.ig:hover {
		background: #f5608a;
		box-shadow: 0 2px 6px rgba(225, 48, 108, 0.6);
	}
	button.tk:hover {
		background: #333;
		box-shadow: 0 2px 6px rgba(1, 1, 1, 0.6);
	}
	button.yt:hover {
		background: #ff4444;
		box-shadow: 0 2px 6px rgba(255, 0, 0, 0.6);
	}
	button.gb:hover {
		background: #5a95f5;
		box-shadow: 0 2px 6px rgba(66, 133, 244, 0.6);
	}
	#contextPath span:hover {
		color: rgba(66, 133, 244, 1);
	}

	/* Stile generico pulsanti */
	#contextActionsSearch button:hover, #contextActionsBack button:hover {
		background: rgba(66, 133, 244, 0.8);
		transform: translateY(-2px);
	}
}