.popup-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 display: none;
 z-index: 999;
 }
 .popup-container {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) scale(0.9);
 background-color: #ffffff;
 padding: 30px 25px;
 border-radius: 12px;
 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
 max-width: 400px;
 width: 90%;
 z-index: 1000;
 display: none;
 animation: fadeIn 0.3s ease-out forwards;
 }
 .popup-box h2 {
 margin-top: 10px;
 font-size: 22px;
 color: #333;
 }
 .popup-box p {
 font-size: 14px;
 color: #666;
 margin-bottom: 15px;
 }
 .popup-icon {
 width: 50px;
 display: block;
 margin: 0 auto 10px;
 }
 .popup-input {
 width: 100%;
 padding: 12px;
 border: 1px solid #ddd;
 border-radius: 8px;
 font-size: 14px;
 margin-bottom: 10px;
 }
 .popup-btn {
 width: 100%;
 background-color: #007bff;
 border: none;
 padding: 12px;
 font-size: 15px;
 border-radius: 8px;
 color: #fff;
 cursor: pointer;
 transition: background-color 0.3s;
 }
 .popup-btn:hover {
 background-color: #0056b3;
 }
 .close-btn {
 position: absolute;
 right: 15px;
 top: 12px;
 font-size: 22px;
 color: #999;
 cursor: pointer;
 transition: color 0.2s ease;
 }
 .close-btn:hover {
 color: #333;
 }
 .error-text {
 color: red;
 font-size: 13px;
 margin-bottom: 10px;
 text-align: left;
 }
 @keyframes fadeIn {
 to {
 transform: translate(-50%, -50%) scale(1);
 }
 }