feat(SW-350): Update design for booking widget

app/[lang]/(live)/@bookingwidget/page.tsx

@@ -13,5 +13,5 @@ export default async function BookingWidgetPage() {
     return null
   }
 
-  return <BookingWidget />
+  return <BookingWidget type="full" />
 }

app/[lang]/(live)/layout.tsx

@@ -2,6 +2,7 @@ import "@/app/globals.css"
 import "@scandic-hotels/design-system/style.css"
 
 import Script from "next/script"
+import React from "react"
 
 import { env } from "@/env/server"
 import TrpcProvider from "@/lib/trpc/Provider"

app/[lang]/(live-current)/layout.tsx

@@ -65,7 +65,7 @@ export default async function RootLayout({
         <SkipToMainContent />
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           {header}
-          <BookingWidget />
+          <BookingWidget type="full" />
           {children}
           <Footer />
           <TokenRefresher />

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -75,6 +75,7 @@
   }
 
   .rooms,
+  .vouchers,
   .when {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
     border-radius: var(--Corner-radius-Small);

components/Forms/BookingWidget/form.module.css

@@ -27,7 +27,7 @@
   }
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 767px) {
   .section {
     padding: var(--Spacing-x1) var(--Spacing-x5);
   }

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -79,6 +79,10 @@ p.caption {
   color: var(--UI-Text-High-contrast);
 }
 
+.disabled {
+  color: var(--Base-Text-Disabled);
+}
+
 .center {
   text-align: center;
 }