@ticketboothapp/booking 1.2.190 → 1.2.191

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.190",
+  "version": "1.2.191",
   "private": false,
   "sideEffects": [
     "**/*.css",
@@ -12,6 +12,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./background-video": "./src/components/BackgroundVideo.tsx",
+    "./terms-content": "./src/components/booking/DefaultTermsContent.tsx",
     "./booking-flow.css": "./src/components/booking/booking-flow.css",
     "./runtime": "./src/runtime/index.ts",
     "./contexts/booking-app-context": "./src/contexts/BookingAppContext.tsx",
@@ -21,6 +22,7 @@
     "./hooks/useBookingSourceMetadataFromLocation": "./src/hooks/useBookingSourceMetadataFromLocation.ts",
     "./hooks/useIsBookingLaunchLive": "./src/hooks/useIsBookingLaunchLive.ts",
     "./hooks/usePlacesAutocompleteSearch": "./src/hooks/usePlacesAutocompleteSearch.ts",
+    "./pickup-location-disclaimer": "./src/lib/booking/pickup-location-disclaimer.ts",
     "./viavia/catalog": "./src/constants/products.ts",
     "./viavia/images": "./src/constants/images.ts",
     "./viavia/product-descriptions": "./src/lib/product-descriptions.ts",

package/src/components/BackgroundVideo.tsx

@@ -20,6 +20,7 @@ export interface BackgroundVideoProps
   poster?: string;
   preload?: 'auto' | 'metadata' | 'none';
   loading?: BackgroundVideoLoading;
+  viewportMargin?: string;
   className?: string;
   style?: CSSProperties;
 }
@@ -41,6 +42,7 @@ export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps
       poster,
       preload,
       loading = 'viewport',
+      viewportMargin = '300px 0px',
       className,
       style,
       autoPlay = true,
@@ -80,11 +82,11 @@ export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps
           if (entry.isIntersecting) setShouldLoad(true);
           setShouldPlay(entry.isIntersecting);
         },
-        { rootMargin: '300px 0px' },
+        { rootMargin: viewportMargin },
       );
       observer.observe(container);
       return () => observer.disconnect();
-    }, [loading]);
+    }, [loading, viewportMargin]);
 
     useEffect(() => {
       const video = videoRef.current;
@@ -100,6 +102,7 @@ export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps
         style={{ width: '100%', height: '100%', display: 'grid', ...style }}
       >
         <video
+          key={shouldLoad ? `${webm ?? ''}|${src}` : 'deferred'}
           {...videoProps}
           ref={setVideoRef}
           className="next-video-bg-video"
@@ -107,7 +110,7 @@ export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps
           muted={muted}
           loop={loop}
           playsInline={playsInline}
-          poster={poster}
+          poster={shouldLoad ? poster : undefined}
           preload={shouldLoad ? (preload ?? (loading === 'eager' ? 'auto' : 'metadata')) : 'none'}
           style={{
             gridArea: '1 / 1',

package/src/components/booking/AddOnsSection.module.css

@@ -1,7 +1,7 @@
 .section {
   padding-top: 1.5rem;
   margin-top: 1.5rem;
-  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
+  border-top: 1px solid var(--booking-stone-200, #e7e5e4) !important;
 }
 
 .items {
@@ -79,6 +79,10 @@
   gap: 0.5rem;
 }
 
+.quantityButton {
+  border: 1px solid var(--booking-stone-300, #d6d3d1) !important;
+}
+
 .optionDescription {
   grid-column: 1;
   grid-row: 2;
@@ -97,7 +101,7 @@
   gap: 0.25rem 0.75rem;
   width: 100%;
   padding: 0.75rem;
-  border-width: 2px;
+  border-width: 2px !important;
   border-radius: 0.5rem;
   text-align: left;
   transition: border-color 0.2s, background-color 0.2s;

package/src/components/booking/AddOnsSection.tsx

@@ -94,7 +94,7 @@ export function AddOnsSection({
                         });
                       }}
                       disabled={!canDecrement}
-                      className="h-8 w-8 rounded-full border border-stone-300 bg-white text-sm text-stone-600 hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50"
+                      className={`${styles.quantityButton} h-8 w-8 rounded-full bg-white text-sm text-stone-600 hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50`}
                     >
                       −
                     </button>
@@ -107,7 +107,7 @@ export function AddOnsSection({
                           return [...rest, { addOnId: addOn.addOnId, quantity: quantity + 1 }];
                         });
                       }}
-                      className="h-8 w-8 rounded-full border border-stone-300 bg-white text-sm text-stone-600 hover:bg-stone-50"
+                      className={`${styles.quantityButton} h-8 w-8 rounded-full bg-white text-sm text-stone-600 hover:bg-stone-50`}
                     >
                       +
                     </button>
@@ -186,7 +186,7 @@ export function AddOnsSection({
                               });
                             }}
                             disabled={!canDecrement}
-                            className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                            className={`${styles.quantityButton} h-8 w-8 rounded-full bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm`}
                           >
                             −
                           </button>
@@ -208,7 +208,7 @@ export function AddOnsSection({
                                 ];
                               });
                             }}
