/* Slide animations */
.slide-in-right {
    animation: slideInRight 0.5s forwards;
}

.slide-out-left {
    animation: slideOutLeft 0.5s forwards;
}

.slide-in-left {
    animation: slideInLeft 0.5s forwards;
}

.slide-out-right {
    animation: slideOutRight 0.5s forwards;
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

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

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

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Bounce animation for answer buttons */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.answer-button.bounce {
    animation: bounce 1s;
}

/* Progress bar animation */
.progress-bar {
    transition: width 0.5s ease-in-out;
}

.modal-fullscreen .modal-dialog {
    max-width: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    height: 100vh;
    border-radius: 0;
}

.answer-button .answer-image {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .answer-button:not(.answer-text-btn) {
        width: 120px !important;
        height: 120px !important;
    }

    .answer-button:not(.answer-text-btn) .answer-image {
        width: 60px !important;
        height: 60px !important;
    }

    .answer-text-btn {
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
    }

    .btn {
        font-size: 1rem;
    }

    #questions_modal .question {
        width: 100%;
        max-width: 100%;
    }

    #questions_modal .survey-center-wrap {
        width: 100%;
        max-width: 100%;
    }

    #questions_modal .survey-contact-form .col-md-6,
    #questions_modal .survey-contact-form .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    #questions_modal .next.btn-success,
    #questions_modal .submit.btn-success {
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
    }

    #questions_modal .errorMessage {
        text-align: center;
        width: 100%;
    }
}


.question input:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.75);
    border: 2px solid rgba(0, 123, 255, 0.75);
}


input.is-invalid {
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.75);
    border: 2px solid rgba(220, 53, 69, 0.75);
}


input.is-valid {
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.75);
    border: 2px solid rgba(40, 167, 69, 0.75);
}

#questions_modal .answer-button:hover,
#questions_modal .answer-button2:hover,
#questions_modal .answer-text-btn:hover {
    transform: none !important;
    animation: none !important;
}

.answer-button.bounce,
.answer-button2.bounce {
    animation: none !important;
}