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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/add-order.scss +3 -0
  2. package/dist/add-products-tab.scss +64 -17
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +1 -1
  5. package/dist/buy-for-tab.scss +15 -15
  6. package/dist/buyForHeaders.scss +5 -5
  7. package/dist/cart-details.scss +32 -42
  8. package/dist/cart-products-sidebar.scss +32 -16
  9. package/dist/cart-summary.scss +2 -4
  10. package/dist/cartDropdownOverlay.scss +3 -1
  11. package/dist/checkout.scss +620 -821
  12. package/dist/confirmationModal.scss +48 -0
  13. package/dist/container.scss +15 -15
  14. package/dist/customization-tree.scss +5 -1
  15. package/dist/dropdownTemplate.scss +5 -2
  16. package/dist/employee-bulk-order.scss +3459 -384
  17. package/dist/grid.scss +36 -0
  18. package/dist/icons.js +1 -1
  19. package/dist/image-temp.scss +47 -22
  20. package/dist/index.js +1 -1
  21. package/dist/layouter-pro-item.scss +1 -1
  22. package/dist/layouter-pro.scss +5 -5
  23. package/dist/modal.scss +357 -16
  24. package/dist/order-status.scss +49 -5
  25. package/dist/section.scss +5 -1
  26. package/dist/shareCartSideBar.scss +10 -8
  27. package/dist/shipping-payments.scss +668 -505
  28. package/dist/store-locations.scss +252 -160
  29. package/dist/tab-v2.scss +15 -15
  30. package/dist/text-temp.scss +4 -1
  31. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +36 -0
  32. package/dist/types/builder/tools/element-edit/grid.d.ts +26 -0
  33. package/dist/types/builder/tools/element-edit/language-menu.d.ts +77 -0
  34. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +4 -0
  35. package/dist/types/builder/tools/element-edit/userElements.d.ts +407 -0
  36. package/dist/types/icons/cms-svg-icons.d.ts +1 -1
  37. package/dist/user-elements.scss +1449 -490
  38. package/package.json +1 -1
package/dist/shipping-payments.scss CHANGED
@@ -73,22 +73,16 @@ $activeElementSelector: "[data-has-clicked='true']";
73
73
  padding-bottom: 24px;
74
74
 
75
75
  .chk_checkout_title {
76
- color: rgba(16, 24, 40, 1);
77
- font-family: var(--_ctm-dn-ct-hg-dn-ft-fy);
78
- font-size: var(--_ctm-dn-ct-hg-dn-ft-se);
79
- font-style: var(--_ctm-dn-ct-hg-dn-ft-se-ic);
80
- font-weight: var(--_ctm-dn-ct-hg-dn-ft-wt);
81
- line-height: var(--_ctm-dn-ct-hg-dn-le-ht);
82
- letter-spacing: var(--_ctm-dn-ct-hg-dn-lr-sg);
83
- text-align: var(--_ctm-dn-ct-hg-dn-tt-an);
84
- width: 100%;
85
- text-decoration: var(--_ctm-dn-ct-hg-dn-ue);
76
+ color: var(--_gray-900);
77
+ font-size: 24px;
78
+ font-weight: 700;
79
+ line-height: 32px;
86
80
  }
87
81
 
88
82
  .accordion {
89
83
  border-radius: 4px;
90
84
  display: flex;
91
- gap: 16px;
85
+ gap: var(--_ctm-lt-an-hg-ad-ve-gp);
92
86
  flex-direction: column;
93
87
 
94
88
  .accordion-header {
@@ -97,7 +91,9 @@ $activeElementSelector: "[data-has-clicked='true']";
97
91
  justify-content: space-between;
98
92
  align-items: center;
99
93
  cursor: pointer;
100
- background-color: var(--_gray-100);
94
+ background-color: #f5f5f5;
95
+ border-color: #f5f5f5;
96
+ border-radius: 4px;
101
97
 
102
98
  .accordion-title {
103
99
  margin-right: 1rem;
@@ -105,8 +101,9 @@ $activeElementSelector: "[data-has-clicked='true']";
105
101
  display: flex;
106
102
  align-items: center;
107
103
  gap: 12px;
108
- font-weight: 700;
109
- color: var(--_gray-700);
104
+ font-size: 16px;
105
+ font-weight: 600;
106
+ line-height: 24px;
110
107
 
111
108
  span {
112
109
  display: flex;
@@ -114,11 +111,10 @@ $activeElementSelector: "[data-has-clicked='true']";
114
111
  }
115
112
  .edit-btn {
116
113
  cursor: pointer;
117
- padding: 0;
118
- color: #243dc6;
114
+ color: var(--_primary-400);
119
115
 
120
116
  &:hover {
121
- text-decoration: underline;
117
+ color: var(--_primary-500);
122
118
  }
123
119
  }
124
120
  }
@@ -130,24 +126,12 @@ $activeElementSelector: "[data-has-clicked='true']";
130
126
  display: flex;
131
127
  align-items: center;
132
128
  gap: 4px;
133
- color: var(--_gray-600);
134
- font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
135
- font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
136
- font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
137
- line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
138
- letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
139
- text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
129
+ color: var(--_gray-500);
140
130
  }
141
131
 
142
132
  .chk_shipping_method_heading {
143
- color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
144
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
145
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
146
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
147
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
148
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
149
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
150
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
133
+ color: var(--_gray-500);
134
+ font-weight: 600;
151
135
  }
152
136
  }
153
137
 
@@ -158,47 +142,11 @@ $activeElementSelector: "[data-has-clicked='true']";
158
142
 
