@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
@@ -161,48 +161,6 @@ $dark-color: #343a40;
161
161
  line-height: 20px;
162
162
  color: var(--_gray-600);
163
163
  }
164
-
165
- .btn_secondary {
166
- padding: 12px 24px;
167
- width: fit-content;
168
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
169
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
170
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
171
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
172
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
173
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
174
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
175
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
176
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
177
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
178
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
179
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
180
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
181
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
182
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
183
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
184
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
185
-
186
- &:hover {
187
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
188
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
189
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
190
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
191
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
192
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
193
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
194
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
195
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
196
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
197
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
198
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
199
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
200
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
201
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
202
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
203
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
204
- }
205
- }
206
164
  }
207
165
  }
208
166
  }
@@ -216,16 +174,10 @@ $dark-color: #343a40;
216
174
  padding-bottom: 24px;
217
175
 
218
176
  .chk_checkout_title {
219
- color: var(--_ctm-dn-ct-hg-dn-cr);
220
- font-family: var(--_ctm-dn-ct-hg-dn-ft-fy);
221
- font-size: var(--_ctm-dn-ct-hg-dn-ft-se);
222
- font-style: var(--_ctm-dn-ct-hg-dn-ft-se-ic);
223
- font-weight: var(--_ctm-dn-ct-hg-dn-ft-wt);
224
- line-height: var(--_ctm-dn-ct-hg-dn-le-ht);
225
- letter-spacing: var(--_ctm-dn-ct-hg-dn-lr-sg);
226
- text-align: var(--_ctm-dn-ct-hg-dn-tt-an);
227
- width: 100%;
228
- text-decoration: var(--_ctm-dn-ct-hg-dn-ue);
177
+ color: var(--_gray-900);
178
+ font-size: 24px;
179
+ font-weight: 700;
180
+ line-height: 32px;
229
181
  }
230
182
 
231
183
  .accordion {
@@ -240,75 +192,30 @@ $dark-color: #343a40;
240
192
  justify-content: space-between;
241
193
  align-items: center;
242
194
  cursor: pointer;
243
- background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-bd-cr);
244
- border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-cr);
245
- border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-rs);
246
- border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-se);
247
- border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-wh);
248
- box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-ae)
249
- var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-br)
250
- var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-sd)
251
- var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-cr);
195
+ background-color: #f5f5f5;
196
+ border-color: #f5f5f5;
197
+ border-radius: 4px;
252
198
 
253
199
  .accordion-title {
254
200
  margin-right: 1rem;
255
201
  white-space: nowrap;
256
202
  display: flex;
257
203
  align-items: center;
258
- gap: var(--_ctm-lt-an-in-tt-gp);
259
- color: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-cr);
260
- font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-fy);
261
- font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-se);
262
- font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-se-ic);
263
- font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-wt);
264
- line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-le-ht);
265
- letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-lr-sg);
266
- text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ue);
204
+ gap: 12px;
205
+ font-size: 16px;
206
+ font-weight: 600;
207
+ line-height: 24px;
208
+
267
209
  span {
268
210
  display: flex;
269
211
  }
270
212
  }
271
213
  .edit-btn {
272
214
  cursor: pointer;
273
- padding: 0;
274
- background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-bd-cr);
275
- border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-cr);
276
- border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-rs);
277
- border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-se);
278
- border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-wh);
279
- color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-cr);
280
- font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-fy);
281
- font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-se);
282
- font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-se-ic);
283
- font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-wt);
284
- line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-le-ht);
285
- letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-lr-sg);
286
- box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-ae)
287
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-br)
288
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-sd)
289
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-cr);
290
- text-align: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-tt-an);
291
- text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ue);
215
+ color: var(--_primary-400);
292
216
 
293
217
  &:hover {
294
- background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-bd-cr);
295
- border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-cr);
296
- border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-rs);
297
- border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-se);
298
- border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-wh);
299
- color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-cr);
300
- font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-fy);
301
- font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-se);
302
- font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-se-ic);
303
- font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-wt);
304
- line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-le-ht);
305
- letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-lr-sg);
306
- box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-ae)
307
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-br)
308
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-sd)
309
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-cr);
310
- text-align: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-tt-an);
311
- text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ue);
218
+ color: var(--_primary-500);
312
219
  }
313
220
  }
314
221
  }
@@ -320,25 +227,12 @@ $dark-color: #343a40;
320
227
  display: flex;
321
228
  align-items: center;
322
229
  gap: 4px;
323
- color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
324
- font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
325
- font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
326
- font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
327
- font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
328
- line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
329
- letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
330
- text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
230
+ color: var(--_gray-500);
331
231
  }
332
232
 
333
233
  .chk_shipping_method_heading {
334
- color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
335
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
336
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
337
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
338
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
339
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
340
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
341
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
234
+ color: var(--_gray-500);
235
+ font-weight: 600;
342
236
  }
343
237
  }
344
238
 
@@ -349,47 +243,11 @@ $dark-color: #343a40;
349
243
 
350
244
  .chk_saved_address_button {
351
245
  cursor: pointer;
352
- align-self: flex-start;
353
- white-space: nowrap;
246
+ border-radius: 6px;
247
+ color: var(--_primary-400);
354
248
  display: flex;
249
+ align-items: center;
355
250
  gap: 4px;
356
- align-items: flex-start;
357
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
358
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
359
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
360
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
361
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
362
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
363
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
364
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
365
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
366
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
367
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
368
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
369
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
370
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
371
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
372
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
373
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
374
- &:hover {
375
- background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
376
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
377
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
378
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
379
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
380
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
381
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
382
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
383
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
384
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
385
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
386
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
387
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
388
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
389
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
390
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
391
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
392
- }
393
251
  }
394
252
 
