fix: break out css variables

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -10,10 +10,10 @@ import { useStepsStore } from "@/stores/steps"
 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
+import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
 
@@ -25,7 +25,7 @@ import type {
 } from "@/types/components/hotelReservation/enterDetails/details"
 
 const formID = "enter-details"
-export default function Details({ user }: DetailsProps) {
+export default function Details({ user, memberPrice }: DetailsProps) {
   const intl = useIntl()
   const initialData = useDetailsStore((state) => ({
     countryCode: state.data.countryCode,
@@ -68,7 +68,6 @@ export default function Details({ user }: DetailsProps) {
     [completeStep, updateDetails]
   )
 
-  const joinValue = methods.watch("join")
   return (
     <FormProvider {...methods}>
       <form
@@ -77,10 +76,7 @@ export default function Details({ user }: DetailsProps) {
         onSubmit={methods.handleSubmit(onSubmit)}
       >
         {user ? null : (
-          <JoinScandicFriendsCard
-            name="join"
-            difference={{ price: 1000, currency: "SEK" }}
-          />
+          <JoinScandicFriendsCard name="join" memberPrice={memberPrice} />
         )}
         <div className={styles.container}>
           <Footnote