159
143
  .chk_saved_address_button {
160
144
  cursor: pointer;
161
- align-self: flex-start;
162
- white-space: nowrap;
145
+ border-radius: 6px;
146
+ color: var(--_primary-400);
163
147
  display: flex;
148
+ align-items: center;
164
149
  gap: 4px;
165
- align-items: flex-start;
166
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
167
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
168
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
169
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
170
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
171
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
172
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
173
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
174
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
175
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
176
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
177
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
178
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
179
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
180
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
181
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
182
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
183
- &:hover {
184
- background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
185
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
186
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
187
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
188
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
189
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
190
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
191
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
192
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
193
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
194
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
195
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
196
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
197
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
198
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
199
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
200
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
201
- }
202
150
  }
203
151
 
204
152
  .shipping_address_container {
@@ -239,49 +187,28 @@ $activeElementSelector: "[data-has-clicked='true']";
239
187
  .chk_shipping_address_input_wrapper {
240
188
  display: flex;
241
189
  flex-direction: column;
242
- gap: var(--_ctm-lt-ll-ad-it-gp);
190
+ gap: 16px;
243
191
  width: 100%;
244
192
  }
245
193
 
246
194
  .chk_shipping_address_form_label {
247
- white-space: nowrap;
248
- color: var(--_gray-700);
249
- font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
250
- font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
251
- font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
252
- font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
253
- line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
254
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
255
- text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
195
+ color: var(--_gray-600);
196
+ font-size: 14px;
256
197
  }
257
198
 
258
199
  .chk_shiping_address_form_input {
259
200
  padding: 8px 12px;
260
201
  width: -webkit-fill-available;
261
202
  background-color: var(--_base-white);
203
+ color: var(--_gray-600);
262
204
  border: 1px solid var(--_gray-300);
263
205
  border-radius: 6px;
206
+ height: 40px;
264
207
 
265
208
  &:focus-within {
266
- border: 1px solid #4b63ee;
267
- outline: 2px solid #8497ff;
268
- }
269
-
270
- // &:focus-within {
271
- // background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
272
- // border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
273
- // border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
274
- // border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
275
- // border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
276
- // color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
277
- // font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
278
- // font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
279
- // font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
280
- // font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
281
- // line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
282
- // letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
283
- // text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
284
- // }
209
+ border: 1px solid var(--_primary-300);
210
+ outline: 2px solid var(--_primary-100);
211
+ }
285
212
  }
286
213
 
287
214
  input[type="checkbox"] {
@@ -306,63 +233,12 @@ $activeElementSelector: "[data-has-clicked='true']";
306
233
  gap: 8px;
307
234
  }
308
235
 
309
- .chk_shipping_address_submit_btn {
310
- padding: 12px 24px;
311
- width: fit-content;
312
- background-color: var(--_primary-400);
313
- border-radius: 6px;
314
- color: var(--_base-white);
315
- // border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
316
- // border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
317
- // border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
318
- // border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
319
- // color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
320
- // font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
321
- // font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
322
- // font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
323
- // font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
324
- // line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
325
- // letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
326
- // box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
327
- // var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
328
- // var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
329
- // var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
330
- // text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
331
-
332
- &:hover {
333
- // background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
334
- // border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
335
- // border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
336
- // border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
337
- // border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
338
- // color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
339
- // font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
340
- // font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
341
- // font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
342
- // font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
343
- // line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
344
- // letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
345
- // box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
346
- // var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
347
- // var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
348
- // var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
349
- // text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
350
- background-color: var(--_primary-500);
351
- }
352
- }
353
-
354
236
  .chk_shipping_address_use_as_billing_address_chkbx {
355
237
  display: flex;
356
238
  align-items: center;
357
239
  gap: 0.5rem;
358
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
359
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
360
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
361
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
362
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
363
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
364
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
365
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
240
+ color: var(--_gray-600);
241
+ font-size: 14px;
366
242
 
367
243
  .custom-checkbox {
368
244
  width: 20px;
@@ -445,25 +321,16 @@ $activeElementSelector: "[data-has-clicked='true']";
445
321
  gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);
446
322
 
447
323
  .chk_multi_address_product_name {
448
- color: var(--_gray-700);
449
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-fy);
450
- font-size: 14px;
451
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se-ic);
452
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-wt);
453
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-le-ht);
454
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-lr-sg);
455
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ue);
324
+ color: var(--_gray-900);
325
+ font-size: 18px;
326
+ font-weight: 700;
327
+ line-height: 28px;
456
328
  }
457
329
 
458
330
  .chk_multi_address_product_info {
459
- color: var(--_gray-700);
460
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
461
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
462
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
463
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
464
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
465
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
466
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
331
+ color: var(--_gray-600);
332
+ font-size: 14px;
333
+ list-style: 20px;
467
334
  }
468
335
  }
469
336
 
@@ -478,14 +345,9 @@ $activeElementSelector: "[data-has-clicked='true']";
478
345
  }
479
346
 
480
347
  .chk_multi_address_product_price {
481
- color: var(--_gray-700);
482
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-fy);
483
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se);
484
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se-ic);
485
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
486
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
487
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-lr-sg);
488
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ue);
348
+ color: var(--_gray-900);
349
+ font-size: 20px;
350
+ font-weight: 700;
489
351
  }
490
352
  }
491
353
 
@@ -496,25 +358,15 @@ $activeElementSelector: "[data-has-clicked='true']";
496
358
  gap: 4px;
497
359
 
498
360
  .chk_multi_address_product_info {
499
- color: var(--_gray-700);
500
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
501
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
502
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
503
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
504
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
505
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
506
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
361
+ color: var(--_gray-600);
362
+ font-size: 12px;
363
+ line-height: 18px;
507
364
  }
508
365
 
509
366
  .chk_multi_address_product_qty {
510
- color: var(--_gray-700);
511
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-fy);
512
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se);
513
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se-ic);
514
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-wt);
515
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-le-ht);
516
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-lr-sg);
517
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ue);
367
+ color: var(--_gray-900);
368
+ font-size: 12px;
369
+ font-weight: 700;
518
370
  }
519
371
  }
520
372
 
