/*
 * Liquid Glass — Carrito y Checkout
 *
 * ALCANCE ACORDADO CON EL CLIENTE (confirmado explícitamente antes de tocar
 * esta zona, por ser un flujo crítico de venta con pasarelas reales):
 *   - SOLO CSS sobre las clases que WooCommerce ya imprime.
 *   - NO se copia ninguna plantilla PHP a astra-child/woocommerce/.
 *   - NO se agrega JavaScript aquí (a diferencia del header) para no
 *     interferir con los scripts de actualización de totales/pasarelas
 *     de pago de WooCommerce/Izipay/Mercado Pago/PayPal.
 *   - No se usa "display: none" en ningún elemento: solo fondo, bordes,
 *     radios, sombras y espaciados. Los mensajes de error/aviso de
 *     WooCommerce (.woocommerce-error/.woocommerce-message/.woocommerce-info)
 *     conservan sus colores semánticos (rojo/verde/azul) para no perder
 *     contraste ni claridad en un paso crítico.
 *
 * CONFIRMADO EN PRODUCCIÓN: el sitio usa el markup CLÁSICO de WooCommerce
 * (table.shop_table, form.checkout, #order_review) — NO los bloques nativos
 * (wp-block-woocommerce-*). Por eso ya no se incluyen reglas para esos
 * bloques (no tenían efecto en este sitio).
 *
 * ShopEngine agrega sus propias clases envolviendo este mismo markup
 * clásico, pero no tengo confirmados los nombres exactos de esas clases
 * (ej. stepper de cantidad, toggle de cupón, etc. si ShopEngine los
 * reemplaza por widgets propios). Las reglas de abajo apuntan a las clases
 * clásicas de WooCommerce, que siguen funcionando aunque ShopEngine las
 * envuelva en divs adicionales. Si algún elemento puntual de ShopEngine no
 * queda estilizado (por ejemplo, un stepper de cantidad con botones +/-
 * propios de ShopEngine en vez del <input class="qty">), pásame la clase
 * real y la agrego.
 *
 * Breakpoints: ver assets/css/liquid-glass.css (móvil ≤544px, tablet ≤976px).
 *
 * ALINEACIÓN con las plantillas de página: colores (CTA ámbar), tipografía
 * (Montserrat/Montserrat Black vía la regla global de liquid-glass.css) y
 * radios/sombras ya comparten el mismo lenguaje visual sin cambios
 * adicionales. A propósito NO se agregó el eyebrow ni el scroll-reveal que sí
 * tienen tienda/producto/las 5 plantillas: esta zona se mantiene sin JS y sin
 * hooks nuevos, por ser el flujo de pago — ver el acuerdo arriba.
 */

/* ============================================================
   Carrito (cart.php clásico)
   ============================================================ */

.woocommerce-cart table.cart,
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.woocommerce-cart table.cart,
	.woocommerce-cart .cart-collaterals .cart_totals {
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
	}
}

.woocommerce-cart table.cart {
	padding: 8px;
	border-spacing: 0;
}

.woocommerce-cart table.cart tr.cart_item {
	border-bottom: 1px solid var(--glass-border);
}

.woocommerce-cart table.cart td.product-thumbnail img {
	border-radius: calc(var(--glass-radius) - 12px);
}

.woocommerce-cart table.cart .quantity .qty {
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.7);
	padding: 8px 12px;
	width: 4em;
	text-align: center;
}

.woocommerce-cart table.cart a.remove {
	border-radius: 999px;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	padding: 20px;
}

.woocommerce-cart .cart-collaterals .cart_totals .shop_table {
	border-collapse: collapse;
}

/* Calculadora de envío dentro de cart_totals */
.woocommerce-cart .shipping-calculator-form,
.woocommerce-cart .woocommerce-shipping-methods {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 14px;
	padding: 12px;
	margin-top: 8px;
}

/* Formulario de cupón (carrito y checkout) */
.woocommerce-cart .woocommerce-form-coupon,
.woocommerce-checkout .woocommerce-form-coupon {
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	padding: 16px;
}

.woocommerce-checkout .checkout-coupon-toggle .showcoupon {
	border-radius: 999px;
}

/*
 * Botones (actualizar carrito, aplicar cupón, ir a pagar, "Realizar pedido")
 * BUG corregido: solo cambiaba "background" a un blanco translúcido sin
 * fijar "color", heredando el texto blanco por defecto de Astra →
 * invisible. Ahora usa el mismo tratamiento CTA (degradado ámbar + texto
 * negro) que ".liquid-glass-btn-pill", para que todos los botones del sitio
 * tengan la misma identidad visual. "#place_order" no tiene su propia regla
 * de color/fondo: hereda esta (es ".woocommerce-checkout .button"), y se
 * distingue del resto por ser ancho completo y de mayor tamaño/peso (ver
 * la regla "#place_order" más abajo).
 */
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-cart input.button,
.woocommerce-checkout input.button {
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: var(--glass-cta-gradient);
	box-shadow: var(--glass-cta-glow);
	color: var(--glass-cta-text);
	padding: 12px 24px;
	font-weight: 600;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-cart .button:hover,
	.woocommerce-checkout .button:hover {
		transform: translateY(-2px);
		box-shadow: var(--glass-cta-glow-hover);
		color: var(--glass-cta-text);
	}
}

/* ============================================================
   Checkout (checkout.php clásico, form.checkout)
   ============================================================ */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	padding: 20px;
	margin-bottom: 20px;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields {
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
	}
}

/* Inputs de formulario del checkout */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	border-radius: 12px;
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.7);
	padding: 10px 14px;
}

/* --- Resumen del pedido (#order_review) y métodos de pago --- */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-payment {
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	padding: 20px;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.woocommerce-checkout #order_review,
	.woocommerce-checkout .woocommerce-checkout-payment {
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
	}
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	border-collapse: collapse;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-subtotal,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.shipping {
	border-bottom: 1px solid var(--glass-border);
}

/* Cada método de pago (radio + logo de pasarela) como fila de vidrio suave */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	border-radius: 16px;
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.5);
	padding: 12px 14px;
	margin-bottom: 8px;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method .payment_box {
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.6);
	margin-top: 8px;
}

/* Botón final "Realizar pedido" — se destaca más que el resto */
.woocommerce-checkout #place_order {
	width: 100%;
	padding: 16px 24px;
	font-weight: 700;
	font-size: 1.05rem;
}

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 976px) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout .woocommerce-checkout-payment,
	.woocommerce-cart .cart-collaterals .cart_totals {
		padding: 16px;
	}
}

@media (max-width: 544px) {
	/* La tabla del carrito no cabe completa en móvil: WooCommerce/Astra ya la
	   adaptan a formato de tarjetas apiladas; aquí solo suavizamos bordes. */
	.woocommerce-cart table.cart,
	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout .woocommerce-checkout-payment {
		padding: 12px;
		border-radius: calc(var(--glass-radius) - 8px);
	}

	.woocommerce-checkout #place_order {
		font-size: 1rem;
	}
}