fix(SW-779): replace css module with .css file to work with parallel route

app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css

@@ -1,6 +1,7 @@
 /** 
   * Due to css import issues with parallel routes we are forced to 
   * use a regular css file and import it in the page.tsx
+    * This is addressed in Next 15: https: //github.com/vercel/next.js/pull/66300
   */
 .profile-layout {
   background-color: var(--Main-Grey-White);

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

@@ -1,8 +1,14 @@
-.layout {
+/** 
+  * Due to css import issues with parallel routes we are forced to 
+  * use a regular css file and import it in the page.tsx
+  * This is addressed in Next 15: https://github.com/vercel/next.js/pull/66300
+  */
+
+.enter-details-layout {
   background-color: var(--Scandic-Brand-Warm-White);
 }
 
-.content {
+.enter-details-layout__content {
   display: grid;
   gap: var(--Spacing-x3) var(--Spacing-x9);
   grid-template-columns: 1fr 340px;
@@ -15,12 +21,12 @@
   );
 }
 
-.summaryContainer {
+.enter-details-layout__summaryContainer {
   grid-column: 2 / 3;
   grid-row: 1/-1;
 }
 
-.summary {
+.enter-details-layout__summary {
   background-color: var(--Main-Grey-White);
 
   border-color: var(--Primary-Light-On-Surface-Divider-subtle);
@@ -31,22 +37,22 @@
   z-index: 1;
 }
 
-.hider {
+.enter-details-layout__hider {
   display: none;
 }
 
-.shadow {
+.enter-details-layout__shadow {
   display: none;
 }
 
 @media screen and (min-width: 950px) {
-  .summaryContainer {
+  .enter-details-layout__summaryContainer {
     display: grid;
     grid-template-rows: auto auto 1fr;
     margin-top: calc(0px - var(--Spacing-x9));
   }
 
-  .summary {
+  .enter-details-layout__summary {
     position: sticky;
     top: calc(
       var(--booking-widget-desktop-height) +
@@ -57,7 +63,7 @@
     border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
   }
 
-  .hider {
+  .enter-details-layout__hider {
     display: block;
     background-color: var(--Scandic-Brand-Warm-White);
     position: sticky;
@@ -69,7 +75,7 @@
     height: 40px;
   }
 
-  .shadow {
+  .enter-details-layout__shadow {
     display: block;
     background-color: var(--Main-Grey-White);
     border-color: var(--Primary-Light-On-Surface-Divider-subtle);
@@ -82,14 +88,14 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .summary {
+  .enter-details-layout__summary {
     top: calc(
       var(--booking-widget-desktop-height) + var(--Spacing-x2) +
         var(--Spacing-x-half)
     );
   }
 
-  .hider {
+  .enter-details-layout__hider {
     top: calc(var(--booking-widget-desktop-height) - 6px);
   }
 }

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

@@ -1,15 +1,10 @@
-import {
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
-  getCreditCardsSafely,
-  getProfileSafely,
-} from "@/lib/trpc/memoizedRequests"
 
 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import { setLang } from "@/i18n/serverContext"
 
 import { preload } from "./_preload"
 
-import styles from "./layout.module.css"
-
 import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
@@ -31,14 +26,14 @@ export default async function StepLayout({
 
   return (
     <EnterDetailsProvider step={params.step} isMember={!!user}>
-      <main className={styles.layout}>
+      <main className="enter-details-layout__layout">
         {hotelHeader}
-        <div className={styles.content}>
+        <div className={"enter-details-layout__content"}>
           {children}
-          <aside className={styles.summaryContainer}>
+          <aside className="enter-details-layout__summaryContainer">
-            <div className={styles.hider} />
+            <div className="enter-details-layout__hider" />
-            <div className={styles.summary}>{summary}</div>
+            <div className="enter-details-layout__summary">{summary}</div>
-            <div className={styles.shadow} />
+            <div className="enter-details-layout__shadow" />
           </aside>
         </div>
       </main>

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

@@ -1,3 +1,5 @@
+import "./enterDetailsLayout.css"
+
 import { notFound } from "next/navigation"
 
 import {