journey calculator fix

private/scss/modules/_privacy.scss

@@ -4,7 +4,7 @@
   bottom: 0;
   right: 0;
   background-color: rgba($white, 0.9);
-  z-index: 10;
+  z-index: 100000;
   padding: em(20px) em(60px);
   @media screen and (max-width: $large_breakpoint) {
     padding: em(20px);

private/scss/modules/plugins/_form.scss

@@ -116,6 +116,16 @@
   }
 }
 
+.button--ghost-white {
+  color: $white;
+  svg {
+    fill: $white !important;
+  }
+  &:after {
+    border: 2px solid $white;
+  }
+}
+
 .button__icon {
   display: block;
   position: absolute;

private/scss/modules/plugins/_journey_calculator.scss

@@ -33,7 +33,7 @@
 
 .journey_calculator__input {
   position: relative;
-  padding-right: em(105px);
+  padding: 0;
   transition: padding 0.3s ease-in-out;
   will-change: padding;
   input[type="text"] {
@@ -42,8 +42,13 @@
     height: em(45px);
   }
   &.loaded {
+    padding-right: em(105px);
     .journey_calculator__result {
       opacity: 1;
+      right: 0;
+    }
+    & ~ .journey_calculator__button {
+      opacity: 1;
     }
   }
   &.error {
@@ -60,7 +65,7 @@
   display: block;
   position: absolute;
   top: 0;
-  right: 0;
+  right: em(-105px);
   width: em(95px);
   opacity: 0;
   line-height: em(45px);
@@ -71,7 +76,7 @@
   font-family: $default_font_family;
   color: darken($dark_gray, 20);
   text-align: center;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out, right 0.3s ease-in-out;
   text-transform: uppercase;
   &:after {
     content: attr(data-duration) ' ' attr(data-label);
@@ -101,4 +106,15 @@
   line-height: 1.3;
   display: none;
   color: $red;
+}
+
+.journey_calculator__button {
+  width: 100%;
+  margin-top: 15px;
+  will-change: transform;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  span {
+    width: 100%;
+  }
 }