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