/* Checkout (WooCommerce Blocks) — paleta del sitio: verde #064e3b sobre fondo crema.
   La página usa plantilla Elementor Canvas, así que este CSS es el único que viste
   el checkout; los selectores wc-block-* son los del checkout en React de Woo. */

body.woocommerce-checkout {
	background: #f7f5f0;
}

/* ---------- Encabezado propio (lo inyecta LRG_Woo via render_block) ---------- */

.lrg-checkout-encabezado {
	max-width: 960px;
	margin: 0 auto;
	padding: 34px 16px 6px;
	text-align: center;
}

.lrg-checkout-encabezado .lrg-checkout-marca {
	margin: 0 0 4px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7a9b8e;
	font-weight: 700;
}

.lrg-checkout-encabezado h1 {
	margin: 0 0 6px;
	font-size: 26px;
	color: #064e3b;
}

.lrg-checkout-encabezado p {
	margin: 0;
	font-size: 14px;
	color: #666;
}

/* ---------- Contenedor general ---------- */

.wp-block-woocommerce-checkout {
	max-width: 960px;
	/* !important: en producción el bloque cuelga directo del body y otra regla
	   dejaba el margen en 0 — las dos columnas quedaban pegadas a la izquierda
	   con todo el aire a la derecha (reportado por la dueña). */
	margin: 0 auto !important;
	padding: 18px 16px 60px;
	color: #333;
}

/* Cada paso del formulario como tarjeta blanca. Los !important compiten con el
   CSS propio del checkout de Woo, que pone background/border en los pasos. */
.wc-block-components-checkout-step {
	background: #fff !important;
	border: 1px solid #ebe7df !important;
	border-radius: 14px;
	padding: 22px 24px !important;
	margin-bottom: 18px !important;
	box-shadow: 0 1px 3px rgba(6, 78, 59, 0.04);
}

.wc-block-components-checkout-step__heading {
	margin-top: 0 !important;
}

.wc-block-components-title,
.wc-block-components-checkout-step__title {
	color: #064e3b !important;
	font-size: 17px !important;
}

.wc-block-components-checkout-step__description {
	color: #888;
	font-size: 13px;
}

/* ---------- Campos ---------- */

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select .components-custom-select-control__button,
.wc-block-components-form .wc-block-components-text-input input {
	border-radius: 8px !important;
	border-color: #ddd7cc !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus {
	border-color: #064e3b !important;
	box-shadow: 0 0 0 2px rgba(6, 78, 59, 0.15) !important;
	outline: none;
}

/* ---------- Métodos de pago ---------- */

/* Sin overflow:hidden — recortaba el tooltip del código de seguridad (CVV)
   del formulario de Mercado Pago (bug reportado por la dueña). */
.wc-block-components-radio-control-accordion-option {
	border-radius: 10px;
}

/* Resaltar en verde la opción de pago elegida */
.wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-color: #064e3b !important;
	box-shadow: 0 0 0 1px #064e3b;
}

.wc-block-components-radio-control__input:checked {
	border-color: #064e3b !important;
	background-color: #064e3b !important;
}

/* ---------- Botón de pagar ---------- */

.wc-block-components-checkout-place-order-button {
	background: #064e3b !important;
	border: none !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 16px 24px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	width: 100%;
	transition: background 0.15s ease;
}

.wc-block-components-checkout-place-order-button:hover {
	background: #053d2e !important;
}

/* ---------- Resumen del pedido (sidebar) ---------- */

/* Columna del resumen más ancha: Woo la deja en 35% y con nuestro nivel de
   detalle (decoración, comisión, saldo) las filas largas no cabían y bajaban
   de línea — el resumen entero se veía apretado. Solo aplica cuando las dos
   columnas van lado a lado (is-large); en móvil se apilan y no cambia nada. */
.wc-block-components-sidebar-layout.is-large .wc-block-components-main {
	width: 56% !important;
	padding-right: 24px !important;
}

.wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar {
	width: 44% !important;
}

.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: #fff;
	border: 1px solid #ebe7df;
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 1px 3px rgba(6, 78, 59, 0.04);
}

