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

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

@@ -1,5 +1,4 @@
 .options {
-  display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
@@ -7,9 +6,30 @@
 
 .option {
   display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  align-items: center;
 }
 
-@media screen and (max-width: 1366px) {
+.infoIcon {
+  stroke: var(--Base-Text-Disabled);
+}
+
+.vouchers,
+.options {
+  display: none;
+}
+
+.vouchersHeader {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.checkbox {
+  width: var(--Spacing-x3);
+  height: var(--Spacing-x3);
+}
+
+@media screen and (max-width: 766px) {
   .input {
     display: grid;
     gap: var(--Spacing-x2);
@@ -39,7 +59,7 @@
   }
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 767px) {
   .input {
     display: flex;
     gap: var(--Spacing-x2);
@@ -49,7 +69,6 @@
   .vouchers,
   .when,
   .where {
-    border-right: 1px solid var(--Base-Surface-Subtle-Normal);
     width: 100%;
   }
 
@@ -59,14 +78,20 @@
   }
 
   .rooms,
+  .vouchers,
   .when {
     max-width: 240px;
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+    border-radius: var(--Corner-radius-Small);
+  }
+  .when:hover,
+  .rooms:hover,
+  .rooms:has(.input:active, .input:focus, .input:focus-within) {
+    background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
 
   .vouchers {
     max-width: 200px;
-    padding: var(--Spacing-x1) 0;
   }
 
   .where {
@@ -75,6 +100,20 @@
   }
 
   .options {
-    max-width: 158px;
+    max-width: 190px;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .vouchers {
+    display: block;
+  }
+
+  .options {
+    display: flex;
+  }
+  .vouchers:hover,
+  .option:hover {
+    cursor: not-allowed;
   }
 }