fix(BOOK-498): removed and changed z-index values to have booking widget overlapping correctly on mobile.

Approved-by: Bianca Widstam
Approved-by: Hrishikesh Vaipurkar

apps/scandic-web/app/globals.css

@@ -15,6 +15,7 @@
   );
 
   --sitewide-alert-height: 0px; /* Will be overridden when a sitewide alert is visible */
+  --sitewide-alert-sticky-height: 0px; /* Will be overridden when a sticky sitewide alert is visible */
   --campaign-banner-height: 0px; /* Will be overridden when a campaign banner is visible */
   --alert-and-banner-height: calc(
     var(--sitewide-alert-height) + var(--campaign-banner-height)

apps/scandic-web/components/CampaignBanner/campaignBanner.module.css

@@ -1,6 +1,5 @@
 .campaignBanner {
   width: 100%;
-  z-index: var(--header-z-index);
   position: relative;
   background-color: var(--Surface-Brand-Primary-3-Default);
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/destinationSearch.module.css

@@ -48,7 +48,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: calc(100dvh - max(var(--alert-and-banner-height), 20px));
+  height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px));
   border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
   background-color: var(--Surface-Primary-Default);
   box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);

apps/scandic-web/components/ContentType/StartPage/startPage.module.css

@@ -1,7 +1,6 @@
 .header {
   height: 560px;
   position: relative;
-  z-index: 10;
 }
 
 .header:after {
@@ -19,7 +18,6 @@
   color: var(--Text-Inverted);
   position: absolute;
   inset: 0;
-  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;