/* ============================================================================
 * CRAZYSTORE CHECKOUT — archivo checkout_1-1-5.css (16/09/2026)
 * Two columns: form (left) + sticky order summary (right).
 * ============================================================================ */

/* === Custom Checkout Fullscreen Cleanup === */
.custom-checkout-page #page,
.custom-checkout-page header,
.custom-checkout-page footer,
.custom-checkout-page .site-header,
.custom-checkout-page .site-footer,
.custom-checkout-page .widget-area,
.custom-checkout-page .sidebar {
  display: none !important;
}

body.custom-checkout-page {
  background: #f5f5f5;
  margin: 0;
  padding: 0;
}

#custom-checkout-wrapper-machi {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bim-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

#custom-checkout-wrapper-machi {
  font-family: var(--bim-font);
}

#custom-checkout-wrapper-machi * {
  font-family: var(--bim-font) !important;
  box-sizing: border-box;
}

/* === LOGO === */
.machi_checkout-logo {
  text-align: center;
  padding: 24px 0 8px;
}
.machi_checkout-logo img {
  height: 56px;
  max-width: 180px;
  width: auto;
}

/* === MAIN GRID === */
.container-checkout {
  background: #fff;
  color: #333;
  line-height: 1.55;
  max-width: 1280px;
  margin: 16px auto;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.machi_left-section {
  padding: 40px 44px;
  background: #fff;
  border-right: 1px solid #eee;
}

.machi_right-section {
  padding: 32px 32px;
  background: #fafafa;
}

/* === LOGIN PROMPT (guest fast-path) === */
.machi_login-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #4b5563;
  /* 14 y no 18: acompaña al titulo mas pequeño de arriba (.title-crazy). */
  margin: 0 0 14px;
  line-height: 1.4;
}
.machi_login-prompt[hidden] { display: none; }
.machi_login-prompt-icon { font-size: 14px; flex-shrink: 0; }
.machi_login-prompt a {
  color: #ff0000;
  font-weight: 600;
  text-decoration: none;
}
.machi_login-prompt a:hover { text-decoration: underline; }

