/* =========================================================================
   TT Forms — inline validation states. Component Library §8.
   Global pattern for NEW forms (customer-account forms, Milestone 6).

   Namespace fixed in Milestone 3: the original draft reused ".tt-field",
   which already exists in booking-widget.css with different, working
   semantics (no margin-bottom, .tt-field__error always in-flow rather
   than display:none by default). Because tt-forms.css loads globally
   BEFORE the conditionally-loaded tt-booking-widget.css, any property
   this file set but booking-widget.css didn't re-declare would have
   silently survived the cascade — an extra 16px gap under every widget
   field, and every widget error message permanently hidden. Renamed to
   ".tt-vfield" to eliminate the collision entirely rather than trying to
   out-specificity it. See CHANGELOG for the full self-caught regression.
   ========================================================================= */

.tt-vfield { display: flex; flex-direction: column; gap: var(--tt-space-4); margin-bottom: var(--tt-space-16); }
.tt-vfield label { font-size: var(--tt-fs-caption); font-weight: var(--tt-fw-medium); }
.tt-vfield input,
.tt-vfield textarea,
.tt-vfield select {
  height: var(--tt-input-h);
  padding: 0 var(--tt-space-16);
  border: 1px solid var(--tt-color-border);
  border-radius: var(--tt-radius-sm);
  font-size: var(--tt-fs-small);
  font-family: var(--tt-font-body);
  transition: border-color var(--tt-motion-fast) var(--tt-motion-ease),
              box-shadow var(--tt-motion-fast) var(--tt-motion-ease);
}
.tt-vfield textarea { height: auto; padding: var(--tt-space-12) var(--tt-space-16); }
.tt-vfield input:focus-visible,
.tt-vfield textarea:focus-visible,
.tt-vfield select:focus-visible {
  outline: none;
  border-color: var(--tt-color-focus);
  box-shadow: var(--tt-focus-ring);
}

/* Invalid state — toggled via [aria-invalid="true"] on blur, not on every
   keystroke (never punish the user mid-typing). Design Bible §16. */
.tt-vfield input[aria-invalid="true"],
.tt-vfield textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--tt-color-danger);
}
.tt-vfield__error {
  display: none;
  font-size: 13px;
  color: var(--tt-color-danger);
  margin-block-start: 2px;
}
.tt-vfield input[aria-invalid="true"] ~ .tt-vfield__error,
.tt-vfield textarea[aria-invalid="true"] ~ .tt-vfield__error {
  display: block;
}

/* Valid state — optional, high-friction fields only (email/phone). */
.tt-vfield--valid input {
  border-color: var(--tt-color-success);
}

/* --- Booking widget's existing .tt-field family: validation extension ---
   Rather than duplicating box-model rules, only ADD the [aria-invalid]
   treatment on top of what booking-widget.css already correctly owns. */
.tt-field input[aria-invalid="true"],
.tt-field select[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--tt-color-danger);
}