/**
 * Estilos Frontend: Avisos en Carrito y Badges de Producto - WooCommerce Promoción 3x2
 */

:root {
	--wc-3x2-badge-bg: #059669;
	--wc-3x2-badge-color: #ffffff;
}

/* Aviso de incentivo (Upsell) en Carrito */
.wc-3x2-upsell-notice {
	display: flex;
	align-items: center;
	gap: 14px;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 1px solid #86efac;
	border-left: 5px solid #16a34a;
	padding: 14px 18px;
	border-radius: 10px;
	margin: 0 0 25px 0;
	box-shadow: 0 2px 5px rgba(22, 163, 74, 0.08);
	animation: wc3x2FadeIn 0.3s ease-out;
}

.wc-3x2-upsell-notice .wc-3x2-notice-icon {
	color: #16a34a;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wc-3x2-upsell-notice .wc-3x2-notice-content p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: #14532d;
}

.wc-3x2-upsell-notice .wc-3x2-notice-content strong {
	color: #052e16;
	font-weight: 700;
}

/* Aviso de éxito (Promo aplicada) en Carrito */
.wc-3x2-success-notice {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-left: 5px solid #059669;
	padding: 12px 18px;
	border-radius: 10px;
	margin: 0 0 20px 0;
	animation: wc3x2FadeIn 0.3s ease-out;
}

.wc-3x2-success-notice .wc-3x2-notice-icon {
	color: #059669;
	flex-shrink: 0;
}

.wc-3x2-success-notice .wc-3x2-notice-content p {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: #065f46;
}

/* Insignia / Badge de Producto */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product,
.wc-block-grid__product,
li.product,
.woocommerce div.product,
.woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce div.product .images,
.product-images {
	position: relative !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link,
a.woocommerce-loop-product__link {
	position: relative;
	display: block;
}

.wc-3x2-badge-wrapper {
	display: inline-block;
	z-index: 15;
	pointer-events: none;
	line-height: 1;
}

/* Badge basado en Imagen - Fuerza tamaño exacto e impide sobreescritura de temas */
.wc-3x2-badge-wrapper .wc-3x2-badge-img,
.wc-3x2-badge-img,
.woocommerce div.product div.images .wc-3x2-badge-img,
.woocommerce-product-gallery .wc-3x2-badge-img,
.woocommerce ul.products li.product .wc-3x2-badge-img,
.woocommerce ul.products li.product a .wc-3x2-badge-img,
.wc-block-grid__product .wc-3x2-badge-img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	border-radius: 2px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26);
	transition: transform 0.25s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.25s ease;
	pointer-events: auto;
}

.woocommerce ul.products li.product:hover .wc-3x2-badge-img,
.wc-block-grid__product:hover .wc-3x2-badge-img,
.wc-3x2-badge-img:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Badge de texto (fallback si no hubiera imagen) */
.wc-3x2-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wc-3x2-badge-bg, #581427);
	color: var(--wc-3x2-badge-color, #ffffff);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 4px 10px;
	border-radius: 9999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	line-height: 1.2;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
	pointer-events: auto;
}

.wc-3x2-badge:hover {
	transform: scale(1.04);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

/* Posicionamiento en el catálogo (loop) - Arriba a la izquierda sobre la tarjeta */
.wc-3x2-badge-wrapper.wc-3x2-badge-loop {
	position: absolute;
	top: 0px;
	left: 14px;
	z-index: 15;
	width: 70px;
	width: var(--wc-3x2-badge-width, 70px) !important;
	max-width: var(--wc-3x2-badge-width, 70px) !important;
	margin: 0;
}

/* Posicionamiento en ficha individual de producto */
.wc-3x2-badge-wrapper.wc-3x2-badge-single {
	position: absolute;
	top: 0px;
	left: 14px;
	z-index: 25;
	width: 90px;
	width: var(--wc-3x2-badge-single-width, 90px) !important;
	max-width: var(--wc-3x2-badge-single-width, 90px) !important;
	margin: 0;
}

/* Si es solo texto y no imagen, permitir ancho auto */
.wc-3x2-badge-wrapper.wc-3x2-badge-text-wrapper {
	width: auto !important;
	max-width: none !important;
}

.wc-3x2-badge-single .wc-3x2-badge {
	font-size: 12px;
	padding: 5px 12px;
}

/* Animación suave de aparición */
@keyframes wc3x2FadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}