@qite/tide-components 1.0.8 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/build/build-cjs/index.js +585 -319
  2. package/build/build-cjs/src/booking-product/types.d.ts +10 -0
  3. package/build/build-cjs/src/search-results/components/itinerary/itinerary-utils.d.ts +12 -0
  4. package/build/build-cjs/src/search-results/types.d.ts +12 -0
  5. package/build/build-esm/index.js +586 -320
  6. package/build/build-esm/src/booking-product/types.d.ts +10 -0
  7. package/build/build-esm/src/search-results/components/itinerary/itinerary-utils.d.ts +12 -0
  8. package/build/build-esm/src/search-results/types.d.ts +12 -0
  9. package/package.json +2 -2
  10. package/styles/abstracts/_mixins.scss +74 -74
  11. package/styles/abstracts/_variables.scss +57 -57
  12. package/styles/base/_fonts.scss +2 -2
  13. package/styles/base/_normalize.scss +227 -227
  14. package/styles/base/_typography.scss +35 -35
  15. package/styles/booking-joker-variables.scss +596 -596
  16. package/styles/booking-product-variables.scss +330 -330
  17. package/styles/booking-product.scss +438 -438
  18. package/styles/booking-qsm-variables.scss +501 -501
  19. package/styles/booking-qsm.scss +52 -52
  20. package/styles/booking-search-results-variables.scss +734 -734
  21. package/styles/booking-search-results.scss +53 -53
  22. package/styles/booking-wizard-variables.scss +603 -603
  23. package/styles/booking-wizard.scss +61 -61
  24. package/styles/components/_accordion.scss +67 -67
  25. package/styles/components/_animations.scss +39 -39
  26. package/styles/components/_base.scss +107 -107
  27. package/styles/components/_booking.scss +906 -906
  28. package/styles/components/_breadcrumb.scss +92 -92
  29. package/styles/components/_button.scss +238 -238
  30. package/styles/components/_checkbox.scss +230 -230
  31. package/styles/components/_contact.scss +255 -255
  32. package/styles/components/_content.scss +336 -336
  33. package/styles/components/_cta.scss +238 -238
  34. package/styles/components/_date-list.scss +41 -41
  35. package/styles/components/_date-range-picker.scss +223 -223
  36. package/styles/components/_decrement-increment.scss +35 -35
  37. package/styles/components/_dropdown.scss +77 -77
  38. package/styles/components/_error.scss +50 -50
  39. package/styles/components/_faq.scss +30 -30
  40. package/styles/components/_flight-option.scss +1432 -1432
  41. package/styles/components/_flyin.scss +830 -830
  42. package/styles/components/_footer.scss +135 -135
  43. package/styles/components/_form.scss +1693 -1693
  44. package/styles/components/_gallery.scss +317 -317
  45. package/styles/components/_header.scss +113 -113
  46. package/styles/components/_image-with-text.scss +206 -206
  47. package/styles/components/_img-slider.scss +175 -175
  48. package/styles/components/_info-message.scss +75 -75
  49. package/styles/components/_input.scss +35 -35
  50. package/styles/components/_list.scss +185 -185
  51. package/styles/components/_loader.scss +152 -152
  52. package/styles/components/_login.scss +140 -140
  53. package/styles/components/_map-view.scss +1100 -1100
  54. package/styles/components/_mixins.scss +579 -579
  55. package/styles/components/_navbar.scss +765 -765
  56. package/styles/components/_passenger-picker.scss +306 -306
  57. package/styles/components/_phone-input.scss +8 -8
  58. package/styles/components/_placeholders.scss +165 -165
  59. package/styles/components/_pricing-summary.scss +163 -163
  60. package/styles/components/_qsm.scss +17 -17
  61. package/styles/components/_radiobutton.scss +170 -170
  62. package/styles/components/_search.scss +2197 -2178
  63. package/styles/components/_select-wrapper.scss +81 -81
  64. package/styles/components/_slider.scss +128 -128
  65. package/styles/components/_spinner.scss +29 -29
  66. package/styles/components/_step-indicators.scss +187 -187
  67. package/styles/components/_table.scss +81 -81
  68. package/styles/components/_tide-form.scss +578 -578
  69. package/styles/components/_tree.scss +648 -648
  70. package/styles/components/_typeahead.scss +275 -275
  71. package/styles/components/_variables.scss +89 -89
  72. package/styles/content-blocks-variables.scss +543 -543
  73. package/styles/content-blocks.scss +66 -66
  74. package/styles/font.scss +2 -2
  75. package/styles/qsm/_calendar.scss +274 -274
  76. package/styles/qsm/_qsm.scss +1097 -1097
  77. package/styles/search.scss +1200 -1200
  78. package/styles/tide-form-variables.scss +275 -275
  79. package/styles/tide-form.scss +56 -56
