/* Custom styles for CosmicGuide AI */

.cosmic-gradient {
    background: linear-gradient(135deg, #191970 0%, #4169E1 50%, #191970 100%);
}

.gold-gradient {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.stars-bg {
    background-image: radial-gradient(2px 2px at 20px 30px, #FFD700, transparent),
                     radial-gradient(2px 2px at 40px 70px, rgba(255,215,0,0.5), transparent),
                     radial-gradient(1px 1px at 90px 40px, #FFD700, transparent),
                     radial-gradient(1px 1px at 130px 80px, rgba(255,215,0,0.5), transparent);
    background-size: 150px 100px;
    animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.btn-cosmic {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #191970;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-cosmic:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

.form-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #F5F5F5;
    padding: 12px 16px;
    border-radius: 8px;
    width: 100%;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #FFD700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-input::placeholder {
    color: rgba(245, 245, 245, 0.6);
}