/*
 * WooCommerce Smart Product Badges — badge.css
 * Theme-agnostic overlay styles.
 */

/* -----------------------------------------------------------------------
 * Product image container — ensure position:relative for badge overlay.
 * We target common WooCommerce and theme wrappers.
 * --------------------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a img,
.woocommerce-loop-product__link,
.wcspb-product-image-wrapper,
.woocommerce-product-gallery {
	position: relative;
}

/* The wrapper we inject in the loop */
.wcspb-product-image-wrapper {
	display: block;
	position: relative;
	overflow: visible;
}

.wcspb-product-image-wrapper img {
	display: block;
	width: 100%;
}

/* -----------------------------------------------------------------------
 * Base badge styles
 * --------------------------------------------------------------------- */
.wcspb-badge {
	position: absolute;
	z-index: 10;
	padding: 6px 10px;
	border-radius: var(--wcspb-radius, 4px);
	font-size: var(--wcspb-font-size, 14px);
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none;
	white-space: nowrap;
	/* Smooth rendering */
	-webkit-font-smoothing: antialiased;
}

/* -----------------------------------------------------------------------
 * Position classes
 * --------------------------------------------------------------------- */
.wcspb-top-left {
	top: 8px;
	left: 8px;
}

.wcspb-top-right {
	top: 8px;
	right: 8px;
}

.wcspb-bottom-left {
	bottom: 8px;
	left: 8px;
}

.wcspb-bottom-right {
	bottom: 8px;
	right: 8px;
}

.wcspb-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* -----------------------------------------------------------------------
 * Animation keyframes
 * --------------------------------------------------------------------- */

/* Pulse */
@keyframes wcspb-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%       { opacity: 0.7; transform: scale(1.08); }
}

/* Center variant of pulse must include translate */
.wcspb-center.wcspb-pulse {
	animation: wcspb-pulse-center 2s ease-in-out infinite;
}

@keyframes wcspb-pulse-center {
	0%, 100% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
	50%       { opacity: 0.7; transform: translate(-50%, -50%) scale(1.08); }
}

/* Glow */
@keyframes wcspb-glow {
	0%, 100% { box-shadow: 0 0 4px  rgba(0, 0, 0, 0.2); }
	50%       { box-shadow: 0 0 14px rgba(0, 0, 0, 0.5); }
}

/* Bounce */
@keyframes wcspb-bounce {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-6px); }
}

/* Center bounce must preserve translate */
.wcspb-center.wcspb-bounce {
	animation: wcspb-bounce-center 1.2s ease-in-out infinite;
}

@keyframes wcspb-bounce-center {
	0%, 100% { transform: translate(-50%, -50%) translateY(0); }
	50%       { transform: translate(-50%, -50%) translateY(-6px); }
}

/* -----------------------------------------------------------------------
 * Apply animations (non-center positions)
 * --------------------------------------------------------------------- */
.wcspb-badge.wcspb-pulse:not(.wcspb-center) {
	animation: wcspb-pulse 2s ease-in-out infinite;
}

.wcspb-badge.wcspb-glow {
	animation: wcspb-glow 2s ease-in-out infinite;
}

.wcspb-badge.wcspb-bounce:not(.wcspb-center) {
	animation: wcspb-bounce 1.2s ease-in-out infinite;
}

/* -----------------------------------------------------------------------
 * Respect user accessibility preferences
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wcspb-badge {
		animation: none !important;
		transition: none !important;
	}
}

/* -----------------------------------------------------------------------
 * Responsive font scaling (fallback if mobile_font_scaling is off)
 * Overridden by inline --wcspb-font-size from PHP when scaling is on.
 * --------------------------------------------------------------------- */
@media (max-width: 768px) {
	.wcspb-badge {
		padding: 4px 8px;
	}
}

@media (max-width: 480px) {
	.wcspb-badge {
		padding: 3px 6px;
	}
}

/* -----------------------------------------------------------------------
 * Single product gallery
 * --------------------------------------------------------------------- */
.woocommerce-product-gallery {
	position: relative !important;
	overflow: visible;
}

.woocommerce-product-gallery .wcspb-badge {
	/* Ensure badges sit above slick slider controls etc. */
	z-index: 20;
}