/*
 * FeelEvent – element koszyka w nagłówku („TWOJE ZAPYTANIE” + licznik).
 * Ładowany na wszystkich stronach frontu przez mu-plugins/feelevent-checkout-style.php.
 * Tylko CSS – HTML z global-templates/navbar-collapse-bootstrap5.php bez zmian:
 *   a.cart-contents > span.cart-contents-count > p.d-none.d-xl-inline-block („Twoje Zapytanie”) + liczba (węzeł tekstowy)
 * Ikona wózka to istniejący ::before (font WooCommerce).
 */

#nav2 .cart-contents {
	--fe-hc-accent: var(--fe-accent, #7a5ab0);
	--fe-hc-accent-strong: #9466d1;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	min-width: 44px;
	padding: 6px 8px 6px 12px;
	border: 1px solid rgba(155, 112, 214, 0.65);
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(var(--fe-accent-rgb, 122, 90, 176),  0.32), rgba(var(--fe-accent-rgb, 122, 90, 176),  0.12));
	box-shadow: 0 0 0 0 rgba(var(--fe-accent-rgb, 122, 90, 176),  0), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Sam wózek (gdy koszyk pusty – brak licznika): okrągły przycisk */
#nav2 .cart-contents:not(:has(.cart-contents-count)) {
	padding: 6px;
	width: 44px;
}

#nav2 .cart-contents::before {
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: #fff;
}

#nav2 .cart-contents:hover {
	border-color: var(--fe-hc-accent-strong);
	background: linear-gradient(135deg, rgba(var(--fe-accent-rgb, 122, 90, 176),  0.55), rgba(var(--fe-accent-rgb, 122, 90, 176),  0.3));
	box-shadow: 0 6px 22px rgba(var(--fe-accent-rgb, 122, 90, 176),  0.45);
	transform: translateY(-1px);
}

#nav2 .cart-contents:focus-visible {
	outline: 3px solid #c3a8f0;
	outline-offset: 3px;
}

/* Licznik – okrągły „bąbelek” (poniżej xl etykieta jest ukryta, więc cały span = bąbelek) */
#nav2 .cart-contents .cart-contents-count {
	display: inline-grid;
	grid-template-columns: minmax(24px, auto);
	align-items: center;
	justify-items: center;
	box-sizing: border-box;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--fe-hc-accent);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	animation: fe-hc-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#nav2 .cart-contents .cart-contents-count > p {
	margin: 0;
}

/* xl: „TWOJE ZAPYTANIE” + bąbelek z liczbą po prawej */
@media (min-width: 1200px) {
	#nav2 .cart-contents {
		gap: 6px;
		padding: 6px 6px 6px 12px;
	}

	#nav2 .cart-contents .cart-contents-count {
		grid-template-columns: auto minmax(26px, auto);
		height: 26px;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		/* bąbelek rysowany pod kolumną z liczbą (liczba jest węzłem tekstowym – nie da się jej wybrać selektorem) */
		background: radial-gradient(circle 13px at calc(100% - 13px) 50%, var(--fe-hc-accent) 12px, rgba(var(--fe-accent-rgb, 122, 90, 176),  0) 12.75px) no-repeat;
		font-size: 0.75rem;
	}

	#nav2 .cart-contents .cart-contents-count > p {
		grid-column: 1;
		padding-right: 2px;
		font-size: 0.75rem;
		font-weight: 800;
		letter-spacing: 0.02em;
		white-space: nowrap;
		color: #fff;
	}
}

/* Nagłówek mobilny/tablet: pigułka wyrównana do siatki (jak „FEEL EVENT”), nie przy krawędzi ekranu */
@media (max-width: 991.98px) {
	#nav2 .cart-contents {
		margin: 6px calc(var(--bs-gutter-x, 1.5rem) * 0.5) 10px;
	}
}

/* Telefon: pigułka zaraz pod logo, przed (rozwijaną) listą menu – nie ląduje pod menu po jego otwarciu */
@media (max-width: 575.98px) {
	#nav2 .cart-contents {
		order: -1;
	}
}

@keyframes fe-hc-pop {
	0% {
		opacity: 0;
		transform: scale(0.4);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	#nav2 .cart-contents,
	#nav2 .cart-contents .cart-contents-count {
		animation: none;
		transition: none;
	}

	#nav2 .cart-contents:hover {
		transform: none;
	}
}