@sc-360-v2/storefront-cms-library 0.3.56 → 0.3.57

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 (15) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cart-summary.scss +6 -1
  3. package/dist/checkout.scss +5299 -403
  4. package/dist/employee-bulk-order.scss +26 -4
  5. package/dist/icon-list.scss +117 -29
  6. package/dist/modal.scss +2 -2
  7. package/dist/section.scss +25 -24
  8. package/dist/shipping-payments.scss +761 -653
  9. package/dist/stack.scss +4 -3
  10. package/dist/types/builder/elements/form-builder/index.d.ts +1 -0
  11. package/dist/types/builder/interfaces/global.d.ts +1 -1
  12. package/dist/types/builder/tools/element-edit/checkout.d.ts +1935 -541
  13. package/dist/types/builder/tools/element-edit/icon-list.d.ts +53 -1
  14. package/dist/types/helper/helper-functions copy.d.ts +7 -0
  15. package/package.json +1 -1
package/dist/shipping-payments.scss CHANGED
@@ -85,6 +85,7 @@ $activeElementSelector: "[data-has-clicked='true']";
85
85
  gap: var(--_ctm-lt-an-hg-ad-ve-gp);
86
86
  flex-direction: column;
87
87
 
88
+ // accordion heaer
88
89
  .accordion-header {
89
90
  padding: 12px;
90
91
  display: flex;
@@ -119,27 +120,23 @@ $activeElementSelector: "[data-has-clicked='true']";
119
120
  }
120
121
  }
121
122
 
123
+ // accordion body
122
124
  .accordion-body {
123
125
  margin-bottom: 16px;
124
- .summary {
125
- .chk_shipping_method_label {
126
- display: flex;
127
- align-items: center;
128
- gap: 4px;
129
- color: var(--_gray-500);
130
- }
131
-
132
- .chk_shipping_method_heading {
133
- color: var(--_gray-500);
134
- font-weight: 600;
135
- }
136
- }
137
126
 
127
+ // shipping address
138
128
  .shipping-address {
139
129
  display: flex;
140
130
  flex-direction: column;
141
131
  gap: 24px;
142
132
 
133
+ .btn_link {
134
+ color: var(--_primary-400);
135
+ &:hover {
136
+ text-decoration: underline;
137
+ }
138
+ }
139
+
143
140
  .chk_saved_address_button {
144
141
  cursor: pointer;
145
142
  border-radius: 6px;
@@ -159,6 +156,10 @@ $activeElementSelector: "[data-has-clicked='true']";
159
156
  display: flex;
160
157
  justify-content: space-between;
161
158
  align-items: center;
159
+ .icon {
160
+ display: flex;
161
+ align-items: center;
162
+ }
162
163
  }
163
164
 
164
165
  form {
@@ -276,6 +277,20 @@ $activeElementSelector: "[data-has-clicked='true']";
276
277
  }
277
278
  }
278
279
 
280
+ .summary {
281
+ .chk_shipping_method_label {
282
+ display: flex;
283
+ align-items: center;
284
+ gap: 4px;
285
+ color: var(--_gray-500);
286
+ }
287
+
288
+ .chk_shipping_method_heading {
289
+ color: var(--_gray-500);
290
+ font-weight: 600;
291
+ }
292
+ }
293
+
279
294
  .chk_multi_address {
280
295
  display: flex;
281
296
  flex-direction: column;
@@ -478,7 +493,7 @@ $activeElementSelector: "[data-has-clicked='true']";
478
493
  &__group {
479
494
  display: flex;
480
495
  flex-direction: column;
481
- gap: 4px;
496
+ gap: 8px;
482
497
 
483
498
  .chk_shipping_method_heading {
484
499
  color: var(--_gray-700);
@@ -517,9 +532,9 @@ $activeElementSelector: "[data-has-clicked='true']";
517
532
  }
518
533
 
519
534
  .chk_shipping_method_label {
520
- color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
535
+ color: var(--_gray-600);
521
536
  font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
522
- font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
537
+ font-size: 14px;
523
538
  font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
524
539
  font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
525
540
  line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
@@ -528,9 +543,9 @@ $activeElementSelector: "[data-has-clicked='true']";
528
543
  }
529
544
 
530
545
  .chk_shipping_method_value {
531
- color: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-cr);
546
+ color: var(--_gray-900);
532
547
  font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
533
- font-size: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se);
548
+ font-size: 14px;
534
549
  font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
535
550
  font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
536
551
  line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
@@ -592,6 +607,7 @@ $activeElementSelector: "[data-has-clicked='true']";
592
607
  }
593
608
  }
594
609
 
