.popup-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Darker overlay to match gradient depth */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Ensure it appears above other content */
}

.popup-content {
  background: radial-gradient(circle at 30% 40%, #5081ac, #2d3540 45%, #4a6fa3 75%, #1c2e4a 100%);
  padding: 20px;
  border-radius: 10px; /* Slightly larger radius for smoother look */
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Deeper shadow for contrast */
  border: 1px solid #4a6fa3; /* Subtle border to enhance gradient */
}

#popupMessage {
  margin: 0 0 15px;
  font-size: 16px;
  color: #e0e7ff; /* Light color for readability on dark gradient */
  font-family: 'Poppins', sans-serif; /* Match your website's font */
}

.popup-btn {
  background: #4a6fa3; /* Button color from gradient for cohesion */
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease; /* Smooth hover transition */
}

.popup-btn:hover {
  background: #5081ac; /* Lighter gradient color for hover effect */
}

.loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.5s;
      opacity: 0;
      pointer-events: none;
    }

    .loader.active {
      opacity: 1;
      pointer-events: auto;
    }

    .spinner {
      width: 60px;
      height: 60px;
      border: 6px solid #00ffcc;
      border-top-color: #ff00ff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }