/*=========================================================
    HP-EXAM-PRO
    FORMS.CSS
==========================================================*/

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

.form-group{
    margin-bottom:1.5rem;
}

.form-label{
    display:block;
    margin-bottom:.5rem;
    font-weight:600;
    color:var(--gray-800);
}

.form-text{
    display:block;
    margin-top:.35rem;
    font-size:.875rem;
    color:var(--gray-600);
}

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

.form-control,
.form-select{

    width:100%;

    height:50px;

    padding:.75rem 1rem;

    font-size:1rem;

    color:var(--gray-800);

    background:#fff;

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

    border-radius:var(--radius);

    transition:var(--transition);

}

textarea.form-control{

    min-height:140px;

    resize:vertical;

}

/*==================================================
    FOCUS
==================================================*/

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .25rem rgba(13,110,253,.15);

}

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

.form-control::placeholder{

    color:var(--gray-500);

}

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

.input-group{

    display:flex;

    align-items:stretch;

}

.input-group-text{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 1rem;

    background:var(--gray-100);

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

    border-right:none;

    border-radius:var(--radius) 0 0 var(--radius);

}

.input-group .form-control{

    border-radius:0 var(--radius) var(--radius) 0;

}

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

.form-check{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin-bottom:1rem;

}

.form-check-input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}

.form-check-label{

    cursor:pointer;

}

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

.form-radio{

    display:flex;

    align-items:center;

    gap:.75rem;

}

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

.form-switch{

    display:flex;

    align-items:center;

    gap:.75rem;

}

/*==================================================
    FILE
==================================================*/

.form-control[type=file]{

    padding:.65rem;

}

.form-control[type=file]::file-selector-button{

    padding:.55rem 1rem;

    margin-right:1rem;

    border:none;

    border-radius:var(--radius-sm);

    background:var(--primary);

    color:#fff;

    cursor:pointer;

}

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

.search-form{

    position:relative;

}

.search-form input{

    padding-right:50px;

}

.search-form button{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    color:var(--gray-600);

}

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

.form-floating{

    position:relative;

}

.form-floating>.form-control{

    height:58px;

    padding:1.5rem 1rem .5rem;

}

.form-floating>label{

    position:absolute;

    top:14px;

    left:15px;

    color:var(--gray-500);

    transition:.2s;

}

.form-floating>.form-control:focus+label,
.form-floating>.form-control:not(:placeholder-shown)+label{

    top:6px;

    font-size:.75rem;

    color:var(--primary);

}

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

.is-valid{

    border-color:var(--success)!important;

}

.is-invalid{

    border-color:var(--danger)!important;

}

.valid-feedback{

    color:var(--success);

    font-size:.875rem;

    margin-top:.35rem;

}

.invalid-feedback{

    color:var(--danger);

    font-size:.875rem;

    margin-top:.35rem;

}

/*==================================================
    LOGIN CARD
==================================================*/

.auth-form{

    max-width:500px;

    margin:auto;

}

.auth-form .card{

    border:none;

    box-shadow:var(--shadow);

}

/*==================================================
    PASSWORD TOGGLE
==================================================*/

.password-wrapper{

    position:relative;

}

.password-toggle{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:var(--gray-500);

}

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

.form-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    margin-top:2rem;

}

/*==================================================
    REQUIRED
==================================================*/

.required{

    color:var(--danger);

}

/*==================================================
    DISABLED
==================================================*/

.form-control:disabled,
.form-select:disabled{

    background:var(--gray-200);

    cursor:not-allowed;

}

/*==================================================
    READONLY
==================================================*/

.form-control[readonly]{

    background:var(--gray-100);

}

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

@media(max-width:768px){

    .form-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .form-actions .btn{

        width:100%;

    }

    .input-group{

        flex-wrap:nowrap;

    }

}