/**
 * Frontend CSS for tooltip functionality.
 *
 * Styles for information icon and tooltip on frontend forms.
 *
 * @package Valko_WPForms_Item_Information
 */

/* Information icon */
.valko-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	width: 18px;
	height: 18px;
	cursor: pointer;
	color: #646970;
	transition: color 0.2s ease-in-out;
	vertical-align: middle;
	outline: none;
	border-radius: 50%;
}

.valko-info-icon:hover,
.valko-info-icon:focus {
	color: #2271b1;
}

.valko-info-icon:focus {
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.3);
}

.valko-info-icon .dashicons {
	width: 18px;
	height: 18px;
	font-size: 13px;
	line-height: 1;
}

/* Tooltip container */
.valko-info-tooltip {
	position: absolute;
	z-index: 10000;
	max-width: 300px;
	padding: 12px 16px;
	background-color: #1d2327;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
	pointer-events: none;
	word-wrap: break-word;
}

/* Visible state */
.valko-info-tooltip.valko-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Tooltip arrow */
.valko-info-tooltip::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

/* Arrow for tooltip above icon */
.valko-info-tooltip.valko-position-top::before {
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px 6px 0 6px;
	border-color: #1d2327 transparent transparent transparent;
}

/* Arrow for tooltip below icon */
.valko-info-tooltip.valko-position-bottom::before {
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #1d2327 transparent;
}
ґ
/* Tooltip on touch devices */
@media (hover: none) {
	.valko-info-tooltip {
		pointer-events: auto;
	}
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.valko-info-tooltip {
		max-width: calc(100vw - 40px);
		font-size: 13px;
		padding: 10px 14px;
	}
}

/* Integration with WPForms styles */
.wpforms-container .wpforms-field-payment-checkbox label,
.wpforms-container .wpforms-field-payment-multiple label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
}

/* Ensure icon doesn't break layout */
.wpforms-container .wpforms-field-payment-checkbox .valko-info-icon,
.wpforms-container .wpforms-field-payment-multiple .valko-info-icon {
	flex-shrink: 0;
}

/* Modern WPForms themes compatibility */
.wpforms-container.wpforms-modern .valko-info-icon {
	color: var(--wpforms-field-text-color, #646970);
}

.wpforms-container.wpforms-modern .valko-info-icon:hover,
.wpforms-container.wpforms-modern .valko-info-icon:focus {
	color: var(--wpforms-button-background-color, #2271b1);
}

/* Light tooltip theme (alternative) */
.valko-info-tooltip.valko-theme-light {
	background-color: #fff;
	color: #1d2327;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.valko-info-tooltip.valko-theme-light.valko-position-top::before {
	border-top-color: #fff;
}

.valko-info-tooltip.valko-theme-light.valko-position-bottom::before {
	border-bottom-color: #fff;
}

/* Match WPForms styling */
.wpforms-container-full .valko-info-tooltip {
	font-family: inherit;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
	.valko-info-tooltip {
		transition: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.valko-info-tooltip {
		border: 2px solid currentColor;
	}

	.valko-info-icon:focus {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
}

/* Print styles */
@media print {
	.valko-info-icon {
		display: none;
	}

	.valko-info-tooltip {
		display: none;
	}
}