/* ConvierteBoost — urgencia y prueba social */

:root {
	--cb-pink: #ff0a8a;
	--cb-ink: #1a1a1a;
}

/* --- Urgencia de stock --- */
.cb-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 10, 138, .08);
	color: var(--cb-pink);
	border: 1px solid rgba(255, 10, 138, .25);
	border-radius: 40px;
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	margin: 4px 0 14px;
}
.cb-stock strong { font-weight: 800; }

/* El display de arriba gana al atributo [hidden] del HTML, asi que hay que
   anularlo explicitamente o el aviso seguiria viendose con una cifra vieja. */
.cb-stock[hidden] { display: none !important; }
.cb-flame { animation: cb-flicker 1.1s ease-in-out infinite; }
@keyframes cb-flicker {
	0%, 100% { transform: scale(1) rotate(-3deg); }
	50% { transform: scale(1.18) rotate(3deg); }
}

/* --- Personas viendo --- */
/* Pastilla de prueba social. Antes era texto suelto y se perdia entre los
   demas elementos de la ficha. */
.cb-viewers {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 14px 0 6px;
	padding: 9px 15px 9px 12px;
	border: 1px solid #efe6ea;
	border-radius: 999px;
	background: #fcfafb;
	color: #4a4a4a;
	font-size: 13.5px;
	line-height: 1.2;
}
.cb-viewers strong {
	color: var(--cb-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums; /* el ancho no baila al cambiar la cifra */
	display: inline-block;
	min-width: 1.6em;
	text-align: center;
}

/* Punto verde tipo "en vivo" en lugar del emoji. */
.cb-eye {
	position: relative;
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #22c55e;
	font-size: 0;
	flex: none;
}
.cb-eye::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid #22c55e;
	animation: cb-ping 2s ease-out infinite;
}
@keyframes cb-ping {
	0%   { transform: scale(.6); opacity: .9; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* Destello al cambiar la cifra: sin esto el cambio pasa desapercibido. */
.cb-viewers-n { transition: color .2s ease, transform .2s ease; }
.cb-viewers-n.cb-bump {
	color: var(--cb-pink, #ff0a8a);
	transform: scale(1.18);
}

@media (prefers-reduced-motion: reduce) {
	.cb-eye::after { animation: none; }
	.cb-viewers-n { transition: none; }
	.cb-viewers-n.cb-bump { transform: none; }
}

/* --- Regalo por compra mínima + cuenta regresiva --- */
.cb-gift {
	background: linear-gradient(180deg, #fffafc 0%, #fff4f9 100%);
	border: 1px solid #f6dfeb;
	border-radius: 18px;
	padding: 18px;
	margin: 0 0 20px;
	box-shadow: 0 8px 24px rgba(214, 0, 118, .07);
}
.cb-gift__timer {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: #fff;
	border: 1px solid #f2dbe7;
	border-radius: 12px;
	padding: 11px 14px;
	font-size: 14px; color: #4a4a4a;
}
.cb-gift__clock {
	font-weight: 700; font-size: 16px; color: var(--cb-ink);
	font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.cb-gift--ended .cb-gift__clock { color: #9a9a9a; }

.cb-gift__text {
	margin: 14px 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--cb-ink);
}
.cb-gift__text strong { font-weight: 700; }
.cb-gift__missing { display: block; font-size: 13px; color: #7a7a7a; margin-top: 4px; }
/* Estado ganado */
.cb-gift--won {
	background: linear-gradient(180deg, #fff6fb 0%, #ffeaf5 100%);
	border-color: #ffc9e4;
}
.cb-gift--won .cb-gift__text { color: var(--cb-pink); font-weight: 600; }
.cb-gift--won .cb-gift__bar-fill { background: linear-gradient(90deg, #ff0a8a, #ff8cc8); }
/* Etiqueta del regalo en el carrito / checkout */
.cb-gift-tag {
	display: inline-block; margin-left: 6px; padding: 2px 9px;
	background: var(--cb-pink); color: #fff;
	border-radius: 40px; font-size: 11px; font-weight: 600; vertical-align: middle;
}

.cb-gift__bar {
	height: 7px; border-radius: 99px; background: #f0e6ec; overflow: hidden; margin-bottom: 14px;
}
.cb-gift__bar-fill {
	display: block; height: 100%; border-radius: 99px;
	background: linear-gradient(90deg, var(--cb-pink), #ff5dbd);
	transition: width .6s cubic-bezier(.2,.8,.2,1);
}

.cb-gift__product {
	display: flex; align-items: center; gap: 12px;
	background: #fff; border: 1px solid #f2e4ec; border-radius: 14px; padding: 10px;
}
.cb-gift__img {
	width: 58px; height: 58px; object-fit: cover; border-radius: 10px;
	background: #fdf3f8; flex: 0 0 auto;
}
.cb-gift__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-gift__name { font-weight: 600; font-size: 14px; color: var(--cb-ink); }
.cb-gift__prices { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.cb-gift__free .amount,
.cb-gift__free bdi { color: var(--cb-pink) !important; font-weight: 700; }
.cb-gift__prices del,
.cb-gift__prices del .amount,
.cb-gift__prices del bdi { color: #a9a1a5 !important; font-weight: 400; text-decoration: line-through; }

@media (max-width: 480px) {
	.cb-gift { padding: 14px; }
	.cb-gift__img { width: 50px; height: 50px; }
}

/* --- Notificaciones de compra --- */
#cb-notif-root {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9999;
	pointer-events: none;
}
.cb-notif {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 320px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .16);
	padding: 12px;
	pointer-events: auto;
	transform: translateY(24px);
	opacity: 0;
	transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
	border: 1px solid #f0e2ea;
}
.cb-notif.cb-show { transform: translateY(0); opacity: 1; }
.cb-notif__img {
	width: 52px; height: 52px;
	border-radius: 10px;
	object-fit: cover;
	background: #ffd1f0;
	flex: 0 0 auto;
}
.cb-notif__body { font-size: 13px; line-height: 1.35; color: #333; overflow: hidden; }
.cb-notif__body b { color: var(--cb-ink); }
.cb-notif__prod {
	color: var(--cb-pink);
	font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	display: block;
}
.cb-notif__meta { color: #9a9a9a; font-size: 11.5px; margin-top: 2px; }
.cb-notif__meta .cb-verified { color: #16a34a; font-weight: 600; }
.cb-notif { position: relative; }
/* Cerrar: discreto en la esquina, sin heredar los estilos de botón del tema */
#cb-notif-root .cb-notif__close {
	position: absolute !important;
	top: 4px !important; right: 4px !important;
	width: 22px !important; height: 22px !important;
	min-width: 0 !important; min-height: 0 !important;
	padding: 0 !important; margin: 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	border-radius: 50% !important;
	color: #c9c2c6 !important; font-size: 15px !important; line-height: 1 !important;
	display: flex !important; align-items: center; justify-content: center;
	cursor: pointer; opacity: 0; transition: opacity .2s ease, color .2s ease, background .2s ease;
}
.cb-notif:hover .cb-notif__close { opacity: 1; }
#cb-notif-root .cb-notif__close:hover {
	color: var(--cb-ink) !important; background: #f3eef1 !important;
}
/* En móvil (sin hover) siempre visible */
@media (hover: none) {
	#cb-notif-root .cb-notif__close { opacity: 1; }
}

@media (max-width: 480px) {
	#cb-notif-root { left: 10px; bottom: 10px; }
	.cb-notif { width: 280px; }
}