/* custom modal  */
.modal-overlay {
   width: 100dvw;
   height: 100dvh;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #00000099;
   display: flex;
   justify-content: center;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   overflow: auto;
   padding-top: 50px;
   padding-bottom: 50px;
   z-index: 1002;
   opacity: 0;
   visibility: hidden;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-content-wrapper {
   display: flex;
   flex-direction: column;
   background-color: var(--white);
   border-radius: 6px;
   box-shadow: var(--card-shadow);
   animation: modal-appear 0.3s ease-out;
}
.modal-content-wrapper.pulse { animation: pulse 0.3s ease; }

/* Modal Open/Close Animations */
@keyframes modal-appear { 
   from { 
      transform: translateY(0); 
      opacity: 1; 
   } to { 
      transform: translateY(0); 
      opacity: 1; 
   } 
}
@keyframes pulse { 
   0% { transform: scale(1); } 
   50% { transform: scale(1.02); } 
   100% { transform: scale(1); } 
}

/* Close Button */
.modal-close {
   position: absolute;
   top: 21px;
   right: 21px;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 30px;
   width: 30px;
   padding: 0;
   background: transparent;
   border: none;
   cursor: pointer;
   color: rgb(156 163 175);
}
.modal-close > i::before { font-weight: 900; }
.modal-close:hover{ color: var(--dark); }
.modal-close svg{
   height: 20px;
   width: 20px;
}