@prijsvrijtechsupport/ui 0.0.37 → 0.0.38

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 (11) hide show
  1. package/dist/dist/index.css +1391 -1392
  2. package/dist/dist/index.css.map +1 -1
  3. package/dist/globals.css +1 -556
  4. package/dist/index.cjs +20 -23
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.js +20 -23
  7. package/dist/index.js.map +1 -1
  8. package/dist/src/components/toggle/index.d.ts +1 -1
  9. package/dist/styles/tailwind.css +1 -0
  10. package/dist/styles/variables.css +554 -0
  11. package/package.json +3 -3
package/dist/dist/index.css CHANGED
@@ -318,1753 +318,1751 @@
318
318
  "Segoe UI Symbol", "Noto Color Emoji";
319
319
  }
320
320
 
321
- /* Change this path to be relative to where this CSS file ends up after packaging this library. */
322
- @source "../../dist";
321
+ /* Brand primitive tokens */
322
+ :root {
323
+ --prijsvrij-primary: #0092F2;
324
+ --prijsvrij-primary-dark-50: #004979;
325
+ --prijsvrij-primary-dark-25: #006DB5;
326
+ --prijsvrij-primary-light-25: #40ADF5;
327
+ --prijsvrij-primary-light-50: #80C8F8;
328
+ --prijsvrij-primary-light-75: #EFF8FE;
323
329
 
324
- .top-menu-wrapper {
325
- background-color: var(--topMenu-background-color);
326
- box-shadow: inset 0 32px var(--topMenu-boxShadow-color);
327
- }
330
+ --prijsvrij-secondary: #003593;
331
+ --prijsvrij-secondary-dark-50: #1A499E;
332
+ --prijsvrij-secondary-dark-25: #335DA9;
333
+ --prijsvrij-secondary-light-25: #6686BE;
334
+ --prijsvrij-secondary-light-50: #B2C2DF;
335
+ --prijsvrij-secondary-light-75: #E5EBF4;
328
336
 
329
- .topMenu {
330
- background-color: var(--topMenu-background-color);
331
- box-shadow: inset 0 32px var(--topMenu-boxShadow-color);
332
- height: var(--topMenu-height);
333
- }
337
+ --prijsvrij-alternative: #FDE92F;
338
+ --prijsvrij-alternative-dark-50: #7F7518;
339
+ --prijsvrij-alternative-dark-25: #BEAF23;
340
+ --prijsvrij-alternative-light-25: #FEEF63;
341
+ --prijsvrij-alternative-light-50: #FEF497;
342
+ --prijsvrij-alternative-light-75: #FFFACB;
334
343
 
335
- .btn-primary-boxShadow {
336
- box-shadow: var(--primary-btn-box-shadow);
337
- }
338
- .btn-primary-boxShadow-active {
339
- box-shadow: var(--primary-btn-box-shadow-active);
340
- }
341
- .btn-primary-boxShadow-hover {
342
- box-shadow: var(--primary-btn-box-shadow-hover);
343
- }
344
+ --prijsvrij-alternative2: #D90000;
345
+ --prijsvrij-alternative2-dark-50: #730000;
346
+ --prijsvrij-alternative2-dark-25: #A60000;
347
+ --prijsvrij-alternative2-light-25: #E13333;
348
+ --prijsvrij-alternative2-light-50: #EC8080;
349
+ --prijsvrij-alternative2-light-75: #F7CCCC;
344
350
 
345
- /* Active state fallbacks */
346
- button.btn-primary-boxShadow:active {
347
- box-shadow: var(--primary-btn-box-shadow-active);
348
- }
349
- button.btn-primary-boxShadow:hover {
350
- box-shadow: var(--primary-btn-box-shadow-hover);
351
- }
351
+ --prijsvrij-alternative3: #339900;
352
+ --prijsvrij-alternative3-dark-50: #1A4D00;
353
+ --prijsvrij-alternative3-dark-25: #267300;
354
+ --prijsvrij-alternative3-light-25: #74B555;
355
+ --prijsvrij-alternative3-light-50: #99CC80;
356
+ --prijsvrij-alternative3-light-75: #CCE5BF;
352
357
 
353
- button.btn-primary-boxShadow:hover:active {
354
- box-shadow: var(--primary-btn-box-shadow-active);
355
- }
358
+ --prijsvrij-danger-red: #D90000;
359
+ --prijsvrij-danger-red-hover: #A60000;
360
+ --prijsvrij-danger-red-disabled: #F7CCCC;
356
361
 
357
- button.btn-secondary:active {
358
- box-shadow: var(--secondary-btn-box-shadow-active);
359
- }
362
+ --prijsvrij-dark-600: #333333;
363
+ --prijsvrij-dark-500: #1a1a1a;
364
+ --prijsvrij-dark-400: #262626;
365
+ --prijsvrij-dark-300: #666666;
366
+ --prijsvrij-dark-200: #999999;
360
367
 
361
- button.btn-secondary:hover {
362
- box-shadow: var(--secondary-btn-box-shadow-hover);
363
- }
368
+ --prijsvrij-light-600: #E0E0E0;
369
+ --prijsvrij-light-500: #707070;
370
+ --prijsvrij-light-400: #A8A8A8;
371
+ --prijsvrij-light-300: #E8E8E8;
372
+ --prijsvrij-light-200: #EFEFEF;
364
373
 
365
- button.btn-secondary:hover:active {
366
- box-shadow: var(--secondary-btn-box-shadow-active);
367
- }
374
+ --btn-prijsvrij-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .11), 0 1px 5px rgba(0, 0, 0, .12);
368
375
 
369
- .btn-secondary-boxShadow {
370
- box-shadow: var(--secondary-btn-box-shadow);
371
- }
376
+ --dreizen-primary: #0077BF;
377
+ --dreizen-primary-100: #003C60;
378
+ --dreizen-primary-200: #00598F;
379
+ --dreizen-primary-300: #80BBDF;
372
380
 
373
- .btn-secondary-boxShadow-active {
374
- box-shadow: var(--secondary-btn-box-shadow-active);
375
- }
376
- .btn-secondary-boxShadow-hover {
377
- box-shadow: var(--secondary-btn-box-shadow-hover);
378
- }
381
+ --dreizen-secondary: #FF7801;
382
+ --dreizen-secondary-100: #803C00;
383
+ --dreizen-secondary-200: #BF5A01;
384
+ --dreizen-secondary-300: #FF9A40;
385
+ --dreizen-secondary-400: #FFEEDF;
379
386
 
380
- /* Button primary variant with CSS custom properties */
381
- .btn-glow:hover {
382
- background-color: var(--primary-btn-hover-color);
383
- }
384
- .btn-primary {
385
- background-color: var(--primary-btn-color);
386
- border-color: transparent;
387
- color: white;
388
- transition: all .2s ease;
389
- }
387
+ --dreizen-alternative: #52C75D;
388
+ --dreizen-alternative-100: #29642E;
389
+ --dreizen-alternative-200: #3D9546;
390
+ --dreizen-alternative-300: #72D17B;
391
+ --dreizen-alternative-400: #93DC9A;
390
392
 
391
- .btn-primary:disabled {
392
- background-color: var(--primary-btn-color);
393
- opacity: 0.2;
394
- color: #1f2937;
395
- }
393
+ --dreizen-danger-red: #cc3433;
394
+ --dreizen-danger-red-hover: #992726;
395
+ --dreizen-danger-red-disabled: #e68080;
396
396
 
397
- .btn-primary:disabled:hover {
398
- background-color: var(--primary-btn-color);
399
- opacity: 0.2;
400
- }
397
+ --dreizen-dark-600: #333333;
398
+ --dreizen-dark-500: #1a1a1a;
399
+ --dreizen-dark-400: #262626;
400
+ --dreizen-dark-300: #666666;
401
+ --dreizen-dark-200: #999999;
401
402
 
402
- /* Button secondary variant with CSS custom properties */
403
- .btn-secondary {
404
- background-color: var(--secondary-btn-color);
405
- border-color: transparent;
406
- color: white;
407
- transition: all .2s ease;
408
- }
403
+ --dreizen-light-600: #E8E8E8;
404
+ --dreizen-light-500: #747474;
405
+ --dreizen-light-400: #AEAEAE;
406
+ --dreizen-light-300: #F4F4F4;
407
+ --dreizen-light-200: #EEEEEE;
409
408
 
410
- .btn-secondary:disabled {
411
- background-color: var(--secondary-btn-color);
412
- opacity: 0.2;
413
- color: #1f2937;
409
+ --btn-dreizen-shadow: 0;
410
+ --usp-icon-color: #52c65c;
414
411
  }
415
412
 
416
- .btn-secondary:disabled:hover {
417
- background-color: var(--secondary-btn-color);
418
- opacity: 0.2;
419
- }
413
+ :root[data-brand="prijsvrij"],
414
+ [data-brand="prijsvrij"] {
415
+ --color-primary: var(--prijsvrij-primary);
416
+ --color-primary-dark-50: var(--prijsvrij-primary-dark-50);
417
+ --color-primary-dark-25: var(--prijsvrij-primary-dark-25);
418
+ --color-primary-light-25: var(--prijsvrij-primary-light-25);
419
+ --color-primary-light-50: var(--prijsvrij-primary-light-50);
420
+ --color-primary-light-75: var(--prijsvrij-primary-light-75);
421
+
422
+ --color-secondary: var(--prijsvrij-secondary);
423
+ --color-secondary-dark-50: var(--prijsvrij-secondary-dark-50);
424
+ --color-secondary-dark-25: var(--prijsvrij-secondary-dark-25);
425
+ --color-secondary-light-25: var(--prijsvrij-secondary-light-25);
426
+ --color-secondary-light-50: var(--prijsvrij-secondary-light-50);
427
+ --color-secondary-light-75: var(--prijsvrij-secondary-light-75);
428
+
429
+ --color-alternative: var(--prijsvrij-alternative);
430
+ --color-alternative-dark-50: var(--prijsvrij-alternative-dark-50);
431
+ --color-alternative-dark-25: var(--prijsvrij-alternative-dark-25);
432
+ --color-alternative-light-25: var(--prijsvrij-alternative-light-25);
433
+ --color-alternative-light-50: var(--prijsvrij-alternative-light-50);
434
+ --color-alternative-light-75: var(--prijsvrij-alternative-light-75);
435
+
436
+ --color-alternative2: var(--prijsvrij-alternative2);
437
+ --color-alternative2-dark-50: var(--prijsvrij-alternative2-dark-50);
438
+ --color-alternative2-dark-25: var(--prijsvrij-alternative2-dark-25);
439
+ --color-alternative2-light-25: var(--prijsvrij-alternative2-light-25);
440
+ --color-alternative2-light-50: var(--prijsvrij-alternative2-light-50);
441
+ --color-alternative2-light-75: var(--prijsvrij-alternative2-light-75);
442
+
443
+ --color-alternative3: var(--prijsvrij-alternative3);
444
+ --color-alternative3-dark-50: var(--prijsvrij-alternative3-dark-50);
445
+ --color-alternative3-dark-25: var(--prijsvrij-alternative3-dark-25);
446
+ --color-alternative3-light-25: var(--prijsvrij-alternative3-light-25);
447
+ --color-alternative3-light-50: var(--prijsvrij-alternative3-light-50);
448
+ --color-alternative3-light-75: var(--prijsvrij-alternative3-light-75);
449
+
450
+ --color-dark-600: var(--prijsvrij-dark-600);
451
+ --color-dark-500: var(--prijsvrij-dark-500);
452
+ --color-dark-400: var(--prijsvrij-dark-400);
453
+ --color-dark-300: var(--prijsvrij-dark-300);
454
+ --color-dark-200: var(--prijsvrij-dark-200);
455
+
456
+ --color-light-600: var(--prijsvrij-light-600);
457
+ --color-light-500: var(--prijsvrij-light-500);
458
+ --color-light-400: var(--prijsvrij-light-400);
459
+ --color-light-300: var(--prijsvrij-light-300);
460
+ --color-light-200: var(--prijsvrij-light-200);
461
+
462
+ --radius: var(--prijsvrij-radius);
463
+
464
+ --fontFamily-price-check: var(--font-open-sans), sans-serif;
465
+ --fontFamily-price-check-price: "Hermes Maia T4", sans-serif;
466
+ --fontFamily-blog-widget: "Hermes Maia T4", sans-serif;
467
+ --fontFamily-blog-widget-date: var(--font-open-sans), sans-serif;
420
468
 
421
- /* Button tertiary variant with CSS custom properties */
422
- .btn-alternative {
423
- background-color: var(--alternative-btn-color);
424
- border-color: transparent;
425
- color: white;
426
- transition: all .2s ease;
469
+ --fontWeight-price-text: 400;
470
+ --price-background: var(--prijsvrij-alternative);
471
+ --price-background-back: #ffbf2b;
427
472
 
428
- }
429
473
 
430
- .btn-alternative:hover {
431
- background-color: var(--alternative-btn-hover-color);
432
- }
474
+ /* Buttons */
475
+ --primary-btn-hover-color: var(--prijsvrij-alternative2-dark-25);
476
+ --primary-btn-color: var(--prijsvrij-alternative2);
477
+ --primary-btn-inactive-color: var(--prijsvrij-alternative2-light-75);
478
+ --primary-btn-box-shadow: 0 3px var(--prijsvrij-alternative2-dark-50);
479
+ --primary-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative2-dark-50);
480
+ --primary-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative2-dark-50);
433
481
 
434
- .btn-alternative:disabled {
435
- background-color: var(--alternative-btn-color);
436
- opacity: 0.2;
437
- color: #1f2937;
438
- }
482
+ --secondary-btn-hover-color: var(--prijsvrij-alternative3-dark-25);
483
+ --secondary-btn-color: var(--prijsvrij-alternative3);
484
+ --secondary-btn-inactive-color: var(--prijsvrij-alternative3-light-75);
485
+ --secondary-btn-box-shadow: 0 3px var(--prijsvrij-alternative3-dark-50);
486
+ --secondary-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative3-dark-50);
487
+ --secondary-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative3-dark-50);
439
488
 
440
- .btn-alternative:disabled:hover {
441
- background-color: var(--alternative-btn-color);
442
- opacity: 0.2;
443
- }
489
+ --alternative-btn-hover-color: var(--prijsvrij-alternative-dark-25);
490
+ --alternative-btn-color: var(--prijsvrij-alternative);
491
+ --alternative-btn-inactive-color: var(--prijsvrij-alternative-light-75);
492
+ --alternative-btn-box-shadow: 0 3px var(--prijsvrij-alternative-dark-50);
493
+ --alternative-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative-dark-50);
494
+ --alternative-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative-dark-50);
444
495
 
445
- /* Button alternative2 variant with CSS custom properties */
446
- .btn-alternative2 {
447
- background-color: var(--alternative2-btn-color);
448
- border-color: transparent;
449
- color: white;
450
- transition: all .2s ease;
451
- }
496
+ --alternative2-btn-hover-color: var(--prijsvrij-alternative2-dark-25);
497
+ --alternative2-btn-color: var(--prijsvrij-alternative2);
498
+ --alternative2-btn-inactive-color: var(--prijsvrij-alternative2-light-75);
499
+ --alternative2-btn-box-shadow: 0 3px var(--prijsvrij-alternative2-dark-50);
500
+ --alternative2-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative2-dark-50);
501
+ --alternative2-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative2-dark-50);
502
+
503
+ --alternative3-btn-hover-color: var(--prijsvrij-alternative3-dark-25);
504
+ --alternative3-btn-color: var(--prijsvrij-alternative3);
505
+ --alternative3-btn-inactive-color: var(--prijsvrij-alternative3-light-75);
506
+ --alternative3-btn-box-shadow: 0 3px var(--prijsvrij-alternative3-dark-50);
507
+ --alternative3-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative3-dark-50);
508
+ --alternative3-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative3-dark-50);
452
509
 
453
- .btn-alternative2:hover {
454
- background-color: var(--alternative2-btn-hover-color);
455
- }
510
+ --logo-url: var(--prijsvrij-logo-url);
456
511
 
457
- .btn-alternative2:disabled {
458
- background-color: var(--alternative2-btn-color);
459
- opacity: 0.2;
460
- color: #1f2937;
461
- }
512
+ --btn-shadow: var(--btn-prijsvrij-shadow);
513
+ --btn-outline-border: var(--prijsvrij-primary);
514
+ --btn-outline-color: var(--prijsvrij-primary);
462
515
 
463
- .btn-alternative2:disabled:hover {
464
- background-color: var(--alternative2-btn-color);
465
- opacity: 0.2;
466
- }
516
+ --btn-outline-hover-border-color: var(--prijsvrij-primary-dark-25);
517
+ --btn-outline-hover-color: var(--prijsvrij-primary-dark-25);
467
518
 
468
- .btn-shadow {
469
- box-shadow: var(--btn-shadow);
470
- }
519
+ --btn-text-color: var(--prijsvrij-primary);
471
520
 
472
- .btn-outline {
473
- border-color: var(--btn-outline-border);
474
- color: var(--btn-outline-color);
475
- }
521
+ --btn-text-hover-color: var(--prijsvrij-primary-dark-25);
522
+ --price-check-color: var(--prijsvrij-alternative2);
523
+ --price-check-price-color: var(--prijsvrij-alternative2);
524
+ --price-text-padding-left: 0.5rem;
476
525
 
477
- .btn-outline:hover {
478
- border-color: var(--btn-outline-hover-border-color);
479
- color: var(--btn-outline-hover-color);
480
- }
526
+ --danger-red: var(--prijsvrij-danger-red);
527
+ --danger-red-hover: var(--prijsvrij-danger-red-hover);
528
+ --danger-red-disabled: var(--prijsvrij-danger-red-disabled);
529
+ --price-text-padding-bottom: -0.5rem;
530
+ --price-price-padding-left: 1rem;
531
+ --price-price-padding-right: 0.5rem;
532
+ --price-minus-right: 10px;
533
+ --price-minus-bottom: 10px;
534
+ --price-price-margin-top: 0;
481
535
 
