/* ============================================================
   Checkout — woocommerce/checkout/form-checkout.php
   Layout 2 cols, sticky aside, secciones numeradas, stepper.
   Mantenemos las clases de Woo (.form-row, .input-text, etc.) y
   sólo refinamos su look para alinearlo con el rebuild.
   ============================================================ */

.mk-checkout {
  padding: var(--mk-sp-6) 0 var(--mk-sp-8);
  background: var(--mk-bg-alt);
  min-height: 60vh;
}

/* ---------- Head ---------- */

.mk-checkout-head { margin-bottom: var(--mk-sp-6); }

.mk-checkout-title {
  font-size: var(--mk-text-3xl);
  margin: var(--mk-sp-3) 0 var(--mk-sp-4);
  position: relative;
  padding-bottom: var(--mk-sp-3);
}

.mk-checkout-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--mk-gold-500);
  margin-top: var(--mk-sp-3);
}

/* ---------- Gate "must be logged in" ---------- */

.mk-checkout-gate {
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-left: 4px solid var(--mk-gold-500);
  border-radius: var(--mk-radius);
  padding: var(--mk-sp-6) var(--mk-sp-7);
  max-width: 720px;
}

.mk-checkout-gate p {
  font-size: var(--mk-text-md);
  color: var(--mk-ink-700);
  margin: 0 0 var(--mk-sp-3);
  line-height: 1.5;
}

.mk-checkout-gate__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-sp-3);
  margin-top: var(--mk-sp-5);
}

/* ---------- Layout 2 cols ---------- */

.mk-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-sp-5);
  align-items: start;
}

@media (min-width: 1024px) {
  .mk-checkout-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: var(--mk-sp-6);
  }
}

.mk-checkout-main { min-width: 0; display: flex; flex-direction: column; gap: var(--mk-sp-5); }

/* Aside (resumen del pedido) en flujo natural — sin sticky.
   En B2B con pocos items el sticky generaba overlap con contenido
   inferior y no aportaba valor real al flujo de checkout. */

/* ---------- Secciones numeradas ---------- */

.mk-checkout-section {
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  overflow: hidden;
}

.mk-checkout-section__head {
  display: flex;
  align-items: center;
  gap: var(--mk-sp-3);
  padding: var(--mk-sp-4) var(--mk-sp-5);
  border-bottom: 1px solid var(--mk-bg-soft);
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

.mk-checkout-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--mk-green-700);
  color: #fff;
  border-radius: 50%;
  font-family: var(--mk-font-display);
  font-weight: 700;
  font-size: var(--mk-text-md);
  flex-shrink: 0;
}

.mk-checkout-section__title {
  font-size: var(--mk-text-lg);
  margin: 0;
  color: var(--mk-ink-900);
  line-height: 1.2;
}

.mk-checkout-section__body {
  padding: var(--mk-sp-5);
  display: flow-root; /* contiene cualquier float interno en su propio FC */
}

/* Reset float bleed después del row Cód.+Teléfono.
   El snippet checkout-customizations.php:414-426 floatea
   #billing_phone_code_field y #billing_phone_field sin clear posterior.
   Los address fields se cuelan al lado horizontalmente y son clipados
   por el sidebar. Forzamos clear en cada wrapper de address. */
#billing_address_1_field,
#billing_address_2_field,
#billing_address_3_field,
#billing_city_field {
  clear: both;
}

/* Segmented control para radios "Boleta / Factura"
   El campo billing_document lo agrega el plugin woocommerce_inputs/
   con markup default <input type="radio"> + <label>. Sin estilos
   custom caen en defaults del browser (círculos chiquitos grises).
   Lo convertimos en un par de pills lado a lado. */
#billing_document_field .woocommerce-input-wrapper {
  display: inline-flex;
  gap: var(--mk-sp-2);
  flex-wrap: wrap;
}

#billing_document_field input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#billing_document_field label {
  display: inline-flex;
  align-items: center;
  padding: var(--mk-sp-2) var(--mk-sp-4);
  border: 1.5px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  background: #fff;
  font-weight: 500;
  font-size: var(--mk-text-sm);
  color: var(--mk-ink-700);
  cursor: pointer;
  transition: all var(--mk-trans);
  user-select: none;
  min-height: 38px;
  text-transform: none;
  letter-spacing: 0;
}

#billing_document_field input[type="radio"]:checked + label,
#billing_document_field label:has(input:checked) {
  background: var(--mk-green-100);
  border-color: var(--mk-green-700);
  color: var(--mk-green-800);
  font-weight: 700;
}