.wc-block-components-sidebar .wc-block-components-checkout-order-summary__title {
	color: #064e3b;
	font-weight: 700;
}

/* El producto es interno: sin foto, sin badge de cantidad, sin descripción */
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__quantity,
.wc-block-components-product-metadata__description {
	display: none !important;
}

.wc-block-components-order-summary-item__description {
	padding-left: 0 !important;
}

.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__individual-price {
	display: none !important;
}

/* No usamos cupones ni tiene sentido el subtotal con un solo ítem */
.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-subtotal-block {
	display: none !important;
}

/* Datos de la reserva como filas etiqueta · valor. Ojo: Woo NO usa <ul>/<li>
   aquí: es un <div> con <span> por dato y separadores " / " aria-hidden. */
.wc-block-components-product-details {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 10px 0 0 !important;
	padding: 12px 0 0 !important;
	border-top: 1px dashed #e5e0d5;
}

.wc-block-components-product-details > span {
	display: flex;
	flex-wrap: wrap; /* si etiqueta y valor no caben juntos, el valor baja de línea */
	justify-content: space-between;
	gap: 2px 12px;
	/* !important: el tema de producción infla la letra de estas filas (~19px)
	   y con eso etiqueta+valor dejaban de caber juntos — el resumen entero se
	   veía "recogido" con cada valor en su propia línea. A 13px todo cabe. */
	font-size: 13px !important;
	line-height: 1.5 !important;
	min-width: 0;
}

.wc-block-components-product-details > span > span {
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* Separadores " / " entre datos: sobran al ser filas */
.wc-block-components-product-details > span > span[aria-hidden='true'] {
	display: none;
}

.wc-block-components-product-details__name {
	color: #888;
	font-weight: 500 !important;
	text-transform: none !important;
}

.wc-block-components-product-details__value {
	color: #333;
	font-weight: 600;
	text-align: right;
	min-width: 0;
	margin-left: auto; /* cuando baja de línea queda alineado a la derecha */
}

/* Total = lo que se paga hoy, en verde y grande */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: #064e3b;
	font-size: 15px !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #064e3b;
	font-size: 22px !important;
	font-weight: 800 !important;
}

/* Nota del saldo (la inyecta checkout.js debajo del total) */
.lrg-nota-saldo {
	margin-top: 12px;
	padding: 10px 12px;
	background: #eef5f0;
	border: 1px solid #d5e6dc;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #064e3b;
}

@media (min-width: 800px) {
	.wc-block-components-sidebar {
		position: sticky;
		top: 20px;
	}
}

/* ---------- Contador del hold (esquina inferior izquierda; la derecha
   la ocupa el botón flotante de WhatsApp) ---------- */

.lrg-hold-contador {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #d5e6dc;
	border-left: 4px solid #064e3b;
	border-radius: 12px;
	padding: 12px 18px 12px 14px;
	box-shadow: 0 6px 24px rgba(6, 78, 59, 0.18);
	color: #064e3b;
}

.lrg-hold-icono {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
}

