/* The popup “card” */
.popup {
  background-color: var(--popup-bg);
  padding: 2rem;
  border-radius: var(--popup-radius, 1.5rem);
  box-shadow: var(--form-shadow);
  color: var(--inverted-text-color);
  margin-top: 4rem;
  /* sizing */
  max-width: 90%;
  width: 800px;              /* adjust to taste */
  max-height: calc(85vh - var(--modal-offset)); /* prevent overflow beyond bottom */

  /* layout: stack header/content/footer if you have them */
  display: flex;
  flex-direction: column;

  position: relative;
  z-index: var(--z-popup);             /* above the backdrop */
  /* enable scrolling inside here only */
  overflow-y: auto;

  /* prevent scroll chaining to the body on touch devices */
  overscroll-behavior: contain;
}

/* Scrollable inner area */
.popup__content {
  /* use up all remaining vertical space in the popup */
  flex: 1 1 auto;
}


/* optional simple “scale+fade” */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1);    }
}

/* apply the animation to any popup with .animate */
.popup.animate {
  /* run the animation on show */
  animation: fadeInScale 300ms ease-out;
}

/* optional: if you want a matching fade-out on close,
   you can add a class and JS hook for it */
@keyframes popupFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.50);
  }
}

.popup.animate-out {
  animation: popupFadeOut 100ms ease-in forwards;
}

@media (max-width: 1050px) {
	.popup {
		  margin-top: 0;
	}
}