/* Fix for step1Continue button visibility */
.step-container:not(#step1) #step1Continue {
    display: none !important;
}

/* Ensure each step only shows its own buttons */
#step1 #step2Back,
#step1 #step2Continue,
#step1 #step3Back,
#step1 #step3Continue,
#step1 #step3Next,
#step1 #step4Back,
#step1 #generateVisualization {
    display: none !important;
}

#step2 #step1Continue,
#step2 #step3Back,
#step2 #step3Continue,
#step2 #step3Next,
#step2 #step4Back,
#step2 #generateVisualization {
    display: none !important;
}

#step3 #step1Continue,
#step3 #step2Back,
#step3 #step2Continue,
#step3 #step4Back,
#step3 #generateVisualization {
    display: none !important;
}

#step4 #step1Continue,
#step4 #step2Back,
#step4 #step2Continue,
#step4 #step3Back,
#step4 #step3Continue,
#step4 #step3Next {
    display: none !important;
}

/* On step 5, hide all buttons that are NOT the final action buttons */
#step5 button:not(#emailResult):not(#getQuoteBtn):not(#startOverBtn):not(#regenerateBtn) {
    display: none !important;
}

/* Ensure the final actions container is visible on the last step - Stacked Layout */
#step5 .final-actions-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 20px;
    width: 100%;
}

.main-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.quote-action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: rgba(0,0,0,0.02);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    width: 100%;
    max-width: 550px;
    margin-top: 2rem;
}

.quote-blurb {
    margin: 0 0 1rem 0;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .results-comparison {
        flex-direction: column;
    }

    .comparison-container .before-after {
        flex-direction: column;
        gap: 20px;
    }

    .image-frame img {
        max-width: 100%;
        height: auto;
    }

    #step5 .final-actions-container {
        flex-direction: column;
        align-items: center;
    }

    .main-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    #step5 .final-actions-container .btn-primary,
    #step5 .final-actions-container .btn-secondary,
    #step5 .final-actions-container .btn-quote {
        width: 100%;
        text-align: center;
    }
}