/**
 * Verowa Plugin Styles
 *
 * This file handles the layout in the frontend and backend.
 *
 * @package Verowa
 */
:root {
	--space-big: 1.5em;
	--space-normal: 0.75em;
	--space-small: 0.375em;
}

/*--------------------------------------------------------------
# Tooltip Styles
--------------------------------------------------------------*/

.tooltip-wrapper {
	position: relative;
	display: inline-block;
	margin-left: 0.25em;
}

.tooltip-wrapper:hover .custom-tooltip {
	opacity: 1;
	visibility: visible;
}

.custom-tooltip {
	position: absolute;
	max-width: 90vw; /* prevent overflow on small screens */
	width: 300px;
	background-color: #eee;
	border: solid 1px #ddd;
	color: #000;
	padding: var(--space-normal);
	border-radius: 4px;
	font-size: 0.85em;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 999;
}

@media (max-width: 400px) {
	.custom-tooltip {
		font-size: 0.75em;
		padding: 0.75em;
	}
}

.tooltip-info {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 1;
	text-align: center;
	transition: color 0.1s ease-in;
	color: #000;
	display: flex;
	align-items: center;
}

	.tooltip-info:hover {
		color: #7d7676;
	}