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