apirocket 0.0.13 → 0.0.19

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