fix: make special requests block togglable

components/HotelReservation/EnterDetails/Details/SpecialRequests/specialRequests.module.css

@@ -0,0 +1,55 @@
+.requests {
+  --header-height: 50px;
+
+  display: grid;
+  grid-template-rows: var(--header-height) 0fr;
+  transition: 0.3s ease-out;
+  grid-column: 1 / -1;
+}
+
+.toggle {
+  display: grid;
+  grid-template-areas:
+    "header chevron"
+    "divider divider";
+  grid-template-columns: 1fr auto;
+  background-color: transparent;
+  gap: var(--Spacing-x1);
+  border: none;
+  width: 100%;
+  cursor: pointer;
+  margin: var(--Spacing-x2) 0;
+}
+
+.header {
+  grid-area: header;
+  align-self: flex-start;
+}
+
+.chevron {
+  grid-area: chevron;
+}
+
+.divider {
+  grid-area: divider;
+  border-top: 1px solid var(--Color-gray-300);
+}
+
+.requests[data-requests-open="true"] .chevron {
+  transform: rotate(180deg);
+}
+
+.content {
+  overflow: hidden;
+}
+
+.contentWrapper {
+  padding-top: var(--Spacing-x3);
+  display: grid;
+  gap: var(--Spacing-x2);
+  width: 100%;
+}
+
+.requests[data-requests-open="true"] {
+  grid-template-rows: var(--header-height) 1fr;
+}