/* ==========================================================================
   PeptixHouse — Checkout manual (Nequi / Bancolombia + WhatsApp)
   Se carga junto a checkout.css en /checkout.html y reutiliza sus variables
   --checkout-* (definidas ahí). No duplica el reset ni el sistema base.
   ========================================================================== */

/* === PANEL LATERAL: tope de altura con scroll propio (el sticky base ya
   viene de checkout.css); evita que se corte contenido en pantallas bajas
   ahora que el panel creció con QR + comprobante === */
@media (min-width: 769px) {
  .checkout-page .checkout-summary {
    max-height: calc(100vh - var(--space-6));
    overflow-y: auto;
  }
}

/* === MICRO-ANIMACIÓN AL COPIAR UN DATO === */
@keyframes ph-copiado-flash {
  0% { background-color: transparent; }
  30% { background-color: rgba(127, 191, 171, 0.25); }
  100% { background-color: transparent; }
}

.dato-copiado {
  animation: ph-copiado-flash 0.6s ease;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .dato-copiado {
    animation: none;
  }
}

/* === CHECKMARK DE SECCIÓN COMPLETA (formulario de checkout) === */
.checkout-form-section__check {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 14px;
  vertical-align: middle;
}

/* === SEPARACIÓN VISUAL ENTRE BLOQUES DEL PANEL LATERAL (checkout.html) === */
#timer-reserva {
  margin-top: var(--space-5);
}

#pago-manual-container {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--checkout-divider);
}

.checkout-summary__bloque-seguridad {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--checkout-divider);
}

/* === CONTENEDOR DEL STEPPER (fuera de checkout-layout, ancho completo) === */
.checkout-stepper-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6) 0;
}

@media (max-width: 768px) {
  .checkout-stepper-wrap {
    padding: var(--space-3) var(--space-4) 0;
  }
}

/* === STEPPER (barra de progreso) === */
.checkout-page .ph-stepper {
  margin-bottom: var(--space-5);
}

.checkout-page .ph-stepper__pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Línea compacta "Paso X de Y · Nombre": oculta salvo cuando las etiquetas
   individuales se ocultan (ver el media query de abajo), para que el
   cliente nunca pierda de vista en qué paso está. */
.checkout-page .ph-stepper__actual {
  display: none;
  margin-top: var(--space-2);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--checkout-text);
}

.checkout-page .ph-stepper__paso {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.checkout-page .ph-stepper__circulo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--checkout-border);
  color: var(--checkout-text-tertiary);
  transition: background var(--checkout-transition), color var(--checkout-transition);
}

.checkout-page .ph-stepper__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--checkout-text-tertiary);
  white-space: nowrap;
  transition: color var(--checkout-transition);
}

.checkout-page .ph-stepper__linea {
  width: 32px;
  height: 2px;
  background: var(--checkout-border);
  flex-shrink: 0;
  transition: background var(--checkout-transition);
}

.checkout-page .ph-stepper__linea--completado {
  background: var(--checkout-mint-dark);
}

.checkout-page .ph-stepper__paso--completado .ph-stepper__circulo {
  background: var(--checkout-mint-dark);
  color: #FFFFFF;
}

.checkout-page .ph-stepper__paso--completado .ph-stepper__label {
  color: var(--checkout-text);
}

.checkout-page .ph-stepper__paso--activo .ph-stepper__circulo {
  background: var(--checkout-text);
  color: #FFFFFF;
  animation: ph-stepper-pulso 1.6s ease-in-out infinite;
}

.checkout-page .ph-stepper__paso--activo .ph-stepper__label {
  color: var(--checkout-text);
  font-weight: 600;
}

@keyframes ph-stepper-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 35, 50, 0.20); }
  50% { box-shadow: 0 0 0 6px rgba(26, 35, 50, 0); }
}

@media (max-width: 480px) {
  .checkout-page .ph-stepper__label { display: none; }
  .checkout-page .ph-stepper__linea { width: 20px; }
  .checkout-page .ph-stepper__actual { display: block; }
}

