/*==============================================================
 * DOITUK - MJS ENERGY
 * DIVI 5 CHILD THEME - CONTACT FORM STYLING
 *
 * File: /css/contact-forms.css
 *
 * PURPOSE:
 * Styles the MJS Energy ECO4 enquiry form and its
 * five-stage progress indicators.
 *
 * Dependencies:
 * - Contact Form 7
 * - Divi Torque Progress Bar modules
 *
 * Existing selectors:
 * #eco4-form
 * #progress
 * #progress2
 * #progress3
 * #progress4
 * #progress5
 *
 *==============================================================*/


/*==============================================================
 * 1. PROGRESS BAR WRAPPERS
 *==============================================================*/

/*--------------------------------------------------------------
 * Shared Background and Rounded Corners
 *--------------------------------------------------------------*/

#progress .dtp-progress-bar__wrapper,
#progress2 .dtp-progress-bar__wrapper,
#progress3 .dtp-progress-bar__wrapper,
#progress4 .dtp-progress-bar__wrapper,
#progress5 .dtp-progress-bar__wrapper {
    background-color: #dddddd !important;
    border-radius: 40px;

    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.06) !important;

    overflow: hidden;
}


/*==============================================================
 * 2. PROGRESS BAR INNER STYLING
 *==============================================================*/

/*--------------------------------------------------------------
 * Shared Height and Progress Colour
 *--------------------------------------------------------------*/

#progress .dtp-progress-bar__inner,
#progress2 .dtp-progress-bar__inner,
#progress3 .dtp-progress-bar__inner,
#progress4 .dtp-progress-bar__inner,
#progress5 .dtp-progress-bar__inner {
    height: 30px;

    background-color: #41a135 !important;

    border-radius: 40px;
}


/*==============================================================
 * 3. INDIVIDUAL PROGRESS STAGES
 *==============================================================*/

/*--------------------------------------------------------------
 * Stage 1 - 20%
 *--------------------------------------------------------------*/

#progress .dtp-progress-bar__inner {
    width: 20%;
}

/*--------------------------------------------------------------
 * Stage 2 - 40%
 *--------------------------------------------------------------*/

#progress2 .dtp-progress-bar__inner {
    width: 40%;
}

/*--------------------------------------------------------------
 * Stage 3 - 60%
 *--------------------------------------------------------------*/

#progress3 .dtp-progress-bar__inner {
    width: 60%;
}

/*--------------------------------------------------------------
 * Stage 4 - 80%
 *--------------------------------------------------------------*/

#progress4 .dtp-progress-bar__inner {
    width: 80%;
}

/*--------------------------------------------------------------
 * Stage 5 - 100%
 *--------------------------------------------------------------*/

#progress5 .dtp-progress-bar__inner {
    width: 100%;
}


/*==============================================================
 * 4. PROGRESS BAR TEXT
 *==============================================================*/

/*--------------------------------------------------------------
 * Align Text Inside the First Progress Bar
 *
 * Retains the existing MJS styling.
 *--------------------------------------------------------------*/

#progress .dtp-progress-bar__inner__text {
    width: 100%;
    height: 100%;

    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;
}


/*==============================================================
 * 5. EMBEDDED DIVI SECTION SPACING
 *==============================================================*/

/*--------------------------------------------------------------
 * Remove Unnecessary Padding Around Progress Modules
 *--------------------------------------------------------------*/

#progress .et_pb_section,
#progress2 .et_pb_section,
#progress3 .et_pb_section,
#progress4 .et_pb_section,
#progress5 .et_pb_section {
    padding: 0;
}


/*==============================================================
 * 6. ECO4 FORM FIELD LAYOUT
 *==============================================================*/

/*--------------------------------------------------------------
 * Contact Form 7 Checkbox and Radio Items
 *
 * Retains the existing vertical, table-style layout.
 *--------------------------------------------------------------*/

#eco4-form span.wpcf7-list-item {
    display: table-row;
}

#eco4-form span.wpcf7-list-item * {
    display: table-cell;

    padding-bottom: 1vw;
}


/*==============================================================
 * 7. ECO4 FORM DIVIDERS
 *==============================================================*/

/*--------------------------------------------------------------
 * Green Horizontal Separators
 *--------------------------------------------------------------*/

#eco4-form hr {
    height: 3px;

    border: 0;

    background-color: #8cc63f;
}


/*==============================================================
 * 8. ECO4 FORM HEADINGS
 *==============================================================*/

/*--------------------------------------------------------------
 * Main Form Heading
 *--------------------------------------------------------------*/

#eco4-form h1 {
    font-size: 30px;
}


/*==============================================================
 * 9. RESPONSIVE FORM IMPROVEMENTS
 *==============================================================*/

/*--------------------------------------------------------------
 * Mobile Heading Size and Field Spacing
 *--------------------------------------------------------------*/

@media only screen and (max-width: 767px) {

    #eco4-form h1 {
        font-size: 25px;
    }

    #eco4-form span.wpcf7-list-item * {
        padding-bottom: 10px;
    }

}


/*==============================================================
 * END OF MJS ENERGY CONTACT FORM STYLING
 *==============================================================*/