/* Transparent flex wrapper around each field icon. The icon (a
   .cl-icon inline-flex span from getIconCode) used to be the direct flex
   child of .cl-input-group; it now sits inside .cl-field-icon-slot, which
   carries cl-sub-block="ch_icons" so the form's Icons pill can outline it
   in the admin preview. display:flex keeps the slot icon-sized with no
   line-box gap, so the row-reverse layout / gap / ::before validation
   icons render exactly as before. */
.cl-field-icon-slot {
    display: flex;
    align-items: center;
}

/* Half-width fields — a field's `width` (768px and up) and `mobile_width` (below it).
   Only a form with at least one half-width field carries `.cl-fields-wrap`, so every other form
   keeps the column its design compiled. Two classes on purpose: the compiled
   `.cl_form_fields_container { flex-direction: column }` has one and prints later, so it would
   otherwise win. This lives here and not in the form's generated_css.php because a compiled rule
   reaches a design only when it is saved again, and the static file reaches every store with the
   next asset version.
   A full field takes its own line. Two halves share one: a 40% basis leaves room for the gap and
   flex-grow splits the rest equally, so each gets exactly half. A half with no half beside it —
   its partner a hidden conditional field, say — grows to the whole line instead of stranding. */
.cl_form_fields_container.cl-fields-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 12px;
}
.cl_form_fields_container.cl-fields-wrap > * {
    flex: 1 1 100%;
    min-width: 0;
}
@media (min-width: 768px) {
    .cl_form_fields_container.cl-fields-wrap > .cl-field-half {
        flex-basis: 40%;
    }
}
@media (max-width: 767px) {
    .cl_form_fields_container.cl-fields-wrap > .cl-field-mobile-half {
        flex-basis: 40%;
    }
}