395
253
  .shipping_address_container {
@@ -430,91 +288,27 @@ $dark-color: #343a40;
430
288
  .chk_shipping_address_input_wrapper {
431
289
  display: flex;
432
290
  flex-direction: column;
433
- gap: var(--_ctm-lt-ll-ad-it-gp);
291
+ gap: 16px;
434
292
  width: 100%;
435
293
  }
436
294
 
437
295
  .chk_shipping_address_form_label {
438
- white-space: nowrap;
439
- color: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-cr);
440
- font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
441
- font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
442
- font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
443
- font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
444
- line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
445
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
446
- text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
296
+ color: var(--_gray-600);
297
+ font-size: 14px;
447
298
  }
448
299
 
449
300
  .chk_shiping_address_form_input {
450
301
  padding: 8px 12px;
451
302
  width: -webkit-fill-available;
452
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
453
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
454
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
455
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
456
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
457
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
458
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
459
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
460
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
461
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
462
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
463
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
464
- box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-ae)
465
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-br)
466
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-sd)
467
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-cr);
468
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
469
-
470
- &:focus-within {
471
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
472
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
473
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
474
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
475
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
476
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
477
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
478
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
479
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
480
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
481
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
482
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
483
- box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-ae)
484
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-br)
485
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-sd)
486
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-cr);
487
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
488
- }
489
-
490
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
491
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
492
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
493
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
494
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
495
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
496
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
497
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
498
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
499
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
500
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
501
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
502
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
303
+ background-color: var(--_base-white);
304
+ color: var(--_gray-600);
305
+ border: 1px solid var(--_gray-300);
306
+ border-radius: 6px;
307
+ height: 40px;
503
308
 
504
309
  &:focus-within {
505
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
506
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
507
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
508
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
509
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
510
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
511
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
512
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
513
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
514
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
515
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
516
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
517
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
310
+ border: 1px solid var(--_primary-300);
311
+ outline: 2px solid var(--_primary-100);
518
312
  }
519
313
  }
520
314
 
@@ -540,60 +334,12 @@ $dark-color: #343a40;
540
334
  gap: 8px;
541
335
  }
542
336
 
543
- .chk_shipping_address_submit_btn {
544
- padding: 12px 24px;
545
- width: fit-content;
546
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
547
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
548
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
549
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
550
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
551
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
552
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
553
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
554
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
555
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
556
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
557
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
558
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
559
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
560
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
561
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
562
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
563
-
564
- &:hover {
565
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
566
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
567
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
568
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
569
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
570
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
571
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
572
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
573
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
574
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
575
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
576
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
577
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
578
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
579
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
580
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
581
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
582
- }
583
- }
584
-
585
337
  .chk_shipping_address_use_as_billing_address_chkbx {
586
338
  display: flex;
587
339
  align-items: center;
588
340
  gap: 0.5rem;
589
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
590
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
591
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
592
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
593
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
594
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
595
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
596
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
341
+ color: var(--_gray-600);
342
+ font-size: 14px;
597
343
 
598
344
  .custom-checkbox {
599
345
  width: 20px;
@@ -676,25 +422,16 @@ $dark-color: #343a40;
676
422
  gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);
677
423
 
678
424
  .chk_multi_address_product_name {
679
- color: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-cr);
680
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-fy);
681
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se);
682
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se-ic);
683
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-wt);
684
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-le-ht);
685
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-lr-sg);
686
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ue);
425
+ color: var(--_gray-900);
426
+ font-size: 18px;
427
+ font-weight: 700;
428
+ line-height: 28px;
687
429
  }
688
430
 
689
431
  .chk_multi_address_product_info {
690
- color: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-cr);
691
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
692
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
693
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
694
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
695
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
696
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
697
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
432
+ color: var(--_gray-600);
433
+ font-size: 14px;
434
+ list-style: 20px;
698
435
  }
699
436
  }
700
437
 
@@ -709,14 +446,9 @@ $dark-color: #343a40;
709
446
  }
710
447
 
711
448
  .chk_multi_address_product_price {
712
- color: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-cr);
713
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-fy);
714
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se);
715
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se-ic);
716
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
717
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
718
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-lr-sg);
719
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ue);
449
+ color: var(--_gray-900);
450
+ font-size: 20px;
451
+ font-weight: 700;
720
452
  }
721
453
  }
722
454
 
@@ -727,25 +459,15 @@ $dark-color: #343a40;
727
459
  gap: 4px;
728
460
 
729
461
  .chk_multi_address_product_info {
730
- color: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-cr);
731
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
732
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
733
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
734
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
735
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
736
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
737
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
462
+ color: var(--_gray-600);
463
+ font-size: 12px;
464
+ line-height: 18px;
738
465
  }
739
466
 
740
467
  .chk_multi_address_product_qty {
741
- color: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-cr);
742
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-fy);
743
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se);
744
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se-ic);
745
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-wt);
746
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-le-ht);
747
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-lr-sg);
748
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ue);
468
+ color: var(--_gray-900);
469
+ font-size: 12px;
470
+ font-weight: 700;
749
471
  }
750
472
  }
751
473
 
@@ -771,14 +493,8 @@ $dark-color: #343a40;
771
493
  }
772
494
 
773
495
  .chk_multi_address_product_label {
774
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-cr);
775
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-fy);
776
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se);
777
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se-ic);
778
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-wt);
779
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-le-ht);
780
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-lr-sg);
781
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ue);
496
+ color: var(--_gray-600);
497
+ font-size: 12px;
782
498
  }
783
499
  }
784
500
 
@@ -802,43 +518,14 @@ $dark-color: #343a40;
802
518
  .chk_shiping_address_form_input {
803
519
  padding: 8px 12px;
804
520
  width: -webkit-fill-available;
805
- position: relative;
806
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-bd-cr);
807
- border-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-cr);
808
- border-radius: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-rs);
809
- border-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-se);
810
- border-width: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-wh);
811
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-cr);
812
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-fy);
813
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se);
814
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se-ic);
815
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-wt);
816
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-le-ht);
817
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-lr-sg);
818
- box-shadow: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-ae)
819
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-br)
820
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-sd)
821
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-cr);
822
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ue);
521
+ border: 1px solid var(--_gray-300);
522
+ border-radius: 6px;
523
+ height: 40px;
524
+ background-color: var(--_base-white);
823
525
 
