/**
 * JD Advanced Labels & Overlays — Frontend CSS
 * Se carga en wp_head solo en páginas WooCommerce relevantes.
 *
 * @package JD_Advanced_Labels
 * @author  Agencia Jeemdev
 */

/* ============================================================
   CONTENEDOR BASE — imagen con overlays
   ============================================================ */
.jd-label-overlay-container {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0; /* evita espacio extra bajo la imagen */
}

/* ============================================================
   LABELS ABSOLUTOS (sobre la imagen)
   ============================================================ */
.jd-label-absolute {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	max-width: calc(100% - 16px);
}

.jd-label-absolute.jd-pos-top-left     { top: 8px;  left: 8px;  }
.jd-label-absolute.jd-pos-top-right    { top: 8px;  right: 8px; left: auto; }
.jd-label-absolute.jd-pos-bottom-left  { bottom: 8px; left: 8px; top: auto; }
.jd-label-absolute.jd-pos-bottom-right { bottom: 8px; right: 8px; top: auto; left: auto; }
.jd-label-absolute.jd-pos-center       { top: 50%; left: 50%; transform: translate(-50%,-50%); }

/* ============================================================
   LABELS INLINE (antes/después del título)
   ============================================================ */
.jd-labels-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 6px;
	line-height: 1;
}

.jd-labels-pos-after-title {
	margin: 6px 0 0;
}

.jd-label-inline {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: 3px;
	padding: 3px 8px;
	line-height: 1.3;
	font-weight: 600;
}

.jd-label-inline .jd-label-image {
	display: block;
	height: auto;
	max-width: 100%;
}

/* ============================================================
   OVERLAY DE STOCK (loop — woocommerce_product_get_image)
   ============================================================ */
.jd-label-overlay-container {
	position: relative;
	display: block;
}

.jd-stock-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.jd-stock-overlay img {
	position: relative;
	z-index: 10;
	max-width: 80%;
	height: auto;
}

.jd-stock-overlay .jd-overlay-text {
	position: relative;
	z-index: 10;
	font-weight: 700;
	text-align: center;
	padding: 6px 12px;
	border-radius: 4px;
}

/* ============================================================
   OVERLAY DE STOCK — SINGLE PRODUCT (inyectado por JS en wp_footer)
   ============================================================ */
.woocommerce-product-gallery {
	position: relative; /* fallback */
}

.jd-sp-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* ============================================================
   SALE FLASH — reemplazo del badge de WooCommerce
   
   WooCommerce genera: <span class="onsale">[salida del filtro]</span>
   Nuestro filtro devuelve el HTML interno sin otro span .onsale.
   Reseteamos el estilo del span externo cuando contiene nuestro label.
   ============================================================ */

/* El span .onsale externo de WC envuelve nuestro label.
   Cuando contiene un .jd-label-inline, reseteamos todos los estilos del tema. */
span.onsale:has(.jd-label-inline),
span.onsale:has(.jd-label-image) {
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	min-height: auto !important;
	min-width: auto !important;
	line-height: 1 !important;
	color: inherit !important;
	display: inline-flex !important;
	align-items: flex-start !important;
}

/* Fallback para navegadores sin :has() — el sale flash sin nuestro label
   no necesita reset porque no tenemos regla activa */

/* Asegurar posición relativa en la galería */
.woocommerce-product-gallery {
	position: relative !important;
	overflow: visible !important; /* algunos temas ponen overflow:hidden que cortaría el overlay */
}

/* Badge absoluto en single product (inyectado por PHP) */
.jd-sp-overlay {
	overflow: visible;
}

/* ============================================================
   SUPRIMIR TEXTO "Agotado" de WooCommerce en el LOOP
   El filtro woocommerce_get_availability devuelve '' para productos
   con overlay activo, pero el tema puede añadir texto propio.
   Este CSS actúa como safety net.
   ============================================================ */

/* Dentro del card que tiene nuestro overlay wrapper */
.jd-stock-wrapper ~ .stock.out-of-stock,
.jd-stock-wrapper ~ * .stock.out-of-stock,
li.product:has(.jd-stock-wrapper) .stock.out-of-stock,
li.product:has(.jd-stock-wrapper) [class*="out-of-stock"],
li.product:has(.jd-stock-wrapper) [class*="agotado"] {
	display: none !important;
}

/* ============================================================
   ELEMENTOR WOOCOMMERCE COMPATIBILITY
   Elementor envuelve las imágenes en su propio sistema de widgets.
   Estos selectores garantizan que el overlay funcione dentro de
   los widgets: Product, Products, Loop Product, Archive Products.
   ============================================================ */

/* Elementor Product Loop Item — contenedor de imagen */
.elementor-widget-woocommerce-products .jd-label-overlay-container,
.elementor-widget-loop-grid .jd-label-overlay-container,
.elementor-wc-products .jd-label-overlay-container,
.e-wc-product-images .jd-label-overlay-container,
.woocommerce ul.products .jd-label-overlay-container {
	display: block !important;
	position: relative !important;
	line-height: 0 !important;
	width: 100% !important;
	overflow: visible !important; /* No recortar el overlay */
}

/* La imagen dentro del contenedor debe ocupar el 100% */
.jd-label-overlay-container img,
.jd-label-overlay-container a img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	line-height: 0 !important;
}

/* El overlay absolutamente posicionado */
.jd-label-overlay-container .jd-stock-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 9 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: none !important;
	box-sizing: border-box !important;
}

/* Contenido dentro del overlay (imagen/texto) */
.jd-stock-overlay img {
	max-width: 80% !important;
	height: auto !important;
	width: auto !important; /* respeta el width="" del atributo HTML */
	line-height: 1 !important;
}

/* Elementor a veces pone el enlace del producto con display:flex
   lo que rompe el flujo del span contenedor */
.woocommerce ul.products li.product a img {
	display: block;
}

/* Elementor Loop Builder — producto individual */
.elementor-loop-item .jd-label-overlay-container,
.e-loop-item .jd-label-overlay-container {
	display: block !important;
	position: relative !important;
}

/* ============================================================
   AGOTADO TEXTO — ocultar en el loop cuando hay overlay activo
   Reglas adicionales para widgets de Elementor
   ============================================================ */
.elementor-widget-woocommerce-products li.product:has(.jd-stock-wrapper) .stock,
.elementor-widget-loop-grid .e-loop-item:has(.jd-stock-wrapper) .stock,
li.product:has(.jd-stock-wrapper) .stock.out-of-stock,
li.product:has(.jd-stock-wrapper) p.stock {
	display: none !important;
}