apirocket 0.0.10 → 0.0.14

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 (4) hide show
  1. package/dist/ecommerce.css +985 -870
  2. package/dist/ecommerce.js +1 -1
  3. package/dist/ecommerce.js.map +1 -1
  4. package/package.json +2 -2
package/dist/ecommerce.css CHANGED
@@ -378,16 +378,12 @@
378
378
  width: 100%;
379
379
  box-shadow: none;
380
380
  }
381
- }.apirocket-modal *,
382
- .apirocket-modal *::before,
383
- .apirocket-modal *::after { box-sizing: border-box; }
381
+ }.apirocket-checkout * { box-sizing: content-box; }
384
382
 
385
- .apirocket-modal {
386
- display: flex;
387
- justify-content: center;
388
- align-items: flex-start;
383
+ .apirocket-checkout {
384
+ display: block;
389
385
  position: fixed;
390
- z-index: 10001;
386
+ z-index: 10000;
391
387
  right: 0;
392
388
  top: 0;
393
389
  overflow: hidden;
@@ -395,521 +391,700 @@
395
391
  width: 100%;
396
392
  height: 100vh;
397
393
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
398
- background-color: #f5f5f5;
394
+ background-color: #fff;
399
395
  }
400
396
 
401
- .apirocket-modal-nav {
402
- position: absolute;
397
+ .apirocket-checkout-wrap {
403
398
  display: flex;
404
- align-items: center;
399
+ margin: 0 auto;
405
400
  width: 90%;
401
+ min-height: 100%;
406
402
  max-width: 1100px;
407
- height: 96px;
403
+ padding: 0 5%;
404
+
408
405
  }
409
406
 
410
- .apirocket-modal-nav > div {
407
+ .apirocket-checkout-main {
408
+ order: 1;
409
+ width: 52%;
410
+ padding-right: 48px;
411
+ }
412
+
413
+ .apirocket-checkout-summary {
414
+ order: 2;
415
+ position: relative;
416
+ width: 40%;
417
+ padding-left: 48px;
418
+ }
419
+
420
+ .apirocket-checkout-summary::after {
421
+ position: absolute;
422
+ display: block;
423
+ top: 0;
424
+ left: 0;
425
+ content: "";
426
+ width: 300%;
427
+ height: 100%;
428
+ background: #f5f5f5;
429
+ z-index: -1;
430
+ }
431
+
432
+ .apirocket-checkout-continue {
411
433
  display: block;
412
434
  text-align: left;
435
+ margin-top: 40px;
436
+ margin-bottom: 40px;
413
437
  color: #737373;
414
438
  font-size: 16px;
415
439
  font-weight: normal;
416
440
  cursor: pointer;
417
441
  }
418
442
 
419
- .apirocket-modal-nav > div svg { margin-right: 16px; }
420
-
421
- .apirocket-modal-content {
422
- display: flex;
423
- flex-flow: column;
424
- width: 480px;
425
- height: auto;
426
- padding: 32px;
427
- background-color: #fff;
428
- margin-top: 96px;
429
- margin-bottom: 32px;
443
+ .apirocket-checkout-summary-login {
444
+ display: block;
445
+ text-align: right;
446
+ margin-top: 40px;
447
+ margin-bottom: 40px;
448
+ color: #737373;
449
+ font-size: 16px;
450
+ font-weight: normal;
451
+ cursor: pointer;
430
452
  }
431
453
 
432
- .apirocket-modal-header {
433
- position: relative;
434
- padding-bottom: 32px;
435
- }
454
+ .apirocket-checkout-summary-login svg,
455
+ .apirocket-checkout-continue svg { margin-right: 16px; }
436
456
 
437
- .apirocket-modal-title {
438
- font-size: 18px;
439
- font-weight: bold;
440
- line-height: 1;
441
- color: #404040;
442
- margin-bottom: 8px;
457
+ .apirocket-checkout-summary-header {
458
+ display: flex;
459
+ justify-content: space-between;
460
+ align-items: center;
461
+ margin-top: 56px;
462
+ margin-bottom: 48px;
443
463
  }
444
464
 
445
- .apirocket-modal-subtitle {
465
+ .apirocket-checkout-summary-header :last-child a {
446
466
  font-size: 14px;
447
467
  font-weight: normal;
448
- line-height: 16px;
449
468
  color: #737373;
450
469
  }
451
470
 
452
- .apirocket-modal-close {
453
- position: absolute;
454
- right: -16px;
455
- top: -16px;
471
+ .apirocket-checkout-summary-item {
472
+ display: flex;
473
+ justify-content: stretch;
474
+ align-items: center;
475
+ padding-bottom: 16px;
476
+ border-bottom: 1px solid #d9d9d9;
477
+ margin-bottom: 16px;
456
478
  }
457
479
 
458
- .apirocket-modal-close-icon {
459
- height: var(--cart-header-text-close-icon-size, 24px);
460
- width: var(--cart-header-text-close-icon-size, 24px);
461
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
462
- cursor: pointer;
480
+ .apirocket-checkout-summary-item-col-image {
481
+ flex: 0 0 auto;
482
+ max-width: 100px;
463
483
  }
464
484
 
465
- .apirocket-modal-body-text-password {
466
- color: #404040;
467
- font-size: 14px;
468
- font-weight: normal;
469
- line-height: 16px;
470
- margin-top: -8px;text-align: right;
471
- cursor: pointer;
485
+ .apirocket-checkout-summary-item-col-image img {
486
+ display: block;
487
+ max-width: 100%;
488
+ max-height: 100px;
472
489
  }
473
490
 
474
- .apirocket-modal-body-text-password:hover { text-decoration: underline; }
491
+ .apirocket-checkout-summary-item-col-description {
492
+ flex: 1 1 auto;
493
+ padding-left: 16px;
494
+ padding-right: 8px;
495
+ font-size: 16px;
496
+ font-weight: bold;
497
+ line-height: 20px;
498
+ }
475
499
 
476
- .apirocket-modal-footer-text {
477
- color: #a3a3a3;
500
+ .apirocket-checkout-summary-item-col-description small {
501
+ display: block;
478
502
  font-size: 14px;
479
503
  font-weight: normal;
480
- line-height: 16px;
481
- text-align: center;
482
- margin-top: 16px;
504
+ color: #a3a3a3;
483
505
  }
484
506
 
485
- .apirocket-modal-footer-text span {
486
- color: #404040;
487
- cursor: pointer;
507
+ .apirocket-checkout-summary-item-col-quantity {
508
+ flex: 0 0 50px;
509
+ font-size: 16px;
510
+ font-weight: normal;
511
+ color: #a3a3a3;
512
+ text-align: right;
488
513
  }
489
514
 
490
- .apirocket-modal-footer-text span:hover { text-decoration: underline; }
515
+ .apirocket-checkout-summary-item-col-price {
516
+ flex: 0 0 100px;
517
+ font-size: 16px;
518
+ font-weight: bold;
519
+ color: #404040;
520
+ text-align: right;
521
+ }
491
522
 
523
+ .apirocket-checkout-summary-row {
524
+ display: flex;
525
+ justify-content: space-between;
526
+ align-items: center;
527
+ padding-top: 16px;
528
+ }
492
529
 
493
- .apirocket-modal-body {}
530
+ .apirocket-checkout-summary-label {
531
+ font-size: 16px;
532
+ font-weight: normal;
533
+ line-height: 18px;
534
+ color: #404040;
535
+ }
494
536
 
495
- .apirocket-modal-footer {
496
- padding-top: 32px;
537
+ .apirocket-checkout-summary-value {
538
+ font-size: 18px;
539
+ font-weight: bold;
540
+ line-height: 18px;
541
+ color: #404040;
497
542
  }
498
543
 
499
- .apirocket-modal-row {
544
+ .apirocket-checkout-summary-row-total {
500
545
  display: flex;
501
546
  justify-content: space-between;
502
547
  align-items: flex-start;
548
+ border-top: 1px solid #d9d9d9;
549
+ margin-top: 24px;
550
+ padding-top: 24px;
503
551
  }
504
552
 
505
- .apirocket-modal-row > * {
506
- flex: 1 1;
507
- margin-right: 16px;
553
+ .apirocket-checkout-summary-label-total {
554
+ font-size: 18px;
555
+ font-weight: bold;
556
+ line-height: 21px;
557
+ color: #404040;
558
+ }
559
+ .apirocket-checkout-summary-label-total small {
560
+ display: block;
561
+ font-size: 14px;
562
+ line-height: 16px;
563
+ font-weight: normal;
564
+ color: #a3a3a3;
508
565
  }
509
566
 
510
- .apirocket-modal-row > *:last-child { margin-right: 0; }
511
-
512
-
513
- @media (max-width: 720px) {
514
- .apirocket-modal-row { display: block; }
515
- .apirocket-modal-row > * { margin-right: 0; }
567
+ .apirocket-checkout-summary-value-total {
568
+ font-size: 24px;
569
+ font-weight: bold;
570
+ line-height: 24px;
571
+ color: #404040;
572
+ }
516
573
 
517
- .apirocket-modal-nav { display: none; }
574
+ .apirocket-checkout-breadcrumbs ol {
575
+ display: flex;
576
+ align-items: center;
577
+ list-style: none;
578
+ padding: 0;
579
+ margin: 0;
580
+ margin-top: 24px;
581
+ }
518
582
 
519
- .apirocket-modal-content {
520
- width: 95%;
521
- margin-top: 32px;
522
- padding: 24px;
523
- }
583
+ .apirocket-checkout-breadcrumbs ol li {
584
+ color: #a3a3a3;
585
+ font-size: 14px;
586
+ line-height: 1;
587
+ }
524
588
 
525
- .apirocket-modal-close {
526
- right: -8px;
527
- top: -8px;
528
- }
589
+ .apirocket-checkout-breadcrumbs ol li::after {
590
+ width: 5px;
591
+ height: 9px;
592
+ display: inline-block;
593
+ content: "";
594
+ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
595
+ background-repeat: no-repeat;
596
+ background-position: center;
597
+ padding: 0 8px;
529
598
  }
530
599
 
600
+ .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
531
601
 
602
+ .apirocket-checkout-breadcrumbs ol li a {
603
+ color: #a3a3a3;
604
+ text-decoration: underline;
605
+ }
532
606
 
533
- .form-input {
534
- display: block;
535
- position: relative;
536
- margin-bottom: 16px;
607
+ .apirocket-checkout-breadcrumbs-active {
608
+ font-weight: bold;
609
+ color: #404040 !important;
537
610
  }
538
611
 
539
- .form-input input {
540
- appearance: none;
541
- -moz-appearance: none;
542
- -webkit-appearance: none;
543
- outline: none;
544
- width: 100%;
545
- height: 46px;
546
- background: #fff;
612
+ .apirocket-checkout-steps-summary {
613
+ border: 1px solid #d9d9d9;
547
614
  border-radius: 4px;
548
- border: 1px solid #D9D9D9;
615
+ overflow: hidden;
616
+ margin-top: 48px;
617
+ }
618
+
619
+ .apirocket-checkout-steps-summary-row {
620
+ display: flex;
621
+ position: relative;
622
+ border-bottom: 1px solid #d9d9d9;
623
+ padding: 16px;
624
+ }
625
+
626
+ .apirocket-checkout-steps-summary-label {
627
+ flex: 0 0 90px;
628
+ font-size: 14px;
629
+ font-weight: normal;
630
+ line-height: 14px;
631
+ color: #a3a3a3;
632
+ }
633
+
634
+ .apirocket-checkout-steps-summary-text {
635
+ flex: 1 1 auto;
549
636
  font-size: 14px;
637
+ font-weight: normal;
638
+ line-height: 18px;
639
+ color: #404040;
640
+ }
641
+
642
+ .apirocket-checkout-steps-summary-link {
643
+ flex: 0 0 60px;
644
+ text-align: right;
645
+ font-size: 12px;
646
+ font-weight: normal;
550
647
  line-height: 1;
551
- padding-left: 14px;
552
- padding-right: 14px;
553
- padding-top: 14px;
554
- padding-bottom: 14px;
555
- transition: all 0.3s ease;
556
- box-sizing: border-box;
648
+ text-decoration: underline;
649
+ color: #737373;
650
+ cursor: pointer;
557
651
  }
558
652
 
559
- .form-input input:focus {
560
- border-color: #404040;
561
- box-shadow: 0 0 0 1px #404040;
653
+ .apirocket-checkout-section {
654
+ margin-top: 48px;
562
655
  }
563
656
 
564
- .form-input input:not(:placeholder-shown) {
565
- padding-top: 22px;
566
- padding-bottom: 6px;
657
+ .apirocket-checkout-section-header {
658
+ margin-bottom: 24px;
567
659
  }
568
660
 
569
- .form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; }
661
+ .apirocket-checkout-section-title {
662
+ font-size: 18px;
663
+ font-weight: bold;
664
+ line-height: 1;
665
+ color: #404040;
666
+ }
570
667
 
571
- .form-input-placeholder {
572
- position: absolute;
668
+ .apirocket-checkout-section-subtitle {
573
669
  font-size: 12px;
670
+ font-weight: normal;
671
+ padding-top: 4px;
574
672
  line-height: 1;
575
- color: #737373;
576
- transform: translateY(50%);
577
- opacity: 0;
578
- top: 8px;
579
- left: 15px;
580
- transition: all 0.3s ease;
581
- overflow: hidden;
582
- white-space: nowrap;
583
- text-overflow: ellipsis;
673
+ color: #a3a3a3;
674
+ text-align: right;
584
675
  }
585
676
 
586
- .form-input input:not(:placeholder-shown) ~ span.form-input-placeholder {
587
- opacity: 1;
588
- transform: translateY(0%);
677
+ .apirocket-checkout-section a {
678
+ color: #404040;
679
+ outline: none;
680
+ text-decoration: underline;
589
681
  }
590
682
 
591
- .form-input .form-input-error-message {
592
- display: none;
683
+ .apirocket-checkout-section-text {
593
684
  font-size: 14px;
594
- line-height: 1.2;
685
+ line-height: 1;
595
686
  margin-top: 4px;
596
- margin-left: 8px;
597
- color: #dc2626;
687
+ color: #737373;
598
688
  }
599
689
 
600
- .form-input.invalid.touched input {
601
- border-color: #dc2626;
602
- box-shadow: 0 0 0 1px #dc2626;
690
+ .apirocket-checkout-actions {
691
+ display: flex;
692
+ margin-top: 64px;
693
+ align-items: center;
694
+ max-width: 100%;
603
695
  }
604
696
 
605
- .form-input.invalid.touched .form-input-placeholder { color: #dc2626; }
606
- .form-input.invalid.touched .form-input-error-message { display: block; }
697
+ .apirocket-checkout-actions > * { flex: 1 1; }
607
698
 
699
+ .apirocket-checkout-footer {
700
+ margin-top: 72px;
701
+ border-top: 1px solid #d9d9d9;
702
+ margin-bottom: 64px;
703
+ padding-top: 16px;
704
+ }
608
705
 
706
+ .apirocket-checkout-footer ul {
707
+ display: flex;
708
+ align-items: center;
709
+ list-style: none;
710
+ padding: 0;
711
+ margin: 0;
712
+ }
609
713
 
714
+ .apirocket-checkout-footer ul li { margin-right: 16px; }
610
715
 
611
- .form-checkbox {
612
- display: flex;
613
- align-items: flex-start;
614
- justify-content: start;
615
- position: relative;
616
- margin-bottom: 16px;
716
+ .apirocket-checkout-footer ul li a {
717
+ color: #404040;
718
+ font-size: 14px;
719
+ line-height: 1;
617
720
  }
618
721
 
619
- .form-checkbox-label {
620
- flex: 0 1 auto;
621
- display: block;
722
+
723
+ .apircoket-checkout-legal {
724
+ margin-top: 16px;
622
725
  font-size: 14px;
623
- line-height: 20px;
726
+ color: #737373;
624
727
  font-weight: normal;
728
+ line-height: 1.4;
729
+ }
730
+
731
+ .apircoket-checkout-legal a {
732
+ text-decoration: underline;
625
733
  color: #404040;
626
- cursor: pointer;
627
734
  }
628
735
 
629
- .form-checkbox-label small {
736
+ .apirocket-checkout-logo img {
630
737
  display: block;
631
- color: #a3a3a3;
632
- font-size: 12px;
738
+ max-height: 80px;
633
739
  }
634
740
 
635
- .form-checkbox input {
636
- flex: 0 0 auto;
637
- appearance: none;
638
- -moz-appearance: none;
639
- -webkit-appearance: none;
640
- position: relative;
641
- box-sizing: border-box;
642
- display: inline-block;
643
- padding: 0;
644
- margin: 0;
645
- margin-right: 12px;
646
- width: 20px;
647
- height: 20px;
648
- vertical-align: middle;
649
- outline: none;
650
- border: 1px solid #d9d9d9;
651
- border-radius: 4px;
652
- cursor: pointer;
653
- transition: all 0.3s ease;
654
- overflow: hidden;
655
- background-color: #fff;
656
- }
741
+ .apirocket-checkout-mobile { display: none; }
657
742
 
658
- .form-checkbox input:focus {
659
- border-color: #404040;
660
- box-shadow: 0 0 0 1px #404040;
743
+ .apirocket-checkout-mobile .apirocket-checkout-logo {
744
+ display: block;
745
+ margin-top: 16px;
746
+ margin-bottom: 16px;
747
+ }
748
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
749
+ display: block;
750
+ margin: auto;
751
+ max-height: 80px;
661
752
  }
662
753
 
663
- .form-checkbox input:checked {
664
- background-color: #404040;
665
- border-color: #404040;
754
+ .apirocket-checkout-mobile-menu {
755
+ background-color: #f5f5f5;
756
+ border-top: 1px solid #d9d9d9;
666
757
  }
667
758
 
668
- .form-checkbox input:disabled { background-color: #f5f5f5; }
669
- .form-checkbox input:disabled + .form-checkbox-label { color: #a3a3a3; }
759
+ .apirocket-checkout-mobile-wrapper {
760
+ display: flex;
761
+ justify-content: space-between;
762
+ align-items: center;
763
+ width: 90%;
764
+ max-width: 560px;
765
+ margin: 0 auto;
766
+ padding: 16px 0px;
767
+ color: #404040;
768
+ }
670
769
 
671
- .form-checkbox input::after {
672
- display: block;
673
- position: absolute;
674
- width: 20px;
675
- height: 20px;
676
- content: "";
677
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
678
- background-repeat: no-repeat;
679
- background-position: -1px -1px;
680
- transition: all 0.3s ease;
681
- transform: scale(0);
770
+ .apirocket-checkout-mobile-wrapper-cart {
771
+ display: inline-flex;
772
+ align-items: center;
773
+ color: #404040;
774
+ cursor: pointer;
682
775
  }
683
776
 
684
- .form-checkbox input:checked::after {
685
- transform: scale(1);
777
+ .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
778
+
779
+ .apirocket-checkout-mobile-wrapper-total {
780
+ line-height: 20px;
781
+ font-size: 20px;
782
+ font-weight: bold;
686
783
  }
687
784
 
688
- .form-checkbox-error-message {
689
- display: none;
690
- position: absolute;
691
- left: 32px;
692
- bottom: -16px;
693
- font-size: 14px;
694
- line-height: 1.2;
695
- color: #dc2626;
785
+ .apirocket-checkout-mobile-summary {
786
+ background-color: #f5f5f5;
787
+ transition-property: max-height;
788
+ transition-timing-function: ease-in;
789
+ transition-duration: 350ms;
790
+ max-height: 0px;
791
+ overflow: hidden;
792
+ border-bottom: 1px solid #d9d9d9;
696
793
  }
697
794
 
698
- .form-checkbox.invalid.touched input {
699
- border-color: #dc2626;
700
- box-shadow: 0 0 0 1px #dc2626;
795
+ .apirocket-checkout-mobile-summary--show {
796
+ max-height: 1000px;
797
+ overflow: auto;
701
798
  }
702
799
 
703
- .form-checkbox.invalid.touched .form-checkbox-error-message { display: block; }
800
+ .apirocket-checkout-mobile-summary-wrapper {
801
+ width: 90%;
802
+ max-width: 560px;
803
+ padding: 16px 0px;
804
+ margin: 0 auto;
805
+ }
704
806
 
705
807
 
706
808
 
809
+ /* Utils */
707
810
 
708
- .form-radio {
811
+ .apirocket-checkout-row {
709
812
  display: flex;
813
+ justify-content: space-between;
710
814
  align-items: flex-start;
711
- justify-content: start;
712
- position: relative;
713
- margin-bottom: 16px;
714
- }
715
-
716
- .form-radio-label {
717
- position: relative;
718
- flex: 0 1 auto;
719
- display: inline-block;
720
- font-size: 14px;
721
- line-height: 20px;
722
- font-weight: normal;
723
- color: #404040;
724
- cursor: pointer;
725
815
  }
726
-
727
- .form-radio-label small {
728
- display: block;
729
- color: #a3a3a3;
730
- font-size: 12px;
816
+ .apirocket-checkout-row > * {
817
+ flex: 1 1;
818
+ margin-right: 16px;
731
819
  }
732
820
 
733
- .form-radio input:checked ~ .form-radio-label { font-weight: bold; }
734
- .form-radio input:checked ~ .form-radio-label small { font-weight: normal; }
735
-
736
- .form-radio input:disabled { background-color: #f5f5f5; }
737
- .form-radio input:disabled + .form-radio-label { color: #a3a3a3; }
738
-
739
- .form-radio-label img,
740
- .form-radio-label svg {
741
- position: absolute;
742
- display: inline-block;
743
- max-height: 24px;
744
- top: -2px;
745
- }
821
+ .apirocket-checkout-row > *:last-child { margin-right: 0; }
746
822
 
747
- .form-radio input {
748
- flex: 0 0 auto;
749
- appearance: none;
750
- -moz-appearance: none;
751
- -webkit-appearance: none;
752
- position: relative;
753
- box-sizing: border-box;
754
- display: inline-block;
755
- padding: 0;
756
- margin: 0;
757
- margin-right: 12px;
758
- width: 20px;
759
- height: 20px;
760
- vertical-align: middle;
761
- outline: none;
823
+ .apirocket-checkout-fieldset {
762
824
  border: 1px solid #d9d9d9;
763
- border-radius: 20px;
764
- cursor: pointer;
765
- transition: all 0.3s ease;
825
+ border-radius: 4px;
766
826
  overflow: hidden;
767
- background-color: #fff;
768
827
  }
769
828
 
770
- .form-radio input:focus {
771
- border-color: #404040;
772
- box-shadow: 0 0 0 1px #404040;
773
- }
829
+ .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
774
830
 
775
- .form-radio input:checked {
776
- background-color: #404040;
777
- border-color: #404040;
778
- }
831
+ .apirocket-checkout-fieldset .form-input,
832
+ .apirocket-checkout-fieldset .form-select,
833
+ .apirocket-checkout-fieldset .form-checkbox,
834
+ .apirocket-checkout-fieldset .form-radio { margin-bottom: 0; }
835
+ .apirocket-checkout-fieldset .form-radio .form-radio-label { font-size: 16px; }
779
836
 
780
- .form-radio input::after {
781
- display: block;
782
- position: absolute;
783
- width: 20px;
784
- height: 20px;
785
- content: "";
786
- background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E%0A");
787
- background-repeat: no-repeat;
788
- background-position: 6px 6px;
789
- transition: all 0.4s ease;
790
- transform: scale(0);
837
+ .apirocket-checkout-fieldset > * {
838
+ padding: 16px;
839
+ border-bottom: 1px solid #d9d9d9;
791
840
  }
792
-
793
- .form-radio input:checked::after {
794
- transform: scale(1);
841
+ .apirocket-checkout-fieldset-row {
842
+ display: flex;
843
+ justify-content: space-between;
844
+ align-items: flex-start;
845
+ }
846
+ .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
847
+ .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
848
+ .apirocket-checkout-fieldset-row > :last-child {
849
+ flex: 0 0 auto;
850
+ margin-right: 0px;
851
+ font-size: 16px;
852
+ font-weight: bold;
853
+ line-height: 20px;
854
+ color: #404040;
795
855
  }
796
856
 
797
- .form-radio-error-message {
798
- display: none;
799
- position: absolute;
800
- left: 32px;
801
- bottom: -16px;
802
- font-size: 14px;
803
- line-height: 1.2;
804
- color: #dc2626;
857
+ .apirocket-checkout-fieldset-row > :last-child img {
858
+ display: block;
859
+ max-height: 24px;
805
860
  }
806
861
 
807
- .form-radio.invalid.touched input {
808
- border-color: #dc2626;
809
- box-shadow: 0 0 0 1px #dc2626;
862
+ .apirocket-checkout-fieldset-row-wrapper {
863
+ background-color: #f5f5f5;
810
864
  }
811
865
 
812
- .form-radio.invalid.touched .form-radio-error-message { display: block; }
866
+ .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
867
+ .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
813
868
 
869
+ /* Responsive */
814
870
 
871
+ @media (max-width: 1000px) {
815
872
 
873
+ .apirocket-checkout-mobile { display: block; }
874
+
875
+ .apirocket-checkout-wrap {
876
+ flex-flow: column;
877
+ margin: 0;
878
+ padding: 0;
879
+ width: 100%;
880
+ }
881
+
882
+ .apirocket-checkout-main,
883
+ .apirocket-checkout-summary {
884
+ width: 90%;
885
+ max-width: 560px;
886
+ margin: 0 auto;
887
+ padding: 0;
888
+ }
816
889
 
817
- .form-select {
818
- display: block;
819
- position: relative;
820
- margin-bottom: 16px;
821
- }
890
+ .apirocket-checkout-summary {
891
+ /* order: 0;
892
+ padding: 16px 0; */
893
+ display: none;
894
+ }
895
+ .apirocket-checkout-summary::after { display: none; }
822
896
 
823
- .form-select select {
824
- appearance: none;
825
- -moz-appearance: none;
826
- -webkit-appearance: none;
827
- outline: none;
828
- width: 100%;
829
- height: 46px;
830
- border-radius: 4px;
831
- border: 1px solid #D9D9D9;
832
- font-size: 14px;
833
- line-height: 16px;
834
- padding-left: 14px;
835
- padding-right: 50px;
836
- padding-top: 14px;
837
- padding-bottom: 14px;
838
- transition: all 0.3s ease;
839
- box-sizing: border-box;
840
- cursor: pointer;
841
- }
897
+ .apirocket-checkout-summary-header,
898
+ .apirocket-checkout-summary-login { display: none; }
842
899
 
843
- .form-select select:focus {
844
- border-color: #404040;
845
- box-shadow: 0 0 0 1px #404040;
846
- }
900
+ .apirocket-checkout-continue { display: none;}
901
+
902
+ .apirocket-checkout-breadcrumbs { text-align: center; }
903
+ .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
847
904
 
848
- .form-select select:not(:placeholder-shown) {
849
- padding-top: 22px;
850
- padding-bottom: 6px;
905
+ .apirocket-checkout-logo { display: none; }
851
906
  }
852
907
 
853
- .form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
854
908
 
855
- .form-select::before {
856
- display: block;
857
- position: absolute;
858
- top: 8px;
859
- right: 0px;
860
- width: 40px;
861
- height: 30px;
862
- content: "";
863
- background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z' fill='%23A3A3A3'/%3E%3C/svg%3E%0A");
864
- background-repeat: no-repeat;
865
- background-position: center;
866
- border-left: 1px solid #d9d9d9;
867
- pointer-events: none;
868
- }
909
+ @media (max-width: 720px) {
869
910
 
870
- .form-select-placeholder {
871
- position: absolute;
872
- font-size: 12px;
873
- line-height: 1;
874
- color: #737373;
875
- transform: translateY(50%);
876
- opacity: 0;
877
- top: 8px;
878
- left: 15px;
879
- transition: all 0.3s ease;
880
- overflow: hidden;
881
- white-space: nowrap;
882
- text-overflow: ellipsis;
883
- }
911
+ .apirocket-checkout-row { display: block; }
912
+ .apirocket-checkout-row > * { margin-right: 0; }
913
+
914
+ .apirocket-checkout-actions > :first-child { order: 2; }
915
+ .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
916
+ .apirocket-checkout-actions {
917
+ flex-flow: column;
918
+ align-items: stretch;
919
+ }
884
920
 
885
- .form-select select:not(:placeholder-shown) ~ span.form-select-placeholder {
886
- opacity: 1;
887
- transform: translateY(0%);
888
- }
921
+ .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
889
922
 
890
- .form-select .form-select-error-message {
891
- display: none;
892
- font-size: 14px;
893
- line-height: 1.2;
894
- margin-top: 4px;
895
- margin-left: 8px;
896
- color: #dc2626;
897
- }
923
+ .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
924
+ .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
925
+
926
+ .apirocket-checkout-section-subtitle {
927
+ padding-top: 16px;
928
+ margin-bottom: -16px;
929
+ }
898
930
 
899
- .form-select.invalid.touched select {
900
- border-color: #dc2626;
901
- box-shadow: 0 0 0 1px #dc2626;
902
- }
931
+ .apirocket-checkout-footer ul {
932
+ display: block;
933
+ text-align: center !important;
934
+ line-height: 32px !important;
935
+ }
903
936
 
904
- .form-select.invalid.touched .form-select-placeholder { color: #dc2626; }
905
- .form-select.invalid.touched .form-select-error-message { display: block; }
937
+ .apirocket-checkout-footer ul li {
938
+ display: inline-block;
939
+ }
906
940
 
907
- .apirocket-checkout * { box-sizing: content-box; }
941
+ .apircoket-checkout-legal { text-align: center; }
908
942
 
909
- .apirocket-checkout {
943
+ .apirocket-checkout-summary-item-col-image {
944
+ flex: 0 0 auto;
945
+ max-width: 80px;
946
+ }
947
+
948
+ .apirocket-checkout-summary-item-col-image img { max-height: 80px; }
949
+
950
+ .apirocket-checkout-summary-item-col-description {
951
+ flex: 1 1;
952
+ padding-left: 8px;
953
+ font-size: 14px;
954
+ line-height: 16px;
955
+ }
956
+
957
+ .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
958
+
959
+ .apirocket-checkout-summary-item-col-quantity {
960
+ flex: 0 0 25px;
961
+ font-size: 12px;
962
+ }
963
+
964
+ .apirocket-checkout-summary-item-col-price {
965
+ flex: 0 0 80px;
966
+ font-size: 14px;
967
+ }
968
+
969
+ .apirocket-checkout-summary-label-total {
970
+ font-size: 16px;
971
+ line-height: 18px;
972
+ }
973
+ .apirocket-checkout-summary-label-total small {
974
+ font-size: 12px;
975
+ line-height: 14px;
976
+ }
977
+
978
+ .apirocket-checkout-summary-row {
979
+ padding-top: 8px;
980
+ }
981
+
982
+ .apirocket-checkout-summary-label {
983
+ font-size: 14px;
984
+ line-height: 14px;
985
+ }
986
+
987
+ .apirocket-checkout-summary-value,
988
+ .apirocket-checkout-summary-value-total {
989
+ font-size: 16px;
990
+ line-height: 16px;
991
+ }
992
+
993
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
994
+ max-height: 55px;
995
+ }
996
+
997
+ .apirocket-checkout-steps-summary { margin-top: 24px; }
998
+
999
+ .apirocket-checkout-steps-summary-row { position: relative; }
1000
+
1001
+ .apirocket-checkout-steps-summary-label {
1002
+ position: absolute;
1003
+ font-size: 14px;
1004
+ }
1005
+
1006
+ .apirocket-checkout-steps-summary-text { margin-top: 18px; }
1007
+ .apirocket-checkout-steps-summary-link { font-size: 12px; }
1008
+
1009
+ }
1010
+
1011
+
1012
+
1013
+ .apirocket-button {
1014
+ box-sizing: border-box !important;
1015
+ display: block;
1016
+ width: 100%;
1017
+ padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1018
+ margin: 0px;
1019
+ border-radius: var(--cart-button-border-radius, 4px);
1020
+ background-color: var(--cart-button-background-color, transparent);
1021
+ border: 1px solid var(--cart-button-border-color, #e5e5e5);
1022
+ color: var(--cart-button-font-color, #737373);
1023
+ line-height: 1;
1024
+ font-size: var(--cart-button-font-size, 16px);
1025
+ font-weight: var(--cart-button-font-weight, normal);
1026
+ text-align: center;
1027
+ transition-property: color, border-color, background-color, box-shadow;
1028
+ transition-timing-function: ease;
1029
+ transition-duration: 350ms;
1030
+ cursor: pointer;
1031
+ }
1032
+
1033
+ .apirocket-button:hover {
1034
+ background-color: var(--cart-button-background-color-hover, transparent);
1035
+ border-color: var(--cart-button-border-color-hover, #404040);
1036
+ color: var(--cart-button-font-color-hover, #404040);
1037
+ }
1038
+
1039
+ .apirocket-button-link {
910
1040
  display: block;
1041
+ text-align: left;
1042
+ justify-content: flex-start;
1043
+ align-items: center;
1044
+ border: none;
1045
+ padding-left: 0;
1046
+ padding-right: 0;
1047
+ width: auto;
1048
+ overflow: hidden;
1049
+ white-space: nowrap;
1050
+ text-overflow: ellipsis;
1051
+ }
1052
+ .apirocket-button-link span {
1053
+ margin-left: 16px;
1054
+ margin-right: 16px;
1055
+ }
1056
+
1057
+ .apirocket-button-primary {
1058
+ background-color: var(--cart-button-primary-background-color, #1d4ed8);
1059
+ border-color: var(--cart-button-primary-border-color, #1d4ed8);
1060
+ color: var(--cart-button-primary-text-color, #fff);
1061
+ }
1062
+
1063
+ .apirocket-button-primary:hover {
1064
+ background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1065
+ border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1066
+ color: var(--cart-button-primary-text-color-hover, #fff);
1067
+ box-shadow: var(--cart-shadow-button-primary-hover, none);
1068
+ }
1069
+
1070
+
1071
+ @media (max-width: 720px) {
1072
+
1073
+ .apirocket-button-link {
1074
+ width: 100%;
1075
+ text-align: center;
1076
+ }
1077
+
1078
+ }.apirocket-modal *,
1079
+ .apirocket-modal *::before,
1080
+ .apirocket-modal *::after { box-sizing: border-box; }
1081
+
1082
+ .apirocket-modal {
1083
+ display: flex;
1084
+ justify-content: center;
1085
+ align-items: flex-start;
911
1086
  position: fixed;
912
- z-index: 10000;
1087
+ z-index: 10001;
913
1088
  right: 0;
914
1089
  top: 0;
915
1090
  overflow: hidden;
@@ -917,685 +1092,625 @@
917
1092
  width: 100%;
918
1093
  height: 100vh;
919
1094
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
920
- background-color: #fff;
1095
+ background-color: #f5f5f5;
921
1096
  }
922
1097
 
923
- .apirocket-checkout-wrap {
1098
+ .apirocket-modal-nav {
1099
+ position: absolute;
924
1100
  display: flex;
925
- margin: 0 auto;
1101
+ align-items: center;
926
1102
  width: 90%;
927
- min-height: 100%;
928
1103
  max-width: 1100px;
929
- padding: 0 5%;
930
- }
931
-
932
- .apirocket-checkout-main {
933
- order: 1;
934
- width: 52%;
935
- padding-right: 48px;
936
- }
937
-
938
- .apirocket-checkout-summary {
939
- order: 2;
940
- position: relative;
941
- width: 40%;
942
- padding-left: 48px;
943
- }
944
-
945
- .apirocket-checkout-summary::after {
946
- position: absolute;
947
- display: block;
948
- top: 0;
949
- left: 0;
950
- content: "";
951
- width: 300%;
952
- height: 100%;
953
- background: #f5f5f5;
954
- z-index: -1;
1104
+ height: 96px;
955
1105
  }
956
1106
 
957
- .apirocket-checkout-continue {
1107
+ .apirocket-modal-nav > div {
958
1108
  display: block;
959
1109
  text-align: left;
960
- margin-top: 40px;
961
- margin-bottom: 40px;
962
1110
  color: #737373;
963
1111
  font-size: 16px;
964
1112
  font-weight: normal;
965
1113
  cursor: pointer;
966
1114
  }
967
1115
 
968
- .apirocket-checkout-summary-login {
969
- display: block;
970
- text-align: right;
971
- margin-top: 40px;
972
- margin-bottom: 40px;
973
- color: #737373;
974
- font-size: 16px;
975
- font-weight: normal;
976
- cursor: pointer;
1116
+ .apirocket-modal-nav > div svg { margin-right: 16px; }
1117
+
1118
+ .apirocket-modal-content {
1119
+ display: flex;
1120
+ flex-flow: column;
1121
+ width: 480px;
1122
+ height: auto;
1123
+ padding: 32px;
1124
+ background-color: #fff;
1125
+ margin-top: 96px;
1126
+ margin-bottom: 32px;
977
1127
  }
978
1128
 
979
- .apirocket-checkout-summary-login svg,
980
- .apirocket-checkout-continue svg { margin-right: 16px; }
1129
+ .apirocket-modal-header {
1130
+ position: relative;
1131
+ padding-bottom: 32px;
1132
+ }
981
1133
 
982
- .apirocket-checkout-summary-header {
983
- display: flex;
984
- justify-content: space-between;
985
- align-items: center;
986
- margin-top: 56px;
987
- margin-bottom: 48px;
1134
+ .apirocket-modal-title {
1135
+ font-size: 18px;
1136
+ font-weight: bold;
1137
+ line-height: 1;
1138
+ color: #404040;
1139
+ margin-bottom: 8px;
988
1140
  }
989
1141
 
990
- .apirocket-checkout-summary-header :last-child a {
1142
+ .apirocket-modal-subtitle {
991
1143
  font-size: 14px;
992
1144
  font-weight: normal;
1145
+ line-height: 16px;
993
1146
  color: #737373;
994
1147
  }
995
1148
 
996
- .apirocket-checkout-summary-item {
997
- display: flex;
998
- justify-content: stretch;
999
- align-items: center;
1000
- padding-bottom: 16px;
1001
- border-bottom: 1px solid #d9d9d9;
1002
- margin-bottom: 16px;
1149
+ .apirocket-modal-close {
1150
+ position: absolute;
1151
+ right: -16px;
1152
+ top: -16px;
1003
1153
  }
1004
1154
 
1005
- .apirocket-checkout-summary-item-col-image {
1006
- flex: 0 0 auto;
1007
- max-width: 100px;
1155
+ .apirocket-modal-close-icon {
1156
+ height: var(--cart-header-text-close-icon-size, 24px);
1157
+ width: var(--cart-header-text-close-icon-size, 24px);
1158
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
1159
+ cursor: pointer;
1008
1160
  }
1009
1161
 
1010
- .apirocket-checkout-summary-item-col-image img {
1011
- display: block;
1012
- max-width: 100%;
1013
- max-height: 100px;
1162
+ .apirocket-modal-body-text-password {
1163
+ color: #404040;
1164
+ font-size: 14px;
1165
+ font-weight: normal;
1166
+ line-height: 16px;
1167
+ margin-top: -8px;text-align: right;
1168
+ cursor: pointer;
1014
1169
  }
1015
1170
 
1016
- .apirocket-checkout-summary-item-col-description {
1017
- flex: 1 1 auto;
1018
- padding-left: 16px;
1019
- padding-right: 8px;
1020
- font-size: 16px;
1021
- font-weight: bold;
1022
- line-height: 20px;
1023
- }
1171
+ .apirocket-modal-body-text-password:hover { text-decoration: underline; }
1024
1172
 
1025
- .apirocket-checkout-summary-item-col-description small {
1026
- display: block;
1173
+ .apirocket-modal-footer-text {
1174
+ color: #a3a3a3;
1027
1175
  font-size: 14px;
1028
1176
  font-weight: normal;
1029
- color: #a3a3a3;
1177
+ line-height: 16px;
1178
+ text-align: center;
1179
+ margin-top: 16px;
1030
1180
  }
1031
1181
 
1032
- .apirocket-checkout-summary-item-col-quantity {
1033
- flex: 0 0 50px;
1034
- font-size: 16px;
1035
- font-weight: normal;
1036
- color: #a3a3a3;
1037
- text-align: right;
1182
+ .apirocket-modal-footer-text span {
1183
+ color: #404040;
1184
+ cursor: pointer;
1038
1185
  }
1039
1186
 
1040
- .apirocket-checkout-summary-item-col-price {
1041
- flex: 0 0 100px;
1042
- font-size: 16px;
1043
- font-weight: bold;
1044
- color: #404040;
1045
- text-align: right;
1046
- }
1187
+ .apirocket-modal-footer-text span:hover { text-decoration: underline; }
1047
1188
 
1048
- .apirocket-checkout-summary-row {
1049
- display: flex;
1050
- justify-content: space-between;
1051
- align-items: center;
1052
- padding-top: 16px;
1053
- }
1054
1189
 
1055
- .apirocket-checkout-summary-label {
1056
- font-size: 16px;
1057
- font-weight: normal;
1058
- line-height: 18px;
1059
- color: #404040;
1060
- }
1190
+ .apirocket-modal-body {}
1061
1191
 
1062
- .apirocket-checkout-summary-value {
1063
- font-size: 18px;
1064
- font-weight: bold;
1065
- line-height: 18px;
1066
- color: #404040;
1192
+ .apirocket-modal-footer {
1193
+ padding-top: 32px;
1067
1194
  }
1068
1195
 
1069
- .apirocket-checkout-summary-row-total {
1196
+ .apirocket-modal-row {
1070
1197
  display: flex;
1071
1198
  justify-content: space-between;
1072
1199
  align-items: flex-start;
1073
- border-top: 1px solid #d9d9d9;
1074
- margin-top: 24px;
1075
- padding-top: 24px;
1076
- }
1077
-
1078
- .apirocket-checkout-summary-label-total {
1079
- font-size: 18px;
1080
- font-weight: bold;
1081
- line-height: 21px;
1082
- color: #404040;
1083
- }
1084
- .apirocket-checkout-summary-label-total small {
1085
- display: block;
1086
- font-size: 14px;
1087
- line-height: 16px;
1088
- font-weight: normal;
1089
- color: #a3a3a3;
1090
1200
  }
1091
1201
 
1092
- .apirocket-checkout-summary-value-total {
1093
- font-size: 24px;
1094
- font-weight: bold;
1095
- line-height: 24px;
1096
- color: #404040;
1202
+ .apirocket-modal-row > * {
1203
+ flex: 1 1;
1204
+ margin-right: 16px;
1097
1205
  }
1098
1206
 
1099
- .apirocket-checkout-breadcrumbs ol {
1100
- display: flex;
1101
- align-items: center;
1102
- list-style: none;
1103
- padding: 0;
1104
- margin: 0;
1105
- margin-top: 24px;
1106
- }
1207
+ .apirocket-modal-row > *:last-child { margin-right: 0; }
1107
1208
 
1108
- .apirocket-checkout-breadcrumbs ol li {
1109
- color: #a3a3a3;
1110
- font-size: 14px;
1111
- line-height: 1;
1112
- }
1113
1209
 
1114
- .apirocket-checkout-breadcrumbs ol li::after {
1115
- width: 5px;
1116
- height: 9px;
1117
- display: inline-block;
1118
- content: "";
1119
- background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
1120
- background-repeat: no-repeat;
1121
- background-position: center;
1122
- padding: 0 8px;
1123
- }
1210
+ @media (max-width: 720px) {
1211
+ .apirocket-modal-row { display: block; }
1212
+ .apirocket-modal-row > * { margin-right: 0; }
1124
1213
 
1125
- .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
1214
+ .apirocket-modal-nav { display: none; }
1126
1215
 
1127
- .apirocket-checkout-breadcrumbs ol li a {
1128
- color: #a3a3a3;
1129
- text-decoration: underline;
1130
- }
1216
+ .apirocket-modal-content {
1217
+ width: 95%;
1218
+ margin-top: 32px;
1219
+ padding: 24px;
1220
+ }
1131
1221
 
1132
- .apirocket-checkout-breadcrumbs-active {
1133
- font-weight: bold;
1134
- color: #404040 !important;
1135
- }
1222
+ .apirocket-modal-close {
1223
+ right: -8px;
1224
+ top: -8px;
1225
+ }
1226
+ }.apirocket-summary {}
1136
1227
 
1137
- .apirocket-checkout-steps-summary {
1138
- border: 1px solid #d9d9d9;
1139
- border-radius: 4px;
1140
- overflow: hidden;
1141
- margin-top: 48px;
1228
+ .apirocket-summary-top {
1229
+ margin-top: 56px;
1230
+ margin-bottom: 32px;
1142
1231
  }
1143
1232
 
1144
- .apirocket-checkout-steps-summary-row {
1233
+ .apirocket-summary-header {
1145
1234
  display: flex;
1146
- position: relative;
1147
- border-bottom: 1px solid #d9d9d9;
1148
- padding: 16px;
1235
+ justify-content: flex-start;
1236
+ align-items: center;
1237
+ margin-bottom: 32px;
1149
1238
  }
1150
1239
 
1151
- .apirocket-checkout-steps-summary-label {
1152
- flex: 0 0 90px;
1153
- font-size: 14px;
1154
- font-weight: normal;
1155
- line-height: 14px;
1156
- color: #a3a3a3;
1240
+ .apirocket-summary-header-icon {
1241
+ flex: 0 1;
1242
+ margin-right: 16px;
1157
1243
  }
1158
1244
 
1159
- .apirocket-checkout-steps-summary-text {
1160
- flex: 1 1 auto;
1161
- font-size: 14px;
1162
- font-weight: normal;
1163
- line-height: 18px;
1245
+ .apirocket-summary-header-content {}
1246
+
1247
+ .apirocket-summary-header-title {
1248
+ font-size: 24px;
1249
+ font-weight: bold;
1250
+ line-height: 1.2;
1164
1251
  color: #404040;
1252
+ margin-bottom: 4px;
1165
1253
  }
1166
1254
 
1167
- .apirocket-checkout-steps-summary-link {
1168
- flex: 0 0 60px;
1169
- text-align: right;
1170
- font-size: 12px;
1255
+ .apirocket-summary-header-subtitle {
1256
+ font-size: 18px;
1171
1257
  font-weight: normal;
1172
- line-height: 1;
1173
- text-decoration: underline;
1258
+ line-height: 1.2;
1174
1259
  color: #737373;
1175
- cursor: pointer;
1176
1260
  }
1177
1261
 
1178
- .apirocket-checkout-section {
1179
- margin-top: 48px;
1262
+ .apirocket-summary-section {
1263
+ margin-top: 16px;
1264
+ border: 1px solid #d9d9d9;
1265
+ border-radius: 4px;
1266
+ padding: 24px;
1180
1267
  }
1181
1268
 
1182
- .apirocket-checkout-section-header {
1183
- margin-bottom: 24px;
1184
- }
1269
+ .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
1270
+ .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
1185
1271
 
1186
- .apirocket-checkout-section-title {
1272
+ .apirocket-summary-section-title {
1187
1273
  font-size: 18px;
1188
1274
  font-weight: bold;
1189
- line-height: 1;
1275
+ line-height: 1.2;
1190
1276
  color: #404040;
1277
+ margin-bottom: 24px;
1191
1278
  }
1192
1279
 
1193
- .apirocket-checkout-section-subtitle {
1194
- font-size: 12px;
1195
- font-weight: normal;
1196
- padding-top: 4px;
1280
+ .apirocket-summary-section-subtitle {
1281
+ font-size: 16px;
1282
+ font-weight: bold;
1197
1283
  line-height: 1;
1198
- color: #a3a3a3;
1199
- text-align: right;
1200
- }
1201
-
1202
- .apirocket-checkout-section a {
1203
1284
  color: #404040;
1204
- outline: none;
1205
- text-decoration: underline;
1285
+ margin-bottom: 16px;
1206
1286
  }
1207
1287
 
1208
- .apirocket-checkout-section-text {
1288
+ .apirocket-summary-section-text {
1209
1289
  font-size: 14px;
1210
- line-height: 1;
1211
- margin-top: 4px;
1212
- color: #737373;
1290
+ font-weight: normal;
1291
+ line-height: 18px;
1292
+ color: #404040;
1213
1293
  }
1214
1294
 
1215
- .apirocket-checkout-actions {
1295
+ .apirocket-summary-help {
1216
1296
  display: flex;
1217
- margin-top: 64px;
1218
- align-items: center;
1219
- max-width: 100%;
1220
- }
1221
-
1222
- .apirocket-checkout-actions * { flex: 1 1; }
1223
-
1224
- .apirocket-checkout-footer {
1225
- margin-top: 72px;
1226
- border-top: 1px solid #d9d9d9;
1227
- padding-bottom: 64px;
1228
- padding-top: 16px;
1297
+ justify-content: flex-start;
1298
+ align-items: center;
1229
1299
  }
1230
1300
 
1231
- .apirocket-checkout-footer ul {
1232
- display: flex;
1233
- align-items: center;
1234
- list-style: none;
1235
- padding: 0;
1236
- margin: 0;
1301
+ .apirocket-summary-help-icon {
1302
+ flex: 0 1;
1303
+ padding-right: 12px;
1237
1304
  }
1238
1305
 
1239
- .apirocket-checkout-footer ul li { margin-right: 16px; }
1240
-
1241
- .apirocket-checkout-footer ul li a {
1242
- color: #404040;
1306
+ .apirocket-summary-help-content {
1243
1307
  font-size: 14px;
1244
- line-height: 1;
1308
+ font-weight: normal;
1309
+ line-height: 1.2;
1310
+ color: #404040;
1245
1311
  }
1246
1312
 
1247
-
1248
- .apircoket-checkout-legal {
1249
- margin-top: 16px;
1250
- font-size: 14px;
1313
+ .apirocket-summary-help-content a {
1314
+ display: block;
1251
1315
  color: #737373;
1252
- font-weight: normal;
1253
- line-height: 1.4;
1254
1316
  }
1255
1317
 
1256
- .apircoket-checkout-legal a {
1257
- text-decoration: underline;
1258
- color: #404040;
1318
+ @media (max-width: 1000px) {
1319
+ .apirocket-summary-top { display: none; }
1320
+ .apirocket-summary-header { margin-top: 32px; }
1259
1321
  }
1260
1322
 
1261
- .apirocket-checkout-logo img {
1262
- display: block;
1263
- max-height: 80px;
1323
+ @media (max-width: 720px) {
1324
+ .apirocket-summary-section-subtitle { margin-top: 24px; }
1325
+ .apirocket-summary-header {
1326
+ flex-direction: column;
1327
+ align-items: center;
1328
+ text-align: center;
1329
+ }
1330
+ .apirocket-summary-header-icon {
1331
+ margin-right: 0px;
1332
+ margin-bottom: 16px;
1333
+ }
1334
+ .apirocket-summary-header-title {
1335
+ font-size: 28px;
1336
+ margin-bottom: 8px;
1337
+ }
1264
1338
  }
1265
1339
 
1266
- .apirocket-checkout-mobile { display: none; }
1267
1340
 
1268
- .apirocket-checkout-mobile .apirocket-checkout-logo {
1341
+
1342
+ .form-input {
1269
1343
  display: block;
1270
- margin-top: 16px;
1344
+ position: relative;
1271
1345
  margin-bottom: 16px;
1272
1346
  }
1273
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1274
- display: block;
1275
- margin: auto;
1276
- max-height: 80px;
1277
- }
1278
1347
 
1279
- .apirocket-checkout-mobile-menu {
1280
- background-color: #f5f5f5;
1281
- border-top: 1px solid #d9d9d9;
1282
- border-bottom: 1px solid #d9d9d9;
1283
- }
1348
+ .form-input input {
1349
+ appearance: none;
1350
+ -moz-appearance: none;
1351
+ -webkit-appearance: none;
1352
+ outline: none;
1353
+ width: 100%;
1354
+ height: 46px;
1355
+ background: #fff;
1356
+ border-radius: 4px;
1357
+ border: 1px solid #D9D9D9;
1358
+ font-size: 14px;
1359
+ line-height: 1;
1360
+ padding-left: 14px;
1361
+ padding-right: 14px;
1362
+ padding-top: 14px;
1363
+ padding-bottom: 14px;
1364
+ transition: all 0.3s ease;
1365
+ box-sizing: border-box;
1366
+ }
1284
1367
 
1285
- .apirocket-checkout-mobile-wrapper {
1286
- display: flex;
1287
- justify-content: space-between;
1288
- align-items: center;
1289
- width: 90%;
1290
- max-width: 560px;
1291
- margin: 0 auto;
1292
- padding: 16px 0px;
1293
- color: #404040;
1368
+ .form-input input:focus {
1369
+ border-color: #404040;
1370
+ box-shadow: 0 0 0 1px #404040;
1294
1371
  }
1295
1372
 
1296
- .apirocket-checkout-mobile-wrapper-cart {
1297
- display: inline-flex;
1298
- align-items: center;
1299
- color: #404040;
1300
- cursor: pointer;
1373
+ .form-input input:not(:placeholder-shown) {
1374
+ padding-top: 22px;
1375
+ padding-bottom: 6px;
1301
1376
  }
1302
1377
 
1303
- .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
1378
+ .form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; }
1304
1379
 
1305
- .apirocket-checkout-mobile-wrapper-total {
1306
- line-height: 20px;
1307
- font-size: 20px;
1308
- font-weight: bold;
1380
+ .form-input-placeholder {
1381
+ position: absolute;
1382
+ font-size: 12px;
1383
+ line-height: 1;
1384
+ color: #737373;
1385
+ transform: translateY(50%);
1386
+ opacity: 0;
1387
+ top: 8px;
1388
+ left: 15px;
1389
+ transition: all 0.3s ease;
1390
+ overflow: hidden;
1391
+ white-space: nowrap;
1392
+ text-overflow: ellipsis;
1309
1393
  }
1310
1394
 
1311
- .apirocket-checkout-mobile-summary {
1312
- background-color: #f5f5f5;
1313
- transition-property: max-height;
1314
- transition-timing-function: ease-in;
1315
- transition-duration: 350ms;
1316
- max-height: 0px;
1317
- overflow: hidden;
1395
+ .form-input input:not(:placeholder-shown) ~ span.form-input-placeholder {
1396
+ opacity: 1;
1397
+ transform: translateY(0%);
1318
1398
  }
1319
1399
 
1320
- .apirocket-checkout-mobile-summary--show {
1321
- max-height: 1000px;
1322
- overflow: auto;
1323
- border-bottom: 1px solid #d9d9d9;
1400
+ .form-input .form-input-error-message {
1401
+ display: none;
1402
+ font-size: 14px;
1403
+ line-height: 1.2;
1404
+ margin-top: 4px;
1405
+ margin-left: 8px;
1406
+ color: #dc2626;
1324
1407
  }
1325
1408
 
1326
- .apirocket-checkout-mobile-summary-wrapper {
1327
- width: 90%;
1328
- max-width: 560px;
1329
- padding: 16px 0px;
1330
- margin: 0 auto;
1409
+ .form-input.invalid.touched input {
1410
+ border-color: #dc2626;
1411
+ box-shadow: 0 0 0 1px #dc2626;
1331
1412
  }
1332
1413
 
1414
+ .form-input.invalid.touched .form-input-placeholder { color: #dc2626; }
1415
+ .form-input.invalid.touched .form-input-error-message { display: block; }
1416
+
1333
1417
 
1334
1418
 
1335
- /* Utils */
1336
1419
 
1337
- .apirocket-checkout-row {
1420
+ .form-checkbox {
1338
1421
  display: flex;
1339
- justify-content: space-between;
1340
1422
  align-items: flex-start;
1423
+ justify-content: start;
1424
+ position: relative;
1425
+ margin-bottom: 16px;
1341
1426
  }
1342
- .apirocket-checkout-row > * {
1343
- flex: 1 1;
1344
- margin-right: 16px;
1427
+
1428
+ .form-checkbox-label {
1429
+ flex: 0 1 auto;
1430
+ display: block;
1431
+ font-size: 14px;
1432
+ line-height: 20px;
1433
+ font-weight: normal;
1434
+ color: #404040;
1435
+ cursor: pointer;
1345
1436
  }
1346
1437
 
1347
- .apirocket-checkout-row > *:last-child { margin-right: 0; }
1438
+ .form-checkbox-label small {
1439
+ display: block;
1440
+ color: #a3a3a3;
1441
+ font-size: 12px;
1442
+ }
1348
1443
 
1349
- .apirocket-checkout-fieldset {
1444
+ .form-checkbox input {
1445
+ flex: 0 0 auto;
1446
+ appearance: none;
1447
+ -moz-appearance: none;
1448
+ -webkit-appearance: none;
1449
+ position: relative;
1450
+ box-sizing: border-box;
1451
+ display: inline-block;
1452
+ padding: 0;
1453
+ margin: 0;
1454
+ margin-right: 12px;
1455
+ width: 20px;
1456
+ height: 20px;
1457
+ vertical-align: middle;
1458
+ outline: none;
1350
1459
  border: 1px solid #d9d9d9;
1351
1460
  border-radius: 4px;
1461
+ cursor: pointer;
1462
+ transition: all 0.3s ease;
1352
1463
  overflow: hidden;
1464
+ background-color: #fff;
1353
1465
  }
1354
1466
 
1355
- .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
1356
-
1357
- .apirocket-checkout-fieldset .form-input,
1358
- .apirocket-checkout-fieldset .form-select,
1359
- .apirocket-checkout-fieldset .form-checkbox,
1360
- .apirocket-checkout-fieldset .form-radio { margin-bottom: 0; }
1361
- .apirocket-checkout-fieldset .form-radio .form-radio-label { font-size: 16px; }
1362
-
1363
- .apirocket-checkout-fieldset > * {
1364
- padding: 16px;
1365
- border-bottom: 1px solid #d9d9d9;
1467
+ .form-checkbox input:focus {
1468
+ border-color: #404040;
1469
+ box-shadow: 0 0 0 1px #404040;
1366
1470
  }
1367
- .apirocket-checkout-fieldset-row {
1368
- display: flex;
1369
- justify-content: space-between;
1370
- align-items: flex-start;
1371
- }
1372
- .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
1373
- .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
1374
- .apirocket-checkout-fieldset-row > :last-child {
1375
- flex: 0 0 auto;
1376
- margin-right: 0px;
1377
- font-size: 16px;
1378
- font-weight: bold;
1379
- line-height: 20px;
1380
- color: #404040;
1471
+
1472
+ .form-checkbox input:checked {
1473
+ background-color: #404040;
1474
+ border-color: #404040;
1381
1475
  }
1382
1476
 
1383
- .apirocket-checkout-fieldset-row > :last-child img { max-height: 24px; }
1477
+ .form-checkbox input:disabled { background-color: #f5f5f5; }
1478
+ .form-checkbox input:disabled + .form-checkbox-label { color: #a3a3a3; }
1384
1479
 
1385
- .apirocket-checkout-fieldset-row-wrapper {
1386
- background-color: #f5f5f5;
1480
+ .form-checkbox input::after {
1481
+ display: block;
1482
+ position: absolute;
1483
+ width: 20px;
1484
+ height: 20px;
1485
+ content: "";
1486
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
1487
+ background-repeat: no-repeat;
1488
+ background-position: -1px -1px;
1489
+ transition: all 0.3s ease;
1490
+ transform: scale(0);
1387
1491
  }
1388
1492
 
1389
- .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
1390
- .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
1493
+ .form-checkbox input:checked::after {
1494
+ transform: scale(1);
1495
+ }
1391
1496
 
1392
- /* Responsive */
1497
+ .form-checkbox-error-message {
1498
+ display: none;
1499
+ position: absolute;
1500
+ left: 32px;
1501
+ bottom: -16px;
1502
+ font-size: 14px;
1503
+ line-height: 1.2;
1504
+ color: #dc2626;
1505
+ }
1393
1506
 
1394
- @media (max-width: 1000px) {
1507
+ .form-checkbox.invalid.touched input {
1508
+ border-color: #dc2626;
1509
+ box-shadow: 0 0 0 1px #dc2626;
1510
+ }
1395
1511
 
1396
- .apirocket-checkout-mobile { display: block; }
1397
-
1398
- .apirocket-checkout-wrap {
1399
- flex-flow: column;
1400
- margin: 0;
1401
- padding: 0;
1402
- width: 100%;
1403
- }
1404
-
1405
- .apirocket-checkout-main,
1406
- .apirocket-checkout-summary {
1407
- width: 90%;
1408
- max-width: 560px;
1409
- margin: 0 auto;
1410
- padding: 0;
1411
- }
1512
+ .form-checkbox.invalid.touched .form-checkbox-error-message { display: block; }
1412
1513
 
1413
- .apirocket-checkout-summary {
1414
- /* order: 0;
1415
- padding: 16px 0; */
1416
- display: none;
1417
- }
1418
- .apirocket-checkout-summary::after { display: none; }
1419
1514
 
1420
- .apirocket-checkout-summary-header,
1421
- .apirocket-checkout-summary-login { display: none; }
1422
1515
 
1423
- .apirocket-checkout-continue { display: none;}
1424
-
1425
- .apirocket-checkout-breadcrumbs { text-align: center; }
1426
- .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
1427
1516
 
1428
- .apirocket-checkout-logo { display: none; }
1517
+ .form-radio {
1518
+ display: flex;
1519
+ align-items: flex-start;
1520
+ justify-content: start;
1521
+ position: relative;
1522
+ margin-bottom: 16px;
1429
1523
  }
1430
1524
 
1525
+ .form-radio-label {
1526
+ position: relative;
1527
+ flex: 0 1 auto;
1528
+ display: inline-block;
1529
+ font-size: 14px;
1530
+ line-height: 20px;
1531
+ font-weight: normal;
1532
+ color: #404040;
1533
+ cursor: pointer;
1534
+ }
1431
1535
 
1432
- @media (max-width: 720px) {
1536
+ .form-radio-label small {
1537
+ display: block;
1538
+ color: #a3a3a3;
1539
+ font-size: 12px;
1540
+ }
1433
1541
 
1434
- .apirocket-checkout-row { display: block; }
1435
- .apirocket-checkout-row > * { margin-right: 0; }
1436
-
1437
- .apirocket-checkout-actions > :first-child { order: 2; }
1438
- .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
1439
- .apirocket-checkout-actions {
1440
- flex-flow: column;
1441
- align-items: stretch;
1442
- }
1443
-
1444
- .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
1542
+ .form-radio input:checked ~ .form-radio-label { font-weight: bold; }
1543
+ .form-radio input:checked ~ .form-radio-label small { font-weight: normal; }
1445
1544
 
1446
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
1447
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
1448
-
1449
- .apirocket-checkout-section-subtitle {
1450
- padding-top: 16px;
1451
- margin-bottom: -16px;
1452
- }
1545
+ .form-radio input:disabled { background-color: #f5f5f5; }
1546
+ .form-radio input:disabled + .form-radio-label { color: #a3a3a3; }
1453
1547
 
1454
- .apirocket-checkout-footer ul {
1455
- display: block;
1456
- text-align: center !important;
1457
- line-height: 32px !important;
1458
- }
1548
+ .form-radio-label img,
1549
+ .form-radio-label svg {
1550
+ position: absolute;
1551
+ display: inline-block;
1552
+ height: 24px;
1553
+ min-height: 24px;
1554
+ top: -2px;
1555
+ }
1459
1556
 
1460
- .apirocket-checkout-footer ul li {
1461
- display: inline-block;
1462
- }
1557
+ .form-radio input {
1558
+ flex: 0 0 auto;
1559
+ appearance: none;
1560
+ -moz-appearance: none;
1561
+ -webkit-appearance: none;
1562
+ position: relative;
1563
+ box-sizing: border-box;
1564
+ display: inline-block;
1565
+ padding: 0;
1566
+ margin: 0;
1567
+ margin-right: 12px;
1568
+ width: 20px;
1569
+ height: 20px;
1570
+ vertical-align: middle;
1571
+ outline: none;
1572
+ border: 1px solid #d9d9d9;
1573
+ border-radius: 20px;
1574
+ cursor: pointer;
1575
+ transition: all 0.3s ease;
1576
+ overflow: hidden;
1577
+ background-color: #fff;
1578
+ }
1463
1579
 
1464
- .apircoket-checkout-legal { text-align: center; }
1580
+ .form-radio input:focus {
1581
+ border-color: #404040;
1582
+ box-shadow: 0 0 0 1px #404040;
1583
+ }
1465
1584
 
1466
- .apirocket-checkout-summary-item-col-image {
1467
- flex: 0 0 auto;
1468
- max-width: 80px;
1469
- }
1470
-
1471
- .apirocket-checkout-summary-item-col-image img { max-height: 80px; }
1472
-
1473
- .apirocket-checkout-summary-item-col-description {
1474
- flex: 1 1;
1475
- padding-left: 8px;
1476
- font-size: 14px;
1477
- line-height: 16px;
1478
- }
1479
-
1480
- .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
1481
-
1482
- .apirocket-checkout-summary-item-col-quantity {
1483
- flex: 0 0 25px;
1484
- font-size: 12px;
1485
- }
1486
-
1487
- .apirocket-checkout-summary-item-col-price {
1488
- flex: 0 0 80px;
1489
- font-size: 14px;
1490
- }
1585
+ .form-radio input:checked {
1586
+ background-color: #404040;
1587
+ border-color: #404040;
1588
+ }
1491
1589
 
1492
- .apirocket-checkout-summary-label-total {
1493
- font-size: 16px;
1494
- line-height: 18px;
1495
- }
1496
- .apirocket-checkout-summary-label-total small {
1497
- font-size: 12px;
1498
- line-height: 14px;
1499
- }
1590
+ .form-radio input::after {
1591
+ display: block;
1592
+ position: absolute;
1593
+ width: 20px;
1594
+ height: 20px;
1595
+ content: "";
1596
+ background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E%0A");
1597
+ background-repeat: no-repeat;
1598
+ background-position: 6px 6px;
1599
+ transition: all 0.4s ease;
1600
+ transform: scale(0);
1601
+ }
1500
1602
 
1501
- .apirocket-checkout-summary-row {
1502
- padding-top: 8px;
1503
- }
1603
+ .form-radio input:checked::after {
1604
+ transform: scale(1);
1605
+ }
1504
1606
 
1505
- .apirocket-checkout-summary-label {
1506
- font-size: 14px;
1507
- line-height: 14px;
1508
- }
1607
+ .form-radio-error-message {
1608
+ display: none;
1609
+ position: absolute;
1610
+ left: 32px;
1611
+ bottom: -16px;
1612
+ font-size: 14px;
1613
+ line-height: 1.2;
1614
+ color: #dc2626;
1615
+ }
1509
1616
 
1510
- .apirocket-checkout-summary-value,
1511
- .apirocket-checkout-summary-value-total {
1512
- font-size: 16px;
1513
- line-height: 16px;
1514
- }
1617
+ .form-radio.invalid.touched input {
1618
+ border-color: #dc2626;
1619
+ box-shadow: 0 0 0 1px #dc2626;
1620
+ }
1515
1621
 
1516
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1517
- max-height: 55px;
1518
- }
1622
+ .form-radio.invalid.touched .form-radio-error-message { display: block; }
1519
1623
 
1520
- .apirocket-checkout-steps-summary { margin-top: 24px; }
1521
1624
 
1522
- .apirocket-checkout-steps-summary-row { position: relative; }
1523
1625
 
1524
- .apirocket-checkout-steps-summary-label {
1525
- position: absolute;
1526
- font-size: 14px;
1527
- }
1528
1626
 
1529
- .apirocket-checkout-steps-summary-text { margin-top: 18px; }
1530
- .apirocket-checkout-steps-summary-link { font-size: 12px; }
1531
-
1627
+ .form-select {
1628
+ display: block;
1629
+ position: relative;
1630
+ margin-bottom: 16px;
1532
1631
  }
1533
1632
 
1534
-
1535
-
1536
- .apirocket-button {
1537
- box-sizing: border-box !important;
1538
- display: block;
1633
+ .form-select select {
1634
+ appearance: none;
1635
+ -moz-appearance: none;
1636
+ -webkit-appearance: none;
1637
+ outline: none;
1539
1638
  width: 100%;
1540
- padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1541
- margin: 0px;
1542
- border-radius: var(--cart-button-border-radius, 4px);
1543
- background-color: var(--cart-button-background-color, transparent);
1544
- border: 1px solid var(--cart-button-border-color, #e5e5e5);
1545
- color: var(--cart-button-font-color, #737373);
1546
- line-height: 1;
1547
- font-size: var(--cart-button-font-size, 16px);
1548
- font-weight: var(--cart-button-font-weight, normal);
1549
- text-align: center;
1550
- transition-property: color, border-color, background-color, box-shadow;
1551
- transition-timing-function: ease;
1552
- transition-duration: 350ms;
1639
+ height: 46px;
1640
+ border-radius: 4px;
1641
+ border: 1px solid #D9D9D9;
1642
+ font-size: 14px;
1643
+ line-height: 16px;
1644
+ padding-left: 14px;
1645
+ padding-right: 50px;
1646
+ padding-top: 14px;
1647
+ padding-bottom: 14px;
1648
+ transition: all 0.3s ease;
1649
+ box-sizing: border-box;
1553
1650
  cursor: pointer;
1554
1651
  }
1555
1652
 
1556
- .apirocket-button:hover {
1557
- background-color: var(--cart-button-background-color-hover, transparent);
1558
- border-color: var(--cart-button-border-color-hover, #404040);
1559
- color: var(--cart-button-font-color-hover, #404040);
1653
+ .form-select select:focus {
1654
+ border-color: #404040;
1655
+ box-shadow: 0 0 0 1px #404040;
1560
1656
  }
1561
1657
 
1562
- .apirocket-button-link {
1658
+ .form-select select:not(:placeholder-shown) {
1659
+ padding-top: 22px;
1660
+ padding-bottom: 6px;
1661
+ }
1662
+
1663
+ .form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
1664
+
1665
+ .form-select::before {
1563
1666
  display: block;
1564
- text-align: left;
1565
- justify-content: flex-start;
1566
- align-items: center;
1567
- border: none;
1568
- padding-left: 0;
1569
- padding-right: 0;
1570
- width: auto;
1667
+ position: absolute;
1668
+ top: 8px;
1669
+ right: 0px;
1670
+ width: 40px;
1671
+ height: 30px;
1672
+ content: "";
1673
+ background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z' fill='%23A3A3A3'/%3E%3C/svg%3E%0A");
1674
+ background-repeat: no-repeat;
1675
+ background-position: center;
1676
+ border-left: 1px solid #d9d9d9;
1677
+ pointer-events: none;
1678
+ }
1679
+
1680
+ .form-select-placeholder {
1681
+ position: absolute;
1682
+ font-size: 12px;
1683
+ line-height: 1;
1684
+ color: #737373;
1685
+ transform: translateY(50%);
1686
+ opacity: 0;
1687
+ top: 8px;
1688
+ left: 15px;
1689
+ transition: all 0.3s ease;
1571
1690
  overflow: hidden;
1572
1691
  white-space: nowrap;
1573
1692
  text-overflow: ellipsis;
1574
1693
  }
1575
- .apirocket-button-link span {
1576
- margin-left: 16px;
1577
- margin-right: 16px;
1578
- }
1579
1694
 
1580
- .apirocket-button-primary {
1581
- background-color: var(--cart-button-primary-background-color, #1d4ed8);
1582
- border-color: var(--cart-button-primary-border-color, #1d4ed8);
1583
- color: var(--cart-button-primary-text-color, #fff);
1695
+ .form-select select:not(:placeholder-shown) ~ span.form-select-placeholder {
1696
+ opacity: 1;
1697
+ transform: translateY(0%);
1584
1698
  }
1585
1699
 
1586
- .apirocket-button-primary:hover {
1587
- background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1588
- border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1589
- color: var(--cart-button-primary-text-color-hover, #fff);
1590
- box-shadow: var(--cart-shadow-button-primary-hover, none);
1700
+ .form-select .form-select-error-message {
1701
+ display: none;
1702
+ font-size: 14px;
1703
+ line-height: 1.2;
1704
+ margin-top: 4px;
1705
+ margin-left: 8px;
1706
+ color: #dc2626;
1591
1707
  }
1592
1708
 
1709
+ .form-select.invalid.touched select {
1710
+ border-color: #dc2626;
1711
+ box-shadow: 0 0 0 1px #dc2626;
1712
+ }
1593
1713
 
1594
- @media (max-width: 720px) {
1595
-
1596
- .apirocket-button-link {
1597
- width: 100%;
1598
- text-align: center;
1599
- }
1714
+ .form-select.invalid.touched .form-select-placeholder { color: #dc2626; }
1715
+ .form-select.invalid.touched .form-select-error-message { display: block; }
1600
1716
 
1601
- }