@qite/tide-booking-component 1.4.93 → 1.4.94

package/styles/qsm/_qsm.scss

@@ -1,1094 +1,1094 @@
-@use '../components/mixins' as mixins;
-
-* {
-  box-sizing: border-box;
-}
-
-.qsm {
-  position: relative;
-  z-index: 10; // was 5
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  @include mixins.container-wide;
-  max-width: 1780px;
-
-  &--toggleable {
-    position: relative;
-    z-index: 2; // above the overlay
-
-    .qsm__content {
-      box-shadow: none;
-    }
-  }
-
-  &--overlay {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(37, 87, 92, 0.6);
-    z-index: 1;
-    pointer-events: none;
-  }
-
-  &--expanded-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(37, 87, 92, 0.6);
-    z-index: 30; // was 8
-  }
-
-  &--with-overlay {
-    z-index: 40; // was 9
-  }
-
-  &__panel {
-    @extend %reset;
-    position: fixed;
-    top: 0px;
-    left: 50%;
-    transform: translatex(-50%);
-    box-sizing: border-box;
-
-    @include mixins.media-sm {
-      position: absolute;
-      border-radius: 5px;
-    }
-  }
-
-  &__close {
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    fill: var(--tide-booking-datepicker-close-color);
-  }
-
-  &__close-button {
-    position: absolute;
-    top: 2rem;
-    right: 2rem;
-    background: none;
-    border: none;
-    color: var(--tide-booking-primary-color);
-    font-size: 20px;
-    text-decoration: underline;
-    cursor: pointer;
-    z-index: 20;
-
-    @include mixins.media-xl {
-      top: 2rem;
-      right: 8rem;
-    }
-
-    @include mixins.media-lg {
-      top: 1.25rem;
-      right: 5rem;
-    }
-
-    @include mixins.media-md {
-      top: 1.25rem;
-      right: 5rem;
-    }
-
-    @include mixins.media-sm {
-      top: 0;
-      right: 1rem;
-    }
-  }
-
-  &__single-input-wrapper {
-    position: relative;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-
-    .icon {
-      position: absolute;
-      z-index: 21;
-      left: 10px;
-      top: 50%;
-      pointer-events: none;
-      fill: var(--tide-booking-input-icon-color);
-
-      &--splittable {
-        display: none;
-
-        @include mixins.media-sm {
-          display: block;
-        }
-      }
-    }
-  }
-
-  &__tabs {
-    display: flex;
-    align-items: center;
-    border-bottom: var(--tide-booking-qsm-tabs-border-bottom);
-    overflow-x: auto;
-    width: 100%;
-    @extend %scrollbar-none;
-  }
-
-  &__tab {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: nowrap;
-    gap: 5px;
-    width: 100%;
-    padding: 20px 10px;
-    font-size: var(--tide-booking-qsm-tab-font-size);
-    font-weight: var(--tide-booking-qsm-tab-font-weight);
-    color: var(--tide-booking-qsm-tab-color);
-    background: var(--tide-booking-qsm-tab-background);
-    border: none;
-    transition: all 0.3s ease-in-out;
-    white-space: nowrap;
-
-    &::before {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 3px;
-      background: var(--tide-booking-qsm-tab-border-bottom-color);
-      border-radius: var(--tide-booking-qsm-tab-border-bottom-radius);
-      opacity: 0;
-      transition: all 0.3s ease-in-out;
-    }
-
-    .icon {
-      height: 16px;
-      width: auto;
-    }
-
-    &__icons {
-      display: flex;
-      align-items: center;
-      gap: 3px;
-    }
-
-    &:hover {
-      cursor: pointer;
-      color: var(--tide-booking-qsm-tab-color-hover);
-      background: var(--tide-booking-qsm-tab-background-hover);
-
-      &::before {
-        opacity: 1;
-      }
-    }
-
-    &--active {
-      font-weight: var(--tide-booking-qsm-tab-font-weight-active);
-      color: var(--tide-booking-qsm-tab-color-active);
-      background: var(--tide-booking-qsm-tab-background-active);
-
-      &::before {
-        background: var(--tide-booking-qsm-tab-border-bottom-color-active);
-        opacity: 1;
-      }
-    }
-  }
-
-  &__filter {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-
-    @include mixins.media-md {
-      display: grid;
-      grid-template-columns: auto 1fr;
-    }
-
-    &__classgroup {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      flex-wrap: wrap;
-      width: auto;
-
-      @include mixins.media-sm {
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-      }
-    }
-
-    &__inputgroup {
-      flex-direction: column;
-      gap: 1rem;
-
-      @include mixins.media-sm {
-        flex-direction: row;
-        gap: 0rem;
-        margin-top: 10px;
-      }
-    }
-  }
-
-  &__wrapper {
-    width: 100%;
-    height: fit-content;
-    min-height: 3.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    // background-color: variables.$white;
-    // border-bottom: 2px solid variables.$secondary-color;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 1rem;
-    position: relative;
-
-    padding: 20px;
-    padding-top: 0px;
-    width: 100%;
-    height: 100%;
-
-    background: var(--tide-booking-qsm-container-background);
-    border-radius: var(--tide-booking-qsm-container-border-radius);
-    box-shadow: var(--tide-booking-qsm-container-box-shadow);
-
-    @include mixins.media-sm {
-      padding: 0 30px;
-      padding-bottom: 20px;
-    }
-
-    @include mixins.media-lg {
-      padding: 0 45px;
-      padding-bottom: 20px;
-      height: auto;
-    }
-
-    // @include mixins.media-sm {
-    //   box-shadow: none;
-    //   padding-top: 0;
-    //   border-bottom-left-radius: 20px; // Rounded bottom-left corner
-    //   border-bottom-right-radius: 20px; // Rounded bottom-right corner
-
-    //   &::after {
-    //     content: '';
-    //     position: absolute;
-    //     bottom: 0;
-    //     left: 0;
-    //     width: 100%;
-    //     height: 50px; // Adjust height as needed
-    //     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    //     border-bottom-left-radius: 20px;
-    //     border-bottom-right-radius: 20px;
-    //     pointer-events: none; // Prevent interaction with the pseudo-element
-    //   }
-
-    //   &--no-shadow {
-    //     &::after {
-    //       display: none;
-    //     }
-    //   }
-    // }
-    @include mixins.media-xl {
-      height: auto;
-    }
-
-    &--bg-svg {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 2;
-
-      max-width: 100%;
-      max-height: 100%;
-
-      @include mixins.media-lg {
-        display: none;
-      }
-    }
-  }
-
-  // &__radio-group,
-  // &__checkbox-group {
-  //   display: flex;
-  //   gap: 1rem;
-  //   z-index: 1000;
-
-  //   @include mixins.media-sm {
-  //     flex-direction: column;
-  //   }
-  // }
-
-  // &__radio-group {
-  //   margin-bottom: 1.5rem;
-  //   margin-left: 0.5rem;
-  // }
-
-  // &__checkbox-group {
-  //   margin-top: 1.5rem;
-  //   margin-left: 0.5rem;
-
-  //   @include mixins.media-sm {
-  //     margin-top: 0.5rem;
-  //   }
-  // }
-
-  // &__checkbox-label {
-  //   display: flex;
-  //   align-items: center;
-  //   cursor: pointer;
-  // }
-
-  // &__checkbox-input {
-  //   margin-right: 0.5rem;
-  // }
-
-  &__input-group {
-    // display: flex;
-    // align-items: center;
-    // justify-content: space-between;
-    // flex-wrap: wrap;
-    display: grid;
-    // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-template-columns: repeat(1, 1fr);
-    grid-template-rows: repeat(1, 1fr);
-    align-items: flex-end;
-    width: 100%;
-    max-width: 100%;
-    gap: 1rem;
-
-    // & > * {
-    //   flex: 1 1 0;
-    //   min-width: 18rem;
-    //   max-width: 100%;
-    // }
-
-    @include mixins.media-sm {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    @include mixins.media-lg {
-      gap: 1rem;
-      grid-template-columns: repeat(4, 1fr);
-    }
-  }
-
-  &__from-to {
-    @include mixins.media-md {
-      width: 100%;
-    }
-  }
-
-  // &__submit-button {
-  //   display: flex;
-  //   justify-content: center;
-  //   align-items: center;
-  //   gap: 0.75rem;
-
-  //   background: variables.$secondary-color;
-  //   border: variables.$secondary-color;
-  //   border-radius: 3px;
-  //   color: variables.$white;
-  //   min-width: 8.5rem;
-  //   max-width: 8.5rem;
-  //   min-height: 3.5rem;
-
-  //   cursor: pointer;
-  //   transition: all 0.2s ease-in-out;
-  //   z-index: 5;
-  //   text-decoration: none;
-
-  //   // @include mixins.media-xl {
-  //   //   margin-top: 1.5rem;
-  //   // }
-
-  //   @include mixins.media-md {
-  //     margin-top: 2.5rem;
-  //     order: 10;
-  //     align-self: flex-start;
-  //   }
-
-  //   @include mixins.media-sm {
-  //     width: 100%;
-  //     max-width: 100%;
-  //     margin-top: 1.5rem;
-  //     margin-bottom: 0.5rem;
-  //   }
-  // }
-
-  &__double-input {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-    width: 100%;
-    gap: 1rem;
-    // height: 100%;
-
-    @include mixins.media-sm {
-      flex-direction: row;
-      min-width: 0;
-      height: auto;
-      align-items: center;
-    }
-
-    &__wrapper {
-      position: relative;
-      display: flex;
-      max-width: 100%;
-      width: 100%;
-      gap: 1rem;
-    }
-
-    .icon {
-      position: absolute;
-      z-index: 21;
-      left: 10px;
-      top: 50%;
-      pointer-events: none;
-      fill: var(--tide-booking-input-icon-color);
-
-      &--splittable {
-        display: none;
-
-        @include mixins.media-sm {
-          display: block;
-        }
-      }
-    }
-
-    &--splittable {
-      flex-direction: column;
-      gap: 1rem;
-
-      @include mixins.media-sm {
-        flex-direction: row;
-        grid-column: span 2;
-      }
-
-      @include mixins.media-lg {
-        grid-column: span 4;
-      }
-    }
-
-    &--travel-modal {
-      background: var(--tide-booking-passenger-picker-background);
-      overflow-y: auto;
-      @extend %scrollbar-thin;
-    }
-
-    &--date-modal {
-      padding: 20px;
-      flex-direction: column;
-      background: white;
-      overflow-y: auto;
-      @extend %scrollbar-thin;
-    }
-
-    &--search-modal {
-      padding: 20px;
-      background: white;
-      overflow-y: auto;
-      @extend %scrollbar-thin;
-    }
-
-    &:first-child {
-      border-radius: 0 0 0 4px;
-    }
-
-    &:last-child {
-      border-radius: 0 0 4px 0;
-    }
-
-    &-options {
-      position: relative;
-      z-index: 25;
-      width: 100%;
-      background: var(--tide-booking-qsm-input-options-background);
-      border: var(--tide-booking-qsm-input-options-border);
-      box-shadow: var(--tide-booking-qsm-input-options-box-shadow);
-      // border-bottom: 4px solid variables.$secondary-color;
-      display: flex;
-      flex-direction: column;
-
-      @include mixins.media-md {
-        width: 100%;
-      }
-
-      @include mixins.media-sm {
-        border: none;
-        position: absolute;
-        top: 64px;
-
-        // & > *:nth-child(2) {
-        //   border-top: var(--tide-booking-qsm-input-option-child-border);
-        // }
-      }
-
-      &--splittable {
-        width: 200%;
-
-        @include mixins.media-md {
-          width: 100%;
-        }
-      }
-
-      &--second-input {
-        left: -100%;
-
-        @include mixins.media-sm {
-          left: 0;
-        }
-      }
-
-      &-title {
-        padding: 0.5rem 1.75rem;
-        margin-top: 0.25rem;
-
-        font-size: var(--tide-booking-qsm-input-options-title-font-size);
-        color: var(--tide-booking-qsm-input-options-title-color);
-        font-weight: var(--tide-booking-qsm-input-options-title-font-weight);
-
-        @include mixins.media-sm {
-          padding-top: 0;
-          opacity: 0;
-        }
-      }
-    }
-
-    &-option {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 0.5rem;
-
-      padding: 0.75rem 1rem;
-      cursor: pointer;
-      transition: all 0.3s;
-
-      @include mixins.media-sm {
-        border-bottom: var(--tide-booking-qsm-input-option-child-border);
-      }
-
-      &:hover {
-        background: var(--tide-booking-qsm-input-option-child-background);
-      }
-
-      &-content {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        font-size: var(--tide-booking-qsm-input-option-child-font-size);
-
-        &-country {
-          color: #c6c6c6;
-        }
-
-        &-airport-label {
-          font-size: var(--tide-booking-qsm-input-option-child-airport-label-font-size);
-          color: var(--tide-booking-qsm-input-option-child-airport-label-color);
-        }
-
-        &-text {
-          display: flex;
-          flex-direction: column;
-          gap: 0.25rem;
-          margin-left: 0.25rem;
-          font-size: var(--tide-booking-qsm-input-option-child-airport-label-text);
-        }
-
-        &--airport {
-          color: var(--tide-booking-qsm-input-option-child-airport-color);
-        }
-      }
-
-      .icon {
-        fill: --tide-booking-qsm-input-option-child-icon;
-        position: relative;
-        left: 0px;
-      }
-    }
-  }
-
-  &__input-wrapper {
-    position: relative;
-    flex: 1 1 0;
-    min-width: 0;
-    width: 100%;
-
-    display: flex;
-    flex-direction: column;
-
-    &--splittable {
-      @include mixins.media-md {
-        width: 100%;
-      }
-    }
-
-    &--rooms {
-      @include mixins.media-md {
-        flex: 1 1 auto;
-      }
-    }
-  }
-
-  &__reverse {
-    &-wrapper {
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      z-index: 22;
-      right: 13px;
-      top: 57%;
-      transform: translate(-50%, -50%);
-
-      @include mixins.media-sm {
-        right: 50%;
-        top: 65%;
-      }
-    }
-
-    &-content {
-      position: relative;
-    }
-  }
-
-  &__input-line {
-    // height: 2.5rem;
-    // border: none;
-    // border-right: 1.75px solid red;
-
-    &--splittable {
-      @include mixins.media-sm {
-      }
-    }
-
-    &--datepicker {
-      position: absolute;
-      z-index: 30;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 0;
-    }
-
-    &--reverse-button {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      height: 32px;
-      width: 32px;
-      z-index: 4;
-      fill: var(--tide-booking-input-reverse-btn-fill);
-      border: var(--tide-booking-input-reverse-btn-border);
-      background: var(--tide-booking-input-reverse-btn-background);
-      border-radius: var(--tide-booking-input-reverse-btn-border-radius);
-      box-shadow: var(--tide-booking-input-reverse-btn-box-shadow);
-      padding: 5px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all 0.3s ease;
-
-      @include mixins.media-sm {
-      }
-
-      &-single {
-        right: -0.7rem;
-        padding: 0.2rem 0;
-      }
-
-      &-single--reverse {
-        right: -0.3rem;
-        padding: 0.2rem 0;
-        transform: rotate(180deg);
-      }
-
-      &:hover {
-        fill: var(--tide-booking-input-reverse-btn-fill-hover);
-        background: var(--tide-booking-input-reverse-btn-background-hover);
-        border: var(--tide-booking-input-reverse-btn-border-hover);
-        box-shadow: var(--tide-booking-input-reverse-btn-box-shadow-hover);
-      }
-    }
-  }
-
-  &__label {
-    position: relative;
-    z-index: 21;
-    left: 0;
-    top: 0rem;
-    padding-bottom: 5px;
-
-    font-size: var(--tide-booking-input-label-font-size);
-    font-weight: var(--tide-booking-input-label-font-weight);
-    color: var(--tide-booking-input-label-color);
-
-    pointer-events: none;
-    transition: all 0.2s ease;
-
-    &--second-input-label {
-      left: 0;
-    }
-
-    &--splittable {
-      @include mixins.media-sm {
-        left: 0;
-      }
-    }
-  }
-
-  &__input {
-    padding: 10px 10px 10px 32px;
-
-    &--modal {
-      @include mixins.media-sm {
-        padding-top: 0.125rem;
-      }
-    }
-
-    &--single-input {
-      width: 100%;
-    }
-
-    &--splittable {
-      @include mixins.media-sm {
-        padding-left: 2rem;
-      }
-    }
-
-    &::placeholder {
-      color: var(--tide-booking-input-placeholder-color);
-    }
-
-    &:focus {
-      border: var(--tide-booking-input-border-focus);
-      .qsm__input-icon {
-        fill: var(--tide-booking-input-icon-color-focus);
-      }
-    }
-  }
-
-  // // ====================
-  // // Custom Radio
-  // // ====================
-  // .custom-radio {
-  //   display: flex;
-  //   align-items: center;
-  //   font-size: variables.$font-size-body--small;
-  //   cursor: pointer;
-
-  //   input {
-  //     display: none;
-  //   }
-
-  //   .radio-mark {
-  //     width: 1.25rem;
-  //     height: 1.25rem;
-  //     margin-right: 0.75rem;
-
-  //     display: flex;
-  //     align-items: center;
-  //     justify-content: center;
-
-  //     border: 1.5px solid #c6c6c6;
-  //     border-radius: 50%;
-
-  //     transition: 0.3s ease;
-
-  //     &::after {
-  //       content: '';
-  //       width: 8px;
-  //       height: 8px;
-  //       background: variables.$secondary-color;
-  //       border-radius: 50%;
-
-  //       transform: scale(0);
-  //       transition: 0.3s ease;
-  //     }
-  //   }
-
-  //   input:checked + .radio-mark {
-  //     border: 1.5px solid variables.$secondary-color;
-  //   }
-
-  //   input:checked + .radio-mark::after {
-  //     transform: scale(1);
-  //   }
-  // }
-
-  // ====================
-  // Custom Checkbox
-  // ====================
-  .custom-checkbox {
-    display: flex;
-    align-items: center;
-    // font-size: variables.$font-size-body--small;
-    cursor: pointer;
-
-    input {
-      display: none;
-    }
-
-    &__checkmark {
-      width: 1.25rem;
-      height: 1.25rem;
-      margin-right: 0.5rem;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      background: transparent;
-      border: 1.5px solid #c6c6c6;
-      border-radius: 3px;
-      transition: 0.3s ease;
-
-      &::after {
-        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10.463" viewBox="0 0 14 10.463"><path id="Path_47" data-name="Path 47" d="M199.765-682.537,195-687.277l1.253-1.277,3.512,3.512L207.747-693,209-691.747Z" transform="translate(-195 693)" fill="%23fff"/></svg>');
-        transform: scale(0);
-        transition: 0.3s ease;
-      }
-
-      &--invalid {
-        border: 1.5px solid #e65501;
-      }
-    }
-
-    input:checked + .custom-checkbox__checkmark {
-      background: red;
-      border: 1.5px solid pink;
-
-      &::after {
-        margin-top: 0.1rem;
-        transform: scale(1);
-      }
-    }
-  }
-
-  // // ====================
-  // // Utility
-  // // ====================
-  // .u-ps-2 {
-  //   padding-left: 2rem !important;
-
-  //   &--second {
-  //     @include mixins.media-sm {
-  //       padding-left: 2rem;
-  //     }
-  //   }
-  // }
-
-  // .u-page-overlay {
-  //   position: absolute;
-  //   top: calc(100% + 1px); // right after QSM, or you can use a ref for precision
-  //   left: 0;
-  //   width: 100%;
-  //   height: 100%; // or calculate dynamically if needed
-  //   background: rgba(37, 87, 92, 0.8);
-  //   z-index: 1; // must be *below* qsm but *above* rest of page
-  // }
-
-  // .dropdown-menu {
-  //   z-index: 40;
-  // }
-
-  .mobile-qsm-filter {
-    &__modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background: var(--tide-booking-qsm-filter-mobile-background);
-      z-index: 50;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      overflow-y: auto;
-
-      &-wrapper {
-        display: flex;
-        flex-direction: column;
-      }
-
-      &-header {
-        position: sticky;
-        top: 0;
-        left: 0;
-        z-index: 51;
-        background: var(--tide-booking-qsm-filter-mobile-header-background);
-        box-shadow: var(--tide-booking-qsm-filter-mobile-header-box-shadow);
-        border: var(--tide-booking-qsm-filter-mobile-header-border);
-        display: flex;
-        align-items: end;
-        width: 100%;
-        padding: 20px;
-
-        &-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          @include mixins.container;
-          padding: 0px;
-        }
-
-        &-title {
-          font-size: var(--tide-booking-qsm-filter-mobile-header-font-size);
-          font-weight: var(--tide-booking-qsm-filter-mobile-header-font-weight);
-          color: var(--tide-booking-qsm-filter-mobile-header-color);
-        }
-
-        &-close {
-          position: absolute;
-          right: 20px;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 20px;
-          height: 20px;
-          opacity: 0.3;
-          cursor: pointer;
-          transition: opacity 0.3s ease-in-out;
-
-          &:hover {
-            opacity: 1;
-          }
-
-          &:before,
-          &:after {
-            position: absolute;
-            left: 15px;
-            content: ' ';
-            height: 22px;
-            width: 2px;
-            background: var(--tide-booking-color-primary);
-          }
-
-          &:before {
-            transform: rotate(45deg);
-          }
-          &:after {
-            transform: rotate(-45deg);
-          }
-        }
-      }
-
-      &-footer {
-        position: relative;
-        width: 100%;
-        height: 6rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 20px 6%;
-        z-index: 51;
-        border: var(--tide-booking-qsm-filter-mobile-footer-border);
-        background: var(--tide-booking-qsm-filter-mobile-footer-background);
-        box-shadow: var(--tide-booking-qsm-filter-mobile-footer-box-shadow);
-        margin-top: auto;
-
-        &-button {
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          opacity: 0.5;
-          border: none;
-          cursor: not-allowed;
-          pointer-events: none;
-          z-index: 52; // was 1100002
-          transition: all 0.3s ease-in-out;
-
-          &--active {
-            cursor: pointer;
-            pointer-events: auto;
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-
-  //   &__background {
-  //     &-content {
-  //       display: flex;
-  //       flex-direction: column;
-  //       gap: 0.6rem;
-  //       align-items: center;
-  //       position: fixed;
-  //       top: 50%;
-  //       left: 50%;
-  //       transform: translate(-50%, -50%);
-  //       width: 100%;
-  //     }
-
-  //     &-icon {
-  //       text-align: center;
-  //     }
-
-  //     &-title {
-  //       font-size: variables.$font-size-h5;
-  //       color: variables.$secondary-color;
-  //       text-align: center;
-  //     }
-
-  //     &-subtitle {
-  //       color: #c6c6c6;
-  //       font-size: variables.$font-size-body;
-  //       text-align: center;
-  //     }
-
-  .qsm__input-group {
-    .booking-product__dates {
-      &-title {
-        position: relative;
-        z-index: 21;
-        left: 0;
-        top: 0rem;
-        padding-bottom: 5px;
-        font-size: var(--tide-booking-input-label-font-size);
-        font-weight: var(--tide-booking-input-label-font-weight);
-        color: var(--tide-booking-input-label-color);
-        pointer-events: none;
-        transition: all 0.2s ease;
-
-        svg {
-          display: none;
-        }
-      }
-
-      .form__input {
-        padding: 0px 10px;
-      }
-
-      .form__label {
-        display: none;
-      }
-    }
-
-    .qsm__pannel--mobile {
-      top: 0;
-      position: fixed;
-      bottom: 0;
-    }
-  }
-
-  &:has(.qsm__panel--active) {
-    z-index: 21;
-  }
-}
+@use '../components/mixins' as mixins;
+
+* {
+  box-sizing: border-box;
+}
+
+.qsm {
+  position: relative;
+  z-index: 10; // was 5
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  @include mixins.container-wide;
+  max-width: 1780px;
+
+  &--toggleable {
+    position: relative;
+    z-index: 2; // above the overlay
+
+    .qsm__content {
+      box-shadow: none;
+    }
+  }
+
+  &--overlay {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(37, 87, 92, 0.6);
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  &--expanded-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(37, 87, 92, 0.6);
+    z-index: 30; // was 8
+  }
+
+  &--with-overlay {
+    z-index: 40; // was 9
+  }
+
+  &__panel {
+    @extend %reset;
+    position: fixed;
+    top: 0px;
+    left: 50%;
+    transform: translatex(-50%);
+    box-sizing: border-box;
+
+    @include mixins.media-sm {
+      position: absolute;
+      border-radius: 5px;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    fill: var(--tide-booking-datepicker-close-color);
+  }
+
+  &__close-button {
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    background: none;
+    border: none;
+    color: var(--tide-booking-primary-color);
+    font-size: 20px;
+    text-decoration: underline;
+    cursor: pointer;
+    z-index: 20;
+
+    @include mixins.media-xl {
+      top: 2rem;
+      right: 8rem;
+    }
+
+    @include mixins.media-lg {
+      top: 1.25rem;
+      right: 5rem;
+    }
+
+    @include mixins.media-md {
+      top: 1.25rem;
+      right: 5rem;
+    }
+
+    @include mixins.media-sm {
+      top: 0;
+      right: 1rem;
+    }
+  }
+
+  &__single-input-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+
+    .icon {
+      position: absolute;
+      z-index: 21;
+      left: 10px;
+      top: 50%;
+      pointer-events: none;
+      fill: var(--tide-booking-input-icon-color);
+
+      &--splittable {
+        display: none;
+
+        @include mixins.media-sm {
+          display: block;
+        }
+      }
+    }
+  }
+
+  &__tabs {
+    display: flex;
+    align-items: center;
+    border-bottom: var(--tide-booking-qsm-tabs-border-bottom);
+    overflow-x: auto;
+    width: 100%;
+    @extend %scrollbar-none;
+  }
+
+  &__tab {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    gap: 5px;
+    width: 100%;
+    padding: 20px 10px;
+    font-size: var(--tide-booking-qsm-tab-font-size);
+    font-weight: var(--tide-booking-qsm-tab-font-weight);
+    color: var(--tide-booking-qsm-tab-color);
+    background: var(--tide-booking-qsm-tab-background);
+    border: none;
+    transition: all 0.3s ease-in-out;
+    white-space: nowrap;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      background: var(--tide-booking-qsm-tab-border-bottom-color);
+      border-radius: var(--tide-booking-qsm-tab-border-bottom-radius);
+      opacity: 0;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .icon {
+      height: 16px;
+      width: auto;
+    }
+
+    &__icons {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+
+    &:hover {
+      cursor: pointer;
+      color: var(--tide-booking-qsm-tab-color-hover);
+      background: var(--tide-booking-qsm-tab-background-hover);
+
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &--active {
+      font-weight: var(--tide-booking-qsm-tab-font-weight-active);
+      color: var(--tide-booking-qsm-tab-color-active);
+      background: var(--tide-booking-qsm-tab-background-active);
+
+      &::before {
+        background: var(--tide-booking-qsm-tab-border-bottom-color-active);
+        opacity: 1;
+      }
+    }
+  }
+
+  &__filter {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+
+    @include mixins.media-md {
+      display: grid;
+      grid-template-columns: auto 1fr;
+    }
+
+    &__classgroup {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      flex-wrap: wrap;
+      width: auto;
+
+      @include mixins.media-sm {
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+
+    &__inputgroup {
+      flex-direction: column;
+      gap: 1rem;
+
+      @include mixins.media-sm {
+        flex-direction: row;
+        gap: 0rem;
+        margin-top: 10px;
+      }
+    }
+  }
+
+  &__wrapper {
+    width: 100%;
+    height: fit-content;
+    min-height: 3.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // background-color: variables.$white;
+    // border-bottom: 2px solid variables.$secondary-color;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 1rem;
+    position: relative;
+
+    padding: 20px;
+    padding-top: 0px;
+    width: 100%;
+    height: 100%;
+
+    background: var(--tide-booking-qsm-container-background);
+    border-radius: var(--tide-booking-qsm-container-border-radius);
+    box-shadow: var(--tide-booking-qsm-container-box-shadow);
+
+    @include mixins.media-sm {
+      padding: 0 30px;
+      padding-bottom: 20px;
+    }
+
+    @include mixins.media-lg {
+      padding: 0 45px;
+      padding-bottom: 20px;
+      height: auto;
+    }
+
+    // @include mixins.media-sm {
+    //   box-shadow: none;
+    //   padding-top: 0;
+    //   border-bottom-left-radius: 20px; // Rounded bottom-left corner
+    //   border-bottom-right-radius: 20px; // Rounded bottom-right corner
+
+    //   &::after {
+    //     content: '';
+    //     position: absolute;
+    //     bottom: 0;
+    //     left: 0;
+    //     width: 100%;
+    //     height: 50px; // Adjust height as needed
+    //     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    //     border-bottom-left-radius: 20px;
+    //     border-bottom-right-radius: 20px;
+    //     pointer-events: none; // Prevent interaction with the pseudo-element
+    //   }
+
+    //   &--no-shadow {
+    //     &::after {
+    //       display: none;
+    //     }
+    //   }
+    // }
+    @include mixins.media-xl {
+      height: auto;
+    }
+
+    &--bg-svg {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 2;
+
+      max-width: 100%;
+      max-height: 100%;
+
+      @include mixins.media-lg {
+        display: none;
+      }
+    }
+  }
+
+  // &__radio-group,
+  // &__checkbox-group {
+  //   display: flex;
+  //   gap: 1rem;
+  //   z-index: 1000;
+
+  //   @include mixins.media-sm {
+  //     flex-direction: column;
+  //   }
+  // }
+
+  // &__radio-group {
+  //   margin-bottom: 1.5rem;
+  //   margin-left: 0.5rem;
+  // }
+
+  // &__checkbox-group {
+  //   margin-top: 1.5rem;
+  //   margin-left: 0.5rem;
+
+  //   @include mixins.media-sm {
+  //     margin-top: 0.5rem;
+  //   }
+  // }
+
+  // &__checkbox-label {
+  //   display: flex;
+  //   align-items: center;
+  //   cursor: pointer;
+  // }
+
+  // &__checkbox-input {
+  //   margin-right: 0.5rem;
+  // }
+
+  &__input-group {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // flex-wrap: wrap;
+    display: grid;
+    // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+    align-items: flex-end;
+    width: 100%;
+    max-width: 100%;
+    gap: 1rem;
+
+    // & > * {
+    //   flex: 1 1 0;
+    //   min-width: 18rem;
+    //   max-width: 100%;
+    // }
+
+    @include mixins.media-sm {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include mixins.media-lg {
+      gap: 1rem;
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__from-to {
+    @include mixins.media-md {
+      width: 100%;
+    }
+  }
+
+  // &__submit-button {
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+  //   gap: 0.75rem;
+
+  //   background: variables.$secondary-color;
+  //   border: variables.$secondary-color;
+  //   border-radius: 3px;
+  //   color: variables.$white;
+  //   min-width: 8.5rem;
+  //   max-width: 8.5rem;
+  //   min-height: 3.5rem;
+
+  //   cursor: pointer;
+  //   transition: all 0.2s ease-in-out;
+  //   z-index: 5;
+  //   text-decoration: none;
+
+  //   // @include mixins.media-xl {
+  //   //   margin-top: 1.5rem;
+  //   // }
+
+  //   @include mixins.media-md {
+  //     margin-top: 2.5rem;
+  //     order: 10;
+  //     align-self: flex-start;
+  //   }
+
+  //   @include mixins.media-sm {
+  //     width: 100%;
+  //     max-width: 100%;
+  //     margin-top: 1.5rem;
+  //     margin-bottom: 0.5rem;
+  //   }
+  // }
+
+  &__double-input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    width: 100%;
+    gap: 1rem;
+    // height: 100%;
+
+    @include mixins.media-sm {
+      flex-direction: row;
+      min-width: 0;
+      height: auto;
+      align-items: center;
+    }
+
+    &__wrapper {
+      position: relative;
+      display: flex;
+      max-width: 100%;
+      width: 100%;
+      gap: 1rem;
+    }
+
+    .icon {
+      position: absolute;
+      z-index: 21;
+      left: 10px;
+      top: 50%;
+      pointer-events: none;
+      fill: var(--tide-booking-input-icon-color);
+
+      &--splittable {
+        display: none;
+
+        @include mixins.media-sm {
+          display: block;
+        }
+      }
+    }
+
+    &--splittable {
+      flex-direction: column;
+      gap: 1rem;
+
+      @include mixins.media-sm {
+        flex-direction: row;
+        grid-column: span 2;
+      }
+
+      @include mixins.media-lg {
+        grid-column: span 4;
+      }
+    }
+
+    &--travel-modal {
+      background: var(--tide-booking-passenger-picker-background);
+      overflow-y: auto;
+      @extend %scrollbar-thin;
+    }
+
+    &--date-modal {
+      padding: 20px;
+      flex-direction: column;
+      background: white;
+      overflow-y: auto;
+      @extend %scrollbar-thin;
+    }
+
+    &--search-modal {
+      padding: 20px;
+      background: white;
+      overflow-y: auto;
+      @extend %scrollbar-thin;
+    }
+
+    &:first-child {
+      border-radius: 0 0 0 4px;
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 0;
+    }
+
+    &-options {
+      position: relative;
+      z-index: 25;
+      width: 100%;
+      background: var(--tide-booking-qsm-input-options-background);
+      border: var(--tide-booking-qsm-input-options-border);
+      box-shadow: var(--tide-booking-qsm-input-options-box-shadow);
+      // border-bottom: 4px solid variables.$secondary-color;
+      display: flex;
+      flex-direction: column;
+
+      @include mixins.media-md {
+        width: 100%;
+      }
+
+      @include mixins.media-sm {
+        border: none;
+        position: absolute;
+        top: 64px;
+
+        // & > *:nth-child(2) {
+        //   border-top: var(--tide-booking-qsm-input-option-child-border);
+        // }
+      }
+
+      &--splittable {
+        width: 200%;
+
+        @include mixins.media-md {
+          width: 100%;
+        }
+      }
+
+      &--second-input {
+        left: -100%;
+
+        @include mixins.media-sm {
+          left: 0;
+        }
+      }
+
+      &-title {
+        padding: 0.5rem 1.75rem;
+        margin-top: 0.25rem;
+
+        font-size: var(--tide-booking-qsm-input-options-title-font-size);
+        color: var(--tide-booking-qsm-input-options-title-color);
+        font-weight: var(--tide-booking-qsm-input-options-title-font-weight);
+
+        @include mixins.media-sm {
+          padding-top: 0;
+          opacity: 0;
+        }
+      }
+    }
+
+    &-option {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+
+      padding: 0.75rem 1rem;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      @include mixins.media-sm {
+        border-bottom: var(--tide-booking-qsm-input-option-child-border);
+      }
+
+      &:hover {
+        background: var(--tide-booking-qsm-input-option-child-background);
+      }
+
+      &-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        font-size: var(--tide-booking-qsm-input-option-child-font-size);
+
+        &-country {
+          color: #c6c6c6;
+        }
+
+        &-airport-label {
+          font-size: var(--tide-booking-qsm-input-option-child-airport-label-font-size);
+          color: var(--tide-booking-qsm-input-option-child-airport-label-color);
+        }
+
+        &-text {
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+          margin-left: 0.25rem;
+          font-size: var(--tide-booking-qsm-input-option-child-airport-label-text);
+        }
+
+        &--airport {
+          color: var(--tide-booking-qsm-input-option-child-airport-color);
+        }
+      }
+
+      .icon {
+        fill: --tide-booking-qsm-input-option-child-icon;
+        position: relative;
+        left: 0px;
+      }
+    }
+  }
+
+  &__input-wrapper {
+    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    &--splittable {
+      @include mixins.media-md {
+        width: 100%;
+      }
+    }
+
+    &--rooms {
+      @include mixins.media-md {
+        flex: 1 1 auto;
+      }
+    }
+  }
+
+  &__reverse {
+    &-wrapper {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 22;
+      right: 13px;
+      top: 57%;
+      transform: translate(-50%, -50%);
+
+      @include mixins.media-sm {
+        right: 50%;
+        top: 65%;
+      }
+    }
+
+    &-content {
+      position: relative;
+    }
+  }
+
+  &__input-line {
+    // height: 2.5rem;
+    // border: none;
+    // border-right: 1.75px solid red;
+
+    &--splittable {
+      @include mixins.media-sm {
+      }
+    }
+
+    &--datepicker {
+      position: absolute;
+      z-index: 30;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 0;
+    }
+
+    &--reverse-button {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 32px;
+      width: 32px;
+      z-index: 4;
+      fill: var(--tide-booking-input-reverse-btn-fill);
+      border: var(--tide-booking-input-reverse-btn-border);
+      background: var(--tide-booking-input-reverse-btn-background);
+      border-radius: var(--tide-booking-input-reverse-btn-border-radius);
+      box-shadow: var(--tide-booking-input-reverse-btn-box-shadow);
+      padding: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      @include mixins.media-sm {
+      }
+
+      &-single {
+        right: -0.7rem;
+        padding: 0.2rem 0;
+      }
+
+      &-single--reverse {
+        right: -0.3rem;
+        padding: 0.2rem 0;
+        transform: rotate(180deg);
+      }
+
+      &:hover {
+        fill: var(--tide-booking-input-reverse-btn-fill-hover);
+        background: var(--tide-booking-input-reverse-btn-background-hover);
+        border: var(--tide-booking-input-reverse-btn-border-hover);
+        box-shadow: var(--tide-booking-input-reverse-btn-box-shadow-hover);
+      }
+    }
+  }
+
+  &__label {
+    position: relative;
+    z-index: 21;
+    left: 0;
+    top: 0rem;
+    padding-bottom: 5px;
+
+    font-size: var(--tide-booking-input-label-font-size);
+    font-weight: var(--tide-booking-input-label-font-weight);
+    color: var(--tide-booking-input-label-color);
+
+    pointer-events: none;
+    transition: all 0.2s ease;
+
+    &--second-input-label {
+      left: 0;
+    }
+
+    &--splittable {
+      @include mixins.media-sm {
+        left: 0;
+      }
+    }
+  }
+
+  &__input {
+    padding: 10px 10px 10px 32px;
+
+    &--modal {
+      @include mixins.media-sm {
+        padding-top: 0.125rem;
+      }
+    }
+
+    &--single-input {
+      width: 100%;
+    }
+
+    &--splittable {
+      @include mixins.media-sm {
+        padding-left: 2rem;
+      }
+    }
+
+    &::placeholder {
+      color: var(--tide-booking-input-placeholder-color);
+    }
+
+    &:focus {
+      border: var(--tide-booking-input-border-focus);
+      .qsm__input-icon {
+        fill: var(--tide-booking-input-icon-color-focus);
+      }
+    }
+  }
+
+  // // ====================
+  // // Custom Radio
+  // // ====================
+  // .custom-radio {
+  //   display: flex;
+  //   align-items: center;
+  //   font-size: variables.$font-size-body--small;
+  //   cursor: pointer;
+
+  //   input {
+  //     display: none;
+  //   }
+
+  //   .radio-mark {
+  //     width: 1.25rem;
+  //     height: 1.25rem;
+  //     margin-right: 0.75rem;
+
+  //     display: flex;
+  //     align-items: center;
+  //     justify-content: center;
+
+  //     border: 1.5px solid #c6c6c6;
+  //     border-radius: 50%;
+
+  //     transition: 0.3s ease;
+
+  //     &::after {
+  //       content: '';
+  //       width: 8px;
+  //       height: 8px;
+  //       background: variables.$secondary-color;
+  //       border-radius: 50%;
+
+  //       transform: scale(0);
+  //       transition: 0.3s ease;
+  //     }
+  //   }
+
+  //   input:checked + .radio-mark {
+  //     border: 1.5px solid variables.$secondary-color;
+  //   }
+
+  //   input:checked + .radio-mark::after {
+  //     transform: scale(1);
+  //   }
+  // }
+
+  // ====================
+  // Custom Checkbox
+  // ====================
+  .custom-checkbox {
+    display: flex;
+    align-items: center;
+    // font-size: variables.$font-size-body--small;
+    cursor: pointer;
+
+    input {
+      display: none;
+    }
+
+    &__checkmark {
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-right: 0.5rem;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      background: transparent;
+      border: 1.5px solid #c6c6c6;
+      border-radius: 3px;
+      transition: 0.3s ease;
+
+      &::after {
+        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10.463" viewBox="0 0 14 10.463"><path id="Path_47" data-name="Path 47" d="M199.765-682.537,195-687.277l1.253-1.277,3.512,3.512L207.747-693,209-691.747Z" transform="translate(-195 693)" fill="%23fff"/></svg>');
+        transform: scale(0);
+        transition: 0.3s ease;
+      }
+
+      &--invalid {
+        border: 1.5px solid #e65501;
+      }
+    }
+
+    input:checked + .custom-checkbox__checkmark {
+      background: red;
+      border: 1.5px solid pink;
+
+      &::after {
+        margin-top: 0.1rem;
+        transform: scale(1);
+      }
+    }
+  }
+
+  // // ====================
+  // // Utility
+  // // ====================
+  // .u-ps-2 {
+  //   padding-left: 2rem !important;
+
+  //   &--second {
+  //     @include mixins.media-sm {
+  //       padding-left: 2rem;
+  //     }
+  //   }
+  // }
+
+  // .u-page-overlay {
+  //   position: absolute;
+  //   top: calc(100% + 1px); // right after QSM, or you can use a ref for precision
+  //   left: 0;
+  //   width: 100%;
+  //   height: 100%; // or calculate dynamically if needed
+  //   background: rgba(37, 87, 92, 0.8);
+  //   z-index: 1; // must be *below* qsm but *above* rest of page
+  // }
+
+  // .dropdown-menu {
+  //   z-index: 40;
+  // }
+
+  .mobile-qsm-filter {
+    &__modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: var(--tide-booking-qsm-filter-mobile-background);
+      z-index: 50;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      overflow-y: auto;
+
+      &-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+
+      &-header {
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 51;
+        background: var(--tide-booking-qsm-filter-mobile-header-background);
+        box-shadow: var(--tide-booking-qsm-filter-mobile-header-box-shadow);
+        border: var(--tide-booking-qsm-filter-mobile-header-border);
+        display: flex;
+        align-items: end;
+        width: 100%;
+        padding: 20px;
+
+        &-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          @include mixins.container;
+          padding: 0px;
+        }
+
+        &-title {
+          font-size: var(--tide-booking-qsm-filter-mobile-header-font-size);
+          font-weight: var(--tide-booking-qsm-filter-mobile-header-font-weight);
+          color: var(--tide-booking-qsm-filter-mobile-header-color);
+        }
+
+        &-close {
+          position: absolute;
+          right: 20px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 20px;
+          height: 20px;
+          opacity: 0.3;
+          cursor: pointer;
+          transition: opacity 0.3s ease-in-out;
+
+          &:hover {
+            opacity: 1;
+          }
+
+          &:before,
+          &:after {
+            position: absolute;
+            left: 15px;
+            content: ' ';
+            height: 22px;
+            width: 2px;
+            background: var(--tide-booking-color-primary);
+          }
+
+          &:before {
+            transform: rotate(45deg);
+          }
+          &:after {
+            transform: rotate(-45deg);
+          }
+        }
+      }
+
+      &-footer {
+        position: relative;
+        width: 100%;
+        height: 6rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px 6%;
+        z-index: 51;
+        border: var(--tide-booking-qsm-filter-mobile-footer-border);
+        background: var(--tide-booking-qsm-filter-mobile-footer-background);
+        box-shadow: var(--tide-booking-qsm-filter-mobile-footer-box-shadow);
+        margin-top: auto;
+
+        &-button {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          opacity: 0.5;
+          border: none;
+          cursor: not-allowed;
+          pointer-events: none;
+          z-index: 52; // was 1100002
+          transition: all 0.3s ease-in-out;
+
+          &--active {
+            cursor: pointer;
+            pointer-events: auto;
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+
+  //   &__background {
+  //     &-content {
+  //       display: flex;
+  //       flex-direction: column;
+  //       gap: 0.6rem;
+  //       align-items: center;
+  //       position: fixed;
+  //       top: 50%;
+  //       left: 50%;
+  //       transform: translate(-50%, -50%);
+  //       width: 100%;
+  //     }
+
+  //     &-icon {
+  //       text-align: center;
+  //     }
+
+  //     &-title {
+  //       font-size: variables.$font-size-h5;
+  //       color: variables.$secondary-color;
+  //       text-align: center;
+  //     }
+
+  //     &-subtitle {
+  //       color: #c6c6c6;
+  //       font-size: variables.$font-size-body;
+  //       text-align: center;
+  //     }
+
+  .qsm__input-group {
+    .booking-product__dates {
+      &-title {
+        position: relative;
+        z-index: 21;
+        left: 0;
+        top: 0rem;
+        padding-bottom: 5px;
+        font-size: var(--tide-booking-input-label-font-size);
+        font-weight: var(--tide-booking-input-label-font-weight);
+        color: var(--tide-booking-input-label-color);
+        pointer-events: none;
+        transition: all 0.2s ease;
+
+        svg {
+          display: none;
+        }
+      }
+
+      .form__input {
+        padding: 0px 10px;
+      }
+
+      .form__label {
+        display: none;
+      }
+    }
+
+    .qsm__pannel--mobile {
+      top: 0;
+      position: fixed;
+      bottom: 0;
+    }
+  }
+
+  &:has(.qsm__panel--active) {
+    z-index: 21;
+  }
+}