apirocket 0.4.0 → 0.4.2

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