824
526
  &:focus-within {
825
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
826
- border-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-cr);
827
- border-radius: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-rs);
828
- border-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-se);
829
- border-width: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-wh);
830
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
831
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
832
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
833
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
834
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
835
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
836
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
837
- box-shadow: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-ae)
838
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-br)
839
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-sd)
840
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-cr);
841
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
527
+ border: 1px solid var(--_primary-300);
528
+ outline: 2px solid var(--_primary-100);
842
529
  }
843
530
 
844
531
  .custom-arrows {
@@ -857,29 +544,19 @@ $dark-color: #343a40;
857
544
  }
858
545
  }
859
546
 
860
- .input-field {
861
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-bd-cr);
862
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-cr);
863
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-fy);
864
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se);
865
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se-ic);
866
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-wt);
867
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-le-ht);
868
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-lr-sg);
869
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ue);
547
+ // .input-field {
548
+ // padding: 8px 12px;
549
+ // width: -webkit-fill-available;
550
+ // border: 1px solid var(--_gray-300);
551
+ // border-radius: 6px;
552
+ // height: 40px;
553
+ // background-color: var(--_base-white);
870
554
 
871
- &:focus-within {
872
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
873
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
874
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
875
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
876
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
877
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
878
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
879
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
880
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
881
- }
882
- }
555
+ // &:focus-within {
556
+ // border: 1px solid var(--_primary-300);
557
+ // outline: 2px solid var(--_primary-100);
558
+ // }
559
+ // }
883
560
  }
884
561
  }
885
562
 
@@ -905,14 +582,9 @@ $dark-color: #343a40;
905
582
  gap: 4px;
906
583
 
907
584
  .chk_shipping_method_heading {
908
- color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
909
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
910
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
911
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
912
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
913
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
914
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
915
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
585
+ color: var(--_gray-700);
586
+ font-weight: 700;
587
+ font-size: 16px;
916
588
  }
917
589
  }
918
590
 
@@ -997,14 +669,14 @@ $dark-color: #343a40;
997
669
  transition: all 0.2s;
998
670
  }
999
671
  input[type="radio"]:checked + .radio-style {
1000
- background-color: #fff;
1001
- border: 5px solid #1a3dcc;
672
+ background-color: var(--_base-white);
673
+ border: 5px solid var(--_primary-400);
1002
674
  }
1003
675
  }
1004
676
 
1005
677
  &.selected {
1006
- background-color: #f0f5ff;
1007
- border-color: #2563eb;
678
+ background-color: var(--_base-white);
679
+ border-color: var(--_primary-400);
1008
680
  }
1009
681
  }
1010
682
 
@@ -1025,104 +697,411 @@ $dark-color: #343a40;
1025
697
  display: flex;
1026
698
  flex-direction: column;
1027
699
  gap: var(--_ctm-lt-pt-os-gp-bn-cs);
700
+ .gift_crd_chk_payment_option {
701
+ border: 1px solid var(--_gray-300);
702
+ border-radius: 4px;
703
+ }
1028
704
  .payment_program {
1029
- padding: 0 12px;
1030
- .payment_program_label {
705
+ // padding: 0 12px;
706
+ .payment_program_header {
1031
707
  display: flex;
708
+ justify-content: space-between;
1032
709
  gap: 8px;
1033
710
  align-items: center;
1034
- background: #f5f5f5;
1035
- padding: 12px;
1036
- }
1037
- }
1038
711
 
1039
- .chk_primary_btn_link {
1040
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-bd-cr);
1041
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-cr);
1042
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-rs);
1043
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-se);
1044
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-wh);
1045
- color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-cr);
1046
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-fy);
1047
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se);
1048
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se-ic);
1049
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-wt);
1050
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-le-ht);
1051
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-lr-sg);
1052
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-ae)
1053
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-br)
1054
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
1055
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
1056
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
1057
- text-align: left;
712
+ margin-bottom: 16px;
1058
713
 
1059
- &:hover {
1060
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
1061
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-cr);
1062
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-rs);
1063
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-se);
1064
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-wh);
1065
- color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-cr);
1066
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-fy);
1067
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se);
1068
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se-ic);
1069
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-wt);
1070
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-le-ht);
1071
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-lr-sg);
1072
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-ae)
1073
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-br)
1074
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-sd)
1075
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-cr);
1076
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ue);
714
+ &_label {
715
+ display: flex;
716
+ justify-content: space-between;
717
+ align-items: center;
718
+ &_title {
719
+ font-size: 14px;
720
+ font-weight: 600;
721
+ color: var(--_gray-600);
722
+ }
723
+ &_pds {
724
+ &_label {
725
+ font-size: 14px;
726
+ color: var(--_gray-600);
727
+ }
728
+ &_value {
729
+ font-size: 14px;
730
+ color: var(--_gray-900);
731
+ }
732
+ }
733
+ }
1077
734
  }
1078
735
  }
1079
736
 