@@ -530,7 +382,7 @@ $activeElementSelector: "[data-has-clicked='true']";
530
382
 
531
383
  &_shiping_option_heading_wrapper {
532
384
  display: grid;
533
- grid-template-columns: 0.5fr 2fr 2fr auto;
385
+ grid-template-columns: 0.5fr 2fr 2fr 20px;
534
386
  gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
535
387
  white-space: nowrap;
536
388
  align-items: center;
@@ -540,23 +392,17 @@ $activeElementSelector: "[data-has-clicked='true']";
540
392
  }
541
393
 
542
394
  .chk_multi_address_product_label {
543
- color: var(--_gray-700);
544
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-fy);
545
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se);
546
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se-ic);
547
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-wt);
548
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-le-ht);
549
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-lr-sg);
550
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ue);
395
+ color: var(--_gray-600);
396
+ font-size: 12px;
551
397
  }
552
398
  }
553
399
 
554
400
  .chk_multi_address_icon {
555
401
  svg {
556
- width: 18px;
557
- height: 18px;
402
+ width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
403
+ height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
558
404
  path {
559
- stroke: var(--_gray-600);
405
+ stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
560
406
  }
561
407
  }
562
408
  &:hover {
@@ -571,12 +417,14 @@ $activeElementSelector: "[data-has-clicked='true']";
571
417
  .chk_shiping_address_form_input {
572
418
  padding: 8px 12px;
573
419
  width: -webkit-fill-available;
574
- position: relative;
575
- background-color: var(--_base-white);
576
420
  border: 1px solid var(--_gray-300);
577
421
  border-radius: 6px;
422
+ height: 40px;
423
+ background-color: var(--_base-white);
578
424
 
579
425
  &:focus-within {
426
+ border: 1px solid var(--_primary-300);
427
+ outline: 2px solid var(--_primary-100);
580
428
  }
581
429
 
582
430
  .custom-arrows {
@@ -595,26 +443,26 @@ $activeElementSelector: "[data-has-clicked='true']";
595
443
  }
596
444
  }
597
445
 
598
- .input-field {
599
- &:focus {
600
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
601
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
602
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
603
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
604
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
605
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
606
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
607
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
608
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
609
- }
610
- }
446
+ // .input-field {
447
+ // padding: 8px 12px;
448
+ // width: -webkit-fill-available;
449
+ // border: 1px solid var(--_gray-300);
450
+ // border-radius: 6px;
451
+ // height: 40px;
452
+ // background-color: var(--_base-white);
453
+
454
+ // &:focus-within {
455
+ // border: 1px solid var(--_primary-300);
456
+ // outline: 2px solid var(--_primary-100);
457
+ // }
458
+ // }
611
459
  }
612
460
  }
613
461
 
614
462
  .shipping-method {
615
463
  display: flex;
616
464
  flex-direction: column;
617
- gap: 12px;
465
+ gap: var(--_ctm-lt-sg-md-le-gp);
618
466
 
619
467
  &__grid {
620
468
  display: grid;
@@ -634,13 +482,8 @@ $activeElementSelector: "[data-has-clicked='true']";
634
482
 
635
483
  .chk_shipping_method_heading {
636
484
  color: var(--_gray-700);
637
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
638
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
639
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
640
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
641
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
642
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
643
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
485
+ font-weight: 700;
486
+ font-size: 16px;
644
487
  }
645
488
  }
646
489
 
@@ -674,7 +517,7 @@ $activeElementSelector: "[data-has-clicked='true']";
674
517
  }
675
518
 
676
519
  .chk_shipping_method_label {
677
- color: var(--_gray-700);
520
+ color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
678
521
  font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
679
522
  font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
680
523
  font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
@@ -685,7 +528,7 @@ $activeElementSelector: "[data-has-clicked='true']";
685
528
  }
686
529
 
687
530
  .chk_shipping_method_value {
688
- color: var(--_gra-600);
531
+ color: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-cr);
689
532
  font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
690
533
  font-size: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se);
691
534
  font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
@@ -725,14 +568,14 @@ $activeElementSelector: "[data-has-clicked='true']";
725
568
  transition: all 0.2s;
726
569
  }
727
570
  input[type="radio"]:checked + .radio-style {
728
- background-color: #fff;
729
- border: 5px solid #1a3dcc;
571
+ background-color: var(--_base-white);
572
+ border: 5px solid var(--_primary-400);
730
573
  }
731
574
  }
732
575
 
733
576
  &.selected {
734
- background-color: #f0f5ff;
735
- border-color: #2563eb;
577
+ background-color: var(--_base-white);
578
+ border-color: var(--_primary-400);
736
579
  }
737
580
  }
738
581
 
@@ -753,74 +596,411 @@ $activeElementSelector: "[data-has-clicked='true']";
753
596
  display: flex;
754
597
  flex-direction: column;
755
598
  gap: var(--_ctm-lt-pt-os-gp-bn-cs);