482
- .btn-text {
483
- color: var(--btn-text-color);
484
- }
485
- .btn-text-hover-color:hover {
486
- color: var(--btn-text-hover-color);
487
- }
536
+ --toggle-active-background-color: var(--prijsvrij-primary);
537
+ --toggle-inactive-background-color: var(--prijsvrij-primary);
538
+ --toggle-active-color: white;
539
+ --toggle-inactive-color: var(--prijsvrij-dark-600);
540
+ --toggle-font-family: var(--font-open-sans), sans-serif;
488
541
 
542
+ --filter-button-background-color: var(--prijsvrij-primary);
543
+ --filter-button-background-hover-color: #005cbb;
544
+ --fontFamily-filter-button: var(--font-open-sans), sans-serif;
489
545
 
490
- .price-check-color {
491
- color: var(--price-check-color);
492
- }
546
+ --filter-button-icon-background-color: #80c8f8;
547
+ --filter-button-icon-background-hover-color: #002c49;
493
548
 
494
- .price-check-color-price {
495
- color: var(--price-check-price-color);
496
- }
549
+ --search-box-border-color: transparent;
550
+ --search-box-icon-color: var(--prijsvrij-dark-600);
551
+ --search-box-clear-icon-background-color: #e3e3e3;
552
+ --search-box-clear-icon-background-hover-color: #a0a0a0;
553
+ --search-box-clear-icon-color: white;
497
554
 
498
- .price-check-fontFamily {
499
- font-family: var(--fontFamily-price-check);
500
- }
555
+ --search-box-result-location-color: var(--prijsvrij-primary);
556
+ --search-box-result-hover-background-color: #edf7fe;
501
557
 
502
- .price-check-fontFamily-price {
503
- font-family: var(--fontFamily-price-check-price);
504
- z-index: 0;
505
- }
558
+ --topMenu-background-color: #0083da;
559
+ --topHeaderMenu-background-color: #0083da;
560
+ --topMenu-background-color-hover: #004979;
561
+ --topMenu-boxShadow-color: transparent;
562
+ --topMenu-height: 40px;
506
563
 
507
- .price-check-font-price-text {
508
- font-weight: var(--fontWeight-price-text);
509
- z-index: 0;
510
- }
564
+ --counter-icon-color: #d90000;
511
565
 
512
- .price-background {
513
- inset: 0;
514
- position: absolute;
515
- z-index: 0;
516
- }
566
+ --usp-font-family: var(--font-open-sans), sans-serif;
567
+ --middle-navigation-font-family: var(--font-open-sans), sans-serif;
568
+ --fontFamily-blog-widget: "Hermes Maia T4";
517
569
 
518
- .price-background::before {
519
- content: '';
520
- position: absolute;
521
- inset: 0;
522
- background-color: var(--price-background);
523
- transform: matrix(1, -.06, .1, 1, 0, 0);
524
- z-index: 3;
525
- }
570
+ --menu-link-color: white;
571
+ --menu-link-hover-color: var(--prijsvrij-primary);
572
+ --menu-item-icon-color: white;
526
573
 
527
- .price-background::after {
528
- content: '';
529
- position: absolute;
530
- inset: 0;
531
- z-index: 2;
532
- background-color: var(--price-background-back);
533
- transform: matrix(1,.05,-.05,1,0,0);
534
- transform-origin: center;
535
- }
574
+ --color-footer-navigation-link: var(--prijsvrij-primary);
575
+ --color-footer-navigation-category-link: var(--prijsvrij-secondary);
536
576
 
537
- .price-check-text-padding {
538
- padding-left: var(--price-text-padding-left);
539
- margin-bottom: var(--price-text-padding-bottom);
540
- }
577
+ --searchBlock-background-color: var(--prijsvrij-alternative);
578
+ --searchBlock-text-color: var(--prijsvrij-secondary);
579
+ --searchBlock-text-size: 24px;
580
+ --searchBlock-text-weight: 400;
581
+ --searchBlock-font-family: "Hermes Maia T4", sans-serif;
582
+ --searchBlock-border-radius: 8px;
541
583
 
542
- .price-check-price-padding {
543
- padding-left: var(--price-price-padding-left);
544
- padding-right: var(--price-price-padding-right);
545
- }
584
+ --searchBlockButtonLabel-text-size: clamp(10px, 2.5vw, 12px);
585
+ --searchBlockButtonLabel-text-weight: 600;
586
+ --searchBlockButtonLabel-font-family: var(--font-open-sans), sans-serif;
587
+ --searchBlockButtonLabel-color: var(--prijsvrij-dark-300);
588
+ --searchBlockButtonIcon-color: var(--prijsvrij-secondary);
546
589
 
547
- .price-check-price-margin-top {
548
- margin-top: var(--price-price-margin-top)
549
- }
590
+ --searchBlockButtonRadius: 4px;
591
+ --searchBlockButtonHeight: 50px;
550
592
 
551
- .price-check-minus {
552
- position: absolute;
553
- right: var(--price-minus-right);
554
- bottom: var(--price-minus-bottom);
555
- }
593
+ --searchBlockButtonSelectedValue-font-family: var(--font-open-sans), sans-serif;
594
+ --searchBlockButtonSelectedValue-color: var(--prijsvrij-dark-400);
595
+ --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
596
+ --searchBlockButtonSelectedValue-text-weight: 400;
597
+ --searchBlockButtonSelectedValue-margin-top: -4px;
556
598
 
557
- /* Disabled state with grayscale filter */
558
- .price-check-disabled {
559
- filter: grayscale(100%);
560
- opacity: 0.7;
561
- }
599
+ --searchBlockButtonDownIcon-color: var(--prijsvrij-primary-light-25);
600
+ --searchBlockButtonDownIcon-size: 20px;
562
601
 
563
- .toggle {
564
- background-color: var(--toggle-inactive-background-color);
565
- container-type: inline-size;
566
- font-family: var(--toggle-font-family);
567
- }
602
+ --category-filter-font-family: var(--font-open-sans), sans-serif;
568
603
 
569
- .toggle-inactive:not(.disabled):hover {
570
- box-shadow: 0 2px #333, 0 4px 17px -10px #333;
571
- transform: translateY(-2px);
572
- transition: opacity .2s ease, transform .1s ease, background .1s ease, box-shadow .1s ease;
573
- }
604
+ --collection-title-font-family: "Hermes Maia T4", sans-serif;
605
+ --collection-description-font-family: var(--font-open-sans), sans-serif;
574
606
 
575
- .toggle-inactive:not(.disabled):active {
576
- transform: translateY(0px);
577
- box-shadow: 0 0px #333, 0 0px 17px -10px #333;
578
- transition: opacity .2s ease, transform .1s ease, background .1s ease, box-shadow .1s ease;
579
- }
607
+ --usp-icon-color: var(--prijsvrij-alternative3);
608
+ --review-color: var(--prijsvrij-alternative3);
609
+ --review-number-background-color: inherit;
610
+ --review-number-color: var(--prijsvrij-alternative3);
611
+ --review-shadow: 0 4px 80px rgba(0,0,0,.07),0 .893452px 17.869px rgba(0,0,0,.042),0 .266004px 5.32008px rgba(0,0,0,.028);
580
612
 
581
- .toggle-active {
582
- background-color: var(--toggle-active-background-color);
583
- color: var(--toggle-active-color);
584
- transform: translateY(1px);
585
- box-shadow: 0 -1px var(--color-secondary);
586
- }
587
- .toggle-inactive {
588
- background-color: transparent;
589
- color: var(--toggle-inactive-color);
590
- }
613
+ --hotel-accomodation-results-title-color: var(--prijsvrij-secondary);
614
+ --hotel-accomodation-results-title-font: "Hermes Maia T4", sans-serif;
591
615
 
592
- .toggle-active-icon {
593
- color: var(--toggle-active-color);
594
- }
616
+ --hotel-accomodation-results-location-font: var(--font-open-sans), sans-serif;
617
+ --hotel-accomodation-results-location-color: #a8a8a8;
595
618
 
596
- .toggle-inactive-icon {
597
- color: var(--toggle-inactive-color);
598
- }
619
+ --viewed-accomodations-title-font: var(--font-open-sans), sans-serif;
620
+ --viewed-accomodations-title-text-color: var(--color-secondary);
621
+ --viewed-accomodations-header: var(--font-open-sans), sans-serif;
622
+ --viewed-accomodations-header-font-size: 18px;
599
623
 
624
+ --viewed-accomodations-empty-color: var(--color-secondary);
600
625
 
626
+ --viewed-accomodations-empty-text-color: var(--color-dark-400);
601
627
 
602
- .top-header-menu {
603
- background-color: var(--topHeaderMenu-background-color);
604
- }
628
+ --quantity-buttons-border-color: var(--color-primary);
629
+ --quantity-buttons-color: var(--color-primary);
630
+ --quantity-buttons-border-color-hover: var(--color-secondary);
631
+ --quantity-buttons-value-color: var(--color-dark-400);
605
632
 
606
- .top-header-menu li {
607
- background-color: var(--topMenu-background-color);
608
- height: var(--topMenu-height);
609
- display: flex;
610
- align-items: center;
611
- cursor: pointer;
612
- transition: all 0.4s ease;
613
- }
633
+ --matrix-table-days-color: var(--color-dark-400);
634
+ --matrix-table-month-header-color: var(--color-secondary);
635
+ --matrix-table-month-header-font-family: "Hermes Maia T4", sans-serif;
614
636
 
615
- .top-header-menu li a {
616
- padding: 0 4px;
617
- height: 100%;
618
- display: flex;
619
- align-content: center;
620
- align-items: center;
621
- }
637
+ --matrix-table-cell-color: var(--prijsvrij-primary-light-75);
638
+ --matrix-table-cell-border-color: var(--prijsvrij-light-600);
639
+ --matrix-table-cell-cheapest-color: var(--prijsvrij-primary);
640
+ --matrix-table-cell-cheapest-border-color: var(--prijsvrij-primary-dark-25);
622
641
 
623
- .top-header-menu li:hover a {
624
- background-color: var(--topMenu-background-color-hover);
625
- transition: all 0.4s ease;
626
- color: white;
627
- }
628
- .top-header-menu li:hover a {
629
- color: white;
630
- }
631
-
632
- .top-header-menu li a {
633
- text-decoration: none;
634
- color: white;
635
- padding: 0 12px;
636
- font-weight: 700;
637
- font-size: 14px;
638
- font-family: var(--font-open-sans), sans-serif;
639
- }
640
-
641
- .flying-heart-icon {
642
- animation: flyToHeart 1s ease-out forwards;
643
- }
642
+ --matrix-table-cell-active-color: var(--prijsvrij-alternative);
643
+ --matrix-table-cell-active-border-color: #e4d22b;
644
+ --matrix-table-cell-active-text-color: var(--prijsvrij-alternative2);
644
645
 
645
- @keyframes flyToHeart {
646
- 0% {
647
- transform: translate(var(--start-x), var(--start-y)) scale(1);
648
- opacity: 1;
649
- }
650
- 50% {
651
- transform: translate(calc(var(--start-x) + var(--end-x) / 2), calc(var(--start-y) + var(--end-y) / 2)) scale(1.2);
652
- opacity: 1;
653
- }
654
- 100% {
655
- transform: translate(var(--end-x), var(--end-y)) scale(0.8);
656
- opacity: 0;
657
- }
658
- }
646
+ --matrix-table-days-amount-font: var(--font-open-sans), sans-serif;
659
647
 
648
+ --matrix-table-days-weekday-color: var(--color-light-400);
660
649
 
661
- .filter-button {
662
- background-color: var(--filter-button-background-color);
663
- font-family: var(--fontFamily-filter-button);
664
- }
650
+ --popup-title-font-family: "Hermes Maia T4", sans-serif;
665
651
 
666
- .filter-button:hover {
667
- background-color: var(--filter-button-background-hover-color);
652
+
668
653
  }
669
654
 
