/**
 * DESCRIPTION: Elementor integration styles for WPUF Pro
 *
 * Styles for WPUF Pro forms when used in Elementor editor/preview mode.
 */

/**
 * Multistep fieldset visibility in Elementor preview.
 *
 * In Elementor editor/preview, form-step.css hides all fieldsets (display: none)
 * until JS adds .field-active to the current step. When that JS runs late or in
 * a different context, the first step stays hidden. We add an override for the
 * wrapper class so the fieldset is visible.
 */
.wpuf-elementor-step-preview .wpuf-multistep-fieldset {
    display: block !important;
}

/**
 * Multistep progressbar styles for Elementor.
 *
 * These styles override the form-step.css styles that are scoped with .wpuf-form
 * to work in the Elementor widget context.
 */

/* Progressbar container */
.wpuf-elementor-step-preview .wpuf-multistep-progressbar {
    overflow: hidden;
    margin-bottom: 30px;
}

/* Progressive progressbar */
.wpuf-elementor-step-preview .wpuf-multistep-progressbar.ui-progressbar {
    height: 25px;
    border: 1px solid #eee;
    position: relative;
}

/* Progressbar fill */
.wpuf-elementor-step-preview .wpuf-multistep-progressbar .wpuf-progressbar-fill {
    background: #00a0d2;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
}

/* Progress percentage text */
.wpuf-elementor-step-preview .wpuf-multistep-progressbar.ui-progressbar .wpuf-progress-percentage {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    top: 20%;
}

/* Step-by-step wizard */
.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard {
    margin: 20px 0 40px 0;
    padding: 0;
    list-style: none;
}

.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard * {
    box-sizing: border-box;
}

.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard li {
    background-color: #E4E4E4;
    border-radius: 5px;
    display: inline-block;
    padding: 10px 30px 10px 40px;
    margin-right: -7px;
    width: auto;
    margin: 0;
    position: relative;
    text-align: center;
}

.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard li::before,
.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard li::after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: transparent;
    border-left-color: #fff;
    border-radius: 10px;
}

.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard li::before {
    border-width: 26px;
    margin-top: -14px;
    right: -52px;
    z-index: 98;
}

.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard li::after {
    border-left-color: #E4E4E4;
    border-width: 25px;
    margin-top: -37px;
    right: -44px;
    z-index: 99;
}

.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard li.active-step {
    background-color: #00a0d2;
    color: #fff;
}

.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard li.active-step::after {
    border-left-color: #00a0d2;
}

.wpuf-elementor-step-preview .wpuf-multistep-progressbar ul.wpuf-step-wizard li:last-child::after {
    border-left-color: transparent;
}