@sc-360-v2/storefront-cms-library 0.3.53 → 0.3.54

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 (36) hide show
  1. package/dist/add-order.scss +3 -0
  2. package/dist/add-products-tab.scss +15 -1
  3. package/dist/builder.js +1 -1
  4. package/dist/buy-for-tab.scss +15 -15
  5. package/dist/buyForHeaders.scss +6 -7
  6. package/dist/cart-details.scss +32 -42
  7. package/dist/cart-products-sidebar.scss +32 -16
  8. package/dist/cart-summary.scss +2 -4
  9. package/dist/cartDropdownOverlay.scss +3 -1
  10. package/dist/checkout.scss +4 -0
  11. package/dist/confirmationModal.scss +48 -0
  12. package/dist/container.scss +15 -15
  13. package/dist/customization-tree.scss +5 -1
  14. package/dist/dropdownTemplate.scss +5 -2
  15. package/dist/employee-bulk-order.scss +3225 -319
  16. package/dist/grid.scss +36 -0
  17. package/dist/icons.js +1 -1
  18. package/dist/image-temp.scss +47 -22
  19. package/dist/index.js +1 -1
  20. package/dist/layouter-pro-item.scss +1 -1
  21. package/dist/layouter-pro.scss +5 -5
  22. package/dist/modal.scss +357 -16
  23. package/dist/order-status.scss +49 -5
  24. package/dist/section.scss +5 -1
  25. package/dist/shareCartSideBar.scss +10 -8
  26. package/dist/shipping-payments.scss +19 -15
  27. package/dist/store-locations.scss +252 -160
  28. package/dist/tab-v2.scss +15 -15
  29. package/dist/text-temp.scss +4 -1
  30. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +36 -0
  31. package/dist/types/builder/tools/element-edit/grid.d.ts +26 -0
  32. package/dist/types/builder/tools/element-edit/language-menu.d.ts +77 -0
  33. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +4 -0
  34. package/dist/types/builder/tools/element-edit/userElements.d.ts +407 -0
  35. package/dist/user-elements.scss +1449 -490
  36. package/package.json +1 -1
package/dist/employee-bulk-order.scss CHANGED
@@ -1,68 +1,17 @@
1
- .employee_bulk_order_header {
2
- display: flex;
3
- justify-self: end;
4
- gap: 10px;
5
- .single_payment_action {
6
- display: flex;
7
- align-items: center;
8
- gap: 6px;
9
- }
10
- .svg_icon {
11
- display: flex;
12
- align-items: center;
13
- }
14
- }
15
-
16
- .product-card {
17
- display: flex;
18
- width: 100%;
19
- height: 100%;
20
- .image-section {
21
- width: 80px;
22
- height: 100%;
23
- img {
24
- width: 50px;
25
- height: 65px;
26
- object-fit: cover;
27
- border-radius: 2px;
28
- }
29
- }
30
- .info-section {
31
- margin-left: 12px;
32
- display: flex;
33
- flex-direction: column;
34
- justify-content: center;
35
- width: calc(100% - 80px);
36
- .header {
37
- width: 100%;
38
- display: flex;
39
- align-items: center;
40
- justify-content: space-between;
41
- position: relative;
42
- .product-name {
43
- font-weight: 600;
44
- font-size: 16px;
45
- color: #1a1a1a;
46
- }
47
- .svg_icon {
48
- display: flex;
49
- align-items: center;
50
- cursor: pointer;
51
- }
52
- }
53
- .item-number,
54
- .quota {
55
- font-size: 14px;
56
- color: #6b7280;
57
- margin-top: 2px;
58
- }
59
-
60
- .item-number span,
61
- .quota span {
62
- margin-left: 4px;
63
- }
64
- }
65
- }
1
+ // .employee_bulk_order_header {
2
+ // display: flex;
3
+ // justify-self: end;
4
+ // gap: 10px;
5
+ // .single_payment_action {
6
+ // display: flex;
7
+ // align-items: center;
8
+ // gap: 6px;
9
+ // }
10
+ // .svg_icon {
11
+ // display: flex;
12
+ // align-items: center;
13
+ // }
14
+ // }
66
15
 
67
16
  .employee-bulk-order-section {
68
17
  height: 100%;
@@ -190,7 +139,7 @@
190
139
  }
191
140
  .em_add-product-disabled {
192
141
  pointer-events: none;
193
- opacity: 0.8;
142
+ opacity: 0.5;
194
143
  cursor: default;
195
144
  }
196
145
  }
@@ -199,6 +148,7 @@
199
148
  border: 1px solid var(--_gray-200);
200
149
  overflow: auto;
201
150
  width: 250px;
