apirocket 0.0.18 → 0.0.19

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