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

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 (11) hide show
  1. package/dist/add-products-tab.scss +49 -16
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +1 -1
  4. package/dist/buyForHeaders.scss +2 -1
  5. package/dist/checkout.scss +616 -821
  6. package/dist/employee-bulk-order.scss +295 -126
  7. package/dist/icons.js +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/shipping-payments.scss +649 -490
  10. package/dist/types/icons/cms-svg-icons.d.ts +1 -1
  11. package/package.json +1 -1
package/dist/checkout.scss CHANGED
@@ -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
 
@@ -1026,103 +698,406 @@ $dark-color: #343a40;
1026
698
  flex-direction: column;
1027
699
  gap: var(--_ctm-lt-pt-os-gp-bn-cs);
1028
700
  .payment_program {
1029
- padding: 0 12px;
1030
- .payment_program_label {
701
+ // padding: 0 12px;
702
+ .payment_program_header {
1031
703
  display: flex;
704
+ justify-content: space-between;
1032
705
  gap: 8px;
1033
706
  align-items: center;
1034
- background: #f5f5f5;
1035
- padding: 12px;
1036
- }
1037
- }
1038
707
 
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;
708
+ margin-bottom: 16px;
1058
709
 
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);
710
+ &_label {
711
+ display: flex;
712
+ justify-content: space-between;
713
+ align-items: center;
714
+ &_title {
715
+ font-size: 14px;
716
+ font-weight: 600;
717
+ color: var(--_gray-600);
718
+ }
719
+ &_pds {
720
+ &_label {
721
+ font-size: 14px;
722
+ color: var(--_gray-600);
723
+ }
724
+ &_value {
725
+ font-size: 14px;
726
+ color: var(--_gray-900);
727
+ }
728
+ }
729
+ }
1077
730
  }
1078
731
  }
1079
732
 