#billing_document_field label:hover { border-color: var(--mk-green-700); }

/* ---------- Trust block bajo el aside ---------- */

.mk-checkout-trust {
  margin-top: var(--mk-sp-4);
  padding: var(--mk-sp-4);
  background: var(--mk-green-100);
  border-radius: var(--mk-radius);
  border-left: 3px solid var(--mk-green-500);
}

.mk-checkout-trust p {
  margin: 0 0 var(--mk-sp-2);
  font-size: var(--mk-text-sm);
  color: var(--mk-ink-700);
}

.mk-checkout-trust p:last-child { margin-bottom: 0; }

/* ============================================================
   Skin de los componentes nativos de Woo dentro del checkout
   (mantienen funcionalidad/snippets, sólo refinamos look).
   ============================================================ */

.woocommerce-checkout h3 {
  font-size: var(--mk-text-md);
  margin: 0 0 var(--mk-sp-3);
  color: var(--mk-green-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--mk-font-display);
}

/* Filas de form */
.woocommerce-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 var(--mk-sp-3);
}

.woocommerce-checkout .form-row label {
  font-size: var(--mk-text-sm);
  color: var(--mk-ink-700);
  font-weight: 500;
}

.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label .optional {
  color: var(--mk-gold-700);
  font-weight: 700;
  margin-left: 4px;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.select2-selection--single {
  width: 100%;
  padding: var(--mk-sp-3);
  font-size: var(--mk-text-md);
  font-family: inherit;
  border: 1.5px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  background: #fff;
  color: var(--mk-ink-900);
  transition: border-color var(--mk-trans);
  min-height: 42px;
  box-sizing: border-box;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none;
  border-color: var(--mk-green-700);
}

/* Select2 (lo usa Woo para país/estado) */
.select2-container .select2-selection--single {
  height: auto;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4;
  color: var(--mk-ink-900);
  padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 8px;
}

/* Filas en 2 cols cuando hay form-row-first / -last (default Woo) */
@media (min-width: 768px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: calc(50% - var(--mk-sp-2));
    display: inline-flex;
    vertical-align: top;
  }
  .woocommerce-checkout .form-row-first { margin-right: var(--mk-sp-2); }
  .woocommerce-checkout .form-row-last  { margin-left: var(--mk-sp-2); }
}

/* Toggle "ship to different address" */
.woocommerce-shipping-fields h3#ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: var(--mk-sp-2);
  cursor: pointer;
  font-weight: 500;
  text-transform: none;
  color: var(--mk-ink-900);
  letter-spacing: 0;
}

.woocommerce-shipping-fields h3#ship-to-different-address input[type="checkbox"] {
  accent-color: var(--mk-green-700);
  width: 18px;
  height: 18px;
}

/* Order notes textarea */
.woocommerce-additional-fields textarea {
  min-height: 80px;
  resize: vertical;
}

/* ---------- Review order (lista de productos + totales) ----------
   Mismo principio que .cart_totals en cart.css: sin border anidado,
   total prominente, fees en gris pequeño. La tabla fluye dentro del
   padding del .mk-checkout-section__body — el card padre ya define
   la caja exterior. */

.woocommerce-checkout-review-order table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: var(--mk-text-sm);
  box-shadow: none;
  margin: 0;
}

.woocommerce-checkout-review-order table th,
.woocommerce-checkout-review-order table td {
  text-align: left;
  padding: var(--mk-sp-2) 0;
  border: 0;
  background: transparent;
}

/* Header de la tabla "Producto | Subtotal" — divisor sutil para separar
   del listado de items, sin contenedor anidado. */
.woocommerce-checkout-review-order thead th {
  text-transform: uppercase;
  font-size: var(--mk-text-xs);
  letter-spacing: 0.05em;
  color: var(--mk-ink-500);
  font-weight: 700;
  padding-bottom: var(--mk-sp-3);
  border-bottom: 1px solid var(--mk-bg-soft);
}

.woocommerce-checkout-review-order tbody td { padding: var(--mk-sp-3) 0; }

.woocommerce-checkout-review-order .product-name {
  color: var(--mk-ink-900);
  font-weight: 500;
  line-height: 1.35;
}

.woocommerce-checkout-review-order .product-quantity {
  color: var(--mk-ink-500);
  font-weight: 400;
}

.woocommerce-checkout-review-order .product-total {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--mk-ink-900);
  text-align: right;
}

