/* WRX Cambio Valuta — pulsante flottante e pannello delle valute. */

.wrx-valuta-radice {
	/*
	 * --wrx-dim e la misura da cui dipende tutto il pulsante. Il JavaScript
	 * scrive solo --wrx-desktop e --wrx-mobile: se scrivesse --wrx-dim in linea,
	 * nessuna media query potrebbe piu cambiarla, perche lo stile in linea vince
	 * su qualunque regola del foglio.
	 */
	--wrx-dim: var(--wrx-desktop, 15px);

	position: fixed;
	z-index: 99990;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: inherit;
	line-height: 1.3;
}

.wrx-valuta-radice[hidden] { display: none; }

/* --- Ancoraggi orizzontali --- */
.wrx-valuta-pos-sinistra-alto,
.wrx-valuta-pos-sinistra-centro,
.wrx-valuta-pos-sinistra-basso { left: var(--wrx-x, 20px); }

.wrx-valuta-pos-destra-alto,
.wrx-valuta-pos-destra-centro,
.wrx-valuta-pos-destra-basso { right: var(--wrx-x, 20px); flex-direction: row-reverse; }

.wrx-valuta-pos-centro-alto,
.wrx-valuta-pos-centro-centro,
.wrx-valuta-pos-centro-basso { left: 50%; }

/* --- Ancoraggi verticali --- */
.wrx-valuta-pos-sinistra-alto,
.wrx-valuta-pos-centro-alto,
.wrx-valuta-pos-destra-alto { top: var(--wrx-y, 20px); }

.wrx-valuta-pos-sinistra-basso,
.wrx-valuta-pos-centro-basso,
.wrx-valuta-pos-destra-basso { bottom: var(--wrx-y, 20px); align-items: flex-end; }

.wrx-valuta-pos-sinistra-centro,
.wrx-valuta-pos-centro-centro,
.wrx-valuta-pos-destra-centro { top: 50%; }

/* --- Traslazioni, una sola regola per combinazione --- */
.wrx-valuta-pos-sinistra-centro,
.wrx-valuta-pos-destra-centro { transform: translateY(-50%); }

.wrx-valuta-pos-centro-alto,
.wrx-valuta-pos-centro-basso { transform: translateX(-50%); }

.wrx-valuta-pos-centro-centro { transform: translate(-50%, -50%); }

/* --- Pulsante --- */
.wrx-valuta-pulsante {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--wrx-dim) * 0.47);
	margin: 0;
	padding: calc(var(--wrx-dim) * 0.67) calc(var(--wrx-dim) * 1.07);
	border: 0;
	border-radius: 999px;
	background: var(--wrx-sfondo, #111827);
	color: var(--wrx-testo, #fff);
	font-size: var(--wrx-dim);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wrx-valuta-pulsante:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.wrx-valuta-pulsante:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.wrx-valuta-radice[data-forma="cerchio"] .wrx-valuta-pulsante {
	width: calc(var(--wrx-dim) * 3.47);
	height: calc(var(--wrx-dim) * 3.47);
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	font-size: calc(var(--wrx-dim) * 1.2);
}

.wrx-valuta-bandiera { font-size: calc(var(--wrx-dim) * 1.2); line-height: 1; }

/* --- Pannello --- */
.wrx-valuta-pannello {
	min-width: calc(var(--wrx-dim) * 15.5);
	max-height: min(60vh, 420px);
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	border-radius: 14px;
	background: #fff;
	color: #111827;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.wrx-valuta-pannello[hidden] { display: none; }

.wrx-valuta-voce {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: calc(var(--wrx-dim) * 0.6) calc(var(--wrx-dim) * 0.73);
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: inherit;
	font-size: calc(var(--wrx-dim) * 0.93);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.wrx-valuta-voce:hover,
.wrx-valuta-voce:focus-visible { background: #f3f4f6; outline: none; }
.wrx-valuta-voce[aria-selected="true"] { background: #eef2ff; font-weight: 600; }

.wrx-valuta-sigla { font-weight: 600; min-width: 38px; }
.wrx-valuta-nome { color: #6b7280; }
.wrx-valuta-voce[aria-selected="true"] .wrx-valuta-nome { color: inherit; }

/* --- Nota al checkout --- */
.wrx-valuta-nota {
	display: block;
	margin-top: 6px;
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.75;
}

/* --- Mobile --- */
@media (max-width: 768px) {
	.wrx-valuta-radice {
		--wrx-dim: var(--wrx-mobile, var(--wrx-desktop, 15px));
	}

	/*
	 * Su uno schermo stretto il pannello, che ha una larghezza minima legata
	 * alla misura del pulsante, uscirebbe dal bordo: essendo dentro un elemento
	 * fisso non genera barra di scorrimento, quindi le valute a destra
	 * resterebbero semplicemente irraggiungibili. Qui il gruppo viene limitato
	 * alla larghezza dello schermo e il pannello e libero di stringersi.
	 */
	.wrx-valuta-radice {
		max-width: calc(100vw - var(--wrx-x, 20px) * 2);
	}

	.wrx-valuta-pannello {
		min-width: 0;
		flex: 1 1 auto;
	}

	/*
	 * Bersaglio minimo per il pollice: 44px. Vale anche se il negoziante
	 * sceglie una misura piccola, perche sotto questa soglia il pulsante
	 * si manca e basta.
	 */
	.wrx-valuta-pulsante {
		min-width: 44px;
		min-height: 44px;
	}

	.wrx-valuta-voce {
		min-height: 44px;
	}

	.wrx-valuta-radice.wrx-valuta-mobile-nascosto { display: none; }

	.wrx-valuta-radice.wrx-valuta-mobile-basso-centro {
		top: auto;
		right: auto;
		bottom: 16px;
		left: 50%;
		flex-direction: column;
		align-items: center;
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wrx-valuta-pulsante { transition: none; }
}