/* =========================================================
   CUSTOM VALIDATION
   ========================================================= */

/* Validation error message */



.cmem-custom-validation .cmem-validation-invalid-no-border {
    border: none;
    box-shadow: none;
}


/* Validation summary */
/* .cmem-custom-validation .cmem-validation-summary {
    width: 100%;
    margin: 20px;
} */

/* =========================================================
   FIELD MAIN
   Contains ONLY the original label + input/control.
   ========================================================= */

.cmem-custom-validation .cmem-field-main {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   ROW FIELD LAYOUT
   Preserve the existing label | input layout.
   ========================================================= */

.cmem-custom-validation .cmem-field-wrap[style*="flex-direction:row"] .cmem-field-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}


/* =========================================================
   COLUMN FIELD LAYOUT
   Preserve the existing label / input layout.
   ========================================================= */

.cmem-custom-validation .cmem-field-wrap[style*="flex-direction:column"] .cmem-field-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* =========================================================
   VALIDATION MESSAGE
   ========================================================= */

/* .cmem-custom-validation .cmem-validation-error {
    display: block;
    box-sizing: border-box;
    line-height: 1.4;
    white-space: nowrap;
} */


/* =========================================================
   BOTTOM
   Message remains below the complete field.
   ========================================================= */

.cmem-custom-validation .cmem-validation-message-bottom {
    width: 100%;
}


/* =========================================================
   TOP
   Message is above the label + input.
   ========================================================= */

.cmem-custom-validation .cmem-validation-message-top {
    width: 100%;
    margin: 0 0 6px;
}


/* =========================================================
   RIGHT
   ========================================================= */

.cmem-custom-validation .cmem-validation-message-right {
    display: flex;

    gap: 6px;
    align-items: center;
    width: 100%;
}


/* =========================================================
   LEFT
   ========================================================= */

.cmem-custom-validation .cmem-validation-message-left {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.cmem-validation-field-wrapper {
    display: flex;

}

.cmem-validation-field-wrapper .cmem-validation-message-right {

    flex-direction: row;
}

.cmem-validation-field-wrapper .cmem-validation-message-left {

    flex-direction: row-reverse;
}