/* Popup Modal Styles */
.popup-form {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 9999; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   background: rgba(0, 0, 0, 0.6); /* Black background with transparency */
   justify-content: center; /* Center horizontally */
   align-items: center; /* Center vertically */
}

.popup-content {
   background-color: #fff; /* White background */
   padding: 20px; /* Some padding */
   border-radius: 12px; /* Rounded corners */
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Shadow effect */
   width: 300px; /* Fixed width */
   max-width: 90%; /* Responsive */
   transform: translateY(-1000px); /* Move off-screen */
   animation: pop 0.5s forwards; /* Animation */
}

/* Animation for popup */
@keyframes pop {
   0% {
       transform: translateY(-1000px);
       opacity: 0; /* Hidden initially */
   }
   100% {
       transform: translateY(0);
       opacity: 1; /* Fully visible */
   }
}

/* Show the popup */
.popup-form.show {
   display: relative; /* Use flex to align items */
}

.close-btn {
   position: absolute; /* Positioning for close button */
   top: 10px;
   right: 15px;
   font-size: 20px;
   cursor: pointer;
}

.theme-btn {
   background-color: #007BFF; /* Primary button color */
   color: #fff; /* White text */
   padding: 10px 20px; /* Padding */
   border: none; /* No border */
   border-radius: 5px; /* Rounded corners */
   cursor: pointer; /* Pointer cursor on hover */
   transition: background-color 0.3s; /* Smooth transition */
}

.theme-btn:hover {
   background-color: #0056b3; /* Darker color on hover */
}

/* Form Styles */
.popup-content form {
   display: flex; /* Flexbox layout */
   flex-direction: column; /* Vertical layout */
}

.popup-content label {
   font-weight: bold; /* Bold labels */
   margin-top: 10px; /* Space above */
   margin-bottom: 5px; /* Space below */
}

.popup-content input,
.popup-content textarea {
   width: 100%; /* Full width */
   padding: 10px; /* Padding */
   margin-bottom: 15px; /* Space below */
   border: 1px solid #ccc; /* Light border */
   border-radius: 4px; /* Rounded corners */
   font-size: 16px; /* Font size */
}

.popup-content textarea {
   resize: vertical; /* Allow vertical resizing */
   height: 80px; /* Set a fixed height for the textarea */
}