151
+
202
152
  .employee_card {
203
153
  padding: 12px;
204
154
  // display: grid;
@@ -321,8 +271,68 @@
321
271
  width: 100%;
322
272
  border-bottom: 1px solid var(--_gray-200);
323
273
  .em_product-info {
324
- height: 65px;
325
274
  border-bottom: 1px solid var(--_gray-200);
275
+ height: 68px;
276
+ .product-card {
277
+ display: grid;
278
+ width: 100%;
279
+ gap: 8px;
280
+ grid-template-columns: 40px auto;
281
+ .image-section {
282
+ img {
283
+ width: 100%;
284
+ border-radius: 2px;
285
+ }
286
+ }
287
+ .product-card-info {
288
+ display: flex;
289
+ justify-content: space-between;
290
+ align-items: start;
291
+ gap: 12px;
292
+ width: 100%;
293
+ }
294
+ .info-section {
295
+ display: flex;
296
+ flex-direction: column;
297
+ justify-content: center;
298
+ .header {
299
+ width: 100%;
300
+ display: flex;
301
+ align-items: center;
302
+ justify-content: space-between;
303
+ position: relative;
304
+ .product-name {
305
+ font-weight: 600;
306
+ font-size: 16px;
307
+ color: #1a1a1a;
308
+ }
309
+ }
310
+ .em_p_code_s {
311
+ display: flex;
312
+ gap: 4px;
313
+ font-size: 12px;
314
+ }
315
+ .item-number,
316
+ .quota {
317
+ font-size: 14px;
318
+ color: #6b7280;
319
+ margin-top: 2px;
320
+ }
321
+
322
+ .item-number span,
323
+ .quota span {
324
+ margin-left: 4px;
325
+ }
326
+ }
327
+ .svg_icon {
328
+ cursor: pointer;
329
+ &:hover {
330
+ svg path {
331
+ stroke: var(--_error-700);
332
+ }
333
+ }
334
+ }
335
+ }
326
336
  }
327
337
  .selecte_variants_for_cart {
328
338
  height: 68px;
@@ -334,6 +344,7 @@
334
344
  justify-content: center;
335
345
  align-items: center;
336
346
  height: 100%;
347
+ color: var(--_gray-400);
337
348
  }
338
349
  .variantOptionValues {
339
350
  height: 24px;
@@ -343,11 +354,11 @@
343
354
  display: flex;
344
355
  justify-content: space-between;
345
356
  align-items: center;
357
+ padding: 4px 8px;
346
358
  cursor: pointer;
347
359
  &.active_vr {
348
360
  background-color: var(--_primary-25);
349
361
  color: var(--_primary-500);
350
- padding: 4px 8px;
351
362
  border-radius: 4px !important;
352
363
  line-height: 14px;
353
364
  }
@@ -386,7 +397,7 @@
386
397
  .em_product-variant,
387
398
  .em_product-info {
388
399
  // height: 50%;
389
- padding: 12px;
400
+ padding: 8px;
390
401
  }
391
402
  .em_product-variant {
392
403
  height: 68px;
@@ -436,7 +447,7 @@
436
447
  .em_p_variant_options {
437
448
  display: flex;
438
449
  flex-direction: column;
439
- gap: 12px;
450
+ gap: 16px;
440
451
  .em_p_opt {
441
452
  margin-bottom: 4px;
442
453
  .em_opt_name {
@@ -554,38 +565,6 @@
554
565
  background-color: var(--_primary-500);
555
566
  }
556
567
  }
557
- // .qty-action {
558
- // position: absolute;
559
- // top: 0;
560
- // height: 100%;
561
- // width: 64px;
562
- // display: grid;
563
- // // align-items: anchor-center;
564
- // // text-align: center;
565
- // background: #e6f0ff;
566
- // cursor: pointer;
567
- // &:hover {
568
- // background: #c3dbff;
569
- // }
570
-
571
- // .svg_icon {
572
- // display: flex;
573
- // align-items: center;
574
- // justify-self: center;
575
- // cursor: pointer;
576
- // }
577
- // }
578
- // .qty-action.decrease {
579
- // left: 0;
580
- // }
581
- // .qty-action.increase {
582
- // right: 1px;
583
- // }
584
- // .qty_action_disabled {
585
- // pointer-events: none;
586
- // opacity: 0.8;
587
- // cursor: default;
588
- // }
589
568
  }
590
569
  .invalid_qty {
591
570
  border: #f51605 1px solid !important;
@@ -626,263 +605,3190 @@
626
605
  }
627
606
  }
628
607
 
629
- .right_col {
608
+ .icon_with_label_section {
630
609
  display: flex;
631
- align-items: center;
632
- gap: 12px;
633
- .employee_bulk_order_header {
634
- display: flex;
635
- justify-self: end;
636
- align-items: center;
637
- gap: 24px;
638
- .single_payment_action {
639
- display: flex;
640
- align-items: center;
641
- gap: 6px;
642
- }
643
- .svg_icon {
644
- display: flex;
645
- align-items: center;
646
- cursor: pointer;
610
+ gap: 4px;
611
+ .svg_icon {
612
+ svg path {
613
+ stroke: var(--_primary-400);
647
614
  }
615
+ }
616
+ .label_elm {
617
+ color: var(--_primary-400);
618
+ font-size: 14px;
619
+ text-decoration: underline;
620
+ }
621
+ }
648
622
 
649
- .employee_bulk_order_header_item {
650
- color: #344054;
651
- font-size: 14px;
623
+ // checkout styles
624
+ .emp_bulk_order_chk {
625
+ .em_chk_wrapper {
626
+ height: 100%;
627
+ width: 100%;
628
+ background-color: var(--_gray-50);
629
+ .em_quota_container {
652
630
  display: flex;
653
- justify-content: center;
654
- align-items: center;
655
- gap: 4px;
656
- position: relative;
657
- line-height: 20px;
658
- &:after {
659
- content: "";
660
- width: 1px;
661
- height: 24px;
662
- background: #d0d5dd;
663
- position: absolute;
664
- right: -12px;
665
- }
666
-
667
- .single_checkout_sec_opt {
668
- display: flex;
669
- gap: 8px;
670
- }
631
+ flex-direction: column;
632
+ position: sticky;
633
+ top: 0;
671
634
 
672
- .disabled {
673
- opacity: 0.4;
674
- }
675
- }
676
- .emp_options_wrapper {
677
- display: flex;
678
- align-items: center;
679
- .user_icon {
680
- width: 40px;
681
- height: 40px;
635
+ // employee checkout flow start
636
+ .quota-bar-container {
682
637
  display: flex;
683
- justify-content: center;
684
638
  align-items: center;
685
- border-radius: 4px;
686
- cursor: pointer;
687
- &.active {
688
- background-color: var(--_gray-200);
639
+ padding: 10px 16px;
640
+ background-color: #fff;
641
+ border-bottom: 1px solid #ddd;
642
+ font-family: "Arial", sans-serif;
643
+ font-size: 14px;
644
+ white-space: nowrap;
645
+
646
+ .quota-label {
647
+ font-weight: 500;
648
+ margin-right: 10px;
649
+ color: #333;
689
650
  }
690
- & > span {
651
+
652
+ .scroll-btn {
653
+ background: none;
654
+ border: none;
655
+ font-size: 16px;
656
+ padding: 4px 8px;
657
+ cursor: pointer;
658
+ color: #555;
691
659
  display: flex;
660
+
661
+ &:hover {
662
+ color: #000;
663
+ }
692
664
  }
693
- &:hover {
694
- background-color: var(--_gray-200);
665
+
666
+ .quota-scroll {
667
+ display: flex;
668
+ overflow-x: auto;
669
+ scrollbar-width: none; // Firefox
670
+ -ms-overflow-style: none; // IE 10+
671
+ flex: 1;
672
+
673
+ &::-webkit-scrollbar {
674
+ display: none;
675
+ }
695
676
  }
696
- }
697
- .emp_options {
698
- position: absolute;
699
- top: 44px;
700
- width: 300px;
701
- background-color: var(--_base-white);
702
- border: 1px solid var(--_gray-200);
703
- border-radius: 4px;
704
- z-index: 10;
705
- .emp_options_header {
706
- padding: 12px;
707
- font-size: 14px;
708
- font-weight: 600;
709
- color: var(--_gray-600);
710
- border-bottom: 1px solid var(--_gray-200);
677
+
678
+ .quota-item {
679
+ display: flex;
680
+ align-items: center;
681
+ gap: 4px;
682
+ color: #444;
683
+ &:not(:last-child):after {
684
+ content: "";
685
+ display: inline-block;
686
+ height: 20px;
687
+ width: 1px;
688
+ background: var(--_gray-300);
689
+ margin-inline: 24px;
690
+ }
691
+
692
+ .quota-name {
693
+ font-weight: 600;
694
+ }
695
+
696
+ .quota-count {
697
+ color: #222;
698
+ }
699
+
700
+ .quota-expiry {
701
+ font-size: 12px;
702
+ color: #999;
703
+ margin-left: 4px;
704
+ }
711
705
  }
712
- .emp_options_list {
713
- padding: 12px;
714
- .emp_options_list_item {
706
+ }
707
+
708
+ .user-info-header {
709
+ display: flex;
710
+ justify-content: space-between;
711
+ align-items: center;
712
+ padding: 12px 16px;
713
+ background-color: #fff;
714
+ border-bottom: 1px solid #ddd;
715
+ font-family: "Arial", sans-serif;
716
+ font-size: 14px;
717
+
718
+ .user-info-left {
719
+ display: flex;
720
+ align-items: center;
721
+ flex-wrap: wrap;
722
+ svg {
723
+ display: flex;
724
+ }
725
+
726
+ .user-name {
727
+ font-weight: 600;
728
+ color: var(--_gray-900);
729
+ border-right: 1px solid var(--_gray-400);
730
+ padding-right: 16px;
731
+ margin-right: 16px;
732
+ }
733
+
734
+ .user-item {
715
735
  display: flex;
716
- justify-content: space-between;
717
736
  align-items: center;
718
- gap: 8px;
719
- .emp_options_list_item_label {
720
- display: flex;
721
- gap: 12px;
737
+ & > span {
738
+ display: inline-block;
739
+ margin-right: 4px;
740
+ }
741
+ color: #555;
742
+ &:not(:last-child):after {
743
+ content: "";
744
+ display: inline-block;
745
+ width: 4px;
746
+ height: 4px;
747
+ border-radius: 50%;
748
+ background-color: var(--_gray-400);
749
+ margin-inline: 16px;
722
750
  }
723
751
 
724
- // &:hover {
725
- // background-color: var(--_primary-25);
726
- // color: var(--_primary-400);
727
- // }
752
+ .icon {
753
+ margin-right: 6px;
754
+ color: #888;
755
+ }
728
756
  }
729
- p {
730
- font-size: 12px;
731
- color: var(--_gray-500);
732
- padding-block: 4px 16px;
757
+ }
758
+
759
+ .trigger-btn {
760
+ display: flex;
761
+ padding: 4px;
762
+ border-radius: 4px;
763
+ color: var(--_gray-600);
764
+ &:hover {
765
+ background: var(--_gray-100);
766
+ color: var(--_gray-900);
733
767
  }
734
768
  }
735
- .emp_options_footer {
769
+
770
+ .user-info-right {
736
771
  display: flex;
737
- border-top: 1px solid var(--_gray-200);
772
+ align-items: center;
773
+ gap: 8px;
738
774
 
739
- & > div {
740
- flex-basis: 50%;
741
- display: flex;
742
- justify-content: center;
743
- align-items: center;
744
- padding: 16px;
775
+ .nav-button,
776
+ .close-button {
777
+ background: none;
778
+ border: none;
779
+ font-size: 16px;
745
780
  cursor: pointer;
746
- &:first-child {
747
- border-right: 1px solid var(--_gray-200);
748
- }
781
+ color: #555;
782
+ padding: 4px 8px;
783
+
749
784
  &:hover {
750
- background-color: var(--_primary-25);
751
- svg path {
752
- stroke: var(--_primary-400);
753
- }
785
+ color: #000;
754
786
  }
755
787
  }
788
+
789
+ .close-button {
790
+ font-size: 20px;
791
+ }
756
792
  }
757
793
  }
758
- }
759
- .emp_review_cart_btn {
760
- padding: 8px 16px;
761
- border: 1px solid var(--_gray-300);
762
- border-radius: 6px;
763
- color: var(--_gray-700);
764
- cursor: pointer;
765
- &:hover {
766
- background-color: var(--_gray-50);
767
- }
768
- }
769
- .emp_discard_btn {
770
- padding-inline: 16px;
771
- border-radius: 6px;
772
- color: var(--_gray-700);
773
- cursor: pointer;
774
- height: 32px;
775
- display: flex;
776
- align-items: center;
777
- &.disabled {
778
- pointer-events: none;
779
- opacity: 0.8;
780
- }
781
- &:hover {
782
- background-color: var(--_gray-50);
783
- }
784
- }
785
- .action_item {
786
- cursor: pointer;
787
- }
788
- .em_order_settings_act {
789
- width: 40px;
790
- }
791
- .em_btn_act {
792
- padding-inline: 16px;
793
- height: 32px;
794
- border-radius: 4px;
795
- }
796
794
 
797
- .em_review_btn {
798
- background: #243dc6;
799
- color: #fff;
800
- }
795
+ .gallery-container {
796
+ display: flex;
797
+ align-items: center;
798
+ padding: 8px 12px;
799
+ background-color: #fff;
800
+ border-top: 1px solid #ddd;
801
+ border-bottom: 1px solid #ddd;
802
+ }
801
803
 
802
- .em_btn_act_disabled {
803
- pointer-events: none;
804
- opacity: 0.8;
805
- }
806
- }
807
- }
804
+ .nav-arrow {
805
+ background: none;
806
+ border: none;
807
+ font-size: 18px;
808
+ padding: 8px;
809
+ cursor: pointer;
810
+ color: #666;
808
811
 
809
- .product-card {
810
- display: flex;
811
- align-items: center;
812
- width: 100%;
813
- height: 100%;
814
- .image-section {
815
- width: 32px;
816
- height: 32px;
817
- img {
818
- width: 100%;
819
- height: 100%;
820
- object-fit: cover;
821
- border-radius: 2px;
822
- }
823
- }
824
- .info-section {
825
- margin-left: 12px;
826
- display: flex;
827
- flex-direction: column;
828
- justify-content: center;
829
- width: calc(100% - 48px);
830
- .header {
831
- width: 100%;
832
- display: flex;
833
- align-items: center;
834
- justify-content: space-between;
835
- position: relative;
836
- .product-name {
837
- font-weight: 600;
838
- font-size: 14px;
839
- color: #1a1a1a;
840
- white-space: nowrap;
841
- overflow: hidden;
842
- text-overflow: ellipsis;
812
+ &:hover {
813
+ color: #000;
814
+ }
843
815
  }
844
- .svg_icon {
816
+
817
+ .gallery-scroll {
845
818
  display: flex;
846
- align-items: center;
819
+ overflow-x: auto;
820
+ gap: 16px;
821
+ padding: 0 8px;
822
+ scrollbar-width: none;
823
+ -ms-overflow-style: none;
824
+ flex: 1;
825
+
826
+ &::-webkit-scrollbar {
827
+ display: none;
828
+ }
829
+ }
830
+
831
+ .gallery-item {
832
+ min-width: 250px;
833
+ background: var(--_base-white);
834
+ border-radius: 4px;
835
+ padding: 8px;
847
836
  cursor: pointer;
848
- &:hover {
849
- svg path {
850
- stroke: var(--_error-700);
837
+ border: 2px solid transparent;
838
+ transition: border 0.2s ease;
839
+ display: flex;
840
+ gap: 8px;
841
+
842
+ &.active {
843
+ border-color: #3b82f6;
844
+ background-color: #eef4ff;
845
+ }
846
+
847
+ .item-img {
848
+ width: 80px;
849
+ height: 80px;
850
+ object-fit: cover;
851
+ border-radius: 4px;
852
+ background-color: var(--_gray-100);
853
+ }
854
+
855
+ .item-info {
856
+ margin-top: 6px;
857
+ font-size: 12px;
858
+ color: #333;
859
+ display: flex;
860
+ align-items: center;
861
+ color: #333;
862
+ display: flex;
863
+ align-items: start;
864
+ flex-direction: column;
865
+ justify-content: start;
866
+
867
+ .item-title {
868
+ font-weight: 600;
869
+ }
870
+
871
+ .item-id {
872
+ color: #777;
873
+ font-size: 11px;
874
+ }
875
+
876
+ .item-quota,
877
+ .item-stock {
878
+ font-size: 11px;
879
+ color: #555;
880
+ margin-top: 2px;
851
881
  }
852
882
  }
853
883
  }
884
+ // employee checkout flow end
854
885
  }
855
- .em_p_code_s {
886
+ .em_chk_container {
856
887
  display: flex;
857
- gap: 4px;
858
- .em_p_code {
859
- max-width: 160px;
860
- }
861
- }
862
- .em_p_code_s,
863
- .em_quota {
864
- font-size: 12px;
865
- color: #6b7280;
866
- margin-top: 2px;
867
- }
888
+ gap: 24px;
889
+ margin: 0 auto;
890
+ padding: 16px;
891
+ width: 100%;
892
+ height: 100%;
893
+ background-color: var(--_base-white);
868
894
 
869
- .em_quota span {
870
- margin-left: 4px;
871
- }
872
- }
873
- }
895
+ .chk_section {
896
+ // emp checkout started
897
+ width: calc(100% - 400px);
898
+ .chk_checkout_accordion {
899
+ display: flex;
900
+ padding: var(--_ctm-lt-pg);
901
+ flex-direction: column;
902
+ gap: var(--_ctm-lt-te-ad-it-gp);
903
+ word-break: keep-all;
904
+ padding-bottom: 24px;
874
905
 
875
- .icon_with_label_section {
876
- display: flex;
877
- gap: 4px;
878
- .svg_icon {
879
- svg path {
880
- stroke: var(--_primary-400);
881
- }
882
- }
883
- .label_elm {
884
- color: var(--_primary-400);
885
- font-size: 14px;
906
+ .chk_checkout_title {
907
+ color: var(--_gray-900);
908
+ font-size: 24px;
909
+ font-weight: 600;
910
+ line-height: 32px;
911
+ margin-bottom: 16px;
912
+ }
913
+
914
+ .accordion {
915
+ border-radius: 4px;
916
+ display: flex;
917
+ gap: var(--_ctm-lt-an-hg-ad-ve-gp);
918
+ flex-direction: column;
919
+
920
+ .accordion-header {
921
+ padding: 12px;
922
+ display: flex;
923
+ justify-content: space-between;
924
+ align-items: center;
925
+ cursor: pointer;
926
+ background-color: #f5f5f5;
927
+ border-color: #f5f5f5;
928
+ border-radius: 4px;
929
+
930
+ .accordion-title {
931
+ margin-right: 1rem;
932
+ white-space: nowrap;
933
+ display: flex;
934
+ align-items: center;
935
+ gap: 12px;
936
+ font-size: 16px;
937
+ font-weight: 600;
938
+ line-height: 24px;
939
+
940
+ span {
941
+ display: flex;
942
+ }
943
+ }
944
+ .edit-btn {
945
+ cursor: pointer;
946
+ color: var(--_primary-400);
947
+
948
+ &:hover {
949
+ color: var(--_primary-500);
950
+ }
951
+ }
952
+ }
953
+
954
+ .accordion-body {
955
+ margin-block: 16px 28px;
956
+ .summary {
957
+ .chk_shipping_method_label {
958
+ display: flex;
959
+ align-items: center;
960
+ gap: 4px;
961
+ color: var(--_gray-500);
962
+ }
963
+
964
+ .chk_shipping_method_heading {
965
+ color: var(--_gray-500);
966
+ font-weight: 600;
967
+ }
968
+ }
969
+
970
+ .shipping-address {
971
+ display: flex;
972
+ flex-direction: column;
973
+ gap: 24px;
974
+
975
+ .chk_saved_address_button {
976
+ cursor: pointer;
977
+ border-radius: 6px;
978
+ color: var(--_primary-400);
979
+ display: flex;
980
+ align-items: center;
981
+ gap: 4px;
982
+ }
983
+
984
+ .shipping_address_container {
985
+ display: flex;
986
+ flex-direction: column;
987
+ gap: 24px;
988
+ }
989
+
990
+ .shipping_address_heading_container {
991
+ display: flex;
992
+ justify-content: space-between;
993
+ align-items: center;
994
+ max-width: 675px;
995
+ font-size: 18px;
996
+ font-weight: 600;
997
+ }
998
+
999
+ form {
1000
+ display: flex;
1001
+ flex-direction: column;
1002
+ gap: 16px;
1003
+ max-width: 85%;
1004
+
1005
+ @media (max-width: 500px) {
1006
+ max-width: 100%;
1007
+ }
1008
+ }
1009
+
1010
+ .chk_shipping_address_form_group {
1011
+ display: flex;
1012
+ justify-content: space-between;
1013
+ flex-direction: row;
1014
+ gap: 12px;
1015
+ }
1016
+
1017
+ .chk_shipping_address_input_container {
1018
+ display: flex;
1019
+ width: 100%;
1020
+ }
1021
+
1022
+ .chk_shipping_address_input_wrapper {
1023
+ display: flex;
1024
+ flex-direction: column;
1025
+ gap: 6px;
1026
+ width: 100%;
1027
+ }
1028
+
1029
+ .chk_shipping_address_form_label {
1030
+ color: var(--_gray-600);
1031
+ font-size: 14px;
1032
+ }
1033
+
1034
+ .chk_shiping_address_form_input {
1035
+ padding: 8px 12px;
1036
+ width: -webkit-fill-available;
1037
+ background-color: var(--_base-white);
1038
+ color: var(--_gray-600);
1039
+ border: 1px solid var(--_gray-300);
1040
+ border-radius: 6px;
1041
+ height: 40px;
1042
+
1043
+ &:focus-within {
1044
+ border: 1px solid var(--_primary-300);
1045
+ outline: 2px solid var(--_primary-100);
1046
+ }
1047
+ }
1048
+
1049
+ input[type="checkbox"] {
1050
+ width: auto;
1051
+ }
1052
+
1053
+ .error-msg {
1054
+ font-size: 12px;
1055
+ color: #ff0000;
1056
+ }
1057
+ label {
1058
+ display: flex;
1059
+ align-items: center;
1060
+ gap: 0.5rem;
1061
+ font-size: 14px;
1062
+ }
1063
+
1064
+ .checkbox-group {
1065
+ display: flex;
1066
+ align-items: center;
1067
+ justify-content: start;
1068
+ gap: 8px;
1069
+ }
1070
+
1071
+ .chk_shipping_address_use_as_billing_address_chkbx {
1072
+ display: flex;
1073
+ align-items: center;
1074
+ gap: 0.5rem;
1075
+ color: var(--_gray-600);
1076
+ font-size: 14px;
1077
+
1078
+ .custom-checkbox {
1079
+ width: 20px;
1080
+ height: 20px;
1081
+ border: 1px solid #d0d5dd;
1082
+ border-radius: 4px;
1083
+ position: relative;
1084
+ background-color: #fff;
1085
+ transition: all 0.2s ease;
1086
+
1087
+ &::after {
1088
+ content: "";
1089
+ position: absolute;
1090
+ display: none;
1091
+ left: 5px;
1092
+ top: 0.5px;
1093
+ width: 5px;
1094
+ height: 10px;
1095
+ border: solid #fff;
1096
+ border-width: 0 2px 2px 0;
1097
+ transform: rotate(45deg);
1098
+ }
1099
+ }
1100
+ }
1101
+
1102
+ input[type="checkbox"]:checked + label {
1103
+ .custom-checkbox {
1104
+ background-color: #004dff;
1105
+ border-color: #004dff;
1106
+
1107
+ &::after {
1108
+ display: block;
1109
+ }
1110
+ }
1111
+ }
1112
+ }
1113
+
1114
+ .chk_multi_address {
1115
+ display: flex;
1116
+ flex-direction: column;
1117
+ width: 100%;
1118
+ gap: 48px;
1119
+
1120
+ &_product_container {
1121
+ display: flex;
1122
+ flex-direction: column;
1123
+ gap: 16px;
1124
+ width: 100%;
1125
+ }
1126
+
1127
+ &_product_info_container {
1128
+ display: flex;
1129
+ flex-direction: row;
1130
+ justify-content: space-between;
1131
+ align-items: flex-start;
1132
+ width: 100%;
1133
+
1134
+ @media (max-width: 500px) {
1135
+ flex-direction: column;
1136
+ }
1137
+ }
1138
+
1139
+ &_product_left_container {
1140
+ display: flex;
1141
+ flex: 1 0 0;
1142
+ width: 100%;
1143
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
1144
+ }
1145
+
1146
+ &_product_image {
1147
+ height: var(--_ctm-lt-me-as-pt-ie-ht);
1148
+ width: var(--_ctm-lt-me-as-pt-ie-wh);
1149
+ border: 1px solid var(--_gray-100);
1150
+ border-radius: 6px;
1151
+ }
1152
+
1153
+ &_product_info_wrapper {
1154
+ display: flex;
1155
+ flex-direction: column;
1156
+ gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);
1157
+
1158
+ .chk_multi_address_product_name {
1159
+ color: var(--_gray-900);
1160
+ font-size: 18px;
1161
+ font-weight: 600;
1162
+ line-height: 28px;
1163
+ }
1164
+
1165
+ .chk_multi_address_product_info {
1166
+ color: var(--_gray-600);
1167
+ font-size: 14px;
1168
+ list-style: 20px;
1169
+ }
1170
+ }
1171
+
1172
+ &_product_right_container {
1173
+ display: flex;
1174
+ flex-direction: row;
1175
+ gap: 30px;
1176
+ align-items: center;
1177
+
1178
+ @media (max-width: 500px) {
1179
+ align-self: flex-end;
1180
+ }
1181
+
1182
+ .chk_multi_address_product_price {
1183
+ color: var(--_gray-900);
1184
+ font-size: 20px;
1185
+ font-weight: 600;
1186
+ }
1187
+ }
1188
+
1189
+ &_qty_wrapper {
1190
+ display: flex;
1191
+ flex-direction: row;
1192
+ align-items: center;
1193
+ gap: 4px;
1194
+
1195
+ .chk_multi_address_product_info {
1196
+ color: var(--_gray-600);
1197
+ font-size: 12px;
1198
+ line-height: 18px;
1199
+ }
1200
+
1201
+ .chk_multi_address_product_qty {
1202
+ color: var(--_gray-900);
1203
+ font-size: 12px;
1204
+ font-weight: 600;
1205
+ }
1206
+ }
1207
+
1208
+ &_shipping_option_container {
1209
+ display: flex;
1210
+ flex-direction: column;
1211
+ gap: 6px;
1212
+
1213
+ @media (max-width: 500px) {
1214
+ flex-direction: row;
1215
+ }
1216
+ }
1217
+
1218
+ &_shiping_option_heading_wrapper {
1219
+ display: grid;
1220
+ grid-template-columns: 0.5fr 2fr 2fr 20px;
1221
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
1222
+ white-space: nowrap;
1223
+ align-items: center;
1224
+
1225
+ @media (max-width: 500px) {
1226
+ grid-template-columns: auto;
1227
+ }
1228
+
1229
+ .chk_multi_address_product_label {
1230
+ color: var(--_gray-600);
1231
+ font-size: 12px;
1232
+ }
1233
+ }
1234
+
1235
+ .chk_multi_address_icon {
1236
+ svg {
1237
+ width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
1238
+ height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
1239
+ path {
1240
+ stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
1241
+ }
1242
+ }
1243
+ &:hover {
1244
+ cursor: pointer;
1245
+ svg {
1246
+ path {
1247
+ stroke: var(--_error-700);
1248
+ }
1249
+ }
1250
+ }
1251
+ }
1252
+ .chk_shiping_address_form_input {
1253
+ padding: 8px 12px;
1254
+ width: -webkit-fill-available;
1255
+ border: 1px solid var(--_gray-300);
1256
+ border-radius: 6px;
1257
+ height: 40px;
1258
+ background-color: var(--_base-white);
1259
+
1260
+ &:focus-within {
1261
+ border: 1px solid var(--_primary-300);
1262
+ outline: 2px solid var(--_primary-100);
1263
+ }
1264
+
1265
+ .custom-arrows {
1266
+ position: absolute;
1267
+ right: 6px;
1268
+ top: 50%;
1269
+ transform: translateY(-50%);
1270
+ display: flex;
1271
+ flex-direction: column;
1272
+
1273
+ .arrow {
1274
+ all: unset;
1275
+ cursor: pointer;
1276
+ font-size: 10px;
1277
+ line-height: 1;
1278
+ }
1279
+ }
1280
+
1281
+ // .input-field {
1282
+ // padding: 8px 12px;
1283
+ // width: -webkit-fill-available;
1284
+ // border: 1px solid var(--_gray-300);
1285
+ // border-radius: 6px;
1286
+ // height: 40px;
1287
+ // background-color: var(--_base-white);
1288
+
1289
+ // &:focus-within {
1290
+ // border: 1px solid var(--_primary-300);
1291
+ // outline: 2px solid var(--_primary-100);
1292
+ // }
1293
+ // }
1294
+ }
1295
+ }
1296
+
1297
+ .shipping-method {
1298
+ display: flex;
1299
+ flex-direction: column;
1300
+ gap: var(--_ctm-lt-sg-md-le-gp);
1301
+
1302
+ &__grid {
1303
+ display: grid;
1304
+ grid-template-columns: 1fr;
1305
+ gap: var(--_ctm-lt-sg-md-le-gp);
1306
+
1307
+ @media (min-width: 768px) {
1308
+ grid-template-columns: 1fr 1fr;
1309
+ gap: 32px;
1310
+ }
1311
+ }
1312
+
1313
+ &__group {
1314
+ display: flex;
1315
+ flex-direction: column;
1316
+ gap: 12px;
1317
+
1318
+ .chk_shipping_method_heading {
1319
+ color: var(--_gray-700);
1320
+ font-weight: 600;
1321
+ font-size: 16px;
1322
+ margin-bottom: 8px;
1323
+ }
1324
+ }
1325
+
1326
+ &__options {
1327
+ display: flex;
1328
+ flex-direction: column;
1329
+ gap: 12px;
1330
+ }
1331
+
1332
+ &__option {
1333
+ display: flex;
1334
+ align-items: center;
1335
+ cursor: pointer;
1336
+ transition: all 0.2s ease;
1337
+
1338
+ .custom_radio {
1339
+ width: 20px;
1340
+ margin-right: 12px;
1341
+ height: 20px;
1342
+ border: 1px solid transparent; /* blue ring */
1343
+ border-radius: 50%;
1344
+ display: inline-block;
1345
+ box-sizing: border-box;
1346
+ background-color: white;
1347
+ transition: all 0.2s ease;
1348
+
1349
+ input[type="radio"]:checked + .radio-style {
1350
+ background-color: #1a3dcc;
1351
+ border: 6px solid;
1352
+ }
1353
+ }
1354
+
1355
+ .chk_shipping_method_label {
1356
+ color: var(--_gray-500);
1357
+ font-size: 14px;
1358
+ }
1359
+
1360
+ .chk_shipping_method_value {
1361
+ color: var(--_gray-900);
1362
+ font-size: 14px;
1363
+ }
1364
+
1365
+ // input[type="radio"] {
1366
+ // margin-right: 12px;
1367
+ // width: 16px;
1368
+ // height: 16px;
1369
+ // accent-color: #2563eb;
1370
+ // cursor: pointer;
1371
+ // // display: none;
1372
+ // }
1373
+
1374
+ .custom_radio {
1375
+ position: relative;
1376
+ input[type="radio"] {
1377
+ margin-right: 12px;
1378
+ width: 16px;
1379
+ height: 16px;
1380
+ accent-color: #2563eb;
1381
+ cursor: pointer;
1382
+ display: none;
1383
+ }
1384
+ .radio-style {
1385
+ width: 20px;
1386
+ height: 20px;
1387
+ border-radius: 50%;
1388
+ border: 1px solid #d0d5dd;
1389
+ background: white;
1390
+ display: inline-block;
1391
+ box-sizing: border-box;
1392
+ transition: all 0.2s;
1393
+ }
1394
+ input[type="radio"]:checked + .radio-style {
1395
+ background-color: var(--_base-white);
1396
+ border: 5px solid var(--_primary-400);
1397
+ }
1398
+ }
1399
+
1400
+ &.selected {
1401
+ background-color: var(--_base-white);
1402
+ border-color: var(--_primary-400);
1403
+ }
1404
+ }
1405
+
1406
+ // order level shipping
1407
+ .order_level_shipping {
1408
+ display: flex;
1409
+ gap: 24px;
1410
+ .order_level_shipping_img {
1411
+ width: 120px;
1412
+ height: 120px;
1413
+ background-color: var(--_gray-100);
1414
+ border-radius: 6px;
1415
+ }
1416
+ }
1417
+ }
1418
+
1419
+ .chk_payment-options {
1420
+ display: flex;
1421
+ flex-direction: column;
1422
+ gap: var(--_ctm-lt-pt-os-gp-bn-cs);
1423
+
1424
+ .add_credit_card {
1425
+ display: flex;
1426
+ gap: 12px;
1427
+ padding: 16px;
1428
+
1429
+ .cc_icon {
1430
+ svg {
1431
+ width: 18px;
1432
+ height: 14px;
1433
+ }
1434
+ }
1435
+
1436
+ .cc_info {
1437
+ display: flex;
1438
+ flex-direction: column;
1439
+ gap: 6px;
1440
+
1441
+ .cc_title {
1442
+ font-size: 14px;
1443
+ font-weight: 600;
1444
+ }
1445
+ }
1446
+ }
1447
+ .add_new_credit_card {
1448
+ display: flex;
1449
+ justify-content: space-between;
1450
+ align-items: center;
1451
+ padding-inline: 16px;
1452
+ }
1453
+ .cc_tertiary_btn {
1454
+ color: var(--_primary-400);
1455
+
1456
+ &:hover {
1457
+ color: var(--_primary-500);
1458
+ text-decoration: underline;
1459
+ }
1460
+ }
1461
+ .gift_crd_chk_payment_option {
1462
+ border: 1px solid var(--_gray-300);
1463
+ border-radius: 4px;
1464
+ }
1465
+ .payment_program {
1466
+ // padding: 0 12px;
1467
+ .payment_program_header {
1468
+ display: flex;
1469
+ justify-content: space-between;
1470
+ gap: 8px;
1471
+ align-items: center;
1472
+
1473
+ margin-bottom: 16px;
1474
+
1475
+ &_label {
1476
+ display: flex;
1477
+ justify-content: space-between;
1478
+ align-items: center;
1479
+ &_title {
1480
+ font-size: 14px;
1481
+ font-weight: 600;
1482
+ color: var(--_gray-600);
1483
+ }
1484
+ &_pds {
1485
+ &_label {
1486
+ font-size: 14px;
1487
+ color: var(--_gray-600);
1488
+ }
1489
+ &_value {
1490
+ font-size: 14px;
1491
+ color: var(--_gray-900);
1492
+ }
1493
+ }
1494
+ }
1495
+ }
1496
+ }
1497
+
1498
+ .chk_payment_option_wrapper {
1499
+ display: flex;
1500
+ flex-direction: column;
1501
+ border: 1px solid var(--_gray-300);
1502
+ margin-bottom: 12px;
1503
+ border-radius: 4px;
1504
+ overflow: hidden;
1505
+
1506
+ .pp_pmnt_method_groups {
1507
+ .pp_ppm_section {
1508
+ background: #f5f5f5;
1509
+ padding: 12px 16px;
1510
+ font-size: 12px;
1511
+ display: flex;
1512
+ justify-content: space-between;
1513
+ gap: 8px;
1514
+ .pp_ppm_section_label {
1515
+ font-size: 14px;
1516
+ font-weight: 600;
1517
+ color: var(--_gray-900);
1518
+ }
1519
+ .pp_ppm_section_value {
1520
+ font-size: 14px;
1521
+ font-weight: 600;
1522
+ color: var(--_gray-600);
1523
+ .pp_ppm_section_value_lable {
1524
+ font-weight: 500;
1525
+ color: var(--_gray-500);
1526
+ }
1527
+ }
1528
+ }
1529
+ .payment_methods {
1530
+ // padding: 12px;
1531
+ display: grid;
1532
+ gap: 8px;
1533
+ .chk_payment_option {
1534
+ .chk_payment_section_wrapper {
1535
+ width: 100%;
1536
+ display: flex;
1537
+ justify-content: space-between;
1538
+ padding: 16px;
1539
+ &:hover {
1540
+ background-color: var(--_gray-50);
1541
+ }
1542
+ .chk_payment_section {
1543
+ display: flex;
1544
+ justify-content: space-between;
1545
+ align-items: center;
1546
+ width: 100%;
1547
+ .chk_payment_section_col_left {
1548
+ display: flex;
1549
+ gap: 12px;
1550
+ .chk_payment_section_method {
1551
+ display: flex;
1552
+ flex-direction: column;
1553
+ .chk_payment_section_method_name {
1554
+ font-size: 14px;
1555
+ font-weight: 600;
1556
+ line-height: 20px;
1557
+ color: var(--_gray-700);
1558
+ }
1559
+ & > div {
1560
+ display: flex;
1561
+ gap: 4px;
1562
+ .label {
1563
+ font-size: 12px;
1564
+ color: var(--_gray-500);
1565
+ }
1566
+ .price {
1567
+ font-size: 12px;
1568
+ color: var(--_gray-900);
1569
+ }
1570
+ }
1571
+ }
1572
+ }
1573
+ &_col_right {
1574
+ .chk_currency_inp {
1575
+ height: 44px;
1576
+ border: 1px solid var(--_gray-200);
1577
+ border-radius: 4px;
1578
+ background-color: var(--_base-white);
1579
+ display: flex;
1580
+ width: 155px;
1581
+ overflow: hidden;
1582
+ align-items: center;
1583
+ padding-inline: 12px;
1584
+ gap: 12px;
1585
+ &:focus-within {
1586
+ border: 1px solid var(--_primary-200);
1587
+ outline: 2px solid var(--_primary-50);
1588
+ }
1589
+ input {
1590
+ height: inherit;
1591
+ }
1592
+ }
1593
+ }
1594
+ }
1595
+
1596
+ .chk_payment_options_heading {
1597
+ color: var(--_gray-900);
1598
+ font-size: 16px;
1599
+ font-weight: 600;
1600
+ }
1601
+
1602
+ // payment other options styles
1603
+ .chk_pmnt_other_options {
1604
+ display: flex;
1605
+ justify-content: space-between;
1606
+ gap: 80px;
1607
+ padding: 16px;
1608
+ .chk_pmnt_other_options_left_container {
1609
+ display: flex;
1610
+ gap: 12px;
1611
+ .chk_pmnt_option_info_wrapper {
1612
+ display: flex;
1613
+ gap: 12px;
1614
+ .cards {
1615
+ display: flex;
1616
+ flex-direction: column;
1617
+ gap: 8px;
1618
+ .chk_payment_options_name {
1619
+ font-weight: 600;
1620
+ }
1621
+ span {
1622
+ font-size: 12px;
1623
+ .chk_payment_options_label {
1624
+ color: var(--_gray-600);
1625
+ }
1626
+ .chk_payment_options_value {
1627
+ color: var(--_gray-900);
1628
+ }
1629
+ }
1630
+ }
1631
+ }
1632
+ }
1633
+ .chk_pmnt_other_options_container {
1634
+ padding: 16px;
1635
+ }
1636
+ }
1637
+
1638
+ &__other_option_wrapper {
1639
+ display: flex;
1640
+ width: 100%;
1641
+ justify-content: space-between;
1642
+ padding: 16px;
1643
+
1644
+ @media (max-width: 500px) {
1645
+ flex-direction: column;
1646
+ }
1647
+ }
1648
+
1649
+ &_left_container {
1650
+ display: flex;
1651
+ gap: 12px;
1652
+ align-items: flex-start;
1653
+ .chk_payment_option__info_wrapper {
1654
+ display: flex;
1655
+ gap: 0px;
1656
+ }
1657
+
1658
+ @media (max-width: 500px) {
1659
+ flex-wrap: wrap;
1660
+ }
1661
+ }
1662
+
1663
+ &__left_wrapper {
1664
+ display: flex;
1665
+ flex-direction: column;
1666
+ align-items: flex-start;
1667
+ gap: 16px;
1668
+ }
1669
+
1670
+ &__card_icon {
1671
+ width: 60px;
1672
+ height: 40px;
1673
+ }
1674
+
1675
+ &__info_wrapper {
1676
+ display: flex;
1677
+ flex-direction: column;
1678
+
1679
+ .chk_payment_options_name {
1680
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1681
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1682
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1683
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1684
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1685
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1686
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1687
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1688
+ }
1689
+
1690
+ .chk_payment_options_label {
1691
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1692
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1693
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1694
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1695
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1696
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1697
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1698
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1699
+ }
1700
+
1701
+ .chk_payment_options_value {
1702
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1703
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1704
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1705
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1706
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1707
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1708
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1709
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1710
+ }
1711
+ }
1712
+
1713
+ &_right_container {
1714
+ display: flex;
1715
+ gap: 6px;
1716
+ align-items: flex-start;
1717
+
1718
+ @media (max-width: 500px) {
1719
+ justify-content: flex-end;
1720
+ }
1721
+ }
1722
+
1723
+ &_input {
1724
+ display: flex;
1725
+ padding: 9px 12px;
1726
+ align-items: center;
1727
+ max-width: 96px;
1728
+ background-color: var(--_base-white);
1729
+ border: 1px solid var(--_gray-300);
1730
+ border-radius: 6px;
1731
+ color: var(--_gray-700);
1732
+
1733
+ &:focus-within {
1734
+ border: 1px solid var(--_primary-300);
1735
+ outline: 2px solid var(--_primary-100);
1736
+ }
1737
+
1738
+ .icon {
1739
+ svg {
1740
+ path {
1741
+ stroke: var(--_primary-400);
1742
+ }
1743
+ }
1744
+ }
1745
+
1746
+ .input_field {
1747
+ background-color: var(--_base-white);
1748
+ border: 1px solid var(--_gray-300);
1749
+ border-radius: 6px;
1750
+ color: var(--_gray-700);
1751
+
1752
+ &:focus-within {
1753
+ border: 1px solid var(--_primary-300);
1754
+ outline: 2px solid var(--_primary-100);
1755
+ }
1756
+ }
1757
+ }
1758
+ }
1759
+ }
1760
+ }
1761
+ }
1762
+ }
1763
+
1764
+ .chk_gft_crd_container {
1765
+ width: 100%;
1766
+ display: flex;
1767
+ flex-direction: column;
1768
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1769
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1770
+ border: 1px solid var(--_gray-300);
1771
+ border-radius: 4px;
1772
+ overflow: hidden;
1773
+
1774
+ .chk_gft_crd_option_heading {
1775
+ display: flex;
1776
+ justify-content: space-between;
1777
+ align-items: center;
1778
+ padding: 8px 12px;
1779
+ border-bottom: 1px solid var(--_gray-300);
1780
+ }
1781
+
1782
+ // gift card styles
1783
+ .chk_gft_crd_wrapper {
1784
+ display: flex;
1785
+ justify-content: space-between;
1786
+ align-items: center;
1787
+ padding: 16px 16px 0 16px;
1788
+ &_item {
1789
+ display: flex;
1790
+ align-items: center;
1791
+ gap: 16px;
1792
+ &_icon {
1793
+ width: 40px;
1794
+ height: 40px;
1795
+ border: 1px solid var(--_gray-200);
1796
+ border-radius: 6px;
1797
+ display: flex;
1798
+ justify-content: center;
1799
+ align-items: center;
1800
+ }
1801
+ &_info {
1802
+ display: flex;
1803
+ flex-direction: column;
1804
+ &_title {
1805
+ font-size: 14px;
1806
+ margin-bottom: 4px;
1807
+ font-weight: 600;
1808
+ }
1809
+ &_desc {
1810
+ display: flex;
1811
+ &_value {
1812
+ font-size: 12px;
1813
+ color: var(--_gray-600);
1814
+ }
1815
+ &_label {
1816
+ font-size: 12px;
1817
+ color: var(--_gray-900);
1818
+ }
1819
+ }
1820
+ }
1821
+ &_pin {
1822
+ margin-left: 36px;
1823
+ input[type="number"] {
1824
+ border: 1px solid var(--_gray-300);
1825
+ border-radius: 4px;
1826
+ background-color: var(--_base-white);
1827
+ width: 95px;
1828
+ height: 44px;
1829
+ padding-inline: 10px;
1830
+ &:focus {
1831
+ outline: 2px solid var(--_primary-100);
1832
+ border: 1px solid var(--_primary-300);
1833
+ }
1834
+ }
1835
+ }
1836
+ }
1837
+
1838
+ &_input {
1839
+ border: 1px solid var(--_gray-300);
1840
+ border-radius: 4px;
1841
+ background-color: var(--_base-white);
1842
+ height: 44px;
1843
+ width: 120px;
1844
+ display: flex;
1845
+ align-items: center;
1846
+ gap: 8px;
1847
+ padding-left: 10px;
1848
+ input[type="number"] {
1849
+ background-color: var(--_base-white);
1850
+ padding-right: 10px;
1851
+ }
1852
+ &:focus-within {
1853
+ outline: 2px solid var(--_primary-100);
1854
+ border: 1px solid var(--_primary-300);
1855
+ }
1856
+ }
1857
+ }
1858
+ .chk_gft_crd_wrapper {
1859
+ &_btn {
1860
+ text-align: left;
1861
+ margin-bottom: 16px;
1862
+ color: var(--_primary-400);
1863
+ &:hover {
1864
+ text-decoration: underline;
1865
+ }
1866
+ }
1867
+ }
1868
+
1869
+ // payment other options styles
1870
+ .chk_pmnt_other_options {
1871
+ display: flex;
1872
+ justify-content: space-between;
1873
+ gap: 80px;
1874
+ padding: 16px;
1875
+ .chk_pmnt_other_options_left_container {
1876
+ display: flex;
1877
+ gap: 12px;
1878
+ .chk_pmnt_option_info_wrapper {
1879
+ display: flex;
1880
+ gap: 12px;
1881
+ .cards {
1882
+ display: flex;
1883
+ flex-direction: column;
1884
+ gap: 8px;
1885
+ .chk_payment_options_name {
1886
+ font-weight: 600;
1887
+ }
1888
+ span {
1889
+ font-size: 12px;
1890
+ .chk_payment_options_label {
1891
+ color: var(--_gray-600);
1892
+ }
1893
+ .chk_payment_options_value {
1894
+ color: var(--_gray-900);
1895
+ }
1896
+ }
1897
+ }
1898
+ }
1899
+ }
1900
+ .chk_pmnt_other_options_container {
1901
+ padding: 16px;
1902
+ }
1903
+ }
1904
+
1905
+ &__other_option_wrapper {
1906
+ display: flex;
1907
+ width: 100%;
1908
+ justify-content: space-between;
1909
+ padding: 16px;
1910
+
1911
+ @media (max-width: 500px) {
1912
+ flex-direction: column;
1913
+ }
1914
+ }
1915
+
1916
+ &_left_container {
1917
+ display: flex;
1918
+ gap: 12px;
1919
+ align-items: flex-start;
1920
+ & > div {
1921
+ display: flex;
1922
+ gap: 12px;
1923
+ }
1924
+
1925
+ @media (max-width: 500px) {
1926
+ flex-wrap: wrap;
1927
+ }
1928
+ }
1929
+
1930
+ &__left_wrapper {
1931
+ display: flex;
1932
+ flex-direction: column;
1933
+ align-items: flex-start;
1934
+ gap: 16px;
1935
+ }
1936
+
1937
+ &__card_icon {
1938
+ width: 60px;
1939
+ height: 40px;
1940
+ }
1941
+
1942
+ &__info_wrapper {
1943
+ display: flex;
1944
+ flex-direction: column;
1945
+
1946
+ .chk_payment_options_name {
1947
+ color: var(--_gray-900);
1948
+ font-size: 16px;
1949
+ font-weight: 600;
1950
+ }
1951
+
1952
+ .chk_payment_options_label {
1953
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1954
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1955
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1956
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1957
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1958
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1959
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1960
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1961
+ }
1962
+
1963
+ .chk_payment_options_value {
1964
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1965
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1966
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1967
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1968
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1969
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1970
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1971
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1972
+ }
1973
+ }
1974
+
1975
+ &_right_container {
1976
+ display: flex;
1977
+ gap: 6px;
1978
+ align-items: flex-start;
1979
+
1980
+ @media (max-width: 500px) {
1981
+ justify-content: flex-end;
1982
+ }
1983
+ }
1984
+
1985
+ &_input {
1986
+ display: flex;
1987
+ padding: 8px 12px;
1988
+ width: -webkit-fill-available;
1989
+ background-color: var(--_base-white);
1990
+ border-radius: 6px;
1991
+ border: 1px solid var(--_gray-300);
1992
+
1993
+ &:focus-within {
1994
+ border: 1px solid var(--_primary-300);
1995
+ outline: 2px solid var(--_primary-100);
1996
+ }
1997
+
1998
+ .icon {
1999
+ svg {
2000
+ path {
2001
+ stroke: var(--_primary-400);
2002
+ }
2003
+ }
2004
+ }
2005
+
2006
+ .input_field {
2007
+ padding: 8px 12px;
2008
+ width: -webkit-fill-available;
2009
+ background-color: var(--_base-white);
2010
+ border-radius: 6px;
2011
+ border: 1px solid var(--_gray-300);
2012
+
2013
+ &:focus-within {
2014
+ border: 1px solid var(--_primary-300);
2015
+ outline: 2px solid var(--_primary-100);
2016
+ }
2017
+ }
2018
+ }
2019
+ }
2020
+
2021
+ .chk_billing_address {
2022
+ width: 100%;
2023
+ display: flex;
2024
+ flex-direction: column;
2025
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
2026
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
2027
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
2028
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
2029
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
2030
+
2031
+ &_form_container {
2032
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2033
+ padding-top: 24px;
2034
+ display: flex;
2035
+ flex-direction: column;
2036
+ gap: 24px;
2037
+ }
2038
+
2039
+ .chk_payment_options_heading {
2040
+ font-size: 18px;
2041
+ color: var(--_gray-900);
2042
+ font-weight: 600;
2043
+ &.pl_0 {
2044
+ padding-left: 0px;
2045
+ }
2046
+ }
2047
+
2048
+ &_form_wrapper {
2049
+ display: flex;
2050
+ flex-direction: column;
2051
+ gap: 24px;
2052
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2053
+ }
2054
+
2055
+ .shipping_address_container {
2056
+ display: flex;
2057
+ flex-direction: column;
2058
+ gap: 24px;
2059
+ }
2060
+
2061
+ .shipping_address_heading_container {
2062
+ display: flex;
2063
+ justify-content: space-between;
2064
+ align-items: center;
2065
+ max-width: 695px;
2066
+
2067
+ .chk_heading_info {
2068
+ font-size: 18px;
2069
+ font-weight: 600;
2070
+ color: var(--_gray-900);
2071
+ }
2072
+ }
2073
+
2074
+ form {
2075
+ display: flex;
2076
+ flex-direction: column;
2077
+ gap: 0.75rem;
2078
+ max-width: 85%;
2079
+
2080
+ @media (max-width: 500px) {
2081
+ max-width: 100%;
2082
+ }
2083
+ }
2084
+
2085
+ .chk_shipping_address_form_group {
2086
+ display: flex;
2087
+ justify-content: space-between;
2088
+ flex-direction: row;
2089
+ gap: 12px;
2090
+ }
2091
+
2092
+ .chk_shipping_address_input_container {
2093
+ display: flex;
2094
+ width: 100%;
2095
+ }
2096
+
2097
+ .chk_shipping_address_input_wrapper {
2098
+ display: flex;
2099
+ flex-direction: column;
2100
+ gap: var(--_ctm-lt-ll-ad-it-gp);
2101
+ width: 100%;
2102
+ }
2103
+
2104
+ .chk_shipping_address_form_label {
2105
+ color: var(--_gray-600);
2106
+ font-size: 14px;
2107
+ }
2108
+
2109
+ .chk_shiping_address_form_input {
2110
+ padding: 8px 12px;
2111
+ width: -webkit-fill-available;
2112
+ background-color: var(--_base-white);
2113
+ border-radius: 6px;
2114
+ border: 1px solid var(--_gray-300);
2115
+
2116
+ &:focus-within {
2117
+ border: 1px solid var(--_primary-300);
2118
+ outline: 2px solid var(--_primary-100);
2119
+ }
2120
+
2121
+ .input-field {
2122
+ padding: 8px 12px;
2123
+ width: -webkit-fill-available;
2124
+ background-color: var(--_base-white);
2125
+ border-radius: 6px;
2126
+ border: 1px solid var(--_gray-300);
2127
+
2128
+ &:focus-within {
2129
+ border: 1px solid var(--_primary-300);
2130
+ outline: 2px solid var(--_primary-100);
2131
+ }
2132
+ }
2133
+ }
2134
+
2135
+ input[type="checkbox"] {
2136
+ width: auto;
2137
+ }
2138
+
2139
+ .error-msg {
2140
+ font-size: 12px;
2141
+ color: #ff0000;
2142
+ }
2143
+
2144
+ .chk_shipping_address_use_as_billing_address_chkbx {
2145
+ display: flex;
2146
+ align-items: center;
2147
+ gap: 0.5rem;
2148
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2149
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2150
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2151
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2152
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2153
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2154
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2155
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2156
+
2157
+ .custom-checkbox {
2158
+ width: 20px;
2159
+ height: 20px;
2160
+ border: 1px solid #d0d5dd;
2161
+ border-radius: 4px;
2162
+ position: relative;
2163
+ background-color: #fff;
2164
+ transition: all 0.2s ease;
2165
+
2166
+ &::after {
2167
+ content: "";
2168
+ position: absolute;
2169
+ display: none;
2170
+ left: 5px;
2171
+ top: 0.5px;
2172
+ width: 5px;
2173
+ height: 10px;
2174
+ border: solid #fff;
2175
+ border-width: 0 2px 2px 0;
2176
+ transform: rotate(45deg);
2177
+ }
2178
+ }
2179
+ }
2180
+
2181
+ input[type="checkbox"]:checked + label {
2182
+ .custom-checkbox {
2183
+ background-color: #004dff;
2184
+ border-color: #004dff;
2185
+
2186
+ &::after {
2187
+ display: block;
2188
+ }
2189
+ }
2190
+ }
2191
+
2192
+ .checkbox-group {
2193
+ display: flex;
2194
+ align-items: center;
2195
+ justify-content: start;
2196
+ gap: 8px;
2197
+ }
2198
+
2199
+ &_same_as_billing_address_chkbx {
2200
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2201
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2202
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2203
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2204
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2205
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2206
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2207
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2208
+ }
2209
+
2210
+ &_button_wrapper {
2211
+ display: flex;
2212
+ align-items: center;
2213
+ gap: 16px;
2214
+ }
2215
+ }
2216
+
2217
+ .payment_heading {
2218
+ padding: 12px;
2219
+ display: flex;
2220
+ justify-content: space-between;
2221
+ border-bottom: 1px solid var(--_gray-100);
2222
+ font-weight: 600;
2223
+ }
2224
+ }
2225
+
2226
+ .react-international-phone-country-selector-button {
2227
+ border: none !important;
2228
+ height: auto !important;
2229
+ }
2230
+
2231
+ .react-international-phone-input {
2232
+ height: auto;
2233
+ border: none !important;
2234
+ color: var(--_ctm-dn-it-bx-dn-cr);
2235
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
2236
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
2237
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
2238
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
2239
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
2240
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
2241
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
2242
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
2243
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
2244
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
2245
+ }
2246
+
2247
+ .chk_checkbox_wrapper {
2248
+ display: flex;
2249
+ width: fit-content;
2250
+ align-items: center;
2251
+ font-family: sans-serif;
2252
+ gap: 12px;
2253
+ margin-block: 8px;
2254
+
2255
+ input[type="checkbox"] {
2256
+ display: none;
2257
+ }
2258
+ .payment_program_title {
2259
+ font-size: 14px;
2260
+ font-weight: 500;
2261
+ color: var(--_gray-900);
2262
+ }
2263
+
2264
+ .chk_payment_options_use_as_billing_address_chkbx {
2265
+ display: flex;
2266
+ align-items: center;
2267
+ cursor: pointer;
2268
+ gap: 10px;
2269
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
2270
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
2271
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
2272
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
2273
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
2274
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
2275
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
2276
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
2277
+
2278
+ .custom-checkbox {
2279
+ width: 20px;
2280
+ height: 20px;
2281
+ border: 1px solid #d0d5dd;
2282
+ border-radius: 4px;
2283
+ position: relative;
2284
+ background-color: #fff;
2285
+ transition: all 0.2s ease;
2286
+
2287
+ &::after {
2288
+ content: "";
2289
+ position: absolute;
2290
+ display: none;
2291
+ left: 5px;
2292
+ top: 0.5px;
2293
+ width: 5px;
2294
+ height: 10px;
2295
+ border: solid #fff;
2296
+ border-width: 0 2px 2px 0;
2297
+ transform: rotate(45deg);
2298
+ }
2299
+ }
2300
+ }
2301
+
2302
+ .chk_shipping_address_use_as_billing_address_chkbx {
2303
+ display: flex;
2304
+ align-items: center;
2305
+ cursor: pointer;
2306
+ gap: 10px;
2307
+ font-size: 14px;
2308
+ color: var(--_gray-700);
2309
+
2310
+ .custom-checkbox {
2311
+ width: 20px;
2312
+ height: 20px;
2313
+ border: 1px solid #d0d5dd;
2314
+ border-radius: 4px;
2315
+ position: relative;
2316
+ background-color: #fff;
2317
+ transition: all 0.2s ease;
2318
+
2319
+ &::after {
2320
+ content: "";
2321
+ position: absolute;
2322
+ display: none;
2323
+ left: 5px;
2324
+ top: 0.5px;
2325
+ width: 5px;
2326
+ height: 10px;
2327
+ border: solid #fff;
2328
+ border-width: 0 2px 2px 0;
2329
+ transform: rotate(45deg);
2330
+ }
2331
+ }
2332
+ }
2333
+
2334
+ input[type="checkbox"]:checked + label {
2335
+ .custom-checkbox {
2336
+ background-color: #004dff;
2337
+ border-color: #004dff;
2338
+
2339
+ &::after {
2340
+ display: block;
2341
+ }
2342
+ }
2343
+ }
2344
+ }
2345
+ .chk_payment-card__note {
2346
+ padding: 8px 6px;
2347
+ display: flex;
2348
+ align-items: center;
2349
+ gap: 6px;
2350
+ padding: 8px 16px;
2351
+ background-color: var(--_warning-100);
2352
+ color: var(--_warning-700);
2353
+
2354
+ .icon {
2355
+ svg {
2356
+ width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
2357
+ height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
2358
+ path {
2359
+ stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
2360
+ }
2361
+ }
2362
+ }
2363
+ }
2364
+
2365
+ .accordion-summary {
2366
+ flex: 1;
2367
+ display: flex;
2368
+ flex-direction: column;
2369
+ gap: 0.25rem;
2370
+
2371
+ .summary-content {
2372
+ display: flex;
2373
+ flex-direction: row;
2374
+ justify-content: space-between;
2375
+ gap: 0.5rem;
2376
+
2377
+ .chk_shipping-summary {
2378
+ display: flex;
2379
+ flex-direction: column;
2380
+ gap: 6px;
2381
+
2382
+ .chk_address {
2383
+ display: flex;
2384
+ flex-direction: column;
2385
+ gap: 6px;
2386
+
2387
+ .chk_saved_address_name {
2388
+ color: var(--_gray-900);
2389
+ font-size: 16px;
2390
+ font-weight: 600;
2391
+ }
2392
+
2393
+ .chk_saved_address {
2394
+ color: var(--_gray-500);
2395
+ font-size: 14px;
2396
+ }
2397
+
2398
+ .chk_saved_address_label {
2399
+ color: var(--_gray-500);
2400
+ font-size: 14px;
2401
+ font-weight: 400;
2402
+ }
2403
+
2404
+ .chk_saved_address_value {
2405
+ color: var(--_gray-900);
2406
+ font-weight: 500;
2407
+ font-size: 14px;
2408
+ }
2409
+ }
2410
+
2411
+ .contact {
2412
+ font-size: 0.875rem;
2413
+ color: var(--_gray-900);
2414
+ line-height: 1.4;
2415
+ }
2416
+ }
2417
+
2418
+ .right-btn {
2419
+ display: none;
2420
+ gap: 24px;
2421
+
2422
+ &:has(.chk_saved_address_button.selected) {
2423
+ display: flex !important;
2424
+ }
2425
+ }
2426
+
2427
+ &:hover {
2428
+ .right-btn {
2429
+ display: flex;
2430
+ }
2431
+ }
2432
+ }
2433
+ }
2434
+ }
2435
+ }
2436
+ }
2437
+
2438
+ // credit card form syles
2439
+ .chk_cred_form_details {
2440
+ border-top: 1px solid var(--_gray-100);
2441
+ padding: 16px;
2442
+ .chk_basic_form_title {
2443
+ font-size: 14px;
2444
+ margin-bottom: 16px;
2445
+ font-weight: 600;
2446
+ }
2447
+ .chk_form_fields {
2448
+ h3 {
2449
+ font-size: 14px;
2450
+ margin-bottom: 8px;
2451
+ }
2452
+ display: flex;
2453
+ flex-direction: column;
2454
+ gap: 24px;
2455
+ width: 500px;
2456
+ .chk_form_field {
2457
+ width: 100%;
2458
+ &.expiry_details {
2459
+ width: 80px;
2460
+ }
2461
+
2462
+ display: flex;
2463
+ flex-direction: column;
2464
+ gap: 6px;
2465
+ width: 100%;
2466
+
2467
+ .chk_form_field_label {
2468
+ font-size: 14px;
2469
+ color: var(--_gray-600);
2470
+ }
2471
+ .chk_form_field_inp {
2472
+ height: 40px;
2473
+ border: 1px solid var(--_gray-300);
2474
+ border-radius: 4px;
2475
+ padding-inline: 10px;
2476
+ &:placeholder-shown {
2477
+ color: var(--_gray-400);
2478
+ padding-left: 16px;
2479
+ }
2480
+ &:focus {
2481
+ border: 1px solid var(--_primary-300);
2482
+ outline: 2px solid var(--_primary-100);
2483
+ }
2484
+ }
2485
+ .error_msg {
2486
+ display: block;
2487
+ color: var(--_error-700);
2488
+ font-size: 12px;
2489
+ }
2490
+ }
2491
+
2492
+ .checkbox {
2493
+ width: auto;
2494
+
2495
+ label {
2496
+ display: flex;
2497
+ align-items: center;
2498
+ gap: 8px;
2499
+ cursor: pointer;
2500
+ position: relative;
2501
+ user-select: none;
2502
+
2503
+ input[type="checkbox"] {
2504
+ display: none;
2505
+
2506
+ &:checked + .custom-checkbox::after {
2507
+ opacity: 1;
2508
+ }
2509
+ }
2510
+
2511
+ .custom-checkbox {
2512
+ width: 16px;
2513
+ height: 16px;
2514
+ border: 2px solid var(--_primary-400);
2515
+ border-radius: 4px;
2516
+ position: relative;
2517
+ display: inline-block;
2518
+ box-sizing: border-box;
2519
+
2520
+ &::after {
2521
+ content: "";
2522
+ position: absolute;
2523
+ left: 3px;
2524
+ top: 0px;
2525
+ width: 4px;
2526
+ height: 8px;
2527
+ border: solid var(--_primary-400);
2528
+ border-width: 0 1px 1px 0;
2529
+ transform: rotate(45deg);
2530
+ opacity: 0;
2531
+ transition: opacity 0.2s ease-in-out;
2532
+ }
2533
+ }
2534
+ }
2535
+ }
2536
+ .expiry_details {
2537
+ display: flex;
2538
+ gap: 12px;
2539
+ .cvv_inp {
2540
+ width: 110px;
2541
+ }
2542
+ }
2543
+ }
2544
+ }
2545
+
2546
+ // giftcard form styles
2547
+ .chk_gift_card_details {
2548
+ border-top: 1px solid var(--_gray-300);
2549
+ padding: 16px;
2550
+ .chk_gift_card_form {
2551
+ display: flex;
2552
+ flex-direction: column;
2553
+ gap: 16px;
2554
+ max-width: 480px;
2555
+ .chk_gift_cart_form_title {
2556
+ font-size: 14px;
2557
+ font-weight: 600;
2558
+ }
2559
+
2560
+ .chk_gift_form_fields {
2561
+ display: flex;
2562
+ gap: 12px;
2563
+ width: 100%;
2564
+ .chk_gift_inp_field {
2565
+ display: flex;
2566
+ flex-direction: column;
2567
+ gap: 6px;
2568
+ width: 100%;
2569
+ label {
2570
+ color: var(--_gray-600);
2571
+ }
2572
+ .chk_gift_inp {
2573
+ border: 1px solid var(--_gray-300);
2574
+ border-radius: 6px;
2575
+ height: 40px;
2576
+ padding-inline: 10px;
2577
+ &:placeholder-shown {
2578
+ padding-left: 10px;
2579
+ color: var(--_gray-400);
2580
+ }
2581
+ &:focus {
2582
+ border: 1px solid var(--_primary-300);
2583
+ outline: 2px solid var(--_primary-100);
2584
+ }
2585
+ }
2586
+ &.pin {
2587
+ width: 110px;
2588
+ }
2589
+ .error_msg {
2590
+ display: block;
2591
+ color: var(--_error-700);
2592
+ font-size: 12px;
2593
+ }
2594
+ }
2595
+ .error_msg {
2596
+ color: var(--_error-700);
2597
+ font-size: 14px;
2598
+ }
2599
+ }
2600
+ }
2601
+ }
2602
+ .chk_form_actions {
2603
+ display: flex;
2604
+ gap: 12px;
2605
+ .chk_sav_btn {
2606
+ padding: 12px 16px;
2607
+ background-color: var(--_primary-400);
2608
+ border-radius: 6px;
2609
+ color: var(--_base-white);
2610
+ &:hover {
2611
+ background-color: var(--_primary-500);
2612
+ }
2613
+ }
2614
+ .chk_can_btn {
2615
+ padding: 12px 16px;
2616
+ background-color: transparent;
2617
+ border-radius: 6px;
2618
+ color: var(--_gray-600);
2619
+ padding-inline: 10px;
2620
+ &:hover {
2621
+ background-color: var(--_gray-50);
2622
+ color: var(--_gray-900);
2623
+ }
2624
+ }
2625
+ }
2626
+
2627
+ .chk_payment_cred_section {
2628
+ display: flex;
2629
+ justify-content: space-between;
2630
+ align-items: center;
2631
+ padding: 16px 16px 8px 16px;
2632
+
2633
+ .chk_currency_inp {
2634
+ height: 44px;
2635
+ border: 1px solid var(--_gray-200);
2636
+ border-radius: 4px;
2637
+ background-color: var(--_base-white);
2638
+ display: flex;
2639
+ width: 155px;
2640
+ overflow: hidden;
2641
+ align-items: center;
2642
+ padding-inline: 12px;
2643
+ gap: 12px;
2644
+ &:focus-within {
2645
+ border: 1px solid var(--_primary-200);
2646
+ outline: 2px solid var(--_primary-50);
2647
+ }
2648
+ input {
2649
+ height: inherit;
2650
+ }
2651
+ }
2652
+ .chk_payment_cred_section_col_left {
2653
+ .chk_payment_cred_section_col_left_crd_details {
2654
+ display: flex;
2655
+ gap: 80px;
2656
+ align-items: center;
2657
+ & > div {
2658
+ display: flex;
2659
+ gap: 12px;
2660
+ .card_icon {
2661
+ width: 60px;
2662
+ height: 40px;
2663
+ border-radius: 4px;
2664
+ }
2665
+ .card_details {
2666
+ .card_details_num {
2667
+ font-size: 12px;
2668
+ font-weight: 600;
2669
+ color: var(--_gray-900);
2670
+ }
2671
+ & > div {
2672
+ display: flex;
2673
+ .card_details_label {
2674
+ font-size: 12px;
2675
+ color: var(--_gray-500);
2676
+ }
2677
+ .card_details_value {
2678
+ font-size: 12px;
2679
+ color: var(--_gray-900);
2680
+ }
2681
+ }
2682
+ }
2683
+ }
2684
+ }
2685
+ }
2686
+ }
2687
+
2688
+ .chk_payment_remove_card {
2689
+ padding-inline: 16px;
2690
+ margin-bottom: 16px;
2691
+ .error_msg {
2692
+ font-size: 12px;
2693
+ color: var(--_error-700);
2694
+ }
2695
+ }
2696
+
2697
+ .tertiary_primary_btn {
2698
+ font-size: 12px;
2699
+ color: var(--_primary-400);
2700
+ display: inline-flex;
2701
+ &:hover {
2702
+ color: var(--_primary-500);
2703
+ text-decoration: underline;
2704
+ }
2705
+ }
2706
+ .chk_primary_bnt {
2707
+ padding: 12px 24px;
2708
+ background-color: var(--_primary-400);
2709
+ color: var(--_base-white);
2710
+ font-weight: 600;
2711
+ border-radius: 6px;
2712
+ width: max-content;
2713
+ &:hover {
2714
+ background-color: var(--_primary-500);
2715
+ }
2716
+ }
2717
+ .chk_secondary_bnt {
2718
+ padding: 12px 24px;
2719
+ background-color: transparent;
2720
+ color: var(--_gray-600);
2721
+ font-weight: 600;
2722
+ border-radius: 6px;
2723
+
2724
+ &:hover {
2725
+ background-color: var(--_gray-50);
2726
+ color: var(--_gray-900);
2727
+ }
2728
+ }
2729
+
2730
+ // gift card styles
2731
+ .chk_gft_crd_wrapper {
2732
+ display: flex;
2733
+ justify-content: space-between;
2734
+ align-items: center;
2735
+ padding: 16px 16px 0 16px;
2736
+ &_item {
2737
+ display: flex;
2738
+ align-items: center;
2739
+ gap: 16px;
2740
+ &_icon {
2741
+ width: 40px;
2742
+ height: 40px;
2743
+ border: 1px solid var(--_gray-200);
2744
+ border-radius: 6px;
2745
+ display: flex;
2746
+ justify-content: center;
2747
+ align-items: center;
2748
+ }
2749
+ &_info {
2750
+ display: flex;
2751
+ flex-direction: column;
2752
+ &_title {
2753
+ font-size: 14px;
2754
+ margin-bottom: 4px;
2755
+ font-weight: 600;
2756
+ }
2757
+ &_desc {
2758
+ display: flex;
2759
+ &_value {
2760
+ font-size: 12px;
2761
+ color: var(--_gray-600);
2762
+ }
2763
+ &_label {
2764
+ font-size: 12px;
2765
+ color: var(--_gray-900);
2766
+ }
2767
+ }
2768
+ }
2769
+ &_pin {
2770
+ margin-left: 36px;
2771
+ input[type="number"] {
2772
+ border: 1px solid var(--_gray-300);
2773
+ border-radius: 4px;
2774
+ background-color: var(--_base-white);
2775
+ width: 95px;
2776
+ height: 44px;
2777
+ padding-inline: 10px;
2778
+ &:focus {
2779
+ outline: 2px solid var(--_primary-100);
2780
+ border: 1px solid var(--_primary-300);
2781
+ }
2782
+ }
2783
+ }
2784
+ }
2785
+
2786
+ &_input {
2787
+ border: 1px solid var(--_gray-300);
2788
+ border-radius: 4px;
2789
+ background-color: var(--_base-white);
2790
+ height: 44px;
2791
+ width: 155px;
2792
+ display: flex;
2793
+ align-items: center;
2794
+ gap: 8px;
2795
+ padding-left: 10px;
2796
+ input[type="number"] {
2797
+ background-color: var(--_base-white);
2798
+ padding-right: 10px;
2799
+ }
2800
+ &:focus-within {
2801
+ outline: 2px solid var(--_primary-100);
2802
+ border: 1px solid var(--_primary-300);
2803
+ }
2804
+ }
2805
+ }
2806
+ .chk_gft_crd_wrapper {
2807
+ &_btn {
2808
+ text-align: left;
2809
+ margin-bottom: 16px;
2810
+ color: var(--_primary-400);
2811
+ &:hover {
2812
+ text-decoration: underline;
2813
+ }
2814
+ }
2815
+ }
2816
+ // emp checkout end
2817
+ }
2818
+
2819
+ // summary started for checkout
2820
+ .summary_container {
2821
+ width: 400px;
2822
+ height: 100%;
2823
+ // order summary styles started
2824
+
2825
+ .cart_summary_wrapper {
2826
+ display: flex;
2827
+ flex-direction: column;
2828
+ align-items: center;
2829
+ align-self: stretch;
2830
+ border-radius: 4px;
2831
+ border: 0.5px solid #d0d5dd;
2832
+ background: #fff;
2833
+ word-break: keep-all;
2834
+ overflow: hidden;
2835
+ width: 380px;
2836
+
2837
+ .cart_summary_heading_wrapper {
2838
+ display: flex;
2839
+ padding: 12px;
2840
+ align-items: center;
2841
+ gap: 12px;
2842
+ align-self: stretch;
2843
+ background: #f5f5f5;
2844
+ border-bottom: 1px solid #d0d5dd;
2845
+ border-radius: 4px 4px 0 0;
2846
+ .icon svg {
2847
+ path {
2848
+ stroke: #d0d5dd;
2849
+ }
2850
+ }
2851
+
2852
+ .iconDesc svg {
2853
+ path {
2854
+ stroke: #101828;
2855
+ }
2856
+ }
2857
+
2858
+ .cart_summary_heading {
2859
+ width: 100%;
2860
+ height: auto;
2861
+ max-height: 48px;
2862
+ display: flex;
2863
+ align-items: center;
2864
+ color: #101828;
2865
+ font-size: 16px;
2866
+ font-weight: 600;
2867
+ }
2868
+ }
2869
+
2870
+ .cart_summary_content_wrapper {
2871
+ padding: 16px;
2872
+ display: flex;
2873
+ flex-direction: column;
2874
+ width: 100%;
2875
+ gap: 16px;
2876
+ .cart_summary_products_container {
2877
+ display: flex;
2878
+ width: 100%;
2879
+ flex-direction: column;
2880
+ gap: 12px;
2881
+ // gap: var(--_ctm-lt-im-gp);
2882
+
2883
+ .cart_summary_product_info_wrapper {
2884
+ display: flex;
2885
+ align-items: flex-start;
2886
+ justify-content: space-between;
2887
+ gap: 24px;
2888
+
2889
+ .cart_summary_product_info_wrapper {
2890
+ display: flex;
2891
+ gap: 12px;
2892
+ align-items: flex-start;
2893
+
2894
+ .cart_summary_product_img {
2895
+ width: 69px;
2896
+ height: 80px;
2897
+ background-color: var(--_base-white);
2898
+ border-radius: 4px;
2899
+ }
2900
+
2901
+ .cart_summary_product_content_wrapper {
2902
+ display: flex;
2903
+ flex-direction: column;
2904
+ gap: 4px;
2905
+ // gap: calc(var(--_ctm-lt-im-gp) / 4);
2906
+
2907
+ .cart_summary_product_content {
2908
+ display: flex;
2909
+ flex-direction: column;
2910
+ // pt-wt-pt-qy-ft-fy
2911
+ .cart_summary_heading_text {
2912
+ color: var(--_gray-600);
2913
+ font-weight: 600;
2914
+ font-size: 14px;
2915
+ }
2916
+
2917
+ .cart_summary_qty_text {
2918
+ font-size: 12px;
2919
+ font-weight: 400;
2920
+ color: var(--_gray-400);
2921
+ }
2922
+ .cart_summary_qty_value {
2923
+ font-size: 12px;
2924
+ font-weight: 400;
2925
+ color: var(--_gray-900);
2926
+ }
2927
+
2928
+ .cart_summary_estimatedDate_text {
2929
+ font-family: var(
2930
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy,
2931
+ var(
2932
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy,
2933
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy)
2934
+ )
2935
+ );
2936
+ color: var(
2937
+ --_ctm-mob-dn-pt-wt-pt-ed-de-cr,
2938
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr))
2939
+ );
2940
+ font-weight: var(
2941
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt,
2942
+ var(
2943
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt,
2944
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt)
2945
+ )
2946
+ );
2947
+ font-size: var(
2948
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se,
2949
+ var(
2950
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se,
2951
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-se)
2952
+ )
2953
+ );
2954
+ text-decoration: var(
2955
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ue,
2956
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue))
2957
+ );
2958
+ letter-spacing: var(
2959
+ --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg,
2960
+ var(
2961
+ --_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg,
2962
+ var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg)
2963
+ )
2964
+ );
2965
+ line-height: var(
2966
+ --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht,
2967
+ var(
2968
+ --_ctm-tab-dn-pt-wt-pt-ed-de-le-ht,
2969
+ var(--_ctm-dn-pt-wt-pt-ed-de-le-ht)
2970
+ )
2971
+ );
2972
+ font-style: var(
2973
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic,
2974
+ var(
2975
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic,
2976
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic)
2977
+ )
2978
+ );
2979
+ text-align: var(
2980
+ --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an,
2981
+ var(
2982
+ --_ctm-tab-dn-pt-wt-pt-ed-de-tt-an,
2983
+ var(--_ctm-dn-pt-wt-pt-ed-de-tt-an)
2984
+ )
2985
+ );
2986
+ }
2987
+ .cart_summary_estimatedDate_value {
2988
+ font-family: var(
2989
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
2990
+ var(
2991
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc,
2992
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc)
2993
+ )
2994
+ );
2995
+ color: var(
2996
+ --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc,
2997
+ var(
2998
+ --_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc,
2999
+ var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc)
3000
+ )
3001
+ );
3002
+ font-weight: var(
3003
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc,
3004
+ var(
3005
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc,
3006
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc)
3007
+ )
3008
+ );
3009
+ font-size: var(
3010
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
3011
+ var(
3012
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc,
3013
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc)
3014
+ )
3015
+ );
3016
+ text-decoration: var(
3017
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc,
3018
+ var(
3019
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc,
3020
+ var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc)
3021
+ )
3022
+ );
3023
+ letter-spacing: var(
3024
+ --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc,
3025
+ var(
3026
+ --_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc,
3027
+ var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc)
3028
+ )
3029
+ );
3030
+ line-height: var(
3031
+ --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc,
3032
+ var(
3033
+ --_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc,
3034
+ var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc)
3035
+ )
3036
+ );
3037
+ font-style: var(
3038
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
3039
+ var(
3040
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
3041
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc)
3042
+ )
3043
+ );
3044
+ text-align: var(
3045
+ --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc,
3046
+ var(
3047
+ --_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc,
3048
+ var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc)
3049
+ )
3050
+ );
3051
+ }
3052
+ }
3053
+ }
3054
+ }
3055
+ }
3056
+ }
3057
+
3058
+ .coupon_code_wrapper {
3059
+ display: flex;
3060
+ flex-direction: column;
3061
+ gap: 12px;
3062
+ width: 100%;
3063
+
3064
+ .coupon_code_btn_wrapper {
3065
+ display: flex;
3066
+ justify-content: space-between;
3067
+ width: 100%;
3068
+ }
3069
+
3070
+ .coupon_code_input {
3071
+ width: 100%;
3072
+ padding: 8px 12px;
3073
+ border-radius: 6px;
3074
+ border: 1px solid #d0d5dd;
3075
+ background-color: #ffffff;
3076
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
3077
+ font-size: 16px;
3078
+ line-height: 24px;
3079
+ height: 40px;
3080
+ &::placeholder {
3081
+ font-size: 14px;
3082
+ }
3083
+ }
3084
+
3085
+ .success_message {
3086
+ display: flex;
3087
+ flex: 1 0 0;
3088
+ flex-wrap: wrap;
3089
+ color: green;
3090
+ }
3091
+
3092
+ .error_message {
3093
+ display: flex;
3094
+ flex: 1 0 0;
3095
+ flex-wrap: wrap;
3096
+ color: red;
3097
+ }
3098
+ }
3099
+ .subtotal_wrapper {
3100
+ display: flex;
3101
+ align-items: center;
3102
+ gap: 16px;
3103
+ align-self: stretch;
3104
+ justify-content: space-between;
3105
+ .cart_summary_number_text {
3106
+ color: #667085;
3107
+ font-weight: 400;
3108
+ font-size: 14px;
3109
+ text-align: left;
3110
+ }
3111
+ .cart_summary_number_value {
3112
+ color: #101828;
3113
+ font-size: 14px;
3114
+ font-weight: 600;
3115
+ }
3116
+ }
3117
+ .cart_summary_content_details_wrapper {
3118
+ display: flex;
3119
+ flex-direction: column;
3120
+ gap: 8px;
3121
+ .cart_summary_shippingLabel_text {
3122
+ color: #667085;
3123
+ font-weight: 400;
3124
+ font-size: 14px;
3125
+ text-align: left;
3126
+ }
3127
+ .cart_summary_shippingLabel_value {
3128
+ color: #101828;
3129
+ font-size: 14px;
3130
+ font-weight: 600;
3131
+ }
3132
+ .cart_summary_tax_text {
3133
+ color: #667085;
3134
+ font-weight: 400;
3135
+ font-size: 14px;
3136
+ text-align: left;
3137
+ }
3138
+ .cart_summary_tax_value {
3139
+ color: #101828;
3140
+ font-size: 14px;
3141
+ font-weight: 600;
3142
+ }
3143
+ }
3144
+ .cart_summary_total_wrapper {
3145
+ display: flex;
3146
+ flex-direction: column;
3147
+ gap: 8px;
3148
+ border-top: 1px dashed var(--_gray-300);
3149
+ padding-top: 12px;
3150
+ .subtotal_wrapper {
3151
+ display: flex;
3152
+ align-items: center;
3153
+ gap: 16px;
3154
+ align-self: stretch;
3155
+ justify-content: space-between;
3156
+
3157
+ .cart_summary_subTotal_text {
3158
+ font-size: 16px;
3159
+ font-weight: 600;
3160
+ color: #101828;
3161
+ }
3162
+ .cart_summary_subTotal_value {
3163
+ font-size: 16px;
3164
+ font-weight: 600;
3165
+ color: #101828;
3166
+ }
3167
+
3168
+ .cart_summary_total_text {
3169
+ font-size: 16px;
3170
+ font-weight: 600;
3171
+ color: #101828;
3172
+ }
3173
+ .cart_summary_total_value {
3174
+ font-size: 20px;
3175
+ font-weight: 600;
3176
+ color: #101828;
3177
+ }
3178
+ }
3179
+ }
3180
+ }
3181
+
3182
+ .cart_summary_heading_text {
3183
+ font-size: 16px;
3184
+ font-weight: 600;
3185
+ color: var(--_gray-900);
3186
+ }
3187
+
3188
+ .cart_summary_primary_text {
3189
+ font-size: 16px;
3190
+ font-weight: 600;
3191
+ color: var(--_gray-900);
3192
+ }
3193
+ .cart_summary_product_text {
3194
+ font-size: 14px;
3195
+ color: var(--_gray-600);
3196
+ }
3197
+ .cart_summary_secondary_text {
3198
+ color: var(--_ctm-dn-sy-tt-dn-cr);
3199
+ font-family: var(--_ctm-dn-sy-tt-dn-ft-fy);
3200
+ font-size: var(--_ctm-dn-sy-tt-dn-ft-se);
3201
+ font-style: var(--_ctm-dn-sy-tt-dn-ft-se-ic);
3202
+ font-weight: var(--_ctm-dn-sy-tt-dn-ft-wt);
3203
+ line-height: var(--_ctm-dn-sy-tt-dn-le-ht);
3204
+ letter-spacing: var(--_ctm-dn-sy-tt-dn-lr-sg);
3205
+ text-align: var(--_ctm-dn-sy-tt-dn-tt-an);
3206
+ text-decoration: var(--_ctm-dn-sy-tt-dn-ue);
3207
+ }
3208
+
3209
+ .cart_summary_primary_btn_wrapper {
3210
+ padding: 12px;
3211
+ width: 100%;
3212
+ height: auto;
3213
+ min-height: 48px;
3214
+ background: #243dc6;
3215
+ border-radius: 4px;
3216
+ border: 1px solid #243dc6;
3217
+ color: #fff;
3218
+ text-align: center;
3219
+ font-size: 16px;
3220
+ font-weight: 600;
3221
+
3222
+ &:hover {
3223
+ padding: 12px;
3224
+ width: 100%;
3225
+ height: auto;
3226
+ min-height: 48px;
3227
+ background: #243dc6;
3228
+ border-radius: 4px;
3229
+ border: 1px solid #243dc6;
3230
+ color: #fff;
3231
+ text-align: center;
3232
+ font-size: 16px;
3233
+ font-weight: 600;
3234
+ }
3235
+ }
3236
+ .cart_summary_placeOrder_btn_wrapper {
3237
+ padding: 12px;
3238
+ width: 100%;
3239
+ height: auto;
3240
+ min-height: 48px;
3241
+ background: #243dc6;
3242
+ border-radius: 4px;
3243
+ border: 1px solid #243dc6;
3244
+ color: #fff;
3245
+ text-align: center;
3246
+ font-size: 16px;
3247
+ font-weight: 600;
3248
+ &:hover {
3249
+ padding: 12px;
3250
+ width: 100%;
3251
+ height: auto;
3252
+ min-height: 48px;
3253
+ background: #243dc6;
3254
+ border-radius: 4px;
3255
+ border: 1px solid #243dc6;
3256
+ color: #fff;
3257
+ text-align: center;
3258
+ font-size: 16px;
3259
+ font-weight: 600;
3260
+ }
3261
+ }
3262
+
3263
+ .submit_quotes {
3264
+ padding: 12px;
3265
+ width: 100%;
3266
+ height: auto;
3267
+ min-height: 48px;
3268
+ background: #fff;
3269
+ border-radius: 4px;
3270
+ border: 1px solid #101828;
3271
+ color: #101828;
3272
+ text-align: center;
3273
+ font-size: 16px;
3274
+ font-weight: 600;
3275
+ &:hover {
3276
+ padding: 12px;
3277
+ width: 100%;
3278
+ height: auto;
3279
+ min-height: 48px;
3280
+ background: #fff;
3281
+ border-radius: 4px;
3282
+ border: 1px solid #101828;
3283
+ color: #101828;
3284
+ text-align: center;
3285
+ font-size: 16px;
3286
+ font-weight: 600;
3287
+ }
3288
+ }
3289
+
3290
+ .cart_summary_secondary_btn_wrapper {
3291
+ color: #243dc6;
3292
+ font-size: 14px;
3293
+ font-weight: 400;
3294
+ }
3295
+ .coupon_code_text {
3296
+ color: #243dc6;
3297
+ font-size: 14px;
3298
+ font-weight: 400;
3299
+ }
3300
+ }
3301
+ }
3302
+ }
3303
+ }
3304
+ }
3305
+
3306
+ // link styles
3307
+ .btn {
3308
+ &:hover {
886
3309
  text-decoration: underline;
887
3310
  }
3311
+ &.link {
3312
+ color: var(--_primary-400);
3313
+ }
3314
+ &.primary {
3315
+ padding: 12px 24px;
3316
+ background-color: var(--_primary-400);
3317
+ border-radius: 4px;
3318
+ color: var(--_base-white);
3319
+ font-size: 16px;
3320
+ font-weight: 600;
3321
+ }
3322
+ }
3323
+
3324
+ // order status styles started
3325
+ .order-confirmation {
3326
+ display: flex;
3327
+ flex-direction: column;
3328
+ gap: 24px;
3329
+ border: 1px solid #eaecf0;
3330
+ border-radius: 6px;
3331
+ padding: 16px;
3332
+ color: #333333;
3333
+ .order-header {
3334
+ border-bottom: 1px solid #eaecf0;
3335
+ padding-bottom: 24px;
3336
+ .user-info {
3337
+ display: flex;
3338
+ flex-direction: column;
3339
+ h3 {
3340
+ font-size: 20px;
3341
+ font-weight: 600;
3342
+ color: #101828;
3343
+ line-height: 30px;
3344
+ span {
3345
+ margin-left: 6px;
3346
+ svg {
3347
+ path {
3348
+ stroke: #475467;
3349
+ }
3350
+ }
3351
+ }
3352
+ }
3353
+ .user-meta-list {
3354
+ display: flex;
3355
+ align-items: center;
3356
+ gap: 12px;
3357
+ .meta-item {
3358
+ display: flex;
3359
+ flex-direction: row;
3360
+ align-items: center;
3361
+ .meta-icon {
3362
+ svg {
3363
+ width: 12px;
3364
+ height: 12px;
3365
+ }
3366
+ padding-right: 6px;
3367
+ }
3368
+ .meta-text {
3369
+ font-size: 12px;
3370
+ font-weight: 400;
3371
+ color: #475467;
3372
+ line-height: 18px;
3373
+ }
3374
+ &:not(:first-child)::before {
3375
+ content: "";
3376
+ display: inline-block;
3377
+ width: 5px;
3378
+ height: 5px;
3379
+ background: #d0d5dd;
3380
+ border-radius: 50%;
3381
+ margin-right: 12px;
3382
+ }
3383
+ }
3384
+ }
3385
+ }
3386
+ }
3387
+
3388
+ .order-successful {
3389
+ display: flex;
3390
+ align-items: center;
3391
+ // background: #f0fdf4;
3392
+ // border-radius: 6px;
3393
+ // padding: 16px;
3394
+ // margin-bottom: 24px;
3395
+ background-color: #f6fef9;
3396
+ border-radius: 6px;
3397
+ border: 1px solid #d0d5dd;
3398
+ padding: 12px;
3399
+
3400
+ .check-icon {
3401
+ font-size: 28px;
3402
+ margin-right: 12px;
3403
+ }
3404
+
3405
+ .success-text {
3406
+ display: flex;
3407
+ flex-direction: column;
3408
+ justify-content: center;
3409
+ gap: 8px;
3410
+ .success_toast_header {
3411
+ display: flex;
3412
+ gap: 6px;
3413
+ align-items: center;
3414
+ .success__dropdown__icon {
3415
+ svg {
3416
+ width: 32px;
3417
+ height: 32px;
3418
+ path {
3419
+ stroke: #099250;
3420
+ fill: #ffffff;
3421
+ stroke-width: 0.8;
3422
+ }
3423
+ }
3424
+ }
3425
+ h2 {
3426
+ color: #101828;
3427
+ font-size: 24px;
3428
+ font-weight: 600;
3429
+ line-height: 32px;
3430
+ font-family: "Lato";
3431
+ }
3432
+ }
3433
+
3434
+ p {
3435
+ color: #475467;
3436
+ font-size: 14px;
3437
+ font-weight: 400;
3438
+ line-height: 20px;
3439
+ }
3440
+ }
3441
+ }
3442
+ .error_toast_message_wrapper {
3443
+ display: flex;
3444
+ justify-content: space-between;
3445
+ align-items: center;
3446
+ background-color: #fffbfa;
3447
+ border-radius: 6px;
3448
+ border: 1px solid #fda29b;
3449
+ padding: 12px;
3450
+ .error_toast_message_left_section {
3451
+ display: flex;
3452
+ flex-direction: column;
3453
+ gap: 8px;
3454
+ .error_toast_message_header {
3455
+ display: flex;
3456
+ gap: 8px;
3457
+ align-items: center;
3458
+ h2 {
3459
+ color: #101828;
3460
+ font-size: 24px;
3461
+ font-weight: 600;
3462
+ line-height: 32px;
3463
+ font-family: "Lato";
3464
+ }
3465
+ .error__dropdown__icon {
3466
+ svg {
3467
+ width: 32px;
3468
+ height: 32px;
3469
+ path {
3470
+ stroke: #d92d20;
3471
+ fill: #ffffff;
3472
+ stroke-width: 0.8;
3473
+ }
3474
+ }
3475
+ }
3476
+ }
3477
+ p {
3478
+ color: #475467;
3479
+ font-size: 14px;
3480
+ font-weight: 400;
3481
+ line-height: 20px;
3482
+ }
3483
+ }
3484
+ .error_message_btn {
3485
+ background-color: #243dc6;
3486
+ color: #ffffff;
3487
+ border-radius: 6px;
3488
+ font-size: 16px;
3489
+ font-weight: 600;
3490
+ padding: 12px 24px;
3491
+ }
3492
+ }
3493
+
3494
+ .order-details-wrapper {
3495
+ display: grid;
3496
+ grid-template-columns: 2fr 1fr;
3497
+ gap: 48px;
3498
+ padding-bottom: 24px;
3499
+ }
3500
+
3501
+ .order-info-section {
3502
+ display: flex;
3503
+ flex-direction: column;
3504
+ gap: 16px;
3505
+ .order_info_header {
3506
+ font-size: 14px;
3507
+ font-weight: 600;
3508
+ color: #101828;
3509
+ padding: 12px 16px;
3510
+ border: 1px solid #eaecf0;
3511
+ border-radius: 6px;
3512
+ background: #f5f5f5;
3513
+ span {
3514
+ font-size: 14px;
3515
+ font-weight: 600;
3516
+ color: var(--_gray-600);
3517
+ }
3518
+ }
3519
+ }
3520
+ .quick-actions-section {
3521
+ display: flex;
3522
+ flex-direction: column;
3523
+ gap: 16px;
3524
+ .quick_actions_header {
3525
+ font-size: 14px;
3526
+ font-weight: 600;
3527
+ color: #101828;
3528
+ padding: 12px 16px;
3529
+ border: 1px solid #eaecf0;
3530
+ border-radius: 6px;
3531
+ background: #f5f5f5;
3532
+ span {
3533
+ font-size: 14px;
3534
+ font-weight: 600;
3535
+ color: var(--_gray-600);
3536
+ }
3537
+ }
3538
+ }
3539
+
3540
+ .order-info {
3541
+ display: flex;
3542
+ flex-direction: column;
3543
+ /* space between the two rows */
3544
+ .order-row {
3545
+ display: grid;
3546
+ gap: 12px 24px;
3547
+ /* 12px vertical, 24px horizontal */
3548
+
3549
+ /* First row: two equal columns + bottom border */
3550
+ &:first-child {
3551
+ grid-template-columns: repeat(2, 1fr);
3552
+ border-bottom: 1px dashed var(--_gray-400);
3553
+ padding-bottom: 24px;
3554
+ }
3555
+
3556
+ /* Second row: three equal columns */
3557
+ &:nth-child(2) {
3558
+ grid-template-columns: repeat(3, 1fr);
3559
+ margin-top: 24px;
3560
+ }
3561
+
3562
+ /* Each individual info‐cell styling */
3563
+ > div {
3564
+ strong {
3565
+ display: block;
3566
+ font-size: 14px;
3567
+ color: var(--_gray-500);
3568
+ line-height: 20px;
3569
+ margin-bottom: 4px;
3570
+ font-weight: 400;
3571
+ }
3572
+
3573
+ p {
3574
+ margin: 0;
3575
+ margin-bottom: 4px;
3576
+ font-size: 20px;
3577
+ font-weight: 600;
3578
+ color: var(--_gray-900);
3579
+ line-height: 30px;
3580
+ }
3581
+ .delivery_address {
3582
+ font-size: 14px;
3583
+ font-weight: 400;
3584
+ color: var(--_gray-400);
3585
+ line-height: 20px;
3586
+ }
3587
+ .shipping-type {
3588
+ font-size: 14px;
3589
+ font-weight: 400;
3590
+ color: var(--_gray-900);
3591
+ line-height: 20px;
3592
+ }
3593
+
3594
+ .status {
3595
+ margin-left: 6px;
3596
+ padding: 2px 8px;
3597
+ border-radius: 4px;
3598
+ font-size: 12;
3599
+ font-weight: 500;
3600
+ line-height: 18px;
3601
+ }
3602
+
3603
+ .link-button {
3604
+ color: #243dc6;
3605
+ font-size: 14px;
3606
+ font-weight: 400;
3607
+ line-height: 20px;
3608
+ }
3609
+
3610
+ .submitted {
3611
+ font-size: 12px;
3612
+ font-weight: 500;
3613
+ line-height: 18px;
3614
+ background: #eff8ff;
3615
+ color: #0040c1;
3616
+ display: inline-block;
3617
+ height: 22px;
3618
+ &::before {
3619
+ content: "";
3620
+ display: inline-block;
3621
+ width: 6px;
3622
+ height: 6px;
3623
+ background-color: #0040c1;
3624
+ border-radius: 50%;
3625
+ margin-right: 6px;
3626
+ vertical-align: middle;
3627
+ margin-top: -1px;
3628
+ }
3629
+ }
3630
+
3631
+ .order-date {
3632
+ font-size: 14px;
3633
+ font-weight: 400;
3634
+ color: var(--_gray-400);
3635
+ line-height: 20px;
3636
+ }
3637
+
3638
+ .inclusive-tax {
3639
+ margin-left: 4px;
3640
+ font-size: 0.7rem;
3641
+ color: #6b7280;
3642
+ }
3643
+ }
3644
+ }
3645
+ }
3646
+
3647
+ .quick-actions {
3648
+ display: flex;
3649
+ flex-direction: column;
3650
+ gap: 8px;
3651
+ padding: 8px;
3652
+ color: #243dc6;
3653
+ .action-button {
3654
+ padding: 8px;
3655
+ font-size: 14px;
3656
+ border-radius: 4px;
3657
+ background: none;
3658
+ color: #243dc6;
3659
+ cursor: pointer;
3660
+ text-align: start;
3661
+
3662
+ &:hover {
3663
+ color: #0d60e5;
3664
+ }
3665
+ }
3666
+ }
3667
+
3668
+ .cart-items {
3669
+ h3 {
3670
+ font-size: 14px;
3671
+ color: #667085;
3672
+ margin-bottom: 24px;
3673
+ line-height: 20px;
3674
+ font-weight: 400;
3675
+ }
3676
+
3677
+ .items-grid {
3678
+ display: grid;
3679
+ grid-template-columns: repeat(3, 1fr);
3680
+ gap: 24px;
3681
+ margin-bottom: 24px;
3682
+ }
3683
+
3684
+ .item-card {
3685
+ gap: 12px;
3686
+ display: flex;
3687
+ align-items: flex-start;
3688
+
3689
+ img {
3690
+ width: 69px;
3691
+ height: 80px;
3692
+ object-fit: cover;
3693
+ border-radius: 4px;
3694
+ display: flex;
3695
+ align-items: flex-start;
3696
+ }
3697
+
3698
+ .item-details {
3699
+ flex: 1;
3700
+
3701
+ .item-name {
3702
+ display: -webkit-box;
3703
+ -webkit-line-clamp: 1;
3704
+ -webkit-box-orient: vertical;
3705
+ overflow: hidden;
3706
+ text-overflow: ellipsis;
3707
+ margin: 0 0 4px;
3708
+ font-size: 14px;
3709
+ font-weight: 600;
3710
+ color: var(--_gray-900);
3711
+ line-height: 20px;
3712
+ }
3713
+
3714
+ .item-specs {
3715
+ font-size: 12px;
3716
+ color: #475467;
3717
+ font-weight: 400;
3718
+ }
3719
+ .item-qty {
3720
+ font-size: 12px;
3721
+ font-weight: 400;
3722
+ color: #475467;
3723
+ span {
3724
+ font-size: 12px;
3725
+ font-weight: 400;
3726
+ color: #101828;
3727
+ }
3728
+ }
3729
+ .estimated-delivery {
3730
+ margin: 0;
3731
+ font-size: 12px;
3732
+ color: var(--_gray-600);
3733
+ line-height: 18px;
3734
+ }
3735
+
3736
+ .delivery-date {
3737
+ margin: 0;
3738
+ font-size: 12px;
3739
+ font-weight: bold;
3740
+ color: #101828;
3741
+ }
3742
+ }
3743
+
3744
+ .item-price {
3745
+ font-size: 12px;
3746
+ font-weight: 600;
3747
+ color: #1e293b;
3748
+ margin-left: 12px;
3749
+ }
3750
+ }
3751
+
3752
+ .show-more-wrapper {
3753
+ margin: 32px 16px 16px 0px;
3754
+ button {
3755
+ padding: 12px 16px;
3756
+ color: var(--_primary-400);
3757
+ font-weight: 600;
3758
+ border-radius: 6px;
3759
+ &:hover {
3760
+ background-color: var(--_primary-25);
3761
+ }
3762
+ }
3763
+ }
3764
+ }
3765
+
3766
+ .order-attributes {
3767
+ border-top: 1px solid #eaecf0;
3768
+ padding-top: 24px;
3769
+
3770
+ h4 {
3771
+ font-size: 14px;
3772
+ font-weight: 400;
3773
+ color: var(--_gray-500);
3774
+ line-height: 20px;
3775
+ }
3776
+
3777
+ p {
3778
+ font-size: 14px;
3779
+ font-weight: 600;
3780
+ line-height: 20px;
3781
+ color: var(--_gray-900);
3782
+ }
3783
+ }
3784
+
3785
+ @media (max-width: 768px) {
3786
+ .order-details-wrapper {
3787
+ grid-template-columns: 1fr;
3788
+ }
3789
+
3790
+ .items-grid {
3791
+ grid-template-columns: 1fr;
3792
+ }
3793
+ }
888
3794
  }