feat: SW-1422 Updated UX for booking code desktop and mobile

components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css

@@ -1,7 +1,12 @@
+.container {
+  position: relative;
+}
+
 .bookingCodeLabel {
   display: flex;
   align-items: center;
   gap: var(--Spacing-x-half);
+  position: relative;
 }
 
 .error {
@@ -13,10 +18,33 @@
   min-width: 20px;
 }
 
-.bookingCodeRemember {
-  display: flex;
-  gap: var(--Spacing-x1);
-
-  /* ToDo: Remove once remember checkbox design are ready */
+.bookingCodeRemember,
+.bookingCodeRememberVisible {
   display: none;
+  gap: var(--Spacing-x1);
+}
+
+.bookingCodeRememberVisible {
+  display: flex;
+  position: absolute;
+  top: calc(100% + 16px);
+  width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .hideOnMobile {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .bookingCodeRememberVisible {
+    padding: var(--Spacing-x2);
+    border-radius: var(--Spacing-x-one-and-half);
+    width: 320px;
+    background: white;
+    top: calc(100% + 24px);
+    justify-content: space-between;
+    align-items: center;
+  }
 }