apirocket 0.1.3 → 0.2.1

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