.woocommerce-checkout-review-order tfoot th {
  text-transform: uppercase;
  font-size: var(--mk-text-xs);
  letter-spacing: 0.05em;
  color: var(--mk-ink-500);
  font-weight: 500;
}

.woocommerce-checkout-review-order tfoot td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fee row (Descuento por envío, etc.) — info secundaria. */
.woocommerce-checkout-review-order tr.fee th,
.woocommerce-checkout-review-order tr.fee td {
  font-size: var(--mk-text-xs);
  color: var(--mk-ink-500);
  font-weight: 400;
  padding-top: 0;
}
.woocommerce-checkout-review-order tr.fee th {
  text-transform: none;
  letter-spacing: 0;
}

.woocommerce-checkout-review-order .order-total {
  border-top: 2px solid var(--mk-ink-900);
}

.woocommerce-checkout-review-order .order-total th,
.woocommerce-checkout-review-order .order-total td {
  padding-top: var(--mk-sp-4);
  font-size: var(--mk-text-md);
  font-weight: 700;
  color: var(--mk-ink-900);
  text-transform: none;
  letter-spacing: 0;
}

/* Total prominente — pieza más grande del sidebar.
   Selector scoped al > strong para no agrandar el .amount dentro
   de .includes_tax (desglose de impuestos chico). */
.woocommerce-checkout-review-order .order-total > td > strong > .amount,
.woocommerce-checkout-review-order .order-total > td > strong .amount {
  color: var(--mk-green-800);
  font-size: var(--mk-text-2xl);
  font-family: var(--mk-font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: inline-block;
}

.woocommerce-checkout-review-order .includes_tax {
  display: block;
  margin-top: 4px;
  font-size: var(--mk-text-xs);
  color: var(--mk-ink-500);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--mk-font-body);
  white-space: normal;
}

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

#payment {
  background: transparent;
  margin-top: var(--mk-sp-4);
}

#payment .wc_payment_methods {
  list-style: none;
  margin: 0 0 var(--mk-sp-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mk-sp-2);
}

#payment .wc_payment_methods li {
  border: 1.5px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  padding: var(--mk-sp-3) var(--mk-sp-4);
  background: #fff;
  transition: border-color var(--mk-trans);
}

#payment .wc_payment_methods li:has(input:checked) {
  border-color: var(--mk-green-700);
  background: var(--mk-green-100);
}

#payment .wc_payment_methods li > label {
  display: flex;
  align-items: center;
  gap: var(--mk-sp-2);
  font-weight: 600;
  cursor: pointer;
  color: var(--mk-ink-900);
}

#payment .wc_payment_methods input[type="radio"] {
  accent-color: var(--mk-green-700);
  width: 18px;
  height: 18px;
}

#payment .payment_box {
  background: var(--mk-bg-alt);
  padding: var(--mk-sp-3);
  margin-top: var(--mk-sp-2);
  font-size: var(--mk-text-sm);
  border-radius: var(--mk-radius);
  border-left: 3px solid var(--mk-gold-500);
}

#payment .payment_box p { margin: 0 0 var(--mk-sp-2); }
#payment .payment_box p:last-child { margin-bottom: 0; }

/* Botón "Realizar el pedido" — pieza prominente del checkout.
   Misma fuerza visual que "Finalizar compra" del cart, separación
   clara del bloque de payment methods de arriba. */
#place_order,
.wc-block-components-checkout-place-order-button {
  display: block;
  width: 100%;
  padding: var(--mk-sp-4) var(--mk-sp-5);
  min-height: 56px;
  font-size: var(--mk-text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--mk-green-700);
  color: #fff;
  border: 2px solid var(--mk-green-700);
  border-radius: var(--mk-radius);
  cursor: pointer;
  font-family: var(--mk-font-display);
  margin-top: var(--mk-sp-5);
  box-shadow: 0 4px 12px rgba(0, 152, 70, 0.18);
  transition: all var(--mk-trans);
}

#place_order:hover {
  background: var(--mk-gold-500);
  border-color: var(--mk-gold-500);
  color: var(--mk-ink-900);
  box-shadow: 0 6px 16px rgba(212, 162, 39, 0.25);
}

#place_order:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 152, 70, 0.18);
}

/* Estado disabled — WC core deshabilita el botón si terms no está
   tildado, y b2b-flow.php:233/252 lo deshabilita durante uploads.
   Sin esta regla el browser aplica opacity: 0.5 default que se ve
   washed-out e ilegible. Acá usamos un gris coherente con la paleta. */
