apirocket 0.1.1 → 0.1.2

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