/* CSS for Custom Third-Party Lists Redesign - Multi-List Anti-Scroll Stacks */

/* 
   We target exclusively the container for our custom and native lists.
   We use floats to be 100% safe against horizontal scroll issues 
   common with flexbox in legacy HTML structures.
*/

@media (min-width: 1200px) {
    #iti-custom-lists-container {
        display: block !important;
        width: 100% !important;
        margin-bottom: 30px !important;
        clear: both !important;
    }

    #iti-custom-lists-container::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    .iti-grid-column-left {
        display: block !important;
        float: left !important;
        width: 49% !important;
        margin-right: 2% !important;
    }

    .iti-grid-column-right {
        display: block !important;
        float: left !important;
        width: 49% !important;
    }

    /* Force items within columns to behave and stack tightly */
    .iti-grid-column-left > *, 
    .iti-grid-column-right > * {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 25px 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow-x: auto !important; /* Internal scroll only if table is too wide */
    }
}

/* Fallback for smaller screens */
@media (max-width: 1199px) {
    #iti-custom-lists-container {
        display: block !important;
    }
    .iti-grid-column-left, 
    .iti-grid-column-right {
        width: 100% !important;
        float: none !important;
    }
}