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