/* modal-scroll-lock.css v2.0
   CSS DEFINITIVO para modales que preserva scroll sin bloquear funcionalidad
*/

/* Lock del background con nuevas clases para evitar conflictos */
html.topnet-modal-scroll-locked,
body.topnet-modal-scroll-locked {
  overflow: hidden !important;
}

/* Mantener compatibilidad con clases anteriores */
html.modal-scroll-locked,
body.modal-scroll-locked {
  overflow: hidden !important;
}

/* El modal debe tener scroll propio */
.product-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: rgba(0, 0, 0, 0.75) !important; /* Fondo más suave */
}

/* Contenido del modal con scroll propio */
.product-modal__dialog {
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 2rem auto !important;
}

/* Asegurar que el overlay no bloquee el scroll del modal */
.product-modal__overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important; /* El fondo lo maneja .product-modal */
  z-index: -1 !important; /* Detrás del contenido del modal */
}

/* Prevenir scroll suave durante transiciones */
html.topnet-modal-scroll-locked,
html.modal-scroll-locked {
  scroll-behavior: auto !important;
}

/* Mejoras para móviles */
@media (max-width: 768px) {
  .product-modal__dialog {
    max-height: 95vh !important;
    margin: 1rem !important;
  }
}

/* Soporte específico para iOS */
@supports (-webkit-touch-callout: none) {
  .product-modal {
    -webkit-overflow-scrolling: touch !important;
  }
  
  .product-modal__dialog {
    -webkit-overflow-scrolling: touch !important;
  }
  
  html.topnet-modal-scroll-locked,
  body.topnet-modal-scroll-locked {
    position: fixed !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Asegurar que inputs no causen zoom en móviles */
.product-modal input,
.product-modal select,
.product-modal textarea {
  font-size: 16px !important;
  transform: translateZ(0); /* Forzar aceleración de hardware */
}