1080
733
  .chk_payment_option_wrapper {
1081
734
  display: flex;
1082
735
  flex-direction: column;
1083
- gap: var(--_ctm-lt-pt-os-gp-bn-cs);
1084
- border: 1px solid #bf4949;
736
+ border: 1px solid var(--_gray-300);
1085
737
  margin-bottom: 12px;
1086
- .ppg_paymentMethodGroups {
738
+ border-radius: 4px;
739
+ overflow: hidden;
740
+
741
+ .pp_pmnt_method_groups {
1087
742
  .pp_ppm_section {
1088
743
  background: #f5f5f5;
1089
- padding: 4px;
744
+ padding: 12px 16px;
1090
745
  font-size: 12px;
1091
746
  display: flex;
747
+ justify-content: space-between;
1092
748
  gap: 8px;
749
+ .pp_ppm_section_label {
750
+ font-size: 14px;
751
+ font-weight: 700;
752
+ color: var(--_gray-900);
753
+ }
754
+ .pp_ppm_section_value {
755
+ font-size: 14px;
756
+ font-weight: 700;
757
+ color: var(--_gray-600);
758
+ .pp_ppm_section_value_lable {
759
+ font-weight: 500;
760
+ color: var(--_gray-500);
761
+ }
762
+ }
1093
763
  }
1094
764
  .payment_methods {
1095
765
  // padding: 12px;
1096
766
  display: grid;
1097
767
  gap: 8px;
768
+ .chk_payment_option {
769
+ .chk_payment_section_wrapper {
770
+ width: 100%;
771
+ display: flex;
772
+ justify-content: space-between;
773
+ padding: 16px;
774
+ &:hover {
775
+ background-color: var(--_gray-50);
776
+ }
777
+ .chk_payment_section {
778
+ display: flex;
779
+ justify-content: space-between;
780
+ align-items: center;
781
+ width: 100%;
782
+ .chk_payment_section_col_left {
783
+ display: flex;
784
+ gap: 12px;
785
+ .chk_payment_section_method {
786
+ display: flex;
787
+ flex-direction: column;
788
+ .chk_payment_section_method_name {
789
+ font-size: 14px;
790
+ font-weight: 700;
791
+ line-height: 20px;
792
+ color: var(--_gray-700);
793
+ }
794
+ & > div {
795
+ display: flex;
796
+ .label {
797
+ font-size: 12px;
798
+ color: var(--_gray-500);
799
+ }
800
+ .price {
801
+ font-size: 12px;
802
+ color: var(--_gray-900);
803
+ }
804
+ }
805
+ }
806
+ }
807
+ &_col_right {
808
+ .chk_currency_inp {
809
+ height: 44px;
810
+ border: 1px solid var(--_gray-200);
811
+ border-radius: 4px;
812
+ background-color: var(--_base-white);
813
+ display: flex;
814
+ width: 120px;
815
+ overflow: hidden;
816
+ align-items: center;
817
+ padding-inline: 12px;
818
+ gap: 12px;
819
+ &:focus-within {
820
+ border: 1px solid var(--_primary-200);
821
+ outline: 2px solid var(--_primary-50);
822
+ }
823
+ input {
824
+ height: inherit;
825
+ }
826
+ }
827
+ }
828
+ }
829
+
830
+ .chk_payment_options_heading {
831
+ color: var(--_gray-900);
832
+ font-size: 16px;
833
+ font-weight: 700;
834
+ }
835
+
836
+ // gift card styles
837
+ .chk_gft_crd_wrapper {
838
+ display: flex;
839
+ justify-content: space-between;
840
+ align-items: center;
841
+ padding: 16px 16px 0 16px;
842
+ &_item {
843
+ display: flex;
844
+ align-items: center;
845
+ gap: 16px;
846
+ &_icon {
847
+ width: 40px;
848
+ height: 40px;
849
+ border: 1px solid var(--_gray-200);
850
+ border-radius: 6px;
851
+ display: flex;
852
+ justify-content: center;
853
+ align-items: center;
854
+ }
855
+ &_info {
856
+ display: flex;
857
+ flex-direction: column;
858
+ &_title {
859
+ font-size: 14px;
860
+ margin-bottom: 4px;
861
+ font-weight: 600;
862
+ }
863
+ &_desc {
864
+ display: flex;
865
+ &_value {
866
+ font-size: 12px;
867
+ color: var(--_gray-600);
868
+ }
869
+ &_label {
870
+ font-size: 12px;
871
+ color: var(--_gray-900);
872
+ }
873
+ }
874
+ }
875
+ &_pin {
876
+ margin-left: 36px;
877
+ input[type="number"] {
878
+ border: 1px solid var(--_gray-300);
879
+ border-radius: 4px;
880
+ background-color: var(--_base-white);
881
+ width: 95px;
882
+ height: 44px;
883
+ padding-inline: 10px;
884
+ &:focus {
885
+ outline: 2px solid var(--_primary-100);
886
+ border: 1px solid var(--_primary-300);
887
+ }
888
+ }
889
+ }
890
+ }
891
+
892
+ &_input {
893
+ border: 1px solid var(--_gray-300);
894
+ border-radius: 4px;
895
+ background-color: var(--_base-white);
896
+ height: 44px;
897
+ width: 100px;
898
+ display: flex;
899
+ align-items: center;
900
+ gap: 8px;
901
+ padding-left: 10px;
902
+ input[type="number"] {
903
+ background-color: var(--_base-white);
904
+ padding-right: 10px;
905
+ }
906
+ &:focus-within {
907
+ outline: 2px solid var(--_primary-100);
908
+ border: 1px solid var(--_primary-300);
909
+ }
910
+ }
911
+ }
912
+ .chk_gft_crd_wrapper {
913
+ &_btn {
914
+ text-align: left;
915
+ margin-bottom: 16px;
916
+ color: var(--_primary-400);
917
+ &:hover {
918
+ text-decoration: underline;
919
+ }
920
+ }
921
+ }
922
+
923
+ // payment other options styles
924
+ .chk_pmnt_other_options {
925
+ display: flex;
926
+ justify-content: space-between;
927
+ gap: 80px;
928
+ padding: 16px;
929
+ .chk_pmnt_other_options_left_container {
930
+ display: flex;
931
+ gap: 12px;
932
+ .chk_pmnt_option_info_wrapper {
933
+ display: flex;
934
+ gap: 12px;
935
+ .cards {
936
+ display: flex;
937
+ flex-direction: column;
938
+ gap: 8px;
939
+ .chk_payment_options_name {
940
+ font-weight: 600;
941
+ }
942
+ span {
943
+ font-size: 12px;
944
+ .chk_payment_options_label {
945
+ color: var(--_gray-600);
946
+ }
947
+ .chk_payment_options_value {
948
+ color: var(--_gray-900);
949
+ }
950
+ }
951
+ }
952
+ }
953
+ }
954
+ .chk_pmnt_other_options_container {
955
+ padding: 16px;
956
+ }
957
+ }
958
+
959
+ &__other_option_wrapper {
960
+ display: flex;
961
+ width: 100%;
962
+ justify-content: space-between;
963
+ padding: 16px;
964
+
965
+ @media (max-width: 500px) {
966
+ flex-direction: column;
967
+ }
968
+ }
969
+
970
+ &_left_container {
971
+ display: flex;
972
+ gap: 12px;
973
+ align-items: flex-start;
974
+ .chk_payment_option__info_wrapper {
975
+ display: flex;
976
+ gap: 0px;
977
+ }
978
+
979
+ @media (max-width: 500px) {
980
+ flex-wrap: wrap;
981
+ }
982
+ }
983
+
984
+ &__left_wrapper {
985
+ display: flex;
986
+ flex-direction: column;
987
+ align-items: flex-start;
988
+ gap: 16px;
989
+ }
990
+
991
+ &__card_icon {
992
+ width: 60px;
993
+ height: 40px;
994
+ }
995
+
996
+ &__info_wrapper {
997
+ display: flex;
998
+ flex-direction: column;
999
+
1000
+ .chk_payment_options_name {
1001
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1002
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1003
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1004
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1005
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1006
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1007
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1008
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1009
+ }
1010
+
1011
+ .chk_payment_options_label {
1012
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1013
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1014
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1015
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1016
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1017
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1018
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1019
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1020
+ }
1021
+
1022
+ .chk_payment_options_value {
1023
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1024
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1025
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1026
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1027
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1028
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1029
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1030
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1031
+ }
1032
+ }
1033
+
1034
+ &_right_container {
1035
+ display: flex;
1036
+ gap: 6px;
1037
+ align-items: flex-start;
1038
+
1039
+ @media (max-width: 500px) {
1040
+ justify-content: flex-end;
1041
+ }
1042
+ }
1043
+
1044
+ &_input {
1045
+ display: flex;
1046
+ padding: 9px 12px;
1047
+ align-items: center;
1048
+ max-width: 96px;
1049
+ background-color: var(--_base-white);
1050
+ border: 1px solid var(--_gray-300);
1051
+ border-radius: 6px;
1052
+ color: var(--_gray-700);
1053
+
1054
+ &:focus-within {
1055
+ border: 1px solid var(--_primary-300);
1056
+ outline: 2px solid var(--_primary-100);
1057
+ }
1058
+
1059
+ .icon {
1060
+ svg {
1061
+ path {
1062
+ stroke: var(--_primary-400);
1063
+ }
1064
+ }
1065
+ }
1066
+
1067
+ .input_field {
1068
+ background-color: var(--_base-white);
1069
+ border: 1px solid var(--_gray-300);
1070
+ border-radius: 6px;
1071
+ color: var(--_gray-700);
1072
+
1073
+ &:focus-within {
1074
+ border: 1px solid var(--_primary-300);
1075
+ outline: 2px solid var(--_primary-100);
1076
+ }
1077
+ }
1078
+ }
1079
+ }
1080
+ }
1098
1081
  }
1099
1082
  }
1100
1083
  }
1101
1084
 
1102
- .chk_payment_option {
1085
+ .chk_gft_crd_container {
1103
1086
  width: 100%;
1104
1087
  display: flex;
1105
1088
  flex-direction: column;
1106
1089
  gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1107
1090
  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);
1091
+ border: 1px solid var(--_gray-300);
1092
+ border-radius: 4px;
1093
+ overflow: hidden;
1116
1094
 
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);
1095
+ .chk_gft_crd_option_heading {
1096
+ display: flex;
1097
+ justify-content: space-between;
1098
+ align-items: center;
1099
+ padding: 8px 12px;
1100
+ border-bottom: 1px solid var(--_gray-300);
1126
1101
  }
1127
1102
 
1128
1103
  // gift card styles
@@ -1186,7 +1161,7 @@ $dark-color: #343a40;
1186
1161
  border-radius: 4px;
1187
1162
  background-color: var(--_base-white);
1188
1163
  height: 44px;
1189
- width: 100px;
1164
+ width: 120px;
1190
1165
  display: flex;
1191
1166
  align-items: center;
1192
1167
  gap: 8px;
@@ -1261,7 +1236,7 @@ $dark-color: #343a40;
1261
1236
 
1262
1237
  &_left_container {
1263
1238
  display: flex;
1264
- gap: 80px;
1239
+ gap: 12px;
1265
1240
  align-items: flex-start;
1266
1241
  & > div {
1267
1242
  display: flex;
@@ -1285,59 +1260,14 @@ $dark-color: #343a40;
1285
1260
  height: 40px;
1286
1261
  }
1287
1262
 
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
1263
  &__info_wrapper {
1329
1264
  display: flex;
1330
1265
  flex-direction: column;
1331
1266
 
1332
1267
  .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);
1268
+ color: var(--_gray-900);
1269
+ font-size: 16px;
1270
+ font-weight: 600;
1341
1271
  }
1342
1272
 
1343
1273
  .chk_payment_options_label {
@@ -1375,74 +1305,35 @@ $dark-color: #343a40;
1375
1305
 
1376
1306
  &_input {
1377
1307
  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);
1308
+ padding: 8px 12px;
1309
+ width: -webkit-fill-available;
1310
+ background-color: var(--_base-white);
1311
+ border-radius: 6px;
1312
+ border: 1px solid var(--_gray-300);
1398
1313
 
1399
1314
  &: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);
1315
+ border: 1px solid var(--_primary-300);
1316
+ outline: 2px solid var(--_primary-100);
1417
1317
  }
