/**
 * Form Section Transitions - No Scroll
 * Ensures smooth transitions between form sections without any page scrolling
 * Updated: Fixed stacking issue with !important flags
 */

/* Prevent smooth scrolling globally */
html {
  scroll-behavior: auto !important;
}

body {
  scroll-behavior: auto !important;
}

/* Form Content Container - needs to be positioned for absolute children */
.form-content {
  position: relative !important;
  padding-bottom: 120px;
  scroll-behavior: auto !important;
  min-height: 600px;
}

/* Hide all sections by default with absolute positioning */
.form-section {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: none !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease-in-out !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Show active section with fade-in */
.form-section.active {
  position: relative !important;
  display: block !important;
  opacity: 1 !important;
  animation: fadeIn 0.4s ease-in-out forwards !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Fade out animation for sections being hidden */
.form-section.fade-out {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: block !important;
  opacity: 1 !important;
  animation: fadeOut 0.4s ease-in-out forwards !important;
  pointer-events: none !important;
  z-index: 1 !important;
  visibility: visible !important;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Prevent any layout shifts */
.application-container {
  overflow-x: hidden;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .form-content {
    padding-bottom: 100px;
    min-height: 500px;
  }
}