1080
737
  .chk_payment_option_wrapper {
1081
738
  display: flex;
1082
739
  flex-direction: column;
1083
- gap: var(--_ctm-lt-pt-os-gp-bn-cs);
1084
- border: 1px solid #bf4949;
740
+ border: 1px solid var(--_gray-300);
1085
741
  margin-bottom: 12px;
1086
- .ppg_paymentMethodGroups {
742
+ border-radius: 4px;
743
+ overflow: hidden;
744
+
745
+ .pp_pmnt_method_groups {
1087
746
  .pp_ppm_section {
1088
747
  background: #f5f5f5;
1089
- padding: 4px;
748
+ padding: 12px 16px;
1090
749
  font-size: 12px;
1091
750
  display: flex;
751
+ justify-content: space-between;
1092
752
  gap: 8px;
753
+ .pp_ppm_section_label {
754
+ font-size: 14px;
755
+ font-weight: 700;
756
+ color: var(--_gray-900);
757
+ }
758
+ .pp_ppm_section_value {
759
+ font-size: 14px;
760
+ font-weight: 700;
761
+ color: var(--_gray-600);
762
+ .pp_ppm_section_value_lable {
763
+ font-weight: 500;
764
+ color: var(--_gray-500);
765
+ }
766
+ }
1093
767
  }
1094
768
  .payment_methods {
1095
769
  // padding: 12px;
1096
770
  display: grid;
1097
771
  gap: 8px;
772
+ .chk_payment_option {
773
+ .chk_payment_section_wrapper {
774
+ width: 100%;
775
+ display: flex;
776
+ justify-content: space-between;
777
+ padding: 16px;
778
+ &:hover {
779
+ background-color: var(--_gray-50);
780
+ }
781
+ .chk_payment_section {
782
+ display: flex;
783
+ justify-content: space-between;
784
+ align-items: center;
785
+ width: 100%;
786
+ .chk_payment_section_col_left {
787
+ display: flex;
788
+ gap: 12px;
789
+ .chk_payment_section_method {
790
+ display: flex;
791
+ flex-direction: column;
792
+ .chk_payment_section_method_name {
793
+ font-size: 14px;
794
+ font-weight: 700;
795
+ line-height: 20px;
796
+ color: var(--_gray-700);
797
+ }
798
+ & > div {
799
+ display: flex;
800
+ .label {
801
+ font-size: 12px;
802
+ color: var(--_gray-500);
803
+ }
804
+ .price {
805
+ font-size: 12px;
806
+ color: var(--_gray-900);
807
+ }
808
+ }
809
+ }
810
+ }
811
+ &_col_right {
812
+ .chk_currency_inp {
813
+ height: 44px;
814
+ border: 1px solid var(--_gray-200);
815
+ border-radius: 4px;
816
+ background-color: var(--_base-white);
817
+ display: flex;
818
+ width: 120px;
819
+ overflow: hidden;
820
+ align-items: center;
821
+ padding-inline: 12px;
822
+ gap: 12px;
823
+ &:focus-within {
824
+ border: 1px solid var(--_primary-200);
825
+ outline: 2px solid var(--_primary-50);
826
+ }
827
+ input {
828
+ height: inherit;
829
+ }
830
+ }
831
+ }
832
+ }
833
+
834
+ .chk_payment_options_heading {
835
+ color: var(--_gray-900);
836
+ font-size: 16px;
837
+ font-weight: 700;
838
+ }
839
+
840
+ // gift card styles
841
+ .chk_gft_crd_wrapper {
842
+ display: flex;
843
+ justify-content: space-between;
844
+ align-items: center;
845
+ padding: 16px 16px 0 16px;
846
+ &_item {
847
+ display: flex;
848
+ align-items: center;
849
+ gap: 16px;
850
+ &_icon {
851
+ width: 40px;
852
+ height: 40px;
853
+ border: 1px solid var(--_gray-200);
854
+ border-radius: 6px;
855
+ display: flex;
856
+ justify-content: center;
857
+ align-items: center;
858
+ }
859
+ &_info {
860
+ display: flex;
861
+ flex-direction: column;
862
+ &_title {
863
+ font-size: 14px;
864
+ margin-bottom: 4px;
865
+ font-weight: 600;
866
+ }
867
+ &_desc {
868
+ display: flex;
869
+ &_value {
870
+ font-size: 12px;
871
+ color: var(--_gray-600);
872
+ }
873
+ &_label {
874
+ font-size: 12px;
875
+ color: var(--_gray-900);
876
+ }
877
+ }
878
+ }
879
+ &_pin {
880
+ margin-left: 36px;
881
+ input[type="number"] {
882
+ border: 1px solid var(--_gray-300);
883
+ border-radius: 4px;
884
+ background-color: var(--_base-white);
885
+ width: 95px;
886
+ height: 44px;
887
+ padding-inline: 10px;
888
+ &:focus {
889
+ outline: 2px solid var(--_primary-100);
890
+ border: 1px solid var(--_primary-300);
891
+ }
892
+ }
893
+ }
894
+ }
895
+
896
+ &_input {
897
+ border: 1px solid var(--_gray-300);
898
+ border-radius: 4px;
899
+ background-color: var(--_base-white);
900
+ height: 44px;
901
+ width: 100px;
902
+ display: flex;
903
+ align-items: center;
904
+ gap: 8px;
905
+ padding-left: 10px;
906
+ input[type="number"] {
907
+ background-color: var(--_base-white);
908
+ padding-right: 10px;
909
+ }
910
+ &:focus-within {
911
+ outline: 2px solid var(--_primary-100);
912
+ border: 1px solid var(--_primary-300);
913
+ }
914
+ }
915
+ }
916
+ .chk_gft_crd_wrapper {
917
+ &_btn {
918
+ text-align: left;
919
+ margin-bottom: 16px;
920
+ color: var(--_primary-400);
921
+ &:hover {
922
+ text-decoration: underline;
923
+ }
924
+ }
925
+ }
926
+
927
+ // payment other options styles
928
+ .chk_pmnt_other_options {
929
+ display: flex;
930
+ justify-content: space-between;
931
+ gap: 80px;
932
+ padding: 16px;
933
+ .chk_pmnt_other_options_left_container {
934
+ display: flex;
935
+ gap: 12px;
936
+ .chk_pmnt_option_info_wrapper {
937
+ display: flex;
938
+ gap: 12px;
939
+ .cards {
940
+ display: flex;
941
+ flex-direction: column;
942
+ gap: 8px;
943
+ .chk_payment_options_name {
944
+ font-weight: 600;
945
+ }
946
+ span {
947
+ font-size: 12px;
948
+ .chk_payment_options_label {
949
+ color: var(--_gray-600);
950
+ }
951
+ .chk_payment_options_value {
952
+ color: var(--_gray-900);
953
+ }
954
+ }
955
+ }
956
+ }
957
+ }
958
+ .chk_pmnt_other_options_container {
959
+ padding: 16px;
960
+ }
961
+ }
962
+
963
+ &__other_option_wrapper {
964
+ display: flex;
965
+ width: 100%;
966
+ justify-content: space-between;
967
+ padding: 16px;
968
+
969
+ @media (max-width: 500px) {
970
+ flex-direction: column;
971
+ }
972
+ }
973
+
974
+ &_left_container {
975
+ display: flex;
976
+ gap: 12px;
977
+ align-items: flex-start;
978
+ .chk_payment_option__info_wrapper {
979
+ display: flex;
980
+ gap: 0px;
981
+ }
982
+
983
+ @media (max-width: 500px) {
984
+ flex-wrap: wrap;
985
+ }
986
+ }
987
+
988
+ &__left_wrapper {
989
+ display: flex;
990
+ flex-direction: column;
991
+ align-items: flex-start;
992
+ gap: 16px;
993
+ }
994
+
995
+ &__card_icon {
996
+ width: 60px;
997
+ height: 40px;
998
+ }
999
+
1000
+ &__info_wrapper {
1001
+ display: flex;
1002
+ flex-direction: column;
1003
+
1004
+ .chk_payment_options_name {
1005
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1006
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1007
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1008
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1009
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1010
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1011
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1012
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1013
+ }
1014
+
1015
+ .chk_payment_options_label {
1016
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1017
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1018
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1019
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1020
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1021
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1022
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1023
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1024
+ }
1025
+
1026
+ .chk_payment_options_value {
1027
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1028
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1029
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1030
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1031
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1032
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1033
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1034
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1035
+ }
1036
+ }
1037
+
1038
+ &_right_container {
1039
+ display: flex;
1040
+ gap: 6px;
1041
+ align-items: flex-start;
1042
+
1043
+ @media (max-width: 500px) {
1044
+ justify-content: flex-end;
1045
+ }
1046
+ }
1047
+
1048
+ &_input {
1049
+ display: flex;
1050
+ padding: 9px 12px;
1051
+ align-items: center;
1052
+ max-width: 96px;
1053
+ background-color: var(--_base-white);
1054
+ border: 1px solid var(--_gray-300);
1055
+ border-radius: 6px;
1056
+ color: var(--_gray-700);
1057
+
1058
+ &:focus-within {
1059
+ border: 1px solid var(--_primary-300);
1060
+ outline: 2px solid var(--_primary-100);
1061
+ }
1062
+
1063
+ .icon {
1064
+ svg {
1065
+ path {
1066
+ stroke: var(--_primary-400);
1067
+ }
1068
+ }
1069
+ }
1070
+
1071
+ .input_field {
1072
+ background-color: var(--_base-white);
1073
+ border: 1px solid var(--_gray-300);
1074
+ border-radius: 6px;
1075
+ color: var(--_gray-700);
1076
+
1077
+ &:focus-within {
1078
+ border: 1px solid var(--_primary-300);
1079
+ outline: 2px solid var(--_primary-100);
1080
+ }
1081
+ }
1082
+ }
1083
+ }
1084
+ }
1098
1085
  }
1099
1086
  }
1100
1087
  }
1101
1088
 
1102
- .chk_payment_option {
1089
+ .chk_gft_crd_container {
1103
1090
  width: 100%;
1104
1091
  display: flex;
1105
1092
  flex-direction: column;
1106
1093
  gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1107
1094
  background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1108
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-cr);
1109
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-rs);
1110
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-se);
1111
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-wh);
1112
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1113
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1114
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1115
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1095
+ border: 1px solid var(--_gray-300);
1096
+ border-radius: 4px;
1097
+ overflow: hidden;
1116
1098
 
