apirocket 0.3.1 → 0.3.2

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