.lseo-tooltip {
  cursor: help;
  position: relative;
}
.lseo-tooltip[title]:hover::after,
.lseo-tooltip[title]:focus::after {
  content: attr(title);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #1c77d3;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: normal;
  width: 300px;
  text-align: center;
  font-size: 14px !important;
  font-weight: bold !important;
  z-index: 9999;
}

/* LSEO custom tooltip (flat, above, fade-in + slight rise) */
.lseo-tooltip[data-lseo-tip] {
	position: relative;
	cursor: help;
}
.lseo-tooltip[data-lseo-tip]::after {
	content: attr(data-lseo-tip);
	position: absolute;
	bottom: 125%; /* show above the icon */
	left: 50%;
	transform: translate(-50%, 10px);
	opacity: 0;
	background: var(--lseo-tooltip-bg, #222);
	color: var(--lseo-tooltip-color, #fff);
	text-align: center;
	font-size: 14px !important;
	padding: 6px 8px;
	border-radius: 4px;
	white-space: normal;
	width: 400px;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 9999;
}
.lseo-tooltip[data-lseo-tip]:hover::after,
.lseo-tooltip[data-lseo-tip]:focus::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* === Force consistent tooltip icon color === */
.lseo-tooltip {
	color: #222 !important; /* your chosen color for the "?" */
	fill: #222 !important;  /* ensures SVG icons match */
}

/* Optional hover/focus variant */
.lseo-tooltip:hover,
.lseo-tooltip:focus {
	color: #222 !important;
	fill: #222 !important;
}

/* If your tooltips use SVGs, make sure the paths inherit correctly */
.lseo-tooltip svg path,
.lseo-tooltip svg circle {
	fill: currentColor !important; /* this ties SVG color to the .lseo-tooltip color above */
}