/* ==========================================
 * Stepra Engine Core Frontend Styles - v1.1.0 
 * ========================================== */

/* Stepra early visual shield is generated dynamically in PHP based on enabled builder targeting.
 * Do not hard-code supported builder selectors here, because disabled builders must render immediately.
 */
html.stepra-ready-global form.stepra-visual-ready {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Core Hiding Class */
.stepra-hidden { 
    display: none !important; 
}

/* Hide final submit buttons on early steps */
form.stepra-ready[data-last-step="false"] button[type="submit"],
form.stepra-ready[data-last-step="false"] input[type="submit"],
form.stepra-ready[data-last-step="false"] .forminator-button-submit { 
    display: none !important; 
}

/* Bulletproof Progress Bar */
.stepra-progress {
    background: #e2e8f0 !important;
    border-radius: 6px !important;
    margin-bottom: 25px !important;
    position: relative !important;
    height: 30px !important;
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
    z-index: 99 !important;
}
.stepra-progress-bar { 
    height: 100% !important; 
    transition: width 0.4s ease !important; 
}
.stepra-progress-text {
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important;
    text-align: center !important; 
    color: #fff !important; 
    font-size: 13px !important; 
    line-height: 30px !important; 
    font-weight: 600 !important;
}

/* Step display is intentionally instant to avoid flashing between steps. */
.stepra-step-el:not(.stepra-hidden) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Bulletproof Navigation Buttons */
.stepra-nav {
    display: flex !important; 
    justify-content: space-between !important; 
    margin-top: 25px !important; 
    padding-top: 15px !important; 
    border-top: 1px solid #e2e8f0 !important; 
    width: 100% !important; 
    clear: both !important;
}
.stepra-nav button {
    padding: 10px 24px !important; 
    color: #fff !important; 
    border: none !important; 
    border-radius: 4px !important; 
    cursor: pointer !important; 
    font-weight: 600 !important; 
    font-size: 15px !important; 
    line-height: 1 !important; 
    display: inline-block !important;
}
.stepra-prev { 
    background: var(--stepra-prev-bg, #cbd5e1) !important;
    color: var(--stepra-prev-text, #334155) !important;
}

.stepra-next {
    background: var(--stepra-next-bg, var(--stepra-primary, #0061e0)) !important;
    color: var(--stepra-next-text, #ffffff) !important;
}

.stepra-prev:hover {
    background: var(--stepra-prev-hover, #94a3b8) !important;
}

.stepra-next:hover {
    background: var(--stepra-next-hover, #004bb5) !important;
}

/* ==========================================
   STEPRA ENGINE - NATIVE SUBMIT ALIGNMENT
   ========================================== */
.stepra-nav.stepra-nav-flex-aligned {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.stepra-submit-parent-aligned {
    margin: 0 !important;
    margin-left: auto !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.stepra-submit-btn-aligned {
    width: auto !important;
    min-width: 140px !important;
    margin: 0 !important;
}
/* Contact Form 7: stabilize Stepra step items without forcing field widths.
 * The user's theme/custom CSS should control input, select, and textarea width. */
form.wpcf7-form.stepra-ready .stepra-step-el {
    box-sizing: border-box !important;
    max-width: 100% !important;
}


/* Numbered progress style - Lite 1.1.0 */
.stepra-progress.stepra-progress-numbered {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    display: block !important;
}

.stepra-numbered-steps {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.stepra-progress-number {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid #cbd5e1 !important;
    background: #fff !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: default !important;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

.stepra-progress-segment {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;
    height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #e2e8f0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.stepra-progress-segment:after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--stepra-progress-color, #0061e0) !important;
    border-radius: inherit !important;
    transform: scaleX(var(--stepra-segment-fill, 0)) !important;
    transform-origin: left center !important;
    transition: transform .34s ease !important;
}

.stepra-progress-number.is-active {
    color: #fff !important;
    border-color: var(--stepra-progress-color, #0061e0) !important;
    background: var(--stepra-progress-color, #0061e0) !important;
    box-shadow: none !important;
    transform: scale(1.04) !important;
}

.stepra-progress-number.is-completed {
    color: var(--stepra-progress-color, #0061e0) !important;
    border-color: var(--stepra-progress-color, #0061e0) !important;
    background: #fff !important;
    cursor: pointer !important;
}

.stepra-progress-number.is-completed:hover {
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

.stepra-progress-number.is-locked {
    opacity: .72 !important;
    cursor: default !important;
}

@media (max-width: 480px) {
    .stepra-numbered-steps { max-width: 360px !important; }
    .stepra-progress-number { flex-basis: 38px !important; width: 38px !important; height: 38px !important; font-size: 13px !important; }
    .stepra-progress-segment { height: 3px !important; }
}


/* StepraEngine 1.1.0 Phase 1A lifecycle states.
 * State markers only. No layout or visual behavior changes. */
.stepra-aborted,
.stepra-failed {
    visibility: visible !important;
}