@qite/tide-booking-component 1.4.91 → 1.4.93

package/styles/search.scss

@@ -1,1200 +1,1200 @@
-// @use './abstracts/variables' as variables;
-// @use './abstracts/mixins' as mixins;
-
-// * {
-//   box-sizing: border-box;
-// }
-
-// .search {
-//   padding-top: 2rem;
-//   background: variables.$bg-light;
-//   display: flex;
-
-//   @include mixins.container();
-
-//   &__bg {
-//     background: variables.$bg-light;
-//   }
-
-//   &__filters {
-//     max-width: 24rem;
-//     width: 100%;
-//     background-color: variables.$white;
-//     padding: 2rem;
-//     border-radius: 5px;
-//     border: 1px solid variables.$secondary-color--extralight;
-//     height: fit-content;
-//     margin-bottom: 2rem;
-//     margin-left: 0;
-
-//     @media (max-width: 1600px) {
-//       margin-left: 2rem;
-//     }
-
-//     @include mixins.media-xl {
-//       margin-left: 0;
-//       margin-top: 2rem;
-//     }
-
-//     @include mixins.media-lg {
-//       display: none;
-//     }
-
-//     @include mixins.media-md {
-//       grid-column: span 12;
-//     }
-
-//     &__group-container {
-//       height: calc(100% - 6rem);
-//       overflow-y: auto;
-//       overflow-x: hidden;
-//     }
-
-//     &__actions {
-//       margin-top: 1rem;
-//       display: flex;
-//       justify-content: space-between;
-//       gap: 1rem;
-//     }
-//   }
-
-//   &__results {
-//     padding: 0 5.5rem 2rem 5.5rem;
-//     width: 100%;
-//     display: flex;
-//     flex-direction: column;
-
-//     @media (max-width: 1600px) {
-//       padding-left: 2rem;
-//     }
-
-//     @include mixins.media-xl {
-//       padding-left: 2rem;
-//       padding-right: 0;
-//     }
-
-//     @include mixins.media-lg {
-//       padding-left: 0;
-//     }
-
-//     @include mixins.media-md {
-//       grid-column: span 12;
-//     }
-
-//     &__cards {
-//       display: flex;
-//       flex-wrap: wrap;
-//       gap: 1rem;
-//     }
-//   }
-
-//   &__filter {
-//     &-row {
-//       display: flex;
-//       align-items: center;
-//       justify-content: space-between;
-//       margin-top: 0.875rem;
-
-//       &-flex-title {
-//         display: flex;
-//         align-items: center;
-//         gap: 1rem;
-//       }
-
-//       &-icon {
-//         fill: variables.$text-color-black;
-//       }
-
-//       &--underline {
-//         border-bottom: 1px solid variables.$secondary-color--extralight;
-//         margin-bottom: 0.5rem;
-//         cursor: pointer;
-//       }
-//     }
-
-//     &-link {
-//       color: variables.$secondary-color;
-//       transition: all 0.3s;
-//       cursor: pointer;
-//       text-decoration: underline;
-//       margin-top: 0.85rem;
-
-//       &:hover {
-//         color: variables.$primary-color;
-//       }
-//     }
-
-//     &-chevron-icon {
-//       transition: transform 0.3s ease;
-//       transform: rotate(180deg);
-//       margin-top: 0.5rem;
-
-//       &--flipped {
-//         transform: rotate(0);
-//       }
-//     }
-
-//     &-small-title {
-//       font-size: variables.$font-size-body--small;
-//       font-weight: 700;
-//       margin: 0 auto;
-//     }
-
-//     &-medium-title {
-//       font-size: variables.$font-size-body;
-//       font-weight: 700;
-//       margin: 0.5rem 0;
-
-//       &-wrapper {
-//         margin-top: 1.25rem;
-//         margin-bottom: 0.25rem;
-//       }
-//     }
-
-//     &-large-title {
-//       font-size: variables.$font-size-h6;
-//       font-weight: 400;
-//       margin: 0.5rem 0;
-//     }
-
-//     &-reset {
-//       color: variables.$secondary-color;
-//       font-size: variables.$font-size-body--small;
-//       text-decoration: underline;
-//       cursor: pointer;
-//     }
-
-//     &-facet {
-//       color: variables.$text-color;
-//     }
-
-//     &-price {
-//       font-size: variables.$font-size-body--small;
-//       color: variables.$secondary-color;
-//       margin-bottom: 0;
-//       margin-top: 0;
-//       min-width: 88px;
-//       text-align: end;
-//     }
-
-//     &-button {
-//       width: 100%;
-//       padding: 1rem 0;
-//       background: transparent;
-//       border: 1px solid variables.$secondary-color;
-//       color: variables.$secondary-color;
-//       border-radius: 3px;
-//       margin-top: 2rem;
-//       transition: all 0.2s ease-in-out;
-//       cursor: pointer;
-
-//       &:hover {
-//         background: variables.$secondary-color;
-//         color: variables.$white;
-//       }
-//     }
-//   }
-
-//   &__result {
-//     display: flex;
-//     flex-wrap: wrap;
-//     gap: 1rem;
-//     margin: 0;
-//     margin-bottom: 2rem;
-
-//     &--flight {
-//       display: grid;
-//       gap: 0;
-//       grid-template-columns: 1fr 257px;
-//       margin: 0 0 2rem;
-
-//       @include mixins.media-lg {
-//         grid-template-rows: repeat(1, 1fr);
-//       }
-
-//       @include mixins.media-md {
-//         grid-template-columns: 1fr;
-//       }
-//     }
-
-//     &-row {
-//       display: flex;
-//       align-items: center;
-//       justify-content: space-between;
-//       margin-bottom: 1.5rem;
-//       margin-top: 1.125rem;
-
-//       @include mixins.media-sm {
-//         margin-bottom: 0.75rem;
-//       }
-
-//       &-text {
-//         font-size: variables.$font-size-body;
-//         color: variables.$text-color;
-//         margin: 0;
-//       }
-
-//       &-filter {
-//         display: flex;
-//         gap: 1.5rem;
-//         align-items: center;
-//       }
-
-//       &-button {
-//         width: 13.5rem;
-//         height: 3.5rem;
-//         display: flex;
-//         justify-content: space-between;
-//         align-items: center;
-//         padding: 0 1rem;
-//         border: 1px solid variables.$secondary-color--light;
-//         border-radius: 3px;
-//         color: variables.$secondary-color;
-//         cursor: pointer;
-//         transition: all 0.2s ease-in-out;
-
-//         &:hover {
-//           background: variables.$secondary-color;
-//           color: variables.$white;
-
-//           .search__result-row-icon {
-//             fill: variables.$white;
-//           }
-//         }
-//       }
-
-//       &-icon {
-//         fill: variables.$secondary-color;
-//       }
-//     }
-
-//     &-card {
-//       flex: calc(33% - 0.5rem) 0 0;
-
-//       @media (max-width: 1300px) {
-//         flex-basis: calc(50% - 0.5rem);
-//       }
-
-//       @include mixins.media-xs {
-//         flex-basis: 100%;
-//       }
-
-//       &__wrapper {
-//         height: 100%;
-//         display: flex;
-//         flex-direction: column;
-//         border-radius: 8px;
-//         overflow: hidden;
-//         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
-//         background-color: #fff;
-//         transition: transform 0.2s ease-in-out;
-
-//         &:hover {
-//           transform: translateY(-5px);
-//         }
-//       }
-
-//       &__image-wrapper {
-//         width: 100%;
-//         height: 250px;
-//         overflow: hidden;
-//         background-color: #f5f5f5;
-//       }
-
-//       &__image {
-//         width: 100%;
-//         height: 100%;
-//         object-fit: cover;
-//       }
-
-//       &__content {
-//         display: flex;
-//         flex-direction: column;
-//         justify-content: space-between;
-//         padding: 1rem;
-//         height: calc(100% - 250px);
-//       }
-
-//       &__title {
-//         font-size: 1.2rem;
-//         margin: 0 0 0.5rem;
-//         color: #333;
-//       }
-
-//       &__location {
-//         display: flex;
-//         justify-content: center;
-//         align-items: center;
-//         gap: 0.25rem;
-//         margin-bottom: 1.5rem;
-
-//         svg {
-//           width: 15px;
-//           height: 15px;
-//         }
-//       }
-
-//       &__description {
-//         font-size: 0.95rem;
-//         color: #666;
-//         margin-bottom: 1rem;
-//       }
-
-//       &__footer {
-//         display: flex;
-//         justify-content: space-between;
-//         align-items: center;
-//       }
-
-//       &__price {
-//         font-weight: bold;
-//         color: #2b7a78;
-//         font-size: 1rem;
-//       }
-
-//       &__button {
-//         background-color: #3aafa9;
-//         color: white;
-//         border: none;
-//         padding: 0.5rem 0.9rem;
-//         border-radius: 4px;
-//         font-size: 0.9rem;
-//         cursor: pointer;
-//         transition: background-color 0.2s ease;
-//       }
-
-//       &__button:hover {
-//         background-color: #2b7a78;
-//       }
-//     }
-//   }
-
-//   &__flight-card {
-//     padding: 0.75rem 2rem;
-//     border-radius: 20px;
-//     background: variables.$white;
-//     border: 1px solid variables.$secondary-color--extralight;
-//     width: 100%;
-
-//     @include mixins.media-lg {
-//       width: 100%;
-//     }
-
-//     @include mixins.media-sm {
-//       padding: 0 0.5rem 0.5rem 0.5rem;
-//     }
-
-//     &-content {
-//       position: relative;
-
-//       display: grid;
-//       grid-template-columns: repeat(5, 1fr);
-//       gap: 2rem;
-
-//       @include mixins.media-sm {
-//         /* grid-template-columns: repeat(3, 1fr); */
-//         gap: 1rem;
-//       }
-
-//       &-radio {
-//         position: absolute;
-//         top: 50%;
-//         left: 1rem;
-
-//         &::before {
-//           content: '';
-//           position: absolute;
-//           top: 50%;
-//           left: -3rem; // Adjust this value to position the line correctly
-//           width: calc(100% + 0.5rem); // Adjust this value to extend the line to the left edge
-//           height: 1px; // Adjust the thickness of the line
-//           background-color: variables.$secondary-color--extralight; // Line color
-//           transform: translateY(-50%);
-//         }
-//       }
-
-//       &-top {
-//         border-bottom: 1px solid variables.$secondary-color--extralight;
-//         padding: 1rem 0;
-//       }
-
-//       &-bottom {
-//         margin-bottom: 0.25rem;
-//         margin-top: 1.5rem;
-//       }
-
-//       &-icon {
-//         fill: variables.$secondary-color;
-
-//         &--flipped {
-//           transform: rotate(180deg);
-//         }
-//       }
-
-//       &-start {
-//         grid-column: span 2;
-//         display: flex;
-//         flex-direction: column;
-//         align-items: flex-end;
-
-//         &-time {
-//           display: flex;
-//           align-items: center;
-//           gap: 1rem;
-
-//           h5 {
-//             font-size: variables.$font-size-h5;
-//             font-weight: 400;
-//             color: variables.$text-color-black;
-//             margin: 0;
-//           }
-//         }
-
-//         &-destination {
-//           color: variables.$text-color-black;
-//           font-size: variables.$font-size-body--small;
-//           margin-top: 0.5rem;
-//           margin-bottom: 0;
-//           text-align: end;
-//         }
-
-//         &-date {
-//           font-size: variables.$font-size-label;
-//           color: variables.$text-color;
-//           margin-top: 0;
-//           text-align: end;
-//         }
-//       }
-
-//       &-stops {
-//         grid-column: span 1;
-
-//         display: flex;
-//         flex-direction: column;
-//         align-items: center;
-//         justify-content: center;
-//         gap: 0.25rem;
-
-//         max-width: 5.5rem;
-
-//         &-info {
-//           display: flex;
-//           justify-content: center;
-//           align-items: center;
-//           gap: 0.5rem;
-
-//           &-text {
-//             font-size: variables.$font-size-label;
-//             color: variables.$text-color;
-//             margin: 0;
-//           }
-
-//           &-hour {
-//             font-size: variables.$font-size-body--small;
-//             color: variables.$text-color;
-//             margin-top: 0;
-//             margin-bottom: 1rem;
-//           }
-//         }
-//       }
-
-//       &-end {
-//         grid-column: span 2;
-
-//         display: flex;
-//         flex-direction: column;
-//         align-items: flex-start;
-
-//         &-time {
-//           font-size: variables.$font-size-h5;
-//           font-weight: 400;
-
-//           color: variables.$text-color-black;
-
-//           margin: 0;
-//         }
-
-//         &-destination {
-//           color: variables.$text-color-black;
-//           font-size: variables.$font-size-body--small;
-
-//           margin-top: 0.5rem;
-//           margin-bottom: 0;
-
-//           text-align: left;
-//         }
-
-//         &-date {
-//           font-size: variables.$font-size-label;
-//           color: variables.$text-color;
-
-//           margin-top: 0;
-
-//           text-align: left;
-
-//           &--warning {
-//             color: variables.$pink-color;
-//           }
-
-//           &-wrapper {
-//             display: flex;
-//             align-items: center;
-//             gap: 0.5rem;
-//           }
-
-//           &-icon {
-//             margin-top: -0.35rem;
-//           }
-//         }
-//       }
-//     }
-
-//     &-banner {
-//       display: flex;
-//       justify-content: space-between;
-//       align-items: center;
-//       margin-top: 0;
-//       background: variables.$bg-light;
-//       padding: 0 2rem 0 1rem;
-//       border-radius: 3px;
-//       height: 40px;
-
-//       // @include mixins.media-sm {
-//       //   flex-wrap: wrap;
-
-//       //   padding: 0.5rem;
-
-//       //   &>.search__flight-card-banner-info:first-of-type {
-//       //     order: 1;
-//       //     flex: 1 1 auto;
-//       //   }
-
-//       //   // Second info (Bagage inbegrepen) moves below
-//       //   &>.search__flight-card-banner-info:nth-of-type(2) {
-//       //     order: 3;
-//       //     width: 100%;
-//       //     margin-top: 0.25rem;
-//       //     margin-left: 0.5rem;
-//       //   }
-
-//       //   // Link (Vluchtdetails) stays top-right
-//       //   &-link {
-//       //     order: 2;
-//       //   }
-
-//       //   &-text {
-//       //     margin: 0;
-//       //   }
-//       // }
-
-//       &-info {
-//         display: flex;
-//         align-items: center;
-//         gap: 0.75rem;
-//       }
-
-//       &-link {
-//         color: variables.$secondary-color;
-//         font-size: variables.$font-size-body--small;
-//         font-weight: 400;
-//         transition: all 0.3s;
-//         cursor: pointer;
-//         text-decoration: underline;
-
-//         &:hover {
-//           color: variables.$primary-color;
-//         }
-//       }
-
-//       &-text {
-//         font-size: variables.$font-size-label;
-//         font-weight: 400;
-//         color: variables.$text-color;
-//       }
-
-//       &-expanded {
-//         display: flex;
-//         flex-direction: column;
-//         border-radius: 3px;
-//         border: 1px solid variables.$secondary-color--extralight;
-//         border-top: none;
-
-//         &-row {
-//           padding: 1rem 2rem 1rem 1rem;
-//           background: variables.$bg-light;
-//           border-top: 1px solid variables.$secondary-color--extralight;
-//           display: flex;
-//           align-items: center;
-//           justify-content: space-between;
-
-//           &-left {
-//             display: flex;
-//             align-items: center;
-//             gap: 1rem;
-//           }
-
-//           &-data {
-//             color: variables.$text-color-black;
-//             font-size: variables.$font-size-body;
-//             font-weight: 400;
-//           }
-
-//           &-location {
-//             display: flex;
-//             gap: 0.5rem;
-//             align-items: center;
-//           }
-//         }
-
-//         &-middle {
-//           display: flex;
-//           flex-direction: column;
-//           align-items: flex-end;
-//           position: relative;
-
-//           &-timeline {
-//             position: absolute;
-//             width: 1px;
-//             background: variables.$secondary-color;
-//             top: 0;
-//             left: 6%;
-//             height: 100%;
-
-//             &::before,
-//             &::after {
-//               content: '';
-//               position: absolute;
-//               width: 7px;
-//               height: 7px;
-//               background: variables.$white;
-//               border: 1px solid variables.$secondary-color;
-//               border-radius: 50%;
-//               left: 0.5px;
-//             }
-
-//             &::before {
-//               top: 0;
-//               transform: translate(-50%, -50%);
-//             }
-
-//             &::after {
-//               bottom: 0;
-//               transform: translate(-50%, 50%);
-//             }
-//           }
-
-//           &-4-col-grid {
-//             display: grid;
-//             grid-template-columns: repeat(14, 1fr);
-//             width: 100%;
-
-//             @include mixins.media-sm {
-//               grid-template-columns: repeat(5, 1fr);
-//             }
-
-//             &-item {
-//               grid-column: span 3;
-//               display: flex;
-//               align-items: center;
-//               border-bottom: 1px dashed variables.$secondary-color--extralight;
-//               padding: 1rem 0;
-//               font-size: variables.$font-size-label;
-//               color: variables.$text-color;
-
-//               &:first-child {
-//                 grid-column: 3 / span 3;
-//               }
-
-//               &:nth-child(even) {
-//                 color: variables.$text-color-black;
-//               }
-
-//               @include mixins.media-sm {
-//                 grid-column: span 2; // Base for mobile: span 2 columns
-
-//                 &:nth-child(odd) {
-//                   grid-column: 2 / span 2; // Odd items in cols 2 & 3
-//                 }
-
-//                 &:nth-child(even) {
-//                   grid-column: 4 / span 2; // Even items in cols 4 & 5
-//                 }
-//               }
-//             }
-//           }
-
-//           &-3-col-grid {
-//             display: grid;
-//             grid-template-columns: repeat(14, 1fr);
-//             width: 100%;
-
-//             @include mixins.media-sm {
-//               grid-template-columns: repeat(12, 1fr);
-//               padding: 0.5rem;
-//             }
-
-//             &-item {
-//               grid-column: span 8;
-//               display: flex;
-//               align-items: flex-start;
-//               padding: 1rem 0;
-//               font-size: variables.$font-size-label;
-//               color: variables.$text-color;
-
-//               &:first-child {
-//                 grid-column: 3 / span 3;
-//               }
-
-//               &:nth-child(2) {
-//                 grid-column: span 1;
-//               }
-
-//               @include mixins.media-sm {
-//                 &:first-child {
-//                   grid-column: span 3;
-//                 }
-
-//                 grid-column: span 8;
-//               }
-
-//               &-text {
-//                 display: flex;
-//                 flex-direction: column;
-//                 gap: 0.25rem;
-//                 margin-bottom: 0.75rem;
-//               }
-
-//               &-underline {
-//                 border-bottom: 1px solid variables.$secondary-color--extralight;
-//                 width: 100%;
-
-//                 &:last-child {
-//                   padding-bottom: 1rem;
-//                 }
-//               }
-
-//               &-title {
-//                 color: variables.$text-color-black;
-//               }
-
-//               &--pb-0 {
-//                 padding-bottom: 0;
-//               }
-
-//               &--economy {
-//                 color: variables.$text-color-black;
-//               }
-//             }
-//           }
-//         }
-//       }
-//     }
-//   }
-
-//   &__price-card {
-//     padding: 1rem;
-//     border-radius: 20px;
-//     background: variables.$white;
-//     border: 1px solid variables.$secondary-color--extralight;
-
-//     max-height: 25.25rem;
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: space-between;
-//     position: relative;
-
-//     &--full-height {
-//       max-height: 100%;
-//     }
-
-//     @include mixins.media-sm {
-//       flex-direction: row;
-//       align-items: center;
-//     }
-
-//     @include mixins.media-lg {
-//       width: 100%;
-//       padding: 1rem;
-//     }
-
-//     @include mixins.media-xl {
-//       max-height: 28rem;
-//     }
-
-//     &-bg-price {
-//       background: variables.$secondary-color--extralight;
-//       border-radius: 20px;
-//       height: calc(81% - 2rem);
-//       width: calc(100% - 2rem);
-//       position: absolute;
-//       top: 1rem;
-//       right: 1rem;
-//       z-index: 1;
-
-//       @include mixins.media-sm {
-//         height: calc(100% - 1rem);
-//         width: calc(100% - 1rem);
-//         top: 0.5rem;
-//         right: 0.5rem;
-//         border-radius: 14px;
-//       }
-//     }
-
-//     &-best-price {
-//       font-size: variables.$font-size-label;
-//       color: variables.$white;
-//       background: variables.$primary-color;
-//       padding: 0.5rem 1rem;
-//       border-radius: 2rem;
-//       font-weight: 400;
-//       position: absolute;
-//       top: 1rem;
-//       right: 1rem;
-//       z-index: 10;
-
-//       display: flex;
-//       align-items: center;
-//       gap: 0.5rem;
-
-//       @include mixins.media-sm {
-//         top: 0.5rem;
-//         left: 0.5rem;
-//         right: auto;
-//         font-size: variables.$font-size-body--small;
-//       }
-//     }
-
-//     &-content {
-//       display: flex;
-//       flex-direction: column;
-//       align-items: center;
-//       z-index: 10;
-
-//       @include mixins.media-sm {
-//         align-items: flex-start;
-//         justify-content: space-between;
-//       }
-//     }
-
-//     &-price {
-//       font-size: variables.$font-size-h3;
-//       font-weight: 400;
-//       color: variables.$text-color;
-//       margin-bottom: 1rem;
-
-//       @include mixins.media-lg {
-//         margin-top: 0.75rem;
-//         font-size: variables.$font-size-h4;
-//       }
-
-//       @include mixins.media-sm {
-//         margin-top: 1.125rem;
-//       }
-
-//       &-wrapper {
-//         display: flex;
-//         justify-content: center;
-//         margin: auto 0;
-
-//         @include mixins.media-sm {
-//           margin: 0;
-//           height: 100%;
-//         }
-//       }
-//     }
-
-//     &-button {
-//       width: 100%;
-//       min-width: 9.2rem;
-//       height: 3.5rem;
-//       padding: 1rem 0;
-//       background: variables.$secondary-color;
-//       border: 1px solid variables.$secondary-color;
-//       color: variables.$white;
-//       border-radius: 3px;
-//       margin-top: 0.5rem;
-//       transition: all 0.2s ease-in-out;
-//       cursor: pointer;
-//       z-index: 2;
-
-//       &:hover {
-//         background: variables.$primary-color;
-//         border: 1px solid variables.$primary-color;
-//       }
-
-//       @include mixins.media-sm {
-//         margin-top: 0;
-//         width: 9.2rem;
-//       }
-//     }
-
-//     &-label {
-//       font-weight: 400;
-//       border-radius: 2rem;
-//       width: 2.875rem;
-//       height: 1.75rem;
-//       display: flex;
-//       align-items: center;
-//       justify-content: center;
-//       font-size: variables.$font-size-label;
-
-//       &--neg {
-//         color: #128d62;
-//         border: 1px solid #128d62;
-//       }
-
-//       &--pub {
-//         color: #0e3e8d;
-//         border: 1px solid #0e3e8d;
-//       }
-//     }
-
-//     &-deal {
-//       border-radius: 2rem;
-//       height: 1.75rem;
-//       width: 100%;
-//       min-width: 13.5rem;
-//       color: #ff6847;
-//       background: variables.$white;
-//       border: 1px solid #ff6847;
-//       display: flex;
-//       align-items: center;
-//       justify-content: center;
-//       gap: 0.5rem;
-//       z-index: 10;
-
-//       p {
-//         margin: 0;
-//         font-weight: 400;
-//         font-size: variables.$font-size-label;
-//       }
-
-//       @include mixins.media-lg {
-//         margin-top: 1rem;
-//       }
-
-//       &-wrapper {
-//         display: flex;
-//         flex-direction: column;
-
-//         @include mixins.media-sm {
-//           flex-direction: column-reverse;
-//           align-items: flex-end;
-//         }
-//       }
-//     }
-
-//     .search__price-card-bg-price ~ .search__price-card-price-wrapper {
-//       .search__price-card-price {
-//         padding-top: 2rem;
-//       }
-//     }
-//   }
-
-//   &__banner {
-//     display: flex;
-//     justify-content: center;
-//     margin-bottom: 4rem;
-//     margin-top: 2rem;
-//   }
-// }
-
-// .star-rating-filter {
-//   display: flex;
-//   justify-content: flex-end;
-//   flex-direction: row-reverse;
-//   gap: 1rem;
-//   font-size: 1.5rem;
-//   cursor: pointer;
-
-//   .star {
-//     color: #e3f1f2;
-//     /* unfilled */
-//     transition: color 0.2s;
-//   }
-
-//   .star.filled {
-//     color: #ffd700;
-//     /* filled gold */
-//   }
-
-//   .star:hover,
-//   .star:hover ~ .star {
-//     color: #ffc107;
-//   }
-// }
-
-// .search__filter-toggle-label {
-//   vertical-align: middle;
-//   font-size: 0.95rem;
-// }
-
-// .search__filter-toggle-label {
-//   vertical-align: middle;
-//   font-size: 0.95rem;
-// }
-
-// .mobile-filters-button {
-//   display: none;
-//   flex: 1;
-//   max-width: 7rem;
-//   margin-right: 0.5rem;
-//   height: 3.5rem;
-//   color: variables.$secondary-color;
-//   border: 1px solid variables.$secondary-color;
-//   border-radius: 3px;
-//   font-size: variables.$font-size-body--small;
-//   cursor: pointer;
-
-//   @include mixins.media-lg {
-//     display: flex;
-//     justify-content: center;
-//     align-items: center;
-//   }
-
-//   &__icon {
-//     fill: variables.$secondary-color;
-//     margin-right: 0.5rem;
-//   }
-// }
-
-// .search__filters--mobile-modal {
-//   position: fixed;
-//   top: 0;
-//   right: -100vw; // Start off-screen
-//   width: 100vw;
-//   height: 100vh;
-//   background-color: variables.$white;
-//   z-index: 100010;
-//   overflow-y: auto;
-//   padding: 1rem;
-//   box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
-
-//   // Initial hidden state
-//   opacity: 0;
-//   pointer-events: none;
-//   transition: right 0.35s ease, opacity 0.25s ease;
-
-//   // When modal is open
-//   &.is-open {
-//     right: 0;
-//     opacity: 1;
-//     pointer-events: auto;
-//   }
-
-//   .search__filters {
-//     display: block !important;
-//     height: 100%;
-//     margin: 0;
-//     border: none;
-//     box-shadow: none;
-//     padding-top: 3rem;
-//   }
-// }
-
-// .mobile-filters-close {
-//   position: fixed;
-//   z-index: 100020;
-//   top: 2rem;
-//   right: 2rem;
-//   background: none;
-//   border: none;
-//   font-size: 1.5rem;
-//   color: variables.$text-color;
-//   cursor: pointer;
-// }
-
-// .flight-path {
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   width: 6rem;
-
-//   @media (max-width: 400px) {
-//     width: 100%;
-//   }
-
-//   &__point {
-//     width: 7px;
-//     height: 7px;
-
-//     border-radius: 50%;
-//     border: 1px solid variables.$secondary-color;
-//     background: variables.$white;
-
-//     &--start,
-//     &--end {
-//       background-color: variables.$white;
-
-//       @media (max-width: 400px) {
-//         min-width: 7px;
-//       }
-//     }
-//   }
-
-//   &__line {
-//     display: flex;
-//     align-items: center;
-//     flex-grow: 1;
-//     position: relative;
-//     height: 1px;
-//     background: variables.$secondary-color;
-
-//     gap: 1.3rem;
-
-//     &::before,
-//     &::after {
-//       content: '';
-//       flex-grow: 1;
-//       height: 1px;
-//       background: variables.$secondary-color;
-//     }
-//   }
-
-//   &__stop {
-//     width: 9px;
-//     height: 9px;
-
-//     border-radius: 50%;
-//     background: variables.$secondary-color;
-//     border: 2px solid variables.$white;
-
-//     position: relative;
-//   }
-// }
-
-// .has-overlay {
-//   overflow: hidden;
-// }
-
-// .spinner {
-//   &__container {
-//     margin: 1rem auto;
-//     display: flex;
-//     flex-direction: column;
-//     align-items: center;
-//     gap: 1rem;
-//   }
-
-//   &__icon {
-//     border: 2px solid rgb(244, 249, 250, 0.2);
-//     border-top: 2px solid #3aafa9;
-//     border-radius: 50%;
-//     width: 24px;
-//     height: 24px;
-//     animation: spin 0.6s linear infinite;
-//     display: inline-block;
-//     vertical-align: middle;
-//     margin-right: 6px;
-//   }
-
-//   &__label {
-//     text-align: center;
-//   }
-// }
-
-// @keyframes spin {
-//   to {
-//     transform: rotate(360deg);
-//   }
-// }
+// @use './abstracts/variables' as variables;
+// @use './abstracts/mixins' as mixins;
+
+// * {
+//   box-sizing: border-box;
+// }
+
+// .search {
+//   padding-top: 2rem;
+//   background: variables.$bg-light;
+//   display: flex;
+
+//   @include mixins.container();
+
+//   &__bg {
+//     background: variables.$bg-light;
+//   }
+
+//   &__filters {
+//     max-width: 24rem;
+//     width: 100%;
+//     background-color: variables.$white;
+//     padding: 2rem;
+//     border-radius: 5px;
+//     border: 1px solid variables.$secondary-color--extralight;
+//     height: fit-content;
+//     margin-bottom: 2rem;
+//     margin-left: 0;
+
+//     @media (max-width: 1600px) {
+//       margin-left: 2rem;
+//     }
+
+//     @include mixins.media-xl {
+//       margin-left: 0;
+//       margin-top: 2rem;
+//     }
+
+//     @include mixins.media-lg {
+//       display: none;
+//     }
+
+//     @include mixins.media-md {
+//       grid-column: span 12;
+//     }
+
+//     &__group-container {
+//       height: calc(100% - 6rem);
+//       overflow-y: auto;
+//       overflow-x: hidden;
+//     }
+
+//     &__actions {
+//       margin-top: 1rem;
+//       display: flex;
+//       justify-content: space-between;
+//       gap: 1rem;
+//     }
+//   }
+
+//   &__results {
+//     padding: 0 5.5rem 2rem 5.5rem;
+//     width: 100%;
+//     display: flex;
+//     flex-direction: column;
+
+//     @media (max-width: 1600px) {
+//       padding-left: 2rem;
+//     }
+
+//     @include mixins.media-xl {
+//       padding-left: 2rem;
+//       padding-right: 0;
+//     }
+
+//     @include mixins.media-lg {
+//       padding-left: 0;
+//     }
+
+//     @include mixins.media-md {
+//       grid-column: span 12;
+//     }
+
+//     &__cards {
+//       display: flex;
+//       flex-wrap: wrap;
+//       gap: 1rem;
+//     }
+//   }
+
+//   &__filter {
+//     &-row {
+//       display: flex;
+//       align-items: center;
+//       justify-content: space-between;
+//       margin-top: 0.875rem;
+
+//       &-flex-title {
+//         display: flex;
+//         align-items: center;
+//         gap: 1rem;
+//       }
+
+//       &-icon {
+//         fill: variables.$text-color-black;
+//       }
+
+//       &--underline {
+//         border-bottom: 1px solid variables.$secondary-color--extralight;
+//         margin-bottom: 0.5rem;
+//         cursor: pointer;
+//       }
+//     }
+
+//     &-link {
+//       color: variables.$secondary-color;
+//       transition: all 0.3s;
+//       cursor: pointer;
+//       text-decoration: underline;
+//       margin-top: 0.85rem;
+
+//       &:hover {
+//         color: variables.$primary-color;
+//       }
+//     }
+
+//     &-chevron-icon {
+//       transition: transform 0.3s ease;
+//       transform: rotate(180deg);
+//       margin-top: 0.5rem;
+
+//       &--flipped {
+//         transform: rotate(0);
+//       }
+//     }
+
+//     &-small-title {
+//       font-size: variables.$font-size-body--small;
+//       font-weight: 700;
+//       margin: 0 auto;
+//     }
+
+//     &-medium-title {
+//       font-size: variables.$font-size-body;
+//       font-weight: 700;
+//       margin: 0.5rem 0;
+
+//       &-wrapper {
+//         margin-top: 1.25rem;
+//         margin-bottom: 0.25rem;
+//       }
+//     }
+
+//     &-large-title {
+//       font-size: variables.$font-size-h6;
+//       font-weight: 400;
+//       margin: 0.5rem 0;
+//     }
+
+//     &-reset {
+//       color: variables.$secondary-color;
+//       font-size: variables.$font-size-body--small;
+//       text-decoration: underline;
+//       cursor: pointer;
+//     }
+
+//     &-facet {
+//       color: variables.$text-color;
+//     }
+
+//     &-price {
+//       font-size: variables.$font-size-body--small;
+//       color: variables.$secondary-color;
+//       margin-bottom: 0;
+//       margin-top: 0;
+//       min-width: 88px;
+//       text-align: end;
+//     }
+
+//     &-button {
+//       width: 100%;
+//       padding: 1rem 0;
+//       background: transparent;
+//       border: 1px solid variables.$secondary-color;
+//       color: variables.$secondary-color;
+//       border-radius: 3px;
+//       margin-top: 2rem;
+//       transition: all 0.2s ease-in-out;
+//       cursor: pointer;
+
+//       &:hover {
+//         background: variables.$secondary-color;
+//         color: variables.$white;
+//       }
+//     }
+//   }
+
+//   &__result {
+//     display: flex;
+//     flex-wrap: wrap;
+//     gap: 1rem;
+//     margin: 0;
+//     margin-bottom: 2rem;
+
+//     &--flight {
+//       display: grid;
+//       gap: 0;
+//       grid-template-columns: 1fr 257px;
+//       margin: 0 0 2rem;
+
+//       @include mixins.media-lg {
+//         grid-template-rows: repeat(1, 1fr);
+//       }
+
+//       @include mixins.media-md {
+//         grid-template-columns: 1fr;
+//       }
+//     }
+
+//     &-row {
+//       display: flex;
+//       align-items: center;
+//       justify-content: space-between;
+//       margin-bottom: 1.5rem;
+//       margin-top: 1.125rem;
+
+//       @include mixins.media-sm {
+//         margin-bottom: 0.75rem;
+//       }
+
+//       &-text {
+//         font-size: variables.$font-size-body;
+//         color: variables.$text-color;
+//         margin: 0;
+//       }
+
+//       &-filter {
+//         display: flex;
+//         gap: 1.5rem;
+//         align-items: center;
+//       }
+
+//       &-button {
+//         width: 13.5rem;
+//         height: 3.5rem;
+//         display: flex;
+//         justify-content: space-between;
+//         align-items: center;
+//         padding: 0 1rem;
+//         border: 1px solid variables.$secondary-color--light;
+//         border-radius: 3px;
+//         color: variables.$secondary-color;
+//         cursor: pointer;
+//         transition: all 0.2s ease-in-out;
+
+//         &:hover {
+//           background: variables.$secondary-color;
+//           color: variables.$white;
+
+//           .search__result-row-icon {
+//             fill: variables.$white;
+//           }
+//         }
+//       }
+
+//       &-icon {
+//         fill: variables.$secondary-color;
+//       }
+//     }
+
+//     &-card {
+//       flex: calc(33% - 0.5rem) 0 0;
+
+//       @media (max-width: 1300px) {
+//         flex-basis: calc(50% - 0.5rem);
+//       }
+
+//       @include mixins.media-xs {
+//         flex-basis: 100%;
+//       }
+
+//       &__wrapper {
+//         height: 100%;
+//         display: flex;
+//         flex-direction: column;
+//         border-radius: 8px;
+//         overflow: hidden;
+//         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+//         background-color: #fff;
+//         transition: transform 0.2s ease-in-out;
+
+//         &:hover {
+//           transform: translateY(-5px);
+//         }
+//       }
+
+//       &__image-wrapper {
+//         width: 100%;
+//         height: 250px;
+//         overflow: hidden;
+//         background-color: #f5f5f5;
+//       }
+
+//       &__image {
+//         width: 100%;
+//         height: 100%;
+//         object-fit: cover;
+//       }
+
+//       &__content {
+//         display: flex;
+//         flex-direction: column;
+//         justify-content: space-between;
+//         padding: 1rem;
+//         height: calc(100% - 250px);
+//       }
+
+//       &__title {
+//         font-size: 1.2rem;
+//         margin: 0 0 0.5rem;
+//         color: #333;
+//       }
+
+//       &__location {
+//         display: flex;
+//         justify-content: center;
+//         align-items: center;
+//         gap: 0.25rem;
+//         margin-bottom: 1.5rem;
+
+//         svg {
+//           width: 15px;
+//           height: 15px;
+//         }
+//       }
+
+//       &__description {
+//         font-size: 0.95rem;
+//         color: #666;
+//         margin-bottom: 1rem;
+//       }
+
+//       &__footer {
+//         display: flex;
+//         justify-content: space-between;
+//         align-items: center;
+//       }
+
+//       &__price {
+//         font-weight: bold;
+//         color: #2b7a78;
+//         font-size: 1rem;
+//       }
+
+//       &__button {
+//         background-color: #3aafa9;
+//         color: white;
+//         border: none;
+//         padding: 0.5rem 0.9rem;
+//         border-radius: 4px;
+//         font-size: 0.9rem;
+//         cursor: pointer;
+//         transition: background-color 0.2s ease;
+//       }
+
+//       &__button:hover {
+//         background-color: #2b7a78;
+//       }
+//     }
+//   }
+
+//   &__flight-card {
+//     padding: 0.75rem 2rem;
+//     border-radius: 20px;
+//     background: variables.$white;
+//     border: 1px solid variables.$secondary-color--extralight;
+//     width: 100%;
+
+//     @include mixins.media-lg {
+//       width: 100%;
+//     }
+
+//     @include mixins.media-sm {
+//       padding: 0 0.5rem 0.5rem 0.5rem;
+//     }
+
+//     &-content {
+//       position: relative;
+
+//       display: grid;
+//       grid-template-columns: repeat(5, 1fr);
+//       gap: 2rem;
+
+//       @include mixins.media-sm {
+//         /* grid-template-columns: repeat(3, 1fr); */
+//         gap: 1rem;
+//       }
+
+//       &-radio {
+//         position: absolute;
+//         top: 50%;
+//         left: 1rem;
+
+//         &::before {
+//           content: '';
+//           position: absolute;
+//           top: 50%;
+//           left: -3rem; // Adjust this value to position the line correctly
+//           width: calc(100% + 0.5rem); // Adjust this value to extend the line to the left edge
+//           height: 1px; // Adjust the thickness of the line
+//           background-color: variables.$secondary-color--extralight; // Line color
+//           transform: translateY(-50%);
+//         }
+//       }
+
+//       &-top {
+//         border-bottom: 1px solid variables.$secondary-color--extralight;
+//         padding: 1rem 0;
+//       }
+
+//       &-bottom {
+//         margin-bottom: 0.25rem;
+//         margin-top: 1.5rem;
+//       }
+
+//       &-icon {
+//         fill: variables.$secondary-color;
+
+//         &--flipped {
+//           transform: rotate(180deg);
+//         }
+//       }
+
+//       &-start {
+//         grid-column: span 2;
+//         display: flex;
+//         flex-direction: column;
+//         align-items: flex-end;
+
+//         &-time {
+//           display: flex;
+//           align-items: center;
+//           gap: 1rem;
+
+//           h5 {
+//             font-size: variables.$font-size-h5;
+//             font-weight: 400;
+//             color: variables.$text-color-black;
+//             margin: 0;
+//           }
+//         }
+
+//         &-destination {
+//           color: variables.$text-color-black;
+//           font-size: variables.$font-size-body--small;
+//           margin-top: 0.5rem;
+//           margin-bottom: 0;
+//           text-align: end;
+//         }
+
+//         &-date {
+//           font-size: variables.$font-size-label;
+//           color: variables.$text-color;
+//           margin-top: 0;
+//           text-align: end;
+//         }
+//       }
+
+//       &-stops {
+//         grid-column: span 1;
+
+//         display: flex;
+//         flex-direction: column;
+//         align-items: center;
+//         justify-content: center;
+//         gap: 0.25rem;
+
+//         max-width: 5.5rem;
+
+//         &-info {
+//           display: flex;
+//           justify-content: center;
+//           align-items: center;
+//           gap: 0.5rem;
+
+//           &-text {
+//             font-size: variables.$font-size-label;
+//             color: variables.$text-color;
+//             margin: 0;
+//           }
+
+//           &-hour {
+//             font-size: variables.$font-size-body--small;
+//             color: variables.$text-color;
+//             margin-top: 0;
+//             margin-bottom: 1rem;
+//           }
+//         }
+//       }
+
+//       &-end {
+//         grid-column: span 2;
+
+//         display: flex;
+//         flex-direction: column;
+//         align-items: flex-start;
+
+//         &-time {
+//           font-size: variables.$font-size-h5;
+//           font-weight: 400;
+
+//           color: variables.$text-color-black;
+
+//           margin: 0;
+//         }
+
+//         &-destination {
+//           color: variables.$text-color-black;
+//           font-size: variables.$font-size-body--small;
+
+//           margin-top: 0.5rem;
+//           margin-bottom: 0;
+
+//           text-align: left;
+//         }
+
+//         &-date {
+//           font-size: variables.$font-size-label;
+//           color: variables.$text-color;
+
+//           margin-top: 0;
+
+//           text-align: left;
+
+//           &--warning {
+//             color: variables.$pink-color;
+//           }
+
+//           &-wrapper {
+//             display: flex;
+//             align-items: center;
+//             gap: 0.5rem;
+//           }
+
+//           &-icon {
+//             margin-top: -0.35rem;
+//           }
+//         }
+//       }
+//     }
+
+//     &-banner {
+//       display: flex;
+//       justify-content: space-between;
+//       align-items: center;
+//       margin-top: 0;
+//       background: variables.$bg-light;
+//       padding: 0 2rem 0 1rem;
+//       border-radius: 3px;
+//       height: 40px;
+
+//       // @include mixins.media-sm {
+//       //   flex-wrap: wrap;
+
+//       //   padding: 0.5rem;
+
+//       //   &>.search__flight-card-banner-info:first-of-type {
+//       //     order: 1;
+//       //     flex: 1 1 auto;
+//       //   }
+
+//       //   // Second info (Bagage inbegrepen) moves below
+//       //   &>.search__flight-card-banner-info:nth-of-type(2) {
+//       //     order: 3;
+//       //     width: 100%;
+//       //     margin-top: 0.25rem;
+//       //     margin-left: 0.5rem;
+//       //   }
+
+//       //   // Link (Vluchtdetails) stays top-right
+//       //   &-link {
+//       //     order: 2;
+//       //   }
+
+//       //   &-text {
+//       //     margin: 0;
+//       //   }
+//       // }
+
+//       &-info {
+//         display: flex;
+//         align-items: center;
+//         gap: 0.75rem;
+//       }
+
+//       &-link {
+//         color: variables.$secondary-color;
+//         font-size: variables.$font-size-body--small;
+//         font-weight: 400;
+//         transition: all 0.3s;
+//         cursor: pointer;
+//         text-decoration: underline;
+
+//         &:hover {
+//           color: variables.$primary-color;
+//         }
+//       }
+
+//       &-text {
+//         font-size: variables.$font-size-label;
+//         font-weight: 400;
+//         color: variables.$text-color;
+//       }
+
+//       &-expanded {
+//         display: flex;
+//         flex-direction: column;
+//         border-radius: 3px;
+//         border: 1px solid variables.$secondary-color--extralight;
+//         border-top: none;
+
+//         &-row {
+//           padding: 1rem 2rem 1rem 1rem;
+//           background: variables.$bg-light;
+//           border-top: 1px solid variables.$secondary-color--extralight;
+//           display: flex;
+//           align-items: center;
+//           justify-content: space-between;
+
+//           &-left {
+//             display: flex;
+//             align-items: center;
+//             gap: 1rem;
+//           }
+
+//           &-data {
+//             color: variables.$text-color-black;
+//             font-size: variables.$font-size-body;
+//             font-weight: 400;
+//           }
+
+//           &-location {
+//             display: flex;
+//             gap: 0.5rem;
+//             align-items: center;
+//           }
+//         }
+
+//         &-middle {
+//           display: flex;
+//           flex-direction: column;
+//           align-items: flex-end;
+//           position: relative;
+
+//           &-timeline {
+//             position: absolute;
+//             width: 1px;
+//             background: variables.$secondary-color;
+//             top: 0;
+//             left: 6%;
+//             height: 100%;
+
+//             &::before,
+//             &::after {
+//               content: '';
+//               position: absolute;
+//               width: 7px;
+//               height: 7px;
+//               background: variables.$white;
+//               border: 1px solid variables.$secondary-color;
+//               border-radius: 50%;
+//               left: 0.5px;
+//             }
+
+//             &::before {
+//               top: 0;
+//               transform: translate(-50%, -50%);
+//             }
+
+//             &::after {
+//               bottom: 0;
+//               transform: translate(-50%, 50%);
+//             }
+//           }
+
+//           &-4-col-grid {
+//             display: grid;
+//             grid-template-columns: repeat(14, 1fr);
+//             width: 100%;
+
+//             @include mixins.media-sm {
+//               grid-template-columns: repeat(5, 1fr);
+//             }
+
+//             &-item {
+//               grid-column: span 3;
+//               display: flex;
+//               align-items: center;
+//               border-bottom: 1px dashed variables.$secondary-color--extralight;
+//               padding: 1rem 0;
+//               font-size: variables.$font-size-label;
+//               color: variables.$text-color;
+
+//               &:first-child {
+//                 grid-column: 3 / span 3;
+//               }
+
+//               &:nth-child(even) {
+//                 color: variables.$text-color-black;
+//               }
+
+//               @include mixins.media-sm {
+//                 grid-column: span 2; // Base for mobile: span 2 columns
+
+//                 &:nth-child(odd) {
+//                   grid-column: 2 / span 2; // Odd items in cols 2 & 3
+//                 }
+
+//                 &:nth-child(even) {
+//                   grid-column: 4 / span 2; // Even items in cols 4 & 5
+//                 }
+//               }
+//             }
+//           }
+
+//           &-3-col-grid {
+//             display: grid;
+//             grid-template-columns: repeat(14, 1fr);
+//             width: 100%;
+
+//             @include mixins.media-sm {
+//               grid-template-columns: repeat(12, 1fr);
+//               padding: 0.5rem;
+//             }
+
+//             &-item {
+//               grid-column: span 8;
+//               display: flex;
+//               align-items: flex-start;
+//               padding: 1rem 0;
+//               font-size: variables.$font-size-label;
+//               color: variables.$text-color;
+
+//               &:first-child {
+//                 grid-column: 3 / span 3;
+//               }
+
+//               &:nth-child(2) {
+//                 grid-column: span 1;
+//               }
+
+//               @include mixins.media-sm {
+//                 &:first-child {
+//                   grid-column: span 3;
+//                 }
+
+//                 grid-column: span 8;
+//               }
+
+//               &-text {
+//                 display: flex;
+//                 flex-direction: column;
+//                 gap: 0.25rem;
+//                 margin-bottom: 0.75rem;
+//               }
+
+//               &-underline {
+//                 border-bottom: 1px solid variables.$secondary-color--extralight;
+//                 width: 100%;
+
+//                 &:last-child {
+//                   padding-bottom: 1rem;
+//                 }
+//               }
+
+//               &-title {
+//                 color: variables.$text-color-black;
+//               }
+
+//               &--pb-0 {
+//                 padding-bottom: 0;
+//               }
+
+//               &--economy {
+//                 color: variables.$text-color-black;
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+
+//   &__price-card {
+//     padding: 1rem;
+//     border-radius: 20px;
+//     background: variables.$white;
+//     border: 1px solid variables.$secondary-color--extralight;
+
+//     max-height: 25.25rem;
+//     display: flex;
+//     flex-direction: column;
+//     justify-content: space-between;
+//     position: relative;
+
+//     &--full-height {
+//       max-height: 100%;
+//     }
+
+//     @include mixins.media-sm {
+//       flex-direction: row;
+//       align-items: center;
+//     }
+
+//     @include mixins.media-lg {
+//       width: 100%;
+//       padding: 1rem;
+//     }
+
+//     @include mixins.media-xl {
+//       max-height: 28rem;
+//     }
+
+//     &-bg-price {
+//       background: variables.$secondary-color--extralight;
+//       border-radius: 20px;
+//       height: calc(81% - 2rem);
+//       width: calc(100% - 2rem);
+//       position: absolute;
+//       top: 1rem;
+//       right: 1rem;
+//       z-index: 1;
+
+//       @include mixins.media-sm {
+//         height: calc(100% - 1rem);
+//         width: calc(100% - 1rem);
+//         top: 0.5rem;
+//         right: 0.5rem;
+//         border-radius: 14px;
+//       }
+//     }
+
+//     &-best-price {
+//       font-size: variables.$font-size-label;
+//       color: variables.$white;
+//       background: variables.$primary-color;
+//       padding: 0.5rem 1rem;
+//       border-radius: 2rem;
+//       font-weight: 400;
+//       position: absolute;
+//       top: 1rem;
+//       right: 1rem;
+//       z-index: 10;
+
+//       display: flex;
+//       align-items: center;
+//       gap: 0.5rem;
+
+//       @include mixins.media-sm {
+//         top: 0.5rem;
+//         left: 0.5rem;
+//         right: auto;
+//         font-size: variables.$font-size-body--small;
+//       }
+//     }
+
+//     &-content {
+//       display: flex;
+//       flex-direction: column;
+//       align-items: center;
+//       z-index: 10;
+
+//       @include mixins.media-sm {
+//         align-items: flex-start;
+//         justify-content: space-between;
+//       }
+//     }
+
+//     &-price {
+//       font-size: variables.$font-size-h3;
+//       font-weight: 400;
+//       color: variables.$text-color;
+//       margin-bottom: 1rem;
+
+//       @include mixins.media-lg {
+//         margin-top: 0.75rem;
+//         font-size: variables.$font-size-h4;
+//       }
+
+//       @include mixins.media-sm {
+//         margin-top: 1.125rem;
+//       }
+
+//       &-wrapper {
+//         display: flex;
+//         justify-content: center;
+//         margin: auto 0;
+
+//         @include mixins.media-sm {
+//           margin: 0;
+//           height: 100%;
+//         }
+//       }
+//     }
+
+//     &-button {
+//       width: 100%;
+//       min-width: 9.2rem;
+//       height: 3.5rem;
+//       padding: 1rem 0;
+//       background: variables.$secondary-color;
+//       border: 1px solid variables.$secondary-color;
+//       color: variables.$white;
+//       border-radius: 3px;
+//       margin-top: 0.5rem;
+//       transition: all 0.2s ease-in-out;
+//       cursor: pointer;
+//       z-index: 2;
+
+//       &:hover {
+//         background: variables.$primary-color;
+//         border: 1px solid variables.$primary-color;
+//       }
+
+//       @include mixins.media-sm {
+//         margin-top: 0;
+//         width: 9.2rem;
+//       }
+//     }
+
+//     &-label {
+//       font-weight: 400;
+//       border-radius: 2rem;
+//       width: 2.875rem;
+//       height: 1.75rem;
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       font-size: variables.$font-size-label;
+
+//       &--neg {
+//         color: #128d62;
+//         border: 1px solid #128d62;
+//       }
+
+//       &--pub {
+//         color: #0e3e8d;
+//         border: 1px solid #0e3e8d;
+//       }
+//     }
+
+//     &-deal {
+//       border-radius: 2rem;
+//       height: 1.75rem;
+//       width: 100%;
+//       min-width: 13.5rem;
+//       color: #ff6847;
+//       background: variables.$white;
+//       border: 1px solid #ff6847;
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       gap: 0.5rem;
+//       z-index: 10;
+
+//       p {
+//         margin: 0;
+//         font-weight: 400;
+//         font-size: variables.$font-size-label;
+//       }
+
+//       @include mixins.media-lg {
+//         margin-top: 1rem;
+//       }
+
+//       &-wrapper {
+//         display: flex;
+//         flex-direction: column;
+
+//         @include mixins.media-sm {
+//           flex-direction: column-reverse;
+//           align-items: flex-end;
+//         }
+//       }
+//     }
+
+//     .search__price-card-bg-price ~ .search__price-card-price-wrapper {
+//       .search__price-card-price {
+//         padding-top: 2rem;
+//       }
+//     }
+//   }
+
+//   &__banner {
+//     display: flex;
+//     justify-content: center;
+//     margin-bottom: 4rem;
+//     margin-top: 2rem;
+//   }
+// }
+
+// .star-rating-filter {
+//   display: flex;
+//   justify-content: flex-end;
+//   flex-direction: row-reverse;
+//   gap: 1rem;
+//   font-size: 1.5rem;
+//   cursor: pointer;
+
+//   .star {
+//     color: #e3f1f2;
+//     /* unfilled */
+//     transition: color 0.2s;
+//   }
+
+//   .star.filled {
+//     color: #ffd700;
+//     /* filled gold */
+//   }
+
+//   .star:hover,
+//   .star:hover ~ .star {
+//     color: #ffc107;
+//   }
+// }
+
+// .search__filter-toggle-label {
+//   vertical-align: middle;
+//   font-size: 0.95rem;
+// }
+
+// .search__filter-toggle-label {
+//   vertical-align: middle;
+//   font-size: 0.95rem;
+// }
+
+// .mobile-filters-button {
+//   display: none;
+//   flex: 1;
+//   max-width: 7rem;
+//   margin-right: 0.5rem;
+//   height: 3.5rem;
+//   color: variables.$secondary-color;
+//   border: 1px solid variables.$secondary-color;
+//   border-radius: 3px;
+//   font-size: variables.$font-size-body--small;
+//   cursor: pointer;
+
+//   @include mixins.media-lg {
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//   }
+
+//   &__icon {
+//     fill: variables.$secondary-color;
+//     margin-right: 0.5rem;
+//   }
+// }
+
+// .search__filters--mobile-modal {
+//   position: fixed;
+//   top: 0;
+//   right: -100vw; // Start off-screen
+//   width: 100vw;
+//   height: 100vh;
+//   background-color: variables.$white;
+//   z-index: 100010;
+//   overflow-y: auto;
+//   padding: 1rem;
+//   box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
+
+//   // Initial hidden state
+//   opacity: 0;
+//   pointer-events: none;
+//   transition: right 0.35s ease, opacity 0.25s ease;
+
+//   // When modal is open
+//   &.is-open {
+//     right: 0;
+//     opacity: 1;
+//     pointer-events: auto;
+//   }
+
+//   .search__filters {
+//     display: block !important;
+//     height: 100%;
+//     margin: 0;
+//     border: none;
+//     box-shadow: none;
+//     padding-top: 3rem;
+//   }
+// }
+
+// .mobile-filters-close {
+//   position: fixed;
+//   z-index: 100020;
+//   top: 2rem;
+//   right: 2rem;
+//   background: none;
+//   border: none;
+//   font-size: 1.5rem;
+//   color: variables.$text-color;
+//   cursor: pointer;
+// }
+
+// .flight-path {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   width: 6rem;
+
+//   @media (max-width: 400px) {
+//     width: 100%;
+//   }
+
+//   &__point {
+//     width: 7px;
+//     height: 7px;
+
+//     border-radius: 50%;
+//     border: 1px solid variables.$secondary-color;
+//     background: variables.$white;
+
+//     &--start,
+//     &--end {
+//       background-color: variables.$white;
+
+//       @media (max-width: 400px) {
+//         min-width: 7px;
+//       }
+//     }
+//   }
+
+//   &__line {
+//     display: flex;
+//     align-items: center;
+//     flex-grow: 1;
+//     position: relative;
+//     height: 1px;
+//     background: variables.$secondary-color;
+
+//     gap: 1.3rem;
+
+//     &::before,
+//     &::after {
+//       content: '';
+//       flex-grow: 1;
+//       height: 1px;
+//       background: variables.$secondary-color;
+//     }
+//   }
+
+//   &__stop {
+//     width: 9px;
+//     height: 9px;
+
+//     border-radius: 50%;
+//     background: variables.$secondary-color;
+//     border: 2px solid variables.$white;
+
+//     position: relative;
+//   }
+// }
+
+// .has-overlay {
+//   overflow: hidden;
+// }
+
+// .spinner {
+//   &__container {
+//     margin: 1rem auto;
+//     display: flex;
+//     flex-direction: column;
+//     align-items: center;
+//     gap: 1rem;
+//   }
+
+//   &__icon {
+//     border: 2px solid rgb(244, 249, 250, 0.2);
+//     border-top: 2px solid #3aafa9;
+//     border-radius: 50%;
+//     width: 24px;
+//     height: 24px;
+//     animation: spin 0.6s linear infinite;
+//     display: inline-block;
+//     vertical-align: middle;
+//     margin-right: 6px;
+//   }
+
+//   &__label {
+//     text-align: center;
+//   }
+// }
+
+// @keyframes spin {
+//   to {
+//     transform: rotate(360deg);
+//   }
+// }