1418
1318
 
1419
1319
  .icon {
1420
1320
  svg {
1421
1321
  path {
1422
- stroke: #667085;
1322
+ stroke: var(--_primary-400);
1423
1323
  }
1424
1324
  }
1425
1325
  }
1426
1326
 
1427
1327
  .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);
1328
+ padding: 8px 12px;
1329
+ width: -webkit-fill-available;
1330
+ background-color: var(--_base-white);
1331
+ border-radius: 6px;
1332
+ border: 1px solid var(--_gray-300);
1436
1333
 
1437
1334
  &: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);
1335
+ border: 1px solid var(--_primary-300);
1336
+ outline: 2px solid var(--_primary-100);
1446
1337
  }
1447
1338
  }
1448
1339
  }
@@ -1467,14 +1358,9 @@ $dark-color: #343a40;
1467
1358
  }
1468
1359
 
1469
1360
  .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);
1361
+ font-size: 18px;
1362
+ color: var(--_gray-900);
1363
+ font-weight: 600;
1478
1364
  &.pl_0 {
1479
1365
  padding-left: 0px;
1480
1366
  }
@@ -1541,79 +1427,32 @@ $dark-color: #343a40;
1541
1427
  }
1542
1428
 
1543
1429
  .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);
1430
+ color: var(--_gray-600);
1431
+ font-size: 14px;
1553
1432
  }
