/* =========================================================
   Wesoły Czas — wspólny przycisk play/pauza na kartach piosenek

   Użycie:
   - strona główna,
   - katalog i taksonomie piosenek,
   - polecane piosenki na single,
   - Wesoła Strefa / zapisane piosenki.

   Zasada:
   - bez znaku play z Unicode,
   - bez emoji z WordPressa,
   - własne PNG play/pause z motywu,
   - audio startuje dopiero po kliknięciu.
========================================================= */

.piosenka-card-image,
.promo-piosenka-image,
.wcmw-mp-thumb {
	position: relative;
}

button.piosenka-image-play-button,
.piosenka-image-play-button {
	position: absolute !important;
	right: 10px !important;
	bottom: 10px !important;
	z-index: 8 !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;

	padding: 0 !important;
	margin: 0 !important;

	border: 1px solid rgba(255, 255, 255, 0.92) !important;
	border-radius: 999px !important;

	background: rgba(255, 255, 255, 0.96) !important;
	color: #2f2f3a !important;

	box-shadow: 0 8px 18px rgba(58, 45, 84, 0.16) !important;

	font: inherit !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;

	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease;
}

/* Starsze style home/archive/single/GeneratePress nie mogą robić niebieskiego/czarnego tła. */
button.piosenka-image-play-button:focus,
button.piosenka-image-play-button:active,
button.piosenka-image-play-button:focus:not(:focus-visible),
.piosenka-image-play-button:focus,
.piosenka-image-play-button:active,
.piosenka-image-play-button:focus:not(:focus-visible) {
	outline: none !important;
	background: rgba(255, 255, 255, 0.96) !important;
	color: #2f2f3a !important;
	box-shadow: 0 8px 18px rgba(58, 45, 84, 0.16) !important;
	transform: none !important;
}

button.piosenka-image-play-button:hover,
.piosenka-image-play-button:hover,
button.piosenka-image-play-button.is-playing,
.piosenka-image-play-button.is-playing {
	background:
		linear-gradient(
			135deg,
			rgba(255, 242, 189, 0.98) 0%,
			rgba(223, 243, 220, 0.98) 45%,
			rgba(255, 224, 235, 0.98) 100%
		) !important;

	border-color: rgba(255, 255, 255, 0.96) !important;
	color: #2f2f3a !important;

	transform: translateY(-2px) scale(1.04) !important;

	box-shadow:
		0 10px 22px rgba(58, 45, 84, 0.13),
		0 0 0 3px rgba(255, 255, 255, 0.48) !important;
}

button.piosenka-image-play-button.is-playing:focus,
button.piosenka-image-play-button.is-playing:active,
.piosenka-image-play-button.is-playing:focus,
.piosenka-image-play-button.is-playing:active {
	background:
		linear-gradient(
			135deg,
			rgba(255, 242, 189, 0.98) 0%,
			rgba(223, 243, 220, 0.98) 45%,
			rgba(255, 224, 235, 0.98) 100%
		) !important;
	box-shadow:
		0 10px 22px rgba(58, 45, 84, 0.13),
		0 0 0 3px rgba(255, 255, 255, 0.48) !important;
	transform: translateY(-2px) scale(1.04) !important;
}

button.piosenka-image-play-button:focus-visible,
.piosenka-image-play-button:focus-visible {
	outline: 2px solid rgba(255, 194, 213, 0.86) !important;
	outline-offset: 2px !important;
}

.piosenka-image-play-img {
	display: block !important;
	width: 17px !important;
	height: 17px !important;
	max-width: 17px !important;
	max-height: 17px !important;
	object-fit: contain !important;
	object-position: center !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	line-height: 1 !important;
	pointer-events: none !important;
}

.piosenka-image-play-img--play {
	transform: translateX(1px);
}

.piosenka-image-play-img--pause {
	width: 15px !important;
	height: 15px !important;
	max-width: 15px !important;
	max-height: 15px !important;
}

.piosenka-image-play-img[hidden] {
	display: none !important;
}

/* Wesoła Strefa — przycisk siedzi na miniaturze zapisanej piosenki. */
.wcmw-mp-card .piosenka-image-play-button {
	right: 8px !important;
	bottom: 8px !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
}

.wcmw-mp-card .piosenka-image-play-img {
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
}

@media (max-width: 620px) {
	button.piosenka-image-play-button,
	.piosenka-image-play-button {
		right: 8px !important;
		bottom: 8px !important;
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
	}

	.piosenka-image-play-img {
		width: 15px !important;
		height: 15px !important;
		max-width: 15px !important;
		max-height: 15px !important;
	}
}