apirocket 0.0.9 → 0.0.10

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