/* css/login.css */

#loginModal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); z-index: 10000;
    align-items: center; justify-content: center;
}

#loginModal .modal-content {
    background-color: #2c3e50; color: white; padding: 30px; border-radius: 12px;
    width: 90%; max-width: 380px; box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    position: relative; animation: modalSlideIn 0.3s ease-out; margin: auto;
}

@keyframes modalSlideIn { 
    from { opacity: 0; transform: translateY(-20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

#loginModal .close {
    position: absolute; top: 15px; right: 15px; color: #bdc3c7; font-size: 24px;
    font-weight: bold; cursor: pointer; line-height: 1; transition: color 0.2s; z-index: 10;
}
#loginModal .close:hover { color: #fff; }

#loginModal h2 { margin: 0 0 25px 0; font-size: 1.5rem; color: white; text-align: center; font-weight: 600; }

#loginModal .form-group { margin-bottom: 20px; }
#loginModal label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: #ecf0f1; font-weight: 500; }

#loginModal input {
    width: 100%; padding: 12px; border: 1px solid #465f75; border-radius: 8px;
    background: #34495e; color: white; font-size: 1rem; box-sizing: border-box;
}
#loginModal input:focus { outline: none; border-color: #3498db; background: #3b526b; }

.password-container { position: relative; display: block; }
.password-container input { padding-right: 40px; }
.password-container i {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: #bdc3c7; cursor: pointer; font-size: 1.1rem; z-index: 5;
}
.password-container i:hover { color: #fff; }

#loginModal .btn-primary {
    width: 100%; padding: 12px; background: #3498db; border: none; border-radius: 8px;
    color: white; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 10px; transition: background 0.2s;
}
#loginModal .btn-primary:hover { background: #2980b9; }

#loginModal .auth-link { text-align: center; margin-top: 20px; font-size: 0.95rem; color: #bdc3c7; }
#loginModal .auth-link a { color: #63b3ed; font-weight: 600; text-decoration: none; margin-left: 5px; }
#loginModal .auth-link a:hover { text-decoration: underline; color: #fff; }

.swal2-container {z-index: 99999 !important;}