/* ==========================================================================
   Delisinú · Checkout clásico — layout 2 columnas + "Tu pedido" estético
   ========================================================================== */

/* Ocultar código postal (se auto-rellena por JS para rutear el envío) */
#billing_postcode_field,
#shipping_postcode_field,
.delisinu-hidden-postcode { display: none !important; }

/* --- Variables de estilo --- */
.woocommerce-checkout {
	--dl-card-bg: #ffffff;
	--dl-border: #ececec;
	--dl-border-soft: #f2f2f2;
	--dl-muted: #6b7280;
	--dl-accent: #2e7d32;      /* verde Delisinú (ajustable) */
	--dl-radius: 14px;
	--dl-shadow: 0 8px 30px rgba(17, 24, 39, .07);
}

/* ==========================================================================
   1) LAYOUT DE DOS COLUMNAS (escritorio ≥ 992px)
   ========================================================================== */
@media (min-width: 992px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		column-gap: 40px;
		align-items: start;
	}
	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		min-width: 0;
	}
	/* Encabezado + tarjeta agrupados en un contenedor sticky (los une el JS) */
	.woocommerce-checkout form.checkout #dl-order-col {
		grid-column: 2;
		position: sticky;
		top: 24px;
		align-self: start;
	}
	.woocommerce-checkout form.checkout #dl-order-col #order_review_heading { margin-top: 0 !important; }
	/* #customer_details ES el .col2-set: apilar facturación y envío en 1 sola columna ancha */
	.woocommerce-checkout #customer_details { display: block; }
	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		padding: 0 !important;
	}
	.woocommerce-checkout #customer_details .col-2 { margin-top: 22px; }
}

/* ==========================================================================
   2) TARJETA "TU PEDIDO" (todas las pantallas)
   ========================================================================== */
.woocommerce-checkout #order_review_heading {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 14px;
	letter-spacing: -.01em;
}
.woocommerce-checkout #order_review {
	background: var(--dl-card-bg);
	border: 1px solid var(--dl-border);
	border-radius: var(--dl-radius);
	padding: 26px 26px 28px;
	box-shadow: var(--dl-shadow);
}

/* ==========================================================================
   2b) TARJETA DEL FORMULARIO (misma estética que "Tu pedido")
   ========================================================================== */
.woocommerce-checkout #customer_details {
	background: var(--dl-card-bg);
	border: 1px solid var(--dl-border);
	border-radius: var(--dl-radius);
	padding: 28px 28px 12px;
	box-shadow: var(--dl-shadow);
}
.woocommerce-checkout #customer_details h3 {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 20px;
	letter-spacing: -.01em;
}
/* Encabezado del envío/notas (col-2) con separación superior */
.woocommerce-checkout #customer_details .woocommerce-additional-fields h3,
.woocommerce-checkout #customer_details .shipping_address h3 {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--dl-border-soft);
}
/* Tarjeta del cupón, mismo lenguaje visual */
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
	background: var(--dl-card-bg);
	border: 1px solid var(--dl-border) !important;
	border-radius: var(--dl-radius);
	padding: 22px 24px;
	box-shadow: var(--dl-shadow);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	border-radius: 10px;
}

/* Tabla de productos / totales */
.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	margin: 0;
	background: transparent;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	border: 0;
	padding: 12px 0;
	vertical-align: top;
}
.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dl-muted);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--dl-border-soft);
}
.woocommerce-checkout #order_review .cart_item td {
	border-bottom: 1px solid var(--dl-border-soft);
}
.woocommerce-checkout #order_review .product-name {
	font-weight: 600;
	line-height: 1.35;
}
.woocommerce-checkout #order_review .product-quantity {
	color: var(--dl-muted);
	font-weight: 400;
}
.woocommerce-checkout #order_review .product-total { text-align: right; white-space: nowrap; }
.woocommerce-checkout #order_review .cart-subtotal th,
.woocommerce-checkout #order_review .cart-subtotal td,
.woocommerce-checkout #order_review .woocommerce-shipping-totals th,
.woocommerce-checkout #order_review .woocommerce-shipping-totals td {
	color: #374151;
}
.woocommerce-checkout #order_review .woocommerce-shipping-totals td { text-align: right; }
.woocommerce-checkout #order_review tfoot th { font-weight: 600; }
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	border-top: 2px solid var(--dl-border);
	padding-top: 16px;
	font-size: 1.15rem;
	font-weight: 800;
}
.woocommerce-checkout #order_review .order-total td { text-align: right; color: var(--dl-accent); }