610
+ // payment options
595
611
  .chk_payment-options {
596
612
  display: flex;
597
613
  flex-direction: column;
@@ -599,6 +615,88 @@ $activeElementSelector: "[data-has-clicked='true']";
599
615
  .gift_crd_chk_payment_option {
600
616
  border: 1px solid var(--_gray-300);
601
617
  border-radius: 4px;
618
+ margin-bottom: 12px;
619
+ .chk_gft_crd_wrapper {
620
+ display: flex;
621
+ justify-content: space-between;
622
+ align-items: center;
623
+ padding: 16px;
624
+ & > button {
625
+ color: var(--_primary-400);
626
+ &:hover {
627
+ text-decoration: underline;
628
+ }
629
+ }
630
+ &_item {
631
+ display: flex;
632
+ align-items: center;
633
+ gap: 16px;
634
+ &_icon {
635
+ width: 40px;
636
+ height: 40px;
637
+ border: 1px solid var(--_gray-200);
638
+ border-radius: 6px;
639
+ display: flex;
640
+ justify-content: center;
641
+ align-items: center;
642
+ }
643
+ &_info {
644
+ display: flex;
645
+ flex-direction: column;
646
+ &_title {
647
+ font-size: 14px;
648
+ margin-bottom: 4px;
649
+ font-weight: 600;
650
+ }
651
+ &_desc {
652
+ display: flex;
653
+ &_value {
654
+ font-size: 12px;
655
+ color: var(--_gray-600);
656
+ }
657
+ &_label {
658
+ font-size: 12px;
659
+ color: var(--_gray-900);
660
+ }
661
+ }
662
+ }
663
+ &_pin {
664
+ margin-left: 36px;
665
+ input[type="number"] {
666
+ border: 1px solid var(--_gray-300);
667
+ border-radius: 4px;
668
+ background-color: var(--_base-white);
669
+ width: 95px;
670
+ height: 44px;
671
+ padding-inline: 10px;
672
+ &:focus {
673
+ outline: 2px solid var(--_primary-100);
674
+ border: 1px solid var(--_primary-300);
675
+ }
676
+ }
677
+ }
678
+ }
679
+
680
+ &_input {
681
+ border: 1px solid var(--_gray-300);
682
+ border-radius: 4px;
683
+ background-color: var(--_base-white);
684
+ height: 44px;
685
+ width: 120px;
686
+ display: flex;
687
+ align-items: center;
688
+ gap: 8px;
689
+ padding-left: 10px;
690
+ input[type="number"] {
691
+ background-color: var(--_base-white);
692
+ padding-right: 10px;
693
+ }
694
+ &:focus-within {
695
+ outline: 2px solid var(--_primary-100);
696
+ border: 1px solid var(--_primary-300);
697
+ }
698
+ }
699
+ }
602
700
  }
603
701
  .payment_program {
604
702
  // padding: 0 12px;
@@ -610,7 +708,7 @@ $activeElementSelector: "[data-has-clicked='true']";
610
708
 
611
709
  margin-bottom: 16px;
612
710
 
613
- &_label {
711
+ .payment_program_header_label {
614
712
  display: flex;
615
713
  justify-content: space-between;
616
714
  align-items: center;
@@ -619,7 +717,7 @@ $activeElementSelector: "[data-has-clicked='true']";
619
717
  font-weight: 600;
620
718
  color: var(--_gray-600);
621
719
  }
622
- &_pds {
720
+ .payment_program_header_pds {
623
721
  &_label {
624
722
  font-size: 14px;
625
723
  color: var(--_gray-600);
@@ -643,12 +741,16 @@ $activeElementSelector: "[data-has-clicked='true']";
643
741
 
644
742
  .pp_pmnt_method_groups {
645
743
  .pp_ppm_section {
646
- background: #f5f5f5;
744
+ background: var(---base-white);
745
+ border-bottom: 1px solid var(--_gray-300);
647
746
  padding: 12px 16px;
648
747
  font-size: 12px;
649
748
  display: flex;
650
749
  justify-content: space-between;
651
750
  gap: 8px;
751
+ &:not(:first-child) {
752
+ border-top: 1px solid var(--_gray-200);
753
+ }
652
754
  .pp_ppm_section_label {
653
755
  font-size: 14px;
654
756
  font-weight: 700;
@@ -669,6 +771,11 @@ $activeElementSelector: "[data-has-clicked='true']";
669
771
  display: grid;
670
772
  gap: 8px;
671
773
  .chk_payment_option {
774
+ .chk_payment_options_heading {
775
+ padding: 16px;
776
+ display: flex;
777
+ justify-content: space-between;
778
+ }
672
779
  .chk_payment_section_wrapper {
673
780
  width: 100%;
674
781
  display: flex;
@@ -737,91 +844,6 @@ $activeElementSelector: "[data-has-clicked='true']";
737
844
  }
738
845
 
739
846
  // gift card styles
740
- .chk_gft_crd_wrapper {
741
- display: flex;
742
- justify-content: space-between;
743
- align-items: center;
744
- padding: 16px 16px 0 16px;
745
- &_item {
746
- display: flex;
747
- align-items: center;
748
- gap: 16px;
749
- &_icon {
750
- width: 40px;
751
- height: 40px;
752
- border: 1px solid var(--_gray-200);
753
- border-radius: 6px;
754
- display: flex;
755
- justify-content: center;
756
- align-items: center;
757
- }
758
- &_info {
759
- display: flex;
760
- flex-direction: column;
761
- &_title {
762
- font-size: 14px;
763
- margin-bottom: 4px;
764
- font-weight: 600;
765
- }
766
- &_desc {
767
- display: flex;
768
- &_value {
769
- font-size: 12px;
770
- color: var(--_gray-600);
771
- }
772
- &_label {
773
- font-size: 12px;
774
- color: var(--_gray-900);
775
- }
776
- }
777
- }
778
- &_pin {
779
- margin-left: 36px;
780
- input[type="number"] {
781
- border: 1px solid var(--_gray-300);
782
- border-radius: 4px;
783
- background-color: var(--_base-white);
784
- width: 95px;
785
- height: 44px;
786
- padding-inline: 10px;
787
- &:focus {
788
- outline: 2px solid var(--_primary-100);
789
- border: 1px solid var(--_primary-300);
790
- }
791
- }
792
- }
793
- }
794
-
795
- &_input {
796
- border: 1px solid var(--_gray-300);
797
- border-radius: 4px;
798
- background-color: var(--_base-white);
799
- height: 44px;
800
- width: 100px;
801
- display: flex;
802
- align-items: center;
803
- gap: 8px;
804
- padding-left: 10px;
805
- input[type="number"] {
806
- background-color: var(--_base-white);
807
- padding-right: 10px;
808
- }
809
- &:focus-within {
810
- outline: 2px solid var(--_primary-100);
811
- border: 1px solid var(--_primary-300);
812
- }
813
- }
814
- }
815
- .chk_gft_crd_wrapper {
816
- &_btn {
817
- text-align: left;
818
- margin-bottom: 16px;
819
- color: var(--_primary-400);
820
- &:hover {
821
- text-decoration: underline;
822
- }
823
- }
824
- }
825
847
 
826
848
  // payment other options styles
827
849
  .chk_pmnt_other_options {
@@ -981,30 +1003,359 @@ $activeElementSelector: "[data-has-clicked='true']";
981
1003
  }
982
1004
  }
983
1005
  }
1006
+ .add_new_credit_card {
1007
+ padding: 16px 16px 0px 16px;
1008
+ display: flex;
1009
+ justify-content: space-between;
1010
+ .cc_tertiary_btn {
1011
+ color: var(--_primary-400);
1012
+ &:hover {
1013
+ text-decoration: underline;
1014
+ }
1015
+ }
1016
+ }
1017
+
1018
+ .chk_payment_cred_section {
1019
+ display: flex;
1020
+ justify-content: space-between;
1021
+ align-items: center;
1022
+ padding: 16px 16px 8px 16px;
1023
+
1024
+ .chk_currency_inp {
1025
+ height: 44px;
1026
+ border: 1px solid var(--_gray-200);
1027
+ border-radius: 4px;
1028
+ background-color: var(--_base-white);
1029
+ display: flex;
1030
+ width: 120px;
1031
+ overflow: hidden;
1032
+ align-items: center;
1033
+ padding-inline: 12px;
1034
+ gap: 12px;
1035
+ &:focus-within {
1036
+ border: 1px solid var(--_primary-200);
1037
+ outline: 2px solid var(--_primary-50);
1038
+ }
1039
+ input {
1040
+ height: inherit;
1041
+ }
1042
+ }
1043
+ .chk_payment_cred_section_col_left {
1044
+ .chk_payment_cred_section_col_left_crd_details {
1045
+ display: flex;
1046
+ gap: 80px;
1047
+ align-items: center;
1048
+ & > div {
1049
+ display: flex;
1050
+ gap: 12px;
1051
+ .card_icon {
1052
+ width: 60px;
1053
+ height: 40px;
1054
+ border-radius: 4px;
1055
+ }
1056
+ .card_details {
1057
+ .card_details_num {
1058
+ font-size: 12px;
1059
+ font-weight: 600;
1060
+ color: var(--_gray-900);
1061
+ }
1062
+ & > div {
1063
+ display: flex;
1064
+ .card_details_label {
1065
+ font-size: 12px;
1066
+ color: var(--_gray-500);
1067
+ }
1068
+ .card_details_value {
1069
+ font-size: 12px;
1070
+ color: var(--_gray-900);
1071
+ }
1072
+ }
1073
+ }
1074
+ }
1075
+ }
1076
+ }
1077
+ }
1078
+
1079
+ .chk_payment_remove_card {
1080
+ padding-inline: 16px;
1081
+ margin-bottom: 16px;
1082
+ .error_msg {
1083
+ font-size: 12px;
1084
+ color: var(--_error-700);
1085
+ }
1086
+ }
984
1087
  }
985
1088
  }
986
1089
  }
987
1090
 
988
- .chk_gft_crd_container {
1091
+ .chk_billing_address {
989
1092
  width: 100%;
990
1093
  display: flex;
991
1094
  flex-direction: column;
992
- gap: var(--_ctm-lt-pt-os-cr-hl-gp);
993
1095
  background-color: var(--_base-white);
994
- border: 1px solid var(--_gray-300);
995
- border-radius: 4px;
996
- overflow: hidden;
1096
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1097
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1098
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1099
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
997
1100
 
998
- .chk_gft_crd_option_heading {
1101
+ &_form_container {
1102
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1103
+ padding-top: 24px;
999
1104
  display: flex;
1000
- justify-content: space-between;
1001
- align-items: center;
1002
- padding: 8px 12px;
1003
- border-bottom: 1px solid var(--_gray-300);
1105
+ flex-direction: column;
1106
+ gap: 24px;
1004
1107
  }
1005
1108
 
1006
- // gift card styles
1007
- .chk_gft_crd_wrapper {
1109
+ .chk_payment_options_heading {
1110
+ font-size: 16px;
1111
+ color: var(--_gray-900);
1112
+ font-weight: 600;
1113
+ &.pl_0 {
1114
+ padding-left: 0px;
1115
+ }
1116
+ }
1117
+
1118
+ &_form_wrapper {
1119
+ display: flex;
1120
+ flex-direction: column;
1121
+ gap: 24px;
1122
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1123
+ }
1124
+
1125
+ .shipping_address_container {
1126
+ display: flex;
1127
+ flex-direction: column;
1128
+ gap: 24px;
1129
+ }
1130
+
1131
+ .shipping_address_heading_container {
1132
+ display: flex;
1133
+ justify-content: space-between;
1134
+ align-items: center;
1135
+
1136
+ .chk_heading_info {
1137
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1138
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1139
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1140
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1141
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1142
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1143
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1144
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
1145
+ }
1146
+ }
1147
+
1148
+ form {
1149
+ display: flex;
1150
+ flex-direction: column;
1151
+ gap: 0.75rem;
1152
+ max-width: 85%;
1153
+
1154
+ @media (max-width: 500px) {
1155
+ max-width: 100%;
1156
+ }
1157
+ }
1158
+
1159
+ .chk_shipping_address_form_group {
1160
+ display: flex;
1161
+ justify-content: space-between;
1162
+ flex-direction: row;
1163
+ gap: 12px;
1164
+ }
1165
+
1166
+ .chk_shipping_address_input_container {
1167
+ display: flex;
1168
+ width: 100%;
1169
+ }
1170
+
1171
+ .chk_shipping_address_input_wrapper {
1172
+ display: flex;
1173
+ flex-direction: column;
1174
+ gap: var(--_ctm-lt-ll-ad-it-gp);
1175
+ width: 100%;
1176
+ }
1177
+
1178
+ .chk_shipping_address_form_label {
1179
+ color: var(--_gray-600);
1180
+ font-size: 14px;
1181
+ }
1182
+
1183
+ .chk_shiping_address_form_input {
1184
+ padding: 8px 12px;
1185
+ width: -webkit-fill-available;
1186
+ background-color: var(--_base-white);
1187
+ border-radius: 6px;
1188
+ border: 1px solid var(--_gray-300);
1189
+
1190
+ &:focus-within {
1191
+ border: 1px solid var(--_primary-300);
1192
+ outline: 2px solid var(--_primary-100);
1193
+ }
1194
+
1195
+ .input-field {
1196
+ padding: 8px 12px;
1197
+ width: -webkit-fill-available;
1198
+ background-color: var(--_base-white);
1199
+ border-radius: 6px;
1200
+ border: 1px solid var(--_gray-300);
1201
+
1202
+ &:focus-within {
1203
+ border: 1px solid var(--_primary-300);
1204
+ outline: 2px solid var(--_primary-100);
1205
+ }
1206
+ }
1207
+ }
1208
+
1209
+ input[type="checkbox"] {
1210
+ width: auto;
1211
+ }
1212
+
1213
+ .error-msg {
1214
+ font-size: 12px;
1215
+ color: #ff0000;
1216
+ }
1217
+
1218
+ .chk_shipping_address_use_as_billing_address_chkbx {
1219
+ display: flex;
1220
+ align-items: center;
1221
+ gap: 0.5rem;
1222
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1223
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1224
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1225
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1226
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1227
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1228
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1229
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1230
+
1231
+ .custom-checkbox {
1232
+ width: 20px;
1233
+ height: 20px;
1234
+ border: 1px solid #d0d5dd;
1235
+ border-radius: 4px;
1236
+ position: relative;
1237
+ background-color: #fff;
1238
+ transition: all 0.2s ease;
1239
+
1240
+ &::after {
1241
+ content: "";
1242
+ position: absolute;
1243
+ display: none;
1244
+ left: 5px;
1245
+ top: 0.5px;
1246
+ width: 5px;
1247
+ height: 10px;
1248
+ border: solid #fff;
1249
+ border-width: 0 2px 2px 0;
1250
+ transform: rotate(45deg);
1251
+ }
1252
+ }
1253
+ }
1254
+
1255
+ input[type="checkbox"]:checked + label {
1256
+ .custom-checkbox {
1257
+ background-color: #004dff;
1258
+ border-color: #004dff;
1259
+
1260
+ &::after {
1261
+ display: block;
1262
+ }
1263
+ }
1264
+ }
1265
+
1266
+ .checkbox-group {
1267
+ display: flex;
1268
+ align-items: center;
1269
+ justify-content: start;
1270
+ gap: 8px;
1271
+ }
1272
+
1273
+ &_same_as_billing_address_chkbx {
1274
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1275
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1276
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1277
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1278
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1279
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1280
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1281
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1282
+ }
1283
+
1284
+ &_button_wrapper {
1285
+ display: flex;
1286
+ align-items: center;
1287
+ gap: 16px;
1288
+ }
1289
+ }
1290
+
1291
+ .payment_heading {
1292
+ padding: 12px;
1293
+ display: flex;
1294
+ justify-content: space-between;
1295
+ border-bottom: 1px solid var(--_gray-100);
1296
+ font-weight: 600;
1297
+ .gc_tertiary_btn {
1298
+ color: var(--_primary-400);
1299
+ &:hover {
1300
+ text-decoration: underline;
1301
+ }
1302
+ }
1303
+ }
1304
+
1305
+ .chk_payment_gift_card {
1306
+ border: 1px solid var(--_gray-200);
1307
+ border-radius: 6px;
1308
+
1309
+ .chk_payment_options_heading {
1310
+ padding: 16px;
1311
+ border-bottom: 1px solid var(--_gray-200);
1312
+ display: flex;
1313
+ justify-content: space-between;
1314
+ .payment_options_heading {
1315
+ font-size: 14px;
1316
+ font-weight: 600;
1317
+ }
1318
+ .chk_primary_btn_link {
1319
+ color: var(--_primary-400);
1320
+ &:hover {
1321
+ text-decoration: underline;
1322
+ }
1323
+ }
1324
+ }
1325
+ // gift card styles
1326
+
1327
+ // .chk_gft_crd_wrapper {
1328
+ // &_btn {
1329
+ // text-align: left;
1330
+ // margin-bottom: 16px;
1331
+ // color: var(--_primary-400);
1332
+ // &:hover {
1333
+ // text-decoration: underline;
1334
+ // }
1335
+ // }
1336
+ // }
1337
+ }
1338
+
1339
+ .chk_gft_crd_container {
1340
+ width: 100%;
1341
+ display: flex;
1342
+ flex-direction: column;
1343
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1344
+ background-color: var(--_base-white);
1345
+ border: 1px solid var(--_gray-300);
1346
+ border-radius: 4px;
1347
+ overflow: hidden;
1348
+
1349
+ .chk_gft_crd_option_heading {
1350
+ display: flex;
1351
+ justify-content: space-between;
1352
+ align-items: center;
1353
+ padding: 8px 12px;
1354
+ border-bottom: 1px solid var(--_gray-300);
1355
+ }
1356
+
1357
+ // gift card styles
1358
+ .chk_gft_crd_wrapper {
1008
1359
  display: flex;
1009
1360
  justify-content: space-between;
1010
1361
  align-items: center;
@@ -1078,14 +1429,11 @@ $activeElementSelector: "[data-has-clicked='true']";
1078
1429
  border: 1px solid var(--_primary-300);
1079
1430
  }
1080
1431
  }
1081
- }
1082
- .chk_gft_crd_wrapper {
1083
- &_btn {
1084
- text-align: left;
1085
- margin-bottom: 16px;
1432
+
1433
+ .chk_gft_crd_wrapper_btn {
1086
1434
  color: var(--_primary-400);
1087
1435
  &:hover {
1088
- text-decoration: underline;
1436
+ text-decoration: un;
1089
1437
  }
1090
1438
  }
1091
1439
  }
@@ -1184,270 +1532,62 @@ $activeElementSelector: "[data-has-clicked='true']";
1184
1532
  text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1185
1533
  }
1186
1534
 
1187
- .chk_payment_options_value {
1188
- color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1189
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1190
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1191
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1192
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1193
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1194
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1195
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1196
- }
1197
- }
1198
-
1199
- &_right_container {
1200
- display: flex;
1201
- gap: 6px;
1202
- align-items: flex-start;
1203
-
1204
- @media (max-width: 500px) {
1205
- justify-content: flex-end;
1206
- }
1207
- }
1208
-
1209
- &_input {
1210
- display: flex;
1211
- padding: 8px 12px;
1212
- width: -webkit-fill-available;
1213
- background-color: var(--_base-white);
1214
- border-radius: 6px;
1215
- border: 1px solid var(--_gray-300);
1216
-
1217
- &:focus-within {
1218
- border: 1px solid var(--_primary-300);
1219
- outline: 2px solid var(--_primary-100);
1220
- }
1221
-
1222
- .icon {
1223
- svg {
1224
- path {
1225
- stroke: var(--_primary-400);
1226
- }
1227
- }
1228
- }
1229
-
1230
- .input_field {
1231
- padding: 8px 12px;
1232
- width: -webkit-fill-available;
1233
- background-color: var(--_base-white);
1234
- border-radius: 6px;
1235
- border: 1px solid var(--_gray-300);
1236
-
1237
- &:focus-within {
1238
- border: 1px solid var(--_primary-300);
1239
- outline: 2px solid var(--_primary-100);
1240
- }
1241
- }
1242
- }
1243
- }
1244
-
1245
- .chk_billing_address {
1246
- width: 100%;
1247
- display: flex;
1248
- flex-direction: column;
1249
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1250
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1251
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1252
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1253
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1254
-
1255
- &_form_container {
1256
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1257
- padding-top: 24px;
1258
- display: flex;
1259
- flex-direction: column;
1260
- gap: 24px;
1261
- }
1262
-
1263
- .chk_payment_options_heading {
1264
- font-size: 18px;
1265
- color: var(--_gray-900);
1266
- font-weight: 600;
1267
- &.pl_0 {
1268
- padding-left: 0px;
1269
- }
1270
- }
1271
-
1272
- &_form_wrapper {
1273
- display: flex;
1274
- flex-direction: column;
1275
- gap: 24px;
1276
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1277
- }
1278
-
1279
- .shipping_address_container {
1280
- display: flex;
1281
- flex-direction: column;
1282
- gap: 24px;
1283
- }
1284
-
1285
- .shipping_address_heading_container {
1286
- display: flex;
1287
- justify-content: space-between;
1288
- align-items: center;
1289
-
1290
- .chk_heading_info {
1291
- color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1292
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1293
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1294
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1295
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1296
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1297
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1298
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
1299
- }
1300
- }
1301
-
1302
- form {
1303
- display: flex;
1304
- flex-direction: column;
1305
- gap: 0.75rem;
1306
- max-width: 85%;
1307
-
1308
- @media (max-width: 500px) {
1309
- max-width: 100%;
1310
- }
1311
- }
1312
-
1313
- .chk_shipping_address_form_group {
1314
- display: flex;
1315
- justify-content: space-between;
1316
- flex-direction: row;
1317
- gap: 12px;
1318
- }
1319
-
1320
- .chk_shipping_address_input_container {
1321
- display: flex;
1322
- width: 100%;
1323
- }
1324
-
1325
- .chk_shipping_address_input_wrapper {
1326
- display: flex;
1327
- flex-direction: column;
1328
- gap: var(--_ctm-lt-ll-ad-it-gp);
1329
- width: 100%;
1330
- }
1331
-
1332
- .chk_shipping_address_form_label {
1333
- color: var(--_gray-600);
1334
- font-size: 14px;
1335
- }
1336
-
1337
- .chk_shiping_address_form_input {
1338
- padding: 8px 12px;
1339
- width: -webkit-fill-available;
1340
- background-color: var(--_base-white);
1341
- border-radius: 6px;
1342
- border: 1px solid var(--_gray-300);
1343
-
1344
- &:focus-within {
1345
- border: 1px solid var(--_primary-300);
1346
- outline: 2px solid var(--_primary-100);
1347
- }
1348
-
1349
- .input-field {
1350
- padding: 8px 12px;
1351
- width: -webkit-fill-available;
1352
- background-color: var(--_base-white);
1353
- border-radius: 6px;
1354
- border: 1px solid var(--_gray-300);
1355
-
1356
- &:focus-within {
1357
- border: 1px solid var(--_primary-300);
1358
- outline: 2px solid var(--_primary-100);
1359
- }
1360
- }
1361
- }
1362
-
1363
- input[type="checkbox"] {
1364
- width: auto;
1365
- }
1366
-
1367
- .error-msg {
1368
- font-size: 12px;
1369
- color: #ff0000;
1370
- }
1371
-
1372
- .chk_shipping_address_use_as_billing_address_chkbx {
1373
- display: flex;
1374
- align-items: center;
1375
- gap: 0.5rem;
1376
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1377
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1378
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1379
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1380
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1381
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1382
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1383
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1384
-
1385
- .custom-checkbox {
1386
- width: 20px;
1387
- height: 20px;
1388
- border: 1px solid #d0d5dd;
1389
- border-radius: 4px;
1390
- position: relative;
1391
- background-color: #fff;
1392
- transition: all 0.2s ease;
1393
-
1394
- &::after {
1395
- content: "";
1396
- position: absolute;
1397
- display: none;
1398
- left: 5px;
1399
- top: 0.5px;
1400
- width: 5px;
1401
- height: 10px;
1402
- border: solid #fff;
1403
- border-width: 0 2px 2px 0;
1404
- transform: rotate(45deg);
1405
- }
1535
+ .chk_payment_options_value {
1536
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1537
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1538
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1539
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1540
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1541
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1542
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1543
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1406
1544
  }
1407
1545
  }
1408
1546
 
1409
- input[type="checkbox"]:checked + label {
1410
- .custom-checkbox {
1411
- background-color: #004dff;
1412
- border-color: #004dff;
1547
+ &_right_container {
1548
+ display: flex;
1549
+ gap: 6px;
1550
+ align-items: flex-start;
1413
1551
 
1414
- &::after {
1415
- display: block;
1416
- }
1552
+ @media (max-width: 500px) {
1553
+ justify-content: flex-end;
1417
1554
  }
1418
1555
  }
1419
1556
 
1420
- .checkbox-group {
1557
+ &_input {
1421
1558
  display: flex;
1422
- align-items: center;
1423
- justify-content: start;
1424
- gap: 8px;
1425
- }
1559
+ padding: 8px 12px;
1560
+ width: -webkit-fill-available;
1561
+ background-color: var(--_base-white);
1562
+ border-radius: 6px;
1563
+ border: 1px solid var(--_gray-300);
1426
1564
 
1427
- &_same_as_billing_address_chkbx {
1428
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1429
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1430
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1431
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1432
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1433
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1434
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1435
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1436
- }
1565
+ &:focus-within {
1566
+ border: 1px solid var(--_primary-300);
1567
+ outline: 2px solid var(--_primary-100);
1568
+ }
1437
1569
 
1438
- &_button_wrapper {
1439
- display: flex;
1440
- align-items: center;
1441
- gap: 16px;
1442
- }
1443
- }
1570
+ .icon {
1571
+ svg {
1572
+ path {
1573
+ stroke: var(--_primary-400);
1574
+ }
1575
+ }
1576
+ }
1444
1577
 
1445
- .payment_heading {
1446
- padding: 12px;
1447
- display: flex;
1448
- justify-content: space-between;
1449
- border-bottom: 1px solid var(--_gray-100);
1450
- font-weight: 600;
1578
+ .input_field {
1579
+ padding: 8px 12px;
1580
+ width: -webkit-fill-available;
1581
+ background-color: var(--_base-white);
1582
+ border-radius: 6px;
1583
+ border: 1px solid var(--_gray-300);
1584
+
1585
+ &:focus-within {
1586
+ border: 1px solid var(--_primary-300);
1587
+ outline: 2px solid var(--_primary-100);
1588
+ }
1589
+ }
1590
+ }
1451
1591
  }
1452
1592
  }
1453
1593
 
@@ -1665,314 +1805,282 @@ $activeElementSelector: "[data-has-clicked='true']";
1665
1805
  }
1666
1806
  }
1667
1807
  }
1668
- }
1669
1808
 
1670
- // &[data-view-state="full"] {
1671
- // width: auto;
1672
- // margin: 0;
1673
- // justify-self: stretch !important;
1674
- // align-self: stretch !important;
1675
- // cursor: auto;
1676
- // &:is(#{$activeElementSelector}) {
1677
- // & > div {
1678
- // &[data-div-type="wrapper__layer"] {
1679
- // --_sf-vt-zz: visible;
1680
- // --_sf-op-zz: 1;
1681
- // }
1682
- // }
1683
- // }
1684
- // }
1685
- }
1686
- }
1809
+ // credit card form syles
1810
+ .chk_cred_form_details {
1811
+ border-top: 1px solid var(--_gray-100);
1812
+ padding: 16px;
1813
+ .chk_basic_form_title {
1814
+ font-size: 14px;
1815
+ margin-bottom: 16px;
1816
+ font-weight: 600;
1817
+ }
1818
+ .chk_form_fields {
1819
+ h3 {
1820
+ font-size: 14px;
1821
+ margin-bottom: 8px;
1822
+ }
1823
+ display: flex;
1824
+ flex-direction: column;
1825
+ gap: 24px;
1826
+ width: 500px;
1827
+ .chk_form_field {
1828
+ width: 100%;
1829
+ &.expiry_details {
1830
+ width: 80px;
1831
+ }
1687
1832
 
1688
- // credit card form syles
1689
- .chk_cred_form_details {
1690
- border-top: 1px solid var(--_gray-100);
1691
- padding: 16px;
1692
- .chk_basic_form_title {
1693
- font-size: 14px;
1694
- margin-bottom: 16px;
1695
- font-weight: 600;
1696
- }
1697
- .chk_form_fields {
1698
- h3 {
1699
- font-size: 14px;
1700
- margin-bottom: 8px;
1701
- }
1702
- display: flex;
1703
- flex-direction: column;
1704
- gap: 24px;
1705
- width: 500px;
1706
- .chk_form_field {
1707
- width: 100%;
1708
- &.expiry_details {
1709
- width: 80px;
1710
- }
1833
+ display: flex;
1834
+ flex-direction: column;
1835
+ gap: 6px;
1836
+ width: 100%;
1711
1837
 
1712
- display: flex;
1713
- flex-direction: column;
1714
- gap: 6px;
1715
- width: 100%;
1838
+ .chk_form_field_label {
1839
+ font-size: 14px;
1840
+ color: var(--_gray-600);
1841
+ }
1842
+ .chk_form_field_inp {
1843
+ height: 40px;
1844
+ border: 1px solid var(--_gray-300);
1845
+ border-radius: 4px;
1846
+ padding-inline: 10px;
1847
+ &:placeholder-shown {
1848
+ color: var(--_gray-400);
1849
+ padding-left: 16px;
1850
+ }
1851
+ &:focus {
1852
+ border: 1px solid var(--_primary-300);
1853
+ outline: 2px solid var(--_primary-100);
1854
+ }
1855
+ }
1856
+ .error_msg {
1857
+ display: block;
1858
+ color: var(--_error-700);
1859
+ font-size: 12px;
1860
+ }
1861
+ }
1716
1862
 
1717
- .chk_form_field_label {
1718
- font-size: 14px;
1719
- color: var(--_gray-600);
1720
- }
1721
- .chk_form_field_inp {
1722
- height: 40px;
1723
- border: 1px solid var(--_gray-300);
1724
- border-radius: 4px;
1725
- padding-inline: 10px;
1726
- &:placeholder-shown {
1727
- color: var(--_gray-400);
1728
- padding-left: 16px;
1729
- }
1730
- &:focus {
1731
- border: 1px solid var(--_primary-300);
1732
- outline: 2px solid var(--_primary-100);
1733
- }
1734
- }
1735
- .error_msg {
1736
- display: block;
1737
- color: var(--_error-700);
1738
- font-size: 12px;
1739
- }
1740
- }
1863
+ .checkbox {
1864
+ width: auto;
1741
1865
 
1742
- .checkbox {
1743
- width: auto;
1866
+ label {
1867
+ display: flex;
1868
+ align-items: center;
1869
+ gap: 8px;
1870
+ cursor: pointer;
1871
+ position: relative;
1872
+ user-select: none;
1744
1873
 
1745
- label {
1746
- display: flex;
1747
- align-items: center;
1748
- gap: 8px;
1749
- cursor: pointer;
1750
- position: relative;
1751
- user-select: none;
1874
+ input[type="checkbox"] {
1875
+ display: none;
1752
1876
 
1753
- input[type="checkbox"] {
1754
- display: none;
1877
+ &:checked + .custom-checkbox::after {
1878
+ opacity: 1;
1879
+ }
1880
+ }
1755
1881
 
1756
- &:checked + .custom-checkbox::after {
1757
- opacity: 1;
1758
- }
1759
- }
1882
+ .custom-checkbox {
1883
+ width: 16px;
1884
+ height: 16px;
1885
+ border: 2px solid var(--_primary-400);
1886
+ border-radius: 4px;
1887
+ position: relative;
1888
+ display: inline-block;
1889
+ box-sizing: border-box;
1760
1890
 
1761
- .custom-checkbox {
1762
- width: 16px;
1763
- height: 16px;
1764
- border: 2px solid var(--_primary-400);
1765
- border-radius: 4px;
1766
- position: relative;
1767
- display: inline-block;
1768
- box-sizing: border-box;
1769
-
1770
- &::after {
1771
- content: "";
1772
- position: absolute;
1773
- left: 3px;
1774
- top: 0px;
1775
- width: 4px;
1776
- height: 8px;
1777
- border: solid var(--_primary-400);
1778
- border-width: 0 1px 1px 0;
1779
- transform: rotate(45deg);
1780
- opacity: 0;
1781
- transition: opacity 0.2s ease-in-out;
1891
+ &::after {
1892
+ content: "";
1893
+ position: absolute;
1894
+ left: 3px;
1895
+ top: 0px;
1896
+ width: 4px;
1897
+ height: 8px;
1898
+ border: solid var(--_primary-400);
1899
+ border-width: 0 1px 1px 0;
1900
+ transform: rotate(45deg);
1901
+ opacity: 0;
1902
+ transition: opacity 0.2s ease-in-out;
1903
+ }
1904
+ }
1905
+ }
1906
+ }
1907
+ .expiry_details {
1908
+ display: flex;
1909
+ gap: 12px;
1910
+ .cvv_inp {
1911
+ width: 110px;
1912
+ }
1782
1913
  }
1783
1914
  }
1784
1915
  }
1785
- }
1786
- .expiry_details {
1787
- display: flex;
1788
- gap: 12px;
1789
- .cvv_inp {
1790
- width: 110px;
1791
- }
1792
- }
1793
- }
1794
- }
1795
1916
 
1796
- // giftcard form styles
1797
- .chk_gift_card_details {
1798
- border-top: 1px solid var(--_gray-300);
1799
- padding: 16px;
1800
- .chk_gift_card_form {
1801
- display: flex;
1802
- flex-direction: column;
1803
- gap: 16px;
1804
- max-width: 480px;
1805
- .chk_gift_cart_form_title {
1806
- font-size: 14px;
1807
- font-weight: 600;
1808
- }
1917
+ // giftcard form styles
1918
+ .chk_gift_card_details {
1919
+ border-top: 1px solid var(--_gray-300);
1920
+ padding: 16px;
1921
+ .chk_gift_card_form {
1922
+ display: flex;
1923
+ flex-direction: column;
1924
+ gap: 16px;
1925
+ max-width: 480px;
1926
+ .chk_gift_cart_form_title {
1927
+ font-size: 14px;
1928
+ font-weight: 600;
1929
+ }
1809
1930
 
1810
- .chk_gift_form_fields {
1811
- display: flex;
1812
- gap: 12px;
1813
- width: 100%;
1814
- .chk_gift_inp_field {
1931
+ .chk_gift_form_fields {
1932
+ display: flex;
1933
+ gap: 12px;
1934
+ width: 100%;
1935
+ .chk_gift_inp_field {
1936
+ display: flex;
1937
+ flex-direction: column;
1938
+ gap: 6px;
1939
+ width: 100%;
1940
+ label {
1941
+ color: var(--_gray-600);
1942
+ }
1943
+ .chk_gift_inp {
1944
+ border: 1px solid var(--_gray-300);
1945
+ border-radius: 6px;
1946
+ height: 40px;
1947
+ padding-inline: 10px;
1948
+ &:placeholder-shown {
1949
+ padding-left: 10px;
1950
+ color: var(--_gray-400);
1951
+ }
1952
+ &:focus {
1953
+ border: 1px solid var(--_primary-300);
1954
+ outline: 2px solid var(--_primary-100);
1955
+ }
1956
+ }
1957
+ &.pin {
1958
+ width: 110px;
1959
+ }
1960
+ .error_msg {
1961
+ display: block;
1962
+ color: var(--_error-700);
1963
+ font-size: 12px;
1964
+ }
1965
+ }
1966
+ .error_msg {
1967
+ color: var(--_error-700);
1968
+ font-size: 14px;
1969
+ }
1970
+ }
1971
+ }
1972
+ }
1973
+ .chk_form_actions {
1815
1974
  display: flex;
1816
- flex-direction: column;
1817
- gap: 6px;
1818
- width: 100%;
1819
- label {
1820
- color: var(--_gray-600);
1975
+ gap: 12px;
1976
+ .chk_sav_btn {
1977
+ padding: 12px 16px;
1978
+ background-color: var(--_primary-400);
1979
+ border-radius: 6px;
1980
+ color: var(--_base-white);
1981
+ &:hover {
1982
+ background-color: var(--_primary-500);
1983
+ }
1821
1984
  }
1822
- .chk_gift_inp {
1823
- border: 1px solid var(--_gray-300);
1985
+ .chk_can_btn {
1986
+ padding: 12px 16px;
1987
+ background-color: transparent;
1824
1988
  border-radius: 6px;
1825
- height: 40px;
1989
+ color: var(--_gray-600);
1826
1990
  padding-inline: 10px;
1827
- &:placeholder-shown {
1828
- padding-left: 10px;
1829
- color: var(--_gray-400);
1830
- }
1831
- &:focus {
1832
- border: 1px solid var(--_primary-300);
1833
- outline: 2px solid var(--_primary-100);
1991
+ &:hover {
1992
+ background-color: var(--_gray-50);
1993
+ color: var(--_gray-900);
1834
1994
  }
1835
1995
  }
1836
- &.pin {
1837
- width: 110px;
1996
+ }
1997
+
1998
+ .tertiary_primary_btn {
1999
+ font-size: 12px;
2000
+ color: var(--_primary-400);
2001
+ display: inline-flex;
2002
+ &:hover {
2003
+ color: var(--_primary-500);
2004
+ text-decoration: underline;
1838
2005
  }
1839
- .error_msg {
1840
- display: block;
1841
- color: var(--_error-700);
1842
- font-size: 12px;
2006
+ }
2007
+ .chk_primary_bnt {
2008
+ padding: 12px 24px;
2009
+ background-color: var(--_primary-400);
2010
+ color: var(--_base-white);
2011
+ font-weight: 600;
2012
+ border-radius: 6px;
2013
+ width: max-content;
2014
+ &:hover {
2015
+ background-color: var(--_primary-500);
1843
2016
  }
1844
2017
  }
1845
- .error_msg {
1846
- color: var(--_error-700);
1847
- font-size: 14px;
2018
+ .chk_secondary_bnt {
2019
+ padding: 12px 24px;
2020
+ background-color: transparent;
2021
+ color: var(--_gray-600);
2022
+ font-weight: 600;
2023
+ border-radius: 6px;
2024
+
2025
+ &:hover {
2026
+ background-color: var(--_gray-50);
2027
+ color: var(--_gray-900);
2028
+ }
1848
2029
  }
1849
2030
  }
1850
- }
1851
- }
1852
- .chk_form_actions {
1853
- display: flex;
1854
- gap: 12px;
1855
- .chk_sav_btn {
1856
- padding: 12px 16px;
1857
- background-color: var(--_primary-400);
1858
- border-radius: 6px;
1859
- color: var(--_base-white);
1860
- &:hover {
1861
- background-color: var(--_primary-500);
1862
- }
1863
- }
1864
- .chk_can_btn {
1865
- padding: 12px 16px;
1866
- background-color: transparent;
1867
- border-radius: 6px;
1868
- color: var(--_gray-600);
1869
- padding-inline: 10px;
1870
- &:hover {
1871
- background-color: var(--_gray-50);
1872
- color: var(--_gray-900);
1873
- }
1874
- }
1875
- }
1876
2031
 
1877
- .chk_payment_cred_section {
1878
- display: flex;
1879
- justify-content: space-between;
1880
- align-items: center;
1881
- padding: 16px 16px 8px 16px;
1882
-
1883
- .chk_currency_inp {
1884
- height: 44px;
1885
- border: 1px solid var(--_gray-200);
1886
- border-radius: 4px;
1887
- background-color: var(--_base-white);
1888
- display: flex;
1889
- width: 120px;
1890
- overflow: hidden;
1891
- align-items: center;
1892
- padding-inline: 12px;
1893
- gap: 12px;
1894
- &:focus-within {
1895
- border: 1px solid var(--_primary-200);
1896
- outline: 2px solid var(--_primary-50);
1897
- }
1898
- input {
1899
- height: inherit;
1900
- }
1901
- }
1902
- .chk_payment_cred_section_col_left {
1903
- .chk_payment_cred_section_col_left_crd_details {
2032
+ .add_credit_card {
1904
2033
  display: flex;
1905
- gap: 80px;
1906
- align-items: center;
1907
- & > div {
1908
- display: flex;
1909
- gap: 12px;
1910
- .card_icon {
1911
- width: 60px;
1912
- height: 40px;
1913
- border-radius: 4px;
2034
+ gap: 12px;
2035
+ padding: 16px;
2036
+
2037
+ .cc_icon {
2038
+ svg {
2039
+ width: 18px;
2040
+ height: 14px;
1914
2041
  }
1915
- .card_details {
1916
- .card_details_num {
1917
- font-size: 12px;
1918
- font-weight: 600;
1919
- color: var(--_gray-900);
1920
- }
1921
- & > div {
1922
- display: flex;
1923
- .card_details_label {
1924
- font-size: 12px;
1925
- color: var(--_gray-500);
1926
- }
1927
- .card_details_value {
1928
- font-size: 12px;
1929
- color: var(--_gray-900);
1930
- }
1931
- }
2042
+ }
2043
+
2044
+ .cc_info {
2045
+ display: flex;
2046
+ flex-direction: column;
2047
+ gap: 6px;
2048
+
2049
+ .cc_title {
2050
+ font-size: 14px;
2051
+ font-weight: 600;
1932
2052
  }
1933
2053
  }
1934
2054
  }
1935
- }
1936
- }
2055
+ .add_new_credit_card {
2056
+ display: flex;
2057
+ justify-content: space-between;
2058
+ align-items: center;
2059
+ padding-inline: 16px;
2060
+ }
2061
+ .cc_tertiary_btn {
2062
+ color: var(--_primary-400);
1937
2063
 
1938
- .chk_payment_remove_card {
1939
- padding-inline: 16px;
1940
- margin-bottom: 16px;
1941
- .error_msg {
1942
- font-size: 12px;
1943
- color: var(--_error-700);
1944
- }
1945
- }
2064
+ &:hover {
2065
+ color: var(--_primary-500);
2066
+ text-decoration: underline;
2067
+ }
2068
+ }
1946
2069
 
1947
- .tertiary_primary_btn {
1948
- font-size: 12px;
1949
- color: var(--_primary-400);
1950
- display: inline-flex;
1951
- &:hover {
1952
- color: var(--_primary-500);
1953
- text-decoration: underline;
1954
- }
1955
- }
1956
- .chk_primary_bnt {
1957
- padding: 12px 24px;
1958
- background-color: var(--_primary-400);
1959
- color: var(--_base-white);
1960
- font-weight: 600;
1961
- border-radius: 6px;
1962
- width: max-content;
1963
- &:hover {
1964
- background-color: var(--_primary-500);
1965
- }
1966
- }
1967
- .chk_secondary_bnt {
1968
- padding: 12px 24px;
1969
- background-color: transparent;
1970
- color: var(--_gray-600);
1971
- font-weight: 600;
1972
- border-radius: 6px;
1973
-
1974
- &:hover {
1975
- background-color: var(--_gray-50);
1976
- color: var(--_gray-900);
2070
+ // &[data-view-state="full"] {
2071
+ // width: auto;
2072
+ // margin: 0;
2073
+ // justify-self: stretch !important;
2074
+ // align-self: stretch !important;
2075
+ // cursor: auto;
2076
+ // &:is(#{$activeElementSelector}) {
2077
+ // & > div {
2078
+ // &[data-div-type="wrapper__layer"] {
2079
+ // --_sf-vt-zz: visible;
2080
+ // --_sf-op-zz: 1;
2081
+ // }
2082
+ // }
2083
+ // }
2084
+ // }
1977
2085
  }
1978
2086
  }