@qite/tide-components 1.0.12 → 1.0.13

package/build/build-cjs/index.js

@@ -94,6 +94,7 @@ var FLIGHTS_FORM$f = {
 	AIRLINES: "شركات الطيران",
 	AIRPORTS: "المطارات",
 	NUMBER_OF_STOPS: "عدد التوقفات",
+	TRAVEL_CLASS: "درجة السفر",
 	FLIGHT_OUTWARD: "رحلة الذهاب",
 	DEPARTURE_TIME: "وقت المغادرة",
 	TRAVEL_DURATION: "مدة السفر",
@@ -547,6 +548,7 @@ var FLIGHTS_FORM$e = {
 	AIRLINES: "Flyselskaber",
 	AIRPORTS: "Lufthavne",
 	NUMBER_OF_STOPS: "Antal stop",
+	TRAVEL_CLASS: "Rejseklasse",
 	FLIGHT_OUTWARD: "Udgående fly",
 	DEPARTURE_TIME: "Afgangstid",
 	TRAVEL_DURATION: "Rejsetid",
@@ -1000,6 +1002,7 @@ var FLIGHTS_FORM$d = {
 	AIRLINES: "Fluggesellschaften",
 	AIRPORTS: "Flughäfen",
 	NUMBER_OF_STOPS: "Anzahl der Stopps",
+	TRAVEL_CLASS: "Reiseklasse",
 	FLIGHT_OUTWARD: "Hinflug",
 	DEPARTURE_TIME: "Abflugzeit",
 	TRAVEL_DURATION: "Reisedauer",
@@ -1453,6 +1456,7 @@ var FLIGHTS_FORM$c = {
 	AIRLINES: "Airlines",
 	AIRPORTS: "Airports",
 	NUMBER_OF_STOPS: "Number of stops",
+	TRAVEL_CLASS: "Travel class",
 	FLIGHT_OUTWARD: "Outbound flight",
 	DEPARTURE_TIME: "Departure time",
 	TRAVEL_DURATION: "Travel duration",
@@ -1910,6 +1914,7 @@ var FLIGHTS_FORM$b = {
 	AIRLINES: "Aerolíneas",
 	AIRPORTS: "Aeropuertos",
 	NUMBER_OF_STOPS: "Número de escalas",
+	TRAVEL_CLASS: "Clase de viaje",
 	FLIGHT_OUTWARD: "Vuelo de ida",
 	DEPARTURE_TIME: "Hora de salida",
 	TRAVEL_DURATION: "Duración del viaje",
@@ -2363,6 +2368,7 @@ var FLIGHTS_FORM$a = {
 	AIRLINES: "Compagnies aériennes",
 	AIRPORTS: "Aéroports",
 	NUMBER_OF_STOPS: "Nombre d'escales",
+	TRAVEL_CLASS: "Classe de voyage",
 	FLIGHT_OUTWARD: "Vol aller",
 	DEPARTURE_TIME: "Heure de départ",
 	TRAVEL_DURATION: "Durée du voyage",
@@ -2820,6 +2826,7 @@ var FLIGHTS_FORM$9 = {
 	AIRLINES: "Compagnies aériennes",
 	AIRPORTS: "Aéroports",
 	NUMBER_OF_STOPS: "Nombre d'escales",
+	TRAVEL_CLASS: "Classe de voyage",
 	FLIGHT_OUTWARD: "Vol aller",
 	DEPARTURE_TIME: "Heure de départ",
 	TRAVEL_DURATION: "Durée du voyage",
@@ -3273,6 +3280,7 @@ var FLIGHTS_FORM$8 = {
 	AIRLINES: "Flugfélög",
 	AIRPORTS: "Flugvellir",
 	NUMBER_OF_STOPS: "Fjöldi millilendinga",
+	TRAVEL_CLASS: "Farrými",
 	FLIGHT_OUTWARD: "Brottfararflug",
 	DEPARTURE_TIME: "Brottfarartími",
 	TRAVEL_DURATION: "Ferðalagstími",
@@ -3726,6 +3734,7 @@ var FLIGHTS_FORM$7 = {
 	AIRLINES: "Compagnie aeree",
 	AIRPORTS: "Aeroporti",
 	NUMBER_OF_STOPS: "Numero di scali",
+	TRAVEL_CLASS: "Classe di viaggio",
 	FLIGHT_OUTWARD: "Volo di andata",
 	DEPARTURE_TIME: "Orario di partenza",
 	TRAVEL_DURATION: "Durata del viaggio",
@@ -4179,6 +4188,7 @@ var FLIGHTS_FORM$6 = {
 	AIRLINES: "Luchtvaartmaatschappijen",
 	AIRPORTS: "Luchthavens",
 	NUMBER_OF_STOPS: "Aantal stops",
+	TRAVEL_CLASS: "Reisklasse",
 	FLIGHT_OUTWARD: "Vlucht heenreis",
 	DEPARTURE_TIME: "Vertrektijd",
 	TRAVEL_DURATION: "Reisduur",
@@ -4636,6 +4646,7 @@ var FLIGHTS_FORM$5 = {
 	AIRLINES: "Luchtvaartmaatschappijen",
 	AIRPORTS: "Luchthavens",
 	NUMBER_OF_STOPS: "Aantal tussenstops",
+	TRAVEL_CLASS: "Reisklasse",
 	FLIGHT_OUTWARD: "Heenvlucht",
 	DEPARTURE_TIME: "Vertrektijd",
 	TRAVEL_DURATION: "Reisduur",
@@ -5089,6 +5100,7 @@ var FLIGHTS_FORM$4 = {
 	AIRLINES: "Flyselskaper",
 	AIRPORTS: "Flyplasser",
 	NUMBER_OF_STOPS: "Antall mellomlandinger",
+	TRAVEL_CLASS: "Reiseklasse",
 	FLIGHT_OUTWARD: "Utreisefly",
 	DEPARTURE_TIME: "Avgangstid",
 	TRAVEL_DURATION: "Reisetid",
@@ -5542,6 +5554,7 @@ var FLIGHTS_FORM$3 = {
 	AIRLINES: "Linie lotnicze",
 	AIRPORTS: "Lotniska",
 	NUMBER_OF_STOPS: "Liczba przesiadek",
+	TRAVEL_CLASS: "Klasa podróży",
 	FLIGHT_OUTWARD: "Lot wylotowy",
 	DEPARTURE_TIME: "Godzina odlotu",
 	TRAVEL_DURATION: "Czas podróży",
@@ -5995,6 +6008,7 @@ var FLIGHTS_FORM$2 = {
 	AIRLINES: "Companhias aéreas",
 	AIRPORTS: "Aeroportos",
 	NUMBER_OF_STOPS: "Número de escalas",
+	TRAVEL_CLASS: "Classe de viagem",
 	FLIGHT_OUTWARD: "Voo de ida",
 	DEPARTURE_TIME: "Hora de partida",
 	TRAVEL_DURATION: "Duração da viagem",
@@ -6448,6 +6462,7 @@ var FLIGHTS_FORM$1 = {
 	AIRLINES: "Flygbolag",
 	AIRPORTS: "Flygplatser",
 	NUMBER_OF_STOPS: "Antal mellanlandningar",
+	TRAVEL_CLASS: "Reseklass",
 	FLIGHT_OUTWARD: "Utresa",
 	DEPARTURE_TIME: "Avgångstid",
 	TRAVEL_DURATION: "Restid",
@@ -6901,6 +6916,7 @@ var FLIGHTS_FORM = {
 	AIRLINES: "航空会社",
 	AIRPORTS: "空港",
 	NUMBER_OF_STOPS: "乗り継ぎ回数",
+	TRAVEL_CLASS: "旅行クラス",
 	FLIGHT_OUTWARD: "往路フライト",
 	DEPARTURE_TIME: "出発時刻",
 	TRAVEL_DURATION: "所要時間",
@@ -20024,6 +20040,7 @@ const buildFilterOptions = (outwardFlights, returnFlights, translations) => {
     const airports = [];
     const airlines = [];
     const numberOfStops = [];
+    const travelClasses = [];
     const outwardDeparturePeriods = [];
     const returnDeparturePeriods = [];
     let lowestDepartureTravelDuration = 9999;
@@ -20042,6 +20059,14 @@ const buildFilterOptions = (outwardFlights, returnFlights, translations) => {
                     isSelected: false
                 });
             }
+            if (firstLine.travelClass && !travelClasses.some((x) => x.value === firstLine.travelClass)) {
+                travelClasses.push({
+                    value: firstLine.travelClass,
+                    label: firstLine.travelClass,
+                    count: 0,
+                    isSelected: false
+                });
+            }
         }
         if (!airlines.some((x) => x.value === airlineCode)) {
             airlines.push({
@@ -20115,6 +20140,7 @@ const buildFilterOptions = (outwardFlights, returnFlights, translations) => {
         airports: airports,
         airlines: airlines,
         numberOfStops: numberOfStops,
+        travelClasses: travelClasses,
         outward: {
             departurePeriod: outwardDeparturePeriods,
             travelDuration: {
@@ -20163,6 +20189,10 @@ const filterGroupedFlights = (groups, filterOptions) => {
         const selectedNumberOfStops = filterOptions.numberOfStops.filter((x) => x.isSelected);
         filteredGroups = filteredGroups.filter((x) => selectedNumberOfStops.some((y) => parseInt(y.value) === x.outward.flightLines.length - 1));
     }
+    if (filterOptions.travelClasses.some((x) => x.isSelected)) {
+        const selectedTravelClasses = filterOptions.travelClasses.filter((x) => x.isSelected);
+        filteredGroups = filteredGroups.filter((x) => selectedTravelClasses.some((y) => y.value === x.outward.travelClass));
+    }
     filteredGroups = filterGroupedFlightByDirection(filteredGroups, true, filterOptions.outward);
     filteredGroups = filterGroupedFlightByDirection(filteredGroups, false, filterOptions.return);
     return filteredGroups;
@@ -20393,6 +20423,20 @@ const FlightFilter = ({ filterOptions, resultCount, applyFilter }) => {
         };
         applyFilter(updatedFilterOptions);
     };
+    const updateTravelClassFilter = (value) => {
+        const updatedFilterOptions = {
+            ...filterOptions,
+            travelClasses: filterOptions.travelClasses.map((x) => {
+                if (x.value !== value)
+                    return x;
+                return {
+                    ...x,
+                    isSelected: !x.isSelected
+                };
+            })
+        };
+        applyFilter(updatedFilterOptions);
+    };
     const updateOutwardDeparture = (period) => {
         const updatedFilterOptions = {
             ...filterOptions,
@@ -20542,6 +20586,19 @@ const FlightFilter = ({ filterOptions, resultCount, applyFilter }) => {
                                         "(",
                                         option.count,
                                         ")"))))))))),
+                React__default["default"].createElement("div", { className: "flight__filter__group" },
+                    React__default["default"].createElement("div", { className: "flight__filter__group__title" }, translations.FLIGHTS_FORM.TRAVEL_CLASS),
+                    React__default["default"].createElement("div", { className: "flight__filter__group__wrapper" }, filterOptions.travelClasses.map((option, k) => (React__default["default"].createElement("div", { className: "tree", key: k },
+                        React__default["default"].createElement("div", { className: "checkbox flight__filter__checkbox" },
+                            React__default["default"].createElement("label", { htmlFor: 'travel_class_' + option.value, className: "checkbox__label" },
+                                React__default["default"].createElement("input", { type: "checkbox", id: 'travel_class_' + option.value, className: "checkbox__input checkbox__input--parent", onClick: () => updateTravelClassFilter(option.value) }),
+                                React__default["default"].createElement("span", { className: "radiobutton__label-text" },
+                                    option.label,
+                                    " ",
+                                    option.count > 0 && React__default["default"].createElement("span", { className: "amount" },
+                                        "(",
+                                        option.count,
+                                        ")"))))))))),
                 React__default["default"].createElement("div", { className: "flight__filter__group" },
                     React__default["default"].createElement("div", { className: "flight__filter__group__title" }, translations.FLIGHTS_FORM.FLIGHT_OUTWARD),
                     React__default["default"].createElement("div", { className: "flight__filter__group__wrapper" },
@@ -20770,7 +20827,7 @@ const FlightOption = ({ item, isSelected, currentPrice, onChange }) => {
             React__default["default"].createElement("div", { className: "flight__flights" },
                 React__default["default"].createElement("div", { className: "flight__flight" },
                     React__default["default"].createElement("div", { className: "flight__flight__header" },
-                        React__default["default"].createElement("div", { className: "flight__status__container" }),
+                        React__default["default"].createElement("div", { className: "flight__status__container" }, item.outward.travelClass && React__default["default"].createElement("span", { className: "flight__status__badge" }, item.outward.travelClass)),
                         React__default["default"].createElement("div", { className: "flight__price" },
                             !isSelected && (React__default["default"].createElement("span", { className: buildClassName(['price', priceDifference > 0 && 'price--increase', priceDifference < 0 && 'price--decrease']) }, getPriceDifferenceText(priceDifference, currencyCode))),
                             React__default["default"].createElement("button", { type: "button", className: `cta ${isSelected ? 'cta--selected' : 'cta--select'}`, onClick: handleButtonClick }, isSelected ? translations.SHARED.SELECTED : translations.SHARED.SELECT)))),
@@ -22810,9 +22867,13 @@ const SummaryBookingOptionUnit = ({ unit }) => {
 
 const SummaryFlight = ({ flightMetaData, header }) => {
     const translations = reactRedux.useSelector(selectTranslations);
+    const flightLines = parseFlightLines(flightMetaData);
+    const travelClass = flightLines?.[0]?.travelClass;
     return (React__default["default"].createElement("li", null,
-        React__default["default"].createElement("h6", null, header),
-        parseFlightLines(flightMetaData)?.map((flightLine) => (React__default["default"].createElement("p", { key: flightLine.departureAirportIata },
+        React__default["default"].createElement("h6", null,
+            header,
+            travelClass && ` - ${travelClass}`),
+        flightLines?.map((flightLine) => (React__default["default"].createElement("p", { key: flightLine.departureAirportIata },
             flightLine.departureAirportDescription,
             " (",
             flightLine.departureAirportIata,
@@ -22822,9 +22883,6 @@ const SummaryFlight = ({ flightMetaData, header }) => {
             flightLine.arrivalAirportIata,
             ") ",
             ' - ',
-            flightLine.travelClass,
-            " ",
-            ' - ',
             flightLine.airlineCode,
             flightLine.number,
             React__default["default"].createElement("br", null),
@@ -32152,7 +32210,7 @@ const FlyIn = ({ srpType, isOpen, setIsOpen, className = '', onPanelRef, details
             dispatch(setBookPackagingEntry(true));
         }
     };
-    return (React__default["default"].createElement("div", { className: `flyin ${isOpen ? 'flyin--active' : ''} ${className} ${isPackageEditFlow || flyInType === 'acco-results' || flyInType === 'traject-day-activities' ? 'flyin--large' : ''} ${flyInType === 'excursion-results' || flyInType === 'excursion-details' ? 'flyin--medium' : ''}
+    return (React__default["default"].createElement("div", { className: `flyin ${isOpen ? 'flyin--active' : ''} ${className} ${isPackageEditFlow || flyInType === 'acco-results' || flyInType === 'traject-day-activities' ? 'flyin--large' : ''} ${flyInType === 'excursion-results' || flyInType === 'excursion-details' ? 'flyin--medium' : ''}
       ${flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' || flyInType === 'traject-flight-results' ? 'flyin--flight' : ''}` },
         React__default["default"].createElement("div", { className: `flyin__panel ${isOpen ? 'flyin__panel--active' : ''}`, ref: panelRef },
             React__default["default"].createElement("div", { className: "flyin__content" },
@@ -33745,20 +33803,20 @@ const buildFlightHtml = (line) => {
  */
 const buildFallbackHtml = (item, line) => {
     const details = [line?.accommodationName, line?.regimeName].filter(Boolean).join(' — ');
-    return `
-    <div class="itinerary-item__fallback">
-      <h3 class="itinerary-item__fallback-title">${escapeHtml(item.title)}</h3>
-      ${line ? buildFlightHtml(line) : ''}
-      ${details ? `<p class="itinerary-item__fallback-details">${escapeHtml(details)}</p>` : ''}
-    </div>
+    return `
+    <div class="itinerary-item__fallback">
+      <h3 class="itinerary-item__fallback-title">${escapeHtml(item.title)}</h3>
+      ${line ? buildFlightHtml(line) : ''}
+      ${details ? `<p class="itinerary-item__fallback-details">${escapeHtml(details)}</p>` : ''}
+    </div>
   `;
 };
 const buildItineraryHtml = (itinerary, translations, lines) => {
     if (!itinerary) {
-        return `
-      <div class="itinerary-shell">
-        <div class="itinerary-empty">Geen reisroute beschikbaar.</div>
-      </div>
+        return `
+      <div class="itinerary-shell">
+        <div class="itinerary-empty">Geen reisroute beschikbaar.</div>
+      </div>
     `;
     }
     const allNodes = itinerary.nodes ?? [];
@@ -33772,70 +33830,70 @@ const buildItineraryHtml = (itinerary, translations, lines) => {
         const hasAccommodationInCurrentNode = uniqueItems.some(isAccommodationItem);
         const activeAccommodation = findAccommodationForDay(allNodes, startDay);
         const accommodationBanner = !hasAccommodationInCurrentNode && activeAccommodation
-            ? `
-            <div class="itinerary-node__accommodation-banner">
-              Accommodatie voor deze dag: <strong>${escapeHtml(getAccommodationName(activeAccommodation))}</strong>
-            </div>
+            ? `
+            <div class="itinerary-node__accommodation-banner">
+              Accommodatie voor deze dag: <strong>${escapeHtml(getAccommodationName(activeAccommodation))}</strong>
+            </div>
           `
             : '';
         const itemsHtml = hasItems
             ? uniqueItems
-                .map((item) => `
-                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
+                .map((item) => `
+                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
                   ${hasVisibleContent(item.contents)
                 ? item.contents
-                : buildFallbackHtml(item, lines.find((line) => line.guid === item.itemGuid))}
-                </article>
+                : buildFallbackHtml(item, lines.find((line) => line.guid === item.itemGuid))}
+                </article>
               `)
                 .join('')
             : `<div class="itinerary-node__empty">${translations.ITINERARY.NO_ITEMS}</div>`;
-        return `
-        <section class="itinerary-node">
-          <header class="itinerary-node__header">
-            
-          <div class="itinerary-node__day">
-            <p class="itinerary-node__day-day">${day}</p>
-            <p class="itinerary-node__day-month">${month}</p>
-          </div>
-
-            <div>
-              <h2 class="itinerary-node__title">${escapeHtml(node.title)}</h2>
-            </div>
-          </header>
-
-          <div class="itinerary-node__content">
-            ${accommodationBanner}
-            ${itemsHtml}
-          </div>
-        </section>
+        return `
+        <section class="itinerary-node">
+          <header class="itinerary-node__header">
+            
+          <div class="itinerary-node__day">
+            <p class="itinerary-node__day-day">${day}</p>
+            <p class="itinerary-node__day-month">${month}</p>
+          </div>
+
+            <div>
+              <h2 class="itinerary-node__title">${escapeHtml(node.title)}</h2>
+            </div>
+          </header>
+
+          <div class="itinerary-node__content">
+            ${accommodationBanner}
+            ${itemsHtml}
+          </div>
+        </section>
       `;
     })
         .join('');
     const defaultItemsHtml = itinerary.defaultItems && itinerary.defaultItems.length > 0
-        ? `
-        <section class="itinerary-default-items">
-          <h2 class="itinerary-default-items__title">Algemene info</h2>
+        ? `
+        <section class="itinerary-default-items">
+          <h2 class="itinerary-default-items__title">Algemene info</h2>
           ${getUniqueItems(itinerary.defaultItems)
-            .map((item) => `
-                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
+            .map((item) => `
+                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
                   ${hasVisibleContent(item.contents)
             ? item.contents
-            : buildFallbackHtml(item, lines.find((line) => line.guid === item.itemGuid))}
-                </article>
+            : buildFallbackHtml(item, lines.find((line) => line.guid === item.itemGuid))}
+                </article>
               `)
-            .join('')}
-        </section>
+            .join('')}
+        </section>
       `
         : '';
-    return `
-    <div class="itinerary-shell">
-      ${itinerary.title ? `<header class="itinerary-shell__header"><h1 class="itinerary-shell__title">${escapeHtml(itinerary.title)}</h1></header>` : ''}
-
-      <div class="itinerary-shell__content">
-        ${nodesHtml}
-        ${defaultItemsHtml}
-      </div>
-    </div>
+    return `
+    <div class="itinerary-shell">
+      ${itinerary.title ? `<header class="itinerary-shell__header"><h1 class="itinerary-shell__title">${escapeHtml(itinerary.title)}</h1></header>` : ''}
+
+      <div class="itinerary-shell__content">
+        ${nodesHtml}
+        ${defaultItemsHtml}
+      </div>
+    </div>
   `;
 };
 const FullItinerary = ({ isLoading }) => {
@@ -33857,170 +33915,170 @@ const FullItinerary = ({ isLoading }) => {
         }
         const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: 'open' });
         shadowRootRef.current = shadowRoot;
-        shadowRoot.innerHTML = `
-      <style>
-        :host {
-          all: initial;
-          display: block;
-          width: 100%;
-        }
-
-        *,
-        *::before,
-        *::after {
-          box-sizing: border-box;
-        }
-
-        .itinerary-shell {
-          width: 100%;
-          margin: 0 auto;
-          font-family: 'Outfit', sans-serif;
-          color: #222;
-        }
-
-        .itinerary-shell__header {
-          margin-bottom: 24px;
-        }
-
-        .itinerary-shell__title {
-          margin: 0;
-          font-size: 32px;
-          line-height: 1.2;
-        }
-
-        .itinerary-shell__content {
-          display: grid;
-          gap: 24px;
-        }
-
-        .itinerary-node {
-          border: 1px solid #e5e7eb;
-          border-radius: 16px;
-          overflow: hidden;
-          background: #fff;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
-        }
-
-        .itinerary-node__header {
-          display: flex;
-          gap: 16px;
-          align-items: center;
-          border-bottom: 1px solid #eef0f2;
-          background: #fafafa;
-        }
-
-        .itinerary-node__day {
-          flex: 50px 0 0;
-          display: flex;
-          flex-flow: column;
-          align-items: center;
-          justify-content: center;
-          background: #1f9470;
-          color: white;
-          border: 1.5px solid var(--tide-booking-color-secondary);
-        }
-
-        .itinerary-node__day-month {
-          margin: 0px;
-        }
-
-        .itinerary-node__day-day {
-          margin: 0px;
-          font-weight: var(--tide-booking-search-results-label-date-month-font-weight);
-          color: var(--tide-booking-search-results-label-date-month-color);
-          font-size: 24px;
-        }
-
-        .itinerary-node__title {
-          margin: 0;
-          font-size: 22px;
-          line-height: 1.25;
-        }
-
-        .itinerary-node__content {
-          display: grid;
-          gap: 20px;
-          padding: 20px;
-        }
-
-        .itinerary-node__accommodation-banner {
-          padding: 12px 16px;
-          border: 1px solid #dbeafe;
-          border-radius: 12px;
-          background: #eff6ff;
-          color: #1e3a8a;
-          font-size: 14px;
-          line-height: 1.4;
-        }
-
-        .itinerary-item {
-          display: block;
-          border-radius: 12px;
-          overflow: hidden;
-          background: #fff;
-        }
-
-        /* An item whose template has no content view of its own still has to read as a service. */
-        .itinerary-item__fallback {
-          padding: 16px 20px;
-          border: 1px solid #e5e7eb;
-          border-radius: 12px;
-        }
-
-        .itinerary-item__fallback-title {
-          margin: 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: #111827;
-        }
-
-        .itinerary-item__legs {
-          margin: 8px 0 0;
-          padding-left: 18px;
-          color: #374151;
-        }
-
-        .itinerary-item__legs li + li {
-          margin-top: 4px;
-        }
-
-        .itinerary-item__fallback-details {
-          margin: 8px 0 0;
-          color: #6b7280;
-        }
-
-        .itinerary-node__empty,
-        .itinerary-empty {
-          padding: 20px;
-          border: 1px dashed #d1d5db;
-          border-radius: 12px;
-          color: #6b7280;
-          background: #fafafa;
-        }
-
-        .itinerary-default-items {
-          border: 1px solid #e5e7eb;
-          border-radius: 16px;
-          padding: 20px;
-          background: #fff;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
-        }
-
-        .itinerary-default-items__title {
-          margin: 0 0 16px;
-          font-size: 22px;
-        }
-
-        @media (max-width: 768px) {
-          .itinerary-shell {
-            padding: 16px;
-          }
-        }
-
-        ${itinerary?.styleSheetBody ?? ''}
-      </style>
-
-      ${html}
+        shadowRoot.innerHTML = `
+      <style>
+        :host {
+          all: initial;
+          display: block;
+          width: 100%;
+        }
+
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        .itinerary-shell {
+          width: 100%;
+          margin: 0 auto;
+          font-family: 'Outfit', sans-serif;
+          color: #222;
+        }
+
+        .itinerary-shell__header {
+          margin-bottom: 24px;
+        }
+
+        .itinerary-shell__title {
+          margin: 0;
+          font-size: 32px;
+          line-height: 1.2;
+        }
+
+        .itinerary-shell__content {
+          display: grid;
+          gap: 24px;
+        }
+
+        .itinerary-node {
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          overflow: hidden;
+          background: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+        }
+
+        .itinerary-node__header {
+          display: flex;
+          gap: 16px;
+          align-items: center;
+          border-bottom: 1px solid #eef0f2;
+          background: #fafafa;
+        }
+
+        .itinerary-node__day {
+          flex: 50px 0 0;
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          justify-content: center;
+          background: #1f9470;
+          color: white;
+          border: 1.5px solid var(--tide-booking-color-secondary);
+        }
+
+        .itinerary-node__day-month {
+          margin: 0px;
+        }
+
+        .itinerary-node__day-day {
+          margin: 0px;
+          font-weight: var(--tide-booking-search-results-label-date-month-font-weight);
+          color: var(--tide-booking-search-results-label-date-month-color);
+          font-size: 24px;
+        }
+
+        .itinerary-node__title {
+          margin: 0;
+          font-size: 22px;
+          line-height: 1.25;
+        }
+
+        .itinerary-node__content {
+          display: grid;
+          gap: 20px;
+          padding: 20px;
+        }
+
+        .itinerary-node__accommodation-banner {
+          padding: 12px 16px;
+          border: 1px solid #dbeafe;
+          border-radius: 12px;
+          background: #eff6ff;
+          color: #1e3a8a;
+          font-size: 14px;
+          line-height: 1.4;
+        }
+
+        .itinerary-item {
+          display: block;
+          border-radius: 12px;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        /* An item whose template has no content view of its own still has to read as a service. */
+        .itinerary-item__fallback {
+          padding: 16px 20px;
+          border: 1px solid #e5e7eb;
+          border-radius: 12px;
+        }
+
+        .itinerary-item__fallback-title {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #111827;
+        }
+
+        .itinerary-item__legs {
+          margin: 8px 0 0;
+          padding-left: 18px;
+          color: #374151;
+        }
+
+        .itinerary-item__legs li + li {
+          margin-top: 4px;
+        }
+
+        .itinerary-item__fallback-details {
+          margin: 8px 0 0;
+          color: #6b7280;
+        }
+
+        .itinerary-node__empty,
+        .itinerary-empty {
+          padding: 20px;
+          border: 1px dashed #d1d5db;
+          border-radius: 12px;
+          color: #6b7280;
+          background: #fafafa;
+        }
+
+        .itinerary-default-items {
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          padding: 20px;
+          background: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+        }
+
+        .itinerary-default-items__title {
+          margin: 0 0 16px;
+          font-size: 22px;
+        }
+
+        @media (max-width: 768px) {
+          .itinerary-shell {
+            padding: 16px;
+          }
+        }
+
+        ${itinerary?.styleSheetBody ?? ''}
+      </style>
+
+      ${html}
     `;
     }, [html, itinerary?.styleSheetBody, isLoading]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,