/* ===== Mobile-safe fix (no breaking sizes) ===== */

/* 1) Guard against horizontal scroll on narrow screens */
.cm-form{
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* If the form is inside a card/popup, keep it within viewport with small gutter */
@media (max-width: 420px){
  .cm-form{ 
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 2) Phone row: use flexible layout without hard widths */
.cm-field--phone .cm-phone{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* Flag & prefix keep their intrinsic size; don't grow / don't shrink */
.cm-field--phone .cm-flag,
.cm-field--phone .cm-prefix{
  flex: 0 0 auto;
}

/* Input takes the remaining space and may shrink slightly; avoid overflow */
.cm-field--phone input{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 3) General inputs – ensure no min-content overflow */
.cm-field input,
.cm-field textarea,
.cm-field select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 4) Safety: disable horizontal overflow in the popup shell (if any) */
@supports (overflow: clip){
  .lead, .lead *{ max-inline-size: 100%; }
  .lead{ overflow-x: clip; }
}