599
+ .gift_crd_chk_payment_option {
600
+ border: 1px solid var(--_gray-300);
601
+ border-radius: 4px;
602
+ }
603
+ .payment_program {
604
+ // padding: 0 12px;
605
+ .payment_program_header {
606
+ display: flex;
607
+ justify-content: space-between;
608
+ gap: 8px;
609
+ align-items: center;
756
610
 
757
- .chk_primary_btn_link {
758
- color: #1a3dcc;
759
- text-align: left;
611
+ margin-bottom: 16px;
760
612
 
761
- &:hover {
762
- text-decoration: underline;
613
+ &_label {
614
+ display: flex;
615
+ justify-content: space-between;
616
+ align-items: center;
617
+ &_title {
618
+ font-size: 14px;
619
+ font-weight: 600;
620
+ color: var(--_gray-600);
621
+ }
622
+ &_pds {
623
+ &_label {
624
+ font-size: 14px;
625
+ color: var(--_gray-600);
626
+ }
627
+ &_value {
628
+ font-size: 14px;
629
+ color: var(--_gray-900);
630
+ }
631
+ }
632
+ }
763
633
  }
764
634
  }
765
635
 
766
636
  .chk_payment_option_wrapper {
767
637
  display: flex;
768
638
  flex-direction: column;
769
- gap: var(--_ctm-lt-pt-os-gp-bn-cs);
770
- }
771
- .chk_pmnt_other_options {
772
- display: flex;
773
- justify-content: space-between;
774
- gap: 80px;
775
- padding: 16px;
776
- .chk_pmnt_other_options_left_container {
777
- display: flex;
778
- gap: 12px;
779
- .chk_pmnt_option_info_wrapper {
639
+ border: 1px solid var(--_gray-300);
640
+ margin-bottom: 12px;
641
+ border-radius: 4px;
642
+ overflow: hidden;
643
+
644
+ .pp_pmnt_method_groups {
645
+ .pp_ppm_section {
646
+ background: #f5f5f5;
647
+ padding: 12px 16px;
648
+ font-size: 12px;
780
649
  display: flex;
781
- gap: 12px;
782
- .cards {
783
- display: flex;
784
- flex-direction: column;
785
- gap: 8px;
786
- .chk_payment_options_name {
787
- font-weight: 600;
650
+ justify-content: space-between;
651
+ gap: 8px;
652
+ .pp_ppm_section_label {
653
+ font-size: 14px;
654
+ font-weight: 700;
655
+ color: var(--_gray-900);
656
+ }
657
+ .pp_ppm_section_value {
658
+ font-size: 14px;
659
+ font-weight: 700;
660
+ color: var(--_gray-600);
661
+ .pp_ppm_section_value_lable {
662
+ font-weight: 500;
663
+ color: var(--_gray-500);
788
664
  }
789
- span {
790
- font-size: 12px;
791
- .chk_payment_options_label {
792
- color: var(--_gray-600);
665
+ }
666
+ }
667
+ .payment_methods {
668
+ // padding: 12px;
669
+ display: grid;
670
+ gap: 8px;
671
+ .chk_payment_option {
672
+ .chk_payment_section_wrapper {
673
+ width: 100%;
674
+ display: flex;
675
+ justify-content: space-between;
676
+ padding: 16px;
677
+ &:hover {
678
+ background-color: var(--_gray-50);
793
679
  }
794
- .chk_payment_options_value {
680
+ .chk_payment_section {
681
+ display: flex;
682
+ justify-content: space-between;
683
+ align-items: center;
684
+ width: 100%;
685
+ .chk_payment_section_col_left {
686
+ display: flex;
687
+ gap: 12px;
688
+ .chk_payment_section_method {
689
+ display: flex;
690
+ flex-direction: column;
691
+ .chk_payment_section_method_name {
692
+ font-size: 14px;
693
+ font-weight: 700;
694
+ line-height: 20px;
695
+ color: var(--_gray-700);
696
+ }
697
+ & > div {
698
+ display: flex;
699
+ .label {
700
+ font-size: 12px;
701
+ color: var(--_gray-500);
702
+ }
703
+ .price {
704
+ font-size: 12px;
705
+ color: var(--_gray-900);
706
+ }
707
+ }
708
+ }
709
+ }
710
+ &_col_right {
711
+ .chk_currency_inp {
712
+ height: 44px;
713
+ border: 1px solid var(--_gray-200);
714
+ border-radius: 4px;
715
+ background-color: var(--_base-white);
716
+ display: flex;
717
+ width: 120px;
718
+ overflow: hidden;
719
+ align-items: center;
720
+ padding-inline: 12px;
721
+ gap: 12px;
722
+ &:focus-within {
723
+ border: 1px solid var(--_primary-200);
724
+ outline: 2px solid var(--_primary-50);
725
+ }
726
+ input {
727
+ height: inherit;
728
+ }
729
+ }
730
+ }
731
+ }
732
+
733
+ .chk_payment_options_heading {
795
734
  color: var(--_gray-900);
735
+ font-size: 16px;
736
+ font-weight: 700;
737
+ }
738
+
739
+ // 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
+
826
+ // payment other options styles
827
+ .chk_pmnt_other_options {
828
+ display: flex;
829
+ justify-content: space-between;
830
+ gap: 80px;
831
+ padding: 16px;
832
+ .chk_pmnt_other_options_left_container {
833
+ display: flex;
834
+ gap: 12px;
835
+ .chk_pmnt_option_info_wrapper {
836
+ display: flex;
837
+ gap: 12px;
838
+ .cards {
839
+ display: flex;
840
+ flex-direction: column;
841
+ gap: 8px;
842
+ .chk_payment_options_name {
843
+ font-weight: 600;
844
+ }
845
+ span {
846
+ font-size: 12px;
847
+ .chk_payment_options_label {
848
+ color: var(--_gray-600);
849
+ }
850
+ .chk_payment_options_value {
851
+ color: var(--_gray-900);
852
+ }
853
+ }
854
+ }
855
+ }
856
+ }
857
+ .chk_pmnt_other_options_container {
858
+ padding: 16px;
859
+ }
860
+ }
861
+
862
+ &__other_option_wrapper {
863
+ display: flex;
864
+ width: 100%;
865
+ justify-content: space-between;
866
+ padding: 16px;
867
+
868
+ @media (max-width: 500px) {
869
+ flex-direction: column;
870
+ }
871
+ }
872
+
873
+ &_left_container {
874
+ display: flex;
875
+ gap: 12px;
876
+ align-items: flex-start;
877
+ .chk_payment_option__info_wrapper {
878
+ display: flex;
879
+ gap: 0px;
880
+ }
881
+
882
+ @media (max-width: 500px) {
883
+ flex-wrap: wrap;
884
+ }
885
+ }
886
+
887
+ &__left_wrapper {
888
+ display: flex;
889
+ flex-direction: column;
890
+ align-items: flex-start;
891
+ gap: 16px;
892
+ }
893
+
894
+ &__card_icon {
895
+ width: 60px;
896
+ height: 40px;
897
+ }
898
+
899
+ &__info_wrapper {
900
+ display: flex;
901
+ flex-direction: column;
902
+
903
+ .chk_payment_options_name {
904
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
905
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
906
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
907
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
908
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
909
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
910
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
911
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
912
+ }
913
+
914
+ .chk_payment_options_label {
915
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
916
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
917
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
918
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
919
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
920
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
921
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
922
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
923
+ }
924
+
925
+ .chk_payment_options_value {
926
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
927
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
928
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
929
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
930
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
931
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
932
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
933
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
934
+ }
935
+ }
936
+
937
+ &_right_container {
938
+ display: flex;
939
+ gap: 6px;
940
+ align-items: flex-start;
941
+
942
+ @media (max-width: 500px) {
943
+ justify-content: flex-end;
944
+ }
945
+ }
946
+
947
+ &_input {
948
+ display: flex;
949
+ padding: 9px 12px;
950
+ align-items: center;
951
+ max-width: 96px;
952
+ background-color: var(--_base-white);
953
+ border: 1px solid var(--_gray-300);
954
+ border-radius: 6px;
955
+ color: var(--_gray-700);
956
+
957
+ &:focus-within {
958
+ border: 1px solid var(--_primary-300);
959
+ outline: 2px solid var(--_primary-100);
960
+ }
961
+
962
+ .icon {
963
+ svg {
964
+ path {
965
+ stroke: var(--_primary-400);
966
+ }
967
+ }
968
+ }
969
+
970
+ .input_field {
971
+ background-color: var(--_base-white);
972
+ border: 1px solid var(--_gray-300);
973
+ border-radius: 6px;
974
+ color: var(--_gray-700);
975
+
976
+ &:focus-within {
977
+ border: 1px solid var(--_primary-300);
978
+ outline: 2px solid var(--_primary-100);
979
+ }
980
+ }
796
981
  }
797
982
  }
798
983
  }
799
984
  }
800
985
  }
801
- .chk_pmnt_other_options_container {
802
- padding: 16px;
803
- }
804
986
  }
805
987
 
806
- .chk_payment_option {
988
+ .chk_gft_crd_container {
807
989
  width: 100%;
808
990
  display: flex;
809
991
  flex-direction: column;
810
- gap: 12px;
811
- background-color: rgba(255, 255, 255, 0);
812
- border: 1px solid rgba(208, 213, 221, 1);
992
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
993
+ background-color: var(--_base-white);
994
+ border: 1px solid var(--_gray-300);
813
995
  border-radius: 4px;
996
+ overflow: hidden;
814
997
 
815
- .chk_payment_options_heading {
816
- color: var(--_gray-700);
817
- font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
818
- font-size: 14px;
819
- font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
820
- font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
821
- line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
822
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
823
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
998
+ .chk_gft_crd_option_heading {
999
+ display: flex;
1000
+ justify-content: space-between;
1001
+ align-items: center;
1002
+ padding: 8px 12px;
1003
+ border-bottom: 1px solid var(--_gray-300);
824
1004
  }
825
1005
 
826
1006
  // gift card styles
@@ -884,7 +1064,7 @@ $activeElementSelector: "[data-has-clicked='true']";
884
1064
  border-radius: 4px;
885
1065
  background-color: var(--_base-white);
886
1066
  height: 44px;
887
- width: 100px;
1067
+ width: 120px;
888
1068
  display: flex;
889
1069
  align-items: center;
890
1070
  gap: 8px;
@@ -946,7 +1126,7 @@ $activeElementSelector: "[data-has-clicked='true']";
946
1126
  }
947
1127
  }
948
1128
 
949
- .chk_payment_option__other_option_wrapper {
1129
+ &__other_option_wrapper {
950
1130
  display: flex;
951
1131
  width: 100%;
952
1132
  justify-content: space-between;
@@ -957,11 +1137,10 @@ $activeElementSelector: "[data-has-clicked='true']";
957
1137
  }
958
1138
  }
959
1139
 
960
- .chk_payment_option_left_container {
1140
+ &_left_container {
961
1141
  display: flex;
962
- gap: 80px;
1142
+ gap: 12px;
963
1143
  align-items: flex-start;
964
-
965
1144
  & > div {
966
1145
  display: flex;
967
1146
  gap: 12px;
@@ -972,47 +1151,32 @@ $activeElementSelector: "[data-has-clicked='true']";
972
1151
  }
973
1152
  }
974
1153
 
975
- .chk_payment_option__left_wrapper {
1154
+ &__left_wrapper {
976
1155
  display: flex;
977
1156
  flex-direction: column;
978
1157
  align-items: flex-start;
979
1158
  gap: 16px;
980
1159
  }
981
1160
 
982
- .chk_payment_option__card_icon {
1161
+ &__card_icon {
983
1162
  width: 60px;
984
1163
  height: 40px;
985
1164
  }
986
1165
 
987
- .chk_payment_option__remove_card_btn {
988
- color: #1a3dcc;
989
-
990
- &:hover {
991
- text-decoration: underline;
992
- }
993
- }
994
-
995
- .chk_payment_option__info_wrapper {
1166
+ &__info_wrapper {
996
1167
  display: flex;
997
1168
  flex-direction: column;
998
- white-space: nowrap;
999
- font-size: 14px;
1000
1169
 
1001
1170
  .chk_payment_options_name {
1002
- color: var(--_gray-700);
1003
- font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1004
- font-size: 14px;
1005
- font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1006
- font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1007
- line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1008
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1009
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1171
+ color: var(--_gray-900);
1172
+ font-size: 16px;
1173
+ font-weight: 600;
1010
1174
  }
1011
1175
 
1012
1176
  .chk_payment_options_label {
1013
- color: var(--_gray-700);
1177
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1014
1178
  font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1015
- font-size: 12px;
1179
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1016
1180
  font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1017
1181
  font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1018
1182
  line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
@@ -1021,9 +1185,9 @@ $activeElementSelector: "[data-has-clicked='true']";
1021
1185
  }
1022
1186
 
1023
1187
  .chk_payment_options_value {
1024
- color: var(--_gray-700);
1188
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1025
1189
  font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1026
- font-size: 12px;
1190
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1027
1191
  font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1028
1192
  font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1029
1193
  line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
@@ -1032,7 +1196,7 @@ $activeElementSelector: "[data-has-clicked='true']";
1032
1196
  }
1033
1197
  }
1034
1198
 
1035
- .chk_payment_option_right_container {
1199
+ &_right_container {
1036
1200
  display: flex;
1037
1201
  gap: 6px;
1038
1202
  align-items: flex-start;
@@ -1042,54 +1206,40 @@ $activeElementSelector: "[data-has-clicked='true']";
1042
1206
  }
1043
1207
  }
1044
1208
 
1045
- .chk_payment_option_input {
1209
+ &_input {
1046
1210
  display: flex;
1047
- padding: 9px 12px;
1048
- align-items: center;
1049
- max-width: 96px;
1211
+ padding: 8px 12px;
1212
+ width: -webkit-fill-available;
1050
1213
  background-color: var(--_base-white);
1051
- border: 1px solid var(--_gray-300);
1052
1214
  border-radius: 6px;
1215
+ border: 1px solid var(--_gray-300);
1053
1216
 
1054
1217
  &:focus-within {
1055
- outline: 2px solid #9baefa;
1056
- border: 1px solid #3c5cdf;
1218
+ border: 1px solid var(--_primary-300);
1219
+ outline: 2px solid var(--_primary-100);
1057
1220
  }
1058
1221
 
1059
1222
  .icon {
1060
1223
  svg {
1061
1224
  path {
1062
- stroke: #667085;
1225
+ stroke: var(--_primary-400);
1063
1226
  }
1064
1227
  }
1065
1228
  }
1066
1229
 
1067
1230
  .input_field {
1068
- color: var(--_gray-700);
1069
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1070
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1071
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1072
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1073
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1074
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1075
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
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);
1076
1236
 
1077
1237
  &:focus-within {
1078
- color: var(--_gray-900);
1079
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1080
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1081
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1082
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1083
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1084
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1085
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1238
+ border: 1px solid var(--_primary-300);
1239
+ outline: 2px solid var(--_primary-100);
1086
1240
  }
1087
1241
  }
1088
1242
  }
1089
- &_error {
1090
- font-size: 14px;
1091
- color: var(--_error-700);
1092
- }
1093
1243
  }
1094
1244
 
1095
1245
  .chk_billing_address {
@@ -1102,8 +1252,8 @@ $activeElementSelector: "[data-has-clicked='true']";
1102
1252
  var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1103
1253
  var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1104
1254
 
1105
- .chk_billing_address_form_container {
1106
- border-radius: 6px;
1255
+ &_form_container {
1256
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1107
1257
  padding-top: 24px;
1108
1258
  display: flex;
1109
1259
  flex-direction: column;
@@ -1111,20 +1261,15 @@ $activeElementSelector: "[data-has-clicked='true']";
1111
1261
  }
1112
1262
 
1113
1263
  .chk_payment_options_heading {
1114
- color: var(--_gray-700);
1115
- font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
1116
- font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
1117
- font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
1264
+ font-size: 18px;
1265
+ color: var(--_gray-900);
1118
1266
  font-weight: 600;
1119
- line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1120
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1121
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1122
1267
  &.pl_0 {
1123
1268
  padding-left: 0px;
1124
1269
  }
1125
1270
  }
1126
1271
 
1127
- .chk_billing_address_form_wrapper {
1272
+ &_form_wrapper {
1128
1273
  display: flex;
1129
1274
  flex-direction: column;
1130
1275
  gap: 24px;
@@ -1143,11 +1288,11 @@ $activeElementSelector: "[data-has-clicked='true']";
1143
1288
  align-items: center;
1144
1289
 
1145
1290
  .chk_heading_info {
1146
- color: var(--_gray-700);
1291
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1147
1292
  font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1148
1293
  font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1149
1294
  font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1150
- font-weight: 600;
1295
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1151
1296
  line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1152
1297
  letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1153
1298
  text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
@@ -1185,42 +1330,34 @@ $activeElementSelector: "[data-has-clicked='true']";
1185
1330
  }
1186
1331
 
1187
1332
  .chk_shipping_address_form_label {
1188
- white-space: nowrap;
1189
1333
  color: var(--_gray-600);
1190
- font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
1191
- font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
1192
- font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
1193
- font-weight: 400;
1194
- line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
1195
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
1196
- text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
1334
+ font-size: 14px;
1197
1335
  }
1198
1336
 
1199
1337
  .chk_shiping_address_form_input {
1200
1338
  padding: 8px 12px;
1201
1339
  width: -webkit-fill-available;
1202
1340
  background-color: var(--_base-white);
1203
- border: 1px solid var(--_gray-300);
1204
1341
  border-radius: 6px;
1205
- height: 40px;
1342
+ border: 1px solid var(--_gray-300);
1206
1343
 
1207
1344
  &:focus-within {
1208
- border: 1px solid #4b63ee;
1209
- outline: 2px solid #8497ff;
1345
+ border: 1px solid var(--_primary-300);
1346
+ outline: 2px solid var(--_primary-100);
1210
1347
  }
1211
1348
 
1212
- // .input-field {
1213
- // padding: 8px 12px;
1214
- // width: -webkit-fill-available;
1215
- // background-color: var(--_base-white);
1216
- // border: 1px solid var(--_gray-300);
1217
- // border-radius: 6px;
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);
1218
1355
 
1219
- // &:focus-within {
1220
- // border: 1px solid #4b63ee;
1221
- // outline: 2px solid #8497ff;
1222
- // }
1223
- // }
1356
+ &:focus-within {
1357
+ border: 1px solid var(--_primary-300);
1358
+ outline: 2px solid var(--_primary-100);
1359
+ }
1360
+ }
1224
1361
  }
1225
1362
 
1226
1363
  input[type="checkbox"] {
@@ -1236,7 +1373,7 @@ $activeElementSelector: "[data-has-clicked='true']";
1236
1373
  display: flex;
1237
1374
  align-items: center;
1238
1375
  gap: 0.5rem;
1239
- color: var(--_gray-600);
1376
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1240
1377
  font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1241
1378
  font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1242
1379
  font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
@@ -1287,20 +1424,8 @@ $activeElementSelector: "[data-has-clicked='true']";
1287
1424
  gap: 8px;
1288
1425
  }
1289
1426
 
1290
- .chk_shipping_address_submit_btn {
1291
- padding: 12px 24px;
1292
- width: fit-content;
1293
- background-color: #004dff;
1294
- color: var(--_base-white);
1295
- border-radius: 6px;
1296
-
1297
- &:hover {
1298
- background-color: #0f43bd;
1299
- }
1300
- }
1301
-
1302
- .chk_shipping_address_use_as_billing_address_chkbx_same_as_billing_address_chkbx {
1303
- color: var(--_gray-600);
1427
+ &_same_as_billing_address_chkbx {
1428
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1304
1429
  font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1305
1430
  font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1306
1431
  font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
@@ -1310,7 +1435,7 @@ $activeElementSelector: "[data-has-clicked='true']";
1310
1435
  text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1311
1436
  }
1312
1437
 
1313
- .chk_billing_address_button_wrapper {
1438
+ &_button_wrapper {
1314
1439
  display: flex;
1315
1440
  align-items: center;
1316
1441
  gap: 16px;
@@ -1319,20 +1444,10 @@ $activeElementSelector: "[data-has-clicked='true']";
1319
1444
 
1320
1445
  .payment_heading {
1321
1446
  padding: 12px;
1322
- border-bottom: 1px solid var(--_gray-300);
1323
1447
  display: flex;
1324
1448
  justify-content: space-between;
1325
- }
1326
- }
1327
-
1328
- .chk_submit-btn {
1329
- padding: 12px 24px;
1330
- width: fit-content;
1331
- background-color: #004dff;
1332
- color: var(--_base-white);
1333
-
1334
- &:hover {
1335
- background-color: #0f43bd;
1449
+ border-bottom: 1px solid var(--_gray-100);
1450
+ font-weight: 600;
1336
1451
  }
1337
1452
  }
1338
1453
 
@@ -1342,11 +1457,11 @@ $activeElementSelector: "[data-has-clicked='true']";
1342
1457
  }
1343
1458
 
1344
1459
  .react-international-phone-input {
1345
- height: 40px;
1460
+ height: auto;
1346
1461
  border: none !important;
1347
- color: var(--_gray-300);
1462
+ color: var(--_ctm-dn-it-bx-dn-cr);
1348
1463
  font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1349
- font-size: 14px;
1464
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1350
1465
  font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1351
1466
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1352
1467
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
@@ -1362,17 +1477,23 @@ $activeElementSelector: "[data-has-clicked='true']";
1362
1477
  width: fit-content;
1363
1478
  align-items: center;
1364
1479
  font-family: sans-serif;
1480
+ gap: 12px;
1365
1481
 
1366
1482
  input[type="checkbox"] {
1367
1483
  display: none;
1368
1484
  }
1485
+ .payment_program_title {
1486
+ font-size: 14px;
1487
+ font-weight: 500;
1488
+ color: var(--_gray-900);
1489
+ }
1369
1490
 
1370
1491
  .chk_payment_options_use_as_billing_address_chkbx {
1371
1492
  display: flex;
1372
1493
  align-items: center;
1373
1494
  cursor: pointer;
1374
1495
  gap: 10px;
1375
- color: var(--_gray-700);
1496
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
1376
1497
  font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
1377
1498
  font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
1378
1499
  font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
@@ -1410,7 +1531,7 @@ $activeElementSelector: "[data-has-clicked='true']";
1410
1531
  align-items: center;
1411
1532
  cursor: pointer;
1412
1533
  gap: 10px;
1413
- color: var(--_gray-700);
1534
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
1414
1535
  font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
1415
1536
  font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
1416
1537
  font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
@@ -1459,21 +1580,9 @@ $activeElementSelector: "[data-has-clicked='true']";
1459
1580
  display: flex;
1460
1581
  align-items: center;
1461
1582
  gap: 6px;
1462
- background-color: var(--_gray-100);
1463
- border-color: var(--_ctm-dn-pt-os-dn-ne-dn-br-cr);
1464
- border-style: var(--_ctm-dn-pt-os-dn-ne-dn-br-se);
1465
- border-width: var(--_ctm-dn-pt-os-dn-ne-dn-br-wh);
1466
- color: var(--_ctm-dn-pt-os-dn-ne-dn-cr);
1467
- font-family: var(--_ctm-dn-pt-os-dn-ne-dn-ft-fy);
1468
- font-size: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se);
1469
- font-style: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se-ic);
1470
- font-weight: var(--_ctm-dn-pt-os-dn-ne-dn-ft-wt);
1471
- line-height: var(--_ctm-dn-pt-os-dn-ne-dn-le-ht);
1472
- letter-spacing: var(--_ctm-dn-pt-os-dn-ne-dn-lr-sg);
1473
- box-shadow: var(--_ctm-dn-pt-os-dn-ne-dn-sw-ae) var(--_ctm-dn-pt-os-dn-ne-dn-sw-br)
1474
- var(--_ctm-dn-pt-os-dn-ne-dn-sw-sd) var(--_ctm-dn-pt-os-dn-ne-dn-sw-cr);
1475
- text-align: var(--_ctm-dn-pt-os-dn-ne-dn-tt-an);
1476
- text-decoration: var(--_ctm-dn-pt-os-dn-ne-dn-ue);
1583
+ padding: 8px 16px;
1584
+ background-color: var(--_warning-100);
1585
+ color: var(--_warning-700);
1477
1586
 
1478
1587
  .icon {
1479
1588
  svg {
@@ -1501,49 +1610,32 @@ $activeElementSelector: "[data-has-clicked='true']";
1501
1610
  .chk_shipping-summary {
1502
1611
  display: flex;
1503
1612
  flex-direction: column;
1504
- gap: 12px;
1613
+ gap: var(--_ctm-lt-sd-sg-as-le-gp);
1505
1614
 
1506
1615
  .chk_address {
1507
1616
  display: flex;
1508
1617
  flex-direction: column;
1509
- gap: 12px;
1618
+ gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
1510
1619
 
1511
1620
  .chk_saved_address_name {
1512
- color: var(--_gray-900);
1513
- font-family: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-fy);
1621
+ color: var(--_gray-700);
1514
1622
  font-size: 16px;
1515
- font-style: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se-ic);
1516
1623
  font-weight: 600;
1517
- line-height: 26px;
1518
1624
  }
1519
1625
 
1520
1626
  .chk_saved_address {
1521
- color: var--_gray-600;
1522
- font-size: 14px;
1523
- font-weight: 400;
1524
- line-height: 20px;
1627
+ color: var(--_gray-600);
1628
+ font-size: 12px;
1525
1629
  }
1526
1630
 
1527
1631
  .chk_saved_address_label {
1528
- color: var(--_gray-700);
1529
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-fy);
1530
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se);
1531
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se-ic);
1532
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-wt);
1533
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-le-ht);
1534
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-lr-sg);
1535
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ue);
1632
+ color: var(--_gray-500);
1633
+ font-size: 12px;
1536
1634
  }
1537
1635
 
1538
1636
  .chk_saved_address_value {
1539
1637
  color: var(--_gray-700);
1540
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-fy);
1541
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se);
1542
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se-ic);
1543
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-wt);
1544
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-le-ht);
1545
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-lr-sg);
1546
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ue);
1638
+ font-size: 12px;
1547
1639
  }
1548
1640
  }
1549
1641
 
@@ -1561,50 +1653,6 @@ $activeElementSelector: "[data-has-clicked='true']";
1561
1653
  &:has(.chk_saved_address_button.selected) {
1562
1654
  display: flex !important;
1563
1655
  }
1564
-
1565
- .chk_saved_address_button {
1566
- cursor: pointer;
1567
- align-self: flex-start;
1568
- white-space: nowrap;
1569
- display: flex;
1570
- gap: 4px;
1571
- align-items: flex-start;
1572
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
1573
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
1574
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
1575
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
1576
- color: rgba(36, 61, 198, 1);
1577
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
1578
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
1579
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
1580
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
1581
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
1582
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
1583
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
1584
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
1585
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
1586
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
1587
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
1588
- &:hover {
1589
- background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
1590
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
1591
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
1592
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
1593
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
1594
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
1595
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
1596
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
1597
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
1598
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
1599
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
1600
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
1601
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
1602
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
1603
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
1604
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
1605
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
1606
- }
1607
- }
1608
1656
  }
1609
1657
 
1610
1658
  &:hover {
@@ -1619,27 +1667,27 @@ $activeElementSelector: "[data-has-clicked='true']";
1619
1667
  }
1620
1668
  }
1621
1669
 
1622
- &[data-view-state="full"] {
1623
- width: auto;
1624
- margin: 0;
1625
- justify-self: stretch !important;
1626
- align-self: stretch !important;
1627
- cursor: auto;
1628
- &:is(#{$activeElementSelector}) {
1629
- & > div {
1630
- &[data-div-type="wrapper__layer"] {
1631
- --_sf-vt-zz: visible;
1632
- --_sf-op-zz: 1;
1633
- }
1634
- }
1635
- }
1636
- }
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
+ // }
1637
1685
  }