/* === TIMER DE RESERVA === */
.checkout-page .ph-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--checkout-radius-sm);
  background: var(--checkout-surface-subtle);
  border: 1px solid var(--checkout-border);
  color: var(--checkout-text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background var(--checkout-transition), color var(--checkout-transition), border-color var(--checkout-transition);
}

.checkout-page .ph-timer--alerta {
  background: rgba(217, 164, 6, 0.10);
  border-color: rgba(217, 164, 6, 0.30);
  color: #92660A;
}

.checkout-page .ph-timer--critico {
  background: rgba(230, 57, 70, 0.10);
  border-color: rgba(230, 57, 70, 0.30);
  color: var(--checkout-error);
  animation: ph-timer-pulso 1s ease-in-out infinite;
}

@keyframes ph-timer-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-page .ph-stepper__paso--activo .ph-stepper__circulo,
  .checkout-page .ph-timer--critico {
    animation: none;
  }
}

/* === MODAL: RESERVA EXPIRADA === */
.ph-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 1000;
  animation: checkout-fade-in-up 0.25s ease both;
}

.ph-modal {
  background: var(--checkout-card-bg);
  border-radius: var(--checkout-radius-card);
  box-shadow: var(--checkout-shadow-lg);
  padding: var(--space-5);
  max-width: 360px;
  width: 100%;
  text-align: center;
  font-family: var(--checkout-font);
}

.ph-modal__icono {
  font-size: 32px;
  margin-bottom: var(--space-2);
}

.ph-modal__titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--checkout-text);
  margin-bottom: var(--space-2);
}

.ph-modal__texto {
  font-size: 14px;
  line-height: 1.5;
  color: var(--checkout-text-secondary);
  margin-bottom: var(--space-4);
}

.ph-modal__boton {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--checkout-radius-pill);
  background: var(--checkout-text);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--checkout-transition), transform var(--checkout-transition);
}

.ph-modal__boton:hover {
  background: var(--checkout-mint-dark);
  color: var(--checkout-text);
}

/* === SELECTOR DE MÉTODO DE PAGO === */
.checkout-page .metodos-pago-selector {
  margin-bottom: var(--space-4);
}

.checkout-page .metodos-pago-titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--checkout-text);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.checkout-page .metodos-pago-descripcion {
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--checkout-text-secondary);
}

.checkout-page .metodos-pago-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Si el último método queda solo en su fila (cantidad impar), ocupa todo el ancho */
.checkout-page .metodos-pago-grid > .metodo-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.checkout-page .metodo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: var(--space-3);
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-card);
  overflow: hidden;
  transition: border-color var(--checkout-transition), box-shadow var(--checkout-transition), transform var(--checkout-transition);
}

.checkout-page .metodo-card:hover {
  border-color: var(--checkout-mint-dark);
  transform: translateY(-2px);
  box-shadow: var(--checkout-shadow-sm);
}

.checkout-page .metodo-card--seleccionado {
  border-color: var(--checkout-mint-dark);
  box-shadow: 0 0 0 3px rgba(127, 191, 171, 0.18);
}

.checkout-page .metodo-card-logo-full {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.checkout-page .metodo-card-nombre-fallback {
  display: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--checkout-text);
}

@media (max-width: 480px) {
  .checkout-page .metodos-pago-grid {
    grid-template-columns: 1fr;
  }
}

/* === PANTALLA DE PAGO (QR + datos + copiar) === */
.checkout-page .pantalla-pago-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.checkout-page .pantalla-pago-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--checkout-surface-subtle);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.checkout-page .pantalla-pago-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.checkout-page .pantalla-pago-nombre {
  font-size: 18px;
  font-weight: 600;
  color: var(--checkout-text);
}

.checkout-page .pantalla-pago-a {
  margin-top: 2px;
  font-size: 13px;
  color: var(--checkout-text-secondary);
}

.checkout-page .pantalla-pago-qr-wrap {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-card);
  background: var(--checkout-card-bg);
  overflow: hidden;
  display: flex;
}

.checkout-page .pantalla-pago-qr {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.checkout-page .pantalla-pago-qr-wrap--vacio {
  display: grid;
  place-items: center;
  background: var(--checkout-surface-subtle);
}

.checkout-page .pantalla-pago-qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
}

