@wix/agent-skills 1.8.0 → 1.9.0

package/skills/wix-headless/references/astro/templates/bookings/bookingDriver.ts

@@ -0,0 +1,245 @@
+// bookingDriver.ts — the booking sequence in plain @wix SDK calls.
+// Framework-agnostic: no React, no signals, no UI. Any framework's booking step
+// imports book()/navigateToCheckout() and drives them; APPOINTMENT and CLASS
+// share the same sequence.
+//
+// Mechanism = ecom Cart V2 on every path: createBooking leaves the booking
+// CREATED, then the cart holds the seat — a paid service hands off to the
+// Wix-hosted checkout, a free / pay-in-person service places the order directly.
+//
+// On @wix/astro the SDK calls run ambiently (the visitor client is provided by
+// @wix/essentials, like the ecom CartView island) — no createClient/OAuthStrategy
+// needed. On an own/own-build SPA, acquire a visitor client with
+// createClient({ modules, auth: OAuthStrategy({ clientId }) }) and call the same
+// functions through it. Keep the SDK calls, payload shapes, and the sequence;
+// adapt only brand copy/styling in the UI that drives this module.
+
+import { bookings } from "@wix/bookings";
+import { createCart, calculateCart, placeOrder } from "@wix/auto_sdk_ecom_cart-v-2";
+import { redirects } from "@wix/redirects";
+
+// ── Constants (C:src/services/constants.ts) ────────────────────────────────
+export const BOOKING_APP_ID = "13d21c63-b5ec-5912-8397-c3a5ddb27a97";
+export const STAFF_MEMBER_RESOURCE_TYPE_ID = "1cd44cf8-756f-41c3-bd90-3e2ffcaf1155";
+
+// ── Types ───────────────────────────────────────────────────────────────────
+// FormValues = the submitted booking-form values, keyed by each field's `target`
+// (NOT hardcoded field names). The default booking form's targets are snake_case
+// `first_name`/`last_name`/`email`/`phone`; read them from the form schema and key
+// the values by `target` — never hardcode the keys here.
+export type FormValues = Record<string, unknown>;
+
+export interface SelectedSlot {
+  serviceType: "APPOINTMENT" | "CLASS";
+  serviceId: string;
+  localStartDate: string; // local "YYYY-MM-DDTHH:mm:ss" (NOT UTC) — maps to slot.startDate
+  localEndDate: string; //   "                            " → slot.endDate
+  timezone: string;
+  // APPOINTMENT:
+  scheduleId?: string;
+  locationId?: string; // from slot.location._id  (the id field is `_id`, not `.id`)
+  locationType?: string; // "BUSINESS" | "CUSTOMER" | "CUSTOM"
+  // CLASS:
+  eventId?: string;
+  // Resource chosen on the slot (flow 5). When absent the driver emits the
+  // ANY_RESOURCE fallback so Wix auto-assigns a bookable staff member.
+  resource?: { _id: string; name?: string };
+}
+
+export interface BookParams {
+  service: any; // the @wix/bookings Service (read payment.options + bookingPolicy)
+  slot: SelectedSlot;
+  formSubmission: FormValues; // values from the @wix/forms Form, keyed by target
+  timezone: string;
+  totalParticipants?: number;
+  /** consumer override; when omitted, derived from service.payment.options */
+  selectedPaymentOption?: "ONLINE" | "OFFLINE";
+}
+
+export const BookResultType = {
+  CheckoutRequired: "checkout_required",
+  CheckoutSkipped: "checkout_skipped",
+} as const;
+export type BookResult =
+  | { type: typeof BookResultType.CheckoutRequired; cartId: string }
+  | { type: typeof BookResultType.CheckoutSkipped; orderId: string };
+
+// ── Payment derivation ───────────────────────────────────────────────────────
+function deriveSelectedPaymentOption(service: any): "ONLINE" | "OFFLINE" {
+  const options = service?.payment?.options;
+  if (options?.online && !options?.inPerson) return "ONLINE";
+  if (!options?.online && options?.inPerson) return "OFFLINE";
+  return "ONLINE"; // both / neither → ONLINE (consumer override wins, see below)
+}
+
+// LocationType maps from the availability slot's type → the booking endpoint enum.
+function mapLocationType(slotType?: string): string {
+  switch (slotType) {
+    case "BUSINESS":
+      return "OWNER_BUSINESS";
+    case "CUSTOMER":
+      return "CUSTOM";
+    case "CUSTOM":
+      return "OWNER_CUSTOM";
+    default:
+      return "OWNER_BUSINESS";
+  }
+}
+
+// ── buildBookingRequest ───────────────────────────────────────────────────────
+function buildBookingRequest(params: BookParams) {
+  const { service, slot, formSubmission, timezone } = params;
+  const resource = slot.resource; // prefer the slot's chosen resource when present
+
+  return {
+    booking: {
+      // Consumer override wins over the service-config heuristic.
+      selectedPaymentOption:
+        params.selectedPaymentOption ?? deriveSelectedPaymentOption(service),
+      totalParticipants: params.totalParticipants || 1,
+      bookedEntity: {
+        slot: {
+          serviceId: slot.serviceId,
+          // APPOINTMENT carries scheduleId; CLASS carries eventId (Wix derives the rest).
+          scheduleId: slot.scheduleId ?? undefined,
+          startDate: slot.localStartDate,
+          endDate: slot.localEndDate,
+          timezone,
+          eventId: slot.eventId ?? undefined,
+          // Resource: use the chosen one, else the ANY_RESOURCE fallback so Wix
+          // auto-assigns a bookable staff member. Appointment availability slots
+          // return availableResources:[] yet book fine via ANY_RESOURCE.
+          ...(resource
+            ? { resource: { _id: resource._id, name: resource.name } }
+            : {
+                resourceSelections: [
+                  {
+                    resourceTypeId: STAFF_MEMBER_RESOURCE_TYPE_ID,
+                    selectionMethod: "ANY_RESOURCE",
+                  },
+                ],
+              }),
+          location:
+            slot.locationId || slot.locationType
+              ? {
+                  ...(slot.locationId ? { _id: slot.locationId } : {}),
+                  locationType: mapLocationType(slot.locationType),
+                }
+              : { locationType: "OWNER_BUSINESS" },
+        },
+      },
+    },
+    participantNotification: {
+      metadata: { channels: "EMAIL,SMS" },
+      notifyParticipants: true,
+    },
+    sendSmsReminder: true,
+    formSubmission,
+  };
+}
+
+// ── buildCartRequest ──────────────────────────────────────────────────────────
+function buildCartRequest(args: {
+  bookingIds: string[];
+  contactDetails?: any;
+  businessLocationId?: string | null;
+}) {
+  const cart: any = { source: { channelType: "WEB" } };
+  if (args.businessLocationId)
+    cart.businessInfo = { locationId: args.businessLocationId };
+  if (args.contactDetails) {
+    cart.customerInfo = args.contactDetails.email
+      ? { email: args.contactDetails.email }
+      : {};
+    if (args.contactDetails.fullAddress?.country) {
+      cart.deliveryInfo = { address: { ...args.contactDetails.fullAddress } };
+      cart.paymentInfo = {
+        billingAddress: { ...args.contactDetails.fullAddress },
+      };
+    }
+  }
+  return {
+    catalogItems: args.bookingIds.map((id) => ({
+      quantity: 1,
+      catalogReference: { catalogItemId: id, appId: BOOKING_APP_ID },
+    })),
+    cart,
+  };
+}
+
+// ── isCheckoutRequired ────────────────────────────────────────────────────────
+function isCheckoutRequired(cart: any, summary: any, service: any): boolean {
+  if (service?.bookingPolicy?.cancellationFeePolicy?.enabled) return true;
+  const total = Number(summary?.priceSummary?.total?.amount ?? 0);
+  if (total === 0) return false;
+  if (cart?.lineItems?.[0]?.paymentConfig?.paymentOption === "FULL_PAYMENT_OFFLINE")
+    return false;
+  return true;
+}
+
+// ── canBook ───────────────────────────────────────────────────────────────────
+function canBook(params: BookParams): boolean {
+  const slotOk =
+    !!params.slot &&
+    !!params.slot.localStartDate &&
+    (params.slot.serviceType === "CLASS"
+      ? !!params.slot.eventId
+      : !!params.slot.scheduleId);
+  return slotOk && params.formSubmission != null;
+}
+
+// ── book — the full sequence ──────────────────────────────────────────────────
+export async function book(params: BookParams): Promise<BookResult> {
+  if (!canBook(params))
+    throw new Error("Cannot book: missing slot or form submission");
+
+  // 1. createBooking → CREATED (the cart holds the seat)
+  const req = buildBookingRequest(params);
+  const created = await bookings.createBooking(req.booking as any, {
+    participantNotification: req.participantNotification,
+    sendSmsReminder: req.sendSmsReminder,
+    formSubmission: req.formSubmission as any,
+  });
+  const bookingId = created?.booking?._id;
+  if (!bookingId) throw new Error("Failed to create booking");
+  const contactDetails = created?.booking?.contactDetails;
+
+  // 2. createCart — one catalog item per booking id (channel WEB, bookings appId)
+  const businessLocationId = params.slot.locationId ?? undefined;
+  const cart = await createCart(
+    buildCartRequest({ bookingIds: [bookingId], contactDetails, businessLocationId }),
+  );
+  const cartId = cart?._id;
+  if (!cartId) throw new Error("Failed to create cart");
+
+  // 3. calculateCart → totals (not stored on the Cart V2 entity)
+  const { cart: calculatedCart, summary } = await calculateCart(cartId);
+  if (!calculatedCart || !summary) throw new Error("Failed to calculate cart");
+
+  // 4. checkout required? → redirect (paid) ; else placeOrder (free/offline)
+  if (isCheckoutRequired(calculatedCart, summary, params.service)) {
+    return { type: BookResultType.CheckoutRequired, cartId };
+  }
+  const order = await placeOrder(cartId);
+  const orderId = order?.orderId;
+  if (!orderId) throw new Error("Failed to place order");
+  return { type: BookResultType.CheckoutSkipped, orderId };
+}
+
+// ── navigateToCheckout ────────────────────────────────────────────────────────
+// Paid services: hand the cart to the Wix-hosted ecom checkout. Same shape on
+// every path — ecomCheckout.checkoutId = the cartId.
+export async function navigateToCheckout(
+  cartId: string,
+  postFlowUrl: string,
+): Promise<void> {
+  const { redirectSession } = await redirects.createRedirectSession({
+    ecomCheckout: { checkoutId: cartId },
+    callbacks: { postFlowUrl },
+  });
+  if (redirectSession?.fullUrl) {
+    window.location.href = redirectSession.fullUrl;
+  } else {
+    throw new Error("Failed to create redirect session");
+  }
+}