/* === BREADCRUMB STEPPER === */
.machi_checkout-steps {
  /* Fuera de las columnas: ocupa la primera fila de la izquierda y deja que el
     resumen abarque las dos, para que en escritorio se vea igual que siempre. */
  grid-column: 1;
  grid-row: 1;
  padding: 32px 32px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 0;
  color: #999;
  flex-wrap: wrap;
}
.machi_step {
  color: #999;
  text-decoration: none;
  font-weight: 500;
}
.machi_step:hover { color: #ff0000; }
.machi_step-current {
  color: #111;
  font-weight: 700;
}
.machi_step-sep { color: #ccc; font-size: 16px; }

/* === TYPOGRAPHY (mirrors cart hierarchy) === */
.machi_section-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
/*
  📏 "Completa tu pedido", mas pequeño y mas pegado. (16/09/2026.)

  🪤 La columna izquierda empezaba con TRES filas que dicen lo mismo antes de
     que el cliente pueda escribir nada:

       Carrito › Envio y pago › Confirmacion    <- "estas en el checkout"
       Completa tu pedido                       <- "estas en el checkout"
       ¿Ya tienes cuenta? Iniciar sesion...     <- adorno
       Nombre y Apellido *                      <- por fin, algo que hacer

     El rastro de pasos ya dice donde esta. Un titulo de 28 px repitiendolo
     empuja el formulario fuera de la primera pantalla, y en un telefono eso es
     la mitad de la vista gastada en decorado.

  Se queda (es el <h1> de la pagina: cuenta para lectores de pantalla y para
  buscadores), pero ocupando lo que le corresponde.
*/
.title-crazy {
  color: #1a1a1a;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.machi_section-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}
.subtitle-crazy { font-weight: 400; }
.machi_section-required-fields {
  font-size: 12px;
  color: #888;
  margin-top: 12px;
}

.machi_block {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #eee;
}
.machi_block:first-of-type {
  margin-top: 24px;
  padding-top: 0;
  border-top: none;
}

/* === FORMS === */
.machi_form-group { margin-bottom: 16px; }
.machi_form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #333;
}
.machi_form-input,
#departamento {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.machi_form-input:focus,
#departamento:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
#departamento {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 38px;
}
.machi_form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.machi_form-row-2 { grid-template-columns: 1fr 1fr; }

.invalid-input {
  border: 1px solid rgb(253, 74, 74) !important;
}
.machi_error {
  color: #e11;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

/* === SHIPPING METHOD CARDS === */
.machi_shipping-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTOR DE ENTREGA — CONTROL SEGMENTADO
   Las tres opciones en una fila. Antes eran tres tarjetas apiladas: 238 px
   frente a 82 px. En un telefono esos 156 px son media pantalla, y eran los
   que empujaban los campos de direccion fuera de la vista.
   ═══════════════════════════════════════════════════════════════════════════ */
.machi_shipping-seg {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  background: #f4f4f6;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 14px;
}

.machi_shipping-seg .machi_shipping-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 2px solid transparent;
  border-radius: 7px;
  padding: 10px 6px;
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  /* 44 px minimos: es un boton que se pulsa con el pulgar */
  min-height: 62px;
}
.machi_shipping-seg .machi_shipping-card:hover { background: rgba(255, 255, 255, 0.6); }

.machi_shipping-seg .machi_shipping-card-selected,
.machi_shipping-seg .machi_shipping-card-selected:hover {
  background: #fff;
  border-color: #ff0000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ⚠️ El radio sigue existiendo y sigue siendo focusable: solo se saca de la
      vista. De el dependen el cambio de formulario, la validacion y el
      rellenado al volver -- ademas del teclado y el lector de pantalla.
      NO usar display:none, que lo saca del orden de tabulacion. */
.machi_shipping-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Sin radio visible hace falta un foco propio, o se navega a ciegas. */
.machi_shipping-radio:focus-visible + .machi_shipping-icon {
  outline: 2px solid #ff0000;
  outline-offset: 3px;
  border-radius: 3px;
}

.machi_shipping-seg .machi_shipping-icon {
  width: 19px;
  height: 19px;
  color: #8a8a94;
  flex-shrink: 0;
}
.machi_shipping-seg .machi_shipping-card-selected .machi_shipping-icon { color: #ff0000; }

.machi_shipping-seg .machi_shipping-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  line-height: 1.2;
}
.machi_shipping-seg .machi_shipping-card-selected .machi_shipping-card-title {
  font-weight: 700;
  color: #1a1a1a;
}

/* Pastilla fuera: aqui el precio es una linea de texto, no una etiqueta.
   (De paso desaparece el ::before cuyo palomito estaba mal codificado.) */
.machi_shipping-seg .machi_shipping-card-price {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #8a8a94;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.machi_shipping-seg .machi_shipping-card-selected .machi_shipping-card-price {
  color: #1d6b1d;
  font-weight: 700;
}

/* ── El aviso del envio gratis ─────────────────────────────────────────────
   Verde cuando el pedido ya califica, ambar cuando le falta. Lo rellena
   checkout.js; sin contenido queda oculto con [hidden]. */
.machi_shipping-notice {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.machi_shipping-notice[hidden] { display: none; }

.machi_shipping-notice-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.machi_shipping-notice-icon svg { width: 14px; height: 14px; }
/*
  🚤 EL AVISO DEL ENVIO GRATIS, EN DOS LINEAS.

  🪰 Arreglado el 16/09/2026. Se leia todo pegado:

       "¡Tu envio es gratis!Tu pedido supera los 200 Bs."
       "Te faltan 52 Bs. para el envio gratisPor debajo de 200 Bs., el envio..."

     checkout.js pinta el titulo y el subtitulo como dos <span>, y un <span> es
     INLINE: los dos caen en el mismo renglon, sin separacion ninguna.

     Estos estilos SIEMPRE dieron por hecho que iban apilados -- el
     `margin-top: 1px` del subtitulo no hace absolutamente nada sobre un
     elemento inline, y los dos tamanos y colores distintos solo tienen sentido
     en dos lineas. Faltaba la regla que lo colocaba.

  ⚠️ No se toca el JS: los <span> se quedan como estan. Lo que faltaba era
     decirle al navegador que son bloques.
*/
.machi_shipping-notice-text { line-height: 1.4; }
.machi_shipping-notice-title,
.machi_shipping-notice-sub { display: block; }
.machi_shipping-notice-title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.machi_shipping-notice-sub { font-size: 12px; margin-top: 1px; }

.machi_shipping-notice--ok {
  background: #f1f8f2;
  border: 1.5px solid #9fd3a6;
}
.machi_shipping-notice--ok .machi_shipping-notice-icon { background: #1d6b1d; }
.machi_shipping-notice--ok .machi_shipping-notice-title { color: #1d6b1d; }
.machi_shipping-notice--ok .machi_shipping-notice-sub { color: #2f6b33; }

.machi_shipping-notice--warn {
  background: #fff8e1;
  border: 1.5px solid #e8c56a;
}
.machi_shipping-notice--warn .machi_shipping-notice-icon { background: #b8860b; }
.machi_shipping-notice--warn .machi_shipping-notice-title { color: #6d4c00; }
.machi_shipping-notice--warn .machi_shipping-notice-sub { color: #7a5a10; }

/* === SHIPPING FORM TOGGLE === */
.machi_form-toggle {
  margin-top: 8px;
}
.machi_form-toggle[hidden] { display: none; }

/* Delivery promise pill (dynamic message based on departamento) */
.machi_delivery-promise {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f9f1;
  border: 1px solid #cde9cd;
  color: #225b22;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 4px;
}
.machi_delivery-promise[hidden] { display: none; }
.machi_delivery-promise-icon { font-size: 16px; }

/* === SUCURSAL (branch picker) === */
.machi_form-group-store { margin-bottom: 8px; }
.machi_radio-group-store.vertical { display: flex; flex-direction: column; }
.machi_store-list { margin-top: 8px; }
.machi_radio-option-store {
  background: #fafafa;
  padding: 14px;
  border-radius: 8px;
  border: 2px solid #e5e5e5;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0;
  transition: border-color 0.15s;
}
.machi_radio-option-store:hover { border-color: #bbb; }
.machi_radio-option-store.selected,
.machi_radio-option-store:has(input:checked) {
  border-color: #ff0000;
  background: #fff7f7;
}
.machi_radio-option-store input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: #ff0000;
}
.machi_store-info-wrapper { flex: 1; min-width: 0; }
.machi_store-name { font-weight: 700; margin-bottom: 6px; color: #222; }
.machi_store-details { font-size: 13px; color: #555; line-height: 1.45; }
.machi_store-schedule { display: block; margin-top: 4px; font-size: 12px; color: #777; }

/* === PAYMENT METHODS === */
/* ═══════════════════════════════════════════════════════════════════════════
   MEDIO DE PAGO — ahora dentro del resumen, pegado al total y al boton.
   Se elige y se paga sin mover la vista.
   ═══════════════════════════════════════════════════════════════════════════ */
.machi_payment-title {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  margin: 0 0 9px;
}

.machi_payment-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.machi_payment-method {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  padding: 13px 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  /* 48 px: se pulsa con el pulgar */
  min-height: 48px;
}
.machi_payment-method:hover { border-color: #ffb3b3; }
.machi_payment-method:focus-visible { outline: 2px solid #ff0000; outline-offset: 2px; }
.machi_payment-method.selected { border-color: #ff0000; background: #fff7f7; }
.machi_payment-method.locked { pointer-events: none; opacity: 0.5; cursor: not-allowed; }

/* El circulo. Se dibuja con CSS y no con un <input>: el estado lo lleva la
   clase .selected, que es lo que ya usaba todo el checkout. El role="radio" y
   el aria-checked del HTML son los que lo cuentan al lector de pantalla. */
.machi_payment-radio {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid #c4c4cc;
  background: #fff;
  flex-shrink: 0;
  transition: border-color 0.15s, border-width 0.15s;
}
.machi_payment-method.selected .machi_payment-radio {
  border: 5px solid #ff0000;
}

/* Icono dibujado, no logo. Los PNG redondos de BNB y Binance se veian pesados
   al lado del circulo y no se pueden recolorear al elegirlos. */
.machi_payment-glyph {
  width: 21px;
  height: 21px;
  color: #8a8a94;
  flex-shrink: 0;
}
.machi_payment-method.selected .machi_payment-glyph { color: #1a1a1a; }

.machi_payment-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #444;
  flex: 1;
  min-width: 0;
}
.machi_payment-method.selected .machi_payment-text { font-weight: 700; color: #1a1a1a; }

.machi_payment-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #1d6b1d;
  background: #f1f8f2;
  border: 1px solid #cfe6d2;
  border-radius: 20px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* ── La barra del total ────────────────────────────────────────────────────
   Sustituye a las dos tarjetas de moneda. La cifra grande es la moneda en la
   que se va a cobrar de verdad; la chica, la otra, como referencia. */
.machi_total-bar {
  background: linear-gradient(135deg, #ff0000 0%, #b00000 100%);
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.24);
  border-radius: 11px;
  padding: 14px 16px;
  margin: 0 0 15px;
}
.machi_total-bar-label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 3px;
}
.machi_total-bar-amounts {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #fff;
}
.machi_total-bar-main {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.machi_total-bar-cur { font-size: 14px; font-weight: 600; }
.machi_total-bar-alt {
  font-size: 12.5px;
  opacity: 0.78;
  margin-left: auto;
  white-space: nowrap;
}

/* ============================================================================
 * RIGHT COLUMN — STICKY ORDER SUMMARY
 * ============================================================================ */

.machi_summary-sticky {
  position: sticky;
  top: 16px;
}

.machi_summary-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}

/* Compact product items (in summary) */
.machi_summary-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
/* Sin marco propio: antes cada producto era su propia tarjeta dentro de otra
   tarjeta, y el resumen parecia una lista de recibos sueltos. Ahora son filas
   dentro de un solo bloque. */
.machi_product-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.machi_product-image {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.machi_product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  padding: 4px;
  display: block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.machi_product-qty-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff0000;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.machi_product-info { flex: 1; min-width: 0; }
.machi_product-info h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #1f2937;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.machi_product-pricing { margin-bottom: 4px; }
.machi_product-price-line {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
.machi_product-toggle-details {
  background: none;
  border: none;
  color: #666;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
  margin: 0;
}
.machi_product-toggle-details:hover { color: #ff0000; }
.machi_product-attributes {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #eee;
}
.machi_product-attributes p {
  font-size: 12px;
  color: #555;
  margin: 2px 0;
  line-height: 1.3;
}
.machi_product-detail-title {
  font-weight: 600;
  color: #333;
}

/* Totals */
.machi_summary-totals {
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-bottom: 16px;
}
.machi_summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  margin-bottom: 8px;
}
.machi_summary-row span:last-child { font-weight: 700; color: #1a1a1a; }

/* Payment cards (USD / USDT) */
.machi_payment-cards-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 16px;
}
.machi_payment-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a0a0a 100%);
  color: #fff;
  border-radius: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-height: 130px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}
.machi_payment-card.selected {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 4px 16px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
.machi_payment-card.unselected { opacity: 0.4; filter: grayscale(40%); transform: scale(0.97); }
.machi_payment-card.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(100%); }
.machi_payment-card.disabled::after {
  content: 'No disponible';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
  white-space: nowrap; z-index: 10;
}
.machi_payment-card-usd { background: linear-gradient(135deg, #1a1a1a 0%, #14532d 100%); border-color: rgba(34,197,94,0.35); }
.machi_payment-card-usd.selected { background: linear-gradient(135deg, #14532d 0%, #16a34a 100%); border-color: #22c55e; }
.machi_payment-card-usdt { background: linear-gradient(135deg, #1a1a1a 0%, #1e3a5f 100%); border-color: rgba(59,130,246,0.35); }
.machi_payment-card-usdt.selected { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); border-color: #3b82f6; }
.machi_payment-card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.machi_payment-card-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.machi_payment-card-titles { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.machi_payment-card-title { font-size: 13px; font-weight: 600; line-height: 1.2; }
.machi_payment-card-subtitle { font-size: 11px; opacity: 0.85; }
.machi_payment-card-amount { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; }
.machi_payment-amount-value { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; }
.machi_payment-amount-currency { font-size: 12px; font-weight: 600; opacity: 0.95; }
.machi_payment-card-equivalent { font-size: 13px; opacity: 0.85; line-height: 1.2; }
.machi_payment-card-badge {
  position: absolute; top: 8px; right: 10px;
  background: rgba(255,255,255,0.22); color: #fff;
  padding: 2px 7px; border-radius: 12px;
  font-size: 9px; font-weight: 500;
  backdrop-filter: blur(10px);
}

/* === PAY BUTTON === */
.machi_pay-button {
  width: 100%;
  background: #ff0000;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s, transform 0.1s;
  min-height: 50px;
}
.machi_pay-button:hover { background: #e60000; }
.machi_pay-button:active { transform: translateY(1px); }
.machi_pay-button:disabled,
.machi_pay-button.disabled-button {
  background: #555 !important;
  cursor: not-allowed;
  opacity: 0.55;
}
.machi_pay-button .check-glyph { color: #fff; font-weight: 700; margin-left: 0.25rem; }

/* === SECURITY NOTE === */
.machi_security-note {
  font-size: 12px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #1d6b1d;
}
.machi_security-note-icon { width: 14px; height: 14px; flex-shrink: 0; }
.machi_security-note-text { font-weight: 600; color: #1d6b1d; }

/* === SUMMARY PRODUCT CARD (mockup 1, cart-aligned typography) === */
.machi_product-meta {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin: 2px 0 8px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.machi_product-foot {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}
.machi_product-qty {
  font-size: 13px;
  font-weight: 400;
  color: #666;
}
.machi_product-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.machi_product-price-usd {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.2;
}
.machi_product-price-bs {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 1.2;
}

/* === RADIO ROW (Cochabamba / Santa Cruz, etc.) === */
.machi_radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.machi_radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.machi_radio-option:has(input:checked) {
  border-color: #ff0000;
  background: #fff7f7;
}
.machi_radio-option input[type="radio"] { accent-color: #ff0000; }

/* === LOADING SPINNER (cart fetch) === */
.cs-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; color: #666; min-height: 80px;
}
.cs-spinner {
  width: 18px; height: 18px;
  border: 2px solid #f3f3f3; border-top: 2px solid #333;
  border-radius: 50%; animation: cs-spin 1s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }

/* ============================================================================
 * MODAL — v1.0.5: compact layout, fits in viewport without scrolling
 * ============================================================================ */
.machi_modal {
  position: fixed; z-index: 1000;
  left: 0; top: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex; justify-content: center; align-items: center;
  padding: 16px; box-sizing: border-box;
}
.machi_modal.hidden { display: none; }
.machi_modal.fade-in { animation: fadeIn 0.4s ease-out forwards; }
.machi_modal.fade-out { animation: fadeOut 0.4s ease-out forwards; }

.machi_modal_content {
  background: #fff;
  border-radius: 14px;
  /* 460 y no 400: el QR ampliado necesita el sitio. */
  max-width: 460px;
  width: 100%;
  position: relative;
  overflow: hidden; /* clips scroll content to border-radius */
  animation: slideUp 0.6s ease-out;
}
.machi_modal_scroll {
  padding: 20px 22px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
}

.machi_modal_close {
  position: absolute; top: 10px; right: 14px;
  cursor: pointer; font-size: 22px; color: #888; line-height: 1;
}
.machi_modal_close:hover { color: #333; }

#modalPaymentTitle {
  font-size: 18px;
  margin: 0 0 2px;
  color: #222;
  font-weight: 700;
}

.machi_modal_order-id {
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-align: center;
}

/* Amount box — compact brand-gradient banner */
#machi-modal_payment-container {
  /* El negro del degradado anterior ensuciaba el rojo y dejaba la barra
     apagada. Ahora va del rojo de la tienda a un rojo hondo, con un halo
     suave debajo para que se despegue del papel. */
  background: linear-gradient(135deg, #ff0000 0%, #b00000 100%);
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.26);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 12px;
}
#modalTotalAmount {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  align-items: baseline;
}
.modal-usdt-amount { color: #fff; font-weight: 700; font-size: 22px; }
.modal-usdt-currency { color: rgba(255,255,255,0.75); font-weight: 600; font-size: 14px; }
.modal-bs-amount { color: rgba(255,255,255,0.85); font-weight: 600; font-size: 16px; }
.modal-bs-currency { color: rgba(255,255,255,0.6); font-weight: 500; font-size: 13px; }

/* Instructions — compact */
.instructions {
  /* Era azul (#f8f9ff / #e3e8ff) -- herencia del diseño viejo y el panel mas
     grande del modal. Fondo calido y filo rojo a la izquierda: de la marca,
     y el filo guia la vista hacia el texto. */
  background: #fff7f7;
  border: 1px solid #ffdcdc;
  border-left: 3px solid #ff0000;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 10px;
  text-align: left;
}
.instructions-title {
  text-align: center;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Versión de una sola línea, para el pago QR: el título ocupaba un renglón
   entero para anunciar una única frase. El modal ya se iba de alto. */
.instructions.cs-compacta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  /* Sin filo: con la barra roja justo encima, el borde de color sobraba y
     ademas descentraba la caja respecto al resto del modal. */
  border-left: 1px solid #ffdcdc;
}
.instructions.cs-compacta .instructions-title {
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}
.instructions.cs-compacta .instructions-hint { margin: 0; }
.instructions-list { margin: 0; padding-left: 18px; }
.instructions-list li { margin-bottom: 3px; line-height: 1.35; font-size: 13px; color: #444; }
.instructions-hint { margin: 0; font-size: 13px; color: #444; line-height: 1.4; }

/* Timer — compact single line */
.timer-section {
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.timer-text { font-size: 12px; color: #777; margin-bottom: 0; }
.timer-value {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  font-family: "Courier New", monospace;
}

/* QR image */
#modalPaymentImage {
  border: 1px solid #ddd;
  border-radius: 10px;
  /* 🔍 Antes: 44% / max 160px. El "QR" del banco no es solo el codigo: lleva
     impresos beneficiario, cuenta, monto y vigencia. A 160px ese texto era una
     mancha gris y el cliente no podia comprobar que iba a pagar lo correcto. */
  width: 88% !important;
  max-width: 300px;
  height: auto;
  margin: 0 auto 6px;
  display: none;
}

/* Account holder name */
.owner_payment-method {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px;
}
.owner_payment-method p { margin: 0; }

/* File upload — stacked, full width */
.custom-file-upload {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 10px;
}
.upload-label {
  display: block;
  background: #2563eb;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  transition: background 0.2s;
}
.upload-label:hover { background: #1d4ed8; }
#file-name {
  color: #777;
  font-style: italic;
  font-size: 12px;
  text-align: center;
}
#deleteImageBtn {
  align-self: center;
  background: none !important;
  border: none;
  color: #e11;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
}

/* Security note — minimal */
.security-section {
  /* Antes: 12px en gris #888. Se leia como letra pequeña, que es justo lo que
     la gente se salta -- y esto no es letra pequeña, es la garantia. Ahora es
     una pastilla verde: el verde dice "seguro" sin tener que decirlo. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 0 auto 6px;
  padding: 7px 14px;
  background: #f1f8f2;
  border: 1px solid #cfe6d2;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1d6b1d;
}

/* Nombrar al banco tranquiliza mas que cualquier adorno: dice que hay una
   entidad real detras del cobro, no solo una web. */
.cs-bank-note {
  text-align: center;
  font-size: 11px;
  color: #999;
  margin: 0 0 12px;
}
.cs-bank-note strong { color: #666; }

/* Action buttons — confirm full width on top, cancel secondary below */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
#cancelBtnInModal {
  background: none;
  color: #888;
  border: none;
  padding: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s;
}
#cancelBtnInModal:hover { color: #333; }

/* Confirm button — green, prominent, clearly the primary action */
.confirm-button {
  background: #ff0000;
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.1s;
}
.confirm-button:hover { background: #e60000; }
.confirm-button:active { transform: translateY(1px); }
.confirm-button:disabled,
.confirm-button.disabled-button {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

/* Support link */
.support-section { text-align: center; }
.support-text { font-size: 12px; color: #888; margin-bottom: 3px; }
.support-link { color: #ff0000; text-decoration: none; font-weight: 600; font-size: 12px; }
.support-link:hover { text-decoration: underline; }

/* ============================================================================
 * TOAST NOTIFICATIONS
 * ============================================================================ */
.cs-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
}
.cs-toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* On mobile: slide up from the bottom so it doesn't cover top content */
@media (max-width: 600px) {
  .cs-toast {
    top: auto;
    bottom: 80px;
    transform: translateX(-50%) translateY(120%);
    border-radius: 12px;
    width: calc(100% - 24px);
  }
  .cs-toast--visible {
    transform: translateX(-50%) translateY(0);
  }
}
.cs-toast--error {
  background: #fff1f1;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.cs-toast--error::before {
  content: '\2715';   /* la X de cerrar */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff0000;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.cs-toast--info {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.cs-toast--info::before {
  content: '!';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.cs-toast__msg { flex: 1; }
.cs-toast__close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  padding: 0;
  flex-shrink: 0;
}
.cs-toast__close:hover { opacity: 1; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
 * RESPONSIVE
 * ============================================================================ */

@media (max-width: 1024px) {
  .machi_left-section { padding: 32px 28px; }
  .machi_right-section { padding: 28px 24px; }
}

@media (max-width: 860px) {
  .container-checkout {
    grid-template-columns: 1fr;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* El orden y el fondo de cada pieza del resumen se definen mas abajo, en su
     propio bloque de 860 px. Aqui solo queda lo del formulario. */
  .machi_left-section { border-right: none; padding: 24px 18px; }
  .machi_summary-title { font-size: 18px; margin-bottom: 12px; }
  .machi_form-row-2 { grid-template-columns: 1fr; }

  /* ⚠️ El selector de entrega NO se apila en movil: es justo donde el control
        segmentado mas sirve. Apilarlo devolveria los 156 px que se ahorraron. */
  .machi_shipping-options:not(.machi_shipping-seg) { grid-template-columns: 1fr; }
}

/* Tablet portrait: 500–768px — tighten typography */
@media (max-width: 768px) {
  .title-crazy { font-size: 20px; }
  .machi_section-title { font-size: 18px; }
  .machi_pay-button { font-size: 14px; }
}

@media (max-width: 480px) {
  .title-crazy { font-size: 19px; }
  .machi_section-title { font-size: 16px; }

  /* ⚠️ Aqui habia dos reglas del diseño anterior, cuando los medios de pago
        eran dos tarjetas cuadradas en rejilla:
            .machi_payment-methods { grid-template-columns: 1fr 1fr; }
            .machi_payment-method  { min-height: 70px; padding: 10px 8px; }
        Ahora son filas en columna. La primera ya no hacia nada (el contenedor
        es flex), pero la segunda SI: engordaba cada fila a 70 px y le comia el
        lado. Fuera las dos. */
  .machi_payment-icon img { height: 26px; }
  .machi_payment-text { font-size: 11px; }
  /* Payment cards: tighter at very small screens */
  .machi_payment-card { min-height: 100px; padding: 10px; }
  .machi_payment-amount-value { font-size: 20px; }
  .machi_payment-card-title { font-size: 12px; }
  .machi_payment-card-equivalent { font-size: 11px; }
  .machi_pay-button { padding: 13px; font-size: 14px; }
  /* Shipping card: prevent overflow on tiny screens */
  .machi_shipping-card { flex-wrap: wrap; gap: 8px; }
  .machi_shipping-card-pricewrap { align-items: flex-start; }
  /* Modal — compact to fit viewport without scrolling */
  .machi_modal { padding: 8px; align-items: flex-end; }
  .machi_modal_content { border-radius: 16px 16px 10px 10px; }
  .machi_modal_scroll { padding: 14px 14px 12px; max-height: 88vh; }
  #modalPaymentTitle { font-size: 15px; margin-bottom: 1px; }
  .machi_modal_order-id { margin-bottom: 5px; font-size: 10px; }
  #machi-modal_payment-container { padding: 8px 12px; margin-bottom: 8px; }
  .modal-usdt-amount { font-size: 18px; }
  .modal-bs-amount { font-size: 14px; }
  .instructions { padding: 7px 10px; margin-bottom: 7px; }
  .instructions-title { font-size: 12px; margin-bottom: 3px; }
  .instructions-hint { font-size: 12px; }
  .timer-section { padding: 5px 10px; margin-bottom: 7px; }
  .timer-text { font-size: 11px; }
  .timer-value { font-size: 13px; }
  #modalPaymentImage { width: 80% !important; max-width: 280px; margin-bottom: 4px; }
  .owner_payment-method { font-size: 13px; margin-bottom: 6px; }
  .custom-file-upload { margin-bottom: 6px; gap: 4px; }
  .upload-label { padding: 9px 12px; font-size: 13px; }
  #file-name { font-size: 11px; }
  .security-section { font-size: 11px; margin-bottom: 7px; }
  .confirm-button { padding: 12px; font-size: 14px; }
  .support-text, .support-link { font-size: 11px; }
}

/* === Touch targets === */
@media (pointer: coarse) {
  .machi_shipping-card,
  .machi_payment-method,
  .machi_radio-option-store,
  .machi_form-input,
  #departamento { min-height: 44px; }
  .machi_pay-button, .confirm-button, #cancelBtnInModal { min-height: 48px; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .machi_payment-card,
  .machi_pay-button,
  .machi_shipping-card,
  .machi_payment-method { transition: none; }
  .machi_modal.fade-in, .machi_modal.fade-out, .machi_modal_content { animation: none; }
}

/* === Print === */
@media print {
  .machi_modal, .machi_pay-button, .machi_checkout-steps { display: none !important; }
  .container-checkout { grid-template-columns: 1fr; box-shadow: none; }
}

/* === Download QR button === */
.download-qr-btn {
  display: none; /* shown via JS when QR image is visible */
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 8px;
  padding: 8px 18px;
  /* Rojo de marca. El negro anterior no era de la casa y flotaba suelto en
     medio del modal. En movil este boton importa mas de lo que parece: no
     puedes escanear tu propia pantalla, asi que descargar la imagen y abrirla
     en la app del banco es a menudo la unica forma de pagar. */
  background: #ff0000;
  border: 1.5px solid #ff0000;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
  width: fit-content;
}
/* Al pasar por encima: rojo hondo -- el mismo #b00000 con el que acaba el
   degradado de la barra del importe -- y el boton se levanta un poco con un
   halo rojo. Se siente pulsable sin cambiar de color a algo ajeno. */
.download-qr-btn:hover {
  background: #b00000;
  border-color: #b00000;
  box-shadow: 0 6px 16px rgba(255, 0, 0, 0.32);
  transform: translateY(-1px);
}
.download-qr-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 0, 0, 0.25);
}

/* Quien pide menos movimiento conserva el cambio de color, pero sin el salto. */
@media (prefers-reduced-motion: reduce) {
  .download-qr-btn,
  .download-qr-btn:hover,
  .download-qr-btn:active { transition: background 0.18s ease; transform: none; }
}

/* On desktop: smaller, secondary feel */
@media (min-width: 481px) {
  .download-qr-btn {
    font-size: 12px;
    padding: 6px 14px;
    background: #555;
  }
}

/* On mobile: prominent — full-width, bigger tap target */
@media (max-width: 480px) {
  .download-qr-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 10px;
    background: #1a1a1a;
    margin-bottom: 10px;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   PAGO QR — esqueleto de carga, ampliar el QR y el visto de pago recibido
   Todo CSS puro: ni librerias ni peticiones. 10/09/2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El hueco reservado mientras el banco genera el QR ──────────────────────
   Ocupa EXACTAMENTE lo que ocupara la imagen. Sin esto el modal daba un salto
   al llegar el QR, porque el hueco valia 0 y de pronto valia 300px. */
.cs-qr-skeleton {
  width: 88%;
  max-width: 300px;
  aspect-ratio: 1 / 1.18;      /* la imagen del banco es algo mas alta que ancha */
  margin: 0 auto 6px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background-color: #f2f2f2;
  background-image: linear-gradient(100deg, #f2f2f2 30%, #fafafa 50%, #f2f2f2 70%);
  background-size: 220% 100%;
  animation: csShimmer 1.25s ease-in-out infinite;
}

@keyframes csShimmer {
  from { background-position: 180% 0; }
  to   { background-position: -60% 0; }
}

/* ── El QR aparece fundiendo, no de golpe ─────────────────────────────────── */
.cs-qr-in { animation: csFadeIn 0.42s ease-out both; }

@keyframes csFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Tocar el QR para verlo grande ────────────────────────────────────────── */
#modalPaymentImage.cs-qr-zoomable { cursor: zoom-in; }

.cs-qr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;             /* por encima del modal de pago */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.86);
  cursor: zoom-out;
  animation: csFadeIn 0.2s ease-out both;
}

.cs-qr-lightbox img {
  max-width: min(96vw, 560px);
  max-height: 84vh;
  width: auto;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.cs-qr-lightbox .cs-qr-lightbox-hint {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  opacity: 0.85;
}

/* ── ¡Pago recibido! ───────────────────────────────────────────────────────
   Un visto que se dibuja solo. Sereno a proposito: el cliente acaba de
   entregar dinero de verdad, y la calma se lee como confianza. */
.cs-ok { text-align: center; padding: 6px 0 2px; }

.cs-ok-mark {
  width: 78px;
  height: 78px;
  margin: 0 auto 12px;
  display: block;
  position: relative;
}

.cs-ok-mark svg { width: 100%; height: 100%; display: block; }

.cs-ok-circle {
  stroke: #1d6b1d;
  stroke-width: 3.4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: csDraw 0.42s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.cs-ok-check {
  stroke: #1d6b1d;
  stroke-width: 4.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 36 = largo real del trazo (12.0 + 23.8). Con un numero mayor el visto
     terminaba de dibujarse al 75% y el resto de la animacion no hacia nada. */
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: csDraw 0.26s cubic-bezier(0.65, 0, 0.45, 1) 0.38s forwards;
}

@keyframes csDraw { to { stroke-dashoffset: 0; } }

/* Un unico anillo que se expande y se apaga. */
.cs-ok-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #1d6b1d;
  opacity: 0;
  animation: csRing 0.85s ease-out 0.5s both;
}

@keyframes csRing {
  from { transform: scale(1);    opacity: 0.55; }
  to   { transform: scale(1.55); opacity: 0; }
}

.cs-ok-title {
  color: #1d6b1d;
  font-size: 22px;
  font-weight: 700;
  animation: csRise 0.34s ease-out 0.46s both;
}

.cs-ok-sub {
  margin-top: 6px;
  color: #555;
  animation: csRise 0.34s ease-out 0.58s both;
}

@keyframes csRise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Respeta a quien pide menos movimiento ──────────────────────────────────
   Sin esto, alguien con "reducir movimiento" activado (mareos, migranas) se
   come igual el destello. Se muestra el resultado final, sin recorrido. */
@media (prefers-reduced-motion: reduce) {
  .cs-qr-skeleton { animation: none; }
  .cs-qr-in,
  .cs-ok-title,
  .cs-ok-sub,
  .cs-qr-lightbox { animation: none; opacity: 1; transform: none; }
  .cs-ok-circle,
  .cs-ok-check { animation: none; stroke-dashoffset: 0; }
  .cs-ok-ring { display: none; }
}

@media (max-width: 480px) {
  .cs-qr-skeleton { width: 80%; max-width: 280px; }
  .cs-ok-mark { width: 66px; height: 66px; }
  .cs-ok-title { font-size: 20px; }
}

/* ── Se acabó el tiempo ─────────────────────────────────────────────────────
   Sereno a propósito. El carrito acaba de vaciarse y al cliente se le va a
   mover de página: un aviso claro se lee como una web que funciona; una
   desaparición silenciosa, como una que se ha roto. */
.cs-timeout { text-align: center; padding: 26px 18px; }

.cs-timeout-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
  animation: csRise 0.36s ease-out both;
}

.cs-timeout-title {
  font-size: 20px;
  font-weight: 700;
  color: #b32d2e;
  animation: csRise 0.36s ease-out 0.08s both;
}

.cs-timeout-sub {
  margin-top: 8px;
  color: #555;
  font-size: 14.5px;
  line-height: 1.55;
  animation: csRise 0.36s ease-out 0.16s both;
}

/* Sólo se usa si el modal no estaba abierto (p. ej. lo cerró y siguió en la
   página). Sin esto el aviso se colaría al final del documento, donde nadie
   lo vería antes de la redirección. */
.cs-timeout-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
}

@media (prefers-reduced-motion: reduce) {
  .cs-timeout-icon,
  .cs-timeout-title,
  .cs-timeout-sub { animation: none; opacity: 1; transform: none; }
}

/* ── El hueco cuando lleva la animación Lottie dentro ───────────────────────
   Misma caja y misma medida que el shimmer: lo único que cambia es que se
   apaga el degradado latiente para que no compita con la animación. Si el
   reproductor no llega a cargar, esta clase no se añade y queda el shimmer. */
.cs-qr-skeleton.cs-qr-lottie {
  background-image: none;
  background-color: #fff;
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.cs-qr-skeleton.cs-qr-lottie svg { display: block; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGO QR — espera y confirmación
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── «Esperando tu pago» ────────────────────────────────────────────────────
   El ⏳ estaba quieto: un reloj sin agujas, imposible saber si la página
   sigue viva. Ahora se voltea como un reloj de arena de verdad. */
.cs-wait-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #996800;
  font-weight: 700;
  font-size: 15.5px;
}

.cs-hourglass {
  display: inline-block;
  animation: csFlip 2.4s ease-in-out infinite;
}

@keyframes csFlip {
  0%, 40%  { transform: rotate(0deg); }
  50%, 90% { transform: rotate(180deg); }
  100%     { transform: rotate(180deg); }
}

/* Los puntos suspensivos, escribiéndose solos. */
.cs-dots::after {
  content: "";
  animation: csDots 1.4s steps(4, end) infinite;
}

@keyframes csDots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

.cs-wait-sub {
  margin-top: 7px;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}
/* La frase que de verdad quita la angustia: que no tiene que hacer nada más. */
.cs-wait-sub strong { color: #1a1a1a; }

/* ── El visto, con más presencia ────────────────────────────────────────────
   Entra rebotando y suelta tres anillos escalonados. Sin confeti: el cliente
   acaba de entregar dinero real y la calma se lee como una tienda que
   cumple; la fiesta, como una app. */
.cs-ok-mark {
  animation: csPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes csPop {
  0%   { transform: scale(0);    opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1);    opacity: 1; }
}

.cs-ok-ring.cs-r2 { animation: csRing 0.85s ease-out 0.68s both; }
.cs-ok-ring.cs-r3 { animation: csRing 0.85s ease-out 0.86s both; }

/* El número de pedido, en su propia caja: es lo que el cliente fotografía. */
.cs-ok-order {
  background: #f1f8f2;
  border-radius: 10px;
  padding: 12px;
  margin-top: 13px;
  animation: csRise 0.34s ease-out 0.7s both;
}
.cs-ok-order .cs-ok-label {
  font-size: 11.5px;
  color: #6a8a6c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.cs-ok-order .cs-ok-value {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .cs-hourglass,
  .cs-dots::after,
  .cs-ok-mark,
  .cs-ok-order { animation: none; opacity: 1; transform: none; }
  .cs-ok-ring { display: none; }
}

@media (max-width: 480px) {
  .cs-wait-title { font-size: 14.5px; }
  .cs-ok-order { padding: 10px; margin-top: 10px; }
  .cs-ok-order .cs-ok-value { font-size: 14px; }
  .security-section { padding: 6px 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL RESUMEN EN TRES PIEZAS
   En escritorio se apilan en la columna derecha y no se nota nada.
   En movil cada una viaja a un sitio distinto (ver el @media de 860px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* El boton de plegar es exclusivo del movil. */
.machi_summary-toggle { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIL — 860 px hacia abajo
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /*
     display:contents disuelve el <aside>: sus tres hijos pasan a ser hijos
     directos de la rejilla, y asi cada uno puede ordenarse por separado
     alrededor del formulario. La alternativa era duplicar el DOM para movil,
     y un total escrito dos veces es un total que un dia dira dos cosas.

     ⚠️ Al disolverse el aside se pierden SU fondo y SU padding: por eso cada
        pieza los lleva puestos aqui abajo.
  */
  .machi_right-section { display: contents; }

  .machi_summary-top    { order: -1; }
  .machi_left-section   { order: 0; }
  .machi_summary-method { order: 1; }
  .machi_summary-pay    { order: 2; }

  /* ── 1 · Arriba: el carrito, en UNA SOLA TARJETA ──────────────────────
     Antes la linea del resumen era una banda a todo lo ancho y los productos
     otra, con un filo gris entre medias: se leia como dos bloques pegados, no
     como un carrito. Ahora es una tarjeta redondeada sobre el gris, con un
     solo borde y sin costura por dentro. */
  .machi_summary-top {
    background: #fff;
    border: 1px solid #e9e9ec;
    border-radius: 14px;
    margin: 12px 14px 0;
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }
  .machi_summary-top.is-open { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07); }
  .machi_summary-top .machi_summary-title { display: none; }

  .machi_summary-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    background: none;
    border: 0;
    padding: 15px 16px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    /* 52 px: se pulsa con el pulgar */
    min-height: 52px;
  }
  .machi_summary-toggle-cart { width: 19px; height: 19px; color: #b00000; flex-shrink: 0; }
  .machi_summary-toggle-text { font-size: 13.5px; font-weight: 600; color: #b00000; flex-grow: 1; }
  .machi_summary-toggle-total { font-size: 15px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.01em; }
  .machi_summary-toggle-chevron {
    width: 15px; height: 15px; color: #8a8a94; flex-shrink: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .machi_summary-toggle[aria-expanded="true"] .machi_summary-toggle-chevron { transform: rotate(180deg); }

  /* ── LA TRANSICION ────────────────────────────────────────────────────
     🪤 Antes esto era [hidden], que es display:none — y display NO se puede
        animar. Por eso el resumen aparecia y desaparecia de golpe.

     grid-template-rows 0fr -> 1fr anima hasta la altura REAL del contenido,
     sin numeros magicos: un max-height adivinado se queda corto con tres
     productos y deja un salto muerto con uno.

     Necesita el .machi_summary-body-inner con overflow:hidden. Sin ese hijo
     no se pliega nada. */
  .machi_summary-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.26s ease,
                visibility 0s linear 0.34s;
    /* ⚠️ visibility, y no solo opacidad: plegado, el contenido sigue en la
          pagina y se podria llegar a el con el tabulador o leerlo un lector de
          pantalla, aunque no se vea. Se apaga AL TERMINAR de plegarse (de ahi
          el retardo) para no cortar la animacion. */
    visibility: hidden;
  }
  .machi_summary-body.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.26s ease,
                visibility 0s;
  }
  .machi_summary-body-inner { overflow: hidden; }
  /* 14 px arriba: con 2 px el primer producto quedaba pegado a la linea de
     «Ocultar resumen» y parecia cortado. El aire va aqui dentro y no en
     .machi_summary-body, que es la rejilla que se pliega. */
  .machi_summary-body-pad { padding: 14px 16px 16px; }

  /* Quien pide menos movimiento ve el resumen abrirse sin recorrido. */
  @media (prefers-reduced-motion: reduce) {
    .machi_summary-body,
    .machi_summary-body.is-open,
    .machi_summary-toggle-chevron,
    .machi_summary-top { transition: none; }
  }

  /* ── 2 · Despues del formulario: el medio de pago ─────────────────────── */
  .machi_summary-method {
    background: #fff;
    padding: 18px;
    border-top: 1px solid #e9e9ec;
  }

  /* ── 3 · Barra fija: el total y el boton, siempre a la vista ──────────── */
  .machi_summary-pay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: #fff;
    border-top: 1px solid #e3e3e6;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.08);
    /* safe-area: en iPhone la franja del gesto se come el borde inferior */
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  /* Sin este hueco, la barra tapa el ultimo campo del formulario. */
  .container-checkout { padding-bottom: 150px; }

  .machi_summary-pay .machi_total-bar {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .machi_summary-pay .machi_total-bar-label { color: #666; margin: 0; font-size: 12.5px; }
  .machi_summary-pay .machi_total-bar-amounts { color: #b00000; gap: 7px; }
  .machi_summary-pay .machi_total-bar-main { font-size: 20px; }
  .machi_summary-pay .machi_total-bar-alt { color: #8a8a94; opacity: 1; }
  .machi_summary-pay .machi_pay-button { margin: 0; font-size: 16px; padding: 16px; }
  .machi_summary-pay .machi_security-note { margin: 8px 0 0; }

  /* Estas dos ya no aplican: el resumen ya no es una columna pegajosa. */
  .machi_summary-sticky { position: static; }
}

/* ── El total de la barra fija del movil ───────────────────────────────────
   Oculto en escritorio: ahi manda la barra roja de arriba. */
.machi_paybar-total { display: none; }

@media (max-width: 860px) {
  /* En movil la barra roja de arriba queda fuera de la vista al desplazar,
     asi que el total viaja con el boton. Las dos las escribe updateTotalBar(). */
  .machi_paybar-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .machi_paybar-label { font-size: 12.5px; color: #666; }
  .machi_paybar-label strong { color: #1d6b1d; font-weight: 700; }
  .machi_paybar-amounts { display: flex; align-items: baseline; gap: 7px; }
  .machi_paybar-main { font-size: 20px; font-weight: 700; color: #b00000; letter-spacing: -0.02em; }
  .machi_paybar-cur { font-size: 13px; font-weight: 600; }
  .machi_paybar-alt { font-size: 11.5px; color: #8a8a94; }

  /* La barra roja grande se queda arriba, en el flujo, entre el resumen y el
     medio de pago. No se fija: ya esta el total de la barra de abajo. */
  .machi_total-bar { order: 1; margin: 0 18px 14px; }
}

/* ── Colocacion en la rejilla, ahora que el rastro de pasos es hermano ───── */
.machi_left-section  { grid-column: 1; grid-row: 2; }
.machi_right-section { grid-column: 2; grid-row: 1 / span 2; }

/* El rastro ya trae su propio padding superior; la columna no lo repite. */
.machi_left-section { padding-top: 16px; }

/* El boton flotante «Pide desde USA» se esconde en movil, y se hace desde el
   propio plugin que lo dibuja:
       bolivia-import-manager/assets/css/components/floating-fab.css
   Aqui no va: el FAB es de BIM, y esconderlo desde el tema seria una regla
   escondida en un sitio donde nadie la buscaria. */

@media (max-width: 860px) {
  /* Primero el logo y los pasos, despues el resumen: el cliente quiere saber
     donde esta antes de ver lo que lleva. */
  .machi_checkout-steps {
    grid-column: 1;
    grid-row: auto;
    order: -2;
    padding: 16px 18px 12px;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f2;
    font-size: 12.5px;
  }
  .machi_left-section  { grid-column: 1; grid-row: auto; }
  .machi_right-section { grid-column: 1; grid-row: auto; }
}

/* ── La banda del logo, en movil ───────────────────────────────────────────
   En escritorio sobra el aire. En un telefono esos 88 px (56 de logo mas 32
   de relleno) salen del poco sitio que queda antes del primer campo: entre la
   barra del navegador, el logo, los pasos y la linea del resumen, el cliente
   llegaba a «Datos de contacto» con un tercio de pantalla gastado.

   El cliente ya sabe en que tienda esta -- llego desde su carrito. */
@media (max-width: 860px) {
  .machi_checkout-logo { padding: 12px 0 6px; }
  .machi_checkout-logo img { height: 40px; }
}

@media (max-width: 480px) {
  .machi_checkout-logo { padding: 10px 0 5px; }
  .machi_checkout-logo img { height: 36px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🇺🇸 "PIDE DESDE USA" — FUERA DEL CHECKOUT, EN TODOS LOS TAMAÑOS
   ═══════════════════════════════════════════════════════════════════════════

   El botón flotante de Bolivia Import Manager ya estaba oculto en el carrito y
   el checkout, pero SOLO por debajo de 860 px: en móvil tapaba el botón de
   Pagar. En escritorio seguía ahí, flotando sobre la esquina inferior derecha y
   pisando la línea de "Transacción segura · Banco BISA".

   🪤 Es un ENLACE DE SALIDA en el momento exacto en que el cliente está
      pagando. Da igual el tamaño de pantalla: no es sitio para ofrecerle irse a
      otra parte.

   ⚠️ SE HACE DESDE AQUÍ, no en floating-fab.css, a propósito:

      · ese archivo pertenece al plugin bolivia-import-manager, que vive en
        /wp-content/plugins/ — otro sitio del servidor, con su propio despliegue
      · y BIM refresca su CSS con BIM_VERSION, no con filemtime(), así que
        tocarlo obliga además a subir la versión del plugin

      Una regla en el CSS del checkout se queda con el checkout, y se sube con
      el mismo archivo que todo lo demás.

   La clase .custom-checkout-page la pide a mano page-custom-checkout.php
   (body_class). El id #bim-fab-container lo pone el plugin.
   Solo el checkout: en el carrito el botón sigue teniendo sentido en escritorio.
*/
.custom-checkout-page #bim-fab-container {
  display: none !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  REDISEÑO DE LA VENTANA DEL PAGO — 16/09/2026                             ║
   ╚═══════════════════════════════════════════════════════════════════════════╝

   Va TODO AL FINAL y sobrescribe, en vez de editar las veinte reglas del modal
   repartidas por el archivo. Es deliberado: este archivo controla la pantalla
   donde entra el dinero, y una cirugía a mano por media docena de sitios es más
   fácil de romper que un bloque que se lee de una vez. Lo que queda arriba y ya
   no se usa (.modal-usdt-amount y compañía) es inofensivo: el JS dejó de pintar
   esas clases.

   Tres estados comparten esta ventana, y cada uno tiene su apartado abajo:
     1. el QR del banco    (hideManualBits lo viste)
     2. Binance Pay        (restoreManualBits lo desviste)
     3. el pago confirmado (finish lo reescribe)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) CABECERA ─────────────────────────────────────────────────────────── */

/* El "Pago con QR" de arriba. Lo esconde restoreManualBits() en Binance. */
.cs-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #444;
}
.cs-eyebrow svg { width: 16px; height: 16px; flex-shrink: 0; }

#modalPaymentTitle {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #16181c;
  margin: 0 0 3px;
  text-align: center;
  text-wrap: balance;
}

.machi_modal_order-id {
  font-size: 12.5px;
  font-weight: 600;
  color: #a8adb5;
  letter-spacing: 0;
  margin-bottom: 14px;
  text-align: center;
}

/* ── 2) EL IMPORTE ───────────────────────────────────────────────────────── */
/*
   Ya no es una barra roja: es la cifra, grande y en negro. El rojo se reserva
   para el botón, que es lo único que hay que pulsar. Y manda la moneda que se
   cobra de verdad — ver updateModalTotalAmount() en checkout.js.
*/
#machi-modal_payment-container {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
}
#modalTotalAmount {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cs-amt-main {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #16181c;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.cs-amt-cur {
  font-size: 18px;
  font-weight: 700;
  color: #16181c;
}
.cs-amt-alt {
  font-size: 15px;
  font-weight: 500;
  color: #9aa1ab;
  font-variant-numeric: tabular-nums;
}

/* ── 3) EL RECUADRO DEL QR ───────────────────────────────────────────────── */
/*
   El reloj y la barra van DENTRO, pegados al código: lo que caduca es el
   código, no la página.
*/
.cs-qr-panel {
  border: 1px solid #e6e7ea;
  border-radius: 14px;
  padding: 14px 14px 0;
  margin: 0 0 12px;
  background: #fff;
  overflow: hidden;
}

#modalPaymentImage {
  border: none;
  border-radius: 8px;
  width: 100% !important;
  max-width: 300px;
  height: auto;
  margin: 0 auto 12px;
  display: none;
}

/*
   LA BARRA QUE SE VACÍA. El ancho lo escribe updateTimer() en checkout.js,
   leyendo el mismo timeLeft que pinta el número — no hay dos relojes.
   Roja de principio a fin, a propósito: el color no cambia de significado a
   mitad de cuenta.
*/
.cs-qr-progress {
  height: 4px;
  border-radius: 999px;
  background: #ededf0;
  overflow: hidden;
  margin: 0 -14px;
}
.cs-qr-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: #ff0000;
  border-radius: 999px;
  transition: width 1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .cs-qr-progress-fill { transition: none; }
}

/* El reloj, en una fila dentro del recuadro. */
.timer-section {
  background: none;
  border: none;
  border-radius: 0;
  padding: 11px 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.timer-text { font-size: 13.5px; color: #8a9099; margin: 0; }
.timer-value {
  font-size: 15px;
  font-weight: 700;
  color: #16181c;
  font-family: var(--bim-font);
  font-variant-numeric: tabular-nums;
}

/* ── 4) "ESPERANDO TU PAGO" ──────────────────────────────────────────────── */
/*
   :empty es lo que permite que #crazy-qr-status viva en el HTML y no lo cree
   el JS. restoreManualBits() lo vacía en vez de borrarlo, y vacío desaparece
   de aquí. Ver el comentario en machi-custom-checkout.html.
*/
#crazy-qr-status:empty { display: none; }

.cs-wait {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: #fdf6e3;
  border: 1px solid #f0dda8;
  border-radius: 11px;
  padding: 13px 15px;
  margin: 0 0 14px;
  text-align: left;
}
.cs-wait-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b8860b;
  flex-shrink: 0;
  margin-top: 5px;
  animation: csPulse 1.6s ease-in-out infinite;
}
@keyframes csPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .cs-wait-dot { animation: none; }
}
.cs-wait-body { min-width: 0; }
.cs-wait-title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #6d4c00;
  margin-bottom: 2px;
}
.cs-wait-sub {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: #7a5a10;
}
.cs-wait-sub strong { font-weight: 700; }
/* Dos redacciones, una por ancho. El CSS elige; el JS pinta las dos. */
.cs-wait-short { display: none; }

/* ── 5) DESCARGAR QR ─────────────────────────────────────────────────────── */
/*
   En escritorio va perfilado: ahí el cliente escanea con el móvil y descargar
   es lo secundario. En móvil va macizo, porque ES la acción — no se puede
   escanear con la cámara la misma pantalla que muestra el código.
*/
.download-qr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #ff0000;
  border: 1.5px solid #ff0000;
  border-radius: 11px;
  padding: 14px 18px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}
.download-qr-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.download-qr-btn:hover { background: #fff5f5; color: #ff0000; }
.download-qr-btn:active { transform: translateY(1px); }

.cs-dl-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #a8adb5;
  text-align: center;
}
.cs-dl-hint-mobile { display: none; }

/* ── 6) SALIDA Y PIE ─────────────────────────────────────────────────────── */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
#cancelBtnInModal {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #8a9099;
  text-decoration: underline;
  cursor: pointer;
  width: 100%;
}
#cancelBtnInModal:hover { color: #16181c; }

.cs-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #eeeff1;
  margin-top: 14px;
  padding-top: 13px;
}
.security-section {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #1d6b1d;
}
.support-section {
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: right;
}
.support-text { font-size: 13px; color: #8a9099; margin: 0; }
.support-link,
.support-link:link,
.support-link:visited,
.support-link:hover,
.support-link:focus,
.support-link:active {
  color: #ff0000 !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.support-link:hover { text-decoration: underline; }

/* ── 7) LA PANTALLA DEL PAGO CONFIRMADO ──────────────────────────────────── */
.cs-ok { text-align: center; padding: 4px 0 0; }

.cs-ok-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
}
.cs-ok-mark svg { width: 100%; height: 100%; display: block; }
.cs-ok-circle { fill: #16a34a; }
.cs-ok-check {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cs-ok-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #16181c;
  margin-bottom: 7px;
}
.cs-ok-sub {
  font-size: 15px;
  line-height: 1.5;
  color: #6b7280;
  margin: 0 auto 18px;
  max-width: 40ch;
  text-wrap: pretty;
}

/*
   El recuadro verde. Cada fila sale sólo si hay dato — ver finish() en
   checkout.js: en un comprobante no se rellenan huecos con ceros.
*/
.cs-paid-box {
  background: #f1f8f3;
  border: 1px solid #d3e9d8;
  border-radius: 12px;
  padding: 4px 16px;
  margin: 0 0 16px;
  text-align: left;
}
.cs-paid-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  flex-wrap: wrap;
}
.cs-paid-row + .cs-paid-row { border-top: 1px solid #dfeee4; }
.cs-paid-key {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d6b1d;
  flex-shrink: 0;
}
.cs-paid-val {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cs-paid-num {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  color: #16181c;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cs-paid-cur { font-size: 15px; font-weight: 700; color: #16181c; }
.cs-paid-alt {
  font-size: 13.5px;
  font-weight: 500;
  color: #9aa1ab;
  font-variant-numeric: tabular-nums;
}
.cs-paid-order {
  font-size: 17px;
  font-weight: 700;
  color: #16181c;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/*
   La barra que se llena mientras nos vamos a la página de gracias. Dura lo que
   dice --cs-go-ms, que finish() rellena con GREEN_MS: una sola duración, no dos
   que puedan discrepar.
*/
.cs-go { margin-top: 16px; }
.cs-go-bar {
  height: 4px;
  border-radius: 999px;
  background: #e9ebee;
  overflow: hidden;
  margin-bottom: 9px;
}
.cs-go-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: #16a34a;
  border-radius: 999px;
  animation: csGo var(--cs-go-ms, 2500ms) linear forwards;
}
@keyframes csGo { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .cs-go-bar span { animation: none; width: 100%; }
}
.cs-go-text { font-size: 13px; color: #8a9099; }

/* ── 8) MÓVIL ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #modalPaymentTitle { font-size: 19px; }
  .cs-amt-main { font-size: 34px; }
  .cs-amt-cur { font-size: 16px; }
  .cs-amt-alt { font-size: 14px; }

  .cs-qr-panel { padding: 12px 12px 0; }
  .cs-qr-progress { margin: 0 -12px; }

  /* La frase corta: la larga parte en tres líneas y empuja el botón fuera. */
  .cs-wait-long { display: none; }
  .cs-wait-short { display: inline; }

  /*
     Macizo en móvil: aquí descargar no es una alternativa, es la única forma
     de pagar desde este mismo teléfono.
  */
  .download-qr-btn {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.24);
  }
  .download-qr-btn:hover { background: #e60000; color: #fff; }

  .cs-dl-hint-desktop { display: none; }
  .cs-dl-hint-mobile { display: inline; }

  .cs-ok-mark { width: 66px; height: 66px; margin-bottom: 14px; }
  .cs-ok-title { font-size: 22px; }
  .cs-paid-num { font-size: 24px; }

  /* El pie en dos líneas centradas: en 360px no caben lado a lado. */
  .cs-modal-foot { flex-direction: column; gap: 8px; justify-content: center; }
  .support-section { text-align: center; }
}

/* ── 9) CORRECCIONES DEL 16/09/2026, tras verlo en pantalla ──────────────── */

/*
   🔤 EL PESO 800 NO EXISTE AQUI. Se pedian 800 en once sitios, pero la URL
      de Google Fonts solo trae Inter en 300, 400, 500, 600, 700 y 900:

          ...css2?family=Inter:wght@300;400;500;600;700;900

      Al faltar el 800, el navegador se lo INVENTA (font-synthesis) o salta al
      900. De ahi la letra gorda y algo sucia. Todo el bloque de arriba usa ya
      700, que si esta cargado y se dibuja limpio.

   ⚠️ Si algun dia hace falta 800 de verdad, hay que anadirlo a esa URL en
      functions.php ANTES de usarlo en el CSS.
*/

/*
   🚤 EL BOTON DE DESCARGA SE QUEDABA EN BLANCO.
      Es un <a>, y algo del tema padre le gana al color por especificidad: el
      texto Y el icono (que usa currentColor) se pintaban del color del fondo.
      Un recuadro rojo vacio.

      Mismo blindaje que en la pagina de gracias: el color en los seis estados y
      con !important, porque la regla que estorba esta fuera de este tema y no se
      puede leer desde aqui.
*/
.download-qr-btn,
.download-qr-btn:link,
.download-qr-btn:visited,
.download-qr-btn:hover,
.download-qr-btn:focus,
.download-qr-btn:active {
  color: #ff0000 !important;
  text-decoration: none;
}
.download-qr-btn svg { color: #ff0000; }

/*
   🏦 "Procesado por Banco BISA" (#crazy-bank-note) lo inserta paintSecurity()
      como HERMANO de .security-section, asi que cae DENTRO del pie y se
      convertia en un tercer elemento del space-between. Se le da toda la fila
      para el, centrado.
*/
#crazy-bank-note {
  width: 100%;
  order: 3;
  text-align: center;
  font-size: 12px;
  color: #a8adb5;
}
#crazy-bank-note:empty { display: none; }

/*
   ✅ EL PIE DE LA PANTALLA VERDE. Se lo pone finish() con la clase cs-foot-paid:
      ahi no hay dos cosas que contraponer a izquierda y derecha, solo el sello
      del banco y la salida de ayuda, y el diseno los quiere centrados bajo el
      recuadro.
*/
.cs-modal-foot.cs-foot-paid {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.cs-modal-foot.cs-foot-paid .security-section { justify-content: center; }
.cs-modal-foot.cs-foot-paid .support-section { justify-content: center; text-align: center; }

/* ── 10) EL BOTON DE DESCARGA EN MOVIL — 16/09/2026 ─────────────────────── */
/*
   EL MISMO FALLO, POR EL LADO CONTRARIO.

   En el apartado 9 se fijo `color: #ff0000 !important` para que el tema padre no
   borrase el texto en escritorio. Funciono... y de paso piso el `color: #fff`
   del movil, que NO lleva !important y encima esta antes en el archivo.

   Resultado: en movil el boton es rojo macizo CON TEXTO ROJO. Otro rectangulo
   vacio, igual que el de escritorio pero al reves.

   LA LECCION: un !important no arregla un color, lo congela. Si un estado
   necesita otro color, ese estado necesita su propio !important. No hay termino
   medio una vez que se entra por ahi.

   Va al final del archivo a proposito: con la misma especificidad y el mismo
   !important, gana el ultimo. Si alguien mueve este bloque mas arriba, el boton
   se vuelve a quedar en blanco en el movil.
*/
@media (max-width: 600px) {
  .download-qr-btn,
  .download-qr-btn:link,
  .download-qr-btn:visited,
  .download-qr-btn:hover,
  .download-qr-btn:focus,
  .download-qr-btn:active {
    color: #fff !important;
  }
  .download-qr-btn svg { color: #fff; }
}