1638
1686
  }
1639
1687
 
1640
1688
  // credit card form syles
1641
1689
  .chk_cred_form_details {
1642
- border-top: 1px solid var(--_gray-300);
1690
+ border-top: 1px solid var(--_gray-100);
1643
1691
  padding: 16px;
1644
1692
  .chk_basic_form_title {
1645
1693
  font-size: 14px;
@@ -1679,6 +1727,10 @@ $activeElementSelector: "[data-has-clicked='true']";
1679
1727
  color: var(--_gray-400);
1680
1728
  padding-left: 16px;
1681
1729
  }
1730
+ &:focus {
1731
+ border: 1px solid var(--_primary-300);
1732
+ outline: 2px solid var(--_primary-100);
1733
+ }
1682
1734
  }
1683
1735
  .error_msg {
1684
1736
  display: block;
@@ -1772,6 +1824,14 @@ $activeElementSelector: "[data-has-clicked='true']";
1772
1824
  border-radius: 6px;
1773
1825
  height: 40px;
1774
1826
  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);
1834
+ }
1775
1835
  }
1776
1836
  &.pin {
1777
1837
  width: 110px;
@@ -1813,3 +1873,106 @@ $activeElementSelector: "[data-has-clicked='true']";
1813
1873
  }
1814
1874
  }
1815
1875
  }
1876
+
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 {
1904
+ 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;
1914
+ }
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
+ }
1932
+ }
1933
+ }
1934
+ }
1935
+ }
1936
+ }
1937
+
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
+ }
1946
+
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);
1977
+ }
1978
+ }