/*!
 * CzarCommerce — Tooltip (FASE 12.7 / componentes core).
 * -----------------------------------------------------------------------------
 * Estilo do tooltip vanilla renderizado por
 * `assets/src/front/modules/tooltips.js`. Substitui a lib `tooltips` jQuery.
 *
 * Convivência:
 *   - O JS appenda <span class="czar-tooltip" role="tooltip"> DENTRO do
 *     trigger. Para posicionamento absoluto funcionar, o trigger ganha
 *     position: relative via [data-czar-tooltip].
 *   - Specificity 0,0,1,0 — coexiste sem conflitar com regras legacy
 *     (`.wd-tooltip`, etc.). Não usamos !important.
 */

[data-czar-tooltip] {
	position: relative;
}

.czar-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--czar-color-text, #1a1a1a);
	color: #fff;
	font-size: var(--czar-font-size-sm, 0.875rem);
	line-height: 1.3;
	padding: var(--czar-space-2, 0.5rem) var(--czar-space-3, 0.75rem);
	border-radius: var(--czar-radius-sm, 4px);
	white-space: nowrap;
	max-width: 18rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity 120ms ease, transform 120ms ease;
	z-index: var(--czar-z-toast, 3000);
}

.czar-tooltip--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.czar-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--czar-color-text, #1a1a1a);
}

/* Multi-line: tooltips com texto longo que ultrapassa `max-width` */
.czar-tooltip:has(br),
.czar-tooltip[data-czar-tooltip-multiline] {
	white-space: normal;
	min-width: 12rem;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.czar-tooltip {
		transition: opacity 0s;
		transform: translateX(-50%) translateY(0);
	}
}