apirocket 0.1.2 → 0.2.0

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