/**
 * Native Ninja Forms layouts for NovaCentrix.
 *
 * Layout classes are stored in each field's native Container Class setting.
 * This replaces Ninja Forms - Layout & Styles without copying its renderer.
 */

/* Connect form: 50/50 content rows and an 80/20 action row. */
#nf-form-16-cont .nf-form-content nf-fields-wrap {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: 10px;
}

#nf-form-16-cont .nf-form-content nf-fields-wrap > nf-field {
    grid-column: 1 / -1;
    min-width: 0;
}

#nf-form-16-cont .nf-form-content nf-fields-wrap > nf-field:has(.ncx-layout-half) {
    grid-column: span 5;
}

#nf-form-16-cont .nf-form-content nf-fields-wrap > nf-field:has(.ncx-layout-80) {
    grid-column: span 8;
}

#nf-form-16-cont .nf-form-content nf-fields-wrap > nf-field:has(.ncx-layout-20) {
    grid-column: span 2;
}

#nf-form-16-cont .nf-form-content nf-fields-wrap > nf-field:has(.ncx-layout-footer) {
    align-self: end;
}

#nf-form-16-cont .nf-form-content .ncx-layout-20 input[type="button"],
#nf-form-16-cont .nf-form-content .ncx-layout-20 input[type="submit"] {
    width: 100%;
    min-height: 52px;
    border: 1px solid #777;
    background: #ed1c24;
    color: #fff;
    cursor: pointer;
}

#nf-form-16-cont .nf-form-content .ncx-layout-20 input[type="button"]:hover,
#nf-form-16-cont .nf-form-content .ncx-layout-20 input[type="button"]:focus-visible,
#nf-form-16-cont .nf-form-content .ncx-layout-20 input[type="submit"]:hover,
#nf-form-16-cont .nf-form-content .ncx-layout-20 input[type="submit"]:focus-visible {
    background: #c9151c;
}

/* Lab Services form: 50/50 and 33/33/33 content rows. */
#nf-form-8-cont .nf-form-content nf-fields-wrap {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 10px;
}

#nf-form-8-cont .nf-form-content nf-fields-wrap > nf-field {
    grid-column: 1 / -1;
    min-width: 0;
}

#nf-form-8-cont .nf-form-content nf-fields-wrap > nf-field:has(.ncx-layout-half) {
    grid-column: span 3;
}

#nf-form-8-cont .nf-form-content nf-fields-wrap > nf-field:has(.ncx-layout-third) {
    grid-column: span 2;
}

/* Preserve the add-on's mobile behavior: every field becomes full width. */
@media (max-width: 600px) {
    #nf-form-16-cont .nf-form-content nf-fields-wrap,
    #nf-form-8-cont .nf-form-content nf-fields-wrap {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    #nf-form-16-cont .nf-form-content nf-fields-wrap > nf-field,
    #nf-form-8-cont .nf-form-content nf-fields-wrap > nf-field {
        grid-column: 1 / -1 !important;
    }
}