1554
1433
 
1555
1434
  .chk_shiping_address_form_input {
1556
1435
  padding: 8px 12px;
1557
1436
  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);
1437
+ background-color: var(--_base-white);
1438
+ border-radius: 6px;
1439
+ border: 1px solid var(--_gray-300);
1575
1440
 
1576
1441
  &: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);
1442
+ border: 1px solid var(--_primary-300);
1443
+ outline: 2px solid var(--_primary-100);
1594
1444
  }
1595
1445
 
1596
1446
  .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);
1447
+ padding: 8px 12px;
1448
+ width: -webkit-fill-available;
1449
+ background-color: var(--_base-white);
1450
+ border-radius: 6px;
1451
+ border: 1px solid var(--_gray-300);
1606
1452
 
1607
1453
  &: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);
1454
+ border: 1px solid var(--_primary-300);
1455
+ outline: 2px solid var(--_primary-100);
1617
1456
  }
1618
1457
  }
1619
1458
  }
@@ -1682,48 +1521,6 @@ $dark-color: #343a40;
1682
1521
  gap: 8px;
1683
1522
  }
1684
1523
 
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
1524
  &_same_as_billing_address_chkbx {
1728
1525
  color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1729
1526
  font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
@@ -1744,53 +1541,10 @@ $dark-color: #343a40;
1744
1541
 
1745
1542
  .payment_heading {
1746
1543
  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
1544
  display: flex;
1751
1545
  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);
1546
+ border-bottom: 1px solid var(--_gray-100);
1547
+ font-weight: 600;
1794
1548
  }
