apirocket 0.0.18 → 0.1.0

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