apirocket 0.1.0 → 0.1.1

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