/**
 * Client Questionnaire
 *
 * Main stylesheet
 *
 * Bootstrap 5.3.8 compatible
 */


/* =========================
   GLOBAL
========================= */

body {

    min-height: 100vh;

}


.questionnaire-wrapper {

    max-width: 1050px;

}



/* =========================
   CARDS
========================= */


.form-card {

    margin-bottom: 1.5rem;

    border: 0;

    overflow: hidden;

}


.form-card .card-header {

    background: var(--bs-primary);

    color: white;

    padding: 1rem 1.25rem;

}



.card {

    border-radius: 0.8rem;

}



/* =========================
   INTRO
========================= */


.alert {

    border-radius: 0.8rem;

}



/* =========================
   PROGRESS
========================= */


.sticky-progress {

    position: sticky;

    top: 10px;

    z-index: 100;

}



.progress {

    height: 12px;

    border-radius: 20px;

}



.progress-bar {

    transition:

            width 0.4s ease;

}




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


.form-control,
.form-select {

    min-height: 46px;

    border-radius: 0.6rem;

}



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

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

}



.form-label {

    font-weight: 500;

}





/* =========================
   SWITCHES
========================= */


.form-switch {

    padding-left: 3rem;

}



.form-switch .form-check-input {

    width: 2.5rem;

    height: 1.25rem;

    margin-left: -3rem;

}





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


.btn-primary {

    min-height: 55px;

    border-radius: 0.8rem;

    font-size: 1.1rem;

}





/* =========================
   MOBILE
========================= */


@media(max-width:768px) {


    body {

        font-size: 0.95rem;

    }


    .container {

        padding-left: .75rem;

        padding-right: .75rem;

    }


    .card-body {

        padding: 1rem;

    }


    h1 {

        font-size: 1.8rem;

    }


    h2 {

        font-size: 1.25rem;

    }


}



/* =========================
   DARK MODE SUPPORT
========================= */


@media (prefers-color-scheme: dark) {


    .form-card .card-header {

        background:
                var(--bs-primary-bg-subtle);

        color:
                var(--bs-body-color);

    }


}