#place_order:disabled,
#place_order[disabled],
.wc-block-components-checkout-place-order-button:disabled {
  background: var(--mk-bg-soft) !important;
  border-color: var(--mk-bg-soft) !important;
  color: var(--mk-ink-500) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  opacity: 1; /* override browser default */
}

#place_order:disabled:hover,
#place_order[disabled]:hover {
  background: var(--mk-bg-soft) !important;
  border-color: var(--mk-bg-soft) !important;
  color: var(--mk-ink-500) !important;
  transform: none;
  box-shadow: none !important;
}

/* Términos */
.woocommerce-terms-and-conditions-wrapper {
  margin: var(--mk-sp-3) 0;
  font-size: var(--mk-text-sm);
}

.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--mk-sp-2);
  cursor: pointer;
}

.woocommerce-form__input-checkbox {
  margin-top: 4px;
  accent-color: var(--mk-green-700);
}

/* ---------- Snippet B2B "Documentos de Respaldo" override ----------
   El snippet en b2b-flow.php:180 se hookea a
   `woocommerce_checkout_before_order_review` y emite un <div> con
   inline styles propios (bg #f9f9f9, border 1px solid #ddd, etc.) que
   crea una caja anidada dentro de .mk-checkout-section.

   Nulificamos los inline styles y lo integramos como subsección del
   card padre con un divisor superior sutil. Sin tocar el snippet PHP
   (preserva la funcionalidad de file uploads y los hooks downstream). */
#marvelkleen_docs_global {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--mk-bg-soft) !important;
  border-radius: 0 !important;
  padding: var(--mk-sp-5) !important;
  margin: 0 !important;
}

#marvelkleen_docs_global h3 {
  margin: 0 0 var(--mk-sp-3) !important;
}

#marvelkleen_docs_global input[type="file"] {
  background: #fff !important;
  border: 1.5px solid var(--mk-bg-soft) !important;
  border-radius: var(--mk-radius) !important;
  padding: var(--mk-sp-2) !important;
}

/* ---------- Mensajes ---------- */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  padding: var(--mk-sp-3) var(--mk-sp-4);
  border-radius: var(--mk-radius);
  margin: 0 0 var(--mk-sp-4);
  font-size: var(--mk-text-sm);
  list-style: none;
  border-left: 4px solid;
}

.woocommerce-error  { background: #f9e0dc; border-left-color: #c0392b; color: #6e2317; }
.woocommerce-info   { background: var(--mk-green-100); border-left-color: var(--mk-green-500); color: var(--mk-green-800); }
.woocommerce-message{ background: var(--mk-gold-100); border-left-color: var(--mk-gold-500); color: var(--mk-gold-700); }

/* ---------- Loader/cargando ----------
   Estado "processing" durante AJAX update_order_review (WC dispara
   esto cada vez que cambia un campo del form). WC + jQuery blockUI
   inyecta un <div class="blockUI blockOverlay"> con bg blanco semi-
   transparente como overlay, dando un efecto "fantasma" sobre toda
   la sección.

   Acá lo reemplazamos por un look más limpio: el overlay queda casi
   transparente (no oculta el contenido) y un spinner pequeño aparece
   arriba a la derecha indicando actividad. */

/* La sección bloqueada conserva legibilidad — sin opacity reduction. */
.woocommerce-checkout-review-order.processing,
.checkout.processing {
  position: relative;
  pointer-events: none;
}

/* Eliminar el overlay default de jQuery blockUI completamente.
   WC lo inyecta inline durante update_checkout AJAX con bg:#fff y
   opacity:0.6 — eso causaba el efecto "fantasma" al cargar la página.
   El bloqueo de interacción ya lo logra .processing con pointer-events:none,
   y el feedback visual viene del spinner top-right. */
.blockUI.blockOverlay,
.blockUI.blockMsg {
  display: none !important;
}

/* Spinner pequeño top-right durante processing */
.woocommerce-checkout-review-order.processing::after,
.checkout.processing::after {
  content: "";
  position: absolute;
  top: var(--mk-sp-3);
  right: var(--mk-sp-3);
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--mk-bg-soft);
  border-top-color: var(--mk-green-700);
  border-radius: 50%;
  animation: mk-spin 0.7s linear infinite;
  z-index: 1001;
}

@keyframes mk-spin {
  to { transform: rotate(360deg); }
}