/* Tooltip container - Mobile-first */
.tooltip-container {
	position: relative;
	display: inline-block;

	/* Tooltip */
	.tooltip {
		visibility: hidden;
		position: absolute;
		bottom: calc(100% + 10px);
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--clr-surface-1);
		color: var(--clr-text-high);
		text-align: left;
		padding: var(--pd-200) var(--pd-400);
		border-radius: 0.375rem;
		border: 1px solid var(--clr-secondary);
		font-size: 0.875rem;
		white-space: nowrap;
		opacity: 0;
		transition: opacity 0.3s;
		z-index: 1000;

		/* Tooltip arrow */
		&::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: var(--clr-secondary) transparent transparent transparent;
		}

		/* Show tooltip programmatically */
		&.show {
			visibility: visible;
			opacity: 1;
		}
	}

	/* Hide tooltip by default - controlled via JS */
	&:hover .tooltip {
		visibility: inherit;
		opacity: inherit;
	}
}

/* Standalone tooltip (for backwards compatibility) */
.tooltip {
	visibility: hidden;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--clr-surface-1);
	color: var(--clr-text-high);
	text-align: left;
	padding: var(--pd-200) var(--pd-400);
	border-radius: 0.375rem;
	border: 1px solid var(--clr-secondary);
	font-size: 0.875rem;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 1000;

	&::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: var(--clr-secondary) transparent transparent transparent;
	}

	&.show {
		visibility: visible;
		opacity: 1;
	}
}