/* Fix for info-popup to make it expandable vertically like form-popup */
.popup[data-popup="info-popup"],
.popup[data-popup^="calc-popup"] {
  top: 0;
  transform: translateX(-50%);
  padding: 2rem 0;
  overflow-y: auto;
  height: 100%;
  padding-right: 2rem;
  margin-right: -2rem;
}

.popup[data-popup="info-popup"] .popup__wrap,
.popup[data-popup^="calc-popup"] .popup__wrap {
  min-height: auto;
  max-height: none;
}

.popup[data-popup="info-popup"] .popup__scroll-wrap,
.popup[data-popup^="calc-popup"] .popup__scroll-wrap {
  max-height: none;
  overflow-y: visible;
}

/* Make information head more flexible */
.information__head,
.calculation__head {
  min-height: auto;
  height: auto;
}

/* Add padding to paragraphs in the info-popup */
.popup[data-popup="info-popup"] .information__head p {
  padding-bottom: 15px;
}

/* Make the accordion content expandable to fit content */
.popup[data-popup="info-popup"] .accordion__content,
.popup[data-popup^="calc-popup"] .accordion__content {
  max-height: none;
  height: auto;
}

.popup[data-popup="info-popup"] .accordion__title.active + .accordion__content,
.popup[data-popup^="calc-popup"] .accordion__title.active + .accordion__content {
  max-height: none;
}

/* Overlay fixes for all devices */
.overlay.active {
  display: block !important;
  opacity: 1 !important;
  z-index: 98 !important;
}

/* Fix for mobile view */
@media (max-width: 639px) {
  /* Overlay should cover entire screen */
  .overlay.active {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* General popup styles for mobile */
  .popup.active {
    display: block !important;
    opacity: 1 !important;
    z-index: 99 !important;
    transition: opacity .5s ease;
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  
  /* Video popup also needs these styles */
  .popup--video.active {
    display: block !important;
    opacity: 1 !important;
    z-index: 99 !important;
    transform: none !important;
  }
  
  /* Video container size fix */
  .popup__video {
    width: 100%;
    height: 100% !important;
    max-height: calc(100vh - 8rem);
    margin-top: 4rem;
  }
  
  /* Specific popup styles */
  .popup__wrap {
    min-height: auto !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 5rem 1.5rem 2rem !important;
  }
  
  /* Fix scroll container on mobile */
  .popup__scroll-wrap {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
    margin: 0 !important;
    padding: 0 1rem !important;
  }
  
  /* Ensure popup close button is visible */
  .popup__close, 
  .popup__close-video {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 999 !important;
  }
  
  /* Fix body when popup is open */
  body.overflow {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
}