/* ==========================================================================
   PetPoint favourites
   Plumley Creative — https://plum.ly
   Colours come from custom properties so they can be overridden per site,
   e.g. in Elementor's site-wide Custom CSS:
   :root { --ppas-heart-active: #e2574c; }
   ========================================================================== */

:root {
	--ppas-heart-active: #e2574c;
	--ppas-heart-idle:   var(--ppas-heart-active); /* outline colour when not saved */
	--ppas-heart-weight: 2.5;                      /* SVG stroke width */
	--ppas-badge-bg:     #e2574c;
	--ppas-badge-text:   #fff;
}

/* ------------------------------------------------------------ card heart -- */

/* No button chrome — just the heart. The drop shadow keeps a bold outline
   legible when the heart sits over a photo. Padding is kept so the tap target
   stays finger-sized even though nothing is drawn behind it. */
.ppas-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	line-height: 0;
	transition: transform 180ms ease;
	-webkit-tap-highlight-color: transparent;
}

.ppas-heart:hover {
	transform: scale(1.12);
}

.ppas-heart:focus-visible {
	outline: 2px solid var(--ppas-heart-active);
	outline-offset: 2px;
	border-radius: 6px;
}

.ppas-heart .ppas-heart-icon {
	fill: none;
	stroke: var(--ppas-heart-idle);
	stroke-width: var(--ppas-heart-weight);
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
	transition: fill 180ms ease, stroke 180ms ease;
}

/* Fill on hover as a preview of what clicking will do */
.ppas-heart:hover .ppas-heart-icon,
.ppas-heart.is-active .ppas-heart-icon {
	fill: var(--ppas-heart-active);
	stroke: var(--ppas-heart-active);
}

/* Pop on add */
.ppas-heart.just-added {
	animation: ppas-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ppas-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28); }
	100% { transform: scale(1); }
}

/* Position it over the card photo by adding the CSS class ppas-heart-corner
   to the Shortcode widget in your Loop Item. */
.ppas-heart-corner {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
}

/* ---------------------------------------------------------- header link -- */

.ppas-fav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	text-decoration: none;
	color: inherit;
}

.ppas-fav-link .ppas-heart-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ppas-heart-weight);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ppas-fav-link:not(.is-empty) .ppas-heart-icon {
	fill: var(--ppas-heart-active);
	stroke: var(--ppas-heart-active);
}

.ppas-fav-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--ppas-badge-bg);
	color: var(--ppas-badge-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
}

/* Hide the badge, not the icon, when nothing is saved */
.ppas-fav-link.is-empty .ppas-fav-count {
	display: none;
}

/* --------------------------------------------------------- empty state --- */

.ppas-fav-empty {
	margin: 2em 0;
	text-align: center;
	opacity: 0.75;
}

/* ------------------------------------------------------------ a11y ------- */

@media (prefers-reduced-motion: reduce) {
	.ppas-heart,
	.ppas-heart .ppas-heart-icon {
		transition: none;
	}
	.ppas-heart.just-added {
		animation: none;
	}
}