apirocket 0.1.3 → 0.2.0

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