/* Formito Widget Custom Fixes for Frontend */

/* Fix popup width and spacing on smaller screens */
.fo-popup {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    padding: 12px !important;
    left: auto !important;
    right: 20px !important;
}

/* Ensure app container is properly responsive */
.fo-app {
    width: calc(100vw - 20px) !important;
    right: 10px !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: calc(100vh - 100px) !important;
}

/* Fix mobile display */
@media (max-width: 768px) {
    .fo-app {
        width: 100vw !important;
        right: 0 !important;
        bottom: 80px !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    .fo-popup {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
        border-radius: 8px 8px 0 0 !important;
    }
}

/* Ensure form content wraps properly */
.fo-app iframe,
.formito-launcher iframe {
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
}

/* Fix emoji reactions display - ensure they wrap instead of scroll */
body .formito-launcher {
    overflow: visible !important;
}

body .formito-launcher .fo-icon {
    right: 20px !important;
}

/* Fix text and padding inside the feedback form */
.fo-popup h6,
.fo-popup p {
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Ensure rating/reaction elements display inline with wrapping */
.fo-popup .emoji-reactions,
.fo-popup [class*="reaction"],
.fo-popup [class*="emoji"],
.fo-popup [class*="rating"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Reduce excessive spacing in form containers */
.fo-popup form,
.fo-popup .form-group,
.fo-popup .feedback-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix form input and textarea sizing */
.fo-popup input,
.fo-popup textarea,
.fo-popup select {
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    padding: 8px 4px !important;
    margin: 4px 0 !important;
}

/* Ensure button sizing */
.fo-popup button,
.fo-popup input[type="button"],
.fo-popup input[type="submit"] {
    width: auto !important;
    max-width: 100% !important;
    padding: 8px 16px !important;
}

/* Hide unnecessary scrollbars */
.fo-popup {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.fo-app {
    overflow: hidden !important;
}

/* Fix image sizing in popup */
.fo-popup img {
    max-width: 100% !important;
    width: auto !important;
}

/* Ensure toolbar doesn't cause overflow */
.fo-toolbar {
    flex-wrap: wrap !important;
}

/* Remove extra bottom spacing that causes the "lot of irrelevant spacing" issue */
.fo-popup {
    margin-bottom: 0 !important;
}

.fo-popup::after {
    margin-bottom: 0 !important;
}

/* Fix the transition and transform to ensure smooth animations */
.formito-launcher.is-open .fo-app,
.formito-launcher.is-open .fo-iframe {
    animation-name: formito-scale-in;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

@keyframes formito-scale-in {
    from {
        transform: scale(0, 0);
    }
    to {
        transform: scale(1, 1);
    }
}

/* Ensure proper z-index stacking */
.formito-launcher {
    z-index: 1010 !important;
}

.formito-launcher .fo-icon {
    z-index: 1011 !important;
}

.formito-launcher .fo-app {
    z-index: 1009 !important;
}

.formito-launcher .fo-popup {
    z-index: 1010 !important;
}