/**
 * Viewport Height Fix for Mobile Browsers
 * Handles the dynamic viewport height issue on mobile devices
 */

/* Use CSS custom property for true viewport height */
#lofi-swap-modal,
#simple-lofi-swap-modal,
.simple-swap-modal {
  height: 100vh; /* Fallback */
  height: calc(var(--vh, 1vh) * 100);
}

/* Modal containers on mobile should respect true viewport */
@media (max-width: 767px) {
  .lofi-swap-container,
  .simple-swap-container {
    max-height: calc(var(--vh, 1vh) * 90);
    height: auto;
  }
}

/* Touch feedback styles */
.touch-active {
  transform: scale(0.97) !important;
  opacity: 0.8 !important;
  transition: all 0.1s ease !important;
}