@qite/tide-components 1.0.1

package/styles/search.scss

@@ -0,0 +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);
+//   }
+// }