-                            className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 text-sm"
+                            className={`${styles.quantityButton} h-8 w-8 rounded-full bg-white text-stone-600 hover:bg-stone-50 text-sm`}
                           >
                             +
                           </button>

package/src/components/booking/AdminChangeReceiptComparison.module.css

@@ -0,0 +1,16 @@
+@media (max-width: 639px) {
+  .receiptTitle {
+    font-size: 0.875rem !important;
+    line-height: 1.25rem !important;
+  }
+
+  .amountDueLabel {
+    font-size: 0.875rem !important;
+    line-height: 1.25rem !important;
+  }
+
+  .amountDueValue {
+    font-size: 1rem !important;
+    line-height: 1.25rem !important;
+  }
+}

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -9,6 +9,7 @@ import type { Locale } from '../../lib/booking/i18n/config';
 import type { ChangeBookingFlowProps } from './booking-flow-types';
 import type { Currency } from './CurrencySwitcher';
 import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
+import styles from './AdminChangeReceiptComparison.module.css';
 import { collapseAdminPromoLines } from './admin-change-receipt-lines';
 import type { AdminCustomReceiptLine } from './useAdminCustomReceiptLines';
 import {
@@ -74,6 +75,8 @@ export interface AdminChangeReceiptComparisonProps {
   }) => void;
   preserveExistingReceipt?: boolean;
   onPreserveExistingReceiptChange?: (preserve: boolean) => void;
