/* ── FeatureTooltip Widget ── */

.FeatureTooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

/* L'area focusabile copre tutta l'etichetta */
.FeatureTooltip__Trigger {
	position: absolute;
	inset: 0;
	cursor: help;
	border-radius: 2px;
	-webkit-tap-highlight-color: transparent;
}

.FeatureTooltip__Trigger:focus {
	outline: none;
}

.FeatureTooltip__Trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Desktop: tooltip a destra dell'etichetta */
.FeatureTooltip__Text {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	margin-left: 10px;
	background: #282828;
	color: #fff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
	text-decoration: none;
	white-space: normal;
	width: max-content;
	max-width: 240px;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, visibility 0s linear .15s;
	z-index: 20;
	pointer-events: none;
}

@media (hover: hover) {
	.FeatureTooltip:hover {
		text-decoration-color: currentColor;
	}

	.FeatureTooltip:hover .FeatureTooltip__Text {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
}

.FeatureTooltip__Trigger:focus .FeatureTooltip__Text {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Mobile: la colonna è stretta, il tooltip va sotto l'etichetta */
@media (max-width: 767px) {
	.FeatureTooltip__Text {
		top: calc(100% + 8px);
		left: 0;
		transform: none;
		margin-left: 0;
		max-width: min(240px, 80vw);
	}
}