/* Birthday: day / month / year as one consistent control row */
.wa-field-birthday .wa-value {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.wa-field-birthday .wa-value select,
.wa-field-birthday .wa-value input[name*="[year]"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  height: calc(1.5em + 0.75rem + 2px) !important;
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  max-height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 1.25rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  border-radius: var(--bs-border-radius, 0.375rem);
  vertical-align: middle;
}

.wa-field-birthday .wa-value input[name*="[year]"] {
  appearance: none;
  -webkit-appearance: none;
}

@media (min-width: 768px) {
  .wa-field-birthday .wa-value {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .wa-field-birthday .wa-value select {
    width: auto !important;
    min-width: 6rem !important;
  }

  .wa-field-birthday .wa-value input[name*="[year]"] {
    width: 6.5rem !important;
    min-width: 6.5rem !important;
  }
}