@qite/tide-booking-component 1.4.95 → 1.4.96

package/styles/components/_form.scss

@@ -1,1634 +1,1634 @@
-.form {
-  @extend %reset;
-
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  &__label {
-    @extend %reset;
-    margin-bottom: 15px * 0.5;
-    display: flex;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    line-height: 22px;
-  }
-
-  &__input {
-    width: 100%;
-    border: var(--tide-booking-form-input-border);
-    background: var(--tide-booking-form-input-background);
-    border-radius: var(--tide-booking-form-input-border-radius);
-    box-sizing: border-box;
-    @extend %transition-easing;
-  }
-
-  &__group {
-    @extend %reset;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-
-    &-input {
-      position: relative;
-      width: 100%;
-
-      &--disabled {
-        cursor: not-allowed;
-        pointer-events: none;
-        opacity: 0.6;
-      }
-    }
-
-    &--icon {
-      &:focus,
-      &:focus-within,
-      &:active {
-        .icon {
-          svg {
-            fill: var(--tide-booking-color-secondary);
-          }
-        }
-      }
-
-      .form {
-        &__label {
-          position: absolute;
-          top: 3px;
-          left: 47.5px;
-          font-size: 14px;
-          pointer-events: none;
-          color: var(--tide-booking-datepicker-input-label-color);
-
-          @include media-sm {
-            left: 17.5px;
-          }
-
-          @include media-lg {
-            font-size: 16px;
-          }
-
-          @include media-xl {
-            left: 47.5px;
-          }
-        }
-
-        &__input {
-          @include input;
-          padding-left: 20px;
-          padding-top: 16px;
-
-          @include media-sm {
-            padding-left: 20px;
-          }
-
-          @include media-md {
-            padding-left: 20px;
-          }
-
-          @include media-xl {
-            font-size: 15.5px;
-          }
-        }
-
-        .typeahead {
-          &__trigger {
-            height: 45px;
-            max-height: 45px;
-            padding-left: 40px;
-            font-size: 16px;
-            background-color: var(--tide-booking-white);
-
-            @include media-sm {
-              padding-left: 10px;
-            }
-
-            @include media-md {
-              padding-left: 40px;
-            }
-          }
-        }
-      }
-    }
-
-    &--datepicker {
-      .form__group-input {
-        width: 50%;
-      }
-    }
-
-    &--submit {
-      .cta {
-        width: 100%;
-        justify-content: center;
-      }
-    }
-
-    &--success-message {
-      &:before {
-        content: '';
-        width: 15px * 3.33;
-        height: 15px * 1.33;
-        border-left: 2.5px solid var(--tide-booking-black);
-        border-bottom: 2.5px solid var(--tide-booking-black);
-        margin: 0 auto 15px * 3 auto;
-        transform: rotate(-45deg);
-      }
-    }
-  }
-
-  &__region {
-    @extend %reset;
-
-    & + .form__region {
-      margin-top: 15px * 4;
-    }
-
-    &-header {
-      margin-bottom: 15px * 0.3;
-      display: flex;
-      flex-flow: row wrap;
-      align-items: center;
-    }
-
-    &-heading {
-      @include media-xs {
-        padding-right: 15px * 2;
-      }
-    }
-
-    &-label {
-      width: 100%;
-      // margin-top: -15px * 0.5;
-      order: 2;
-
-      @include media-xs {
-        width: auto;
-        margin-top: 0;
-        // @include marginLeft(15px * 0.2);
-        order: initial;
-        margin-bottom: 11px;
-      }
-    }
-
-    &--errors {
-      padding-left: 0 !important;
-      border: none !important;
-      color: var(--tide-booking-invalid);
-    }
-  }
-
-  &__twocolumn {
-    @include row--xl;
-
-    & + & {
-      margin-top: 15px;
-    }
-
-    & + .form__row {
-      margin-top: 15px;
-    }
-  }
-
-  &__twocolumn-column {
-    @include media-xl {
-      padding-right: 9px * 2;
-    }
-
-    .form__twocolumn-column + .form__twocolumn-column {
-      margin-top: 15px;
-
-      @include media-xl {
-        margin-top: 0;
-        padding-left: 9px * 2;
-        padding-right: 0;
-      }
-    }
-  }
-
-  &__row {
-    @extend %reset;
-    margin-right: -15px * 0.5;
-    margin-left: -15px * 0.5;
-    display: flex;
-    flex-wrap: wrap;
-
-    .form__group {
-      position: relative;
-      width: 100%;
-      max-width: 100%;
-      min-height: 1px;
-      padding-right: 15px * 0.5;
-      padding-left: 15px * 0.5;
-      margin-bottom: 15px;
-      @include column;
-      flex-grow: 1;
-      flex-basis: 100%;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-
-      &--10 {
-        width: 10%;
-        flex: 0 0 10%;
-      }
-
-      &--20 {
-        width: 20%;
-        flex: 0 0 20%;
-      }
-
-      &--25 {
-        width: 25%;
-        flex: 0 0 25%;
-      }
-
-      &--30 {
-        width: 30%;
-        flex: 0 0 30%;
-      }
-
-      &--33 {
-        width: 33.33%;
-        flex: 0 0 33.33%;
-      }
-
-      &--40 {
-        width: 40%;
-        flex: 0 0 40%;
-      }
-
-      &--50 {
-        width: 50%;
-        flex: 0 0 50%;
-      }
-
-      &--60 {
-        width: 60%;
-        flex: 0 0 60%;
-      }
-
-      &--66 {
-        width: 66.66%;
-        flex: 0 0 66.66%;
-      }
-
-      &--70 {
-        width: 70%;
-        flex: 0 0 70%;
-      }
-
-      &--75 {
-        width: 75%;
-        flex: 0 0 75%;
-      }
-
-      &--80 {
-        width: 80%;
-        flex: 0 0 80%;
-      }
-
-      &--90 {
-        width: 90%;
-        flex: 0 0 90%;
-      }
-
-      &--xs {
-        &-10 {
-          @include media-xs {
-            width: 10%;
-            flex-basis: 10%;
-          }
-        }
-
-        &-20 {
-          @include media-xs {
-            width: 20%;
-            flex-basis: 20%;
-          }
-        }
-
-        &-25 {
-          @include media-xs {
-            width: 25%;
-            flex-basis: 25%;
-          }
-        }
-
-        &-30 {
-          @include media-xs {
-            width: 30%;
-            flex-basis: 30%;
-          }
-        }
-
-        &-33 {
-          @include media-xs {
-            width: 33.33%;
-            flex-basis: 33.33%;
-          }
-        }
-
-        &-40 {
-          @include media-xs {
-            width: 40%;
-            flex-basis: 40%;
-          }
-        }
-
-        &-50 {
-          @include media-xs {
-            width: 50%;
-            flex-basis: 50%;
-          }
-        }
-
-        &-60 {
-          @include media-xs {
-            width: 60%;
-            flex-basis: 60%;
-          }
-        }
-
-        &-66 {
-          @include media-xs {
-            width: 66.66%;
-            flex-basis: 66.66%;
-          }
-        }
-
-        &-70 {
-          @include media-xs {
-            width: 70%;
-            flex-basis: 70%;
-          }
-        }
-
-        &-75 {
-          @include media-xs {
-            width: 75%;
-            flex-basis: 75%;
-          }
-        }
-
-        &-80 {
-          @include media-xs {
-            width: 80%;
-            flex-basis: 80%;
-          }
-        }
-
-        &-90 {
-          @include media-xs {
-            width: 90%;
-            flex-basis: 90%;
-          }
-        }
-
-        &-100 {
-          @include media-xs {
-            width: 100%;
-            flex-basis: 100%;
-          }
-        }
-      }
-
-      &--sm {
-        &-10 {
-          @include media-sm {
-            width: 10%;
-            flex-basis: 10%;
-          }
-        }
-
-        &-20 {
-          @include media-sm {
-            width: 20%;
-            flex-basis: 20%;
-          }
-        }
-
-        &-25 {
-          @include media-sm {
-            width: 25%;
-            flex-basis: 25%;
-          }
-        }
-
-        &-30 {
-          @include media-sm {
-            width: 30%;
-            flex-basis: 30%;
-          }
-        }
-
-        &-33 {
-          @include media-sm {
-            width: 33.33%;
-            flex-basis: 33.33%;
-          }
-        }
-
-        &-40 {
-          @include media-sm {
-            width: 40%;
-            flex-basis: 40%;
-          }
-        }
-
-        &-50 {
-          @include media-sm {
-            width: 50%;
-            flex-basis: 50%;
-          }
-        }
-
-        &-60 {
-          @include media-sm {
-            width: 60%;
-            flex-basis: 60%;
-          }
-        }
-
-        &-66 {
-          @include media-sm {
-            width: 66.66%;
-            flex-basis: 66.66%;
-          }
-        }
-
-        &-70 {
-          @include media-sm {
-            width: 70%;
-            flex-basis: 70%;
-          }
-        }
-
-        &-75 {
-          @include media-sm {
-            width: 75%;
-            flex-basis: 75%;
-          }
-        }
-
-        &-80 {
-          @include media-sm {
-            width: 80%;
-            flex-basis: 80%;
-          }
-        }
-
-        &-90 {
-          @include media-sm {
-            width: 90%;
-            flex-basis: 90%;
-          }
-        }
-
-        &-100 {
-          @include media-sm {
-            width: 100%;
-            flex-basis: 100%;
-          }
-        }
-      }
-
-      &--md {
-        &-10 {
-          @include media-md {
-            width: 10%;
-            flex-basis: 10%;
-          }
-        }
-
-        &-20 {
-          @include media-md {
-            width: 20%;
-            flex-basis: 20%;
-          }
-        }
-
-        &-25 {
-          @include media-md {
-            width: 25%;
-            flex-basis: 25%;
-          }
-        }
-
-        &-30 {
-          @include media-md {
-            width: 30%;
-            flex-basis: 30%;
-          }
-        }
-
-        &-33 {
-          @include media-md {
-            width: 33.33%;
-            flex-basis: 33.33%;
-          }
-        }
-
-        &-40 {
-          @include media-md {
-            width: 40%;
-            flex-basis: 40%;
-          }
-        }
-
-        &-50 {
-          @include media-md {
-            width: 50%;
-            flex-basis: 50%;
-          }
-        }
-
-        &-60 {
-          @include media-md {
-            width: 60%;
-            flex-basis: 60%;
-          }
-        }
-
-        &-66 {
-          @include media-md {
-            width: 66.66%;
-            flex-basis: 66.66%;
-          }
-        }
-
-        &-70 {
-          @include media-md {
-            width: 70%;
-            flex-basis: 70%;
-          }
-        }
-
-        &-75 {
-          @include media-md {
-            width: 75%;
-            flex-basis: 75%;
-          }
-        }
-
-        &-80 {
-          @include media-md {
-            width: 80%;
-            flex-basis: 80%;
-          }
-        }
-
-        &-90 {
-          @include media-md {
-            width: 90%;
-            flex-basis: 90%;
-          }
-        }
-
-        &-100 {
-          @include media-md {
-            width: 100%;
-            flex-basis: 100%;
-          }
-        }
-      }
-
-      &--lg {
-        &-10 {
-          @include media-lg {
-            width: 10%;
-            flex-basis: 10%;
-          }
-        }
-
-        &-20 {
-          @include media-lg {
-            width: 20%;
-            flex-basis: 20%;
-          }
-        }
-
-        &-25 {
-          @include media-lg {
-            width: 25%;
-            flex-basis: 25%;
-          }
-        }
-
-        &-30 {
-          @include media-lg {
-            width: 30%;
-            flex-basis: 30%;
-          }
-        }
-
-        &-33 {
-          @include media-lg {
-            width: 33.33%;
-            flex-basis: 33.33%;
-          }
-        }
-
-        &-40 {
-          @include media-lg {
-            width: 40%;
-            flex-basis: 40%;
-          }
-        }
-
-        &-50 {
-          @include media-lg {
-            width: 50%;
-            flex-basis: 50%;
-          }
-        }
-
-        &-60 {
-          @include media-lg {
-            width: 60%;
-            flex-basis: 60%;
-          }
-        }
-
-        &-66 {
-          @include media-lg {
-            width: 66.66%;
-            flex-basis: 66.66%;
-          }
-        }
-
-        &-70 {
-          @include media-lg {
-            width: 70%;
-            flex-basis: 70%;
-          }
-        }
-
-        &-75 {
-          @include media-lg {
-            width: 75%;
-            flex-basis: 75%;
-          }
-        }
-
-        &-80 {
-          @include media-lg {
-            width: 80%;
-            flex-basis: 80%;
-          }
-        }
-
-        &-90 {
-          @include media-lg {
-            width: 90%;
-            flex-basis: 90%;
-          }
-        }
-
-        &-100 {
-          @include media-lg {
-            width: 100%;
-            flex-basis: 100%;
-          }
-        }
-      }
-
-      &--xl {
-        &-10 {
-          @include media-xl {
-            width: 10%;
-            flex-basis: 10%;
-          }
-        }
-
-        &-20 {
-          @include media-xl {
-            width: 20%;
-            flex-basis: 20%;
-          }
-        }
-
-        &-25 {
-          @include media-xl {
-            width: 25%;
-            flex-basis: 25%;
-          }
-        }
-
-        &-30 {
-          @include media-xl {
-            width: 30%;
-            flex-basis: 30%;
-          }
-        }
-
-        &-33 {
-          @include media-xl {
-            width: 33.33%;
-            flex-basis: 33.33%;
-          }
-        }
-
-        &-40 {
-          @include media-xl {
-            width: 40%;
-            flex-basis: 40%;
-          }
-        }
-
-        &-50 {
-          @include media-xl {
-            width: 50%;
-            flex-basis: 50%;
-          }
-        }
-
-        &-60 {
-          @include media-xl {
-            width: 60%;
-            flex-basis: 60%;
-          }
-        }
-
-        &-66 {
-          @include media-xl {
-            width: 66.66%;
-            flex-basis: 66.66%;
-          }
-        }
-
-        &-70 {
-          @include media-xl {
-            width: 70%;
-            flex-basis: 70%;
-          }
-        }
-
-        &-75 {
-          @include media-xl {
-            width: 75%;
-            flex-basis: 75%;
-          }
-        }
-
-        &-80 {
-          @include media-xl {
-            width: 80%;
-            flex-basis: 80%;
-          }
-        }
-
-        &-90 {
-          @include media-xl {
-            width: 90%;
-            flex-basis: 90%;
-          }
-        }
-
-        &-100 {
-          @include media-xl {
-            width: 100%;
-            flex-basis: 100%;
-          }
-        }
-      }
-
-      &--xxl {
-        &-10 {
-          @include media-xxl {
-            width: 10%;
-            flex-basis: 10%;
-          }
-        }
-
-        &-20 {
-          @include media-xxl {
-            width: 20%;
-            flex-basis: 20%;
-          }
-        }
-
-        &-25 {
-          @include media-xxl {
-            width: 25%;
-            flex-basis: 25%;
-          }
-        }
-
-        &-30 {
-          @include media-xxl {
-            width: 30%;
-            flex-basis: 30%;
-          }
-        }
-
-        &-33 {
-          @include media-xxl {
-            width: 33.33%;
-            flex-basis: 33.33%;
-          }
-        }
-
-        &-40 {
-          @include media-xxl {
-            width: 40%;
-            flex-basis: 40%;
-          }
-        }
-
-        &-50 {
-          @include media-xxl {
-            width: 50%;
-            flex-basis: 50%;
-          }
-        }
-
-        &-60 {
-          @include media-xxl {
-            width: 60%;
-            flex-basis: 60%;
-          }
-        }
-
-        &-66 {
-          @include media-xxl {
-            width: 66.66%;
-            flex-basis: 66.66%;
-          }
-        }
-
-        &-70 {
-          @include media-xxl {
-            width: 70%;
-            flex-basis: 70%;
-          }
-        }
-
-        &-75 {
-          @include media-xxl {
-            width: 75%;
-            flex-basis: 75%;
-          }
-        }
-
-        &-80 {
-          @include media-xxl {
-            width: 80%;
-            flex-basis: 80%;
-          }
-        }
-
-        &-90 {
-          @include media-xxl {
-            width: 90%;
-            flex-basis: 90%;
-          }
-        }
-
-        &-100 {
-          @include media-xxl {
-            width: 100%;
-            flex-basis: 100%;
-          }
-        }
-      }
-
-      &--datepicker {
-        flex-direction: row;
-      }
-
-      &--success-message {
-        max-width: var(--tide-booking-container-article);
-        margin-right: auto;
-        margin-left: auto;
-      }
-
-      &--inline {
-        width: auto;
-        flex-grow: 0;
-        white-space: nowrap;
-      }
-    }
-
-    & + .form__row {
-      margin-top: 15px;
-    }
-
-    &--actions {
-      .form__group {
-        flex-flow: row nowrap;
-        align-items: flex-end;
-        justify-content: flex-end;
-      }
-    }
-
-    &--additional-actions {
-      .form__group {
-        @include row--sm;
-        @include flex--centerXY;
-      }
-    }
-
-    &--choose-office {
-      display: flex;
-    }
-
-    &--disclaimer {
-      width: 100%;
-    }
-
-    &--validation {
-      margin-bottom: 15px;
-      flex-direction: column;
-      color: var(--tide-booking-invalid-dark);
-
-      p {
-        opacity: 1;
-      }
-
-      ul {
-        margin-inline-start: 30px;
-        margin-top: 10px;
-      }
-
-      .form {
-        &__group {
-          flex-basis: initial;
-        }
-      }
-    }
-
-    &--inline {
-      align-items: flex-end;
-
-      .form__group {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &__group {
-    @extend %reset;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-
-    &-input {
-      position: relative;
-      width: 100%;
-    }
-
-    .checkbox {
-      & + .checkbox {
-        margin-top: 15px;
-      }
-    }
-
-    .radiobutton {
-      & + .radiobutton {
-        margin-top: 15px;
-      }
-    }
-
-    &--error {
-      .form {
-        &__label {
-          color: var(--tide-booking-invalid);
-        }
-
-        &__input {
-          border-color: var(--tide-booking-invalid-light);
-          color: var(--tide-booking-invalid-dark);
-          background: var(--tide-booking-invalid-light);
-        }
-      }
-
-      .radiobutton {
-        &__label {
-          color: var(--tide-booking-invalid-dark);
-        }
-
-        &__input {
-          border: 2px solid var(--tide-booking-invalid-dark);
-          background: var(--tide-booking-invalid-light);
-
-          &:after {
-            background: var(--tide-booking-invalid-dark);
-          }
-        }
-      }
-
-      ::-webkit-input-placeholder {
-        color: var(--tide-booking-invalid-dark);
-      }
-
-      ::-moz-placeholder {
-        color: var(--tide-booking-invalid-dark);
-      }
-
-      :-ms-input-placeholder {
-        color: var(--tide-booking-invalid-dark);
-      }
-
-      :-moz-placeholder {
-        color: var(--tide-booking-invalid-dark);
-      }
-    }
-
-    &--icon {
-      &:focus,
-      &:focus-within,
-      &:active {
-        .icon {
-          svg {
-            fill: var(--tide-booking-color-secondary);
-          }
-        }
-      }
-
-      .form {
-        &__label {
-          position: absolute;
-          top: 3px;
-          left: 47.5px;
-          font-size: 13px;
-          pointer-events: none;
-
-          @include media-sm {
-            left: 17.5px;
-          }
-
-          @include media-xl {
-            left: 47.5px;
-          }
-        }
-
-        &__input {
-          height: 45px;
-          max-height: 45px;
-          padding-left: 20px;
-          padding-top: 16px;
-          font-size: 14.5px;
-          background-color: white;
-
-          @include media-sm {
-            padding-left: 20px;
-          }
-
-          @include media-md {
-            padding-left: 20px;
-          }
-
-          @include media-xl {
-            font-size: 15.5px;
-          }
-        }
-
-        .typeahead {
-          &__trigger {
-            height: 45px;
-            max-height: 45px;
-            padding-left: 40px;
-            font-size: 16px;
-            background-color: white;
-
-            @include media-sm {
-              padding-left: 10px;
-            }
-
-            @include media-md {
-              padding-left: 40px;
-            }
-          }
-        }
-      }
-    }
-
-    &--datepicker {
-      .form__group-input {
-        width: 50%;
-      }
-
-      .form__group-input:nth-child(1) .form__input {
-        border-radius: 5px;
-      }
-
-      .form__group-input:nth-child(2) .form__input {
-        border-radius: 5px;
-      }
-    }
-
-    &--datepicker {
-      @include column;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 0px;
-      position: relative;
-
-      @include media-sm {
-        flex-direction: row;
-      }
-
-      .form__group-input {
-        width: 100%;
-
-        @include media-sm {
-          width: 50%;
-        }
-
-        // &:nth-child(1),
-        // &:nth-child(2) {
-        //   .form__input {
-        //     border-radius: 5px;
-        //     border-right: 1.5px solid var(--tide-booking-gray-background-light);
-        //     border-left: 1.5px solid var(--tide-booking-gray-background-light);
-        //   }
-        // }
-      }
-
-      .qsm__panel {
-        display: flex;
-        background-color: rgba(255, 255, 255, 0.97);
-        z-index: 98;
-        visibility: hidden;
-        opacity: 0;
-        transition: all 0.3s ease-in-out;
-
-        &--active {
-          visibility: visible;
-          pointer-events: all;
-          opacity: 1;
-          width: 100vw;
-
-          @include media-sm {
-            width: auto;
-          }
-        }
-      }
-    }
-
-    &--submit {
-      .cta {
-        width: 100%;
-        justify-content: center;
-      }
-    }
-
-    &--success-message {
-      &:before {
-        content: '';
-        width: 15px * 3.33;
-        height: 15px * 1.33;
-        border-left: 2.5px solid black;
-        border-bottom: 2.5px solid black;
-        margin: 0 auto 15px * 3 auto;
-        transform: rotate(-45deg);
-      }
-    }
-  }
-
-  &__error-heading {
-    font-family: var(--tide-booking-font-heading);
-  }
-
-  &__room {
-    display: grid;
-    grid-template-rows: repeat(1, 1fr);
-    gap: 15px;
-    padding: 15px;
-    background: var(--tide-booking-room-options-card-background);
-    outline: var(--tide-booking-room-options-card-border);
-    border-radius: var(--tide-booking-room-options-card-border-radius);
-
-    @include media-md {
-      gap: 25px;
-      grid-template-columns: 75% 20%;
-      justify-content: space-between;
-    }
-
-    &__container {
-      // margin-top: -25px;
-    }
-
-    &__header {
-      @include h3;
-      color: #666;
-    }
-
-    &__wrapper {
-      display: grid;
-      grid-template-columns: repeat(1, 1fr);
-      grid-template-rows: repeat(1, 1fr);
-      gap: 15px;
-
-      @include media-sm {
-        gap: 25px;
-        grid-template-columns: 230px 1fr;
-      }
-    }
-
-    &__image {
-      width: 100%;
-      height: 230px;
-      object-fit: cover;
-      overflow: hidden;
-      border-radius: var(--tide-booking-room-options-image-border-radius);
-      position: relative;
-    }
-
-    &__img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      object-position: center;
-    }
-
-    &__favorite {
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: white;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      color: #26b489;
-      font-size: 20px;
-    }
-
-    &__footer {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: flex-end;
-      gap: 10px;
-
-      @include media-xs {
-        flex-direction: row;
-      }
-
-      @include media-md {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-      }
-
-      p {
-        margin-bottom: 0;
-        font-size: 14px;
-        padding-bottom: 2px;
-
-        @include media-md {
-          font-size: 16px;
-          text-align: right;
-        }
-      }
-
-      &__top {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 5px;
-        width: 100%;
-
-        @include media-md {
-          align-items: flex-end;
-        }
-      }
-
-      &__bottom {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        gap: 5px;
-        width: 100%;
-        max-width: 230px;
-      }
-
-      .cta {
-        width: 100%;
-        max-width: 230px;
-        justify-content: center;
-      }
-    }
-
-    &__title {
-      font-family: var(--tide-booking-room-options-title-font-family);
-      font-weight: var(--tide-booking-room-options-title-font-weight);
-      color: var(--tide-booking-room-options-title-color);
-      margin-bottom: 5px;
-    }
-
-    &__text {
-      font-size: 14px;
-      line-height: 18px;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-    }
-
-    &__days {
-      font-size: 14px;
-      @include media-md {
-        font-size: 16px;
-        text-align: right;
-      }
-    }
-
-    &__usps {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      flex-wrap: wrap;
-      gap: 10px;
-      row-gap: 0rem;
-      margin: 0;
-    }
-
-    &__select {
-      display: grid;
-      grid-template-rows: repeat(1, 1fr);
-      gap: 10px;
-      margin-top: 15px;
-
-      @include media-md {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 15px;
-      }
-    }
-
-    &__price {
-      font-size: 16px;
-      font-weight: 400;
-      margin-bottom: 5px;
-
-      span {
-        font-size: 20px;
-        font-weight: 400;
-      }
-
-      &--increase {
-        color: var(--tide-booking-price-increase);
-      }
-
-      &--decrease {
-        color: var(--tide-booking-price-decrease);
-      }
-    }
-
-    &__alternatives {
-      &__header {
-        margin: 30px 0rem 10px 0rem;
-        @include h6;
-        color: var(--tide-booking-room-options-alternative-header-color);
-        font-size: 16px;
-
-        @include media-xl {
-          font-size: 18px;
-        }
-      }
-
-      &__btn {
-        margin-bottom: 5px;
-        outline: none;
-        border: none;
-        background: transparent;
-        text-align: right;
-        color: var(--tide-booking-room-options-alternative-btn-color);
-        text-decoration: var(--tide-booking-room-options-alternative-btn-text-decoration);
-        transition: color 0.3s ease, text-decoration 0.3s ease;
-
-        &:hover {
-          text-decoration: var(--tide-booking-room-options-alternative-btn-text-decoration-hover);
-          color: var(--tide-booking-room-options-alternative-btn-color-hover);
-        }
-      }
-
-      &__content {
-        display: grid;
-        grid-template-columns: repeat(1, 1fr);
-        grid-template-rows: repeat(1, 1fr);
-        gap: 15px;
-
-        @include media-sm {
-          grid-template-columns: repeat(2, 1fr);
-        }
-
-        @include media-xxl {
-          grid-template-columns: repeat(3, 1fr);
-        }
-
-        .form__room {
-          @include media-md {
-            display: grid;
-            grid-template-rows: repeat(1, 1fr);
-            grid-template-columns: 1fr;
-          }
-
-          &__wrapper {
-            @include media-sm {
-              display: grid;
-              grid-template-columns: repeat(1, 1fr);
-              grid-template-rows: repeat(1, 1fr);
-              gap: 15px;
-            }
-          }
-
-          &__footer {
-            @include media-md {
-              flex-direction: row;
-            }
-            &__top {
-              @include media-md {
-                align-items: flex-start;
-              }
-            }
-          }
-
-          &__dates {
-            @include media-md {
-              text-align: left;
-              font-size: 14px;
-            }
-          }
-
-          &__days {
-            @include media-md {
-              text-align: left;
-              font-size: 14px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.form__twocolumn-column + .form__twocolumn-column {
-  margin-top: 15px;
-
-  @include media-xl {
-    margin-top: 0;
-    padding-left: 9px * 2;
-    padding-right: 0;
-  }
-}
-
-.booking .form {
-  max-width: 100%;
-
-  &__region {
-    // background-color: $white;
-
-    .booking-card__body {
-      background-color: transparent;
-    }
-  }
-}
-
-.form__travelers {
-  &__wrapper {
-    background: var(--tide-booking-form-card-background);
-    outline: var(--tide-booking-form-card-border);
-    border-radius: var(--tide-booking-form-card-border-radius);
-    // margin-top: -25px;
-  }
-
-  .form__region {
-    padding: 15px;
-
-    @include media-sm {
-      padding: 15px;
-    }
-
-    @include media-lg {
-      padding: 15px;
-      padding-bottom: 20px;
-    }
-
-    &-heading {
-      margin-bottom: 0px;
-    }
-
-    &-header {
-      display: flex;
-      flex-flow: row wrap;
-      align-items: center;
-      margin: 15px 0px;
-      margin-top: 5px;
-    }
-
-    &-label {
-      margin-top: 5px;
-      margin-bottom: 0;
-      font-size: 16px;
-      color: var(--tide-booking-form-card-label-color);
-
-      @include media-xs {
-        margin-top: 0px;
-      }
-    }
-  }
-
-  .form__group {
-    gap: 5px;
-    margin-bottom: 0px;
-    min-height: 85px;
-
-    .form__label {
-      color: var(--tide-booking-form-label-color);
-      font-family: var(--tide-booking-form-label-font-family);
-      font-weight: var(--tide-booking-form-label-font-weight);
-    }
-
-    &--error {
-      .form__label {
-        color: var(--tide-booking-invalid);
-      }
-    }
-
-    .form__input {
-      min-height: var(--tide-booking-form-input-height);
-
-      &:focus,
-      &:active {
-        border: var(--tide-booking-form-input-border-focus);
-      }
-    }
-  }
-}
-
-.booking .form__region {
-  &--errors {
-    background-color: transparent;
-    padding-left: 15px !important;
-  }
-}
-
-.booking .form__region + .form__region {
-  margin-top: 0;
-  border-top: var(--tide-booking-form-group-border);
-}
-
-.booking__panel .typeahead .form__input {
-  outline: var(--tide-booking-form-typeahead-agent-border);
-  background: var(--tide-booking-form-typeahead-agent-background);
-  border-radius: var(--tide-booking-form-typeahead-agent-border-radius);
-  color: var(--tide-booking-form-typeahead-agent-color);
-}
-
-.booking__panel-frame--transparent .form__region {
-  // padding-right: 15px;
-  // padding-left: 15px;
-}
-
-.form__booking--summary {
-  margin-top: -25px;
-  background: var(--tide-booking-form-summary-background);
-  border-radius: var(--tide-booking-form-summary-border-radius);
-  outline: var(--tide-booking-form-summary-border);
-
-  .form__region {
-    padding: 22.5px 15px;
-  }
-
-  .form__row + .form__row {
-    margin-top: 0px;
-  }
-
-  li {
-    font-size: 16px;
-    line-height: 1.6;
-    p {
-      font-size: 16px;
-      line-height: 1.6;
-    }
-  }
-}
-
-.form__booking--message {
-  margin-top: -25px;
-  background: var(--tide-booking-confirmation-background);
-  border-radius: var(--tide-booking-confirmation-border-radius);
-  outline: var(--tide-booking-confirmation-border);
-  padding: 0px 15px;
-}
-
-.form__booking--flight {
-  .booking-card__group {
-    outline: none;
-    border-radius: 0px;
-    background: transparent;
-  }
-}
+.form {
+  @extend %reset;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  &__label {
+    @extend %reset;
+    margin-bottom: 15px * 0.5;
+    display: flex;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 22px;
+  }
+
+  &__input {
+    width: 100%;
+    border: var(--tide-booking-form-input-border);
+    background: var(--tide-booking-form-input-background);
+    border-radius: var(--tide-booking-form-input-border-radius);
+    box-sizing: border-box;
+    @extend %transition-easing;
+  }
+
+  &__group {
+    @extend %reset;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    &-input {
+      position: relative;
+      width: 100%;
+
+      &--disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        opacity: 0.6;
+      }
+    }
+
+    &--icon {
+      &:focus,
+      &:focus-within,
+      &:active {
+        .icon {
+          svg {
+            fill: var(--tide-booking-color-secondary);
+          }
+        }
+      }
+
+      .form {
+        &__label {
+          position: absolute;
+          top: 3px;
+          left: 47.5px;
+          font-size: 14px;
+          pointer-events: none;
+          color: var(--tide-booking-datepicker-input-label-color);
+
+          @include media-sm {
+            left: 17.5px;
+          }
+
+          @include media-lg {
+            font-size: 16px;
+          }
+
+          @include media-xl {
+            left: 47.5px;
+          }
+        }
+
+        &__input {
+          @include input;
+          padding-left: 20px;
+          padding-top: 16px;
+
+          @include media-sm {
+            padding-left: 20px;
+          }
+
+          @include media-md {
+            padding-left: 20px;
+          }
+
+          @include media-xl {
+            font-size: 15.5px;
+          }
+        }
+
+        .typeahead {
+          &__trigger {
+            height: 45px;
+            max-height: 45px;
+            padding-left: 40px;
+            font-size: 16px;
+            background-color: var(--tide-booking-white);
+
+            @include media-sm {
+              padding-left: 10px;
+            }
+
+            @include media-md {
+              padding-left: 40px;
+            }
+          }
+        }
+      }
+    }
+
+    &--datepicker {
+      .form__group-input {
+        width: 50%;
+      }
+    }
+
+    &--submit {
+      .cta {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
+    &--success-message {
+      &:before {
+        content: '';
+        width: 15px * 3.33;
+        height: 15px * 1.33;
+        border-left: 2.5px solid var(--tide-booking-black);
+        border-bottom: 2.5px solid var(--tide-booking-black);
+        margin: 0 auto 15px * 3 auto;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  &__region {
+    @extend %reset;
+
+    & + .form__region {
+      margin-top: 15px * 4;
+    }
+
+    &-header {
+      margin-bottom: 15px * 0.3;
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+    }
+
+    &-heading {
+      @include media-xs {
+        padding-right: 15px * 2;
+      }
+    }
+
+    &-label {
+      width: 100%;
+      // margin-top: -15px * 0.5;
+      order: 2;
+
+      @include media-xs {
+        width: auto;
+        margin-top: 0;
+        // @include marginLeft(15px * 0.2);
+        order: initial;
+        margin-bottom: 11px;
+      }
+    }
+
+    &--errors {
+      padding-left: 0 !important;
+      border: none !important;
+      color: var(--tide-booking-invalid);
+    }
+  }
+
+  &__twocolumn {
+    @include row--xl;
+
+    & + & {
+      margin-top: 15px;
+    }
+
+    & + .form__row {
+      margin-top: 15px;
+    }
+  }
+
+  &__twocolumn-column {
+    @include media-xl {
+      padding-right: 9px * 2;
+    }
+
+    .form__twocolumn-column + .form__twocolumn-column {
+      margin-top: 15px;
+
+      @include media-xl {
+        margin-top: 0;
+        padding-left: 9px * 2;
+        padding-right: 0;
+      }
+    }
+  }
+
+  &__row {
+    @extend %reset;
+    margin-right: -15px * 0.5;
+    margin-left: -15px * 0.5;
+    display: flex;
+    flex-wrap: wrap;
+
+    .form__group {
+      position: relative;
+      width: 100%;
+      max-width: 100%;
+      min-height: 1px;
+      padding-right: 15px * 0.5;
+      padding-left: 15px * 0.5;
+      margin-bottom: 15px;
+      @include column;
+      flex-grow: 1;
+      flex-basis: 100%;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      &--10 {
+        width: 10%;
+        flex: 0 0 10%;
+      }
+
+      &--20 {
+        width: 20%;
+        flex: 0 0 20%;
+      }
+
+      &--25 {
+        width: 25%;
+        flex: 0 0 25%;
+      }
+
+      &--30 {
+        width: 30%;
+        flex: 0 0 30%;
+      }
+
+      &--33 {
+        width: 33.33%;
+        flex: 0 0 33.33%;
+      }
+
+      &--40 {
+        width: 40%;
+        flex: 0 0 40%;
+      }
+
+      &--50 {
+        width: 50%;
+        flex: 0 0 50%;
+      }
+
+      &--60 {
+        width: 60%;
+        flex: 0 0 60%;
+      }
+
+      &--66 {
+        width: 66.66%;
+        flex: 0 0 66.66%;
+      }
+
+      &--70 {
+        width: 70%;
+        flex: 0 0 70%;
+      }
+
+      &--75 {
+        width: 75%;
+        flex: 0 0 75%;
+      }
+
+      &--80 {
+        width: 80%;
+        flex: 0 0 80%;
+      }
+
+      &--90 {
+        width: 90%;
+        flex: 0 0 90%;
+      }
+
+      &--xs {
+        &-10 {
+          @include media-xs {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-xs {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-xs {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-xs {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-xs {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-xs {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-xs {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-xs {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-xs {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-xs {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-xs {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-xs {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-xs {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-xs {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--sm {
+        &-10 {
+          @include media-sm {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-sm {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-sm {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-sm {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-sm {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-sm {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-sm {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-sm {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-sm {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-sm {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-sm {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-sm {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-sm {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-sm {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--md {
+        &-10 {
+          @include media-md {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-md {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-md {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-md {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-md {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-md {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-md {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-md {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-md {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-md {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-md {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-md {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-md {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-md {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--lg {
+        &-10 {
+          @include media-lg {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-lg {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-lg {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-lg {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-lg {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-lg {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-lg {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-lg {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-lg {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-lg {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-lg {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-lg {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-lg {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-lg {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--xl {
+        &-10 {
+          @include media-xl {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-xl {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-xl {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-xl {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-xl {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-xl {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-xl {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-xl {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-xl {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-xl {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-xl {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-xl {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-xl {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-xl {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--xxl {
+        &-10 {
+          @include media-xxl {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-xxl {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-xxl {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-xxl {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-xxl {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-xxl {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-xxl {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-xxl {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-xxl {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-xxl {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-xxl {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-xxl {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-xxl {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-xxl {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--datepicker {
+        flex-direction: row;
+      }
+
+      &--success-message {
+        max-width: var(--tide-booking-container-article);
+        margin-right: auto;
+        margin-left: auto;
+      }
+
+      &--inline {
+        width: auto;
+        flex-grow: 0;
+        white-space: nowrap;
+      }
+    }
+
+    & + .form__row {
+      margin-top: 15px;
+    }
+
+    &--actions {
+      .form__group {
+        flex-flow: row nowrap;
+        align-items: flex-end;
+        justify-content: flex-end;
+      }
+    }
+
+    &--additional-actions {
+      .form__group {
+        @include row--sm;
+        @include flex--centerXY;
+      }
+    }
+
+    &--choose-office {
+      display: flex;
+    }
+
+    &--disclaimer {
+      width: 100%;
+    }
+
+    &--validation {
+      margin-bottom: 15px;
+      flex-direction: column;
+      color: var(--tide-booking-invalid-dark);
+
+      p {
+        opacity: 1;
+      }
+
+      ul {
+        margin-inline-start: 30px;
+        margin-top: 10px;
+      }
+
+      .form {
+        &__group {
+          flex-basis: initial;
+        }
+      }
+    }
+
+    &--inline {
+      align-items: flex-end;
+
+      .form__group {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__group {
+    @extend %reset;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    &-input {
+      position: relative;
+      width: 100%;
+    }
+
+    .checkbox {
+      & + .checkbox {
+        margin-top: 15px;
+      }
+    }
+
+    .radiobutton {
+      & + .radiobutton {
+        margin-top: 15px;
+      }
+    }
+
+    &--error {
+      .form {
+        &__label {
+          color: var(--tide-booking-invalid);
+        }
+
+        &__input {
+          border-color: var(--tide-booking-invalid-light);
+          color: var(--tide-booking-invalid-dark);
+          background: var(--tide-booking-invalid-light);
+        }
+      }
+
+      .radiobutton {
+        &__label {
+          color: var(--tide-booking-invalid-dark);
+        }
+
+        &__input {
+          border: 2px solid var(--tide-booking-invalid-dark);
+          background: var(--tide-booking-invalid-light);
+
+          &:after {
+            background: var(--tide-booking-invalid-dark);
+          }
+        }
+      }
+
+      ::-webkit-input-placeholder {
+        color: var(--tide-booking-invalid-dark);
+      }
+
+      ::-moz-placeholder {
+        color: var(--tide-booking-invalid-dark);
+      }
+
+      :-ms-input-placeholder {
+        color: var(--tide-booking-invalid-dark);
+      }
+
+      :-moz-placeholder {
+        color: var(--tide-booking-invalid-dark);
+      }
+    }
+
+    &--icon {
+      &:focus,
+      &:focus-within,
+      &:active {
+        .icon {
+          svg {
+            fill: var(--tide-booking-color-secondary);
+          }
+        }
+      }
+
+      .form {
+        &__label {
+          position: absolute;
+          top: 3px;
+          left: 47.5px;
+          font-size: 13px;
+          pointer-events: none;
+
+          @include media-sm {
+            left: 17.5px;
+          }
+
+          @include media-xl {
+            left: 47.5px;
+          }
+        }
+
+        &__input {
+          height: 45px;
+          max-height: 45px;
+          padding-left: 20px;
+          padding-top: 16px;
+          font-size: 14.5px;
+          background-color: white;
+
+          @include media-sm {
+            padding-left: 20px;
+          }
+
+          @include media-md {
+            padding-left: 20px;
+          }
+
+          @include media-xl {
+            font-size: 15.5px;
+          }
+        }
+
+        .typeahead {
+          &__trigger {
+            height: 45px;
+            max-height: 45px;
+            padding-left: 40px;
+            font-size: 16px;
+            background-color: white;
+
+            @include media-sm {
+              padding-left: 10px;
+            }
+
+            @include media-md {
+              padding-left: 40px;
+            }
+          }
+        }
+      }
+    }
+
+    &--datepicker {
+      .form__group-input {
+        width: 50%;
+      }
+
+      .form__group-input:nth-child(1) .form__input {
+        border-radius: 5px;
+      }
+
+      .form__group-input:nth-child(2) .form__input {
+        border-radius: 5px;
+      }
+    }
+
+    &--datepicker {
+      @include column;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 0px;
+      position: relative;
+
+      @include media-sm {
+        flex-direction: row;
+      }
+
+      .form__group-input {
+        width: 100%;
+
+        @include media-sm {
+          width: 50%;
+        }
+
+        // &:nth-child(1),
+        // &:nth-child(2) {
+        //   .form__input {
+        //     border-radius: 5px;
+        //     border-right: 1.5px solid var(--tide-booking-gray-background-light);
+        //     border-left: 1.5px solid var(--tide-booking-gray-background-light);
+        //   }
+        // }
+      }
+
+      .qsm__panel {
+        display: flex;
+        background-color: rgba(255, 255, 255, 0.97);
+        z-index: 98;
+        visibility: hidden;
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+
+        &--active {
+          visibility: visible;
+          pointer-events: all;
+          opacity: 1;
+          width: 100vw;
+
+          @include media-sm {
+            width: auto;
+          }
+        }
+      }
+    }
+
+    &--submit {
+      .cta {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
+    &--success-message {
+      &:before {
+        content: '';
+        width: 15px * 3.33;
+        height: 15px * 1.33;
+        border-left: 2.5px solid black;
+        border-bottom: 2.5px solid black;
+        margin: 0 auto 15px * 3 auto;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  &__error-heading {
+    font-family: var(--tide-booking-font-heading);
+  }
+
+  &__room {
+    display: grid;
+    grid-template-rows: repeat(1, 1fr);
+    gap: 15px;
+    padding: 15px;
+    background: var(--tide-booking-room-options-card-background);
+    outline: var(--tide-booking-room-options-card-border);
+    border-radius: var(--tide-booking-room-options-card-border-radius);
+
+    @include media-md {
+      gap: 25px;
+      grid-template-columns: 75% 20%;
+      justify-content: space-between;
+    }
+
+    &__container {
+      // margin-top: -25px;
+    }
+
+    &__header {
+      @include h3;
+      color: #666;
+    }
+
+    &__wrapper {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: repeat(1, 1fr);
+      gap: 15px;
+
+      @include media-sm {
+        gap: 25px;
+        grid-template-columns: 230px 1fr;
+      }
+    }
+
+    &__image {
+      width: 100%;
+      height: 230px;
+      object-fit: cover;
+      overflow: hidden;
+      border-radius: var(--tide-booking-room-options-image-border-radius);
+      position: relative;
+    }
+
+    &__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+
+    &__favorite {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: white;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      color: #26b489;
+      font-size: 20px;
+    }
+
+    &__footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-end;
+      gap: 10px;
+
+      @include media-xs {
+        flex-direction: row;
+      }
+
+      @include media-md {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+
+      p {
+        margin-bottom: 0;
+        font-size: 14px;
+        padding-bottom: 2px;
+
+        @include media-md {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
+
+      &__top {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 5px;
+        width: 100%;
+
+        @include media-md {
+          align-items: flex-end;
+        }
+      }
+
+      &__bottom {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 5px;
+        width: 100%;
+        max-width: 230px;
+      }
+
+      .cta {
+        width: 100%;
+        max-width: 230px;
+        justify-content: center;
+      }
+    }
+
+    &__title {
+      font-family: var(--tide-booking-room-options-title-font-family);
+      font-weight: var(--tide-booking-room-options-title-font-weight);
+      color: var(--tide-booking-room-options-title-color);
+      margin-bottom: 5px;
+    }
+
+    &__text {
+      font-size: 14px;
+      line-height: 18px;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+
+    &__days {
+      font-size: 14px;
+      @include media-md {
+        font-size: 16px;
+        text-align: right;
+      }
+    }
+
+    &__usps {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      gap: 10px;
+      row-gap: 0rem;
+      margin: 0;
+    }
+
+    &__select {
+      display: grid;
+      grid-template-rows: repeat(1, 1fr);
+      gap: 10px;
+      margin-top: 15px;
+
+      @include media-md {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 15px;
+      }
+    }
+
+    &__price {
+      font-size: 16px;
+      font-weight: 400;
+      margin-bottom: 5px;
+
+      span {
+        font-size: 20px;
+        font-weight: 400;
+      }
+
+      &--increase {
+        color: var(--tide-booking-price-increase);
+      }
+
+      &--decrease {
+        color: var(--tide-booking-price-decrease);
+      }
+    }
+
+    &__alternatives {
+      &__header {
+        margin: 30px 0rem 10px 0rem;
+        @include h6;
+        color: var(--tide-booking-room-options-alternative-header-color);
+        font-size: 16px;
+
+        @include media-xl {
+          font-size: 18px;
+        }
+      }
+
+      &__btn {
+        margin-bottom: 5px;
+        outline: none;
+        border: none;
+        background: transparent;
+        text-align: right;
+        color: var(--tide-booking-room-options-alternative-btn-color);
+        text-decoration: var(--tide-booking-room-options-alternative-btn-text-decoration);
+        transition: color 0.3s ease, text-decoration 0.3s ease;
+
+        &:hover {
+          text-decoration: var(--tide-booking-room-options-alternative-btn-text-decoration-hover);
+          color: var(--tide-booking-room-options-alternative-btn-color-hover);
+        }
+      }
+
+      &__content {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        grid-template-rows: repeat(1, 1fr);
+        gap: 15px;
+
+        @include media-sm {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
+        @include media-xxl {
+          grid-template-columns: repeat(3, 1fr);
+        }
+
+        .form__room {
+          @include media-md {
+            display: grid;
+            grid-template-rows: repeat(1, 1fr);
+            grid-template-columns: 1fr;
+          }
+
+          &__wrapper {
+            @include media-sm {
+              display: grid;
+              grid-template-columns: repeat(1, 1fr);
+              grid-template-rows: repeat(1, 1fr);
+              gap: 15px;
+            }
+          }
+
+          &__footer {
+            @include media-md {
+              flex-direction: row;
+            }
+            &__top {
+              @include media-md {
+                align-items: flex-start;
+              }
+            }
+          }
+
+          &__dates {
+            @include media-md {
+              text-align: left;
+              font-size: 14px;
+            }
+          }
+
+          &__days {
+            @include media-md {
+              text-align: left;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.form__twocolumn-column + .form__twocolumn-column {
+  margin-top: 15px;
+
+  @include media-xl {
+    margin-top: 0;
+    padding-left: 9px * 2;
+    padding-right: 0;
+  }
+}
+
+.booking .form {
+  max-width: 100%;
+
+  &__region {
+    // background-color: $white;
+
+    .booking-card__body {
+      background-color: transparent;
+    }
+  }
+}
+
+.form__travelers {
+  &__wrapper {
+    background: var(--tide-booking-form-card-background);
+    outline: var(--tide-booking-form-card-border);
+    border-radius: var(--tide-booking-form-card-border-radius);
+    // margin-top: -25px;
+  }
+
+  .form__region {
+    padding: 15px;
+
+    @include media-sm {
+      padding: 15px;
+    }
+
+    @include media-lg {
+      padding: 15px;
+      padding-bottom: 20px;
+    }
+
+    &-heading {
+      margin-bottom: 0px;
+    }
+
+    &-header {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      margin: 15px 0px;
+      margin-top: 5px;
+    }
+
+    &-label {
+      margin-top: 5px;
+      margin-bottom: 0;
+      font-size: 16px;
+      color: var(--tide-booking-form-card-label-color);
+
+      @include media-xs {
+        margin-top: 0px;
+      }
+    }
+  }
+
+  .form__group {
+    gap: 5px;
+    margin-bottom: 0px;
+    min-height: 85px;
+
+    .form__label {
+      color: var(--tide-booking-form-label-color);
+      font-family: var(--tide-booking-form-label-font-family);
+      font-weight: var(--tide-booking-form-label-font-weight);
+    }
+
+    &--error {
+      .form__label {
+        color: var(--tide-booking-invalid);
+      }
+    }
+
+    .form__input {
+      min-height: var(--tide-booking-form-input-height);
+
+      &:focus,
+      &:active {
+        border: var(--tide-booking-form-input-border-focus);
+      }
+    }
+  }
+}
+
+.booking .form__region {
+  &--errors {
+    background-color: transparent;
+    padding-left: 15px !important;
+  }
+}
+
+.booking .form__region + .form__region {
+  margin-top: 0;
+  border-top: var(--tide-booking-form-group-border);
+}
+
+.booking__panel .typeahead .form__input {
+  outline: var(--tide-booking-form-typeahead-agent-border);
+  background: var(--tide-booking-form-typeahead-agent-background);
+  border-radius: var(--tide-booking-form-typeahead-agent-border-radius);
+  color: var(--tide-booking-form-typeahead-agent-color);
+}
+
+.booking__panel-frame--transparent .form__region {
+  // padding-right: 15px;
+  // padding-left: 15px;
+}
+
+.form__booking--summary {
+  margin-top: -25px;
+  background: var(--tide-booking-form-summary-background);
+  border-radius: var(--tide-booking-form-summary-border-radius);
+  outline: var(--tide-booking-form-summary-border);
+
+  .form__region {
+    padding: 22.5px 15px;
+  }
+
+  .form__row + .form__row {
+    margin-top: 0px;
+  }
+
+  li {
+    font-size: 16px;
+    line-height: 1.6;
+    p {
+      font-size: 16px;
+      line-height: 1.6;
+    }
+  }
+}
+
+.form__booking--message {
+  margin-top: -25px;
+  background: var(--tide-booking-confirmation-background);
+  border-radius: var(--tide-booking-confirmation-border-radius);
+  outline: var(--tide-booking-confirmation-border);
+  padding: 0px 15px;
+}
+
+.form__booking--flight {
+  .booking-card__group {
+    outline: none;
+    border-radius: 0px;
+    background: transparent;
+  }
+}