/* Aplica restrição de tamanho e altura mínima apenas a partir do bloco da logo */
.survey-content-wrapper {
    max-width: 750px !important;
    width: 100% !important;
    min-height: 80vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Faz o formulário e o card interno se esticarem para preencher os 80% de altura */
.survey-content-wrapper #survey-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Faz com que o content-card das outras telas também preencha a altura proporcional do wrapper */
.survey-content-wrapper #content-card {
    flex-grow: 1;
}

.survey-main-card {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* CRITICAL: Impede barras de rolagem horizontais durante a animação */
}

/* Ocultação padrão dos passos */
.slider-step {
    display: none;
    opacity: 0;
}

/* Estado Ativo com as Animações */
.slider-step.active-step {
    display: block !important;
    opacity: 1;
}

/* Classe aplicada quando avançamos (entra da direita para o centro) */
.slider-step.slide-next {
    animation: slideFromRight 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Classe aplicada quando voltamos (entra da esquerda para o centro) */
.slider-step.slide-prev {
    animation: slideFromLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Keyframes das Transições */
@keyframes slideFromRight {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsividade */
@media (max-width: 576px) {
    .survey-content-wrapper {
        max-width: 100% !important;
        padding: 5px;
        min-height: auto;
    }
}