/* ======================================================
   Architecture Website Framework
   Forms CSS
   Version 1.0
======================================================*/


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

.form{

    display:flex;

    flex-direction:column;

    gap:30px;

}


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

.form-group{

    display:flex;

    flex-direction:column;

    gap:12px;

}


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

.form-label{

    font-size:15px;

    font-weight:600;

    color:var(--primary);

}


/*==========================================
INPUTS
==========================================*/

.form-control{

    width:100%;

    height:58px;

    padding:0 22px;

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

    border-radius:var(--radius);

    background:var(--surface);

    color:var(--primary);

    transition:var(--transition);

}

.form-control:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(232,90,28,.12);

}


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

textarea.form-control{

    min-height:180px;

    resize:vertical;

    padding:18px 22px;

}


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

select.form-control{

    appearance:none;

    cursor:pointer;

}


/*==========================================
PLACEHOLDER
==========================================*/

.form-control::placeholder{

    color:var(--text-light);

}


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

.form-control.error{

    border-color:#dc3545;

}

.form-error{

    color:#dc3545;

    font-size:14px;

}


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

.form-control.success{

    border-color:#28a745;

}


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

.checkbox{

    display:flex;

    align-items:center;

    gap:12px;

}


/*==========================================
BUTTON
==========================================*/

.form button{

    align-self:flex-start;

}