/* Post Thumbs Rating — stili widget */

.ptr-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ptr-label {
	line-height: 1.2;
}

.ptr-like {
	--ptr-size: 24px;
	--ptr-gap: 8px;
	--ptr-icon: #6b7280;
	--ptr-icon-hover: #111827;
	--ptr-icon-active: #2563eb;
	--ptr-bg: #f3f4f6;
	--ptr-bg-hover: #e5e7eb;
	--ptr-bg-active: #dbeafe;
	--ptr-burst: #f59e0b;
	--ptr-count: inherit;
	--ptr-count-active: var(--ptr-icon-active);

	display: inline-flex;
	align-items: center;
	gap: var(--ptr-gap);
	padding: 8px 14px 8px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--ptr-bg);
	color: var(--ptr-count);
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.ptr-like:hover { background: var(--ptr-bg-hover); }
.ptr-like:active { transform: scale(.96); }
.ptr-like:focus-visible { outline: 2px solid var(--ptr-icon-active); outline-offset: 2px; }

.ptr-like.is-liked {
	background: var(--ptr-bg-active);
	color: var(--ptr-count-active);
}

/* Icona */
.ptr-icon {
	position: relative;
	display: inline-block;
	width: var(--ptr-size);
	height: var(--ptr-size);
	flex: 0 0 auto;
}

.ptr-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform-origin: 20% 80%;
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.ptr-thumb {
	fill: var(--ptr-icon);
	transition: fill .2s ease;
}

.ptr-like:hover .ptr-thumb { fill: var(--ptr-icon-hover); }
.ptr-like:hover .ptr-icon svg { transform: rotate(-12deg) translateY(-1px); }

.ptr-like.is-liked .ptr-thumb { fill: var(--ptr-icon-active); }
.ptr-like.is-liked:hover .ptr-icon svg { transform: none; }

/* Esplosione (particelle) */
.ptr-burst {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
}
.ptr-burst::before,
.ptr-burst::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	opacity: 0;
}
/* 6 particelle grandi */
.ptr-burst::before {
	background:
		radial-gradient(circle, var(--ptr-burst) 22%, transparent 24%) 50% 0 / 20% 20% no-repeat,
		radial-gradient(circle, var(--ptr-burst) 22%, transparent 24%) 100% 25% / 20% 20% no-repeat,
		radial-gradient(circle, var(--ptr-burst) 22%, transparent 24%) 100% 75% / 20% 20% no-repeat,
		radial-gradient(circle, var(--ptr-burst) 22%, transparent 24%) 50% 100% / 20% 20% no-repeat,
		radial-gradient(circle, var(--ptr-burst) 22%, transparent 24%) 0 75% / 20% 20% no-repeat,
		radial-gradient(circle, var(--ptr-burst) 22%, transparent 24%) 0 25% / 20% 20% no-repeat;
}
/* 6 particelle piccole, sfasate */
.ptr-burst::after {
	background:
		radial-gradient(circle, var(--ptr-icon-active) 22%, transparent 24%) 80% 8% / 12% 12% no-repeat,
		radial-gradient(circle, var(--ptr-icon-active) 22%, transparent 24%) 100% 50% / 12% 12% no-repeat,
		radial-gradient(circle, var(--ptr-icon-active) 22%, transparent 24%) 80% 92% / 12% 12% no-repeat,
		radial-gradient(circle, var(--ptr-icon-active) 22%, transparent 24%) 20% 92% / 12% 12% no-repeat,
		radial-gradient(circle, var(--ptr-icon-active) 22%, transparent 24%) 0 50% / 12% 12% no-repeat,
		radial-gradient(circle, var(--ptr-icon-active) 22%, transparent 24%) 20% 8% / 12% 12% no-repeat;
}

/* ---- Animazioni al click ---- */

.ptr-like.is-animating.ptr-anim-pop .ptr-icon svg {
	animation: ptr-pop .6s cubic-bezier(.34, 1.56, .64, 1);
}
.ptr-like.is-animating.ptr-anim-jump .ptr-icon svg {
	animation: ptr-jump .55s cubic-bezier(.34, 1.56, .64, 1);
}
.ptr-like.is-animating.ptr-anim-shake .ptr-icon svg {
	animation: ptr-shake .5s ease;
}

/* Le particelle partono solo quando si mette "mi piace" (non quando si toglie) */
.ptr-like.is-animating.is-liked:not(.ptr-anim-none) .ptr-burst { opacity: 1; }
.ptr-like.is-animating.is-liked:not(.ptr-anim-none) .ptr-burst::before {
	animation: ptr-burst .7s ease-out forwards;
}
.ptr-like.is-animating.is-liked:not(.ptr-anim-none) .ptr-burst::after {
	animation: ptr-burst .7s .08s ease-out forwards;
}

@keyframes ptr-pop {
	0%   { transform: scale(1) rotate(0); }
	25%  { transform: scale(.8) rotate(-18deg); }
	55%  { transform: scale(1.45) rotate(8deg); }
	80%  { transform: scale(.95) rotate(-3deg); }
	100% { transform: scale(1) rotate(0); }
}
@keyframes ptr-jump {
	0%   { transform: translateY(0) rotate(0); }
	30%  { transform: translateY(-40%) rotate(-15deg) scale(1.15); }
	60%  { transform: translateY(8%) rotate(5deg) scale(.95); }
	100% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes ptr-shake {
	0%, 100% { transform: rotate(0); }
	20%  { transform: rotate(-20deg) scale(1.15); }
	40%  { transform: rotate(16deg) scale(1.15); }
	60%  { transform: rotate(-10deg); }
	80%  { transform: rotate(6deg); }
}
@keyframes ptr-burst {
	0%   { transform: scale(.4); opacity: 1; }
	60%  { opacity: 1; }
	100% { transform: scale(2.4); opacity: 0; }
}

/* Contatore che "scorre" quando cambia numero */
.ptr-count {
	display: inline-flex;
	align-items: baseline;
	overflow: hidden;
	font-variant-numeric: tabular-nums;
}
.ptr-num {
	display: inline-block;
	min-width: 1ch;
	text-align: center;
}
.ptr-suffix { margin-left: .35em; font-weight: 400; }
.ptr-num.ptr-roll-up  { animation: ptr-roll-up .35s cubic-bezier(.2, .8, .2, 1); }
.ptr-num.ptr-roll-down { animation: ptr-roll-down .35s cubic-bezier(.2, .8, .2, 1); }

@keyframes ptr-roll-up {
	0%   { transform: translateY(100%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes ptr-roll-down {
	0%   { transform: translateY(-100%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

.ptr-like.is-busy { pointer-events: none; }

/* Sola lettura (Loop) */
.ptr-like.ptr-readonly { cursor: default; }
.ptr-like.ptr-readonly:hover { background: var(--ptr-bg); }
.ptr-like.ptr-readonly.is-liked:hover { background: var(--ptr-bg-active); }
.ptr-like.ptr-readonly:hover .ptr-thumb { fill: var(--ptr-icon); }
.ptr-like.ptr-readonly.is-liked:hover .ptr-thumb { fill: var(--ptr-icon-active); }
.ptr-like.ptr-readonly:hover .ptr-icon svg { transform: none; }
.ptr-like.ptr-readonly:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ptr-like *, .ptr-like { animation: none !important; transition: none !important; }
	.ptr-burst { display: none; }
}