.mud-input-control,
.mud-select,
.mud-input {
  border-radius: var(--upf-radius-sm);
}

.mud-input-slot {
  border-radius: var(--upf-radius-sm);
}

.mud-switch,
.mud-checkbox {
  margin-bottom: var(--upf-space-2);
}

.mud-form .card + .card,
.mud-form .card-soft + .card-soft {
  margin-top: var(--upf-space-4);
}

/* =============================================================
   FORM SECTION TITLE
   Inside a card-body or form group, above a set of related fields.
   Usage: <h5 class="upf-form-section-title">Indirizzo</h5>
   ============================================================= */
.upf-form-section-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--upf-text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--upf-space-3);
  margin-top: 0;
}

/* =============================================================
   FORM GROUP
   Vertical stack of related fields with consistent gap.
   Usage: <div class="upf-form-group"> ... </div>
   ============================================================= */
.upf-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--upf-space-3);
}

/* =============================================================
   FIELD ROW
   Horizontal row of adjacent fields, bottom-aligned.
   Usage: <div class="upf-field-row"> <MudTextField /> <MudSelect /> </div>
   ============================================================= */
.upf-field-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--upf-space-4);
  flex-wrap: wrap;
}

/* =============================================================
   TOGGLE GROUP
   Vertical group of MudSwitch or MudCheckbox.
   Usage: <div class="upf-toggle-group"> <MudSwitch /> <MudSwitch /> </div>
   ============================================================= */
.upf-toggle-group {
  display: flex;
  flex-direction: column;
  gap: var(--upf-space-2);
}

.upf-toggle-group .mud-switch,
.upf-toggle-group .mud-checkbox {
  margin-bottom: 0;
}