feat(SW-415): Added content from API

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css

@@ -2,7 +2,11 @@
 .disabledCard {
   border-radius: var(--Corner-radius-Large);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
-  background-color: var(--Base-Surface-Primary-light-Hover);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
 }
 
 .disabledCard {
@@ -15,10 +19,21 @@
 
 .card:hover {
   cursor: pointer;
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+.checkIcon {
+  display: none;
 }
 input[type="radio"]:checked + .card {
+  border: 1px solid var(--Primary-Dark-On-Surface-Divider);
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
+input[type="radio"]:checked + .card .checkIcon {
+  display: block;
+  position: absolute;
+  top: -10px;
+  right: -10px;
+}
 
 .header {
   display: flex;
@@ -26,7 +41,40 @@ input[type="radio"]:checked + .card {
 }
 
 .header .infoIcon,
-.header .infoIcon * {
-  stroke: var(--Base-Text-Disabled);
-  fill: var(--Base-Surface-Primary-light-Hover);
+.header .infoIcon path {
+  stroke: var(--UI-Text-Medium-contrast);
+  fill: transparent;
+}
+
+.button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  grid-area: chevron;
+  height: 100%;
+  justify-self: flex-end;
+  padding: 0;
+}
+
+.popover {
+  background-color: var(--Main-Grey-White);
+
+  border-radius: var(--Corner-radius-Medium);
+  left: 0px;
+  max-height: 400px;
+  padding: var(--Spacing-x2);
+  top: calc(55px + var(--Spacing-x1));
+  width: 100%;
+  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+}
+
+.popover section:focus-visible {
+  outline: none;
+}
+.popover .popoverText {
+  margin-bottom: var(--Spacing-x-half);
+}
+.popover .popoverHeading {
+  margin-bottom: var(--Spacing-x1);
+  font-weight: 600; /* TODO: Remove when this is updated in Design system */
 }