1117
- .chk_payment_options_heading {
1118
- color: var(--_ctm-dn-pt-os-dn-pt-hg-dn-cr);
1119
- font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
1120
- font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
1121
- font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
1122
- font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
1123
- line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1124
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1125
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1099
+ .chk_gft_crd_option_heading {
1100
+ display: flex;
1101
+ justify-content: space-between;
1102
+ align-items: center;
1103
+ padding: 8px 12px;
1104
+ border-bottom: 1px solid var(--_gray-300);
1126
1105
  }
1127
1106
 
1128
1107
  // gift card styles
@@ -1186,7 +1165,7 @@ $dark-color: #343a40;
1186
1165
  border-radius: 4px;
1187
1166
  background-color: var(--_base-white);
1188
1167
  height: 44px;
1189
- width: 100px;
1168
+ width: 120px;
1190
1169
  display: flex;
1191
1170
  align-items: center;
1192
1171
  gap: 8px;
@@ -1261,7 +1240,7 @@ $dark-color: #343a40;
1261
1240
 
1262
1241
  &_left_container {
1263
1242
  display: flex;
1264
- gap: 80px;
1243
+ gap: 12px;
1265
1244
  align-items: flex-start;
1266
1245
  & > div {
1267
1246
  display: flex;
@@ -1285,59 +1264,14 @@ $dark-color: #343a40;
1285
1264
  height: 40px;
1286
1265
  }
1287
1266
 
1288
- &__remove_card_btn {
1289
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-bd-cr);
1290
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-cr);
1291
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-rs);
1292
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-se);
1293
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-wh);
1294
- color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-cr);
1295
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-fy);
1296
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se);
1297
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se-ic);
1298
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-wt);
1299
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-le-ht);
1300
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-lr-sg);
1301
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-ae)
1302
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-br)
1303
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
1304
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
1305
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
1306
-
1307
- &:hover {
1308
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
1309
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-cr);
1310
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-rs);
1311
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-se);
1312
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-wh);
1313
- color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-cr);
1314
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-fy);
1315
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se);
1316
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se-ic);
1317
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-wt);
1318
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-le-ht);
1319
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-lr-sg);
1320
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-ae)
1321
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-br)
1322
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-sd)
1323
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-cr);
1324
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ue);
1325
- }
1326
- }
1327
-
1328
1267
  &__info_wrapper {
1329
1268
  display: flex;
1330
1269
  flex-direction: column;
1331
1270
 
1332
1271
  .chk_payment_options_name {
1333
- color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1334
- font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1335
- font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1336
- font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1337
- font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1338
- line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1339
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1340
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1272
+ color: var(--_gray-900);
1273
+ font-size: 16px;
1274
+ font-weight: 600;
1341
1275
  }
1342
1276
 
1343
1277
  .chk_payment_options_label {
@@ -1375,74 +1309,35 @@ $dark-color: #343a40;
1375
1309
 
1376
1310
  &_input {
1377
1311
  display: flex;
1378
- padding: 9px 12px;
1379
- align-items: center;
1380
- max-width: 96px;
1381
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-bd-cr);
1382
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-cr);
1383
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-rs);
1384
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-se);
1385
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-wh);
1386
- color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-cr);
1387
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1388
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1389
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1390
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1391
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1392
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1393
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-ae)
1394
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-br)
1395
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-sd)
1396
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-cr);
1397
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
1312
+ padding: 8px 12px;
1313
+ width: -webkit-fill-available;
1314
+ background-color: var(--_base-white);
1315
+ border-radius: 6px;
1316
+ border: 1px solid var(--_gray-300);
1398
1317
 
