[v-cloak] { display: none; }

/* The Dark Overlay Background */
.modal-overlay {
  position: fixed !important;
  top: 0 !important; 
  left: 0 !important;
  width: 100vw !important; 
  height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.75);
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(5px);
}

.modal-content-box {
  background-color: var(--modal-bg);
  padding: 60px 20px 20px;
  border-radius: 20px;
  width: fit-content; 
  max-width: var(--modal-max-width);
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The Close "X" Button */
.modal-close {
  position: absolute;
  top: 15px; right: 20px;
  font-size: 30px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}
.modal-close:hover { color: #333; }

/* Vue Animations */
.pop-enter-active, .pop-leave-active { transition: all 0.3s ease; }
.pop-enter, .pop-leave-to { opacity: 0; transform: scale(0.95); }