package/skills/wix-headless/references/astro/templates/bookings/components-bookings.css

@@ -1,39 +1,23 @@
 /* src/styles/components-bookings.css
  *
- * Bookings-pack component CSS. Pre-copied by the orchestrator at Step 4.5
- * before Phase 3 Components dispatches. Do NOT write or modify this file
- * from a Phase 3 or Phase 4 subagent — it is already on disk.
+ * Bookings-pack component CSS. Pre-copied by the orchestrator before the build
+ * wave (it is brand-agnostic var(--token) CSS). The designer's global.css does
+ * NOT publish these classes — they live here. See references/shared/STYLING.md
+ * § "Component-specific CSS is owned by the component, not the designer".
  *
- * This file is the SINGLE source of truth for bookings-component classes.
- * The designer's global.css does NOT publish .service-card, .service-grid,
- * .availability-calendar, .time-slot, or .booking-form — those all live
- * here. See references/shared/STYLING.md § "Component-specific CSS is
- * owned by the component, not the designer".
+ * Class groups:
+ * - .service-card / .service-grid / .service-card-*  → ServiceCard.astro, services/index.astro
+ * - .availability-* / .time-slot*                    → AvailabilityCalendar.tsx (week calendar + slots)
+ * - .booking-*                                        → BookingForm.tsx (schema-driven form)
  *
- * Class groups in this file:
- * - .service-card / .service-grid / .service-card-* → ServiceCard.astro,
- *   services/index.astro, index.astro home teaser
- * - .availability-calendar / .time-slot / .time-slot-* / .availability-*
- *   → AvailabilityCalendar.tsx date picker + slot grid
- * - .booking-form / .booking-field / .booking-* → BookingForm.tsx
- *   details form + submit button
+ * Primary actions (a selected slot, the confirm button) use var(--color-accent)
+ * so the flow matches the site's primary-action styling.
  *
- * Rules use direct CSS (`var(--token)`) only — no `@apply`. Tailwind v4
- * `@apply` in a non-entrypoint file only resolves utilities whose theme keys
- * the designer's `@theme` block declares. Direct `var(--color-ink)` /
- * `var(--spacing-sm)` calls work against any designer-published token set as
- * long as the core scales exist (they always do). Use fallback chains
- * (`var(--color-paper-warm, var(--color-paper, var(--color-cream)))`) for
- * sometimes-published tokens.
+ * Direct var(--token) only (no @apply). Fallback chains for sometimes-published
+ * tokens, e.g. var(--color-paper-warm, var(--color-paper, var(--color-cream))).
  */
 