.lrg-hold-textos {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.lrg-hold-titulo {
	font-size: 11.5px;
	font-weight: 600;
	color: #5b7a6e;
	letter-spacing: 0.02em;
}

.lrg-hold-tiempo {
	font-size: 22px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
}

/* Quedan ≤ 5 min: ámbar */
.lrg-hold-contador.lrg-hold-alerta {
	border-left-color: #b45309;
	color: #92400e;
}

.lrg-hold-contador.lrg-hold-alerta .lrg-hold-titulo {
	color: #b45309;
}

/* Quedan ≤ 2 min: rojo y pulso suave */
.lrg-hold-contador.lrg-hold-critico {
	border-left-color: #b3261e;
	border-color: #f3cccc;
	color: #b3261e;
	animation: lrg-hold-pulso 1.6s ease-in-out infinite;
}

.lrg-hold-contador.lrg-hold-critico .lrg-hold-titulo {
	color: #b3261e;
}

.lrg-hold-contador.lrg-hold-vencido {
	animation: none;
	border-left-color: #b3261e;
	color: #b3261e;
}

.lrg-hold-contador.lrg-hold-vencido .lrg-hold-tiempo {
	font-size: 14px;
	font-weight: 700;
}

.lrg-hold-contador.lrg-hold-vencido .lrg-hold-tiempo a {
	color: #b3261e;
	text-decoration: underline;
}

@keyframes lrg-hold-pulso {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

@media (max-width: 600px) {
	.lrg-hold-contador {
		left: 12px;
		bottom: 12px;
		padding: 9px 14px 9px 11px;
	}
	.lrg-hold-tiempo {
		font-size: 18px;
	}
	.lrg-hold-icono {
		width: 21px;
		height: 21px;
	}
}

/* ---------- Modal "¿Sigues ahí?" (inactividad en el checkout) ---------- */

.lrg-inactivo-fondo {
	position: fixed;
	inset: 0;
	z-index: 100001;
	background: rgba(15, 30, 24, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lrg-inactivo-modal {
	background: #fff;
	border-radius: 16px;
	padding: 28px 26px;
	max-width: 400px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.lrg-inactivo-titulo {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
	color: #064e3b;
}

.lrg-inactivo-texto {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #555;
}

.lrg-inactivo-segundos {
	color: #b3261e;
	font-variant-numeric: tabular-nums;
}

.lrg-inactivo-modal button.lrg-inactivo-boton {
	background: #064e3b !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 13px 26px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	cursor: pointer;
	width: 100%;
}

.lrg-inactivo-modal button.lrg-inactivo-boton:hover {
	background: #053d2e !important;
}

/* ---------- Página de gracias / recibo (order-received) ---------- */

.woocommerce-order-received .woocommerce {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 16px 60px;
	color: #333;
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
	background: #eef5f0;
	border: 1px solid #cfe6d8;
	border-radius: 14px;
	padding: 20px 24px;
	font-size: 15.5px;
	line-height: 1.6;
	color: #333;
	margin: 6px 0 22px;
}

.lrg-gracias-confirmada {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: #064e3b;
	margin-bottom: 6px;
}

/* Datos del pedido (número, fecha, correo, total, método) */
.woocommerce-order-received ul.woocommerce-thankyou-order-details {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	margin: 0 0 26px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid #ebe7df;
	border-radius: 12px;
	font-size: 13px;
}

.woocommerce-order-received ul.woocommerce-thankyou-order-details li {
	border: none;
	padding: 0;
	margin: 0;
	color: #888;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.04em;
}

.woocommerce-order-received ul.woocommerce-thankyou-order-details li strong {
	display: block;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	color: #1a1a1a;
	margin-top: 2px;
}

.woocommerce-order-received h2 {
	color: #064e3b;
	font-size: 20px;
	margin: 26px 0 12px;
}

.woocommerce-order-received table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #ebe7df !important;
	border-radius: 14px;
	overflow: hidden;
	font-size: 14px;
}

.woocommerce-order-received table.woocommerce-table--order-details th,
.woocommerce-order-received table.woocommerce-table--order-details td {
	border: none !important;
	border-bottom: 1px solid #f0ede6 !important;
	padding: 12px 16px !important;
	text-align: left;
	background: transparent !important;
}

.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
	color: #666;
	font-weight: 600;
}

.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: none !important;
}

/* Metas del renglón (Alojamiento / Llegada / Salida / Huéspedes) */
.woocommerce-order-received .wc-item-meta {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	font-size: 13px;
	color: #666;
}

.woocommerce-order-received .wc-item-meta li {
	margin: 2px 0;
}

.woocommerce-order-received .wc-item-meta .wc-item-meta-label {
	font-weight: 600;
	color: #888;
}

.woocommerce-order-received address {
	background: #fff;
	border: 1px solid #ebe7df;
	border-radius: 12px;
	padding: 16px 20px;
	font-style: normal;
	line-height: 1.7;
	color: #555;
}

/* Botón "Cancelar reserva" dentro del contador del hold */
.lrg-hold-contador button.lrg-hold-cancelar {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin-top: 3px;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	color: #b3261e !important;
	text-decoration: underline;
	cursor: pointer;
	align-self: flex-start;
}

.lrg-hold-contador button.lrg-hold-cancelar:hover {
	color: #8c1d17 !important;
}


/* ---- Blindaje de tema: el plugin se ve igual en cualquier tema (en
   producción el tema imponía una fuente monoespaciada y estilos de enlace
   que rompían los botones). ---- */
.wp-block-woocommerce-checkout, .wp-block-woocommerce-checkout *,
.lrg-checkout-encabezado, .lrg-checkout-encabezado *,
.lrg-hold-contador, .lrg-hold-contador *,
.lrg-inactivo-modal, .lrg-inactivo-modal *,
.woocommerce-order-received .woocommerce, .woocommerce-order-received .woocommerce * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	box-sizing: border-box;
	/* el tema de producción pone white-space:break-spaces y los saltos del
	   HTML se vuelven espacio renderizado (botones gigantes) */
	white-space: normal !important;
}

/* Los valores del detalle SÍ pueden partirse en los espacios: con nowrap,
   la fila más larga ("Especial: pedida de mano — $120.000") hacía la tabla
   del resumen más ancha que la tarjeta y todo se desbordaba a la derecha
   (visto en producción, donde la columna es más angosta). Las cifras nunca
   se parten por dentro porque no tienen espacios. */
.wc-block-components-product-details__value {
	white-space: normal !important;
}

/* El precio del renglón del producto ($274.843) se oculta: es redundante
   (el total verde "Total a pagar hoy" de abajo muestra el mismo monto) y su
   columna de altura completa le robaba ~60px de ancho al detalle — en
   columnas angostas partía el precio en "$" / "274.843" y desbordaba la
   tarjeta (visto en producción). */
.wc-block-components-order-summary-item__total-price {
	display: none !important;
}

/* Y la fila del producto nunca puede ser más ancha que la tarjeta. El
   contenedor de los ítems es display:table y se encogía a su contenido,
   aplastando el valor de la fila más larga ("$9.843" salía partido en tres
   líneas): ancho completo siempre. */
.wc-block-components-order-summary__content {
	width: 100% !important;
}

.wc-block-components-order-summary-item {
	max-width: 100% !important;
	width: 100% !important;
}

.wc-block-components-order-summary-item__description {
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

/* ============================================================
   Carrito (misma hoja que el checkout: es la página de reintento
   cuando el pago no se completa en la pasarela). ---- */

.wp-block-woocommerce-cart {
	max-width: 960px;
	margin: 0 auto !important; /* mismo centrado forzado que el checkout */
	padding: 0 16px 60px;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	box-sizing: border-box;
	white-space: normal !important;
}

/* Botón "Proceder al pago" en verde de marca (el tema lo pintaba oscuro). */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart a.wc-block-components-button {
	background-color: #064e3b !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart a.wc-block-components-button:hover {
	background-color: #053d2e !important;
}

/* Botón "Buscar disponibilidad" del carrito vacío (lo inserta carrito.js). */
.wp-block-woocommerce-cart a.lrg-carrito-buscar {
	display: table !important;
	margin: 14px auto 30px !important;
	background-color: #064e3b !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 13px 26px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.wp-block-woocommerce-cart a.lrg-carrito-buscar:hover {
	background-color: #053d2e !important;
}

/* Etiquetas del detalle del producto (Alojamiento:, Decoración:, ...): sin
   partirse — con un valor largo (la decoración) el flex aplastaba la
   etiqueta a ~9px y se leía en vertical, letra por letra. */
.wc-block-components-product-details__name {
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	margin-right: 12px !important;
}

.wc-block-components-product-details__value {
	text-align: right;
	overflow-wrap: anywhere;
}

/* Carrito vacío: sin la carita triste de tienda genérica. */
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__image {
	display: none !important;
}

/* Botón "Volver al inicio" al final de la página de gracias. */
.lrg-gracias-volver {
	text-align: center;
	margin: 34px 0 10px !important;
}

a.lrg-gracias-volver-boton {
	display: inline-block !important;
	background-color: #064e3b !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 13px 30px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

a.lrg-gracias-volver-boton:hover {
	background-color: #053d2e !important;
	color: #fff !important;
}