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