PluginProbe
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More / 2.4.1
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More v2.4.1
2.4.1 2.4.0 2.3.4 2.3.3 2.3.2 2.3.1 2.3.0 2.2.2 2.2.1 2.2.0 2.1.2 2.1.1 trunk 0.0.1 0.0.2 0.0.3 0.0.4 0.0.5 0.0.6 0.0.7 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 All 68 releases
← All changes | assets/css/better-payment-el.css +998 -572 0.0.3 → 2.4.1 View file →
@@ -1,856 +1,1140 @@
1 -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
2 -
1 +/*!***************************************************************************************************************************************************************************************************************************!*\
2 + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/css/better-payment-el.scss ***!
3 + \***************************************************************************************************************************************************************************************************************************/
4 +@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);
5 +/*!*******************************************************************************************************************************************************************************************************************************!*\
6 + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/css/better-payment-el.scss (1) ***!
7 + \*******************************************************************************************************************************************************************************************************************************/
3 8 .better-payment--wrapper {
4 - overflow: hidden;
5 - font-family: "Poppins", sans-serif;
9 + overflow: hidden;
10 + font-family: "Poppins", sans-serif;
6 11 }
7 12
8 13 .better-payment--wrapper * {
9 - outline: none;
10 - border: none;
11 - -webkit-box-sizing: border-box;
12 - box-sizing: border-box;
14 + outline: none;
15 + border: none;
16 + -webkit-box-sizing: border-box;
17 + box-sizing: border-box;
13 18 }
14 19
15 20 label {
16 - margin-bottom: 0;
21 + margin-bottom: 0;
17 22 }
18 23
19 24 button {
20 - vertical-align: middle;
21 - background: unset;
22 - font-family: "Poppins", sans-serif;
23 - font-weight: 500 !important;
25 + vertical-align: middle;
26 + background: unset;
27 + font-family: "Poppins", sans-serif;
28 + font-weight: 500 !important;
24 29 }
25 30
26 31 button:hover, button:focus {
27 - outline: none;
32 + outline: none;
28 33 }
29 34
30 35 button:not(:disabled) {
31 - cursor: pointer;
36 + cursor: pointer;
32 37 }
33 38
34 39 .pt140 {
35 - padding-top: 140px;
40 + padding-top: 140px;
36 41 }
37 42
38 43 .pb230 {
39 - padding-bottom: 230px;
44 + padding-bottom: 230px;
40 45 }
41 46
42 47 .better-payment--wrapper .background__grey {
43 - background: #f4f5f7;
48 + background: #f4f5f7;
44 49 }
45 50
46 51 .better-payment--wrapper .background__red {
47 - background: #ff6161;
52 + background: #ff6161;
48 53 }
49 54
50 55 .better_payment__form--one {
51 - max-width: 835px;
52 - margin: 0 auto;
53 - position: relative;
54 - padding-top: 100px;
56 + max-width: 835px;
57 + margin: 0 auto;
58 + position: relative;
59 + padding-top: 100px;
55 60 }
56 61
57 62 @media (max-width: 991.98px) {
58 - .better_payment__form--one {
59 - padding-top: 50px;
60 - }
63 + .better_payment__form--one {
64 + padding-top: 50px;
65 + }
61 66 }
62 -
63 67 .better_payment__form--one:before {
64 - position: absolute;
65 - background: #252aff;
66 - top: 0;
67 - left: 0;
68 - right: 0;
69 - height: 380px;
70 - content: '';
71 - border-radius: 10px;
68 + position: absolute;
69 + background: #252aff;
70 + top: 0;
71 + left: 0;
72 + right: 0;
73 + height: 380px;
74 + content: "";
75 + border-radius: 10px;
72 76 }
73 77
74 78 .better_payment__form--one form {
75 - background: #ffffff;
76 - margin: 0 75px;
77 - position: relative;
78 - top: 2;
79 - padding: 60px;
80 - padding-bottom: 105px;
81 - border-radius: 5px;
79 + background: #ffffff;
80 + margin: 0 75px;
81 + position: relative;
82 + top: 2;
83 + padding: 60px;
84 + padding-bottom: 105px;
85 + border-radius: 5px;
82 86 }
83 87
84 88 @media (max-width: 991.98px) {
85 - .better_payment__form--one form {
86 - margin: 0 35px;
87 - padding: 50px;
88 - }
89 + .better_payment__form--one form {
90 + margin: 0 35px;
91 + padding: 50px;
92 + }
89 93 }
90 -
91 94 @media (max-width: 575.98px) {
92 - .better_payment__form--one form {
93 - padding: 30px;
94 - }
95 + .better_payment__form--one form {
96 + padding: 30px;
97 + }
95 98 }
96 -
97 99 .better_payment__form--one form .bp-form__group {
98 - margin-bottom: 30px;
100 + margin-bottom: 30px;
99 101 }
100 102
101 103 .better_payment__form--one form .bp-form__group .bp-form__control {
102 - height: 75px;
103 - width: 100%;
104 - border-radius: 5px;
105 - background: #ffffff;
106 - font-size: 20px;
107 - font-weight: 400;
108 - color: #252525;
109 - border-width: 1px;
110 - border-color: #c2c2c2;
111 - border-style: solid;
112 - padding: 0 30px;
104 + height: 75px;
105 + width: 100%;
106 + border-radius: 5px;
107 + background: #ffffff;
108 + font-size: 20px;
109 + font-weight: 400;
110 + color: #252525;
111 + border-width: 1px;
112 + border-color: #c2c2c2;
113 + border-style: solid;
114 + padding: 0 30px;
113 115 }
114 116
115 117 .better_payment__form--one form .bp-form__group .bp-form__control::-webkit-input-placeholder {
116 - color: #707070;
118 + color: #707070;
117 119 }
118 120
119 121 .better_payment__form--one form .bp-form__group .bp-form__control::-moz-placeholder {
120 - color: #707070;
122 + color: #707070;
121 123 }
122 124
123 125 .better_payment__form--one form .bp-form__group .bp-form__control:-ms-input-placeholder {
124 - color: #707070;
126 + color: #707070;
125 127 }
126 128
127 129 .better_payment__form--one form .bp-form__group .bp-form__control:-moz-placeholder {
128 - color: #707070;
130 + color: #707070;
129 131 }
130 132
131 133 @media (max-width: 991.98px) {
132 - .better_payment__form--one form .bp-form__group .bp-form__control {
133 - height: 60px;
134 - font-size: 18px;
135 - }
134 + .better_payment__form--one form .bp-form__group .bp-form__control {
135 + height: 60px;
136 + font-size: 18px;
137 + }
136 138 }
137 -
138 139 .better_payment__form--one form .bp-payment-amount-wrap,
139 140 .payment-form-layout .bp-payment-amount-wrap {
140 - display: -webkit-box;
141 - display: -ms-flexbox;
142 - display: flex;
143 - -webkit-box-pack: justify;
144 - -ms-flex-pack: justify;
145 - justify-content: space-between;
146 - -ms-flex-wrap: wrap;
147 - flex-wrap: wrap;
141 + display: -webkit-box;
142 + display: -ms-flexbox;
143 + display: flex;
144 + -webkit-box-pack: justify;
145 + -ms-flex-pack: justify;
146 + -ms-flex-wrap: wrap;
147 + flex-wrap: wrap;
148 + column-gap: 20px;
148 149 }
149 150
150 151 .better_payment__form--one form .bp-payment-amount-wrap .bp-form__group,
151 152 .payment-form-layout .bp-payment-amount-wrap .bp-form__group {
152 - -webkit-box-flex: 0;
153 - -ms-flex: 0 0 calc(25% - 15px);
154 - flex: 0 0 calc(25% - 15px);
153 + -webkit-box-flex: 0;
154 + -ms-flex: 0 0 calc(25% - 15px);
155 + flex: 0 0 calc(25% - 15px);
155 156 }
156 157
157 158 @media (max-width: 575.98px) {
158 - .better_payment__form--one form .bp-payment-amount-wrap .bp-form__group,
159 - .payment-form-layout .bp-payment-amount-wrap .bp-form__group {
160 - -webkit-box-flex: 0;
161 - -ms-flex: 0 0 calc(50% - 10px);
162 - flex: 0 0 calc(50% - 10px);
163 - }
159 + .better_payment__form--one form .bp-payment-amount-wrap .bp-form__group,
160 + .payment-form-layout .bp-payment-amount-wrap .bp-form__group {
161 + -webkit-box-flex: 0;
162 + -ms-flex: 0 0 calc(50% - 10px);
163 + flex: 0 0 calc(50% - 10px);
164 + }
164 165 }
165 -
166 -.better_payment__form--one form .bp-payment-amount-wrap .bp-form__group input[type="radio"].bp-form__control,
167 -.payment-form-layout .bp-payment-amount-wrap .bp-form__group input[type="radio"].bp-form__control {
168 - display: none;
166 +.better_payment__form--one form .bp-payment-amount-wrap .bp-form__group input[type=radio].bp-form__control,
167 +.payment-form-layout .bp-payment-amount-wrap .bp-form__group input[type=radio].bp-form__control {
168 + display: none;
169 169 }
170 170
171 -.better_payment__form--one form .bp-payment-amount-wrap .bp-form__group input[type="radio"].bp-form__control:checked ~ label,
172 -.payment-form-layout .bp-payment-amount-wrap .bp-form__group input[type="radio"].bp-form__control:checked ~ label {
173 - border-color: #252aff;
174 - background: rgba(37, 42, 255, 0.1);
175 - color: #252aff;
171 +.better_payment__form--one form .bp-payment-amount-wrap .bp-form__group input[type=radio].bp-form__control:checked ~ label,
172 +.payment-form-layout .bp-payment-amount-wrap .bp-form__group input[type=radio].bp-form__control:checked ~ label {
173 + border-color: #252aff;
174 + background: rgba(37, 42, 255, 0.1);
175 + color: #252aff;
176 176 }
177 177
178 178 .better_payment__form--one form .bp-payment-amount-wrap .bp-form__group label,
179 179 .payment-form-layout .bp-payment-amount-wrap .bp-form__group label {
180 - height: 75px;
181 - width: 100%;
182 - border-radius: 5px;
183 - background: #ffffff;
184 - font-size: 20px;
185 - font-weight: 600;
186 - color: #252525;
187 - border-width: 1px;
188 - border-color: #c2c2c2;
189 - border-style: solid;
190 - padding: 0 30px;
191 - line-height: 75px;
192 - padding: 0;
193 - text-align: center;
194 - display: inline-block;
195 - cursor: pointer;
180 + height: 60px;
181 + width: 100%;
182 + border-radius: 5px;
183 + background: #ffffff;
184 + font-size: 20px;
185 + font-weight: 600;
186 + color: #252525;
187 + border-width: 1px;
188 + border-color: #c2c2c2;
189 + border-style: solid;
190 + padding: 0 30px;
191 + line-height: 60px;
192 + padding: 0;
193 + text-align: center;
194 + display: inline-block;
195 + cursor: pointer;
196 196 }
197 197
198 198 @media (max-width: 991.98px) {
199 - .better_payment__form--one form .bp-payment-amount-wrap .bp-form__group label,
200 - .payment-form-layout .bp-payment-amount-wrap .bp-form__group label {
201 - line-height: 60px;
202 - height: 60px;
203 - font-size: 18px;
204 - }
199 + .better_payment__form--one form .bp-payment-amount-wrap .bp-form__group label,
200 + .payment-form-layout .bp-payment-amount-wrap .bp-form__group label {
201 + line-height: 60px;
202 + height: 60px;
203 + font-size: 18px;
204 + }
205 205 }
206 -
207 206 @media (max-width: 991.98px) {
208 - .better_payment__form--one form .bp-payment-amount-wrap .bp-form__group .bp-form__control,
209 - .payment-form-layout .bp-payment-amount-wrap .bp-form__group .bp-form__control {
210 - padding: 0 20px;
211 - }
207 + .better_payment__form--one form .bp-payment-amount-wrap .bp-form__group .bp-form__control,
208 + .payment-form-layout .bp-payment-amount-wrap .bp-form__group .bp-form__control {
209 + padding: 0 20px;
210 + }
212 211 }
213 -
214 212 .better_payment__form--one form .payment__option {
215 - display: -webkit-box;
216 - display: -ms-flexbox;
217 - display: flex;
218 - -webkit-box-pack: justify;
219 - -ms-flex-pack: justify;
220 - justify-content: space-between;
213 + display: -webkit-box;
214 + display: -ms-flexbox;
215 + display: flex;
216 + -webkit-box-pack: justify;
217 + -ms-flex-pack: justify;
218 + justify-content: space-between;
221 219 }
222 220
223 221 @media (max-width: 575.98px) {
224 - .better_payment__form--one form .payment__option {
225 - display: block;
226 - }
227 -
228 - .better_payment__form--one form .payment__option .button1:not(:last-child) {
229 - margin-bottom: 25px;
230 - }
231 -
232 - .better_payment__form--one form .payment__option .button1{
233 - width: 100%;
234 - }
222 + .better_payment__form--one form .payment__option {
223 + display: block;
224 + }
225 + .better_payment__form--one form .payment__option .button1:not(:last-child) {
226 + margin-bottom: 25px;
227 + }
228 + .better_payment__form--one form .payment__option .button1 {
229 + width: 100%;
230 + }
235 231 }
236 -
237 232 .better_payment__form--one form .payment__option .button1 {
238 - height: 75px;
239 - -webkit-box-flex: 0;
240 - -ms-flex: 0 0 calc(50% - 15px);
241 - flex: 0 0 calc(50% - 15px);
242 - border: 1px solid #252aff;
243 - border-radius: 5px;
244 - padding: 0;
245 - font-size: 20px;
246 - font-weight: 600;
247 - color: #252525;
248 - display: -webkit-box;
249 - display: -ms-flexbox;
250 - display: flex;
251 - -webkit-box-pack: center;
252 - -ms-flex-pack: center;
253 - justify-content: center;
254 - -webkit-box-align: center;
255 - -ms-flex-align: center;
256 - align-items: center;
257 - background: rgba(37, 42, 255, 0.1);
258 - text-transform: none;
259 - text-decoration: none;
233 + height: 75px;
234 + -webkit-box-flex: 0;
235 + -ms-flex: 0 0 calc(50% - 15px);
236 + flex: 0 0 calc(50% - 15px);
237 + border: 1px solid #252aff;
238 + border-radius: 5px;
239 + padding: 0;
240 + font-size: 20px;
241 + font-weight: 600;
242 + color: #252525;
243 + display: -webkit-box;
244 + display: -ms-flexbox;
245 + display: flex;
246 + -webkit-box-pack: center;
247 + -ms-flex-pack: center;
248 + justify-content: center;
249 + -webkit-box-align: center;
250 + -ms-flex-align: center;
251 + align-items: center;
252 + background: rgba(37, 42, 255, 0.1);
253 + text-transform: none;
254 + text-decoration: none;
260 255 }
261 256
262 257 .better_payment__form--one form .payment__option .button1 img {
263 - margin-right: 10px;
258 + margin-right: 10px;
264 259 }
265 260
266 261 .better_payment__form--one form .payment__option .button1.button1__selected {
267 - background: #252aff;
268 - color: #ffffff;
262 + background: #252aff;
263 + color: #ffffff;
269 264 }
270 265
271 266 @media (max-width: 991.98px) {
272 - .better_payment__form--one form .payment__option .button1 {
273 - height: 60px;
274 - font-size: 18px;
275 - }
267 + .better_payment__form--one form .payment__option .button1 {
268 + height: 60px;
269 + font-size: 18px;
270 + }
276 271 }
277 -
278 272 .better_payment__form--two {
279 - max-width: 835px;
280 - margin: 0 auto;
281 - position: relative;
282 - padding-top: 100px;
273 + max-width: 835px;
274 + margin: 0 auto;
275 + position: relative;
276 + padding-top: 100px;
283 277 }
284 278
285 279 @media (max-width: 991.98px) {
286 - .better_payment__form--two {
287 - padding-top: 50px;
288 - }
280 + .better_payment__form--two {
281 + padding-top: 50px;
282 + }
289 283 }
290 -
291 284 .better_payment__form--two:before {
292 - position: absolute;
293 - background: #30d19e;
294 - top: 0;
295 - left: 0;
296 - right: 0;
297 - height: 380px;
298 - content: '';
299 - border-radius: 10px;
285 + position: absolute;
286 + background: #30d19e;
287 + top: 0;
288 + left: 0;
289 + right: 0;
290 + height: 380px;
291 + content: "";
292 + border-radius: 10px;
300 293 }
301 294
302 295 .better_payment__form--two form {
303 - background: #ffffff;
304 - margin: 0 75px;
305 - position: relative;
306 - top: 2;
296 + background: #ffffff;
297 + margin: 0 75px;
298 + position: relative;
299 + top: 2;
307 300 }
308 301
309 302 .better_payment__form--two form .input__wrap {
310 - padding: 60px;
311 - padding-bottom: 0;
303 + padding: 60px;
304 + padding-bottom: 0;
312 305 }
313 306
314 307 @media (max-width: 991.98px) {
315 - .better_payment__form--two form .input__wrap {
316 - padding: 50px;
317 - padding-bottom: 0;
318 - }
308 + .better_payment__form--two form .input__wrap {
309 + padding: 50px;
310 + padding-bottom: 0;
311 + }
319 312 }
320 -
321 313 @media (max-width: 575.98px) {
322 - .better_payment__form--two form .input__wrap {
323 - padding: 30px;
324 - padding-bottom: 0;
325 - }
314 + .better_payment__form--two form .input__wrap {
315 + padding: 30px;
316 + padding-bottom: 0;
317 + }
326 318 }
327 -
328 319 @media (max-width: 991.98px) {
329 - .better_payment__form--two form {
330 - margin: 0 35px;
331 - }
320 + .better_payment__form--two form {
321 + margin: 0 35px;
322 + }
332 323 }
333 -
334 324 .better_payment__form--two form .bp-form__group {
335 - margin-bottom: 30px;
325 + margin-bottom: 30px;
336 326 }
337 327
338 328 .better_payment__form--two form .bp-form__group .bp-form__control {
339 - height: 75px;
340 - width: 100%;
341 - border-radius: 40px;
342 - background: #ffffff;
343 - font-size: 20px;
344 - font-weight: 400;
345 - color: #252525;
346 - border-width: 1px;
347 - border-color: #c2c2c2;
348 - border-style: solid;
349 - padding: 0 30px;
329 + height: 75px;
330 + width: 100%;
331 + border-radius: 40px;
332 + background: #ffffff;
333 + font-size: 20px;
334 + font-weight: 400;
335 + color: #252525;
336 + border-width: 1px;
337 + border-color: #c2c2c2;
338 + border-style: solid;
339 + padding: 0 30px;
350 340 }
351 341
352 342 .better_payment__form--two form .bp-form__group .bp-form__control::-webkit-input-placeholder {
353 - color: #707070;
343 + color: #707070;
354 344 }
355 345
356 346 .better_payment__form--two form .bp-form__group .bp-form__control::-moz-placeholder {
357 - color: #707070;
347 + color: #707070;
358 348 }
359 349
360 350 .better_payment__form--two form .bp-form__group .bp-form__control:-ms-input-placeholder {
361 - color: #707070;
351 + color: #707070;
362 352 }
363 353
364 354 .better_payment__form--two form .bp-form__group .bp-form__control:-moz-placeholder {
365 - color: #707070;
355 + color: #707070;
366 356 }
367 357
368 358 @media (max-width: 991.98px) {
369 - .better_payment__form--two form .bp-form__group .bp-form__control {
370 - height: 60px;
371 - font-size: 18px;
372 - }
359 + .better_payment__form--two form .bp-form__group .bp-form__control {
360 + height: 60px;
361 + font-size: 18px;
362 + }
373 363 }
374 -
375 364 .better_payment__form--two form .bp-payment-amount-wrap {
376 - display: -webkit-box;
377 - display: -ms-flexbox;
378 - display: flex;
379 - -webkit-box-pack: justify;
380 - -ms-flex-pack: justify;
381 - justify-content: space-between;
382 - -ms-flex-wrap: wrap;
383 - flex-wrap: wrap;
365 + display: -webkit-box;
366 + display: -ms-flexbox;
367 + display: flex;
368 + -webkit-box-pack: justify;
369 + -ms-flex-pack: justify;
370 + justify-content: space-between;
371 + -ms-flex-wrap: wrap;
372 + flex-wrap: wrap;
373 + column-gap: 15px;
384 374 }
385 375
386 376 .better_payment__form--two form .bp-payment-amount-wrap .bp-form__group {
387 - -webkit-box-flex: 0;
388 - -ms-flex: 0 0 calc(25% - 22.5px);
389 - flex: 0 0 calc(25% - 22.5px);
377 + -webkit-box-flex: 0;
378 + -ms-flex: 0 0 calc(25% - 22.5px);
379 + flex: 0 0 calc(25% - 22.5px);
390 380 }
391 381
392 382 @media (max-width: 575.98px) {
393 - .better_payment__form--two form .bp-payment-amount-wrap .bp-form__group {
394 - -webkit-box-flex: 0;
395 - -ms-flex: 0 0 calc(50% - 10px);
396 - flex: 0 0 calc(50% - 10px);
397 - }
383 + .better_payment__form--two form .bp-payment-amount-wrap .bp-form__group {
384 + -webkit-box-flex: 0;
385 + -ms-flex: 0 0 calc(50% - 10px);
386 + flex: 0 0 calc(50% - 10px);
387 + }
398 388 }
399 -
400 -.better_payment__form--two form .bp-payment-amount-wrap .bp-form__group input[type="radio"].bp-form__control {
401 - display: none;
389 +.better_payment__form--two form .bp-payment-amount-wrap .bp-form__group input[type=radio].bp-form__control {
390 + display: none;
402 391 }
403 392
404 -.better_payment__form--two form .bp-payment-amount-wrap .bp-form__group input[type="radio"].bp-form__control:checked ~ label {
405 - border-color: #30d19e;
406 - background: #30d19e;
407 - color: #ffffff;
393 +.better_payment__form--two form .bp-payment-amount-wrap .bp-form__group input[type=radio].bp-form__control:checked ~ label {
394 + border-color: #30d19e;
395 + background: #30d19e;
396 + color: #ffffff;
408 397 }
409 398
410 399 .better_payment__form--two form .bp-payment-amount-wrap .bp-form__group label {
411 - height: 75px;
412 - width: 100%;
413 - border-radius: 40px;
414 - background: #ffffff;
415 - font-size: 20px;
416 - font-weight: 600;
417 - color: #252525;
418 - border-width: 1px;
419 - border-color: #c2c2c2;
420 - border-style: solid;
421 - padding: 0 30px;
422 - line-height: 75px;
423 - padding: 0;
424 - text-align: center;
425 - display: inline-block;
426 - cursor: pointer;
400 + height: 60px;
401 + width: 100%;
402 + border-radius: 40px;
403 + background: #ffffff;
404 + font-size: 20px;
405 + font-weight: 600;
406 + color: #252525;
407 + border-width: 1px;
408 + border-color: #c2c2c2;
409 + border-style: solid;
410 + padding: 0 30px;
411 + line-height: 60px;
412 + padding: 0;
413 + text-align: center;
414 + display: inline-block;
415 + cursor: pointer;
427 416 }
428 417
429 418 @media (max-width: 991.98px) {
430 - .better_payment__form--two form .bp-payment-amount-wrap .bp-form__group label {
431 - line-height: 60px;
432 - height: 60px;
433 - font-size: 18px;
434 - }
419 + .better_payment__form--two form .bp-payment-amount-wrap .bp-form__group label {
420 + line-height: 60px;
421 + height: 60px;
422 + font-size: 18px;
423 + }
435 424 }
436 -
437 425 @media (max-width: 991.98px) {
438 - .better_payment__form--two form .bp-payment-amount-wrap .bp-form__group .bp-form__control {
439 - padding: 0 20px;
440 - }
426 + .better_payment__form--two form .bp-payment-amount-wrap .bp-form__group .bp-form__control {
427 + padding: 0 20px;
428 + }
441 429 }
442 -
443 430 .better_payment__form--two form .payment__option {
444 - display: -webkit-box;
445 - display: -ms-flexbox;
446 - display: flex;
447 - -webkit-box-pack: justify;
448 - -ms-flex-pack: justify;
449 - justify-content: space-between;
431 + display: -webkit-box;
432 + display: -ms-flexbox;
433 + display: flex;
434 + -webkit-box-pack: justify;
435 + -ms-flex-pack: justify;
436 + justify-content: space-between;
450 437 }
451 438
452 439 @media (max-width: 575.98px) {
453 - .better_payment__form--two form .payment__option {
454 - font-size: 16px;
455 - }
440 + .better_payment__form--two form .payment__option {
441 + font-size: 16px;
442 + }
456 443 }
457 -
458 444 .better_payment__form--two form .payment__option .button1 {
459 - height: 75px;
460 - -webkit-box-flex: 0;
461 - -ms-flex: 0 0 50%;
462 - flex: 0 0 50%;
463 - border: 0;
464 - padding: 0;
465 - font-size: 20px;
466 - font-weight: 600;
467 - color: #252525;
468 - display: -webkit-box;
469 - display: -ms-flexbox;
470 - display: flex;
471 - -webkit-box-pack: center;
472 - -ms-flex-pack: center;
473 - justify-content: center;
474 - -webkit-box-align: center;
475 - -ms-flex-align: center;
476 - align-items: center;
477 - position: relative;
445 + height: 75px;
446 + -webkit-box-flex: 0;
447 + -ms-flex: 0 0 50%;
448 + flex: 0 0 50%;
449 + border: 0;
450 + padding: 0;
451 + font-size: 20px;
452 + font-weight: 600;
453 + color: #252525;
454 + display: -webkit-box;
455 + display: -ms-flexbox;
456 + display: flex;
457 + -webkit-box-pack: center;
458 + -ms-flex-pack: center;
459 + justify-content: center;
460 + -webkit-box-align: center;
461 + -ms-flex-align: center;
462 + align-items: center;
463 + position: relative;
478 464 }
479 465
480 466 .better_payment__form--two form .payment__option .button1:before {
481 - position: absolute;
482 - bottom: 0;
483 - left: 0;
484 - right: 0;
485 - height: 5px;
486 - background: #adb9db;
487 - content: '';
467 + position: absolute;
468 + bottom: 0;
469 + left: 0;
470 + right: 0;
471 + height: 5px;
472 + background: #adb9db;
473 + content: "";
488 474 }
489 475
490 476 .better_payment__form--two form .payment__option .button1.button1__selected {
491 - color: #30d19e;
477 + color: #30d19e;
492 478 }
493 479
494 480 .better_payment__form--two form .payment__option .button1.button1__selected:before {
495 - background: #30d19e;
481 + background: #30d19e;
496 482 }
497 483
498 484 @media (max-width: 991.98px) {
499 - .better_payment__form--two form .payment__option .button1 {
500 - height: 60px;
501 - font-size: 18px;
502 - }
485 + .better_payment__form--two form .payment__option .button1 {
486 + height: 60px;
487 + font-size: 18px;
488 + }
503 489 }
504 -
505 490 .better_payment__form--three {
506 - max-width: 690px;
507 - margin: 0 auto;
508 - position: relative;
491 + max-width: 690px;
492 + margin: 0 auto;
493 + position: relative;
509 494 }
510 495
511 496 .better_payment__form--three form {
512 - background: #ffebeb;
513 - position: relative;
514 - top: 2;
515 - padding: 60px;
516 - padding-bottom: 105px;
517 - border-radius: 5px;
497 + background: #ffebeb;
498 + position: relative;
499 + top: 2;
500 + padding: 60px;
501 + padding-bottom: 105px;
502 + border-radius: 5px;
518 503 }
519 504
520 505 @media (max-width: 991.98px) {
521 - .better_payment__form--three form {
522 - margin: 0 35px;
523 - padding: 50px;
524 - }
506 + .better_payment__form--three form {
507 + margin: 0 35px;
508 + padding: 50px;
509 + }
525 510 }
526 -
527 511 @media (max-width: 575.98px) {
528 - .better_payment__form--three form {
529 - padding: 30px;
530 - }
512 + .better_payment__form--three form {
513 + padding: 30px;
514 + }
531 515 }
532 -
533 516 .better_payment__form--three form .bp-form__group {
534 - margin-bottom: 30px;
535 - position: relative;
517 + margin-bottom: 30px;
518 + position: relative;
536 519 }
537 520
538 521 .better_payment__form--three form .bp-form__group .bp-form__control {
539 - height: 75px;
540 - width: 100%;
541 - border-radius: 0;
542 - background: transparent;
543 - font-size: 20px;
544 - font-weight: 400;
545 - color: #252525;
546 - border: 0;
547 - border-bottom: 1px solid #c2c2c2;
548 - padding: 0 30px;
522 + height: 75px;
523 + width: 100%;
524 + border-radius: 0;
525 + background: transparent;
526 + font-size: 20px;
527 + font-weight: 400;
528 + color: #252525;
529 + border: 0;
530 + border-bottom: 1px solid #c2c2c2;
531 + padding: 0 30px;
549 532 }
550 533
551 534 .better_payment__form--three form .bp-form__group .bp-form__control::-webkit-input-placeholder {
552 - color: #707070;
535 + color: #707070;
553 536 }
554 537
555 538 .better_payment__form--three form .bp-form__group .bp-form__control::-moz-placeholder {
556 - color: #707070;
539 + color: #707070;
557 540 }
558 541
559 542 .better_payment__form--three form .bp-form__group .bp-form__control:-ms-input-placeholder {
560 - color: #707070;
543 + color: #707070;
561 544 }
562 545
563 546 .better_payment__form--three form .bp-form__group .bp-form__control:-moz-placeholder {
564 - color: #707070;
547 + color: #707070;
565 548 }
566 549
567 550 @media (max-width: 991.98px) {
568 - .better_payment__form--three form .bp-form__group .bp-form__control {
569 - height: 60px;
570 - font-size: 18px;
571 - padding: 0 20px;
572 - }
551 + .better_payment__form--three form .bp-form__group .bp-form__control {
552 + height: 60px;
553 + font-size: 18px;
554 + padding: 0 20px;
555 + }
573 556 }
574 -
575 557 @media (max-width: 575.98px) {
576 - .better_payment__form--three form .bp-form__group .bp-form__control {
577 - padding: 0;
578 - }
558 + .better_payment__form--three form .bp-form__group .bp-form__control {
559 + padding: 0;
560 + }
579 561 }
580 -
581 562 .better_payment__form--three form .bp-form__group .bp-form__control:focus ~ label {
582 - color: #ff6161;
563 + color: #ff6161;
583 564 }
584 565
585 -.better_payment__form--three form .bp-form__group input[type="text"].bp-form__control:valid ~ label {
586 - display: none;
566 +.better_payment__form--three form .bp-form__group input[type=text].bp-form__control:valid ~ label {
567 + display: none;
587 568 }
588 569
589 570 .better_payment__form--three form .bp-form__group label {
590 - position: absolute;
591 - top: 25px;
592 - left: 30px;
593 - color: #707070;
594 - font-size: 20px;
571 + position: absolute;
572 + top: 25px;
573 + left: 30px;
574 + color: #707070;
575 + font-size: 20px;
595 576 }
596 577
597 578 .better_payment__form--three form .bp-form__group label i {
598 - margin-right: 15px;
579 + margin-right: 15px;
599 580 }
600 581
601 582 @media (max-width: 991.98px) {
602 - .better_payment__form--three form .bp-form__group label {
603 - top: 17.5px;
604 - font-size: 18px;
605 - left: 20px;
606 - }
583 + .better_payment__form--three form .bp-form__group label {
584 + top: 17.5px;
585 + font-size: 18px;
586 + left: 20px;
587 + }
607 588 }
608 -
609 589 @media (max-width: 575.98px) {
610 - .better_payment__form--three form .bp-form__group label {
611 - left: 0;
612 - }
590 + .better_payment__form--three form .bp-form__group label {
591 + left: 0;
592 + }
613 593 }
614 -
615 594 .better_payment__form--three form .bp-payment-amount-wrap {
616 - display: -webkit-box;
617 - display: -ms-flexbox;
618 - display: flex;
619 - -webkit-box-pack: justify;
620 - -ms-flex-pack: justify;
621 - justify-content: space-between;
622 - -ms-flex-wrap: wrap;
623 - flex-wrap: wrap;
595 + display: -webkit-box;
596 + display: -ms-flexbox;
597 + display: flex;
598 + -webkit-box-pack: justify;
599 + -ms-flex-pack: justify;
600 + justify-content: space-between;
601 + -ms-flex-wrap: wrap;
602 + flex-wrap: wrap;
603 + column-gap: 15px;
624 604 }
625 605
626 606 .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group {
627 - -webkit-box-flex: 0;
628 - -ms-flex: 0 0 calc(25% - 22.5px);
629 - flex: 0 0 calc(25% - 22.5px);
607 + -webkit-box-flex: 0;
608 + -ms-flex: 0 0 calc(25% - 22.5px);
609 + flex: 0 0 calc(25% - 22.5px);
630 610 }
631 611
632 612 @media (max-width: 575.98px) {
633 - .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group {
634 - -webkit-box-flex: 0;
635 - -ms-flex: 0 0 calc(50% - 10px);
636 - flex: 0 0 calc(50% - 10px);
637 - }
613 + .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group {
614 + -webkit-box-flex: 0;
615 + -ms-flex: 0 0 calc(50% - 10px);
616 + flex: 0 0 calc(50% - 10px);
617 + }
638 618 }
639 -
640 -.better_payment__form--three form .bp-payment-amount-wrap .bp-form__group input[type="radio"].bp-form__control {
641 - display: none;
619 +.better_payment__form--three form .bp-payment-amount-wrap .bp-form__group input[type=radio].bp-form__control {
620 + display: none;
642 621 }
643 622
644 -.better_payment__form--three form .bp-payment-amount-wrap .bp-form__group input[type="radio"].bp-form__control:checked ~ label {
645 - border-color: #ff6161;
646 - background: #ff6161;
647 - color: #ffffff;
623 +.better_payment__form--three form .bp-payment-amount-wrap .bp-form__group input[type=radio].bp-form__control:checked ~ label {
624 + border-color: #ff6161;
625 + background: #ff6161;
626 + color: #ffffff;
648 627 }
649 628
650 629 .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group label {
651 - position: static;
652 - height: 75px;
653 - width: 100%;
654 - border-radius: 5px;
655 - background: transparent;
656 - font-size: 20px;
657 - font-weight: 600;
658 - color: #252525;
659 - border-width: 1px;
660 - border-color: #c2c2c2;
661 - border-style: solid;
662 - padding: 0 30px;
663 - line-height: 75px;
664 - padding: 0;
665 - text-align: center;
666 - display: inline-block;
667 - cursor: pointer;
630 + position: static;
631 + height: 60px;
632 + width: 100%;
633 + border-radius: 5px;
634 + background: transparent;
635 + font-size: 20px;
636 + font-weight: 600;
637 + color: #252525;
638 + border-width: 1px;
639 + border-color: #c2c2c2;
640 + border-style: solid;
641 + padding: 0 30px;
642 + line-height: 60px;
643 + padding: 0;
644 + text-align: center;
645 + display: inline-block;
646 + cursor: pointer;
668 647 }
669 648
670 649 @media (max-width: 991.98px) {
671 - .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group label {
672 - line-height: 60px;
673 - height: 60px;
674 - font-size: 18px;
675 - }
650 + .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group label {
651 + line-height: 60px;
652 + height: 60px;
653 + font-size: 18px;
654 + }
676 655 }
677 -
678 656 .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group .bp-form__control {
679 - border: 1px solid #c2c2c2;
680 - border-radius: 5px;
657 + border: 1px solid #c2c2c2;
658 + border-radius: 5px;
681 659 }
682 660
683 661 @media (max-width: 991.98px) {
684 - .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group .bp-form__control {
685 - padding: 0 20px;
686 - }
662 + .better_payment__form--three form .bp-payment-amount-wrap .bp-form__group .bp-form__control {
663 + padding: 0 20px;
664 + }
687 665 }
688 -
689 666 .better_payment__form--three form .payment__option {
690 - display: -webkit-box;
691 - display: -ms-flexbox;
692 - display: flex;
693 - -webkit-box-pack: justify;
694 - -ms-flex-pack: justify;
695 - justify-content: space-between;
667 + display: -webkit-box;
668 + display: -ms-flexbox;
669 + display: flex;
670 + -webkit-box-pack: justify;
671 + -ms-flex-pack: justify;
672 + justify-content: space-between;
696 673 }
697 674
698 675 @media (max-width: 575.98px) {
699 - .better_payment__form--three form .payment__option {
700 - display: block;
701 - }
702 -
703 - .better_payment__form--three form .payment__option .button1:not(:last-child) {
704 - margin-bottom: 25px;
705 - }
676 + .better_payment__form--three form .payment__option {
677 + display: block;
678 + }
679 + .better_payment__form--three form .payment__option .button1:not(:last-child) {
680 + margin-bottom: 25px;
681 + }
706 682 }
707 -
708 683 .better_payment__form--three form .payment__option .button1 {
709 - height: 75px;
710 - -webkit-box-flex: 0;
711 - -ms-flex: 0 0 calc(50% - 15px);
712 - flex: 0 0 calc(50% - 15px);
713 - border: 1px solid #ff6161;
714 - border-radius: 5px;
715 - padding: 0;
716 - font-size: 20px;
717 - font-weight: 600;
718 - color: #ffffff;
719 - display: -webkit-box;
720 - display: -ms-flexbox;
721 - display: flex;
722 - -webkit-box-pack: center;
723 - -ms-flex-pack: center;
724 - justify-content: center;
725 - -webkit-box-align: center;
726 - -ms-flex-align: center;
727 - align-items: center;
728 - background: #ff6161;
684 + height: 75px;
685 + -webkit-box-flex: 0;
686 + -ms-flex: 0 0 calc(50% - 15px);
687 + flex: 0 0 calc(50% - 15px);
688 + border: 1px solid #ff6161;
689 + border-radius: 5px;
690 + padding: 0;
691 + font-size: 20px;
692 + font-weight: 600;
693 + color: #ffffff;
694 + display: -webkit-box;
695 + display: -ms-flexbox;
696 + display: flex;
697 + -webkit-box-pack: center;
698 + -ms-flex-pack: center;
699 + justify-content: center;
700 + -webkit-box-align: center;
701 + -ms-flex-align: center;
702 + align-items: center;
703 + background: #ff6161;
729 704 }
730 705
731 706 .better_payment__form--three form .payment__option .button1 img {
732 - margin-right: 10px;
707 + margin-right: 10px;
733 708 }
734 709
735 710 .better_payment__form--three form .payment__option .button1.button1__selected {
736 - background: #ff6161;
737 - color: #ffffff;
711 + background: #ff6161;
712 + color: #ffffff;
738 713 }
739 714
740 715 @media (max-width: 991.98px) {
741 - .better_payment__form--three form .payment__option .button1 {
742 - height: 60px;
743 - font-size: 18px;
744 - }
716 + .better_payment__form--three form .payment__option .button1 {
717 + height: 60px;
718 + font-size: 18px;
719 + }
745 720 }
721 +.better-payment-payment__report {
722 + background: #fff;
723 + border-radius: 10px;
724 + -webkit-box-shadow: 51.43px 30.902px 125px 0px rgba(0, 9, 78, 0.11);
725 + box-shadow: 51.43px 30.902px 125px 0px rgba(0, 9, 78, 0.11);
726 + text-align: center;
727 + width: calc(100% - 30px);
728 + max-width: 870px;
729 + margin: 0 auto;
730 + padding: 80px 30px;
731 +}
746 732
747 -.better-payment-payment__report {
748 - background: #fff;
749 - border-radius: 10px;
750 - -webkit-box-shadow: 51.43px 30.902px 125px 0px rgba(0, 9, 78, 0.11);
751 - box-shadow: 51.43px 30.902px 125px 0px rgba(0, 9, 78, 0.11);
752 - text-align: center;
753 - width: calc(100% - 30px);
754 - max-width: 870px;
755 - margin: 0 auto;
756 - padding: 80px 30px;
733 +.better-payment-payment__report.better-payment-success-report {
734 + width: unset;
757 735 }
758 736
737 +.bp-thank_page span {
738 + display: inline-block;
739 +}
740 +
741 +.bp-bold {
742 + font-weight: 400;
743 + color: #222b3d;
744 +}
745 +
746 +.bp-flex {
747 + display: flex;
748 +}
749 +
750 +.bp-thank_page {
751 + display: flex;
752 + align-items: center;
753 + padding: 20px;
754 +}
755 +
756 +.bp-thank_page-wrapper {
757 + background-color: #ffffff;
758 + max-width: 700px;
759 + margin: 0 auto;
760 + vertical-align: middle;
761 + padding: 40px;
762 + border-radius: 20px;
763 + width: 100%;
764 + box-shadow: 0px 0px 10px 3px rgba(34, 43, 61, 0.1019607843);
765 +}
766 +
767 +.bp-thank_page-logo {
768 + text-align: center;
769 + margin-bottom: 32px;
770 +}
771 +
772 +.bp-thank_page-logo_wrapper {
773 + display: inline-block;
774 + background: rgba(107, 89, 238, 0.1019607843);
775 + border-radius: 16px;
776 + padding: 11px;
777 + line-height: 0;
778 +}
779 +
780 +.bp-thank_page-text {
781 + text-align: center;
782 + border-bottom: 1px solid #dfe2ed;
783 +}
784 +
785 +.bp-page_header {
786 + font-size: 32px;
787 + color: #222b3d;
788 + font-weight: 500;
789 + margin-bottom: 8px;
790 +}
791 +
792 +.bp-reason_for-text {
793 + font-size: 24px;
794 + font-weight: 300;
795 + color: #222b3d;
796 + margin-bottom: 8px;
797 +}
798 +
799 +.bp-payment_info {
800 + color: #6a758c;
801 + font-size: 16px;
802 + font-weight: 300;
803 + margin-top: 8px;
804 + margin-bottom: 0;
805 +}
806 +
807 +.bp-transaction_info-wrapper {
808 + background-color: #f0f3f7;
809 + border: 1px solid #dfe2ed;
810 + min-width: 258px;
811 + width: auto;
812 + padding: 7px;
813 + border-radius: 4px;
814 + align-items: center;
815 + justify-content: center;
816 + margin-bottom: 32px;
817 + margin-top: 27px;
818 + position: relative;
819 + display: inline-flex;
820 +}
821 +
822 +.bp-transaction_info {
823 + color: #6a758c;
824 + font-size: 14px;
825 + font-weight: 300;
826 + align-items: center;
827 + gap: 4px;
828 + margin: 0;
829 +}
830 +
831 +.bp-transaction_id {
832 + position: relative;
833 + width: 95px;
834 + overflow: hidden;
835 +}
836 +
837 +.bp-transaction_id::before {
838 + content: "";
839 + position: absolute;
840 + top: 0;
841 + right: 0;
842 + bottom: 0;
843 + width: 20px;
844 + background: linear-gradient(90deg, rgba(240, 243, 247, 0.0588235294), #f0f3f7);
845 +}
846 +
847 +.bp-thank_page-info {
848 + border-bottom: 1px solid #dfe2ed;
849 + margin-bottom: 32px;
850 +}
851 +
852 +.bp-transaction_data-copy_btn {
853 + border: none;
854 + background-color: transparent;
855 + outline: none;
856 + cursor: pointer;
857 + width: 20px;
858 + height: 20px;
859 + z-index: 999;
860 + stroke: #394357;
861 + padding: 0px;
862 +}
863 +.bp-transaction_data-copy_btn:hover {
864 + background: transparent;
865 +}
866 +.bp-transaction_data-copy_btn:focus {
867 + background: none;
868 +}
869 +
870 +.copied-text::after,
871 +.bp-transaction_data-copy_btn::after {
872 + display: none;
873 + content: "Copy";
874 + position: absolute;
875 + top: -28px;
876 + right: -18px;
877 + background-color: white;
878 + padding: 6px 10px;
879 + border-radius: 4px;
880 + box-shadow: 0px 5px 10px 0px rgba(34, 43, 61, 0.2980392157);
881 + font-size: 12px;
882 + font-weight: 400;
883 + color: #222b3d;
884 +}
885 +
886 +.copied-text {
887 + stroke: #6b59ee;
888 +}
889 +
890 +.copied-text::after {
891 + display: block;
892 + content: "Copied!";
893 + right: -23px;
894 +}
895 +
896 +.copied-text::before,
897 +.bp-transaction_data-copy_btn::before {
898 + display: none;
899 + content: "";
900 + position: absolute;
901 + border-left: 6px solid transparent;
902 + border-right: 6px solid transparent;
903 + border-top: 6px solid #ffffff;
904 + bottom: -6px;
905 + right: 5px;
906 + top: 0px;
907 + z-index: 1;
908 +}
909 +
910 +.copied-text::before {
911 + display: block;
912 +}
913 +
914 +.bp-transaction_data-copy_btn:hover::before,
915 +.bp-transaction_data-copy_btn:hover::after {
916 + display: block;
917 +}
918 +
919 +.bp-transaction_data-copy_btn:active svg {
920 + width: 17px;
921 + height: 17px;
922 +}
923 +
924 +.bp-page_info-list {
925 + padding: 32px 0;
926 +}
927 +
928 +.bp-page_info-list_item {
929 + color: #6a758c;
930 + font-weight: 300;
931 + justify-content: space-between;
932 + margin-bottom: 20px;
933 + gap: 20px;
934 +}
935 +
936 +.bp-info_content {
937 + font-size: 20px;
938 +}
939 +
940 +.bp-payment_method-logo-wrapper {
941 + height: 30px;
942 + width: auto;
943 + line-height: 0;
944 +}
945 +
946 +.bp-payment_method-logo {
947 + height: 100% !important;
948 + object-fit: cover;
949 +}
950 +
951 +.bp-button_group {
952 + justify-content: space-between;
953 + align-items: center;
954 +}
955 +
956 +.bp-print_btn {
957 + background-color: #f4f5ff;
958 + border-radius: 8px;
959 + padding: 13px 16px;
960 + border: none;
961 + cursor: pointer;
962 + align-items: center;
963 + font-weight: 400;
964 + font-size: 16px;
965 + color: #6b59ee;
966 + gap: 8px;
967 +}
968 +.bp-print_btn:hover {
969 + background-color: #f4f5ff;
970 + color: #6b59ee;
971 +}
972 +.bp-print_btn:focus {
973 + background-color: #f4f5ff;
974 + color: #6b59ee;
975 +}
976 +
977 +.bp-print_btn:active {
978 + transform: scale(0.96);
979 +}
980 +
981 +.bp-btn_wrapper {
982 + gap: 8px;
983 +}
984 +
985 +.bp-details_btn {
986 + padding: 13px 16px;
987 + color: #f7f8fa;
988 + background-color: #6b59ee;
989 + font-weight: 400;
990 + font-size: 16px;
991 + border-radius: 8px;
992 + cursor: pointer;
993 + transition: all 0.2s ease;
994 +}
995 +
996 +.bp-details_btn:hover {
997 + background-color: #624fec;
998 + color: #f7f8fa;
999 +}
1000 +
1001 +@media (max-width: 991.98px) {
1002 + .bp-thank_page-wrapper {
1003 + padding: 20px;
1004 + }
1005 + .bp-page_header {
1006 + font-size: 28px;
1007 + }
1008 + .bp-reason_for-text {
1009 + font-size: 20px;
1010 + }
1011 + .bp-payment_info {
1012 + color: #6a758c;
1013 + font-size: 13px;
1014 + }
1015 + .bp-page_info-list {
1016 + padding: 28px 0;
1017 + }
1018 + .bp-info_content {
1019 + font-size: 16px;
1020 + }
1021 + .bp-print_btn {
1022 + padding: 10px 13px;
1023 + font-size: 16px;
1024 + }
1025 + .bp-print_btn:focus {
1026 + background-color: #f4f5ff;
1027 + color: #6b59ee;
1028 + }
1029 + .bp-details_btn {
1030 + padding: 10px 13px;
1031 + font-size: 16px;
1032 + }
1033 +}
1034 +/* Hide everything except print-section */
1035 +@media print {
1036 + .bp-thank_page {
1037 + height: unset;
1038 + padding: 0;
1039 + }
1040 + .bp-button_group {
1041 + display: none;
1042 + }
1043 +}
759 1044 .better-payment-payment__report .report__thumb {
760 - /* margin-bottom: 20px; */
1045 + /* margin-bottom: 20px; */
761 1046 }
762 1047
763 1048 .better-payment-payment__report .report__thumb img {
764 - display: inline-block;
1049 + display: inline-block;
765 1050 }
766 1051
767 1052 .better-payment-payment__report .report__content h3 {
768 - font-size: 40px;
769 - font-weight: 500;
770 - font-family: "Poppins", sans-serif;
771 - margin-bottom: 30px;
1053 + font-size: 40px;
1054 + font-weight: 500;
1055 + font-family: "Poppins", sans-serif;
1056 + margin-bottom: 30px;
772 1057 }
773 1058
774 1059 @media (max-width: 767.98px) {
775 - .better-payment-payment__report .report__content h3 {
776 - font-size: 32px;
777 - }
1060 + .better-payment-payment__report .report__content h3 {
1061 + font-size: 32px;
1062 + }
778 1063 }
779 -
780 1064 .better-payment-payment__report .report__content h3.transaction__success {
781 - color: #2A3256;
1065 + color: #2a3256;
782 1066 }
783 1067
784 1068 .better-payment-success-transaction-number {
785 - background: #F4F6FF;
786 - border: 1px solid #E4E9FF;
787 - border-radius: 10px;
788 - padding: 5px 15px;
789 - margin-left: 10px;
790 - color: #006AFF;
1069 + background: #f4f6ff;
1070 + border: 1px solid #e4e9ff;
1071 + border-radius: 10px;
1072 + padding: 5px 15px;
1073 + margin-left: 10px;
1074 + color: #006aff;
791 1075 }
1076 +
792 1077 .better-payment-payment__report .report__content h3.transaction__failed {
793 - color: #f43333;
1078 + color: #f43333;
794 1079 }
795 1080
796 1081 .better-payment-payment__report .report__content p {
797 - font-size: 20px;
798 - font-weight: 500;
799 - color: #2A3256;
800 - font-family: "Poppins", sans-serif;
801 - line-height: 1.8;
802 - margin: 0;
803 - margin-bottom: 15px;
1082 + font-size: 20px;
1083 + font-weight: 500;
1084 + color: #2a3256;
1085 + font-family: "Poppins", sans-serif;
1086 + line-height: 1.8;
1087 + margin: 0;
1088 + margin-bottom: 15px;
804 1089 }
805 1090
806 1091 @media (max-width: 767.98px) {
807 - .better-payment-payment__report .report__content p {
808 - font-size: 18px;
809 - }
1092 + .better-payment-payment__report .report__content p {
1093 + font-size: 18px;
1094 + }
810 1095 }
811 -
812 1096 .better-payment-form-layout.better-payment-hide-placeholder input::-webkit-input-placeholder {
813 - opacity: 0;
814 - visibility: hidden;
1097 + opacity: 0;
1098 + visibility: hidden;
815 1099 }
816 1100
817 1101 /* Common Pages Start */
818 1102 .admin-bar .toast-top-right {
819 - top: 44px;
820 - right: 12px;
1103 + top: 44px;
1104 + right: 12px;
821 1105 }
1106 +
822 1107 /* Common Pages End */
823 -
824 1108 /**
825 1109 * Typography
826 1110 */
827 1111 .font-size-xxs {
828 - font-size: 10px !important;
1112 + font-size: 10px !important;
829 1113 }
830 1114
831 1115 .font-size-xs {
832 - font-size: 12px !important;
1116 + font-size: 12px !important;
833 1117 }
834 1118
835 1119 .font-size-sm {
836 - font-size: 14px !important;
1120 + font-size: 14px !important;
837 1121 }
838 1122
839 1123 .font-size-md {
840 - font-size: 16px !important;
1124 + font-size: 16px !important;
841 1125 }
842 1126
843 1127 .font-size-lg {
844 - font-size: 18px !important;
1128 + font-size: 18px !important;
845 1129 }
846 1130
847 1131 .font-size-xl {
848 - font-size: 20px !important;
1132 + font-size: 20px !important;
849 1133 }
850 1134
851 1135 .font-size-xxl {
852 - font-size: 24px !important;
1136 + font-size: 24px !important;
853 1137 }
854 1138
855 1139 /*
856 1140 * Forms
@@ -855,67 +1139,209 @@
855 1139 /*
856 1140 * Forms
857 1141 */
858 1142 .bp-input-group {
859 - position: relative;
860 - display: -webkit-box;
861 - display: -ms-flexbox;
862 - display: flex;
863 - -ms-flex-wrap: wrap;
864 - flex-wrap: wrap;
865 - -webkit-box-align: stretch;
866 - -ms-flex-align: stretch;
867 - align-items: stretch;
868 - width: 100%;
1143 + position: relative;
1144 + display: -webkit-box;
1145 + display: -ms-flexbox;
1146 + display: flex;
1147 + -ms-flex-wrap: wrap;
1148 + flex-wrap: wrap;
1149 + -webkit-box-align: stretch;
1150 + -ms-flex-align: stretch;
1151 + align-items: stretch;
1152 + width: 100%;
869 1153 }
870 1154
871 1155 .bp-input-group-prepend {
872 - margin-right: -3px;
1156 + margin-right: -3px;
873 1157 }
874 1158
875 1159 .bp-input-group-append, .bp-input-group-prepend {
876 - display: -webkit-box;
877 - display: -ms-flexbox;
878 - display: flex;
1160 + display: -webkit-box;
1161 + display: -ms-flexbox;
1162 + display: flex;
879 1163 }
880 1164
881 -.bp-input-group>.bp-input-group-prepend>.bp-input-group-text {
882 - border: 1px solid #818a91;
883 - border-right: none;
1165 +.bp-input-group > .bp-input-group-prepend > .bp-input-group-text {
1166 + border: 1px solid #818a91;
1167 + border-right: none;
884 1168 }
885 1169
886 1170 .bp-input-group-text {
887 - display: -webkit-box;
888 - display: -ms-flexbox;
889 - display: flex;
890 - -webkit-box-align: center;
891 - -ms-flex-align: center;
892 - align-items: center;
893 - padding: .375rem .75rem;
894 - margin-bottom: 0;
895 - font-size: 1rem;
896 - font-weight: 400;
897 - line-height: 1.5;
898 - color: #495057;
899 - text-align: center;
900 - white-space: nowrap;
901 - background-color: #e9ecef;
902 - border: 1px solid #ced4da;
1171 + display: -webkit-box;
1172 + display: -ms-flexbox;
1173 + display: flex;
1174 + -webkit-box-align: center;
1175 + -ms-flex-align: center;
1176 + align-items: center;
1177 + padding: 0.375rem 0.75rem;
1178 + margin-bottom: 0;
1179 + font-size: 1rem;
1180 + font-weight: 400;
1181 + line-height: 1.5;
1182 + color: #495057;
1183 + text-align: center;
1184 + white-space: nowrap;
1185 + background-color: #e9ecef;
1186 + border: 1px solid #ced4da;
903 1187 }
904 1188
905 1189 .elementor-field-group .elementor-field-textual.bp-elementor-field-textual-amount {
906 - width: unset;
907 - border-left: none;
1190 + width: unset;
1191 + border-left: none;
908 1192 }
909 1193
910 1194 .better-payment-success-report .report__thumb img,
911 1195 .better-payment-error-report .report__thumb img {
912 - /* max-width: 300px; */
913 - width: 100px;
914 - /* margin-left: 5%; */
915 - /* margin-bottom: 40px; */
916 - }
1196 + /* max-width: 300px; */
1197 + width: 100px;
1198 + /* margin-left: 5%; */
1199 + /* margin-bottom: 40px; */
1200 +}
917 1201
918 1202 .better-payment-success-report .report__thumb i,
919 1203 .better-payment-error-report .report__thumb i {
920 - font-size: 50px;
921 - }
1204 + font-size: 50px;
1205 +}
1206 +
1207 +.line-height-0 {
1208 + line-height: 0;
1209 +}
1210 +
1211 +.payment-failed-screen-section {
1212 + padding: 20px;
1213 +}
1214 +
1215 +.payment-failed-screen-section .bp-thank_page-logo_wrapper {
1216 + background: rgba(238, 96, 89, 0.1019607843);
1217 + line-height: 0;
1218 +}
1219 +
1220 +.payment-failed-screen-section .bp-thank_page-text {
1221 + border: none;
1222 +}
1223 +
1224 +.payment-failed-screen-section .bp-btn_wrapper {
1225 + text-align: center;
1226 + display: block;
1227 +}
1228 +.payment-failed-screen-section .bp-btn_wrapper a {
1229 + display: inline-block;
1230 +}
1231 +
1232 +.bp-paypal-pending__spinner-wrap {
1233 + position: relative;
1234 + display: inline-flex;
1235 + align-items: center;
1236 + justify-content: center;
1237 + width: 80px;
1238 + height: 80px;
1239 +}
1240 +.bp-paypal-pending__ring {
1241 + position: absolute;
1242 + inset: 0;
1243 + border: 3px solid rgba(107, 89, 238, 0.15);
1244 + border-top-color: #6E58F7;
1245 + border-radius: 50%;
1246 + animation: bp-paypal-spin 0.9s linear infinite;
1247 +}
1248 +.bp-paypal-pending__logo {
1249 + width: 32px;
1250 + height: 32px;
1251 + object-fit: contain;
1252 + position: relative;
1253 + z-index: 1;
1254 + transition: opacity 0.3s ease;
1255 +}
1256 +.bp-paypal-pending__body {
1257 + border-bottom: none;
1258 + padding-bottom: 0;
1259 +}
1260 +.bp-paypal-pending__heading {
1261 + transition: color 0.3s ease;
1262 +}
1263 +.bp-paypal-pending__sub {
1264 + margin-bottom: 0;
1265 + transition: color 0.3s ease;
1266 +}
1267 +.bp-paypal-pending__dots {
1268 + display: flex;
1269 + gap: 7px;
1270 + justify-content: center;
1271 + margin-top: 20px;
1272 + margin-bottom: 0;
1273 + transition: opacity 0.3s ease;
1274 +}
1275 +.bp-paypal-pending__dots span {
1276 + display: inline-block;
1277 + width: 8px;
1278 + height: 8px;
1279 + border-radius: 50%;
1280 + background-color: #6E58F7;
1281 + animation: bp-paypal-dot 1.4s ease-in-out infinite;
1282 +}
1283 +.bp-paypal-pending__dots span:nth-child(2) {
1284 + animation-delay: 0.2s;
1285 +}
1286 +.bp-paypal-pending__dots span:nth-child(3) {
1287 + animation-delay: 0.4s;
1288 +}
1289 +.bp-paypal-pending__bar {
1290 + margin-top: 32px;
1291 + height: 4px;
1292 + background: #f0f3f7;
1293 + border-radius: 4px;
1294 + overflow: hidden;
1295 +}
1296 +.bp-paypal-pending__bar-inner {
1297 + height: 100%;
1298 + width: 0;
1299 + background: #6E58F7;
1300 + border-radius: 4px;
1301 + animation: bp-paypal-progress 60s linear forwards;
1302 + transition: background 0.4s ease;
1303 +}
1304 +.bp-paypal-pending--timeout .bp-paypal-pending__ring {
1305 + border-color: rgba(229, 57, 53, 0.15);
1306 + border-top-color: #e53935;
1307 + animation: none;
1308 +}
1309 +.bp-paypal-pending--timeout .bp-paypal-pending__logo {
1310 + opacity: 0.35;
1311 +}
1312 +.bp-paypal-pending--timeout .bp-paypal-pending__heading {
1313 + color: #e53935;
1314 +}
1315 +.bp-paypal-pending--timeout .bp-paypal-pending__dots {
1316 + opacity: 0;
1317 + pointer-events: none;
1318 +}
1319 +.bp-paypal-pending--timeout .bp-paypal-pending__bar-inner {
1320 + animation: none;
1321 + width: 100%;
1322 + background: #e53935;
1323 +}
1324 +
1325 +@keyframes bp-paypal-spin {
1326 + to {
1327 + transform: rotate(360deg);
1328 + }
1329 +}
1330 +@keyframes bp-paypal-dot {
1331 + 0%, 60%, 100% {
1332 + opacity: 0.25;
1333 + transform: scale(0.8);
1334 + }
1335 + 30% {
1336 + opacity: 1;
1337 + transform: scale(1);
1338 + }
1339 +}
1340 +@keyframes bp-paypal-progress {
1341 + from {
1342 + width: 0%;
1343 + }
1344 + to {
1345 + width: 100%;
1346 + }
1347 +}