/**
 * Badgify – Frontend Badge Styles
 *
 * Design principles:
 *  - Pure CSS, zero JS dependency
 *  - Absolute positioning relative to the product image container
 *  - CSS custom property --badgify-z-index set via inline style from PHP settings
 *  - Supports 4 shapes × 8 positions
 *
 * @package Badgify
 */

/* =========================================================================
   1. Base badge element
   ========================================================================= */

.badgify-badge {
	position:       absolute;
	z-index:        var(--badgify-z-index, 99);
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	padding:        4px 10px;
	font-size:      var(--badgify-font-size, 11px);
	font-weight:    700;
	line-height:    1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space:    nowrap;
	pointer-events: none;
	/* Colors come from inline style on the element */
}

/* =========================================================================
   2. Shapes
   ========================================================================= */

.badgify-shape-rounded {
	border-radius: 4px;
}

.badgify-shape-square {
	border-radius: 0;
}

.badgify-shape-circle {
	width:         36px;
	height:        36px;
	border-radius: 50%;
	padding:       0;
	font-size:     10px;
	text-align:    center;
}

/* Ribbon — top-left ribbon effect */
.badgify-shape-ribbon {
	border-radius: 0;
	padding:       5px 14px 5px 10px;
	clip-path:     polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

/* =========================================================================
   3. Positions
   ========================================================================= */

/* -- Top row -- */
.badgify-pos-top-left {
	top:   10px;
	left:  10px;
}

.badgify-pos-top-center {
	top:       10px;
	left:      50%;
	transform: translateX(-50%);
}

.badgify-pos-top-right {
	top:   10px;
	right: 10px;
}

/* -- Middle row -- */
.badgify-pos-middle-left {
	top:       50%;
	left:      10px;
	transform: translateY(-50%);
}

.badgify-pos-middle-right {
	top:       50%;
	right:     10px;
	transform: translateY(-50%);
}

/* -- Bottom row -- */
.badgify-pos-bottom-left {
	bottom: 10px;
	left:   10px;
}

.badgify-pos-bottom-center {
	bottom:    10px;
	left:      50%;
	transform: translateX(-50%);
}

.badgify-pos-bottom-right {
	bottom: 10px;
	right:  10px;
}

/* =========================================================================
   4. WooCommerce container context
   Ensure the WC product image wrappers are position:relative so our
   absolute badge lands correctly regardless of theme.
   ========================================================================= */

/* Shop / archive loop */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
}

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

/* =========================================================================
   5. Hide WC default sale flash when Badgify sale badge is active
   Prevents double "Sale!" badge on the same product image.
   ========================================================================= */

.badgify-has-sale-badge .onsale {
	display: none !important;
}

/* =========================================================================
   6. Responsive tweaks
   ========================================================================= */

@media (max-width: 600px) {
	.badgify-badge {
		font-size: 10px;
		padding:   3px 8px;
	}

	.badgify-shape-circle {
		width:  30px;
		height: 30px;
	}
}