diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
index fde3b65c8..7b3ce3e2b 100644
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -27,7 +27,6 @@
   .rooms,
   .vouchers,
   .when,
-  .whenOpen,
   .where {
     background-color: var(--Base-Background-Primary-Normal);
     border-radius: var(--Corner-radius-Medium);
@@ -35,8 +34,7 @@
 
   .rooms,
   .vouchers,
-  .when,
-  .whenOpen {
+  .when {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   }
 
@@ -63,7 +61,6 @@
 
   .rooms,
   .when,
-  .whenOpen,
   .where {
     width: 100%;
   }
@@ -74,14 +71,14 @@
   }
 
   .rooms,
-  .when,
-  .whenOpen {
+  .when {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
     border-radius: var(--Corner-radius-Small);
   }
+
   .when:hover,
   .rooms:hover,
-  .whenOpen,
+  .when[data-open="true"],
   .rooms:has(.input:active, .input:focus, .input:focus-within) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index c8173624d..187013c0d 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -37,7 +37,7 @@ export default function FormContent({
           <div className={styles.where}>
             <Search locations={locations} />
           </div>
-          <div className={isDatePickerOpen ? styles.whenOpen : styles.when}>
+          <div className={styles.when} data-open={isDatePickerOpen}>
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },