/* ==========================================================================
   Plakietka „Wspomagane przez AI” (ai-grafiki.php)
   Dyskretna etykieta w prawym dolnym rogu obrazka, w kolorach sklepu.
   ========================================================================== */

/*
 * Opakowanie trzyma plakietkę przy obrazku. inline-block i vertical-align
 * sprawiają, że w galeriach, kartach produktów i siatkach Elementora
 * zachowuje się tak samo jak sam obrazek.
 */
.icoone-ai {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.icoone-ai > img,
.icoone-ai > figure {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Element z grafiką w tle – plakietkę dokłada skrypt (ai-grafiki.js) */
.icoone-ai-bg {
	position: relative;
}

/*
 * Odstęp od krawędzi ustawia skrypt: przy zaokrąglonym rogu plakietka
 * musi zejść głębiej do środka, żeby nie wystawała poza łuk. Wartość
 * zapasowa dotyczy grafik z prostymi rogami.
 */
.icoone-ai__badge {
	position: absolute;
	right: var(--icoone-ai-inset, 8px);
	bottom: var(--icoone-ai-inset, 8px);
	z-index: 2;
	max-width: calc(100% - 2 * var(--icoone-ai-inset, 8px));
	padding: 4px 10px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(231, 225, 218, .9);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .01em;
	color: #565A60;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* informacja, nie przycisk – nie przechwytuje kliknięć w obrazek */
	pointer-events: none;
	opacity: .85;
}

/* Na telefonie jeszcze mniej rzucająca się w oczy */
@media (max-width: 767px) {

	.icoone-ai__badge {
		padding: 3px 8px;
		font-size: 10px;
	}
}

/* Druk: plakietka to element strony, nie zaśmiecamy nią wydruku */
@media print {

	.icoone-ai__badge {
		display: none;
	}
}