/**
 * Pinterest Image Hover Pins
 *
 * CSS-only hover effect for the "Pin it" button on images.
 *
 * @package WPZOOM_Social_Icons
 * @since 2.2.0
 */

/* Class added to <figure> by JS — ensures absolute positioning context */
figure.wpzoom-pin-hover-container {
	position: relative;
}

/* Override WP core .wp-block-image>a { display: inline-block } */
.wp-block-image > .wpzoom-pin-hover-btn {
	display: flex;
}

/* Pin hover button */
.wpzoom-pin-hover-btn {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background-color: #E60023;
	color: #fff;
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}

.wpzoom-pin-hover-btn:hover,
.wpzoom-pin-hover-btn:focus {
	background-color: #ad081b;
	color: #fff;
	text-decoration: none;
}

.wpzoom-pin-hover-btn svg {
	flex-shrink: 0;
	display: block;
}

/* Show on hover / focus-within */
.wpzoom-pin-hover-container:hover .wpzoom-pin-hover-btn,
.wpzoom-pin-hover-container:focus-within .wpzoom-pin-hover-btn {
	opacity: 1;
	visibility: visible;
}

/* Position variants */
.wpzoom-pin-hover-btn.wpzoom-pin-hover-top-left {
	top: 10px;
	left: 10px;
}

.wpzoom-pin-hover-btn.wpzoom-pin-hover-top-right {
	top: 10px;
	right: 10px;
}

.wpzoom-pin-hover-btn.wpzoom-pin-hover-bottom-left {
	bottom: 10px;
	left: 10px;
}

.wpzoom-pin-hover-btn.wpzoom-pin-hover-bottom-right {
	bottom: 10px;
	right: 10px;
}

/* Shape variants */
.wpzoom-pin-hover-btn.wpzoom-pin-hover-rectangular {
	border-radius: 0;
}

.wpzoom-pin-hover-btn.wpzoom-pin-hover-rounded {
	border-radius: 4px;
}

.wpzoom-pin-hover-btn.wpzoom-pin-hover-circular {
	border-radius: 50px;
}

/* Label */
.wpzoom-pin-hover-label {
	white-space: nowrap;
}

/* Hidden Pinterest image (injected for Pinterest crawler) */
.wpzoom-pinterest-hidden-image {
	display: none !important;
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute;
}

/* Mobile: hide by default on small screens */
@media (max-width: 768px) {
	.wpzoom-pin-hover-btn {
		display: none;
	}

	/* When "Always show on mobile" is enabled, body gets this class */
	body.wpzoom-pin-hover-mobile .wpzoom-pin-hover-btn {
		display: flex;
		opacity: 1;
		visibility: visible;
	}
}