@sc-360-v2/storefront-cms-library 0.3.30 → 0.3.31

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 (23) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/bulk-order-pad.scss +1 -6
  3. package/dist/cart-details.scss +3 -9
  4. package/dist/cartAttributes.scss +3 -0
  5. package/dist/cartDropdownOverlay.scss +2 -3
  6. package/dist/checkout.scss +1070 -998
  7. package/dist/dropdownTemplate.scss +11 -1
  8. package/dist/employee-bulk-order.scss +36 -5
  9. package/dist/empty-states.scss +52 -0
  10. package/dist/icons.js +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/modal.scss +38 -6
  13. package/dist/quick-order-pad.scss +14 -3
  14. package/dist/shareCartSideBar.scss +13 -6
  15. package/dist/submit-quote.scss +30 -25
  16. package/dist/types/builder/elements/loader/index.d.ts +27 -0
  17. package/dist/types/builder/enums/index.d.ts +1 -0
  18. package/dist/types/builder/index.d.ts +2 -1
  19. package/dist/types/builder/tools/element-edit/checkout.d.ts +8 -0
  20. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  21. package/dist/types/builder/tools/element-edit/loader.d.ts +28 -0
  22. package/dist/widget.scss +1 -0
  23. package/package.json +1 -1
package/dist/checkout.scss CHANGED
@@ -32,414 +32,275 @@ $dark-color: #343a40;
32
32
  // }
33
33
 