1399
1318
  &:focus-within {
1400
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-bd-cr);
1401
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-cr);
1402
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-rs);
1403
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-se);
1404
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-wh);
1405
- color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-cr);
1406
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1407
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1408
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1409
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1410
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1411
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1412
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-ae)
1413
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-br)
1414
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-sd)
1415
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-cr);
1416
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1319
+ border: 1px solid var(--_primary-300);
1320
+ outline: 2px solid var(--_primary-100);
1417
1321
  }
1418
1322
 
1419
1323
  .icon {
1420
1324
  svg {
1421
1325
  path {
1422
- stroke: #667085;
1326
+ stroke: var(--_primary-400);
1423
1327
  }
1424
1328
  }
1425
1329
  }
1426
1330
 
1427
1331
  .input_field {
1428
- color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-cr);
1429
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1430
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1431
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1432
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1433
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1434
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1435
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
1332
+ padding: 8px 12px;
1333
+ width: -webkit-fill-available;
1334
+ background-color: var(--_base-white);
1335
+ border-radius: 6px;
1336
+ border: 1px solid var(--_gray-300);
1436
1337
 
1437
1338
  &:focus-within {
1438
- color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-cr);
1439
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1440
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1441
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1442
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1443
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1444
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1445
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1339
+ border: 1px solid var(--_primary-300);
1340
+ outline: 2px solid var(--_primary-100);
1446
1341
  }
1447
1342
  }
1448
1343
  }
@@ -1467,14 +1362,9 @@ $dark-color: #343a40;
1467
1362
  }
1468
1363
 
1469
1364
  .chk_payment_options_heading {
1470
- color: var(--_ctm-dn-pt-os-dn-pt-hg-dn-cr);
1471
- font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
1472
- font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
1473
- font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
1474
- font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
1475
- line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1476
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1477
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1365
+ font-size: 18px;
1366
+ color: var(--_gray-900);
1367
+ font-weight: 600;
1478
1368
  &.pl_0 {
1479
1369
  padding-left: 0px;
1480
1370
  }
@@ -1541,79 +1431,32 @@ $dark-color: #343a40;
1541
1431
  }
1542
1432
 
1543
1433
  .chk_shipping_address_form_label {
1544
- white-space: nowrap;
1545
- color: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-cr);
1546
- font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
1547
- font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
1548
- font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
1549
- font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
1550
- line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
1551
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
1552
- text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
1434
+ color: var(--_gray-600);
1435
+ font-size: 14px;
1553
1436
  }
1554
1437
 
1555
1438
  .chk_shiping_address_form_input {
1556
1439
  padding: 8px 12px;
1557
1440
  width: -webkit-fill-available;
1558
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
1559
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
1560
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
1561
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
1562
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
1563
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
1564
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
1565
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
1566
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
1567
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
1568
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
1569
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
1570
- box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-ae)
1571
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-br)
1572
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-sd)
1573
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-cr);
1574
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
1441
+ background-color: var(--_base-white);
1442
+ border-radius: 6px;
1443
+ border: 1px solid var(--_gray-300);
1575
1444
 
1576
1445
  &:focus-within {
1577
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
1578
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
1579
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
1580
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
1581
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
1582
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
1583
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
1584
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
1585
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
1586
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
1587
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
1588
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
1589
- box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-ae)
1590
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-br)
1591
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-sd)
1592
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-cr);
1593
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
1446
+ border: 1px solid var(--_primary-300);
1447
+ outline: 2px solid var(--_primary-100);
1594
1448
  }
1595
1449
 
1596
1450
  .input-field {
1597
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
1598
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
1599
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
1600
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
1601
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
1602
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
1603
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
1604
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
1605
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
1451
+ padding: 8px 12px;
1452
+ width: -webkit-fill-available;
1453
+ background-color: var(--_base-white);
1454
+ border-radius: 6px;
1455
+ border: 1px solid var(--_gray-300);
1606
1456
 
1607
1457
  &:focus-within {
1608
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
1609
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
1610
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
1611
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
1612
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
1613
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
1614
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
1615
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
1616
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
1458
+ border: 1px solid var(--_primary-300);
1459
+ outline: 2px solid var(--_primary-100);
1617
1460
  }
1618
1461
  }
1619
1462
  }
@@ -1682,48 +1525,6 @@ $dark-color: #343a40;
1682
1525
  gap: 8px;
1683
1526
  }
1684
1527
 
