/* ===========================
   CF7 Multi Step Form
=========================== */


/* ===========================
   Hide Inactive Steps
=========================== */

.cf7-step {
    display: none;
}

.cf7-step.active {
    display: block;
}


/* ===========================
   Progress Bar
=========================== */

.cf7-progress {
    display: flex;
    width: 100%;
    margin: 20px 0 40px;
    position: relative;
}


/* Connecting Line */

.cf7-progress::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background: #D3D3D3;
    z-index: 0;
}


/* Individual Step */

.cf7-progress .step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}


/* Number Circle */

.cf7-progress .step-circle {
    width: 36px;
    height: 36px;

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

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #D3D3D3;
    color: #fff;

    font-size: 15px;
    font-weight: 700;

    transition: all 0.3s ease;
}


/* Active Number Circle */

.cf7-progress .step.active .step-circle {
    background: #f59b23;
}


/* Section Name */

.cf7-progress .step-label {
    display: block;

    font-size: 15px;
    font-weight: 600;

    color: #808080;

    transition: all 0.3s ease;
}


/* Active Section Name */

.cf7-progress .step.active .step-label {
    color: #f59b23;
}


/* ===========================
   Buttons Container
=========================== */

.wpcf7-form .cf7-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 15px !important;

    width: 100% !important;

    margin-top: 30px;

    flex-wrap: nowrap !important;
}


/* Back + Continue / Submit */

.wpcf7-form .cf7-buttons.two-buttons {
    justify-content: space-between !important;
}


/* CF7 Paragraph Wrapper */

.wpcf7-form .cf7-buttons p {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 15px !important;
}


/* Remove CF7 Auto-Generated Line Break */

.wpcf7-form .cf7-buttons p br {
    display: none !important;
}


/* Remove Theme Alignment */

.wpcf7-form .cf7-buttons button,
.wpcf7-form .cf7-buttons input[type="submit"] {
    float: none !important;
    position: static !important;

    margin: 0 !important;

    flex: 0 0 auto !important;
}


/* ===========================
   Button Style
=========================== */

.wpcf7-form .cf7-buttons .prev-btn,
.wpcf7-form .cf7-buttons .next-btn,
.wpcf7-form .cf7-buttons input[type="submit"] {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 180px;
    height: 52px;

    padding: 0 30px;

    border-radius: 30px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.1s ease;
}


/* ===========================
   Back Button
=========================== */

.wpcf7-form .cf7-buttons .prev-btn {

    background: #fff !important;

    border: 2px solid #333 !important;

    color: #333 !important;
}


/* ===========================
   Continue + Submit Button
=========================== */

.wpcf7-form .cf7-buttons .next-btn,
.wpcf7-form .cf7-buttons input[type="submit"] {

    background: #f59b23 !important;

    border: 2px solid #f59b23 !important;

    color: #fff !important;
}


/* ===========================
   Hover
=========================== */

.wpcf7-form .cf7-buttons .next-btn:hover,
.wpcf7-form .cf7-buttons input[type="submit"]:hover {

    background: #e88707 !important;

    border-color: #e88707 !important;
}


/* ===========================
   Mobile
   Keep Buttons Side By Side
=========================== */

@media(max-width:768px) {

    .wpcf7-form .cf7-buttons,
    .wpcf7-form .cf7-buttons.two-buttons {

        display: flex !important;

        flex-direction: row !important;

        justify-content: space-between !important;

        align-items: center !important;

        flex-wrap: nowrap !important;
    }


    .wpcf7-form .cf7-buttons p {

        display: flex !important;

        flex-direction: row !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .wpcf7-form .cf7-buttons p br {
        display: none !important;
    }


    .wpcf7-form .cf7-buttons .prev-btn,
    .wpcf7-form .cf7-buttons .next-btn,
    .wpcf7-form .cf7-buttons input[type="submit"] {

        min-width: 140px;

        width: auto !important;

        padding: 0 20px;

        font-size: 14px;
    }


    /* Progress Bar */

    .cf7-progress {
        margin-bottom: 30px;
    }


    .cf7-progress::before {
        top: 16px;

        left: 16%;
        right: 16%;
    }


    .cf7-progress .step-circle {

        width: 32px;
        height: 32px;

        font-size: 14px;
    }


    .cf7-progress .step-label {

        font-size: 12px;
    }

}
/* ===========================
   CF7 Submit Button Hover Fix
=========================== */
/* ===========================
   Submit Button = Continue Button
=========================== */

.wpcf7-form .cf7-buttons .wpcf7-submit,
.wpcf7-form .cf7-buttons .wpcf7-submit.mkdf-btn {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 180px !important;
    width: auto !important;
    height: 52px !important;

    padding: 0 30px !important;

    border-radius: 30px !important;

    background: #f59b23 !important;
    border: 2px solid #f59b23 !important;

    color: #fff !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    cursor: pointer;

    float: none !important;
    margin: 0 !important;

    box-shadow: none !important;

    transition: all 0.1s ease !important;
}


/* Submit Hover */
.wpcf7-form .cf7-buttons .wpcf7-submit:hover,
.wpcf7-form .cf7-buttons .wpcf7-submit.mkdf-btn:hover {

    background: #e88707 !important;
    border-color: #e88707 !important;

    color: #fff !important;

    box-shadow: none !important;
}


/* Submit Focus / Active */
.wpcf7-form .cf7-buttons .wpcf7-submit:focus,
.wpcf7-form .cf7-buttons .wpcf7-submit:active {

    background: #f59b23 !important;
    border-color: #f59b23 !important;

    color: #fff !important;

    box-shadow: none !important;
}
.wpcf7-form .cf7-buttons .wpcf7-submit .mkdf-btn-text {
    color: #fff !important;
}