1795
1549
  }
1796
1550
 
@@ -1820,10 +1574,16 @@ $dark-color: #343a40;
1820
1574
  width: fit-content;
1821
1575
  align-items: center;
1822
1576
  font-family: sans-serif;
1577
+ gap: 12px;
1823
1578
 
1824
1579
  input[type="checkbox"] {
1825
1580
  display: none;
1826
1581
  }
1582
+ .payment_program_title {
1583
+ font-size: 14px;
1584
+ font-weight: 500;
1585
+ color: var(--_gray-900);
1586
+ }
1827
1587
 
1828
1588
  .chk_payment_options_use_as_billing_address_chkbx {
1829
1589
  display: flex;
@@ -1917,21 +1677,9 @@ $dark-color: #343a40;
1917
1677
  display: flex;
1918
1678
  align-items: center;
1919
1679
  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);
1680
+ padding: 8px 16px;
1681
+ background-color: var(--_warning-100);
1682
+ color: var(--_warning-700);
1935
1683
 
1936
1684
  .icon {
1937
1685
  svg {
@@ -1967,47 +1715,24 @@ $dark-color: #343a40;
1967
1715
  gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
1968
1716
 
1969
1717
  .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);
1718
+ color: var(--_gray-700);
1719
+ font-size: 16px;
1720
+ font-weight: 600;
1978
1721
  }
1979
1722
 
1980
1723
  .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);
1724
+ color: var(--_gray-600);
1725
+ font-size: 12px;
1989
1726
  }
1990
1727
 
1991
1728
  .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);
1729
+ color: var(--_gray-500);
1730
+ font-size: 12px;
2000
1731
  }
2001
1732
 
2002
1733
  .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);
1734
+ color: var(--_gray-700);
1735
+ font-size: 12px;
2011
1736
  }
2012
1737
  }
2013
1738
 
@@ -2025,51 +1750,6 @@ $dark-color: #343a40;
2025
1750
  &:has(.chk_saved_address_button.selected) {
2026
1751
  display: flex !important;
2027
1752
  }
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
1753
  }
2074
1754
 
2075
1755
  &:hover {
@@ -2088,7 +1768,7 @@ $dark-color: #343a40;
2088
1768
 
2089
1769
  // credit card form syles
2090
1770
  .chk_cred_form_details {
2091
- border-top: 1px solid var(--_gray-300);
1771
+ border-top: 1px solid var(--_gray-100);
2092
1772
  padding: 16px;
2093
1773
  .chk_basic_form_title {
2094
1774
  font-size: 14px;
@@ -2128,6 +1808,10 @@ $dark-color: #343a40;
2128
1808
  color: var(--_gray-400);
2129
1809
  padding-left: 16px;
2130
1810
  }
1811
+ &:focus {
1812
+ border: 1px solid var(--_primary-300);
1813
+ outline: 2px solid var(--_primary-100);
1814
+ }
2131
1815
  }
2132
1816
  .error_msg {
2133
1817
  display: block;
@@ -2221,6 +1905,14 @@ $dark-color: #343a40;
2221
1905
  border-radius: 6px;
2222
1906
  height: 40px;
2223
1907
  padding-inline: 10px;
1908
+ &:placeholder-shown {
1909
+ padding-left: 10px;
1910
+ color: var(--_gray-400);
1911
+ }
1912
+ &:focus {
1913
+ border: 1px solid var(--_primary-300);
1914
+ outline: 2px solid var(--_primary-100);
1915
+ }
2224
1916
  }
2225
1917
  &.pin {
2226
1918
  width: 110px;
@@ -2262,3 +1954,106 @@ $dark-color: #343a40;
2262
1954
  }
2263
1955
  }
