/**
 * Easy Sommelier — pulsanti sotto le voci e finestrella dell'abbinamento.
 *
 * Colori, bordi e carattere arrivano dalle variabili della pagina pubblica, le
 * stesse che vestono il menu: i pulsanti devono sembrare parte del menu del
 * locale, non un'aggiunta di un altro sistema.
 */

/* ── Pulsanti sotto la voce ───────────────────────────────────────── */

.esm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	grid-column: 1 / -1; /* la voce di menu e' una griglia: qui si va a capo */
}

/* Con la miniatura i pulsanti partono sotto il testo, non sotto la foto:
   allineati a descrizione e simboli dietetici, che fanno gia' cosi'. */
.pm-item--photo .esm-actions { grid-column: 2 / -1; }

.esm-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font: inherit;
	font-family: var(--el-font, inherit);
	font-size: 12.5px;
	font-weight: 450;
	line-height: 1.2;
	color: var(--esm-c, var(--elier-landing-accent, #7b002c));
	background: transparent;
	border: 1px solid;
	border-color: rgba(128, 128, 128, .34);
	border-radius: var(--el-radius, 999px);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Sfondo e bordo derivati dall'accento: schiariti, come le icone del menu. */
@supports (color: color-mix(in oklab, red 10%, white)) {
	.esm-btn {
		background: color-mix(in oklab, var(--esm-c, var(--elier-landing-accent, #7b002c)) 7%, transparent);
		border-color: color-mix(in oklab, var(--esm-c, var(--elier-landing-accent, #7b002c)) 26%, transparent);
	}
	.esm-btn:hover,
	.esm-btn:focus-visible {
		background: color-mix(in oklab, var(--esm-c, var(--elier-landing-accent, #7b002c)) 14%, transparent);
		border-color: color-mix(in oklab, var(--esm-c, var(--elier-landing-accent, #7b002c)) 46%, transparent);
	}
}

/* Ogni abbinamento ha il colore della cosa che propone: il vino un rosso da
   cantina, la birra un ambra da boccale. Cosi' i due pulsantini si
   riconoscono di colpo, anche senza leggere. L'abbinamento di un piatto
   resta sull'accento del locale. */
.esm-btn--vino  { --esm-c: #7b1030; }
.esm-btn--birra { --esm-c: #9a6510; }

.esm-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.esm-btn__ic { flex: 0 0 auto; opacity: .8; }

/* ── Finestrella ──────────────────────────────────────────────────── */

body.esm-aperto { overflow: hidden; }

.esm-modal {
	position: fixed;
	inset: 0;
	/*
	 * Sopra il selettore di lingua, che sta a 999999 e altrimenti si stampa
	 * sulla riga dell'alternativa. Una finestra modale deve coprire tutto:
	 * finche' e' aperta non c'e' nient'altro da toccare.
	 */
	z-index: 1000001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	font-family: var(--el-font, system-ui, -apple-system, sans-serif);
}
.esm-modal[hidden] { display: none; }

.esm-modal__velo {
	position: absolute;
	inset: 0;
	background: rgba(12, 10, 9, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: esmVelo .2s ease both;
}

.esm-modal__box {
	position: relative;
	width: 100%;
	max-width: 430px;
	max-height: 86vh;
	overflow-y: auto;
	background: var(--elier-landing-surface, #fff);
	color: var(--elier-landing-ink, #1c1a19);
	border-radius: var(--el-radius, 16px);
	box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
	animation: esmEntra .38s cubic-bezier(.22, 1.12, .36, 1) both;
}

.esm-modal__testa {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 0;
}

.esm-modal__titolo {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .55;
}

.esm-modal__x {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: -6px -4px 0 0;
	font-size: 24px;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	opacity: .45;
	cursor: pointer;
}
.esm-modal__x:hover { opacity: .9; }

.esm-modal__corpo { padding: 12px 18px 20px; }

/* ── Contenuto della risposta ─────────────────────────────────────── */

.esm-per,
.esm-nome,
.esm-dettaglio,
.esm-perche,
.esm-alt,
.esm-errore { animation: esmRiga .44s cubic-bezier(.22, .61, .36, 1) both; }

.esm-per       { animation-delay: .02s; }
.esm-nome      { animation-delay: .09s; }
.esm-dettaglio { animation-delay: .15s; }
.esm-perche    { animation-delay: .21s; }
.esm-alt       { animation-delay: .28s; }

.esm-per {
	margin: 0 0 8px;
	font-size: 12.5px;
	opacity: .55;
}

.esm-nome {
	margin: 0;
	font-size: 21px;
	font-weight: 450;
	line-height: 1.22;
	color: var(--elier-landing-accent, #7b002c);
}

.esm-dettaglio {
	margin: 5px 0 0;
	font-size: 13px;
	opacity: .62;
}

.esm-perche {
	margin: 13px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	opacity: .85;
}

.esm-alt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 15px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(128, 128, 128, .26);
	font-size: 13.5px;
}
.esm-alt__k {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	opacity: .45;
}
.esm-alt__v { opacity: .82; }

.esm-errore {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	opacity: .75;
}

/* ── L'incontro ───────────────────────────────────────────────────────
   Due facce che si avvicinano e un cuore che scocca in mezzo. È la prima
   cosa che si vede, prima ancora di leggere: deve far capire in un istante
   che quelle due voci stanno bene insieme. */

.esm-match {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 4px;
	margin: 2px 0 16px;
}

.esm-match__lato {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	min-width: 0;
}
/* Entrano dai due lati e si incontrano al centro. */
.esm-match__lato:first-child { animation: esmDaSinistra .5s cubic-bezier(.22, .9, .3, 1.08) both; }
.esm-match__lato:last-child  { animation: esmDaDestra   .5s cubic-bezier(.22, .9, .3, 1.08) .06s both; }

.esm-face {
	position: relative;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(128, 128, 128, .12);
	box-shadow: 0 3px 14px rgba(0, 0, 0, .14);
}
.esm-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Senza fotografia resta il simbolo del tipo, disegnato col colore del locale. */
.esm-face--vuota::after {
	content: '';
	position: absolute;
	inset: 0;
	background: currentColor;
	color: var(--elier-landing-accent, #7b002c);
	opacity: .5;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: 34px 34px;   mask-size: 34px 34px;
}
.esm-face--piatto.esm-face--vuota::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 11h18'/%3E%3Cpath d='M5 11a7 7 0 0 1 14 0'/%3E%3Cpath d='M4 15h16'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 11h18'/%3E%3Cpath d='M5 11a7 7 0 0 1 14 0'/%3E%3Cpath d='M4 15h16'/%3E%3C/svg%3E");
}
.esm-face--vino.esm-face--vuota::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M7 3h10l-1 7a4 4 0 0 1-8 0Z'/%3E%3Cpath d='M12 14v6'/%3E%3Cpath d='M8.5 20h7'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M7 3h10l-1 7a4 4 0 0 1-8 0Z'/%3E%3Cpath d='M12 14v6'/%3E%3Cpath d='M8.5 20h7'/%3E%3C/svg%3E");
}
.esm-face--birra.esm-face--vuota::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 8h9v12H6z'/%3E%3Cpath d='M15 10h2a2 2 0 0 1 0 5h-2'/%3E%3Cpath d='M6 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 8h9v12H6z'/%3E%3Cpath d='M15 10h2a2 2 0 0 1 0 5h-2'/%3E%3Cpath d='M6 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

.esm-match__nome {
	font-size: 12px;
	line-height: 1.28;
	opacity: .82;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Due formati per il vino: uno per riga, la cifra in evidenza e il formato
   sottovoce, cosi' si leggono a colpo d'occhio senza affollare. */
.esm-match__prezzo {
	display: block;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--elier-landing-accent, #7b002c);
}
.esm-match__prezzo b { font-weight: 500; }
.esm-match__prezzo small { font-size: 10.5px; opacity: .6; margin-left: 4px; }

/* ── Il cuore e la scintilla ── */

.esm-match__mezzo {
	position: relative;
	width: 46px;
	height: 74px;
	display: grid;
	place-items: center;
}

.esm-match__cuore {
	position: relative;
	z-index: 2;
	width: 27px;
	height: 27px;
	color: var(--elier-landing-accent, #7b002c);
	/* Scocca dopo che le due facce si sono avvicinate. */
	animation: esmCuore .62s cubic-bezier(.2, 1.3, .35, 1) .30s both,
	           esmBattito 1.9s ease-in-out 1.1s infinite;
}
.esm-match__cuore svg { width: 100%; height: 100%; fill: currentColor; display: block; }

.esm-match__scintille {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.esm-scintilla {
	position: absolute;
	width: 3px;
	height: 9px;
	border-radius: 2px;
	background: var(--elier-landing-accent, #7b002c);
	opacity: 0;
	animation: esmScintilla .72s cubic-bezier(.2, .7, .3, 1) .40s both;
}
.esm-scintilla:nth-child(1) { transform: rotate(0deg)   translateY(-15px); }
.esm-scintilla:nth-child(2) { transform: rotate(45deg)  translateY(-15px); animation-delay: .43s; }
.esm-scintilla:nth-child(3) { transform: rotate(90deg)  translateY(-15px); animation-delay: .41s; }
.esm-scintilla:nth-child(4) { transform: rotate(135deg) translateY(-15px); animation-delay: .45s; }
.esm-scintilla:nth-child(5) { transform: rotate(180deg) translateY(-15px); animation-delay: .40s; }
.esm-scintilla:nth-child(6) { transform: rotate(225deg) translateY(-15px); animation-delay: .44s; }
.esm-scintilla:nth-child(7) { transform: rotate(270deg) translateY(-15px); animation-delay: .42s; }
.esm-scintilla:nth-child(8) { transform: rotate(315deg) translateY(-15px); animation-delay: .46s; }

/* ── La proposta ── */

.esm-combo {
	margin-top: 15px;
	padding: 12px 14px;
	border-radius: var(--el-radius, 12px);
	background: rgba(128, 128, 128, .1);
	text-align: center;
	animation: esmRiga .5s cubic-bezier(.22, .61, .36, 1) .5s both;
}
@supports (background: color-mix(in oklab, red 10%, white)) {
	.esm-combo { background: color-mix(in oklab, var(--elier-landing-accent, #7b002c) 9%, transparent); }
}
.esm-combo__testo {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	opacity: .72;
}
.esm-combo__prezzo {
	display: block;
	margin-top: 5px;
}
.esm-combo__prezzo small {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .5;
	margin-right: 7px;
}
.esm-combo__prezzo b {
	font-size: 24px;
	font-weight: 500;
	color: var(--elier-landing-accent, #7b002c);
}

@keyframes esmDaSinistra {
	from { opacity: 0; transform: translate3d(-26px, 0, 0) scale(.9); }
	to   { opacity: 1; transform: none; }
}
@keyframes esmDaDestra {
	from { opacity: 0; transform: translate3d(26px, 0, 0) scale(.9); }
	to   { opacity: 1; transform: none; }
}
@keyframes esmCuore {
	0%   { opacity: 0; transform: scale(.2) rotate(-18deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes esmBattito {
	0%, 88%, 100% { scale: 1; }
	92%           { scale: 1.14; }
	96%           { scale: 1.04; }
}
@keyframes esmScintilla {
	0%   { opacity: 0; }
	35%  { opacity: .95; }
	100% { opacity: 0; }
}

/* ── Attesa ───────────────────────────────────────────────────────── */

.esm-attesa {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 0 6px;
}
.esm-attesa__giro {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 2px solid rgba(128, 128, 128, .28);
	border-top-color: var(--elier-landing-accent, #7b002c);
	border-radius: 50%;
	animation: esmGira .7s linear infinite;
}
.esm-attesa__testo {
	margin: 0;
	font-size: 14px;
	opacity: .7;
}

@keyframes esmGira { to { transform: rotate(360deg); } }
@keyframes esmVelo { from { opacity: 0; } to { opacity: 1; } }

/* La finestrella non scivola: si materializza al centro, partendo piu' piccola
   e assestandosi con un filo di rimbalzo. E' quel mezzo decimo di secondo di
   scavallamento a far sembrare la cosa magica invece che meccanica. */
@keyframes esmEntra {
	from { opacity: 0; transform: scale(.88) translate3d(0, 8px, 0); }
	to   { opacity: 1; transform: none; }
}

/* Il contenuto arriva subito dopo, una riga alla volta. */
@keyframes esmRiga {
	from { opacity: 0; transform: translate3d(0, 9px, 0); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.esm-modal__box,
	.esm-modal__velo,
	.esm-per,
	.esm-nome,
	.esm-dettaglio,
	.esm-perche,
	.esm-alt,
	.esm-errore,
	.esm-match__lato,
	.esm-match__cuore,
	.esm-combo { animation: none !important; }
	.esm-scintilla { display: none; }
	.esm-attesa__giro { animation-duration: 1.6s; }
}

@media (max-width: 480px) {
	/* Centrata anche qui: nessun pannello che sale dal basso. */
	.esm-modal { padding: 14px; }
	.esm-modal__box { max-width: none; max-height: 80vh; }
	.esm-btn { font-size: 12px; padding: 6px 11px; }
}