.whbf-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
}

.whbf-field {
  --whbf-field-width: 16%;
  flex: 1 1 var(--whbf-field-width);
  min-width: min(140px, 100%);
  display: flex;
  flex-direction: column;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}

.whbf-field-label {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  color: #4b5563;
}

.whbf-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  background: #fff;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.4;
  color: #111827;
  transition: all 0.3s ease;
}

.whbf-input:focus {
  outline: none;
}

.whbf-input::-webkit-outer-spin-button,
.whbf-input::-webkit-inner-spin-button {
  margin: 0;
}

.whbf-field--checkin,
.whbf-field--checkout,
.whbf-field--nights {
  --whbf-field-width: 20%;
}

.whbf-field--adults,
.whbf-field--children,
.whbf-field--infants,
.whbf-field--rooms {
  --whbf-field-width: 12%;
}

.whbf-field-button {
  --whbf-field-width: 16%;
  justify-content: end;
  border: 0;
  padding: 0;
  background: transparent;
}

.whbf-submit {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
  background: #111827;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.whbf-submit:hover,
.whbf-submit:focus {
  opacity: 0.92;
}

.whbf-message {
  margin-top: 10px;
  font-size: 13px;
  color: #b91c1c;
}