2264
1956
  }
1957
+
1958
+ .chk_payment_cred_section {
1959
+ display: flex;
1960
+ justify-content: space-between;
1961
+ align-items: center;
1962
+ padding: 16px 16px 8px 16px;
1963
+
1964
+ .chk_currency_inp {
1965
+ height: 44px;
1966
+ border: 1px solid var(--_gray-200);
1967
+ border-radius: 4px;
1968
+ background-color: var(--_base-white);
1969
+ display: flex;
1970
+ width: 120px;
1971
+ overflow: hidden;
1972
+ align-items: center;
1973
+ padding-inline: 12px;
1974
+ gap: 12px;
1975
+ &:focus-within {
1976
+ border: 1px solid var(--_primary-200);
1977
+ outline: 2px solid var(--_primary-50);
1978
+ }
1979
+ input {
1980
+ height: inherit;
1981
+ }
1982
+ }
1983
+ .chk_payment_cred_section_col_left {
1984
+ .chk_payment_cred_section_col_left_crd_details {
1985
+ display: flex;
1986
+ gap: 80px;
1987
+ align-items: center;
1988
+ & > div {
1989
+ display: flex;
1990
+ gap: 12px;
1991
+ .card_icon {
1992
+ width: 60px;
1993
+ height: 40px;
1994
+ border-radius: 4px;
1995
+ }
1996
+ .card_details {
1997
+ .card_details_num {
1998
+ font-size: 12px;
1999
+ font-weight: 600;
2000
+ color: var(--_gray-900);
2001
+ }
2002
+ & > div {
2003
+ display: flex;
2004
+ .card_details_label {
2005
+ font-size: 12px;
2006
+ color: var(--_gray-500);
2007
+ }
2008
+ .card_details_value {
2009
+ font-size: 12px;
2010
+ color: var(--_gray-900);
2011
+ }
2012
+ }
2013
+ }
2014
+ }
2015
+ }
2016
+ }
2017
+ }
2018
+
2019
+ .chk_payment_remove_card {
2020
+ padding-inline: 16px;
2021
+ margin-bottom: 16px;
2022
+ .error_msg {
2023
+ font-size: 12px;
2024
+ color: var(--_error-700);
2025
+ }
2026
+ }
2027
+
2028
+ .tertiary_primary_btn {
2029
+ font-size: 12px;
2030
+ color: var(--_primary-400);
2031
+ display: inline-flex;
2032
+ &:hover {
2033
+ color: var(--_primary-500);
2034
+ text-decoration: underline;
2035
+ }
2036
+ }
2037
+ .chk_primary_bnt {
2038
+ padding: 12px 24px;
2039
+ background-color: var(--_primary-400);
2040
+ color: var(--_base-white);
2041
+ font-weight: 600;
2042
+ border-radius: 6px;
2043
+ width: max-content;
2044
+ &:hover {
2045
+ background-color: var(--_primary-500);
2046
+ }
2047
+ }
2048
+ .chk_secondary_bnt {
2049
+ padding: 12px 24px;
2050
+ background-color: transparent;
2051
+ color: var(--_gray-600);
2052
+ font-weight: 600;
2053
+ border-radius: 6px;
2054
+
2055
+ &:hover {
2056
+ background-color: var(--_gray-50);
2057
+ color: var(--_gray-900);
2058
+ }
2059
+ }