670
- .filter-button-icon {
671
- background-color: var(--filter-button-icon-background-color);
672
- color: var(--filter-button-background-color);
673
- }
655
+ :root[data-brand="dreizen"],
656
+ [data-brand="dreizen"] {
657
+ --color-primary: var(--dreizen-primary);
658
+ --color-primary-100: var(--dreizen-primary-100);
659
+ --color-primary-200: var(--dreizen-primary-200);
660
+ --color-primary-300: var(--dreizen-primary-300);
661
+ --color-primary-light-25: var(--dreizen-primary-200);
662
+ --color-primary-light-50: var(--dreizen-primary-300);
674
663
 
675
- .filter-button:hover .filter-button-icon {
676
- background-color: var(--filter-button-icon-background-hover-color);
677
- color: white;
678
- }
664
+ --color-secondary: var(--dreizen-secondary);
665
+ --color-secondary-100: var(--dreizen-secondary-100);
666
+ --color-secondary-200: var(--dreizen-secondary-200);
667
+ --color-secondary-300: var(--dreizen-secondary-300);
668
+ --color-secondary-400: var(--dreizen-secondary-400);
669
+
670
+ --color-alternative: var(--dreizen-alternative);
671
+ --color-alternative-100: var(--dreizen-alternative-100);
672
+ --color-alternative-200: var(--dreizen-alternative-200);
673
+ --color-alternative-300: var(--dreizen-alternative-300);
674
+ --color-alternative-400: var(--dreizen-alternative-400);
675
+
676
+ --color-dark-600: var(--dreizen-dark-600);
677
+ --color-dark-500: var(--dreizen-dark-500);
678
+ --color-dark-400: var(--dreizen-dark-400);
679
+ --color-dark-300: var(--dreizen-dark-300);
680
+ --color-dark-200: var(--dreizen-dark-200);
681
+
682
+ --color-light-600: var(--dreizen-light-600);
683
+ --color-light-500: var(--dreizen-light-500);
684
+ --color-light-400: var(--dreizen-light-400);
685
+ --color-light-300: var(--dreizen-light-300);
686
+ --color-light-200: var(--dreizen-light-200);
679
687
 
688
+ /* Buttons */
689
+ --primary-btn-color: var(--dreizen-primary);
690
+ --primary-btn-inactive-color: var(--dreizen-primary-400);
691
+ --primary-btn-box-shadow: 0 3px var(--dreizen-primary-100);
692
+ --primary-btn-box-shadow-active: 0 1px var(--dreizen-primary-100);
693
+ --primary-btn-box-shadow-hover: 0 6px var(--dreizen-primary-100);
680
694
 
681
- .search-box-input:disabled {
682
- opacity: 0.92;
683
- cursor: not-allowed;
684
- }
695
+ --secondary-btn-color: var(--dreizen-secondary);
696
+ --secondary-btn-inactive-color: var(--dreizen-secondary-400);
697
+ --secondary-btn-box-shadow: 0 3px var(--dreizen-secondary-200);
698
+ --secondary-btn-box-shadow-active: 0 1px var(--dreizen-secondary-200);
699
+ --secondary-btn-box-shadow-hover: 0 6px var(--dreizen-secondary-200);
700
+
701
+ --alternative-btn-hover-color: var(--dreizen-alternative-200);
702
+ --alternative-btn-color: var(--dreizen-alternative);
703
+ --alternative-btn-inactive-color: var(--dreizen-alternative-300);
704
+ --alternative-btn-box-shadow: 0 3px var(--dreizen-alternative-200);
705
+ --alternative-btn-box-shadow-active: 0 1px var(--dreizen-alternative-200);
706
+ --alternative-btn-box-shadow-hover: 0 6px var(--dreizen-alternative-200);
707
+
708
+ --alternative2-btn-hover-color: var(--dreizen-alternative2-200);
709
+ --alternative2-btn-color: var(--dreizen-alternative2);
710
+ --alternative2-btn-inactive-color: var(--dreizen-alternative2-300);
711
+ --alternative2-btn-box-shadow: 0 3px var(--dreizen-alternative2-200);
712
+ --alternative2-btn-box-shadow-active: 0 1px var(--dreizen-alternative2-200);
713
+ --alternative2-btn-box-shadow-hover: 0 6px var(--dreizen-alternative2-200);
714
+
715
+ --alternative3-btn-hover-color: var(--dreizen-alternative3-200);
716
+ --alternative3-btn-color: var(--dreizen-alternative3);
717
+ --alternative3-btn-inactive-color: var(--dreizen-alternative3-300);
718
+ --alternative3-btn-box-shadow: 0 3px var(--dreizen-alternative3-200);
719
+ --alternative3-btn-box-shadow-active: 0 1px var(--dreizen-alternative3-200);
720
+ --alternative3-btn-box-shadow-hover: 0 6px var(--dreizen-alternative3-200);
721
+
722
+ --logo-url: var(--dreizen-logo-url);
685
723
 
686
- .search-box-input:active,
687
- .search-box-input:focus,
688
- .search-box-input.active {
689
- width: var(--expanded-width, 300px);
690
- padding-left: 48px;
691
- transition: width .3s ease, padding-left .3s ease;
692
- border: 2px solid var(--search-box-border-color);
693
- }
724
+ --btn-shadow: var(--btn-dreizen-shadow);
694
725
 
695
- .search-box-input:focus-visible {
696
- outline: none;
697
- border: 1px solid var(--search-box-border-color);
698
- }
726
+ --btn-outline-border: var(--dreizen-primary);
727
+ --btn-outline-color: var(--dreizen-primary);
699
728
 
700
- .search-box-input:focus::placeholder,
701
- .search-box-input.active::placeholder {
702
- color: #9ca3af;
703
- opacity: 1;
704
- transition: opacity .3s ease;
705
- }
729
+ --btn-outline-hover-border-color: var(--dreizen-primary-200);
730
+ --btn-outline-hover-color: var(--dreizen-primary-200);
706
731
 
707
- .search-box-input::placeholder {
708
- color: transparent;
709
- opacity: 0;
710
- }
732
+ --btn-text-color: var(--dreizen-primary);
711
733
 
712
- .search-box-input {
713
- border: 2px solid var(--search-box-border-color);
714
- }
734
+ --btn-text-hover-color: var(--dreizen-primary-200);
735
+ --price-check-color: var(--dreizen-dark-600);
736
+ --price-check-price-color: var(--dreizen-secondary);
715
737
 
716
- .search-box-icon {
717
- color: var(--search-box-icon-color);
718
- }
738
+ --danger-red: var(--dreizen-danger-red);
739
+ --danger-red-hover: var(--dreizen-danger-red-hover);
740
+ --danger-red-disabled: var(--dreizen-danger-red-disabled);
719
741
 
720
-
742
+ --fontFamily-price-check: var(--font-titillium-web), sans-serif;
743
+ --fontFamily-price-check-price: var(--font-titillium-web), sans-serif;
744
+ --fontFamily-blog-widget: var(--font-open-sans), sans-serif;
745
+ --fontFamily-blog-widget-date: var(--font-open-sans), sans-serif;
721
746
 
722
- .search-box-clear:hover {
723
- background-color: var(--search-box-clear-icon-background-hover-color);
724
- }
747
+ --fontWeight-price-text: 600;
748
+ --price-background: transparent;
749
+ --price-background-back: transparent;
750
+ --price-text-padding-left: 0;
751
+ --price-text-padding-bottom: 0;
752
+ --price-price-padding-left: 0;
753
+ --price-price-padding-right: 0;
754
+ --price-minus-right: 5px;
755
+ --price-minus-bottom: 10px;
756
+ --price-price-margin-top: -8px;
725
757
 
726
- .search-box-results {
727
- box-shadow: 0 4px 80px rgba(0, 0, 0, .07), 0 .893452px 17.869px rgba(0, 0, 0, .042), 0 .266004px 5.32008px rgba(0, 0, 0, .028);
728
- }
758
+ --toggle-active-background-color: var(--dreizen-secondary);
759
+ --toggle-inactive-background-color: var(--dreizen-secondary);
760
+ --toggle-active-color: white;
761
+ --toggle-inactive-color: var(--dreizen-dark-600);
762
+ --toggle-font-family: var(--font-lato), sans-serif;
729
763
 
730
- .search-box-clear {
731
- background-color: var(--search-box-clear-icon-background-color);
732
- color: var(--search-box-clear-icon-color);
733
- }
734
- .search-box-result-location {
735
- color: var(--search-box-result-location-color);
736
- }
764
+ --filter-button-background-color: var(--dreizen-primary);
765
+ --filter-button-background-hover-color: var(--dreizen-dark-600);
766
+ --fontFamily-filter-button: var(--font-lato), sans-serif;
737
767
 
738
- .search-box-result:hover {
739
- background-color: var(--search-box-result-hover-background-color);
740
- }
741
- .search-box-result-type-page {
742
- color: var(--search-box-result-location-color);
743
- }
744
- .search-box-result-type-page:hover {
745
- color: color-mix(in srgb, var(--search-box-result-location-color) 70%, transparent);
746
- }
768
+ --filter-button-icon-background-color: #4099cf;
769
+ --filter-button-icon-background-hover-color: #002c49;
770
+ --search-box-border-color: var(--dreizen-secondary);
771
+ --search-box-icon-color: var(--dreizen-secondary);
772
+ --search-box-clear-icon-background-color: #e3e3e3;
773
+ --search-box-clear-icon-background-hover-color: #a0a0a0;
774
+ --search-box-clear-icon-color: white;
747
775
 
748
- .search-box-result-location {
749
- font-family: var(--font-open-sans), sans-serif;
750
- }
776
+ --search-box-result-location-color: var(--dreizen-primary);
777
+ --search-box-result-hover-background-color: #edf7fe;
751
778
 
752
- .dropdown-button {
753
- color: var(--color-primary);
754
- }
755
- .dropdown-button-text {
756
- color: var(--color-dark-600);
757
- }
758
- .dropdown-icon {
759
- color: var(--color-secondary);
760
- }
779
+ --topMenu-background-color: transparent;
780
+ --topHeaderMenu-background-color: var(--color-secondary);
781
+ --topMenu-background-color-hover: var(--dreizen-secondary-200);
782
+ --topMenu-boxShadow-color: #f9f9f9;
783
+ --topMenu-height: 32px;
761
784
 
785
+ --counter-icon-color: #ff6766;
762
786
 
787
+ --usp-font-family: var(--font-lato), sans-serif;
788
+ --middle-navigation-font-family: var(--font-lato), sans-serif;
763
789
 
764
- .counter-icon-count {
765
- background-color: var(--counter-icon-color);
766
- }
767
- .counter-icon-wrapper {
768
- margin: 0 8px;
769
- }
770
- .counter-icon-clickable:hover {
771
- background-color: var(--topMenu-background-color-hover);
772
- }
773
- /* .usp-icon {
774
- color: var(--color-alternative);
775
- } */
790
+ --menu-link-color: var(--color-dark-600);
791
+ --menu-link-hover-color: var(--color-dark-600);
792
+ --menu-item-icon-color: var(--color-secondary);
776
793
 
777
- .usp-wrapper,
778
- .usp-wrapper a {
779
- color: var(--color-dark-600);
780
- text-decoration: none;
781
- font-family: var(--usp-font-family);
782
- }
794
+ --color-footer-navigation-link: var(--color-dark-600);
795
+ --color-footer-navigation-category-link: #0077bf;
783
796
 
784
- /* Container queries for responsive USP items */
785
- .usp-wrapper {
786
- container-type: inline-size;
787
- }
797
+ --searchBlock-background-color: var(--color-secondary);
798
+ --searchBlock-text-color: white;
799
+ --searchBlock-text-size: 20px;
800
+ --searchBlock-text-weight: 700;
801
+ --searchBlock-font-family: var(--font-lato), sans-serif;
802
+ --searchBlock-border-radius: 2px;
788
803
 
789
- @container (max-width: 800px) {
790
- .usp-wrapper.flex-row .usp-item:nth-child(n+4) {
791
- display: none;
792
- }
793
- }
804
+ --searchBlockButtonLabel-text-size: clamp(12px, 3vw, 14px);
805
+ --searchBlockButtonLabel-text-weight: 700;
806
+ --searchBlockButtonLabel-font-family: var(--font-lato), sans-serif;
807
+ --searchBlockButtonLabel-color: var(--dreizen-dark-600);
808
+ --searchBlockButtonIcon-color: var(--dreizen-dark-200);
794
809
 
795
- @container (max-width: 640px) {
796
- .usp-wrapper.flex-row .usp-item:nth-child(n+3) {
797
- display: none;
798
- }
799
-
800
- }
810
+ --searchBlockButtonRadius: 3px;
811
+ --searchBlockButtonHeight: 40px;
801
812
 
802
- @container (max-width: 480px) {
803
- .usp-wrapper.flex-row .usp-item:nth-child(n+2) {
804
- display: none;
805
- }
806
- }
813
+ --searchBlockButtonSelectedValue-font-family: var(--font-lato), sans-serif;
814
+ --searchBlockButtonSelectedValue-color: var(--dreizen-dark-600);
815
+ --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
816
+ --searchBlockButtonSelectedValue-text-weight: 500;
817
+ --searchBlockButtonSelectedValue-margin-top: 0;
807
818
 
819
+ --searchBlockButtonDownIcon-color: var(--dreizen-primary);
820
+ --searchBlockButtonDownIcon-size: 16px;
808
821
 
809
- .middle-navigation {
810
- color: #73726e;
811
- font-family: var(--middle-navigation-font-family);
812
- }
822
+ --category-filter-font-family: var(--font-lato), sans-serif;
813
823
 
814
- .middle-navigation li {
815
- transition: all 0.3s ease-in-out;
816
- }
824
+ --collection-title-font-family: var(--font-titillium-web), sans-serif;
825
+ --collection-description-font-family: var(--font-lato), sans-serif;
817
826
 
818
- .middle-navigation li:hover {
819
- color: var(--color-dark-200);
820
- }
821
- /* Menu styles */
822
- .menu-item {
823
- position: relative;
824
- }
827
+ --usp-icon-color: #52c65c;
825
828
 
829
+ --review-color: #0077bf;
830
+ --review-number-background-color: #0077bf;
831
+ --review-number-color: white;
832
+ --review-shadow: 1px 1px 5px 0 rgba(0,0,0,.15),0 0 1px 0 rgba(0,0,0,.3);
826
833
 
827
- .menu-item:hover:has(.menu-dropdown) .menu-link {
828
- background-color: white;
829
- color: var(--menu-link-hover-color);
830
- }
834
+ --hotel-accomodation-results-title-color: var(--color-dark-600);
835
+ --hotel-accomodation-results-title-font: var(--font-titillium-web), sans-serif;
831
836
 
832
- .menu-item:hover {
833
- background: rgba(0, 0, 0, .1);
834
- border-radius: 4px;
835
- }
837
+ --hotel-accomodation-results-location-font: var(--font-lato), sans-serif;
838
+ --hotel-accomodation-results-location-color: #a8a8a8;
836
839
 
837
- .menu-item:hover .menu-link {
838
- color: white;
839
- }
840
+ --viewed-accomodations-title-font: var(--font-titillium-web), sans-serif;
841
+ --viewed-accomodations-title-text-color: var(--color-dark-600);
842
+ --viewed-accomodations-header: var(--font-lato), sans-serif;
843
+ --viewed-accomodations-header-font-size: 16px;
840
844
 
841
- .menu-item:hover .menu-item-icon {
842
- color: var(--menu-item-icon-hover-color);
843
- }
845
+ --viewed-accomodations-empty-color: var(--color-dark-600);
844
846
 
845
- .menu-link {
846
- color: var(--menu-link-color);
847
- }
847
+ --viewed-accomodations-empty-text-color: var(--color-dark-600);
848
848
 
849
- .menu-item-icon {
850
- color: var(--menu-item-icon-color);
851
- }
849
+ --quantity-buttons-border-color: var(--color-secondary);
850
+ --quantity-buttons-color: var(--color-secondary);
851
+ --quantity-buttons-border-color-hover: var(--color-secondary-200);
852
+ --quantity-buttons-value-color: var(--color-dark-400);
852
853
 
853
- .menu-dropdown {
854
- opacity: 0;
855
- pointer-events: none;
856
- transition: opacity 0.15s ease-in-out;
857
- max-height: calc(100vh - 32px);
858
- overflow: hidden;
859
- }
854
+ --matrix-table-days-color: var(--color-dark-600);
855
+ --matrix-table-month-header-color: var(--color-dark-600);
856
+ --matrix-table-month-header-font-family: var(--font-titillium-web), sans-serif;
860
857
 
861
- .menu-item[data-open="true"][data-ready="false"] .menu-dropdown {
862
- opacity: 0;
863
- visibility: hidden;
864
- pointer-events: none;
865
- }
858
+ --matrix-table-cell-color: #bfddef;
859
+ --matrix-table-cell-border-color: #bfddef;
860
+ --matrix-table-cell-cheapest-color: var(--dreizen-primary);
861
+ --matrix-table-cell-cheapest-border-color: var(--dreizen-primary);
866
862
 
867
- .menu-item[data-open="true"][data-ready="true"] .menu-dropdown {
868
- opacity: 1;
869
- visibility: visible;
870
- pointer-events: auto;
871
- }
863
+ --matrix-table-days-amount-font: var(--font-lato), sans-serif;
872
864
 
873
- /* Create invisible bridge to prevent gap */
874
- .menu-dropdown::before {
875
- content: '';
876
- position: absolute;
877
- top: -12px;
878
- left: 0;
879
- right: 0;
880
- height: 12px;
881
- background: transparent;
882
- }
865
+ --matrix-table-days-weekday-color: var(--color-light-400);
866
+ --matrix-table-cell-active-color: var(--color-secondary);
867
+ --matrix-table-cell-active-border-color: var(--color-secondary);
868
+ --matrix-table-cell-active-text-color: var(--color-white);
883
869
 
884
- .menu-dropdown.bottom-full::before {
885
- top: -12px;
886
- }
870
+ --popup-title-font-family: var(--font-lato), sans-serif;
871
+ }
872
+
887
873
 
888
- .menu-dropdown.top-full::before {
889
- bottom: -12px;
890
- top: auto;
891
- }
874
+ /* Change this path to be relative to where this CSS file ends up after packaging this library. */
875
+ @source "../../dist";
876
+
892
877
 