/* Métodos de pago */
.woocommerce-checkout #order_review #payment {
	background: transparent;
	margin-top: 18px;
	border-radius: 12px;
}
.woocommerce-checkout #order_review #payment ul.payment_methods {
	border: 1px solid var(--dl-border-soft);
	border-radius: 12px;
	padding: 14px 16px;
	background: #fafafa;
	margin: 0 0 16px;
}
.woocommerce-checkout #order_review #payment ul.payment_methods li { line-height: 1.5; }

/* ePayco: separar la tira de logos de métodos de pago del texto (que no quede montada) */
.woocommerce-checkout li.payment_method_epayco label {
	display: block;
	line-height: 1.45;
}
.woocommerce-checkout li.payment_method_epayco label img {
	display: block;
	margin-top: 12px;
	max-width: 100%;
	height: auto;
}
.woocommerce-checkout #order_review #payment div.payment_box {
	background: #fff;
	border-radius: 8px;
	font-size: .9rem;
}
.woocommerce-checkout #order_review #payment div.payment_box::before { display: none; }

/* Botón Realizar pedido */
.woocommerce-checkout #order_review #place_order,
.woocommerce-checkout #place_order {
	width: 100%;
	display: block;
	padding: 16px 22px;
	font-size: 1.05rem;
	font-weight: 700;
	border-radius: 12px;
	line-height: 1.2;
	margin-top: 4px;
	transition: transform .06s ease, filter .15s ease;
}
.woocommerce-checkout #place_order:hover { filter: brightness(1.06); }
.woocommerce-checkout #place_order:active { transform: translateY(1px); }

/* Estado "actualizando" (feedback en vivo) */
.woocommerce-checkout #order_review.processing { opacity: .55; transition: opacity .2s ease; }

/* ==========================================================================
   3) CAMPOS DEL FORMULARIO — un poco más limpios
   ========================================================================== */
.woocommerce-checkout .form-row label { font-weight: 600; font-size: .92rem; margin-bottom: 6px; }

/* Campos: fondo blanco (no “deshabilitado”), borde nítido, texto oscuro */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection,
.woocommerce-checkout .select2-container--default .select2-selection--single {
	background-color: #ffffff !important;
	border: 1px solid #cbd0d8 !important;
	color: #111827 !important;
	border-radius: 10px !important;
	min-height: 46px;
	box-shadow: none !important;
}
/* País y otros select2: altura fija + texto centrado (que "Colombia" no se corte con el borde) */
.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: 48px !important;
	min-height: 48px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 34px 0 12px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #111827 !important;
	line-height: 1.4 !important;
	padding: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
	right: 8px !important;
}
.woocommerce-checkout .select2-container { width: 100% !important; }
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder { color: #9aa1ab; }

/* Foco: borde de acento + halo suave */
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection,
.woocommerce-checkout .select2-container--open .select2-selection {
	border-color: var(--dl-accent) !important;
	box-shadow: 0 0 0 3px rgba(46, 125, 50, .14) !important;
	outline: none !important;
}
.woocommerce-checkout #customer_details h3 { letter-spacing: -.01em; }

/* ==========================================================================
   4) RESPONSIVE (móvil / tablet < 992px)
   ========================================================================== */
@media (max-width: 991px) {
	.woocommerce-checkout #order_review_heading { margin-top: 28px; }
	.woocommerce-checkout #order_review { padding: 22px 18px 24px; }
}
@media (max-width: 480px) {
	.woocommerce-checkout #order_review { border-radius: 12px; padding: 18px 14px 20px; }
	.woocommerce-checkout #order_review_heading { font-size: 1.2rem; }
}