-/* =========================================================================
-   Service grid + card — owned here, NOT in global.css.
-   .service-card uses overflow: hidden + border-radius, so inner padding
-   is the responsibility of THIS file (whoever sets the radius owns the
-   inset). The image is clipped by the card's overflow; content needs
-   padding-inline so text doesn't sit flush against the rounded edge.
-   ========================================================================= */
+/* ── Service grid + card ────────────────────────────────────────────────────── */
 .service-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -75,9 +59,6 @@ body[data-navigating="true"] .service-grid {
   object-fit: cover;
   transition: transform 600ms ease;
 }
-.service-card-image--placeholder {
-  /* fallback when no image is provided */
-}
 
 .service-card-meta {
   display: flex;
@@ -86,7 +67,6 @@ body[data-navigating="true"] .service-grid {
   padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
   flex: 1;
 }
-
 .service-card-name {
   margin: 0;
   font-family: var(--font-display);
@@ -94,7 +74,6 @@ body[data-navigating="true"] .service-grid {
   line-height: 1.25;
   color: var(--color-ink);
 }
-
 .service-card-tagline {
   margin: 0;
   font-family: var(--font-body);
@@ -102,7 +81,6 @@ body[data-navigating="true"] .service-grid {
   color: var(--color-ink-soft, var(--color-mute));
   line-height: 1.45;
 }
-
 .service-card-price {
   display: flex;
   align-items: center;
@@ -119,17 +97,14 @@ body[data-navigating="true"] .service-grid {
   color: var(--color-rule);
 }
 
-/* =========================================================================
-   Availability calendar — date navigator + slot grid.
-   Owned here, NOT in global.css.
-   ========================================================================= */
+/* ── Availability — week calendar ───────────────────────────────────────────── */
 .availability-calendar {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
 }
 
-.availability-date-nav {
+.availability-week-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -137,8 +112,7 @@ body[data-navigating="true"] .service-grid {
   padding: var(--spacing-sm) 0;
   border-bottom: 1px solid var(--color-rule);
 }
-
-.availability-date-label {
+.availability-week-label {
   font-family: var(--font-display);
   font-size: 1rem;
   color: var(--color-ink);
@@ -166,12 +140,57 @@ body[data-navigating="true"] .service-grid {
   cursor: not-allowed;
 }
 
-.availability-slots {
+/* The 7-day strip. */
+.availability-day-strip {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-template-columns: repeat(7, 1fr);
   gap: var(--spacing-sm);
 }
+.availability-day {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: var(--spacing-sm) 0;
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-sm);
+  background: var(--color-paper, var(--color-cream));
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
+}
+.availability-day-name {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-mute);
+}
+.availability-day-num {
+  font-size: 1rem;
+  font-weight: 600;
+}
+.availability-day--has-slots:hover {
+  border-color: var(--color-accent);
+}
+.availability-day--empty {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.availability-day--selected {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-paper);
+}
+.availability-day--selected .availability-day-name {
+  color: var(--color-paper);
+}
 
+.availability-slots {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: var(--spacing-sm);
+}
 .availability-loading,
 .availability-empty,
 .availability-error {
@@ -181,14 +200,17 @@ body[data-navigating="true"] .service-grid {
   padding: var(--spacing-lg) 0;
   text-align: center;
 }
+.availability-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-md);
+}
 .availability-error {
   color: var(--color-error, var(--color-accent));
 }
 
-/* =========================================================================
-   Time slot buttons — individual slot items in the grid.
-   Three states: available (default), selected, unavailable.
-   ========================================================================= */
+/* ── Time-slot buttons ──────────────────────────────────────────────────────── */
 .time-slot {
   padding: var(--spacing-sm) var(--spacing-md);
   border: 1px solid var(--color-rule);
@@ -201,29 +223,25 @@ body[data-navigating="true"] .service-grid {
   cursor: pointer;
   transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
 }
+.time-slot-time {
+  font-weight: 500;
+}
 .time-slot--available {
   border-color: var(--color-ink);
 }
 .time-slot--available:hover {
-  background: var(--color-ink);
+  background: var(--color-accent);
+  border-color: var(--color-accent);
   color: var(--color-paper);
 }
 .time-slot--selected {
-  background: var(--color-ink);
+  background: var(--color-accent);
+  border-color: var(--color-accent);
   color: var(--color-paper);
-  border-color: var(--color-ink);
   font-weight: 600;
 }
-.time-slot--unavailable {
-  opacity: 0.3;
-  cursor: not-allowed;
-  border-color: var(--color-rule);
-}
 
-/* =========================================================================
-   Booking form — rendered after a slot is selected.
-   Owned here, NOT in global.css.
-   ========================================================================= */
+/* ── Booking form (schema-driven) ───────────────────────────────────────────── */
 .booking-form {
   display: flex;
   flex-direction: column;
@@ -234,22 +252,37 @@ body[data-navigating="true"] .service-grid {
   background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
 }
 
-.booking-form-header {
+.booking-form-summary {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-rule);
 }
-.booking-form-title {
+.booking-form-summary strong {
   font-family: var(--font-display);
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   color: var(--color-ink);
-  margin: 0;
 }
-.booking-form-subtitle {
+.booking-form-summary span {
   font-family: var(--font-body);
-  font-size: 0.875rem;
+  font-size: 0.9375rem;
   color: var(--color-ink-soft, var(--color-mute));
-  margin: 0;
+}
+.booking-form-change {
+  align-self: flex-start;
+  margin-top: var(--spacing-xs);
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  color: var(--color-mute);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.booking-form-change:hover {
+  color: var(--color-ink);
 }
 
 .booking-field {
@@ -257,17 +290,6 @@ body[data-navigating="true"] .service-grid {
   flex-direction: column;
   gap: var(--spacing-xs);
 }
-.booking-field-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-md);
-}
-@media (max-width: 480px) {
-  .booking-field-row {
-    grid-template-columns: 1fr;
-  }
-}
-
 .booking-label {
   font-family: var(--font-display);
   font-size: 0.75rem;
@@ -275,13 +297,11 @@ body[data-navigating="true"] .service-grid {
   letter-spacing: 0.05em;
   color: var(--color-ink-soft, var(--color-mute));
 }
-.booking-label--required::after {
-  content: " *";
+.booking-required {
   color: var(--color-accent);
 }
 
-.booking-input,
-.booking-textarea {
+.booking-input {
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
   font-family: var(--font-body);
@@ -293,121 +313,44 @@ body[data-navigating="true"] .service-grid {
   transition: border-color 150ms ease;
   box-sizing: border-box;
 }
-.booking-input:focus,
-.booking-textarea:focus {
+.booking-input:focus {
   outline: none;
-  border-color: var(--color-ink);
+  border-color: var(--color-accent);
 }
-.booking-textarea {
+textarea.booking-input {
   resize: vertical;
   min-height: 6rem;
 }
 
-.booking-submit {
+.booking-error {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-error, var(--color-accent));
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-error, var(--color-accent));
+  border-radius: var(--radius-sm);
+}
+
+.booking-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   padding: var(--spacing-md) var(--spacing-xl);
   font-family: var(--font-display);
   font-size: 0.9375rem;
   font-weight: 500;
-  background: var(--color-ink);
+  background: var(--color-accent);
   color: var(--color-paper);
-  border: 1px solid var(--color-ink);
+  border: 1px solid var(--color-accent);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  width: 100%;
-  margin-top: var(--spacing-sm);
-  transition: background-color 150ms ease, box-shadow 150ms ease;
+  transition: opacity 150ms ease;
 }
-.booking-submit:hover:not(:disabled) {
-  background: var(--color-ink-soft, var(--color-ink));
+.booking-cta:hover:not(:disabled) {
+  opacity: 0.9;
 }
-.booking-submit:disabled {
+.booking-cta:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
-.booking-cancel {
-  display: block;
-  text-align: center;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-mute);
-  cursor: pointer;
-  background: none;
-  border: none;
-  text-decoration: underline;
-  padding: 0;
-  margin-top: var(--spacing-xs);
-}
-.booking-cancel:hover {
-  color: var(--color-ink);
-}
-
-.booking-error {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-error, var(--color-accent));
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: 1px solid var(--color-error, var(--color-accent));
-  border-radius: var(--radius-sm);
-  background: rgba(255, 0, 0, 0.04);
-}
-
-/* ── Slot capacity (CLASS) + full→waitlist ─────────────────────────────────── */
-.time-slot {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  line-height: 1.2;
-}
-.time-slot-time {
-  font-weight: 500;
-}
-.time-slot-capacity {
-  font-size: 0.7rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--color-mute, var(--color-secondary));
-}
-.time-slot--full {
-  opacity: 0.85;
-  border-style: dashed;
-}
-.time-slot--full .time-slot-capacity {
-  color: var(--color-accent);
-}
-.booking-form-note {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-mute, var(--color-secondary));
-  margin-top: var(--spacing-xs);
-}
-
-/* ── Manage booking page ─────────────────────────────────────────────────────── */
-.manage-booking {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  align-items: flex-start;
-}
-.manage-booking-summary,
-.manage-booking-status {
-  font-family: var(--font-body);
-  font-size: 1.05rem;
-  color: var(--color-ink, var(--color-primary));
-}
-.manage-booking-note {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-mute, var(--color-secondary));
-}
-.manage-booking-link {
-  color: var(--color-ink, var(--color-primary));
-  text-decoration: underline;
-}
-.manage-booking-link:hover {
-  color: var(--color-accent);
-}