apirocket 0.4.1 → 0.4.2

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