/* =========================================================================
   TT Booking Widget — the conversion core. Mobile = vertical stack,
   desktop = horizontal bar. Above the fold on every key landing page.
   ========================================================================= */
.tt-booking {
  background: var(--tt-color-bg);
  border-radius: var(--tt-radius-xl);
  box-shadow: var(--tt-shadow-3);
  padding: var(--tt-space-24);
}
@media (min-width: 768px) { .tt-booking { padding: var(--tt-space-32); } }

.tt-booking__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-space-16);
}
@media (min-width: 980px) {
  /* pickup | dest | date | time | pax | submit */
  .tt-booking__grid {
    grid-template-columns: 1.2fr 1.2fr 0.9fr 0.7fr 0.9fr auto;
    align-items: end;
  }
}

.tt-field { display: flex; flex-direction: column; gap: var(--tt-space-8); }
.tt-field__label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--tt-fs-caption); font-weight: var(--tt-fw-semibold); color: var(--tt-color-text); }
.tt-field__label svg { width: 14px; height: 14px; color: var(--tt-color-primary); flex-shrink: 0; }
.tt-field__label .tt-req { color: var(--tt-color-danger); }

.tt-input, .tt-select {
  height: var(--tt-input-h);
  width: 100%;
  padding-inline: var(--tt-space-16);
  background: var(--tt-color-surface);
  border: 1px solid var(--tt-color-border);
  border-radius: var(--tt-radius-md);
  font-size: var(--tt-fs-small);
  transition: border-color var(--tt-duration) var(--tt-ease), box-shadow var(--tt-duration) var(--tt-ease);
}
.tt-input:focus, .tt-select:focus { outline: none; border-color: var(--tt-color-primary); box-shadow: var(--tt-focus-ring); }
.tt-input[aria-invalid="true"], .tt-select[aria-invalid="true"] { border-color: var(--tt-color-danger); }

.tt-field__error { font-size: var(--tt-fs-caption); color: var(--tt-color-danger); min-height: 1em; }

.tt-booking__submit { align-self: stretch; }
@media (min-width: 980px) { .tt-booking__submit .tt-btn { height: var(--tt-input-h); } }

/* Trust row under the widget — now wraps the Trust Strip component
   (template-parts/trust-strip.php, styled by components/trust.css).
   This wrapper only provides the divider/spacing context; the badges
   themselves are styled by trust.css, not here. Milestone 3. */
.tt-booking__trust {
  margin-top: var(--tt-space-24);
  padding-top: var(--tt-space-16);
  border-top: 1px solid var(--tt-color-border);
}
.tt-booking__trust .tt-trust-strip { background: none; padding: 0; justify-content: flex-start; }

/* .tt-sticky-cta lives in components/header.css — it's rendered globally
   from footer.php, not specific to the booking widget. This file used to
   duplicate the rule with a different z-index (50 vs 90) and a different
   mobile breakpoint (768px vs 980px); on any page where this stylesheet
   wasn't enqueued (dashboard, legal pages, 404, search, contact, FAQ,
   about) only header.css's version applied, so the CTA hid at a different
   width than everywhere else. Removed here rather than in header.css
   since header.css already carries the matching `body { padding-bottom }`
   companion rule this component needs. */