/* =============================================================================
   ElementorPlus — Wishlist Core
   Botão de coração reutilizável (favoritar) para colocar sobre a imagem de um
   produto em qualquer widget. Mesmo visual do coração do widget Wishlist.
   ============================================================================= */

.epbc-wl-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 0;
	background: rgba(8, 10, 15, 0.72); /* opaco: dispensa blur no mobile */
	border: none;
	border-radius: 50%;
	color: #ffffff; /* neutro quando NÃO favoritado */
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	box-shadow: none;
	line-height: 0;
	transition: background-color 0.18s ease, transform 0.15s ease, color 0.18s ease, opacity 0.18s ease;
}
/* blur do coração só em desktop (aparece em todo card do grid; caro no mobile). */
@media (min-width: 1025px) and (hover: hover) {
	.epbc-wl-heart {
		background: rgba(8, 10, 15, 0.55);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
	}
}

.epbc-wl-heart.is-fav { color: #ff4d6d; } /* favoritado: vermelho */

/* "Batida" ao favoritar: o coração dá um pulso rápido (feedback tátil visual).
   Aplicada via classe .epbc-wl-heart--pop adicionada pelo JS por ~300ms. */
.epbc-wl-heart--pop { animation: epbc-heart-pop 0.32s ease; }
@keyframes epbc-heart-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	60%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.epbc-wl-heart--pop { animation: none; }
}

.epbc-wl-heart:focus { outline: none; }
.epbc-wl-heart:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }

.epbc-wl-heart svg {
	width: 15px;
	height: 15px;
	display: block;
	pointer-events: none;
}

.epbc-wl-heart:hover {
	transform: scale(1.08);
	background: rgba(8, 10, 15, 0.85);
}

/* Alterna o ícone: contorno quando não favoritado, preenchido quando favorito */
.epbc-wl-heart .epwl-heart-outline { display: block; }
.epbc-wl-heart .epwl-heart-fill    { display: none; }
.epbc-wl-heart.is-fav .epwl-heart-outline { display: none; }
.epbc-wl-heart.is-fav .epwl-heart-fill    { display: block; }

/* Enquanto a requisição AJAX está em andamento */
.epbc-wl-heart.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* --- Posição flutuante quando colocado sobre a imagem de um produto --- */
/* O widget hospedeiro deve marcar o container da imagem como posição relativa;
   esta classe posiciona o coração no canto superior direito. */
.epbc-wl-heart--float {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 6;
}

/* Pequeno toast de feedback (adicionado/removido) reaproveitável */
.epbc-wl-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 99999;
	transform: translateX(-50%) translateY(12px);
	padding: 10px 18px;
	background: rgba(12, 14, 18, 0.95);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.epbc-wl-toast.is-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.epbc-wl-toast--added   { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,77,109,0.9) inset; }
.epbc-wl-toast--removed { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 2px rgba(154,164,178,0.9) inset; }

@media (prefers-reduced-motion: reduce) {
	.epbc-wl-heart,
	.epbc-wl-toast { transition: opacity 0.2s ease; }
	.epbc-wl-heart.is-loading svg { animation: none; }
}