/* Unificar look & feel en modal: sin hover saltarín */
.payment-method-btn { transition: none; }
.payment-method-btn:hover { transform: none; box-shadow: none; }
/* Reducir énfasis del foco en botones de método dentro del modal */
#checkoutWizardModal .payment-method-btn:focus,
#checkoutWizardModal .payment-method-btn:active {
  outline: 0;
  box-shadow: none;
}
/* Neutralizar hover en tarjetas internas dentro del modal */
#checkoutWizardModal .card { transition: none; }
#checkoutWizardModal .card:hover { transform: none; }
#checkoutWizardModal .card:focus,
#checkoutWizardModal .card:active { outline: 0; box-shadow: none; }
/* Evitar recuadro de enfoque no deseado en filas copiables */
#checkoutWizardModal .copy-data-row:focus,
#checkoutWizardModal .copy-data-row:active { outline: 0; }
/* Step 5: neutralizar estilo de contenedores de campos dentro del modal */
#checkoutWizardModal .payment-field-box {
  border: none;
  padding: 0;
  background: transparent;
}
#checkoutWizardModal .payment-field-box:hover {
  border-color: transparent;
}
#checkoutWizardModal .payment-field-box .form-control:focus,
#checkoutWizardModal .payment-field-box .form-select:focus {
  border-color: var(--bs-border-color);
  box-shadow: none;
}
/* Desactivar hover/levitación en contenedores de campos del Step 5 */
#checkoutWizardModal .payment-field-box,
#checkoutWizardModal .payment-field-box:hover {
  transform: none;
  box-shadow: none;
  background-color: transparent;
  border-color: var(--bs-border-color);
}

/* Countdown rail styles */
#checkoutWizardModal .countdown-rail {
  height: 6px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 3px;
  overflow: hidden;
}
[data-bs-theme="dark"] #checkoutWizardModal .countdown-rail {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.12);
}
#checkoutWizardModal .countdown-barfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg,#dc3545,#ffc107,#28a745);
}
#checkoutWizardModal .countdown-time {
  min-width: 54px; /* 00:00 */
  text-align: right;
  font-size: 1.25rem;
  line-height: 1.1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.5px;
}
/* Minimal circular spinner */
#checkoutWizardModal .countdown-spinner {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: countdownSpin 1s linear infinite;
  opacity: .95;
}
@keyframes countdownSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Desktop: conservar ancho 720px (mobile usa fullscreen) */
@media (min-width: 576px) {
  #checkoutWizardModal .modal-dialog {
    max-width: 720px;
  }
}

/* Layout tipo “pantalla” dentro del modal: header arriba, body scroll interno */
#checkoutWizardModal .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#checkoutWizardModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Patrón flex robusto (aplica solo al wizard) */
/* Desktop: conservar centrado por defecto (Bootstrap usa margin auto) */
.wizard-modal .modal-dialog {
  margin: .5rem auto;
}

/* Mobile: fullscreen y sin márgenes para aprovechar alto completo */
@media (max-width: 575.98px) {
  .wizard-modal .modal-dialog {
    height: 100lvh;
    max-height: 100lvh;
    margin: 0;
  }
}
.wizard-modal .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
}
.wizard-modal .wizard-header,
.wizard-modal .modal-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 1;
}
.wizard-modal .wizard-body,
.wizard-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0; /* crítico en layouts flex para permitir scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--kb-inset, 0px));
  overscroll-behavior: contain;
  /* Evitar re-anclaje de scroll que puede dejar oculto el header al abrir */
  overflow-anchor: none;
}
.wizard-modal .wizard-body.no-scroll,
.wizard-modal .modal-body.no-scroll {
  overflow-y: hidden;
  /* Evitar momentum scroll y permitir taps inmediatos cuando no hay overflow */
  -webkit-overflow-scrolling: auto;
  touch-action: manipulation;
}

/* Mostrar mensajes de error sin inline-styles ni !important */
#checkoutWizardModal .invalid-feedback { display: none; }
#checkoutWizardModal .has-invalid .invalid-feedback { display: block; }

/* iOS caret/taps: desactivar transform/transitions durante foco en inputs (solo en el wizard) */
.wizard-modal.ios-input-focus .modal,
.wizard-modal.ios-input-focus .modal-dialog,
.wizard-modal.ios-input-focus .modal-content {
  transform: none;
  transition: none;
}

/* Safari/iOS: bloquear scroll del fondo cuando el wizard está abierto */
@media (max-width: 575.98px) {
  html.modal-lock,
  body.modal-lock {
    overflow: hidden;           /* bloquear desplazamiento del fondo */
    overscroll-behavior: none;  /* evitar chaining hacia el body */
  }
}

/* Alinear currency sobre el monto sin aumentar la altura de la fila */
#checkoutWizardModal .total-amount-stack {
  position: relative;
  line-height: 1; /* compacto para el bloque del monto */
  margin-top: -0.25rem; /* subir el bloque sin crecer la fila */
}
#checkoutWizardModal .total-amount-stack .currency-display {
  position: absolute;
  right: 0;
  /* colocar el badge justo por encima del monto */
  bottom: 100%;
}