/* Roller List (production) – Mauro/Amaranto style */
/* Dipende dai tuoi token globali; ha fallback neutri dove serve. */
.roller {
	--item-h: 44px;
	position: relative;
	max-width: 360px;
}
	.roller.is-upgraded select {
		display: none;
	}
/* fallback: select visibile senza JS */

/* Viewport (usa spacer interni, niente padding-top/bottom) */
.roller-viewport {
	height: calc(var(--item-h) * 5); /* 5 righe di default */
	overflow-y: auto;
	overflow-x: clip;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: y mandatory;
	border-radius: 0px;
	background: var(--surface-1, #fff);
	box-shadow: var(--shadow-card, 0 12px 32px rgba(0,0,0,.08));
}

/* Lista/righe */
.roller-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
}

.roller-item {
	height: var(--item-h);
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	color: var(--text-600, #555);
	transition: transform .15s ease, color .15s ease, font-weight .15s ease;
}

	.roller-item[aria-selected="true"] {
		color: var(--brand-700, #6C0D00);
		font-weight: 700;
		transform: scale(1.06);
	}

/* Spacer top/bottom – altezza impostata via JS per centrare prima/ultima voce */
.roller-spacer {
	height: 0;
	scroll-snap-align: none;
}

/* Marker centrale di selezione */
.roller-marker {
	pointer-events: none;
	position: absolute;
	inset: 50% 8px auto 8px;
	height: var(--item-h);
	transform: translateY(-50%);
	border-radius: var(--radius-lg, 20px);
	box-shadow: inset 0 0 0 2px rgba(154,18,0,.12), 0 6px 18px rgba(0,0,0,.06);
	background: linear-gradient(180deg, rgba(154,18,0,.06), rgba(154,18,0,.02));
}

/* Scrollbar (WebKit) */
.roller-viewport::-webkit-scrollbar {
	width: 6px;
}

.roller-viewport::-webkit-scrollbar-thumb {
	background: rgba(154,18,0,.25);
	border-radius: 8px;
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
	.roller-item {
		transition: none;
	}
}

/* Roller sopra a tutto */
.modal.roller-modal {
	z-index: 1070 !important; /* > 1055 (modal BS) */
}

/* Backdrop della roller, subito sotto la roller */
.modal-backdrop.roller-backdrop {
	z-index: 1065 !important; /* tra 1050 (backdrop BS) e 1070 (roller) */
}

.cylinder {
	/*width: 300px;*/ /* puoi cambiare la dimensione */
	/*height: 600px;*/ /* più alto = effetto più pronunciato */
	/*margin: 50px auto;*/ /* centrata orizzontalmente, per esempio */
	/* Gradiente verticale: scuro → chiaro → scuro */
	background: linear-gradient(to bottom, #444444 0%,
	/* grigio scuro in cima */
	#444444 4%, /* transizione fino a qui */
	#ffffff 50%, /* al centro completamente bianco */
	#444444 96%, /* poi torna grigio scuro */
	#444444 100% /* fondo scuro */
	);
	/* Per arrotondare i bordi e dare l’idea di forma cilindrica */
	border-radius: 12px;
	/ 12px; /* puoi regolare i valori */
	/* Se vuoi un bordo per accentuare i lati */
	border: 2px solid #333;
	/* Ombra interna per aumentare profondità (opzionale) */
	box-shadow: inset 0 20px 60px rgba(0, 0, 0, 0.5);
	user-select: none;
}