/*======================================
EIVOX FORMS CSS
Version: 1.0
======================================*/


/*======================================
FORM
======================================*/

.form{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-4);
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}


/*======================================
LABEL
======================================*/

.form-label{
    font-size:var(--font-sm);
    font-weight:var(--weight-semibold);
    color:var(--text);
}


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

.form-control{
    width:100%;
    min-height:50px;

    padding:0 16px;

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

    border-radius:var(--radius);

    background:var(--surface);

    color:var(--text);

    font-size:var(--font-md);

    transition:var(--transition);
}

.form-control::placeholder{
    color:var(--text-muted);
}

.form-control:hover{
    border-color:var(--primary);
}

.form-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(37,99,235,.15);
}


/*======================================
TEXTAREA
======================================*/

textarea.form-control{
    min-height:140px;
    padding:16px;
    resize:vertical;
}


/*======================================
SELECT
======================================*/

select.form-control{
    cursor:pointer;
}


/*======================================
INPUT GROUP
======================================*/

.input-group{
    position:relative;
    display:flex;
    align-items:center;
}

.input-group .form-control{
    padding-left:50px;
}

.input-group .left-icon{
    position:absolute;
    left:16px;
    color:var(--text-muted);
}

.input-group .right-icon{
    position:absolute;
    right:16px;
    cursor:pointer;
    color:var(--text-muted);
}


/*======================================
CHECKBOX
======================================*/

.checkbox{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

.checkbox input{
    width:18px;
    height:18px;
}


/*======================================
RADIO
======================================*/

.radio{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

.radio input{
    width:18px;
    height:18px;
}


/*======================================
SWITCH
======================================*/

.switch{
    display:flex;
    align-items:center;
    gap:10px;
}


/*======================================
HELP TEXT
======================================*/

.form-text{
    font-size:var(--font-sm);
    color:var(--text-muted);
}


/*======================================
ERROR
======================================*/

.form-error{
    font-size:var(--font-sm);
    color:var(--danger);
}


/*======================================
SUCCESS
======================================*/

.form-success{
    font-size:var(--font-sm);
    color:var(--success);
}


/*======================================
INPUT STATES
======================================*/

.is-invalid{
    border-color:var(--danger) !important;
}

.is-valid{
    border-color:var(--success) !important;
}


/*======================================
SEARCH BOX
======================================*/

.search-box{
    position:relative;
    width:100%;
}

.search-box input{
    width:100%;
    min-height:50px;
    padding:0 50px 0 18px;

    background:var(--surface);

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

    border-radius:999px;

    color:var(--text);
}

.search-box button{
    position:absolute;
    top:50%;
    right:15px;
    transform:translateY(-50%);
    color:var(--text-muted);
}


/*======================================
RESPONSIVE
======================================*/

@media(max-width:767px){

    .form-row{
        grid-template-columns:1fr;
    }

    .form-control{
        min-height:48px;
    }

}