/**
 * Checkout ordenado (E-04).
 *
 *   - En el celular, «Tu pedido» plegado arriba de todo: el cliente ve qué
 *     compra y cuánto paga antes de llenar nueve campos. En escritorio no hace
 *     falta, porque el resumen ya está a la vista en la columna de la derecha.
 *   - El cupón deja de ser lo primero de la página y pasa, plegado, debajo del
 *     total (en todas las pantallas): así no manda a nadie a buscar códigos
 *     antes de comprar, y quien tiene uno lo encuentra donde mira el precio.
 *
 * Los dos son <details> nativos: sin JavaScript se abren y se cierran igual.
 */

.woocommerce-checkout .bp-resumen {
	display: none;
}

@media ( max-width: 767px ) {

	.woocommerce-checkout .bp-resumen {
		display: block;
		margin: 0 0 22px;
		border: 1px solid var( --bp-color-gray-bg );
		border-radius: 12px;
		background: var( --bp-color-white );
		font-family: var( --bp-font );
		color: var( --bp-color-heading-woostify );
	}

	.woocommerce-checkout .bp-resumen .bp-resumen__cabecera {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 16px;
		list-style: none;
		cursor: pointer;
	}

	.bp-resumen__cabecera::-webkit-details-marker {
		display: none;
	}

	.bp-resumen__titulo {
		font-size: 15px;
		font-weight: 700;
	}

	.bp-resumen__cuenta {
		font-size: 13px;
		color: var( --bp-color-heading );
	}

	.bp-resumen__total {
		margin-left: auto;
		font-size: 16px;
		font-weight: 700;
	}

	.bp-resumen__flecha {
		flex: none;
		width: 18px;
		height: 18px;
		fill: none;
		stroke: var( --bp-color-brand );
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform var( --bp-transition ) var( --bp-easing );
	}

	.bp-resumen[open] .bp-resumen__flecha {
		transform: rotate( 180deg );
	}

	.woocommerce-checkout .bp-resumen .bp-resumen__lineas {
		margin: 0;
		padding: 0 16px;
		border-top: 1px solid var( --bp-color-gray-bg );
		list-style: none;
	}

	.woocommerce-checkout .bp-resumen .bp-resumen__linea {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 12px 0;
		border-bottom: 1px solid var( --bp-color-gray-bg );
		font-size: 14px;
		line-height: 1.35;
	}

	.bp-resumen__linea img {
		flex: none;
		width: 48px;
		height: 48px;
		border-radius: 8px;
		object-fit: cover;
	}

	.bp-resumen__nombre {
		flex: 1;
		min-width: 0;
	}

	.bp-resumen__cantidad {
		color: var( --bp-color-heading );
		white-space: nowrap;
	}

	.bp-resumen__precio {
		font-weight: 600;
		white-space: nowrap;
	}

	.woocommerce-checkout .bp-resumen .bp-resumen__pie {
		display: flex;
		justify-content: space-between;
		margin: 0;
		padding: 10px 16px 14px;
		font-size: 13px;
		color: var( --bp-color-heading );
	}
}

/* Si el tema pintara el cupón de arriba por otro lado, también se esconde. */
.bp-checkout-ordenado .woocommerce-form-coupon-toggle,
.bp-checkout-ordenado form.checkout_coupon {
	display: none;
}

/* El cupón, plegado debajo del total. */
.woocommerce-checkout .bp-cupon {
	margin: 4px 0 20px;
	font-family: var( --bp-font );
	color: var( --bp-color-heading-woostify );
}

.woocommerce-checkout .bp-cupon > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	list-style: none;
	cursor: pointer;
}

.bp-cupon > summary::-webkit-details-marker {
	display: none;
}

.woocommerce-checkout .bp-cupon .bp-cupon__avisos:not(:empty) {
	margin-top: 8px;
	font-size: 14px;
}

