@ticketboothapp/booking 0.1.10 → 0.1.12

package/src/components/booking/booking-flow.css

@@ -0,0 +1,944 @@
+/**
+ * Booking flow theme - matches ticketbooth-fe styling.
+ * Scoped to .booking-flow-root for variables/utilities; preflight only in .booking-flow-preflight
+ * (book-flow screen) so the product grid keeps its intended styling.
+ */
+
+/* ========== Scoped Preflight (Tailwind base reset, only inside book-flow screen - NOT product grid) ========== */
+.booking-flow-preflight *,
+.booking-flow-preflight *::before,
+.booking-flow-preflight *::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+
+.booking-flow-preflight *::before,
+.booking-flow-preflight *::after {
+  --tw-content: '';
+}
+
+.booking-flow-preflight h1,
+.booking-flow-preflight h2,
+.booking-flow-preflight h3,
+.booking-flow-preflight h4,
+.booking-flow-preflight h5,
+.booking-flow-preflight h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.booking-flow-preflight a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.booking-flow-preflight button,
+.booking-flow-preflight input,
+.booking-flow-preflight optgroup,
+.booking-flow-preflight select,
+.booking-flow-preflight textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.booking-flow-preflight button,
+.booking-flow-preflight select {
+  text-transform: none;
+}
+
+.booking-flow-preflight button,
+.booking-flow-preflight input[type='button'],
+.booking-flow-preflight input[type='reset'],
+.booking-flow-preflight input[type='submit'] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+.booking-flow-preflight button,
+.booking-flow-preflight [role='button'] {
+  cursor: pointer;
+}
+
+.booking-flow-preflight :disabled {
+  cursor: default;
+}
+
+.booking-flow-preflight blockquote,
+.booking-flow-preflight dl,
+.booking-flow-preflight dd,
+.booking-flow-preflight h1,
+.booking-flow-preflight h2,
+.booking-flow-preflight h3,
+.booking-flow-preflight h4,
+.booking-flow-preflight h5,
+.booking-flow-preflight h6,
+.booking-flow-preflight hr,
+.booking-flow-preflight figure,
+.booking-flow-preflight p,
+.booking-flow-preflight pre {
+  margin: 0;
+}
+
+.booking-flow-preflight fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+.booking-flow-preflight ol,
+.booking-flow-preflight ul,
+.booking-flow-preflight menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.booking-flow-preflight img,
+.booking-flow-preflight svg,
+.booking-flow-preflight video,
+.booking-flow-preflight canvas,
+.booking-flow-preflight audio,
+.booking-flow-preflight iframe,
+.booking-flow-preflight embed,
+.booking-flow-preflight object {
+  display: block;
+  vertical-align: middle;
+}
+
+.booking-flow-preflight input::placeholder,
+.booking-flow-preflight textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+
+/* ========== Ticketbooth booking CSS variables ========== */
+.booking-flow-root {
+  --light-orange-background: #fff1eb;
+  --light-orange-background-dark: #f7e4dc;
+  --accent-orange: #ff4d00;
+  --booking-primary: #059669;
+  --booking-primary-hover: #047857;
+  --booking-bg: #f5f5f4;
+  --booking-bg-end: #e7e5e4;
+  --booking-surface: #ffffff;
+  --booking-header-bg: #1c1917;
+  --booking-header-text: #ffffff;
+  --booking-text: #1c1917;
+  --booking-text-muted: #78716c;
+  --booking-border: #e7e5e4;
+  --booking-border-input: #d6d3d1;
+  --booking-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --booking-radius: 1rem;
+  --booking-error-bg: #fef2f2;
+  --booking-error-border: #fecaca;
+  --booking-error-text: #b91c1c;
+  --booking-stone-50: #fafaf9;
+  --booking-stone-100: #f5f5f4;
+  --booking-stone-200: #e7e5e4;
+  --booking-stone-300: #d6d3d1;
+  --booking-stone-400: #a8a29e;
+  --booking-stone-500: #78716c;
+  --booking-stone-600: #57534e;
+  --booking-stone-700: #44403c;
+  --booking-stone-800: #292524;
+  --booking-stone-900: #1c1917;
+  --booking-emerald-50: #ecfdf5;
+  --booking-emerald-600: #059669;
+  --booking-emerald-700: #047857;
+}
+
+/* Explicit utility overrides - ensures Tailwind-like classes apply */
+.booking-flow-root .bg-emerald-600 { background-color: var(--booking-emerald-600) !important; }
+.booking-flow-root .bg-emerald-700 { background-color: var(--booking-emerald-700) !important; }
+.booking-flow-root .bg-emerald-50 { background-color: var(--booking-emerald-50) !important; }
+.booking-flow-root .bg-stone-50 { background-color: var(--booking-stone-50) !important; }
+.booking-flow-root .bg-stone-100 { background-color: var(--booking-stone-100) !important; }
+.booking-flow-root .bg-stone-200 { background-color: var(--booking-stone-200) !important; }
+.booking-flow-root .bg-white { background-color: #fff !important; }
+.booking-flow-root .text-emerald-600 { color: var(--booking-emerald-600) !important; }
+.booking-flow-root .text-stone-500 { color: var(--booking-stone-500) !important; }
+.booking-flow-root .text-stone-600 { color: var(--booking-stone-600) !important; }
+.booking-flow-root .text-stone-700 { color: var(--booking-stone-700) !important; }
+.booking-flow-root .text-stone-900 { color: var(--booking-stone-900) !important; }
+.booking-flow-root .text-white { color: #fff !important; }
+.booking-flow-root .border-stone-200 { border-color: var(--booking-stone-200) !important; }
+.booking-flow-root .border-stone-300 { border-color: var(--booking-stone-300) !important; }
+.booking-flow-root .border-emerald-600 { border-color: var(--booking-emerald-600) !important; }
+
+/* Calendar header - border under SUN/MON/TUE... row */
+.booking-flow-root .calendar-header-grid {
+  border-bottom: 1px solid var(--booking-stone-300) !important;
+}
+
+/* Calendar grid - dashboard-style borders (each day cell clearly delineated) */
+.booking-flow-root .calendar-days-grid > button {
+  border-right: 1px solid var(--booking-stone-300) !important;
+  border-bottom: 1px solid var(--booking-stone-300) !important;
+}
+.booking-flow-root .calendar-days-grid > button:nth-child(7n) {
+  border-right: none !important;
+}
+/* Remove bottom border from last row - container border provides bottom edge (avoids double line) */
+.booking-flow-root .calendar-days-grid > button:nth-last-child(-n+7) {
+  border-bottom: none !important;
+}
+.booking-flow-root .rounded-lg { border-radius: 0.5rem !important; }
+.booking-flow-root .rounded-xl { border-radius: 0.75rem !important; }
+.booking-flow-root .rounded-full { border-radius: 9999px !important; }
+
+/* Layout utilities */
+.booking-flow-root .flex { display: flex !important; }
+.booking-flow-root .grid { display: grid !important; }
+.booking-flow-root .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
+@media (min-width: 640px) {
+  .booking-flow-root .sm\\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
+}
+.booking-flow-root .gap-2 { gap: 0.5rem !important; }
+.booking-flow-root .gap-3 { gap: 0.75rem !important; }
+.booking-flow-root .gap-4 { gap: 1rem !important; }
+.booking-flow-root .space-y-2 > * + * { margin-top: 0.5rem !important; }
+.booking-flow-root .space-y-4 > * + * { margin-top: 1rem !important; }
+.booking-flow-root .space-y-6 > * + * { margin-top: 1.5rem !important; }
+.booking-flow-root .space-y-8 > * + * { margin-top: 2rem !important; }
+.booking-flow-root .items-center { align-items: center !important; }
+.booking-flow-root .justify-between { justify-content: space-between !important; }
+.booking-flow-root .w-full { width: 100% !important; }
+.booking-flow-root .p-4 { padding: 1rem !important; }
+.booking-flow-root .p-8 { padding: 2rem !important; }
+.booking-flow-root .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
+.booking-flow-root .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
+.booking-flow-root .mt-6 { margin-top: 1.5rem !important; }
+.booking-flow-root .mb-2 { margin-bottom: 0.5rem !important; }
+.booking-flow-root .mb-4 { margin-bottom: 1rem !important; }
+.booking-flow-root .booking-collage-wrapper { margin: 0 !important; margin-top: 0 !important; }
+/* Smaller gap between collage and tour description */
+.booking-flow-root .space-y-8 > .booking-collage-wrapper + * { margin-top: 0.75rem !important; }
+/* Smaller gap between tour description and calendar */
+.booking-flow-root .space-y-8 > [class*="TourDescription"] + .booking-calendar-section { margin-top: 0.75rem !important; }
+/* Reduce TourDescription bottom spacing in booking flow */
+.booking-flow-root [class*="TourDescription_root"] {
+  margin-bottom: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+/* Product header gradient - match ticketbooth */
+.booking-flow-root .from-emerald-700 { --tw-gradient-from: var(--booking-emerald-700); --tw-gradient-to: rgb(4 120 87 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
+.booking-flow-root .to-emerald-600 { --tw-gradient-to: var(--booking-emerald-600); }
+.booking-flow-root .bg-gradient-to-r { background-image: linear-gradient(to right, var(--booking-emerald-700), var(--booking-emerald-600)) !important; }
+
+
+/* Reset viavia global heading overrides inside booking flow - ticketbooth uses system font, proper casing */
+.booking-flow-preflight h1,
+.booking-flow-preflight h2,
+.booking-flow-preflight h3,
+.booking-flow-preflight h4,
+.booking-flow-preflight h5,
+.booking-flow-preflight h6 {
+  font-family: var(--booking-font-sans) !important;
+  font-weight: 700 !important;
+  text-transform: none !important;
+  text-align: left !important;
+  color: var(--booking-text) !important;
+}
+
+.booking-flow-preflight h1 { font-size: 1.875rem; }
+.booking-flow-preflight h2 { font-size: 1.5rem; }
+.booking-flow-preflight h3 { font-size: 1.25rem; }
+.booking-flow-preflight h4 { font-size: 1.125rem; }
+.booking-flow-preflight h5 { font-size: 1rem; }
+.booking-flow-preflight h6 { font-size: 0.875rem; }
+
+/* Product header gradient - emerald to match ticketbooth */
+.booking-flow-preflight .bg-gradient-to-r.from-emerald-700.to-emerald-600 h2,
+.booking-flow-preflight .bg-gradient-to-r.from-emerald-700.to-emerald-600 h3 {
+  color: white !important;
+}
+
+/* Form inputs - clean borders, proper sizing */
+.booking-flow-preflight input[type="text"],
+.booking-flow-preflight input[type="email"],
+.booking-flow-preflight input[type="number"] {
+  font-family: var(--booking-font-sans);
+  border: 1px solid var(--booking-border-input);
+  border-radius: 0.5rem;
+}
+
+.booking-flow-preflight input:focus {
+  outline: none;
+  border-color: var(--booking-primary);
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
+}
+
+/* Labels */
+.booking-flow-preflight label {
+  font-family: var(--booking-font-sans);
+  color: var(--booking-text);
+}
+
+/* Dialog title - orange for both product grid and book flow */
+.booking-flow-root [id="booking-dialog-title"] {
+  color: var(--accent-orange) !important;
+}
+
+/* Selected return time option - solid green with white text (matches ticketbooth dashboard) */
+.booking-flow-preflight .booking-return-selected,
+.booking-flow-preflight .booking-return-selected * {
+  color: white !important;
+}
+/* Exception: admin projected overage (Booking n / m total) must stay warning red on green */
+.booking-flow-preflight .booking-return-selected [class*='ReturnTimeSelector_capacityProjected'],
+.booking-flow-preflight .booking-return-selected [class*='ReturnTimeSelector_capacityProjected'] * {
+  color: #b91c1c !important;
+}
+
+/* Clickable "your pickup location" etc. - style as link (blue, underlined) like ticketbooth */
+.booking-flow-preflight button.text-stone-400.underline,
+.booking-flow-preflight button.text-stone-400.underline:hover {
+  color: var(--booking-primary) !important;
+  background: none;
+  border: none;
+}
+
+/* ========== Itinerary section - orange bg, Poppins, lowercase (match TourDescription) ========== */
+.booking-flow-preflight [class*="ItineraryBox_box"],
+.booking-flow-preflight [class*="ItineraryPlaceholder_box"] {
+  background: var(--light-orange-background-dark) !important;
+}
+.booking-flow-preflight [class*="ItineraryBox_title"],
+.booking-flow-preflight [class*="ItineraryPlaceholder_title"] {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 700 !important;
+  font-size: 1.125rem !important;
+  text-transform: lowercase !important;
+  color: var(--accent-orange) !important;
+}
+@media (min-width: 768px) {
+  .booking-flow-preflight [class*="ItineraryBox_title"],
+  .booking-flow-preflight [class*="ItineraryPlaceholder_title"] {
+    font-size: 1.375rem !important;
+  }
+}
+.booking-flow-preflight [class*="ItineraryBox_dateSubtitle"],
+.booking-flow-preflight [class*="ItineraryPlaceholder_dateSubtitle"] {
+  color: var(--accent-orange) !important;
+  opacity: 0.9;
+}
+.booking-flow-preflight [class*="ItineraryBox_icon"] {
+  color: var(--accent-orange) !important;
+}
+
+/* ========== Pickup time pills - not white, padding, selected = green ========== */
+.booking-flow-preflight [class*="PickupTimeSelector_btnAvailable"] {
+  background: var(--light-orange-background-dark) !important;
+}
+.booking-flow-preflight [class*="PickupTimeSelector_btnAvailable"]:hover {
+  background: var(--light-orange-background) !important;
+}
+.booking-flow-preflight [class*="PickupTimeSelector_btnSoldOutLocked"],
+.booking-flow-preflight [class*="PickupTimeSelector_btnSoldOutAdmin"] {
+  background: #fee2e2 !important;
+  border-color: #fca5a5 !important;
+  color: #b91c1c !important;
+}
+.booking-flow-preflight [class*="PickupTimeSelector_btnSoldOutLocked"]:hover,
+.booking-flow-preflight [class*="PickupTimeSelector_btnSoldOutAdmin"]:hover {
+  background: #fee2e2 !important;
+  border-color: #fca5a5 !important;
+}
+.booking-flow-preflight [class*="PickupTimeSelector_btnSelected"] {
+  background: var(--booking-emerald-600) !important;
+  color: #fff !important;
+}
+.booking-flow-preflight [class*="PickupTimeSelector_btn"] {
+  padding: 0.875rem 1.25rem !important;
+}
+
+/* ========== Return time options - same as pickup, selected = green ========== */
+.booking-flow-preflight [class*="ReturnTimeSelector_btnAvailable"] {
+  background: var(--light-orange-background-dark) !important;
+}
+.booking-flow-preflight [class*="ReturnTimeSelector_btnAvailable"]:hover {
+  background: var(--light-orange-background) !important;
+}
+.booking-flow-preflight [class*="ReturnTimeSelector_btnSoldOutLocked"],
+.booking-flow-preflight [class*="ReturnTimeSelector_btnSoldOutAdmin"] {
+  background: #fee2e2 !important;
+  border-color: #fca5a5 !important;
+  color: #b91c1c !important;
+}
+.booking-flow-preflight [class*="ReturnTimeSelector_btnSoldOutLocked"]:hover,
+.booking-flow-preflight [class*="ReturnTimeSelector_btnSoldOutAdmin"]:hover {
+  background: #fee2e2 !important;
+  border-color: #fca5a5 !important;
+}
+.booking-flow-preflight [class*="ReturnTimeSelector_btnSelected"] {
+  background: var(--booking-emerald-600) !important;
+  border-color: var(--booking-emerald-600) !important;
+  color: #fff !important;
+}
+.booking-flow-preflight [class*="ReturnTimeSelector_btn"] {
+  padding: 1rem 1.25rem !important;
+}
+
+/* ========== Section titles - same style as Build Your Itinerary (orange, Poppins, lowercase) ========== */
+.booking-flow-preflight [class*="PickupTimeSelector_label"],
+.booking-flow-preflight [class*="ReturnTimeSelector_label"],
+.booking-flow-preflight [class*="CancellationPolicySelector_label"],
+.booking-flow-preflight [class*="TicketSelector_label"],
+.booking-flow-preflight [class*="AddOnsSection_label"],
+.booking-flow-preflight [class*="CheckoutForm_pickupLabel"] {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 700 !important;
+  font-size: 1.125rem !important;
+  text-transform: lowercase !important;
+  color: var(--accent-orange) !important;
+}
+@media (min-width: 768px) {
+  .booking-flow-preflight [class*="PickupTimeSelector_label"],
+  .booking-flow-preflight [class*="ReturnTimeSelector_label"],
+  .booking-flow-preflight [class*="CancellationPolicySelector_label"],
+  .booking-flow-preflight [class*="TicketSelector_label"],
+  .booking-flow-preflight [class*="AddOnsSection_label"],
+  .booking-flow-preflight [class*="CheckoutForm_pickupLabel"] {
+    font-size: 1.375rem !important;
+  }
+}
+/* PickupLocationSelector title (h2) - when showing the selector */
+.booking-flow-preflight #pickup-location-section h2 {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 700 !important;
+  font-size: 1.125rem !important;
+  text-transform: lowercase !important;
+  color: var(--accent-orange) !important;
+}
+@media (min-width: 768px) {
+  .booking-flow-preflight #pickup-location-section h2 {
+    font-size: 1.375rem !important;
+  }
+}
+
+/* ========== Dependent add-on dialog (photo sessions) - same input/button sizing as private shuttle ========== */
+.booking-flow-preflight .dap-add-on-dialog input[type="text"],
+.booking-flow-preflight .dap-add-on-dialog input[type="email"],
+.booking-flow-preflight .dap-add-on-dialog input[type="number"] {
+  padding: 0.875rem 1.25rem !important;
+  border: 1px solid var(--booking-stone-300) !important;
+  border-radius: 0.5rem !important;
+  font-size: 1rem !important;
+  line-height: 1.4 !important;
+  color: var(--booking-stone-900) !important;
+  background-color: #fff !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog input[type="text"]:focus,
+.booking-flow-preflight .dap-add-on-dialog input[type="email"]:focus,
+.booking-flow-preflight .dap-add-on-dialog input[type="number"]:focus {
+  outline: none !important;
+  border-color: var(--booking-primary) !important;
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
+}
+
+/* Textareas: scoped preflight sets border-width:0 on * — restore like inputs above */
+.booking-flow-preflight .dap-add-on-dialog textarea {
+  padding: 0.75rem 1rem !important;
+  border: 1px solid var(--booking-stone-300) !important;
+  border-radius: 0.5rem !important;
+  font-size: 1rem !important;
+  line-height: 1.4 !important;
+  color: var(--booking-stone-900) !important;
+  background-color: #fff !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  min-height: 4.5rem !important;
+  resize: vertical !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog textarea:focus {
+  outline: none !important;
+  border-color: var(--booking-primary) !important;
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog input[type="radio"] {
+  width: 1.125rem !important;
+  height: 1.125rem !important;
+  min-width: 1.125rem !important;
+  min-height: 1.125rem !important;
+  flex-shrink: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  accent-color: var(--booking-emerald-600) !important;
+  cursor: pointer !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog button.dap-add-on-primary,
+.booking-flow-preflight .dap-add-on-payment-form button.dap-add-on-primary {
+  padding: 1rem 1.5rem !important;
+  min-height: 3.25rem !important;
+  font-size: 1rem !important;
+  font-weight: 600 !important;
+  font-family: 'Figtree', sans-serif !important;
+  border-radius: 0.5rem !important;
+  background: var(--booking-emerald-600) !important;
+  color: #fff !important;
+  border: none !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  cursor: pointer !important;
+  width: auto !important;
+  align-self: flex-start !important;
+  box-sizing: border-box !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog button.dap-add-on-primary:hover:not(:disabled),
+.booking-flow-preflight .dap-add-on-payment-form button.dap-add-on-primary:hover:not(:disabled) {
+  background: var(--booking-emerald-700) !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog button.dap-add-on-primary:disabled,
+.booking-flow-preflight .dap-add-on-payment-form button.dap-add-on-primary:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+}
+
+@media (max-width: 639px) {
+  .booking-flow-preflight .dap-add-on-dialog button.dap-add-on-primary,
+  .booking-flow-preflight .dap-add-on-payment-form button.dap-add-on-primary {
+    width: 100% !important;
+    align-self: stretch !important;
+    justify-content: center !important;
+  }
+}
+
+/* DAP session length tiles — preflight zeros out button padding; match PickupTimeSelector / ReturnTimeSelector */
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionGrid'] {
+  gap: 0.5rem !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionBtn'] {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-align: center !important;
+  width: 100% !important;
+  min-height: 0 !important;
+  padding: 1.125rem 1.25rem !important;
+  border: none !important;
+  border-radius: 0.5rem !important;
+  font-family: 'Figtree', sans-serif !important;
+  background: var(--light-orange-background-dark) !important;
+  color: var(--booking-stone-700) !important;
+  box-shadow: none !important;
+  transition: background 0.2s ease !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  box-sizing: border-box !important;
+  cursor: pointer !important;
+}
+
+.booking-flow-preflight
+  .dap-add-on-dialog
+  [class*='dapSessionOptionBtn']:hover:not(:disabled):not([class*='dapSessionOptionBtnSelected']) {
+  background: var(--light-orange-background) !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionBtnSelected'] {
+  background: var(--booking-emerald-600) !important;
+  color: #fff !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionBtn']:disabled {
+  opacity: 0.55 !important;
+  cursor: wait !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionTitle'] {
+  font-weight: 600 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.35 !important;
+  color: inherit !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionBtnSelected'] [class*='dapSessionOptionTitle'] {
+  color: #fff !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionMeta'] {
+  font-size: 0.8125rem !important;
+  font-weight: 500 !important;
+  line-height: 1.35 !important;
+  color: var(--booking-stone-500) !important;
+}
+
+.booking-flow-preflight
+  .dap-add-on-dialog
+  [class*='dapSessionOptionBtnSelected']
+  [class*='dapSessionOptionMeta'] {
+  color: rgba(255, 255, 255, 0.92) !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionPrice'] {
+  font-size: 0.8125rem !important;
+  font-weight: 500 !important;
+  line-height: 1.35 !important;
+  color: var(--booking-stone-500) !important;
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapSessionOptionBtnSelected'] [class*='dapSessionOptionPrice'] {
+  color: rgba(255, 255, 255, 0.92) !important;
+}
+
+/* "Session length" — match PickupTimeSelector_label */
+.booking-flow-preflight .dap-add-on-dialog [class*='dapLegend'] {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 700 !important;
+  font-size: 1.125rem !important;
+  text-transform: lowercase !important;
+  color: var(--accent-orange) !important;
+  display: block !important;
+}
+
+@media (min-width: 768px) {
+  .booking-flow-preflight .dap-add-on-dialog [class*='dapLegend'] {
+    font-size: 1.375rem !important;
+  }
+}
+
+.booking-flow-preflight .dap-add-on-dialog [class*='dapRefItinerarySummaryTitle'] {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 700 !important;
+  font-size: 1.125rem !important;
+  text-transform: lowercase !important;
+  color: var(--accent-orange) !important;
+  margin-bottom: 0.375rem !important;
+}
+
+@media (min-width: 768px) {
+  .booking-flow-preflight .dap-add-on-dialog [class*='dapRefItinerarySummaryTitle'] {
+    font-size: 1.375rem !important;
+  }
+}
+
+.booking-flow-preflight .dap-add-on-dialog .booking-collage-wrapper {
+  margin: 0 0 0.75rem !important;
+}
+
+/* Return-time-style slot tiles: child text colors on emerald selected state */
+.booking-flow-preflight .dap-add-on-dialog [class*='ReturnTimeSelector_btnSelected'] [class*='ReturnTimeSelector_time'],
+.booking-flow-preflight .dap-add-on-dialog [class*='ReturnTimeSelector_btnSelected'] [class*='ReturnTimeSelector_location'],
+.booking-flow-preflight .dap-add-on-dialog [class*='ReturnTimeSelector_btnSelected'] [class*='ReturnTimeSelector_price'] {
+  color: #fff !important;
+}
+.booking-flow-preflight .dap-add-on-dialog [class*='ReturnTimeSelector_btnSelected'] [class*='ReturnTimeSelector_staySummary'] {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* ========== Private Shuttle - override preflight/Tailwind for inputs, buttons, pills ========== */
+/* Inputs - preflight sets padding:0, we need explicit overrides */
+.booking-flow-preflight .private-shuttle-booking-flow input[type="text"],
+.booking-flow-preflight .private-shuttle-booking-flow input[type="email"],
+.booking-flow-preflight .private-shuttle-booking-flow input[type="time"],
+.booking-flow-preflight .private-shuttle-booking-flow input[type="number"],
+.booking-flow-preflight .private-shuttle-booking-flow select,
+.booking-flow-preflight .private-shuttle-booking-flow textarea {
+  padding: 0.875rem 1.25rem !important;
+  border: 1px solid var(--booking-stone-300) !important;
+  border-radius: 0.5rem !important;
+  font-size: 1rem !important;
+  color: var(--booking-stone-900) !important;
+  background-color: #fff !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow input[type="time"] {
+  padding: 0.5rem 0.75rem !important;
+}
+/* Pickup location search input - needs 3rem left padding for icon (overrides private-shuttle + preflight) */
+.booking-flow-preflight input[data-pickup-search] {
+  padding: 0.75rem 1rem 0.75rem 3rem !important;
+}
+/* Same for private shuttle flow - must override .private-shuttle-booking-flow input rule above */
+.booking-flow-preflight .private-shuttle-booking-flow input[data-pickup-search] {
+  padding: 0.75rem 1rem 0.75rem 3rem !important;
+}
+/* Passenger select - compact, narrow, native menulist so selected value is visible when collapsed */
+.booking-flow-preflight .private-shuttle-booking-flow [class*="passengerSelect"] {
+  width: auto !important;
+  max-width: 5rem !important;
+  -webkit-appearance: menulist !important;
+  appearance: menulist !important;
+  color: var(--booking-stone-900) !important;
+  padding: 0.375rem 0.5rem !important;
+  font-size: 0.9375rem !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow input:focus,
+.booking-flow-preflight .private-shuttle-booking-flow select:focus,
+.booking-flow-preflight .private-shuttle-booking-flow textarea:focus {
+  outline: none !important;
+  border-color: var(--booking-primary) !important;
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
+}
+
+/* Time/option pills - preflight sets background:transparent, padding:0 */
+.booking-flow-preflight .private-shuttle-booking-flow .private-shuttle-btn-time,
+.booking-flow-preflight .private-shuttle-booking-flow .private-shuttle-btn-option {
+  padding: 0.875rem 1.25rem !important;
+  border-radius: 9999px !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow .private-shuttle-btn-time:not([class*="Selected"]),
+.booking-flow-preflight .private-shuttle-booking-flow .private-shuttle-btn-option:not([class*="Selected"]) {
+  background: var(--light-orange-background-dark) !important;
+  color: var(--booking-stone-700) !important;
+  border: none !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow [class*="btnTimeSelected"],
+.booking-flow-preflight .private-shuttle-booking-flow [class*="btnOptionSelected"] {
+  background: var(--booking-emerald-600) !important;
+  color: #fff !important;
+  border: none !important;
+}
+
+/* Policy buttons, qty buttons, submit button */
+.booking-flow-preflight .private-shuttle-booking-flow [class*="btnPolicy"] {
+  padding: 1rem 1.25rem !important;
+  border: 2px solid !important;
+  border-radius: 0.5rem !important;
+  background: #fff !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow [class*="btnPolicySelected"] {
+  border-color: var(--booking-emerald-500) !important;
+  background: var(--booking-emerald-50) !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow [class*="btnPolicyDefault"] {
+  border-color: var(--booking-stone-200) !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow [class*="qtyBtn"] {
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+  padding: 0 !important;
+  border: 1px solid var(--booking-stone-300) !important;
+  border-radius: 9999px !important;
+  background: #fff !important;
+  color: var(--booking-stone-600) !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow [class*="submitBtn"] {
+  padding: 1rem 1.5rem !important;
+  min-height: 3.25rem !important;
+  background: var(--booking-emerald-600) !important;
+  color: #fff !important;
+  font-weight: 600 !important;
+  border: none !important;
+  border-radius: 0.5rem !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow [class*="submitBtn"]:hover:not(:disabled) {
+  background: var(--booking-emerald-700) !important;
+}
+
+/* Add-on option buttons (e.g. animals) */
+.booking-flow-preflight .private-shuttle-booking-flow [class*="addOnOptionBtn"] {
+  padding: 1rem !important;
+  border: 2px solid !important;
+  border-radius: 0.5rem !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow [class*="addOnOptionBtnDefault"] {
+  background: #fff !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow [class*="addOnOptionBtnSelected"] {
+  background: var(--booking-emerald-50) !important;
+  border-color: var(--booking-emerald-500) !important;
+}
+
+/* Change button (link style) - preflight resets must not affect */
+.booking-flow-preflight .private-shuttle-booking-flow [class*="changeBtn"] {
+  background: none !important;
+  border: none !important;
+  padding: 0 !important;
+  font-size: 0.875rem !important;
+  color: var(--booking-emerald-600) !important;
+  text-decoration: underline !important;
+}
+
+/* ========== Private Shuttle section labels - same as other booking sections ========== */
+.booking-flow-preflight .private-shuttle-section-label {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 700 !important;
+  font-size: 1.125rem !important;
+  text-transform: lowercase !important;
+  color: var(--accent-orange) !important;
+}
+@media (min-width: 768px) {
+  .booking-flow-preflight .private-shuttle-section-label {
+    font-size: 1.375rem !important;
+  }
+}
+
+/* ItineraryBuilder labels inside private shuttle - match section style */
+.booking-flow-preflight .private-shuttle-booking-flow .itinerary-builder-section label {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 700 !important;
+  font-size: 1.125rem !important;
+  text-transform: lowercase !important;
+  color: var(--accent-orange) !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow .itinerary-builder-section .flex button {
+  padding: 0.875rem 1.25rem !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow .itinerary-builder-section button.bg-emerald-600 {
+  background: var(--booking-emerald-600) !important;
+  color: #fff !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow .itinerary-builder-section button.bg-stone-100 {
+  background: var(--light-orange-background-dark) !important;
+  color: var(--booking-stone-700) !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow .itinerary-builder-section button.bg-stone-100:hover {
+  background: var(--light-orange-background) !important;
+}
+.booking-flow-preflight .private-shuttle-booking-flow .itinerary-builder-section textarea {
+  padding: 0.875rem 1.25rem !important;
+  border-radius: 0.5rem !important;
+  border: 1px solid var(--booking-stone-300) !important;
+}
+
+/* ========== Most popular tag - Poppins, lowercase, bigger, higher position ========== */
+.booking-flow-preflight [class*="PickupTimeSelector_badge"],
+.booking-flow-preflight [class*="ReturnTimeSelector_badge"] {
+  font-family: 'Poppins', sans-serif !important;
+  font-size: 0.75rem !important;
+  text-transform: lowercase !important;
+  padding: 0.25rem 0.5rem !important;
+  top: -0.75rem !important;
+}
+
+/* ========== Cancellation policy - more padding ========== */
+.booking-flow-preflight [class*="CancellationPolicySelector_list"] {
+  gap: 0.75rem !important;
+}
+.booking-flow-preflight [class*="CancellationPolicySelector_btn"] {
+  padding: 1rem 1.25rem !important;
+  border: 2px solid !important;
+  border-radius: 0.5rem !important;
+  background: #fff !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+.booking-flow-preflight [class*="CancellationPolicySelector_btnSelected"] {
+  border-color: var(--booking-emerald-500, #10b981) !important;
+  background: var(--booking-emerald-50, #ecfdf5) !important;
+}
+.booking-flow-preflight [class*="CancellationPolicySelector_btnDefault"] {
+  border-color: var(--booking-stone-200, #e7e5e4) !important;
+}
+
+/* ========== Ticket +/- buttons - round ========== */
+.booking-flow-preflight [class*="TicketSelector_qtyBtnDecrement"],
+.booking-flow-preflight [class*="TicketSelector_qtyBtnIncrement"] {
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+  border-radius: 9999px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* ========== Deposit notice - keep text small (preflight can inherit large sizes) ========== */
+.booking-flow-preflight .deposit-notice,
+.booking-flow-preflight .deposit-notice p {
+  font-size: 0.75rem !important;
+}
+
+/* ========== Receipt horizontal lines - preflight sets border-width: 0, restore separators ========== */
+.booking-flow-preflight .border-t {
+  border-top-width: 1px !important;
+}
+.booking-flow-preflight .border-b {
+  border-bottom-width: 1px !important;
+}
+
+/* ========== Input fields - padding ========== */
+.booking-flow-preflight [class*="CheckoutForm_input"] {
+  padding: 0.875rem 1.25rem !important;
+}
+.booking-flow-preflight [class*="PromoCodeInput_input"] {
+  padding: 0.375rem 3.5rem 0.375rem 0.5rem !important;
+}
+/* PrivateShuttleBookingFlow inputs - preflight resets padding (exclude passengerSelect, has its own) */
+.booking-flow-preflight [class*="PrivateShuttleBookingFlow_input"]:not([class*="passengerSelect"]) {
+  padding: 0.875rem 1.25rem !important;
+}
+.booking-flow-preflight [class*="PrivateShuttleBookingFlow_inputTime"] {
+  padding: 0.5rem 0.75rem !important;
+}
+
+/* ========== Complete payment button - normal proportions ========== */
+.booking-flow-preflight [class*="CheckoutForm_submitBtn"] {
+  padding: 1rem 1.5rem !important;
+  min-height: 3.25rem !important;
+}
+
+/* ========== Loading spinner (preflight sets border-width: 0, so we need explicit overrides) ========== */
+.booking-flow-root .booking-loading-spinner {
+  width: 2rem !important;
+  height: 2rem !important;
+  border-radius: 9999px !important;
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: transparent !important;
+  border-top-color: var(--booking-emerald-600) !important;
+  animation: booking-spin 0.75s linear infinite !important;
+}
+
+/* Change booking dialog current-booking summary text sizing */
+.booking-flow-root .change-booking-current-summary-title {
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
+}
+
+.booking-flow-root .change-booking-current-summary-details,
+.booking-flow-root .change-booking-current-summary-detail-row {
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
+}
+
+/* Calendar dropdown spinner - portaled to body so needs global styles (not scoped to .booking-flow-root) */
+.booking-calendar-dropdown-spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  border-top-color: var(--booking-emerald-600, #059669);
+  animation: booking-spin 0.75s linear infinite;
+}
+
+@keyframes booking-spin {
+  to { transform: rotate(360deg); }
+}