/* Background color for the auth section */
#auth {
    background: linear-gradient(135deg, rgba(10, 15, 28, 0.9), rgba(37, 211, 102, 0.1)) !important; /* Matches page's dark theme with a subtle green gradient */
    backdrop-filter: blur(10px) !important; /* Adds glassmorphic effect */
    padding: 4rem 0 !important; /* Consistent padding with other sections */
}

/* Styling for the auth section card (login form container) */
#auth .card {
    background: rgba(30, 42, 68, 0.7) !important; /* Glassmorphic dark blue, matching service/plan cards */
    backdrop-filter: blur(20px) !important; /* Consistent blur effect */
    border-radius: 20px !important; /* Rounded corners like other cards */
    box-shadow: 0 8px 16px rgba(0, 212, 255, 0.2) !important; /* Subtle cyan shadow */
    padding: 2rem !important; /* Comfortable padding */
    max-width: 400px !important; /* Compact form width */
    margin: 0 auto !important; /* Centered */
}

/* Login button styling */
.btn-primary {
    background: linear-gradient(135deg, #25D366, #00D4FF) !important; /* Matches existing button gradient */
    color: #ffffff !important; /* White text */
    font-weight: 600 !important; /* Bold text, consistent with other buttons */
    padding: 1rem 2rem !important; /* Spacious padding */
    border-radius: 12px !important; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important; /* Green shadow for depth */
    transition: all 0.4s ease !important; /* Smooth transitions */
}

/* Hover effect for login button */
.btn-primary:hover {
    background: linear-gradient(135deg, #00D4FF, #25D366) !important; /* Reversed gradient for hover */
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5) !important; /* Stronger shadow */
    transform: translateY(-3px) !important; /* Slight lift, matching other interactive elements */
}