893
- .menu-category:not(:last-child) {
894
- border-bottom: 1px solid #e5e7eb;
878
+ .top-menu-wrapper {
879
+ background-color: var(--topMenu-background-color);
880
+ box-shadow: inset 0 32px var(--topMenu-boxShadow-color);
895
881
  }
896
882
 
897
- .menu-dropdown a {
898
- white-space: nowrap;
883
+ .topMenu {
884
+ background-color: var(--topMenu-background-color);
885
+ box-shadow: inset 0 32px var(--topMenu-boxShadow-color);
886
+ height: var(--topMenu-height);
899
887
  }
900
888
 
901
- /* Ensure dropdown stays above other content */
902
- .menu-dropdown {
903
- z-index: 50;
889
+ .btn-primary-boxShadow {
890
+ box-shadow: var(--primary-btn-box-shadow);
904
891
  }
905
-
906
- /* Add subtle animation for menu items */
907
- .menu-item > a {
908
- position: relative;
909
- transition: color 0.2s ease;
892
+ .btn-primary-boxShadow-active {
893
+ box-shadow: var(--primary-btn-box-shadow-active);
910
894
  }
911
-
912
- /* Sticky category headers for better navigation when scrolling */
913
- .menu-dropdown .sticky {
914
- position: sticky;
915
- top: 0;
916
- background: white;
917
- z-index: 10;
895
+ .btn-primary-boxShadow-hover {
896
+ box-shadow: var(--primary-btn-box-shadow-hover);
918
897
  }
919
898
 
920
- /* Hide dropdown scrollbars (keep scroll functionality) */
921
- .menu-dropdown {
922
- scrollbar-width: none; /* Firefox */
923
- -ms-overflow-style: none; /* IE/Edge legacy */
899
+ /* Active state fallbacks */
900
+ button.btn-primary-boxShadow:active {
901
+ box-shadow: var(--primary-btn-box-shadow-active);
924
902
  }
925
-
926
- .menu-dropdown::-webkit-scrollbar {
927
- width: 0;
928
- height: 0;
903
+ button.btn-primary-boxShadow:hover {
904
+ box-shadow: var(--primary-btn-box-shadow-hover);
929
905
  }
930
906
 
931
- /* Prevent dropdown from going off-screen horizontally */
932
- .menu-dropdown {
933
- max-width: 90vw;
907
+ button.btn-primary-boxShadow:hover:active {
908
+ box-shadow: var(--primary-btn-box-shadow-active);
934
909
  }
935
910
 
936
- /* Ensure dropdown never goes negative left */
937
- .menu-dropdown.left-0 {
938
- left: 0;
939
- right: auto;
911
+ button.btn-secondary:active {
912
+ box-shadow: var(--secondary-btn-box-shadow-active);
940
913
  }
941
914
 
942
- /* Handle dropdown positioning */
943
- .menu-dropdown.top-full {
944
- top: 100%;
915
+ button.btn-secondary:hover {
916
+ box-shadow: var(--secondary-btn-box-shadow-hover);
945
917
  }
946
918
 
947
- .menu-dropdown.bottom-full {
948
- bottom: 100%;
949
- margin-bottom: 4px;
919
+ button.btn-secondary:hover:active {
920
+ box-shadow: var(--secondary-btn-box-shadow-active);
950
921
  }
951
922
 
952
- .menu-dropdown.left-0 {
953
- left: 0;
923
+ .btn-secondary-boxShadow {
924
+ box-shadow: var(--secondary-btn-box-shadow);
954
925
  }
955
926
 
956
- .menu-dropdown.right-0 {
957
- right: 0;
927
+ .btn-secondary-boxShadow-active {
928
+ box-shadow: var(--secondary-btn-box-shadow-active);
958
929
  }
959
-
960
- .menu-dropdown.left-1\/2 {
961
- left: 50%;
930
+ .btn-secondary-boxShadow-hover {
931
+ box-shadow: var(--secondary-btn-box-shadow-hover);
962
932
  }
963
933
 
964
- .menu-dropdown.-translate-x-1\/2 {
965
- transform: translateX(-50%);
934
+ /* Button primary variant with CSS custom properties */
935
+ .btn-glow:hover {
936
+ background-color: var(--primary-btn-hover-color);
966
937
  }
967
-
968
-
969
- /* Grid layout for dropdown */
970
- .menu-dropdown .grid {
971
- grid-template-columns: repeat(3, minmax(200px, 1fr));
938
+ .btn-primary {
939
+ background-color: var(--primary-btn-color);
940
+ border-color: transparent;
941
+ color: white;
942
+ transition: all .2s ease;
972
943
  }
973
944
 
974
- /* Category styling in grid */
975
- .menu-dropdown .menu-category {
976
- min-width: 200px;
945
+ .btn-primary:disabled {
946
+ background-color: var(--primary-btn-color);
947
+ opacity: 0.2;
948
+ color: #1f2937;
977
949
  }
978
950
 
979
- .footer-navigation-link {
980
- color: var(--color-footer-navigation-link);
951
+ .btn-primary:disabled:hover {
952
+ background-color: var(--primary-btn-color);
953
+ opacity: 0.2;
981
954
  }
982
955
 
983
- .footer-navigation-category-link {
984
- color: var(--color-footer-navigation-category-link);
985
- }
986
- .blog-widget-title {
987
- font-family: var(--fontFamily-blog-widget);
988
- }
989
- .blog-widget-date {
990
- font-family: var(--fontFamily-blog-widget-date);
991
- }
992
- .searchBlock {
993
- background-color: var(--searchBlock-background-color);
994
- color: var(--searchBlock-text-color);
995
- font-size: var(--searchBlock-text-size);
996
- font-weight: var(--searchBlock-text-weight);
997
- font-family: var(--searchBlock-font-family);
998
- border-radius: var(--searchBlock-border-radius);
999
- }
1000
-
1001
- .searchBlockButton {
1002
- background-color: white;
1003
- border-radius: var(--searchBlockButtonRadius);
1004
- min-height: var(--searchBlockButtonHeight);
956
+ /* Button secondary variant with CSS custom properties */
957
+ .btn-secondary {
958
+ background-color: var(--secondary-btn-color);
959
+ border-color: transparent;
960
+ color: white;
961
+ transition: all .2s ease;
1005
962
  }
1006
963
 
1007
- .searchBlockButtonLabel {
1008
- font-size: var(--searchBlockButtonLabel-text-size) !important;
1009
- font-weight: var(--searchBlockButtonLabel-text-weight);
1010
- font-family: var(--searchBlockButtonLabel-font-family);
1011
- color: var(--searchBlockButtonLabel-color);
964
+ .btn-secondary:disabled {
965
+ background-color: var(--secondary-btn-color);
966
+ opacity: 0.2;
967
+ color: #1f2937;
1012
968
  }
1013
969
 
1014
- .searchBlockButtonIcon {
1015
- color: var(--searchBlockButtonIcon-color);
970
+ .btn-secondary:disabled:hover {
971
+ background-color: var(--secondary-btn-color);
972
+ opacity: 0.2;
1016
973
  }
1017
974
 
1018
- .searchBlockButtonSelectedValue {
1019
-
1020
- font-family: var(--searchBlockButtonSelectedValue-font-family);
1021
- color: var(--searchBlockButtonSelectedValue-color);
1022
- font-size: var(--searchBlockButtonSelectedValue-text-size) !important;
1023
- font-weight: var(--searchBlockButtonSelectedValue-text-weight);
1024
- margin-top: var(--searchBlockButtonSelectedValue-margin-top);
975
+ /* Button tertiary variant with CSS custom properties */
976
+ .btn-alternative {
977
+ background-color: var(--alternative-btn-color);
978
+ border-color: transparent;
979
+ color: white;
980
+ transition: all .2s ease;
1025
981
 
1026
982
  }
1027
983
 
1028
- .searchBlockButtonSecondarySelectedValue {
1029
- font-size: var(--searchBlockButtonLabel-text-size) !important;
1030
- color: var(--searchBlockButtonIcon-color);
984
+ .btn-alternative:hover {
985
+ background-color: var(--alternative-btn-hover-color);
1031
986
  }
1032
987
 
1033
- .searchBlockButtonDownIcon {
1034
- color: var(--searchBlockButtonDownIcon-color);
1035
- width: var(--searchBlockButtonDownIcon-size);
1036
- height: var(--searchBlockButtonDownIcon-size);
1037
- }
1038
- .category-filter {
1039
- font-family: var(--category-filter-font-family);
1040
- }
1041
- .collection-title {
1042
- font-family: var(--collection-title-font-family)
988
+ .btn-alternative:disabled {
989
+ background-color: var(--alternative-btn-color);
990
+ opacity: 0.2;
991
+ color: #1f2937;
1043
992
  }
1044
993
 
1045
- .collection-description {
1046
- font-family: var(--collection-description-font-family);
1047
- color: var(--color-dark-300);
1048
-
1049
- }
1050
- .review {
1051
- box-shadow: 0 4px 80px rgba(0, 0, 0, .07), 0 .893452px 17.869px rgba(0, 0, 0, .042), 0 .266004px 5.32008px rgba(0, 0, 0, .028);
994
+ .btn-alternative:disabled:hover {
995
+ background-color: var(--alternative-btn-color);
996
+ opacity: 0.2;
1052
997
  }
1053
998
 
1054
- .review-color {
1055
- color: var(--review-color);
999
+ /* Button alternative2 variant with CSS custom properties */
1000
+ .btn-alternative2 {
1001
+ background-color: var(--alternative2-btn-color);
1002
+ border-color: transparent;
1003
+ color: white;
1004
+ transition: all .2s ease;
1056
1005
  }
1057
1006
 
1058
- .review-number-color {
1059
- background: var(--review-number-background-color);
1060
- color: var(--review-number-color);
1007
+ .btn-alternative2:hover {
1008
+ background-color: var(--alternative2-btn-hover-color);
1061
1009
  }
1062
1010
 
1063
- .review-shadow {
1064
- box-shadow: var(--review-shadow);
1011
+ .btn-alternative2:disabled {
1012
+ background-color: var(--alternative2-btn-color);
1013
+ opacity: 0.2;
1014
+ color: #1f2937;
1065
1015
  }
1066
1016
 
1067
- .review-small {
1068
- background: var(--review-color);
1069
- color: white;
1017
+ .btn-alternative2:disabled:hover {
1018
+ background-color: var(--alternative2-btn-color);
1019
+ opacity: 0.2;
1070
1020
  }
1071
1021
 
1072
- .review-small-arrow {
1073
- border-top-color: var(--review-color);
1074
- }
1075
- .hotel-accomodation-results-title {
1076
- color: var(--hotel-accomodation-results-title-color);
1077
- font-family: var(--hotel-accomodation-results-title-font);
1022
+ .btn-shadow {
1023
+ box-shadow: var(--btn-shadow);
1078
1024
  }
1079
1025
 
1080
- .hotel-accomodation-results-location {
1081
- font-family: var(--hotel-accomodation-results-location-font);
1082
- color: var(--hotel-accomodation-results-location-color);
1083
- }
1084
- .coupon-bite-top {
1085
- -webkit-mask-image: radial-gradient(circle 12px at 0 100%, transparent 99%, #000), radial-gradient(circle 12px at 100% 100%, transparent 99%, #000);
1086
- -webkit-mask-size: 51% 100%;
1087
- -webkit-mask-position: left, right;
1088
- -webkit-mask-repeat: no-repeat;
1089
- mask-image: radial-gradient(circle 12px at 0 100%, transparent 99%, #000), radial-gradient(circle 12px at 100% 100%, transparent 99%, #000);
1090
- mask-size: 51% 100%;
1091
- mask-position: left, right;
1092
- mask-repeat: no-repeat;
1026
+ .btn-outline {
1027
+ border-color: var(--btn-outline-border);
1028
+ color: var(--btn-outline-color);
1093
1029
  }
1094
1030
 
1095
- .coupon-bite-dashes {
1096
- -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 10px, #000 10px 18px);
1097
- mask-image: repeating-linear-gradient(90deg, transparent 0 10px, #000 10px 18px);
1031
+ .btn-outline:hover {
1032
+ border-color: var(--btn-outline-hover-border-color);
1033
+ color: var(--btn-outline-hover-color);
1098
1034
  }
1099
1035
 
1100
- .coupon-bite-bottom {
1101
- -webkit-mask-image: radial-gradient(circle 12px at 0 0, transparent 99%, #000), radial-gradient(circle 12px at 100% 0, transparent 99%, #000);
1102
- -webkit-mask-size: 51% 100%;
1103
- -webkit-mask-position: left, right;
1104
- -webkit-mask-repeat: no-repeat;
1105
- mask-image: radial-gradient(circle 12px at 0 0, transparent 99%, #000), radial-gradient(circle 12px at 100% 0, transparent 99%, #000);
1106
- mask-size: 51% 100%;
1107
- mask-position: left, right;
1108
- mask-repeat: no-repeat;
1036
+ .btn-text {
1037
+ color: var(--btn-text-color);
1109
1038
  }
1110
- .gift-card {
1111
- fill: linear-gradient(215deg, rgba(255, 255, 255, 0.20) -115.47%, #0092F2 36.73%);
1112
- font-family: var(--font-open-sans), sans-serif;
1039
+ .btn-text-hover-color:hover {
1040
+ color: var(--btn-text-hover-color);
1113
1041
  }
1114
1042
 
1115
- .gift-card-amount {
1116
- font-family: "Hermes Maia T4", sans-serif;
1117
- }
1118
1043
 
1119
- .popup-title {
1120
- font-family: var(--popup-title-font-family);
1044
+ .price-check-color {
1045
+ color: var(--price-check-color);
1121
1046
  }
1122
1047
 
1123
- .with-backdrop::backdrop {
1124
- background-color: rgba(0, 0, 0, 0.5) !important;
1048
+ .price-check-color-price {
1049
+ color: var(--price-check-price-color);
1125
1050
  }
1126
1051
 
1127
- /* Alternative approach for browsers that don't support ::backdrop */
1128
- [data-popover].with-backdrop::backdrop {
1129
- background-color: rgba(0, 0, 0, 0.5) !important;
1052
+ .price-check-fontFamily {
1053
+ font-family: var(--fontFamily-price-check);
1130
1054
  }
1131
1055
 
1132
- .rotated-image-0,
1133
- .rotated-image-1 {
1134
- box-shadow: 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
1056
+ .price-check-fontFamily-price {
1057
+ font-family: var(--fontFamily-price-check-price);
1058
+ z-index: 0;
1135
1059
  }
1136
1060
 
1137
- .rotated-image-2 {
1138
- box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.07), 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
1139
- }
1140
- .spotlights-item {
1141
- font-family: "Hermes Maia T4";
1061
+ .price-check-font-price-text {
1062
+ font-weight: var(--fontWeight-price-text);
1063
+ z-index: 0;
1142
1064
  }
1143
1065
 
1144
- .viewed-accomodations {
1145
- box-shadow: 0 1px 5px rgba(0,0,0,.12),0 2px 6.4px rgba(0,0,0,.11),0 3px 9.6px -2px rgba(0,0,0,.2);
1066
+ .price-background {
1067
+ inset: 0;
1068
+ position: absolute;
1069
+ z-index: 0;
1146
1070
  }
1147
1071
 
1148
- .viewed-accomodations-title {
1149
- font-family: var(--viewed-accomodations-title-font);
1150
- color: var(--viewed-accomodations-title-text-color);
1072
+ .price-background::before {
1073
+ content: '';
1074
+ position: absolute;
1075
+ inset: 0;
1076
+ background-color: var(--price-background);
1077
+ transform: matrix(1, -.06, .1, 1, 0, 0);
1078
+ z-index: 3;
1151
1079
  }
1152
1080
 
1153
- .viewed-accomodations-header {
1154
- font-family: var(--viewed-accomodations-header);
1155
- color: var(--viewed-accomodations-title-text-color);
1156
- font-size: var(--viewed-accomodations-header-font-size);
1081
+ .price-background::after {
1082
+ content: '';
1083
+ position: absolute;
1084
+ inset: 0;
1085
+ z-index: 2;
1086
+ background-color: var(--price-background-back);
1087
+ transform: matrix(1,.05,-.05,1,0,0);
1088
+ transform-origin: center;
1157
1089
  }
1158
1090
 
1159
- .viewed-accomodations-items, .viewed-accomodations-empty-header {
1160
- color: var(--viewed-accomodations-empty-color);
1091
+ .price-check-text-padding {
1092
+ padding-left: var(--price-text-padding-left);
1093
+ margin-bottom: var(--price-text-padding-bottom);
1161
1094
  }
1162
1095
 
1163
- .viewed-accomodations-empty-text-color {
1164
- color: var(--viewed-accomodations-empty-text-color);
1165
- }
1166
- .quantity-buttons-border-color {
1167
- border-color: var(--quantity-buttons-border-color);
1096
+ .price-check-price-padding {
1097
+ padding-left: var(--price-price-padding-left);
1098
+ padding-right: var(--price-price-padding-right);
1168
1099
  }
1169
1100
 
1170
- .quantity-buttons-border-color:hover:not(:disabled) {
1171
- border-color: var(--quantity-buttons-border-color-hover);
1101
+ .price-check-price-margin-top {
1102
+ margin-top: var(--price-price-margin-top)
1172
1103
  }
1173
1104
 
1174
- .quantity-buttons-border-color:hover:not(:disabled) .quantity-buttons-color {
1175
- color: var(--quantity-buttons-border-color-hover);
1105
+ .price-check-minus {
1106
+ position: absolute;
1107
+ right: var(--price-minus-right);
1108
+ bottom: var(--price-minus-bottom);
1176
1109
  }
1177
1110
 
1178
- .quantity-buttons-color {
1179
- color: var(--quantity-buttons-color);
1111
+ /* Disabled state with grayscale filter */
1112
+ .price-check-disabled {
1113
+ filter: grayscale(100%);
1114
+ opacity: 0.7;
1180
1115
  }
1181
1116
 
1182
- .quantity-buttons-value-color {
1183
- color: var(--quantity-buttons-value-color);
1117
+ .toggle {
1118
+ background-color: var(--toggle-inactive-background-color);
1119
+ container-type: inline-size;
1120
+ font-family: var(--toggle-font-family);
1184
1121
  }
1185
1122
 
1186
- .matrix-table-days {
1187
- color: var(--matrix-table-days-color);
1188
- }
1189
- .matrix-table-month-header {
1190
- color: var(--matrix-table-month-header-color);
1191
- font-family: var(--matrix-table-month-header-font-family);
1123
+ .toggle-inactive:not(.disabled):hover {
1124
+ box-shadow: 0 2px #333, 0 4px 17px -10px #333;
1125
+ transform: translateY(-2px);
1126
+ transition: opacity .2s ease, transform .1s ease, background .1s ease, box-shadow .1s ease;
1192
1127
  }
1193
1128
 
1194
- .matrix-table-cell:hover, .matrix-table-cell-cheapest:hover, .matrix-table-cell-active:hover {
1195
- background: #e4e4e4;
1196
- border-color: #e4e4e4;
1197
- color: var(--matrix-table-days-color);
1198
- }
1199
-
1200
- .matrix-table-cell-cheapest {
1201
- background: var(--matrix-table-cell-cheapest-color);
1202
- border-color: var(--matrix-table-cell-cheapest-border-color);
1203
- font-weight: 600;
1204
- }
1205
- .matrix-table-cell {
1206
- background: var(--matrix-table-cell-color);
1207
- border-color: var(--matrix-table-cell-border-color);
1208
- }
1209
- .matrix-table-cell-active {
1210
- background: var(--matrix-table-cell-active-color);
1211
- border-color: var(--matrix-table-cell-active-border-color);
1212
- color: var(--matrix-table-cell-active-text-color);
1213
- font-weight: 600;
1129
+ .toggle-inactive:not(.disabled):active {
1130
+ transform: translateY(0px);
1131
+ box-shadow: 0 0px #333, 0 0px 17px -10px #333;
1132
+ transition: opacity .2s ease, transform .1s ease, background .1s ease, box-shadow .1s ease;
1214
1133
  }
1215
- .matrix-table-days {
1216
- font-family: var(--matrix-table-days-amount-font);
1134
+
1135
+ .toggle-active {
1136
+ background-color: var(--toggle-active-background-color);
1137
+ color: var(--toggle-active-color);
1138
+ transform: translateY(1px);
1139
+ box-shadow: 0 -1px var(--color-secondary);
1217
1140
  }
1218
- .matrix-table-dates, .matrix-table-dates-weekday {
1219
- font-family: var(--matrix-table-days-amount-font);
1141
+ .toggle-inactive {
1142
+ background-color: transparent;
1143
+ color: var(--toggle-inactive-color);
1220
1144
  }
1221
- .matrix-table-dates-weekday {
1222
- color: var(--matrix-table-days-weekday-color);
1145
+
1146
+ .toggle-active-icon {
1147
+ color: var(--toggle-active-color);
1223
1148
  }
1224
1149
 
1225
- .page-navigation:hover,
1226
- .page-navigation.selected {
1227
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.11), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
1150
+ .toggle-inactive-icon {
1151
+ color: var(--toggle-inactive-color);
1228
1152
  }
1229
- /**
1230
- * Custom Utilities
1231
- * Additional utility classes for the UI Package
1232
- * These styles are scoped to prevent global conflicts
1233
- */
1234
1153
 
1235
- /* Custom utilities */
1236
1154
 
1237
1155
 
1238
- @utility transition-max-height {
1239
- transition: max-height 0.3s ease-in-out;
1156
+ .top-header-menu {
1157
+ background-color: var(--topHeaderMenu-background-color);
1240
1158
  }
1241
1159
 
1242
- @layer utilities {
1243
- /* Animation utility classes - Only for UI components with data-pv-ui */
1244
- [data-pv-ui] .animate-spin,
1245
- .animate-spin {
1246
- animation: spin 1s linear infinite;
1247
- }
1248
- [data-pv-ui] .animate-spin-slow,
1249
- .animate-spin-slow {
1250
- animation: spin 2s linear infinite;
1251
- }
1252
- [data-pv-ui] .animate-spin-once,
1253
- .animate-spin-once {
1254
- animation: spin 2s linear forwards;
1255
- }
1160
+ .top-header-menu li {
1161
+ background-color: var(--topMenu-background-color);
1162
+ height: var(--topMenu-height);
1163
+ display: flex;
1164
+ align-items: center;
1165
+ cursor: pointer;
1166
+ transition: all 0.4s ease;
1167
+ }
1256
1168
 
1257
- [data-pv-ui] .animate-plane-bounce,
1258
- .animate-plane-bounce {
1259
- animation: airplane-bounce 5s ease-in-out infinite;
1260
- }
1169
+ .top-header-menu li a {
1170
+ padding: 0 4px;
1171
+ height: 100%;
1172
+ display: flex;
1173
+ align-content: center;
1174
+ align-items: center;
1175
+ }
1261
1176
 
1262
- [data-pv-ui] .animate-cloud-float,
1263
- .animate-cloud-float {
1264
- animation: cloud-move 7s infinite linear;
1265
- }
1177
+ .top-header-menu li:hover a {
1178
+ background-color: var(--topMenu-background-color-hover);
1179
+ transition: all 0.4s ease;
1180
+ color: white;
1181
+ }
1182
+ .top-header-menu li:hover a {
1183
+ color: white;
1184
+ }
1266
1185
 
1267
- [data-pv-ui] .animate-cloud-float-2,
1268
- .animate-cloud-float-2 {
1269
- animation: cloud-move 7s -5s infinite linear;
1270
- }
1186
+ .top-header-menu li a {
1187
+ text-decoration: none;
1188
+ color: white;
1189
+ padding: 0 12px;
1190
+ font-weight: 700;
1191
+ font-size: 14px;
1192
+ font-family: var(--font-open-sans), sans-serif;
1193
+ }
1271
1194
 
1272
- [data-pv-ui] .animate-cloud-float-3,
1273
- .animate-cloud-float-3 {
1274
- animation: cloud-move 7s -10s infinite linear;
1275
- }
1195
+ .flying-heart-icon {
1196
+ animation: flyToHeart 1s ease-out forwards;
1197
+ }
1276
1198
 
1277
- /* Duration utility classes - Only for UI components with data-pv-ui */
1278
- [data-pv-ui] .duration-sidebar,
1279
- .duration-sidebar {
1280
- transition-duration: var(--pv-transition-duration-sidebar, 300ms);
1199
+ @keyframes flyToHeart {
1200
+ 0% {
1201
+ transform: translate(var(--start-x), var(--start-y)) scale(1);
1202
+ opacity: 1;
1281
1203
  }
1282
-
1283
- [data-pv-ui] .duration-1000,
1284
- .duration-1000 {
1285
- transition-duration: 1000ms;
1204
+ 50% {
1205
+ transform: translate(calc(var(--start-x) + var(--end-x) / 2), calc(var(--start-y) + var(--end-y) / 2)) scale(1.2);
1206
+ opacity: 1;
1286
1207
  }
1287
-
1288
- [data-pv-ui] .duration-700,
1289
- .duration-700 {
1290
- transition-duration: 700ms;
1208
+ 100% {
1209
+ transform: translate(var(--end-x), var(--end-y)) scale(0.8);
1210
+ opacity: 0;
1291
1211
  }
1212
+ }
1292
1213
 
1293
- /* Gradient background utility classes - Only for UI components with data-pv-ui */
1294
- [data-pv-ui] .bg-linear-gradient-y,
1295
- .bg-linear-gradient-y {
1296
- background-image: var(--pv-color-linear-gradient-y);
1297
- }
1298
- [data-pv-ui] .bg-linear-gradient-x,
1299
- .bg-linear-gradient-x {
1300
- background-image: var(--pv-color-linear-gradient-x);
1301
- }
1302
- [data-pv-ui] .bg-gradient-blue-pink,
1303
- .bg-gradient-blue-pink {
1304
- background-image: var(--pv-color-linear-gradient-x) !important;
1305
- }
1306
- [data-pv-ui] .bg-gradient-blue-green-y,
1307
- .bg-gradient-blue-green-y {
1308
- background-image: var(--pv-color-gradient-blue-green-y);
1309
- }
1310
- [data-pv-ui] .bg-gradient-blue-green-x,
1311
- .bg-gradient-blue-green-x {
1312
- background-image: var(--pv-color-gradient-blue-green-x);
1313
- }
1314
- [data-pv-ui] .bg-gradient-calendar,
1315
- .bg-gradient-calendar {
1316
- background-image: var(--pv-color-gradient-calendar);
1317
- }
1318
- [data-pv-ui] .hover\:bg-gradient-calendar:hover,
1319
- .hover\:bg-gradient-calendar:hover {
1320
- background-image: var(--pv-color-gradient-calendar);
1321
- }
1322
- @media (min-width: 768px) {
1323
- [data-pv-ui] .md\:hover\:bg-gradient-calendar:hover,
1324
- .md\:hover\:bg-gradient-calendar:hover {
1325
- background-image: var(--pv-color-gradient-calendar);
1326
- }
1327
- }
1328
- [data-pv-ui] .bg-nav-gradient,
1329
- .bg-nav-gradient {
1330
- background-image: var(--pv-color-nav-gradient);
1331
- }
1332
- [data-pv-ui] .bg-nav-gradient-mobile,
1333
- .bg-nav-gradient-mobile {
1334
- background-image: var(--pv-color-nav-gradient-mobile);
1335
- }
1336
1214
 
1337
- /* Toast notification colors - Scoped with prefix */
1338
- :root {
1339
- --pv-toastify-color-info: #2a67f6;
1340
- --pv-toastify-color-success: #10d1bb;
1341
- --pv-toastify-color-warning: #f8ec5b;
1342
- --pv-toastify-color-error: #ed3f55;
1343
- }
1215
+ .filter-button {
1216
+ background-color: var(--filter-button-background-color);
1217
+ font-family: var(--fontFamily-filter-button);
1218
+ }
1344
1219
 
1345
- /* Focus styles - Only for UI components with data-pv-ui */
1346
- [data-pv-ui] button:focus-visible,
1347
- button.pv-button:focus-visible {
1348
- @reference focus:outline-hidden;
1349
- @reference focus:ring-2;
1350
- @reference focus:ring-offset-2;
1351
- }
1220
+ .filter-button:hover {
1221
+ background-color: var(--filter-button-background-hover-color);
1222
+ }
1352
1223
 
1353
- /* Base layer styles - Only for UI components with data-pv-ui */
1354
- @layer base {
1355
- [data-pv-ui] button:not(:disabled),
1356
- [data-pv-ui] [role="button"]:not(:disabled) {
1357
- cursor: pointer;
1358
- }
1359
- }
1224
+ .filter-button-icon {
1225
+ background-color: var(--filter-button-icon-background-color);
1226
+ color: var(--filter-button-background-color);
1227
+ }
1360
1228
 
1361
- /* Editor styles - Only for UI components with data-pv-ui */
1362
- [data-pv-ui] .is-editor-empty:first-of-type::before {
1363
- @reference text-gray-800;
1364
- color: #333333 !important;
1365
- }
1229
+ .filter-button:hover .filter-button-icon {
1230
+ background-color: var(--filter-button-icon-background-hover-color);
1231
+ color: white;
1232
+ }
1366
1233
 
1367
- /* List styles - Only for UI components with data-pv-ui */
1368
- [data-pv-ui] ul {
1369
- @reference list-disc;
1370
- }
1371
1234
 
1372
- [data-pv-ui] ol {
1373
- @reference list-decimal;
1374
- }
1235
+ .search-box-input:disabled {
1236
+ opacity: 0.92;
1237
+ cursor: not-allowed;
1375
1238
  }
1376
1239
 
1377
- /* Table animations - Only for UI components with data-pv-ui */
1378
- [data-pv-ui] .table-animation-exit,
1379
- .table-animation-exit {
1380
- opacity: 1;
1381
- transition: opacity 300ms ease-out;
1240
+ .search-box-input:active,
1241
+ .search-box-input:focus,
1242
+ .search-box-input.active {
1243
+ width: var(--expanded-width, 300px);
1244
+ padding-left: 48px;
1245
+ transition: width .3s ease, padding-left .3s ease;
1246
+ border: 2px solid var(--search-box-border-color);
1382
1247
  }
1383
- [data-pv-ui] .table-animation-exit-active,
1384
- .table-animation-exit-active {
1385
- opacity: 0;
1386
- transition: opacity 300ms ease-out;
1248
+
1249
+ .search-box-input:focus-visible {
1250
+ outline: none;
1251
+ border: 1px solid var(--search-box-border-color);
1387
1252
  }
1388
- [data-pv-ui] .table-animation-enter,
1389
- .table-animation-enter {
1390
- opacity: 0;
1391
- transition: opacity 300ms ease-in;
1392
- }
1393
- [data-pv-ui] .table-animation-enter-active,
1394
- .table-animation-enter-active {
1253
+
1254
+ .search-box-input:focus::placeholder,
1255
+ .search-box-input.active::placeholder {
1256
+ color: #9ca3af;
1395
1257
  opacity: 1;
1396
- transition: opacity 300ms ease-in;
1258
+ transition: opacity .3s ease;
1397
1259
  }
1398
1260
 
1399
- /* Spin animation keyframes */
1400
- @keyframes spin {
1401
- from {
1402
- transform: rotate(0deg);
1403
- }
1404
- to {
1405
- transform: rotate(360deg);
1406
- }
1261
+ .search-box-input::placeholder {
1262
+ color: transparent;
1263
+ opacity: 0;
1407
1264
  }
1408
1265
 
1409
- @keyframes airplane-bounce {
1410
- 0% {
1411
- transform: translate3d(0, 0, 0);
1412
- }
1413
- 25% {
1414
- transform: translate3d(0, -2%, 0);
1415
- }
1416
- 50% {
1417
- transform: translate3d(0, 0, 0);
1418
- }
1419
- 75% {
1420
- transform: translate3d(0, 2%, 0);
1421
- }
1422
- 100% {
1423
- transform: translate3d(0, 0, 0);
1424
- }
1266
+ .search-box-input {
1267
+ border: 2px solid var(--search-box-border-color);
1268
+ }
1269
+
1270
+ .search-box-icon {
1271
+ color: var(--search-box-icon-color);
1425
1272
  }
1426
1273
 
1427
- @keyframes cloud-move {
1428
- 0% {
1429
- left: 100%;
1430
- }
1431
- 100% {
1432
- left: -100%;
1433
- }
1274
+
1275
+
1276
+ .search-box-clear:hover {
1277
+ background-color: var(--search-box-clear-icon-background-hover-color);
1434
1278
  }
1435
1279
 
1436
- /**
1437
- * Global CSS Styles
1438
- * Main stylesheet for the UI Package
1439
- */
1280
+ .search-box-results {
1281
+ box-shadow: 0 4px 80px rgba(0, 0, 0, .07), 0 .893452px 17.869px rgba(0, 0, 0, .042), 0 .266004px 5.32008px rgba(0, 0, 0, .028);
1282
+ }
1440
1283
 
1284
+ .search-box-clear {
1285
+ background-color: var(--search-box-clear-icon-background-color);
1286
+ color: var(--search-box-clear-icon-color);
1287
+ }
1288
+ .search-box-result-location {
1289
+ color: var(--search-box-result-location-color);
1290
+ }
1441
1291
 
1442
- @keyframes spin {
1443
- from {
1444
- transform: rotate(0deg);
1445
- }
1446
- to {
1447
- transform: rotate(360deg);
1448
- }
1292
+ .search-box-result:hover {
1293
+ background-color: var(--search-box-result-hover-background-color);
1294
+ }
1295
+ .search-box-result-type-page {
1296
+ color: var(--search-box-result-location-color);
1297
+ }
1298
+ .search-box-result-type-page:hover {
1299
+ color: color-mix(in srgb, var(--search-box-result-location-color) 70%, transparent);
1449
1300
  }
1450
1301
 
1451
- @keyframes flyToTarget {
1452
- 0% {
1453
- transform: translate(0, 0) scale(1);
1454
- opacity: 1;
1455
- }
1456
- 20% {
1457
- transform: translate(0, 0) scale(1.2);
1458
- opacity: 1;
1459
- }
1460
- 100% {
1461
- transform: translate(
1462
- calc(var(--end-x) - var(--start-x)),
1463
- calc(var(--end-y) - var(--start-y))
1464
- ) scale(0.9);
1465
- opacity: 1;
1466
- }
1302
+ .search-box-result-location {
1303
+ font-family: var(--font-open-sans), sans-serif;
1467
1304
  }
1468
1305
 
1469
- @keyframes popEffect {
1470
- 0% {
1471
- transform: scale(1);
1472
- }
1473
- 50% {
1474
- transform: scale(1.3);
1475
- }
1476
- 100% {
1477
- transform: scale(1);
1478
- }
1306
+ .dropdown-button {
1307
+ color: var(--color-primary);
1308
+ }
1309
+ .dropdown-button-text {
1310
+ color: var(--color-dark-600);
1311
+ }
1312
+ .dropdown-icon {
1313
+ color: var(--color-secondary);
1479
1314
  }
1480
1315
 
1481
- .flying-heart-icon {
1482
- animation: flyToTarget 1s cubic-bezier(0.25, -0.3, 0.75, 1.1) forwards;
1316
+
1317
+
1318
+ .counter-icon-count {
1319
+ background-color: var(--counter-icon-color);
1483
1320
  }
1321
+ .counter-icon-wrapper {
1322
+ margin: 0 8px;
1323
+ }
1324
+ .counter-icon-clickable:hover {
1325
+ background-color: var(--topMenu-background-color-hover);
1326
+ }
1327
+ /* .usp-icon {
1328
+ color: var(--color-alternative);
1329
+ } */
1484
1330
 
1485
- .counter-icon-pop {
1486
- animation: popEffect 0.3s ease-out;
1331
+ .usp-wrapper,
1332
+ .usp-wrapper a {
1333
+ color: var(--color-dark-600);
1334
+ text-decoration: none;
1335
+ font-family: var(--usp-font-family);
1487
1336
  }
1488
1337
 
1489
- .tiptap {
1490
- :first-child {
1491
- margin-top: 0;
1492
- }
1338
+ /* Container queries for responsive USP items */
1339
+ .usp-wrapper {
1340
+ container-type: inline-size;
1341
+ }
1493
1342
 
1494
- /* List styles */
1495
- ul,
1496
- ol {
1497
- padding: 0 1rem;
1498
- margin: 1.25rem 1rem 1.25rem 0.4rem;
1343
+ @container (max-width: 800px) {
1344
+ .usp-wrapper.flex-row .usp-item:nth-child(n+4) {
1345
+ display: none;
1346
+ }
1347
+ }
1499
1348
 
1500
- li p {
1501
- margin-top: 0.25em;
1502
- margin-bottom: 0.25em;
1349
+ @container (max-width: 640px) {
1350
+ .usp-wrapper.flex-row .usp-item:nth-child(n+3) {
1351
+ display: none;
1503
1352
  }
1504
- }
1353
+
1505
1354
  }
1506
1355
 
1507
- .font-lato {
1508
- font-family: var(--font-lato), sans-serif;
1356
+ @container (max-width: 480px) {
1357
+ .usp-wrapper.flex-row .usp-item:nth-child(n+2) {
1358
+ display: none;
1359
+ }
1509
1360
  }
1510
1361
 
1511
1362
 
1512
- /* Prijsvrij */
1513
- :root {
1514
- --prijsvrij-primary: #0092F2;
1515
- --prijsvrij-primary-dark-50: #004979;
1516
- --prijsvrij-primary-dark-25: #006DB5;
1517
- --prijsvrij-primary-light-25: #40ADF5;
1518
- --prijsvrij-primary-light-50: #80C8F8;
1519
- --prijsvrij-primary-light-75: #EFF8FE;
1520
-
1521
- --prijsvrij-secondary: #003593;
1522
- --prijsvrij-secondary-dark-50: #1A499E;
1523
- --prijsvrij-secondary-dark-25: #335DA9;
1524
- --prijsvrij-secondary-light-25: #6686BE;
1525
- --prijsvrij-secondary-light-50: #B2C2DF;
1526
- --prijsvrij-secondary-light-75: #E5EBF4;
1527
-
1528
- --prijsvrij-alternative: #FDE92F;
1529
- --prijsvrij-alternative-dark-50: #7F7518;
1530
- --prijsvrij-alternative-dark-25: #BEAF23;
1531
- --prijsvrij-alternative-light-25: #FEEF63;
1532
- --prijsvrij-alternative-light-50: #FEF497;
1533
- --prijsvrij-alternative-light-75: #FFFACB;
1534
-
1535
- --prijsvrij-alternative2: #D90000;
1536
- --prijsvrij-alternative2-dark-50: #730000;
1537
- --prijsvrij-alternative2-dark-25: #A60000;
1538
- --prijsvrij-alternative2-light-25: #E13333;
1539
- --prijsvrij-alternative2-light-50: #EC8080;
1540
- --prijsvrij-alternative2-light-75: #F7CCCC;
1541
-
1542
- --prijsvrij-alternative3: #339900;
1543
- --prijsvrij-alternative3-dark-50: #1A4D00;
1544
- --prijsvrij-alternative3-dark-25: #267300;
1545
- --prijsvrij-alternative3-light-25: #74B555;
1546
- --prijsvrij-alternative3-light-50: #99CC80;
1547
- --prijsvrij-alternative3-light-75: #CCE5BF;
1363
+ .middle-navigation {
1364
+ color: #73726e;
1365
+ font-family: var(--middle-navigation-font-family);
1366
+ }
1548
1367
 
1549
- --prijsvrij-danger-red: #D90000;
1550
- --prijsvrij-danger-red-hover: #A60000;
1551
- --prijsvrij-danger-red-disabled: #F7CCCC;
1368
+ .middle-navigation li {
1369
+ transition: all 0.3s ease-in-out;
1370
+ }
1552
1371
 
1553
- --prijsvrij-dark-600: #333333;
1554
- --prijsvrij-dark-500: #1a1a1a;
1555
- --prijsvrij-dark-400: #262626;
1556
- --prijsvrij-dark-300: #666666;
1557
- --prijsvrij-dark-200: #999999;
1372
+ .middle-navigation li:hover {
1373
+ color: var(--color-dark-200);
1374
+ }
1375
+ /* Menu styles */
1376
+ .menu-item {
1377
+ position: relative;
1378
+ }
1558
1379
 
1559
- --prijsvrij-light-600: #E0E0E0;
1560
- --prijsvrij-light-500: #707070;
1561
- --prijsvrij-light-400: #A8A8A8;
1562
- --prijsvrij-light-300: #E8E8E8;
1563
- --prijsvrij-light-200: #EFEFEF;
1564
1380
 
1565
- --btn-prijsvrij-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.11),0 1px 5px rgba(0,0,0,.12);
1381
+ .menu-item:hover:has(.menu-dropdown) .menu-link {
1382
+ background-color: white;
1383
+ color: var(--menu-link-hover-color);
1384
+ }
1566
1385
 
1567
- /* D-reizen */
1568
- --dreizen-primary: #0077BF;
1569
- --dreizen-primary-100: #003C60;
1570
- --dreizen-primary-200: #00598F;
1571
- --dreizen-primary-300: #80BBDF;
1572
-
1573
- --dreizen-secondary: #FF7801;
1574
- --dreizen-secondary-100: #803C00;
1575
- --dreizen-secondary-200: #BF5A01;
1576
- --dreizen-secondary-300: #FF9A40;
1577
- --dreizen-secondary-400: #FFEEDF;
1578
-
1579
- --dreizen-alternative: #52C75D;
1580
- --dreizen-alternative-100: #29642E;
1581
- --dreizen-alternative-200: #3D9546;
1582
- --dreizen-alternative-300: #72D17B;
1583
- --dreizen-alternative-400: #93DC9A;
1386
+ .menu-item:hover {
1387
+ background: rgba(0, 0, 0, .1);
1388
+ border-radius: 4px;
1389
+ }
1584
1390
 
1585
- --dreizen-danger-red: #cc3433;
1586
- --dreizen-danger-red-hover: #992726;
1587
- --dreizen-danger-red-disabled: #e68080;
1588
-
1589
- --dreizen-dark-600: #333333;
1590
- --dreizen-dark-500: #1a1a1a;
1591
- --dreizen-dark-400: #262626;
1592
- --dreizen-dark-300: #666666;
1593
- --dreizen-dark-200: #999999;
1391
+ .menu-item:hover .menu-link {
1392
+ color: white;
1393
+ }
1594
1394
 
1595
- --dreizen-light-600: #E8E8E8;
1596
- --dreizen-light-500: #747474;
1597
- --dreizen-light-400: #AEAEAE;
1598
- --dreizen-light-300: #F4F4F4;
1599
- --dreizen-light-200: #EEEEEE;
1600
-
1601
- --btn-dreizen-shadow: 0;
1395
+ .menu-item:hover .menu-item-icon {
1396
+ color: var(--menu-item-icon-hover-color);
1397
+ }
1602
1398
 
1603
- --usp-icon-color: #52c65c;
1399
+ .menu-link {
1400
+ color: var(--menu-link-color);
1604
1401
  }
1605
1402
 
1403
+ .menu-item-icon {
1404
+ color: var(--menu-item-icon-color);
1405
+ }
1606
1406
 
1607
- /* Apply de juiste variabelen op basis van data-brand */
1608
- :root[data-brand="prijsvrij"],
1609
- [data-brand="prijsvrij"] {
1610
- --color-primary: var(--prijsvrij-primary);
1611
- --color-primary-dark-50: var(--prijsvrij-primary-dark-50);
1612
- --color-primary-dark-25: var(--prijsvrij-primary-dark-25);
1613
- --color-primary-light-25: var(--prijsvrij-primary-light-25);
1614
- --color-primary-light-50: var(--prijsvrij-primary-light-50);
1615
- --color-primary-light-75: var(--prijsvrij-primary-light-75);
1616
-
1617
- --color-secondary: var(--prijsvrij-secondary);
1618
- --color-secondary-dark-50: var(--prijsvrij-secondary-dark-50);
1619
- --color-secondary-dark-25: var(--prijsvrij-secondary-dark-25);
1620
- --color-secondary-light-25: var(--prijsvrij-secondary-light-25);
1621
- --color-secondary-light-50: var(--prijsvrij-secondary-light-50);
1622
- --color-secondary-light-75: var(--prijsvrij-secondary-light-75);
1623
-
1624
- --color-alternative: var(--prijsvrij-alternative);
1625
- --color-alternative-dark-50: var(--prijsvrij-alternative-dark-50);
1626
- --color-alternative-dark-25: var(--prijsvrij-alternative-dark-25);
1627
- --color-alternative-light-25: var(--prijsvrij-alternative-light-25);
1628
- --color-alternative-light-50: var(--prijsvrij-alternative-light-50);
1629
- --color-alternative-light-75: var(--prijsvrij-alternative-light-75);
1630
-
1631
- --color-alternative2: var(--prijsvrij-alternative2);
1632
- --color-alternative2-dark-50: var(--prijsvrij-alternative2-dark-50);
1633
- --color-alternative2-dark-25: var(--prijsvrij-alternative2-dark-25);
1634
- --color-alternative2-light-25: var(--prijsvrij-alternative2-light-25);
1635
- --color-alternative2-light-50: var(--prijsvrij-alternative2-light-50);
1636
- --color-alternative2-light-75: var(--prijsvrij-alternative2-light-75);
1637
-
1638
- --color-alternative3: var(--prijsvrij-alternative3);
1639
- --color-alternative3-dark-50: var(--prijsvrij-alternative3-dark-50);
1640
- --color-alternative3-dark-25: var(--prijsvrij-alternative3-dark-25);
1641
- --color-alternative3-light-25: var(--prijsvrij-alternative3-light-25);
1642
- --color-alternative3-light-50: var(--prijsvrij-alternative3-light-50);
1643
- --color-alternative3-light-75: var(--prijsvrij-alternative3-light-75);
1644
-
1645
- --color-dark-600: var(--prijsvrij-dark-600);
1646
- --color-dark-500: var(--prijsvrij-dark-500);
1647
- --color-dark-400: var(--prijsvrij-dark-400);
1648
- --color-dark-300: var(--prijsvrij-dark-300);
1649
- --color-dark-200: var(--prijsvrij-dark-200);
1650
-
1651
- --color-light-600: var(--prijsvrij-light-600);
1652
- --color-light-500: var(--prijsvrij-light-500);
1653
- --color-light-400: var(--prijsvrij-light-400);
1654
- --color-light-300: var(--prijsvrij-light-300);
1655
- --color-light-200: var(--prijsvrij-light-200);
1656
-
1657
- --radius: var(--prijsvrij-radius);
1658
-
1659
- --fontFamily-price-check: var(--font-open-sans), sans-serif;
1660
- --fontFamily-price-check-price: "Hermes Maia T4", sans-serif;
1661
- --fontFamily-blog-widget: "Hermes Maia T4", sans-serif;
1662
- --fontFamily-blog-widget-date: var(--font-open-sans), sans-serif;
1407
+ .menu-dropdown {
1408
+ opacity: 0;
1409
+ pointer-events: none;
1410
+ transition: opacity 0.15s ease-in-out;
1411
+ max-height: calc(100vh - 32px);
1412
+ overflow: hidden;
1413
+ }
1663
1414
 
1664
- --fontWeight-price-text: 400;
1665
- --price-background: var(--prijsvrij-alternative);
1666
- --price-background-back: #ffbf2b;
1415
+ .menu-item[data-open="true"][data-ready="false"] .menu-dropdown {
1416
+ opacity: 0;
1417
+ visibility: hidden;
1418
+ pointer-events: none;
1419
+ }
1667
1420
 
1421
+ .menu-item[data-open="true"][data-ready="true"] .menu-dropdown {
1422
+ opacity: 1;
1423
+ visibility: visible;
1424
+ pointer-events: auto;
1425
+ }
1668
1426
 
1669
- /* Buttons */
1670
- --primary-btn-hover-color: var(--prijsvrij-alternative2-dark-25);
1671
- --primary-btn-color: var(--prijsvrij-alternative2);
1672
- --primary-btn-inactive-color: var(--prijsvrij-alternative2-light-75);
1673
- --primary-btn-box-shadow: 0 3px var(--prijsvrij-alternative2-dark-50);
1674
- --primary-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative2-dark-50);
1675
- --primary-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative2-dark-50);
1427
+ /* Create invisible bridge to prevent gap */
1428
+ .menu-dropdown::before {
1429
+ content: '';
1430
+ position: absolute;
1431
+ top: -12px;
1432
+ left: 0;
1433
+ right: 0;
1434
+ height: 12px;
1435
+ background: transparent;
1436
+ }
1676
1437
 
1677
- --secondary-btn-hover-color: var(--prijsvrij-alternative3-dark-25);
1678
- --secondary-btn-color: var(--prijsvrij-alternative3);
1679
- --secondary-btn-inactive-color: var(--prijsvrij-alternative3-light-75);
1680
- --secondary-btn-box-shadow: 0 3px var(--prijsvrij-alternative3-dark-50);
1681
- --secondary-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative3-dark-50);
1682
- --secondary-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative3-dark-50);
1438
+ .menu-dropdown.bottom-full::before {
1439
+ top: -12px;
1440
+ }
1683
1441
 
1684
- --alternative-btn-hover-color: var(--prijsvrij-alternative-dark-25);
1685
- --alternative-btn-color: var(--prijsvrij-alternative);
1686
- --alternative-btn-inactive-color: var(--prijsvrij-alternative-light-75);
1687
- --alternative-btn-box-shadow: 0 3px var(--prijsvrij-alternative-dark-50);
1688
- --alternative-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative-dark-50);
1689
- --alternative-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative-dark-50);
1442
+ .menu-dropdown.top-full::before {
1443
+ bottom: -12px;
1444
+ top: auto;
1445
+ }
1690
1446
 
1691
- --alternative2-btn-hover-color: var(--prijsvrij-alternative2-dark-25);
1692
- --alternative2-btn-color: var(--prijsvrij-alternative2);
1693
- --alternative2-btn-inactive-color: var(--prijsvrij-alternative2-light-75);
1694
- --alternative2-btn-box-shadow: 0 3px var(--prijsvrij-alternative2-dark-50);
1695
- --alternative2-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative2-dark-50);
1696
- --alternative2-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative2-dark-50);
1697
-
1698
- --alternative3-btn-hover-color: var(--prijsvrij-alternative3-dark-25);
1699
- --alternative3-btn-color: var(--prijsvrij-alternative3);
1700
- --alternative3-btn-inactive-color: var(--prijsvrij-alternative3-light-75);
1701
- --alternative3-btn-box-shadow: 0 3px var(--prijsvrij-alternative3-dark-50);
1702
- --alternative3-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative3-dark-50);
1703
- --alternative3-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative3-dark-50);
1447
+ .menu-category:not(:last-child) {
1448
+ border-bottom: 1px solid #e5e7eb;
1449
+ }
1450
+
1451
+ .menu-dropdown a {
1452
+ white-space: nowrap;
1453
+ }
1454
+
1455
+ /* Ensure dropdown stays above other content */
1456
+ .menu-dropdown {
1457
+ z-index: 50;
1458
+ }
1459
+
1460
+ /* Add subtle animation for menu items */
1461
+ .menu-item > a {
1462
+ position: relative;
1463
+ transition: color 0.2s ease;
1464
+ }
1465
+
1466
+ /* Sticky category headers for better navigation when scrolling */
1467
+ .menu-dropdown .sticky {
1468
+ position: sticky;
1469
+ top: 0;
1470
+ background: white;
1471
+ z-index: 10;
1472
+ }
1473
+
1474
+ /* Hide dropdown scrollbars (keep scroll functionality) */
1475
+ .menu-dropdown {
1476
+ scrollbar-width: none; /* Firefox */
1477
+ -ms-overflow-style: none; /* IE/Edge legacy */
1478
+ }
1479
+
1480
+ .menu-dropdown::-webkit-scrollbar {
1481
+ width: 0;
1482
+ height: 0;
1483
+ }
1484
+
1485
+ /* Prevent dropdown from going off-screen horizontally */
1486
+ .menu-dropdown {
1487
+ max-width: 90vw;
1488
+ }
1489
+
1490
+ /* Ensure dropdown never goes negative left */
1491
+ .menu-dropdown.left-0 {
1492
+ left: 0;
1493
+ right: auto;
1494
+ }
1495
+
1496
+ /* Handle dropdown positioning */
1497
+ .menu-dropdown.top-full {
1498
+ top: 100%;
1499
+ }
1704
1500
 
1705
- --logo-url: var(--prijsvrij-logo-url);
1501
+ .menu-dropdown.bottom-full {
1502
+ bottom: 100%;
1503
+ margin-bottom: 4px;
1504
+ }
1706
1505
 
1707
- --btn-shadow: var(--btn-prijsvrij-shadow);
1708
- --btn-outline-border: var(--prijsvrij-primary);
1709
- --btn-outline-color: var(--prijsvrij-primary);
1506
+ .menu-dropdown.left-0 {
1507
+ left: 0;
1508
+ }
1710
1509
 
1711
- --btn-outline-hover-border-color: var(--prijsvrij-primary-dark-25);
1712
- --btn-outline-hover-color: var(--prijsvrij-primary-dark-25);
1510
+ .menu-dropdown.right-0 {
1511
+ right: 0;
1512
+ }
1713
1513
 
1714
- --btn-text-color: var(--prijsvrij-primary);
1514
+ .menu-dropdown.left-1\/2 {
1515
+ left: 50%;
1516
+ }
1715
1517
 
1716
- --btn-text-hover-color: var(--prijsvrij-primary-dark-25);
1717
- --price-check-color: var(--prijsvrij-alternative2);
1718
- --price-check-price-color: var(--prijsvrij-alternative2);
1719
- --price-text-padding-left: 0.5rem;
1518
+ .menu-dropdown.-translate-x-1\/2 {
1519
+ transform: translateX(-50%);
1520
+ }
1720
1521
 
1721
- --danger-red: var(--prijsvrij-danger-red);
1722
- --danger-red-hover: var(--prijsvrij-danger-red-hover);
1723
- --danger-red-disabled: var(--prijsvrij-danger-red-disabled);
1724
- --price-text-padding-bottom: -0.5rem;
1725
- --price-price-padding-left: 1rem;
1726
- --price-price-padding-right: 0.5rem;
1727
- --price-minus-right: 10px;
1728
- --price-minus-bottom: 10px;
1729
- --price-price-margin-top: 0;
1730
1522
 
1731
- --toggle-active-background-color: var(--prijsvrij-primary);
1732
- --toggle-inactive-background-color: #EFF8FE;
1733
- --toggle-active-color: white;
1734
- --toggle-inactive-color: var(--prijsvrij-dark-600);
1735
- --toggle-font-family: var(--font-open-sans), sans-serif;
1523
+ /* Grid layout for dropdown */
1524
+ .menu-dropdown .grid {
1525
+ grid-template-columns: repeat(3, minmax(200px, 1fr));
1526
+ }
1736
1527
 
1737
- --filter-button-background-color: var(--prijsvrij-primary);
1738
- --filter-button-background-hover-color: #005cbb;
1739
- --fontFamily-filter-button: var(--font-open-sans), sans-serif;
1528
+ /* Category styling in grid */
1529
+ .menu-dropdown .menu-category {
1530
+ min-width: 200px;
1531
+ }
1740
1532
 
1741
- --filter-button-icon-background-color: #80c8f8;
1742
- --filter-button-icon-background-hover-color: #002c49;
1533
+ .footer-navigation-link {
1534
+ color: var(--color-footer-navigation-link);
1535
+ }
1743
1536
 
1744
- --search-box-border-color: transparent;
1745
- --search-box-icon-color: var(--prijsvrij-dark-600);
1746
- --search-box-clear-icon-background-color: #e3e3e3;
1747
- --search-box-clear-icon-background-hover-color: #a0a0a0;
1748
- --search-box-clear-icon-color: white;
1537
+ .footer-navigation-category-link {
1538
+ color: var(--color-footer-navigation-category-link);
1539
+ }
1540
+ .blog-widget-title {
1541
+ font-family: var(--fontFamily-blog-widget);
1542
+ }
1543
+ .blog-widget-date {
1544
+ font-family: var(--fontFamily-blog-widget-date);
1545
+ }
1546
+ .searchBlock {
1547
+ background-color: var(--searchBlock-background-color);
1548
+ color: var(--searchBlock-text-color);
1549
+ font-size: var(--searchBlock-text-size);
1550
+ font-weight: var(--searchBlock-text-weight);
1551
+ font-family: var(--searchBlock-font-family);
1552
+ border-radius: var(--searchBlock-border-radius);
1553
+ }
1749
1554
 
1750
- --search-box-result-location-color: var(--prijsvrij-primary);
1751
- --search-box-result-hover-background-color: #edf7fe;
1555
+ .searchBlockButton {
1556
+ background-color: white;
1557
+ border-radius: var(--searchBlockButtonRadius);
1558
+ min-height: var(--searchBlockButtonHeight);
1559
+ }
1752
1560
 
1753
- --topMenu-background-color: #0083da;
1754
- --topHeaderMenu-background-color: #0083da;
1755
- --topMenu-background-color-hover: #004979;
1756
- --topMenu-boxShadow-color: transparent;
1757
- --topMenu-height: 40px;
1561
+ .searchBlockButtonLabel {
1562
+ font-size: var(--searchBlockButtonLabel-text-size) !important;
1563
+ font-weight: var(--searchBlockButtonLabel-text-weight);
1564
+ font-family: var(--searchBlockButtonLabel-font-family);
1565
+ color: var(--searchBlockButtonLabel-color);
1566
+ }
1758
1567
 
1759
- --counter-icon-color: #d90000;
1568
+ .searchBlockButtonIcon {
1569
+ color: var(--searchBlockButtonIcon-color);
1570
+ }
1760
1571
 
1761
- --usp-font-family: var(--font-open-sans), sans-serif;
1762
- --middle-navigation-font-family: var(--font-open-sans), sans-serif;
1763
- --fontFamily-blog-widget: "Hermes Maia T4";
1572
+ .searchBlockButtonSelectedValue {
1764
1573
 
1765
- --menu-link-color: white;
1766
- --menu-link-hover-color: var(--prijsvrij-primary);
1767
- --menu-item-icon-color: white;
1574
+ font-family: var(--searchBlockButtonSelectedValue-font-family);
1575
+ color: var(--searchBlockButtonSelectedValue-color);
1576
+ font-size: var(--searchBlockButtonSelectedValue-text-size) !important;
1577
+ font-weight: var(--searchBlockButtonSelectedValue-text-weight);
1578
+ margin-top: var(--searchBlockButtonSelectedValue-margin-top);
1768
1579
 
1769
- --color-footer-navigation-link: var(--prijsvrij-primary);
1770
- --color-footer-navigation-category-link: var(--prijsvrij-secondary);
1580
+ }
1771
1581
 
1772
- --searchBlock-background-color: var(--prijsvrij-alternative);
1773
- --searchBlock-text-color: var(--prijsvrij-secondary);
1774
- --searchBlock-text-size: 24px;
1775
- --searchBlock-text-weight: 400;
1776
- --searchBlock-font-family: "Hermes Maia T4", sans-serif;
1777
- --searchBlock-border-radius: 8px;
1582
+ .searchBlockButtonSecondarySelectedValue {
1583
+ font-size: var(--searchBlockButtonLabel-text-size) !important;
1584
+ color: var(--searchBlockButtonIcon-color);
1585
+ }
1778
1586
 
1779
- --searchBlockButtonLabel-text-size: clamp(10px, 2.5vw, 12px);
1780
- --searchBlockButtonLabel-text-weight: 600;
1781
- --searchBlockButtonLabel-font-family: var(--font-open-sans), sans-serif;
1782
- --searchBlockButtonLabel-color: var(--prijsvrij-dark-300);
1783
- --searchBlockButtonIcon-color: var(--prijsvrij-secondary);
1587
+ .searchBlockButtonDownIcon {
1588
+ color: var(--searchBlockButtonDownIcon-color);
1589
+ width: var(--searchBlockButtonDownIcon-size);
1590
+ height: var(--searchBlockButtonDownIcon-size);
1591
+ }
1592
+ .category-filter {
1593
+ font-family: var(--category-filter-font-family);
1594
+ }
1595
+ .collection-title {
1596
+ font-family: var(--collection-title-font-family)
1597
+ }
1784
1598
 
1785
- --searchBlockButtonRadius: 4px;
1786
- --searchBlockButtonHeight: 50px;
1599
+ .collection-description {
1600
+ font-family: var(--collection-description-font-family);
1601
+ color: var(--color-dark-300);
1602
+
1603
+ }
1604
+ .review {
1605
+ box-shadow: 0 4px 80px rgba(0, 0, 0, .07), 0 .893452px 17.869px rgba(0, 0, 0, .042), 0 .266004px 5.32008px rgba(0, 0, 0, .028);
1606
+ }
1787
1607
 
1788
- --searchBlockButtonSelectedValue-font-family: var(--font-open-sans), sans-serif;
1789
- --searchBlockButtonSelectedValue-color: var(--prijsvrij-dark-400);
1790
- --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
1791
- --searchBlockButtonSelectedValue-text-weight: 400;
1792
- --searchBlockButtonSelectedValue-margin-top: -4px;
1608
+ .review-color {
1609
+ color: var(--review-color);
1610
+ }
1793
1611
 
1794
- --searchBlockButtonDownIcon-color: var(--prijsvrij-primary-light-25);
1795
- --searchBlockButtonDownIcon-size: 20px;
1612
+ .review-number-color {
1613
+ background: var(--review-number-background-color);
1614
+ color: var(--review-number-color);
1615
+ }
1796
1616
 
1797
- --category-filter-font-family: var(--font-open-sans), sans-serif;
1617
+ .review-shadow {
1618
+ box-shadow: var(--review-shadow);
1619
+ }
1798
1620
 
1799
- --collection-title-font-family: "Hermes Maia T4", sans-serif;
1800
- --collection-description-font-family: var(--font-open-sans), sans-serif;
1621
+ .review-small {
1622
+ background: var(--review-color);
1623
+ color: white;
1624
+ }
1801
1625
 
1802
- --usp-icon-color: var(--prijsvrij-alternative3);
1803
- --review-color: var(--prijsvrij-alternative3);
1804
- --review-number-background-color: inherit;
1805
- --review-number-color: var(--prijsvrij-alternative3);
1806
- --review-shadow: 0 4px 80px rgba(0,0,0,.07),0 .893452px 17.869px rgba(0,0,0,.042),0 .266004px 5.32008px rgba(0,0,0,.028);
1626
+ .review-small-arrow {
1627
+ border-top-color: var(--review-color);
1628
+ }
1629
+ .hotel-accomodation-results-title {
1630
+ color: var(--hotel-accomodation-results-title-color);
1631
+ font-family: var(--hotel-accomodation-results-title-font);
1632
+ }
1807
1633
 
1808
- --hotel-accomodation-results-title-color: var(--prijsvrij-secondary);
1809
- --hotel-accomodation-results-title-font: "Hermes Maia T4", sans-serif;
1634
+ .hotel-accomodation-results-location {
1635
+ font-family: var(--hotel-accomodation-results-location-font);
1636
+ color: var(--hotel-accomodation-results-location-color);
1637
+ }
1638
+ .coupon-bite-top {
1639
+ -webkit-mask-image: radial-gradient(circle 12px at 0 100%, transparent 99%, #000), radial-gradient(circle 12px at 100% 100%, transparent 99%, #000);
1640
+ -webkit-mask-size: 51% 100%;
1641
+ -webkit-mask-position: left, right;
1642
+ -webkit-mask-repeat: no-repeat;
1643
+ mask-image: radial-gradient(circle 12px at 0 100%, transparent 99%, #000), radial-gradient(circle 12px at 100% 100%, transparent 99%, #000);
1644
+ mask-size: 51% 100%;
1645
+ mask-position: left, right;
1646
+ mask-repeat: no-repeat;
1647
+ }
1810
1648
 
1811
- --hotel-accomodation-results-location-font: var(--font-open-sans), sans-serif;
1812
- --hotel-accomodation-results-location-color: #a8a8a8;
1649
+ .coupon-bite-dashes {
1650
+ -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 10px, #000 10px 18px);
1651
+ mask-image: repeating-linear-gradient(90deg, transparent 0 10px, #000 10px 18px);
1652
+ }
1813
1653
 
1814
- --viewed-accomodations-title-font: var(--font-open-sans), sans-serif;
1815
- --viewed-accomodations-title-text-color: var(--color-secondary);
1816
- --viewed-accomodations-header: var(--font-open-sans), sans-serif;
1817
- --viewed-accomodations-header-font-size: 18px;
1654
+ .coupon-bite-bottom {
1655
+ -webkit-mask-image: radial-gradient(circle 12px at 0 0, transparent 99%, #000), radial-gradient(circle 12px at 100% 0, transparent 99%, #000);
1656
+ -webkit-mask-size: 51% 100%;
1657
+ -webkit-mask-position: left, right;
1658
+ -webkit-mask-repeat: no-repeat;
1659
+ mask-image: radial-gradient(circle 12px at 0 0, transparent 99%, #000), radial-gradient(circle 12px at 100% 0, transparent 99%, #000);
1660
+ mask-size: 51% 100%;
1661
+ mask-position: left, right;
1662
+ mask-repeat: no-repeat;
1663
+ }
1664
+ .gift-card {
1665
+ fill: linear-gradient(215deg, rgba(255, 255, 255, 0.20) -115.47%, #0092F2 36.73%);
1666
+ font-family: var(--font-open-sans), sans-serif;
1667
+ }
1818
1668
 
1819
- --viewed-accomodations-empty-color: var(--color-secondary);
1669
+ .gift-card-amount {
1670
+ font-family: "Hermes Maia T4", sans-serif;
1671
+ }
1820
1672
 
1821
- --viewed-accomodations-empty-text-color: var(--color-dark-400);
1673
+ .popup-title {
1674
+ font-family: var(--popup-title-font-family);
1675
+ }
1822
1676
 
1823
- --quantity-buttons-border-color: var(--color-primary);
1824
- --quantity-buttons-color: var(--color-primary);
1825
- --quantity-buttons-border-color-hover: var(--color-secondary);
1826
- --quantity-buttons-value-color: var(--color-dark-400);
1677
+ .with-backdrop::backdrop {
1678
+ background-color: rgba(0, 0, 0, 0.5) !important;
1679
+ }
1827
1680
 
1828
- --matrix-table-days-color: var(--color-dark-400);
1829
- --matrix-table-month-header-color: var(--color-secondary);
1830
- --matrix-table-month-header-font-family: "Hermes Maia T4", sans-serif;
1681
+ /* Alternative approach for browsers that don't support ::backdrop */
1682
+ [data-popover].with-backdrop::backdrop {
1683
+ background-color: rgba(0, 0, 0, 0.5) !important;
1684
+ }
1831
1685
 
1832
- --matrix-table-cell-color: var(--prijsvrij-primary-light-75);
1833
- --matrix-table-cell-border-color: var(--prijsvrij-light-600);
1834
- --matrix-table-cell-cheapest-color: var(--prijsvrij-primary);
1835
- --matrix-table-cell-cheapest-border-color: var(--prijsvrij-primary-dark-25);
1686
+ .rotated-image-0,
1687
+ .rotated-image-1 {
1688
+ box-shadow: 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
1689
+ }
1836
1690
 
1837
- --matrix-table-cell-active-color: var(--prijsvrij-alternative);
1838
- --matrix-table-cell-active-border-color: #e4d22b;
1839
- --matrix-table-cell-active-text-color: var(--prijsvrij-alternative2);
1691
+ .rotated-image-2 {
1692
+ box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.07), 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
1693
+ }
1694
+ .spotlights-item {
1695
+ font-family: "Hermes Maia T4";
1696
+ }
1840
1697
 
1841
- --matrix-table-days-amount-font: var(--font-open-sans), sans-serif;
1698
+ .viewed-accomodations {
1699
+ box-shadow: 0 1px 5px rgba(0,0,0,.12),0 2px 6.4px rgba(0,0,0,.11),0 3px 9.6px -2px rgba(0,0,0,.2);
1700
+ }
1842
1701
 
1843
- --matrix-table-days-weekday-color: var(--color-light-400);
1702
+ .viewed-accomodations-title {
1703
+ font-family: var(--viewed-accomodations-title-font);
1704
+ color: var(--viewed-accomodations-title-text-color);
1705
+ }
1844
1706
 
1845
- --popup-title-font-family: "Hermes Maia T4", sans-serif;
1707
+ .viewed-accomodations-header {
1708
+ font-family: var(--viewed-accomodations-header);
1709
+ color: var(--viewed-accomodations-title-text-color);
1710
+ font-size: var(--viewed-accomodations-header-font-size);
1711
+ }
1846
1712
 
1847
-
1713
+ .viewed-accomodations-items, .viewed-accomodations-empty-header {
1714
+ color: var(--viewed-accomodations-empty-color);
1848
1715
  }
1849
1716
 
1850
- :root[data-brand="dreizen"],
1851
- [data-brand="dreizen"] {
1852
- --color-primary: var(--dreizen-primary);
1853
- --color-primary-100: var(--dreizen-primary-100);
1854
- --color-primary-200: var(--dreizen-primary-200);
1855
- --color-primary-300: var(--dreizen-primary-300);
1856
- --color-primary-light-25: var(--dreizen-primary-200);
1857
- --color-primary-light-50: var(--dreizen-primary-300);
1717
+ .viewed-accomodations-empty-text-color {
1718
+ color: var(--viewed-accomodations-empty-text-color);
1719
+ }
1720
+ .quantity-buttons-border-color {
1721
+ border-color: var(--quantity-buttons-border-color);
1722
+ }
1858
1723
 
1859
- --color-secondary: var(--dreizen-secondary);
1860
- --color-secondary-100: var(--dreizen-secondary-100);
1861
- --color-secondary-200: var(--dreizen-secondary-200);
1862
- --color-secondary-300: var(--dreizen-secondary-300);
1863
- --color-secondary-400: var(--dreizen-secondary-400);
1864
-
1865
- --color-alternative: var(--dreizen-alternative);
1866
- --color-alternative-100: var(--dreizen-alternative-100);
1867
- --color-alternative-200: var(--dreizen-alternative-200);
1868
- --color-alternative-300: var(--dreizen-alternative-300);
1869
- --color-alternative-400: var(--dreizen-alternative-400);
1870
-
1871
- --color-dark-600: var(--dreizen-dark-600);
1872
- --color-dark-500: var(--dreizen-dark-500);
1873
- --color-dark-400: var(--dreizen-dark-400);
1874
- --color-dark-300: var(--dreizen-dark-300);
1875
- --color-dark-200: var(--dreizen-dark-200);
1876
-
1877
- --color-light-600: var(--dreizen-light-600);
1878
- --color-light-500: var(--dreizen-light-500);
1879
- --color-light-400: var(--dreizen-light-400);
1880
- --color-light-300: var(--dreizen-light-300);
1881
- --color-light-200: var(--dreizen-light-200);
1724
+ .quantity-buttons-border-color:hover:not(:disabled) {
1725
+ border-color: var(--quantity-buttons-border-color-hover);
1726
+ }
1882
1727
 
1883
- /* Buttons */
1884
- --primary-btn-color: var(--dreizen-primary);
1885
- --primary-btn-inactive-color: var(--dreizen-primary-400);
1886
- --primary-btn-box-shadow: 0 3px var(--dreizen-primary-100);
1887
- --primary-btn-box-shadow-active: 0 1px var(--dreizen-primary-100);
1888
- --primary-btn-box-shadow-hover: 0 6px var(--dreizen-primary-100);
1728
+ .quantity-buttons-border-color:hover:not(:disabled) .quantity-buttons-color {
1729
+ color: var(--quantity-buttons-border-color-hover);
1730
+ }
1889
1731
 
1890
- --secondary-btn-color: var(--dreizen-secondary);
1891
- --secondary-btn-inactive-color: var(--dreizen-secondary-400);
1892
- --secondary-btn-box-shadow: 0 3px var(--dreizen-secondary-200);
1893
- --secondary-btn-box-shadow-active: 0 1px var(--dreizen-secondary-200);
1894
- --secondary-btn-box-shadow-hover: 0 6px var(--dreizen-secondary-200);
1895
-
1896
- --alternative-btn-hover-color: var(--dreizen-alternative-200);
1897
- --alternative-btn-color: var(--dreizen-alternative);
1898
- --alternative-btn-inactive-color: var(--dreizen-alternative-300);
1899
- --alternative-btn-box-shadow: 0 3px var(--dreizen-alternative-200);
1900
- --alternative-btn-box-shadow-active: 0 1px var(--dreizen-alternative-200);
1901
- --alternative-btn-box-shadow-hover: 0 6px var(--dreizen-alternative-200);
1902
-
1903
- --alternative2-btn-hover-color: var(--dreizen-alternative2-200);
1904
- --alternative2-btn-color: var(--dreizen-alternative2);
1905
- --alternative2-btn-inactive-color: var(--dreizen-alternative2-300);
1906
- --alternative2-btn-box-shadow: 0 3px var(--dreizen-alternative2-200);
1907
- --alternative2-btn-box-shadow-active: 0 1px var(--dreizen-alternative2-200);
1908
- --alternative2-btn-box-shadow-hover: 0 6px var(--dreizen-alternative2-200);
1909
-
1910
- --alternative3-btn-hover-color: var(--dreizen-alternative3-200);
1911
- --alternative3-btn-color: var(--dreizen-alternative3);
1912
- --alternative3-btn-inactive-color: var(--dreizen-alternative3-300);
1913
- --alternative3-btn-box-shadow: 0 3px var(--dreizen-alternative3-200);
1914
- --alternative3-btn-box-shadow-active: 0 1px var(--dreizen-alternative3-200);
1915
- --alternative3-btn-box-shadow-hover: 0 6px var(--dreizen-alternative3-200);
1916
-
1917
- --logo-url: var(--dreizen-logo-url);
1732
+ .quantity-buttons-color {
1733
+ color: var(--quantity-buttons-color);
1734
+ }
1918
1735
 
1919
- --btn-shadow: var(--btn-dreizen-shadow);
1736
+ .quantity-buttons-value-color {
1737
+ color: var(--quantity-buttons-value-color);
1738
+ }
1920
1739
 
1921
- --btn-outline-border: var(--dreizen-primary);
1922
- --btn-outline-color: var(--dreizen-primary);
1740
+ .matrix-table-days {
1741
+ color: var(--matrix-table-days-color);
1742
+ }
1743
+ .matrix-table-month-header {
1744
+ color: var(--matrix-table-month-header-color);
1745
+ font-family: var(--matrix-table-month-header-font-family);
1746
+ }
1923
1747
 
1924
- --btn-outline-hover-border-color: var(--dreizen-primary-200);
1925
- --btn-outline-hover-color: var(--dreizen-primary-200);
1748
+ .matrix-table-cell:hover, .matrix-table-cell-cheapest:hover, .matrix-table-cell-active:hover {
1749
+ background: #e4e4e4;
1750
+ border-color: #e4e4e4;
1751
+ color: var(--matrix-table-days-color);
1752
+ }
1926
1753
 
1927
- --btn-text-color: var(--dreizen-primary);
1754
+ .matrix-table-cell-cheapest {
1755
+ background: var(--matrix-table-cell-cheapest-color);
1756
+ border-color: var(--matrix-table-cell-cheapest-border-color);
1757
+ font-weight: 600;
1758
+ }
1759
+ .matrix-table-cell {
1760
+ background: var(--matrix-table-cell-color);
1761
+ border-color: var(--matrix-table-cell-border-color);
1762
+ }
1763
+ .matrix-table-cell-active {
1764
+ background: var(--matrix-table-cell-active-color);
1765
+ border-color: var(--matrix-table-cell-active-border-color);
1766
+ color: var(--matrix-table-cell-active-text-color);
1767
+ font-weight: 600;
1768
+ }
1769
+ .matrix-table-days {
1770
+ font-family: var(--matrix-table-days-amount-font);
1771
+ }
1772
+ .matrix-table-dates, .matrix-table-dates-weekday {
1773
+ font-family: var(--matrix-table-days-amount-font);
1774
+ }
1775
+ .matrix-table-dates-weekday {
1776
+ color: var(--matrix-table-days-weekday-color);
1777
+ }
1928
1778
 
1929
- --btn-text-hover-color: var(--dreizen-primary-200);
1930
- --price-check-color: var(--dreizen-dark-600);
1931
- --price-check-price-color: var(--dreizen-secondary);
1779
+ .page-navigation:hover,
1780
+ .page-navigation.selected {
1781
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.11), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
1782
+ }
1783
+ /**
1784
+ * Custom Utilities
1785
+ * Additional utility classes for the UI Package
1786
+ * These styles are scoped to prevent global conflicts
1787
+ */
1932
1788
 
1933
- --danger-red: var(--dreizen-danger-red);
1934
- --danger-red-hover: var(--dreizen-danger-red-hover);
1935
- --danger-red-disabled: var(--dreizen-danger-red-disabled);
1789
+ /* Custom utilities */
1936
1790
 
1937
- --fontFamily-price-check: var(--font-titillium-web), sans-serif;
1938
- --fontFamily-price-check-price: var(--font-titillium-web), sans-serif;
1939
- --fontFamily-blog-widget: var(--font-open-sans), sans-serif;
1940
- --fontFamily-blog-widget-date: var(--font-open-sans), sans-serif;
1941
1791
 
1942
- --fontWeight-price-text: 600;
1943
- --price-background: transparent;
1944
- --price-background-back: transparent;
1945
- --price-text-padding-left: 0;
1946
- --price-text-padding-bottom: 0;
1947
- --price-price-padding-left: 0;
1948
- --price-price-padding-right: 0;
1949
- --price-minus-right: 5px;
1950
- --price-minus-bottom: 10px;
1951
- --price-price-margin-top: -8px;
1792
+ @utility transition-max-height {
1793
+ transition: max-height 0.3s ease-in-out;
1794
+ }
1952
1795
 
1953
- --toggle-active-background-color: var(--dreizen-secondary);
1954
- --toggle-inactive-background-color: #ff780133;
1955
- --toggle-active-color: white;
1956
- --toggle-inactive-color: var(--dreizen-dark-600);
1957
- --toggle-font-family: var(--font-lato), sans-serif;
1796
+ @layer utilities {
1797
+ /* Animation utility classes - Only for UI components with data-pv-ui */
1798
+ [data-pv-ui] .animate-spin,
1799
+ .animate-spin {
1800
+ animation: spin 1s linear infinite;
1801
+ }
1802
+ [data-pv-ui] .animate-spin-slow,
1803
+ .animate-spin-slow {
1804
+ animation: spin 2s linear infinite;
1805
+ }
1806
+ [data-pv-ui] .animate-spin-once,
1807
+ .animate-spin-once {
1808
+ animation: spin 2s linear forwards;
1809
+ }
1958
1810
 
1959
- --filter-button-background-color: var(--dreizen-primary);
1960
- --filter-button-background-hover-color: var(--dreizen-dark-600);
1961
- --fontFamily-filter-button: var(--font-lato), sans-serif;
1811
+ [data-pv-ui] .animate-plane-bounce,
1812
+ .animate-plane-bounce {
1813
+ animation: airplane-bounce 5s ease-in-out infinite;
1814
+ }
1962
1815
 
1963
- --filter-button-icon-background-color: #4099cf;
1964
- --filter-button-icon-background-hover-color: #002c49;
1965
- --search-box-border-color: var(--dreizen-secondary);
1966
- --search-box-icon-color: var(--dreizen-secondary);
1967
- --search-box-clear-icon-background-color: #e3e3e3;
1968
- --search-box-clear-icon-background-hover-color: #a0a0a0;
1969
- --search-box-clear-icon-color: white;
1816
+ [data-pv-ui] .animate-cloud-float,
1817
+ .animate-cloud-float {
1818
+ animation: cloud-move 7s infinite linear;
1819
+ }
1970
1820
 
1971
- --search-box-result-location-color: var(--dreizen-primary);
1972
- --search-box-result-hover-background-color: #edf7fe;
1821
+ [data-pv-ui] .animate-cloud-float-2,
1822
+ .animate-cloud-float-2 {
1823
+ animation: cloud-move 7s -5s infinite linear;
1824
+ }
1973
1825
 
1974
- --topMenu-background-color: transparent;
1975
- --topHeaderMenu-background-color: var(--color-secondary);
1976
- --topMenu-background-color-hover: var(--dreizen-secondary-200);
1977
- --topMenu-boxShadow-color: #f9f9f9;
1978
- --topMenu-height: 32px;
1826
+ [data-pv-ui] .animate-cloud-float-3,
1827
+ .animate-cloud-float-3 {
1828
+ animation: cloud-move 7s -10s infinite linear;
1829
+ }
1979
1830
 
1980
- --counter-icon-color: #ff6766;
1831
+ /* Duration utility classes - Only for UI components with data-pv-ui */
1832
+ [data-pv-ui] .duration-sidebar,
1833
+ .duration-sidebar {
1834
+ transition-duration: var(--pv-transition-duration-sidebar, 300ms);
1835
+ }
1981
1836
 
1982
- --usp-font-family: var(--font-lato), sans-serif;
1983
- --middle-navigation-font-family: var(--font-lato), sans-serif;
1837
+ [data-pv-ui] .duration-1000,
1838
+ .duration-1000 {
1839
+ transition-duration: 1000ms;
1840
+ }
1984
1841
 
1985
- --menu-link-color: var(--color-dark-600);
1986
- --menu-link-hover-color: var(--color-dark-600);
1987
- --menu-item-icon-color: var(--color-secondary);
1842
+ [data-pv-ui] .duration-700,
1843
+ .duration-700 {
1844
+ transition-duration: 700ms;
1845
+ }
1988
1846
 
1989
- --color-footer-navigation-link: var(--color-dark-600);
1990
- --color-footer-navigation-category-link: #0077bf;
1847
+ /* Gradient background utility classes - Only for UI components with data-pv-ui */
1848
+ [data-pv-ui] .bg-linear-gradient-y,
1849
+ .bg-linear-gradient-y {
1850
+ background-image: var(--pv-color-linear-gradient-y);
1851
+ }
1852
+ [data-pv-ui] .bg-linear-gradient-x,
1853
+ .bg-linear-gradient-x {
1854
+ background-image: var(--pv-color-linear-gradient-x);
1855
+ }
1856
+ [data-pv-ui] .bg-gradient-blue-pink,
1857
+ .bg-gradient-blue-pink {
1858
+ background-image: var(--pv-color-linear-gradient-x) !important;
1859
+ }
1860
+ [data-pv-ui] .bg-gradient-blue-green-y,
1861
+ .bg-gradient-blue-green-y {
1862
+ background-image: var(--pv-color-gradient-blue-green-y);
1863
+ }
1864
+ [data-pv-ui] .bg-gradient-blue-green-x,
1865
+ .bg-gradient-blue-green-x {
1866
+ background-image: var(--pv-color-gradient-blue-green-x);
1867
+ }
1868
+ [data-pv-ui] .bg-gradient-calendar,
1869
+ .bg-gradient-calendar {
1870
+ background-image: var(--pv-color-gradient-calendar);
1871
+ }
1872
+ [data-pv-ui] .hover\:bg-gradient-calendar:hover,
1873
+ .hover\:bg-gradient-calendar:hover {
1874
+ background-image: var(--pv-color-gradient-calendar);
1875
+ }
1876
+ @media (min-width: 768px) {
1877
+ [data-pv-ui] .md\:hover\:bg-gradient-calendar:hover,
1878
+ .md\:hover\:bg-gradient-calendar:hover {
1879
+ background-image: var(--pv-color-gradient-calendar);
1880
+ }
1881
+ }
1882
+ [data-pv-ui] .bg-nav-gradient,
1883
+ .bg-nav-gradient {
1884
+ background-image: var(--pv-color-nav-gradient);
1885
+ }
1886
+ [data-pv-ui] .bg-nav-gradient-mobile,
1887
+ .bg-nav-gradient-mobile {
1888
+ background-image: var(--pv-color-nav-gradient-mobile);
1889
+ }
1991
1890
 
1992
- --searchBlock-background-color: var(--color-secondary);
1993
- --searchBlock-text-color: white;
1994
- --searchBlock-text-size: 20px;
1995
- --searchBlock-text-weight: 700;
1996
- --searchBlock-font-family: var(--font-lato), sans-serif;
1997
- --searchBlock-border-radius: 2px;
1891
+ /* Toast notification colors - Scoped with prefix */
1892
+ :root {
1893
+ --pv-toastify-color-info: #2a67f6;
1894
+ --pv-toastify-color-success: #10d1bb;
1895
+ --pv-toastify-color-warning: #f8ec5b;
1896
+ --pv-toastify-color-error: #ed3f55;
1897
+ }
1998
1898
 
1999
- --searchBlockButtonLabel-text-size: clamp(12px, 3vw, 14px);
2000
- --searchBlockButtonLabel-text-weight: 700;
2001
- --searchBlockButtonLabel-font-family: var(--font-lato), sans-serif;
2002
- --searchBlockButtonLabel-color: var(--dreizen-dark-600);
2003
- --searchBlockButtonIcon-color: var(--dreizen-dark-200);
1899
+ /* Focus styles - Only for UI components with data-pv-ui */
1900
+ [data-pv-ui] button:focus-visible,
1901
+ button.pv-button:focus-visible {
1902
+ @reference focus:outline-hidden;
1903
+ @reference focus:ring-2;
1904
+ @reference focus:ring-offset-2;
1905
+ }
2004
1906
 
2005
- --searchBlockButtonRadius: 3px;
2006
- --searchBlockButtonHeight: 40px;
1907
+ /* Base layer styles - Only for UI components with data-pv-ui */
1908
+ @layer base {
1909
+ [data-pv-ui] button:not(:disabled),
1910
+ [data-pv-ui] [role="button"]:not(:disabled) {
1911
+ cursor: pointer;
1912
+ }
1913
+ }
2007
1914
 
2008
- --searchBlockButtonSelectedValue-font-family: var(--font-lato), sans-serif;
2009
- --searchBlockButtonSelectedValue-color: var(--dreizen-dark-600);
2010
- --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
2011
- --searchBlockButtonSelectedValue-text-weight: 500;
2012
- --searchBlockButtonSelectedValue-margin-top: 0;
1915
+ /* Editor styles - Only for UI components with data-pv-ui */
1916
+ [data-pv-ui] .is-editor-empty:first-of-type::before {
1917
+ @reference text-gray-800;
1918
+ color: #333333 !important;
1919
+ }
2013
1920
 
2014
- --searchBlockButtonDownIcon-color: var(--dreizen-primary);
2015
- --searchBlockButtonDownIcon-size: 16px;
1921
+ /* List styles - Only for UI components with data-pv-ui */
1922
+ [data-pv-ui] ul {
1923
+ @reference list-disc;
1924
+ }
2016
1925
 
2017
- --category-filter-font-family: var(--font-lato), sans-serif;
1926
+ [data-pv-ui] ol {
1927
+ @reference list-decimal;
1928
+ }
1929
+ }
2018
1930
 
2019
- --collection-title-font-family: var(--font-titillium-web), sans-serif;
2020
- --collection-description-font-family: var(--font-lato), sans-serif;
1931
+ /* Table animations - Only for UI components with data-pv-ui */
1932
+ [data-pv-ui] .table-animation-exit,
1933
+ .table-animation-exit {
1934
+ opacity: 1;
1935
+ transition: opacity 300ms ease-out;
1936
+ }
1937
+ [data-pv-ui] .table-animation-exit-active,
1938
+ .table-animation-exit-active {
1939
+ opacity: 0;
1940
+ transition: opacity 300ms ease-out;
1941
+ }
1942
+ [data-pv-ui] .table-animation-enter,
1943
+ .table-animation-enter {
1944
+ opacity: 0;
1945
+ transition: opacity 300ms ease-in;
1946
+ }
1947
+ [data-pv-ui] .table-animation-enter-active,
1948
+ .table-animation-enter-active {
1949
+ opacity: 1;
1950
+ transition: opacity 300ms ease-in;
1951
+ }
2021
1952
 
2022
- --usp-icon-color: #52c65c;
1953
+ /* Spin animation keyframes */
1954
+ @keyframes spin {
1955
+ from {
1956
+ transform: rotate(0deg);
1957
+ }
1958
+ to {
1959
+ transform: rotate(360deg);
1960
+ }
1961
+ }
2023
1962
 
2024
- --review-color: #0077bf;
2025
- --review-number-background-color: #0077bf;
2026
- --review-number-color: white;
2027
- --review-shadow: 1px 1px 5px 0 rgba(0,0,0,.15),0 0 1px 0 rgba(0,0,0,.3);
1963
+ @keyframes airplane-bounce {
1964
+ 0% {
1965
+ transform: translate3d(0, 0, 0);
1966
+ }
1967
+ 25% {
1968
+ transform: translate3d(0, -2%, 0);
1969
+ }
1970
+ 50% {
1971
+ transform: translate3d(0, 0, 0);
1972
+ }
1973
+ 75% {
1974
+ transform: translate3d(0, 2%, 0);
1975
+ }
1976
+ 100% {
1977
+ transform: translate3d(0, 0, 0);
1978
+ }
1979
+ }
2028
1980
 
2029
- --hotel-accomodation-results-title-color: var(--color-dark-600);
2030
- --hotel-accomodation-results-title-font: var(--font-titillium-web), sans-serif;
1981
+ @keyframes cloud-move {
1982
+ 0% {
1983
+ left: 100%;
1984
+ }
1985
+ 100% {
1986
+ left: -100%;
1987
+ }
1988
+ }
2031
1989
 
2032
- --hotel-accomodation-results-location-font: var(--font-lato), sans-serif;
2033
- --hotel-accomodation-results-location-color: #a8a8a8;
1990
+ /**
1991
+ * Global CSS Styles
1992
+ * Main stylesheet for the UI Package
1993
+ */
2034
1994
 
2035
- --viewed-accomodations-title-font: var(--font-titillium-web), sans-serif;
2036
- --viewed-accomodations-title-text-color: var(--color-dark-600);
2037
- --viewed-accomodations-header: var(--font-lato), sans-serif;
2038
- --viewed-accomodations-header-font-size: 16px;
2039
1995
 
2040
- --viewed-accomodations-empty-color: var(--color-dark-600);
1996
+ @keyframes spin {
1997
+ from {
1998
+ transform: rotate(0deg);
1999
+ }
2000
+ to {
2001
+ transform: rotate(360deg);
2002
+ }
2003
+ }
2041
2004
 
2042
- --viewed-accomodations-empty-text-color: var(--color-dark-600);
2005
+ @keyframes flyToTarget {
2006
+ 0% {
2007
+ transform: translate(0, 0) scale(1);
2008
+ opacity: 1;
2009
+ }
2010
+ 20% {
2011
+ transform: translate(0, 0) scale(1.2);
2012
+ opacity: 1;
2013
+ }
2014
+ 100% {
2015
+ transform: translate(
2016
+ calc(var(--end-x) - var(--start-x)),
2017
+ calc(var(--end-y) - var(--start-y))
2018
+ ) scale(0.9);
2019
+ opacity: 1;
2020
+ }
2021
+ }
2043
2022
 
2044
- --quantity-buttons-border-color: var(--color-secondary);
2045
- --quantity-buttons-color: var(--color-secondary);
2046
- --quantity-buttons-border-color-hover: var(--color-secondary-200);
2047
- --quantity-buttons-value-color: var(--color-dark-400);
2023
+ @keyframes popEffect {
2024
+ 0% {
2025
+ transform: scale(1);
2026
+ }
2027
+ 50% {
2028
+ transform: scale(1.3);
2029
+ }
2030
+ 100% {
2031
+ transform: scale(1);
2032
+ }
2033
+ }
2048
2034
 
2049
- --matrix-table-days-color: var(--color-dark-600);
2050
- --matrix-table-month-header-color: var(--color-dark-600);
2051
- --matrix-table-month-header-font-family: var(--font-titillium-web), sans-serif;
2035
+ .flying-heart-icon {
2036
+ animation: flyToTarget 1s cubic-bezier(0.25, -0.3, 0.75, 1.1) forwards;
2037
+ }
2052
2038
 
2053
- --matrix-table-cell-color: #bfddef;
2054
- --matrix-table-cell-border-color: #bfddef;
2055
- --matrix-table-cell-cheapest-color: var(--dreizen-primary);
2056
- --matrix-table-cell-cheapest-border-color: var(--dreizen-primary);
2039
+ .counter-icon-pop {
2040
+ animation: popEffect 0.3s ease-out;
2041
+ }
2057
2042
 
2058
- --matrix-table-days-amount-font: var(--font-lato), sans-serif;
2043
+ .tiptap {
2044
+ :first-child {
2045
+ margin-top: 0;
2046
+ }
2059
2047
 
2060
- --matrix-table-days-weekday-color: var(--color-light-400);
2061
- --matrix-table-cell-active-color: var(--color-secondary);
2062
- --matrix-table-cell-active-border-color: var(--color-secondary);
2063
- --matrix-table-cell-active-text-color: var(--color-white);
2048
+ /* List styles */
2049
+ ul,
2050
+ ol {
2051
+ padding: 0 1rem;
2052
+ margin: 1.25rem 1rem 1.25rem 0.4rem;
2064
2053
 
2065
- --popup-title-font-family: var(--font-lato), sans-serif;
2054
+ li p {
2055
+ margin-top: 0.25em;
2056
+ margin-bottom: 0.25em;
2057
+ }
2058
+ }
2059
+ }
2060
+
2061
+ .font-lato {
2062
+ font-family: var(--font-lato), sans-serif;
2066
2063
  }
2067
2064
 
2065
+
2068
2066
  /* Custom Range Slider Styles */
2069
2067
  .range-slider {
2070
2068
  -webkit-appearance: none;
@@ -2210,4 +2208,5 @@ button.btn-secondary:hover:active {
2210
2208
  }
2211
2209
 
2212
2210
 
2211
+
2213
2212
  /*# sourceMappingURL=index.css.map*/