feat(BOOK-469): Enter details design changes with guarantee/non-guarantee flow

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/EnterDetails/Payment/payment.module.css

@@ -1,63 +1,51 @@
 .paymentSection {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x4);
+  display: grid;
+  gap: var(--Space-x2);
+  width: min(100%, 696px);
+
+  &.isSubmitting {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
-.disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.header {
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: flex-start;
 }
 
-.paymentContainer {
-  display: flex;
-  flex-direction: column;
+.paymentForm {
+  display: grid;
   gap: var(--Space-x4);
   max-width: 696px;
 }
 
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x2);
+@media screen and (max-width: 767px) {
+  .header {
+    flex-direction: column;
+  }
 }
 
-.paymentOptionContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x15);
-}
-
-.submitButton {
-  display: none;
-}
-
-.paymentContainer .link {
-  font-weight: 500;
-  font-size: var(--Typography-Caption-Regular-fontSize);
-}
-
-.terms {
-  display: flex;
-  flex-direction: row;
-  gap: var(--Space-x15);
-}
-
-.checkboxContainer {
-  background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-Large);
-  padding: var(--Space-x2);
-}
-
-@media screen and (min-width: 1367px) {
-  .submitButton {
-    display: flex;
-    align-self: flex-start;
+@media screen and (min-width: 768px) {
+  .header {
+    justify-content: space-between;
   }
 }
 
 @media screen and (max-width: 1366px) {
-  .paymentContainer {
+  .paymentForm {
     margin-bottom: 200px;
   }
+
+  .submitButton {
+    display: none;
+  }
 }
+
+@media screen and (min-width: 1367px) {
+  .submitButton {
+    justify-self: start;
+  }
+}
+