/* =========================================================================
   Recomendaciones personalizadas — Tope de Flama y Más
   Las tarjetas y el carrusel usan el CSS de blossom-carousel.css (.tdfml-*).
   Acá solo va el contenedor y el encabezado, calcado del cross-sell.
   ========================================================================= */

/* Mientras no llega la respuesta (o si no hay nada que mostrar) no ocupa
   lugar: el visitante nuevo no ve un hueco. */
.tdf-recos-slot:empty {
	display: none;
}

.tdf-recos {
	width: 100%;
	margin: 2rem 0;
}

.tdf-recos + .tdf-recos {
	margin-top: 1rem;
}

.tdf-recos__inner {
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* En la ficha y en gracias el bloque cae fuera de los contenedores de
   Elementor: se le da el mismo aire lateral que al resto de la página. */
.single-product .tdf-recos__inner,
.woocommerce-order-received .tdf-recos__inner {
	padding: 0 16px;
}

.tdf-recos__head {
	margin: 0 0 1rem;
}

.tdf-recos__eyebrow {
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #CC1939;
	margin-bottom: 0.3rem;
}

.tdf-recos__titulo {
	font-family: 'Unbounded', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
	line-height: 1.2;
	border-radius: 0;
}

@media (min-width: 769px) {
	.tdf-recos__eyebrow { font-size: 1rem; }
	.tdf-recos__titulo  { font-size: 16px; }
}

/* Entrada suave: el bloque aparece después de cargar la página. */
.tdf-recos-slot.is-listo .tdf-recos {
	animation: tdfRecosEntrar 0.35s ease both;
}

@keyframes tdfRecosEntrar {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tdf-recos-slot.is-listo .tdf-recos { animation: none; }
}

/* ---------- Gracias: "Completá tu kit" en grilla + scroll infinito ----------
   Mismo ancho que el panel de transferencia: 800px en tablet, 1300px en
   desktop. La página de gracias tiene un contenedor más angosto, así que se
   centra respecto de la pantalla con margin negativo calculado (sin
   transform, para no romper la modal ni los tooltips de las tarjetas).
   Las columnas las da .tdfml-grid de blossom-carousel.css: 5 / 3 / 2. */

.tdf-recos--gracias {
	--tdf-recos-w: 100%;
	width: var(--tdf-recos-w);
	margin: 2.5rem 0 3rem;
}

@media (min-width: 768px) {
	.tdf-recos--gracias {
		--tdf-recos-w: min(800px, calc(100vw - 40px));
		margin-left: calc(50% - var(--tdf-recos-w) / 2);
		margin-right: 0;
	}
}

@media (min-width: 1025px) {
	.tdf-recos--gracias {
		--tdf-recos-w: min(1300px, calc(100vw - 60px));
	}
}

.woocommerce-order-received .tdf-recos--gracias .tdf-recos__inner {
	max-width: none;
	padding: 0;
}

@media (max-width: 767px) {
	.woocommerce-order-received .tdf-recos--gracias .tdf-recos__inner {
		padding: 0 12px;
	}
}

.tdf-recos__oc-txt {
	margin: 0.5rem 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
	letter-spacing: 0;
}

.tdf-recos__oc-txt strong {
	color: #1a1a1a;
}

/* Cuenta regresiva de la compra en 1 click: pastilla naranja + reloj,
   mismo estilo que el contador del flash sale. */
.tdf-oc-badge {
	display: inline-flex;
	align-items: stretch;
	margin: 0.7rem 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	border: 1px solid #f28c00;
	border-radius: 4px;
	overflow: hidden;
}

.tdf-oc-badge__txt {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	background: #f28c00;
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}

.tdf-oc-badge__txt svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

.tdf-oc-badge__reloj {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	background: #fff;
	color: #1a1a1a;
}

.tdf-oc-badge__reloj strong {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-width: 62px;
}

.tdf-oc-badge__reloj svg {
	width: 16px;
	height: 16px;
	color: #999;
}

/* Últimos 5 minutos: pasa al rojo de la marca y late. */
.tdf-oc-badge.is-urgente {
	border-color: #CC1939;
}

.tdf-oc-badge.is-urgente .tdf-oc-badge__txt {
	background: #CC1939;
}

.tdf-oc-badge.is-urgente .tdf-oc-badge__reloj strong {
	color: #CC1939;
	animation: tdfOcLatido 1s ease-in-out infinite;
}

@keyframes tdfOcLatido {
	50% { opacity: 0.45; }
}

@media (max-width: 420px) {
	.tdf-oc-badge { font-size: 12.5px; }
	.tdf-oc-badge__txt,
	.tdf-oc-badge__reloj { padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.tdf-oc-badge.is-urgente .tdf-oc-badge__reloj strong { animation: none; }
}

/* Mientras la compra en 1 click está abierta, "Comprar ahora" paga con
   Mercado Pago a precio de lista: la pastilla de transferencia confundiría.
   Al cerrarse la ventana vuelve a verse. */
.tdf-recos--oc .tdfml-transfer {
	display: none;
}

.tdf-recos--gracias .tdf-recos-oculta {
	display: none;
}

.tdf-recos--gracias .tdfml-buy.is-oc-cargando {
	opacity: 0.75;
	pointer-events: none;
	font-size: 12px;
}

.tdf-recos__mas {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 0 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #777;
}

.tdf-recos__mas.is-visible {
	display: flex;
}

.tdf-recos__spin {
	width: 18px;
	height: 18px;
	border: 2px solid #e5e5e5;
	border-top-color: #CC1939;
	border-radius: 50%;
	animation: tdfRecosGirar 0.8s linear infinite;
}

@keyframes tdfRecosGirar {
	to { transform: rotate(360deg); }
}

.tdf-recos__centinela {
	height: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.tdf-recos__spin { animation: none; }
}

/* Aviso dentro del editor de Elementor. */
.tdf-recos-editor {
	padding: 24px;
	border: 1px dashed #CC1939;
	border-radius: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #1a1a1a;
	text-align: center;
	background: #fff;
}