.woocommerce-checkout .bp-cupon .bp-cupon__cuerpo {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.woocommerce-checkout .bp-cupon .bp-cupon__cuerpo input {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 16px;
}

.woocommerce-checkout .bp-cupon .bp-cupon__cuerpo button {
	flex: none;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var( --bp-color-brand );
	border-radius: 999px;
	background: var( --bp-color-white );
	color: var( --bp-color-brand );
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Campos a 16 px en el celular (v1.17.3)
 *
 * Con letra de menos de 16 px el iPhone hace zoom al tocar un campo y la
 * página queda corrida hacia un lado. Diego lo vio el 07/10/2026: Woostify
 * deja los campos del checkout en 14 px. A 16 px el iPhone no hace zoom.
 * El cupón ya estaba en 16 px. Gana por especificidad (0,4,2), no por orden.
 * ------------------------------------------------------------------ */

@media ( max-width: 767px ) {
	body.bp-checkout-ordenado form.checkout .form-row .input-text,
	body.bp-checkout-ordenado form.checkout .form-row select,
	body.bp-checkout-ordenado form.checkout .form-row textarea,
	body.bp-checkout-ordenado .select2-container .select2-search__field {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------ *
 * E-06 (v1.19.0): términos arriba de los medios de pago
 *
 * La casilla estaba al final, a 13 px, y el botón fijo del celular se podía
 * tocar sin verla (T-01, 14/10/2026). Ahora va sola antes de los medios de
 * pago, a 24 px, sin caja alrededor (Diego, 14/10: con caja y aviso de
 * privacidad quedaba demasiado grande). Toda la fila es la etiqueta: tocar el
 * texto también la marca. Si falta, aparece la caja roja con el aviso debajo
 * (assets/js/checkout-pago.js).
 * ------------------------------------------------------------------ */

.bp-checkout-ordenado .bp-terminos {
	display: flow-root;
	margin: 0 0 16px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 12px;
	font-family: var( --bp-font );
	transition: border-color var( --bp-transition-fast ) var( --bp-easing ), background-color var( --bp-transition-fast ) var( --bp-easing );
}

.bp-checkout-ordenado .bp-terminos .woocommerce-terms-and-conditions-wrapper {
	margin: 0;
}

/* El tema hace flotar las filas del formulario: flotando, la caja no la
   contaba y el texto se salía por debajo, encima de los medios de pago. */
.bp-checkout-ordenado .bp-terminos .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.bp-checkout-ordenado .bp-terminos label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var( --bp-color-heading-woostify );
	cursor: pointer;
}

.bp-checkout-ordenado .bp-terminos #terms {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var( --bp-color-primary );
}

.bp-checkout-ordenado .bp-terminos.bp-terminos--falta {
	padding: 12px 14px;
	border-color: var( --bp-color-error );
	background: var( --bp-color-error-bg );
}

.bp-checkout-ordenado .bp-terminos .bp-terminos__falta {
	margin: 8px 0 0 34px;
	font-size: 14px;
	font-weight: 600;
	color: var( --bp-color-error );
}

/* ------------------------------------------------------------------ *
 * E-06: Mercado Pago en una línea
 *
 * Del recuadro de Checkout Pro queda solo el cuadrito «Te llevaremos a
 * Mercado Pago», con su logo; su segunda línea la cambia checkout-pago.js. El
 * título, los beneficios y los íconos de tarjetas se llevaban la mayoría de los
 * toques sin efecto (la gente esperaba escribir la tarjeta ahí).
 *
 * La hoja de Mercado Pago (mp-plugins-components.min.css, 8.9.6) los pinta con
 * #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content …
 * (especificidad 1,3,0). Por eso aquí va el mismo ID: 1,4,0 le gana.
 * ------------------------------------------------------------------ */

/* «*Hasta 6 cuotas sin intereses…», debajo del recuadro de Mercado Pago (la
   agrega checkout-pago.js fuera del recuadro, donde no llega la hoja de Mercado
   Pago, que borraba este margen). */
.bp-checkout-ordenado .payment_method_woo-mercado-pago-basic .bp-mp-cuotas {
	margin: 14px 2px 0;
	font-family: var( --bp-font );
	font-size: 13px;
	line-height: 1.5;
	color: var( --bp-color-heading );
}

.bp-checkout-ordenado #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-benefits-title,
.bp-checkout-ordenado #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-benefits,
.bp-checkout-ordenado #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-payment-methods {
	display: none;
}

/* ------------------------------------------------------------------ *
 * E-06: aviso del carrito al volver de Mercado Pago sin pagar
 * ------------------------------------------------------------------ */

.woocommerce-cart .bp-cancelado__texto {
	display: block;
}

.woocommerce-cart .bp-cancelado__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

/* Woostify esconde en el celular todo a.button dentro de un aviso
   (@media max-width 600px: .woocommerce-info a.button { display: none }, 0,2,1).
   Estos dos son la salida del aviso: 0,3,1 los muestra. */
.woocommerce-cart .bp-cancelado__botones a.button {
	display: inline-block;
	float: none;
	margin: 0;
}

/* La transferencia, como segunda opción: borde blanco sobre el azul del aviso. */
.woocommerce-cart .bp-cancelado__botones a.bp-cancelado__transferencia {
	border: 1px solid var( --bp-color-white );
	background: transparent;
	color: var( --bp-color-white );
}

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

	.bp-resumen__flecha,
	.bp-checkout-ordenado .bp-terminos {
		transition: none;
	}
}