fix: make incomplete steps in accordion look disabled

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.tsx

@@ -45,12 +45,12 @@ export default async function SummaryPage({
     user && availability.memberRate
       ? {
           local: {
-            price: availability.memberRate?.localPrice.pricePerStay,
-            currency: availability.memberRate?.localPrice.currency,
+            price: availability.memberRate.localPrice.pricePerStay,
+            currency: availability.memberRate.localPrice.currency,
           },
           euro: {
-            price: availability.memberRate?.requestedPrice?.pricePerStay,
-            currency: availability.memberRate?.requestedPrice?.currency,
+            price: availability.memberRate.requestedPrice.pricePerStay,
+            currency: availability.memberRate.requestedPrice.currency,
           },
         }
       : {
@@ -59,8 +59,8 @@ export default async function SummaryPage({
             currency: availability.publicRate?.localPrice.currency,
           },
           euro: {
-            price: availability.publicRate?.requestedPrice?.pricePerStay,
-            currency: availability.publicRate?.requestedPrice?.currency,
+            price: availability.publicRate?.requestedPrice.pricePerStay,
+            currency: availability.publicRate?.requestedPrice.currency,
           },
         }
 

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/enterDetailsLayout.css

@@ -8,30 +8,32 @@
   background-color: var(--Scandic-Brand-Warm-White);
 }
 
-.enter-details-layout__content {
+.enter-details-layout__container {
   display: grid;
   gap: var(--Spacing-x3) var(--Spacing-x9);
-  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
   /* simulates padding on viewport smaller than --max-width-navigation */
-  width: min(
-    calc(100dvw - (var(--Spacing-x2) * 2)),
-    var(--max-width-navigation)
-  );
+}
+
+.enter-details-layout__content {
+  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
 }
 
 .enter-details-layout__summaryContainer {
-  position: fixed;
-  z-index: 1;
+  position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
 }
 
 @media screen and (min-width: 1367px) {
-  .enter-details-layout__content {
+  .enter-details-layout__container {
     grid-template-columns: 1fr 340px;
     grid-template-rows: auto 1fr;
     margin: var(--Spacing-x5) auto 0;
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
   }
 
   .enter-details-layout__summaryContainer {

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx

@@ -28,9 +28,11 @@ export default async function StepLayout({
     <EnterDetailsProvider step={params.step} isMember={!!user}>
       <main className="enter-details-layout__layout">
         {hotelHeader}
-        <div className={"enter-details-layout__content"}>
-          {children}
-          <aside className={"enter-details-layout__summaryContainer"}>{summary}</aside>
+        <div className={"enter-details-layout__container"}>
+          <div className={"enter-details-layout__content"}>{children}</div>
+          <aside className={"enter-details-layout__summaryContainer"}>
+            {summary}
+          </aside>
         </div>
       </main>
     </EnterDetailsProvider>