/**
 * Estilos do Frontend - WC-Funil (Tailwind CSS)
 * 
 * @package WC_Funil
 * @author Meraldo Banks
 * @link https://botusist.com.br
 * @since 1.0.0
 * @created 2025-01-07 17:30:00 UTC-03:00
 * @updated 2025-01-07 17:48:00 UTC-03:00
 */

/* Animações customizadas */
@keyframes wcfSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


@keyframes wcfFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes wcfPopupSlide {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes wcfSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Classes de animação */
.wcf-animate-slide-up {
    animation: wcfSlideUp 0.3s ease-out;
}

.wcf-animate-fade-in {
    animation: wcfFadeIn 0.3s ease-out;
}

.wcf-animate-popup-slide {
    animation: wcfPopupSlide 0.3s ease-out;
}

/* Loading spinner */
.wcf-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wcfSpin 0.6s linear infinite;
}