.ppzr-reactions {
	font-family: "Manrope", sans-serif;
}

.ppzr-reactions .ppzr-reaction-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.ppzr-reactions .ppzr-reaction-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 15px;
	border: 1px solid #ded5c9;
	border-radius: 999px;
	background: #ffffff;
	color: #2f2924;
	font: inherit;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		border-color 300ms ease,
		background-color 300ms ease,
		color 300ms ease;
}

/* Hover pouze tam, kde je skutečně myš / přesný ukazatel. */
@media (hover: hover) and (pointer: fine) {
	.ppzr-reactions .ppzr-reaction-button:hover:not(:disabled) {
		border-color: #e3a17d;
		background: #fff9f5;
		color: #2f2924;
		box-shadow: none;
	}
}

/* Pointer focus ani stisk nesmí převzít cizí barvy šablony. */
.ppzr-reactions .ppzr-reaction-button:not(.is-selected):not(:disabled):focus:not(:focus-visible):not(:hover) {
	border-color: #ded5c9 !important;
	background-color: #ffffff !important;
	color: #2f2924 !important;
	box-shadow: none;
	outline: none;
}

.ppzr-reactions .ppzr-reaction-button:active:not(:disabled) {
	border-color: #ded5c9 !important;
	background-color: #ffffff !important;
	color: #2f2924 !important;
	box-shadow: none;
}

.ppzr-reactions .ppzr-reaction-button.is-selected:active:not(:disabled) {
	border-color: #e3a17d !important;
	background-color: #fff9f5 !important;
	color: #2f2924 !important;
}

/* Skutečně zvolená reakce zůstává odlišitelná, ale nepůsobí jako výstraha. */
.ppzr-reactions .ppzr-reaction-button.is-selected,
.ppzr-reactions .ppzr-reaction-button.is-selected:hover:not(:disabled),
.ppzr-reactions .ppzr-reaction-button.is-selected:focus:not(:focus-visible),
.ppzr-reactions .ppzr-reaction-button.is-selected:active:not(:disabled) {
	border-color: #e3a17d;
	background: #fff9f5;
	color: #2f2924;
	box-shadow: none;
}

/* Klávesnicový focus musí zůstat dobře viditelný. */
.ppzr-reactions .ppzr-reaction-button:focus-visible {
	border-color: #e3a17d;
	background: #fff9f5;
	color: #2f2924;
	box-shadow: none;
	outline: 3px solid #e3a17d;
	outline-offset: 2px;
}

.ppzr-reactions .ppzr-reaction-button.is-selected:focus-visible {
	border-color: #e3a17d;
	background: #fff9f5;
	color: #2f2924;
	box-shadow: none;
	outline: 3px solid #e3a17d;
	outline-offset: 2px;
}

.ppzr-reactions .ppzr-reaction-button:disabled {
	cursor: wait;
	opacity: 1;
	border-color: #ded5c9 !important;
	background-color: #ffffff !important;
	color: #2f2924 !important;
	box-shadow: none;
}

.ppzr-reactions .ppzr-reaction-button.is-selected:disabled {
	border-color: #e3a17d !important;
	background-color: #fff9f5 !important;
	color: #2f2924 !important;
}

.ppzr-reactions .ppzr-reaction-icon {
	font-size: 17px;
	line-height: 1;
}

.ppzr-reactions .ppzr-reaction-label {
	font-size: 15px;
	color: inherit;
}

/* Vybranou reakci zvýrazňuje pouze její text bez změny šířky tlačítka. */
.ppzr-reactions .ppzr-reaction-button.is-selected .ppzr-reaction-label {
	color: #8f4d2c !important;
}

.ppzr-reactions .ppzr-reaction-count {
	color: #83776c;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.ppzr-reactions .ppzr-reaction-status {
	min-height: 20px;
	margin: 10px 0 0;
	color: #6f645a;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

@media (max-width: 767px) {
	.ppzr-reactions .ppzr-reaction-list {
		gap: 10px;
	}

	.ppzr-reactions .ppzr-reaction-button {
		width: 100%;
		justify-content: flex-start;
		padding-inline: 14px;
	}

	.ppzr-reactions .ppzr-reaction-count {
		margin-left: auto;
	}
}