1685
- .chk_shipping_address_submit_btn {
1686
- padding: 12px 24px;
1687
- width: fit-content;
1688
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
1689
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
1690
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
1691
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
1692
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
1693
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
1694
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
1695
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
1696
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
1697
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
1698
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
1699
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
1700
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
1701
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
1702
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
1703
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
1704
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
1705
-
1706
- &:hover {
1707
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
1708
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
1709
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
1710
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
1711
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
1712
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
1713
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
1714
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
1715
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
1716
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
1717
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
1718
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
1719
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
1720
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
1721
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
1722
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
1723
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
1724
- }
1725
- }
1726
-
1727
1528
  &_same_as_billing_address_chkbx {
1728
1529
  color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1729
1530
  font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
@@ -1744,53 +1545,10 @@ $dark-color: #343a40;
1744
1545
 
1745
1546
  .payment_heading {
1746
1547
  padding: 12px;
1747
- border-bottom-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-cr);
1748
- border-bottom-style: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-se);
1749
- border-bottom-width: thin;
1750
1548
  display: flex;
1751
1549
  justify-content: space-between;
1752
- }
1753
- }
1754
-
1755
- .chk_submit-btn {
1756
- padding: 12px 24px;
1757
- width: fit-content;
1758
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
1759
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
1760
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
1761
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
1762
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
1763
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
1764
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
1765
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
1766
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
1767
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
1768
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
1769
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
1770
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
1771
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
1772
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
1773
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
1774
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
1775
-
1776
- &:hover {
1777
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
1778
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
1779
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
1780
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
1781
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
1782
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
1783
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
1784
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
1785
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
1786
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
1787
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
1788
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
1789
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
1790
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
1791
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
1792
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
1793
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
1550
+ border-bottom: 1px solid var(--_gray-100);
1551
+ font-weight: 600;
1794
1552
  }
1795
1553
  }
1796
1554
 
@@ -1820,10 +1578,16 @@ $dark-color: #343a40;
1820
1578
  width: fit-content;
1821
1579
  align-items: center;
1822
1580
  font-family: sans-serif;
1581
+ gap: 12px;
1823
1582
 
1824
1583
  input[type="checkbox"] {
1825
1584
  display: none;
1826
1585
  }
1586
+ .payment_program_title {
1587
+ font-size: 14px;
1588
+ font-weight: 500;
1589
+ color: var(--_gray-900);
1590
+ }
1827
1591
 
1828
1592
  .chk_payment_options_use_as_billing_address_chkbx {
1829
1593
  display: flex;
@@ -1917,21 +1681,9 @@ $dark-color: #343a40;
1917
1681
  display: flex;
1918
1682
  align-items: center;
1919
1683
  gap: 6px;
1920
- background-color: var(--_ctm-dn-pt-os-dn-ne-dn-bd-cr);
1921
- border-color: var(--_ctm-dn-pt-os-dn-ne-dn-br-cr);
1922
- border-style: var(--_ctm-dn-pt-os-dn-ne-dn-br-se);
1923
- border-width: var(--_ctm-dn-pt-os-dn-ne-dn-br-wh);
1924
- color: var(--_ctm-dn-pt-os-dn-ne-dn-cr);
1925
- font-family: var(--_ctm-dn-pt-os-dn-ne-dn-ft-fy);
1926
- font-size: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se);
1927
- font-style: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se-ic);
1928
- font-weight: var(--_ctm-dn-pt-os-dn-ne-dn-ft-wt);
1929
- line-height: var(--_ctm-dn-pt-os-dn-ne-dn-le-ht);
1930
- letter-spacing: var(--_ctm-dn-pt-os-dn-ne-dn-lr-sg);
1931
- box-shadow: var(--_ctm-dn-pt-os-dn-ne-dn-sw-ae) var(--_ctm-dn-pt-os-dn-ne-dn-sw-br)
1932
- var(--_ctm-dn-pt-os-dn-ne-dn-sw-sd) var(--_ctm-dn-pt-os-dn-ne-dn-sw-cr);
1933
- text-align: var(--_ctm-dn-pt-os-dn-ne-dn-tt-an);
1934
- text-decoration: var(--_ctm-dn-pt-os-dn-ne-dn-ue);
1684
+ padding: 8px 16px;
1685
+ background-color: var(--_warning-100);
1686
+ color: var(--_warning-700);
1935
1687
 
1936
1688
  .icon {
1937
1689
  svg {
@@ -1967,47 +1719,24 @@ $dark-color: #343a40;
1967
1719
  gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
1968
1720
 
1969
1721
  .chk_saved_address_name {
1970
- color: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-cr);
1971
- font-family: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-fy);
1972
- font-size: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se);
1973
- font-style: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se-ic);
1974
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-wt);
1975
- line-height: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-le-ht);
1976
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-lr-sg);
1977
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ue);
1722
+ color: var(--_gray-700);
1723
+ font-size: 16px;
1724
+ font-weight: 600;
1978
1725
  }
1979
1726
 
1980
1727
  .chk_saved_address {
1981
- color: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-cr);
1982
- font-family: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-fy);
1983
- font-size: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-se);
1984
- font-style: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-se-ic);
1985
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-wt);
1986
- line-height: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-le-ht);
1987
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-lr-sg);
1988
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ue);
1728
+ color: var(--_gray-600);
1729
+ font-size: 12px;
1989
1730
  }
1990
1731
 
1991
1732
  .chk_saved_address_label {
1992
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-cr);
1993
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-fy);
1994
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se);
1995
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se-ic);
1996
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-wt);
1997
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-le-ht);
1998
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-lr-sg);
1999
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ue);
1733
+ color: var(--_gray-500);
1734
+ font-size: 12px;
2000
1735
  }
2001
1736
 
2002
1737
  .chk_saved_address_value {
2003
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-cr);
2004
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-fy);
2005
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se);
2006
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se-ic);
2007
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-wt);
2008
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-le-ht);
2009
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-lr-sg);
2010
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ue);
1738
+ color: var(--_gray-700);
1739
+ font-size: 12px;
2011
1740
  }
