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

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css

@@ -1,102 +1,46 @@
-@keyframes overlay-fade {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes modal-anim {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
 .guarantee {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x1);
-}
-
-.checkboxContainer {
-  align-items: center;
-  display: flex;
-  flex: 1;
-  gap: var(--Space-x1);
-  justify-content: space-between;
-}
-
-.infoButton {
-  display: flex;
-  gap: var(--Space-x05);
-  justify-self: flex-end;
-  outline: none;
-}
-.infoButton:focus-visible {
-  outline: 2px auto -webkit-focus-ring-color;
-  outline-offset: 1px;
-}
-
-.overlay {
-  align-items: center;
-  background-color: var(--Overlay-40);
-  display: flex;
-  inset: 0;
-  justify-content: center;
-  position: fixed;
-  z-index: var(--default-modal-overlay-z-index);
-
-  &[data-entering] {
-    animation: overlay-fade 200ms;
-  }
-
-  &[data-exiting] {
-    animation: overlay-fade 150ms reverse ease-in;
-  }
-}
-
-.modal {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-lg);
-  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
-  overflow: hidden;
-  padding: var(--Space-x5) var(--Space-x3);
-  width: min(90dvw, 560px);
-
-  &[data-entering] {
-    animation: modal-anim 200ms;
-  }
-
-  &[data-exiting] {
-    animation: modal-anim 150ms reverse ease-in;
-  }
-}
-
-.container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--Space-x2);
+  background-color: var(--Surface-Secondary-Default);
+  border-radius: var(--Corner-radius-lg);
+  padding: var(--Space-x2);
 }
 
-.text {
-  text-align: center;
+.paymentRequired {
+  display: flex;
+  gap: var(--Space-x15);
+  align-items: flex-start;
 }
 
-.closeButton {
-  margin-top: var(--Space-x15);
-  outline: none;
-  width: min(164px, 100%);
+.guaranteeQuestion {
+  display: grid;
+  gap: var(--Space-x1);
+  justify-items: start;
 }
 
-@media screen and (max-width: 767px) {
-  .btnText {
-    display: none;
+.textWrapper {
+  display: grid;
+  gap: var(--Space-x025);
+  flex-grow: 1;
+}
+
+.checkbox {
+  flex-grow: 1;
+}
+
+.guaranteeInfoButton {
+  flex-shrink: 0;
+  margin-left: calc(var(--Space-x3) + var(--Space-x15)); /* Align with checkbox */
+}
+
+@media screen and (min-width: 768px) {
+  .guaranteeQuestion {
+    display: flex;
+    gap: var(--Space-x15);
+    align-items: center;
+  }
+
+  .guaranteeInfoButton {
+    margin-left: 0;
   }
 }