.checkout-page .pantalla-pago-qr-placeholder__icono {
  color: var(--checkout-text-tertiary);
}

.checkout-page .pantalla-pago-qr-placeholder__titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--checkout-text-secondary);
}

.checkout-page .pantalla-pago-qr-placeholder__subtitulo {
  font-size: 12px;
  color: var(--checkout-text-tertiary);
}

.checkout-page .pantalla-pago-qr-texto {
  margin-top: var(--space-2);
  text-align: center;
  font-size: 12px;
  color: var(--checkout-text-tertiary);
}

.checkout-page .pantalla-pago-datos {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checkout-page .pantalla-pago-dato {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--checkout-surface-subtle);
  border-radius: var(--checkout-radius-sm);
}

.checkout-page .pantalla-pago-dato--simple {
  grid-template-columns: auto 1fr;
}

.checkout-page .pantalla-pago-dato-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--checkout-text-tertiary);
}

.checkout-page .pantalla-pago-dato-valor {
  font-size: 16px;
  font-weight: 600;
  color: var(--checkout-text);
  text-align: right;
  word-break: break-word;
}

.checkout-page .pantalla-pago-dato--simple .pantalla-pago-dato-valor {
  text-align: left;
}

.checkout-page .pantalla-pago-dato-valor--codigo {
  font-size: 15px;
  font-weight: 500;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  letter-spacing: -0.01em;
}

.checkout-page .pantalla-pago-dato-valor--pendiente {
  font-weight: 400;
  font-style: italic;
  color: var(--checkout-text-tertiary);
}

/* En móvil, etiqueta/valor/botón no caben en una sola línea sin truncar
   (el valor es justo lo que el cliente necesita ver para copiar/transferir
   bien) — se apilan verticalmente, igual que apps de pagos reales. */
@media (max-width: 480px) {
  .checkout-page .pantalla-pago-dato,
  .checkout-page .pantalla-pago-dato--simple {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .checkout-page .pantalla-pago-dato-valor {
    text-align: left;
    font-size: 17px;
  }

  .checkout-page .pantalla-pago-dato .boton-copiar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-2);
    margin-top: var(--space-1);
  }
}

.checkout-page .boton-copiar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkout-page .boton-copiar:disabled:hover {
  border-color: var(--checkout-border);
}

.checkout-page .boton-copiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--checkout-text);
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-sm);
  white-space: nowrap;
  transition: border-color var(--checkout-transition), background var(--checkout-transition);
}

.checkout-page .boton-copiar:hover {
  border-color: var(--checkout-mint-dark);
}

.checkout-page .boton-copiar-exito {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--checkout-success);
  color: var(--checkout-success);
}

.checkout-page .boton-copiar-error {
  background: rgba(230, 57, 70, 0.12);
  border-color: var(--checkout-error);
  color: var(--checkout-error);
}

.checkout-page .pantalla-pago-aviso {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(217, 164, 6, 0.08);
  border: 1px solid rgba(217, 164, 6, 0.25);
  border-radius: var(--checkout-radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: #6B5205;
}

.checkout-page .pantalla-pago-cambiar-metodo {
  display: block;
  margin-bottom: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--checkout-text-secondary);
  cursor: pointer;
}

.checkout-page .pantalla-pago-cambiar-metodo:hover {
  color: var(--checkout-text);
  text-decoration: underline;
}

.checkout-page .pantalla-pago-boton-siguiente {
  margin-top: var(--space-4);
}

/* === SUBIDA DE COMPROBANTE === */
.checkout-page .comprobante-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--checkout-text);
  margin-bottom: 12px;
}

.checkout-page .comprobante-descripcion {
  font-size: 13px;
  color: var(--checkout-text-secondary);
  margin-bottom: 20px;
}

.checkout-page .comprobante-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 32px 20px;
  border: 2px dashed var(--checkout-border);
  border-radius: var(--checkout-radius-card);
  background: var(--checkout-surface-subtle);
  cursor: pointer;
  transition: border-color var(--checkout-transition), background var(--checkout-transition);
}

