/* The mask/dimmer */
.popup-overlay {
  position: fixed;

  /* Positions the container at the bottom */
  top: calc(100dvh - clamp(12.25rem, -0.536rem + 4.762vi, 14.5rem));
  bottom: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 100%;
  z-index: 1000;

  /* This ensures the mask doesn't block scrolling of the body */
  /* if you click the mask itself. */
  pointer-events: none;
}

/* The actual popup box */
.popup-content {
  pointer-events: auto; /* Re-enable clicks for the popup content */
}

.popup-content .content-module-section-title{
  margin: auto;
  margin-left: 0px;
}

.popup-content .gk-btn-container{
  align-content: space-between;
  justify-content: space-between;
}

@media (max-width: 768px){
  .popup-content .gk-btn-container{
    width: 100%;
  }
}


.bg-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewbox='0 0 40 40'%3E%3Cpath d='M 10,10 L 30,30 M 30,10 L 10,30' stroke='white' stroke-width='4' stroke-linecap='butt' /%3E%3C/svg%3E");
  background-size: 100%;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.bg-close:hover {
  color: #ef4444; /* Changes the SVG color on hover */
  transform: scale(1.1);
}

.bg-close:active {
  transform: scale(0.95);
}

/* Helper class to hide the popup */
.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.popup-overlay:not(.hidden) .popup-content {
  animation: fadeIn 0.3s ease-out forwards;
}