/* Modal Wrapper Styles */
.modal-wrapper {
   display: none; /* Hide by default */
   position: fixed; /* Fixed position to cover the entire viewport */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
   z-index: -1; /* Initially behind content */
   opacity: 0; /* Initially invisible */
   transition: opacity 0.3s ease, z-index 0s 0.3s; /* Smooth transition for opacity */
}

/* Modal Content Styles */
.modal-content {
   position: relative;
   margin: 50px auto; /* Centered horizontally */
   background-color: white;
   border-radius: 8px;
   max-width: 90%;
   max-height: 90%;
   overflow: hidden;
   padding: 20px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
}

/* Modal Body Styles */
.modal-body {
   flex-grow: 1;
   /* overflow-y: auto; */
   max-height: calc(100vh - 100px);
}

/* Close Button Styles */
.close-btn {
   position: fixed;
   top: 20px;
   right: 20px;
   font-size: 30px;
   font-weight: bold;
   color: white;
   background-color: transparent;
   border: none;
   cursor: pointer;
   z-index: 10;
}

.close-btn:hover {
   color: #161616;
}

/* Modal Transition Styles */
.modal-wrapper.open {
   display: block;
   opacity: 1;
   z-index: 9999; /* Bring to front when open */
   transition: opacity 0.3s ease;
}