/* ============================================================
   components/forms.css — generic field controls (input/select/textarea)
   Booking-specific controls (choice cards, pills, stepper, progress)
   live in pages/booking.css.
   ============================================================ */
.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 3rem;
  padding: 0 0.9rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.field textarea { height: auto; min-height: 6rem; padding: 0.75rem 0.9rem; resize: none; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px hsl(var(--primary));
}
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

@media (min-width: 768px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}