34
34
  .chk_checkout_wrapper {
35
- font-family: Arial, sans-serif;
36
- font-size: 0.95rem;
37
- color: $dark-color;
38
- display: flex;
39
- padding: var(--_ctm-lt-pg);
40
- flex-direction: column;
41
- gap: var(--_ctm-lt-im-gp);
42
- word-break: keep-all;
43
- padding-bottom: 24px;
44
-
45
- .chk_checkout_title {
46
- font-size: 24px;
47
- font-weight: 700;
48
- line-height: 32px;
49
- color: var(--_ctm-dn-it-hs-dn-cr);
50
- font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
51
- }
52
-
53
- .accordion {
54
- border-radius: 4px;
35
+ .checkout_auth_wrapper {
55
36
  display: flex;
56
- gap: var(--_ctm-lt-te-ad-it-gp);
57
- flex-direction: column;
37
+ justify-content: space-between;
38
+ padding: 2rem;
39
+ gap: 2rem;
40
+
41
+ .sign_in_section {
42
+ flex: 1;
43
+ max-width: 500px;
44
+
45
+ h2 {
46
+ font-size: 1.75rem;
47
+ font-weight: bold;
48
+ margin-bottom: 0.5rem;
49
+ }
58
50
 
59
- .accordion-header {
60
- padding: 1rem;
61
- display: flex;
62
- justify-content: space-between;
63
- align-items: center;
64
- cursor: pointer;
65
- background-color: var(--_ctm-dn-sn-an-cr-dn-bd-cr);
66
- border-color: var(--_ctm-dn-sn-an-cr-dn-br-cr);
67
- border-radius: var(--_ctm-dn-sn-an-cr-dn-br-rs);
68
- border-style: var(--_ctm-dn-sn-an-cr-dn-br-se);
69
- border-width: var(--_ctm-dn-sn-an-cr-dn-br-wh);
70
- box-shadow: var(--_ctm-dn-sn-an-cr-dn-sw-ae) var(--_ctm-dn-sn-an-cr-dn-sw-br)
71
- var(--_ctm-dn-sn-an-cr-dn-sw-sd) var(--_ctm-dn-sn-an-cr-dn-sw-cr);
72
-
73
- .accordion-title {
74
- margin-right: 1rem;
75
- white-space: nowrap;
76
- display: flex;
77
- color: var(--_ctm-dn-sn-an-te-dn-cr);
78
- font-family: var(--_ctm-dn-sn-an-te-dn-ft-fy);
79
- font-size: var(--_ctm-dn-sn-an-te-dn-ft-se);
80
- font-style: var(--_ctm-dn-sn-an-te-dn-ft-se-ic);
81
- font-weight: var(--_ctm-dn-sn-an-te-dn-ft-wt);
82
- line-height: var(--_ctm-dn-sn-an-te-dn-le-ht);
83
- letter-spacing: var(--_ctm-dn-sn-an-te-dn-lr-sg);
84
- text-align: var(--_ctm-dn-sn-an-te-dn-tt-an);
85
- text-decoration: var(--_ctm-dn-sn-an-te-dn-ue);
86
- span {
87
- display: inline-block;
88
- margin-right: 10px;
89
- }
90
- .steps {
91
- width: 30px;
92
- height: 30px;
93
- border: 1px solid var(--_gray-300);
94
- border-radius: 50%;
95
- display: flex;
96
- justify-content: center;
97
- align-items: center;
98
- }
51
+ p {
52
+ font-size: 0.95rem;
53
+ margin-bottom: 1rem;
99
54
  }
100
- .edit-btn {
101
- cursor: pointer;
102
- padding: 0;
103
- background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
104
- border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
105
- border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
106
- border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
107
- border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
108
- color: var(--_ctm-dn-sn-an-bn-dn-cr);
109
- font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
110
- font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
111
- font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
112
- font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
113
- line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
114
- letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
115
- box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
116
- var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
117
- text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
118
- text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
119
-
120
- &:hover {
55
+
56
+ .sign_in_form {
57
+ margin-bottom: 0.75rem;
58
+ }
59
+
60
+ .forgot_password {
61
+ font-size: 0.85rem;
62
+ color: #0056d2;
63
+ text-decoration: underline;
64
+ margin-top: 0.5rem;
65
+ display: inline-block;
66
+ }
67
+
68
+ .privacy_note {
69
+ font-size: 0.75rem;
70
+ margin-top: 1rem;
71
+ color: #777;
72
+
73
+ a {
74
+ color: #0056d2;
121
75
  text-decoration: underline;
122
76
  }
123
77
  }
124
78
  }
79
+ .create_account_section {
80
+ display: flex;
81
+ justify-content: space-between;
82
+ gap: 2rem;
125
83
 
126
- .accordion-body {
127
- .shipping-address {
128
- display: flex;
129
- flex-direction: column;
130
- gap: 24px;
84
+ .create_form_wrapper {
85
+ flex: 1;
86
+ max-width: 500px;
131
87
 
132
- .shipping_address_container {
133
- display: flex;
134
- flex-direction: column;
135
- gap: 24px;
88
+ h2 {
89
+ font-size: 1.5rem;
90
+ font-weight: bold;
136
91
  }
137
92
 
138
- .shipping_address_heading_container {
139
- display: flex;
140
- justify-content: space-between;
141
- align-items: center;
93
+ p {
94
+ font-size: 0.95rem;
95
+ margin-bottom: 1rem;
142
96
  }
143
97
 
144
- form {
145
- display: flex;
146
- flex-direction: column;
147
- gap: 0.75rem;
148
- max-width: 85%;
98
+ .create_account_text {
99
+ font-size: 0.8rem;
100
+ margin-top: 1rem;
149
101
 
150
- @media (max-width: 500px) {
151
- max-width: 100%;
102
+ a {
103
+ color: #0056d2;
104
+ text-decoration: underline;
152
105
  }
153
106
  }
107
+ }
108
+ }
154
109
 
155
- .chk_shipping_address_form_group {
156
- display: flex;
157
- justify-content: space-between;
158
- flex-direction: row;
159
- gap: var(--_ctm-lt-im-gp);
160
- }
161
-
162
- .chk_shipping_address_input_container {
163
- display: flex;
164
- width: 100%;
165
- }
110
+ .checkout_auth_divider {
111
+ width: 1px;
112
+ background-color: #ddd;
113
+ }
166
114
 
167
- .chk_shipping_address_input_wrapper {
168
- display: flex;
169
- flex-direction: column;
170
- gap: var(--_ctm-lt-ll-ad-it-gp);
171
- width: 100%;
115
+ .guest_checkout_section {
116
+ flex: 0.8;
117
+ display: flex;
118
+ flex-direction: column;
119
+ justify-content: center;
120
+ gap: 2rem;
121
+
122
+ .guest_box,
123
+ .create_account_box {
124
+ background: #f9f9f9;
125
+ padding: 1.5rem;
126
+ border-radius: 6px;
127
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
128
+
129
+ h3 {
130
+ font-size: 1.25rem;
131
+ font-weight: bold;
132
+ margin-bottom: 0.5rem;
172
133
  }
173
134
 
174
- .chk_shipping_address_form_label {
175
- white-space: nowrap;
176
- color: var(--_ctm-dn-it-ll-dn-cr);
177
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
178
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
179
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
180
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
181
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
182
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
183
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
184
- text-decoration: var(--_ctm-dn-it-ll-dn-ue);
135
+ p {
136
+ font-size: 0.9rem;
137
+ margin-bottom: 1rem;
185
138
  }
186
139
 
187
- .chk_shiping_address_form_input {
188
- padding: 10px;
189
- width: -webkit-fill-available;
190
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
191
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
192
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
193
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
194
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
195
- color: var(--_ctm-dn-it-bx-dn-cr);
196
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
197
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
198
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
199
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
200
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
201
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
202
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
203
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
204
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
205
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
140
+ .btn_secondary {
141
+ background-color: #0032cc;
142
+ color: white;
143
+ border: none;
144
+ padding: 0.6rem 1.2rem;
145
+ font-size: 0.9rem;
146
+ border-radius: 4px;
147
+ cursor: pointer;
206
148
 
207
- .input-field {
208
- color: var(--_ctm-dn-it-bx-dn-cr);
209
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
210
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
211
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
212
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
213
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
214
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
215
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
216
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
217
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
218
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
149
+ &:hover {
150
+ background-color: #0028a3;
219
151
  }
220
152
  }
153
+ }
154
+ }
155
+ }
221
156
 
222
- input[type="checkbox"] {
223
- width: auto;
224
- }
157
+ .chk_checkout_accordion {
158
+ font-family: Arial, sans-serif;
159
+ font-size: 0.95rem;
160
+ color: $dark-color;
161
+ display: flex;
162
+ padding: var(--_ctm-lt-pg);
163
+ flex-direction: column;
164
+ gap: var(--_ctm-lt-im-gp);
165
+ word-break: keep-all;
166
+
167
+ .chk_checkout_title {
168
+ font-size: 24px;
169
+ font-weight: 700;
170
+ line-height: 32px;
171
+ color: var(--_ctm-dn-it-hs-dn-cr);
172
+ font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
173
+ }
225
174
 
226
- .error-msg {
227
- font-size: 12px;
228
- color: #ff0000;
229
- }
230
- label {
231
- display: flex;
232
- align-items: center;
233
- gap: 0.5rem;
234
- font-size: 14px;
235
- }
175
+ .accordion {
176
+ border-radius: 4px;
177
+ display: flex;
178
+ gap: var(--_ctm-lt-te-ad-it-gp);
179
+ flex-direction: column;
236
180
 
237
- .checkbox-group {
238
- display: flex;
239
- align-items: center;
240
- justify-content: start;
241
- gap: 8px;
181
+ .accordion-header {
182
+ padding: 1rem;
183
+ display: flex;
184
+ justify-content: space-between;
185
+ align-items: flex-start;
186
+ cursor: pointer;
187
+ background-color: var(--_ctm-dn-sn-an-cr-dn-bd-cr);
188
+ border-color: var(--_ctm-dn-sn-an-cr-dn-br-cr);
189
+ border-radius: var(--_ctm-dn-sn-an-cr-dn-br-rs);
190
+ border-style: var(--_ctm-dn-sn-an-cr-dn-br-se);
191
+ border-width: var(--_ctm-dn-sn-an-cr-dn-br-wh);
192
+ box-shadow: var(--_ctm-dn-sn-an-cr-dn-sw-ae) var(--_ctm-dn-sn-an-cr-dn-sw-br)
193
+ var(--_ctm-dn-sn-an-cr-dn-sw-sd) var(--_ctm-dn-sn-an-cr-dn-sw-cr);
194
+
195
+ .accordion-title {
196
+ margin-right: 1rem;
197
+ white-space: nowrap;
198
+ color: var(--_ctm-dn-sn-an-te-dn-cr);
199
+ font-family: var(--_ctm-dn-sn-an-te-dn-ft-fy);
200
+ font-size: var(--_ctm-dn-sn-an-te-dn-ft-se);
201
+ font-style: var(--_ctm-dn-sn-an-te-dn-ft-se-ic);
202
+ font-weight: var(--_ctm-dn-sn-an-te-dn-ft-wt);
203
+ line-height: var(--_ctm-dn-sn-an-te-dn-le-ht);
204
+ letter-spacing: var(--_ctm-dn-sn-an-te-dn-lr-sg);
205
+ text-align: var(--_ctm-dn-sn-an-te-dn-tt-an);
206
+ text-decoration: var(--_ctm-dn-sn-an-te-dn-ue);
242
207
  }
243
-
244
- .chk_shipping_address_submit_btn {
245
- padding: 16px 24px;
246
- width: fit-content;
247
- background-color: var(--_primary-400);
248
- color: var(--_base-white);
249
- border-radius: 4px;
250
- margin-top: 12px;
251
- font-weight: 600;
208
+ .edit-btn {
209
+ align-self: flex-end;
210
+ cursor: pointer;
211
+ padding: 0;
212
+ background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
213
+ border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
214
+ border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
215
+ border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
216
+ border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
217
+ color: var(--_ctm-dn-sn-an-bn-dn-cr);
218
+ font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
219
+ font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
220
+ font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
221
+ font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
222
+ line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
223
+ letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
224
+ box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
225
+ var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
226
+ text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
227
+ text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
252
228
 
253
229
  &:hover {
254
- background-color: var(--_primary-500);
230
+ text-decoration: underline;
255
231
  }
256
-
257
- // background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
258
- // border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
259
- // border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
260
- // border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
261
- // border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
262
- // color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
263
- // font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
264
- // font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
265
- // font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
266
- // font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
267
- // line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
268
- // letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
269
- // box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
270
- // var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
271
- // text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
272
- // text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
273
-
274
- // &:hover {
275
- // background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
276
- // border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
277
- // border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
278
- // border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
279
- // border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
280
- // color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
281
- // font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
282
- // font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
283
- // font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
284
- // font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
285
- // line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
286
- // letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
287
- // box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
288
- // var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
289
- // text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
290
- // text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
291
- // }
292
- }
293
-
294
- .chk_shipping_address_use_as_billing_address_chkbx {
295
- color: var(--_ctm-dn-cx-ll-dn-cr);
296
- font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
297
- font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
298
- font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
299
- font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
300
- line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
301
- letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
302
- text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
303
- text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
304
232
  }
305
233
  }
306
234
 
307
- .chk_multi_address {
308
- display: flex;
309
- flex-direction: column;
310
- width: 100%;
311
- gap: var(--_ctm-lt-im-gp);
312
-
313
- &_product_container {
235
+ .accordion-body {
236
+ .shipping-address {
314
237
  display: flex;
315
238
  flex-direction: column;
316
- gap: 16px;
317
- width: 100%;
318
- &:not(:last-child) {
319
- margin-bottom: 16px;
320
- }
321
- }
322
-
323
- &_product_info_container {
324
- display: flex;
325
- flex-direction: row;
326
- justify-content: space-between;
327
- align-items: flex-start;
328
- width: 100%;
239
+ gap: 24px;
329
240
 
330
- @media (max-width: 500px) {
241
+ .shipping_address_container {
242
+ display: flex;
331
243
  flex-direction: column;
244
+ gap: 24px;
332
245
  }
333
- }
334
-
335
- &_product_left_container {
336
- display: flex;
337
- flex: 1 0 0;
338
- width: 100%;
339
- gap: 16px;
340
- }
341
-
342
- &_product_image {
343
- height: 120px;
344
- width: 120px;
345
- border: 1px solid var(--_gray-100);
346
- border-radius: 6px;
347
- }
348
-
349
- &_product_info_wrapper {
350
- display: flex;
351
- flex-direction: column;
352
- gap: 6px;
353
- }
354
-
355
- &_product_right_container {
356
- display: flex;
357
- flex-direction: row;
358
- gap: var(--_ctm-lt-im-gp);
359
- align-items: center;
360
246
 
361
- @media (max-width: 500px) {
362
- align-self: flex-end;
247
+ .shipping_address_heading_container {
248
+ display: flex;
249
+ justify-content: space-between;
250
+ align-items: center;
363
251
  }
364
- }
365
-
366
- &_qty_wrapper {
367
- display: flex;
368
- flex-direction: row;
369
- align-items: center;
370
- gap: 4px;
371
- }
372
252
 
373
- &_shipping_option_container {
374
- display: flex;
375
- flex-direction: column;
376
- gap: 8px;
253
+ form {
254
+ display: flex;
255
+ flex-direction: column;
256
+ gap: 0.75rem;
257
+ max-width: 85%;
377
258
 
378
- @media (max-width: 500px) {
379
- flex-direction: row;
259
+ @media (max-width: 500px) {
260
+ max-width: 100%;
261
+ }
380
262
  }
381
- }
382
263
 
383
- &_shiping_option_heading_wrapper {
384
- display: grid;
385
- grid-template-columns: 1fr 2fr 2fr auto;
386
- gap: 16px;
387
- white-space: nowrap;
388
- align-items: center;
389
-
390
- @media (max-width: 500px) {
391
- grid-template-columns: auto;
264
+ .chk_shipping_address_form_group {
265
+ display: flex;
266
+ justify-content: space-between;
267
+ flex-direction: row;
268
+ gap: var(--_ctm-lt-im-gp);
392
269
  }
393
- }
394
270
 
395
- .chk_multi_address_icon {
396
- cursor: pointer;
397
- &:hover {
398
- svg {
399
- path {
400
- stroke: var(--_error-700);
401
- }
402
- }
271
+ .chk_shipping_address_input_container {
272
+ display: flex;
273
+ width: 100%;
403
274
  }
404
- }
405
- .chk_shiping_address_form_input {
406
- padding: 10px;
407
- width: -webkit-fill-available;
408
- position: relative;
409
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
410
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
411
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
412
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
413
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
414
- color: var(--_ctm-dn-it-bx-dn-cr);
415
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
416
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
417
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
418
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
419
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
420
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
421
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
422
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
423
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
424
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
425
275
 
426
- .custom-arrows {
427
- position: absolute;
428
- right: 6px;
429
- top: 50%;
430
- transform: translateY(-50%);
276
+ .chk_shipping_address_input_wrapper {
431
277
  display: flex;
432
278
  flex-direction: column;
279
+ gap: var(--_ctm-lt-ll-ad-it-gp);
280
+ width: 100%;
281
+ }
433
282
 
434
- .arrow {
435
- all: unset;
436
- cursor: pointer;
437
- font-size: 10px;
438
- line-height: 1;
439
- }
283
+ .chk_shipping_address_form_label {
284
+ white-space: nowrap;
285
+ color: var(--_ctm-dn-it-ll-dn-cr);
286
+ font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
287
+ font-size: var(--_ctm-dn-it-ll-dn-ft-se);
288
+ font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
289
+ font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
290
+ line-height: var(--_ctm-dn-it-ll-dn-le-ht);
291
+ letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
292
+ text-align: var(--_ctm-dn-it-ll-dn-tt-an);
293
+ text-decoration: var(--_ctm-dn-it-ll-dn-ue);
440
294
  }
441
295
 
442
- .input-field {
296
+ .chk_shiping_address_form_input {
297
+ padding: 10px;
298
+ width: -webkit-fill-available;
299
+ background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
300
+ border-color: var(--_ctm-dn-it-bx-dn-br-cr);
301
+ border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
302
+ border-style: var(--_ctm-dn-it-bx-dn-br-se);
303
+ border-width: var(--_ctm-dn-it-bx-dn-br-wh);
443
304
  color: var(--_ctm-dn-it-bx-dn-cr);
444
305
  font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
445
306
  font-size: var(--_ctm-dn-it-bx-dn-ft-se);
@@ -451,176 +312,194 @@ $dark-color: #343a40;
451
312
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
452
313
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
453
314
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
454
- }
455
- }
456
- }
457
-
458
- .shipping-method {
459
- display: flex;
460
- flex-direction: column;
461
- gap: var(--_ctm-lt-im-gp);
462
315
 
463
- &__grid {
464
- display: grid;
465
- grid-template-columns: 1fr;
466
- gap: var(--_ctm-lt-im-gp);
316
+ .input-field {
317
+ color: var(--_ctm-dn-it-bx-dn-cr);
318
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
319
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
320
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
321
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
322
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
323
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
324
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
325
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
326
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
327
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
328
+ }
329
+ }
467
330
 
468
- @media (min-width: 768px) {
469
- grid-template-columns: 1fr 1fr;
331
+ input[type="checkbox"] {
332
+ width: auto;
470
333
  }
471
- }
472
334
 
473
- &__group {
474
- display: flex;
475
- flex-direction: column;
476
- gap: var(--_ctm-lt-ll-ad-it-gp);
477
- }
335
+ .error-msg {
336
+ font-size: 12px;
337
+ color: #ff0000;
338
+ }
339
+ label {
340
+ display: flex;
341
+ align-items: center;
342
+ gap: 0.5rem;
343
+ font-size: 14px;
344
+ }
478
345
 
479
- &__options {
480
- display: flex;
481
- flex-direction: column;
482
- gap: 12px;
483
- }
346
+ .checkbox-group {
347
+ display: flex;
348
+ align-items: center;
349
+ justify-content: start;
350
+ gap: 8px;
351
+ }
484
352
 
485
- &__option {
486
- display: flex;
487
- align-items: center;
488
- cursor: pointer;
489
- transition: all 0.2s ease;
353
+ .chk_shipping_address_submit_btn {
354
+ padding: 8px 24px;
355
+ width: fit-content;
356
+ background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
357
+ border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
358
+ border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
359
+ border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
360
+ border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
361
+ color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
362
+ font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
363
+ font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
364
+ font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
365
+ font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
366
+ line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
367
+ letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
368
+ box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
369
+ var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
370
+ text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
371
+ text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
490
372
 
491
- input[type="radio"] {
492
- margin-right: 12px;
493
- width: 16px;
494
- height: 16px;
495
- accent-color: #2563eb;
496
- cursor: pointer;
373
+ &:hover {
374
+ background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
375
+ border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
376
+ border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
377
+ border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
378
+ border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
379
+ color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
380
+ font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
381
+ font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
382
+ font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
383
+ font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
384
+ line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
385
+ letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
386
+ box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae)
387
+ var(--_ctm-dn-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-it-bn-dn-hr-se-sw-sd)
388
+ var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
389
+ text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
390
+ text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
391
+ }
497
392
  }
498
393
 
499
- &.selected {
500
- background-color: #f0f5ff;
501
- border-color: #2563eb;
394
+ .chk_shipping_address_use_as_billing_address_chkbx {
395
+ color: var(--_ctm-dn-cx-ll-dn-cr);
396
+ font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
397
+ font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
398
+ font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
399
+ font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
400
+ line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
401
+ letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
402
+ text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
403
+ text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
502
404
  }
503
405
  }
504
- }
505
-
506
- .chk_payment-options {
507
- display: flex;
508
- flex-direction: column;
509
- gap: var(--_ctm-lt-im-gp);
510
406
 
511
- .chk_payment_option_wrapper {
407
+ .chk_multi_address {
512
408
  display: flex;
513
- gap: var(--_ctm-lt-im-gp);
514
409
  flex-direction: column;
515
- }
516
-
517
- .chk_payment_option {
518
410
  width: 100%;
519
- display: flex;
520
- flex-direction: column;
521
- background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
522
- border-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
523
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
524
- border-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
525
- border-width: var(--_ctm-dn-pt-os-cr-dn-br-wh);
526
- box-shadow: var(--_ctm-dn-pt-os-cr-dn-sw-ae) var(--_ctm-dn-pt-os-cr-dn-sw-br)
527
- var(--_ctm-dn-pt-os-cr-dn-sw-sd) var(--_ctm-dn-pt-os-cr-dn-sw-cr);
528
-
529
- &__other_option_wrapper {
411
+ gap: var(--_ctm-lt-im-gp);
412
+
413
+ &_product_container {
530
414
  display: flex;
415
+ flex-direction: column;
416
+ gap: 16px;
531
417
  width: 100%;
532
- justify-content: space-between;
533
- padding: 16px;
534
-
535
- @media (max-width: 500px) {
536
- flex-direction: column;
537
- }
538
418
  }
539
419
 
540
- &_left_container {
420
+ &_product_info_container {
541
421
  display: flex;
542
- gap: 24px;
422
+ flex-direction: row;
423
+ justify-content: space-between;
543
424
  align-items: flex-start;
425
+ width: 100%;
544
426
 
545
427
  @media (max-width: 500px) {
546
- flex-wrap: wrap;
428
+ flex-direction: column;
547
429
  }
548
430
  }
549
431
 
550
- &__left_wrapper {
432
+ &_product_left_container {
551
433
  display: flex;
552
- flex-direction: column;
553
- align-items: flex-start;
434
+ flex: 1 0 0;
435
+ width: 100%;
554
436
  gap: 16px;
555
437
  }
556
438
 
557
- &__card_icon {
558
- width: 60px;
559
- height: 40px;
560
- border-radius: 4px;
439
+ &_product_image {
440
+ height: 148px;
441
+ width: 128px;
442
+ }
443
+
444
+ &_product_info_wrapper {
445
+ display: flex;
446
+ flex-direction: column;
447
+ gap: 6px;
561
448
  }
562
449
 
563
- &__remove_card_btn {
564
- background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
565
- border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
566
- border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
567
- border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
568
- border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
569
- color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
570
- font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
571
- font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
572
- font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
573
- font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
574
- line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
575
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
576
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
577
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
578
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
579
- text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
580
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
450
+ &_product_right_container {
451
+ display: flex;
452
+ flex-direction: row;
453
+ gap: var(--_ctm-lt-im-gp);
454
+ align-items: flex-start;
581
455
 
582
- &:hover {
583
- background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
584
- border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
585
- border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
586
- border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
587
- border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
588
- color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
589
- font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
590
- font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
591
- font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
592
- font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
593
- line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
594
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
595
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
596
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
597
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
598
- text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
599
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
456
+ @media (max-width: 500px) {
457
+ align-self: flex-end;
600
458
  }
601
459
  }
602
460
 
603
- &__info_wrapper {
461
+ &_qty_wrapper {
604
462
  display: flex;
605
- flex-direction: column;
606
- gap: var(--_ctm-lt-ll-ad-it-gp);
607
- white-space: nowrap;
463
+ flex-direction: row;
464
+ align-items: center;
465
+ gap: 4px;
608
466
  }
609
467
 
610
- &_right_container {
468
+ &_shipping_option_container {
611
469
  display: flex;
612
- gap: 6px;
613
- align-items: flex-start;
470
+ flex-direction: column;
471
+ gap: 24px;
614
472
 
615
473
  @media (max-width: 500px) {
616
- justify-content: flex-end;
474
+ flex-direction: row;
617
475
  }
618
476
  }
619
477
 
620
- &_input {
621
- display: flex;
478
+ &_shiping_option_heading_wrapper {
479
+ display: grid;
480
+ grid-template-columns: 1fr 2fr 2fr 0.5fr;
481
+ gap: 16px;
482
+ white-space: nowrap;
483
+ align-items: center;
484
+
485
+ @media (max-width: 500px) {
486
+ grid-template-columns: auto;
487
+ }
488
+ }
489
+
490
+ .chk_multi_address_icon {
491
+ &:hover {
492
+ svg {
493
+ path {
494
+ stroke: var(--_error-700);
495
+ }
496
+ }
497
+ }
498
+ }
499
+ .chk_shiping_address_form_input {
622
500
  padding: 10px;
623
- max-width: 96px;
501
+ width: -webkit-fill-available;
502
+ position: relative;
624
503
  background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
625
504
  border-color: var(--_ctm-dn-it-bx-dn-br-cr);
626
505
  border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
@@ -638,15 +517,23 @@ $dark-color: #343a40;
638
517
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
639
518
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
640
519
 
641
- .icon {
642
- svg {
643
- path {
644
- stroke: #667085;
645
- }
520
+ .custom-arrows {
521
+ position: absolute;
522
+ right: 6px;
523
+ top: 50%;
524
+ transform: translateY(-50%);
525
+ display: flex;
526
+ flex-direction: column;
527
+
528
+ .arrow {
529
+ all: unset;
530
+ cursor: pointer;
531
+ font-size: 10px;
532
+ line-height: 1;
646
533
  }
647
534
  }
648
535
 
649
- .input_field {
536
+ .input-field {
650
537
  color: var(--_ctm-dn-it-bx-dn-cr);
651
538
  font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
652
539
  font-size: var(--_ctm-dn-it-bx-dn-ft-se);
@@ -654,110 +541,303 @@ $dark-color: #343a40;
654
541
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
655
542
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
656
543
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
544
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
545
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
657
546
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
658
547
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
659
548
  }
660
549
  }
661
550
  }
662
551
 
663
- .chk_billing_address {
664
- width: 100%;
552
+ .shipping-method {
665
553
  display: flex;
666
554
  flex-direction: column;
667
- background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
668
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
555
+ gap: var(--_ctm-lt-im-gp);
669
556
 
670
- &_form_container {
671
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
672
- padding-top: 24px;
673
- display: flex;
674
- flex-direction: column;
675
- gap: 24px;
557
+ &__grid {
558
+ display: grid;
559
+ grid-template-columns: 1fr;
560
+ gap: var(--_ctm-lt-im-gp);
561
+
562
+ @media (min-width: 768px) {
563
+ grid-template-columns: 1fr 1fr;
564
+ }
676
565
  }
677
566
 
678
- &_form_wrapper {
567
+ &__group {
679
568
  display: flex;
680
569
  flex-direction: column;
681
- gap: 24px;
682
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
570
+ gap: var(--_ctm-lt-ll-ad-it-gp);
683
571
  }
684
572
 
685
- .shipping_address_container {
573
+ &__options {
686
574
  display: flex;
687
575
  flex-direction: column;
688
- gap: 24px;
576
+ gap: 12px;
689
577
  }
690
578
 
691
- .shipping_address_heading_container {
579
+ &__option {
692
580
  display: flex;
693
- justify-content: space-between;
694
581
  align-items: center;
695
- }
582
+ cursor: pointer;
583
+ transition: all 0.2s ease;
696
584
 
697
- form {
698
- display: flex;
699
- flex-direction: column;
700
- gap: 0.75rem;
701
- max-width: calc(100% - 200px);
585
+ input[type="radio"] {
586
+ margin-right: 12px;
587
+ width: 16px;
588
+ height: 16px;
589
+ accent-color: #2563eb;
590
+ cursor: pointer;
591
+ }
702
592
 
703
- @media (max-width: 500px) {
704
- max-width: 100%;
593
+ &.selected {
594
+ background-color: #f0f5ff;
595
+ border-color: #2563eb;
705
596
  }
706
597
  }
598
+ }
707
599
 
708
- .chk_shipping_address_form_group {
600
+ .chk_payment-options {
601
+ display: flex;
602
+ flex-direction: column;
603
+ gap: var(--_ctm-lt-im-gp);
604
+
605
+ .chk_payment_option_wrapper {
709
606
  display: flex;
710
- justify-content: space-between;
711
- flex-direction: row;
712
607
  gap: var(--_ctm-lt-im-gp);
608
+ flex-direction: column;
713
609
  }
714
610
 
715
- .chk_shipping_address_input_container {
716
- display: flex;
611
+ .chk_payment_option {
717
612
  width: 100%;
613
+ display: flex;
614
+ flex-direction: column;
615
+ background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
616
+ border-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
617
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
618
+ border-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
619
+ border-width: var(--_ctm-dn-pt-os-cr-dn-br-wh);
620
+ box-shadow: var(--_ctm-dn-pt-os-cr-dn-sw-ae) var(--_ctm-dn-pt-os-cr-dn-sw-br)
621
+ var(--_ctm-dn-pt-os-cr-dn-sw-sd) var(--_ctm-dn-pt-os-cr-dn-sw-cr);
622
+
623
+ &__other_option_wrapper {
624
+ display: flex;
625
+ width: 100%;
626
+ justify-content: space-between;
627
+ padding: 16px;
628
+
629
+ @media (max-width: 500px) {
630
+ flex-direction: column;
631
+ }
632
+ }
633
+
634
+ &_left_container {
635
+ display: flex;
636
+ gap: 24px;
637
+ align-items: flex-start;
638
+
639
+ @media (max-width: 500px) {
640
+ flex-wrap: wrap;
641
+ }
642
+ }
643
+
644
+ &__left_wrapper {
645
+ display: flex;
646
+ flex-direction: column;
647
+ align-items: flex-start;
648
+ gap: 16px;
649
+ }
650
+
651
+ &__card_icon {
652
+ width: 60px;
653
+ height: 40px;
654
+ }
655
+
656
+ &__remove_card_btn {
657
+ background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
658
+ border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
659
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
660
+ border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
661
+ border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
662
+ color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
663
+ font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
664
+ font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
665
+ font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
666
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
667
+ line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
668
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
669
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
670
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
671
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
672
+ text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
673
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
674
+
675
+ &:hover {
676
+ background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
677
+ border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
678
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
679
+ border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
680
+ border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
681
+ color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
682
+ font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
683
+ font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
684
+ font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
685
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
686
+ line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
687
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
688
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
689
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
690
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
691
+ text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
692
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
693
+ }
694
+ }
695
+
696
+ &__info_wrapper {
697
+ display: flex;
698
+ flex-direction: column;
699
+ gap: var(--_ctm-lt-ll-ad-it-gp);
700
+ white-space: nowrap;
701
+ }
702
+
703
+ &_right_container {
704
+ display: flex;
705
+ gap: 6px;
706
+ align-items: flex-start;
707
+
708
+ @media (max-width: 500px) {
709
+ justify-content: flex-end;
710
+ }
711
+ }
712
+
713
+ &_input {
714
+ display: flex;
715
+ padding: 10px;
716
+ max-width: 96px;
717
+ background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
718
+ border-color: var(--_ctm-dn-it-bx-dn-br-cr);
719
+ border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
720
+ border-style: var(--_ctm-dn-it-bx-dn-br-se);
721
+ border-width: var(--_ctm-dn-it-bx-dn-br-wh);
722
+ color: var(--_ctm-dn-it-bx-dn-cr);
723
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
724
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
725
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
726
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
727
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
728
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
729
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
730
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
731
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
732
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
733
+
734
+ .icon {
735
+ svg {
736
+ path {
737
+ stroke: #667085;
738
+ }
739
+ }
740
+ }
741
+
742
+ .input_field {
743
+ color: var(--_ctm-dn-it-bx-dn-cr);
744
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
745
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
746
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
747
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
748
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
749
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
750
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
751
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
752
+ }
753
+ }
718
754
  }
719
755
 
720
- .chk_shipping_address_input_wrapper {
756
+ .chk_billing_address {
757
+ width: 100%;
721
758
  display: flex;
722
759
  flex-direction: column;
723
- gap: var(--_ctm-lt-ll-ad-it-gp);
724
- width: 100%;
725
- }
760
+ background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
761
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
726
762
 
727
- .chk_shipping_address_form_label {
728
- white-space: nowrap;
729
- color: var(--_ctm-dn-it-ll-dn-cr);
730
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
731
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
732
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
733
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
734
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
735
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
736
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
737
- text-decoration: var(--_ctm-dn-it-ll-dn-ue);
738
- }
763
+ &_form_container {
764
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
765
+ padding-top: 24px;
766
+ display: flex;
767
+ flex-direction: column;
768
+ gap: 24px;
769
+ }
739
770
 
740
- .chk_shiping_address_form_input {
741
- padding: 10px;
742
- width: -webkit-fill-available;
743
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
744
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
745
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
746
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
747
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
748
- color: var(--_ctm-dn-it-bx-dn-cr);
749
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
750
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
751
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
752
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
753
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
754
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
755
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
756
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
757
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
758
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
771
+ &_form_wrapper {
772
+ display: flex;
773
+ flex-direction: column;
774
+ gap: 24px;
775
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
776
+ }
777
+
778
+ .shipping_address_container {
779
+ display: flex;
780
+ flex-direction: column;
781
+ gap: 24px;
782
+ }
783
+
784
+ .shipping_address_heading_container {
785
+ display: flex;
786
+ justify-content: space-between;
787
+ align-items: center;
788
+ }
789
+
790
+ form {
791
+ display: flex;
792
+ flex-direction: column;
793
+ gap: 0.75rem;
794
+ max-width: calc(100% - 200px);
795
+
796
+ @media (max-width: 500px) {
797
+ max-width: 100%;
798
+ }
799
+ }
800
+
801
+ .chk_shipping_address_form_group {
802
+ display: flex;
803
+ justify-content: space-between;
804
+ flex-direction: row;
805
+ gap: var(--_ctm-lt-im-gp);
806
+ }
759
807
 
760
- .input-field {
808
+ .chk_shipping_address_input_container {
809
+ display: flex;
810
+ width: 100%;
811
+ }
812
+
813
+ .chk_shipping_address_input_wrapper {
814
+ display: flex;
815
+ flex-direction: column;
816
+ gap: var(--_ctm-lt-ll-ad-it-gp);
817
+ width: 100%;
818
+ }
819
+
820
+ .chk_shipping_address_form_label {
821
+ white-space: nowrap;
822
+ color: var(--_ctm-dn-it-ll-dn-cr);
823
+ font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
824
+ font-size: var(--_ctm-dn-it-ll-dn-ft-se);
825
+ font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
826
+ font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
827
+ line-height: var(--_ctm-dn-it-ll-dn-le-ht);
828
+ letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
829
+ text-align: var(--_ctm-dn-it-ll-dn-tt-an);
830
+ text-decoration: var(--_ctm-dn-it-ll-dn-ue);
831
+ }
832
+
833
+ .chk_shiping_address_form_input {
834
+ padding: 10px;
835
+ width: -webkit-fill-available;
836
+ background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
837
+ border-color: var(--_ctm-dn-it-bx-dn-br-cr);
838
+ border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
839
+ border-style: var(--_ctm-dn-it-bx-dn-br-se);
840
+ border-width: var(--_ctm-dn-it-bx-dn-br-wh);
761
841
  color: var(--_ctm-dn-it-bx-dn-cr);
762
842
  font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
763
843
  font-size: var(--_ctm-dn-it-bx-dn-ft-se);
@@ -769,192 +849,189 @@ $dark-color: #343a40;
769
849
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
770
850
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
771
851
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
852
+
853
+ .input-field {
854
+ color: var(--_ctm-dn-it-bx-dn-cr);
855
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
856
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
857
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
858
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
859
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
860
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
861
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
862
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
863
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
864
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
865
+ }
772
866
  }
773
- }
774
867
 
775
- input[type="checkbox"] {
776
- width: auto;
777
- }
868
+ input[type="checkbox"] {
869
+ width: auto;
870
+ }
778
871
 
779
- .error-msg {
780
- font-size: 12px;
781
- color: #ff0000;
782
- }
783
- label {
784
- display: flex;
785
- align-items: center;
786
- gap: 0.5rem;
787
- font-size: 14px;
788
- }
872
+ .error-msg {
873
+ font-size: 12px;
874
+ color: #ff0000;
875
+ }
876
+ label {
877
+ display: flex;
878
+ align-items: center;
879
+ gap: 0.5rem;
880
+ font-size: 14px;
881
+ }
789
882
 
790
- .checkbox-group {
791
- display: flex;
792
- align-items: center;
793
- justify-content: start;
794
- gap: 8px;
795
- }
883
+ .checkbox-group {
884
+ display: flex;
885
+ align-items: center;
886
+ justify-content: start;
887
+ gap: 8px;
888
+ }
796
889
 
797
- .chk_shipping_address_submit_btn {
798
- padding: 8px 24px;
799
- width: fit-content;
800
- background-color: var(--_ctm-dn-it-bn-dn-bd-cr, var(--_primary-400));
801
- border-color: var(--_ctm-dn-it-bn-dn-br-cr);
802
- border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
803
- border-style: var(--_ctm-dn-it-bn-dn-br-se);
804
- border-width: var(--_ctm-dn-it-bn-dn-br-wh);
805
- color: var(--_ctm-dn-it-bn-dn-cr);
806
- font-family: var(--_ctm-dn-it-bn-dn-ft-fy);
807
- font-size: var(--_ctm-dn-it-bn-dn-ft-se);
808
- font-style: var(--_ctm-dn-it-bn-dn-ft-se-ic);
809
- font-weight: var(--_ctm-dn-it-bn-dn-ft-wt);
810
- line-height: var(--_ctm-dn-it-bn-dn-le-ht);
811
- letter-spacing: var(--_ctm-dn-it-bn-dn-lr-sg);
812
- box-shadow: var(--_ctm-dn-it-bn-dn-sw-ae) var(--_ctm-dn-it-bn-dn-sw-br)
813
- var(--_ctm-dn-it-bn-dn-sw-sd) var(--_ctm-dn-it-bn-dn-sw-cr);
814
- text-align: var(--_ctm-dn-it-bn-dn-tt-an);
815
- text-decoration: var(--_ctm-dn-it-bn-dn-ue);
816
- }
890
+ .chk_shipping_address_submit_btn {
891
+ padding: 8px 24px;
892
+ width: fit-content;
893
+ background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
894
+ border-color: var(--_ctm-dn-it-bn-dn-br-cr);
895
+ border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
896
+ border-style: var(--_ctm-dn-it-bn-dn-br-se);
897
+ border-width: var(--_ctm-dn-it-bn-dn-br-wh);
898
+ color: var(--_ctm-dn-it-bn-dn-cr);
899
+ font-family: var(--_ctm-dn-it-bn-dn-ft-fy);
900
+ font-size: var(--_ctm-dn-it-bn-dn-ft-se);
901
+ font-style: var(--_ctm-dn-it-bn-dn-ft-se-ic);
902
+ font-weight: var(--_ctm-dn-it-bn-dn-ft-wt);
903
+ line-height: var(--_ctm-dn-it-bn-dn-le-ht);
904
+ letter-spacing: var(--_ctm-dn-it-bn-dn-lr-sg);
905
+ box-shadow: var(--_ctm-dn-it-bn-dn-sw-ae) var(--_ctm-dn-it-bn-dn-sw-br)
906
+ var(--_ctm-dn-it-bn-dn-sw-sd) var(--_ctm-dn-it-bn-dn-sw-cr);
907
+ text-align: var(--_ctm-dn-it-bn-dn-tt-an);
908
+ text-decoration: var(--_ctm-dn-it-bn-dn-ue);
909
+ }
817
910
 
818
- &_same_as_billing_address_chkbx {
819
- color: var(--_ctm-dn-cx-ll-dn-cr);
820
- font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
821
- font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
822
- font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
823
- font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
824
- line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
825
- letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
826
- text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
827
- text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
828
- }
911
+ &_same_as_billing_address_chkbx {
912
+ color: var(--_ctm-dn-cx-ll-dn-cr);
913
+ font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
914
+ font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
915
+ font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
916
+ font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
917
+ line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
918
+ letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
919
+ text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
920
+ text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
921
+ }
829
922
 
830
- &_secondary_button {
831
- background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
832
- border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
833
- border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
834
- border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
835
- border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
836
- color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
837
- font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
838
- font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
839
- font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
840
- font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
841
- line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
842
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
843
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
844
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
845
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
846
- text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
847
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
923
+ &_secondary_button {
924
+ background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
925
+ border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
926
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
927
+ border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
928
+ border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
929
+ color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
930
+ font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
931
+ font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
932
+ font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
933
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
934
+ line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
935
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
936
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
937
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
938
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
939
+ text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
940
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
941
+
942
+ &:hover {
943
+ background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
944
+ border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
945
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
946
+ border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
947
+ border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
948
+ color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
949
+ font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
950
+ font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
951
+ font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
952
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
953
+ line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
954
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
955
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
956
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
957
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
958
+ text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
959
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
960
+ }
961
+ }
848
962
 
849
- &:hover {
850
- background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
851
- border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
852
- border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
853
- border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
854
- border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
855
- color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
856
- font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
857
- font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
858
- font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
859
- font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
860
- line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
861
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
862
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
863
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
864
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
865
- text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
866
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
963
+ &_button_wrapper {
964
+ display: flex;
965
+ align-items: center;
966
+ gap: 16px;
867
967
  }
868
968
  }
869
969
 
870
- &_button_wrapper {
970
+ .payment_heading {
971
+ padding: 12px;
972
+ border-bottom-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
973
+ border-bottom-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
974
+ border-bottom-width: thin;
871
975
  display: flex;
872
- align-items: center;
873
- gap: 16px;
874
- }
875
- }
876
-
877
- .payment_heading {
878
- padding: 12px;
879
- border-bottom-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
880
- border-bottom-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
881
- border-bottom-width: thin;
882
- display: flex;
883
- justify-content: space-between;
884
- &.px_0 {
885
- padding-inline: 0px;
976
+ justify-content: space-between;
886
977
  }
887
- }
888
978
 
889
- .chk_payment-card {
890
- max-width: 50%;
979
+ .chk_payment-card {
980
+ max-width: 50%;
891
981
 
892
- &__form {
893
- display: grid;
894
- gap: 12px;
895
- }
982
+ &__form {
983
+ display: grid;
984
+ gap: 12px;
985
+ }
896
986
 
897
- &__input_wrapper {
898
- display: flex;
899
- flex-direction: column;
900
- gap: var(--_ctm-lt-ll-ad-it-gp);
901
- width: 100%;
902
- }
987
+ &__input_wrapper {
988
+ display: flex;
989
+ flex-direction: column;
990
+ gap: var(--_ctm-lt-ll-ad-it-gp);
991
+ width: 100%;
992
+ }
903
993
 
904
- &__label {
905
- display: flex;
906
- flex-direction: column;
907
- white-space: nowrap;
908
- color: var(--_ctm-dn-it-ll-dn-cr);
909
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
910
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
911
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
912
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
913
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
914
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
915
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
916
- text-decoration: var(--_ctm-dn-it-ll-dn-ue);
917
- }
994
+ &__label {
995
+ display: flex;
996
+ flex-direction: column;
997
+ white-space: nowrap;
998
+ color: var(--_ctm-dn-it-ll-dn-cr);
999
+ font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
1000
+ font-size: var(--_ctm-dn-it-ll-dn-ft-se);
1001
+ font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
1002
+ font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
1003
+ line-height: var(--_ctm-dn-it-ll-dn-le-ht);
1004
+ letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
1005
+ text-align: var(--_ctm-dn-it-ll-dn-tt-an);
1006
+ text-decoration: var(--_ctm-dn-it-ll-dn-ue);
1007
+ }
918
1008
 
919
- &__card-input-with-logo {
920
- position: relative;
1009
+ &__card-input-with-logo {
1010
+ position: relative;
921
1011
 
922
- input {
923
- padding-right: 50px;
924
- }
1012
+ input {
1013
+ padding-right: 50px;
1014
+ }
925
1015
 
926
- .chk_payment-card__logo {
927
- position: absolute;
928
- right: 10px;
929
- top: 50%;
930
- transform: translateY(-50%);
931
- height: 24px;
932
- width: auto;
933
- pointer-events: none;
1016
+ .chk_payment-card__logo {
1017
+ position: absolute;
1018
+ right: 10px;
1019
+ top: 50%;
1020
+ transform: translateY(-50%);
1021
+ height: 24px;
1022
+ width: auto;
1023
+ pointer-events: none;
1024
+ }
934
1025
  }
935
- }
936
-
937
- &__input {
938
- padding: 10px;
939
- width: -webkit-fill-available;
940
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
941
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
942
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
943
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
944
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
945
- color: var(--_ctm-dn-it-bx-dn-cr);
946
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
947
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
948
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
949
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
950
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
951
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
952
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
953
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
954
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
955
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
956
1026
 
957
- .input-field {
1027
+ &__input {
1028
+ padding: 10px;
1029
+ width: -webkit-fill-available;
1030
+ background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
1031
+ border-color: var(--_ctm-dn-it-bx-dn-br-cr);
1032
+ border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
1033
+ border-style: var(--_ctm-dn-it-bx-dn-br-se);
1034
+ border-width: var(--_ctm-dn-it-bx-dn-br-wh);
958
1035
  color: var(--_ctm-dn-it-bx-dn-cr);
959
1036
  font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
960
1037
  font-size: var(--_ctm-dn-it-bx-dn-ft-se);
@@ -966,339 +1043,341 @@ $dark-color: #343a40;
966
1043
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
967
1044
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
968
1045
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1046
+
1047
+ .input-field {
1048
+ color: var(--_ctm-dn-it-bx-dn-cr);
1049
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1050
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1051
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1052
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1053
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1054
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1055
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1056
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1057
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1058
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1059
+ }
969
1060
  }
970
- }
971
1061
 
972
- &__row {
973
- display: flex;
974
- gap: var(--_ctm-lt-im-gp);
975
- }
1062
+ &__row {
1063
+ display: flex;
1064
+ gap: var(--_ctm-lt-im-gp);
1065
+ }
976
1066
 
977
- &__half {
978
- flex: 1;
979
- }
1067
+ &__half {
1068
+ flex: 1;
1069
+ }
980
1070
 
981
- &__button {
982
- padding: 10px;
983
- background-color: #007bff;
984
- color: white;
985
- border: none;
986
- border-radius: 4px;
987
- font-weight: bold;
988
- cursor: pointer;
989
- }
1071
+ &__button {
1072
+ padding: 10px;
1073
+ background-color: #007bff;
1074
+ color: white;
1075
+ border: none;
1076
+ border-radius: 4px;
1077
+ font-weight: bold;
1078
+ cursor: pointer;
1079
+ }
990
1080
 
991
- &__saved {
992
- border: 1px solid #ccc;
993
- border-radius: 8px;
994
- padding: 16px;
995
- display: grid;
996
- gap: 10px;
997
- }
1081
+ &__saved {
1082
+ border: 1px solid #ccc;
1083
+ border-radius: 8px;
1084
+ padding: 16px;
1085
+ display: grid;
1086
+ gap: 10px;
1087
+ }
998
1088
 
999
- &__info {
1000
- display: flex;
1001
- align-items: center;
1002
- gap: 10px;
1089
+ &__info {
1090
+ display: flex;
1091
+ align-items: center;
1092
+ gap: 10px;
1003
1093
 
1004
- img {
1005
- width: 40px;
1006
- height: auto;
1094
+ img {
1095
+ width: 40px;
1096
+ height: auto;
1097
+ }
1007
1098
  }
1008
- }
1009
1099
 
1010
- &__meta {
1011
- font-size: 0.9rem;
1012
- color: #666;
1013
- }
1100
+ &__meta {
1101
+ font-size: 0.9rem;
1102
+ color: #666;
1103
+ }
1014
1104
 
1015
- &__actions {
1016
- display: flex;
1017
- gap: 10px;
1105
+ &__actions {
1106
+ display: flex;
1107
+ gap: 10px;
1018
1108
 
1019
- button {
1020
- flex: 1;
1021
- }
1109
+ button {
1110
+ flex: 1;
1111
+ }
1022
1112
 
1023
- input {
1024
- flex: 1;
1113
+ input {
1114
+ flex: 1;
1115
+ }
1025
1116
  }
1026
- }
1027
1117
 
1028
- &__remove {
1029
- background: none;
1030
- border: none;
1031
- color: #007bff;
1032
- padding: 0;
1033
- font-size: 0.9rem;
1034
- cursor: pointer;
1035
- text-align: left;
1118
+ &__remove {
1119
+ background: none;
1120
+ border: none;
1121
+ color: #007bff;
1122
+ padding: 0;
1123
+ font-size: 0.9rem;
1124
+ cursor: pointer;
1125
+ text-align: left;
1126
+ }
1036
1127
  }
1037
1128
  }
1038
- }
1039
-
1040
- .chk_submit-btn {
1041
- padding: 16px 24px;
1042
- width: fit-content;
1043
- background-color: var(--_primary-400);
1044
- color: var(--_base-white);
1045
- border-radius: 4px;
1046
- margin-top: 12px;
1047
- font-weight: 600;
1048
-
1049
- &:hover {
1050
- background-color: var(--_primary-500);
1051
- }
1052
- // padding: 8px 24px;
1053
- // width: fit-content;
1054
- // background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
1055
- // border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
1056
- // border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
1057
- // border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
1058
- // border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
1059
- // color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
1060
- // font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
1061
- // font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
1062
- // font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
1063
- // font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
1064
- // line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
1065
- // letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
1066
- // box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
1067
- // var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
1068
- // text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
1069
- // text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
1070
-
1071
- // &:hover {
1072
- // background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
1073
- // border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
1074
- // border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
1075
- // border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
1076
- // border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
1077
- // color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
1078
- // font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
1079
- // font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
1080
- // font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
1081
- // font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
1082
- // line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
1083
- // letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
1084
- // box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
1085
- // var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
1086
- // text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
1087
- // text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
1088
- // }
1089
- }
1090
1129
 
1091
- .chk_checkbox_wrapper {
1092
- display: flex;
1093
- align-items: flex-start;
1094
- gap: 6px;
1130
+ .chk_submit-btn {
1131
+ padding: 8px 24px;
1132
+ width: fit-content;
1133
+ background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
1134
+ border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
1135
+ border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
1136
+ border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
1137
+ border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
1138
+ color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
1139
+ font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
1140
+ font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
1141
+ font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
1142
+ font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
1143
+ line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
1144
+ letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
1145
+ box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
1146
+ var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
1147
+ text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
1148
+ text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
1095
1149
 
1096
- input {
1097
- width: auto !important;
1150
+ &:hover {
1151
+ background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
1152
+ border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
1153
+ border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
1154
+ border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
1155
+ border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
1156
+ color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
1157
+ font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
1158
+ font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
1159
+ font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
1160
+ font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
1161
+ line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
1162
+ letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
1163
+ box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
1164
+ var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
1165
+ text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
1166
+ text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
1167
+ }
1098
1168
  }
1099
- }
1100
1169
 
1101
- .react-international-phone-country-selector-button {
1102
- border: none !important;
1103
- height: auto !important;
1104
- }
1170
+ .chk_checkbox_wrapper {
1171
+ display: flex;
1172
+ align-items: flex-start;
1173
+ gap: 6px;
1105
1174
 
1106
- .react-international-phone-input {
1107
- height: auto;
1108
- border: none !important;
1109
- color: var(--_ctm-dn-it-bx-dn-cr);
1110
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1111
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1112
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1113
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1114
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1115
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1116
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1117
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1118
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1119
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1120
- }
1175
+ input {
1176
+ width: auto !important;
1177
+ }
1178
+ }
1121
1179
 
1122
- .chk_heading_info {
1123
- color: var(--_ctm-dn-it-hs-dn-cr);
1124
- font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
1125
- font-size: var(--_ctm-dn-it-hs-dn-ft-se);
1126
- font-style: var(--_ctm-dn-it-hs-dn-ft-se-ic);
1127
- font-weight: var(--_ctm-dn-it-hs-dn-ft-wt);
1128
- line-height: var(--_ctm-dn-it-hs-dn-le-ht);
1129
- letter-spacing: var(--_ctm-dn-it-hs-dn-lr-sg);
1130
- text-align: var(--_ctm-dn-it-hs-dn-tt-an);
1131
- text-decoration: var(--_ctm-dn-it-hs-dn-ue);
1132
- }
1180
+ .react-international-phone-country-selector-button {
1181
+ border: none !important;
1182
+ height: auto !important;
1183
+ }
1133
1184
 
1134
- .chk_primary_info {
1135
- color: var(--_ctm-dn-py-ve-tt-dn-cr);
1136
- font-family: var(--_ctm-dn-py-ve-tt-dn-ft-fy);
1137
- font-size: var(--_ctm-dn-py-ve-tt-dn-ft-se);
1138
- font-style: var(--_ctm-dn-py-ve-tt-dn-ft-se-ic);
1139
- font-weight: var(--_ctm-dn-py-ve-tt-dn-ft-wt);
1140
- line-height: var(--_ctm-dn-py-ve-tt-dn-le-ht);
1141
- letter-spacing: var(--_ctm-dn-py-ve-tt-dn-lr-sg);
1142
- text-align: var(--_ctm-dn-py-ve-tt-dn-tt-an);
1143
- text-decoration: var(--_ctm-dn-py-ve-tt-dn-ue);
1144
- }
1185
+ .react-international-phone-input {
1186
+ height: auto;
1187
+ border: none !important;
1188
+ color: var(--_ctm-dn-it-bx-dn-cr);
1189
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1190
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1191
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1192
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1193
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1194
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1195
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1196
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1197
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1198
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1199
+ }
1145
1200
 
1146
- .chk_secondary_info {
1147
- color: var(--_ctm-dn-sy-ve-tt-dn-cr);
1148
- font-family: var(--_ctm-dn-sy-ve-tt-dn-ft-fy);
1149
- font-size: var(--_ctm-dn-sy-ve-tt-dn-ft-se);
1150
- font-style: var(--_ctm-dn-sy-ve-tt-dn-ft-se-ic);
1151
- font-weight: var(--_ctm-dn-sy-ve-tt-dn-ft-wt);
1152
- line-height: var(--_ctm-dn-sy-ve-tt-dn-le-ht);
1153
- letter-spacing: var(--_ctm-dn-sy-ve-tt-dn-lr-sg);
1154
- text-align: var(--_ctm-dn-sy-ve-tt-dn-tt-an);
1155
- text-decoration: var(--_ctm-dn-sy-ve-tt-dn-ue);
1156
- }
1201
+ .chk_heading_info {
1202
+ color: var(--_ctm-dn-it-hs-dn-cr);
1203
+ font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
1204
+ font-size: var(--_ctm-dn-it-hs-dn-ft-se);
1205
+ font-style: var(--_ctm-dn-it-hs-dn-ft-se-ic);
1206
+ font-weight: var(--_ctm-dn-it-hs-dn-ft-wt);
1207
+ line-height: var(--_ctm-dn-it-hs-dn-le-ht);
1208
+ letter-spacing: var(--_ctm-dn-it-hs-dn-lr-sg);
1209
+ text-align: var(--_ctm-dn-it-hs-dn-tt-an);
1210
+ text-decoration: var(--_ctm-dn-it-hs-dn-ue);
1211
+ }
1157
1212
 
1158
- .chk_checkbox_wrapper {
1159
- display: flex;
1160
- width: fit-content;
1161
- align-items: center;
1162
- font-family: sans-serif;
1213
+ .chk_primary_info {
1214
+ color: var(--_ctm-dn-py-ve-tt-dn-cr);
1215
+ font-family: var(--_ctm-dn-py-ve-tt-dn-ft-fy);
1216
+ font-size: var(--_ctm-dn-py-ve-tt-dn-ft-se);
1217
+ font-style: var(--_ctm-dn-py-ve-tt-dn-ft-se-ic);
1218
+ font-weight: var(--_ctm-dn-py-ve-tt-dn-ft-wt);
1219
+ line-height: var(--_ctm-dn-py-ve-tt-dn-le-ht);
1220
+ letter-spacing: var(--_ctm-dn-py-ve-tt-dn-lr-sg);
1221
+ text-align: var(--_ctm-dn-py-ve-tt-dn-tt-an);
1222
+ text-decoration: var(--_ctm-dn-py-ve-tt-dn-ue);
1223
+ }
1163
1224
 
1164
- input[type="checkbox"] {
1165
- display: none;
1225
+ .chk_secondary_info {
1226
+ color: var(--_ctm-dn-sy-ve-tt-dn-cr);
1227
+ font-family: var(--_ctm-dn-sy-ve-tt-dn-ft-fy);
1228
+ font-size: var(--_ctm-dn-sy-ve-tt-dn-ft-se);
1229
+ font-style: var(--_ctm-dn-sy-ve-tt-dn-ft-se-ic);
1230
+ font-weight: var(--_ctm-dn-sy-ve-tt-dn-ft-wt);
1231
+ line-height: var(--_ctm-dn-sy-ve-tt-dn-le-ht);
1232
+ letter-spacing: var(--_ctm-dn-sy-ve-tt-dn-lr-sg);
1233
+ text-align: var(--_ctm-dn-sy-ve-tt-dn-tt-an);
1234
+ text-decoration: var(--_ctm-dn-sy-ve-tt-dn-ue);
1166
1235
  }
1167
1236
 
1168
- .chk_shipping_address_use_as_billing_address_chkbx {
1237
+ .chk_checkbox_wrapper {
1169
1238
  display: flex;
1239
+ width: fit-content;
1170
1240
  align-items: center;
1171
- cursor: pointer;
1172
- gap: 10px;
1241
+ font-family: sans-serif;
1173
1242
 
1174
- .custom-checkbox {
1175
- width: 20px;
1176
- height: 20px;
1177
- border: 1px solid #d0d5dd;
1178
- border-radius: 4px;
1179
- position: relative;
1180
- background-color: #fff;
1181
- transition: all 0.2s ease;
1243
+ input[type="checkbox"] {
1244
+ display: none;
1245
+ }
1182
1246
 
1183
- &::after {
1184
- content: "";
1185
- position: absolute;
1186
- display: none;
1187
- left: 5px;
1188
- top: 0.5px;
1189
- width: 5px;
1190
- height: 10px;
1191
- border: solid #fff;
1192
- border-width: 0 2px 2px 0;
1193
- transform: rotate(45deg);
1247
+ .chk_shipping_address_use_as_billing_address_chkbx {
1248
+ display: flex;
1249
+ align-items: center;
1250
+ cursor: pointer;
1251
+ gap: 10px;
1252
+
1253
+ .custom-checkbox {
1254
+ width: 20px;
1255
+ height: 20px;
1256
+ border: 1px solid #d0d5dd;
1257
+ border-radius: 4px;
1258
+ position: relative;
1259
+ background-color: #fff;
1260
+ transition: all 0.2s ease;
1261
+
1262
+ &::after {
1263
+ content: "";
1264
+ position: absolute;
1265
+ display: none;
1266
+ left: 5px;
1267
+ top: 0.5px;
1268
+ width: 5px;
1269
+ height: 10px;
1270
+ border: solid #fff;
1271
+ border-width: 0 2px 2px 0;
1272
+ transform: rotate(45deg);
1273
+ }
1194
1274
  }
1195
1275
  }
1196
- }
1197
1276
 
1198
- input[type="checkbox"]:checked + label {
1199
- .custom-checkbox {
1200
- background-color: #004dff;
1201
- border-color: #004dff;
1277
+ input[type="checkbox"]:checked + label {
1278
+ .custom-checkbox {
1279
+ background-color: #004dff;
1280
+ border-color: #004dff;
1202
1281
 
1203
- &::after {
1204
- display: block;
1282
+ &::after {
1283
+ display: block;
1284
+ }
1205
1285
  }
1206
1286
  }
1207
1287
  }
1208
- }
1209
1288
 
1210
- .chk_change-link {
1211
- cursor: pointer;
1212
- align-self: flex-start;
1213
- white-space: nowrap;
1214
- display: flex;
1215
- gap: 4px;
1216
- align-items: center;
1217
- background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
1218
- border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
1219
- // border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
1220
- border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
1221
- border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
1222
- color: var(--_ctm-dn-sn-an-bn-dn-cr);
1223
- font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
1224
- font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
1225
- font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
1226
- font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
1227
- line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
1228
- letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
1229
- box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
1230
- var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
1231
- text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
1232
- text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
1233
- }
1289
+ .chk_change-link {
1290
+ cursor: pointer;
1291
+ align-self: flex-start;
1292
+ white-space: nowrap;
1293
+ display: flex;
1294
+ gap: 4px;
1295
+ align-items: center;
1296
+ background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
1297
+ border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
1298
+ border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
1299
+ border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
1300
+ border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
1301
+ color: var(--_ctm-dn-sn-an-bn-dn-cr);
1302
+ font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
1303
+ font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
1304
+ font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
1305
+ font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
1306
+ line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
1307
+ letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
1308
+ box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
1309
+ var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
1310
+ text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
1311
+ text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
1312
+ }
1234
1313
 
1235
- .chk_payment-card__note {
1236
- padding: 8px 6px;
1237
- display: flex;
1238
- align-items: center;
1239
- gap: 6px;
1240
- background-color: var(--_ctm-dn-ne-cr-dn-bd-cr);
1241
- border-color: var(--_ctm-dn-ne-cr-dn-br-cr);
1242
- // border-radius: var(--_ctm-dn-ne-cr-dn-br-rs);
1243
- border-radius: 0 0 4px 4px;
1244
- border-style: var(--_ctm-dn-ne-cr-dn-br-se);
1245
- border-width: var(--_ctm-dn-ne-cr-dn-br-wh);
1246
- color: var(--_ctm-dn-ne-cr-dn-cr);
1247
- font-family: var(--_ctm-dn-ne-cr-dn-ft-fy);
1248
- font-size: var(--_ctm-dn-ne-cr-dn-ft-se);
1249
- font-style: var(--_ctm-dn-ne-cr-dn-ft-se-ic);
1250
- font-weight: var(--_ctm-dn-ne-cr-dn-ft-wt);
1251
- line-height: var(--_ctm-dn-ne-cr-dn-le-ht);
1252
- letter-spacing: var(--_ctm-dn-ne-cr-dn-lr-sg);
1253
- box-shadow: var(--_ctm-dn-ne-cr-dn-sw-ae) var(--_ctm-dn-ne-cr-dn-sw-br)
1254
- var(--_ctm-dn-ne-cr-dn-sw-sd) var(--_ctm-dn-ne-cr-dn-sw-cr);
1255
- text-align: var(--_ctm-dn-ne-cr-dn-tt-an);
1256
- text-decoration: var(--_ctm-dn-ne-cr-dn-ue);
1257
- .icon {
1314
+ .chk_payment-card__note {
1315
+ padding: 8px 6px;
1258
1316
  display: flex;
1259
- svg {
1260
- width: var(--_ctm-dn-ne-cr-dn-in-se);
1261
- height: var(--_ctm-dn-ne-cr-dn-in-se);
1262
- path {
1263
- stroke: var(--_ctm-dn-ne-cr-dn-in-c1);
1317
+ align-items: center;
1318
+ gap: 6px;
1319
+ background-color: var(--_ctm-dn-ne-cr-dn-bd-cr);
1320
+ border-color: var(--_ctm-dn-ne-cr-dn-br-cr);
1321
+ border-radius: var(--_ctm-dn-ne-cr-dn-br-rs);
1322
+ border-style: var(--_ctm-dn-ne-cr-dn-br-se);
1323
+ border-width: var(--_ctm-dn-ne-cr-dn-br-wh);
1324
+ color: var(--_ctm-dn-ne-cr-dn-cr);
1325
+ font-family: var(--_ctm-dn-ne-cr-dn-ft-fy);
1326
+ font-size: var(--_ctm-dn-ne-cr-dn-ft-se);
1327
+ font-style: var(--_ctm-dn-ne-cr-dn-ft-se-ic);
1328
+ font-weight: var(--_ctm-dn-ne-cr-dn-ft-wt);
1329
+ line-height: var(--_ctm-dn-ne-cr-dn-le-ht);
1330
+ letter-spacing: var(--_ctm-dn-ne-cr-dn-lr-sg);
1331
+ box-shadow: var(--_ctm-dn-ne-cr-dn-sw-ae) var(--_ctm-dn-ne-cr-dn-sw-br)
1332
+ var(--_ctm-dn-ne-cr-dn-sw-sd) var(--_ctm-dn-ne-cr-dn-sw-cr);
1333
+ text-align: var(--_ctm-dn-ne-cr-dn-tt-an);
1334
+ text-decoration: var(--_ctm-dn-ne-cr-dn-ue);
1335
+
1336
+ .icon {
1337
+ svg {
1338
+ width: var(--_ctm-dn-ne-cr-dn-in-se);
1339
+ height: var(--_ctm-dn-ne-cr-dn-in-se);
1340
+ path {
1341
+ stroke: var(--_ctm-dn-ne-cr-dn-in-c1);
1342
+ }
1264
1343
  }
1265
1344
  }
1266
1345
  }
1267
- }
1268
-
1269
- .accordion-summary {
1270
- flex: 1;
1271
- display: flex;
1272
- flex-direction: column;
1273
- gap: 0.25rem;
1274
1346
 
1275
- .summary-content {
1347
+ .accordion-summary {
1348
+ flex: 1;
1276
1349
  display: flex;
1277
- flex-direction: row;
1278
- justify-content: space-between;
1279
- gap: 0.5rem;
1350
+ flex-direction: column;
1351
+ gap: 0.25rem;
1280
1352
 
1281
- .chk_shipping-summary {
1353
+ .summary-content {
1282
1354
  display: flex;
1283
- flex-direction: column;
1284
- gap: 12px;
1355
+ flex-direction: row;
1356
+ justify-content: space-between;
1357
+ gap: 0.5rem;
1285
1358
 
1286
- .chk_address {
1359
+ .chk_shipping-summary {
1287
1360
  display: flex;
1288
1361
  flex-direction: column;
1289
- gap: 6px;
1290
- }
1362
+ gap: 12px;
1363
+
1364
+ .chk_address {
1365
+ display: flex;
1366
+ flex-direction: column;
1367
+ gap: 6px;
1368
+ }
1291
1369
 
1292
- .contact {
1293
- font-size: 0.875rem;
1294
- color: $dark-color;
1295
- line-height: 1.4;
1370
+ .contact {
1371
+ font-size: 0.875rem;
1372
+ color: $dark-color;
1373
+ line-height: 1.4;
1374
+ }
1296
1375
  }
1297
- }
1298
1376
 
1299
- .right-btn {
1300
- display: flex;
1301
- gap: 24px;
1377
+ .right-btn {
1378
+ display: flex;
1379
+ gap: 24px;
1380
+ }
1302
1381
  }
1303
1382
  }
1304
1383
  }
@@ -1306,11 +1385,4 @@ $dark-color: #343a40;
1306
1385
  }
1307
1386
  }
1308
1387
  }
1309
-
1310
- .chk_primary_btn_link {
1311
- color: var(--_primary-400);
1312
- &:hover {
1313
- color: var(--_primary-500);
1314
- }
1315
- }
1316
1388
  }