/* Modern Professional Login Background */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
}

/* Fix Mobile Login Position Final */
@media (max-width: 640px) {
    body #modal_login.modal {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 10vh !important;
        background-color: transparent !important;
    }

    body #modal_login .modal-dialog.modal-login {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 330px !important;
    }
    
    body #modal_login .modal-dialog.modal-login .modal-content {
        left: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 320px !important;
    }
}