/*=========================================================
    KK INPUT
=========================================================*/



/*=========================================================
    Wrapper
=========================================================*/

.kk-input-wrapper{

    position:relative;

}

/*=========================================================
    Icon
=========================================================*/

.kk-input-wrapper i{

    position:absolute;

    top:50%;

    left:18px;

    transform:translateY(-50%);

    color:var(--kk-text-light);

    font-size:18px;

    transition:var(--kk-transition);

    z-index:2;

}

/*=========================================================
    Input
=========================================================*/

.kk-input-wrapper input{

    width:100%;

    height:62px;

    padding:22px 18px 8px 56px;

    border:1px solid var(--kk-border);

    border-radius:18px;

    background:#fff;

    font-size:16px;

    color:var(--kk-text);

    transition:var(--kk-transition);

    outline:none;

    font-family:inherit;

}

/*=========================================================
    Floating Label
=========================================================*/

.kk-input-wrapper label{

    position:absolute;

    top:20px;

    left:56px;

    color:var(--kk-text-light);

    pointer-events:none;

    transition:.25s ease;

    background:#fff;

    padding:0 6px;

}

/*=========================================================
    Focus
=========================================================*/

.kk-input-wrapper input:focus{

    border-color:var(--kk-primary);

    box-shadow:

        0 0 0 4px rgba(198,40,40,.08),

        0 8px 24px rgba(198,40,40,.06);

}

/*=========================================================
    Floating Animation
=========================================================*/

.kk-input-wrapper input:focus+label,

.kk-input-wrapper input:not(:placeholder-shown)+label{

    top:-9px;

    left:48px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.8px;

    color:var(--kk-primary);

    text-transform:uppercase;

}

/*=========================================================
    Icon Animation
=========================================================*/

.kk-input-wrapper input:focus~i{

    color:var(--kk-primary);

}

/*=========================================================
    VALIDATION
=========================================================*/

.kk-input-status{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%) scale(.6);

    opacity:0;

    transition:.25s;

}

.kk-input-status i{

    color:#22C55E;

    font-size:18px;

}

.kk-input-wrapper.success .kk-input-status{

    opacity:1;

    transform:translateY(-50%) scale(1);

}

.kk-input-wrapper.success input{

    border-color:#22C55E;

}

.kk-input-wrapper.error input{

    border-color:#EF4444;

}

.kk-input-wrapper.error{

    animation:kkShake .3s;

}

.kk-input-error{

    display:block;

    margin-top:8px;

    color:#EF4444;

    font-size:13px;

    min-height:18px;

}

@keyframes kkShake{

    25%{

        transform:translateX(-3px);

    }

    50%{

        transform:translateX(3px);

    }

    75%{

        transform:translateX(-2px);

    }

}