/* Base styles for cta-button */
.cta-button {
    background: #800080 !important; /* Purple base color */
    color: #ffffff !important; /* White text for contrast */
    padding: 0.5rem 1rem; /* Tailwind: px-4 py-2 */
    border-radius: 9999px; /* Tailwind: rounded-full */
    transition: all 0.3s ease;
    transform: scale(1);
}

.cta-button:hover {
    background: #9932CC !important; /* Lighter purple for hover */
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(153, 50, 204, 0.3);
}

/* Override auth.js injected styles */
#nav-auth-section a[href="signup.html"],
#mobile-auth-section a[href="signup.html"] {
    background: #6d38ff !important;
    color: #ffffff !important;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

#nav-auth-section a[href="signup.html"]:hover,
#mobile-auth-section a[href="signup.html"]:hover {
    background: #6d38ff !important;
    transform: scale(1.05);
}

/* Animation for pulse effect */
.cta-button.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(153, 50, 204, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 5px rgba(153, 50, 204, 0.3);
    }
}

/* Ensure no amber colors in auth sections */
#nav-auth-section a, #mobile-auth-section a {
    background: transparent !important; /* Reset any amber backgrounds */
}

#nav-auth-section a[href="login.html"]:hover,
#mobile-auth-section a[href="login.html"]:hover {
    color: #add8e6 !important; /* Use primary color for Login hover */
}