/**
 * Fortium Conversion Kit — resumen del pedido en carrito y checkout.
 *
 * Ordena la línea de la reposición automática y el bloque "Programa de reposición
 * automática" que imprime templates/checkout/recurring-totals.php.
 *
 * Sobre los !important: el checkout de CartFlows aplica su propio layout a la celda del
 * producto con reglas más específicas que las de aquí. Sin ellos, la celda vuelve a
 * disponerse en horizontal y los bloques de la reposición quedan uno al lado del otro.
 *
 * @package Fortium\Conversion_Kit
 */

/* -------------------------------------------------------------------------
   1. Ocultar "Prueba gratuita: X días"
   Es el mecanismo interno con el que retrasamos el primer cobro. El cliente
   no tiene que verlo: para él sólo existe una fecha de reposición.
   ------------------------------------------------------------------------- */
.woocommerce-checkout-review-order-table .woocommerce-subscriptions-product-details__trial,
.wcf-cartflows-review-order-wrapper .woocommerce-subscriptions-product-details__trial {
	display: none !important;
}

/* -------------------------------------------------------------------------
   2. La celda del producto
   CartFlows le aplica un layout horizontal a esta celda, y por eso el nombre
   quedaba comprimido y los bloques de la reposición terminaban uno al lado del
   otro. Se la rearma como una fila que envuelve:

       [ foto + nombre ]  [ × 2 ]
       [ tarjeta de la reposición, a todo lo ancho ]
   ------------------------------------------------------------------------- */
.woocommerce-checkout-review-order-table td.product-name {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	width: auto !important;
	line-height: 1.45 !important;
	vertical-align: top !important;
	text-align: left !important;
}

/* Foto + nombre, en una fila */
.woocommerce-checkout-review-order-table td.product-name .wcf-product-image {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
}