2012
1741
  }
2013
1742
 
@@ -2025,51 +1754,6 @@ $dark-color: #343a40;
2025
1754
  &:has(.chk_saved_address_button.selected) {
2026
1755
  display: flex !important;
2027
1756
  }
2028
-
2029
- .chk_saved_address_button {
2030
- cursor: pointer;
2031
- align-self: flex-start;
2032
- white-space: nowrap;
2033
- display: flex;
2034
- gap: 4px;
2035
- align-items: flex-start;
2036
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
2037
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
2038
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
2039
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
2040
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
2041
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
2042
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
2043
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
2044
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
2045
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
2046
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
2047
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
2048
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
2049
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
2050
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
2051
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
2052
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
2053
- &:hover {
2054
- background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
2055
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
2056
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
2057
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
2058
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
2059
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
2060
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
2061
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
2062
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
2063
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
2064
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
2065
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
2066
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
2067
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
2068
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
2069
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
2070
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
2071
- }
2072
- }
2073
1757
  }
2074
1758
 
2075
1759
  &:hover {
@@ -2088,7 +1772,7 @@ $dark-color: #343a40;
2088
1772
 
2089
1773
  // credit card form syles
2090
1774
  .chk_cred_form_details {
2091
- border-top: 1px solid var(--_gray-300);
1775
+ border-top: 1px solid var(--_gray-100);
2092
1776
  padding: 16px;
2093
1777
  .chk_basic_form_title {
2094
1778
  font-size: 14px;
@@ -2128,6 +1812,10 @@ $dark-color: #343a40;
2128
1812
  color: var(--_gray-400);
2129
1813
  padding-left: 16px;
2130
1814
  }
1815
+ &:focus {
1816
+ border: 1px solid var(--_primary-300);
1817
+ outline: 2px solid var(--_primary-100);
1818
+ }
2131
1819
  }
2132
1820
  .error_msg {
2133
1821
  display: block;
@@ -2221,6 +1909,14 @@ $dark-color: #343a40;
2221
1909
  border-radius: 6px;
2222
1910
  height: 40px;
2223
1911
  padding-inline: 10px;
1912
+ &:placeholder-shown {
1913
+ padding-left: 10px;
1914
+ color: var(--_gray-400);
1915
+ }
1916
+ &:focus {
1917
+ border: 1px solid var(--_primary-300);
1918
+ outline: 2px solid var(--_primary-100);
1919
+ }
2224
1920
  }
2225
1921
  &.pin {
2226
1922
  width: 110px;
@@ -2262,3 +1958,106 @@ $dark-color: #343a40;
2262
1958
  }
2263
1959
  }
2264
1960
  }
1961
+
1962
+ .chk_payment_cred_section {
1963
+ display: flex;
1964
+ justify-content: space-between;
1965
+ align-items: center;
1966
+ padding: 16px 16px 8px 16px;
1967
+
1968
+ .chk_currency_inp {
1969
+ height: 44px;
1970
+ border: 1px solid var(--_gray-200);
1971
+ border-radius: 4px;
1972
+ background-color: var(--_base-white);
1973
+ display: flex;
1974
+ width: 120px;
1975
+ overflow: hidden;
1976
+ align-items: center;
1977
+ padding-inline: 12px;
1978
+ gap: 12px;
1979
+ &:focus-within {
1980
+ border: 1px solid var(--_primary-200);
1981
+ outline: 2px solid var(--_primary-50);
1982
+ }
1983
+ input {
1984
+ height: inherit;
1985
+ }
1986
+ }
1987
+ .chk_payment_cred_section_col_left {
1988
+ .chk_payment_cred_section_col_left_crd_details {
1989
+ display: flex;
1990
+ gap: 80px;
1991
+ align-items: center;
1992
+ & > div {
1993
+ display: flex;
1994
+ gap: 12px;
1995
+ .card_icon {
1996
+ width: 60px;
1997
+ height: 40px;
1998
+ border-radius: 4px;
1999
+ }
2000
+ .card_details {
2001
+ .card_details_num {
2002
+ font-size: 12px;
2003
+ font-weight: 600;
2004
+ color: var(--_gray-900);
2005
+ }
2006
+ & > div {
2007
+ display: flex;
2008
+ .card_details_label {
2009
+ font-size: 12px;
2010
+ color: var(--_gray-500);
2011
+ }
2012
+ .card_details_value {
2013
+ font-size: 12px;
2014
+ color: var(--_gray-900);
2015
+ }
2016
+ }
2017
+ }
2018
+ }
2019
+ }
2020
+ }
2021
+ }
2022
+
2023
+ .chk_payment_remove_card {
2024
+ padding-inline: 16px;
2025
+ margin-bottom: 16px;
2026
+ .error_msg {
2027
+ font-size: 12px;
2028
+ color: var(--_error-700);
2029
+ }
2030
+ }
2031
+
2032
+ .tertiary_primary_btn {
2033
+ font-size: 12px;
2034
+ color: var(--_primary-400);
2035
+ display: inline-flex;
2036
+ &:hover {
2037
+ color: var(--_primary-500);
2038
+ text-decoration: underline;
2039
+ }
2040
+ }
2041
+ .chk_primary_bnt {
2042
+ padding: 12px 24px;
2043
+ background-color: var(--_primary-400);
2044
+ color: var(--_base-white);
2045
+ font-weight: 600;
2046
+ border-radius: 6px;
2047
+ width: max-content;
2048
+ &:hover {
2049
+ background-color: var(--_primary-500);
2050
+ }
2051
+ }
2052
+ .chk_secondary_bnt {
2053
+ padding: 12px 24px;
2054
+ background-color: transparent;
2055
+ color: var(--_gray-600);
2056
+ font-weight: 600;
2057
+ border-radius: 6px;
2058
+
2059
+ &:hover {
2060
+ background-color: var(--_gray-50);
2061
+ color: var(--_gray-900);
2062
+ }
2063
+ }