/*!
 * SIA Discount Info — frontend icon + tooltip
 * Visual style inspired by eMAG.ro's product-page info icon.
 */

/* The icon is wrapped together with <del> in <span class="sia-dpi-anchor">.
   Make the anchor a tight inline-flex container so <del> and the icon
   sit on the same baseline with a small gap, in every layout. */
.sia-dpi-anchor {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: baseline !important;
	gap: 6px;
	flex-wrap: nowrap;
	text-decoration: none;
}

/* Lock the order inside the anchor — without this, themes that set an
   `order` on <del>/<ins> directly (Blocksy does) would push the price
   past our icon. */
.sia-dpi-anchor > del,
.sia-dpi-anchor > ins {
	order: 1 !important;
}
.sia-dpi-anchor > .sia-dpi-icon {
	order: 2 !important;
}

.sia-dpi-icon {
	--sia-dpi-color: #6b7280;
	--sia-dpi-color-hover: #7c3aed;
	--sia-dpi-tooltip-bg: #ffffff;
	--sia-dpi-tooltip-text: #1f2937;
	--sia-dpi-tooltip-muted: #6b7280;
	--sia-dpi-tooltip-border: #e5e7eb;
	--sia-dpi-tooltip-shadow: 0 6px 24px rgba(15, 10, 30, 0.12), 0 1px 3px rgba(15, 10, 30, 0.08);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin: 0;
	vertical-align: middle;
	position: relative;
	top: -3px;
	cursor: help;
	color: var(--sia-dpi-color);
	transition: color 0.15s ease;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.sia-dpi-icon:hover,
.sia-dpi-icon:focus-visible,
.sia-dpi-icon.is-open {
	color: var(--sia-dpi-color-hover);
	outline: none;
}

.sia-dpi-icon__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	color: inherit;
	background: transparent;
}

/* Tooltip */
.sia-dpi-tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	min-width: 280px;
	max-width: 380px;
	background: var(--sia-dpi-tooltip-bg);
	border: 1px solid var(--sia-dpi-tooltip-border);
	border-radius: 8px;
	box-shadow: var(--sia-dpi-tooltip-shadow);
	padding: 12px 14px;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	text-align: left;
	cursor: default;
	white-space: normal;
}

.sia-dpi-icon:hover .sia-dpi-tooltip,
.sia-dpi-icon:focus-visible .sia-dpi-tooltip,
.sia-dpi-icon.is-open .sia-dpi-tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

.sia-dpi-tooltip__arrow {
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: var(--sia-dpi-tooltip-bg);
	border-right: 1px solid var(--sia-dpi-tooltip-border);
	border-bottom: 1px solid var(--sia-dpi-tooltip-border);
}

.sia-dpi-tooltip__body {
	display: block;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--sia-dpi-tooltip-text);
	font-weight: 400;
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sia-dpi-tooltip__body strong {
	font-weight: 600;
	color: var(--sia-dpi-tooltip-text);
}

.sia-dpi-tooltip__body a {
	color: var(--sia-dpi-color-hover);
	text-decoration: underline;
}

/* Edge-of-screen flip — when tooltip would overflow left/right */
.sia-dpi-icon.is-flip-left .sia-dpi-tooltip {
	left: auto;
	right: -8px;
	transform: translateY(4px);
}
.sia-dpi-icon.is-flip-left:hover .sia-dpi-tooltip,
.sia-dpi-icon.is-flip-left:focus-visible .sia-dpi-tooltip,
.sia-dpi-icon.is-flip-left.is-open .sia-dpi-tooltip {
	transform: translateY(0);
}
.sia-dpi-icon.is-flip-left .sia-dpi-tooltip__arrow {
	left: auto;
	right: 12px;
	transform: rotate(45deg);
}
.sia-dpi-icon.is-flip-right .sia-dpi-tooltip {
	left: -8px;
	transform: translateY(4px);
}
.sia-dpi-icon.is-flip-right:hover .sia-dpi-tooltip,
.sia-dpi-icon.is-flip-right:focus-visible .sia-dpi-tooltip,
.sia-dpi-icon.is-flip-right.is-open .sia-dpi-tooltip {
	transform: translateY(0);
}
.sia-dpi-icon.is-flip-right .sia-dpi-tooltip__arrow {
	left: 12px;
	transform: rotate(45deg);
}

/* Below-icon mode (when not enough space above) */
.sia-dpi-icon.is-flip-down .sia-dpi-tooltip {
	bottom: auto;
	top: calc(100% + 10px);
}
.sia-dpi-icon.is-flip-down .sia-dpi-tooltip__arrow {
	bottom: auto;
	top: -6px;
	border-right: none;
	border-bottom: none;
	border-left: 1px solid var(--sia-dpi-tooltip-border);
	border-top: 1px solid var(--sia-dpi-tooltip-border);
}

/* Compact tooltip on small screens */
@media (max-width: 480px) {
	.sia-dpi-tooltip {
		min-width: 220px;
		max-width: calc(100vw - 32px);
		font-size: 12px;
	}
}

/* The icon now lives inside <del>, so the parent's line-through must NOT
   be drawn across the circle, "i" letter, or tooltip text. */
del .sia-dpi-icon,
ins .sia-dpi-icon,
.sia-dpi-icon {
	text-decoration: none !important;
}
.sia-dpi-icon *,
.sia-dpi-icon::before,
.sia-dpi-icon::after {
	text-decoration: none !important;
}