/**
 * TWC Mappa — la mappa del punto di consegna.
 *
 * Caricata sul menu online e nel backend (posizione del ristorante,
 * dettaglio dell'ordine). La mappa vera la disegna MapLibre dentro
 * .twc-mappa__tela; qui ci sono il riquadro, il segno al centro e i
 * pulsanti. Ogni colore ha il suo ripiego dentro var(): nel backend le
 * variabili del tema non ci sono.
 */

.twc-mappa {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 62svh;
	border: 1px solid var( --twc-line-soft, rgba( 20, 17, 14, 0.14 ) );
	border-radius: 14px;
	background: #eef0f1;
	-webkit-tap-highlight-color: transparent;
}

.twc-mappa--fissa {
	aspect-ratio: 16 / 9;
}

/*
 * Due classi e non una: il foglio di MapLibre, che arriva dopo, mette
 * position: relative su .maplibregl-map e la tela resterebbe alta zero.
 */
.twc-mappa .twc-mappa__tela {
	position: absolute;
	inset: 0;
}

.twc-mappa__tela canvas:focus-visible {
	outline: 2px solid var( --twc-accent, #2271b1 );
	outline-offset: -2px;
}

/* Mentre arriva la libreria: un fondo che respira, non un buco bianco. */
.twc-mappa--carica .twc-mappa__tela {
	background: linear-gradient( 100deg, #eef0f1 30%, #f7f8f8 50%, #eef0f1 70% ) 0 0 / 300% 100%;
	animation: twc-mappa-attesa 1.4s ease-in-out infinite;
}

@keyframes twc-mappa-attesa {
	to {
		background-position: -150% 0;
	}
}

.twc-mappa--carica .twc-mappa__segno,
.twc-mappa--guasta .twc-mappa__segno,
.twc-mappa--guasta .twc-mappa__comandi {
	display: none;
}

/* Il segno al centro: la punta in basso tocca il punto scelto. */
.twc-mappa__segno {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: 34px;
	height: 46px;
	margin: -46px 0 0 -17px;
	pointer-events: none;
	transition: transform 0.15s ease;
}

.twc-mappa__segno svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow( 0 3px 4px rgba( 0, 0, 0, 0.28 ) );
}

.twc-mappa__segno-corpo {
	fill: var( --twc-accent, #b4442b );
	stroke: #fff;
	stroke-width: 2;
}

.twc-mappa__segno-occhio {
	fill: #fff;
}

/* L'ombra resta sul punto mentre il segno si solleva. */
.twc-mappa__ombra {
	position: absolute;
	left: 50%;
	bottom: -3px;
	width: 10px;
	height: 4px;
	margin-left: -5px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.35 );
	opacity: 0;
	transition: opacity 0.15s ease;
}

.twc-mappa--muove .twc-mappa__segno {
	transform: translateY( -8px );
}

.twc-mappa--muove .twc-mappa__ombra {
	opacity: 1;
	transform: translateY( 8px );
}

/* Il ristorante, per orientarsi. */
.twc-mappa__ristorante {
	width: 18px;
	height: 18px;
	border: 3px solid var( --twc-ink, #1d1b19 );
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	pointer-events: none;
}

.twc-mappa__comandi {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.twc-mappa__tasto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1d1b19;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.22 );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.twc-mappa__tasto:hover {
	background: #f3f1ed;
}

.twc-mappa__tasto:focus-visible {
	outline: 2px solid var( --twc-accent, #2271b1 );
	outline-offset: 2px;
}

.twc-mappa__tasto svg {
	width: 20px;
	height: 20px;
}

.twc-mappa--cerca .twc-mappa__tasto--gps {
	color: var( --twc-accent, #2271b1 );
}

.twc-mappa--cerca .twc-mappa__tasto--gps svg {
	animation: twc-mappa-cerca 1s ease-in-out infinite alternate;
}

@keyframes twc-mappa-cerca {
	to {
		opacity: 0.35;
	}
}

.twc-mappa__avviso {
	position: absolute;
	left: 10px;
	right: 64px;
	top: 10px;
	z-index: 4;
	margin: 0;
	padding: 9px 12px;
	border-radius: 10px;
	background: rgba( 20, 17, 14, 0.86 );
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
}

.twc-mappa--guasta .twc-mappa__avviso {
	right: 10px;
	top: 50%;
	transform: translateY( -50% );
	text-align: center;
}

/* Il riconoscimento di swisstopo, piccolo ma leggibile. */
.twc-mappa .maplibregl-ctrl-attrib {
	font-size: 10px;
}

@media ( prefers-reduced-motion: reduce ) {
	.twc-mappa__segno,
	.twc-mappa__ombra {
		transition: none;
	}

	.twc-mappa--carica .twc-mappa__tela,
	.twc-mappa--cerca .twc-mappa__tasto--gps svg {
		animation: none;
	}
}