/*
 * Masa Form Toolkit
 *
 * Side-by-side fields: set a field's "Wrapper CSS Class" in the Form Builder to one of
 * field-width-25, field-width-33, field-width-50, field-width-66, field-width-75. Fields stay full width on phones and
 * share a row from 576px up. Forms that use none of these classes are not affected.
 */
[class*="field-container-"]:has(> .field-width-25, > .field-width-33, > .field-width-50, > .field-width-66, > .field-width-75),
[class*="field-container-"] fieldset:has(> .field-width-25, > .field-width-33, > .field-width-50, > .field-width-66, > .field-width-75) {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  align-items: flex-start;
}

[class*="field-container-"]:has(> .field-width-25, > .field-width-33, > .field-width-50, > .field-width-66, > .field-width-75) > *,
[class*="field-container-"] fieldset:has(> .field-width-25, > .field-width-33, > .field-width-50, > .field-width-66, > .field-width-75) > * {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 576px) {
  [class*="field-container-"] .field-width-25 { flex: 1 1 calc(25% - 1rem); }
  [class*="field-container-"] .field-width-33 { flex: 1 1 calc(33.333% - 1rem); }
  [class*="field-container-"] .field-width-50 { flex: 1 1 calc(50% - 1rem); }
  [class*="field-container-"] .field-width-66 { flex: 1 1 calc(66.666% - 1rem); }
  [class*="field-container-"] .field-width-75 { flex: 1 1 calc(75% - 1rem); }
}

/* Phone validation message (shown on blur; the server re-checks on submit). */
.field-phone-error:empty { display: none; }
.field-phone-error {
  margin-top: .25rem;
  font-size: .875em;
  color: var(--bs-form-invalid-color, #dc3545);
}