/* =========================================================================
 * CERVO — CAPA 93 · CONTADOR DE LA PRENDA SORPRESA
 *
 * ⚠️ NO ES UNA BARRA DE PROGRESO, Y NO PUEDE SERLO.
 *
 * El carrito ya tiene una barra —la del envío gratis— justo encima. Dos barras
 * iguales, una debajo de otra, no se distinguen: el cliente ve dos líneas que
 * se llenan y no sabe cuál mide qué. Además esa mide PESOS y esta cuenta
 * PRENDAS, que son dos unidades distintas con la misma forma.
 *
 * Aquí se cuenta contando: tres casillas que se llenan, una flecha, y el
 * regalo. Se entiende sin leer el texto, que es la prueba de que la forma es
 * la correcta.
 *
 * ⚠️ Este archivo NO usa los tokens de cervo-base.css: se carga en el carrito y
 * en el pago, que siguen con sus propios estilos (no están migrados al sistema
 * nuevo). Los valores están escritos con los MISMOS números que usa el resto de
 * esas dos pantallas.
 * ========================================================================= */

.cvreg {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid #e5e2dc;
	border-radius: 10px;
	background: #faf9f7;
	font-family: 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;
	transition: border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
	            background   0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ganado: el bloque se enciende y se queda encendido. No es una alerta que
   pasa, es un estado del pedido. */
.cvreg.is-listo {
	border-color: #c8a96e;
	background: #fdf9f1;
}

/* ── Las tres casillas ───────────────────────────────────────────────── */

.cvreg__marcas {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
}

.cvreg__marca {
	width: 15px;
	height: 19px;
	border: 1.5px solid #cfc9bf;
	border-radius: 3px;
	background: transparent;
	transition: background 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
	            border-color 0.3s ease,
	            transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* La proporción 15×19 no es casual: es una prenda de pecho, no un cuadrado.
   Un cuadrado se lee como «paso 1 de 3»; esto se lee como «una prenda». */
.cvreg__marca.is-on {
	background: #141210;
	border-color: #141210;
}

.cvreg.is-listo .cvreg__marca.is-on {
	background: #c8a96e;
	border-color: #c8a96e;
}

.cvreg__flecha {
	display: flex;
	color: #cfc9bf;
	transition: color 0.3s ease, transform 0.3s ease;
}

.cvreg__flecha svg {
	width: 18px;
	height: 18px;
}

.cvreg.is-listo .cvreg__flecha {
	color: #c8a96e;
}

.cvreg__premio {
	display: flex;
	color: #cfc9bf;
	transition: color 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cvreg__premio svg {
	width: 22px;
	height: 22px;
}

.cvreg.is-listo .cvreg__premio {
	color: #c8a96e;
}

/* =========================================================================
 * CON ADDI, APAGADO — pero a la vista
 *
 * Esconder el contador al elegir «Paga a cuotas» sería lo peor de las dos
 * opciones: el cliente leyó «va una prenda sorpresa» hace dos segundos y ahora
 * no está, sin que nadie le explique qué pasó. Se queda, en gris, diciendo por
 * qué — y así sabe que con otro medio de pago sí aplica y lo puede deshacer.
 *
 * El regalo va TACHADO, no borrado: la diferencia entre «esto no existe» y
 * «esto no te toca con lo que elegiste» es justo la que hay que comunicar.
 * ========================================================================= */
.cvreg.is-addi {
	border-color: #e5e2dc;
	background: #f7f6f4;
}

.cvreg.is-addi .cvreg__marca,
.cvreg.is-addi .cvreg__marca.is-on {
	background: transparent;
	border-color: #cfc9bf;
}

.cvreg.is-addi .cvreg__flecha,
.cvreg.is-addi .cvreg__premio {
	color: #b8b2a8;
}

.cvreg.is-addi .cvreg__premio::before {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 1.5px;
	background: #9a938a;
	transform: rotate(-18deg);
}

.cvreg.is-addi .cvreg__txt {
	color: #6f685e;
	font-weight: 400;
}

/* ── El texto ────────────────────────────────────────────────────────── */

.cvreg__txt {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #6f685e;
}

.cvreg.is-listo .cvreg__txt {
	color: #141210;
	font-weight: 500;
}

/*
 * La coletilla de Addi.
 *
 * ⚠️ EN SU PROPIA LÍNEA Y EN GRIS, no entre paréntesis pegada al final. Un
 * «(no disponible para Addi)» a continuación de «Va una prenda sorpresa en tu
 * pedido» se lee como parte de la misma frase y le quita fuerza a la buena
 * noticia justo cuando acaba de darse. Debajo y apagada dice lo mismo sin
 * discutir con el mensaje principal — y quien paga a cuotas, que es a quien le
 * importa, la encuentra igual.
 */
.cvreg__nota {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.35;
	color: #9a938a;
}

/* =========================================================================
 * LA CELEBRACIÓN
 *
 * UN SOLO MOMENTO, no efectos sueltos por todas partes. La clase la pone el JS
 * cuando el carrito CRUZA las tres prendas —no cuando la página carga ya con
 * tres—, así que ocurre exactamente una vez, justo cuando el cliente hace lo
 * que la hace ocurrir.
 *
 * Y sin confeti: en una pantalla de pago, algo que cae por encima del total
 * durante dos segundos es algo que tapa el total durante dos segundos.
 * ========================================================================= */

/* 1) Las tres casillas se encienden EN CADENA, de izquierda a derecha. Es lo
      que convierte tres marcas en «se completó»: el orden cuenta la historia. */
.cvreg.is-celebrando .cvreg__marca:nth-child(1) { animation: cvreg-marca 0.45s ease both 0.00s; }
.cvreg.is-celebrando .cvreg__marca:nth-child(2) { animation: cvreg-marca 0.45s ease both 0.09s; }
.cvreg.is-celebrando .cvreg__marca:nth-child(3) { animation: cvreg-marca 0.45s ease both 0.18s; }

@keyframes cvreg-marca {
	0%   { transform: translateY(0)    scale(1); }
	45%  { transform: translateY(-4px) scale(1.14); }
	100% { transform: translateY(0)    scale(1); }
}

/* 2) La flecha empuja hacia el regalo. */
.cvreg.is-celebrando .cvreg__flecha {
	animation: cvreg-flecha 0.5s ease both 0.24s;
}

@keyframes cvreg-flecha {
	0%   { transform: translateX(0); }
	50%  { transform: translateX(4px); }
	100% { transform: translateX(0); }
}

/* 3) Y el regalo ATERRIZA, con un anillo dorado que se abre y se va. Es el
      remate: llega el último y es lo único que crece de verdad. */
.cvreg.is-celebrando .cvreg__premio {
	animation: cvreg-premio 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.30s;
}

@keyframes cvreg-premio {
	0%   { transform: scale(0.6) rotate(-12deg); opacity: 0.4; }
	60%  { transform: scale(1.3) rotate(4deg);   opacity: 1; }
	100% { transform: scale(1)   rotate(0);      opacity: 1; }
}

.cvreg__premio {
	position: relative;
}

.cvreg.is-celebrando .cvreg__premio::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid #c8a96e;
	animation: cvreg-anillo 0.9s ease-out both 0.30s;
	pointer-events: none;
}

@keyframes cvreg-anillo {
	0%   { transform: scale(0.5); opacity: 0; }
	35%  { transform: scale(1);   opacity: 1; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* 4) Y el bloque entero da un latido muy corto. Sin él, la celebración pasa
      dentro de una caja que no se inmuta y se siente pegada. */
.cvreg.is-celebrando {
	animation: cvreg-latido 0.6s ease both;
}

@keyframes cvreg-latido {
	0%, 100% { box-shadow: 0 0 0 0    rgba(200, 169, 110, 0); }
	40%      { box-shadow: 0 0 0 5px  rgba(200, 169, 110, 0.22); }
	100%     { box-shadow: 0 0 0 12px rgba(200, 169, 110, 0); }
}

/* =========================================================================
 * DÓNDE VIVE
 * ========================================================================= */

/* En el pago va dentro de la tabla del resumen: hay que deshacer el padding y
   los bordes que WooCommerce le pone a cualquier <td> de ahí. */
.cvreg-fila td {
	padding: 0 !important;
	border: 0 !important;
}

.cvreg--pago {
	margin: 12px 0;
}

/* ── En el drawer de la cabecera ─────────────────────────────────────────
 *
 * Va pegado debajo de la barra de envío gratis, en el bloque de arriba. Ahí el
 * ancho es de 400 px y el texto tiene que caber en una línea, así que se
 * aprieta un punto respecto al carrito.
 * --------------------------------------------------------------------- */
.cvreg--drawer {
	margin: 10px 0 0;
	padding: 10px 12px;
	gap: 11px;
	border-radius: 8px;
}

.cvreg--drawer .cvreg__txt {
	font-size: 12.5px;
}

.cvreg--drawer .cvreg__marca {
	width: 13px;
	height: 17px;
}

.cvreg--drawer .cvreg__premio svg {
	width: 20px;
	height: 20px;
}

/* El nombre de la promoción de envío, al lado del precio en la fila «ENVÍO».
   Vive aquí y no en cervo-header.css porque nace y muere con la campaña. */
.cvn-cart-ship-promo {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	background: #141210;
	color: #c8a96e;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* La línea de la página de gracias: sin caja, es una frase más del mensaje. */
.cvreg-gracias {
	margin: 10px 0 0;
	padding-left: 12px;
	border-left: 3px solid #c8a96e;
	font-family: 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #141210;
}

/* ── Móvil ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {

	.cvreg {
		gap: 11px;
		padding: 11px 12px;
	}

	.cvreg__txt {
		font-size: 12.5px;
	}
}

/* ── Quien pidió que nada se mueva ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

	.cvreg,
	.cvreg__marca,
	.cvreg__flecha,
	.cvreg__premio {
		transition: none;
	}

	.cvreg.is-celebrando,
	.cvreg.is-celebrando .cvreg__marca,
	.cvreg.is-celebrando .cvreg__flecha,
	.cvreg.is-celebrando .cvreg__premio,
	.cvreg.is-celebrando .cvreg__premio::after {
		animation: none;
	}
}