.woocommerce-checkout-review-order-table td.product-name .wcf-product-thumbnail {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.woocommerce-checkout-review-order-table td.product-name .wcf-product-thumbnail img {
	display: block !important;
	width: 46px !important;
	height: 46px !important;
	max-width: none !important;
	object-fit: cover !important;
	border-radius: 6px !important;
}

.woocommerce-checkout-review-order-table td.product-name .wcf-product-name {
	flex: 1 1 auto !important;
	width: auto !important;
	margin: 0 !important;
	font-weight: 600 !important;
}

/* La cantidad, al lado del nombre y discreta */
.woocommerce-checkout-review-order-table td.product-name .product-quantity {
	flex: 0 0 auto !important;
	display: inline-block !important;
	width: auto !important;
	margin: 0 0 0 10px !important;
	padding: 0 !important;
	font-weight: 400 !important;
	font-size: 0.88em !important;
	color: #6b6b6b !important;
	white-space: nowrap !important;
}

/* -------------------------------------------------------------------------
   3. Los datos de la reposición, como un bloque propio
   Son dos elementos hermanos que WooCommerce Subscriptions imprime sueltos
   (precio recurrente y fecha). Se los une con el mismo fondo y la misma barra
   lateral para que se lean como una sola tarjeta.
   ------------------------------------------------------------------------- */
.woocommerce-checkout-review-order-table td.product-name .wcs-checkout-item-price {
	display: block !important;
	flex: 0 0 100% !important;
	float: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 9px 0 0 !important;
	padding: 9px 12px 7px !important;
	background: #fff6f6 !important;
	border-left: 3px solid #d90429 !important;
	border-radius: 0 !important;
	font-size: 0.95em !important;
	font-weight: 600 !important;
	text-align: left !important;
}

.woocommerce-checkout-review-order-table td.product-name .wcs-checkout-item-price .subscription-details {
	font-weight: 400 !important;
	color: #6b6b6b !important;
}

/* La fecha de la primera reposición */
.woocommerce-checkout-review-order-table td.product-name dl.variation {
	display: block !important;
	flex: 0 0 100% !important;
	float: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 12px 10px !important;
	background: #fff6f6 !important;
	border-left: 3px solid #d90429 !important;
	border-radius: 0 !important;
	font-size: 0.9em !important;
	text-align: left !important;
}

/* WooCommerce flota el <dt>, y eso es lo que descoloca la fecha. */
.woocommerce-checkout-review-order-table td.product-name dl.variation dt {
	display: block !important;
	float: none !important;
	clear: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 400 !important;
	font-size: 0.95em !important;
	color: #6b6b6b !important;
}

.woocommerce-checkout-review-order-table td.product-name dl.variation dd {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
}

.woocommerce-checkout-review-order-table td.product-name dl.variation dd p {
	margin: 0 !important;
	font-weight: 600 !important;
}

/* -------------------------------------------------------------------------
   4. La columna "Subtotal" de la línea de reposición
   Muestra el precio de cada reposición, que NO se cobra hoy. Sin la
   aclaración se confunde con un segundo producto que se está comprando.
   (Si no te convence, borrá este bloque y desaparece.)
   ------------------------------------------------------------------------- */
.woocommerce-checkout-review-order-table tr.cart_item:has(.wcs-checkout-item-price) td.product-total {
	vertical-align: top !important;
	white-space: nowrap !important;
}

.woocommerce-checkout-review-order-table tr.cart_item:has(.wcs-checkout-item-price) td.product-total::after {
	content: "no se cobra hoy";
	display: block !important;
	margin-top: 3px !important;
	font-size: 0.72em !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: #6b6b6b !important;
	white-space: normal !important;
}

/* -------------------------------------------------------------------------
   5. Bloque "Programa de reposición automática" (pie de la tabla)
   ------------------------------------------------------------------------- */
.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__heading th {
	padding-top: 20px !important;
	padding-bottom: 6px !important;
	border-top: 1px solid rgba(20, 20, 20, 0.1) !important;
	font-size: 1em !important;
	text-align: left !important;
}

.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__price td,
.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__date td {
	text-align: right !important;
	white-space: normal !important;
	overflow: visible !important;
}

.woocommerce-checkout-review-order-table .ftm-replenish-totals__schedule {
	display: block !important;
	margin-top: 1px !important;
	font-size: 0.85em !important;
	color: #6b6b6b !important;
}

.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__note td {
	padding-top: 8px !important;
	text-align: left !important;
}

.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__note small {
	display: block !important;
	font-size: 0.82em !important;
	line-height: 1.45 !important;
	color: #6b6b6b !important;
}

/* Que ningún importe se parta a la mitad */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount {
	white-space: nowrap !important;
}

/* -------------------------------------------------------------------------
   6. Celular
   En pantallas angostas las dos columnas del pie se aprietan y los valores
   quedan cortados ("$ 21.5", "28 de d"). Se apilan etiqueta y valor.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {

	.woocommerce-checkout-review-order-table {
		table-layout: auto !important;
		width: 100% !important;
	}

	.woocommerce-checkout-review-order-table tfoot th,
	.woocommerce-checkout-review-order-table tfoot td {
		white-space: normal !important;
		overflow: visible !important;
		overflow-wrap: anywhere !important;
	}

	/* Las dos filas de etiqueta larga pasan a ocupar el ancho completo, conservando
	   la sangria lateral que tienen el resto de las filas de la tabla. */
	.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__price th,
	.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__price td,
	.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__date th,
	.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__date td {
		display: block !important;
		width: auto !important;
		text-align: left !important;
	}

	.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__price th,
	.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__date th {
		padding-bottom: 0 !important;
		font-size: 0.9em !important;
		font-weight: 400 !important;
		color: #6b6b6b !important;
	}

	.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__price td,
	.woocommerce-checkout-review-order-table tr.ftm-replenish-totals__date td {
		padding-top: 1px !important;
		font-weight: 600 !important;
	}

	.woocommerce-checkout-review-order-table .ftm-replenish-totals__schedule {
		display: inline !important;
		margin-left: 6px !important;
		font-weight: 400 !important;
	}

	/* La foto, un poco más chica para dejarle aire al nombre. */
	.woocommerce-checkout-review-order-table td.product-name .wcf-product-thumbnail img {
		width: 40px !important;
		height: 40px !important;
	}

	.woocommerce-checkout-review-order-table td.product-name {
		padding-right: 8px !important;
	}

	.woocommerce-checkout-review-order-table td.product-total {
		vertical-align: top !important;
		white-space: nowrap !important;
	}
}