/**
 * Elementor Multi-Step Popup
 * Frontend CSS for step visibility and transitions
 */

/* ==========================================================================
   Step Visibility - Default States
   ========================================================================== */

/* Step 1 is visible by default */
.msp-step-1 {
    display: block !important;
    opacity: 1;
}

/* Steps 2 and 3 are hidden by default */
.msp-step-2,
.msp-step-3 {
    display: none !important;
    opacity: 0;
}

/* ==========================================================================
   Active/Hidden States (controlled by JavaScript)
   ========================================================================== */

/* Active step */
.msp-step-1.msp-active,
.msp-step-2.msp-active,
.msp-step-3.msp-active {
    display: block !important;
    opacity: 1;
    animation: mspFadeIn 0.3s ease-in-out;
}

/* Hidden step */
.msp-step-1.msp-hidden,
.msp-step-2.msp-hidden,
.msp-step-3.msp-hidden {
    display: none !important;
    opacity: 0;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes mspFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: Slide transitions (add class msp-slide to popup container for this effect) */
.msp-slide .msp-step-1.msp-active,
.msp-slide .msp-step-2.msp-active,
.msp-slide .msp-step-3.msp-active {
    animation: mspSlideIn 0.4s ease-out;
}

@keyframes mspSlideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   Button Styles (Optional - removes default styling for action buttons)
   ========================================================================== */

.msp-btn-yes,
.msp-btn-no {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.msp-btn-yes:hover,
.msp-btn-no:hover {
    transform: translateY(-2px);
}

.msp-btn-yes:active,
.msp-btn-no:active {
    transform: translateY(0);
}

/* ==========================================================================
   Elementor Editor - Show all steps for editing
   ========================================================================== */

.elementor-editor-active .msp-step-1,
.elementor-editor-active .msp-step-2,
.elementor-editor-active .msp-step-3 {
    display: block !important;
    opacity: 1;
}