+  /** Use denser, wrapping receipt typography in the public mobile change flow. */
+  compactMobile?: boolean;
 }
 
 function normalizeLocale(locale: string): Locale {
@@ -132,6 +135,7 @@ export function AdminChangeReceiptComparison({
   onSetReceiptLineOverride,
   preserveExistingReceipt = false,
   onPreserveExistingReceiptChange,
+  compactMobile = false,
 }: AdminChangeReceiptComparisonProps) {
   const [overrideDrafts, setOverrideDrafts] = useState<Record<string, string>>({});
   useEffect(() => {
@@ -344,7 +348,9 @@ export function AdminChangeReceiptComparison({
       <div className="grid gap-4 md:grid-cols-2">
         <section className="min-w-0 overflow-visible rounded-lg border border-stone-200 bg-stone-50/70 p-3">
           <div className="mb-3 flex items-center justify-between gap-3">
-            <h3 className="text-sm font-semibold text-stone-900">Existing purchase</h3>
+            <h3 className={`${compactMobile ? styles.receiptTitle : ''} text-sm font-semibold text-stone-900`}>
+              Existing purchase
+            </h3>
             <span className="shrink-0 text-xs font-medium text-stone-500">
               {formatCurrencyAmount(originalReceipt.total, originalCurrency, displayLocale)}
             </span>
@@ -358,6 +364,7 @@ export function AdminChangeReceiptComparison({
             taxAmount={hasTaxLine(existingLines) ? 0 : originalReceipt.tax}
             taxRate={taxRate}
             size="sm"
+            compactMobileTotal={compactMobile}
             t={t}
           />
         </section>
@@ -365,7 +372,7 @@ export function AdminChangeReceiptComparison({
         <section className="min-w-0 overflow-visible rounded-lg border border-sky-200 bg-sky-50/50 p-3">
           <div className="mb-3">
             <div>
-              <h3 className="text-sm font-semibold text-stone-900">
+              <h3 className={`${compactMobile ? styles.receiptTitle : ''} text-sm font-semibold text-stone-900`}>
                 {isProductFamilyConversion ? 'New purchase' : 'Current change'}
               </h3>
               {isProductFamilyConversion ? (
@@ -436,6 +443,7 @@ export function AdminChangeReceiptComparison({
                 locale={displayLocale}
                 subtotal={summarySubtotal}
                 size="sm"
+                compactMobileTotal={compactMobile}
                 t={t}
                 lineAmountInputs={preserveExistingReceipt ? undefined : { ...quotedOverrideAmountInputs, ...overrideDrafts }}
                 onLineAmountInputChange={preserveExistingReceipt ? undefined : handleOverrideChange}
@@ -538,8 +546,10 @@ export function AdminChangeReceiptComparison({
       ) : null}
 
       <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-stone-200 bg-stone-50 px-3 py-2">
-        <span className="text-sm font-semibold text-stone-900">{amountDueLabel}</span>
-        <span className={`text-lg font-semibold tabular-nums ${amountDueClass}`}>
+        <span className={`${compactMobile ? styles.amountDueLabel : ''} text-sm font-semibold text-stone-900`}>
+          {amountDueLabel}
+        </span>
+        <span className={`${compactMobile ? styles.amountDueValue : ''} text-lg font-semibold tabular-nums ${amountDueClass}`}>
           {!selectionChanged || displayedSettlementAmount == null
             ? '—'
             : formatCurrencyAmount(displayedSettlementAmount, currency, displayLocale)}

package/src/components/booking/BookingDialog.module.css

@@ -109,6 +109,49 @@
   padding: 1.25rem;
 }
 
+.bookingCompareSticky {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  margin-bottom: 0.75rem;
+  width: 100%;
+  border-radius: 1rem;
+  padding: 0.5rem 0;
+  background: var(--light-orange-background);
+}
+
+.mobileCompareDigestContainer {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .bookingCompareSticky {
+    z-index: 20;
+    max-height: calc(90vh - 4.5rem);
+    max-height: calc(90dvh - 4.5rem);
+    overflow: hidden;
+  }
+
+  .mobileCompareDigestContainer {
+    display: block;
+  }
+
+  .bookingCompareDetails {
+    max-height: calc(90vh - 11rem);
+    max-height: calc(90dvh - 11rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-radius: 0 0 1rem 1rem;
+    padding: 0 0.25rem 0.25rem;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .bookingCompareDetails :global(.booking-change-summary-column) {
+    border-radius: 0 0 0.75rem 0.75rem;
+    background: transparent;
+  }
+}
+
 @media (min-width: 768px) {
   .dialog {
     max-width: 960px;

package/src/components/booking/BookingFlowCollage.tsx

@@ -4,6 +4,7 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { BackgroundVideo } from '../BackgroundVideo';
 import type { VideoSources } from '../../constants/products';
+import type { BackgroundVideoLoading } from '../BackgroundVideo';
 import { resolvePublicAssetUrl, useBookingHost } from '../../runtime';
 import { useTranslations } from '../../lib/booking/i18n';
 import styles from './BookingFlowCollage.module.css';
@@ -17,6 +18,17 @@ export interface BookingFlowCollageProps {
   imageIds: string[];
   /** Alt text prefix for images (e.g. product name) */
   altPrefix?: string;
+  /** Descriptive alt text matching imageIds. Falls back to numbered labels. */
+  imageAlts?: string[];
+  /** Responsive slot widths for the one- and two-column gallery cells. */
+  imageSizes?: {
+    narrow: string;
+    wide: string;
+  };
+  /** Defer loading when the collage appears below the fold. */
+  videoLoading?: BackgroundVideoLoading;
+  /** Browser preload hint once the video is eligible to load. */
+  videoPreload?: 'auto' | 'metadata' | 'none';
 }
 
 const DEFAULT_VIDEO: VideoSources = {
@@ -24,25 +36,36 @@ const DEFAULT_VIDEO: VideoSources = {
   webm: '/videos/via-via-moraine-lake-tour-video.webm',
 };
 
+// The first and fourth cells occupy one grid column; the middle cells occupy
+// two. Accurate slot hints prevent small thumbnails from selecting full-width
+// gallery assets while retaining enough resolution for high-density displays.
+const NARROW_IMAGE_SIZES = '(max-width: 640px) 29vw, 300px';
+const WIDE_IMAGE_SIZES = '(max-width: 640px) 59vw, 560px';
+const DEFAULT_IMAGE_SIZES = {
+  narrow: NARROW_IMAGE_SIZES,
+  wide: WIDE_IMAGE_SIZES,
+};
+
 export function BookingFlowCollage({
   video,
   videoPosterImageId,
   imageIds,
   altPrefix = 'Tour',
+  imageAlts,
+  imageSizes = DEFAULT_IMAGE_SIZES,
+  videoLoading = 'eager',
+  videoPreload = 'auto',
 }: BookingFlowCollageProps) {
   const { catalog, slots, env } = useBookingHost();
   const ViaViaImage = slots.Image;
   const ImageModal = slots.ImageModal;
   const videoSrc = video ?? DEFAULT_VIDEO;
-  // Use long version in BookingFlow when available; fall back to short
-  const videoForCollageRaw =
-    videoSrc.longSrc && videoSrc.longWebm
-      ? { src: videoSrc.longSrc, webm: videoSrc.longWebm }
-      : { src: videoSrc.src, webm: videoSrc.webm };
-  const videoForCollage = {
-    src: resolvePublicAssetUrl(env.STATIC_ASSET_ORIGIN, videoForCollageRaw.src),
-    webm: resolvePublicAssetUrl(env.STATIC_ASSET_ORIGIN, videoForCollageRaw.webm),
-  };
+  // Use the MP4 here because these videos include an audio track, while the
+  // WebM variants are silent background-video encodes.
+  const videoForCollageSrc = resolvePublicAssetUrl(
+    env.STATIC_ASSET_ORIGIN,
+    videoSrc.longSrc ?? videoSrc.src,
+  );
   const posterUrl =
     videoPosterImageId && catalog.getImageUrl
       ? String(catalog.getImageUrl(videoPosterImageId))
@@ -91,10 +114,13 @@ export function BookingFlowCollage({
   const handleToggleMute = useCallback(() => {
     const el = videoRef.current;
     if (!el) return;
-    el.muted = !el.muted;
+    const nextMuted = !el.muted;
+    el.muted = nextMuted;
+    setIsMuted(nextMuted);
   }, []);
 
-  const imageItems = gridImages.map((id, i) => ({ id, alt: `${altPrefix} - ${i + 1}` }));
+  const getAlt = (i: number) => imageAlts?.[i] ?? `${altPrefix} - ${i + 1}`;
+  const imageItems = gridImages.map((id, i) => ({ id, alt: getAlt(i) }));
 
   return (
     <div className={`${styles.collage} ${!hasGridImages ? styles.videoOnly : ''}`}>
@@ -102,11 +128,11 @@ export function BookingFlowCollage({
         <div className={styles.videoWrapper}>
           <BackgroundVideo
             ref={videoRef}
-            {...videoForCollage}
-            loading="eager"
-            preload="auto"
+            src={videoForCollageSrc}
+            loading={videoLoading}
+            preload={videoPreload}
             autoPlay
-            muted
+            muted={isMuted}
             loop
             playsInline
             poster={posterUrl}
@@ -163,8 +189,9 @@ export function BookingFlowCollage({
             >
               <ViaViaImage
                 imageId={id}
-                alt={`${altPrefix} - ${i + 1}`}
+                alt={getAlt(i)}
                 context="GALLERY"
+                sizes={i === 0 || i === 3 ? imageSizes.narrow : imageSizes.wide}
               />
             </button>
           ))}

package/src/components/booking/Calendar.module.css

@@ -375,7 +375,12 @@
   transform: translateX(-50%);
 }
 
-.calendarGrid {
+/*
+ * Keep the frame more specific than the scoped booking preflight
+ * (`.booking-flow-preflight *`), which otherwise wins when its stylesheet is
+ * emitted later and resets the border width to zero on some mobile builds.
+ */
+.calendar .calendarGrid {
   border: 1px solid var(--cal-outer-border);
   border-radius: 0.5rem;
   overflow: hidden;
@@ -395,7 +400,7 @@
   border-bottom: 1px solid var(--cal-header-border);
 }
 
-.calendarHeaderCell {
+.calendar .calendarHeaderCell {
   padding: 0.25rem 0;
   text-align: center;
   font-size: 0.75rem;
@@ -405,7 +410,7 @@
   letter-spacing: 0.05em;
   border-right: 1px solid var(--cal-header-border);
 }
-.calendarHeaderCell:last-child {
+.calendar .calendarHeaderCell:last-child {
   border-right: none;
 }
 

package/src/components/booking/ChangeBookingDialog.tsx

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { getProduct, type Product } from '../../lib/booking-api';
 import { useBookingHost } from '../../runtime';
-import { formatCurrencyAmount, type Currency } from '../../lib/currency';
+import { formatCurrencyAmount, toMoneyCents, type Currency } from '../../lib/currency';
 import { CURRENCIES, DEFAULT_CURRENCY } from './CurrencySwitcher';
 import { ChangeBookingFlow } from './ChangeBookingFlow';
 import { VIAVIA_TICKET_FINE_PRINT_BY_CATEGORY } from './booking-flow-ui';
@@ -18,6 +18,7 @@ import { getItineraryStepLabel } from '../../lib/booking/itinerary-display';
 import { effectiveProductOptionIdForChangeFlow } from '../../lib/booking/product-option-id';
 import {
   BookingChangeSummaryColumn,
+  MobileBookingChangeDigest,
   changeBookingCompareColumnsVisuallyMatch,
   computeItineraryStepChanged,
   formatBookingDateForChangeCompare,
@@ -85,6 +86,7 @@ export default function ChangeBookingDialog({
   const [product, setProduct] = useState<Product | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [newBookingPreview, setNewBookingPreview] = useState<ChangeFlowSelectionPreview | null>(null);
+  const [isMobileCompareExpanded, setIsMobileCompareExpanded] = useState(false);
   const dialogRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
@@ -189,7 +191,10 @@ export default function ChangeBookingDialog({
   }, [isOpen]);
 
   useEffect(() => {
-    if (!isOpen) setNewBookingPreview(null);
+    if (!isOpen) {
+      setNewBookingPreview(null);
+      setIsMobileCompareExpanded(false);
+    }
   }, [isOpen]);
 
   const handleChangeFlowSelectionPreview = useCallback((preview: ChangeFlowSelectionPreview | null) => {
@@ -303,6 +308,35 @@ export default function ChangeBookingDialog({
   const itineraryStepChangedNew = showNewBookingColumn
     ? computeItineraryStepChanged(newItinerarySteps, currentItinerarySteps)
     : undefined;
+  const itineraryChangeCount = showNewBookingColumn
+    ? Math.max(
+        itineraryStepChangedCurrent?.filter(Boolean).length ?? 0,
+        itineraryStepChangedNew?.filter(Boolean).length ?? 0,
+      )
+    : 0;
+  const totalDeltaCents =
+    newBookingPreview?.selectionTotal == null
+      ? null
+      : toMoneyCents(newBookingPreview.selectionTotal) - toMoneyCents(booking.receipt.totalAmount);
+  const priceDeltaDirection =
+    totalDeltaCents == null
+      ? null
+      : totalDeltaCents > 0
+        ? 'increase'
+        : totalDeltaCents < 0
+          ? 'decrease'
+          : 'same';
+  const priceDeltaFormatted =
+    totalDeltaCents == null
+      ? null
+      : totalDeltaCents === 0
+        ? 'No price change'
+        : `${totalDeltaCents > 0 ? '+' : '−'}${formatCurrencyAmount(
+            Math.abs(totalDeltaCents) / 100,
+            receiptCurrency,
+            'en',
+          )}`;
+  const mobileCompareDetailsId = 'mobile-booking-change-details';
 
   return (
     <div ref={overlayRef} className={`${styles.overlay} booking-dialog-overlay`} onClick={onClose}>
@@ -363,63 +397,90 @@ export default function ChangeBookingDialog({
           {product && (
             <div className={`${styles.screen} booking-flow-preflight`}>
               <div
-                className="sticky top-0 z-10 mb-3 flex w-full flex-col gap-0 rounded-2xl py-2 md:flex-row md:items-stretch"
-                style={{ background: 'var(--light-orange-background)' }}
+                className={styles.bookingCompareSticky}
               >
-                <motion.div
-                  layout
-                  transition={{ type: 'spring', stiffness: 380, damping: 34 }}
-                  className={
-                    showNewBookingColumn
-                      ? 'min-w-0 md:flex-1 md:basis-0'
-                      : 'min-w-0 w-full'
-                  }
-                >
-                  <BookingChangeSummaryColumn
-                    highlightVariant="current"
-                    kicker="Current booking"
-                    tourName={tourName}
-                    dateStr={currentDateStr}
-                    ticketsStr={ticketsLine}
-                    itinerarySteps={currentItinerarySteps}
-                    totalFormatted={currentTotalFormatted}
+                <div className={styles.mobileCompareDigestContainer}>
+                  <MobileBookingChangeDigest
+                    expanded={isMobileCompareExpanded}
+                    detailsId={mobileCompareDetailsId}
+                    showChanges={showNewBookingColumn}
+                    currentDate={currentDateStr}
+                    newDate={newDateStr}
+                    currentTickets={ticketsLine}
+                    newTickets={newTicketsStr}
+                    currentTotal={currentTotalFormatted}
+                    newTotal={newTotalFormatted}
                     dateChanged={dateChanged}
                     ticketsChanged={ticketsChanged}
-                    itineraryStepChanged={itineraryStepChangedCurrent}
+                    itineraryChangeCount={itineraryChangeCount}
+                    priceDeltaFormatted={priceDeltaFormatted}
+                    priceDeltaDirection={priceDeltaDirection}
+                    pricePending={showNewBookingColumn && newBookingPreview?.selectionTotal == null}
+                    onToggle={() => setIsMobileCompareExpanded((expanded) => !expanded)}
                   />
-                </motion.div>
-                {showNewBookingColumn ? (
-                  <div
-                    aria-hidden
-                    className="booking-change-compare-divider max-md:my-3 md:my-0"
-                  />
-                ) : null}
-                <AnimatePresence initial={false} mode="popLayout">
-                  {showNewBookingColumn && (
-                    <motion.div
-                      key="new-booking-summary"
-                      layout
-                      initial={{ opacity: 0, x: 16, scale: 0.99 }}
-                      animate={{ opacity: 1, x: 0, scale: 1 }}
-                      exit={{ opacity: 0, x: 16, scale: 0.99 }}
-                      transition={{ type: 'spring', stiffness: 380, damping: 34 }}
-                      className="min-w-0 md:flex-1 md:basis-0"
-                    >
-                      <BookingChangeSummaryColumn
-                        highlightVariant="new"
-                        kicker="New booking"
-                        tourName={tourName}
-                        dateStr={newDateStr}
-                        ticketsStr={newTicketsStr}
-                        itinerarySteps={newItinerarySteps}
-                        totalFormatted={newTotalFormatted}
-                        dateChanged={dateChanged}
-                        ticketsChanged={ticketsChanged}
-                        itineraryStepChanged={itineraryStepChangedNew}
-                      />
-                    </motion.div>
-                  )}
-                </AnimatePresence>
+                </div>
+                <div
+                  id={mobileCompareDetailsId}
+                  className={`${styles.bookingCompareDetails} ${isMobileCompareExpanded ? 'flex' : 'hidden'} w-full flex-col gap-0 md:flex md:flex-row md:items-stretch`}
+                >
+                  <motion.div
+                    layout
+                    transition={{ type: 'spring', stiffness: 380, damping: 34 }}
+                    className={
+                      showNewBookingColumn ? 'min-w-0 md:flex-1 md:basis-0' : 'min-w-0 w-full'
+                    }
+                  >
+                    <BookingChangeSummaryColumn
+                      highlightVariant="current"
+                      kicker="Current booking"
+                      tourName={tourName}
+                      dateStr={currentDateStr}
+                      ticketsStr={ticketsLine}
+                      itinerarySteps={currentItinerarySteps}
+                      totalFormatted={currentTotalFormatted}
+                      dateChanged={dateChanged}
+                      ticketsChanged={ticketsChanged}
+                      itineraryStepChanged={itineraryStepChangedCurrent}
+                      hideKickerOnMobile={!showNewBookingColumn}
+                    />
+                  </motion.div>
+                  {showNewBookingColumn ? (
+                    <div
+                      aria-hidden
+                      className="booking-change-compare-divider max-md:my-3 md:my-0"
+                    />
+                  ) : null}
+                  <AnimatePresence initial={false} mode="popLayout">
+                    {showNewBookingColumn && (
+                      <motion.div
+                        key="new-booking-summary"
+                        layout
+                        initial={{ opacity: 0, x: 16, scale: 0.99 }}
+                        animate={{ opacity: 1, x: 0, scale: 1 }}
+                        exit={{ opacity: 0, x: 16, scale: 0.99 }}
+                        transition={{
+                          type: 'spring',
+                          stiffness: 380,
+                          damping: 34,
+                        }}
+                        className="min-w-0 md:flex-1 md:basis-0"
+                      >
+                        <BookingChangeSummaryColumn
+                          highlightVariant="new"
+                          kicker="New booking"
+                          tourName={tourName}
+                          dateStr={newDateStr}
+                          ticketsStr={newTicketsStr}
+                          itinerarySteps={newItinerarySteps}
+                          totalFormatted={newTotalFormatted}
+                          dateChanged={dateChanged}
+                          ticketsChanged={ticketsChanged}
+                          itineraryStepChanged={itineraryStepChangedNew}
+                        />
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
               </div>
               <ChangeBookingFlow
                 product={product}

package/src/components/booking/ChangeBookingFlow.tsx

@@ -617,6 +617,7 @@ export function ChangeBookingFlow({
       locale={locale}
       t={t}
       taxRate={pricingConfig?.taxRate}
+      compactMobile
     />
   ) : null;