/**
 * Bricks Custom Placement Form — layout hardening (v1.8, 2026-07-28)
 *
 * The form markup wraps «نام و نام خانوادگی» and «شماره موبایل» in an inline
 * style="display:flex;gap:10px;" row with no flex-wrap. An <input> will not
 * shrink below its intrinsic width, so inside a narrow container — most
 * notably the CTA popup on mobile — the second field (the mobile number,
 * which sits on the LEFT in RTL) overflows the container and is clipped,
 * making it look as though the form has no mobile field at all.
 *
 * We cannot override the inline `display` from a stylesheet, but flex-wrap
 * and the item sizing are not set inline, so these rules win.
 */

.bcf-form > div[style*="flex"] {
    flex-wrap: wrap;
}

.bcf-form > div[style*="flex"] > .bcf-form-group {
    flex: 1 1 150px;   /* share the row when it fits, stack when it does not */
    min-width: 0;      /* allow shrinking below the input's intrinsic width */
}

/* inputs must be allowed to shrink inside a flex item */
.bcf-form-group {
    min-width: 0;
}

.bcf-form-group input,
.bcf-form-group select {
    min-width: 0;
    max-width: 100%;
}

/* message box: hidden until the handler fills it */
.bcf-form #bcf-form-message,
.bcf-form .bcf-form-message {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
}

.bcf-form #bcf-form-message.success,
.bcf-form .bcf-form-message.success {
    color: #0f7b3d;
}

.bcf-form #bcf-form-message.error,
.bcf-form .bcf-form-message.error {
    color: #e30613;
}