/* 1. Setup the main grid on the parent container */
.page-content .wrap.plugin-container {
    display: grid !important;
    /* Column 1 is for Steps, Column 2 is for the Summary Table */
    grid-template-columns: 1fr 1fr !important; 
    gap: 30px !important;
    align-items: start !important;
}

/* 2. Place Steps Bar in Column 1 */
.vbstepsbarcont {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* 3. Force the Head Wrapper (Summary) into Column 2 */
.vbo-showprc-head-wrapper {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
}

/* 4. Style the Summary Div into a "Nice Table" */
.vbo-results-head.vbo-results-head-showprc {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Internal 2-column layout */
    gap: 10px !important;
    padding: 20px !important;
    background: #fdfdfd !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 5. Force the Form to break out and sit below both */
.vbo-showprc-head-wrapper form {
    grid-column: 1 / span 2 !important; /* Spans full width */
    grid-row: 2 !important;            /* Moves to the second row */
    width: 100% !important;
    margin-top: 30px !important;
}

/* 6. Fix internal table items alignment */
.vbo-results-head > div {
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
}

.vbo-results-head i {
    width: 25px !important;
    color: #F77F00 !important; /* Matching your orange theme accent */
}

.vbo-results-head-det {
    margin-left: 8px !important;
}

/* 7. Mobile View: Stack them vertically for readability */
@media (max-width: 850px) {
    .page-content .wrap.plugin-container {
        display: block !important;
    }
    .vbo-results-head.vbo-results-head-showprc {
        margin-top: 20px !important;
    }
}