/* DinEden Feature Tooltips */

.sg-product-list-chenar .elementor-icon-list-item {
	position: relative;
	cursor: pointer;
}

/* Tooltip element */
.sg-product-list-chenar .dineden-tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #F2F2F2;
	color: #595959;
	border: 1px solid #DADADA;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	width: 260px;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	z-index: 9999;
	pointer-events: none;
	box-shadow: none;
	font-weight: 500;
}

/* Tooltip title */
.sg-product-list-chenar .dineden-tooltip strong {
	display: block;
	font-size: 14px;
	margin-bottom: 4px;
	font-weight: 600;
	color: #2C682C;
}

/* Arrow */
.sg-product-list-chenar .dineden-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #F2F2F2;
}

/* Show on hover / tap */
.sg-product-list-chenar .elementor-icon-list-item:hover .dineden-tooltip,
.sg-product-list-chenar .elementor-icon-list-item.dineden-tooltip-active .dineden-tooltip {
	opacity: 1;
	visibility: visible;
}

/* Override the :has(:empty) hide rule for icon-only items with tooltips */
.sg-product-list-chenar .elementor-icon-list-item.dineden-tooltip-icon-only {
	display: inline-flex !important;
}

/* Mobile */
@media (max-width: 768px) {
	.sg-product-list-chenar .elementor-icon-list-items {
		position: relative;
	}

	.sg-product-list-chenar .dineden-tooltip {
		position: fixed;
		bottom: auto;
		top: 50%;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: calc(100vw - 48px);
		max-width: 300px;
		font-size: 13px;
		padding: 16px 20px;
	}

	/* Hide arrow on mobile since tooltip is centered on screen */
	.sg-product-list-chenar .dineden-tooltip::after {
		display: none;
	}

	/* Overlay backdrop on mobile for better readability */
	.sg-product-list-chenar .elementor-icon-list-item.dineden-tooltip-active::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9998;
	}
}