/* ==========================================
   NEST RECRUIT FORMS
   Frontend Styles
========================================== */

#nrf-message{
    margin-top:20px;
}

.nrf-loading-box{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border-radius:12px;
    background:#eef7ff;
    border:1px solid #cfe6ff;
    color:#1d3557;
    animation:nrfFade .3s ease;
}

.nrf-loading-box strong{
    display:block;
    font-size:17px;
    margin-bottom:4px;
}

.nrf-loading-box p{
    margin:0;
    line-height:1.6;
    font-size:14px;
}

.nrf-spinner{
    width:28px;
    height:28px;
    border:4px solid #d6e8ff;
    border-top:4px solid #1e88e5;
    border-radius:50%;
    animation:nrfSpin .8s linear infinite;
    flex-shrink:0;
}

/* =========================
   Botón animado
========================= */

#nrf-submit{
    position:relative;
    overflow:hidden;
    transition:.30s;
}

#nrf-submit.nrf-loading{

    color:#fff !important;

    background:#6c757d !important;

    cursor:not-allowed;

}

#nrf-submit.nrf-loading::before{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:40%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(40,167,69,.65),
        transparent
    );

    animation:nrfButtonLoading 1s linear infinite;

}

/* =========================
   Success
========================= */

.nrf-success{

    padding:18px;

    border-radius:12px;

    background:#ecfff2;

    border:1px solid #8fe0ad;

    color:#166534;

}

/* =========================
   Error
========================= */

.nrf-error{

    padding:18px;

    border-radius:12px;

    background:#fff2f2;

    border:1px solid #ffbcbc;

    color:#b42318;

}

/* =========================
   Animaciones
========================= */

@keyframes nrfSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes nrfFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes nrfButtonLoading{

    from{

        left:-40%;

    }

    to{

        left:140%;

    }

}