feat(SW-718) Refactor select rate to support multiroom

components/HotelReservation/SelectRate/RateSummary/rateSummary.module.css

@@ -0,0 +1,98 @@
+.summary {
+  position: fixed;
+  z-index: 10;
+  bottom: -100%;
+  left: 0;
+  right: 0;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  padding: 0 0 var(--Spacing-x5);
+  align-items: center;
+  border-top: 1px solid var(--Base-Border-Subtle);
+  transition: bottom 300ms ease-in-out;
+}
+
+.content {
+  width: 100%;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.summary[data-visible="true"] {
+  bottom: 0;
+}
+
+.summaryPriceContainer {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x4);
+  padding-top: var(--Spacing-x2);
+  width: 100%;
+}
+
+.promoContainer {
+  display: none;
+  max-width: 264px;
+}
+.summaryPrice {
+  align-self: center;
+  display: flex;
+  width: 100%;
+  gap: var(--Spacing-x4);
+}
+
+.petInfo {
+  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  padding-left: var(--Spacing-x2);
+  display: none;
+}
+
+.summaryText {
+  display: none;
+}
+
+.summaryPriceTextDesktop {
+  align-self: center;
+  display: none;
+}
+
+.continueButton {
+  margin-left: auto;
+  height: fit-content;
+  width: 100%;
+  min-width: 140px;
+}
+
+.summaryPriceTextMobile {
+  white-space: nowrap;
+}
+
+@media (min-width: 768px) {
+  .summary {
+    padding: var(--Spacing-x3) 0 var(--Spacing-x5);
+  }
+  .content {
+    flex-direction: row;
+  }
+  .petInfo,
+  .promoContainer,
+  .summaryText,
+  .summaryPriceTextDesktop {
+    display: block;
+  }
+  .summaryPriceTextMobile {
+    display: none;
+  }
+  .summaryPrice,
+  .continueButton {
+    width: auto;
+  }
+  .summaryPriceContainer {
+    width: auto;
+    padding: 0;
+    align-items: center;
+  }
+}