package/styles/components/_search.scss CHANGED
@@ -1,2178 +1,2197 @@
1
- @use '../components/mixins' as mixins;
2
-
3
- * {
4
- box-sizing: border-box;
5
- }
6
-
7
- .search {
8
- background: var(--tide-booking-search-results-background);
9
-
10
- &__bg {
11
- background: var(--tide-booking-search-results-background);
12
- }
13
-
14
- &__container {
15
- position: relative;
16
- display: flex;
17
- @include mixins.container-wide();
18
- padding-top: 30px;
19
- padding-bottom: 60px;
20
-
21
- @include mixins.media-sm {
22
- padding-top: 30px;
23
- padding-bottom: 60px;
24
- }
25
-
26
- @include mixins.media-md {
27
- gap: 30px;
28
- padding-top: 30px;
29
- padding-bottom: 60px;
30
- }
31
-
32
- @include mixins.media-lg {
33
- gap: 60px;
34
- padding-top: 60px;
35
- }
36
- }
37
-
38
- &__filters {
39
- position: fixed;
40
- top: 0px;
41
- left: 0px;
42
- display: block;
43
- max-width: 360px;
44
- width: 100%;
45
- background-color: var(--tide-booking-search-filter-background);
46
- border: var(--tide-booking-search-filter-border);
47
- height: 100%;
48
- margin-bottom: 20px;
49
- margin-left: 0;
50
- grid-column: span 12;
51
- transform: translateX(-100vw);
52
- overflow: hidden;
53
- transition: transform 0.35s ease;
54
-
55
- @include mixins.media-md {
56
- grid-column: auto;
57
- border-radius: var(--tide-booking-search-filter-border-radius);
58
- }
59
-
60
- @include mixins.media-lg {
61
- position: relative;
62
- display: block;
63
- max-width: 360px;
64
- width: 360px;
65
- height: auto;
66
- margin: 0;
67
- border: none;
68
- box-shadow: none;
69
- transform: translateX(0);
70
- pointer-events: auto;
71
- padding-bottom: 20px;
72
- }
73
-
74
- // ::after {
75
- // content: '';
76
- // display: block;
77
- // position: fixed;
78
- // top: 0;
79
- // left: 0;
80
- // width: 100vw;
81
- // height: 100vh;
82
- // background: rgba(0, 0, 0, 0.5);
83
- // z-index: 100009;
84
- // }
85
-
86
- &__group-container {
87
- position: relative;
88
- display: flex;
89
- flex-direction: column;
90
- height: calc(100% - 47px);
91
- overflow-y: auto;
92
- overflow-x: hidden;
93
- @extend %scrollbar-thin;
94
-
95
- @include mixins.media-lg {
96
- height: auto;
97
- overflow: visible;
98
- }
99
-
100
- .search__filter-group:last-child {
101
- margin-bottom: 20px;
102
- }
103
- }
104
-
105
- &__actions {
106
- position: sticky;
107
- bottom: 0;
108
- left: 0;
109
- display: flex;
110
- justify-content: space-between;
111
- align-items: center;
112
- gap: 15px;
113
- padding: 15px 20px;
114
- background-color: white;
115
- margin-top: auto;
116
-
117
- @include mixins.media-lg {
118
- display: none;
119
- }
120
- }
121
-
122
- &--background {
123
- background-color: rgba(0, 0, 0, 0.7);
124
- height: 100%;
125
- width: 100%;
126
- position: fixed;
127
-
128
- @include mixins.media-lg {
129
- display: none;
130
- position: relative;
131
- }
132
- }
133
-
134
- &--close {
135
- position: fixed;
136
- z-index: 100020;
137
- top: 10px;
138
- right: 15px;
139
- display: none;
140
- background: none;
141
- border: none;
142
- color: var(--tide-booking-search-filter-price-amount-color);
143
- cursor: pointer;
144
- }
145
-
146
- &--modal {
147
- display: block;
148
- position: fixed;
149
- top: 0;
150
- left: 0;
151
- width: 100vw;
152
- height: 100dvh;
153
- z-index: 100009;
154
-
155
- // Initial hidden state
156
- opacity: 0;
157
- pointer-events: none;
158
- transition: left 0.35s ease, opacity 0.25s ease;
159
-
160
- @include mixins.media-lg {
161
- position: relative;
162
- left: 0px;
163
- width: auto;
164
- height: auto;
165
- background: transparent;
166
- opacity: 1;
167
- z-index: 1;
168
- }
169
-
170
- // When modal is open
171
- &.is-open {
172
- left: 0px;
173
- opacity: 1;
174
- pointer-events: auto;
175
-
176
- .search__filters--close {
177
- display: block;
178
- }
179
-
180
- .search__filters {
181
- position: relative;
182
- display: block;
183
- max-width: 100%;
184
- width: 100%;
185
- height: 100%;
186
- margin: 0;
187
- border: none;
188
- box-shadow: none;
189
- border-top-left-radius: 0px;
190
- border-bottom-left-radius: 0px;
191
- transform: translateX(0);
192
- pointer-events: auto;
193
- overflow-y: auto;
194
- @extend %scrollbar-thin;
195
- }
196
- }
197
- }
198
- }
199
-
200
- &__filter {
201
- &-group {
202
- padding: 0 20px;
203
- }
204
-
205
- &-row {
206
- display: flex;
207
- align-items: center;
208
- justify-content: space-between;
209
- margin-top: 15px;
210
-
211
- &-flex-title {
212
- display: flex;
213
- align-items: center;
214
- gap: 15px;
215
- }
216
-
217
- &-icon {
218
- fill: hotpink;
219
- }
220
-
221
- &--underline {
222
- border-bottom: var(--tide-booking-search-filter-group-title-text-border);
223
- margin-bottom: 8px;
224
- cursor: pointer;
225
- }
226
-
227
- &--checkmark {
228
- margin-top: 5px;
229
-
230
- @include media-lg {
231
- margin-top: 15px;
232
- }
233
- }
234
- }
235
-
236
- &__header {
237
- padding: 0 20px;
238
- margin-bottom: 15px;
239
- margin-top: 0;
240
- padding-top: 15px;
241
- padding-right: 60px;
242
-
243
- @include mixins.media-lg {
244
- padding-right: 15px;
245
- }
246
- }
247
-
248
- &-link {
249
- color: orangered;
250
- transition: all 0.3s;
251
- cursor: pointer;
252
- text-decoration: underline;
253
- margin-top: 136px;
254
-
255
- &:hover {
256
- color: green;
257
- }
258
- }
259
-
260
- &-chevron-icon {
261
- transition: transform 0.3s ease;
262
- transform: rotate(180deg);
263
- margin-top: 5px;
264
-
265
- &--flipped {
266
- transform: rotate(0);
267
- }
268
- }
269
-
270
- &-small-title {
271
- font-size: 14px;
272
- font-weight: 400;
273
- margin: 0 auto;
274
- }
275
-
276
- &-medium-title {
277
- font-size: 16px;
278
- font-weight: 700;
279
- margin: 5px 0;
280
-
281
- &-wrapper {
282
- margin-top: 12.5px;
283
- margin-bottom: 2.5px;
284
- }
285
- }
286
-
287
- &-large-title {
288
- font-size: 18px;
289
- font-weight: var(--tide-booking-search-filter-group-title-text-font-weight);
290
- margin: 5px 0;
291
- }
292
-
293
- &-reset {
294
- color: var(--tide-booking-search-reset-color);
295
- font-size: 15px;
296
- font-weight: var(--tide-booking-search-reset-font-weight);
297
- text-decoration: var(--tide-booking-search-reset-text-decoration);
298
- cursor: pointer;
299
- }
300
-
301
- // &-facet {
302
- // color: variables.$text-color;
303
- // }
304
-
305
- // &-price {
306
- // font-size: variables.$font-size-body--small;
307
- // color: variables.$secondary-color;
308
- // margin-bottom: 0;
309
- // margin-top: 0;
310
- // min-width: 88px;
311
- // text-align: end;
312
- // }
313
-
314
- // &-button {
315
- // width: 100%;
316
- // padding: 1rem 0;
317
- // background: transparent;
318
- // border: 1px solid variables.$secondary-color;
319
- // color: variables.$secondary-color;
320
- // border-radius: 3px;
321
- // margin-top: 2rem;
322
- // transition: all 0.2s ease-in-out;
323
- // cursor: pointer;
324
-
325
- // &:hover {
326
- // background: variables.$secondary-color;
327
- // color: variables.$white;
328
- // }
329
- // }
330
-
331
- &__image {
332
- position: absolute;
333
- top: 50%;
334
- left: 50%;
335
- width: 100%;
336
- height: 100%;
337
- transform: translate(-50%, -50%);
338
- z-index: -1;
339
-
340
- &__wrapper {
341
- position: relative;
342
- width: 100%;
343
- height: 200px;
344
- max-height: 200px;
345
- padding: 20px;
346
- overflow: hidden;
347
- border-radius: var(--tide-booking-search-filter-img-border-radius);
348
- display: flex;
349
- flex-direction: column;
350
- align-items: center;
351
- justify-content: flex-end;
352
- }
353
-
354
- &__text {
355
- color: var(--tide-booking-search-filter-img-text-color);
356
- font-weight: var(--tide-booking-search-filter-img-text-font-weight);
357
- font-family: var(--tide-booking-search-filter-img-text-font-family);
358
- }
359
-
360
- &__title {
361
- font-size: 20px;
362
- font-weight: var(--tide-booking-search-filter-img-title-font-weight);
363
- margin: 5px 0;
364
- color: var(--tide-booking-search-filter-img-title-color);
365
- text-align: center;
366
- font-family: var(--tide-booking-search-filter-img-title-font-family);
367
- }
368
- }
369
-
370
- &__prices {
371
- display: flex;
372
- flex-direction: column;
373
- justify-content: center;
374
-
375
- height: 173.5px;
376
- padding: 0 20px;
377
-
378
- &__wrapper {
379
- padding: 20px 0px;
380
- display: flex;
381
- flex-direction: column;
382
- align-items: center;
383
-
384
- p {
385
- margin: 0px;
386
- line-height: 1.5;
387
- }
388
- }
389
-
390
- &--amount {
391
- font-family: var(--tide-booking-search-filter-price-amount-font-family);
392
- font-size: 30px;
393
- font-weight: var(--tide-booking-search-filter-price-amount-font-weight);
394
- margin: 0;
395
- color: var(--tide-booking-search-filter-price-amount-color);
396
-
397
- p {
398
- font-family: var(--tide-booking-search-filter-price-text-font-family);
399
- font-weight: var(--tide-booking-search-filter-price-text-font-weight);
400
- text-align: center;
401
- color: var(--tide-booking-search-filter-price-text-color);
402
- margin: 0px;
403
-
404
- strong {
405
- font-weight: var(--tide-booking-search-filter-price-total-font-weight);
406
- color: var(--tide-booking-search-filter-price-total-color);
407
- }
408
- }
409
- }
410
- }
411
-
412
- &__itinerary {
413
- margin-top: 30px;
414
- padding: 0 20px;
415
- padding-bottom: 30px;
416
- display: flex;
417
- flex-direction: column;
418
- gap: 15px;
419
-
420
- p {
421
- margin: 0px;
422
- font-family: var(--tide-booking-search-itinerary-filter-title-font-family);
423
- font-weight: var(--tide-booking-search-itinerary-filter-title-font-weight);
424
- color: var(--tide-booking-search-itinerary-filter-title-color);
425
- }
426
-
427
- &__country {
428
- padding: 15px 20px;
429
- box-shadow: var(--tide-booking-search-itinerary-filter-country-box-shadow);
430
- display: flex;
431
- align-items: center;
432
- gap: 20px;
433
- border-radius: var(--tide-booking-search-itinerary-filter-country-border-radius);
434
- border: var(--tide-booking-search-itinerary-filter-country-border);
435
- background: var(--tide-booking-search-itinerary-filter-country-background);
436
-
437
- &-icon {
438
- display: flex;
439
- min-width: 30px;
440
- max-width: 30px;
441
- align-items: center;
442
- justify-content: center;
443
- color: var(--tide-booking-search-itinerary-filter-country-icon-color);
444
- }
445
-
446
- &-content {
447
- h4 {
448
- font-family: var(--tide-booking-search-itinerary-filter-country-title-font-family);
449
- margin-bottom: 3px;
450
- font-size: 20px;
451
- font-weight: var(--tide-booking-search-itinerary-filter-country-title-font-weight);
452
- color: var(--tide-booking-search-itinerary-filter-country-title-color);
453
- }
454
-
455
- p {
456
- margin: 0px;
457
- font-family: var(--tide-booking-search-itinerary-filter-country-text-font-family);
458
- font-weight: var(--tide-booking-search-itinerary-filter-country-text-font-weight);
459
- color: var(--tide-booking-search-itinerary-filter-country-text-color);
460
-
461
- strong {
462
- font-weight: var(--tide-booking-search-itinerary-filter-country-text-bold-font-weight);
463
- color: var(--tide-booking-search-itinerary-filter-country-text-bold-color);
464
- }
465
- }
466
- }
467
- }
468
-
469
- &__transport {
470
- position: relative;
471
- padding-left: 20px;
472
- background: var(--tide-booking-search-itinerary-filter-transport-background);
473
- border-radius: var(--tide-booking-search-itinerary-filter-transport-border-radius);
474
- border: var(--tide-booking-search-itinerary-filter-transport-border);
475
- box-shadow: var(--tide-booking-search-itinerary-filter-transport-box-shadow);
476
-
477
- &-timeline {
478
- height: 100%;
479
- text-align: center;
480
- content: ' ';
481
- z-index: 1;
482
- display: block;
483
- top: 0;
484
- left: 53px;
485
- position: absolute;
486
- width: 45px;
487
- min-width: 45px;
488
- max-width: 45px;
489
-
490
- &-line {
491
- width: 1px;
492
- height: 100%;
493
- margin: 0 auto;
494
- border-left: var(--tide-booking-search-itinerary-filter-transport-timeline);
495
- }
496
- }
497
-
498
- &-item {
499
- display: flex;
500
- align-items: center;
501
- gap: 15px;
502
- position: relative;
503
- z-index: 2;
504
- }
505
-
506
- &-date {
507
- min-width: 26px;
508
- max-width: 26px;
509
-
510
- p {
511
- margin: 0px;
512
- color: var(--tide-booking-search-itinerary-filter-transport-date-month-color);
513
- font-weight: var(--tide-booking-search-itinerary-filter-transport-date-month-font-weight);
514
- }
515
-
516
- &-date {
517
- font-size: 24px;
518
-
519
- strong {
520
- font-weight: var(--tide-booking-search-itinerary-filter-transport-date-day-font-weight);
521
- color: var(--tide-booking-search-itinerary-filter-transport-date-day-color);
522
- }
523
- }
524
- }
525
-
526
- &-badge {
527
- width: 30px;
528
- min-width: 30px;
529
- max-width: 30px;
530
- height: 30px;
531
- min-height: 30px;
532
- max-height: 30px;
533
- background-color: var(--tide-booking-search-itinerary-filter-transport-badge-icon-background-color);
534
- border-radius: 50%;
535
- display: flex;
536
- align-items: center;
537
- justify-content: center;
538
- color: var(--tide-booking-search-itinerary-filter-transport-badge-icon-color);
539
-
540
- &--default {
541
- background-color: var(--tide-booking-search-itinerary-filter-segment-badge-icon-background-color);
542
- color: var(--tide-booking-search-itinerary-filter-segment-badge-icon-color);
543
- }
544
-
545
- &--flight {
546
- background-color: var(--tide-booking-search-itinerary-service-flight-color);
547
- color: var(--tide-booking-white);
548
- }
549
-
550
- &--hotel {
551
- background-color: var(--tide-booking-search-itinerary-service-hotel-color);
552
- color: var(--tide-booking-white);
553
- }
554
-
555
- &--excursion {
556
- background-color: var(--tide-booking-search-itinerary-service-excursion-color);
557
- color: var(--tide-booking-white);
558
- }
559
-
560
- &--poi {
561
- background-color: var(--tide-booking-search-itinerary-service-poi-color);
562
- color: var(--tide-booking-white);
563
- }
564
-
565
- &--restaurant {
566
- background-color: var(--tide-booking-search-itinerary-service-restaurant-color);
567
- color: var(--tide-booking-white);
568
- }
569
- }
570
-
571
- &-details {
572
- display: flex;
573
- flex-direction: column;
574
- gap: 15px;
575
-
576
- h6 {
577
- margin: 0px;
578
- font-size: 18px;
579
- font-weight: var(--tide-booking-search-itinerary-filter-transport-title-font-weight);
580
- color: var(--tide-booking-search-itinerary-filter-transport-title-color);
581
- }
582
-
583
- p {
584
- margin: 0px;
585
- font-size: 14px;
586
- }
587
-
588
- &-plane {
589
- font-size: 14px;
590
- display: flex;
591
- align-items: center;
592
- gap: 3px;
593
-
594
- svg {
595
- fill: var(--tide-booking-search-itinerary-filter-transport-plane-icon-color);
596
- }
597
-
598
- span {
599
- display: flex;
600
- align-items: center;
601
- gap: 3px;
602
- }
603
-
604
- strong {
605
- font-weight: var(--tide-booking-search-itinerary-filter-transport-plane-font-weight);
606
- color: var(--tide-booking-search-itinerary-filter-transport-plane-color);
607
- }
608
- }
609
-
610
- &-time {
611
- span {
612
- display: flex;
613
- align-items: center;
614
- }
615
- }
616
- }
617
- }
618
-
619
- &__segments {
620
- position: relative;
621
- display: flex;
622
- flex-direction: column;
623
- gap: 0;
624
- gap: 15px;
625
- padding: 15px 20px;
626
- background: var(--tide-booking-search-itinerary-filter-segments-background);
627
- box-shadow: var(--tide-booking-search-itinerary-filter-segments-box-shadow);
628
- border-radius: var(--tide-booking-search-itinerary-filter-segments-border-radius);
629
- border: var(--tide-booking-search-itinerary-filter-segments-border);
630
-
631
- &__wrapper {
632
- position: relative;
633
- display: flex;
634
- flex-direction: column;
635
- gap: 30px;
636
- }
637
-
638
- &-timeline {
639
- height: 100%;
640
- text-align: center;
641
- content: ' ';
642
- z-index: 1;
643
- display: block;
644
- top: 0;
645
- left: 33px;
646
- position: absolute;
647
- width: 45px;
648
- min-width: 45px;
649
- max-width: 45px;
650
-
651
- &-line {
652
- width: 1px;
653
- height: 100%;
654
- margin: 0 auto;
655
- border-left: var(--tide-booking-search-itinerary-filter-segment-timeline);
656
- }
657
- }
658
- }
659
-
660
- &__segment {
661
- position: relative;
662
-
663
- &-item {
664
- display: flex;
665
- align-items: center;
666
- gap: 15px;
667
- position: relative;
668
- z-index: 2;
669
-
670
- &--start {
671
- align-items: flex-start;
672
- }
673
-
674
- &--editable {
675
- cursor: pointer;
676
-
677
- &:hover {
678
- background-color: rgba(0, 0, 0, 0.05);
679
- }
680
- }
681
- }
682
-
683
- &-badge {
684
- width: 30px;
685
- min-width: 30px;
686
- max-width: 30px;
687
- height: 30px;
688
- min-height: 30px;
689
- max-height: 30px;
690
- background: var(--tide-booking-search-itinerary-filter-segment-badge-icon-background-color);
691
- outline: 3px solid var(--tide-booking-search-itinerary-filter-segments-background);
692
- border-radius: 50%;
693
- display: flex;
694
- align-items: center;
695
- justify-content: center;
696
- color: var(--tide-booking-search-itinerary-filter-segment-badge-icon-color);
697
-
698
- &--secondary {
699
- background: var(--tide-booking-search-itinerary-filter-segment-badge--secondary-icon-background-color);
700
- color: var(--tide-booking-search-itinerary-filter-segment-badge--secondary-icon-color);
701
- }
702
-
703
- &--flight {
704
- background: var(--tide-booking-search-itinerary-service-flight-color);
705
- }
706
-
707
- &--hotel {
708
- background: var(--tide-booking-search-itinerary-service-hotel-color);
709
- }
710
-
711
- &--excursion {
712
- background: var(--tide-booking-search-itinerary-service-excursion-color);
713
- }
714
-
715
- &--poi {
716
- background: var(--tide-booking-search-itinerary-service-poi-color);
717
- }
718
-
719
- &--restaurant {
720
- background: var(--tide-booking-search-itinerary-service-restaurant-color);
721
- }
722
- }
723
-
724
- &-date {
725
- p {
726
- margin: 0px;
727
- color: var(--tide-booking-search-itinerary-filter-segment-date-month-color);
728
- font-weight: var(--tide-booking-search-itinerary-filter-segment-date-month-font-weight);
729
- }
730
-
731
- &-date {
732
- font-size: 24px;
733
-
734
- strong {
735
- font-weight: var(--tide-booking-search-itinerary-filter-segment-date-day-font-weight);
736
- color: var(--tide-booking-search-itinerary-filter-segment-date-day-color);
737
- }
738
- }
739
- }
740
-
741
- &-nights {
742
- display: flex;
743
- align-items: center;
744
- flex-flow: row nowrap;
745
- }
746
-
747
- &-nights,
748
- &-date {
749
- min-width: 26px;
750
- max-width: 26px;
751
-
752
- svg {
753
- min-width: 16px;
754
- min-height: 16px;
755
- }
756
- }
757
-
758
- &-details {
759
- display: flex;
760
- flex-direction: column;
761
- gap: 10px;
762
-
763
- h6 {
764
- margin: 0;
765
- font-size: 18px;
766
- font-weight: var(--tide-booking-search-itinerary-filter-segment-title-font-weight);
767
- color: var(--tide-booking-search-itinerary-filter-segment-title-color);
768
- }
769
-
770
- &__room {
771
- display: flex;
772
- align-items: center;
773
- gap: 5px;
774
- margin: 0px;
775
- line-height: 1.2;
776
- font-weight: var(--tide-booking-search-itinerary-filter-segment-text-font-weight);
777
- color: var(--tide-booking-search-itinerary-filter-segment-text-color);
778
-
779
- svg {
780
- flex: 12px 0 0;
781
- }
782
- }
783
-
784
- .rating {
785
- display: flex;
786
- align-items: center;
787
- gap: 3px;
788
-
789
- svg {
790
- fill: var(--tide-booking-search-hotel-card-starrating-color);
791
- }
792
- }
793
- }
794
- }
795
- }
796
- }
797
-
798
- &__results {
799
- display: flex;
800
- flex-direction: column;
801
- width: 100%;
802
- min-width: 0;
803
-
804
- &__cards {
805
- display: grid;
806
- gap: 15px;
807
- grid-template-columns: 1fr;
808
- grid-template-rows: repeat(1, 1fr);
809
-
810
- @include mixins.media-sm {
811
- grid-template-columns: repeat(2, 1fr);
812
- }
813
-
814
- @include mixins.media-md {
815
- grid-template-columns: repeat(3, 1fr);
816
- }
817
-
818
- @include mixins.media-lg {
819
- grid-template-columns: repeat(2, 1fr);
820
- }
821
-
822
- @include mixins.media-xgl {
823
- grid-template-columns: repeat(3, 1fr);
824
- }
825
-
826
- &__actions {
827
- display: flex;
828
- justify-content: space-between;
829
- align-items: center;
830
-
831
- .cta {
832
- margin-left: auto;
833
- }
834
- }
835
- }
836
-
837
- &__cards--scroll {
838
- display: flex;
839
- flex-wrap: nowrap;
840
- overflow-x: auto;
841
- overflow-y: hidden;
842
- scroll-snap-type: x proximity;
843
- -webkit-overflow-scrolling: touch;
844
- padding-bottom: 5px;
845
-
846
- @include mixins.media-sm {
847
- grid-template-columns: none;
848
- }
849
-
850
- @include mixins.media-md {
851
- grid-template-columns: none;
852
- }
853
-
854
- @include mixins.media-lg {
855
- grid-template-columns: none;
856
- }
857
-
858
- @include mixins.media-xgl {
859
- grid-template-columns: none;
860
- }
861
-
862
- > * {
863
- flex: 0 0 auto;
864
- scroll-snap-align: start;
865
- width: 280px;
866
- max-width: 85vw;
867
-
868
- @include mixins.media-md {
869
- width: 320px;
870
- }
871
- }
872
- }
873
-
874
- &__wrapper {
875
- display: flex;
876
- flex-direction: column;
877
- gap: 15px;
878
-
879
- .search__results__label {
880
- &:first-child {
881
- margin-top: 15px;
882
- }
883
- }
884
- }
885
-
886
- &__label {
887
- display: grid;
888
- grid-template-columns: 50px 1fr;
889
- grid-template-rows: 50px;
890
- align-items: center;
891
- border-radius: var(--tide-booking-search-results-label-border-radius);
892
- overflow: hidden;
893
- margin-top: 30px;
894
-
895
- &__date {
896
- display: flex;
897
- flex-flow: column;
898
- align-items: center;
899
- justify-content: center;
900
- height: 100%;
901
-
902
- background: var(--tide-booking-search-results-label-date-background);
903
- border: var(--tide-booking-search-results-label-date-border);
904
-
905
- p {
906
- margin: 0px;
907
- font-weight: var(--tide-booking-search-results-label-date-month-font-weight);
908
- color: var(--tide-booking-search-results-label-date-month-color);
909
- }
910
-
911
- &-date {
912
- font-size: 24px;
913
- font-weight: var(--tide-booking-search-results-label-date-day-font-weight);
914
- color: var(--tide-booking-search-results-label-date-day-color);
915
- }
916
- }
917
-
918
- &__text {
919
- border: var(--tide-booking-search-results-label-border);
920
- border-left: none;
921
- height: 50px;
922
- display: flex;
923
- align-items: center;
924
- padding-left: 15px;
925
- gap: 10px;
926
-
927
- svg {
928
- fill: var(--tide-booking-gray-dark);
929
- }
930
-
931
- h3 {
932
- display: flex;
933
- align-items: center;
934
- gap: 3px;
935
- margin: 0px;
936
- color: var(--tide-booking-search-results-label-title-color);
937
- font-weight: var(--tide-booking-search-results-label-font-weight);
938
-
939
- strong {
940
- font-weight: var(--tide-booking-search-results-label-title-bold-font-weight);
941
- color: var(--tide-booking-search-results-label-title-bold-color);
942
- }
943
- }
944
- }
945
-
946
- &--secondary {
947
- .search__results__label__date {
948
- background: var(--tide-booking-search-results-label-date-background--secondary);
949
- border: var(--tide-booking-search-results-label-date-border--secondary);
950
- }
951
- }
952
- }
953
-
954
- &__options {
955
- display: flex;
956
- align-items: center;
957
- justify-content: space-between;
958
- gap: 15px;
959
- padding: 15px 30px;
960
- box-shadow: var(--tide-booking-search-more-options-box-shadow);
961
- border: var(--tide-booking-search-more-options-border);
962
- background-color: var(--tide-booking-search-more-options-background);
963
- border-radius: var(--tide-booking-search-more-options-border-radius);
964
-
965
- p {
966
- margin: 0px;
967
- color: var(--tide-booking-search-more-options-color);
968
- }
969
- }
970
-
971
- &__tab-views {
972
- display: none;
973
- align-items: center;
974
-
975
- @include mixins.media-sm {
976
- display: flex;
977
- }
978
- }
979
-
980
- &__tab-view {
981
- width: 100%;
982
- display: flex;
983
- align-items: center;
984
- gap: 5px;
985
- font-size: 18px;
986
- color: var(--tide-booking-search-tab-view-color);
987
- background: var(--tide-booking-search-tab-view-background);
988
- border: none;
989
- border-bottom: var(--tide-booking-search-tab-view-border);
990
- cursor: pointer;
991
- outline: none;
992
- padding: 10px 20px;
993
- transition: all 0.3s ease;
994
-
995
- &:hover {
996
- color: var(--tide-booking-search-tab-view-hover-color);
997
- background: var(--tide-booking-search-tab-view-hover-background);
998
- border-bottom: var(--tide-booking-search-tab-view-hover-border);
999
- }
1000
-
1001
- &--active {
1002
- color: var(--tide-booking-search-tab-view-active-color);
1003
- background: var(--tide-booking-search-tab-view-active-background);
1004
- border-bottom: var(--tide-booking-search-tab-view-active-border);
1005
- }
1006
- }
1007
-
1008
- &__actions {
1009
- display: flex;
1010
- align-items: center;
1011
- gap: 16px;
1012
- }
1013
- }
1014
-
1015
- &__result {
1016
- display: flex;
1017
- flex-wrap: wrap;
1018
- gap: 15px;
1019
- margin: 0;
1020
- margin-bottom: 20px;
1021
-
1022
- &--flight {
1023
- display: grid;
1024
- gap: 0;
1025
- grid-template-columns: 1fr;
1026
- margin: 0 0 30px;
1027
-
1028
- @include mixins.media-md {
1029
- grid-template-rows: repeat(1, 1fr);
1030
- }
1031
-
1032
- @include mixins.media-lg {
1033
- grid-template-columns: 1fr 257px;
1034
- }
1035
- }
1036
-
1037
- &-row {
1038
- display: flex;
1039
- align-items: center;
1040
- justify-content: space-between;
1041
- margin-bottom: 12px;
1042
- margin-top: 18px;
1043
-
1044
- @include mixins.media-sm {
1045
- margin-bottom: 24px;
1046
- }
1047
-
1048
- &-text {
1049
- font-size: 16px;
1050
- color: gray;
1051
- margin: 0;
1052
- }
1053
-
1054
- .cta--filter {
1055
- position: relative;
1056
- top: 0px;
1057
- left: 0px;
1058
- }
1059
-
1060
- // &-button {
1061
- // width: 13.5rem;
1062
- // height: 3.5rem;
1063
- // display: flex;
1064
- // justify-content: space-between;
1065
- // align-items: center;
1066
- // padding: 0 1rem;
1067
- // border: 1px solid blue;
1068
- // border-radius: 3px;
1069
- // color: blue;
1070
- // cursor: pointer;
1071
- // transition: all 0.2s ease-in-out;
1072
-
1073
- // &:hover {
1074
- // background: red;
1075
- // color: yellow;
1076
-
1077
- // .search__result-row-icon {
1078
- // fill: white;
1079
- // }
1080
- // }
1081
- // }
1082
-
1083
- &-icon {
1084
- fill: red;
1085
- }
1086
-
1087
- .dropdown {
1088
- &:after {
1089
- display: none;
1090
- }
1091
-
1092
- &__label {
1093
- display: none;
1094
-
1095
- @include mixins.media-sm {
1096
- display: block;
1097
- }
1098
- }
1099
-
1100
- &__input {
1101
- width: auto;
1102
- }
1103
-
1104
- &-toggle {
1105
- min-width: 165px;
1106
- }
1107
- }
1108
- }
1109
-
1110
- &-card {
1111
- // flex-basis: 100%;
1112
-
1113
- // @include mixins.media-xs {
1114
- // flex-basis: calc(50% - 8px);
1115
- // }
1116
-
1117
- // @include mixins.media-lg {
1118
- // flex: calc(33% - 8px) 0 0;
1119
- // }
1120
-
1121
- &__wrapper {
1122
- height: 100%;
1123
- display: flex;
1124
- flex-direction: column;
1125
- justify-content: space-between;
1126
- align-items: stretch;
1127
- cursor: pointer;
1128
- border-radius: var(--tide-booking-search-hotel-card-border-radius);
1129
- overflow: hidden;
1130
- box-shadow: var(--tide-booking-search-hotel-card-box-shadow);
1131
- background-color: var(--tide-booking-search-hotel-card-background);
1132
- transition: transform 0.3s ease-in-out;
1133
-
1134
- &--custom {
1135
- gap: 20px;
1136
-
1137
- .search__result-card__footer {
1138
- padding: 20px;
1139
- padding-top: 0px;
1140
- }
1141
- }
1142
- }
1143
-
1144
- &__top {
1145
- display: flex;
1146
- flex-direction: column;
1147
- justify-content: flex-start;
1148
- align-items: flex-start;
1149
- width: 100%;
1150
- }
1151
-
1152
- &__img-wrapper {
1153
- position: relative;
1154
- width: 100%;
1155
- height: 200px;
1156
- overflow: hidden;
1157
- background-color: #f5f5f5;
1158
- }
1159
-
1160
- &__img {
1161
- width: 100%;
1162
- height: 100%;
1163
- object-fit: cover;
1164
- }
1165
-
1166
- &__price {
1167
- font-family: var(--tide-booking-search-hotel-card-price-font-family);
1168
- font-weight: var(--tide-booking-search-hotel-card-price-font-weight);
1169
- color: var(--tide-booking-search-hotel-card-price-color);
1170
- font-size: 20px;
1171
-
1172
- &__wrapper {
1173
- position: absolute;
1174
- bottom: 0px;
1175
- right: 0px;
1176
- background: var(--tide-booking-search-hotel-card-price-background-color);
1177
- display: flex;
1178
- flex-flow: column nowrap;
1179
- align-items: center;
1180
- justify-content: center;
1181
- gap: 5px;
1182
- padding: 5px 20px;
1183
- border-radius: 5px 0 0 0;
1184
- box-shadow: var(--tide-booking-search-hotel-card-price-box-shadow);
1185
- }
1186
-
1187
- &__label {
1188
- font-size: 12px;
1189
- font-weight: var(--tide-booking-search-hotel-card-price-label-font-weight);
1190
- color: var(--tide-booking-search-hotel-card-price-label-color);
1191
- }
1192
- }
1193
-
1194
- &__content {
1195
- display: flex;
1196
- flex-direction: column;
1197
- justify-content: space-between;
1198
- gap: 20px;
1199
- padding: 15px;
1200
- height: calc(100% - 200px);
1201
-
1202
- &__wrapper {
1203
- display: flex;
1204
- flex-direction: column;
1205
- gap: 10px;
1206
- }
1207
-
1208
- &--extra {
1209
- padding: 0 15px;
1210
- margin-top: -20px;
1211
- }
1212
- }
1213
-
1214
- &__header {
1215
- position: relative;
1216
- display: flex;
1217
- justify-content: space-between;
1218
- gap: 5px;
1219
-
1220
- &__wrapper {
1221
- .rating {
1222
- display: flex;
1223
- align-items: center;
1224
- gap: 3px;
1225
-
1226
- svg {
1227
- fill: var(--tide-booking-search-hotel-card-starrating-color);
1228
- }
1229
- }
1230
- }
1231
- }
1232
-
1233
- &__title {
1234
- font-family: var(--tide-booking-search-hotel-card-title-font-family);
1235
- font-weight: var(--tide-booking-search-hotel-card-title-font-weight);
1236
- color: var(--tide-booking-search-hotel-card-title-color);
1237
- margin-bottom: 0px;
1238
- }
1239
-
1240
- &__location {
1241
- display: flex;
1242
- justify-content: flex-start;
1243
- align-items: flex-start;
1244
- gap: 5px;
1245
- font-size: 14px;
1246
- line-height: 1.5;
1247
- margin-bottom: 0px;
1248
- color: var(--tide-booking-search-hotel-card-option-color);
1249
- font-weight: var(--tide-booking-search-hotel-card-location-font-weight);
1250
-
1251
- svg {
1252
- width: 16px;
1253
- height: 16px;
1254
- margin-top: 3px;
1255
- fill: var(--tide-booking-search-hotel-card-location-icon-color);
1256
- }
1257
- }
1258
-
1259
- &__description {
1260
- display: none;
1261
- font-size: 16px;
1262
- font-weight: var(--tide-booking-search-hotel-card-description-font-weight);
1263
- line-height: 1.5;
1264
- color: var(--tide-booking-search-hotel-card-description-color);
1265
- margin-bottom: 0px;
1266
- -webkit-line-clamp: 3;
1267
- -webkit-box-orient: vertical;
1268
- overflow: hidden;
1269
- }
1270
-
1271
- &__options {
1272
- display: flex;
1273
- flex-wrap: wrap;
1274
- gap: 20px;
1275
- margin-top: 10px;
1276
- }
1277
-
1278
- &__option {
1279
- display: flex;
1280
- align-items: center;
1281
- flex-flow: nowrap;
1282
- gap: 5px;
1283
- font-weight: var(--tide-booking-search-hotel-card-option-font-weight);
1284
- color: var(--tide-booking-search-hotel-card-option-color);
1285
- font-size: 14px;
1286
-
1287
- svg {
1288
- width: 16px;
1289
- height: 16px;
1290
- fill: var(--tide-booking-search-hotel-card-option-icon-color);
1291
- }
1292
- }
1293
-
1294
- &__footer {
1295
- display: flex;
1296
- justify-content: space-between;
1297
- align-items: center;
1298
- gap: 1rem;
1299
- }
1300
-
1301
- &__allotment {
1302
- display: flex;
1303
- justify-content: space-between;
1304
- flex-direction: column;
1305
- gap: 30px;
1306
- background: var(--tide-booking-search-hotel-card-allotments-background);
1307
- padding: 20px;
1308
- border-radius: var(--tide-booking-search-hotel-card-allotments-border-radius);
1309
- border: var(--tide-booking-search-hotel-card-allotments-border);
1310
- box-shadow: var(--tide-booking-search-hotel-card-allotments-box-shadow);
1311
-
1312
- @include mixins.media-sm {
1313
- flex-direction: row;
1314
- gap: 20px;
1315
- }
1316
-
1317
- &__container {
1318
- display: grid;
1319
- grid-template-rows: repeat(1, 1fr);
1320
- gap: 15px;
1321
- width: 100%;
1322
-
1323
- @include mixins.media-xs {
1324
- grid-template-columns: 1fr 0.8fr;
1325
- }
1326
- }
1327
-
1328
- &__header {
1329
- display: flex;
1330
- flex-direction: column;
1331
-
1332
- gap: 15px;
1333
-
1334
- @include mixins.media-sm {
1335
- justify-content: space-between;
1336
- }
1337
- }
1338
-
1339
- &__img {
1340
- width: 100%;
1341
- height: 100%;
1342
- object-fit: cover;
1343
- }
1344
-
1345
- &__img-wrapper {
1346
- border-radius: 16px 16px 0 0;
1347
- position: relative;
1348
- width: 100%;
1349
- height: 200px;
1350
- overflow: hidden;
1351
- background-color: #f5f5f5;
1352
-
1353
- @include mixins.media-md {
1354
- width: 40%;
1355
- height: auto;
1356
- border-radius: 16px 0 0 16px;
1357
- }
1358
-
1359
- @include mixins.media-lg {
1360
- width: 100%;
1361
- height: 200px;
1362
- border-radius: 16px 16px 0 0;
1363
- }
1364
-
1365
- @include mixins.media-xl {
1366
- width: 40%;
1367
- height: auto;
1368
- border-radius: 16px 0 0 16px;
1369
- }
1370
- }
1371
-
1372
- &__title {
1373
- font-weight: var(--tide-booking-search-hotel-card-allotments-title-font-weight);
1374
- color: var(--tide-booking-search-hotel-card-allotments-title-color);
1375
- margin: 0;
1376
- display: flex;
1377
- align-items: center;
1378
- justify-content: space-between;
1379
- gap: 5px;
1380
- width: 100%;
1381
-
1382
- @include mixins.media-sm {
1383
- justify-content: flex-start;
1384
- }
1385
-
1386
- &__wrapper {
1387
- display: flex;
1388
- align-items: flex-start;
1389
- flex-direction: column;
1390
- gap: 10px;
1391
- width: 100%;
1392
-
1393
- @include mixins.media-sm {
1394
- justify-content: space-between;
1395
- }
1396
- }
1397
- }
1398
-
1399
- &__badge {
1400
- border: var(--tide-booking-search-hotel-card-allotments-badge-border);
1401
- background: var(--tide-booking-search-hotel-card-allotments-badge-background);
1402
- color: var(--tide-booking-search-hotel-card-allotments-badge-color);
1403
- font-weight: var(--tide-booking-search-hotel-card-allotments-badge-font-weight);
1404
- padding: 5px 10px;
1405
- border-radius: var(--tide-booking-search-hotel-card-allotments-badge-border-radius);
1406
- font-size: 12px;
1407
- // display: flex;
1408
- // align-items: center;
1409
- // gap: 5px;
1410
- white-space: nowrap;
1411
- vertical-align: middle;
1412
- line-height: 1.5;
1413
-
1414
- svg {
1415
- vertical-align: sub;
1416
- margin-right: 3px;
1417
- }
1418
-
1419
- &--secondary {
1420
- border: var(--tide-booking-search-hotel-card-allotments-badge--secondary-border);
1421
- background: var(--tide-booking-search-hotel-card-allotments-badge--secondary-background);
1422
- color: var(--tide-booking-search-hotel-card-allotments-badge--secondary-color);
1423
- }
1424
- }
1425
-
1426
- &__info {
1427
- display: flex;
1428
- align-items: flex-end;
1429
- gap: 10px;
1430
- }
1431
-
1432
- &__persons {
1433
- margin: 0;
1434
- display: flex;
1435
- align-items: flex-end;
1436
- gap: 5px;
1437
- }
1438
-
1439
- &__person {
1440
- display: flex;
1441
- align-items: flex-end;
1442
- gap: 3px;
1443
- font-weight: var(--tide-booking-search-hotel-card-allotments-persons-font-weight);
1444
- color: var(--tide-booking-search-hotel-card-allotments-persons-color);
1445
-
1446
- span {
1447
- color: var(--tide-booking-search-hotel-card-allotments-persons-number-color);
1448
- }
1449
- }
1450
-
1451
- &__wrapper {
1452
- display: flex;
1453
- flex-direction: column;
1454
- gap: 15px;
1455
- }
1456
-
1457
- &__date {
1458
- font-weight: var(--tide-booking-search-hotel-card-allotments-date-font-weight);
1459
- color: var(--tide-booking-search-hotel-card-allotments-date-color);
1460
- margin: 0;
1461
- display: flex;
1462
- align-items: center;
1463
- gap: 5px;
1464
- line-height: 1.5;
1465
- }
1466
-
1467
- &__footer {
1468
- display: flex;
1469
- flex-direction: column;
1470
- justify-content: space-between;
1471
- gap: 20px;
1472
-
1473
- @include mixins.media-xs {
1474
- flex-direction: row;
1475
- }
1476
-
1477
- @include mixins.media-sm {
1478
- align-items: flex-end;
1479
- flex-direction: column;
1480
- }
1481
-
1482
- @include mixins.media-lg {
1483
- min-width: 288px;
1484
- }
1485
-
1486
- .cta {
1487
- width: auto !important;
1488
- }
1489
- }
1490
-
1491
- &__price {
1492
- font-size: 20px;
1493
- font-weight: var(--tide-booking-search-hotel-card-allotments-price-font-weight);
1494
- color: var(--tide-booking-search-hotel-card-allotments-price-color);
1495
- margin: 0;
1496
-
1497
- &__wrapper {
1498
- display: flex;
1499
- flex-direction: column;
1500
- align-items: flex-end;
1501
- gap: 5px;
1502
- min-width: 200px;
1503
-
1504
- @include mixins.media-xs {
1505
- align-items: flex-start;
1506
- }
1507
-
1508
- @include mixins.media-sm {
1509
- align-items: flex-end;
1510
- }
1511
- }
1512
-
1513
- &__info {
1514
- text-align: right;
1515
- line-height: 1.5;
1516
-
1517
- @include mixins.media-xs {
1518
- text-align: left;
1519
- }
1520
-
1521
- @include mixins.media-sm {
1522
- text-align: right;
1523
- }
1524
- }
1525
- }
1526
- }
1527
- }
1528
- }
1529
-
1530
- &__flight-card {
1531
- padding: 0 8px 8px 8px;
1532
- border-radius: 20px;
1533
- background: white;
1534
- border: 1px solid blue;
1535
-
1536
- @include mixins.media-sm {
1537
- padding: 0.75rem 2rem;
1538
- }
1539
-
1540
- @include mixins.media-lg {
1541
- width: 100%;
1542
- }
1543
-
1544
- &-content {
1545
- position: relative;
1546
- display: grid;
1547
- grid-template-columns: repeat(3, 1fr);
1548
- gap: 1rem;
1549
-
1550
- @include mixins.media-sm {
1551
- /* grid-template-columns: repeat(3, 1fr); */
1552
- grid-template-columns: repeat(5, 1fr);
1553
- gap: 30px;
1554
- }
1555
-
1556
- &-radio {
1557
- position: absolute;
1558
- top: 50%;
1559
- left: 15px;
1560
-
1561
- &::before {
1562
- content: '';
1563
- position: absolute;
1564
- top: 50%;
1565
- left: -3rem; // Adjust this value to position the line correctly
1566
- width: calc(100% + 0.5rem); // Adjust this value to extend the line to the left edge
1567
- height: 1px; // Adjust the thickness of the line
1568
- background-color: blue; // Line color
1569
- transform: translateY(-50%);
1570
- }
1571
- }
1572
-
1573
- &-top {
1574
- border-bottom: 1px solid blue;
1575
- padding: 1rem 0;
1576
- }
1577
-
1578
- &-bottom {
1579
- margin-bottom: 0.25rem;
1580
- margin-top: 1.5rem;
1581
- }
1582
-
1583
- &-icon {
1584
- fill: red;
1585
-
1586
- &--flipped {
1587
- transform: rotate(180deg);
1588
- }
1589
- }
1590
-
1591
- &-start {
1592
- grid-column: span 2;
1593
- display: flex;
1594
- flex-direction: column;
1595
- align-items: flex-end;
1596
-
1597
- &-time {
1598
- display: flex;
1599
- align-items: center;
1600
- gap: 1rem;
1601
-
1602
- h5 {
1603
- font-size: 18px;
1604
- font-weight: 400;
1605
- color: gray;
1606
- margin: 0;
1607
- }
1608
- }
1609
-
1610
- &-destination {
1611
- color: black;
1612
- font-size: 14px;
1613
- margin-top: 0.5rem;
1614
- margin-bottom: 0;
1615
- text-align: end;
1616
- }
1617
-
1618
- &-date {
1619
- font-size: 15px;
1620
- color: gray;
1621
- margin-top: 0;
1622
- text-align: end;
1623
- }
1624
- }
1625
-
1626
- &-stops {
1627
- grid-column: span 1;
1628
-
1629
- display: flex;
1630
- flex-direction: column;
1631
- align-items: center;
1632
- justify-content: center;
1633
- gap: 4px;
1634
-
1635
- max-width: 5.5rem;
1636
-
1637
- &-info {
1638
- display: flex;
1639
- justify-content: center;
1640
- align-items: center;
1641
- gap: 8px;
1642
-
1643
- &-text {
1644
- font-size: 14px;
1645
- color: gray;
1646
- margin: 0;
1647
- }
1648
-
1649
- &-hour {
1650
- font-size: 14px;
1651
- color: gray;
1652
- margin-top: 0;
1653
- margin-bottom: 16px;
1654
- }
1655
- }
1656
- }
1657
-
1658
- &-end {
1659
- grid-column: span 2;
1660
-
1661
- display: flex;
1662
- flex-direction: column;
1663
- align-items: flex-start;
1664
-
1665
- &-time {
1666
- font-size: 18px;
1667
- font-weight: 400;
1668
-
1669
- color: black;
1670
-
1671
- margin: 0;
1672
- }
1673
-
1674
- &-destination {
1675
- color: black;
1676
- font-size: 14px;
1677
-
1678
- margin-top: 8px;
1679
- margin-bottom: 0;
1680
-
1681
- text-align: left;
1682
- }
1683
-
1684
- &-date {
1685
- font-size: 14px;
1686
- color: gray;
1687
-
1688
- margin-top: 0;
1689
-
1690
- text-align: left;
1691
-
1692
- &--warning {
1693
- color: pink;
1694
- }
1695
-
1696
- &-wrapper {
1697
- display: flex;
1698
- align-items: center;
1699
- gap: 8px;
1700
- }
1701
-
1702
- &-icon {
1703
- margin-top: 5px;
1704
- }
1705
- }
1706
- }
1707
- }
1708
- }
1709
-
1710
- &__banner {
1711
- display: flex;
1712
- justify-content: center;
1713
- margin-bottom: 60px;
1714
- margin-top: 30px;
1715
- }
1716
-
1717
- &__results__cards--extended {
1718
- @include mixins.media-sm {
1719
- grid-template-columns: repeat(1, 1fr);
1720
- }
1721
-
1722
- @include mixins.media-lg {
1723
- grid-template-columns: repeat(1, 1fr);
1724
- }
1725
-
1726
- .search__result-card {
1727
- &__wrapper {
1728
- @include mixins.media-sm {
1729
- flex-direction: row;
1730
- justify-content: flex-start;
1731
- }
1732
-
1733
- @include mixins.media-lg {
1734
- flex-direction: row;
1735
- }
1736
- }
1737
-
1738
- &__top {
1739
- @include mixins.media-sm {
1740
- flex-direction: row;
1741
- }
1742
- }
1743
-
1744
- &__img-wrapper {
1745
- @include mixins.media-sm {
1746
- width: 40%;
1747
- min-height: 100%;
1748
- overflow: hidden;
1749
- }
1750
-
1751
- @include mixins.media-lg {
1752
- width: 40%;
1753
- min-height: 100%;
1754
- }
1755
- }
1756
-
1757
- &__price {
1758
- &__wrapper {
1759
- @include mixins.media-sm {
1760
- position: absolute;
1761
- bottom: auto;
1762
- right: auto;
1763
- top: 0px;
1764
- left: 50%;
1765
- transform: translateX(-50%);
1766
- border-radius: 0 0 5px 5px;
1767
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
1768
- }
1769
- }
1770
- }
1771
-
1772
- &__content {
1773
- @include mixins.media-sm {
1774
- width: 60%;
1775
- padding: 20px;
1776
- height: auto;
1777
- }
1778
-
1779
- @include mixins.media-lg {
1780
- width: 60%;
1781
- padding: 20px;
1782
- }
1783
- }
1784
-
1785
- &__header {
1786
- &__wrapper {
1787
- @include mixins.media-sm {
1788
- display: flex;
1789
- flex-direction: row-reverse;
1790
- align-items: center;
1791
- gap: 10px;
1792
- }
1793
-
1794
- @include mixins.media-lg {
1795
- flex-direction: row-reverse;
1796
- align-items: center;
1797
- }
1798
-
1799
- .rating {
1800
- margin-top: 2px;
1801
- }
1802
- }
1803
- }
1804
-
1805
- &__description {
1806
- @include mixins.media-sm {
1807
- display: -webkit-box;
1808
- }
1809
- }
1810
-
1811
- &__footer {
1812
- @include mixins.media-sm {
1813
- justify-content: flex-end;
1814
- align-items: flex-end;
1815
-
1816
- .cta {
1817
- width: auto;
1818
- min-width: 150px;
1819
- }
1820
- }
1821
- }
1822
-
1823
- &__allotment {
1824
- padding: 0px;
1825
-
1826
- @include mixins.media-sm {
1827
- flex-direction: column;
1828
- }
1829
-
1830
- @include mixins.media-md {
1831
- flex-direction: row;
1832
- }
1833
-
1834
- @include mixins.media-lg {
1835
- flex-direction: column;
1836
- }
1837
-
1838
- @include mixins.media-xl {
1839
- flex-direction: row;
1840
- }
1841
-
1842
- &__title__wrapper {
1843
- padding: 0px 20px;
1844
-
1845
- @include mixins.media-md {
1846
- padding: 20px 0px;
1847
- }
1848
-
1849
- @include mixins.media-lg {
1850
- padding: 0px 20px;
1851
- }
1852
-
1853
- @include mixins.media-xl {
1854
- padding: 20px 0px;
1855
- }
1856
- }
1857
-
1858
- &__footer {
1859
- padding: 0px 20px;
1860
- padding-bottom: 20px;
1861
-
1862
- @include mixins.media-sm {
1863
- flex-direction: row;
1864
- align-items: flex-start;
1865
- }
1866
-
1867
- @include mixins.media-md {
1868
- flex-direction: column;
1869
- align-items: flex-end;
1870
- padding: 20px 0px;
1871
- padding-right: 20px;
1872
- }
1873
-
1874
- @include mixins.media-lg {
1875
- flex-direction: row;
1876
- align-items: flex-start;
1877
- padding: 0px 20px;
1878
- padding-bottom: 20px;
1879
- }
1880
-
1881
- @include mixins.media-xl {
1882
- flex-direction: column;
1883
- align-items: flex-end;
1884
- padding: 20px 0px;
1885
- padding-right: 20px;
1886
- }
1887
- }
1888
-
1889
- &__price {
1890
- &__wrapper {
1891
- @include mixins.media-sm {
1892
- align-items: flex-start;
1893
- }
1894
-
1895
- @include mixins.media-md {
1896
- align-items: flex-end;
1897
- }
1898
-
1899
- @include mixins.media-lg {
1900
- align-items: flex-start;
1901
- }
1902
-
1903
- @include mixins.media-xl {
1904
- align-items: flex-end;
1905
- }
1906
- }
1907
- }
1908
- }
1909
- }
1910
- }
1911
-
1912
- &__results__cards--list {
1913
- @include mixins.media-sm {
1914
- grid-template-columns: repeat(1, 1fr);
1915
- }
1916
-
1917
- @include mixins.media-lg {
1918
- grid-template-columns: repeat(1, 1fr);
1919
- }
1920
-
1921
- .search__result-card {
1922
- &__wrapper {
1923
- @include mixins.media-sm {
1924
- flex-direction: row;
1925
- justify-content: flex-start;
1926
- }
1927
-
1928
- @include mixins.media-lg {
1929
- flex-direction: row;
1930
- }
1931
- }
1932
-
1933
- &__top {
1934
- @include mixins.media-sm {
1935
- flex-direction: row;
1936
- }
1937
- }
1938
-
1939
- &__img-wrapper {
1940
- @include mixins.media-sm {
1941
- min-width: 175px;
1942
- width: 175px;
1943
- height: 175px;
1944
- min-height: 100%;
1945
- overflow: hidden;
1946
- }
1947
-
1948
- @include mixins.media-lg {
1949
- min-width: 175px;
1950
- height: 175px;
1951
- min-height: 100%;
1952
- }
1953
- }
1954
-
1955
- &__price {
1956
- &__wrapper {
1957
- @include mixins.media-sm {
1958
- position: absolute;
1959
- bottom: auto;
1960
- right: auto;
1961
- top: 0px;
1962
- left: 50%;
1963
- transform: translateX(-50%);
1964
- min-width: 96px;
1965
- border-radius: 0 0 5px 5px;
1966
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
1967
- }
1968
- }
1969
- }
1970
-
1971
- &__content {
1972
- @include mixins.media-sm {
1973
- flex-direction: row;
1974
- width: 100%;
1975
- padding: 15px 20px;
1976
- height: auto;
1977
- }
1978
-
1979
- @include mixins.media-lg {
1980
- width: 100%;
1981
- padding: 15px 20px;
1982
- }
1983
- }
1984
-
1985
- &__header {
1986
- &__wrapper {
1987
- @include mixins.media-sm {
1988
- display: flex;
1989
- flex-direction: row-reverse;
1990
- align-items: center;
1991
- gap: 10px;
1992
- }
1993
-
1994
- @include mixins.media-lg {
1995
- flex-direction: row-reverse;
1996
- align-items: center;
1997
- }
1998
-
1999
- .rating {
2000
- margin-top: 2px;
2001
- }
2002
- }
2003
- }
2004
-
2005
- &__description {
2006
- display: none;
2007
- }
2008
-
2009
- &__footer {
2010
- @include mixins.media-sm {
2011
- justify-content: flex-end;
2012
- align-items: flex-end;
2013
-
2014
- .cta {
2015
- width: auto;
2016
- min-width: 150px;
2017
- }
2018
- }
2019
- }
2020
-
2021
- &__allotment {
2022
- &__img-wrapper {
2023
- display: none;
2024
- }
2025
-
2026
- &__description {
2027
- display: none;
2028
- }
2029
- }
2030
- }
2031
- }
2032
- }
2033
-
2034
- .star-rating-filter {
2035
- display: flex;
2036
- justify-content: flex-end;
2037
- flex-direction: row-reverse;
2038
- gap: 15px;
2039
- font-size: 24px;
2040
- cursor: pointer;
2041
-
2042
- .star {
2043
- color: var(--tide-booking-star-rating-color);
2044
- /* unfilled */
2045
- transition: color 0.2s;
2046
- }
2047
-
2048
- .star.filled {
2049
- color: var(--tide-booking-star-rating-color--filled);
2050
- /* filled gold */
2051
- }
2052
-
2053
- .star:hover,
2054
- .star:hover ~ .star {
2055
- color: var(--tide-booking-star-rating-color--hover);
2056
- }
2057
- }
2058
-
2059
- .search__filter-toggle-label {
2060
- vertical-align: middle;
2061
- font-size: 0.95rem;
2062
- }
2063
-
2064
- .mobile-filters-button {
2065
- display: flex;
2066
- justify-content: center;
2067
- align-items: center;
2068
- flex: 1;
2069
- max-width: 7rem;
2070
- margin-right: 0.5rem;
2071
- height: 3.5rem;
2072
- color: grey;
2073
- border: 1px solid green;
2074
- border-radius: 3px;
2075
- font-size: 16px;
2076
- cursor: pointer;
2077
-
2078
- @include mixins.media-lg {
2079
- display: none;
2080
- }
2081
-
2082
- &__icon {
2083
- fill: red;
2084
- margin-right: 0.5rem;
2085
- }
2086
- }
2087
-
2088
- .flight-path {
2089
- display: flex;
2090
- align-items: center;
2091
- justify-content: center;
2092
- width: 100%;
2093
-
2094
- @media (min-width: 400px) {
2095
- width: 6rem;
2096
- }
2097
-
2098
- &__point {
2099
- width: 7px;
2100
- height: 7px;
2101
-
2102
- border-radius: 50%;
2103
- border: 1px solid red;
2104
- background: wh;
2105
-
2106
- &--start,
2107
- &--end {
2108
- background-color: white;
2109
- min-width: 7px;
2110
- }
2111
- }
2112
-
2113
- &__line {
2114
- display: flex;
2115
- align-items: center;
2116
- flex-grow: 1;
2117
- position: relative;
2118
- height: 1px;
2119
- background: red;
2120
-
2121
- gap: 1.3rem;
2122
-
2123
- &::before,
2124
- &::after {
2125
- content: '';
2126
- flex-grow: 1;
2127
- height: 1px;
2128
- background: red;
2129
- }
2130
- }
2131
-
2132
- &__stop {
2133
- width: 9px;
2134
- height: 9px;
2135
-
2136
- border-radius: 50%;
2137
- background: red;
2138
- border: 2px solid white;
2139
-
2140
- position: relative;
2141
- }
2142
- }
2143
-
2144
- .has-overlay {
2145
- overflow: hidden;
2146
- }
2147
-
2148
- .spinner {
2149
- &__container {
2150
- margin: 1rem auto;
2151
- display: flex;
2152
- flex-direction: column;
2153
- align-items: center;
2154
- gap: 1rem;
2155
- }
2156
-
2157
- &__icon {
2158
- border: 2px solid rgb(244, 249, 250, 0.2);
2159
- border-top: 2px solid #3aafa9;
2160
- border-radius: 50%;
2161
- width: 24px;
2162
- height: 24px;
2163
- animation: spin 0.6s linear infinite;
2164
- display: inline-block;
2165
- vertical-align: middle;
2166
- margin-right: 6px;
2167
- }
2168
-
2169
- &__label {
2170
- text-align: center;
2171
- }
2172
- }
2173
-
2174
- @keyframes spin {
2175
- to {
2176
- transform: rotate(360deg);
2177
- }
2178
- }
1
+ @use '../components/mixins' as mixins;
2
+
3
+ * {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ .search {
8
+ background: var(--tide-booking-search-results-background);
9
+
10
+ &__bg {
11
+ background: var(--tide-booking-search-results-background);
12
+ }
13
+
14
+ &__container {
15
+ position: relative;
16
+ display: flex;
17
+ @include mixins.container-wide();
18
+ padding-top: 30px;
19
+ padding-bottom: 60px;
20
+
21
+ @include mixins.media-sm {
22
+ padding-top: 30px;
23
+ padding-bottom: 60px;
24
+ }
25
+
26
+ @include mixins.media-md {
27
+ gap: 30px;
28
+ padding-top: 30px;
29
+ padding-bottom: 60px;
30
+ }
31
+
32
+ @include mixins.media-lg {
33
+ gap: 60px;
34
+ padding-top: 60px;
35
+ }
36
+ }
37
+
38
+ &__filters {
39
+ position: fixed;
40
+ top: 0px;
41
+ left: 0px;
42
+ display: block;
43
+ max-width: 360px;
44
+ width: 100%;
45
+ background-color: var(--tide-booking-search-filter-background);
46
+ border: var(--tide-booking-search-filter-border);
47
+ height: 100%;
48
+ margin-bottom: 20px;
49
+ margin-left: 0;
50
+ grid-column: span 12;
51
+ transform: translateX(-100vw);
52
+ overflow: hidden;
53
+ transition: transform 0.35s ease;
54
+
55
+ @include mixins.media-md {
56
+ grid-column: auto;
57
+ border-radius: var(--tide-booking-search-filter-border-radius);
58
+ }
59
+
60
+ @include mixins.media-lg {
61
+ position: relative;
62
+ display: block;
63
+ max-width: 360px;
64
+ width: 360px;
65
+ height: auto;
66
+ margin: 0;
67
+ border: none;
68
+ box-shadow: none;
69
+ transform: translateX(0);
70
+ pointer-events: auto;
71
+ padding-bottom: 20px;
72
+ }
73
+
74
+ // ::after {
75
+ // content: '';
76
+ // display: block;
77
+ // position: fixed;
78
+ // top: 0;
79
+ // left: 0;
80
+ // width: 100vw;
81
+ // height: 100vh;
82
+ // background: rgba(0, 0, 0, 0.5);
83
+ // z-index: 100009;
84
+ // }
85
+
86
+ &__group-container {
87
+ position: relative;
88
+ display: flex;
89
+ flex-direction: column;
90
+ height: calc(100% - 47px);
91
+ overflow-y: auto;
92
+ overflow-x: hidden;
93
+ @extend %scrollbar-thin;
94
+
95
+ @include mixins.media-lg {
96
+ height: auto;
97
+ overflow: visible;
98
+ }
99
+
100
+ .search__filter-group:last-child {
101
+ margin-bottom: 20px;
102
+ }
103
+ }
104
+
105
+ &__actions {
106
+ position: sticky;
107
+ bottom: 0;
108
+ left: 0;
109
+ display: flex;
110
+ justify-content: space-between;
111
+ align-items: center;
112
+ gap: 15px;
113
+ padding: 15px 20px;
114
+ background-color: white;
115
+ margin-top: auto;
116
+
117
+ @include mixins.media-lg {
118
+ display: none;
119
+ }
120
+ }
121
+
122
+ &--background {
123
+ background-color: rgba(0, 0, 0, 0.7);
124
+ height: 100%;
125
+ width: 100%;
126
+ position: fixed;
127
+
128
+ @include mixins.media-lg {
129
+ display: none;
130
+ position: relative;
131
+ }
132
+ }
133
+
134
+ &--close {
135
+ position: fixed;
136
+ z-index: 100020;
137
+ top: 10px;
138
+ right: 15px;
139
+ display: none;
140
+ background: none;
141
+ border: none;
142
+ color: var(--tide-booking-search-filter-price-amount-color);
143
+ cursor: pointer;
144
+ }
145
+
146
+ &--modal {
147
+ display: block;
148
+ position: fixed;
149
+ top: 0;
150
+ left: 0;
151
+ width: 100vw;
152
+ height: 100dvh;
153
+ z-index: 100009;
154
+
155
+ // Initial hidden state
156
+ opacity: 0;
157
+ pointer-events: none;
158
+ transition: left 0.35s ease, opacity 0.25s ease;
159
+
160
+ @include mixins.media-lg {
161
+ position: relative;
162
+ left: 0px;
163
+ width: auto;
164
+ height: auto;
165
+ background: transparent;
166
+ opacity: 1;
167
+ z-index: 1;
168
+ }
169
+
170
+ // When modal is open
171
+ &.is-open {
172
+ left: 0px;
173
+ opacity: 1;
174
+ pointer-events: auto;
175
+
176
+ .search__filters--close {
177
+ display: block;
178
+ }
179
+
180
+ .search__filters {
181
+ position: relative;
182
+ display: block;
183
+ max-width: 100%;
184
+ width: 100%;
185
+ height: 100%;
186
+ margin: 0;
187
+ border: none;
188
+ box-shadow: none;
189
+ border-top-left-radius: 0px;
190
+ border-bottom-left-radius: 0px;
191
+ transform: translateX(0);
192
+ pointer-events: auto;
193
+ overflow-y: auto;
194
+ @extend %scrollbar-thin;
195
+ }
196
+ }
197
+ }
198
+ }
199
+
200
+ &__filter {
201
+ &-group {
202
+ padding: 0 20px;
203
+ }
204
+
205
+ &-row {
206
+ display: flex;
207
+ align-items: center;
208
+ justify-content: space-between;
209
+ margin-top: 15px;
210
+
211
+ &-flex-title {
212
+ display: flex;
213
+ align-items: center;
214
+ gap: 15px;
215
+ }
216
+
217
+ &-icon {
218
+ fill: hotpink;
219
+ }
220
+
221
+ &--underline {
222
+ border-bottom: var(--tide-booking-search-filter-group-title-text-border);
223
+ margin-bottom: 8px;
224
+ cursor: pointer;
225
+ }
226
+
227
+ &--checkmark {
228
+ margin-top: 5px;
229
+
230
+ @include media-lg {
231
+ margin-top: 15px;
232
+ }
233
+ }
234
+ }
235
+
236
+ &__header {
237
+ padding: 0 20px;
238
+ margin-bottom: 15px;
239
+ margin-top: 0;
240
+ padding-top: 15px;
241
+ padding-right: 60px;
242
+
243
+ @include mixins.media-lg {
244
+ padding-right: 15px;
245
+ }
246
+ }
247
+
248
+ &-link {
249
+ color: orangered;
250
+ transition: all 0.3s;
251
+ cursor: pointer;
252
+ text-decoration: underline;
253
+ margin-top: 136px;
254
+
255
+ &:hover {
256
+ color: green;
257
+ }
258
+ }
259
+
260
+ &-chevron-icon {
261
+ transition: transform 0.3s ease;
262
+ transform: rotate(180deg);
263
+ margin-top: 5px;
264
+
265
+ &--flipped {
266
+ transform: rotate(0);
267
+ }
268
+ }
269
+
270
+ &-small-title {
271
+ font-size: 14px;
272
+ font-weight: 400;
273
+ margin: 0 auto;
274
+ }
275
+
276
+ &-medium-title {
277
+ font-size: 16px;
278
+ font-weight: 700;
279
+ margin: 5px 0;
280
+
281
+ &-wrapper {
282
+ margin-top: 12.5px;
283
+ margin-bottom: 2.5px;
284
+ }
285
+ }
286
+
287
+ &-large-title {
288
+ font-size: 18px;
289
+ font-weight: var(--tide-booking-search-filter-group-title-text-font-weight);
290
+ margin: 5px 0;
291
+ }
292
+
293
+ &-reset {
294
+ color: var(--tide-booking-search-reset-color);
295
+ font-size: 15px;
296
+ font-weight: var(--tide-booking-search-reset-font-weight);
297
+ text-decoration: var(--tide-booking-search-reset-text-decoration);
298
+ cursor: pointer;
299
+ }
300
+
301
+ // &-facet {
302
+ // color: variables.$text-color;
303
+ // }
304
+
305
+ // &-price {
306
+ // font-size: variables.$font-size-body--small;
307
+ // color: variables.$secondary-color;
308
+ // margin-bottom: 0;
309
+ // margin-top: 0;
310
+ // min-width: 88px;
311
+ // text-align: end;
312
+ // }
313
+
314
+ // &-button {
315
+ // width: 100%;
316
+ // padding: 1rem 0;
317
+ // background: transparent;
318
+ // border: 1px solid variables.$secondary-color;
319
+ // color: variables.$secondary-color;
320
+ // border-radius: 3px;
321
+ // margin-top: 2rem;
322
+ // transition: all 0.2s ease-in-out;
323
+ // cursor: pointer;
324
+
325
+ // &:hover {
326
+ // background: variables.$secondary-color;
327
+ // color: variables.$white;
328
+ // }
329
+ // }
330
+
331
+ &__image {
332
+ position: absolute;
333
+ top: 50%;
334
+ left: 50%;
335
+ width: 100%;
336
+ height: 100%;
337
+ transform: translate(-50%, -50%);
338
+ z-index: -1;
339
+
340
+ &__wrapper {
341
+ position: relative;
342
+ width: 100%;
343
+ height: 200px;
344
+ max-height: 200px;
345
+ padding: 20px;
346
+ overflow: hidden;
347
+ border-radius: var(--tide-booking-search-filter-img-border-radius);
348
+ display: flex;
349
+ flex-direction: column;
350
+ align-items: center;
351
+ justify-content: flex-end;
352
+ }
353
+
354
+ &__text {
355
+ color: var(--tide-booking-search-filter-img-text-color);
356
+ font-weight: var(--tide-booking-search-filter-img-text-font-weight);
357
+ font-family: var(--tide-booking-search-filter-img-text-font-family);
358
+ }
359
+
360
+ &__title {
361
+ font-size: 20px;
362
+ font-weight: var(--tide-booking-search-filter-img-title-font-weight);
363
+ margin: 5px 0;
364
+ color: var(--tide-booking-search-filter-img-title-color);
365
+ text-align: center;
366
+ font-family: var(--tide-booking-search-filter-img-title-font-family);
367
+ }
368
+ }
369
+
370
+ &__prices {
371
+ display: flex;
372
+ flex-direction: column;
373
+ justify-content: center;
374
+ gap: 10px;
375
+
376
+ height: 173.5px;
377
+ padding: 0 20px;
378
+
379
+ &__wrapper {
380
+ display: flex;
381
+ flex-direction: column;
382
+ align-items: center;
383
+
384
+ p {
385
+ margin: 0px;
386
+ line-height: 1.5;
387
+ }
388
+ }
389
+
390
+ &--amount {
391
+ font-family: var(--tide-booking-search-filter-price-amount-font-family);
392
+ font-size: 30px;
393
+ font-weight: var(--tide-booking-search-filter-price-amount-font-weight);
394
+ margin: 0;
395
+ color: var(--tide-booking-search-filter-price-amount-color);
396
+
397
+ p {
398
+ font-family: var(--tide-booking-search-filter-price-text-font-family);
399
+ font-weight: var(--tide-booking-search-filter-price-text-font-weight);
400
+ text-align: center;
401
+ color: var(--tide-booking-search-filter-price-text-color);
402
+ margin: 0px;
403
+
404
+ strong {
405
+ font-weight: var(--tide-booking-search-filter-price-total-font-weight);
406
+ color: var(--tide-booking-search-filter-price-total-color);
407
+ }
408
+ }
409
+ }
410
+ }
411
+
412
+ &__itinerary {
413
+ margin-top: 30px;
414
+ padding: 0 20px;
415
+ padding-bottom: 30px;
416
+ display: flex;
417
+ flex-direction: column;
418
+ gap: 15px;
419
+
420
+ p {
421
+ margin: 0px;
422
+ font-family: var(--tide-booking-search-itinerary-filter-title-font-family);
423
+ font-weight: var(--tide-booking-search-itinerary-filter-title-font-weight);
424
+ color: var(--tide-booking-search-itinerary-filter-title-color);
425
+ }
426
+
427
+ &__country {
428
+ padding: 15px 20px;
429
+ box-shadow: var(--tide-booking-search-itinerary-filter-country-box-shadow);
430
+ display: flex;
431
+ align-items: center;
432
+ gap: 20px;
433
+ border-radius: var(--tide-booking-search-itinerary-filter-country-border-radius);
434
+ border: var(--tide-booking-search-itinerary-filter-country-border);
435
+ background: var(--tide-booking-search-itinerary-filter-country-background);
436
+
437
+ &-icon {
438
+ display: flex;
439
+ min-width: 30px;
440
+ max-width: 30px;
441
+ align-items: center;
442
+ justify-content: center;
443
+ color: var(--tide-booking-search-itinerary-filter-country-icon-color);
444
+ }
445
+
446
+ &-content {
447
+ h4 {
448
+ font-family: var(--tide-booking-search-itinerary-filter-country-title-font-family);
449
+ margin-bottom: 3px;
450
+ font-size: 20px;
451
+ font-weight: var(--tide-booking-search-itinerary-filter-country-title-font-weight);
452
+ color: var(--tide-booking-search-itinerary-filter-country-title-color);
453
+ }
454
+
455
+ p {
456
+ margin: 0px;
457
+ font-family: var(--tide-booking-search-itinerary-filter-country-text-font-family);
458
+ font-weight: var(--tide-booking-search-itinerary-filter-country-text-font-weight);
459
+ color: var(--tide-booking-search-itinerary-filter-country-text-color);
460
+
461
+ strong {
462
+ font-weight: var(--tide-booking-search-itinerary-filter-country-text-bold-font-weight);
463
+ color: var(--tide-booking-search-itinerary-filter-country-text-bold-color);
464
+ }
465
+ }
466
+ }
467
+ }
468
+
469
+ &__transport {
470
+ position: relative;
471
+ padding-left: 20px;
472
+ background: var(--tide-booking-search-itinerary-filter-transport-background);
473
+ border-radius: var(--tide-booking-search-itinerary-filter-transport-border-radius);
474
+ border: var(--tide-booking-search-itinerary-filter-transport-border);
475
+ box-shadow: var(--tide-booking-search-itinerary-filter-transport-box-shadow);
476
+
477
+ &-timeline {
478
+ height: 100%;
479
+ text-align: center;
480
+ content: ' ';
481
+ z-index: 1;
482
+ display: block;
483
+ top: 0;
484
+ left: 53px;
485
+ position: absolute;
486
+ width: 45px;
487
+ min-width: 45px;
488
+ max-width: 45px;
489
+
490
+ &-line {
491
+ width: 1px;
492
+ height: 100%;
493
+ margin: 0 auto;
494
+ border-left: var(--tide-booking-search-itinerary-filter-transport-timeline);
495
+ }
496
+ }
497
+
498
+ &-item {
499
+ display: flex;
500
+ align-items: center;
501
+ gap: 15px;
502
+ position: relative;
503
+ z-index: 2;
504
+ }
505
+
506
+ &-date {
507
+ min-width: 26px;
508
+ max-width: 26px;
509
+
510
+ p {
511
+ margin: 0px;
512
+ color: var(--tide-booking-search-itinerary-filter-transport-date-month-color);
513
+ font-weight: var(--tide-booking-search-itinerary-filter-transport-date-month-font-weight);
514
+ }
515
+
516
+ &-date {
517
+ font-size: 24px;
518
+
519
+ strong {
520
+ font-weight: var(--tide-booking-search-itinerary-filter-transport-date-day-font-weight);
521
+ color: var(--tide-booking-search-itinerary-filter-transport-date-day-color);
522
+ }
523
+ }
524
+ }
525
+
526
+ &-badge {
527
+ width: 30px;
528
+ min-width: 30px;
529
+ max-width: 30px;
530
+ height: 30px;
531
+ min-height: 30px;
532
+ max-height: 30px;
533
+ background-color: var(--tide-booking-search-itinerary-filter-transport-badge-icon-background-color);
534
+ border-radius: 50%;
535
+ display: flex;
536
+ align-items: center;
537
+ justify-content: center;
538
+ color: var(--tide-booking-search-itinerary-filter-transport-badge-icon-color);
539
+
540
+ &--default {
541
+ background-color: var(--tide-booking-search-itinerary-filter-segment-badge-icon-background-color);
542
+ color: var(--tide-booking-search-itinerary-filter-segment-badge-icon-color);
543
+ }
544
+
545
+ &--flight {
546
+ background-color: var(--tide-booking-search-itinerary-service-flight-color);
547
+ color: var(--tide-booking-white);
548
+ }
549
+
550
+ &--hotel {
551
+ background-color: var(--tide-booking-search-itinerary-service-hotel-color);
552
+ color: var(--tide-booking-white);
553
+ }
554
+
555
+ &--excursion {
556
+ background-color: var(--tide-booking-search-itinerary-service-excursion-color);
557
+ color: var(--tide-booking-white);
558
+ }
559
+
560
+ &--poi {
561
+ background-color: var(--tide-booking-search-itinerary-service-poi-color);
562
+ color: var(--tide-booking-white);
563
+ }
564
+
565
+ &--restaurant {
566
+ background-color: var(--tide-booking-search-itinerary-service-restaurant-color);
567
+ color: var(--tide-booking-white);
568
+ }
569
+ }
570
+
571
+ &-details {
572
+ display: flex;
573
+ flex-direction: column;
574
+ gap: 15px;
575
+
576
+ h6 {
577
+ margin: 0px;
578
+ font-size: 18px;
579
+ font-weight: var(--tide-booking-search-itinerary-filter-transport-title-font-weight);
580
+ color: var(--tide-booking-search-itinerary-filter-transport-title-color);
581
+ }
582
+
583
+ p {
584
+ margin: 0px;
585
+ font-size: 14px;
586
+ }
587
+
588
+ &-plane {
589
+ font-size: 14px;
590
+ display: flex;
591
+ align-items: center;
592
+ gap: 3px;
593
+
594
+ svg {
595
+ fill: var(--tide-booking-search-itinerary-filter-transport-plane-icon-color);
596
+ }
597
+
598
+ span {
599
+ display: flex;
600
+ align-items: center;
601
+ gap: 3px;
602
+ }
603
+
604
+ strong {
605
+ font-weight: var(--tide-booking-search-itinerary-filter-transport-plane-font-weight);
606
+ color: var(--tide-booking-search-itinerary-filter-transport-plane-color);
607
+ }
608
+ }
609
+
610
+ &-time {
611
+ span {
612
+ display: flex;
613
+ align-items: center;
614
+ }
615
+ }
616
+ }
617
+ }
618
+
619
+ &__segments {
620
+ position: relative;
621
+ display: flex;
622
+ flex-direction: column;
623
+ gap: 0;
624
+ gap: 15px;
625
+ padding: 15px 20px;
626
+ background: var(--tide-booking-search-itinerary-filter-segments-background);
627
+ box-shadow: var(--tide-booking-search-itinerary-filter-segments-box-shadow);
628
+ border-radius: var(--tide-booking-search-itinerary-filter-segments-border-radius);
629
+ border: var(--tide-booking-search-itinerary-filter-segments-border);
630
+
631
+ &__wrapper {
632
+ position: relative;
633
+ display: flex;
634
+ flex-direction: column;
635
+ gap: 30px;
636
+ }
637
+
638
+ &-timeline {
639
+ height: 100%;
640
+ text-align: center;
641
+ content: ' ';
642
+ z-index: 1;
643
+ display: block;
644
+ top: 0;
645
+ left: 33px;
646
+ position: absolute;
647
+ width: 45px;
648
+ min-width: 45px;
649
+ max-width: 45px;
650
+
651
+ &-line {
652
+ width: 1px;
653
+ height: 100%;
654
+ margin: 0 auto;
655
+ border-left: var(--tide-booking-search-itinerary-filter-segment-timeline);
656
+ }
657
+ }
658
+ }
659
+
660
+ &__segment {
661
+ position: relative;
662
+
663
+ &-item {
664
+ display: flex;
665
+ align-items: center;
666
+ gap: 15px;
667
+ position: relative;
668
+ z-index: 2;
669
+
670
+ &--start {
671
+ align-items: flex-start;
672
+ }
673
+
674
+ &--editable {
675
+ cursor: pointer;
676
+
677
+ &:hover {
678
+ background-color: rgba(0, 0, 0, 0.05);
679
+ }
680
+ }
681
+ }
682
+
683
+ &-badge {
684
+ width: 30px;
685
+ min-width: 30px;
686
+ max-width: 30px;
687
+ height: 30px;
688
+ min-height: 30px;
689
+ max-height: 30px;
690
+ background: var(--tide-booking-search-itinerary-filter-segment-badge-icon-background-color);
691
+ outline: 3px solid var(--tide-booking-search-itinerary-filter-segments-background);
692
+ border-radius: 50%;
693
+ display: flex;
694
+ align-items: center;
695
+ justify-content: center;
696
+ color: var(--tide-booking-search-itinerary-filter-segment-badge-icon-color);
697
+
698
+ &--secondary {
699
+ background: var(--tide-booking-search-itinerary-filter-segment-badge--secondary-icon-background-color);
700
+ color: var(--tide-booking-search-itinerary-filter-segment-badge--secondary-icon-color);
701
+ }
702
+
703
+ &--flight {
704
+ background: var(--tide-booking-search-itinerary-service-flight-color);
705
+ }
706
+
707
+ &--hotel {
708
+ background: var(--tide-booking-search-itinerary-service-hotel-color);
709
+ }
710
+
711
+ &--excursion {
712
+ background: var(--tide-booking-search-itinerary-service-excursion-color);
713
+ }
714
+
715
+ &--poi {
716
+ background: var(--tide-booking-search-itinerary-service-poi-color);
717
+ }
718
+
719
+ &--restaurant {
720
+ background: var(--tide-booking-search-itinerary-service-restaurant-color);
721
+ }
722
+ }
723
+
724
+ &-date {
725
+ p {
726
+ margin: 0px;
727
+ color: var(--tide-booking-search-itinerary-filter-segment-date-month-color);
728
+ font-weight: var(--tide-booking-search-itinerary-filter-segment-date-month-font-weight);
729
+ }
730
+
731
+ &-date {
732
+ font-size: 24px;
733
+
734
+ strong {
735
+ font-weight: var(--tide-booking-search-itinerary-filter-segment-date-day-font-weight);
736
+ color: var(--tide-booking-search-itinerary-filter-segment-date-day-color);
737
+ }
738
+ }
739
+ }
740
+
741
+ &-nights {
742
+ display: flex;
743
+ align-items: center;
744
+ flex-flow: row nowrap;
745
+ }
746
+
747
+ &-nights,
748
+ &-date {
749
+ min-width: 26px;
750
+ max-width: 26px;
751
+
752
+ svg {
753
+ min-width: 16px;
754
+ min-height: 16px;
755
+ }
756
+ }
757
+
758
+ &-details {
759
+ display: flex;
760
+ flex-direction: column;
761
+ gap: 10px;
762
+
763
+ h6 {
764
+ margin: 0;
765
+ font-size: 18px;
766
+ font-weight: var(--tide-booking-search-itinerary-filter-segment-title-font-weight);
767
+ color: var(--tide-booking-search-itinerary-filter-segment-title-color);
768
+ }
769
+
770
+ &__room {
771
+ display: flex;
772
+ align-items: center;
773
+ gap: 5px;
774
+ margin: 0px;
775
+ line-height: 1.2;
776
+ font-weight: var(--tide-booking-search-itinerary-filter-segment-text-font-weight);
777
+ color: var(--tide-booking-search-itinerary-filter-segment-text-color);
778
+
779
+ svg {
780
+ flex: 12px 0 0;
781
+ }
782
+ }
783
+
784
+ .rating {
785
+ display: flex;
786
+ align-items: center;
787
+ gap: 3px;
788
+
789
+ svg {
790
+ fill: var(--tide-booking-search-hotel-card-starrating-color);
791
+ }
792
+ }
793
+ }
794
+ }
795
+ }
796
+ }
797
+
798
+ &__results {
799
+ display: flex;
800
+ flex-direction: column;
801
+ width: 100%;
802
+ min-width: 0;
803
+
804
+ &__cards {
805
+ display: grid;
806
+ gap: 15px;
807
+ grid-template-columns: 1fr;
808
+ grid-template-rows: repeat(1, 1fr);
809
+
810
+ @include mixins.media-sm {
811
+ grid-template-columns: repeat(2, 1fr);
812
+ }
813
+
814
+ @include mixins.media-md {
815
+ grid-template-columns: repeat(3, 1fr);
816
+ }
817
+
818
+ @include mixins.media-lg {
819
+ grid-template-columns: repeat(2, 1fr);
820
+ }
821
+
822
+ @include mixins.media-xgl {
823
+ grid-template-columns: repeat(3, 1fr);
824
+ }
825
+
826
+ &__actions {
827
+ display: flex;
828
+ justify-content: space-between;
829
+ align-items: center;
830
+
831
+ .cta {
832
+ margin-left: auto;
833
+ }
834
+ }
835
+ }
836
+
837
+ &__cards--scroll {
838
+ display: flex;
839
+ flex-wrap: nowrap;
840
+ overflow-x: auto;
841
+ overflow-y: hidden;
842
+ scroll-snap-type: x proximity;
843
+ -webkit-overflow-scrolling: touch;
844
+ padding-bottom: 5px;
845
+
846
+ @include mixins.media-sm {
847
+ grid-template-columns: none;
848
+ }
849
+
850
+ @include mixins.media-md {
851
+ grid-template-columns: none;
852
+ }
853
+
854
+ @include mixins.media-lg {
855
+ grid-template-columns: none;
856
+ }
857
+
858
+ @include mixins.media-xgl {
859
+ grid-template-columns: none;
860
+ }
861
+
862
+ > * {
863
+ flex: 0 0 auto;
864
+ scroll-snap-align: start;
865
+ width: 280px;
866
+ max-width: 85vw;
867
+
868
+ @include mixins.media-md {
869
+ width: 320px;
870
+ }
871
+ }
872
+ }
873
+
874
+ &__wrapper {
875
+ display: flex;
876
+ flex-direction: column;
877
+ gap: 15px;
878
+
879
+ .search__results__label {
880
+ &:first-child {
881
+ margin-top: 15px;
882
+ }
883
+ }
884
+ }
885
+
886
+ &__label {
887
+ display: grid;
888
+ grid-template-columns: 50px 1fr;
889
+ grid-template-rows: 50px;
890
+ align-items: center;
891
+ border-radius: var(--tide-booking-search-results-label-border-radius);
892
+ overflow: hidden;
893
+ margin-top: 30px;
894
+
895
+ &__date {
896
+ display: flex;
897
+ flex-flow: column;
898
+ align-items: center;
899
+ justify-content: center;
900
+ height: 100%;
901
+
902
+ background: var(--tide-booking-search-results-label-date-background);
903
+ border: var(--tide-booking-search-results-label-date-border);
904
+
905
+ p {
906
+ margin: 0px;
907
+ font-weight: var(--tide-booking-search-results-label-date-month-font-weight);
908
+ color: var(--tide-booking-search-results-label-date-month-color);
909
+ }
910
+
911
+ &-date {
912
+ font-size: 24px;
913
+ font-weight: var(--tide-booking-search-results-label-date-day-font-weight);
914
+ color: var(--tide-booking-search-results-label-date-day-color);
915
+ }
916
+ }
917
+
918
+ &__text {
919
+ border: var(--tide-booking-search-results-label-border);
920
+ border-left: none;
921
+ height: 50px;
922
+ display: flex;
923
+ align-items: center;
924
+ padding-left: 15px;
925
+ gap: 10px;
926
+
927
+ svg {
928
+ fill: var(--tide-booking-gray-dark);
929
+ }
930
+
931
+ h3 {
932
+ display: flex;
933
+ align-items: center;
934
+ gap: 3px;
935
+ margin: 0px;
936
+ color: var(--tide-booking-search-results-label-title-color);
937
+ font-weight: var(--tide-booking-search-results-label-font-weight);
938
+
939
+ strong {
940
+ font-weight: var(--tide-booking-search-results-label-title-bold-font-weight);
941
+ color: var(--tide-booking-search-results-label-title-bold-color);
942
+ }
943
+ }
944
+ }
945
+
946
+ &--secondary {
947
+ .search__results__label__date {
948
+ background: var(--tide-booking-search-results-label-date-background--secondary);
949
+ border: var(--tide-booking-search-results-label-date-border--secondary);
950
+ }
951
+ }
952
+
953
+ // Something inside a day rather than a day of its own: no date, no box, and quieter type,
954
+ // sitting close to what it introduces.
955
+ &--sub {
956
+ grid-template-columns: 1fr;
957
+ grid-template-rows: auto;
958
+ margin-top: 20px;
959
+
960
+ .search__results__label__text {
961
+ height: auto;
962
+ border: none;
963
+ padding: 0px;
964
+ gap: 8px;
965
+
966
+ h3 {
967
+ font-size: 16px;
968
+ }
969
+ }
970
+ }
971
+ }
972
+
973
+ &__options {
974
+ display: flex;
975
+ align-items: center;
976
+ justify-content: space-between;
977
+ gap: 15px;
978
+ padding: 15px 30px;
979
+ box-shadow: var(--tide-booking-search-more-options-box-shadow);
980
+ border: var(--tide-booking-search-more-options-border);
981
+ background-color: var(--tide-booking-search-more-options-background);
982
+ border-radius: var(--tide-booking-search-more-options-border-radius);
983
+
984
+ p {
985
+ margin: 0px;
986
+ color: var(--tide-booking-search-more-options-color);
987
+ }
988
+ }
989
+
990
+ &__tab-views {
991
+ display: none;
992
+ align-items: center;
993
+
994
+ @include mixins.media-sm {
995
+ display: flex;
996
+ }
997
+ }
998
+
999
+ &__tab-view {
1000
+ width: 100%;
1001
+ display: flex;
1002
+ align-items: center;
1003
+ gap: 5px;
1004
+ font-size: 18px;
1005
+ color: var(--tide-booking-search-tab-view-color);
1006
+ background: var(--tide-booking-search-tab-view-background);
1007
+ border: none;
1008
+ border-bottom: var(--tide-booking-search-tab-view-border);
1009
+ cursor: pointer;
1010
+ outline: none;
1011
+ padding: 10px 20px;
1012
+ transition: all 0.3s ease;
1013
+
1014
+ &:hover {
1015
+ color: var(--tide-booking-search-tab-view-hover-color);
1016
+ background: var(--tide-booking-search-tab-view-hover-background);
1017
+ border-bottom: var(--tide-booking-search-tab-view-hover-border);
1018
+ }
1019
+
1020
+ &--active {
1021
+ color: var(--tide-booking-search-tab-view-active-color);
1022
+ background: var(--tide-booking-search-tab-view-active-background);
1023
+ border-bottom: var(--tide-booking-search-tab-view-active-border);
1024
+ }
1025
+ }
1026
+
1027
+ &__actions {
1028
+ display: flex;
1029
+ align-items: center;
1030
+ gap: 16px;
1031
+ }
1032
+ }
1033
+
1034
+ &__result {
1035
+ display: flex;
1036
+ flex-wrap: wrap;
1037
+ gap: 15px;
1038
+ margin: 0;
1039
+ margin-bottom: 20px;
1040
+
1041
+ &--flight {
1042
+ display: grid;
1043
+ gap: 0;
1044
+ grid-template-columns: 1fr;
1045
+ margin: 0 0 30px;
1046
+
1047
+ @include mixins.media-md {
1048
+ grid-template-rows: repeat(1, 1fr);
1049
+ }
1050
+
1051
+ @include mixins.media-lg {
1052
+ grid-template-columns: 1fr 257px;
1053
+ }
1054
+ }
1055
+
1056
+ &-row {
1057
+ display: flex;
1058
+ align-items: center;
1059
+ justify-content: space-between;
1060
+ margin-bottom: 12px;
1061
+ margin-top: 18px;
1062
+
1063
+ @include mixins.media-sm {
1064
+ margin-bottom: 24px;
1065
+ }
1066
+
1067
+ &-text {
1068
+ font-size: 16px;
1069
+ color: gray;
1070
+ margin: 0;
1071
+ }
1072
+
1073
+ .cta--filter {
1074
+ position: relative;
1075
+ top: 0px;
1076
+ left: 0px;
1077
+ }
1078
+
1079
+ // &-button {
1080
+ // width: 13.5rem;
1081
+ // height: 3.5rem;
1082
+ // display: flex;
1083
+ // justify-content: space-between;
1084
+ // align-items: center;
1085
+ // padding: 0 1rem;
1086
+ // border: 1px solid blue;
1087
+ // border-radius: 3px;
1088
+ // color: blue;
1089
+ // cursor: pointer;
1090
+ // transition: all 0.2s ease-in-out;
1091
+
1092
+ // &:hover {
1093
+ // background: red;
1094
+ // color: yellow;
1095
+
1096
+ // .search__result-row-icon {
1097
+ // fill: white;
1098
+ // }
1099
+ // }
1100
+ // }
1101
+
1102
+ &-icon {
1103
+ fill: red;
1104
+ }
1105
+
1106
+ .dropdown {
1107
+ &:after {
1108
+ display: none;
1109
+ }
1110
+
1111
+ &__label {
1112
+ display: none;
1113
+
1114
+ @include mixins.media-sm {
1115
+ display: block;
1116
+ }
1117
+ }
1118
+
1119
+ &__input {
1120
+ width: auto;
1121
+ }
1122
+
1123
+ &-toggle {
1124
+ min-width: 165px;
1125
+ }
1126
+ }
1127
+ }
1128
+
1129
+ &-card {
1130
+ // flex-basis: 100%;
1131
+
1132
+ // @include mixins.media-xs {
1133
+ // flex-basis: calc(50% - 8px);
1134
+ // }
1135
+
1136
+ // @include mixins.media-lg {
1137
+ // flex: calc(33% - 8px) 0 0;
1138
+ // }
1139
+
1140
+ &__wrapper {
1141
+ height: 100%;
1142
+ display: flex;
1143
+ flex-direction: column;
1144
+ justify-content: space-between;
1145
+ align-items: stretch;
1146
+ cursor: pointer;
1147
+ border-radius: var(--tide-booking-search-hotel-card-border-radius);
1148
+ overflow: hidden;
1149
+ box-shadow: var(--tide-booking-search-hotel-card-box-shadow);
1150
+ background-color: var(--tide-booking-search-hotel-card-background);
1151
+ transition: transform 0.3s ease-in-out;
1152
+
1153
+ &--custom {
1154
+ gap: 20px;
1155
+
1156
+ .search__result-card__footer {
1157
+ padding: 20px;
1158
+ padding-top: 0px;
1159
+ }
1160
+ }
1161
+ }
1162
+
1163
+ &__top {
1164
+ display: flex;
1165
+ flex-direction: column;
1166
+ justify-content: flex-start;
1167
+ align-items: flex-start;
1168
+ width: 100%;
1169
+ }
1170
+
1171
+ &__img-wrapper {
1172
+ position: relative;
1173
+ width: 100%;
1174
+ height: 200px;
1175
+ overflow: hidden;
1176
+ background-color: #f5f5f5;
1177
+ }
1178
+
1179
+ &__img {
1180
+ width: 100%;
1181
+ height: 100%;
1182
+ object-fit: cover;
1183
+ }
1184
+
1185
+ &__price {
1186
+ font-family: var(--tide-booking-search-hotel-card-price-font-family);
1187
+ font-weight: var(--tide-booking-search-hotel-card-price-font-weight);
1188
+ color: var(--tide-booking-search-hotel-card-price-color);
1189
+ font-size: 20px;
1190
+
1191
+ &__wrapper {
1192
+ position: absolute;
1193
+ bottom: 0px;
1194
+ right: 0px;
1195
+ background: var(--tide-booking-search-hotel-card-price-background-color);
1196
+ display: flex;
1197
+ flex-flow: column nowrap;
1198
+ align-items: center;
1199
+ justify-content: center;
1200
+ gap: 5px;
1201
+ padding: 5px 20px;
1202
+ border-radius: 5px 0 0 0;
1203
+ box-shadow: var(--tide-booking-search-hotel-card-price-box-shadow);
1204
+ }
1205
+
1206
+ &__label {
1207
+ font-size: 12px;
1208
+ font-weight: var(--tide-booking-search-hotel-card-price-label-font-weight);
1209
+ color: var(--tide-booking-search-hotel-card-price-label-color);
1210
+ }
1211
+ }
1212
+
1213
+ &__content {
1214
+ display: flex;
1215
+ flex-direction: column;
1216
+ justify-content: space-between;
1217
+ gap: 20px;
1218
+ padding: 15px;
1219
+ height: calc(100% - 200px);
1220
+
1221
+ &__wrapper {
1222
+ display: flex;
1223
+ flex-direction: column;
1224
+ gap: 10px;
1225
+ }
1226
+
1227
+ &--extra {
1228
+ padding: 0 15px;
1229
+ margin-top: -20px;
1230
+ }
1231
+ }
1232
+
1233
+ &__header {
1234
+ position: relative;
1235
+ display: flex;
1236
+ justify-content: space-between;
1237
+ gap: 5px;
1238
+
1239
+ &__wrapper {
1240
+ .rating {
1241
+ display: flex;
1242
+ align-items: center;
1243
+ gap: 3px;
1244
+
1245
+ svg {
1246
+ fill: var(--tide-booking-search-hotel-card-starrating-color);
1247
+ }
1248
+ }
1249
+ }
1250
+ }
1251
+
1252
+ &__title {
1253
+ font-family: var(--tide-booking-search-hotel-card-title-font-family);
1254
+ font-weight: var(--tide-booking-search-hotel-card-title-font-weight);
1255
+ color: var(--tide-booking-search-hotel-card-title-color);
1256
+ margin-bottom: 0px;
1257
+ }
1258
+
1259
+ &__location {
1260
+ display: flex;
1261
+ justify-content: flex-start;
1262
+ align-items: flex-start;
1263
+ gap: 5px;
1264
+ font-size: 14px;
1265
+ line-height: 1.5;
1266
+ margin-bottom: 0px;
1267
+ color: var(--tide-booking-search-hotel-card-option-color);
1268
+ font-weight: var(--tide-booking-search-hotel-card-location-font-weight);
1269
+
1270
+ svg {
1271
+ width: 16px;
1272
+ height: 16px;
1273
+ margin-top: 3px;
1274
+ fill: var(--tide-booking-search-hotel-card-location-icon-color);
1275
+ }
1276
+ }
1277
+
1278
+ &__description {
1279
+ display: none;
1280
+ font-size: 16px;
1281
+ font-weight: var(--tide-booking-search-hotel-card-description-font-weight);
1282
+ line-height: 1.5;
1283
+ color: var(--tide-booking-search-hotel-card-description-color);
1284
+ margin-bottom: 0px;
1285
+ -webkit-line-clamp: 3;
1286
+ -webkit-box-orient: vertical;
1287
+ overflow: hidden;
1288
+ }
1289
+
1290
+ &__options {
1291
+ display: flex;
1292
+ flex-wrap: wrap;
1293
+ gap: 20px;
1294
+ margin-top: 10px;
1295
+ }
1296
+
1297
+ &__option {
1298
+ display: flex;
1299
+ align-items: center;
1300
+ flex-flow: nowrap;
1301
+ gap: 5px;
1302
+ font-weight: var(--tide-booking-search-hotel-card-option-font-weight);
1303
+ color: var(--tide-booking-search-hotel-card-option-color);
1304
+ font-size: 14px;
1305
+
1306
+ svg {
1307
+ width: 16px;
1308
+ height: 16px;
1309
+ fill: var(--tide-booking-search-hotel-card-option-icon-color);
1310
+ }
1311
+ }
1312
+
1313
+ &__footer {
1314
+ display: flex;
1315
+ justify-content: space-between;
1316
+ align-items: center;
1317
+ gap: 1rem;
1318
+ }
1319
+
1320
+ &__allotment {
1321
+ display: flex;
1322
+ justify-content: space-between;
1323
+ flex-direction: column;
1324
+ gap: 30px;
1325
+ background: var(--tide-booking-search-hotel-card-allotments-background);
1326
+ padding: 20px;
1327
+ border-radius: var(--tide-booking-search-hotel-card-allotments-border-radius);
1328
+ border: var(--tide-booking-search-hotel-card-allotments-border);
1329
+ box-shadow: var(--tide-booking-search-hotel-card-allotments-box-shadow);
1330
+
1331
+ @include mixins.media-sm {
1332
+ flex-direction: row;
1333
+ gap: 20px;
1334
+ }
1335
+
1336
+ &__container {
1337
+ display: grid;
1338
+ grid-template-rows: repeat(1, 1fr);
1339
+ gap: 15px;
1340
+ width: 100%;
1341
+
1342
+ @include mixins.media-xs {
1343
+ grid-template-columns: 1fr 0.8fr;
1344
+ }
1345
+ }
1346
+
1347
+ &__header {
1348
+ display: flex;
1349
+ flex-direction: column;
1350
+
1351
+ gap: 15px;
1352
+
1353
+ @include mixins.media-sm {
1354
+ justify-content: space-between;
1355
+ }
1356
+ }
1357
+
1358
+ &__img {
1359
+ width: 100%;
1360
+ height: 100%;
1361
+ object-fit: cover;
1362
+ }
1363
+
1364
+ &__img-wrapper {
1365
+ border-radius: 16px 16px 0 0;
1366
+ position: relative;
1367
+ width: 100%;
1368
+ height: 200px;
1369
+ overflow: hidden;
1370
+ background-color: #f5f5f5;
1371
+
1372
+ @include mixins.media-md {
1373
+ width: 40%;
1374
+ height: auto;
1375
+ border-radius: 16px 0 0 16px;
1376
+ }
1377
+
1378
+ @include mixins.media-lg {
1379
+ width: 100%;
1380
+ height: 200px;
1381
+ border-radius: 16px 16px 0 0;
1382
+ }
1383
+
1384
+ @include mixins.media-xl {
1385
+ width: 40%;
1386
+ height: auto;
1387
+ border-radius: 16px 0 0 16px;
1388
+ }
1389
+ }
1390
+
1391
+ &__title {
1392
+ font-weight: var(--tide-booking-search-hotel-card-allotments-title-font-weight);
1393
+ color: var(--tide-booking-search-hotel-card-allotments-title-color);
1394
+ margin: 0;
1395
+ display: flex;
1396
+ align-items: center;
1397
+ justify-content: space-between;
1398
+ gap: 5px;
1399
+ width: 100%;
1400
+
1401
+ @include mixins.media-sm {
1402
+ justify-content: flex-start;
1403
+ }
1404
+
1405
+ &__wrapper {
1406
+ display: flex;
1407
+ align-items: flex-start;
1408
+ flex-direction: column;
1409
+ gap: 10px;
1410
+ width: 100%;
1411
+
1412
+ @include mixins.media-sm {
1413
+ justify-content: space-between;
1414
+ }
1415
+ }
1416
+ }
1417
+
1418
+ &__badge {
1419
+ border: var(--tide-booking-search-hotel-card-allotments-badge-border);
1420
+ background: var(--tide-booking-search-hotel-card-allotments-badge-background);
1421
+ color: var(--tide-booking-search-hotel-card-allotments-badge-color);
1422
+ font-weight: var(--tide-booking-search-hotel-card-allotments-badge-font-weight);
1423
+ padding: 5px 10px;
1424
+ border-radius: var(--tide-booking-search-hotel-card-allotments-badge-border-radius);
1425
+ font-size: 12px;
1426
+ // display: flex;
1427
+ // align-items: center;
1428
+ // gap: 5px;
1429
+ white-space: nowrap;
1430
+ vertical-align: middle;
1431
+ line-height: 1.5;
1432
+
1433
+ svg {
1434
+ vertical-align: sub;
1435
+ margin-right: 3px;
1436
+ }
1437
+
1438
+ &--secondary {
1439
+ border: var(--tide-booking-search-hotel-card-allotments-badge--secondary-border);
1440
+ background: var(--tide-booking-search-hotel-card-allotments-badge--secondary-background);
1441
+ color: var(--tide-booking-search-hotel-card-allotments-badge--secondary-color);
1442
+ }
1443
+ }
1444
+
1445
+ &__info {
1446
+ display: flex;
1447
+ align-items: flex-end;
1448
+ gap: 10px;
1449
+ }
1450
+
1451
+ &__persons {
1452
+ margin: 0;
1453
+ display: flex;
1454
+ align-items: flex-end;
1455
+ gap: 5px;
1456
+ }
1457
+
1458
+ &__person {
1459
+ display: flex;
1460
+ align-items: flex-end;
1461
+ gap: 3px;
1462
+ font-weight: var(--tide-booking-search-hotel-card-allotments-persons-font-weight);
1463
+ color: var(--tide-booking-search-hotel-card-allotments-persons-color);
1464
+
1465
+ span {
1466
+ color: var(--tide-booking-search-hotel-card-allotments-persons-number-color);
1467
+ }
1468
+ }
1469
+
1470
+ &__wrapper {
1471
+ display: flex;
1472
+ flex-direction: column;
1473
+ gap: 15px;
1474
+ }
1475
+
1476
+ &__date {
1477
+ font-weight: var(--tide-booking-search-hotel-card-allotments-date-font-weight);
1478
+ color: var(--tide-booking-search-hotel-card-allotments-date-color);
1479
+ margin: 0;
1480
+ display: flex;
1481
+ align-items: center;
1482
+ gap: 5px;
1483
+ line-height: 1.5;
1484
+ }
1485
+
1486
+ &__footer {
1487
+ display: flex;
1488
+ flex-direction: column;
1489
+ justify-content: space-between;
1490
+ gap: 20px;
1491
+
1492
+ @include mixins.media-xs {
1493
+ flex-direction: row;
1494
+ }
1495
+
1496
+ @include mixins.media-sm {
1497
+ align-items: flex-end;
1498
+ flex-direction: column;
1499
+ }
1500
+
1501
+ @include mixins.media-lg {
1502
+ min-width: 288px;
1503
+ }
1504
+
1505
+ .cta {
1506
+ width: auto !important;
1507
+ }
1508
+ }
1509
+
1510
+ &__price {
1511
+ font-size: 20px;
1512
+ font-weight: var(--tide-booking-search-hotel-card-allotments-price-font-weight);
1513
+ color: var(--tide-booking-search-hotel-card-allotments-price-color);
1514
+ margin: 0;
1515
+
1516
+ &__wrapper {
1517
+ display: flex;
1518
+ flex-direction: column;
1519
+ align-items: flex-end;
1520
+ gap: 5px;
1521
+ min-width: 200px;
1522
+
1523
+ @include mixins.media-xs {
1524
+ align-items: flex-start;
1525
+ }
1526
+
1527
+ @include mixins.media-sm {
1528
+ align-items: flex-end;
1529
+ }
1530
+ }
1531
+
1532
+ &__info {
1533
+ text-align: right;
1534
+ line-height: 1.5;
1535
+
1536
+ @include mixins.media-xs {
1537
+ text-align: left;
1538
+ }
1539
+
1540
+ @include mixins.media-sm {
1541
+ text-align: right;
1542
+ }
1543
+ }
1544
+ }
1545
+ }
1546
+ }
1547
+ }
1548
+
1549
+ &__flight-card {
1550
+ padding: 0 8px 8px 8px;
1551
+ border-radius: 20px;
1552
+ background: white;
1553
+ border: 1px solid blue;
1554
+
1555
+ @include mixins.media-sm {
1556
+ padding: 0.75rem 2rem;
1557
+ }
1558
+
1559
+ @include mixins.media-lg {
1560
+ width: 100%;
1561
+ }
1562
+
1563
+ &-content {
1564
+ position: relative;
1565
+ display: grid;
1566
+ grid-template-columns: repeat(3, 1fr);
1567
+ gap: 1rem;
1568
+
1569
+ @include mixins.media-sm {
1570
+ /* grid-template-columns: repeat(3, 1fr); */
1571
+ grid-template-columns: repeat(5, 1fr);
1572
+ gap: 30px;
1573
+ }
1574
+
1575
+ &-radio {
1576
+ position: absolute;
1577
+ top: 50%;
1578
+ left: 15px;
1579
+
1580
+ &::before {
1581
+ content: '';
1582
+ position: absolute;
1583
+ top: 50%;
1584
+ left: -3rem; // Adjust this value to position the line correctly
1585
+ width: calc(100% + 0.5rem); // Adjust this value to extend the line to the left edge
1586
+ height: 1px; // Adjust the thickness of the line
1587
+ background-color: blue; // Line color
1588
+ transform: translateY(-50%);
1589
+ }
1590
+ }
1591
+
1592
+ &-top {
1593
+ border-bottom: 1px solid blue;
1594
+ padding: 1rem 0;
1595
+ }
1596
+
1597
+ &-bottom {
1598
+ margin-bottom: 0.25rem;
1599
+ margin-top: 1.5rem;
1600
+ }
1601
+
1602
+ &-icon {
1603
+ fill: red;
1604
+
1605
+ &--flipped {
1606
+ transform: rotate(180deg);
1607
+ }
1608
+ }
1609
+
1610
+ &-start {
1611
+ grid-column: span 2;
1612
+ display: flex;
1613
+ flex-direction: column;
1614
+ align-items: flex-end;
1615
+
1616
+ &-time {
1617
+ display: flex;
1618
+ align-items: center;
1619
+ gap: 1rem;
1620
+
1621
+ h5 {
1622
+ font-size: 18px;
1623
+ font-weight: 400;
1624
+ color: gray;
1625
+ margin: 0;
1626
+ }
1627
+ }
1628
+
1629
+ &-destination {
1630
+ color: black;
1631
+ font-size: 14px;
1632
+ margin-top: 0.5rem;
1633
+ margin-bottom: 0;
1634
+ text-align: end;
1635
+ }
1636
+
1637
+ &-date {
1638
+ font-size: 15px;
1639
+ color: gray;
1640
+ margin-top: 0;
1641
+ text-align: end;
1642
+ }
1643
+ }
1644
+
1645
+ &-stops {
1646
+ grid-column: span 1;
1647
+
1648
+ display: flex;
1649
+ flex-direction: column;
1650
+ align-items: center;
1651
+ justify-content: center;
1652
+ gap: 4px;
1653
+
1654
+ max-width: 5.5rem;
1655
+
1656
+ &-info {
1657
+ display: flex;
1658
+ justify-content: center;
1659
+ align-items: center;
1660
+ gap: 8px;
1661
+
1662
+ &-text {
1663
+ font-size: 14px;
1664
+ color: gray;
1665
+ margin: 0;
1666
+ }
1667
+
1668
+ &-hour {
1669
+ font-size: 14px;
1670
+ color: gray;
1671
+ margin-top: 0;
1672
+ margin-bottom: 16px;
1673
+ }
1674
+ }
1675
+ }
1676
+
1677
+ &-end {
1678
+ grid-column: span 2;
1679
+
1680
+ display: flex;
1681
+ flex-direction: column;
1682
+ align-items: flex-start;
1683
+
1684
+ &-time {
1685
+ font-size: 18px;
1686
+ font-weight: 400;
1687
+
1688
+ color: black;
1689
+
1690
+ margin: 0;
1691
+ }
1692
+
1693
+ &-destination {
1694
+ color: black;
1695
+ font-size: 14px;
1696
+
1697
+ margin-top: 8px;
1698
+ margin-bottom: 0;
1699
+
1700
+ text-align: left;
1701
+ }
1702
+
1703
+ &-date {
1704
+ font-size: 14px;
1705
+ color: gray;
1706
+
1707
+ margin-top: 0;
1708
+
1709
+ text-align: left;
1710
+
1711
+ &--warning {
1712
+ color: pink;
1713
+ }
1714
+
1715
+ &-wrapper {
1716
+ display: flex;
1717
+ align-items: center;
1718
+ gap: 8px;
1719
+ }
1720
+
1721
+ &-icon {
1722
+ margin-top: 5px;
1723
+ }
1724
+ }
1725
+ }
1726
+ }
1727
+ }
1728
+
1729
+ &__banner {
1730
+ display: flex;
1731
+ justify-content: center;
1732
+ margin-bottom: 60px;
1733
+ margin-top: 30px;
1734
+ }
1735
+
1736
+ &__results__cards--extended {
1737
+ @include mixins.media-sm {
1738
+ grid-template-columns: repeat(1, 1fr);
1739
+ }
1740
+
1741
+ @include mixins.media-lg {
1742
+ grid-template-columns: repeat(1, 1fr);
1743
+ }
1744
+
1745
+ .search__result-card {
1746
+ &__wrapper {
1747
+ @include mixins.media-sm {
1748
+ flex-direction: row;
1749
+ justify-content: flex-start;
1750
+ }
1751
+
1752
+ @include mixins.media-lg {
1753
+ flex-direction: row;
1754
+ }
1755
+ }
1756
+
1757
+ &__top {
1758
+ @include mixins.media-sm {
1759
+ flex-direction: row;
1760
+ }
1761
+ }
1762
+
1763
+ &__img-wrapper {
1764
+ @include mixins.media-sm {
1765
+ width: 40%;
1766
+ min-height: 100%;
1767
+ overflow: hidden;
1768
+ }
1769
+
1770
+ @include mixins.media-lg {
1771
+ width: 40%;
1772
+ min-height: 100%;
1773
+ }
1774
+ }
1775
+
1776
+ &__price {
1777
+ &__wrapper {
1778
+ @include mixins.media-sm {
1779
+ position: absolute;
1780
+ bottom: auto;
1781
+ right: auto;
1782
+ top: 0px;
1783
+ left: 50%;
1784
+ transform: translateX(-50%);
1785
+ border-radius: 0 0 5px 5px;
1786
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
1787
+ }
1788
+ }
1789
+ }
1790
+
1791
+ &__content {
1792
+ @include mixins.media-sm {
1793
+ width: 60%;
1794
+ padding: 20px;
1795
+ height: auto;
1796
+ }
1797
+
1798
+ @include mixins.media-lg {
1799
+ width: 60%;
1800
+ padding: 20px;
1801
+ }
1802
+ }
1803
+
1804
+ &__header {
1805
+ &__wrapper {
1806
+ @include mixins.media-sm {
1807
+ display: flex;
1808
+ flex-direction: row-reverse;
1809
+ align-items: center;
1810
+ gap: 10px;
1811
+ }
1812
+
1813
+ @include mixins.media-lg {
1814
+ flex-direction: row-reverse;
1815
+ align-items: center;
1816
+ }
1817
+
1818
+ .rating {
1819
+ margin-top: 2px;
1820
+ }
1821
+ }
1822
+ }
1823
+
1824
+ &__description {
1825
+ @include mixins.media-sm {
1826
+ display: -webkit-box;
1827
+ }
1828
+ }
1829
+
1830
+ &__footer {
1831
+ @include mixins.media-sm {
1832
+ justify-content: flex-end;
1833
+ align-items: flex-end;
1834
+
1835
+ .cta {
1836
+ width: auto;
1837
+ min-width: 150px;
1838
+ }
1839
+ }
1840
+ }
1841
+
1842
+ &__allotment {
1843
+ padding: 0px;
1844
+
1845
+ @include mixins.media-sm {
1846
+ flex-direction: column;
1847
+ }
1848
+
1849
+ @include mixins.media-md {
1850
+ flex-direction: row;
1851
+ }
1852
+
1853
+ @include mixins.media-lg {
1854
+ flex-direction: column;
1855
+ }
1856
+
1857
+ @include mixins.media-xl {
1858
+ flex-direction: row;
1859
+ }
1860
+
1861
+ &__title__wrapper {
1862
+ padding: 0px 20px;
1863
+
1864
+ @include mixins.media-md {
1865
+ padding: 20px 0px;
1866
+ }
1867
+
1868
+ @include mixins.media-lg {
1869
+ padding: 0px 20px;
1870
+ }
1871
+
1872
+ @include mixins.media-xl {
1873
+ padding: 20px 0px;
1874
+ }
1875
+ }
1876
+
1877
+ &__footer {
1878
+ padding: 0px 20px;
1879
+ padding-bottom: 20px;
1880
+
1881
+ @include mixins.media-sm {
1882
+ flex-direction: row;
1883
+ align-items: flex-start;
1884
+ }
1885
+
1886
+ @include mixins.media-md {
1887
+ flex-direction: column;
1888
+ align-items: flex-end;
1889
+ padding: 20px 0px;
1890
+ padding-right: 20px;
1891
+ }
1892
+
1893
+ @include mixins.media-lg {
1894
+ flex-direction: row;
1895
+ align-items: flex-start;
1896
+ padding: 0px 20px;
1897
+ padding-bottom: 20px;
1898
+ }
1899
+
1900
+ @include mixins.media-xl {
1901
+ flex-direction: column;
1902
+ align-items: flex-end;
1903
+ padding: 20px 0px;
1904
+ padding-right: 20px;
1905
+ }
1906
+ }
1907
+
1908
+ &__price {
1909
+ &__wrapper {
1910
+ @include mixins.media-sm {
1911
+ align-items: flex-start;
1912
+ }
1913
+
1914
+ @include mixins.media-md {
1915
+ align-items: flex-end;
1916
+ }
1917
+
1918
+ @include mixins.media-lg {
1919
+ align-items: flex-start;
1920
+ }
1921
+
1922
+ @include mixins.media-xl {
1923
+ align-items: flex-end;
1924
+ }
1925
+ }
1926
+ }
1927
+ }
1928
+ }
1929
+ }
1930
+
1931
+ &__results__cards--list {
1932
+ @include mixins.media-sm {
1933
+ grid-template-columns: repeat(1, 1fr);
1934
+ }
1935
+
1936
+ @include mixins.media-lg {
1937
+ grid-template-columns: repeat(1, 1fr);
1938
+ }
1939
+
1940
+ .search__result-card {
1941
+ &__wrapper {
1942
+ @include mixins.media-sm {
1943
+ flex-direction: row;
1944
+ justify-content: flex-start;
1945
+ }
1946
+
1947
+ @include mixins.media-lg {
1948
+ flex-direction: row;
1949
+ }
1950
+ }
1951
+
1952
+ &__top {
1953
+ @include mixins.media-sm {
1954
+ flex-direction: row;
1955
+ }
1956
+ }
1957
+
1958
+ &__img-wrapper {
1959
+ @include mixins.media-sm {
1960
+ min-width: 175px;
1961
+ width: 175px;
1962
+ height: 175px;
1963
+ min-height: 100%;
1964
+ overflow: hidden;
1965
+ }
1966
+
1967
+ @include mixins.media-lg {
1968
+ min-width: 175px;
1969
+ height: 175px;
1970
+ min-height: 100%;
1971
+ }
1972
+ }
1973
+
1974
+ &__price {
1975
+ &__wrapper {
1976
+ @include mixins.media-sm {
1977
+ position: absolute;
1978
+ bottom: auto;
1979
+ right: auto;
1980
+ top: 0px;
1981
+ left: 50%;
1982
+ transform: translateX(-50%);
1983
+ min-width: 96px;
1984
+ border-radius: 0 0 5px 5px;
1985
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
1986
+ }
1987
+ }
1988
+ }
1989
+
1990
+ &__content {
1991
+ @include mixins.media-sm {
1992
+ flex-direction: row;
1993
+ width: 100%;
1994
+ padding: 15px 20px;
1995
+ height: auto;
1996
+ }
1997
+
1998
+ @include mixins.media-lg {
1999
+ width: 100%;
2000
+ padding: 15px 20px;
2001
+ }
2002
+ }
2003
+
2004
+ &__header {
2005
+ &__wrapper {
2006
+ @include mixins.media-sm {
2007
+ display: flex;
2008
+ flex-direction: row-reverse;
2009
+ align-items: center;
2010
+ gap: 10px;
2011
+ }
2012
+
2013
+ @include mixins.media-lg {
2014
+ flex-direction: row-reverse;
2015
+ align-items: center;
2016
+ }
2017
+
2018
+ .rating {
2019
+ margin-top: 2px;
2020
+ }
2021
+ }
2022
+ }
2023
+
2024
+ &__description {
2025
+ display: none;
2026
+ }
2027
+
2028
+ &__footer {
2029
+ @include mixins.media-sm {
2030
+ justify-content: flex-end;
2031
+ align-items: flex-end;
2032
+
2033
+ .cta {
2034
+ width: auto;
2035
+ min-width: 150px;
2036
+ }
2037
+ }
2038
+ }
2039
+
2040
+ &__allotment {
2041
+ &__img-wrapper {
2042
+ display: none;
2043
+ }
2044
+
2045
+ &__description {
2046
+ display: none;
2047
+ }
2048
+ }
2049
+ }
2050
+ }
2051
+ }
2052
+
2053
+ .star-rating-filter {
2054
+ display: flex;
2055
+ justify-content: flex-end;
2056
+ flex-direction: row-reverse;
2057
+ gap: 15px;
2058
+ font-size: 24px;
2059
+ cursor: pointer;
2060
+
2061
+ .star {
2062
+ color: var(--tide-booking-star-rating-color);
2063
+ /* unfilled */
2064
+ transition: color 0.2s;
2065
+ }
2066
+
2067
+ .star.filled {
2068
+ color: var(--tide-booking-star-rating-color--filled);
2069
+ /* filled gold */
2070
+ }
2071
+
2072
+ .star:hover,
2073
+ .star:hover ~ .star {
2074
+ color: var(--tide-booking-star-rating-color--hover);
2075
+ }
2076
+ }
2077
+
2078
+ .search__filter-toggle-label {
2079
+ vertical-align: middle;
2080
+ font-size: 0.95rem;
2081
+ }
2082
+
2083
+ .mobile-filters-button {
2084
+ display: flex;
2085
+ justify-content: center;
2086
+ align-items: center;
2087
+ flex: 1;
2088
+ max-width: 7rem;
2089
+ margin-right: 0.5rem;
2090
+ height: 3.5rem;
2091
+ color: grey;
2092
+ border: 1px solid green;
2093
+ border-radius: 3px;
2094
+ font-size: 16px;
2095
+ cursor: pointer;
2096
+
2097
+ @include mixins.media-lg {
2098
+ display: none;
2099
+ }
2100
+
2101
+ &__icon {
2102
+ fill: red;
2103
+ margin-right: 0.5rem;
2104
+ }
2105
+ }
2106
+
2107
+ .flight-path {
2108
+ display: flex;
2109
+ align-items: center;
2110
+ justify-content: center;
2111
+ width: 100%;
2112
+
2113
+ @media (min-width: 400px) {
2114
+ width: 6rem;
2115
+ }
2116
+
2117
+ &__point {
2118
+ width: 7px;
2119
+ height: 7px;
2120
+
2121
+ border-radius: 50%;
2122
+ border: 1px solid red;
2123
+ background: wh;
2124
+
2125
+ &--start,
2126
+ &--end {
2127
+ background-color: white;
2128
+ min-width: 7px;
2129
+ }
2130
+ }
2131
+
2132
+ &__line {
2133
+ display: flex;
2134
+ align-items: center;
2135
+ flex-grow: 1;
2136
+ position: relative;
2137
+ height: 1px;
2138
+ background: red;
2139
+
2140
+ gap: 1.3rem;
2141
+
2142
+ &::before,
2143
+ &::after {
2144
+ content: '';
2145
+ flex-grow: 1;
2146
+ height: 1px;
2147
+ background: red;
2148
+ }
2149
+ }
2150
+
2151
+ &__stop {
2152
+ width: 9px;
2153
+ height: 9px;
2154
+
2155
+ border-radius: 50%;
2156
+ background: red;
2157
+ border: 2px solid white;
2158
+
2159
+ position: relative;
2160
+ }
2161
+ }
2162
+
2163
+ .has-overlay {
2164
+ overflow: hidden;
2165
+ }
2166
+
2167
+ .spinner {
2168
+ &__container {
2169
+ margin: 1rem auto;
2170
+ display: flex;
2171
+ flex-direction: column;
2172
+ align-items: center;
2173
+ gap: 1rem;
2174
+ }
2175
+
2176
+ &__icon {
2177
+ border: 2px solid rgb(244, 249, 250, 0.2);
2178
+ border-top: 2px solid #3aafa9;
2179
+ border-radius: 50%;
2180
+ width: 24px;
2181
+ height: 24px;
2182
+ animation: spin 0.6s linear infinite;
2183
+ display: inline-block;
2184
+ vertical-align: middle;
2185
+ margin-right: 6px;
2186
+ }
2187
+
2188
+ &__label {
2189
+ text-align: center;
2190
+ }
2191
+ }
2192
+
2193
+ @keyframes spin {
2194
+ to {
2195
+ transform: rotate(360deg);
2196
+ }
2197
+ }