/* ============================================================
   Checkout — clon pixel a pixel del CheckoutShell del prototipo.
   Izquierda blanca (contenido máx 616 pegado al centro) ·
   derecha #F2F5F9 a sangre con borde. Tokens del sistema.
   ============================================================ */

:root {
	--ck-left-pad: clamp(24px, calc(50vw - 576px), 50vw);
	--ck-right-pad: clamp(24px, calc(50vw - 452px), 50vw);
}

html, body.tpr-checkout { margin: 0; padding: 0; }
body.tpr-checkout {
	background: #fff;
	font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #3F4653;
	-webkit-font-smoothing: antialiased;
}

/* Mitad derecha gris a pantalla completa. */
.tpr-ck { position: relative; z-index: 0; min-height: 100vh; overflow-x: clip; }
.tpr-ck::after {
	content: ""; position: fixed; top: 0; bottom: 0; left: 50%; right: 0;
	background: #F2F5F9; border-left: 1px solid #E8EAEE; z-index: -1;
}

/* ---------- Cabecera (mitad izquierda) ---------- */
.tpr-ck-header {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	width: 50%; box-sizing: border-box;
	padding: 40px 48px 0 var(--ck-left-pad);
}
.tpr-ck-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.tpr-ck-mark { width: 52px; height: auto; }
.tpr-ck-wordmark { display: block; line-height: .98; }
.tpr-ck-w1 { display: block; font-size: 15px; font-weight: 700; letter-spacing: .01em; color: #00132E; }
.tpr-ck-w2 { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: #E01917; }
.tpr-ck-w3 { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 500; color: #6B7280; }
.tpr-ck-secure { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #6B7280; }

/* ---------- Migas ---------- */
.tpr-ck-crumbs {
	display: flex; align-items: center; gap: 8px;
	width: 50%; box-sizing: border-box;
	padding: 24px 48px 0 var(--ck-left-pad);
	font-size: 13px;
}
.tpr-ck-crumbs a { color: #6B7280; text-decoration: none; }
.tpr-ck-crumbs a:hover { color: #E01917; }
.tpr-ck-crumbs span { color: #6B7280; }
.tpr-ck-crumbs span:nth-of-type(1) { color: #00132E; font-weight: 600; }

/* ---------- Avisos ---------- */
.tpr-ck .woocommerce-notices-wrapper,
.tpr-ck .woocommerce-NoticeGroup {
	width: 50%; box-sizing: border-box;
	padding: 12px 48px 0 var(--ck-left-pad);
}
.tpr-ck .woocommerce-message,
.tpr-ck .woocommerce-error,
.tpr-ck .woocommerce-info {
	list-style: none; border: 1px solid #E8EAEE; border-radius: 6px;
	background: #F7F7F8; color: #3F4653; font-size: 13px;
	padding: 12px 16px; margin: 0 0 8px;
}
.tpr-ck .woocommerce-error li { margin: 0; }
.tpr-ck .woocommerce-message::before,
.tpr-ck .woocommerce-error::before,
.tpr-ck .woocommerce-info::before { display: none; }
.tpr-ck .woocommerce-message .button { float: right; background: transparent; border: 0; color: #E01917; font-weight: 600; cursor: pointer; padding: 0; }

/* ---------- Form: reparto en las dos mitades ---------- */
.tpr-ck form.woocommerce-checkout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "detalles resumen" "detalles pago" "acciones pago";
	align-items: start;
	column-gap: 0;
	margin: 0;
}
.tpr-ck #customer_details {
	grid-area: detalles;
	box-sizing: border-box;
	padding: 8px 48px 40px var(--ck-left-pad);
}
.tpr-ck #order_review_heading { grid-area: resumen; margin: 0; padding: 0; height: 0; overflow: hidden; }
.tpr-ck #order_review {
	grid-area: pago;
	box-sizing: border-box;
	padding: 14px var(--ck-right-pad) 72px 48px;
	position: sticky; top: 0;
}

/* Ruido fuera. */
.tpr-ck .woocommerce-form-login-toggle,
.tpr-ck .woocommerce-form-login,
.tpr-ck .woocommerce-form-coupon-toggle,
.tpr-ck .woocommerce-form-coupon,
.tpr-ck .woocommerce-account-fields,
.tpr-ck .woocommerce-privacy-policy-text,
.tpr-ck .woocommerce-shipping-fields h3,
.tpr-ck .woocommerce-additional-fields { display: none !important; }

/* Woo envuelve billing en .col-1 al 48%: a lo ancho. */
.tpr-ck .col2-set { width: 100% !important; display: block; }
.tpr-ck .col2-set .col-1,
.tpr-ck .col2-set .col-2 { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }

/* ---------- Campos (TextField del sistema) ---------- */
.tpr-ck .woocommerce-billing-fields > h3:not(.tpr-ck-h) { display: none; }
.tpr-ck .form-row label.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tpr-ck form .form-row, .tpr-ck form .form-row-first, .tpr-ck form .form-row-last { margin: 0 0 12px !important; padding: 0 !important; display: block; float: none !important; width: 100% !important; box-sizing: border-box; }
.tpr-ck .form-row label {
	display: block; margin: 0 0 5px;
	font-size: 13px; font-weight: 600; color: #00132E;
}
.tpr-ck .form-row label .optional { color: #9AA1AC; font-weight: 400; }
.tpr-ck .form-row label .required { color: #E01917; text-decoration: none; }
.tpr-ck .woocommerce-input-wrapper { display: block; }
.tpr-ck .form-row input.input-text,
.tpr-ck .form-row textarea,
.tpr-ck .form-row select,
.tpr-ck .select2-container--default .select2-selection--single {
	width: 100% !important; height: 48px; box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid #D5D9E0; border-radius: 6px;
	background: #fff;
	font-family: inherit; font-size: 14px; color: #00132E;
	outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.tpr-ck .form-row input.input-text:focus,
.tpr-ck .form-row select:focus { border-color: #1D4A88; box-shadow: 0 0 0 3px rgba(29, 74, 136, .28); }
.tpr-ck .form-row ::placeholder { color: #9AA1AC; }
.tpr-ck .select2-container--default .select2-selection__rendered { line-height: 46px; color: #00132E; padding-left: 0; }
.tpr-ck .select2-container--default .select2-selection__arrow { height: 46px; }

/* Rejilla del paso Información (pares del prototipo). */
.tpr-ck .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.tpr-ck .woocommerce-billing-fields__field-wrapper .tpr-w-calle { grid-column: 1; }
.tpr-ck .woocommerce-billing-fields__field-wrapper .tpr-w-interior { grid-column: 2; }
.tpr-ck #billing_address_1_field.tpr-w-calle { grid-column: 1; }
.tpr-ck #billing_address_2_field.tpr-w-interior { grid-column: 2; }
.tpr-ck .woocommerce-billing-fields__field-wrapper .form-row { grid-column: 1 / -1; }
.tpr-ck .woocommerce-billing-fields__field-wrapper .form-row-first,
.tpr-ck .woocommerce-billing-fields__field-wrapper #billing_first_name_field { grid-column: 1; }
.tpr-ck .woocommerce-billing-fields__field-wrapper .form-row-last,
.tpr-ck .woocommerce-billing-fields__field-wrapper #billing_last_name_field { grid-column: 2; }

/* Encabezados de sección (h3 reales, ordenados en el grid). */
.tpr-ck .tpr-ck-h { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: #00132E; grid-column: 1 / -1; }
.tpr-ck .tpr-ck-h-envio { margin-top: 18px; }
.tpr-ck .tpr-ck-h-envio-dir { grid-column: 1 / -1; margin-top: 18px; order: 5; }
.tpr-ck .woocommerce-billing-fields__field-wrapper > .form-row { order: 10; }
.tpr-ck #billing_email_field { order: 1 !important; }
.tpr-ck #billing_first_name_field { order: 11; }
.tpr-ck #billing_last_name_field { order: 12; }
.tpr-ck #billing_company_field { order: 13; }
.tpr-ck #billing_country_field { order: 14; }
.tpr-ck #billing_address_1_field { order: 15; }
.tpr-ck #billing_address_2_field { order: 16; }
.tpr-ck #billing_postcode_field { order: 17; }
.tpr-ck #billing_city_field { order: 18; }
.tpr-ck #billing_state_field { order: 19; }
.tpr-ck #billing_phone_field { order: 20; }
.tpr-ck .tpr-ck-h-contacto { display: flex; align-items: baseline; justify-content: space-between; }
.tpr-ck .tpr-ck-login { font-size: 13px; font-weight: 400; color: #E01917; text-decoration: none; }

/* País único: se ve como campo, no como texto suelto. */
.tpr-ck #billing_country_field .woocommerce-input-wrapper {
	display: flex; align-items: center; height: 48px;
	border: 1px solid #D5D9E0; border-radius: 6px;
	padding: 0 14px; background: #F7F7F8;
	font-size: 14px; color: #00132E;
}
.tpr-ck #billing_country_field strong { font-weight: 500; }

/* ---------- Resumen (CheckoutSummary del prototipo) ---------- */
.tpr-ck .woocommerce-checkout-review-order-table {
	width: 100%; border: 0 !important; border-collapse: collapse; table-layout: auto;
	border-radius: 0 !important; background: transparent !important;
}
.tpr-ck .woocommerce-checkout-review-order-table tr,
.tpr-ck .woocommerce-checkout-review-order-table tbody,
.tpr-ck .woocommerce-checkout-review-order-table tfoot { background: transparent !important; }
.tpr-ck .woocommerce-checkout-review-order-table thead { display: none; }
.tpr-ck .woocommerce-checkout-review-order-table th,
.tpr-ck .woocommerce-checkout-review-order-table td {
	border: 0 !important; border-bottom: 1px solid #E8EAEE !important;
	padding: 13px 0; font-size: 14px; color: #3F4653;
	background: transparent; vertical-align: middle; text-align: left;
}
.tpr-ck .woocommerce-checkout-review-order-table .product-name { width: 62%; }
.tpr-ck .woocommerce-checkout-review-order-table .product-name .product-quantity { display: none; }
.tpr-ck .woocommerce-checkout-review-order-table .product-total { text-align: right; font-weight: 600; color: #00132E; white-space: nowrap; }

/* Item con miniatura + burbuja (markup del filtro en tpr-core). */
.tpr-ck .tpr-ck-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.tpr-ck .tpr-ck-thumb {
	position: relative; width: 64px; height: 64px;
	background: #fff; border: 1px solid #E8EAEE; border-radius: 6px; display: block;
}
.tpr-ck .tpr-ck-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.tpr-ck .tpr-ck-qty {
	position: absolute; top: -8px; right: -8px;
	min-width: 21px; height: 21px; padding: 0 6px;
	border-radius: 999px; background: #00132E; color: #fff;
	font-size: 11px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
.tpr-ck .tpr-ck-name { display: block; font-size: 13px; font-weight: 600; color: #00132E; line-height: 1.35; }
.tpr-ck .tpr-ck-meta { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #6B7280; }

/* Filas de totales. */
.tpr-ck .cart-subtotal th, .tpr-ck .cart-subtotal td,
.tpr-ck .tax-total th, .tpr-ck .tax-total td,
.tpr-ck .woocommerce-shipping-totals th { font-size: 14px; }
.tpr-ck .woocommerce-shipping-totals td { font-size: 13px; }
.tpr-ck ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.tpr-ck ul#shipping_method li { margin: 0 0 8px; display: flex; align-items: flex-start; gap: 8px; }
.tpr-ck ul#shipping_method input[type="radio"] { accent-color: #13386F; margin-top: 3px; }
.tpr-ck ul#shipping_method label { font-size: 13px; color: #3F4653; font-weight: 400; }
.tpr-ck ul#shipping_method .woocommerce-Price-amount { font-weight: 600; color: #00132E; }

.tpr-ck .order-total th, .tpr-ck .order-total td { border-bottom: 0; padding-top: 16px; }
.tpr-ck .order-total th { font-size: 18px; font-weight: 700; color: #00132E; }
.tpr-ck .order-total td { text-align: right; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #00132E; }
.tpr-ck .order-total td small { font-size: 12px; color: #6B7280; font-weight: 400; }

/* ---------- Pago (RadioCard del prototipo) ---------- */
.tpr-ck #payment { background: transparent; border-radius: 0; }
.tpr-ck #payment ul.payment_methods { list-style: none; margin: 18px 0 0; padding: 0; border: 0; }
.tpr-ck #payment ul.payment_methods li {
	border: 1px solid #E8EAEE; border-radius: 6px; background: #fff;
	padding: 15px 16px; margin: 0 0 -1px; list-style: none;
}
.tpr-ck #payment ul.payment_methods li:has(input:checked) {
	border-color: #1D4A88; box-shadow: 0 0 0 3px rgba(29, 74, 136, .28);
	position: relative; z-index: 1; border-radius: 6px;
}
.tpr-ck #payment ul.payment_methods li input[type="radio"] { accent-color: #13386F; margin-right: 10px; }
.tpr-ck #payment ul.payment_methods li label { display: inline; font-size: 13px; font-weight: 600; color: #00132E; cursor: pointer; }
.tpr-ck #payment div.payment_box {
	margin: 12px 0 0; padding: 12px 14px;
	background: #F7F7F8; border-radius: 6px;
	font-size: 13px; color: #3F4653;
}
.tpr-ck #payment div.payment_box::before { display: none; }

.tpr-ck #payment .place-order { padding: 0; margin-top: 18px; }
.tpr-ck #place_order {
	width: 100%; height: 52px;
	background: #E01917; color: #fff;
	border: 0; border-radius: 6px;
	font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
	cursor: pointer;
	transition: background-color .18s;
}
.tpr-ck #place_order:hover { background: #B01310; }

/* Nota bajo el total (escudo). */
.tpr-ck .woocommerce-terms-and-conditions-wrapper { margin: 12px 0 0; font-size: 12px; color: #6B7280; }

/* ---------- Pie (mitad izquierda) ---------- */
.tpr-ck-footer {
	display: flex; gap: 20px; flex-wrap: wrap;
	width: 50%; box-sizing: border-box;
	margin-top: -24px;
	padding: 20px 48px 72px var(--ck-left-pad);
	border-top: 1px solid #E8EAEE;
	font-size: 12px;
}
.tpr-ck-footer a { color: #6B7280; text-decoration: none; }
.tpr-ck-footer a:hover { color: #E01917; }

/* Ocultar flotante de WhatsApp aquí (checkout minimalista). */
body.tpr-checkout [data-ui="whatsapp-float"] { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.tpr-ck::after { display: none; }
	.tpr-ck-header, .tpr-ck-crumbs, .tpr-ck-footer,
	.tpr-ck .woocommerce-notices-wrapper, .tpr-ck .woocommerce-NoticeGroup { width: 100%; padding-left: 24px; padding-right: 24px; }
	.tpr-ck form.woocommerce-checkout { grid-template-columns: 1fr; grid-template-areas: "resumen" "pago" "detalles" "acciones"; }
	.tpr-ck #customer_details { padding: 8px 24px 40px; }
	.tpr-ck #order_review_heading { padding: 8px 24px 0; }
	.tpr-ck #order_review { padding: 14px 24px 24px; position: static; background: #F2F5F9; border-radius: 8px; margin: 8px 24px; }
}


/* ============ Flujo de 3 pasos ============ */

.tpr-ck[data-step="envio"] #customer_details,
.tpr-ck[data-step="pago"] #customer_details,
.tpr-ck[data-step="envio"] .tpr-ck-s1-actions,
.tpr-ck[data-step="pago"] .tpr-ck-s1-actions { display: none; }
.tpr-ck[data-step="envio"] .tpr-ck-s2 { display: block; }
.tpr-ck[data-step="pago"] .tpr-ck-s3 { display: block; }
.tpr-ck .tpr-ck-s2[hidden], .tpr-ck .tpr-ck-s3[hidden] { display: none; }
.tpr-ck[data-step="envio"] .tpr-ck-s2[hidden] { display: block; }
.tpr-ck[data-step="pago"] .tpr-ck-s3[hidden] { display: block; }

/* Los pasos viven dentro del área izquierda del form. */
.tpr-ck .tpr-ck-s2, .tpr-ck .tpr-ck-s3 { grid-area: detalles; box-sizing: border-box; padding: 8px 48px 40px var(--ck-left-pad); }
.tpr-ck .tpr-ck-s1-actions {
	grid-area: acciones;
	width: 100%; box-sizing: border-box;
	padding: 0 48px 40px var(--ck-left-pad);
	margin-top: -16px;
}
.tpr-ck .tpr-ck-s1-actions .tpr-ck-actions { margin-top: 0; }

/* Migas: paso actual. */
.tpr-ck-crumbs span.is-current { color: #00132E; font-weight: 600; }
.tpr-ck-crumbs span:nth-of-type(1):not(.is-current) { color: #6B7280; font-weight: 400; }

/* Caja de revisión (CkReviewRow). */
.tpr-ck-review { border: 1px solid #E8EAEE; border-radius: 6px; margin: 0 0 32px; }
.tpr-ck-review-row { display: flex; align-items: center; gap: 16px; padding: 13px 16px; border-bottom: 1px solid #E8EAEE; }
.tpr-ck-review-row:last-child { border-bottom: 0; }
.tpr-ck-review-label { flex: 0 0 84px; font-size: 13px; color: #6B7280; }
.tpr-ck-review-value { flex: 1; font-size: 13px; color: #00132E; }
.tpr-ck button.tpr-ck-change, .tpr-ck-change {
	border: 0 !important; background: transparent !important; box-shadow: none !important;
	cursor: pointer; font-family: inherit !important; font-size: 13px !important;
	color: #E01917 !important; padding: 0 !important; height: auto !important; width: auto !important;
	font-weight: 400 !important; border-radius: 0 !important;
}
.tpr-ck-change:hover { color: #B01310; }

/* Métodos de envío como RadioCards. */
#tpr-envio-slot ul { list-style: none; margin: 0; padding: 0; }
#tpr-envio-slot li {
	border: 1px solid #E8EAEE; border-radius: 6px; background: #fff;
	padding: 15px 16px; margin: 0 0 -1px; list-style: none;
	display: flex; align-items: center; gap: 12px;
}
#tpr-envio-slot li:has(input:checked) { border-color: #1D4A88; box-shadow: 0 0 0 3px rgba(29, 74, 136, .28); position: relative; z-index: 1; }
#tpr-envio-slot input[type="radio"] { accent-color: #13386F; margin: 0; flex: 0 0 auto; }
#tpr-envio-slot label { flex: 1; display: flex !important; align-items: center; justify-content: space-between !important; gap: 12px; font-size: 13px; font-weight: 600; color: #00132E; cursor: pointer; margin: 0 !important; padding: 0 !important; }
#tpr-envio-slot .tpr-ship-name { flex: 1; }
#tpr-envio-slot .tpr-ship-price { margin-left: auto !important; font-weight: 600; color: #00132E; white-space: nowrap; flex: 0 0 auto; }
#tpr-envio-slot .tpr-ship-price .woocommerce-Price-amount { font-weight: 600; color: #00132E; }
.tpr-ck-note { margin: 14px 0 0; font-size: 12px; color: #6B7280; }
.tpr-ck-pay-note { margin: -6px 0 14px; font-size: 13px; }

/* Acciones: volver + continuar. */
.tpr-ck-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
.tpr-ck button.tpr-ck-back, a.tpr-ck-back, .tpr-ck-back {
	border: 0 !important; background: transparent !important; box-shadow: none !important;
	cursor: pointer; font-family: inherit !important; font-size: 13px !important;
	color: #00132E !important; text-decoration: none; padding: 0 !important;
	height: auto !important; width: auto !important; font-weight: 400 !important; border-radius: 0 !important;
}
.tpr-ck-back:hover { color: #E01917; }
.tpr-ck-continue {
	height: 48px; padding: 0 24px;
	background: #E01917; color: #fff;
	border: 0; border-radius: 6px;
	font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
	cursor: pointer; transition: background-color .18s;
}
.tpr-ck-continue:hover { background: #B01310; }

/* Paso 3: pago en la columna izquierda; «Pagar ahora» en la fila de acciones. */
#tpr-pago-slot #payment { margin: 0; }
#tpr-pago-slot .place-order { display: none; }
.tpr-ck .tpr-ck-s3-actions #place_order { width: auto; padding: 0 28px; }
.tpr-ck[data-step="pago"] #order_review { padding-top: 14px; }

/* Campo inválido. */
.tpr-ck .woocommerce-invalid input, .tpr-ck .woocommerce-invalid select { border-color: #E01917 !important; }