/* Shared tooltip styles for the energy comparison pages.
   Extracted from energy.css — that file carries legacy page layout styles
   that clash with the QuotesV3 Tailwind redesign, so the redesigned pages
   load just this slice. Keep in sync with the copy in energy.css (used by
   any legacy page still loading the full stylesheet). */

.approx-rate[data-tooltip],
[data-tooltip] {
	position: relative;
	cursor: help;
}

.sq-tooltip {
	position: absolute;
	z-index: 1000;
	font-weight: normal;
	padding: 6px 10px;
	background: #2b3864;
	color: #fff;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.4;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease;
	max-width: 280px;
}

.sq-tooltip::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
}

.sq-tooltip--top::after {
	top: 100%;
	border-top-color: #2b3864;
}

.sq-tooltip--bottom::after {
	bottom: 100%;
	border-bottom-color: #2b3864;
}

.sq-tooltip--visible {
	opacity: 1;
	transform: translateY(0);
}