apirocket 0.0.8 → 0.0.9

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