/* Enhanced button styles */
.auth-button {
    background-image: linear-gradient(310deg, var(--primary) 0%, #5bd778 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    padding: 14px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(310deg, #218838 0%, #4ec76a 100%);
}

.auth-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Animation for the button */
@keyframes buttonPulse {
    0% {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    50% {
        box-shadow: 0 6px 12px rgba(50, 200, 100, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    100% {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    }
}

.auth-button {
    animation: buttonPulse 2s infinite;
}