feat:SW-1422 Updated Tablet mode

components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css

@@ -28,10 +28,6 @@
   height: 24px;
 }
 
-.checkboxVoucher {
-  display: none;
-}
-
 @media screen and (max-width: 767px) {
   .vouchers {
     margin-bottom: var(--Spacing-x5);
@@ -39,9 +35,6 @@
 }
 
 @media screen and (min-width: 768px) {
-  .vouchers {
-    display: none;
-  }
   .options {
     flex-direction: row;
     gap: var(--Spacing-x4);
@@ -50,8 +43,15 @@
     margin-top: 0;
     gap: var(--Spacing-x-one-and-half);
   }
-  .checkboxVoucher {
-    display: flex;
+  .optionsContainer {
+    display: grid;
+    grid-template-columns: auto auto;
+    column-gap: var(--Spacing-x2);
+  }
+  .vouchers:hover,
+  .vouchers:focus-within,
+  .vouchers:has([data-focused="true"], [data-pressed="true"]) {
+    background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
 }
 
@@ -72,15 +72,7 @@
     max-width: 190px;
     gap: var(--Spacing-x-half);
   }
-  .vouchers:hover,
   .option:hover {
     cursor: not-allowed;
   }
-  .optionsContainer {
-    flex-direction: row;
-    align-items: center;
-  }
-  .checkboxVoucher {
-    display: none;
-  }
 }