/*
 * DM WC Badges – Frontend
 *
 * Core requirement:
 * Badges must be positioned relative to the image container (thumbnail/gallery),
 * not relative to the entire product card/link.
 */

/* --------------------------------------------------------------
 * Loop (shop/archive) thumbnail anchoring
 * -------------------------------------------------------------- */

/* Wrapper injected by Renderer around the loop thumbnail + badges */
.dmwc-thumb-rel {
	position: relative !important;
	display: block;
	line-height: 0;
	max-width: 100%;
	/* Prevent bottom badges from visually spilling outside the image box */
	overflow: hidden;
}

/* Ensure the image defines the wrapper height reliably */
.dmwc-thumb-rel img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------
 * Badge container + corners
 * -------------------------------------------------------------- */

.dmwc-badges-wrap {
	position: absolute;
	/* Corner positioning is controlled by dmwc-corner-* classes */
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: var(--dmwc-z, 20);
	pointer-events: auto;
}

.dmwc-badges-wrap.dmwc-corner-top-left {
	top: var(--dmwc-offset-y, 10px);
	left: var(--dmwc-offset-x, 10px);
}

.dmwc-badges-wrap.dmwc-corner-top-right {
	top: var(--dmwc-offset-y, 10px);
	right: var(--dmwc-offset-x, 10px);
}

.dmwc-badges-wrap.dmwc-corner-bottom-left {
	bottom: var(--dmwc-offset-y, 10px);
	left: var(--dmwc-offset-x, 10px);
}

.dmwc-badges-wrap.dmwc-corner-bottom-right {
	bottom: var(--dmwc-offset-y, 10px);
	right: var(--dmwc-offset-x, 10px);
}

.dmwc-badges-stack {
	display: flex;
	flex-direction: column;
	gap: var(--dmwc-gap, 6px);
	align-items: flex-start;
}

/* --------------------------------------------------------------
 * Text badges
 * -------------------------------------------------------------- */

.dmwc-badge {
	cursor: help;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dmwc-bg, #1d2327);
	color: var(--dmwc-text, #fff);
	border-radius: var(--dmwc-radius, 6px);
	font-size: var(--dmwc-font-size, 12px);
	line-height: 1;
	padding: var(--dmwc-pad-y, 6px) var(--dmwc-pad-x, 10px);
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}

/* --------------------------------------------------------------
 * Image-only badges
 * -------------------------------------------------------------- */

.dmwc-badge-image-only {
	display: inline-block;
	line-height: 0;
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.dmwc-badge-image-only img {
	display: block;
	width: var(--dmwc-img-w, 42px);
	height: var(--dmwc-img-h, 42px);
	object-fit: contain;
}

/* --------------------------------------------------------------
 * Inline placements (after title / near price)
 * -------------------------------------------------------------- */

.dmwc-badges-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 10px;
}

/* --------------------------------------------------------------
 * Single product gallery anchoring (overlay placement)
 * -------------------------------------------------------------- */

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
	position: relative;
}

/* 🔥 CRITICAL FIX – Single product gallery image clipping
 * Clip badges to the actual image slide, not the overlay anchor
 */
.woocommerce-product-gallery__image {
	overflow: hidden;
}

/* -------------------------------------------------
   Bricks Product Gallery – Badge positioning auto-fix
   Scoped, condition-safe, no impact on custom layouts
-------------------------------------------------- */

/* Make ONLY the active main image a positioning context */
.bricks-element.woocommerce-product-gallery
.woocommerce-product-gallery__image.flex-active-slide {
	position: relative;
}

/* Badge container overlays ONLY the main image */
.bricks-element.woocommerce-product-gallery
.dmwc-badges-container {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Badges remain clickable */
.bricks-element.woocommerce-product-gallery
.dmwc-badges-container .dmwc-badge {
	pointer-events: auto;
}

/* Badges link */

.dmwc-badge-link {
	display: inline-block;
	text-decoration: none;
	position: relative;
	z-index: 9999;
	pointer-events: auto;
}

.dmwc-badge,
.dmwc-badge-image-only {
	pointer-events: auto;
}