/* =========================================================
   Wesoły Czas — małe akcje: Zapisz i udostępnij
   Plik styluje TYLKO belkę social actions.
   Nie rusza układu single kolorowanki.
   ========================================================= */

.wcmw-single-social-actions {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.wcmw-single-social-actions__inner {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;

	width: auto;
	max-width: 100%;

	margin: 0;
	padding: 0;

	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}

.wcmw-single-social-actions__favorite {
	display: inline-flex;
	align-items: center;
}

/* =========================================================
   Przycisk z wtyczki Favorites
   ========================================================= */

.wcmw-single-social-actions .simplefavorite-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-height: 28px !important;
	padding: 5px 9px !important;

	border: 0 !important;
	border-radius: 999px !important;

	background: #fff3f6 !important;
	color: #d93664 !important;

	box-shadow: none !important;

	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-decoration: none !important;

	cursor: pointer !important;

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

.wcmw-single-social-actions .simplefavorite-button.active {
	background: #ff5f8f !important;
	color: #ffffff !important;
}

/* =========================================================
   Wspólne przyciski udostępniania
   ========================================================= */

.wcmw-single-social-actions__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;

	min-height: 28px;
	padding: 5px 9px;

	border: 0;
	border-radius: 999px;

	background: transparent;
	color: #2c2a3a;

	box-shadow: none;

	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;

	cursor: pointer;

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

.wcmw-single-social-actions__btn--copy {
	color: #237a3d;
}

.wcmw-single-social-actions__btn--copy.is-copied {
	background: #e5f8dc;
	color: #237a3d;
}

.wcmw-single-social-actions__btn--facebook {
	color: #1769e0;
}

.wcmw-single-social-actions__btn--x {
	color: #111111;
}

.wcmw-single-social-actions__btn--whatsapp {
	color: #128c4a;
}

.wcmw-single-social-actions__btn--disabled {
	opacity: 0.65;
	cursor: default;
}

/* =========================================================
   Hover / focus — social actions
   Hover działa tylko przy realnym najechaniu.
   Focus po kliknięciu nie może dostawać czarnego tła z globalnych stylów buttonów.
   ========================================================= */

.wcmw-single-social-actions__btn,
.wcmw-single-social-actions .simplefavorite-button {
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Focus po kliknięciu myszką — bez czarnego tła, bez udawania hovera */
.wcmw-single-social-actions__btn:focus:not(:focus-visible) {
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

.wcmw-single-social-actions__btn--copy:focus:not(:focus-visible) {
	color: #237a3d !important;
}

.wcmw-single-social-actions__btn--facebook:focus:not(:focus-visible) {
	color: #1769e0 !important;
}

.wcmw-single-social-actions__btn--x:focus:not(:focus-visible) {
	color: #111111 !important;
}

.wcmw-single-social-actions__btn--whatsapp:focus:not(:focus-visible) {
	color: #128c4a !important;
}

.wcmw-single-social-actions__btn--copy.is-copied:focus:not(:focus-visible) {
	background: #e5f8dc !important;
	color: #237a3d !important;
}

/* Favorites — focus po kliknięciu też nie udaje hovera */
.wcmw-single-social-actions .simplefavorite-button:focus:not(:focus-visible) {
	outline: none !important;
	background: #fff3f6 !important;
	color: #d93664 !important;
	box-shadow: none !important;
	transform: none !important;
}

.wcmw-single-social-actions .simplefavorite-button.active:focus:not(:focus-visible) {
	background: #ff5f8f !important;
	color: #ffffff !important;
}

/* Dostępność: focus z klawiatury nadal widoczny */
.wcmw-single-social-actions__btn:focus-visible,
.wcmw-single-social-actions .simplefavorite-button:focus-visible {
	outline: 2px solid rgba(255, 194, 213, 0.85) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Prawdziwy hover */
.wcmw-single-social-actions__btn:hover,
.wcmw-single-social-actions .simplefavorite-button:hover {
	transform: translateY(-2px) !important;

	background:
		linear-gradient(
			135deg,
			rgba(255, 242, 189, 0.98),
			rgba(223, 243, 220, 0.98),
			rgba(255, 224, 235, 0.98)
		) !important;

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

	color: var(--wcmw-text) !important;
	text-decoration: none !important;
}

.wcmw-single-social-actions__btn--disabled:hover {
	transform: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #2c2a3a !important;
}

.wcmw-single-social-actions__btn--disabled:focus,
.wcmw-single-social-actions__btn--disabled:focus-visible {
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Aktywnie polubiony element */
.wcmw-single-social-actions .simplefavorite-button.active:hover {
	background:
		linear-gradient(
			135deg,
			#ff5f8f,
			#ff8fb0
		) !important;

	color: #ffffff !important;
}

/* =========================================================
   Ikony i etykiety
   ========================================================= */

.wcmw-single-social-actions__icon,
.wcmw-single-social-actions__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: auto;
	width: auto;
	height: auto;
	padding: 0;

	background: transparent;
	border-radius: 0;

	font-size: 11px;
	font-weight: 900;
	line-height: 1;
}

/* =========================================================
   Mobile: pasek przewija się w poziomie, ale nadal jest mały
   ========================================================= */

@media (max-width: 768px) {
	.wcmw-single-social-actions {
		max-width: 100%;
		overflow: hidden;
	}

	.wcmw-single-social-actions__inner {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;

		gap: 6px;
		padding-bottom: 2px;

		scrollbar-width: thin;
	}

	.wcmw-single-social-actions__btn,
	.wcmw-single-social-actions .simplefavorite-button {
		flex: 0 0 auto !important;

		min-height: 28px !important;
		padding: 5px 8px !important;

		font-size: 11px !important;
	}

	.wcmw-single-social-actions__social-label {
		display: none;
	}
}

/* =========================================================
   Druk
   ========================================================= */

@media print {
	.wcmw-single-social-actions {
		display: none !important;
	}
}