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

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