@qite/tide-booking-component 1.2.4 → 1.3.0

package/styles/components/_flight-option.scss

@@ -1,26 +1,25 @@
-.flight{
+.flight {
   display: flex;
   flex-direction: column;
   gap: 2rem;
 
-  &__option{
+  &__option {
     background: var(--tide-booking-flight-options-card-background);
     border-radius: var(--tide-booking-flight-options-card-border-radius);
-    border: var(--tide-booking-flight-options-card-border);
+    outline: var(--tide-booking-flight-options-card-border);
     display: flex;
     flex-direction: column-reverse;
     overflow: hidden;
 
-
     @include media-sm {
     }
 
-    &__header{
+    &__header {
       display: flex;
       align-items: center;
       gap: 10px;
 
-      &__wrapper{
+      &__wrapper {
         display: grid;
         align-items: center;
         grid-template-columns: repeat(3, 1fr);
@@ -28,18 +27,18 @@
         width: 100%;
       }
 
-      .radiobutton{
+      .radiobutton {
         padding: 0;
 
-        &__input{
+        &__input {
           position: relative;
           margin-right: 0;
           margin-top: 0;
 
-          &:checked{
-           .flight__option{
-             background: $color-primary;
-           }
+          &:checked {
+            .flight__option {
+              background: var(--tide-booking-color-primary);
+            }
           }
         }
       }
@@ -63,7 +62,7 @@
     // }
   }
 
-  &__footer{
+  &__footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -74,7 +73,7 @@
     //   border-left: 2px solid $gray-border-light;
     // }
 
-    &__wrapper{
+    &__wrapper {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -82,14 +81,13 @@
     }
   }
 
-
-  &__operator{
+  &__operator {
     width: 45px;
     height: 45px;
     border-radius: 8px;
     overflow: hidden;
 
-    &__img{
+    &__img {
       width: 100%;
       height: 100%;
       object-fit: cover;
@@ -97,7 +95,7 @@
     }
   }
 
-  &__price{
+  &__price {
     text-align: right;
     display: flex;
     align-items: center;
@@ -107,7 +105,7 @@
     //   align-items: center;
     // }
 
-    button{
+    button {
       width: 100%;
       text-align: center;
       justify-content: center;
@@ -118,24 +116,24 @@
       }
     }
 
-    strong{
+    strong {
       font-weight: 600;
       font-size: 20px;
     }
   }
 
-  &__content{
+  &__content {
     display: flex;
     flex-direction: column;
-  } 
+  }
 
-  &__flights{
+  &__flights {
     display: flex;
     flex-direction: column;
     background: var(--tide-booking-flight-options-card-background);
   }
 
-  &__flight{
+  &__flight {
     display: flex;
     flex-direction: column;
     gap: 0rem;
@@ -144,23 +142,23 @@
     //   border-top: 2px solid $gray-border-light;
     // }
 
-    &__header{
+    &__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
-      padding: 20px;
+      padding: 15px;
       background: var(--tide-booking-flight-options-card-header-background);
       border-bottom: var(--tide-booking-flight-options-card-header-border);
     }
 
-    &__container{
+    &__container {
       display: grid;
       align-items: center;
       grid-template-columns: 1fr auto;
       gap: 0rem;
       position: relative;
-      padding: 20px;
+      padding: 20px 15px;
 
       @include media-md {
         gap: 1rem;
@@ -168,24 +166,23 @@
       }
     }
 
-    &__wrapper{
+    &__wrapper {
       display: grid;
       grid-template-rows: repeat(1, 1fr);
       gap: 20px;
 
-      
       @include media-md {
         gap: 10px;
         grid-template-columns: 20% 1fr;
       }
     }
 
-    &__airport{
+    &__airport {
       display: flex;
       align-items: center;
     }
 
-    &__operator{
+    &__operator {
       font-size: 14px;
 
       @include media-lg {
@@ -194,7 +191,7 @@
     }
   }
 
-  &__logo{
+  &__logo {
     width: auto;
     max-height: 30px;
 
@@ -205,7 +202,7 @@
     //   object-position: center;
     // }
 
-    &__wrapper{
+    &__wrapper {
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -219,19 +216,19 @@
     }
   }
 
-  &__info{
+  &__info {
     display: grid;
-    grid-template-columns: repeat(3,1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 10px;
 
-    &__times{
+    &__times {
       display: flex;
       flex-direction: column;
       gap: 0rem;
       font-size: 16px;
       line-height: 20px;
 
-      &__wrapper{
+      &__wrapper {
         display: flex;
         flex-direction: column-reverse;
         justify-content: flex-end;
@@ -243,16 +240,16 @@
           gap: 10px;
         }
 
-        svg{
+        svg {
           fill: var(--tide-booking-flight-options-dapart-arrive-icon--color);
 
           @include media-sm {
-            margin:0 20px;
+            margin: 0 20px;
             margin-top: 10px;
           }
         }
 
-        &--arrival{
+        &--arrival {
           display: flex;
           flex-direction: column;
           align-items: flex-end;
@@ -267,32 +264,31 @@
         }
       }
 
-      strong{
+      strong {
         color: var(--tide-booking-flight-options-times-title-color);
         font-family: var(--tide-booking-flight-options-times-title-font-family);
         font-weight: var(--tide-booking-flight-options-times-title-font-weight);
       }
 
-      p{
+      p {
         margin: 0;
         font-family: var(--tide-booking-flight-options-times-font-family);
         color: var(--tide-booking-flight-options-times-color);
       }
 
-      &__days{
+      &__days {
         font-size: 12px;
         font-weight: 300;
-        color: $invalid;
+        color: var(--tide-booking-invalid);
       }
 
-      &--arrival{
+      &--arrival {
         align-items: flex-end;
         text-align: right;
       }
-
     }
 
-    &__duration{
+    &__duration {
       line-height: 1.5;
       display: flex;
       flex-direction: column;
@@ -300,11 +296,15 @@
       gap: 3px;
       font-size: 12px;
 
-      &--waittime{
+      span {
+        text-align: center;
+      }
+
+      &--waittime {
         gap: 8px;
       }
 
-      &__stops{
+      &__stops {
         display: flex;
         justify-content: space-evenly;
         align-items: center;
@@ -313,20 +313,21 @@
         background: var(--tide-booking-flight-options-stops-line-color);
         z-index: 1;
 
-        &--stoptime{
+        &--stoptime {
           background-color: transparent;
-          border-top: 1.5px dashed $black;
+          border-top: 1.5px dashed
+            var(--tide-booking-flight-options-stoptime-border-color);
           height: 0;
         }
       }
 
-      &__stoptime{
+      &__stoptime {
         display: flex;
         flex-direction: column;
         align-items: center;
       }
 
-      &__stop{
+      &__stop {
         height: 6px;
         width: 6px;
         background: var(--tide-booking-flight-options-stop-color);
@@ -334,65 +335,66 @@
         border-radius: 50%;
       }
 
-      strong{
+      strong {
         font-weight: 700;
       }
 
-      p{
+      p {
         margin: 0;
       }
     }
   }
 
-  &__detail{
+  &__detail {
     display: flex;
-      flex-direction: column;
-      gap: 20px;
-      overflow: hidden;;
+    flex-direction: column;
+    gap: 20px;
+    overflow: hidden;
+    background-color: var(--tide-booking-flight-options-detail-card-background);
+    margin: 0 15px;
+    padding: 0 20px;
+    border: var(--tide-booking-flight-options-detail-card-border);
+    border-radius: var(--tide-booking-flight-options-detail-card-border-radius);
+    opacity: 0;
+    transform: scaleY(0.95);
+    transform-origin: top;
+    height: 0;
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease,
+      padding 0.4s ease, margin-bottom 0.4s ease,
+      height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+    @include media-md {
+      margin: 0 15px;
+    }
+
+    &--active {
+      transform: scaleY(1);
+      opacity: 1;
       height: auto;
-      max-height: 0px;
-      background-color: var(--tide-booking-flight-options-detail-card-background);
-      margin: 0 20px;
-      padding: 0 20px;
-      margin-bottom: 0rem;
-      border: var(--tide-booking-flight-options-detail-card-border);
-      border-radius: var(--tide-booking-flight-options-detail-card-border-radius);
-      // transform: scaleY(0);
-      // transform-origin: top;
-      opacity: 0;
-      transition: all .3s ease, max-height 0.5s ease, opacity 0.5s ease, transform .5s ease-in-out, padding 0.3s ease-in-out;
-  
+      padding: 20px;
+      margin-bottom: 20px;
+
       @include media-md {
-        margin: 0 20px;
-      }
-  
-      &--active{
-        max-height: 1000px;
-        min-height: auto;
-        transform: scaleY(1);
-        opacity: 1;
-        padding: 20px;
         margin-bottom: 20px;
-  
-        @include media-md {
-          margin-bottom: 20px;
-        }
       }
+    }
 
-    &__btn{
+    &__btn {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 10px;
-      border-radius: var(--tide-booking-flight-options-detail-toggle-border-radius);
+      border-radius: var(
+        --tide-booking-flight-options-detail-toggle-border-radius
+      );
       font-size: 14px;
       color: var(--tide-booking-flight-options-detail-toggle-icon-color);
       background: var(--tide-booking-flight-options-detail-toggle-background);
       border: var(--tide-booking-flight-options-detail-toggle-border);
       cursor: pointer;
-      transition: all .3s ease-in-out;
+      transition: all 0.3s ease-in-out;
 
-      &__wrapper{
+      &__wrapper {
         position: absolute;
         top: 20px;
         right: 20px;
@@ -408,34 +410,41 @@
           right: 0;
         }
       }
-      
-      svg{
+
+      svg {
         fill: var(--tide-booking-flight-options-detail-toggle-icon-color);
-        transition: all .3s ease-in-out;
+        transition: all 0.3s ease-in-out;
       }
 
-      &:hover, &:focus{
-        color: var(--tide-booking-flight-options-detail-toggle-icon-color-hover);
-        background: var(--tide-booking-flight-options-detail-toggle-background-hover);
+      &:hover,
+      &:focus {
+        color: var(
+          --tide-booking-flight-options-detail-toggle-icon-color-hover
+        );
+        background: var(
+          --tide-booking-flight-options-detail-toggle-background-hover
+        );
         border: var(--tide-booking-flight-options-detail-toggle-border-hover);
 
-        svg{
-          fill: var(--tide-booking-flight-options-detail-toggle-icon-color-hover);
+        svg {
+          fill: var(
+            --tide-booking-flight-options-detail-toggle-icon-color-hover
+          );
         }
       }
 
-      &--active{
-        .flight__detail__btn__arrow{
+      &--active {
+        .flight__detail__btn__arrow {
           transform: rotate(90deg);
         }
       }
     }
 
-    .flight__info{
-      &__times{
+    .flight__info {
+      &__times {
         font-size: 14px;
 
-        p{
+        p {
           font-size: 12px;
 
           @include media-md {
@@ -446,19 +455,16 @@
     }
   }
 
-  &__rate{
+  &__rate {
     display: flex;
     flex-direction: column;
     // border-top: 2px solid $gray-border-light;
     overflow-y: hidden;
-    background-color: $white;
     height: 100%;
     max-height: 1.5px;
-    transition: all .3s ease-in-out;
-
-
+    transition: all 0.3s ease-in-out;
 
-    &__container{
+    &__container {
       display: flex;
       flex-direction: column;
       gap: 20px;
@@ -472,27 +478,27 @@
       }
     }
 
-    &__title{
+    &__title {
       display: flex;
       flex-direction: column;
-      h2{
+      h2 {
         font-size: 20px;
-        font-family: proxima-nova, sans-serif;
-        color: $gray-dark;
+        font-family: var(--tide-booking-font-heading);
+        color: var(--tide-booking-gray-dark);
         margin-bottom: 0rem;
 
         @include media-md {
           font-size: 30px;
         }
 
-        strong{
+        strong {
           font-weight: 600;
-          color: $black;
+          color: #000;
         }
       }
     }
 
-    &__wrapper{
+    &__wrapper {
       display: flex;
       align-items: center;
       gap: 20px;
@@ -501,41 +507,41 @@
       margin: -20px;
       padding: 20px;
 
-      @include media-md{
+      @include media-md {
         overflow-x: visible;
       }
     }
 
-    &__card{
-      border: solid 1px $gray-border-medium;
-      border-top: 3px solid $economy;
+    &__card {
+      border: solid 1px var(--tide-booking-gray-medium);
+      border-top: 3px solid #334eac;
       border-radius: 10px;
       max-width: 180px;
       min-width: 180px;
       // opacity: 0.7;
       cursor: pointer;
       transform: scale(1);
-      transition: all .3s ease-in-out;
+      transition: all 0.3s ease-in-out;
 
-      &__header{
+      &__header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 10px;
         padding: 10px;
-        background: $economy-background;
+        background: #ebedf7;
         border-radius: 1rem 1rem 0 0;
-  
-        &__title{
-          font-family: "proxima-nova", sans-serif;
+
+        &__title {
+          font-family: var(--tide-booking-font-heading);
           font-size: 18px;
           font-weight: 500;
-          color: $economy;
+          color: #334eac;
           margin: 0;
         }
       }
-  
-      &__content{
+
+      &__content {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
@@ -544,118 +550,116 @@
         min-height: 70px;
         max-height: 70px;
       }
-  
-      &__item{
+
+      &__item {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 3px;
-        color: $gray-dark;
+        color: var(--tide-booking-gray-dark);
         font-size: 20px;
         font-weight: 500;
-  
-  
-        svg{
-          fill: $economy;
+
+        svg {
+          fill: #334eac;
           transform: rotate(0deg);
-          transition: all .3s ease-in-out;
+          transition: all 0.3s ease-in-out;
         }
-  
       }
-  
-      &__chairs{
+
+      &__chairs {
         font-size: 12px;
         font-weight: lighter;
-        color: $price-increase;
+        color: var(--tide-booking-price-increase);
       }
-  
-      &__lowest{
+
+      &__lowest {
         font-size: 14px;
         font-weight: bold;
-        color: $price-decrease;
+        color: var(--tide-booking-price-decrease);
       }
 
-      &--active{
+      &--active {
         border-width: 2px;
-        border-color: $economy;
-        border-top: 3px solid $economy;
+        border-color: #334eac;
+        border-top: 3px solid #334eac;
 
-        .flight__rate__card__item svg{
+        .flight__rate__card__item svg {
           transform: rotate(90deg);
         }
       }
 
-      &:hover{
+      &:hover {
         transform: scale(1.05);
       }
 
-      &--premium{
-        border-top: 3px solid $premium;
+      &--premium {
+        border-top: 3px solid #85204b;
 
-        .flight__rate__card__header{
-          background: $premium-background;
+        .flight__rate__card__header {
+          background: #f1e6eb;
         }
 
-        .flight__rate__card__header__title{
-          color: $premium;
+        .flight__rate__card__header__title {
+          color: #85204b;
         }
 
-        .flight__rate__card__item svg{
-          fill: $premium;
+        .flight__rate__card__item svg {
+          fill: #85204b;
         }
 
-        &--active{
+        &--active {
           border-width: 2px;
-          border-color: $premium;
-          border-top: 3px solid $premium;
+          border-color: #85204b;
+          border-top: 3px solid #85204b;
 
-          .flight__rate__card__item svg{
+          .flight__rate__card__item svg {
             transform: rotate(90deg);
           }
         }
       }
 
-      &--business{
-        border-top: 3px solid $business;
+      &--business {
+        border-top: 3px solid #8e8347;
 
-        .flight__rate__card__header{
-          background: $business-background;
+        .flight__rate__card__header {
+          background: #f5f4ed;
         }
 
-        .flight__rate__card__header__title{
-          color: $business;
+        .flight__rate__card__header__title {
+          color: #8e8347;
         }
 
-        .flight__rate__card__item svg{
-          fill: $business;
+        .flight__rate__card__item svg {
+          fill: #8e8347;
         }
 
-        &--active{
+        &--active {
           border-width: 2px;
-          border-color: $business;
-          border-top: 3px solid $business;
+          border-color: #8e8347;
+          border-top: 3px solid #8e8347;
 
-          .flight__rate__card__item svg{
+          .flight__rate__card__item svg {
             transform: rotate(90deg);
           }
         }
       }
     }
 
-    p{
+    p {
       font-size: 12px;
       margin: 0;
 
-      strong{
+      strong {
         font-weight: 700;
       }
     }
 
-    &__change{
+    &__change {
       font-size: 12px;
     }
 
-    &__modal{
+    &__modal {
       background: #f9f9f9;
       border-radius: 10px;
       width: 100%;
@@ -669,14 +673,14 @@
 
       @include media-sm {
         margin: 45px 20px;
-      height: calc(100vh - 90px);
+        height: calc(100vh - 90px);
       }
 
       @include media-lg {
         margin: 45px;
       }
 
-      &__container{
+      &__container {
         position: fixed;
         height: 100vh;
         width: 100vw;
@@ -687,7 +691,7 @@
         top: 0;
         left: 0;
 
-        &::after{
+        &::after {
           content: "";
           position: absolute;
           height: 100%;
@@ -696,31 +700,31 @@
           z-index: 100;
         }
 
-        &--active{
+        &--active {
           display: flex;
         }
       }
 
-      &__header{
+      &__header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 10px;
         padding: 20px;
-        background-color: $white;
+        background-color: #fff;
         border-radius: 10px 10px 0px 0px;
         box-shadow: 0px 3px 10px 0px #00000021;
         position: relative;
         z-index: 1;
 
-        &__title{
-          font-family: "proxima-nova", sans-serif;
+        &__title {
+          font-family: var(--tide-booking-font-heading);
           font-size: 16px;
           font-weight: 500;
           margin: 0;
         }
 
-        &__close{
+        &__close {
           font-size: 16px;
           background-color: transparent;
           border: none;
@@ -729,7 +733,7 @@
         }
       }
 
-      &__content{
+      &__content {
         padding: 2rem;
         overflow: auto;
         @extend %scrollbar-thin;
@@ -739,125 +743,126 @@
         gap: 20px;
       }
 
-      &__tabs{
+      &__tabs {
         display: flex;
         gap: 1rem;
         padding: 0 20px;
         margin-bottom: 10px;
-        background-color: $white;
+        background-color: #fff;
         height: 60px;
       }
 
-      &__tab{
+      &__tab {
         font-size: 12px;
-        color: $gray-medium;
+        color: #cbcbcb;
         background: transparent;
         border: none;
-        border-bottom: solid 2px $white;
+        border-bottom: solid 2px #fff;
         cursor: pointer;
-        transition: border .3s ease-in-out;
+        transition: border 0.3s ease-in-out;
         height: 100%;
 
         @include media-md {
           font-size: 16px;
         }
 
-        &:hover, &:focus{
-          color: $btn-hover;
+        &:hover,
+        &:focus {
+          color: rgba(255, 255, 255, 0.325);
         }
 
-        &--active{
-          color: $color-primary;
-          border-bottom: solid 2px $color-primary;
+        &--active {
+          color: var(--tide-booking-color-primary);
+          border-bottom: solid 2px var(--tide-booking-color-primary);
         }
       }
 
-      &__card{
-        background: $white;
+      &__card {
+        background: #fff;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 1rem;
         height: auto;
-        border: solid 1px $gray-border-medium;
-        border-top: 3px solid $economy;
+        border: solid 1px var(--tide-booking-gray-medium);
+        border-top: 3px solid #334eac;
         // min-height: calc(100% - 40px);
 
-        &__header{
+        &__header {
           padding: 0 20px;
           padding-top: 20px;
-          background: $economy-background;
+          background: #ebedf7;
           border-radius: 10px 10px 0 0;
 
-          &__title{
+          &__title {
             font-family: "proxima-nova", sans-serif;
             font-size: 20px;
             margin: 0;
-            color: $economy;
+            color: #334eac;
           }
 
-          &__class{
+          &__class {
             font-size: 12px;
             font-weight: 300;
             margin: 0;
           }
         }
 
-        &__items{
+        &__items {
           display: flex;
           flex-direction: column;
           gap: 10px;
           padding: 20px;
 
-          &--top{
-            background: $economy-background;
+          &--top {
+            background: #ebedf7;
           }
         }
 
-        &__item{
+        &__item {
           display: grid;
           grid-template-columns: 20px 1fr;
           align-items: center;
           gap: 10px;
 
-          svg{
-            fill: $gray-dark;
+          svg {
+            fill: var(--tide-booking-gray-dark);
           }
 
-          &__wrapper{
+          &__wrapper {
             font-size: 12px;
 
-            p{
+            p {
               margin: 0;
             }
 
-            strong{
+            strong {
               font-weight: 700;
             }
           }
 
-          &--border{
+          &--border {
             width: 100%;
             height: 1px;
-            background: $gray-border-light;
+            background: var(--tide-booking-gray-border-light);
           }
 
-          &--disabled{
+          &--disabled {
             opacity: 0.25;
           }
         }
 
-        &__footer{
+        &__footer {
           display: flex;
           flex-direction: row-reverse;
           justify-content: space-between;
           align-items: center;
           gap: 10px;
-          padding:0 20px;
+          padding: 0 20px;
           padding-bottom: 20px;
 
-          button{
+          button {
             width: 100%;
             text-align: center;
             justify-content: center;
@@ -868,52 +873,54 @@
 
           .price {
             white-space: nowrap;
-        
+
             &--decrease {
-              color: $price-decrease;
+              color: var(--tide-booking-price-decrease);
             }
-        
+
             &--increase {
-              color: $price-increase;
+              color: var(--tide-booking-price-increase);
             }
           }
         }
 
-        &--premium{
-          border-top: 3px solid $premium;
+        &--premium {
+          border-top: 3px solid #85204b;
 
-          .flight__rate__modal__card__header, .flight__rate__modal__card__items--top{
-            background: $premium-background;
+          .flight__rate__modal__card__header,
+          .flight__rate__modal__card__items--top {
+            background: #f1e6eb;
           }
 
-          .flight__rate__modal__card__header__title{
-            color: $premium;
+          .flight__rate__modal__card__header__title {
+            color: #85204b;
           }
         }
 
-        &--business{
-          border-top: 3px solid $business;
+        &--business {
+          border-top: 3px solid #8e8347;
 
-          .flight__rate__modal__card__header, .flight__rate__modal__card__items--top{
-            background: $business-background;
+          .flight__rate__modal__card__header,
+          .flight__rate__modal__card__items--top {
+            background: #f5f4ed;
           }
 
-          .flight__rate__modal__card__header__title{
-            color: $business;
+          .flight__rate__modal__card__header__title {
+            color: #8e8347;
           }
         }
       }
 
-      &__footer{
+      &__footer {
         display: flex;
         justify-content: flex-end;
         gap: 10px;
         padding: 20px;
-        background-color: $white;
+        background-color: #fff;
         border-radius: 0px 0px 10px 10px;
         box-shadow: 0px -3px 10px 0px #00000021;
 
-        button{
+        button {
           width: 100%;
           text-align: center;
           justify-content: center;
@@ -924,23 +931,24 @@
       }
     }
 
-    &__detail{
+    &__detail {
       overflow: auto;
       @extend %scrollbar-thin;
       display: none;
       grid-auto-columns: 310px;
       grid-auto-flow: column;
       gap: 20px;
-      padding:0rem 20px;
+      padding: 0rem 20px;
       max-height: 0px;
       opacity: 0;
-      transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
+      transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out,
+        padding-bottom 0.3s ease-in-out;
 
       @include media-md {
         display: grid;
       }
 
-      &--active{
+      &--active {
         display: none;
         max-height: 1000px;
         opacity: 1;
@@ -950,22 +958,21 @@
           display: grid;
         }
       }
-
     }
 
-    &--active{
+    &--active {
       height: 100%;
       max-height: 1000px;
     }
   }
 
-  &__status{
+  &__status {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
-    color: $white;
-    background: $color-primary;
+    color: #fff;
+    background: var(--tide-booking-color-primary);
     border-radius: 50%;
     padding: 10px;
     font-size: 12px;
@@ -973,12 +980,12 @@
     width: 30px;
     height: 30px;
 
-    &--pub{
-      background: $price-decrease;
+    &--pub {
+      background: var(--tide-booking-price-decrease);
     }
   }
 
-  &__airport{
+  &__airport {
     display: none;
     align-items: center;
     gap: 5px;
@@ -988,12 +995,12 @@
     }
   }
 
-  &__times{
+  &__times {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 
-    &__date{
+    &__date {
       font-size: 14px;
 
       @include media-lg {
@@ -1002,8 +1009,7 @@
     }
   }
 
-  &__filter{
-    max-width: 360px;
+  &__filter {
     position: fixed;
     left: 0%;
     top: 0;
@@ -1011,107 +1017,141 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
-    background: $white;
+    background: #fff;
     height: 100%;
     max-height: 97.3vh;
-    width: 100%;
+    width: calc(100vw - 40px);
     padding: 20px;
     box-shadow: 0px 0px 5px rgba(158, 158, 158, 0.447);
     transform: translateX(-100%);
-    transition: all .3s ease-in-out;
+    transition: all 0.3s ease-in-out;
     overflow-y: auto;
     @extend %scrollbar-thin;
+    scrollbar-gutter: stable;
+
+    @include media-xs {
+      width: 100%;
+      max-width: 360px;
+    }
 
-    &--active{
+    &--active {
       transform: translateX(0%);
     }
 
-    &__header{
+    &__header {
+      position: relative;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 10px;
 
-      &__title{
-        h3{
+      &__title {
+        h3 {
           margin-bottom: 0rem;
         }
 
-        p{
-          font-weight: var(--tide-booking-flight-options-filter-header-text-font-weight);
+        p {
+          font-weight: var(
+            --tide-booking-flight-options-filter-header-text-font-weight
+          );
           color: var(--tide-booking-flight-options-filter-header-text-color);
           font-size: 16px;
         }
 
-        strong{
-          font-weight: var(--tide-booking-flight-options-filter-header-text-strong-font-weight);
-          color: var(--tide-booking-flight-options-filter-header-text-strong-color);
+        strong {
+          font-weight: var(
+            --tide-booking-flight-options-filter-header-text-strong-font-weight
+          );
+          color: var(
+            --tide-booking-flight-options-filter-header-text-strong-color
+          );
         }
       }
     }
 
-    &__body{
+    &__body {
       display: flex;
       flex-direction: column;
       gap: 30px;
     }
 
-    &__group{
+    &__group {
       display: flex;
       flex-direction: column;
       gap: 20px;
 
-      &__title{
-        font-family: var(--tide-booking-flight-options-filter-group-title-text-font-family);
+      &__title {
+        font-family: var(
+          --tide-booking-flight-options-filter-group-title-text-font-family
+        );
         font-size: 18px;
-        font-weight: var(--tide-booking-flight-options-filter-group-title-text-font-weight);
+        font-weight: var(
+          --tide-booking-flight-options-filter-group-title-text-font-weight
+        );
         color: var(--tide-booking-flight-options-filter-group-title-text-color);
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding-bottom: 5px;
-        border-bottom: var(--tide-booking-flight-options-filter-group-title-text-border); 
+        border-bottom: var(
+          --tide-booking-flight-options-filter-group-title-text-border
+        );
 
-        svg{
-          fill: $color-primary;
+        svg {
+          fill: var(--tide-booking-color-primary);
         }
       }
 
-      &__wrapper{
+      &__wrapper {
         display: flex;
         flex-direction: column;
         gap: 10px;
 
-        p{
+        p {
           margin: 0px;
           font-size: 16px;
           padding: 0rem 10px;
-          font-family: var(--tide-booking-flight-options-filter-group-title-subtext-font-family);
-          font-weight: var(--tide-booking-flight-options-filter-group-title-subtext-font-weight);
-          color: var(--tide-booking-flight-options-filter-group-title-subtext-color);
+          font-family: var(
+            --tide-booking-flight-options-filter-group-title-subtext-font-family
+          );
+          font-weight: var(
+            --tide-booking-flight-options-filter-group-title-subtext-font-weight
+          );
+          color: var(
+            --tide-booking-flight-options-filter-group-title-subtext-color
+          );
         }
       }
 
-      .tree{
+      .tree {
         padding: 7.5px 10px;
+        font-size: 16px;
 
-        .checkbox, .radiobutton{
-          padding: 0rem 15px 0 28px
+        .checkbox,
+        .radiobutton {
+          padding: 0rem 15px 0 28px;
         }
 
-        .checkbox__input--parent, .radiobutton__input--parent{
+        .checkbox__input--parent,
+        .radiobutton__input--parent {
           top: -1px;
         }
 
-        .radiobutton__label-text{
+        .checkbox__label {
+          padding: 0px;
+        }
+
+        .radiobutton__label-text {
           display: flex;
           flex-direction: row;
           align-items: center;
           gap: 5px;
           color: var(--tide-booking-checkbox-color-text);
+          margin: 0px;
+          padding: 0px;
 
-          .amount{
-            color: $color-primary;
+          .amount {
+            color: var(--tide-booking-color-primary);
           }
         }
       }
@@ -1123,7 +1163,7 @@
       gap: 10px;
       padding: 7.5px 10px;
 
-      &__value{
+      &__value {
         font-size: 12px;
         display: flex;
         justify-content: space-between;
@@ -1139,7 +1179,7 @@
       //   outline: none;
       //   opacity: 0.7;
       //   transition: opacity .15s ease-in-out;
-        
+
       //   &::-webkit-slider-runnable-track {
       //     width: 90%;
       //     height: 4px;
@@ -1148,7 +1188,7 @@
       //     background: linear-gradient(to right, $color-primary 0%, $color-primary calc((var(--value) - 2) / 5 * 100%), $gray-light calc((var(--value) - 2) / 5 * 100%), $gray-light 100%);
       //     border-radius: 5px;
       //   }
-      
+
       //   &::-moz-range-track {
       //     width: 90%;
       //     height: 4px;
@@ -1157,7 +1197,7 @@
       //     background: linear-gradient(to right, $color-primary 0%, $color-primary calc((var(--value) - 2) / 5 * 100%), $gray-light calc((var(--value) - 2) / 5 * 100%), $gray-light 100%);
       //     border-radius: 5px;
       //   }
-      
+
       //   &::-webkit-slider-thumb {
       //     -webkit-appearance: none;
       //     appearance: none;
@@ -1168,7 +1208,7 @@
       //     cursor: pointer;
       //     margin-top: -5px;
       //   }
-      
+
       //   &::-moz-range-thumb {
       //     width: 16px;
       //     height: 16px;
@@ -1178,135 +1218,135 @@
       //     margin-top: -5px;
       //   }
       // }
+    }
 
+    .double-slider-box {
+      background-color: transparent;
+      border-radius: 10px;
+      width: 100%;
+      max-width: 97%;
+      margin-left: 10px;
 
-
-      }
-    
-      .double-slider-box {
-        background-color: transparent;
-        border-radius: 10px;
-        width: 100%;
+      @include media-xs {
         max-width: 342px;
-        margin-left: 10px;
       }
-      
-      .range-slider {
-        position: relative;
-        width: 100%;
-        height: 5px;
-        margin: 30px 0;
-        background-color: var(--tide-booking-slider-range-background);
-        border-radius: 5px;
+    }
 
-        input{
-          padding: 0rem;
-        }
-      }
-      
-      .slider-track {
-        height: 100%;
-        position: absolute;
-        background-color: var(--tide-booking-slider-track-background);
-        left: 0;
-        right: 100%;
-        border-radius: 5px;
-      }
-      
-      .range-slider input[type="range"] {
-        position: absolute;
-        width: 101%;
-        left: -3px;
-        top: 0;
-        transform: translateY(-50%);
-        background: none;
-        pointer-events: none;
-        border: none;
-        appearance: none;
-        height: 5px;
-      }
-      
-      input[type="range"]::-webkit-slider-thumb {
-        height: 25px;
-        width: 25px;
-        border-radius: 50%;
-        border: 3px solid var(--tide-booking-slider-thumb-border-color);
-        background: var(--tide-booking-slider-thumb-background);
-        pointer-events: auto;
-        appearance: none;
-        cursor: pointer;
-        box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
-        position: relative;
-        z-index: 2; /* Ensure thumbs appear above the track */
-      }
-      
-      input[type="range"]::-moz-range-thumb {
-        height: 25px;
-        width: 25px;
-        border-radius: 50%;
-        border: 3px solid var(--tide-booking-slider-thumb-border-color);
-        background: var(--tide-booking-slider-thumb-background);
-        pointer-events: auto;
-        cursor: pointer;
-        box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
-        position: relative;
-        z-index: 2;
-      }
-      
-      .input-box {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-      }
-      
-      .min-box,
-      .max-box {
-        width: 50%;
-        font-size: 16px;
-      }
-      
-      .min-box {
-        margin-right: 10px;
-      }
-      
-      .max-box {  
-        text-align: right;
-      }
-      
-      input[type="number"] {
-        width: 40px;
-        padding: 10px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        text-align: center;
-      }
-      
-      .min-tooltip,
-      .max-tooltip {
-        position: absolute;
-        top: -35px;
-        font-size: 12px;
-        color: #555;
-        background-color: #fff;
-        padding: 5px;
-        border: 1px solid #ddd;
-        border-radius: 5px;
-        white-space: nowrap;
-        z-index: 1;
-      }
-      
-      .min-tooltip {
-        left: 20px;
-        transform: translateX(-50%);
-      }
-      
-      .max-tooltip {
-        right: 20px;
-        transform: translateX(50%);
+    .range-slider {
+      position: relative;
+      width: 100%;
+      height: 5px;
+      margin: 30px 0;
+      background-color: var(--tide-booking-slider-range-background);
+      border-radius: 5px;
+
+      input {
+        padding: 0rem;
       }
     }
-}
 
+    .slider-track {
+      height: 100%;
+      position: absolute;
+      background-color: var(--tide-booking-slider-track-background);
+      left: 0;
+      right: 100%;
+      border-radius: 5px;
+    }
+
+    .range-slider input[type="range"] {
+      position: absolute;
+      width: 101%;
+      left: -3px;
+      top: 0;
+      transform: translateY(-50%);
+      background: none;
+      pointer-events: none;
+      border: none;
+      appearance: none;
+      height: 5px;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      height: 25px;
+      width: 25px;
+      border-radius: 50%;
+      border: 3px solid var(--tide-booking-slider-thumb-border-color);
+      background: var(--tide-booking-slider-thumb-background);
+      pointer-events: auto;
+      appearance: none;
+      cursor: pointer;
+      box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
+      position: relative;
+      z-index: 2; /* Ensure thumbs appear above the track */
+    }
+
+    input[type="range"]::-moz-range-thumb {
+      height: 25px;
+      width: 25px;
+      border-radius: 50%;
+      border: 3px solid var(--tide-booking-slider-thumb-border-color);
+      background: var(--tide-booking-slider-thumb-background);
+      pointer-events: auto;
+      cursor: pointer;
+      box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
+      position: relative;
+      z-index: 2;
+    }
+
+    .input-box {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .min-box,
+    .max-box {
+      width: 50%;
+      font-size: 16px;
+    }
+
+    .min-box {
+      margin-right: 10px;
+    }
+
+    .max-box {
+      text-align: right;
+    }
+
+    input[type="number"] {
+      width: 40px;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      text-align: center;
+    }
+
+    .min-tooltip,
+    .max-tooltip {
+      position: absolute;
+      top: -35px;
+      font-size: 12px;
+      color: #555;
+      background-color: #fff;
+      padding: 5px;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      white-space: nowrap;
+      z-index: 1;
+    }
+
+    .min-tooltip {
+      left: 20px;
+      transform: translateX(-50%);
+    }
+
+    .max-tooltip {
+      right: 20px;
+      transform: translateX(50%);
+    }
+  }
+}
 
 // .flight-option {
 //   @extend %reset;