/* =============================================
   PWB – Product Wishlist Button
   ============================================= */

/*
 * The Elementor widget element is the positioned overlay, and it is also what
 * {{WRAPPER}} resolves to, so every style control keeps matching after the
 * script moves the widget on top of the product image. The absolute
 * positioning is gated behind .pwb-mounted so a widget dropped outside a
 * product loop (or a page where the script failed) still renders in flow.
 */
.elementor-widget-pwb_wishlist_button.pwb-mounted,
.pwb-wishlist-wrap.pwb-mounted {
	position: absolute;
	z-index: 10;
	top: 10px;
	right: 10px;
	width: auto !important;
	max-width: none;
	flex: 0 0 auto;
	line-height: 0;
}

.pwb-wishlist-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
}

/* ── Base button ─────────────────────────────────────────── */
.pwb-wishlist-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
	transition: opacity 300ms ease, transform 300ms ease, background-color 300ms ease;

	/* Always visible by default */
	opacity: 1;
	transform: scale(1);
}

/* ── Hover-only mode (opt-in from the Visibility section) ── */
.pwb-hover-only .pwb-wishlist-btn {
	opacity: 0;
	transform: scale(0.8);
}

.elementor-loop-item:hover .pwb-hover-only .pwb-wishlist-btn,
.e-loop-item:hover .pwb-hover-only .pwb-wishlist-btn,
.woocommerce ul.products li.product:hover .pwb-hover-only .pwb-wishlist-btn,
li.product:hover .pwb-hover-only .pwb-wishlist-btn,
.elementor-widget-image:hover .pwb-hover-only .pwb-wishlist-btn,
.pwb-hover-only .pwb-wishlist-btn:focus-visible {
	opacity: 1;
	transform: scale(1);
}

/* ── Mobile: always visible ──────────────────────────────── */
@media (max-width: 767px) {
	.pwb-wishlist-btn.pwb-mobile-always {
		opacity: 1 !important;
		transform: scale(1) !important;
	}
}

/* ── Icon states (pure CSS – no inline styles) ───────────── */
.pwb-icon-add,
.pwb-icon-added {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.pwb-wishlist-btn .pwb-icon-added,
.pwb-wishlist-btn.pwb-added .pwb-icon-add,
.pwb-wishlist-btn.is-active .pwb-icon-add {
	display: none;
}

.pwb-wishlist-btn.pwb-added .pwb-icon-added,
.pwb-wishlist-btn.is-active .pwb-icon-added {
	display: inline-flex;
}

/* ── Icon appearance ─────────────────────────────────────── */
.pwb-wishlist-btn i {
	font-size: 16px;
	color: #333333;
	transition: color 300ms ease;
	line-height: 1;
}

.pwb-wishlist-btn svg {
	width: 16px;
	height: 16px;
	fill: #333333;
	transition: fill 300ms ease;
}

.pwb-wishlist-btn:hover i        { color: #e63c3c; }
.pwb-wishlist-btn:hover svg,
.pwb-wishlist-btn:hover svg path { fill: #e63c3c; }

.pwb-wishlist-btn.pwb-added i,
.pwb-wishlist-btn.is-active i    { color: #e63c3c; }

.pwb-wishlist-btn.pwb-added svg,
.pwb-wishlist-btn.pwb-added svg path,
.pwb-wishlist-btn.is-active svg,
.pwb-wishlist-btn.is-active svg path { fill: #e63c3c; }

/* ── Pulse animation ─────────────────────────────────────── */
@keyframes pwb-pulse {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.3); }
	60%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}

.pwb-wishlist-btn.pwb-pulse { animation: pwb-pulse 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
	.pwb-wishlist-btn.pwb-pulse { animation: none; }
	.pwb-wishlist-btn { transition: none; }
}

/* ── Tooltip ─────────────────────────────────────────────── */
.pwb-tooltip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms ease;
	z-index: 20;
}

.pwb-wishlist-btn:hover + .pwb-tooltip,
.pwb-wishlist-btn:focus-visible + .pwb-tooltip {
	opacity: 1;
}

/* ── Loading ─────────────────────────────────────────────── */
.pwb-wishlist-btn.pwb-loading {
	pointer-events: none;
	opacity: 0.5;
}