/*
 * Urgencia y Prueba Social — Nutrición Animal
 * Paleta: verde NutriClub (#2e7d32) + ámbar de urgencia (#b45309)
 */

:root {
	--na-sp-green: #2e7d32;
	--na-sp-green-soft: rgba(46, 125, 50, 0.10);
	--na-sp-green-border: rgba(46, 125, 50, 0.25);
	--na-sp-amber: #b45309;
	--na-sp-amber-soft: rgba(217, 119, 6, 0.10);
	--na-sp-amber-border: rgba(217, 119, 6, 0.30);
}

/* ---------- Badge "Producto popular esta semana" ---------- */

.na-sp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 14px;
	margin: 0 0 12px;
	border-radius: 30px;
	background: var(--na-sp-green);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.6;
}

.na-sp-badge__icon i { font-size: 14px; }
.na-sp-proof__icon i { font-size: 17px; }
.na-sp-urgency__icon i { font-size: 17px; }
.na-sp-checkout-box__icon i { font-size: 20px; color: var(--na-sp-green); margin-top: 2px; }
.na-sp-demand__icon i { font-size: 15px; }

.na-sp-badge__icon i,
.na-sp-proof__icon i,
.na-sp-urgency__icon i,
.na-sp-checkout-box__icon i,
.na-sp-demand__icon i {
	/* Glifos de `theme-icons`: el tamano va por font-size, no por width/height. */
	display: block;
	line-height: 1;
	font-style: normal;
}

.na-sp-badge__icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* ---------- "X personas compraron este producto hoy" ---------- */

.na-sp-proof {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	margin: 6px 0 14px;
	border-radius: 8px;
	background: var(--na-sp-green-soft);
	border: 1px solid var(--na-sp-green-border);
	color: var(--na-sp-green);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.na-sp-proof__icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* ---------- Urgencia de stock ---------- */

.na-sp-urgency {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	margin: 4px 0 16px;
	border-radius: 8px;
	background: var(--na-sp-amber-soft);
	border: 1px solid var(--na-sp-amber-border);
	color: var(--na-sp-amber);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.na-sp-urgency__icon svg {
	width: 17px;
	height: 17px;
	display: block;
	animation: na-sp-pulse 1.6s ease-in-out infinite;
}

@keyframes na-sp-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.18); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
	.na-sp-urgency__icon svg { animation: none; }
}

/* ---------- Checkout: caja de confianza ---------- */

.na-sp-checkout-box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	margin: 14px 0;
	border-radius: 10px;
	background: var(--na-sp-green-soft);
	border: 1px solid var(--na-sp-green-border);
}

.na-sp-checkout-box__icon svg {
	width: 20px;
	height: 20px;
	display: block;
	color: var(--na-sp-green);
	margin-top: 2px;
}

.na-sp-checkout-box__content {
	display: block;
}

.na-sp-checkout-box__title {
	display: block;
	color: var(--na-sp-green);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 2px;
}

.na-sp-checkout-box__text {
	display: block;
	color: #4a5a4b;
	font-size: 13px;
	line-height: 1.5;
}

/* ---------- Checkout: aviso de demanda ---------- */

.na-sp-demand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin: 10px 0;
	border-radius: 8px;
	background: var(--na-sp-amber-soft);
	border: 1px dashed var(--na-sp-amber-border);
	color: var(--na-sp-amber);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

/* La fila que lleva el aviso dentro de la tabla del resumen del pedido. La
   celda no aporta nada visual: el aspecto lo pone `.na-sp-demand`. Sin esto, la
   celda hereda el padding y los bordes de las celdas de producto del tema y el
   aviso queda con un marco que no le corresponde. Ver el comentario largo en
   na_sp_checkout_demand_notice() para por que el aviso va en un <tr>. */
.na-sp-demand-row > td {
	padding: 0;
	border: 0;
	background: none;
}

.na-sp-demand__icon svg {
	width: 15px;
	height: 15px;
	display: block;
	animation: na-sp-pulse 1.6s ease-in-out infinite;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	.na-sp-proof,
	.na-sp-urgency {
		font-size: 13px;
		padding: 8px 12px;
	}

	.na-sp-checkout-box {
		padding: 12px 14px;
	}
}

/* ---------- Pila de bloques en la ficha (contexto Elementor) ----------
   Los bloques se inyectan en `woocommerce_before_add_to_cart_form`, justo
   encima del boton de comprar, porque la plantilla de Elementor no ejecuta
   `woocommerce_single_product_summary`. Se separan del widget anterior y entre
   si sin depender de ningun wrapper del tema. */
.na-sp-stack,
.woocommerce div.product .na-sp-badge,
.woocommerce div.product .na-sp-proof,
.woocommerce div.product .na-sp-urgency {
	max-width: 100%;
}

.na-sp-badge + .na-sp-proof,
.na-sp-badge + .na-sp-urgency,
.na-sp-proof + .na-sp-urgency {
	margin-top: 8px;
}

.na-sp-badge,
.na-sp-proof,
.na-sp-urgency {
	margin-bottom: 12px;
}