.checkout-page .comprobante-drop-zone:hover,
.checkout-page .comprobante-drop-zone--sobre {
  border-color: var(--checkout-mint-dark);
  background: rgba(127, 191, 171, 0.08);
}

.checkout-page .drop-zone-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.checkout-page .drop-zone-icono {
  font-size: 32px;
}

.checkout-page .drop-zone-texto {
  font-size: 13px;
  color: var(--checkout-text-secondary);
  line-height: 1.5;
}

.checkout-page .drop-zone-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.checkout-page .drop-zone-preview__imagen {
  max-width: 100%;
  max-height: 140px;
  border-radius: var(--checkout-radius-sm);
  object-fit: contain;
}

.checkout-page .drop-zone-preview__icono-pdf {
  font-size: 40px;
}

.checkout-page .drop-zone-preview__nombre {
  font-size: 12px;
  color: var(--checkout-text-secondary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-page .drop-zone-preview__cambiar {
  font-size: 12px;
  font-weight: 600;
  color: var(--checkout-text);
  text-decoration: underline;
}

.checkout-page .comprobante-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--checkout-error);
}

.checkout-page .comprobante-error__icono {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
}

.checkout-page .comprobante-uploader .btn-pagar {
  width: 100%;
  margin-top: var(--space-4);
}

/* === RESULTADO DEL OCR === */
.checkout-page .ocr-resultado {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--checkout-radius-sm);
  font-size: 13px;
  line-height: 1.4;
}

.checkout-page .ocr-resultado__texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.checkout-page .ocr-porcentaje {
  font-size: 12px;
  font-weight: 600;
}

.checkout-page .ocr-barra {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.checkout-page .ocr-barra__relleno {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.checkout-page .ocr-barra__relleno--exito { background: var(--checkout-success); }
.checkout-page .ocr-barra__relleno--parcial { background: #D9A406; }
.checkout-page .ocr-barra__relleno--manual { background: var(--checkout-text-tertiary); }
.checkout-page .ocr-barra__relleno--dudoso { background: var(--checkout-error); }

.checkout-page .ocr-cargando {
  background: var(--checkout-surface-subtle);
  color: var(--checkout-text-secondary);
}

.checkout-page .ocr-exito {
  background: rgba(16, 185, 129, 0.10);
  color: var(--checkout-success);
}

.checkout-page .ocr-parcial {
  background: rgba(217, 164, 6, 0.10);
  color: #92660A;
}

.checkout-page .ocr-manual {
  background: var(--checkout-surface-subtle);
  color: var(--checkout-text-secondary);
}

.checkout-page .ocr-dudoso {
  background: rgba(230, 57, 70, 0.10);
  color: var(--checkout-error);
}

.checkout-page .ocr-icono {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
}

.checkout-page .ocr-spinner {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--checkout-text-secondary);
  border-radius: 50%;
  animation: ph-spin 0.7s linear infinite;
}

.checkout-page .btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: ph-spin 0.7s linear infinite;
  vertical-align: -3px;
}

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

@media (prefers-reduced-motion: reduce) {
  .checkout-page .ocr-spinner,
  .checkout-page .btn-spinner {
    animation: none;
  }
}

/* === BLOQUEO DEL SELECTOR MIENTRAS EL FORMULARIO NO ES VÁLIDO === */
.checkout-page .pago-manual-container--bloqueado {
  position: relative;
  opacity: 0.45;
  pointer-events: none;
}

.checkout-page .pago-manual-container--bloqueado::after {
  content: 'Completa el formulario para elegir método de pago';
  display: block;
  margin-top: var(--space-2);
  font-size: 12px;
  text-align: center;
  color: var(--checkout-text-tertiary);
}

/* === PLACEHOLDER: fases futuras aún no implementadas === */
.checkout-page .pago-manual-proximamente {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  color: var(--checkout-text-secondary);
  font-size: 13px;
  line-height: 1.6;
  background: var(--checkout-surface-subtle);
  border-radius: var(--checkout-radius-sm);
}

.checkout-page .pago-manual-proximamente strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--checkout-text);
  font-size: 14px;
}