apirocket 0.0.19 → 0.0.20

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 (4) hide show
  1. package/dist/ecommerce.css +1337 -1285
  2. package/dist/ecommerce.js +2 -2
  3. package/dist/ecommerce.js.map +1 -1
  4. package/package.json +2 -2
package/dist/ecommerce.css CHANGED
@@ -1,1095 +1,1089 @@
1
- .apirocket-summary {}
1
+ :root {
2
+ --cart-width: 540px;
3
+ --cart-background-color: #fff;
4
+ --cart-padding: 32px;
5
+ --cart-font-family: Arial, Helvetica, sans-serif;
2
6
 
3
- .apirocket-summary-top {
4
- margin-top: 56px;
5
- margin-bottom: 32px;
7
+ --cart-header-background-color: #f5f5f5;
8
+ --cart-header-border-color: #f5f5f5;
9
+ --cart-header-border-width: 1px;
10
+ --cart-header-text-font-size: 18px;
11
+ --cart-header-text-font-weight: normal;
12
+ --cart-header-text-font-color: #404040;
13
+ --cart-header-text-close-icon-color: #a3a3a3;
14
+ --cart-header-text-close-icon-size: 24px;
15
+
16
+ --cart-footer-background-color: #fff;
17
+ --cart-footer-border-color: #e5e5e5;
18
+ --cart-footer-border-width: 1px;
19
+ --cart-footer-text-font-size: 16px;
20
+ --cart-footer-text-font-weight: lighter;
21
+ --cart-footer-text-font-color: #404040;
22
+ --cart-footer-total-font-size: 18px;
23
+ --cart-footer-total-font-weight: bold;
24
+ --cart-footer-total-font-color: #000;
25
+
26
+ --cart-item-border-color: #e5e5e5;
27
+ --cart-item-border-width: 1px;
28
+ --cart-item-padding: 32px;
29
+ --cart-item-label-font-size: 14px;
30
+ --cart-item-label-font-weight: lighter;
31
+ --cart-item-label-font-color: #737373;
32
+ --cart-item-image-display: inherit;
33
+ --cart-item-image-width: 100px;
34
+ --cart-item-image-width-fullscreen: 150px;
35
+ --cart-item-name-font-size: 18px;
36
+ --cart-item-name-font-weight: bold;
37
+ --cart-item-name-font-color: #000;
38
+ --cart-item-description-font-size: 14px;
39
+ --cart-item-description-font-weight: lighter;
40
+ --cart-item-description-font-color: #000;
41
+ --cart-item-delete-icon-color: #404040;
42
+ --cart-item-delete-icon-color-hover: #000;
43
+ --cart-item-delete-icon-size: 18px;
44
+ --cart-item-form-border-color: #e5e5e5;
45
+ --cart-item-form-border-color-hover: #000;
46
+ --cart-item-form-border-width: 1px;
47
+ --cart-item-form-text-size: 14px;
48
+ --cart-item-form-text-weight: normal;
49
+ --cart-item-form-text-color: #000;
50
+ --cart-item-quantity-icon-color: #737373;
51
+ --cart-item-quantity-icon-background-color: transparent;
52
+ --cart-item-quantity-icon-size: 16px;
53
+ --cart-item-price-font-size: 16px;
54
+ --cart-item-price-font-weight: bold;
55
+ --cart-item-price-font-color: #404040;
56
+
57
+ --cart-button-font-size: 16px;
58
+ --cart-button-font-weight: normal;
59
+ --cart-button-font-color: #737373;
60
+ --cart-button-font-color-hover: #404040;
61
+ --cart-button-border-color: #e5e5e5;
62
+ --cart-button-border-color-hover: #404040;
63
+ --cart-button-border-radius: 4px;
64
+ --cart-button-background-color: transparent;
65
+ --cart-button-background-color-hover: transparent;
66
+ --cart-button-padding-x: 16px;
67
+ --cart-button-padding-y: 16px;
68
+
69
+ --cart-button-primary-text-color: #fff;
70
+ --cart-button-primary-text-color-hover: #fff;
71
+ --cart-button-primary-border-color: #1d4ed8;
72
+ --cart-button-primary-border-color-hover: #0d59f4;
73
+ --cart-button-primary-background-color: #1d4ed8;
74
+ --cart-button-primary-background-color-hover: #0d59f4;
75
+ /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
6
76
  }
7
77
 
8
- .apirocket-summary-header {
78
+ .apirocket-cart * { box-sizing: content-box; }
79
+
80
+ .apirocket-cart {
81
+ position: fixed;
82
+ z-index: 10000;
83
+ right: 0;
84
+ top: 0;
85
+ overflow: hidden;
86
+ width: var(--cart-width, 540px);
87
+ height: 100vh;
88
+ box-shadow: 1px 20px 8px rgba(0,0,0,.1);
89
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
90
+ background-color: var(--cart-background-color, #fff);
91
+ }
92
+
93
+ .apirocket-cart-content {
9
94
  display: flex;
10
- justify-content: flex-start;
11
- align-items: center;
12
- margin-bottom: 32px;
95
+ flex-direction: column;
96
+ height: 100%;
97
+ background-color: var(--cart-background-color, #fff);
13
98
  }
14
99
 
15
- .apirocket-summary-header-icon {
16
- flex: 0 1;
17
- margin-right: 16px;
100
+ .apirocket-cart-header {
101
+ display: flex;
102
+ flex: 0 0 96px;
103
+ align-items: center;
104
+ justify-content: space-between;
105
+ padding: 0px var(--cart-padding);
106
+ background-color: var(--cart-header-background-color, #f5f5f5);
107
+ border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
18
108
  }
19
109
 
20
- .apirocket-summary-header-content {}
110
+ .apirocket-cart-header-title {
111
+ font-size: var(--cart-header-text-font-size, 18px);
112
+ font-weight: var(--cart-header-text-font-weight, normal);
113
+ color: var(--cart-header-text-font-color, #404040)
114
+ }
21
115
 
22
- .apirocket-summary-header-title {
23
- font-size: 24px;
24
- font-weight: bold;
25
- line-height: 1.2;
26
- color: #404040;
27
- margin-bottom: 4px;
116
+ .apirocket-cart-header-close-icon {
117
+ height: var(--cart-header-text-close-icon-size, 24px);
118
+ width: var(--cart-header-text-close-icon-size, 24px);
119
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
120
+ cursor: pointer;
28
121
  }
29
122
 
30
- .apirocket-summary-header-subtitle {
31
- font-size: 18px;
32
- font-weight: normal;
33
- line-height: 1.2;
123
+ .apirocket-cart-header-continue {
124
+ display: none;
125
+ align-items: center;
126
+ text-align: left;
34
127
  color: #737373;
128
+ font-size: 16px;
129
+ font-weight: normal;
130
+ cursor: pointer;
35
131
  }
36
132
 
37
- .apirocket-summary-section {
38
- margin-top: 16px;
39
- border: 1px solid #d9d9d9;
40
- border-radius: 4px;
41
- padding: 24px;
133
+ .apirocket-cart-header-login {
134
+ display: none;
135
+ align-items: center;
136
+ text-align: right;
137
+ color: #737373;
138
+ font-size: 16px;
139
+ font-weight: normal;
140
+ cursor: pointer;
42
141
  }
43
142
 
44
- .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
45
- .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
143
+ .apirocket-cart-header-login svg,
144
+ .apirocket-cart-header-continue svg { margin-right: 16px; }
46
145
 
47
- .apirocket-summary-section-title {
146
+ .apirocket-cart-body {
147
+ flex: 1 1 auto;
148
+ padding: 0px;
149
+ background: var(--cart-background-color, #fff);
150
+ overflow-y: auto;
151
+ }
152
+
153
+ .apirocket-cart-body-message {
48
154
  font-size: 18px;
49
- font-weight: bold;
50
- line-height: 1.2;
51
- color: #404040;
52
- margin-bottom: 24px;
155
+ font-weight: var(--cart-item-description-font-weight, lighter);
156
+ color: #666;
157
+ padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
158
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
53
159
  }
54
160
 
55
- .apirocket-summary-section-subtitle {
56
- font-size: 16px;
57
- font-weight: bold;
58
- line-height: 1;
59
- color: #404040;
60
- margin-bottom: 16px;
161
+ .apirocket-cart-footer {
162
+ flex: 0 0 auto;
163
+ padding: var(--cart-padding, 32px);
164
+ background-color: var(--cart-footer-background-color, transparent);
165
+ border-top: var(--cart-footer-border-width, 1px) solid var(--cart-footer-border-color, #e5e5e5);
166
+ font-size: var(--cart-footer-text-font-size, 16px);
167
+ font-weight: var(--cart-footer-text-font-weight, lighter);
168
+ color: var(--cart-footer-text-font-color, #737373);
61
169
  }
62
170
 
63
- .apirocket-summary-section-text {
64
- font-size: 14px;
65
- font-weight: normal;
66
- line-height: 18px;
67
- color: #404040;
171
+ .apirocket-cart-footer-total {
172
+ font-size: var(--cart-footer-total-font-size, 18px);
173
+ font-weight: var(--cart-footer-total-font-weight, bold);
174
+ color: var(--cart-footer-total-font-color, #000);
68
175
  }
69
176
 
70
- .apirocket-summary-help {
177
+ .apirocket-cart-row {
71
178
  display: flex;
72
- justify-content: flex-start;
73
- align-items: center;
179
+ justify-content: space-between;
180
+ align-items: center;
74
181
  }
75
182
 
76
- .apirocket-summary-help-icon {
77
- flex: 0 1;
78
- padding-right: 12px;
183
+ .apirocket-cart-col {
184
+ flex: 1 1 auto;
185
+ margin-bottom: 16px;
79
186
  }
80
187
 
81
- .apirocket-summary-help-content {
82
- font-size: 14px;
83
- font-weight: normal;
84
- line-height: 1.2;
85
- color: #404040;
188
+ .apirocket-cart-item {
189
+ padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
190
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
86
191
  }
87
192
 
88
- .apirocket-summary-help-content a {
89
- display: block;
90
- color: #737373;
193
+ .apirocket-cart-item:last-child {
194
+ border-bottom: none;
195
+ margin-bottom: var(--cart-padding, 32px);
91
196
  }
92
197
 
93
- @media (max-width: 1000px) {
94
- .apirocket-summary-top { display: none; }
95
- .apirocket-summary-header { margin-top: 32px; }
198
+ .apirocket-cart-item-row {
199
+ display: flex;
200
+ justify-content: space-between;
201
+ align-items: center;
96
202
  }
97
203
 
98
- @media (max-width: 720px) {
99
- .apirocket-summary-section-subtitle { margin-top: 24px; }
100
- .apirocket-summary-header {
101
- flex-direction: column;
102
- align-items: center;
103
- text-align: center;
104
- }
105
- .apirocket-summary-header-icon {
106
- margin-right: 0px;
107
- margin-bottom: 16px;
108
- }
109
- .apirocket-summary-header-title {
110
- font-size: 28px;
111
- margin-bottom: 8px;
112
- }
113
- }.apirocket-modal *,
114
- .apirocket-modal *::before,
115
- .apirocket-modal *::after { box-sizing: border-box; }
204
+ .apirocket-cart-item-col-image {
205
+ display: var(--cart-item-image-display, inherit);
206
+ flex: 0 0 var(--cart-item-image-width, 100px);
207
+ align-self: flex-start;
208
+ margin-right: 16px;
209
+ }
116
210
 
117
- .apirocket-modal {
118
- display: flex;
119
- justify-content: center;
120
- align-items: flex-start;
121
- position: fixed;
122
- z-index: 10001;
123
- right: 0;
124
- top: 0;
125
- overflow: hidden;
126
- overflow-y: auto;
127
- width: 100%;
128
- height: 100vh;
129
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
130
- background-color: #f5f5f5;
211
+ .apirocket-cart-item-col-image img {
212
+ display: block;
213
+ max-width: 100%;
131
214
  }
132
215
 
133
- .apirocket-modal-nav {
134
- position: absolute;
135
- display: flex;
136
- align-items: center;
137
- width: 90%;
138
- max-width: 1100px;
139
- height: 96px;
216
+ .apirocket-cart-item-col-description {
217
+ align-self: flex-start;
218
+ padding-right: 32px;
219
+ flex-grow: 1;
140
220
  }
141
221
 
142
- .apirocket-modal-nav-button {
143
- display: flex;
144
- align-items: center;
145
- text-align: left;
146
- color: #737373;
147
- font-size: 16px;
148
- font-weight: normal;
149
- cursor: pointer;
222
+ .apirocket-cart-item-col-description-name {
223
+ font-size: var(--cart-item-name-font-size, 18px);
224
+ font-weight: var(--cart-item-name-font-weight, bold);
225
+ color: var(--cart-item-name-font-color, #000);
150
226
  }
151
227
 
152
- .apirocket-modal-nav-button svg { margin-right: 16px; }
153
-
154
- .apirocket-modal-content {
155
- display: flex;
156
- flex-flow: column;
157
- width: 480px;
158
- height: auto;
159
- padding: 32px;
160
- background-color: #fff;
161
- margin-top: 96px;
162
- margin-bottom: 32px;
228
+ .apirocket-cart-item-col-description-text {
229
+ font-size: var(--cart-item-description-font-size, 14px);
230
+ font-weight: var(--cart-item-description-font-weight, lighter);
231
+ color: var(--cart-item-description-font-color, #000);
163
232
  }
164
233
 
165
- .apirocket-modal-header {
166
- position: relative;
167
- padding-bottom: 32px;
234
+ .apirocket-cart-item-col-delete {
235
+ flex: 1 0 auto;
236
+ align-self: flex-start;
237
+ color: var(--cart-item-delete-icon-color, #404040);
238
+ width: var(--cart-item-delete-icon-size, 24px);
239
+ cursor: pointer;
240
+ text-align: center;
168
241
  }
169
242
 
170
- .apirocket-modal-title {
171
- font-size: 18px;
172
- font-weight: bold;
173
- line-height: 1;
174
- color: #404040;
175
- margin-bottom: 8px;
243
+ .apirocket-cart-item-col-delete:hover {
244
+ color: var(--cart-item-delete-icon-color-hover, #000);
176
245
  }
177
246
 
178
- .apirocket-modal-subtitle {
179
- font-size: 14px;
180
- font-weight: normal;
181
- line-height: 16px;
182
- color: #737373;
247
+ .apirocket-cart-item-col-delete svg {
248
+ width: var(--cart-item-delete-icon-size, 18px);
249
+ height: var(--cart-item-delete-icon-size, 18px);
183
250
  }
184
251
 
185
- .apirocket-modal-close {
186
- position: absolute;
187
- right: -16px;
188
- top: -16px;
252
+ .apirocket-cart-item-label {
253
+ font-size: var(--cart-item-label-font-size, 14px);
254
+ font-weight: var(--cart-item-label-font-weight, lighter);
255
+ color: var(--cart-item-label-font-color, #737373);
256
+ margin-bottom: 4px;
189
257
  }
190
258
 
191
- .apirocket-modal-close-icon {
192
- height: var(--cart-header-text-close-icon-size, 24px);
193
- width: var(--cart-header-text-close-icon-size, 24px);
194
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
195
- cursor: pointer;
259
+ .apirocket-cart-item-col-quantity {
260
+ margin-top: 16px;
196
261
  }
197
262
 
198
- .apirocket-modal-body-text-password {
199
- color: #404040;
200
- font-size: 14px;
201
- font-weight: normal;
202
- line-height: 16px;
203
- margin-top: -8px;text-align: right;
204
- cursor: pointer;
263
+ .apirocket-cart-item-quantity-wrapper {
264
+ display: flex;
265
+ justify-content: space-between;
266
+ border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
267
+ min-width: 160px;
268
+ user-select: none;
269
+ transition-property: border-color;
270
+ transition-timing-function: ease;
271
+ transition-duration: 350ms;
205
272
  }
206
273
 
207
- .apirocket-modal-body-text-password:hover { text-decoration: underline; }
274
+ .apirocket-cart-item-quantity-wrapper:hover {
275
+ border-color: var(--cart-item-form-border-color-hover, #000);
276
+ }
208
277
 
209
- .apirocket-modal-footer-text {
210
- color: #a3a3a3;
211
- font-size: 14px;
212
- font-weight: normal;
213
- line-height: 16px;
278
+ .apirocket-cart-item-quantity-number {
279
+ flex: 1 1 auto;
280
+ font-size: var(--cart-item-form-text-size, 14px);
281
+ font-weight: var(--cart-item-form-text-weight, normal);
282
+ color: var(--cart-item-form-text-color, #000);
283
+ padding: 16px;
284
+ line-height: 1;
214
285
  text-align: center;
215
- margin-top: 16px;
216
286
  }
217
287
 
218
- .apirocket-modal-footer-text span {
219
- color: #404040;
288
+ .apirocket-cart-item-quantity-button {
289
+ display: flex;
290
+ align-items: center;
291
+ background-color: var(--cart-item-quantity-icon-background-color, transparent);
292
+ padding: 0px 12px;
220
293
  cursor: pointer;
221
294
  }
222
295
 
223
- .apirocket-modal-footer-text span:hover { text-decoration: underline; }
296
+ .apirocket-cart-item-quantity-button svg {
297
+ color: var(--cart-item-quantity-icon-color, #737373);
298
+ width: var(--cart-item-quantity-icon-size, 16px);
299
+ height: var(--cart-item-quantity-icon-size, 16px);
300
+ }
224
301
 
302
+ .apirocket-cart-item-col-price {
303
+ margin-top: 36px;
304
+ font-size: var(--cart-item-price-font-size, 16px);
305
+ font-weight: var(--cart-item-price-font-weight, normal);
306
+ color: var(--cart-item-price-font-color, #404040);
307
+ }
225
308
 
226
- .apirocket-modal-body {}
227
309
 
228
- .apirocket-modal-footer {
229
- padding-top: 32px;
230
- }
310
+ @media (min-width: 720px) {
231
311
 
232
- .apirocket-modal-row {
233
- display: flex;
234
- justify-content: space-between;
235
- align-items: flex-start;
236
- }
312
+ .apirocket-cart.apirocket-cart-full-screen {
313
+ width: 100%;
314
+ overflow-y: auto;
315
+ }
237
316
 
238
- .apirocket-modal-row > * {
239
- flex: 1 1;
240
- margin-right: 16px;
241
- }
317
+ .apirocket-cart-full-screen .apirocket-cart-content {
318
+ display: block;
319
+ width: 90%;
320
+ max-width: 980px;
321
+ margin: 0 auto;
322
+ }
242
323
 
243
- .apirocket-modal-row > *:last-child { margin-right: 0; }
324
+ .apirocket-cart-full-screen .apirocket-cart-header {
325
+ background-color: #fff;
326
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
327
+ padding: 40px 0px;
328
+ }
244
329
 
330
+ .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
331
+ .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
245
332
 
246
- @media (max-width: 720px) {
247
- .apirocket-modal-row { display: block; }
248
- .apirocket-modal-row > * { margin-right: 0; }
333
+ .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
249
334
 
250
- .apirocket-modal-nav { display: none; }
335
+ .apirocket-cart-full-screen .apirocket-cart-footer {
336
+ width: 40%;
337
+ border-top: none;
338
+ margin-left: auto;
339
+ margin-right: 0;
340
+ padding: 0px;
341
+ padding-top: 32px;
342
+ padding-bottom: 96px;
343
+ }
251
344
 
252
- .apirocket-modal-content {
253
- width: 95%;
254
- margin-top: 32px;
255
- padding: 24px;
345
+ .apirocket-cart-full-screen .apirocket-cart-item {
346
+ display: flex;
347
+ position: relative;
348
+ padding-left: 0;
349
+ padding-right: 0;
256
350
  }
257
351
 
258
- .apirocket-modal-close {
259
- right: -8px;
260
- top: -8px;
261
- }
262
- }:root {
263
- --cart-width: 540px;
264
- --cart-background-color: #fff;
265
- --cart-padding: 32px;
266
- --cart-font-family: Arial, Helvetica, sans-serif;
352
+ .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 60%; }
353
+ .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 40%; }
267
354
 
268
- --cart-header-background-color: #f5f5f5;
269
- --cart-header-border-color: #f5f5f5;
270
- --cart-header-border-width: 1px;
271
- --cart-header-text-font-size: 18px;
272
- --cart-header-text-font-weight: normal;
273
- --cart-header-text-font-color: #404040;
274
- --cart-header-text-close-icon-color: #a3a3a3;
275
- --cart-header-text-close-icon-size: 24px;
355
+ .apirocket-cart-full-screen .apirocket-cart-item:last-child {
356
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
357
+ }
276
358
 
277
- --cart-footer-background-color: #fff;
278
- --cart-footer-border-color: #e5e5e5;
279
- --cart-footer-border-width: 1px;
280
- --cart-footer-text-font-size: 16px;
281
- --cart-footer-text-font-weight: lighter;
282
- --cart-footer-text-font-color: #404040;
283
- --cart-footer-total-font-size: 18px;
284
- --cart-footer-total-font-weight: bold;
285
- --cart-footer-total-font-color: #000;
359
+ .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { margin-top: 0px; }
360
+ .apirocket-cart-full-screen .apirocket-cart-item-col-price {
361
+ align-self: flex-end;
362
+ line-height: 48px;
363
+ }
286
364
 
287
- --cart-item-border-color: #e5e5e5;
288
- --cart-item-border-width: 1px;
289
- --cart-item-padding: 32px;
290
- --cart-item-label-font-size: 14px;
291
- --cart-item-label-font-weight: lighter;
292
- --cart-item-label-font-color: #737373;
293
- --cart-item-image-display: inherit;
294
- --cart-item-image-width: 100px;
295
- --cart-item-image-width-fullscreen: 150px;
296
- --cart-item-name-font-size: 18px;
297
- --cart-item-name-font-weight: bold;
298
- --cart-item-name-font-color: #000;
299
- --cart-item-description-font-size: 14px;
300
- --cart-item-description-font-weight: lighter;
301
- --cart-item-description-font-color: #000;
302
- --cart-item-delete-icon-color: #404040;
303
- --cart-item-delete-icon-color-hover: #000;
304
- --cart-item-delete-icon-size: 18px;
305
- --cart-item-form-border-color: #e5e5e5;
306
- --cart-item-form-border-color-hover: #000;
307
- --cart-item-form-border-width: 1px;
308
- --cart-item-form-text-size: 14px;
309
- --cart-item-form-text-weight: normal;
310
- --cart-item-form-text-color: #000;
311
- --cart-item-quantity-icon-color: #737373;
312
- --cart-item-quantity-icon-background-color: transparent;
313
- --cart-item-quantity-icon-size: 16px;
314
- --cart-item-price-font-size: 16px;
315
- --cart-item-price-font-weight: bold;
316
- --cart-item-price-font-color: #404040;
365
+ .apirocket-cart-full-screen .apirocket-cart-item-col-image {
366
+ flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
367
+ }
317
368
 
318
- --cart-button-font-size: 16px;
319
- --cart-button-font-weight: normal;
320
- --cart-button-font-color: #737373;
321
- --cart-button-font-color-hover: #404040;
322
- --cart-button-border-color: #e5e5e5;
323
- --cart-button-border-color-hover: #404040;
324
- --cart-button-border-radius: 4px;
325
- --cart-button-background-color: transparent;
326
- --cart-button-background-color-hover: transparent;
327
- --cart-button-padding-x: 16px;
328
- --cart-button-padding-y: 16px;
369
+ .apirocket-cart-full-screen .apirocket-cart-item-col-description { align-self: flex-start; }
370
+ .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { align-self: flex-end; }
329
371
 
330
- --cart-button-primary-text-color: #fff;
331
- --cart-button-primary-text-color-hover: #fff;
332
- --cart-button-primary-border-color: #1d4ed8;
333
- --cart-button-primary-border-color-hover: #0d59f4;
334
- --cart-button-primary-background-color: #1d4ed8;
335
- --cart-button-primary-background-color-hover: #0d59f4;
336
- /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
372
+ .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
373
+ position: absolute;
374
+ right: 0px;
375
+ top: var(--cart-item-padding, 32px);
376
+ }
337
377
  }
338
378
 
339
- .apirocket-cart * { box-sizing: content-box; }
379
+ @media (min-width: 720px) and (max-width: 920px) {
380
+ .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 55%; }
381
+ .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 35%; }
382
+ }
340
383
 
341
- .apirocket-cart {
384
+ /* Mobile version */
385
+
386
+ @media (max-width: 720px) {
387
+
388
+ .apirocket-cart {
389
+ width: 100%;
390
+ box-shadow: none;
391
+ }
392
+
393
+ .apirocket-cart-header-continue { display: none; }
394
+ .apirocket-cart-header-login { display: none; }
395
+ }.apirocket-checkout * { box-sizing: content-box; }
396
+
397
+ .apirocket-checkout {
398
+ display: block;
342
399
  position: fixed;
343
400
  z-index: 10000;
344
401
  right: 0;
345
402
  top: 0;
346
403
  overflow: hidden;
347
- width: var(--cart-width, 540px);
404
+ overflow-y: auto;
405
+ width: 100%;
348
406
  height: 100vh;
349
- box-shadow: 1px 20px 8px rgba(0,0,0,.1);
350
407
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
351
- background-color: var(--cart-background-color, #fff);
408
+ background-color: #fff;
352
409
  }
353
410
 
354
- .apirocket-cart-content {
411
+ .apirocket-checkout-wrap {
355
412
  display: flex;
356
- flex-direction: column;
357
- height: 100%;
358
- background-color: var(--cart-background-color, #fff);
413
+ margin: 0 auto;
414
+ width: 90%;
415
+ min-height: 100%;
416
+ max-width: 1100px;
417
+ padding: 0 5%;
418
+
359
419
  }
360
420
 
361
- .apirocket-cart-header {
362
- display: flex;
363
- flex: 0 0 96px;
364
- align-items: center;
365
- justify-content: space-between;
366
- padding: 0px var(--cart-padding);
367
- background-color: var(--cart-header-background-color, #f5f5f5);
368
- border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
421
+ .apirocket-checkout-main {
422
+ order: 1;
423
+ width: 52%;
424
+ padding-right: 48px;
369
425
  }
370
426
 
371
- .apirocket-cart-header-title {
372
- font-size: var(--cart-header-text-font-size, 18px);
373
- font-weight: var(--cart-header-text-font-weight, normal);
374
- color: var(--cart-header-text-font-color, #404040)
427
+ .apirocket-checkout-summary {
428
+ order: 2;
429
+ position: relative;
430
+ width: 40%;
431
+ padding-left: 48px;
375
432
  }
376
433
 
377
- .apirocket-cart-header-close-icon {
378
- height: var(--cart-header-text-close-icon-size, 24px);
379
- width: var(--cart-header-text-close-icon-size, 24px);
380
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
381
- cursor: pointer;
434
+ .apirocket-checkout-summary::after {
435
+ position: absolute;
436
+ display: block;
437
+ top: 0;
438
+ left: 0;
439
+ content: "";
440
+ width: 300%;
441
+ height: 100%;
442
+ background: #f5f5f5;
443
+ z-index: -1;
382
444
  }
383
445
 
384
- .apirocket-cart-header-continue {
385
- display: none;
446
+ .apirocket-checkout-continue {
447
+ display: flex;
386
448
  align-items: center;
387
449
  text-align: left;
450
+ margin-top: 40px;
451
+ margin-bottom: 40px;
388
452
  color: #737373;
389
453
  font-size: 16px;
390
454
  font-weight: normal;
391
455
  cursor: pointer;
392
456
  }
393
457
 
394
- .apirocket-cart-header-login {
458
+ .apirocket-checkout-close {
395
459
  display: none;
396
- align-items: center;
397
- text-align: right;
398
- color: #737373;
399
- font-size: 16px;
400
- font-weight: normal;
401
460
  cursor: pointer;
461
+ position: absolute;
462
+ top: 16px;
463
+ right: 32px;
402
464
  }
403
465
 
404
- .apirocket-cart-header-login svg,
405
- .apirocket-cart-header-continue svg { margin-right: 16px; }
406
-
407
- .apirocket-cart-body {
408
- flex: 1 1 auto;
409
- padding: 0px;
410
- background: var(--cart-background-color, #fff);
411
- overflow-y: auto;
466
+ .apirocket-checkout-summary-container {
467
+ display: flex;
468
+ flex-flow: column;
469
+ max-height: calc(100vh - 5%);
470
+ overflow: hidden;
412
471
  }
413
472
 
414
- .apirocket-cart-footer {
473
+ .apirocket-checkout-summary-top {
415
474
  flex: 0 0 auto;
416
- padding: var(--cart-padding, 32px);
417
- background-color: var(--cart-footer-background-color, transparent);
418
- border-top: var(--cart-footer-border-width, 1px) solid var(--cart-footer-border-color, #e5e5e5);
419
- font-size: var(--cart-footer-text-font-size, 16px);
420
- font-weight: var(--cart-footer-text-font-weight, lighter);
421
- color: var(--cart-footer-text-font-color, #737373);
422
475
  }
423
476
 
424
- .apirocket-cart-footer-total {
425
- font-size: var(--cart-footer-total-font-size, 18px);
426
- font-weight: var(--cart-footer-total-font-weight, bold);
427
- color: var(--cart-footer-total-font-color, #000);
477
+ .apirocket-checkout-summary-content {
478
+ flex: 1 1 auto;
479
+ overflow-y: scroll;
428
480
  }
429
481
 
430
- .apirocket-cart-row {
482
+ .apirocket-checkout-summary-footer {
483
+ flex: 0 0 auto;
484
+ }
485
+
486
+ .apirocket-checkout-summary-login {
431
487
  display: flex;
432
- justify-content: space-between;
433
488
  align-items: center;
489
+ justify-content: end;
490
+ text-align: right;
491
+ margin-top: 40px;
492
+ margin-bottom: 40px;
493
+ color: #737373;
494
+ font-size: 16px;
495
+ font-weight: normal;
496
+ cursor: pointer;
434
497
  }
435
498
 
436
- .apirocket-cart-col {
437
- flex: 1 1 auto;
438
- margin-bottom: 16px;
439
- }
499
+ .apirocket-checkout-summary-login svg,
500
+ .apirocket-checkout-continue svg { margin-right: 16px; }
440
501
 
441
- .apirocket-cart-item {
442
- padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
443
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
502
+ .apirocket-checkout-summary-header {
503
+ display: flex;
504
+ justify-content: space-between;
505
+ align-items: center;
506
+ margin-top: 56px;
507
+ margin-bottom: 48px;
444
508
  }
445
509
 
446
- .apirocket-cart-item:last-child {
447
- border-bottom: none;
448
- margin-bottom: var(--cart-padding, 32px);
510
+ .apirocket-checkout-summary-header :last-child a {
511
+ font-size: 14px;
512
+ font-weight: normal;
513
+ color: #737373;
449
514
  }
450
515
 
451
- .apirocket-cart-item-row {
516
+ .apirocket-checkout-summary-item {
452
517
  display: flex;
453
- justify-content: space-between;
454
- align-items: center;
518
+ justify-content: stretch;
519
+ align-items: flex-start;
520
+ padding-bottom: 16px;
521
+ border-bottom: 1px solid #d9d9d9;
522
+ margin-bottom: 16px;
455
523
  }
456
524
 
457
- .apirocket-cart-item-col-image {
458
- display: var(--cart-item-image-display, inherit);
459
- flex: 0 0 var(--cart-item-image-width, 100px);
460
- align-self: flex-start;
461
- margin-right: 16px;
525
+ .apirocket-checkout-summary-item-col-image {
526
+ flex: 0 0 auto;
527
+ max-width: 100px;
528
+ border: 1px solid #e5e5e5;
529
+ border-radius: 4px;
530
+ overflow: hidden;
462
531
  }
463
532
 
464
- .apirocket-cart-item-col-image img {
533
+ .apirocket-checkout-summary-item-col-image img {
465
534
  display: block;
466
535
  max-width: 100%;
536
+ max-height: 100px;
467
537
  }
468
538
 
469
- .apirocket-cart-item-col-description {
470
- align-self: flex-start;
471
- padding-right: 32px;
472
- flex-grow: 1;
539
+ .apirocket-checkout-summary-item-col-description {
540
+ flex: 1 1 auto;
541
+ padding-left: 16px;
542
+ padding-right: 8px;
543
+ font-size: 14px;
544
+ font-weight: bold;
545
+ line-height: 18px;
473
546
  }
474
547
 
475
- .apirocket-cart-item-col-description-name {
476
- font-size: var(--cart-item-name-font-size, 18px);
477
- font-weight: var(--cart-item-name-font-weight, bold);
478
- color: var(--cart-item-name-font-color, #000);
548
+ .apirocket-checkout-summary-item-col-description small {
549
+ display: block;
550
+ font-size: 14px;
551
+ font-weight: normal;
552
+ color: #a3a3a3;
479
553
  }
480
554
 
481
- .apirocket-cart-item-col-description-text {
482
- font-size: var(--cart-item-description-font-size, 14px);
483
- font-weight: var(--cart-item-description-font-weight, lighter);
484
- color: var(--cart-item-description-font-color, #000);
555
+ .apirocket-checkout-summary-item-col-quantity {
556
+ flex: 0 0 50px;
557
+ font-size: 16px;
558
+ font-weight: normal;
559
+ color: #a3a3a3;
560
+ text-align: right;
485
561
  }
486
562
 
487
- .apirocket-cart-item-col-delete {
488
- flex: 1 0 auto;
489
- align-self: flex-start;
490
- color: var(--cart-item-delete-icon-color, #404040);
491
- width: var(--cart-item-delete-icon-size, 24px);
492
- cursor: pointer;
493
- text-align: center;
563
+ .apirocket-checkout-summary-item-col-price {
564
+ flex: 0 0 100px;
565
+ font-size: 16px;
566
+ font-weight: bold;
567
+ color: #404040;
568
+ text-align: right;
494
569
  }
495
570
 
496
- .apirocket-cart-item-col-delete:hover {
497
- color: var(--cart-item-delete-icon-color-hover, #000);
571
+ .apirocket-checkout-summary-row {
572
+ display: flex;
573
+ justify-content: space-between;
574
+ align-items: center;
575
+ padding-top: 16px;
498
576
  }
499
577
 
500
- .apirocket-cart-item-col-delete svg {
501
- width: var(--cart-item-delete-icon-size, 18px);
502
- height: var(--cart-item-delete-icon-size, 18px);
503
- }
504
-
505
- .apirocket-cart-item-label {
506
- font-size: var(--cart-item-label-font-size, 14px);
507
- font-weight: var(--cart-item-label-font-weight, lighter);
508
- color: var(--cart-item-label-font-color, #737373);
509
- margin-bottom: 4px;
578
+ .apirocket-checkout-summary-label {
579
+ font-size: 16px;
580
+ font-weight: normal;
581
+ line-height: 18px;
582
+ color: #404040;
510
583
  }
511
584
 
512
- .apirocket-cart-item-col-quantity {
513
- margin-top: 16px;
585
+ .apirocket-checkout-summary-value {
586
+ font-size: 18px;
587
+ font-weight: bold;
588
+ line-height: 18px;
589
+ color: #404040;
514
590
  }
515
591
 
516
- .apirocket-cart-item-quantity-wrapper {
592
+ .apirocket-checkout-summary-row-total {
517
593
  display: flex;
518
594
  justify-content: space-between;
519
- border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
520
- min-width: 160px;
521
- user-select: none;
522
- transition-property: border-color;
523
- transition-timing-function: ease;
524
- transition-duration: 350ms;
595
+ align-items: flex-start;
596
+ border-top: 1px solid #d9d9d9;
597
+ margin-top: 24px;
598
+ padding-top: 24px;
525
599
  }
526
600
 
527
- .apirocket-cart-item-quantity-wrapper:hover {
528
- border-color: var(--cart-item-form-border-color-hover, #000);
601
+ .apirocket-checkout-summary-label-total {
602
+ font-size: 18px;
603
+ font-weight: bold;
604
+ line-height: 21px;
605
+ color: #404040;
606
+ }
607
+ .apirocket-checkout-summary-label-total small {
608
+ display: block;
609
+ font-size: 14px;
610
+ line-height: 16px;
611
+ font-weight: normal;
612
+ color: #a3a3a3;
529
613
  }
530
614
 
531
- .apirocket-cart-item-quantity-number {
532
- flex: 1 1 auto;
533
- font-size: var(--cart-item-form-text-size, 14px);
534
- font-weight: var(--cart-item-form-text-weight, normal);
535
- color: var(--cart-item-form-text-color, #000);
536
- padding: 16px;
537
- line-height: 1;
538
- text-align: center;
615
+ .apirocket-checkout-summary-value-total {
616
+ font-size: 24px;
617
+ font-weight: bold;
618
+ line-height: 24px;
619
+ color: #404040;
539
620
  }
540
621
 
541
- .apirocket-cart-item-quantity-button {
622
+ .apirocket-checkout-breadcrumbs ol {
542
623
  display: flex;
543
624
  align-items: center;
544
- background-color: var(--cart-item-quantity-icon-background-color, transparent);
545
- padding: 0px 12px;
546
- cursor: pointer;
625
+ list-style: none;
626
+ padding: 0;
627
+ margin: 0;
628
+ margin-top: 24px;
547
629
  }
548
630
 
549
- .apirocket-cart-item-quantity-button svg {
550
- color: var(--cart-item-quantity-icon-color, #737373);
551
- width: var(--cart-item-quantity-icon-size, 16px);
552
- height: var(--cart-item-quantity-icon-size, 16px);
631
+ .apirocket-checkout-breadcrumbs ol li {
632
+ cursor: pointer;
633
+ color: #a3a3a3;
634
+ font-size: 14px;
635
+ line-height: 1;
553
636
  }
554
637
 
555
- .apirocket-cart-item-col-price {
556
- margin-top: 36px;
557
- font-size: var(--cart-item-price-font-size, 16px);
558
- font-weight: var(--cart-item-price-font-weight, normal);
559
- color: var(--cart-item-price-font-color, #404040);
638
+ .apirocket-checkout-breadcrumbs ol li::after {
639
+ width: 5px;
640
+ height: 9px;
641
+ display: inline-block;
642
+ content: "";
643
+ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
644
+ background-repeat: no-repeat;
645
+ background-position: center;
646
+ padding: 0 8px;
560
647
  }
561
648
 
649
+ .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
562
650
 
563
- @media (min-width: 720px) {
564
-
565
- .apirocket-cart.apirocket-cart-full-screen {
566
- width: 100%;
567
- overflow-y: auto;
568
- }
569
-
570
- .apirocket-cart-full-screen .apirocket-cart-content {
571
- display: block;
572
- width: 90%;
573
- max-width: 980px;
574
- margin: 0 auto;
575
- }
576
-
577
- .apirocket-cart-full-screen .apirocket-cart-header {
578
- background-color: #fff;
579
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
580
- padding: 40px 0px;
581
- }
582
-
583
- .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
584
- .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
585
-
586
- .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
587
-
588
- .apirocket-cart-full-screen .apirocket-cart-footer {
589
- width: 40%;
590
- border-top: none;
591
- margin-left: auto;
592
- margin-right: 0;
593
- padding: 0px;
594
- padding-bottom: 96px;
595
- }
596
-
597
- .apirocket-cart-full-screen .apirocket-cart-item {
598
- display: flex;
599
- position: relative;
600
- padding-left: 0;
601
- padding-right: 0;
602
- }
603
-
604
- .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 60%; }
605
- .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 40%; }
606
-
607
- .apirocket-cart-full-screen .apirocket-cart-item:last-child {
608
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
609
- }
651
+ .apirocket-checkout-breadcrumbs ol li a {
652
+ color: #a3a3a3;
653
+ text-decoration: underline;
654
+ }
610
655
 
611
- .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { margin-top: 0px; }
612
- .apirocket-cart-full-screen .apirocket-cart-item-col-price {
613
- align-self: flex-end;
614
- line-height: 48px;
615
- }
656
+ .apirocket-checkout-breadcrumbs-active {
657
+ font-weight: bold;
658
+ color: #404040 !important;
659
+ }
616
660
 
617
- .apirocket-cart-full-screen .apirocket-cart-item-col-image {
618
- flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
619
- }
661
+ .apirocket-checkout-steps-summary {
662
+ border: 1px solid #d9d9d9;
663
+ border-radius: 4px;
664
+ overflow: hidden;
665
+ margin-top: 48px;
666
+ }
620
667
 
621
- .apirocket-cart-full-screen .apirocket-cart-item-col-description { align-self: flex-start; }
622
- .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { align-self: flex-end; }
668
+ .apirocket-checkout-steps-summary-row {
669
+ display: flex;
670
+ position: relative;
671
+ border-bottom: 1px solid #d9d9d9;
672
+ padding: 16px;
673
+ }
623
674
 
624
- .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
625
- position: absolute;
626
- right: 0px;
627
- top: var(--cart-item-padding, 32px);
628
- }
675
+ .apirocket-checkout-steps-summary-label {
676
+ flex: 0 0 90px;
677
+ font-size: 14px;
678
+ font-weight: normal;
679
+ line-height: 14px;
680
+ color: #a3a3a3;
629
681
  }
630
682
 
631
- @media (min-width: 720px) and (max-width: 920px) {
632
- .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 55%; }
633
- .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 35%; }
683
+ .apirocket-checkout-steps-summary-text {
684
+ flex: 1 1 auto;
685
+ font-size: 14px;
686
+ font-weight: normal;
687
+ line-height: 18px;
688
+ color: #404040;
634
689
  }
635
690
 
636
- /* Mobile version */
691
+ .apirocket-checkout-steps-summary-link {
692
+ flex: 0 0 60px;
693
+ text-align: right;
694
+ font-size: 12px;
695
+ font-weight: normal;
696
+ line-height: 1;
697
+ text-decoration: underline;
698
+ color: #737373;
699
+ cursor: pointer;
700
+ }
637
701
 
638
- @media (max-width: 720px) {
702
+ .apirocket-checkout-section {
703
+ margin-top: 48px;
704
+ }
639
705
 
640
- .apirocket-cart {
641
- width: 100%;
642
- box-shadow: none;
643
- }
706
+ .apirocket-checkout-section-header {
707
+ margin-bottom: 24px;
708
+ }
644
709
 
645
- .apirocket-cart-header-continue { display: none; }
646
- .apirocket-cart-header-login { display: none; }
710
+ .apirocket-checkout-section-title {
711
+ font-size: 18px;
712
+ font-weight: bold;
713
+ line-height: 1;
714
+ color: #404040;
647
715
  }
648
- .apirocket-button {
649
- box-sizing: border-box !important;
650
- display: block;
651
- width: 100%;
652
- padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
653
- margin: 0px;
654
- border-radius: var(--cart-button-border-radius, 4px);
655
- background-color: var(--cart-button-background-color, transparent);
656
- border: 1px solid var(--cart-button-border-color, #e5e5e5);
657
- color: var(--cart-button-font-color, #737373);
716
+
717
+ .apirocket-checkout-section-subtitle {
718
+ font-size: 12px;
719
+ font-weight: normal;
720
+ padding-top: 4px;
658
721
  line-height: 1;
659
- font-size: var(--cart-button-font-size, 16px);
660
- font-weight: var(--cart-button-font-weight, normal);
661
- text-align: center;
662
- transition-property: color, border-color, background-color, box-shadow;
663
- transition-timing-function: ease;
664
- transition-duration: 350ms;
722
+ color: #a3a3a3;
723
+ text-align: right;
724
+ }
725
+
726
+ .apirocket-checkout-button-edit {
665
727
  cursor: pointer;
666
728
  }
667
729
 
668
- .apirocket-button:hover {
669
- background-color: var(--cart-button-background-color-hover, transparent);
670
- border-color: var(--cart-button-border-color-hover, #404040);
671
- color: var(--cart-button-font-color-hover, #404040);
730
+ .apirocket-checkout-button-edit:hover {
731
+ text-decoration: underline;
672
732
  }
673
733
 
674
- .apirocket-button:focus {
734
+ .apirocket-checkout-section a {
735
+ color: #404040;
675
736
  outline: none;
676
737
  text-decoration: underline;
677
738
  }
678
739
 
679
- .apirocket-button-link {
680
- display: flex;
681
- align-items: center;
682
- text-align: left;
683
- justify-content: flex-start;
684
- align-items: center;
685
- border: none;
686
- padding-left: 0;
687
- padding-right: 0;
688
- width: auto;
689
- overflow: hidden;
690
- white-space: nowrap;
691
- text-overflow: ellipsis;
692
- }
693
- .apirocket-button-link span {
694
- margin-left: 16px;
695
- margin-right: 16px;
696
- }
697
-
698
- .apirocket-button-primary {
699
- background-color: var(--cart-button-primary-background-color, #1d4ed8);
700
- border-color: var(--cart-button-primary-border-color, #1d4ed8);
701
- color: var(--cart-button-primary-text-color, #fff);
740
+ .apirocket-checkout-section-text {
741
+ font-size: 14px;
742
+ line-height: 1;
743
+ margin-top: 4px;
744
+ color: #737373;
702
745
  }
703
746
 
704
- .apirocket-button-primary:hover {
705
- background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
706
- border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
707
- color: var(--cart-button-primary-text-color-hover, #fff);
708
- box-shadow: var(--cart-shadow-button-primary-hover, none);
747
+ .apirocket-checkout-actions {
748
+ display: flex;
749
+ margin-top: 64px;
750
+ align-items: center;
751
+ max-width: 100%;
709
752
  }
710
753
 
711
- @media (max-width: 720px) {
754
+ .apirocket-checkout-actions > * { flex: 1 1; }
712
755
 
713
- .apirocket-button-link {
714
- width: 100%;
715
- justify-content: center;
716
- }
756
+ .apirocket-checkout-footer {
757
+ margin-top: 72px;
758
+ border-top: 1px solid #d9d9d9;
759
+ margin-bottom: 64px;
760
+ padding-top: 16px;
761
+ }
717
762
 
718
- }.apirocket-form-input {
719
- display: block;
720
- position: relative;
721
- margin-bottom: 16px;
763
+ .apirocket-checkout-footer ul {
764
+ display: flex;
765
+ align-items: center;
766
+ list-style: none;
767
+ padding: 0;
768
+ margin: 0;
722
769
  }
723
770
 
724
- .apirocket-form-input input {
725
- all: unset;
726
- appearance: none;
727
- -moz-appearance: none;
728
- -webkit-appearance: none;
729
- outline: none;
730
- width: 100%;
731
- height: 46px;
732
- background: #fff;
733
- border-radius: 4px;
734
- border: 1px solid #D9D9D9;
771
+ .apirocket-checkout-footer ul li { margin-right: 16px; }
772
+
773
+ .apirocket-checkout-footer ul li a {
774
+ color: #404040;
735
775
  font-size: 14px;
736
776
  line-height: 1;
737
- padding-left: 14px;
738
- padding-right: 14px;
739
- padding-top: 14px;
740
- padding-bottom: 14px;
741
- transition: all 0.3s ease;
742
- box-sizing: border-box;
743
- }
744
-
745
- .apirocket-form-input input:focus {
746
- border-color: #404040;
747
- box-shadow: 0 0 0 1px #404040;
777
+ text-decoration: none;
748
778
  }
749
779
 
750
- .apirocket-form-input input:not(:placeholder-shown) {
751
- padding-top: 22px;
752
- padding-bottom: 6px;
780
+ .apirocket-checkout-footer ul li a:focus {
781
+ outline: none;
782
+ text-decoration: underline;
753
783
  }
754
784
 
755
- .apirocket-form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; }
756
-
757
- .apirocket-form-input-placeholder {
758
- position: absolute;
759
- font-size: 12px;
760
- line-height: 1;
785
+ .apircoket-checkout-legal {
786
+ margin-top: 16px;
787
+ font-size: 14px;
761
788
  color: #737373;
762
- transform: translateY(50%);
763
- opacity: 0;
764
- top: 8px;
765
- left: 15px;
766
- transition: all 0.3s ease;
767
- overflow: hidden;
768
- white-space: nowrap;
769
- text-overflow: ellipsis;
789
+ font-weight: normal;
790
+ line-height: 1.4;
770
791
  }
771
792
 
772
- .apirocket-form-input input:not(:placeholder-shown) ~ span.apirocket-form-input-placeholder {
773
- opacity: 1;
774
- transform: translateY(0%);
793
+ .apircoket-checkout-legal a {
794
+ text-decoration: underline;
795
+ color: #404040;
775
796
  }
776
797
 
777
- .apirocket-form-input .apirocket-form-input-error-message {
778
- display: none;
779
- font-size: 14px;
780
- line-height: 1.2;
781
- margin-top: 4px;
782
- margin-left: 8px;
783
- color: #dc2626;
798
+ .apirocket-checkout-logo img {
799
+ display: block;
800
+ max-height: 80px;
784
801
  }
785
802
 
786
- .apirocket-form-input.invalid.touched input {
787
- border-color: #dc2626;
788
- box-shadow: 0 0 0 1px #dc2626;
803
+ .apirocket-checkout-mobile { display: none; }
804
+
805
+ .apirocket-checkout-mobile .apirocket-checkout-logo {
806
+ display: block;
807
+ margin-top: 16px;
808
+ margin-bottom: 16px;
809
+ }
810
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
811
+ display: block;
812
+ margin: auto;
813
+ max-height: 80px;
789
814
  }
790
815
 
791
- .apirocket-form-input.invalid.touched .apirocket-form-input-placeholder { color: #dc2626; }
792
- .apirocket-form-input.invalid.touched .apirocket-form-input-error-message { display: block; }
816
+ .apirocket-checkout-mobile-menu {
817
+ background-color: #f5f5f5;
818
+ border-top: 1px solid #d9d9d9;
819
+ }
793
820
 
794
- .apirocket-form-checkbox {
821
+ .apirocket-checkout-mobile-wrapper {
795
822
  display: flex;
796
- align-items: flex-start;
797
- justify-content: start;
798
- position: relative;
799
- margin-bottom: 16px;
823
+ justify-content: space-between;
824
+ align-items: center;
825
+ width: 90%;
826
+ max-width: 560px;
827
+ margin: 0 auto;
828
+ padding: 16px 0px;
829
+ color: #404040;
800
830
  }
801
831
 
802
- .apirocket-form-checkbox-label {
803
- flex: 0 1 auto;
804
- display: block;
805
- font-size: 14px;
806
- line-height: 20px;
807
- font-weight: normal;
832
+ .apirocket-checkout-mobile-wrapper-cart {
833
+ display: inline-flex;
834
+ align-items: center;
808
835
  color: #404040;
809
836
  cursor: pointer;
810
837
  }
811
838
 
812
- .apirocket-form-checkbox-label small {
813
- display: block;
814
- color: #a3a3a3;
815
- font-size: 12px;
839
+ .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
840
+
841
+ .apirocket-checkout-mobile-wrapper-total {
842
+ line-height: 20px;
843
+ font-size: 20px;
844
+ font-weight: bold;
816
845
  }
817
846
 
818
- .apirocket-form-checkbox input {
819
- all: unset;
820
- flex: 0 0 auto;
821
- appearance: none;
822
- -moz-appearance: none;
823
- -webkit-appearance: none;
824
- position: relative;
825
- box-sizing: border-box;
826
- display: inline-block;
827
- padding: 0;
828
- margin: 0;
829
- margin-right: 12px;
830
- width: 20px;
831
- height: 20px;
832
- vertical-align: middle;
833
- outline: none;
834
- border: 1px solid #d9d9d9;
835
- border-radius: 4px;
836
- cursor: pointer;
837
- transition: all 0.3s ease;
847
+ .apirocket-checkout-mobile-summary {
848
+ background-color: #f5f5f5;
849
+ transition-property: max-height;
850
+ transition-timing-function: ease-in;
851
+ transition-duration: 350ms;
852
+ max-height: 0px;
838
853
  overflow: hidden;
839
- background-color: #fff;
854
+ border-bottom: 1px solid #d9d9d9;
840
855
  }
841
856
 
842
- .apirocket-form-checkbox input:focus {
843
- border-color: #404040;
844
- box-shadow: 0 0 0 1px #404040;
857
+ .apirocket-checkout-mobile-summary--show {
858
+ max-height: 1000px;
859
+ overflow: auto;
845
860
  }
846
861
 
847
- .apirocket-form-checkbox input:checked {
848
- background-color: #404040;
849
- border-color: #404040;
862
+ .apirocket-checkout-mobile-summary-wrapper {
863
+ width: 90%;
864
+ max-width: 560px;
865
+ padding: 16px 0px;
866
+ margin: 0 auto;
850
867
  }
851
868
 
852
- .apirocket-form-checkbox input:disabled { background-color: #f5f5f5; }
853
- .apirocket-form-checkbox input:disabled + .apirocket-form-checkbox-label { color: #a3a3a3; }
854
869
 
855
- .apirocket-form-checkbox input::after {
856
- display: block;
857
- position: absolute;
858
- width: 20px;
859
- height: 20px;
860
- content: "";
861
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
862
- background-repeat: no-repeat;
863
- background-position: -1px -1px;
864
- transition: all 0.3s ease;
865
- transform: scale(0);
866
- }
867
870
 
868
- .apirocket-form-checkbox input:checked::after {
869
- transform: scale(1);
870
- }
871
+ /* Utils */
871
872
 
872
- .apirocket-form-checkbox-error-message {
873
- display: none;
874
- position: absolute;
875
- left: 32px;
876
- bottom: -16px;
877
- font-size: 14px;
878
- line-height: 1.2;
879
- color: #dc2626;
873
+ .apirocket-checkout-row {
874
+ display: flex;
875
+ justify-content: space-between;
876
+ align-items: flex-start;
880
877
  }
881
-
882
- .apirocket-form-checkbox.invalid.touched input {
883
- border-color: #dc2626;
884
- box-shadow: 0 0 0 1px #dc2626;
878
+ .apirocket-checkout-row > * {
879
+ flex: 1 1;
880
+ margin-right: 16px;
885
881
  }
886
882
 
887
- .apirocket-form-checkbox.invalid.touched .apirocket-form-checkbox-error-message { display: block; }
883
+ .apirocket-checkout-row > *:last-child { margin-right: 0; }
888
884
 
889
- .apirocket-form-radio {
890
- display: flex;
891
- align-items: flex-start;
892
- justify-content: start;
893
- position: relative;
894
- margin-bottom: 16px;
885
+ .apirocket-checkout-fieldset {
886
+ border: 1px solid #d9d9d9;
887
+ border-radius: 4px;
888
+ overflow: hidden;
895
889
  }
896
890
 
897
- .apirocket-form-radio-label {
898
- position: relative;
899
- flex: 0 1 auto;
900
- display: inline-block;
901
- font-size: 14px;
891
+ .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
892
+
893
+ .apirocket-checkout-fieldset .apirocket-form-input,
894
+ .apirocket-checkout-fieldset .apirocket-form-select,
895
+ .apirocket-checkout-fieldset .apirocket-form-checkbox,
896
+ .apirocket-checkout-fieldset .apirocket-form-radio { margin-bottom: 0; }
897
+ .apirocket-checkout-fieldset .apirocket-form-radio .form-radio-label { font-size: 16px; }
898
+
899
+ .apirocket-checkout-fieldset > * {
900
+ padding: 16px;
901
+ border-bottom: 1px solid #d9d9d9;
902
+ }
903
+ .apirocket-checkout-fieldset-row {
904
+ display: flex;
905
+ justify-content: space-between;
906
+ align-items: flex-start;
907
+ }
908
+ .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
909
+ .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
910
+ .apirocket-checkout-fieldset-row > :last-child {
911
+ flex: 0 0 auto;
912
+ margin-right: 0px;
913
+ font-size: 16px;
914
+ font-weight: bold;
902
915
  line-height: 20px;
903
- font-weight: normal;
904
916
  color: #404040;
905
- cursor: pointer;
906
917
  }
907
918
 
908
- .apirocket-form-radio-label small {
919
+ .apirocket-checkout-fieldset-row > :last-child img {
909
920
  display: block;
910
- color: #a3a3a3;
911
- font-size: 12px;
921
+ max-height: 24px;
912
922
  }
913
923
 
914
- .apirocket-form-radio input:checked ~ .apirocket-form-radio-label { font-weight: bold; }
915
- .apirocket-form-radio input:checked ~ .apirocket-form-radio-label small { font-weight: normal; }
924
+ .apirocket-checkout-fieldset-row-wrapper {
925
+ background-color: #f5f5f5;
926
+ }
916
927
 
917
- .apirocket-form-radio input:disabled { background-color: #f5f5f5; }
918
- .apirocket-form-radio input:disabled + .apirocket-form-radio-label { color: #a3a3a3; }
928
+ .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
929
+ .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
919
930
 
920
- .apirocket-form-radio-label img,
921
- .apirocket-form-radio-label svg {
922
- position: absolute;
923
- display: inline-block;
924
- height: 24px;
925
- min-height: 24px;
926
- top: -2px;
927
- }
931
+ /* Responsive */
928
932
 
929
- .apirocket-form-radio input {
930
- flex: 0 0 auto;
931
- appearance: none;
932
- -moz-appearance: none;
933
- -webkit-appearance: none;
934
- position: relative;
935
- box-sizing: border-box;
936
- display: inline-block;
937
- padding: 0;
938
- margin: 0;
939
- margin-right: 12px;
940
- width: 20px;
941
- height: 20px;
942
- vertical-align: middle;
943
- outline: none;
944
- border: 1px solid #d9d9d9;
945
- border-radius: 20px;
946
- cursor: pointer;
947
- transition: all 0.3s ease;
948
- overflow: hidden;
949
- background-color: #fff;
950
- }
933
+ @media (max-width: 1000px) {
951
934
 
952
- .apirocket-form-radio input:focus {
953
- border-color: #404040;
954
- box-shadow: 0 0 0 1px #404040;
955
- }
935
+ .apirocket-checkout-mobile { display: block; }
936
+
937
+ .apirocket-checkout-wrap {
938
+ flex-flow: column;
939
+ margin: 0;
940
+ padding: 0;
941
+ width: 100%;
942
+ }
943
+
944
+ .apirocket-checkout-main,
945
+ .apirocket-checkout-summary {
946
+ width: 90%;
947
+ max-width: 560px;
948
+ margin: 0 auto;
949
+ padding: 0;
950
+ }
956
951
 
957
- .apirocket-form-radio input:checked {
958
- background-color: #404040;
959
- border-color: #404040;
960
- }
952
+ .apirocket-checkout-summary {
953
+ /* order: 0;
954
+ padding: 16px 0; */
955
+ display: none;
956
+ }
957
+ .apirocket-checkout-summary::after { display: none; }
961
958
 
962
- .apirocket-form-radio input::after {
963
- display: block;
964
- position: absolute;
965
- width: 20px;
966
- height: 20px;
967
- content: "";
968
- background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E%0A");
969
- background-repeat: no-repeat;
970
- background-position: 6px 6px;
971
- transition: all 0.4s ease;
972
- transform: scale(0);
973
- }
959
+ .apirocket-checkout-summary-header,
960
+ .apirocket-checkout-summary-login { display: none; }
974
961
 
975
- .apirocket-form-radio input:checked::after {
976
- transform: scale(1);
977
- }
962
+ .apirocket-checkout-continue { display: none; }
963
+ .apirocket-checkout-close { display: block; }
964
+
965
+ .apirocket-checkout-breadcrumbs { text-align: center; }
966
+ .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
978
967
 
979
- .apirocket-form-radio-error-message {
980
- display: none;
981
- position: absolute;
982
- left: 32px;
983
- bottom: -16px;
984
- font-size: 14px;
985
- line-height: 1.2;
986
- color: #dc2626;
968
+ .apirocket-checkout-logo { display: none; }
987
969
  }
988
970
 
989
- .apirocket-form-radio.invalid.touched input {
990
- border-color: #dc2626;
991
- box-shadow: 0 0 0 1px #dc2626;
992
- }
993
971
 
994
- .apirocket-form-radio.invalid.touched .apirocket-form-radio-error-message { display: block; }
972
+ @media (max-width: 720px) {
995
973
 
996
- .apirocket-form-select {
997
- display: block;
998
- position: relative;
999
- margin-bottom: 16px;
1000
- }
974
+ .apirocket-checkout-row { display: block; }
975
+ .apirocket-checkout-row > * { margin-right: 0; }
976
+
977
+ .apirocket-checkout-actions > :first-child { order: 2; }
978
+ .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
979
+ .apirocket-checkout-actions {
980
+ flex-flow: column;
981
+ align-items: stretch;
982
+ }
1001
983
 
1002
- .apirocket-form-select select {
1003
- all: unset;
1004
- appearance: none;
1005
- -moz-appearance: none;
1006
- -webkit-appearance: none;
1007
- outline: none;
1008
- width: 100%;
1009
- height: 46px;
1010
- border-radius: 4px;
1011
- border: 1px solid #D9D9D9;
1012
- font-size: 14px;
1013
- line-height: 16px;
1014
- padding-left: 14px;
1015
- padding-right: 50px;
1016
- padding-top: 14px;
1017
- padding-bottom: 14px;
1018
- transition: all 0.3s ease;
1019
- box-sizing: border-box;
1020
- cursor: pointer;
1021
- }
984
+ .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
1022
985
 
1023
- .apirocket-form-select select:focus {
1024
- border-color: #404040;
1025
- box-shadow: 0 0 0 1px #404040;
1026
- }
986
+ .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
987
+ .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
988
+
989
+ .apirocket-checkout-section-subtitle {
990
+ padding-top: 16px;
991
+ margin-bottom: -16px;
992
+ }
1027
993
 
1028
- .apirocket-form-select select:not(:placeholder-shown) {
1029
- padding-top: 22px;
1030
- padding-bottom: 6px;
1031
- }
994
+ .apirocket-checkout-footer ul {
995
+ display: block;
996
+ text-align: center !important;
997
+ line-height: 32px !important;
998
+ }
1032
999
 
1033
- .apirocket-form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
1000
+ .apirocket-checkout-footer ul li {
1001
+ display: inline-block;
1002
+ }
1034
1003
 
1035
- .apirocket-form-select::before {
1036
- display: block;
1037
- position: absolute;
1038
- top: 8px;
1039
- right: 0px;
1040
- width: 40px;
1041
- height: 30px;
1042
- content: "";
1043
- background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z' fill='%23A3A3A3'/%3E%3C/svg%3E%0A");
1044
- background-repeat: no-repeat;
1045
- background-position: center;
1046
- border-left: 1px solid #d9d9d9;
1047
- pointer-events: none;
1048
- }
1004
+ .apircoket-checkout-legal { text-align: center; }
1049
1005
 
1050
- .apirocket-form-select-placeholder {
1051
- position: absolute;
1052
- font-size: 12px;
1053
- line-height: 1;
1054
- color: #737373;
1055
- transform: translateY(50%);
1056
- opacity: 0;
1057
- top: 8px;
1058
- left: 15px;
1059
- transition: all 0.3s ease;
1060
- overflow: hidden;
1061
- white-space: nowrap;
1062
- text-overflow: ellipsis;
1063
- }
1006
+ .apirocket-checkout-summary-item-col-image {
1007
+ flex: 0 0 auto;
1008
+ max-width: 80px;
1009
+ }
1010
+
1011
+ .apirocket-checkout-summary-item-col-image img {
1012
+ max-height: 80px;
1013
+ }
1014
+
1015
+ .apirocket-checkout-summary-item-col-description {
1016
+ flex: 1 1;
1017
+ padding-left: 8px;
1018
+ font-size: 14px;
1019
+ line-height: 16px;
1020
+ }
1021
+
1022
+ .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
1023
+
1024
+ .apirocket-checkout-summary-item-col-quantity {
1025
+ flex: 0 0 25px;
1026
+ font-size: 12px;
1027
+ }
1028
+
1029
+ .apirocket-checkout-summary-item-col-price {
1030
+ flex: 0 0 80px;
1031
+ font-size: 14px;
1032
+ }
1033
+
1034
+ .apirocket-checkout-summary-label-total {
1035
+ font-size: 16px;
1036
+ line-height: 18px;
1037
+ }
1038
+ .apirocket-checkout-summary-label-total small {
1039
+ font-size: 12px;
1040
+ line-height: 14px;
1041
+ }
1042
+
1043
+ .apirocket-checkout-summary-row {
1044
+ padding-top: 8px;
1045
+ }
1046
+
1047
+ .apirocket-checkout-summary-label {
1048
+ font-size: 14px;
1049
+ line-height: 14px;
1050
+ }
1064
1051
 
1065
- .apirocket-form-select select:not(:placeholder-shown) ~ span.apirocket-form-select-placeholder {
1066
- opacity: 1;
1067
- transform: translateY(0%);
1068
- }
1052
+ .apirocket-checkout-summary-value,
1053
+ .apirocket-checkout-summary-value-total {
1054
+ font-size: 16px;
1055
+ line-height: 16px;
1056
+ }
1069
1057
 
1070
- .apirocket-form-select .apirocket-form-select-error-message {
1071
- display: none;
1072
- font-size: 14px;
1073
- line-height: 1.2;
1074
- margin-top: 4px;
1075
- margin-left: 8px;
1076
- color: #dc2626;
1077
- }
1058
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
1059
+ max-height: 55px;
1060
+ }
1078
1061
 
1079
- .apirocket-form-select.invalid.touched select {
1080
- border-color: #dc2626;
1081
- box-shadow: 0 0 0 1px #dc2626;
1062
+ .apirocket-checkout-steps-summary { margin-top: 24px; }
1063
+
1064
+ .apirocket-checkout-steps-summary-row { position: relative; }
1065
+
1066
+ .apirocket-checkout-steps-summary-label {
1067
+ position: absolute;
1068
+ font-size: 14px;
1069
+ }
1070
+
1071
+ .apirocket-checkout-steps-summary-text { margin-top: 18px; }
1072
+ .apirocket-checkout-steps-summary-link { font-size: 12px; }
1073
+
1082
1074
  }
1083
1075
 
1084
- .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
1085
- .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
1086
1076
 
1087
- .apirocket-checkout * { box-sizing: content-box; }
1077
+ .apirocket-modal *,
1078
+ .apirocket-modal *::before,
1079
+ .apirocket-modal *::after { box-sizing: border-box; }
1088
1080
 
1089
- .apirocket-checkout {
1090
- display: block;
1081
+ .apirocket-modal {
1082
+ display: flex;
1083
+ justify-content: center;
1084
+ align-items: flex-start;
1091
1085
  position: fixed;
1092
- z-index: 10000;
1086
+ z-index: 10001;
1093
1087
  right: 0;
1094
1088
  top: 0;
1095
1089
  overflow: hidden;
@@ -1097,640 +1091,698 @@
1097
1091
  width: 100%;
1098
1092
  height: 100vh;
1099
1093
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1100
- background-color: #fff;
1094
+ background-color: #f5f5f5;
1101
1095
  }
1102
1096
 
1103
- .apirocket-checkout-wrap {
1097
+ .apirocket-modal-nav {
1098
+ position: absolute;
1104
1099
  display: flex;
1105
- margin: 0 auto;
1100
+ align-items: center;
1106
1101
  width: 90%;
1107
- min-height: 100%;
1108
1102
  max-width: 1100px;
1109
- padding: 0 5%;
1103
+ height: 96px;
1104
+ }
1110
1105
 
1106
+ .apirocket-modal-nav-button {
1107
+ display: flex;
1108
+ align-items: center;
1109
+ text-align: left;
1110
+ color: #737373;
1111
+ font-size: 16px;
1112
+ font-weight: normal;
1113
+ cursor: pointer;
1111
1114
  }
1112
1115
 
1113
- .apirocket-checkout-main {
1114
- order: 1;
1115
- width: 52%;
1116
- padding-right: 48px;
1116
+ .apirocket-modal-nav-button svg { margin-right: 16px; }
1117
+
1118
+ .apirocket-modal-content {
1119
+ display: flex;
1120
+ flex-flow: column;
1121
+ width: 480px;
1122
+ height: auto;
1123
+ padding: 32px;
1124
+ background-color: #fff;
1125
+ margin-top: 96px;
1126
+ margin-bottom: 32px;
1117
1127
  }
1118
1128
 
1119
- .apirocket-checkout-summary {
1120
- order: 2;
1129
+ .apirocket-modal-header {
1121
1130
  position: relative;
1122
- width: 40%;
1123
- padding-left: 48px;
1131
+ padding-bottom: 32px;
1124
1132
  }
1125
1133
 
1126
- .apirocket-checkout-summary::after {
1127
- position: absolute;
1128
- display: block;
1129
- top: 0;
1130
- left: 0;
1131
- content: "";
1132
- width: 300%;
1133
- height: 100%;
1134
- background: #f5f5f5;
1135
- z-index: -1;
1134
+ .apirocket-modal-title {
1135
+ font-size: 18px;
1136
+ font-weight: bold;
1137
+ line-height: 1;
1138
+ color: #404040;
1139
+ margin-bottom: 8px;
1136
1140
  }
1137
1141
 
1138
- .apirocket-checkout-continue {
1139
- display: flex;
1140
- align-items: center;
1141
- text-align: left;
1142
- margin-top: 40px;
1143
- margin-bottom: 40px;
1144
- color: #737373;
1145
- font-size: 16px;
1142
+ .apirocket-modal-subtitle {
1143
+ font-size: 14px;
1146
1144
  font-weight: normal;
1147
- cursor: pointer;
1145
+ line-height: 16px;
1146
+ color: #737373;
1148
1147
  }
1149
1148
 
1150
- .apirocket-checkout-close {
1151
- display: none;
1152
- cursor: pointer;
1149
+ .apirocket-modal-close {
1153
1150
  position: absolute;
1154
- top: 16px;
1155
- right: 32px;
1151
+ right: -16px;
1152
+ top: -16px;
1156
1153
  }
1157
1154
 
1158
- .apirocket-checkout-summary-login {
1159
- display: flex;
1160
- align-items: center;
1161
- justify-content: end;
1162
- text-align: right;
1163
- margin-top: 40px;
1164
- margin-bottom: 40px;
1165
- color: #737373;
1166
- font-size: 16px;
1167
- font-weight: normal;
1155
+ .apirocket-modal-close-icon {
1156
+ height: var(--cart-header-text-close-icon-size, 24px);
1157
+ width: var(--cart-header-text-close-icon-size, 24px);
1158
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
1168
1159
  cursor: pointer;
1169
1160
  }
1170
1161
 
1171
- .apirocket-checkout-summary-login svg,
1172
- .apirocket-checkout-continue svg { margin-right: 16px; }
1173
-
1174
- .apirocket-checkout-summary-header {
1175
- display: flex;
1176
- justify-content: space-between;
1177
- align-items: center;
1178
- margin-top: 56px;
1179
- margin-bottom: 48px;
1162
+ .apirocket-modal-body-text-password {
1163
+ color: #404040;
1164
+ font-size: 14px;
1165
+ font-weight: normal;
1166
+ line-height: 16px;
1167
+ margin-top: -8px;text-align: right;
1168
+ cursor: pointer;
1180
1169
  }
1181
1170
 
1182
- .apirocket-checkout-summary-header :last-child a {
1171
+ .apirocket-modal-body-text-password:hover { text-decoration: underline; }
1172
+
1173
+ .apirocket-modal-footer-text {
1174
+ color: #a3a3a3;
1183
1175
  font-size: 14px;
1184
1176
  font-weight: normal;
1185
- color: #737373;
1177
+ line-height: 16px;
1178
+ text-align: center;
1179
+ margin-top: 16px;
1186
1180
  }
1187
1181
 
1188
- .apirocket-checkout-summary-item {
1182
+ .apirocket-modal-footer-text span {
1183
+ color: #404040;
1184
+ cursor: pointer;
1185
+ }
1186
+
1187
+ .apirocket-modal-footer-text span:hover { text-decoration: underline; }
1188
+
1189
+
1190
+ .apirocket-modal-body {}
1191
+
1192
+ .apirocket-modal-footer {
1193
+ padding-top: 32px;
1194
+ }
1195
+
1196
+ .apirocket-modal-row {
1189
1197
  display: flex;
1190
- justify-content: stretch;
1198
+ justify-content: space-between;
1191
1199
  align-items: flex-start;
1192
- padding-bottom: 16px;
1193
- border-bottom: 1px solid #d9d9d9;
1194
- margin-bottom: 16px;
1195
1200
  }
1196
1201
 
1197
- .apirocket-checkout-summary-item-col-image {
1198
- flex: 0 0 auto;
1199
- max-width: 100px;
1202
+ .apirocket-modal-row > * {
1203
+ flex: 1 1;
1204
+ margin-right: 16px;
1200
1205
  }
1201
1206
 
1202
- .apirocket-checkout-summary-item-col-image img {
1207
+ .apirocket-modal-row > *:last-child { margin-right: 0; }
1208
+
1209
+
1210
+ @media (max-width: 720px) {
1211
+ .apirocket-modal-row { display: block; }
1212
+ .apirocket-modal-row > * { margin-right: 0; }
1213
+
1214
+ .apirocket-modal-nav { display: none; }
1215
+
1216
+ .apirocket-modal-content {
1217
+ width: 95%;
1218
+ margin-top: 32px;
1219
+ padding: 24px;
1220
+ }
1221
+
1222
+ .apirocket-modal-close {
1223
+ right: -8px;
1224
+ top: -8px;
1225
+ }
1226
+ }.apirocket-form-input {
1203
1227
  display: block;
1204
- max-width: 100%;
1205
- max-height: 100px;
1228
+ position: relative;
1229
+ margin-bottom: 16px;
1206
1230
  }
1207
1231
 
1208
- .apirocket-checkout-summary-item-col-description {
1209
- flex: 1 1 auto;
1210
- padding-left: 16px;
1211
- padding-right: 8px;
1232
+ .apirocket-form-input input {
1233
+ all: unset;
1234
+ appearance: none;
1235
+ -moz-appearance: none;
1236
+ -webkit-appearance: none;
1237
+ outline: none;
1238
+ width: 100%;
1239
+ height: 46px;
1240
+ background: #fff;
1241
+ border-radius: 4px;
1242
+ border: 1px solid #D9D9D9;
1212
1243
  font-size: 14px;
1213
- font-weight: bold;
1214
- line-height: 18px;
1244
+ line-height: 1;
1245
+ padding-left: 14px;
1246
+ padding-right: 14px;
1247
+ padding-top: 14px;
1248
+ padding-bottom: 14px;
1249
+ transition: all 0.3s ease;
1250
+ box-sizing: border-box;
1215
1251
  }
1216
1252
 
1217
- .apirocket-checkout-summary-item-col-description small {
1218
- display: block;
1219
- font-size: 14px;
1220
- font-weight: normal;
1221
- color: #a3a3a3;
1253
+ .apirocket-form-input input:focus {
1254
+ border-color: #404040;
1255
+ box-shadow: 0 0 0 1px #404040;
1222
1256
  }
1223
1257
 
1224
- .apirocket-checkout-summary-item-col-quantity {
1225
- flex: 0 0 50px;
1226
- font-size: 16px;
1227
- font-weight: normal;
1228
- color: #a3a3a3;
1229
- text-align: right;
1258
+ .apirocket-form-input input:not(:placeholder-shown) {
1259
+ padding-top: 22px;
1260
+ padding-bottom: 6px;
1230
1261
  }
1231
1262
 
1232
- .apirocket-checkout-summary-item-col-price {
1233
- flex: 0 0 100px;
1234
- font-size: 16px;
1235
- font-weight: bold;
1236
- color: #404040;
1237
- text-align: right;
1263
+ .apirocket-form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; }
1264
+
1265
+ .apirocket-form-input-placeholder {
1266
+ position: absolute;
1267
+ font-size: 12px;
1268
+ line-height: 1;
1269
+ color: #737373;
1270
+ transform: translateY(50%);
1271
+ opacity: 0;
1272
+ top: 8px;
1273
+ left: 15px;
1274
+ transition: all 0.3s ease;
1275
+ overflow: hidden;
1276
+ white-space: nowrap;
1277
+ text-overflow: ellipsis;
1238
1278
  }
1239
1279
 
1240
- .apirocket-checkout-summary-row {
1241
- display: flex;
1242
- justify-content: space-between;
1243
- align-items: center;
1244
- padding-top: 16px;
1280
+ .apirocket-form-input input:not(:placeholder-shown) ~ span.apirocket-form-input-placeholder {
1281
+ opacity: 1;
1282
+ transform: translateY(0%);
1245
1283
  }
1246
1284
 
1247
- .apirocket-checkout-summary-label {
1248
- font-size: 16px;
1249
- font-weight: normal;
1250
- line-height: 18px;
1251
- color: #404040;
1285
+ .apirocket-form-input .apirocket-form-input-error-message {
1286
+ display: none;
1287
+ font-size: 14px;
1288
+ line-height: 1.2;
1289
+ margin-top: 4px;
1290
+ margin-left: 8px;
1291
+ color: #dc2626;
1252
1292
  }
1253
1293
 
1254
- .apirocket-checkout-summary-value {
1255
- font-size: 18px;
1256
- font-weight: bold;
1257
- line-height: 18px;
1258
- color: #404040;
1294
+ .apirocket-form-input.invalid.touched input {
1295
+ border-color: #dc2626;
1296
+ box-shadow: 0 0 0 1px #dc2626;
1259
1297
  }
1260
1298
 
1261
- .apirocket-checkout-summary-row-total {
1299
+ .apirocket-form-input.invalid.touched .apirocket-form-input-placeholder { color: #dc2626; }
1300
+ .apirocket-form-input.invalid.touched .apirocket-form-input-error-message { display: block; }
1301
+
1302
+ .apirocket-form-checkbox {
1262
1303
  display: flex;
1263
- justify-content: space-between;
1264
1304
  align-items: flex-start;
1265
- border-top: 1px solid #d9d9d9;
1266
- margin-top: 24px;
1267
- padding-top: 24px;
1305
+ justify-content: start;
1306
+ position: relative;
1307
+ margin-bottom: 16px;
1268
1308
  }
1269
1309
 
1270
- .apirocket-checkout-summary-label-total {
1271
- font-size: 18px;
1272
- font-weight: bold;
1273
- line-height: 21px;
1274
- color: #404040;
1275
- }
1276
- .apirocket-checkout-summary-label-total small {
1310
+ .apirocket-form-checkbox-label {
1311
+ flex: 0 1 auto;
1277
1312
  display: block;
1278
1313
  font-size: 14px;
1279
- line-height: 16px;
1314
+ line-height: 20px;
1280
1315
  font-weight: normal;
1281
- color: #a3a3a3;
1316
+ color: #404040;
1317
+ cursor: pointer;
1282
1318
  }
1283
1319
 
1284
- .apirocket-checkout-summary-value-total {
1285
- font-size: 24px;
1286
- font-weight: bold;
1287
- line-height: 24px;
1288
- color: #404040;
1320
+ .apirocket-form-checkbox-label small {
1321
+ display: block;
1322
+ color: #a3a3a3;
1323
+ font-size: 12px;
1289
1324
  }
1290
1325
 
1291
- .apirocket-checkout-breadcrumbs ol {
1292
- display: flex;
1293
- align-items: center;
1294
- list-style: none;
1326
+ .apirocket-form-checkbox input {
1327
+ all: unset;
1328
+ flex: 0 0 auto;
1329
+ appearance: none;
1330
+ -moz-appearance: none;
1331
+ -webkit-appearance: none;
1332
+ position: relative;
1333
+ box-sizing: border-box;
1334
+ display: inline-block;
1295
1335
  padding: 0;
1296
1336
  margin: 0;
1297
- margin-top: 24px;
1337
+ margin-right: 12px;
1338
+ width: 20px;
1339
+ height: 20px;
1340
+ vertical-align: middle;
1341
+ outline: none;
1342
+ border: 1px solid #d9d9d9;
1343
+ border-radius: 4px;
1344
+ cursor: pointer;
1345
+ transition: all 0.3s ease;
1346
+ overflow: hidden;
1347
+ background-color: #fff;
1298
1348
  }
1299
1349
 
1300
- .apirocket-checkout-breadcrumbs ol li {
1301
- cursor: pointer;
1302
- color: #a3a3a3;
1303
- font-size: 14px;
1304
- line-height: 1;
1350
+ .apirocket-form-checkbox input:focus {
1351
+ border-color: #404040;
1352
+ box-shadow: 0 0 0 1px #404040;
1305
1353
  }
1306
1354
 
1307
- .apirocket-checkout-breadcrumbs ol li::after {
1308
- width: 5px;
1309
- height: 9px;
1310
- display: inline-block;
1355
+ .apirocket-form-checkbox input:checked {
1356
+ background-color: #404040;
1357
+ border-color: #404040;
1358
+ }
1359
+
1360
+ .apirocket-form-checkbox input:disabled { background-color: #f5f5f5; }
1361
+ .apirocket-form-checkbox input:disabled + .apirocket-form-checkbox-label { color: #a3a3a3; }
1362
+
1363
+ .apirocket-form-checkbox input::after {
1364
+ display: block;
1365
+ position: absolute;
1366
+ width: 20px;
1367
+ height: 20px;
1311
1368
  content: "";
1312
- background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
1369
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
1313
1370
  background-repeat: no-repeat;
1314
- background-position: center;
1315
- padding: 0 8px;
1371
+ background-position: -1px -1px;
1372
+ transition: all 0.3s ease;
1373
+ transform: scale(0);
1316
1374
  }
1317
1375
 
1318
- .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
1319
-
1320
- .apirocket-checkout-breadcrumbs ol li a {
1321
- color: #a3a3a3;
1322
- text-decoration: underline;
1376
+ .apirocket-form-checkbox input:checked::after {
1377
+ transform: scale(1);
1323
1378
  }
1324
1379
 
1325
- .apirocket-checkout-breadcrumbs-active {
1326
- font-weight: bold;
1327
- color: #404040 !important;
1380
+ .apirocket-form-checkbox-error-message {
1381
+ display: none;
1382
+ position: absolute;
1383
+ left: 32px;
1384
+ bottom: -16px;
1385
+ font-size: 14px;
1386
+ line-height: 1.2;
1387
+ color: #dc2626;
1328
1388
  }
1329
1389
 
1330
- .apirocket-checkout-steps-summary {
1331
- border: 1px solid #d9d9d9;
1332
- border-radius: 4px;
1333
- overflow: hidden;
1334
- margin-top: 48px;
1390
+ .apirocket-form-checkbox.invalid.touched input {
1391
+ border-color: #dc2626;
1392
+ box-shadow: 0 0 0 1px #dc2626;
1335
1393
  }
1336
1394
 
1337
- .apirocket-checkout-steps-summary-row {
1395
+ .apirocket-form-checkbox.invalid.touched .apirocket-form-checkbox-error-message { display: block; }
1396
+
1397
+ .apirocket-form-radio {
1338
1398
  display: flex;
1399
+ align-items: flex-start;
1400
+ justify-content: start;
1339
1401
  position: relative;
1340
- border-bottom: 1px solid #d9d9d9;
1341
- padding: 16px;
1342
- }
1343
-
1344
- .apirocket-checkout-steps-summary-label {
1345
- flex: 0 0 90px;
1346
- font-size: 14px;
1347
- font-weight: normal;
1348
- line-height: 14px;
1349
- color: #a3a3a3;
1402
+ margin-bottom: 16px;
1350
1403
  }
1351
1404
 
1352
- .apirocket-checkout-steps-summary-text {
1353
- flex: 1 1 auto;
1405
+ .apirocket-form-radio-label {
1406
+ position: relative;
1407
+ flex: 0 1 auto;
1408
+ display: inline-block;
1354
1409
  font-size: 14px;
1410
+ line-height: 20px;
1355
1411
  font-weight: normal;
1356
- line-height: 18px;
1357
1412
  color: #404040;
1358
- }
1359
-
1360
- .apirocket-checkout-steps-summary-link {
1361
- flex: 0 0 60px;
1362
- text-align: right;
1363
- font-size: 12px;
1364
- font-weight: normal;
1365
- line-height: 1;
1366
- text-decoration: underline;
1367
- color: #737373;
1368
1413
  cursor: pointer;
1369
1414
  }
1370
1415
 
1371
- .apirocket-checkout-section {
1372
- margin-top: 48px;
1373
- }
1374
-
1375
- .apirocket-checkout-section-header {
1376
- margin-bottom: 24px;
1377
- }
1378
-
1379
- .apirocket-checkout-section-title {
1380
- font-size: 18px;
1381
- font-weight: bold;
1382
- line-height: 1;
1383
- color: #404040;
1384
- }
1385
-
1386
- .apirocket-checkout-section-subtitle {
1387
- font-size: 12px;
1388
- font-weight: normal;
1389
- padding-top: 4px;
1390
- line-height: 1;
1416
+ .apirocket-form-radio-label small {
1417
+ display: block;
1391
1418
  color: #a3a3a3;
1392
- text-align: right;
1393
- }
1394
-
1395
- .apirocket-checkout-section a {
1396
- color: #404040;
1397
- outline: none;
1398
- text-decoration: underline;
1399
- }
1400
-
1401
- .apirocket-checkout-section-text {
1402
- font-size: 14px;
1403
- line-height: 1;
1404
- margin-top: 4px;
1405
- color: #737373;
1419
+ font-size: 12px;
1406
1420
  }
1407
1421
 
1408
- .apirocket-checkout-actions {
1409
- display: flex;
1410
- margin-top: 64px;
1411
- align-items: center;
1412
- max-width: 100%;
1413
- }
1422
+ .apirocket-form-radio input:checked ~ .apirocket-form-radio-label { font-weight: bold; }
1423
+ .apirocket-form-radio input:checked ~ .apirocket-form-radio-label small { font-weight: normal; }
1414
1424
 
1415
- .apirocket-checkout-actions > * { flex: 1 1; }
1425
+ .apirocket-form-radio input:disabled { background-color: #f5f5f5; }
1426
+ .apirocket-form-radio input:disabled + .apirocket-form-radio-label { color: #a3a3a3; }
1416
1427
 
1417
- .apirocket-checkout-footer {
1418
- margin-top: 72px;
1419
- border-top: 1px solid #d9d9d9;
1420
- margin-bottom: 64px;
1421
- padding-top: 16px;
1428
+ .apirocket-form-radio-label img,
1429
+ .apirocket-form-radio-label svg {
1430
+ position: absolute;
1431
+ display: inline-block;
1432
+ height: 24px;
1433
+ min-height: 24px;
1434
+ top: -2px;
1422
1435
  }
1423
1436
 
1424
- .apirocket-checkout-footer ul {
1425
- display: flex;
1426
- align-items: center;
1427
- list-style: none;
1437
+ .apirocket-form-radio input {
1438
+ flex: 0 0 auto;
1439
+ appearance: none;
1440
+ -moz-appearance: none;
1441
+ -webkit-appearance: none;
1442
+ position: relative;
1443
+ box-sizing: border-box;
1444
+ display: inline-block;
1428
1445
  padding: 0;
1429
1446
  margin: 0;
1447
+ margin-right: 12px;
1448
+ width: 20px;
1449
+ height: 20px;
1450
+ vertical-align: middle;
1451
+ outline: none;
1452
+ border: 1px solid #d9d9d9;
1453
+ border-radius: 20px;
1454
+ cursor: pointer;
1455
+ transition: all 0.3s ease;
1456
+ overflow: hidden;
1457
+ background-color: #fff;
1430
1458
  }
1431
1459
 
1432
- .apirocket-checkout-footer ul li { margin-right: 16px; }
1460
+ .apirocket-form-radio input:focus {
1461
+ border-color: #404040;
1462
+ box-shadow: 0 0 0 1px #404040;
1463
+ }
1433
1464
 
1434
- .apirocket-checkout-footer ul li a {
1435
- color: #404040;
1436
- font-size: 14px;
1437
- line-height: 1;
1438
- text-decoration: none;
1465
+ .apirocket-form-radio input:checked {
1466
+ background-color: #404040;
1467
+ border-color: #404040;
1439
1468
  }
1440
1469
 
1441
- .apirocket-checkout-footer ul li a:focus {
1442
- outline: none;
1443
- text-decoration: underline;
1470
+ .apirocket-form-radio input::after {
1471
+ display: block;
1472
+ position: absolute;
1473
+ width: 20px;
1474
+ height: 20px;
1475
+ content: "";
1476
+ background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E%0A");
1477
+ background-repeat: no-repeat;
1478
+ background-position: 6px 6px;
1479
+ transition: all 0.4s ease;
1480
+ transform: scale(0);
1444
1481
  }
1445
1482
 
1446
- .apircoket-checkout-legal {
1447
- margin-top: 16px;
1448
- font-size: 14px;
1449
- color: #737373;
1450
- font-weight: normal;
1451
- line-height: 1.4;
1483
+ .apirocket-form-radio input:checked::after {
1484
+ transform: scale(1);
1452
1485
  }
1453
1486
 
1454
- .apircoket-checkout-legal a {
1455
- text-decoration: underline;
1456
- color: #404040;
1487
+ .apirocket-form-radio-error-message {
1488
+ display: none;
1489
+ position: absolute;
1490
+ left: 32px;
1491
+ bottom: -16px;
1492
+ font-size: 14px;
1493
+ line-height: 1.2;
1494
+ color: #dc2626;
1457
1495
  }
1458
1496
 
1459
- .apirocket-checkout-logo img {
1460
- display: block;
1461
- max-height: 80px;
1497
+ .apirocket-form-radio.invalid.touched input {
1498
+ border-color: #dc2626;
1499
+ box-shadow: 0 0 0 1px #dc2626;
1462
1500
  }
1463
1501
 
1464
- .apirocket-checkout-mobile { display: none; }
1502
+ .apirocket-form-radio.invalid.touched .apirocket-form-radio-error-message { display: block; }
1465
1503
 
1466
- .apirocket-checkout-mobile .apirocket-checkout-logo {
1504
+ .apirocket-form-select {
1467
1505
  display: block;
1468
- margin-top: 16px;
1506
+ position: relative;
1469
1507
  margin-bottom: 16px;
1470
1508
  }
1471
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1472
- display: block;
1473
- margin: auto;
1474
- max-height: 80px;
1475
- }
1476
1509
 
1477
- .apirocket-checkout-mobile-menu {
1478
- background-color: #f5f5f5;
1479
- border-top: 1px solid #d9d9d9;
1510
+ .apirocket-form-select select {
1511
+ all: unset;
1512
+ appearance: none;
1513
+ -moz-appearance: none;
1514
+ -webkit-appearance: none;
1515
+ outline: none;
1516
+ width: 100%;
1517
+ height: 46px;
1518
+ border-radius: 4px;
1519
+ border: 1px solid #D9D9D9;
1520
+ font-size: 14px;
1521
+ line-height: 16px;
1522
+ padding-left: 14px;
1523
+ padding-right: 50px;
1524
+ padding-top: 14px;
1525
+ padding-bottom: 14px;
1526
+ transition: all 0.3s ease;
1527
+ box-sizing: border-box;
1528
+ cursor: pointer;
1480
1529
  }
1481
1530
 
1482
- .apirocket-checkout-mobile-wrapper {
1483
- display: flex;
1484
- justify-content: space-between;
1485
- align-items: center;
1486
- width: 90%;
1487
- max-width: 560px;
1488
- margin: 0 auto;
1489
- padding: 16px 0px;
1490
- color: #404040;
1531
+ .apirocket-form-select select:focus {
1532
+ border-color: #404040;
1533
+ box-shadow: 0 0 0 1px #404040;
1491
1534
  }
1492
1535
 
1493
- .apirocket-checkout-mobile-wrapper-cart {
1494
- display: inline-flex;
1495
- align-items: center;
1496
- color: #404040;
1497
- cursor: pointer;
1536
+ .apirocket-form-select select:not(:placeholder-shown) {
1537
+ padding-top: 22px;
1538
+ padding-bottom: 6px;
1498
1539
  }
1499
1540
 
1500
- .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
1541
+ .apirocket-form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
1501
1542
 
1502
- .apirocket-checkout-mobile-wrapper-total {
1503
- line-height: 20px;
1504
- font-size: 20px;
1505
- font-weight: bold;
1543
+ .apirocket-form-select::before {
1544
+ display: block;
1545
+ position: absolute;
1546
+ top: 8px;
1547
+ right: 0px;
1548
+ width: 40px;
1549
+ height: 30px;
1550
+ content: "";
1551
+ background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z' fill='%23A3A3A3'/%3E%3C/svg%3E%0A");
1552
+ background-repeat: no-repeat;
1553
+ background-position: center;
1554
+ border-left: 1px solid #d9d9d9;
1555
+ pointer-events: none;
1506
1556
  }
1507
1557
 
1508
- .apirocket-checkout-mobile-summary {
1509
- background-color: #f5f5f5;
1510
- transition-property: max-height;
1511
- transition-timing-function: ease-in;
1512
- transition-duration: 350ms;
1513
- max-height: 0px;
1558
+ .apirocket-form-select-placeholder {
1559
+ position: absolute;
1560
+ font-size: 12px;
1561
+ line-height: 1;
1562
+ color: #737373;
1563
+ transform: translateY(50%);
1564
+ opacity: 0;
1565
+ top: 8px;
1566
+ left: 15px;
1567
+ transition: all 0.3s ease;
1514
1568
  overflow: hidden;
1515
- border-bottom: 1px solid #d9d9d9;
1516
- }
1517
-
1518
- .apirocket-checkout-mobile-summary--show {
1519
- max-height: 1000px;
1520
- overflow: auto;
1569
+ white-space: nowrap;
1570
+ text-overflow: ellipsis;
1521
1571
  }
1522
1572
 
1523
- .apirocket-checkout-mobile-summary-wrapper {
1524
- width: 90%;
1525
- max-width: 560px;
1526
- padding: 16px 0px;
1527
- margin: 0 auto;
1573
+ .apirocket-form-select select:not(:placeholder-shown) ~ span.apirocket-form-select-placeholder {
1574
+ opacity: 1;
1575
+ transform: translateY(0%);
1528
1576
  }
1529
1577
 
1530
-
1531
-
1532
- /* Utils */
1533
-
1534
- .apirocket-checkout-row {
1535
- display: flex;
1536
- justify-content: space-between;
1537
- align-items: flex-start;
1538
- }
1539
- .apirocket-checkout-row > * {
1540
- flex: 1 1;
1541
- margin-right: 16px;
1578
+ .apirocket-form-select .apirocket-form-select-error-message {
1579
+ display: none;
1580
+ font-size: 14px;
1581
+ line-height: 1.2;
1582
+ margin-top: 4px;
1583
+ margin-left: 8px;
1584
+ color: #dc2626;
1542
1585
  }
1543
1586
 
1544
- .apirocket-checkout-row > *:last-child { margin-right: 0; }
1545
-
1546
- .apirocket-checkout-fieldset {
1547
- border: 1px solid #d9d9d9;
1548
- border-radius: 4px;
1549
- overflow: hidden;
1587
+ .apirocket-form-select.invalid.touched select {
1588
+ border-color: #dc2626;
1589
+ box-shadow: 0 0 0 1px #dc2626;
1550
1590
  }
1551
1591
 
1552
- .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
1592
+ .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
1593
+ .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
1553
1594
 
1554
- .apirocket-checkout-fieldset .apirocket-form-input,
1555
- .apirocket-checkout-fieldset .apirocket-form-select,
1556
- .apirocket-checkout-fieldset .apirocket-form-checkbox,
1557
- .apirocket-checkout-fieldset .apirocket-form-radio { margin-bottom: 0; }
1558
- .apirocket-checkout-fieldset .apirocket-form-radio .form-radio-label { font-size: 16px; }
1559
1595
 
1560
- .apirocket-checkout-fieldset > * {
1561
- padding: 16px;
1562
- border-bottom: 1px solid #d9d9d9;
1563
- }
1564
- .apirocket-checkout-fieldset-row {
1565
- display: flex;
1566
- justify-content: space-between;
1567
- align-items: flex-start;
1568
- }
1569
- .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
1570
- .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
1571
- .apirocket-checkout-fieldset-row > :last-child {
1572
- flex: 0 0 auto;
1573
- margin-right: 0px;
1574
- font-size: 16px;
1575
- font-weight: bold;
1576
- line-height: 20px;
1577
- color: #404040;
1596
+ .apirocket-button,
1597
+ button.apirocket-button {
1598
+ box-sizing: border-box !important;
1599
+ display: block;
1600
+ width: 100%;
1601
+ padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1602
+ margin: 0px;
1603
+ border-radius: var(--cart-button-border-radius, 4px);
1604
+ background-color: var(--cart-button-background-color, transparent);
1605
+ border: 1px solid var(--cart-button-border-color, #e5e5e5);
1606
+ color: var(--cart-button-font-color, #737373);
1607
+ line-height: 1;
1608
+ font-size: var(--cart-button-font-size, 16px);
1609
+ font-weight: var(--cart-button-font-weight, normal);
1610
+ text-align: center;
1611
+ transition-property: color, border-color, background-color, box-shadow;
1612
+ transition-timing-function: ease;
1613
+ transition-duration: 350ms;
1614
+ cursor: pointer;
1578
1615
  }
1579
1616
 
1580
- .apirocket-checkout-fieldset-row > :last-child img {
1581
- display: block;
1582
- max-height: 24px;
1617
+ .apirocket-button:hover {
1618
+ background-color: var(--cart-button-background-color-hover, transparent);
1619
+ border-color: var(--cart-button-border-color-hover, #404040);
1620
+ color: var(--cart-button-font-color-hover, #404040);
1583
1621
  }
1584
1622
 
1585
- .apirocket-checkout-fieldset-row-wrapper {
1586
- background-color: #f5f5f5;
1623
+ .apirocket-button:focus {
1624
+ outline: none;
1625
+ text-decoration: underline;
1587
1626
  }
1588
1627
 
1589
- .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
1590
- .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
1591
-
1592
- /* Responsive */
1593
-
1594
- @media (max-width: 1000px) {
1595
-
1596
- .apirocket-checkout-mobile { display: block; }
1597
-
1598
- .apirocket-checkout-wrap {
1599
- flex-flow: column;
1600
- margin: 0;
1601
- padding: 0;
1602
- width: 100%;
1603
- }
1604
-
1605
- .apirocket-checkout-main,
1606
- .apirocket-checkout-summary {
1607
- width: 90%;
1608
- max-width: 560px;
1609
- margin: 0 auto;
1610
- padding: 0;
1611
- }
1612
-
1613
- .apirocket-checkout-summary {
1614
- /* order: 0;
1615
- padding: 16px 0; */
1616
- display: none;
1617
- }
1618
- .apirocket-checkout-summary::after { display: none; }
1628
+ .apirocket-button-link,
1629
+ button.apirocket-button-link {
1630
+ display: flex;
1631
+ align-items: center;
1632
+ text-align: left;
1633
+ justify-content: flex-start;
1634
+ align-items: center;
1635
+ border: none;
1636
+ padding-left: 0;
1637
+ padding-right: 0;
1638
+ width: auto;
1639
+ overflow: hidden;
1640
+ white-space: nowrap;
1641
+ text-overflow: ellipsis;
1642
+ }
1619
1643
 
1620
- .apirocket-checkout-summary-header,
1621
- .apirocket-checkout-summary-login { display: none; }
1644
+ .apirocket-button-link span {
1645
+ margin-left: 16px;
1646
+ margin-right: 16px;
1647
+ }
1622
1648
 
1623
- .apirocket-checkout-continue { display: none; }
1624
- .apirocket-checkout-close { display: block; }
1625
-
1626
- .apirocket-checkout-breadcrumbs { text-align: center; }
1627
- .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
1649
+ .apirocket-button-primary,
1650
+ button.apirocket-button-primary {
1651
+ background-color: var(--cart-button-primary-background-color, #1d4ed8);
1652
+ border-color: var(--cart-button-primary-border-color, #1d4ed8);
1653
+ color: var(--cart-button-primary-text-color, #fff);
1654
+ }
1628
1655
 
1629
- .apirocket-checkout-logo { display: none; }
1656
+ button.apirocket-button-primary:disabled {
1657
+ background-color: #eee;
1658
+ border-color: #eee;
1659
+ color: #ccc;
1630
1660
  }
1631
1661
 
1662
+ .apirocket-button-primary:hover {
1663
+ background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1664
+ border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1665
+ color: var(--cart-button-primary-text-color-hover, #fff);
1666
+ box-shadow: var(--cart-shadow-button-primary-hover, none);
1667
+ }
1632
1668
 
1633
1669
  @media (max-width: 720px) {
1634
1670
 
1635
- .apirocket-checkout-row { display: block; }
1636
- .apirocket-checkout-row > * { margin-right: 0; }
1637
-
1638
- .apirocket-checkout-actions > :first-child { order: 2; }
1639
- .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
1640
- .apirocket-checkout-actions {
1641
- flex-flow: column;
1642
- align-items: stretch;
1671
+ .apirocket-button-link {
1672
+ width: 100%;
1673
+ justify-content: center;
1643
1674
  }
1644
1675
 
1645
- .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
1676
+ }.apirocket-summary {}
1646
1677
 
1647
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
1648
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
1649
-
1650
- .apirocket-checkout-section-subtitle {
1651
- padding-top: 16px;
1652
- margin-bottom: -16px;
1653
- }
1678
+ .apirocket-summary-top {
1679
+ margin-top: 56px;
1680
+ margin-bottom: 32px;
1681
+ }
1654
1682
 
1655
- .apirocket-checkout-footer ul {
1656
- display: block;
1657
- text-align: center !important;
1658
- line-height: 32px !important;
1659
- }
1683
+ .apirocket-summary-header {
1684
+ display: flex;
1685
+ justify-content: flex-start;
1686
+ align-items: center;
1687
+ margin-bottom: 32px;
1688
+ }
1660
1689
 
1661
- .apirocket-checkout-footer ul li {
1662
- display: inline-block;
1663
- }
1690
+ .apirocket-summary-header-icon {
1691
+ flex: 0 1;
1692
+ margin-right: 16px;
1693
+ }
1664
1694
 
1665
- .apircoket-checkout-legal { text-align: center; }
1695
+ .apirocket-summary-header-content {}
1666
1696
 
1667
- .apirocket-checkout-summary-item-col-image {
1668
- flex: 0 0 auto;
1669
- max-width: 80px;
1670
- }
1671
-
1672
- .apirocket-checkout-summary-item-col-image img { max-height: 80px; }
1673
-
1674
- .apirocket-checkout-summary-item-col-description {
1675
- flex: 1 1;
1676
- padding-left: 8px;
1677
- font-size: 14px;
1678
- line-height: 16px;
1679
- }
1680
-
1681
- .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
1682
-
1683
- .apirocket-checkout-summary-item-col-quantity {
1684
- flex: 0 0 25px;
1685
- font-size: 12px;
1686
- }
1687
-
1688
- .apirocket-checkout-summary-item-col-price {
1689
- flex: 0 0 80px;
1690
- font-size: 14px;
1691
- }
1697
+ .apirocket-summary-header-title {
1698
+ font-size: 24px;
1699
+ font-weight: bold;
1700
+ line-height: 1.2;
1701
+ color: #404040;
1702
+ margin-bottom: 4px;
1703
+ }
1692
1704
 
1693
- .apirocket-checkout-summary-label-total {
1694
- font-size: 16px;
1695
- line-height: 18px;
1696
- }
1697
- .apirocket-checkout-summary-label-total small {
1698
- font-size: 12px;
1699
- line-height: 14px;
1700
- }
1705
+ .apirocket-summary-header-subtitle {
1706
+ font-size: 18px;
1707
+ font-weight: normal;
1708
+ line-height: 1.2;
1709
+ color: #737373;
1710
+ }
1701
1711
 
1702
- .apirocket-checkout-summary-row {
1703
- padding-top: 8px;
1704
- }
1712
+ .apirocket-summary-section {
1713
+ margin-top: 16px;
1714
+ border: 1px solid #d9d9d9;
1715
+ border-radius: 4px;
1716
+ padding: 24px;
1717
+ }
1705
1718
 
1706
- .apirocket-checkout-summary-label {
1707
- font-size: 14px;
1708
- line-height: 14px;
1709
- }
1719
+ .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
1720
+ .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
1710
1721
 
1711
- .apirocket-checkout-summary-value,
1712
- .apirocket-checkout-summary-value-total {
1713
- font-size: 16px;
1714
- line-height: 16px;
1715
- }
1722
+ .apirocket-summary-section-title {
1723
+ font-size: 18px;
1724
+ font-weight: bold;
1725
+ line-height: 1.2;
1726
+ color: #404040;
1727
+ margin-bottom: 24px;
1728
+ }
1716
1729
 
1717
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1718
- max-height: 55px;
1719
- }
1730
+ .apirocket-summary-section-subtitle {
1731
+ font-size: 16px;
1732
+ font-weight: bold;
1733
+ line-height: 1;
1734
+ color: #404040;
1735
+ margin-bottom: 16px;
1736
+ }
1720
1737
 
1721
- .apirocket-checkout-steps-summary { margin-top: 24px; }
1738
+ .apirocket-summary-section-text {
1739
+ font-size: 14px;
1740
+ font-weight: normal;
1741
+ line-height: 18px;
1742
+ color: #404040;
1743
+ }
1722
1744
 
1723
- .apirocket-checkout-steps-summary-row { position: relative; }
1745
+ .apirocket-summary-help {
1746
+ display: flex;
1747
+ justify-content: flex-start;
1748
+ align-items: center;
1749
+ }
1724
1750
 
1725
- .apirocket-checkout-steps-summary-label {
1726
- position: absolute;
1727
- font-size: 14px;
1728
- }
1751
+ .apirocket-summary-help-icon {
1752
+ flex: 0 1;
1753
+ padding-right: 12px;
1754
+ }
1729
1755
 
1730
- .apirocket-checkout-steps-summary-text { margin-top: 18px; }
1731
- .apirocket-checkout-steps-summary-link { font-size: 12px; }
1732
-
1756
+ .apirocket-summary-help-content {
1757
+ font-size: 14px;
1758
+ font-weight: normal;
1759
+ line-height: 1.2;
1760
+ color: #404040;
1733
1761
  }
1734
1762
 
1763
+ .apirocket-summary-help-content a {
1764
+ display: block;
1765
+ color: #737373;
1766
+ }
1767
+
1768
+ @media (max-width: 1000px) {
1769
+ .apirocket-summary-top { display: none; }
1770
+ .apirocket-summary-header { margin-top: 32px; }
1771
+ }
1735
1772
 
1736
- .spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}
1773
+ @media (max-width: 720px) {
1774
+ .apirocket-summary-section-subtitle { margin-top: 24px; }
1775
+ .apirocket-summary-header {
1776
+ flex-direction: column;
1777
+ align-items: center;
1778
+ text-align: center;
1779
+ }
1780
+ .apirocket-summary-header-icon {
1781
+ margin-right: 0px;
1782
+ margin-bottom: 16px;
1783
+ }
1784
+ .apirocket-summary-header-title {
1785
+ font-size: 28px;
1786
+ margin-bottom: 8px;
1787
+ }
1788
+ }.spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}