apirocket 0.0.8 → 0.0.12

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