PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / trunk
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant vtrunk
2.3.1 2.3.0 2.2.8 2.2.7 trunk 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 1.11.1 1.11.2 1.6 1.7 1.8 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 1.9.10 1.9.11 1.9.12 All 59 releases
merchant / assets / css / admin / admin.css

admin.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant trunk, at assets/css/admin/admin.css

7,074 lines 196.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 /* Utilities */
3 .mrc-w-100 {
4 width: 100% !important;
5 }
6
7 .mrc-mb-0 {
8 margin-bottom: 0;
9 }
10
11 .mrc-mt-0 {
12 margin-top: 0;
13 }
14
15 .merchant-animated-buttons .merchant-button-flash:hover {
16 -webkit-animation: merchant-flash 1s infinite both;
17 animation: merchant-flash 1s infinite both;
18 -webkit-animation-iteration-count: 1;
19 animation-iteration-count: 1;
20 }
21 .merchant-animated-buttons .merchant-button-bounce:hover {
22 -webkit-animation: merchant-bounce 0.3s alternate;
23 animation: merchant-bounce 0.3s alternate;
24 -webkit-animation-iteration-count: 4;
25 animation-iteration-count: 4;
26 }
27 .merchant-animated-buttons .merchant-button-zoom-in:hover {
28 -webkit-transform: scale(1.2);
29 transform: scale(1.2);
30 }
31 .merchant-animated-buttons .merchant-button-shake:hover {
32 -webkit-animation: merchant-shake 0.3s;
33 animation: merchant-shake 0.3s;
34 -webkit-animation-iteration-count: 2;
35 animation-iteration-count: 2;
36 }
37 .merchant-animated-buttons .merchant-button-pulse:hover {
38 -webkit-animation: merchant-pulse 1.5s ease-in-out infinite both;
39 animation: merchant-pulse 1.5s ease-in-out infinite both;
40 }
41 .merchant-animated-buttons .merchant-button-jello-shake:hover {
42 -webkit-animation: merchant-jello-shake 1.5s infinite both;
43 animation: merchant-jello-shake 1.5s infinite both;
44 }
45 .merchant-animated-buttons .merchant-button-wobble:hover {
46 -webkit-animation: merchant-wobble 1.5s ease-in-out infinite both;
47 animation: merchant-wobble 1.5s ease-in-out infinite both;
48 }
49 .merchant-animated-buttons .merchant-button-vibrate:hover {
50 -webkit-animation: merchant-vibrate 0.3s linear 4 both;
51 animation: merchant-vibrate 0.3s linear 4 both;
52 }
53 .merchant-animated-buttons .merchant-button-swing:hover {
54 -webkit-animation: merchant-swing 2s ease-in-out infinite alternate;
55 animation: merchant-swing 2s ease-in-out infinite alternate;
56 }
57 .merchant-animated-buttons .merchant-button-tada:hover {
58 -webkit-animation: merchant-tada 1s infinite both;
59 animation: merchant-tada 1s infinite both;
60 }
61
62 @-webkit-keyframes merchant-flash {
63 0%, 50%, to {
64 opacity: 1;
65 }
66 25%, 75% {
67 opacity: 0;
68 }
69 }
70
71 @keyframes merchant-flash {
72 0%, 50%, to {
73 opacity: 1;
74 }
75 25%, 75% {
76 opacity: 0;
77 }
78 }
79 @-webkit-keyframes merchant-bounce {
80 to {
81 -webkit-transform: scale(1.2);
82 transform: scale(1.2);
83 }
84 }
85 @keyframes merchant-bounce {
86 to {
87 -webkit-transform: scale(1.2);
88 transform: scale(1.2);
89 }
90 }
91 @-webkit-keyframes merchant-shake {
92 33% {
93 -webkit-transform: rotate(10deg);
94 transform: rotate(10deg);
95 }
96 67% {
97 -webkit-transform: rotate(-10deg);
98 transform: rotate(-10deg);
99 }
100 to {
101 -webkit-transform: rotate(10deg);
102 transform: rotate(10deg);
103 }
104 }
105 @keyframes merchant-shake {
106 33% {
107 -webkit-transform: rotate(10deg);
108 transform: rotate(10deg);
109 }
110 67% {
111 -webkit-transform: rotate(-10deg);
112 transform: rotate(-10deg);
113 }
114 to {
115 -webkit-transform: rotate(10deg);
116 transform: rotate(10deg);
117 }
118 }
119 @-webkit-keyframes merchant-pulse {
120 0% {
121 -webkit-animation-timing-function: ease-out;
122 animation-timing-function: ease-out;
123 -webkit-transform: scale(1);
124 transform: scale(1);
125 -webkit-transform-origin: center center;
126 transform-origin: center center;
127 }
128 10% {
129 -webkit-animation-timing-function: ease-in;
130 animation-timing-function: ease-in;
131 -webkit-transform: scale(0.91);
132 transform: scale(0.91);
133 }
134 17% {
135 -webkit-animation-timing-function: ease-out;
136 animation-timing-function: ease-out;
137 -webkit-transform: scale(0.98);
138 transform: scale(0.98);
139 }
140 33% {
141 -webkit-animation-timing-function: ease-in;
142 animation-timing-function: ease-in;
143 -webkit-transform: scale(0.87);
144 transform: scale(0.87);
145 }
146 45% {
147 -webkit-animation-timing-function: ease-out;
148 animation-timing-function: ease-out;
149 -webkit-transform: scale(1);
150 transform: scale(1);
151 }
152 }
153 @keyframes merchant-pulse {
154 0% {
155 -webkit-animation-timing-function: ease-out;
156 animation-timing-function: ease-out;
157 -webkit-transform: scale(1);
158 transform: scale(1);
159 -webkit-transform-origin: center center;
160 transform-origin: center center;
161 }
162 10% {
163 -webkit-animation-timing-function: ease-in;
164 animation-timing-function: ease-in;
165 -webkit-transform: scale(0.91);
166 transform: scale(0.91);
167 }
168 17% {
169 -webkit-animation-timing-function: ease-out;
170 animation-timing-function: ease-out;
171 -webkit-transform: scale(0.98);
172 transform: scale(0.98);
173 }
174 33% {
175 -webkit-animation-timing-function: ease-in;
176 animation-timing-function: ease-in;
177 -webkit-transform: scale(0.87);
178 transform: scale(0.87);
179 }
180 45% {
181 -webkit-animation-timing-function: ease-out;
182 animation-timing-function: ease-out;
183 -webkit-transform: scale(1);
184 transform: scale(1);
185 }
186 }
187 @-webkit-keyframes merchant-jello-shake {
188 0% {
189 -webkit-transform: scaleX(1);
190 transform: scaleX(1);
191 }
192 30% {
193 -webkit-transform: scale3d(1.25, 0.75, 1);
194 transform: scale3d(1.25, 0.75, 1);
195 }
196 40% {
197 -webkit-transform: scale3d(0.75, 1.25, 1);
198 transform: scale3d(0.75, 1.25, 1);
199 }
200 50% {
201 -webkit-transform: scale3d(1.15, 0.85, 1);
202 transform: scale3d(1.15, 0.85, 1);
203 }
204 65% {
205 -webkit-transform: scale3d(0.95, 1.05, 1);
206 transform: scale3d(0.95, 1.05, 1);
207 }
208 75% {
209 -webkit-transform: scale3d(1.05, 0.95, 1);
210 transform: scale3d(1.05, 0.95, 1);
211 }
212 to {
213 -webkit-transform: scaleX(1);
214 transform: scaleX(1);
215 }
216 }
217 @keyframes merchant-jello-shake {
218 0% {
219 -webkit-transform: scaleX(1);
220 transform: scaleX(1);
221 }
222 30% {
223 -webkit-transform: scale3d(1.25, 0.75, 1);
224 transform: scale3d(1.25, 0.75, 1);
225 }
226 40% {
227 -webkit-transform: scale3d(0.75, 1.25, 1);
228 transform: scale3d(0.75, 1.25, 1);
229 }
230 50% {
231 -webkit-transform: scale3d(1.15, 0.85, 1);
232 transform: scale3d(1.15, 0.85, 1);
233 }
234 65% {
235 -webkit-transform: scale3d(0.95, 1.05, 1);
236 transform: scale3d(0.95, 1.05, 1);
237 }
238 75% {
239 -webkit-transform: scale3d(1.05, 0.95, 1);
240 transform: scale3d(1.05, 0.95, 1);
241 }
242 to {
243 -webkit-transform: scaleX(1);
244 transform: scaleX(1);
245 }
246 }
247 @-webkit-keyframes merchant-wobble {
248 0%, to {
249 -webkit-transform: translateX(0);
250 transform: translateX(0);
251 -webkit-transform-origin: 50% 50%;
252 transform-origin: 50% 50%;
253 }
254 15% {
255 -webkit-transform: translateX(-30px) rotate(-6deg);
256 transform: translateX(-30px) rotate(-6deg);
257 }
258 30% {
259 -webkit-transform: translateX(15px) rotate(6deg);
260 transform: translateX(15px) rotate(6deg);
261 }
262 45% {
263 -webkit-transform: translateX(-15px) rotate(-3.6deg);
264 transform: translateX(-15px) rotate(-3.6deg);
265 }
266 60% {
267 -webkit-transform: translateX(9px) rotate(2.4deg);
268 transform: translateX(9px) rotate(2.4deg);
269 }
270 75% {
271 -webkit-transform: translateX(-6px) rotate(-1.2deg);
272 transform: translateX(-6px) rotate(-1.2deg);
273 }
274 }
275 @keyframes merchant-wobble {
276 0%, to {
277 -webkit-transform: translateX(0);
278 transform: translateX(0);
279 -webkit-transform-origin: 50% 50%;
280 transform-origin: 50% 50%;
281 }
282 15% {
283 -webkit-transform: translateX(-30px) rotate(-6deg);
284 transform: translateX(-30px) rotate(-6deg);
285 }
286 30% {
287 -webkit-transform: translateX(15px) rotate(6deg);
288 transform: translateX(15px) rotate(6deg);
289 }
290 45% {
291 -webkit-transform: translateX(-15px) rotate(-3.6deg);
292 transform: translateX(-15px) rotate(-3.6deg);
293 }
294 60% {
295 -webkit-transform: translateX(9px) rotate(2.4deg);
296 transform: translateX(9px) rotate(2.4deg);
297 }
298 75% {
299 -webkit-transform: translateX(-6px) rotate(-1.2deg);
300 transform: translateX(-6px) rotate(-1.2deg);
301 }
302 }
303 @-webkit-keyframes merchant-vibrate {
304 0% {
305 -webkit-transform: translate(0);
306 transform: translate(0);
307 }
308 20% {
309 -webkit-transform: translate(-2px, 2px);
310 transform: translate(-2px, 2px);
311 }
312 40% {
313 -webkit-transform: translate(-2px, -2px);
314 transform: translate(-2px, -2px);
315 }
316 60% {
317 -webkit-transform: translate(2px, 2px);
318 transform: translate(2px, 2px);
319 }
320 80% {
321 -webkit-transform: translate(2px, -2px);
322 transform: translate(2px, -2px);
323 }
324 to {
325 -webkit-transform: translate(0);
326 transform: translate(0);
327 }
328 }
329 @keyframes merchant-vibrate {
330 0% {
331 -webkit-transform: translate(0);
332 transform: translate(0);
333 }
334 20% {
335 -webkit-transform: translate(-2px, 2px);
336 transform: translate(-2px, 2px);
337 }
338 40% {
339 -webkit-transform: translate(-2px, -2px);
340 transform: translate(-2px, -2px);
341 }
342 60% {
343 -webkit-transform: translate(2px, 2px);
344 transform: translate(2px, 2px);
345 }
346 80% {
347 -webkit-transform: translate(2px, -2px);
348 transform: translate(2px, -2px);
349 }
350 to {
351 -webkit-transform: translate(0);
352 transform: translate(0);
353 }
354 }
355 @-webkit-keyframes merchant-swing {
356 0% {
357 -webkit-transform: rotate(0deg);
358 transform: rotate(0deg);
359 }
360 20% {
361 -webkit-transform: rotate(3deg);
362 transform: rotate(3deg);
363 }
364 40% {
365 -webkit-transform: rotate(-3deg);
366 transform: rotate(-3deg);
367 }
368 60% {
369 -webkit-transform: rotate(3deg);
370 transform: rotate(3deg);
371 }
372 80% {
373 -webkit-transform: rotate(-3deg);
374 transform: rotate(-3deg);
375 }
376 to {
377 -webkit-transform: rotate(0deg);
378 transform: rotate(0deg);
379 }
380 }
381 @keyframes merchant-swing {
382 0% {
383 -webkit-transform: rotate(0deg);
384 transform: rotate(0deg);
385 }
386 20% {
387 -webkit-transform: rotate(3deg);
388 transform: rotate(3deg);
389 }
390 40% {
391 -webkit-transform: rotate(-3deg);
392 transform: rotate(-3deg);
393 }
394 60% {
395 -webkit-transform: rotate(3deg);
396 transform: rotate(3deg);
397 }
398 80% {
399 -webkit-transform: rotate(-3deg);
400 transform: rotate(-3deg);
401 }
402 to {
403 -webkit-transform: rotate(0deg);
404 transform: rotate(0deg);
405 }
406 }
407 @-webkit-keyframes merchant-tada {
408 0% {
409 -webkit-transform: scaleX(1);
410 transform: scaleX(1);
411 }
412 10%, 20% {
413 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
414 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
415 }
416 30%, 50%, 70%, 90% {
417 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
418 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
419 }
420 40%, 60%, 80% {
421 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
422 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
423 }
424 to {
425 -webkit-transform: scaleX(1);
426 transform: scaleX(1);
427 }
428 }
429 @keyframes merchant-tada {
430 0% {
431 -webkit-transform: scaleX(1);
432 transform: scaleX(1);
433 }
434 10%, 20% {
435 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
436 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
437 }
438 30%, 50%, 70%, 90% {
439 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
440 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
441 }
442 40%, 60%, 80% {
443 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
444 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
445 }
446 to {
447 -webkit-transform: scaleX(1);
448 transform: scaleX(1);
449 }
450 }
451 @-webkit-keyframes merchant-spin {
452 0% {
453 -webkit-transform: rotate(0deg);
454 transform: rotate(0deg);
455 }
456 100% {
457 -webkit-transform: rotate(359deg);
458 transform: rotate(359deg);
459 }
460 }
461 @keyframes merchant-spin {
462 0% {
463 -webkit-transform: rotate(0deg);
464 transform: rotate(0deg);
465 }
466 100% {
467 -webkit-transform: rotate(359deg);
468 transform: rotate(359deg);
469 }
470 }
471 .merchant-pcr-app * {
472 outline: none;
473 border: none;
474 -webkit-box-sizing: border-box;
475 box-sizing: border-box;
476 }
477
478 .merchant-pcr-app input:focus,
479 .merchant-pcr-app input.pcr-active,
480 .merchant-pcr-app button:focus,
481 .merchant-pcr-app button.pcr-active {
482 -webkit-box-shadow: none;
483 box-shadow: none;
484 }
485
486 .merchant-pcr-app .pcr-palette:focus,
487 .merchant-pcr-app .pcr-slider:focus {
488 -webkit-box-shadow: none;
489 box-shadow: none;
490 }
491
492 .merchant-pcr-app {
493 position: fixed;
494 z-index: 999999;
495 top: 0;
496 left: 0;
497 display: -webkit-box;
498 display: -ms-flexbox;
499 display: flex;
500 -webkit-box-orient: vertical;
501 -webkit-box-direction: normal;
502 -ms-flex-direction: column;
503 flex-direction: column;
504 border-radius: 0.1em;
505 opacity: 0;
506 visibility: hidden;
507 -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
508 transition: opacity 0.2s, visibility 0s 0.2s;
509 -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
510 box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
511 background: #fff;
512 }
513
514 .merchant-pcr-app.visible {
515 visibility: visible;
516 opacity: 1;
517 -webkit-transition: opacity 0.2s;
518 transition: opacity 0.2s;
519 }
520
521 .merchant-pcr-app .pcr-swatches {
522 display: -webkit-box;
523 display: -ms-flexbox;
524 display: flex;
525 -webkit-box-pack: justify;
526 -ms-flex-pack: justify;
527 justify-content: space-between;
528 }
529
530 .merchant-pcr-app .pcr-swatches > button {
531 cursor: pointer;
532 font-size: 1em;
533 position: relative;
534 z-index: 1;
535 width: 20px;
536 height: 20px;
537 margin: 0;
538 padding: 0;
539 background: none;
540 }
541
542 .merchant-pcr-app .pcr-swatches > button::before {
543 position: absolute;
544 content: "";
545 top: 0;
546 left: 0;
547 bottom: 0;
548 right: 0;
549 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
550 background-size: 6px;
551 border-radius: 20px;
552 border: 1px solid transparent;
553 z-index: -1;
554 }
555
556 .merchant-pcr-app .pcr-swatches > button::after {
557 content: "";
558 position: absolute;
559 z-index: 1;
560 top: 0;
561 left: 0;
562 right: 0;
563 bottom: 0;
564 border-radius: 20px;
565 border: 1px solid rgba(0, 0, 0, 0.3);
566 background: var(--pcr-color);
567 }
568
569 .merchant-pcr-app .pcr-interaction {
570 display: -webkit-box;
571 display: -ms-flexbox;
572 display: flex;
573 grid-gap: 5px;
574 }
575
576 .merchant-pcr-app .pcr-interaction input {
577 font-size: 11px;
578 border-radius: 3px;
579 }
580 .merchant-pcr-app .pcr-interaction input:focus {
581 border-color: #3858E9;
582 }
583
584 .merchant-pcr-app .pcr-interaction .pcr-result {
585 -webkit-box-flex: 1;
586 -ms-flex: 1;
587 flex: 1;
588 margin: 0;
589 width: 100%;
590 max-width: 100%;
591 }
592
593 .merchant-pcr-app .pcr-interaction .pcr-clear {
594 cursor: pointer;
595 margin: 0;
596 padding: 0 10px;
597 border-radius: 3px;
598 color: #fff;
599 background-color: #3858E9;
600 text-transform: uppercase;
601 }
602
603 .merchant-pcr-app .pcr-selection .pcr-picker {
604 -webkit-user-select: none;
605 -moz-user-select: none;
606 -ms-user-select: none;
607 user-select: none;
608 position: absolute;
609 height: 16px;
610 width: 16px;
611 border-radius: 16px;
612 background-color: #fff !important;
613 -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
614 box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
615 }
616
617 .merchant-pcr-app .pcr-selection .pcr-color-palette,
618 .merchant-pcr-app .pcr-selection .pcr-color-chooser,
619 .merchant-pcr-app .pcr-selection .pcr-color-opacity {
620 -webkit-user-select: none;
621 -moz-user-select: none;
622 -ms-user-select: none;
623 user-select: none;
624 position: relative;
625 display: -webkit-box;
626 display: -ms-flexbox;
627 display: flex;
628 -webkit-box-orient: vertical;
629 -webkit-box-direction: normal;
630 -ms-flex-direction: column;
631 flex-direction: column;
632 cursor: -webkit-grab;
633 cursor: grab;
634 }
635
636 .merchant-pcr-app .pcr-selection .pcr-color-palette:active,
637 .merchant-pcr-app .pcr-selection .pcr-color-chooser:active,
638 .merchant-pcr-app .pcr-selection .pcr-color-opacity:active {
639 cursor: -webkit-grabbing;
640 cursor: grabbing;
641 }
642
643 .merchant-pcr-app[data-theme=merchant] {
644 width: 250px;
645 max-width: 95vw;
646 padding: 10px;
647 -webkit-box-sizing: border-box;
648 box-sizing: border-box;
649 display: -webkit-box;
650 display: -ms-flexbox;
651 display: flex;
652 grid-gap: 10px;
653 -webkit-box-orient: vertical;
654 -webkit-box-direction: normal;
655 -ms-flex-direction: column;
656 flex-direction: column;
657 }
658
659 .merchant-pcr-app[data-theme=merchant] .pcr-selection {
660 display: grid;
661 grid-gap: 10px;
662 grid-template-columns: 1fr 4fr;
663 grid-template-rows: 5fr auto auto;
664 -webkit-box-align: center;
665 -ms-flex-align: center;
666 align-items: center;
667 height: 150px;
668 width: 100%;
669 align-self: flex-start;
670 }
671
672 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview {
673 grid-area: 2/1/4/1;
674 height: 100%;
675 width: 100%;
676 display: -webkit-box;
677 display: -ms-flexbox;
678 display: flex;
679 -webkit-box-align: center;
680 -ms-flex-align: center;
681 align-items: center;
682 -webkit-box-pack: center;
683 -ms-flex-pack: center;
684 justify-content: center;
685 }
686
687 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color {
688 display: none;
689 }
690
691 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color {
692 position: relative;
693 width: 32px;
694 height: 32px;
695 border-radius: 32px;
696 overflow: hidden;
697 border: 1px solid rgba(0, 0, 0, 0.3);
698 background-color: var(--pcr-color);
699 }
700
701 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before {
702 position: absolute;
703 content: "";
704 top: 0;
705 left: 0;
706 width: 100%;
707 height: 100%;
708 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
709 background-size: 6px;
710 border-radius: 100%;
711 z-index: -1;
712 }
713
714 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette {
715 grid-area: 1/1/2/3;
716 width: 100%;
717 height: 100%;
718 z-index: 1;
719 }
720
721 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker {
722 width: 18px;
723 height: 18px;
724 border: 2px solid #fff;
725 -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
726 box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
727 background-color: transparent !important;
728 }
729
730 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette {
731 width: 100%;
732 height: 100%;
733 }
734
735 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before {
736 position: absolute;
737 content: "";
738 top: 0;
739 left: 0;
740 width: 100%;
741 height: 100%;
742 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
743 background-size: 8px;
744 z-index: -1;
745 }
746
747 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser {
748 grid-area: 2/2/2/2;
749 }
750
751 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
752 grid-area: 3/2/3/2;
753 }
754
755 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser,
756 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
757 height: 12px;
758 margin-right: 10px;
759 }
760
761 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker,
762 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker {
763 top: 50%;
764 -webkit-transform: translateY(-50%);
765 transform: translateY(-50%);
766 }
767
768 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider,
769 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
770 -webkit-box-flex: 1;
771 -ms-flex-positive: 1;
772 flex-grow: 1;
773 }
774
775 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider {
776 background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red));
777 background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
778 }
779
780 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
781 background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
782 background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
783 background-size: 100%, 6px;
784 }
785
786 /* Buttons */
787 .button-tertiary {
788 cursor: pointer;
789 -webkit-user-select: none;
790 -moz-user-select: none;
791 -ms-user-select: none;
792 user-select: none;
793 display: -webkit-inline-box;
794 display: -ms-inline-flexbox;
795 display: inline-flex;
796 padding: 0.4375rem 1rem;
797 font-size: 0.875rem;
798 font-weight: 600;
799 line-height: 1.5;
800 white-space: nowrap;
801 text-transform: none;
802 text-decoration: none;
803 color: #212b36;
804 background-color: #fff;
805 border: 1px solid #c4cdd5;
806 border-radius: 0.25rem;
807 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
808 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
809 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
810 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
811 }
812 .button-tertiary:hover, .button-tertiary:focus {
813 outline: none;
814 -webkit-box-shadow: none;
815 box-shadow: none;
816 }
817
818 /* Botiga Dashboard Tabs Nav Items */
819 .merchant-tabs-nav {
820 padding: 0 20px;
821 margin-bottom: -100%;
822 -webkit-transform: translate3d(0, 100%, 0);
823 transform: translate3d(0, 100%, 0);
824 }
825 .merchant-tabs-nav ul {
826 display: -webkit-box;
827 display: -ms-flexbox;
828 display: flex;
829 padding: 0;
830 }
831 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link {
832 position: relative;
833 font-size: 14px;
834 line-height: 20px;
835 padding: 16px;
836 color: #6D7175;
837 text-decoration: none;
838 -webkit-transition: ease color 300ms;
839 transition: ease color 300ms;
840 outline: none;
841 -webkit-box-shadow: none;
842 box-shadow: none;
843 }
844 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
845 content: "";
846 position: absolute;
847 bottom: 0;
848 left: 0;
849 width: 100%;
850 height: 3px;
851 background-color: transparent;
852 border-radius: 4px 4px 0 0;
853 }
854 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
855 color: #3858E9;
856 font-weight: 500;
857 }
858 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link:after {
859 background-color: #3858E9;
860 }
861 .merchant-tabs-nav .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
862 color: #3858E9;
863 }
864 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link {
865 position: relative;
866 display: -webkit-box;
867 display: -ms-flexbox;
868 display: flex;
869 -webkit-box-align: center;
870 -ms-flex-align: center;
871 align-items: center;
872 font-size: 18px;
873 font-weight: 600;
874 line-height: 26px;
875 padding: 9px 16px;
876 border-bottom: 0;
877 color: #1e1e1e;
878 -webkit-transition: ease color 200ms;
879 transition: ease color 200ms;
880 }
881 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg {
882 margin-right: 8px;
883 }
884 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg path {
885 -webkit-transition: ease fill 200ms;
886 transition: ease fill 200ms;
887 }
888 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
889 content: none;
890 }
891 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:before {
892 content: "";
893 position: absolute;
894 top: 0;
895 left: 0;
896 background-color: transparent;
897 width: 4px;
898 height: 100%;
899 border-radius: 0 4px 4px 0;
900 opacity: 0;
901 visibility: hidden;
902 -webkit-transition: ease opacity 200ms;
903 transition: ease opacity 200ms;
904 }
905 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
906 color: #757575;
907 }
908 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link svg path {
909 fill: #757575;
910 }
911 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link:before {
912 background-color: #e1e1e1;
913 opacity: 1;
914 visibility: visible;
915 }
916 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
917 color: #3858E9;
918 }
919 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link svg path {
920 fill: #3858E9;
921 }
922 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link:before {
923 background-color: #3858E9;
924 opacity: 1;
925 visibility: visible;
926 }
927 .merchant-tabs-nav.merchant-tabs-nav-vertical {
928 padding: 0;
929 margin-left: -20px;
930 }
931 .merchant-tabs-nav.merchant-tabs-nav-vertical ul {
932 -webkit-box-orient: vertical;
933 -webkit-box-direction: normal;
934 -ms-flex-direction: column;
935 flex-direction: column;
936 margin: 0;
937 }
938 .merchant-tabs-nav.merchant-tabs-nav-no-negative-margin {
939 margin-bottom: 0;
940 -webkit-transform: none;
941 transform: none;
942 }
943
944 /* Botiga Tabs Content */
945 .merchant-tab-content {
946 display: none;
947 }
948 .merchant-tab-content.active {
949 display: block;
950 }
951
952 .merchant-wpvibe-banner {
953 display: -webkit-box;
954 display: -ms-flexbox;
955 display: flex;
956 -webkit-box-align: center;
957 -ms-flex-align: center;
958 align-items: center;
959 -webkit-box-pack: justify;
960 -ms-flex-pack: justify;
961 justify-content: space-between;
962 gap: 24px;
963 background-color: #1D2327;
964 border-radius: 8px;
965 padding: 28px 32px;
966 -webkit-box-sizing: border-box;
967 box-sizing: border-box;
968 }
969 .merchant-wpvibe-banner * {
970 -webkit-box-sizing: border-box;
971 box-sizing: border-box;
972 }
973
974 .merchant-wpvibe-banner-content {
975 -webkit-box-flex: 1;
976 -ms-flex: 1;
977 flex: 1;
978 min-width: 0;
979 }
980
981 .merchant-wpvibe-banner-eyebrow {
982 font-size: 13px;
983 font-weight: 600;
984 letter-spacing: 0.08em;
985 text-transform: uppercase;
986 color: #8b8fa8;
987 margin: 0 0 10px;
988 }
989
990 .merchant-wpvibe-banner-title {
991 font-size: 24px;
992 font-weight: 700;
993 color: #ffffff;
994 margin: 0 0 12px;
995 line-height: 1.3;
996 }
997
998 .merchant-wpvibe-banner-desc {
999 font-size: 15px;
1000 line-height: 1.6;
1001 color: #C6C8C9;
1002 margin: 0 0 20px;
1003 max-width: 980px;
1004 }
1005 .merchant-wpvibe-banner-desc a {
1006 color: #C6C8C9;
1007 font-weight: 600;
1008 text-decoration: underline;
1009 text-underline-offset: 2px;
1010 }
1011 .merchant-wpvibe-banner-desc a:hover {
1012 color: #b0b3c6;
1013 }
1014
1015 .merchant-wpvibe-banner-actions {
1016 display: -webkit-box;
1017 display: -ms-flexbox;
1018 display: flex;
1019 -webkit-box-align: center;
1020 -ms-flex-align: center;
1021 align-items: center;
1022 gap: 20px;
1023 -ms-flex-wrap: wrap;
1024 flex-wrap: wrap;
1025 }
1026
1027 .merchant-wpvibe-install-btn {
1028 display: -webkit-inline-box;
1029 display: -ms-inline-flexbox;
1030 display: inline-flex;
1031 -webkit-box-align: center;
1032 -ms-flex-align: center;
1033 align-items: center;
1034 gap: 8px;
1035 background-color: #4f6ef7;
1036 color: #ffffff;
1037 font-size: 13px;
1038 font-weight: 600;
1039 border: none;
1040 border-radius: 6px;
1041 padding: 10px 18px;
1042 cursor: pointer;
1043 -webkit-transition: background-color 0.2s ease;
1044 transition: background-color 0.2s ease;
1045 }
1046 .merchant-wpvibe-install-btn:hover {
1047 background-color: #3d5ce0;
1048 color: #ffffff;
1049 }
1050 .merchant-wpvibe-install-btn:disabled {
1051 opacity: 0.7;
1052 cursor: not-allowed;
1053 }
1054
1055 .merchant-wpvibe-active-link {
1056 display: -webkit-inline-box;
1057 display: -ms-inline-flexbox;
1058 display: inline-flex;
1059 -webkit-box-align: center;
1060 -ms-flex-align: center;
1061 align-items: center;
1062 gap: 6px;
1063 color: #6ee79a;
1064 font-size: 13px;
1065 font-weight: 600;
1066 text-decoration: none;
1067 }
1068 .merchant-wpvibe-active-link:hover {
1069 color: #4dcf7b;
1070 text-decoration: underline;
1071 }
1072
1073 .merchant-wpvibe-active-check {
1074 font-size: 14px;
1075 color: #6ee79a;
1076 }
1077
1078 .merchant-wpvibe-toggle-wrap {
1079 display: -webkit-box;
1080 display: -ms-flexbox;
1081 display: flex;
1082 -webkit-box-align: center;
1083 -ms-flex-align: center;
1084 align-items: center;
1085 gap: 10px;
1086 }
1087 .merchant-wpvibe-toggle-wrap.merchant-wpvibe-toggle-disabled {
1088 opacity: 0.5;
1089 pointer-events: none;
1090 }
1091
1092 .merchant-wpvibe-toggle-label {
1093 font-size: 12px;
1094 letter-spacing: 0.06em;
1095 text-transform: uppercase;
1096 color: #b0b3c6;
1097 }
1098
1099 .merchant-wpvibe-banner-badges {
1100 display: -webkit-box;
1101 display: -ms-flexbox;
1102 display: flex;
1103 -webkit-box-orient: vertical;
1104 -webkit-box-direction: normal;
1105 -ms-flex-direction: column;
1106 flex-direction: column;
1107 -webkit-box-align: end;
1108 -ms-flex-align: end;
1109 align-items: flex-end;
1110 gap: 10px;
1111 -ms-flex-negative: 0;
1112 flex-shrink: 0;
1113 }
1114
1115 .merchant-wpvibe-badge {
1116 display: -webkit-box;
1117 display: -ms-flexbox;
1118 display: flex;
1119 -webkit-box-align: center;
1120 -ms-flex-align: center;
1121 align-items: center;
1122 gap: 10px;
1123 background-color: #303236;
1124 border-radius: 6px;
1125 padding: 10px 14px;
1126 min-width: 150px;
1127 }
1128 .merchant-wpvibe-badge svg {
1129 -ms-flex-negative: 0;
1130 flex-shrink: 0;
1131 border-radius: 4px;
1132 }
1133 .merchant-wpvibe-badge span {
1134 font-size: 14px;
1135 font-weight: 500;
1136 color: #ffffff;
1137 }
1138
1139 .merchant-wpvibe-any-client {
1140 font-size: 13px;
1141 color: #6b6f88;
1142 margin: 4px auto 0;
1143 text-align: center;
1144 }
1145
1146 .merchant-module-page-link-ai {
1147 border: none;
1148 background: transparent;
1149 font-family: inherit;
1150 color: #674399;
1151 cursor: pointer;
1152 }
1153 .merchant-module-page-link-ai:hover, .merchant-module-page-link-ai:focus {
1154 color: #674399;
1155 }
1156
1157 .merchant-ai-prompts-modal-overlay {
1158 position: fixed;
1159 top: 0;
1160 left: 0;
1161 right: 0;
1162 bottom: 0;
1163 z-index: 99999;
1164 display: -webkit-box;
1165 display: -ms-flexbox;
1166 display: flex;
1167 -webkit-box-pack: center;
1168 -ms-flex-pack: center;
1169 justify-content: center;
1170 -webkit-box-align: center;
1171 -ms-flex-align: center;
1172 align-items: center;
1173 background-color: rgba(0, 0, 0, 0.6);
1174 opacity: 0;
1175 visibility: hidden;
1176 pointer-events: none;
1177 -webkit-transition: all 0.2s;
1178 transition: all 0.2s;
1179 }
1180 .merchant-ai-prompts-modal-overlay.merchant-show {
1181 pointer-events: auto;
1182 opacity: 1;
1183 visibility: visible;
1184 }
1185
1186 .merchant-ai-prompts-modal-box {
1187 position: relative;
1188 width: 640px;
1189 max-width: 92%;
1190 max-height: 85vh;
1191 overflow-y: auto;
1192 border-radius: 12px;
1193 background-color: #fff;
1194 -webkit-box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.12);
1195 box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.12);
1196 }
1197
1198 .merchant-ai-prompts-modal-close {
1199 position: absolute;
1200 top: 18px;
1201 right: 18px;
1202 z-index: 1;
1203 display: -webkit-box;
1204 display: -ms-flexbox;
1205 display: flex;
1206 -webkit-box-align: center;
1207 -ms-flex-align: center;
1208 align-items: center;
1209 -webkit-box-pack: center;
1210 -ms-flex-pack: center;
1211 justify-content: center;
1212 width: 30px;
1213 height: 30px;
1214 border: none;
1215 border-radius: 50%;
1216 background: rgba(255, 255, 255, 0.12);
1217 color: rgba(255, 255, 255, 0.8);
1218 font-size: 18px;
1219 line-height: 1;
1220 cursor: pointer;
1221 -webkit-transition: background-color 0.3s, color 0.3s;
1222 transition: background-color 0.3s, color 0.3s;
1223 }
1224 .merchant-ai-prompts-modal-close:hover {
1225 background: rgba(255, 255, 255, 0.22);
1226 color: #ffffff;
1227 }
1228 .merchant-ai-prompts-modal-close:focus {
1229 outline: none;
1230 -webkit-box-shadow: none;
1231 box-shadow: none;
1232 }
1233 .merchant-ai-prompts-modal-close svg {
1234 width: 10px;
1235 height: 10px;
1236 }
1237 .merchant-ai-prompts-modal-close svg path {
1238 stroke-width: 3;
1239 }
1240
1241 .merchant-ai-prompts-modal-header {
1242 position: relative;
1243 overflow: hidden;
1244 padding: 34px 36px 28px;
1245 background: linear-gradient(135deg, #567BFF 0%, #3858E9 55%, #2540B8 100%);
1246 border-radius: 12px 12px 0 0;
1247 }
1248 .merchant-ai-prompts-modal-header:before {
1249 content: "";
1250 position: absolute;
1251 top: -60px;
1252 right: -60px;
1253 width: 220px;
1254 height: 220px;
1255 border-radius: 50%;
1256 background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
1257 }
1258
1259 .merchant-ai-prompts-modal-badge {
1260 position: relative;
1261 z-index: 1;
1262 display: -webkit-inline-box;
1263 display: -ms-inline-flexbox;
1264 display: inline-flex;
1265 -ms-flex-negative: 0;
1266 flex-shrink: 0;
1267 -webkit-box-align: center;
1268 -ms-flex-align: center;
1269 align-items: center;
1270 gap: 5px;
1271 padding: 3px 9px;
1272 overflow: hidden;
1273 color: #ffffff;
1274 background-color: rgba(255, 255, 255, 0.18);
1275 border: 1px solid rgba(255, 255, 255, 0.3);
1276 border-radius: 4px;
1277 font-size: 10px;
1278 font-weight: 700;
1279 line-height: 1.4;
1280 letter-spacing: 0.02em;
1281 text-transform: uppercase;
1282 }
1283 .merchant-ai-prompts-modal-badge svg {
1284 -ms-flex-negative: 0;
1285 flex-shrink: 0;
1286 -webkit-transform-origin: center;
1287 transform-origin: center;
1288 }
1289 .merchant-ai-prompts-modal-badge svg.merchant-ai-badge-spin {
1290 -webkit-animation: merchant-ai-badge-sparkle 0.9s ease-in-out 1.5s 1;
1291 animation: merchant-ai-badge-sparkle 0.9s ease-in-out 1.5s 1;
1292 }
1293 @media (prefers-reduced-motion: reduce) {
1294 .merchant-ai-prompts-modal-badge svg.merchant-ai-badge-spin {
1295 -webkit-animation: none;
1296 animation: none;
1297 }
1298 }
1299
1300 @-webkit-keyframes merchant-ai-badge-sparkle {
1301 0% {
1302 -webkit-transform: scale(1) rotate(0deg);
1303 transform: scale(1) rotate(0deg);
1304 opacity: 1;
1305 }
1306 45% {
1307 -webkit-transform: scale(1.25) rotate(180deg);
1308 transform: scale(1.25) rotate(180deg);
1309 opacity: 0.75;
1310 }
1311 100% {
1312 -webkit-transform: scale(1) rotate(360deg);
1313 transform: scale(1) rotate(360deg);
1314 opacity: 1;
1315 }
1316 }
1317
1318 @keyframes merchant-ai-badge-sparkle {
1319 0% {
1320 -webkit-transform: scale(1) rotate(0deg);
1321 transform: scale(1) rotate(0deg);
1322 opacity: 1;
1323 }
1324 45% {
1325 -webkit-transform: scale(1.25) rotate(180deg);
1326 transform: scale(1.25) rotate(180deg);
1327 opacity: 0.75;
1328 }
1329 100% {
1330 -webkit-transform: scale(1) rotate(360deg);
1331 transform: scale(1) rotate(360deg);
1332 opacity: 1;
1333 }
1334 }
1335 .merchant-ai-prompts-modal-title {
1336 position: relative;
1337 z-index: 1;
1338 display: -webkit-box;
1339 display: -ms-flexbox;
1340 display: flex;
1341 -webkit-box-align: center;
1342 -ms-flex-align: center;
1343 align-items: center;
1344 gap: 10px;
1345 margin: 0 0 16px;
1346 font-size: 20px;
1347 font-weight: 700;
1348 color: #ffffff;
1349 }
1350
1351 .merchant-ai-prompts-modal-blurb {
1352 position: relative;
1353 z-index: 1;
1354 margin: 0;
1355 max-width: 480px;
1356 font-size: 13.5px;
1357 line-height: 1.6;
1358 color: rgba(255, 255, 255, 0.85);
1359 }
1360
1361 .merchant-ai-prompts-modal-body {
1362 padding: 26px 36px 20px;
1363 }
1364
1365 .merchant-ai-prompts-modal-list-title {
1366 margin: 0 0 14px;
1367 font-size: 12px;
1368 font-weight: 700;
1369 letter-spacing: 0.06em;
1370 text-transform: uppercase;
1371 color: #8b8fa8;
1372 }
1373
1374 .merchant-ai-prompts-modal-list {
1375 display: -webkit-box;
1376 display: -ms-flexbox;
1377 display: flex;
1378 -webkit-box-orient: vertical;
1379 -webkit-box-direction: normal;
1380 -ms-flex-direction: column;
1381 flex-direction: column;
1382 gap: 12px;
1383 }
1384
1385 .merchant-ai-prompt-row {
1386 display: -webkit-box;
1387 display: -ms-flexbox;
1388 display: flex;
1389 -webkit-box-align: center;
1390 -ms-flex-align: center;
1391 align-items: center;
1392 gap: 14px;
1393 width: 100%;
1394 padding: 14px 16px;
1395 border: 1px solid #ECECEC;
1396 border-radius: 10px;
1397 background-color: #ffffff;
1398 font-family: inherit;
1399 text-align: left;
1400 cursor: pointer;
1401 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
1402 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
1403 -webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
1404 transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
1405 transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
1406 transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
1407 }
1408 .merchant-ai-prompt-row:hover {
1409 border-color: rgba(56, 88, 233, 0.35);
1410 -webkit-box-shadow: 0 8px 20px rgba(56, 88, 233, 0.14);
1411 box-shadow: 0 8px 20px rgba(56, 88, 233, 0.14);
1412 -webkit-transform: translateY(-1px);
1413 transform: translateY(-1px);
1414 }
1415 .merchant-ai-prompt-row:focus {
1416 outline: none;
1417 -webkit-box-shadow: 0 0 0 2px rgba(56, 88, 233, 0.3);
1418 box-shadow: 0 0 0 2px rgba(56, 88, 233, 0.3);
1419 }
1420 .merchant-ai-prompt-row.is-copied {
1421 border-color: #3858E9;
1422 background-color: rgba(56, 88, 233, 0.05);
1423 }
1424 .merchant-ai-prompt-row:hover .merchant-ai-prompt-icon {
1425 background-color: rgba(56, 88, 233, 0.15);
1426 opacity: 1;
1427 }
1428 .merchant-ai-prompt-row.is-copied .merchant-ai-prompt-icon {
1429 background-color: #3858E9;
1430 color: #ffffff;
1431 opacity: 1;
1432 }
1433
1434 .merchant-ai-prompt-text {
1435 -webkit-box-flex: 1;
1436 -ms-flex: 1;
1437 flex: 1;
1438 min-width: 0;
1439 font-size: 14px;
1440 line-height: 1.6;
1441 color: #1D2327;
1442 }
1443
1444 .merchant-ai-prompt-icon {
1445 display: -webkit-box;
1446 display: -ms-flexbox;
1447 display: flex;
1448 -webkit-box-align: center;
1449 -ms-flex-align: center;
1450 align-items: center;
1451 -webkit-box-pack: center;
1452 -ms-flex-pack: center;
1453 justify-content: center;
1454 -ms-flex-negative: 0;
1455 flex-shrink: 0;
1456 width: 32px;
1457 height: 32px;
1458 border-radius: 50%;
1459 background-color: #EAF0FE;
1460 color: #3858E9;
1461 opacity: 0.3;
1462 -webkit-transition: background-color 0.15s, color 0.15s, opacity 0.15s ease;
1463 transition: background-color 0.15s, color 0.15s, opacity 0.15s ease;
1464 }
1465
1466 .merchant-ai-prompts-modal-footer {
1467 padding: 14px 36px;
1468 border-top: 1px solid #ECECEC;
1469 text-align: center;
1470 }
1471 .merchant-ai-prompts-modal-footer a {
1472 font-size: 12.5px;
1473 font-weight: 500;
1474 color: #3858E9;
1475 text-decoration: underline;
1476 -webkit-transition: color 0.15s;
1477 transition: color 0.15s;
1478 }
1479 .merchant-ai-prompts-modal-footer a:hover, .merchant-ai-prompts-modal-footer a:focus {
1480 color: #2C46C4;
1481 outline: none;
1482 -webkit-box-shadow: none;
1483 box-shadow: none;
1484 }
1485
1486 .merchant-white-label-field .merchant-module-page-setting-field-inner.disabled {
1487 cursor: pointer;
1488 }
1489 .merchant-white-label-field .merchant-module-page-setting-field-inner.disabled input,
1490 .merchant-white-label-field .merchant-module-page-setting-field-inner.disabled select,
1491 .merchant-white-label-field .merchant-module-page-setting-field-inner.disabled textarea,
1492 .merchant-white-label-field .merchant-module-page-setting-field-inner.disabled button,
1493 .merchant-white-label-field .merchant-module-page-setting-field-inner.disabled label {
1494 pointer-events: none;
1495 }
1496
1497 .merchant-white-label-bookmark {
1498 display: -webkit-box;
1499 display: -ms-flexbox;
1500 display: flex;
1501 gap: 10px;
1502 margin-bottom: 16px;
1503 padding: 12px 16px;
1504 border: 1px solid #e0c470;
1505 border-radius: 4px;
1506 background-color: #fff8e5;
1507 color: #674600;
1508 }
1509 .merchant-white-label-bookmark .dashicons {
1510 -ms-flex-negative: 0;
1511 flex-shrink: 0;
1512 line-height: 1.5;
1513 }
1514 .merchant-white-label-bookmark a {
1515 word-break: break-all;
1516 }
1517
1518 .merchant-white-label-modal-overlay {
1519 position: fixed;
1520 top: 0;
1521 left: 0;
1522 right: 0;
1523 bottom: 0;
1524 z-index: 99999;
1525 display: -webkit-box;
1526 display: -ms-flexbox;
1527 display: flex;
1528 -webkit-box-align: center;
1529 -ms-flex-align: center;
1530 align-items: center;
1531 -webkit-box-pack: center;
1532 -ms-flex-pack: center;
1533 justify-content: center;
1534 background-color: rgba(0, 0, 0, 0.6);
1535 opacity: 0;
1536 visibility: hidden;
1537 pointer-events: none;
1538 -webkit-transition: all 0.2s;
1539 transition: all 0.2s;
1540 }
1541 .merchant-white-label-modal-overlay.merchant-show {
1542 pointer-events: auto;
1543 opacity: 1;
1544 visibility: visible;
1545 }
1546
1547 .merchant-white-label-modal-box {
1548 position: relative;
1549 width: 460px;
1550 max-width: 92%;
1551 padding: 30px 40px 0;
1552 overflow: hidden;
1553 border-radius: 8px;
1554 background-color: #fff;
1555 -webkit-box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.12);
1556 box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.12);
1557 text-align: center;
1558 }
1559
1560 .merchant-white-label-modal-close {
1561 position: absolute;
1562 top: 16px;
1563 right: 16px;
1564 display: -webkit-box;
1565 display: -ms-flexbox;
1566 display: flex;
1567 -webkit-box-align: center;
1568 -ms-flex-align: center;
1569 align-items: center;
1570 -webkit-box-pack: center;
1571 -ms-flex-pack: center;
1572 justify-content: center;
1573 width: 28px;
1574 height: 28px;
1575 padding: 0;
1576 border: none;
1577 background: none;
1578 color: #a7aaad;
1579 cursor: pointer;
1580 -webkit-transition: color 0.15s;
1581 transition: color 0.15s;
1582 }
1583 .merchant-white-label-modal-close:hover, .merchant-white-label-modal-close:focus {
1584 color: #50575e;
1585 }
1586
1587 .merchant-white-label-modal-lock {
1588 color: #a7aaad;
1589 line-height: 1;
1590 }
1591
1592 .merchant-white-label-modal-title {
1593 margin: 20px 0 16px;
1594 color: #1d2327;
1595 font-size: 24px;
1596 font-weight: 700;
1597 line-height: 1.3;
1598 }
1599
1600 .merchant-white-label-modal-body {
1601 margin: 0 auto 28px;
1602 max-width: 30em;
1603 color: #50575e;
1604 font-size: 15px;
1605 line-height: 1.6;
1606 }
1607 .merchant-white-label-modal-body strong {
1608 color: #1d2327;
1609 text-transform: uppercase;
1610 }
1611
1612 .merchant-white-label-modal-cta.button {
1613 height: auto;
1614 min-width: 240px;
1615 padding: 10px 28px;
1616 border-radius: 3px;
1617 font-size: 15px;
1618 font-weight: 600;
1619 line-height: 1.4;
1620 }
1621
1622 .merchant-white-label-modal-bonus {
1623 position: relative;
1624 margin: 46px -40px 0;
1625 padding: 22px 40px 20px;
1626 background-color: #f0f2fb;
1627 color: #50575e;
1628 font-size: 14px;
1629 line-height: 1.6;
1630 }
1631 .merchant-white-label-modal-bonus strong {
1632 color: #1d2327;
1633 }
1634 .merchant-white-label-modal-bonus .merchant-white-label-modal-bonus-highlight {
1635 color: #00a32a;
1636 }
1637
1638 .merchant-white-label-modal-bonus-badge {
1639 position: absolute;
1640 top: -14px;
1641 left: 50%;
1642 display: -webkit-box;
1643 display: -ms-flexbox;
1644 display: flex;
1645 -webkit-box-align: center;
1646 -ms-flex-align: center;
1647 align-items: center;
1648 -webkit-box-pack: center;
1649 -ms-flex-pack: center;
1650 justify-content: center;
1651 -webkit-box-sizing: border-box;
1652 box-sizing: border-box;
1653 width: 35px;
1654 height: 35px;
1655 -webkit-transform: translateX(-50%);
1656 transform: translateX(-50%);
1657 border: 5px solid #fff;
1658 border-radius: 50%;
1659 background-color: #00a32a;
1660 color: #fff;
1661 }
1662 .merchant-white-label-modal-bonus-badge svg {
1663 display: block;
1664 width: 13px;
1665 height: 13px;
1666 }
1667
1668 .merchant-white-label-modal-footer {
1669 margin: 0 -40px;
1670 padding: 16px 40px 20px;
1671 color: #787c82;
1672 font-size: 13px;
1673 }
1674 .merchant-white-label-modal-footer a {
1675 color: inherit;
1676 text-decoration: underline;
1677 }
1678 .merchant-white-label-modal-footer a:hover, .merchant-white-label-modal-footer a:focus {
1679 color: #1d2327;
1680 }
1681
1682 .toplevel_page_merchant {
1683 background-color: #F4F6F8;
1684 }
1685 .toplevel_page_merchant #wpbody-content > .updated,
1686 .toplevel_page_merchant #wpbody-content > .notice {
1687 display: none;
1688 }
1689
1690 .merchant-top-bar {
1691 display: -webkit-box;
1692 display: -ms-flexbox;
1693 display: flex;
1694 -webkit-box-align: center;
1695 -ms-flex-align: center;
1696 align-items: center;
1697 -webkit-box-pack: justify;
1698 -ms-flex-pack: justify;
1699 justify-content: space-between;
1700 background-color: #FFF;
1701 margin: 0 0 30px -20px;
1702 padding: 18px 20px;
1703 }
1704 .merchant-top-bar * {
1705 -webkit-box-sizing: border-box;
1706 box-sizing: border-box;
1707 }
1708 .merchant-top-bar * *:before,
1709 .merchant-top-bar * *:after {
1710 -webkit-box-sizing: border-box;
1711 box-sizing: border-box;
1712 }
1713 .merchant-top-bar .merchant-top-bar-infos {
1714 display: -webkit-box;
1715 display: -ms-flexbox;
1716 display: flex;
1717 -webkit-box-align: center;
1718 -ms-flex-align: center;
1719 align-items: center;
1720 }
1721 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item {
1722 position: relative;
1723 padding: 0 10px;
1724 }
1725 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item + .merchant-top-bar-info-item:before {
1726 content: "";
1727 position: absolute;
1728 top: 50%;
1729 left: 0;
1730 height: 17px;
1731 -webkit-transform: translateY(-50%);
1732 transform: translateY(-50%);
1733 border-left: 1px solid #F0F0F0;
1734 }
1735 .merchant-top-bar .merchant-version {
1736 font-size: 13px;
1737 line-height: 13px;
1738 color: #97A3B6;
1739 }
1740 .merchant-top-bar .merchant-version strong {
1741 position: relative;
1742 top: 1px;
1743 }
1744 .merchant-top-bar .merchant-version .merchant-badge {
1745 display: -webkit-inline-box;
1746 display: -ms-inline-flexbox;
1747 display: inline-flex;
1748 margin-left: 5px;
1749 font-size: 9px;
1750 line-height: 10px;
1751 }
1752 .merchant-top-bar .merchant-notifications {
1753 position: relative;
1754 display: -webkit-inline-box;
1755 display: -ms-inline-flexbox;
1756 display: inline-flex;
1757 -webkit-box-align: center;
1758 -ms-flex-align: center;
1759 align-items: center;
1760 -webkit-box-pack: center;
1761 -ms-flex-pack: center;
1762 justify-content: center;
1763 width: 27px;
1764 height: 27px;
1765 border: 1px solid #DFDFDF;
1766 border-radius: 35px;
1767 }
1768 .merchant-top-bar .merchant-notifications:focus {
1769 -webkit-box-shadow: none;
1770 box-shadow: none;
1771 }
1772 .merchant-top-bar .merchant-notifications .merchant-notifications-count {
1773 position: absolute;
1774 top: -8px;
1775 right: -7px;
1776 display: -webkit-box;
1777 display: -ms-flexbox;
1778 display: flex;
1779 -webkit-box-align: center;
1780 -ms-flex-align: center;
1781 align-items: center;
1782 -webkit-box-pack: center;
1783 -ms-flex-pack: center;
1784 justify-content: center;
1785 width: 16px;
1786 height: 16px;
1787 color: #FFF;
1788 background-color: #FA1212;
1789 border-radius: 35px;
1790 font-size: 10px;
1791 line-height: 1;
1792 }
1793 .merchant-top-bar .merchant-notifications.read .merchant-notifications-count {
1794 display: none;
1795 }
1796 .merchant-top-bar .merchant-website {
1797 display: -webkit-box;
1798 display: -ms-flexbox;
1799 display: flex;
1800 -webkit-box-align: center;
1801 -ms-flex-align: center;
1802 align-items: center;
1803 gap: 8px;
1804 font-size: 13px;
1805 line-height: 16px;
1806 color: #3858E9;
1807 text-decoration: none;
1808 }
1809
1810 /* Notifications Sidebar */
1811 .merchant-notifications-sidebar {
1812 position: fixed;
1813 top: 96px;
1814 right: 0;
1815 width: 100%;
1816 max-width: 500px;
1817 height: calc(100vh - 92px);
1818 background-color: #FFF;
1819 -webkit-box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1820 box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1821 opacity: 0;
1822 visibility: hidden;
1823 -webkit-transform: translate3d(100%, 0, 0);
1824 transform: translate3d(100%, 0, 0);
1825 -webkit-transition: ease transform 300ms, ease opacity 300ms;
1826 transition: ease transform 300ms, ease opacity 300ms;
1827 z-index: 1000;
1828 }
1829 .merchant-notifications-sidebar.opened {
1830 opacity: 1;
1831 visibility: visible;
1832 -webkit-transform: none;
1833 transform: none;
1834 }
1835 .merchant-notifications-sidebar.closing {
1836 opacity: 0;
1837 -webkit-transform: translate3d(100%, 0, 0);
1838 transform: translate3d(100%, 0, 0);
1839 }
1840 .merchant-notifications-sidebar .merchant-notifications-sidebar-close {
1841 position: absolute;
1842 top: 15px;
1843 right: 15px;
1844 -webkit-transition: ease opacity 300ms;
1845 transition: ease opacity 300ms;
1846 }
1847 .merchant-notifications-sidebar .merchant-notifications-sidebar-close:hover {
1848 opacity: 0.7;
1849 }
1850 .merchant-notifications-sidebar .merchant-notifications-sidebar-header {
1851 display: -webkit-box;
1852 display: -ms-flexbox;
1853 display: flex;
1854 -webkit-box-align: center;
1855 -ms-flex-align: center;
1856 align-items: center;
1857 gap: 10px;
1858 background-color: #EAEEF2;
1859 padding: 20px 22px;
1860 }
1861 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon {
1862 display: -webkit-box;
1863 display: -ms-flexbox;
1864 display: flex;
1865 -webkit-box-align: center;
1866 -ms-flex-align: center;
1867 align-items: center;
1868 -webkit-box-pack: center;
1869 -ms-flex-pack: center;
1870 justify-content: center;
1871 width: 40px;
1872 height: 40px;
1873 background-color: #FFF;
1874 border: 1px solid #EBEDEF;
1875 border-radius: 35px;
1876 }
1877 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon svg {
1878 position: relative;
1879 top: -2px;
1880 }
1881 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content h3 {
1882 font-size: 16px;
1883 line-height: 26px;
1884 font-weight: 600;
1885 color: #3858E9;
1886 margin: 0;
1887 }
1888 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content p {
1889 font-size: 13px;
1890 line-height: 18px;
1891 color: #757575;
1892 margin: 0;
1893 }
1894 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs {
1895 position: relative;
1896 }
1897 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs:after {
1898 content: "";
1899 position: absolute;
1900 bottom: -10px;
1901 left: 20px;
1902 width: calc(100% - 40px);
1903 border-bottom: 1px solid #F0F0F1;
1904 }
1905 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs + .merchant-notifications-sidebar-body {
1906 max-height: calc(100vh - 232px);
1907 }
1908 .merchant-notifications-sidebar .merchant-notifications-sidebar-body {
1909 padding: 20px;
1910 overflow-y: auto;
1911 max-height: calc(100vh - 230px);
1912 }
1913 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar {
1914 width: 5px;
1915 }
1916 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-track {
1917 background: #e2e2e2;
1918 }
1919 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-thumb {
1920 background-color: #CCC;
1921 }
1922
1923 /* Notifications (card) */
1924 .merchant-notification .merchant-notification-date {
1925 display: block;
1926 font-size: 13px;
1927 line-height: 18px;
1928 color: #757575;
1929 }
1930 .merchant-notification .merchant-notification-date + .merchant-notification-content {
1931 margin-top: 20px;
1932 }
1933 .merchant-notification .changelog-tag {
1934 display: inline-block;
1935 font-size: 10px;
1936 line-height: 18px;
1937 color: #FFF;
1938 padding: 0px 10px;
1939 background-color: #CCC;
1940 border-radius: 3px;
1941 text-transform: uppercase;
1942 font-weight: 600;
1943 margin-bottom: 5px;
1944 }
1945 .merchant-notification .changelog-tag.changelog-added {
1946 background-color: #73B189;
1947 }
1948 .merchant-notification .changelog-tag.changelog-changed {
1949 background-color: #F6CA45;
1950 }
1951 .merchant-notification .changelog-tag.changelog-fixed {
1952 background-color: #967BE3;
1953 }
1954 .merchant-notification .changelog-description {
1955 display: block;
1956 font-size: 13px;
1957 line-height: 21px;
1958 font-weight: 400;
1959 color: #757575;
1960 margin-top: 5px;
1961 }
1962 .merchant-notification .merchant-notification-content ul {
1963 margin: 0;
1964 }
1965 .merchant-notification .merchant-notification-content ul li {
1966 display: -webkit-box;
1967 display: -ms-flexbox;
1968 display: flex;
1969 -webkit-box-orient: vertical;
1970 -webkit-box-direction: normal;
1971 -ms-flex-direction: column;
1972 flex-direction: column;
1973 -webkit-box-align: start;
1974 -ms-flex-align: start;
1975 align-items: flex-start;
1976 font-size: 16px;
1977 line-height: 26px;
1978 font-weight: 600;
1979 color: #101517;
1980 }
1981 .merchant-notification .merchant-notification-content ul li + li {
1982 margin-top: 15px;
1983 padding-top: 15px;
1984 border-top: 1px solid #E7E7E7;
1985 }
1986 .merchant-notification + .merchant-notification {
1987 margin: 20px -20px 0px;
1988 padding: 20px 20px 0px;
1989 border-top: 1px solid #E7E7E7;
1990 }
1991
1992 .merchant-wrap {
1993 padding-left: 5px;
1994 padding-right: 5px;
1995 }
1996 .merchant-wrap * {
1997 -webkit-box-sizing: border-box;
1998 box-sizing: border-box;
1999 }
2000 .merchant-wrap * *:before,
2001 .merchant-wrap * *:after {
2002 -webkit-box-sizing: border-box;
2003 box-sizing: border-box;
2004 }
2005
2006 .merchant-modules-panel {
2007 display: -webkit-box;
2008 display: -ms-flexbox;
2009 display: flex;
2010 grid-gap: 20px;
2011 -webkit-box-orient: vertical;
2012 -webkit-box-direction: normal;
2013 -ms-flex-direction: column;
2014 flex-direction: column;
2015 }
2016
2017 .merchant-modules-header {
2018 display: -webkit-box;
2019 display: -ms-flexbox;
2020 display: flex;
2021 grid-gap: 30px;
2022 }
2023
2024 .merchant-modules-header-left,
2025 .merchant-modules-header-right {
2026 -webkit-box-flex: 1;
2027 -ms-flex: 1;
2028 flex: 1;
2029 display: -webkit-box;
2030 display: -ms-flexbox;
2031 display: flex;
2032 grid-gap: 10px;
2033 -webkit-box-orient: vertical;
2034 -webkit-box-direction: normal;
2035 -ms-flex-direction: column;
2036 flex-direction: column;
2037 -webkit-box-pack: center;
2038 -ms-flex-pack: center;
2039 justify-content: center;
2040 }
2041
2042 .merchant-admin-hand-icon {
2043 width: 24px;
2044 height: auto;
2045 margin-left: 7px;
2046 position: relative;
2047 top: 2px;
2048 }
2049
2050 .merchant-modules-header-heading {
2051 font-size: 24px;
2052 line-height: 34px;
2053 font-weight: 500;
2054 color: #101517;
2055 }
2056 .merchant-modules-header-heading__campaigns {
2057 margin-bottom: 20px;
2058 }
2059
2060 .merchant-modules-header-subheading {
2061 font-size: 16px;
2062 line-height: 1.35em;
2063 color: #7B7B7B;
2064 font-weight: 400;
2065 }
2066
2067 .merchant-modules-header-status {
2068 margin-top: 20px;
2069 margin-bottom: 40px;
2070 display: -webkit-box;
2071 display: -ms-flexbox;
2072 display: flex;
2073 grid-gap: 20px;
2074 }
2075
2076 .merchant-modules-header-status-box {
2077 display: -webkit-box;
2078 display: -ms-flexbox;
2079 display: flex;
2080 grid-gap: 10px;
2081 -webkit-box-orient: vertical;
2082 -webkit-box-direction: normal;
2083 -ms-flex-direction: column;
2084 flex-direction: column;
2085 -webkit-box-align: center;
2086 -ms-flex-align: center;
2087 align-items: center;
2088 padding: 20px;
2089 font-size: 14px;
2090 font-weight: 500;
2091 color: #101517;
2092 background-color: #fff;
2093 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
2094 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
2095 border-radius: 4px;
2096 }
2097 @media (min-width: 421px) {
2098 .merchant-modules-header-status-box {
2099 min-width: 175px;
2100 }
2101 }
2102 @media (max-width: 420px) {
2103 .merchant-modules-header-status-box {
2104 -webkit-box-flex: 1;
2105 -ms-flex: 1;
2106 flex: 1;
2107 }
2108 }
2109 .merchant-modules-header-status-box span {
2110 display: -webkit-box;
2111 display: -ms-flexbox;
2112 display: flex;
2113 grid-gap: 5px;
2114 -webkit-box-align: center;
2115 -ms-flex-align: center;
2116 align-items: center;
2117 }
2118 .merchant-modules-header-status-box strong {
2119 color: #101517;
2120 font-size: 40px;
2121 line-height: 1em;
2122 }
2123
2124 .merchant-modules-header-image {
2125 height: 100%;
2126 display: -webkit-box;
2127 display: -ms-flexbox;
2128 display: flex;
2129 -webkit-box-pack: center;
2130 -ms-flex-pack: center;
2131 justify-content: center;
2132 -webkit-box-align: end;
2133 -ms-flex-align: end;
2134 align-items: flex-end;
2135 }
2136 .merchant-modules-header-image svg {
2137 width: 300px;
2138 }
2139 @media (max-width: 1400px) {
2140 .merchant-modules-header-image img {
2141 max-width: 450px;
2142 margin-top: 20px;
2143 }
2144 }
2145
2146 .merchant-modules-no-active-modules {
2147 padding-block: 40px;
2148 display: -webkit-box;
2149 display: -ms-flexbox;
2150 display: flex;
2151 -webkit-box-orient: vertical;
2152 -webkit-box-direction: normal;
2153 -ms-flex-direction: column;
2154 flex-direction: column;
2155 -webkit-box-align: center;
2156 -ms-flex-align: center;
2157 align-items: center;
2158 gap: 15px;
2159 }
2160 .merchant-modules-no-active-modules img {
2161 width: 350px;
2162 max-width: 100%;
2163 margin-bottom: 10px;
2164 }
2165 .merchant-modules-no-active-modules__text-big {
2166 font-size: 16px;
2167 font-weight: 500;
2168 color: #101517;
2169 }
2170 .merchant-modules-no-active-modules__text-small {
2171 color: #757575;
2172 font-size: 13px;
2173 }
2174 .merchant-modules-no-active-modules .merchant-module-page-button {
2175 width: 180px;
2176 margin-top: 5px;
2177 }
2178
2179 .merchant-modules-header-shortlinks {
2180 margin: 20px 0;
2181 padding: 0;
2182 list-style: none;
2183 display: -webkit-box;
2184 display: -ms-flexbox;
2185 display: flex;
2186 -webkit-box-orient: vertical;
2187 -webkit-box-direction: normal;
2188 -ms-flex-direction: column;
2189 flex-direction: column;
2190 border-radius: 4px;
2191 border: 2px solid #F0F0F1;
2192 background-color: #fff;
2193 }
2194 .merchant-modules-header-shortlinks li {
2195 margin: 0 15px;
2196 border-bottom: 1px solid #EFEFEF;
2197 }
2198 .merchant-modules-header-shortlinks li:last-child {
2199 border-bottom: none;
2200 margin-bottom: 5px;
2201 }
2202 .merchant-modules-header-shortlinks li:first-child {
2203 margin-top: 5px;
2204 }
2205 .merchant-modules-header-shortlinks a {
2206 font-size: 14px;
2207 display: -webkit-box;
2208 display: -ms-flexbox;
2209 display: flex;
2210 grid-gap: 8px;
2211 -webkit-box-align: center;
2212 -ms-flex-align: center;
2213 align-items: center;
2214 -webkit-box-pack: justify;
2215 -ms-flex-pack: justify;
2216 justify-content: space-between;
2217 color: #757575;
2218 text-decoration: none;
2219 padding: 10px 0;
2220 }
2221 .merchant-modules-header-shortlinks a:focus {
2222 outline: none;
2223 -webkit-box-shadow: none;
2224 box-shadow: none;
2225 }
2226 .merchant-modules-header-shortlinks a svg:first-of-type {
2227 width: 24px;
2228 }
2229 .merchant-modules-header-shortlinks span {
2230 -webkit-box-flex: 1;
2231 -ms-flex: 1;
2232 flex: 1;
2233 }
2234 .merchant-modules-header-shortlinks strong {
2235 color: #101517;
2236 font-weight: 500;
2237 }
2238
2239 .merchant-modules-box {
2240 display: -webkit-box;
2241 display: -ms-flexbox;
2242 display: flex;
2243 grid-gap: 20px;
2244 -webkit-box-orient: vertical;
2245 -webkit-box-direction: normal;
2246 -ms-flex-direction: column;
2247 flex-direction: column;
2248 padding: 20px;
2249 background-color: #fff;
2250 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2251 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2252 border-radius: 4px;
2253 }
2254
2255 .merchant-modules-box-heading {
2256 font-size: 20px;
2257 font-weight: 500;
2258 line-height: 30px;
2259 color: #101517;
2260 }
2261
2262 .merchant-modules-list {
2263 display: grid;
2264 grid-template-columns: repeat(3, minmax(0, 1fr));
2265 grid-gap: 20px;
2266 }
2267
2268 .merchant-modules-list-item {
2269 position: relative;
2270 display: -webkit-box;
2271 display: -ms-flexbox;
2272 display: flex;
2273 grid-gap: 10px;
2274 padding: 20px;
2275 text-decoration: none;
2276 border: 2px solid #F0F0F1;
2277 background-color: #fff;
2278 border-radius: 4px;
2279 -webkit-transition: all 0.2s;
2280 transition: all 0.2s;
2281 }
2282 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-icon,
2283 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-content {
2284 opacity: 0.5;
2285 }
2286 .merchant-modules-list-item:hover {
2287 -webkit-box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
2288 box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
2289 }
2290 .merchant-modules-list-item:focus {
2291 outline: none;
2292 -webkit-box-shadow: none;
2293 box-shadow: none;
2294 }
2295
2296 .merchant-badge {
2297 color: #99A5B8;
2298 padding: 3px 6px;
2299 border: 1px solid #DFDFDF;
2300 border-radius: 2px;
2301 font-weight: 700;
2302 }
2303 .merchant-badge.merchant-badge-pro {
2304 color: #3858e9;
2305 border-color: #3858e9;
2306 }
2307
2308 .merchant-pro-badge.merchant-pro-tooltip {
2309 position: relative;
2310 }
2311 .merchant-pro-badge.merchant-pro-tooltip:before {
2312 content: attr(data-tooltip-message);
2313 position: absolute;
2314 right: -30px;
2315 bottom: calc(100% + 11px);
2316 color: #FFF;
2317 font-size: 11px;
2318 line-height: 16px;
2319 padding: 3px 6px;
2320 background-color: #1E1E1E;
2321 white-space: nowrap;
2322 opacity: 0;
2323 visibility: hidden;
2324 -webkit-transform: translate3d(0, 6px, 0);
2325 transform: translate3d(0, 6px, 0);
2326 -webkit-transition: ease opacity 300ms, ease transform 300ms;
2327 transition: ease opacity 300ms, ease transform 300ms;
2328 z-index: 2;
2329 }
2330 .merchant-pro-badge.merchant-pro-tooltip:after {
2331 content: "";
2332 position: absolute;
2333 bottom: calc(100% + 3px);
2334 right: 10px;
2335 width: 0;
2336 height: 0;
2337 border-style: solid;
2338 border-width: 4px 4px 4px 4px;
2339 border-color: #1E1E1E transparent transparent transparent;
2340 opacity: 0;
2341 visibility: hidden;
2342 -webkit-transform: translate3d(0, 6px, 0);
2343 transform: translate3d(0, 6px, 0);
2344 -webkit-transition: ease opacity 300ms, ease transform 300ms;
2345 transition: ease opacity 300ms, ease transform 300ms;
2346 z-index: 2;
2347 }
2348 .merchant-pro-badge.merchant-pro-tooltip:hover:before, .merchant-pro-badge.merchant-pro-tooltip:hover:after {
2349 opacity: 1;
2350 visibility: visible;
2351 -webkit-transform: translate3d(0, 0, 0);
2352 transform: translate3d(0, 0, 0);
2353 }
2354
2355 .merchant-modules-list-item-badge-wrapper {
2356 position: absolute;
2357 top: 20px;
2358 right: 20px;
2359 }
2360
2361 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge {
2362 padding: 3px 7px;
2363 color: #FFF;
2364 border: 1px solid #212121;
2365 background-color: #212121;
2366 border-radius: 3px;
2367 font-size: 10px;
2368 line-height: 1.2;
2369 font-weight: 400;
2370 display: -webkit-inline-box;
2371 display: -ms-inline-flexbox;
2372 display: inline-flex;
2373 top: -2px;
2374 text-transform: uppercase;
2375 }
2376 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge:before {
2377 font-weight: 400;
2378 text-transform: none;
2379 }
2380
2381 .merchant-modules-list-item-woo-required .merchant-pro-badge {
2382 padding: 1px 2px;
2383 color: #674399;
2384 border: 1px solid #674399;
2385 border-radius: 3px;
2386 font-size: 9px;
2387 line-height: 1.2;
2388 font-weight: 700;
2389 display: -webkit-inline-box;
2390 display: -ms-inline-flexbox;
2391 display: inline-flex;
2392 top: -2px;
2393 }
2394 .merchant-modules-list-item-woo-required .merchant-pro-badge:before {
2395 font-weight: 400;
2396 }
2397 .merchant-modules-list-item-woo-required + .merchant-modules-list-item-upsell {
2398 right: 53px;
2399 }
2400
2401 .merchant-modules-list-item-icon {
2402 display: -webkit-box;
2403 display: -ms-flexbox;
2404 display: flex;
2405 }
2406 .merchant-modules-list-item-icon svg {
2407 width: 18px;
2408 height: 26px;
2409 fill: #787C82;
2410 }
2411 .merchant-modules-list-item-icon svg.stroke-based {
2412 fill: none;
2413 stroke: #787C82;
2414 }
2415
2416 .merchant-modules-list-item-content {
2417 display: -webkit-box;
2418 display: -ms-flexbox;
2419 display: flex;
2420 grid-gap: 8px;
2421 -webkit-box-orient: vertical;
2422 -webkit-box-direction: normal;
2423 -ms-flex-direction: column;
2424 flex-direction: column;
2425 }
2426
2427 .merchant-modules-list-item-title {
2428 display: -webkit-box;
2429 display: -ms-flexbox;
2430 display: flex;
2431 -webkit-box-align: center;
2432 -ms-flex-align: center;
2433 align-items: center;
2434 grid-gap: 5px;
2435 font-size: 16px;
2436 line-height: 26px;
2437 font-weight: 500;
2438 color: #101517;
2439 }
2440
2441 .merchant-modules-indicator {
2442 width: 10px;
2443 height: 10px;
2444 border-radius: 10px;
2445 background-color: #3c8733;
2446 }
2447
2448 .merchant-modules-list-item-desc {
2449 color: #757575;
2450 font-size: 13px;
2451 line-height: 20px;
2452 max-width: 400px;
2453 }
2454
2455 .merchant-module-page {
2456 display: -webkit-box;
2457 display: -ms-flexbox;
2458 display: flex;
2459 }
2460
2461 .merchant-module-page-back a {
2462 display: -webkit-box;
2463 display: -ms-flexbox;
2464 display: flex;
2465 grid-gap: 5px;
2466 -webkit-box-align: center;
2467 -ms-flex-align: center;
2468 align-items: center;
2469 -webkit-transition: all 0.2s;
2470 transition: all 0.2s;
2471 text-decoration: none;
2472 color: #1D2327;
2473 font-weight: 500;
2474 }
2475 .merchant-module-page-back a:focus, .merchant-module-page-back a:active {
2476 -webkit-box-shadow: none;
2477 box-shadow: none;
2478 outline: none;
2479 }
2480
2481 .merchant-module-page-content {
2482 width: 50%;
2483 -webkit-box-flex: 1;
2484 -ms-flex: 1;
2485 flex: 1;
2486 display: -webkit-box;
2487 display: -ms-flexbox;
2488 display: flex;
2489 grid-gap: 20px;
2490 -webkit-box-orient: vertical;
2491 -webkit-box-direction: normal;
2492 -ms-flex-direction: column;
2493 flex-direction: column;
2494 }
2495
2496 .merchant-module-page-body {
2497 display: -webkit-box;
2498 display: -ms-flexbox;
2499 display: flex;
2500 }
2501
2502 .merchant-module-page-preview {
2503 width: 50%;
2504 margin-left: 20px;
2505 }
2506
2507 .merchant-module-page-body.has-preview .merchant-module-page-setting-box {
2508 -webkit-box-orient: vertical;
2509 -webkit-box-direction: normal;
2510 -ms-flex-direction: column;
2511 flex-direction: column;
2512 grid-gap: 20px;
2513 }
2514 .merchant-module-page-body.has-preview .merchant-module-page-setting-title,
2515 .merchant-module-page-body.has-preview .merchant-module-page-setting-fields {
2516 width: 100%;
2517 }
2518
2519 .merchant-module-page-ajax-form {
2520 -webkit-box-flex: 1;
2521 -ms-flex: 1;
2522 flex: 1;
2523 display: -webkit-box;
2524 display: -ms-flexbox;
2525 display: flex;
2526 grid-gap: 20px;
2527 -webkit-box-orient: vertical;
2528 -webkit-box-direction: normal;
2529 -ms-flex-direction: column;
2530 flex-direction: column;
2531 }
2532
2533 .merchant-module-page-header {
2534 display: -webkit-box;
2535 display: -ms-flexbox;
2536 display: flex;
2537 -webkit-box-align: center;
2538 -ms-flex-align: center;
2539 align-items: center;
2540 background-color: #fff;
2541 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2542 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2543 border-radius: 4px;
2544 }
2545
2546 .merchant-module-page-header-content {
2547 width: 100%;
2548 display: -webkit-box;
2549 display: -ms-flexbox;
2550 display: flex;
2551 grid-gap: 20px;
2552 -webkit-box-orient: vertical;
2553 -webkit-box-direction: normal;
2554 -ms-flex-direction: column;
2555 flex-direction: column;
2556 padding: 30px;
2557 }
2558
2559 .merchant-module-page-header-placeholder {
2560 width: 40%;
2561 display: -webkit-box;
2562 display: -ms-flexbox;
2563 display: flex;
2564 -ms-flex-item-align: end;
2565 align-self: flex-end;
2566 -webkit-box-pack: center;
2567 -ms-flex-pack: center;
2568 justify-content: center;
2569 margin: 40px 60px 0 60px;
2570 }
2571 .merchant-module-page-header-placeholder img {
2572 max-width: 100%;
2573 max-height: 300px;
2574 }
2575
2576 body.merchant-has-admin-preview .merchant-module-page-header-content {
2577 width: 100%;
2578 }
2579 body.merchant-has-admin-preview .merchant-module-page-header-placeholder {
2580 display: none;
2581 }
2582 body.merchant-has-admin-preview .merchant-module-page-desc {
2583 max-width: none;
2584 }
2585
2586 .merchant-module-page-heading {
2587 display: -webkit-box;
2588 display: -ms-flexbox;
2589 display: flex;
2590 grid-gap: 12px;
2591 }
2592
2593 .merchant-module-page-info {
2594 display: -webkit-box;
2595 display: -ms-flexbox;
2596 display: flex;
2597 grid-gap: 10px;
2598 -webkit-box-orient: vertical;
2599 -webkit-box-direction: normal;
2600 -ms-flex-direction: column;
2601 flex-direction: column;
2602 }
2603
2604 .merchant-module-page-title {
2605 font-size: 32px;
2606 line-height: 40px;
2607 font-weight: 500;
2608 color: #101517;
2609 display: -webkit-box;
2610 display: -ms-flexbox;
2611 display: flex;
2612 grid-gap: 15px;
2613 -webkit-box-align: center;
2614 -ms-flex-align: center;
2615 align-items: center;
2616 }
2617 .merchant-module-page-title svg {
2618 width: 28px;
2619 height: 28px;
2620 fill: #787C82;
2621 }
2622
2623 .merchant-module-page-desc {
2624 font-size: 18px;
2625 line-height: 28px;
2626 font-weight: normal;
2627 color: #757575;
2628 max-width: none;
2629 }
2630
2631 .merchant-module-page-actions {
2632 display: -webkit-box;
2633 display: -ms-flexbox;
2634 display: flex;
2635 grid-gap: 10px;
2636 -webkit-box-pack: justify;
2637 -ms-flex-pack: justify;
2638 justify-content: space-between;
2639 }
2640
2641 .merchant-module-page-actions-inner {
2642 display: -webkit-box;
2643 display: -ms-flexbox;
2644 display: flex;
2645 grid-gap: 15px;
2646 }
2647
2648 .merchant-module-page-button {
2649 cursor: pointer;
2650 display: -webkit-box;
2651 display: -ms-flexbox;
2652 display: flex;
2653 grid-gap: 7px;
2654 -webkit-box-pack: center;
2655 -ms-flex-pack: center;
2656 justify-content: center;
2657 -webkit-box-align: center;
2658 -ms-flex-align: center;
2659 align-items: center;
2660 padding: 14px 25px;
2661 font-size: 16px;
2662 line-height: 1em;
2663 font-weight: 500;
2664 -webkit-user-select: none;
2665 -moz-user-select: none;
2666 -ms-user-select: none;
2667 user-select: none;
2668 text-decoration: none;
2669 border-radius: 4px;
2670 color: #fff;
2671 border: 1px solid transparent;
2672 background-color: #3858E9;
2673 }
2674 .merchant-module-page-button.merchant-module-question-answer-button:disabled {
2675 cursor: not-allowed;
2676 background: rgba(239, 239, 239, 0.3);
2677 color: rgba(16, 16, 16, 0.3);
2678 border: 1px solid rgba(195, 195, 195, 0.3);
2679 }
2680 .merchant-module-page-button:focus, .merchant-module-page-button:hover {
2681 outline: none;
2682 -webkit-box-shadow: none;
2683 box-shadow: none;
2684 color: #fff;
2685 }
2686 .merchant-module-page-button svg {
2687 width: 8px;
2688 height: 8px;
2689 }
2690
2691 .merchant-module-deactivate {
2692 display: none;
2693 }
2694
2695 .merchant-module-action {
2696 position: relative;
2697 }
2698 .merchant-module-action.merchant-enabled .merchant-module-activate {
2699 display: none;
2700 }
2701 .merchant-module-action.merchant-enabled .merchant-module-deactivate {
2702 display: block;
2703 }
2704
2705 .merchant-module-deactivate-dropdown {
2706 cursor: pointer;
2707 position: absolute;
2708 top: 100%;
2709 left: 0;
2710 padding: 5px;
2711 white-space: nowrap;
2712 border-radius: 8px;
2713 background-color: #fff;
2714 font-size: 14px;
2715 line-height: 16px;
2716 margin: 0;
2717 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2718 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2719 opacity: 0;
2720 pointer-events: none;
2721 -webkit-transition: all 0.1s;
2722 transition: all 0.1s;
2723 }
2724 .merchant-module-deactivate-dropdown.merchant-show {
2725 opacity: 1;
2726 pointer-events: auto;
2727 margin-top: 10px;
2728 }
2729
2730 .merchant-module-dropdown {
2731 position: absolute;
2732 overflow: hidden;
2733 top: 100%;
2734 left: 0;
2735 min-width: 275px;
2736 white-space: nowrap;
2737 border-radius: 8px;
2738 background-color: #fff;
2739 font-size: 13px;
2740 line-height: 14px;
2741 margin: 0;
2742 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2743 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2744 opacity: 0;
2745 pointer-events: none;
2746 -webkit-transition: all 0.1s;
2747 transition: all 0.1s;
2748 z-index: 99;
2749 }
2750 .merchant-module-dropdown.merchant-show {
2751 opacity: 1;
2752 pointer-events: auto;
2753 margin-top: 10px;
2754 }
2755 .merchant-module-dropdown ul {
2756 margin: 0;
2757 padding: 0;
2758 list-style: none;
2759 display: -webkit-box;
2760 display: -ms-flexbox;
2761 display: flex;
2762 -webkit-box-orient: vertical;
2763 -webkit-box-direction: normal;
2764 -ms-flex-direction: column;
2765 flex-direction: column;
2766 }
2767 .merchant-module-dropdown ul li {
2768 cursor: pointer;
2769 position: relative;
2770 margin: 0;
2771 display: -webkit-box;
2772 display: -ms-flexbox;
2773 display: flex;
2774 -webkit-box-align: center;
2775 -ms-flex-align: center;
2776 align-items: center;
2777 -webkit-box-pack: justify;
2778 -ms-flex-pack: justify;
2779 justify-content: space-between;
2780 white-space: nowrap;
2781 padding: 15px 15px 0 15px;
2782 color: #202223;
2783 -webkit-transition: all 0.2s;
2784 transition: all 0.2s;
2785 }
2786 .merchant-module-dropdown ul li:before {
2787 content: "";
2788 position: absolute;
2789 z-index: 1;
2790 top: 0;
2791 left: 0;
2792 bottom: 0;
2793 width: 0;
2794 opacity: 0;
2795 -webkit-transition: all 0.2s;
2796 transition: all 0.2s;
2797 background-color: #3858E9;
2798 }
2799 .merchant-module-dropdown ul li:hover {
2800 background-color: #F2F7FE;
2801 }
2802 .merchant-module-dropdown ul li:hover:before {
2803 opacity: 1;
2804 width: 3px;
2805 }
2806 .merchant-module-dropdown ul li span {
2807 width: 100%;
2808 padding-bottom: 15px;
2809 border-bottom: 1px solid #eee;
2810 }
2811 .merchant-module-dropdown ul li:last-child span {
2812 border-bottom: none;
2813 }
2814 .merchant-module-dropdown.merchant-show {
2815 opacity: 1;
2816 pointer-events: auto;
2817 margin-top: 10px;
2818 }
2819
2820 .merchant-module-dropdown-close {
2821 cursor: pointer;
2822 }
2823
2824 .merchant-module-question-title {
2825 display: -webkit-box;
2826 display: -ms-flexbox;
2827 display: flex;
2828 grid-gap: 15px;
2829 -webkit-box-align: center;
2830 -ms-flex-align: center;
2831 align-items: center;
2832 -webkit-box-pack: justify;
2833 -ms-flex-pack: justify;
2834 justify-content: space-between;
2835 white-space: nowrap;
2836 padding: 15px 15px 5px 15px;
2837 font-size: 14px;
2838 line-height: 16px;
2839 color: #202223;
2840 font-weight: 500;
2841 }
2842 .merchant-module-question-title i {
2843 width: auto;
2844 height: auto;
2845 font-size: 24px;
2846 line-height: 1;
2847 }
2848
2849 .merchant-module-question-answer-title {
2850 display: none;
2851 grid-gap: 15px;
2852 -webkit-box-align: center;
2853 -ms-flex-align: center;
2854 align-items: center;
2855 -webkit-box-pack: justify;
2856 -ms-flex-pack: justify;
2857 justify-content: space-between;
2858 white-space: nowrap;
2859 padding: 15px;
2860 font-size: 14px;
2861 line-height: 16px;
2862 color: #202223;
2863 font-weight: 500;
2864 }
2865 .merchant-module-question-answer-title i {
2866 width: auto;
2867 height: auto;
2868 font-size: 20px;
2869 line-height: 1;
2870 }
2871 .merchant-module-question-answer-title.merchant-show {
2872 display: -webkit-box;
2873 display: -ms-flexbox;
2874 display: flex;
2875 }
2876
2877 .merchant-module-question-answer-form {
2878 padding: 5px 15px 15px 15px;
2879 display: -webkit-box;
2880 display: -ms-flexbox;
2881 display: flex;
2882 grid-gap: 10px;
2883 -webkit-box-orient: vertical;
2884 -webkit-box-direction: normal;
2885 -ms-flex-direction: column;
2886 flex-direction: column;
2887 }
2888 .merchant-module-question-answer-form textarea {
2889 width: 100%;
2890 height: 100px;
2891 padding: 12px;
2892 line-height: 1em;
2893 width: 100%;
2894 max-width: 100%;
2895 min-height: auto;
2896 border: 1px solid #D6D6D6;
2897 }
2898 .merchant-module-question-answer-form textarea:focus {
2899 outline: none;
2900 -webkit-box-shadow: none;
2901 box-shadow: none;
2902 border-color: #3858E9;
2903 }
2904 .merchant-module-question-answer-form button {
2905 -ms-flex-item-align: end;
2906 align-self: flex-end;
2907 padding: 8px 10px;
2908 font-size: 13px;
2909 font-weight: 400;
2910 }
2911
2912 .merchant-module-question-answer-thank-you-text {
2913 padding: 5px 15px 15px 15px;
2914 }
2915
2916 .merchant-module-question-thank-you-dropdown .merchant-module-question-answer-title {
2917 display: -webkit-box;
2918 display: -ms-flexbox;
2919 display: flex;
2920 }
2921
2922 .merchant-module-page-button-action-deactivate {
2923 border-radius: 8px;
2924 padding: 12px 16px;
2925 display: -webkit-box;
2926 display: -ms-flexbox;
2927 display: flex;
2928 justify-items: center;
2929 -webkit-box-align: center;
2930 -ms-flex-align: center;
2931 align-items: center;
2932 text-decoration: none;
2933 color: #d82c0d;
2934 }
2935 .merchant-module-page-button-action-deactivate:hover {
2936 background-color: #fff4f4;
2937 }
2938
2939 .merchant-module-page-button-deactivate {
2940 color: #3858E9;
2941 border-color: #3858E9;
2942 background-color: transparent;
2943 }
2944 .merchant-module-page-button-deactivate:focus, .merchant-module-page-button-deactivate:hover {
2945 color: #3858E9;
2946 }
2947 .merchant-module-page-button-deactivate.merchant-show .merchant-module-deactivate-dropdown {
2948 pointer-events: auto;
2949 }
2950
2951 .merchant-module-page-actions-links {
2952 display: -webkit-box;
2953 display: -ms-flexbox;
2954 display: flex;
2955 -webkit-box-align: center;
2956 -ms-flex-align: center;
2957 align-items: center;
2958 }
2959
2960 .merchant-module-page-link {
2961 display: -webkit-box;
2962 display: -ms-flexbox;
2963 display: flex;
2964 grid-gap: 5px;
2965 -webkit-box-pack: center;
2966 -ms-flex-pack: center;
2967 justify-content: center;
2968 -webkit-box-align: center;
2969 -ms-flex-align: center;
2970 align-items: center;
2971 padding: 10px;
2972 font-size: 13px;
2973 font-weight: 500;
2974 text-decoration: none;
2975 color: #3858E9;
2976 }
2977 .merchant-module-page-link span {
2978 text-decoration: underline;
2979 }
2980 .merchant-module-page-link:focus, .merchant-module-page-link:hover {
2981 outline: none;
2982 -webkit-box-shadow: none;
2983 box-shadow: none;
2984 color: #3858E9;
2985 }
2986
2987 body.merchant-module-disabled .merchant-module-page-link-preview {
2988 pointer-events: none;
2989 color: #CCC;
2990 }
2991 body.merchant-module-disabled .merchant-module-page-link-preview span {
2992 text-decoration: none;
2993 }
2994 body.merchant-module-disabled .merchant-module-page-link-preview svg path {
2995 fill: #CCC;
2996 }
2997
2998 .merchant-module-page-ajax-header {
2999 display: -webkit-box;
3000 display: -ms-flexbox;
3001 display: flex;
3002 -webkit-box-pack: justify;
3003 -ms-flex-pack: justify;
3004 justify-content: space-between;
3005 -webkit-box-align: center;
3006 -ms-flex-align: center;
3007 align-items: center;
3008 position: fixed;
3009 z-index: 10000;
3010 overflow: hidden;
3011 padding-left: 20px;
3012 padding-right: 20px;
3013 top: 32px;
3014 left: 160px;
3015 right: 0;
3016 height: 56px;
3017 opacity: 0;
3018 pointer-events: none;
3019 background-color: #1d2327;
3020 -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
3021 transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
3022 }
3023 .merchant-module-page-ajax-header.merchant-show {
3024 opacity: 1;
3025 pointer-events: auto;
3026 }
3027 .merchant-module-page-ajax-header.merchant-saving {
3028 -webkit-user-select: none;
3029 -moz-user-select: none;
3030 -ms-user-select: none;
3031 user-select: none;
3032 }
3033 .merchant-module-page-ajax-header.merchant-saving i {
3034 opacity: 1;
3035 }
3036 .merchant-module-page-ajax-header.merchant-saving span {
3037 opacity: 0;
3038 }
3039 .merchant-module-page-ajax-header.merchant-saving .merchant-module-page-ajax-buttons {
3040 -webkit-user-select: none;
3041 -moz-user-select: none;
3042 -ms-user-select: none;
3043 user-select: none;
3044 pointer-events: none;
3045 }
3046
3047 .merchant-module-page-ajax-notice {
3048 font-size: 14px;
3049 font-weight: 500;
3050 color: #e3e5e7;
3051 }
3052
3053 .merchant-module-page-ajax-buttons {
3054 display: -webkit-box;
3055 display: -ms-flexbox;
3056 display: flex;
3057 -webkit-box-align: center;
3058 -ms-flex-align: center;
3059 align-items: center;
3060 grid-gap: 15px;
3061 }
3062
3063 .merchant-module-save-button {
3064 position: relative;
3065 cursor: pointer;
3066 display: -webkit-box;
3067 display: -ms-flexbox;
3068 display: flex;
3069 -webkit-box-pack: center;
3070 -ms-flex-pack: center;
3071 justify-content: center;
3072 -webkit-box-align: center;
3073 -ms-flex-align: center;
3074 align-items: center;
3075 font-size: 14px;
3076 line-height: 16px;
3077 border: 0;
3078 border-radius: 4px;
3079 min-width: 60px;
3080 min-height: 36px;
3081 padding-left: 16px;
3082 padding-right: 16px;
3083 color: #fff;
3084 background-color: #3858E9;
3085 }
3086 .merchant-module-save-button i {
3087 position: absolute;
3088 width: auto;
3089 height: auto;
3090 font-size: 20px;
3091 opacity: 0;
3092 -webkit-animation: merchant-spin 1.5s infinite linear;
3093 animation: merchant-spin 1.5s infinite linear;
3094 }
3095
3096 .merchant-module-discard-button {
3097 cursor: pointer;
3098 display: -webkit-box;
3099 display: -ms-flexbox;
3100 display: flex;
3101 -webkit-box-pack: center;
3102 -ms-flex-pack: center;
3103 justify-content: center;
3104 -webkit-box-align: center;
3105 -ms-flex-align: center;
3106 align-items: center;
3107 font-size: 14px;
3108 line-height: 16px;
3109 min-width: 36px;
3110 min-height: 36px;
3111 color: #fff;
3112 text-decoration: none;
3113 }
3114 .merchant-module-discard-button:hover {
3115 color: #fff;
3116 opacity: 0.75;
3117 }
3118 .merchant-module-discard-button:focus {
3119 outline: none;
3120 -webkit-box-shadow: none;
3121 box-shadow: none;
3122 }
3123
3124 .merchant-module-page-preview-browser-top {
3125 background: #323232;
3126 display: -webkit-box;
3127 display: -ms-flexbox;
3128 display: flex;
3129 -webkit-box-align: center;
3130 -ms-flex-align: center;
3131 align-items: center;
3132 height: 45px;
3133 padding-left: 9px;
3134 }
3135
3136 .merchant-module-page-preview-browser-top-circle {
3137 background: #616161;
3138 width: 12px;
3139 height: 12px;
3140 border-radius: 50%;
3141 display: block;
3142 margin-left: 7px;
3143 }
3144
3145 .merchant-module-page-preview-browser {
3146 border-top-left-radius: 5px;
3147 border-top-right-radius: 5px;
3148 overflow: hidden;
3149 -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
3150 box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
3151 margin-bottom: -29px;
3152 display: -webkit-box;
3153 display: -ms-flexbox;
3154 display: flex;
3155 -webkit-box-orient: vertical;
3156 -webkit-box-direction: normal;
3157 -ms-flex-direction: column;
3158 flex-direction: column;
3159 }
3160
3161 .merchant-module-page-preview-browser-inner {
3162 -webkit-box-flex: 1;
3163 -ms-flex-positive: 1;
3164 flex-grow: 1;
3165 position: relative;
3166 display: block;
3167 }
3168
3169 .merchant-module-page-preview-box {
3170 overflow: hidden;
3171 position: sticky;
3172 top: 45px;
3173 }
3174
3175 .merchant-module-page-settings,
3176 .merchant-module-page-preview-box {
3177 display: -webkit-box;
3178 display: -ms-flexbox;
3179 display: flex;
3180 grid-gap: 30px;
3181 -webkit-box-orient: vertical;
3182 -webkit-box-direction: normal;
3183 -ms-flex-direction: column;
3184 flex-direction: column;
3185 padding: 30px;
3186 background-color: #fff;
3187 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
3188 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
3189 border-radius: 4px;
3190 }
3191
3192 .merchant-module-page-setting-box {
3193 display: -webkit-box;
3194 display: -ms-flexbox;
3195 display: flex;
3196 }
3197 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 {
3198 -webkit-box-orient: vertical;
3199 -webkit-box-direction: normal;
3200 -ms-flex-direction: column;
3201 flex-direction: column;
3202 grid-gap: 20px;
3203 }
3204 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-title,
3205 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-fields {
3206 width: 100%;
3207 }
3208
3209 .merchant-module-page-preview-title,
3210 .merchant-module-page-setting-title {
3211 margin-top: 0;
3212 padding-right: 50px;
3213 font-size: 20px;
3214 font-weight: 500;
3215 color: #2F2F2F;
3216 }
3217
3218 .merchant-module-page-setting-title {
3219 width: 40%;
3220 }
3221
3222 .merchant-module-page-setting-subtitle {
3223 margin-top: 20px;
3224 font-size: 13px;
3225 font-weight: 400;
3226 color: #757575;
3227 }
3228
3229 .merchant-module-page-setting-fields {
3230 display: -webkit-box;
3231 display: -ms-flexbox;
3232 display: flex;
3233 -webkit-box-orient: vertical;
3234 -webkit-box-direction: normal;
3235 -ms-flex-direction: column;
3236 flex-direction: column;
3237 width: 60%;
3238 padding: 30px;
3239 border-radius: 4px;
3240 border: 2px solid #F0F0F1;
3241 background-color: #fff;
3242 }
3243 .merchant-module-page-setting-fields > .merchant-module-page-setting-field:last-of-type {
3244 margin-bottom: 0;
3245 }
3246 .merchant-module-page-setting-fields > .merchant-module-page-setting-field:not(.merchant-hide):not(:has(~ .merchant-module-page-setting-field:not(.merchant-hide))) {
3247 margin-bottom: 0;
3248 }
3249
3250 .merchant-module-page-setting-field {
3251 display: -webkit-box;
3252 display: -ms-flexbox;
3253 display: flex;
3254 grid-gap: 10px;
3255 -webkit-box-orient: vertical;
3256 -webkit-box-direction: normal;
3257 -ms-flex-direction: column;
3258 flex-direction: column;
3259 margin-bottom: 24px;
3260 }
3261 .merchant-module-page-setting-field.merchant-show {
3262 display: -webkit-box;
3263 display: -ms-flexbox;
3264 display: flex;
3265 }
3266 .merchant-module-page-setting-field.merchant-hide {
3267 display: none;
3268 }
3269 .merchant-module-page-setting-field[data-id=shortcode_text] {
3270 margin-top: 24px;
3271 }
3272
3273 .merchant-module-page-setting-field-title {
3274 font-size: 14px;
3275 font-weight: 500;
3276 color: #2F2F2F;
3277 }
3278 .merchant-module-page-setting-field-title__has-upsell {
3279 gap: 7px !important;
3280 }
3281 .merchant-module-page-setting-field-title__has-upsell,
3282 .merchant-module-page-setting-field-title__has-upsell a span {
3283 display: -webkit-box;
3284 display: -ms-flexbox;
3285 display: flex;
3286 -webkit-box-align: center;
3287 -ms-flex-align: center;
3288 align-items: center;
3289 }
3290
3291 .merchant-module-page-setting-field-desc {
3292 font-size: 13px;
3293 font-weight: 400;
3294 color: #777;
3295 }
3296 .merchant-module-page-setting-field-desc-has-hidden-desc {
3297 display: -webkit-box;
3298 display: -ms-flexbox;
3299 display: flex;
3300 gap: 5px;
3301 }
3302 .merchant-module-page-setting-field-desc a {
3303 color: #3858E9;
3304 }
3305 .merchant-module-page-setting-field-desc a:focus {
3306 -webkit-box-shadow: none;
3307 box-shadow: none;
3308 }
3309
3310 .merchant-module-page-setting-field-hidden-desc {
3311 display: none;
3312 }
3313 .merchant-module-page-setting-field-hidden-desc-trigger {
3314 color: #3858E9;
3315 font-weight: 500;
3316 display: -webkit-box;
3317 display: -ms-flexbox;
3318 display: flex;
3319 -webkit-box-align: center;
3320 -ms-flex-align: center;
3321 align-items: center;
3322 white-space: nowrap;
3323 -webkit-user-select: none;
3324 -moz-user-select: none;
3325 -ms-user-select: none;
3326 user-select: none;
3327 cursor: pointer;
3328 gap: 3px;
3329 }
3330 .merchant-module-page-setting-field-hidden-desc-trigger img {
3331 margin-top: 2px;
3332 }
3333 .merchant-module-page-setting-field-hidden-desc-trigger.expanded img {
3334 -webkit-transform: rotate(180deg);
3335 transform: rotate(180deg);
3336 }
3337
3338 .merchant-license-form-wrapper .merchant-license-form {
3339 display: -webkit-box;
3340 display: -ms-flexbox;
3341 display: flex;
3342 -ms-flex-wrap: wrap;
3343 flex-wrap: wrap;
3344 grid-gap: 10px;
3345 }
3346 .merchant-license-form-wrapper .merchant-license-form input {
3347 width: 400px;
3348 max-width: 100%;
3349 padding-left: 38px;
3350 min-height: 40px;
3351 }
3352 .merchant-license-form-wrapper .merchant-license-form input::-webkit-input-placeholder {
3353 opacity: 0.75;
3354 }
3355 .merchant-license-form-wrapper .merchant-license-form input::-moz-placeholder {
3356 opacity: 0.75;
3357 }
3358 .merchant-license-form-wrapper .merchant-license-form input:-ms-input-placeholder {
3359 opacity: 0.75;
3360 }
3361 .merchant-license-form-wrapper .merchant-license-form input::-ms-input-placeholder {
3362 opacity: 0.75;
3363 }
3364 .merchant-license-form-wrapper .merchant-license-form input::placeholder {
3365 opacity: 0.75;
3366 }
3367 .merchant-license-form-wrapper .merchant-license-form button,
3368 .merchant-license-form-wrapper .merchant-license-form button:disabled {
3369 position: relative;
3370 display: -webkit-box;
3371 display: -ms-flexbox;
3372 display: flex;
3373 grid-gap: 2px;
3374 -webkit-box-align: center;
3375 -ms-flex-align: center;
3376 align-items: center;
3377 line-height: 1em;
3378 min-height: 36px;
3379 padding: 10px 40px !important;
3380 background-color: #3452da !important;
3381 color: #FFF !important;
3382 border-color: #3452da !important;
3383 }
3384 .merchant-license-form-wrapper .merchant-license-form button:hover, .merchant-license-form-wrapper .merchant-license-form button:focus, .merchant-license-form-wrapper .merchant-license-form button:active,
3385 .merchant-license-form-wrapper .merchant-license-form button:disabled:hover,
3386 .merchant-license-form-wrapper .merchant-license-form button:disabled:focus,
3387 .merchant-license-form-wrapper .merchant-license-form button:disabled:active {
3388 opacity: 0.8;
3389 }
3390 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate,
3391 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate {
3392 background-color: #d82c0d !important;
3393 border-color: #d82c0d !important;
3394 }
3395 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:hover, .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:focus, .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:active,
3396 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:hover,
3397 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:focus,
3398 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:active {
3399 color: #FFF;
3400 }
3401 .merchant-license-form-wrapper .merchant-license-form button .merchant-license-loader,
3402 .merchant-license-form-wrapper .merchant-license-form button:disabled .merchant-license-loader {
3403 display: -webkit-inline-box;
3404 display: -ms-inline-flexbox;
3405 display: inline-flex;
3406 -webkit-box-align: center;
3407 -ms-flex-align: center;
3408 align-items: center;
3409 -webkit-box-pack: center;
3410 -ms-flex-pack: center;
3411 justify-content: center;
3412 -ms-flex-negative: 0;
3413 flex-shrink: 0;
3414 margin-right: 6px;
3415 font-size: 14px;
3416 width: 14px;
3417 height: 14px;
3418 -webkit-animation: merchant-spin 1.5s infinite linear;
3419 animation: merchant-spin 1.5s infinite linear;
3420 }
3421 .merchant-license-form-wrapper .merchant-license-key-input {
3422 position: relative;
3423 display: -webkit-box;
3424 display: -ms-flexbox;
3425 display: flex;
3426 }
3427 @media (max-width: 768px) {
3428 .merchant-license-form-wrapper .merchant-license-key-input {
3429 max-width: 100%;
3430 }
3431 }
3432 .merchant-license-form-wrapper .merchant-license-key-input i {
3433 position: absolute;
3434 z-index: 1;
3435 top: 50%;
3436 left: 14px;
3437 -webkit-transform: translateY(-50%);
3438 transform: translateY(-50%);
3439 margin-top: 1px;
3440 font-size: 20px !important;
3441 color: #5C5F62;
3442 }
3443
3444 .merchant-license-response-wrapper,
3445 .merchant-dashboard-license-success {
3446 display: block;
3447 margin-top: 10px;
3448 color: #757575;
3449 }
3450 .merchant-license-response-wrapper:empty,
3451 .merchant-dashboard-license-success:empty {
3452 margin-top: 0;
3453 }
3454 .merchant-license-response-wrapper span,
3455 .merchant-dashboard-license-success span {
3456 color: #0b890b;
3457 margin-left: 5px;
3458 }
3459
3460 .merchant-license-instruction {
3461 width: 360px;
3462 max-width: 100%;
3463 margin-top: 15px;
3464 }
3465 .merchant-license-instruction .ui-helper-reset {
3466 margin: 0;
3467 }
3468 .merchant-license-instruction-header {
3469 cursor: pointer;
3470 display: -webkit-box;
3471 display: -ms-flexbox;
3472 display: flex;
3473 -webkit-box-align: center;
3474 -ms-flex-align: center;
3475 align-items: center;
3476 gap: 5px;
3477 color: #3858e9;
3478 background-color: #e8ecff;
3479 padding: 7px 5px;
3480 }
3481 .merchant-license-instruction-content {
3482 display: -webkit-box;
3483 display: -ms-flexbox;
3484 display: flex;
3485 -webkit-box-orient: vertical;
3486 -webkit-box-direction: normal;
3487 -ms-flex-direction: column;
3488 flex-direction: column;
3489 gap: 3px;
3490 border: 1px solid #E8ECFF;
3491 padding: 10px;
3492 border-top: none;
3493 }
3494 .merchant-license-instruction-content li {
3495 color: #6D7175;
3496 font-size: 13px;
3497 position: relative;
3498 padding-left: 15px;
3499 }
3500 .merchant-license-instruction-content svg {
3501 position: absolute;
3502 left: 0;
3503 top: 6px;
3504 }
3505 .merchant-license-instruction-caret {
3506 margin-inline: auto 6px;
3507 margin-top: -3px;
3508 }
3509 .merchant-license-instruction .ui-accordion-header-collapsed .merchant-license-instruction-caret svg {
3510 -webkit-transform: rotate(180deg);
3511 transform: rotate(180deg);
3512 }
3513
3514 .merchant-datetime-field input,
3515 .merchant-module-page-setting-field-text input,
3516 .merchant-module-page-setting-field-url input,
3517 .merchant-module-page-setting-field-number input,
3518 .merchant-module-page-setting-field-text_readonly input {
3519 padding: 12px;
3520 line-height: 1.3em;
3521 width: 100%;
3522 max-width: 100%;
3523 min-height: auto;
3524 border: 1px solid #D6D6D6;
3525 }
3526 .merchant-datetime-field input:focus,
3527 .merchant-module-page-setting-field-text input:focus,
3528 .merchant-module-page-setting-field-url input:focus,
3529 .merchant-module-page-setting-field-number input:focus,
3530 .merchant-module-page-setting-field-text_readonly input:focus {
3531 outline: none;
3532 -webkit-box-shadow: none;
3533 box-shadow: none;
3534 border-color: #3858E9;
3535 }
3536
3537 .merchant-module-page-setting-field-textarea_multiline textarea,
3538 .merchant-module-page-setting-field-textarea textarea,
3539 .merchant-module-page-setting-field-textarea_code textarea {
3540 padding: 12px;
3541 line-height: 1.4;
3542 width: 100%;
3543 max-width: 100%;
3544 min-height: 120px;
3545 border: 1px solid #D6D6D6;
3546 }
3547 .merchant-module-page-setting-field-textarea_multiline textarea:focus,
3548 .merchant-module-page-setting-field-textarea textarea:focus,
3549 .merchant-module-page-setting-field-textarea_code textarea:focus {
3550 outline: none;
3551 -webkit-box-shadow: none;
3552 box-shadow: none;
3553 border-color: #3858E9;
3554 }
3555
3556 .merchant-module-page-setting-field-radio div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
3557 .merchant-module-page-setting-field-radio_alt div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
3558 .merchant-module-page-setting-field-checkbox div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
3559 .merchant-module-page-setting-field-checkbox_multiple div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode) {
3560 display: -webkit-box;
3561 display: -ms-flexbox;
3562 display: flex;
3563 -ms-flex-wrap: wrap;
3564 flex-wrap: wrap;
3565 grid-gap: 30px;
3566 }
3567 .merchant-module-page-setting-field-radio label,
3568 .merchant-module-page-setting-field-radio_alt label,
3569 .merchant-module-page-setting-field-checkbox label,
3570 .merchant-module-page-setting-field-checkbox_multiple label {
3571 display: -webkit-box;
3572 display: -ms-flexbox;
3573 display: flex;
3574 grid-gap: 12px;
3575 -webkit-box-align: center;
3576 -ms-flex-align: center;
3577 align-items: center;
3578 -webkit-user-select: none;
3579 -moz-user-select: none;
3580 -ms-user-select: none;
3581 user-select: none;
3582 }
3583 .merchant-module-page-setting-field-radio span,
3584 .merchant-module-page-setting-field-radio_alt span,
3585 .merchant-module-page-setting-field-checkbox span,
3586 .merchant-module-page-setting-field-checkbox_multiple span {
3587 font-size: 14px;
3588 font-weight: 400;
3589 color: #1D2327;
3590 }
3591 .merchant-module-page-setting-field-radio input,
3592 .merchant-module-page-setting-field-radio_alt input,
3593 .merchant-module-page-setting-field-checkbox input,
3594 .merchant-module-page-setting-field-checkbox_multiple input {
3595 -ms-flex-negative: 0;
3596 flex-shrink: 0;
3597 margin: 0;
3598 width: 20px;
3599 height: 20px;
3600 border: 1px solid #D6D6D6;
3601 background-color: #fff;
3602 display: -webkit-inline-box;
3603 display: -ms-inline-flexbox;
3604 display: inline-flex;
3605 -webkit-box-align: center;
3606 -ms-flex-align: center;
3607 align-items: center;
3608 -webkit-box-pack: center;
3609 -ms-flex-pack: center;
3610 justify-content: center;
3611 -webkit-transition: none;
3612 transition: none;
3613 -webkit-box-sizing: border-box;
3614 box-sizing: border-box;
3615 -webkit-box-shadow: none;
3616 box-shadow: none;
3617 }
3618 .merchant-module-page-setting-field-radio input:checked,
3619 .merchant-module-page-setting-field-radio_alt input:checked,
3620 .merchant-module-page-setting-field-checkbox input:checked,
3621 .merchant-module-page-setting-field-checkbox_multiple input:checked {
3622 -webkit-transition: none;
3623 transition: none;
3624 }
3625 .merchant-module-page-setting-field-radio input:checked::before,
3626 .merchant-module-page-setting-field-radio_alt input:checked::before,
3627 .merchant-module-page-setting-field-checkbox input:checked::before,
3628 .merchant-module-page-setting-field-checkbox_multiple input:checked::before {
3629 content: "";
3630 margin: 0;
3631 padding: 0;
3632 -webkit-box-sizing: border-box;
3633 box-sizing: border-box;
3634 -webkit-transition: none;
3635 transition: none;
3636 }
3637 .merchant-module-page-setting-field-radio input[type=checkbox],
3638 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
3639 .merchant-module-page-setting-field-checkbox input[type=checkbox],
3640 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox] {
3641 border-radius: 6px;
3642 }
3643 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
3644 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
3645 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus,
3646 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:focus {
3647 border-color: #fff;
3648 -webkit-box-shadow: 0 0 0 2px #3858E9;
3649 box-shadow: 0 0 0 2px #3858E9;
3650 }
3651 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
3652 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
3653 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked,
3654 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked {
3655 border-color: #fff;
3656 background-color: #3858E9;
3657 }
3658 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
3659 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
3660 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before,
3661 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked::before {
3662 width: 100%;
3663 height: 100%;
3664 background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.7.89-6 8.07-3.77-2.8.75-1L4.44 7.2 9.69.14l1 .75Z' fill='%23fff'/%3E%3C/svg%3E");
3665 background-repeat: no-repeat;
3666 background-position: 3px 4px;
3667 }
3668 .merchant-module-page-setting-field-radio input[type=radio],
3669 .merchant-module-page-setting-field-radio_alt input[type=radio],
3670 .merchant-module-page-setting-field-checkbox input[type=radio],
3671 .merchant-module-page-setting-field-checkbox_multiple input[type=radio] {
3672 border-radius: 100%;
3673 }
3674 .merchant-module-page-setting-field-radio input[type=radio]:focus,
3675 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
3676 .merchant-module-page-setting-field-checkbox input[type=radio]:focus,
3677 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:focus {
3678 border-color: #fff;
3679 -webkit-box-shadow: none;
3680 box-shadow: none;
3681 }
3682 .merchant-module-page-setting-field-radio input[type=radio]:checked,
3683 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
3684 .merchant-module-page-setting-field-checkbox input[type=radio]:checked,
3685 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked {
3686 border-color: #3858E9;
3687 background-color: #fff;
3688 -webkit-box-shadow: 0 0 0 1px #3858E9;
3689 box-shadow: 0 0 0 1px #3858E9;
3690 }
3691 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
3692 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
3693 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before,
3694 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked::before {
3695 width: 12px;
3696 height: 12px;
3697 border-radius: 12px;
3698 background-color: #3858E9;
3699 }
3700
3701 .merchant-module-page-setting-field-checkbox_multiple div {
3702 grid-gap: 0;
3703 }
3704 .merchant-module-page-setting-field-checkbox_multiple .merchant-module-page-setting-field-inner {
3705 display: -webkit-box;
3706 display: -ms-flexbox;
3707 display: flex;
3708 -webkit-box-orient: vertical;
3709 -webkit-box-direction: normal;
3710 -ms-flex-direction: column;
3711 flex-direction: column;
3712 gap: 15px !important;
3713 }
3714
3715 @media (max-width: 1300px) {
3716 .merchant-module-page-setting-field-radio div {
3717 grid-gap: 20px;
3718 }
3719 }
3720 .merchant-module-page-setting-field-radio span {
3721 opacity: 0.8;
3722 }
3723 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
3724 opacity: 1;
3725 }
3726
3727 .merchant-module-page-setting-field-radio_alt div {
3728 display: -webkit-box;
3729 display: -ms-flexbox;
3730 display: flex;
3731 grid-gap: 10px;
3732 -webkit-box-orient: vertical;
3733 -webkit-box-direction: normal;
3734 -ms-flex-direction: column;
3735 flex-direction: column;
3736 }
3737 .merchant-module-page-setting-field-radio_alt label span {
3738 font-size: 14px;
3739 font-weight: 400;
3740 color: #1D2327;
3741 }
3742 .merchant-module-page-setting-field-radio_alt p {
3743 margin: 0;
3744 color: #757575;
3745 }
3746 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
3747 grid-gap: 30px;
3748 -webkit-box-orient: vertical;
3749 -webkit-box-direction: normal;
3750 -ms-flex-direction: column;
3751 flex-direction: column;
3752 }
3753 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode > div {
3754 grid-gap: 5px;
3755 }
3756 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode label {
3757 -webkit-box-align: start;
3758 -ms-flex-align: start;
3759 align-items: flex-start;
3760 }
3761 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode p {
3762 margin-left: 32px;
3763 }
3764
3765 .merchant-module-page-setting-field-content {
3766 max-width: 60vw;
3767 }
3768 .merchant-module-page-setting-field-content a {
3769 color: #3858E9;
3770 }
3771 .merchant-module-page-setting-field-content a:focus {
3772 -webkit-box-shadow: none;
3773 box-shadow: none;
3774 }
3775 .merchant-module-page-setting-field-content .merchant-module-page-setting-field-inner:empty {
3776 display: none;
3777 }
3778
3779 .merchant-info-block,
3780 .merchant-tag-pre-orders {
3781 display: -webkit-box;
3782 display: -ms-flexbox;
3783 display: flex;
3784 grid-gap: 16px;
3785 }
3786 .merchant-info-block a,
3787 .merchant-tag-pre-orders a {
3788 display: -webkit-box;
3789 display: -ms-flexbox;
3790 display: flex;
3791 -webkit-box-align: center;
3792 -ms-flex-align: center;
3793 align-items: center;
3794 -webkit-box-pack: center;
3795 -ms-flex-pack: center;
3796 justify-content: center;
3797 margin: 0;
3798 padding: 8px 26px;
3799 font-size: 14px;
3800 line-height: 20px;
3801 -webkit-user-select: none;
3802 -moz-user-select: none;
3803 -ms-user-select: none;
3804 user-select: none;
3805 min-width: 145px;
3806 font-weight: 500;
3807 text-decoration: none;
3808 border-radius: 4px;
3809 color: #202223;
3810 border: 1px solid #C9CCCF;
3811 background-color: #fff;
3812 }
3813 .merchant-info-block a:focus, .merchant-info-block a:active,
3814 .merchant-tag-pre-orders a:focus,
3815 .merchant-tag-pre-orders a:active {
3816 outline: none;
3817 -webkit-box-shadow: none;
3818 box-shadow: none;
3819 }
3820 .merchant-info-block p,
3821 .merchant-tag-pre-orders p {
3822 display: -webkit-box;
3823 display: -ms-flexbox;
3824 display: flex;
3825 -webkit-box-orient: vertical;
3826 -webkit-box-direction: normal;
3827 -ms-flex-direction: column;
3828 flex-direction: column;
3829 -webkit-box-align: start;
3830 -ms-flex-align: start;
3831 align-items: flex-start;
3832 grid-gap: 16px;
3833 font-size: 14px;
3834 line-height: 20px;
3835 margin: 0;
3836 padding: 0;
3837 }
3838 .merchant-info-block p i,
3839 .merchant-tag-pre-orders p i {
3840 -ms-flex-negative: 0;
3841 flex-shrink: 0;
3842 }
3843
3844 .merchant-info-block {
3845 padding: 15px;
3846 border-radius: 4px;
3847 border: 1px solid #BABFC3;
3848 }
3849
3850 .merchant-module-page-setting-field-select select,
3851 .merchant-module-page-setting-field-select_ajax select,
3852 .merchant-module-page-setting-field-select_size_chart select {
3853 padding: 12px 20px 12px 12px;
3854 line-height: 1.3em;
3855 width: 100%;
3856 max-width: 100%;
3857 min-height: auto;
3858 border-radius: 6px;
3859 color: #2F2F2F;
3860 border: 1px solid #D6D6D6;
3861 }
3862 .merchant-module-page-setting-field-select select:hover,
3863 .merchant-module-page-setting-field-select_ajax select:hover,
3864 .merchant-module-page-setting-field-select_size_chart select:hover {
3865 color: #2F2F2F;
3866 }
3867 .merchant-module-page-setting-field-select select:focus,
3868 .merchant-module-page-setting-field-select_ajax select:focus,
3869 .merchant-module-page-setting-field-select_size_chart select:focus {
3870 outline: none;
3871 -webkit-box-shadow: none;
3872 box-shadow: none;
3873 border-color: #3858E9;
3874 }
3875 .merchant-module-page-setting-field-select select option,
3876 .merchant-module-page-setting-field-select_ajax select option,
3877 .merchant-module-page-setting-field-select_size_chart select option {
3878 color: #2F2F2F;
3879 }
3880 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
3881 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
3882 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
3883 height: 44px !important;
3884 border: solid #d6d6d6 1px;
3885 }
3886 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
3887 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
3888 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
3889 line-height: 41px !important;
3890 }
3891 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple,
3892 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple,
3893 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple {
3894 display: -webkit-box;
3895 display: -ms-flexbox;
3896 display: flex;
3897 -webkit-box-align: center;
3898 -ms-flex-align: center;
3899 align-items: center;
3900 border: solid #d6d6d6 1px;
3901 }
3902 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__rendered,
3903 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__rendered,
3904 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__rendered {
3905 padding: 5px 10px;
3906 }
3907 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice,
3908 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice,
3909 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice {
3910 margin-top: 6px;
3911 margin-bottom: 0;
3912 }
3913 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3914 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3915 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field {
3916 position: relative;
3917 top: 3px;
3918 margin-top: 0;
3919 }
3920 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-search__field,
3921 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-search__field,
3922 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-search__field {
3923 min-height: 0;
3924 border: none;
3925 }
3926 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--single,
3927 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--multiple,
3928 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--single,
3929 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--multiple,
3930 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--single,
3931 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--multiple {
3932 border-color: #3858E9;
3933 }
3934 .merchant-module-page-setting-field-select .select2-selection__arrow,
3935 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
3936 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
3937 height: 43px !important;
3938 }
3939
3940 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
3941 display: -webkit-box;
3942 display: -ms-flexbox;
3943 display: flex;
3944 grid-gap: 15px;
3945 }
3946 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
3947 width: 100%;
3948 }
3949 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
3950 width: 100px;
3951 }
3952
3953 .merchant-module-page-setting-field-choices input {
3954 display: none;
3955 }
3956 .merchant-module-page-setting-field-choices input:checked + figure {
3957 border-color: #3858E9;
3958 }
3959 .merchant-module-page-setting-field-choices input:disabled + figure {
3960 opacity: 0.5;
3961 cursor: not-allowed;
3962 }
3963 .merchant-module-page-setting-field-choices label {
3964 display: -webkit-box;
3965 display: -ms-flexbox;
3966 display: flex;
3967 position: relative;
3968 }
3969 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
3970 opacity: 1;
3971 visibility: visible;
3972 -webkit-transform: translate3d(-50%, 0, 0);
3973 transform: translate3d(-50%, 0, 0);
3974 }
3975 .merchant-module-page-setting-field-choices figure {
3976 display: -webkit-box;
3977 display: -ms-flexbox;
3978 display: flex;
3979 margin: 0;
3980 padding: 2px;
3981 border-radius: 4px;
3982 border: 2px solid transparent;
3983 }
3984 .merchant-module-page-setting-field-choices .merchant-tooltip {
3985 position: absolute;
3986 z-index: 10;
3987 left: 50%;
3988 bottom: calc(100% + 12px);
3989 padding: 3px 12px;
3990 font-size: 11px;
3991 white-space: nowrap;
3992 opacity: 0;
3993 visibility: hidden;
3994 -webkit-transform: translate3d(-50%, 6px, 0);
3995 transform: translate3d(-50%, 6px, 0);
3996 -webkit-transition: all 0.2s;
3997 transition: all 0.2s;
3998 border-radius: 3px;
3999 color: #f7f7f7;
4000 background-color: #212121;
4001 }
4002 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
4003 content: "";
4004 position: absolute;
4005 left: 50%;
4006 bottom: -12px;
4007 border: 6px solid transparent;
4008 border-top-color: #212121;
4009 -webkit-transform: translate3d(-50%, 0, 0);
4010 transform: translate3d(-50%, 0, 0);
4011 }
4012 .merchant-module-page-setting-field-choices .merchant-choices {
4013 display: -webkit-box;
4014 display: -ms-flexbox;
4015 display: flex;
4016 -ms-flex-wrap: wrap;
4017 flex-wrap: wrap;
4018 grid-gap: 10px;
4019 }
4020 .merchant-module-page-setting-field-choices .merchant-choices label {
4021 cursor: pointer;
4022 }
4023 .merchant-module-page-setting-field-choices .merchant-choices svg {
4024 width: 20px;
4025 height: 20px;
4026 }
4027
4028 .merchant-module-page-setting-field-buttons input {
4029 display: none;
4030 }
4031 .merchant-module-page-setting-field-buttons input:checked + span {
4032 color: #fff;
4033 background-color: #3858E9;
4034 }
4035 .merchant-module-page-setting-field-buttons label {
4036 display: -webkit-box;
4037 display: -ms-flexbox;
4038 display: flex;
4039 }
4040 .merchant-module-page-setting-field-buttons span {
4041 display: -webkit-box;
4042 display: -ms-flexbox;
4043 display: flex;
4044 -webkit-box-align: center;
4045 -ms-flex-align: center;
4046 align-items: center;
4047 -webkit-box-pack: center;
4048 -ms-flex-pack: center;
4049 justify-content: center;
4050 margin: 0;
4051 padding: 10px 15px;
4052 border-radius: 2px;
4053 -webkit-user-select: none;
4054 -moz-user-select: none;
4055 -ms-user-select: none;
4056 user-select: none;
4057 min-width: 120px;
4058 font-weight: 500;
4059 }
4060 .merchant-module-page-setting-field-buttons .merchant-buttons {
4061 display: -webkit-inline-box;
4062 display: -ms-inline-flexbox;
4063 display: inline-flex;
4064 padding: 3px;
4065 border: 1px solid #D6D6D6;
4066 border-radius: 4px;
4067 }
4068 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
4069 text-decoration: underline;
4070 }
4071 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
4072 text-decoration: line-through;
4073 }
4074 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
4075 text-decoration: overline;
4076 }
4077
4078 .merchant-module-page-setting-field-buttons_content input,
4079 .merchant-module-page-setting-field-buttons_alt input {
4080 display: none;
4081 }
4082 .merchant-module-page-setting-field-buttons_content label,
4083 .merchant-module-page-setting-field-buttons_alt label {
4084 display: -webkit-box;
4085 display: -ms-flexbox;
4086 display: flex;
4087 cursor: pointer;
4088 }
4089 .merchant-module-page-setting-field-buttons_content label:hover,
4090 .merchant-module-page-setting-field-buttons_alt label:hover {
4091 position: relative;
4092 z-index: 10;
4093 }
4094 .merchant-module-page-setting-field-buttons_content label > span,
4095 .merchant-module-page-setting-field-buttons_alt label > span {
4096 display: -webkit-box;
4097 display: -ms-flexbox;
4098 display: flex;
4099 -webkit-box-align: center;
4100 -ms-flex-align: center;
4101 align-items: center;
4102 -webkit-box-pack: center;
4103 -ms-flex-pack: center;
4104 justify-content: center;
4105 margin: 0;
4106 padding: 10px 15px;
4107 -webkit-user-select: none;
4108 -moz-user-select: none;
4109 -ms-user-select: none;
4110 user-select: none;
4111 min-width: 120px;
4112 font-weight: 500;
4113 border-radius: 4px;
4114 border: 1px solid #D6D6D6;
4115 background-color: #fff;
4116 }
4117 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content,
4118 .merchant-module-page-setting-field-buttons_content .merchant-buttons,
4119 .merchant-module-page-setting-field-buttons_alt .merchant-buttons-content,
4120 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
4121 display: -webkit-box;
4122 display: -ms-flexbox;
4123 display: flex;
4124 -ms-flex-wrap: wrap;
4125 flex-wrap: wrap;
4126 grid-gap: 5px;
4127 padding: 3px;
4128 }
4129
4130 .merchant-module-page-setting-field-buttons_alt input:checked + span {
4131 color: #fff;
4132 background-color: #3858E9;
4133 }
4134
4135 .merchant-module-page-setting-field-buttons_content input:checked + span {
4136 color: inherit;
4137 border: 1px solid #3858E9;
4138 -webkit-box-shadow: 0 0 0 1px #3858e9 inset;
4139 box-shadow: 0 0 0 1px #3858e9 inset;
4140 }
4141 .merchant-module-page-setting-field-buttons_content label {
4142 -webkit-box-flex: 1;
4143 -ms-flex: 1;
4144 flex: 1;
4145 }
4146 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content {
4147 gap: 10px;
4148 }
4149 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content {
4150 display: -webkit-box;
4151 display: -ms-flexbox;
4152 display: flex;
4153 -webkit-box-align: center;
4154 -ms-flex-align: center;
4155 align-items: center;
4156 -webkit-box-pack: start;
4157 -ms-flex-pack: start;
4158 justify-content: flex-start;
4159 gap: 10px;
4160 -webkit-box-flex: 1;
4161 -ms-flex: 1;
4162 flex: 1;
4163 }
4164 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content > span {
4165 display: -webkit-box;
4166 display: -ms-flexbox;
4167 display: flex;
4168 -ms-flex-item-align: stretch;
4169 align-self: stretch;
4170 -webkit-box-orient: vertical;
4171 -webkit-box-direction: normal;
4172 -ms-flex-direction: column;
4173 flex-direction: column;
4174 gap: 5px;
4175 }
4176
4177 .merchant-animated-buttons .merchant-buttons {
4178 display: grid;
4179 grid-template-columns: repeat(5, 1fr);
4180 }
4181 .merchant-animated-buttons span {
4182 width: 100%;
4183 }
4184
4185 @media (max-width: 1470px) {
4186 .merchant-animated-buttons .merchant-buttons {
4187 grid-template-columns: repeat(3, 1fr);
4188 }
4189 }
4190 @media (max-width: 1050px) {
4191 .merchant-animated-buttons .merchant-buttons {
4192 grid-template-columns: repeat(2, 1fr);
4193 }
4194 }
4195 /* Sortable Field */
4196 .merchant-sortable {
4197 max-width: 300px;
4198 }
4199 .merchant-sortable ul.ui-sortable li {
4200 position: relative;
4201 overflow: hidden;
4202 padding: 0;
4203 color: #1E1E1E;
4204 border: 1px solid #ddd;
4205 border-radius: 2px;
4206 text-transform: capitalize;
4207 line-height: 36px;
4208 cursor: -webkit-grab;
4209 cursor: grab;
4210 }
4211 .merchant-sortable ul.ui-sortable li .dashicons {
4212 width: 36px;
4213 height: 36px;
4214 -ms-flex-preferred-size: 36px;
4215 flex-basis: 36px;
4216 display: -webkit-box;
4217 display: -ms-flexbox;
4218 display: flex;
4219 -webkit-box-pack: center;
4220 -ms-flex-pack: center;
4221 justify-content: center;
4222 -webkit-box-align: center;
4223 -ms-flex-align: center;
4224 align-items: center;
4225 text-align: center;
4226 -webkit-box-sizing: border-box;
4227 box-sizing: border-box;
4228 }
4229 .merchant-sortable ul.ui-sortable li .dashicons:before {
4230 font-size: 16px;
4231 line-height: 1em;
4232 }
4233 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
4234 float: left;
4235 padding: 0;
4236 margin: 0 10px 0 0;
4237 border: none;
4238 border-right: 1px solid #ddd;
4239 }
4240 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
4241 float: right;
4242 color: #3858E9;
4243 padding: 0;
4244 margin: 0 0 0 10px;
4245 border: none;
4246 border-left: 1px solid #ddd;
4247 }
4248 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
4249 cursor: pointer;
4250 }
4251 .merchant-sortable ul.ui-sortable li.invisible {
4252 color: #6E7780;
4253 border: 1px solid #CAD2F6;
4254 background-color: #EBEEFB;
4255 }
4256 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
4257 content: "\f530";
4258 }
4259
4260 /* Sortable Repeater Field */
4261 .merchant-group-field {
4262 padding: 30px 20px;
4263 border: 2px solid #F0F0F1;
4264 border-radius: 4px;
4265 margin-bottom: 20px;
4266 }
4267 .merchant-group-field .title-area {
4268 position: relative;
4269 }
4270 .merchant-group-field .title-area .merchant-module-page-setting-field-title {
4271 margin-bottom: 10px;
4272 }
4273 .merchant-group-field .title-area .field-status:not(.hidden) {
4274 border-radius: 15px;
4275 padding: 3px 8px;
4276 font-size: 12px;
4277 margin-left: 20px;
4278 }
4279 .merchant-group-field .title-area .field-status:not(.hidden).active {
4280 color: #04543F;
4281 background-color: #DEF7EC;
4282 }
4283 .merchant-group-field .title-area .field-status:not(.hidden).inactive {
4284 color: #723B14;
4285 background-color: #FDF6B2;
4286 }
4287 .merchant-group-field .title-area.accordion-style {
4288 padding-right: 40px;
4289 }
4290 .merchant-group-field .title-area.accordion-style .accordion-icon {
4291 position: absolute;
4292 top: 0;
4293 right: -7px;
4294 width: 40px;
4295 height: 40px;
4296 line-height: 40px;
4297 cursor: pointer;
4298 font-size: 17px;
4299 -webkit-transition: 300ms;
4300 transition: 300ms;
4301 }
4302 .merchant-group-field .title-area.accordion-style.ui-accordion-header-active .accordion-icon {
4303 -webkit-transform: rotate(180deg);
4304 transform: rotate(180deg);
4305 }
4306 .merchant-group-field .merchant-group-fields-container {
4307 padding-top: 20px;
4308 }
4309 .merchant-group-field .merchant-module-page-setting-field:last-child {
4310 margin-bottom: 0 !important;
4311 }
4312
4313 /* Sortable Repeater — Shared Base */
4314 .merchant-sortable-repeater-icons-control, .merchant-sortable-repeater-control {
4315 max-width: 100%;
4316 }
4317 .merchant-sortable-repeater-icons-control .sortable, .merchant-sortable-repeater-control .sortable {
4318 list-style-type: none;
4319 margin: 0;
4320 padding: 0;
4321 }
4322 .merchant-sortable-repeater-icons-control .sortable input[type=text], .merchant-sortable-repeater-control .sortable input[type=text] {
4323 width: 100%;
4324 margin: 0;
4325 border: 1px solid #D6D6D6;
4326 padding: 12px 8px;
4327 line-height: 1.3em;
4328 }
4329 .merchant-sortable-repeater-icons-control .sortable input[type=text]:focus, .merchant-sortable-repeater-control .sortable input[type=text]:focus {
4330 border-color: #3858E9;
4331 outline: none;
4332 -webkit-box-shadow: none;
4333 box-shadow: none;
4334 }
4335 .merchant-sortable-repeater-icons-control .sortable div.repeater, .merchant-sortable-repeater-control .sortable div.repeater {
4336 cursor: -webkit-grab;
4337 cursor: grab;
4338 margin-bottom: 7px;
4339 }
4340 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete,
4341 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete,
4342 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete {
4343 display: -webkit-box;
4344 display: -ms-flexbox;
4345 display: flex;
4346 -webkit-box-align: center;
4347 -ms-flex-align: center;
4348 align-items: center;
4349 -webkit-box-pack: center;
4350 -ms-flex-pack: center;
4351 justify-content: center;
4352 margin: 0;
4353 width: 44px;
4354 height: auto;
4355 font-size: 1.3em;
4356 line-height: 34px;
4357 color: #d4d4d4;
4358 background: #fff;
4359 padding: 0;
4360 vertical-align: top;
4361 margin-left: -1px;
4362 border: 1px solid #D6D6D6;
4363 text-decoration: none;
4364 }
4365 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete .dashicons-no-alt, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt,
4366 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete .dashicons-no-alt,
4367 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete .dashicons-no-alt {
4368 width: 100%;
4369 text-decoration: none;
4370 margin: 0;
4371 font-weight: 600;
4372 color: #50575e;
4373 font-size: 1.1em;
4374 line-height: 34px;
4375 height: auto;
4376 }
4377 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete:focus, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus,
4378 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:hover,
4379 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:hover,
4380 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:focus,
4381 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:focus {
4382 outline: none;
4383 -webkit-box-shadow: none;
4384 box-shadow: none;
4385 }
4386 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete:hover .dashicons-no-alt, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover .dashicons-no-alt, .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete:focus .dashicons-no-alt, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus .dashicons-no-alt,
4387 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:hover .dashicons-no-alt,
4388 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:hover .dashicons-no-alt,
4389 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:focus .dashicons-no-alt,
4390 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:focus .dashicons-no-alt {
4391 color: #a7a7a7;
4392 }
4393 .merchant-sortable-repeater-icons-control .repeater, .merchant-sortable-repeater-control .repeater {
4394 display: -webkit-box;
4395 display: -ms-flexbox;
4396 display: flex;
4397 }
4398 .merchant-sortable-repeater-icons-control .repeater .dashicons-menu, .merchant-sortable-repeater-control .repeater .dashicons-menu {
4399 display: -webkit-box;
4400 display: -ms-flexbox;
4401 display: flex;
4402 -webkit-box-align: center;
4403 -ms-flex-align: center;
4404 align-items: center;
4405 -webkit-box-pack: center;
4406 -ms-flex-pack: center;
4407 justify-content: center;
4408 margin: 0;
4409 width: 44px;
4410 height: auto;
4411 font-size: 1.3em;
4412 line-height: 34px;
4413 background: #fff;
4414 padding: 0;
4415 vertical-align: top;
4416 margin-left: -1px;
4417 border: 1px solid #D6D6D6;
4418 }
4419 .merchant-sortable-repeater-icons-control .repeater .dashicons-menu:hover, .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
4420 color: #a7a7a7;
4421 }
4422 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-add, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add,
4423 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add,
4424 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add {
4425 color: #3858E9;
4426 border-color: #3858E9;
4427 background-color: transparent;
4428 margin-top: 10px;
4429 padding: 4px 19px;
4430 }
4431 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-add:focus, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus,
4432 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add:hover,
4433 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add:hover,
4434 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add:focus,
4435 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add:focus {
4436 outline: none;
4437 -webkit-box-shadow: none;
4438 box-shadow: none;
4439 background-color: #ffffff;
4440 }
4441 .disable-sorting.merchant-sortable-repeater-icons-control .dashicons-menu, .disable-sorting.merchant-sortable-repeater-control .dashicons-menu {
4442 display: none;
4443 }
4444
4445 /* Sortable Repeater Field */
4446 .merchant-sortable-repeater-control .sortable input[type=text] {
4447 border-radius: 4px 0 0 4px;
4448 }
4449
4450 /* Sortable Repeater Icons Field */
4451 .merchant-sortable-repeater-icons-control .sortable input[type=text] {
4452 border-radius: 0;
4453 }
4454 .merchant-sortable-repeater-icons-control .repeater {
4455 position: relative;
4456 }
4457 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle {
4458 display: -webkit-box;
4459 display: -ms-flexbox;
4460 display: flex;
4461 -webkit-box-align: center;
4462 -ms-flex-align: center;
4463 align-items: center;
4464 -webkit-box-pack: center;
4465 -ms-flex-pack: center;
4466 justify-content: center;
4467 width: 44px;
4468 min-width: 44px;
4469 height: auto;
4470 padding: 0;
4471 margin: 0;
4472 border: 1px dashed #c4c4c4;
4473 border-radius: 0;
4474 background: #f9f9f9;
4475 cursor: pointer;
4476 -webkit-transition: border-color 0.2s ease, background-color 0.2s ease, border-style 0.2s ease;
4477 transition: border-color 0.2s ease, background-color 0.2s ease, border-style 0.2s ease;
4478 }
4479 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle:hover {
4480 border-color: #3858E9;
4481 border-style: solid;
4482 background-color: #f0f3ff;
4483 }
4484 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle.has-icon {
4485 border-color: #3858E9;
4486 border-style: solid;
4487 background-color: #EBEEFB;
4488 margin-right: 5px;
4489 }
4490 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle.has-icon svg {
4491 stroke: #3858E9;
4492 }
4493 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle .dashicons {
4494 font-size: 18px;
4495 width: 18px;
4496 height: 18px;
4497 color: #b0b0b0;
4498 -webkit-transition: color 0.2s ease;
4499 transition: color 0.2s ease;
4500 }
4501 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle:hover .dashicons {
4502 color: #3858E9;
4503 }
4504 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle svg {
4505 width: 18px;
4506 height: 18px;
4507 }
4508 .merchant-sortable-repeater-icons-control .merchant-icon-picker-dropdown {
4509 position: absolute;
4510 top: 100%;
4511 left: 0;
4512 z-index: 100;
4513 display: grid;
4514 grid-template-columns: repeat(auto-fill, 36px);
4515 gap: 4px;
4516 padding: 10px;
4517 background: #fff;
4518 border: 1px solid #D6D6D6;
4519 border-radius: 6px;
4520 -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
4521 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
4522 min-width: 220px;
4523 max-width: 260px;
4524 margin-top: 4px;
4525 }
4526 .merchant-sortable-repeater-icons-control .merchant-icon-option {
4527 display: -webkit-box;
4528 display: -ms-flexbox;
4529 display: flex;
4530 -webkit-box-align: center;
4531 -ms-flex-align: center;
4532 align-items: center;
4533 -webkit-box-pack: center;
4534 -ms-flex-pack: center;
4535 justify-content: center;
4536 width: 36px;
4537 height: 36px;
4538 padding: 0;
4539 border: 1px solid transparent;
4540 border-radius: 4px;
4541 background: transparent;
4542 cursor: pointer;
4543 -webkit-transition: border-color 0.15s ease, background-color 0.15s ease;
4544 transition: border-color 0.15s ease, background-color 0.15s ease;
4545 }
4546 .merchant-sortable-repeater-icons-control .merchant-icon-option:hover {
4547 border-color: #c5cff6;
4548 background-color: #f0f3ff;
4549 }
4550 .merchant-sortable-repeater-icons-control .merchant-icon-option.selected {
4551 border-color: #3858E9;
4552 background-color: #EBEEFB;
4553 -webkit-box-shadow: inset 0 0 0 1px #3858E9;
4554 box-shadow: inset 0 0 0 1px #3858E9;
4555 }
4556 .merchant-sortable-repeater-icons-control .merchant-icon-option svg {
4557 width: 18px;
4558 height: 18px;
4559 }
4560 .merchant-sortable-repeater-icons-control .merchant-icon-option .dashicons {
4561 font-size: 16px;
4562 width: 16px;
4563 height: 16px;
4564 color: #777;
4565 }
4566
4567 /* Flexible Content Field */
4568 .merchant-flexible-content-control {
4569 max-width: 100%;
4570 }
4571 .merchant-flexible-content-control .layout {
4572 position: relative;
4573 }
4574 .merchant-flexible-content-control .sortable {
4575 position: relative;
4576 list-style-type: none;
4577 margin: 0;
4578 padding: 0;
4579 }
4580 .merchant-flexible-content-control .sortable input[type=text] {
4581 width: 100%;
4582 margin: 0;
4583 border-radius: 0;
4584 border: 1px solid #D6D6D6;
4585 padding: 8px;
4586 line-height: 1.3em;
4587 }
4588 .merchant-flexible-content-control .sortable input[type=text]:focus {
4589 border-color: #3858E9;
4590 outline: none;
4591 -webkit-box-shadow: none;
4592 box-shadow: none;
4593 }
4594 .merchant-flexible-content-control .customize-control-flexible-content-move {
4595 display: none;
4596 cursor: -webkit-grab;
4597 cursor: grab;
4598 position: absolute;
4599 top: 19px;
4600 left: -22px;
4601 z-index: 999;
4602 }
4603 .merchant-flexible-content-control .customize-control-flexible-content-delete,
4604 .merchant-flexible-content-control .customize-control-flexible-content-duplicate {
4605 text-decoration: none;
4606 }
4607 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt,
4608 .merchant-flexible-content-control .customize-control-flexible-content-duplicate .dashicons-no-alt {
4609 width: 100%;
4610 text-decoration: none;
4611 margin: 0;
4612 font-weight: 600;
4613 color: #50575e;
4614 font-size: 1.1em;
4615 line-height: 34px;
4616 height: auto;
4617 }
4618 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus,
4619 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover,
4620 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus {
4621 outline: none;
4622 -webkit-box-shadow: none;
4623 box-shadow: none;
4624 }
4625 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover .dashicons-no-alt, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus .dashicons-no-alt,
4626 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover .dashicons-no-alt,
4627 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus .dashicons-no-alt {
4628 color: #a7a7a7;
4629 }
4630 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover svg, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus svg,
4631 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover svg,
4632 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus svg {
4633 fill: #a7a7a7;
4634 }
4635 .merchant-flexible-content-control .customize-control-flexible-content-accordion {
4636 display: -webkit-box;
4637 display: -ms-flexbox;
4638 display: flex;
4639 -webkit-box-align: center;
4640 -ms-flex-align: center;
4641 align-items: center;
4642 -webkit-box-pack: end;
4643 -ms-flex-pack: end;
4644 justify-content: flex-end;
4645 margin: 0;
4646 width: 40px;
4647 height: auto;
4648 font-size: 1.5em;
4649 line-height: 34px;
4650 color: #50575e;
4651 background: #fff;
4652 padding: 0;
4653 vertical-align: top;
4654 cursor: pointer;
4655 }
4656 .merchant-flexible-content-control .customize-control-flexible-content-accordion svg {
4657 -webkit-transition: 300ms;
4658 transition: 300ms;
4659 -webkit-transform: rotate(180deg);
4660 transform: rotate(180deg);
4661 }
4662 .merchant-flexible-content-control .layout-header.ui-accordion-header-collapsed .customize-control-flexible-content-accordion svg {
4663 -webkit-transform: rotate(0deg);
4664 transform: rotate(0deg);
4665 }
4666 .merchant-flexible-content-control .merchant-flexible-content.empty {
4667 border: 2px dashed #dcdcde;
4668 min-height: 100px;
4669 margin-bottom: 10px;
4670 }
4671 .merchant-flexible-content-control.default-style .layout {
4672 background: white;
4673 border: 1px solid #c3c4c7;
4674 border-left: 3px solid #3858e9;
4675 }
4676 .merchant-flexible-content-control.default-style .layout .layout-header {
4677 padding: 15px 20px;
4678 }
4679 .merchant-flexible-content-control.default-style .layout .layout-body {
4680 padding: 15px 20px;
4681 }
4682 .merchant-flexible-content-control.default-style .layout .layout-body .layout-field:last-of-type .merchant-group-field {
4683 margin-bottom: 5px;
4684 }
4685 .merchant-flexible-content-control.table-style .layout .layout-header {
4686 padding-bottom: 8px;
4687 margin-bottom: 15px;
4688 }
4689 .merchant-flexible-content-control.table-style .layout .layout-body {
4690 -webkit-box-orient: horizontal;
4691 -webkit-box-direction: normal;
4692 -ms-flex-direction: row;
4693 flex-direction: row;
4694 }
4695 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
4696 display: none;
4697 }
4698 .merchant-flexible-content-control.has-accordion .layout-header {
4699 cursor: pointer;
4700 -webkit-user-select: none;
4701 -moz-user-select: none;
4702 -ms-user-select: none;
4703 user-select: none;
4704 }
4705 .merchant-flexible-content-control .layouts {
4706 display: none;
4707 }
4708 .merchant-flexible-content-control .layout {
4709 margin-bottom: 20px;
4710 }
4711 .merchant-flexible-content-control .layout .layout__inner {
4712 width: calc(100% + 60px);
4713 margin-left: -30px;
4714 padding-inline: 30px;
4715 }
4716 .merchant-flexible-content-control .layout .layout__inner:hover .customize-control-flexible-content-move {
4717 display: block;
4718 }
4719 .merchant-flexible-content-control .layout .layout-header {
4720 display: -webkit-box;
4721 display: -ms-flexbox;
4722 display: flex;
4723 -webkit-box-align: center;
4724 -ms-flex-align: center;
4725 align-items: center;
4726 border-bottom: 1px solid #f3f3f3;
4727 }
4728 .merchant-flexible-content-control .layout .layout-count {
4729 border-radius: 50%;
4730 width: 24px;
4731 height: 23px;
4732 border: 1px solid #949494;
4733 text-align: center;
4734 display: -webkit-box;
4735 display: -ms-flexbox;
4736 display: flex;
4737 -webkit-box-pack: center;
4738 -ms-flex-pack: center;
4739 justify-content: center;
4740 -webkit-box-orient: vertical;
4741 -webkit-box-direction: normal;
4742 -ms-flex-direction: column;
4743 flex-direction: column;
4744 font-size: 12px;
4745 font-weight: bold;
4746 margin-right: 10px;
4747 }
4748 .merchant-flexible-content-control .layout .layout-title {
4749 font-size: 14px;
4750 font-weight: bold;
4751 -webkit-box-flex: 1;
4752 -ms-flex: 1;
4753 flex: 1;
4754 }
4755 .merchant-flexible-content-control .layout .layout-status {
4756 display: -webkit-inline-box;
4757 display: -ms-inline-flexbox;
4758 display: inline-flex;
4759 -webkit-box-align: center;
4760 -ms-flex-align: center;
4761 align-items: center;
4762 cursor: pointer;
4763 padding: 2px 10px;
4764 border-radius: 10px;
4765 font-size: 11px;
4766 font-weight: 600;
4767 line-height: 1.4;
4768 margin-left: 10px;
4769 margin-right: 10px;
4770 text-transform: capitalize;
4771 white-space: nowrap;
4772 background-color: #f0f0f1;
4773 color: #757575;
4774 }
4775 .merchant-flexible-content-control .layout .layout-status--active {
4776 background-color: #e6f4ea;
4777 color: #1e7e34;
4778 }
4779 .merchant-flexible-content-control .layout .layout-toggle {
4780 display: -webkit-box;
4781 display: -ms-flexbox;
4782 display: flex;
4783 margin: 0;
4784 padding: 0;
4785 -webkit-box-pack: end;
4786 -ms-flex-pack: end;
4787 justify-content: flex-end;
4788 }
4789 .merchant-flexible-content-control .layout .layout-toggle span:hover {
4790 opacity: 0.6;
4791 }
4792 .merchant-flexible-content-control .layout .layout-body {
4793 display: -webkit-box;
4794 display: -ms-flexbox;
4795 display: flex;
4796 -webkit-box-orient: vertical;
4797 -webkit-box-direction: normal;
4798 -ms-flex-direction: column;
4799 flex-direction: column;
4800 }
4801 .merchant-flexible-content-control .layout .layout-actions {
4802 position: absolute;
4803 top: 15px;
4804 right: 22px;
4805 }
4806 .merchant-flexible-content-control .layout .layout-actions-has_accordion {
4807 right: 43px;
4808 }
4809 .merchant-flexible-content-control .layout .layout-actions-no_accordion {
4810 top: 0;
4811 right: 0;
4812 }
4813 .merchant-flexible-content-control .layout .layout-actions a:hover {
4814 opacity: 0.6;
4815 }
4816 .merchant-flexible-content-control .layout .layout-actions__toggle:focus {
4817 outline: none;
4818 -webkit-box-shadow: none;
4819 box-shadow: none;
4820 }
4821 .merchant-flexible-content-control .layout .layout-actions__inner {
4822 position: absolute;
4823 right: -5px;
4824 top: 25px;
4825 z-index: 99;
4826 font-size: 13px;
4827 padding: 7px 15px;
4828 min-width: 200px;
4829 background: #fff;
4830 border: 1px solid #DDDDDD;
4831 border-radius: 5px;
4832 }
4833 .merchant-flexible-content-control .layout .layout-actions__inner a {
4834 width: 100%;
4835 display: -webkit-box;
4836 display: -ms-flexbox;
4837 display: flex;
4838 padding: 10px 0;
4839 -webkit-box-align: center;
4840 -ms-flex-align: center;
4841 align-items: center;
4842 gap: 8px;
4843 }
4844 .merchant-flexible-content-control .layout .layout-actions__inner svg {
4845 width: 24px;
4846 height: 20px;
4847 }
4848 .merchant-flexible-content-control .layout .layout-actions__inner span {
4849 color: #1E1E1E;
4850 }
4851 .merchant-flexible-content-control .layout .layout-field.flex-grow {
4852 -webkit-box-flex: 1;
4853 -ms-flex-positive: 1;
4854 flex-grow: 1;
4855 }
4856 .merchant-flexible-content-control .layout .dashicons-menu {
4857 display: -webkit-box;
4858 display: -ms-flexbox;
4859 display: flex;
4860 -webkit-box-align: center;
4861 -ms-flex-align: center;
4862 align-items: center;
4863 -webkit-box-pack: center;
4864 -ms-flex-pack: center;
4865 justify-content: center;
4866 margin: 0;
4867 width: 40px;
4868 height: auto;
4869 font-size: 1.3em;
4870 line-height: 34px;
4871 background: #fff;
4872 padding: 0;
4873 vertical-align: top;
4874 margin-left: -1px;
4875 }
4876 .merchant-flexible-content-control .layout .dashicons-menu:hover {
4877 color: #a7a7a7;
4878 }
4879 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
4880 position: relative;
4881 display: inline-block;
4882 }
4883 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
4884 opacity: 0;
4885 visibility: hidden;
4886 position: absolute;
4887 background-color: #ffffff;
4888 border: 1px solid #c3c4c7;
4889 border-left: 3px solid #3858e9;
4890 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
4891 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
4892 width: 180px;
4893 bottom: 100%;
4894 display: -webkit-box;
4895 display: -ms-flexbox;
4896 display: flex;
4897 -webkit-box-orient: vertical;
4898 -webkit-box-direction: normal;
4899 -ms-flex-direction: column;
4900 flex-direction: column;
4901 left: 50%;
4902 -webkit-transform: translate(-50%, 10px);
4903 transform: translate(-50%, 10px);
4904 padding: 3px 3px 3px 5px;
4905 }
4906 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
4907 z-index: 10;
4908 opacity: 1;
4909 visibility: visible;
4910 -webkit-transform: translate(-50%, -15px);
4911 transform: translate(-50%, -15px);
4912 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
4913 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
4914 }
4915 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
4916 right: calc(50% - 12px);
4917 bottom: -14px;
4918 border-width: 14px 14px 0 15px;
4919 border-color: #c3c4c7 transparent transparent transparent;
4920 }
4921 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
4922 content: "";
4923 right: calc(50% - 10px);
4924 bottom: -12px;
4925 border-width: 12px 12px 0 13px;
4926 border-color: #ffffff transparent transparent transparent;
4927 }
4928 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
4929 position: absolute;
4930 z-index: -1;
4931 content: "";
4932 border-style: solid;
4933 -webkit-transition-duration: 0.3s;
4934 transition-duration: 0.3s;
4935 transition-property: -webkit-transform;
4936 -webkit-transition-property: -webkit-transform;
4937 transition-property: transform;
4938 transition-property: transform, -webkit-transform;
4939 }
4940 .merchant-flexible-content-control .customize-control-flexible-content-add {
4941 display: block;
4942 -ms-flex-negative: 0;
4943 flex-shrink: 0;
4944 padding: 10px;
4945 text-decoration: none;
4946 }
4947 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
4948 background: #f0f0f1;
4949 }
4950 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
4951 color: #3858E9;
4952 border-color: #3858E9;
4953 background-color: transparent;
4954 margin-bottom: 0;
4955 padding: 4px 19px;
4956 }
4957 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
4958 outline: none;
4959 -webkit-box-shadow: none;
4960 box-shadow: none;
4961 background-color: #ffffff;
4962 }
4963 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
4964 display: none;
4965 }
4966 .merchant-flexible-content-control .merchant-datetime-field input {
4967 padding: 12px !important;
4968 line-height: 1.3em;
4969 width: 100%;
4970 max-width: 100%;
4971 min-height: auto;
4972 border: 1px solid #d6d6d6;
4973 border-radius: 4px !important;
4974 }
4975 .merchant-flexible-content-control .merchant-datetime-field input:focus {
4976 outline: none;
4977 -webkit-box-shadow: none;
4978 box-shadow: none;
4979 border-color: #3858E9;
4980 }
4981
4982 .flexible-content-template {
4983 display: none;
4984 }
4985
4986 .merchant-module-page-setting-field-range .merchant-range {
4987 position: relative;
4988 width: 100%;
4989 width: 300px;
4990 display: -webkit-box;
4991 display: -ms-flexbox;
4992 display: flex;
4993 -webkit-box-align: center;
4994 -ms-flex-align: center;
4995 align-items: center;
4996 -webkit-box-pack: justify;
4997 -ms-flex-pack: justify;
4998 justify-content: space-between;
4999 }
5000 .merchant-module-page-setting-field-range input[type=range] {
5001 -webkit-appearance: none;
5002 -moz-appearance: none;
5003 appearance: none;
5004 width: calc(100% - 105px);
5005 height: 2px;
5006 border-radius: 5px;
5007 outline: none;
5008 padding: 0;
5009 margin: 0;
5010 background-color: #ddd;
5011 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
5012 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
5013 }
5014 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
5015 -webkit-appearance: none;
5016 appearance: none;
5017 width: 15px;
5018 height: 15px;
5019 border-radius: 50%;
5020 background: #3858E9;
5021 cursor: pointer;
5022 -webkit-transition: background 0.15s ease-in-out;
5023 transition: background 0.15s ease-in-out;
5024 }
5025 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
5026 background: #3858E9;
5027 }
5028 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
5029 background: #3858E9;
5030 }
5031 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
5032 width: 15px;
5033 height: 15px;
5034 border: 0;
5035 border-radius: 50%;
5036 background: #3858E9;
5037 cursor: pointer;
5038 -moz-transition: background 0.15s ease-in-out;
5039 transition: background 0.15s ease-in-out;
5040 }
5041 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
5042 background: #3858E9;
5043 }
5044 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
5045 background: #3858E9;
5046 }
5047 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
5048 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
5049 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
5050 }
5051 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
5052 border: 0;
5053 background: #d7dcdf;
5054 }
5055 .merchant-module-page-setting-field-range input[type=number] {
5056 padding: 12px 25px 12px 10px;
5057 line-height: 1.3em;
5058 width: 100%;
5059 max-width: 85px;
5060 min-height: auto;
5061 border: 1px solid #D6D6D6;
5062 }
5063 .merchant-module-page-setting-field-range input[type=number]:focus {
5064 outline: none;
5065 -webkit-box-shadow: none;
5066 box-shadow: none;
5067 border-color: #3858E9;
5068 }
5069 .merchant-module-page-setting-field-range .merchant-range-unit {
5070 color: #3858E9;
5071 position: absolute;
5072 z-index: 1;
5073 right: 10px;
5074 font-size: 11px;
5075 line-height: 1em;
5076 }
5077
5078 .merchant-module-page-setting-field-color input {
5079 padding: 0 10px;
5080 line-height: 1em;
5081 width: 100%;
5082 max-width: 254px;
5083 min-height: auto;
5084 border: 1px solid #D6D6D6;
5085 }
5086 .merchant-module-page-setting-field-color input:focus {
5087 outline: none;
5088 -webkit-box-shadow: none;
5089 box-shadow: none;
5090 border-color: #3858E9;
5091 }
5092 .merchant-module-page-setting-field-color .merchant-color {
5093 display: -webkit-box;
5094 display: -ms-flexbox;
5095 display: flex;
5096 grid-gap: 10px;
5097 }
5098 .merchant-module-page-setting-field-color .merchant-color-picker {
5099 cursor: pointer;
5100 width: 36px;
5101 height: 36px;
5102 border: 1px solid rgba(0, 0, 0, 0.1);
5103 border-radius: 4px;
5104 }
5105
5106 .merchant-module-page-settings-dimensions {
5107 display: -webkit-box;
5108 display: -ms-flexbox;
5109 display: flex;
5110 grid-gap: 10px;
5111 }
5112 .merchant-module-page-settings-dimensions > div {
5113 display: -webkit-box;
5114 display: -ms-flexbox;
5115 display: flex;
5116 -webkit-box-orient: vertical;
5117 -webkit-box-direction: normal;
5118 -ms-flex-direction: column;
5119 flex-direction: column;
5120 }
5121 .merchant-module-page-settings-dimensions label {
5122 color: gray;
5123 font-size: 12px;
5124 margin-top: 7px;
5125 }
5126 .merchant-module-page-settings-dimensions input {
5127 max-width: 70px;
5128 width: 100%;
5129 font-size: 12px;
5130 border: 1px solid #D6D6D6;
5131 }
5132
5133 .merchant-module-page-setting-field-wc_coupons .merchant-wc-coupon-selector select {
5134 width: 300px;
5135 min-height: auto;
5136 border: 1px solid #D6D6D6;
5137 padding: 12px;
5138 line-height: 1.3em;
5139 border-radius: 6px;
5140 color: #2F2F2F;
5141 border: 1px solid #D6D6D6;
5142 }
5143
5144 .merchant-module-page-settings-unit {
5145 margin-bottom: 10px;
5146 }
5147 .merchant-module-page-settings-unit select {
5148 font-size: 13px;
5149 border: 0;
5150 }
5151
5152 .merchant-module-page-settings-devices {
5153 display: -webkit-box;
5154 display: -ms-flexbox;
5155 display: flex;
5156 -webkit-column-gap: 10px;
5157 -moz-column-gap: 10px;
5158 column-gap: 10px;
5159 -webkit-box-pack: end;
5160 -ms-flex-pack: end;
5161 justify-content: flex-end;
5162 }
5163 .merchant-module-page-settings-devices button {
5164 border: 0;
5165 background: transparent;
5166 padding: 0;
5167 cursor: pointer;
5168 }
5169 .merchant-module-page-settings-devices button.active {
5170 color: #3858e9;
5171 }
5172 .merchant-module-page-settings-devices button:hover {
5173 color: #3858e9;
5174 }
5175 .merchant-module-page-settings-devices button i {
5176 font-size: 14px;
5177 line-height: 20px;
5178 width: auto;
5179 }
5180
5181 .merchant-module-page-settings-device-container:not(.active) {
5182 display: none;
5183 }
5184
5185 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
5186 max-width: 320px;
5187 }
5188 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
5189 margin-bottom: -30px;
5190 margin-top: 0;
5191 }
5192
5193 .review-photos-popup {
5194 position: fixed;
5195 top: 0;
5196 left: 0;
5197 bottom: 0;
5198 right: 0;
5199 display: -webkit-box;
5200 display: -ms-flexbox;
5201 display: flex;
5202 -webkit-box-pack: center;
5203 -ms-flex-pack: center;
5204 justify-content: center;
5205 -webkit-box-align: center;
5206 -ms-flex-align: center;
5207 align-items: center;
5208 -ms-flex-wrap: wrap;
5209 flex-wrap: wrap;
5210 z-index: 9992;
5211 padding: 50px;
5212 gap: 40px;
5213 overflow: scroll;
5214 visibility: hidden;
5215 opacity: 0;
5216 -webkit-transition: 300ms;
5217 transition: 300ms;
5218 }
5219 .review-photos-popup.active {
5220 visibility: visible;
5221 opacity: 1;
5222 }
5223 .review-photos-popup .overlay {
5224 position: fixed;
5225 top: 0;
5226 left: 0;
5227 bottom: 0;
5228 right: 0;
5229 background-color: rgba(0, 0, 0, 0.8);
5230 }
5231 .review-photos-popup .review-photo {
5232 z-index: 9993;
5233 -webkit-box-flex: 0;
5234 -ms-flex: 0 0 30%;
5235 flex: 0 0 30%;
5236 }
5237 .review-photos-popup .review-photo img {
5238 max-width: 100%;
5239 max-height: 300px;
5240 height: auto;
5241 display: block;
5242 margin: 0 auto;
5243 border: 2px solid #fff;
5244 border-radius: 5px;
5245 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5246 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5247 }
5248 .review-photos-popup.images-count-1 .review-photo {
5249 -webkit-box-flex: 0;
5250 -ms-flex: 0 0 100%;
5251 flex: 0 0 100%;
5252 }
5253 .review-photos-popup.images-count-1 .review-photo img {
5254 max-height: 400px;
5255 }
5256 .review-photos-popup.images-count-2 .review-photo {
5257 -webkit-box-flex: 0;
5258 -ms-flex: 0 0 46%;
5259 flex: 0 0 46%;
5260 }
5261 .review-photos-popup.images-count-2 .review-photo img {
5262 max-height: 400px;
5263 }
5264 @media (max-width: 768px) {
5265 .review-photos-popup {
5266 padding-top: 100px;
5267 }
5268 .review-photos-popup .review-photo {
5269 -webkit-box-flex: 0;
5270 -ms-flex: 0 0 100%;
5271 flex: 0 0 100%;
5272 }
5273 .review-photos-popup .review-photo img {
5274 max-height: 400px;
5275 }
5276 }
5277
5278 .merchant-btn-control {
5279 color: #3858e9;
5280 border: 1px solid #3858e9;
5281 background-color: rgba(0, 0, 0, 0);
5282 padding: 4px 19px;
5283 border-radius: 4px;
5284 font-size: 13px;
5285 line-height: 2.1;
5286 cursor: pointer;
5287 }
5288
5289 .merchant-reviews-selector * {
5290 -webkit-box-sizing: border-box;
5291 box-sizing: border-box;
5292 }
5293 .merchant-reviews-selector .star-rating {
5294 overflow: hidden;
5295 position: relative;
5296 height: 1.618em;
5297 line-height: 1.618;
5298 width: 5.3em;
5299 font-family: star;
5300 font-weight: 400;
5301 margin-left: auto;
5302 margin-right: auto;
5303 letter-spacing: 0;
5304 color: #ffa441;
5305 }
5306 .merchant-reviews-selector .star-rating::before {
5307 content: "SSSSS";
5308 opacity: 0.25;
5309 float: left;
5310 top: 0;
5311 left: 0;
5312 position: absolute;
5313 }
5314 .merchant-reviews-selector .star-rating span {
5315 overflow: hidden;
5316 float: left;
5317 top: 0;
5318 left: 0;
5319 position: absolute;
5320 padding-top: 1.5em;
5321 }
5322 .merchant-reviews-selector .star-rating span::before {
5323 content: "SSSSS";
5324 top: 0;
5325 position: absolute;
5326 left: 0;
5327 color: #ffa441;
5328 }
5329 .merchant-reviews-selector .overlay {
5330 position: fixed;
5331 top: 0;
5332 left: 0;
5333 width: 100%;
5334 height: 100%;
5335 background-color: rgba(0, 0, 0, 0.5);
5336 z-index: 9990;
5337 visibility: hidden;
5338 opacity: 0;
5339 -webkit-transition: 300ms;
5340 transition: 300ms;
5341 }
5342 .merchant-reviews-selector .overlay.active {
5343 visibility: visible;
5344 opacity: 1;
5345 }
5346 .merchant-reviews-selector .tooltip {
5347 position: absolute;
5348 min-width: 180px;
5349 right: calc(100% + 10px);
5350 background-color: #333;
5351 color: #fff;
5352 padding: 5px 10px;
5353 border-radius: 5px;
5354 font-size: 12px;
5355 visibility: hidden;
5356 opacity: 0;
5357 -webkit-transition: 300ms;
5358 transition: 300ms;
5359 top: 50%;
5360 -webkit-transform: translateY(-50%);
5361 transform: translateY(-50%);
5362 }
5363 .merchant-reviews-selector .tooltip:before {
5364 content: "";
5365 position: absolute;
5366 top: 50%;
5367 right: -7px;
5368 -webkit-transform: translateY(-50%);
5369 transform: translateY(-50%);
5370 width: 0;
5371 height: 0;
5372 border-top: 5px solid transparent;
5373 border-bottom: 5px solid transparent;
5374 border-left: 7px solid #333;
5375 }
5376 .merchant-reviews-selector .product-reviews {
5377 -ms-flex-preferred-size: 100%;
5378 flex-basis: 100%;
5379 }
5380 .merchant-reviews-selector .product-reviews .product-review {
5381 display: -webkit-box;
5382 display: -ms-flexbox;
5383 display: flex;
5384 gap: 15px;
5385 -webkit-box-align: center;
5386 -ms-flex-align: center;
5387 align-items: center;
5388 padding: 8px 15px;
5389 border-bottom: 2px solid #ffffff;
5390 -webkit-box-pack: start;
5391 -ms-flex-pack: start;
5392 justify-content: flex-start;
5393 -ms-flex-wrap: nowrap;
5394 flex-wrap: nowrap;
5395 -webkit-box-orient: horizontal;
5396 -webkit-box-direction: normal;
5397 -ms-flex-direction: row;
5398 flex-direction: row;
5399 border-top: none;
5400 background-color: #f4f4f4;
5401 min-height: 60px;
5402 }
5403 .merchant-reviews-selector .product-reviews .product-review:last-of-type {
5404 border-bottom: none;
5405 }
5406 .merchant-reviews-selector .product-reviews .product-review .product-review-add-checkbox {
5407 -webkit-box-flex: 0;
5408 -ms-flex: 0 0 20px;
5409 flex: 0 0 20px;
5410 }
5411 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image {
5412 display: none;
5413 }
5414 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image a {
5415 display: block;
5416 text-decoration: none;
5417 }
5418 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image a img {
5419 border-radius: 5px;
5420 width: 50px;
5421 height: auto;
5422 }
5423 .merchant-reviews-selector .product-reviews .product-review .product-review-product-name {
5424 display: none;
5425 }
5426 .merchant-reviews-selector .product-reviews .product-review .product-review-product-name a {
5427 text-decoration: none;
5428 }
5429 .merchant-reviews-selector .product-reviews .product-review .product-review-rating {
5430 -webkit-box-flex: 0;
5431 -ms-flex: 0 0 70px;
5432 flex: 0 0 70px;
5433 width: 70px;
5434 }
5435 .merchant-reviews-selector .product-reviews .product-review .product-review-status {
5436 -webkit-box-flex: 0;
5437 -ms-flex: 0 0 90px;
5438 flex: 0 0 90px;
5439 width: 90px;
5440 }
5441 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status {
5442 text-transform: capitalize;
5443 border-radius: 4px;
5444 background-color: #eee;
5445 padding: 3px 8px;
5446 display: inline-block;
5447 }
5448 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-approved {
5449 background-color: #c3e6cb; /* Softer light green */
5450 color: #155724; /* Darker green */
5451 }
5452 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-pending {
5453 background-color: #fff3cd; /* Light yellow */
5454 color: #856404; /* Dark yellow/brown */
5455 }
5456 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-unapproved {
5457 background-color: #f5c6cb; /* Light coral/pink */
5458 color: #721c24; /* Darker red */
5459 }
5460 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-spam {
5461 background-color: #f8d7da; /* Light red */
5462 color: #721c24; /* Dark red */
5463 }
5464 .merchant-reviews-selector .product-reviews .product-review .product-review-author {
5465 -webkit-box-flex: 0;
5466 -ms-flex: 0 0 90px;
5467 flex: 0 0 90px;
5468 width: 90px;
5469 }
5470 .merchant-reviews-selector .product-reviews .product-review .product-review-content {
5471 -webkit-box-flex: 0;
5472 -ms-flex: 0 0 40%;
5473 flex: 0 0 40%;
5474 }
5475 .merchant-reviews-selector .product-reviews .product-review .product-review-photos {
5476 -webkit-box-flex: 0;
5477 -ms-flex: 0 0 40px;
5478 flex: 0 0 40px;
5479 width: 40px;
5480 position: relative;
5481 }
5482 .merchant-reviews-selector .product-reviews .product-review .product-review-photos:hover .tooltip {
5483 visibility: visible;
5484 opacity: 1;
5485 }
5486 .merchant-reviews-selector .product-reviews .product-review .product-review-photos img {
5487 border-radius: 5px;
5488 width: 40px;
5489 height: auto;
5490 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5491 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5492 border: 2px solid #fff;
5493 display: block;
5494 }
5495 .merchant-reviews-selector .product-reviews .product-review .product-review-photos img.loading {
5496 -webkit-animation: loading 1500ms infinite;
5497 animation: loading 1500ms infinite;
5498 }
5499 .merchant-reviews-selector .product-reviews .product-review .product-review-photos .review-photo {
5500 position: relative;
5501 cursor: pointer;
5502 }
5503 .merchant-reviews-selector .product-reviews .product-review .product-review-photos .review-photo .count {
5504 -webkit-user-select: none;
5505 -moz-user-select: none;
5506 -ms-user-select: none;
5507 user-select: none;
5508 position: absolute;
5509 top: -8px;
5510 right: -8px;
5511 background-color: #000;
5512 color: #fff;
5513 padding: 0px 5px;
5514 border-radius: 50%;
5515 width: 18px;
5516 height: 18px;
5517 text-align: center;
5518 font-size: 11px;
5519 }
5520 .merchant-reviews-selector .product-reviews .product-review .product-review-date {
5521 -webkit-box-flex: 0;
5522 -ms-flex: 0 0 70px;
5523 flex: 0 0 70px;
5524 width: 70px;
5525 }
5526 .merchant-reviews-selector .product-reviews .product-review .product-review-edit a {
5527 text-decoration: none;
5528 color: #3858E9;
5529 }
5530 .merchant-reviews-selector .product-reviews .product-review .product-review-move,
5531 .merchant-reviews-selector .product-reviews .product-review .product-review-delete {
5532 display: none;
5533 }
5534 .merchant-reviews-selector .product-reviews .product-reviews-load-more {
5535 text-align: center;
5536 padding: 10px;
5537 }
5538 .merchant-reviews-selector .product-reviews .product-reviews-load-more button {
5539 display: inline-block;
5540 padding: 10px 20px;
5541 border-radius: 5px;
5542 text-decoration: none;
5543 outline: none;
5544 background: none;
5545 border: none;
5546 cursor: pointer;
5547 }
5548 .merchant-reviews-selector .product-reviews .product-reviews-load-more.loading {
5549 -webkit-animation: loading 1500ms infinite;
5550 animation: loading 1500ms infinite;
5551 }
5552 .merchant-reviews-selector .selected-reviews {
5553 padding: 0 0 15px;
5554 }
5555 .merchant-reviews-selector .selected-reviews .product-reviews {
5556 border: 1px solid #c9c7c7;
5557 border-radius: 4px;
5558 position: relative;
5559 }
5560 .merchant-reviews-selector .selected-reviews .product-reviews:empty {
5561 display: none;
5562 }
5563 .merchant-reviews-selector .selected-reviews .product-reviews .placeholder {
5564 background-color: #f0f0f0;
5565 border: 1px dashed #ccc;
5566 visibility: visible;
5567 width: 100%;
5568 }
5569 .merchant-reviews-selector .selected-reviews .product-reviews .product-review {
5570 background-color: #fff;
5571 border-bottom: 1px dotted #c9c7c7;
5572 position: relative;
5573 padding: 12px 20px;
5574 }
5575 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:first-of-type {
5576 border-top-left-radius: 4px;
5577 border-top-right-radius: 4px;
5578 }
5579 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:last-of-type {
5580 border-bottom: none;
5581 border-bottom-left-radius: 4px;
5582 border-bottom-right-radius: 4px;
5583 }
5584 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move,
5585 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete {
5586 display: block;
5587 position: absolute;
5588 background: none;
5589 border: none;
5590 cursor: pointer;
5591 color: #3858E9;
5592 width: 25px;
5593 height: 25px;
5594 padding: 0;
5595 margin: 0;
5596 top: 50%;
5597 -webkit-transform: translateY(-50%);
5598 transform: translateY(-50%);
5599 border-radius: 50%;
5600 padding-top: 2px;
5601 visibility: hidden;
5602 opacity: 0;
5603 -webkit-transition: 300ms;
5604 transition: 300ms;
5605 background-color: #d5d5d5;
5606 }
5607 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move svg,
5608 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete svg {
5609 width: 18px;
5610 height: 18px;
5611 }
5612 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:hover .product-review-move,
5613 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:hover .product-review-delete {
5614 visibility: visible;
5615 opacity: 1;
5616 }
5617 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete {
5618 right: -14px;
5619 }
5620 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete:hover {
5621 background-color: #ff7575;
5622 }
5623 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move {
5624 cursor: move;
5625 left: -14px;
5626 }
5627 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move:hover {
5628 background-color: #6f89ff;
5629 }
5630 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-content {
5631 -webkit-box-flex: 0;
5632 -ms-flex: none;
5633 flex: none;
5634 width: 140px;
5635 }
5636 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .spacer {
5637 margin-right: auto;
5638 }
5639 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-edit,
5640 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-photos,
5641 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-date,
5642 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-status,
5643 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-add-checkbox {
5644 display: none;
5645 }
5646 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-name,
5647 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-image {
5648 display: block;
5649 }
5650 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-image a img {
5651 width: 30px;
5652 }
5653 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-name {
5654 width: 120px;
5655 }
5656 @-webkit-keyframes loading {
5657 0% {
5658 opacity: 1;
5659 }
5660 50% {
5661 opacity: 0.2;
5662 }
5663 100% {
5664 opacity: 1;
5665 }
5666 }
5667 @keyframes loading {
5668 0% {
5669 opacity: 1;
5670 }
5671 50% {
5672 opacity: 0.2;
5673 }
5674 100% {
5675 opacity: 1;
5676 }
5677 }
5678 .merchant-reviews-selector .selector-popup {
5679 position: fixed;
5680 background-color: #fff;
5681 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5682 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5683 border-radius: 5px;
5684 top: 50%;
5685 left: 50%;
5686 -webkit-transform: translate(-50%, -50%);
5687 transform: translate(-50%, -50%);
5688 width: 1000px;
5689 max-width: 100%;
5690 z-index: 9991;
5691 visibility: hidden;
5692 opacity: 0;
5693 -webkit-transition: 300ms;
5694 transition: 300ms;
5695 }
5696 .merchant-reviews-selector .selector-popup.active {
5697 visibility: visible;
5698 opacity: 1;
5699 }
5700 .merchant-reviews-selector .selector-popup .popup-content .popup-header {
5701 position: relative;
5702 border-bottom: 1px solid #eee;
5703 padding: 14px 50px 14px 24px;
5704 background-color: #f3f3f3;
5705 border-top-left-radius: 5px;
5706 border-top-right-radius: 5px;
5707 }
5708 .merchant-reviews-selector .selector-popup .popup-content .popup-header label {
5709 display: -webkit-box;
5710 display: -ms-flexbox;
5711 display: flex;
5712 -webkit-box-align: center;
5713 -ms-flex-align: center;
5714 align-items: center;
5715 }
5716 .merchant-reviews-selector .selector-popup .popup-content .popup-header label span {
5717 font-size: 16px;
5718 font-weight: 500;
5719 min-width: 120px;
5720 }
5721 .merchant-reviews-selector .selector-popup .popup-content .popup-header label input {
5722 margin-left: 10px;
5723 padding: 5px 10px;
5724 width: 100%;
5725 border: 1px solid #d6d6d6;
5726 outline: none;
5727 }
5728 .merchant-reviews-selector .selector-popup .popup-content .popup-header .close {
5729 position: absolute;
5730 top: 50%;
5731 right: 10px;
5732 cursor: pointer;
5733 display: block;
5734 padding: 10px;
5735 font-size: 23px;
5736 -webkit-transform: translateY(-50%);
5737 transform: translateY(-50%);
5738 }
5739 @-webkit-keyframes loadingAnimation {
5740 from {
5741 background-position: 200% 0;
5742 }
5743 to {
5744 background-position: -200% 0;
5745 }
5746 }
5747 @keyframes loadingAnimation {
5748 from {
5749 background-position: 200% 0;
5750 }
5751 to {
5752 background-position: -200% 0;
5753 }
5754 }
5755 .merchant-reviews-selector .selector-popup .popup-content .popup-header.loading::after {
5756 content: "";
5757 position: absolute;
5758 bottom: -2px;
5759 left: 0;
5760 width: 100%;
5761 height: 3px;
5762 background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, #3858e9), to(transparent));
5763 background: linear-gradient(to right, transparent 0%, #3858e9 50%, transparent 100%);
5764 background-size: 200% 100%;
5765 -webkit-animation: loadingAnimation 1.5s infinite linear;
5766 animation: loadingAnimation 1.5s infinite linear;
5767 }
5768 .merchant-reviews-selector .selector-popup .popup-content .popup-header.popup-error::after {
5769 content: "";
5770 position: absolute;
5771 bottom: -2px;
5772 left: 0;
5773 width: 100%;
5774 height: 3px;
5775 background-color: #d93232;
5776 -webkit-animation: loading 1.5s infinite linear;
5777 animation: loading 1.5s infinite linear;
5778 }
5779 .merchant-reviews-selector .selector-popup .popup-content .popup-body {
5780 height: 700px;
5781 overflow-y: auto;
5782 }
5783 .merchant-reviews-selector .selector-popup .popup-content .popup-body .products-search-results {
5784 padding: 24px;
5785 }
5786 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item {
5787 border-top: 1px solid #eee;
5788 border-left: 1px solid #eee;
5789 border-right: 1px solid #eee;
5790 -webkit-transition: 300ms;
5791 transition: 300ms;
5792 }
5793 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header {
5794 cursor: pointer;
5795 display: -webkit-box;
5796 display: -ms-flexbox;
5797 display: flex;
5798 gap: 25px;
5799 -ms-flex-wrap: wrap;
5800 flex-wrap: wrap;
5801 position: relative;
5802 width: 100%;
5803 padding: 10px 80px 10px 10px;
5804 -webkit-box-align: center;
5805 -ms-flex-align: center;
5806 align-items: center;
5807 }
5808 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header .product-expander {
5809 content: "";
5810 padding: 15px;
5811 display: block;
5812 position: absolute;
5813 right: 10px;
5814 top: 50%;
5815 -webkit-transform: translateY(-50%);
5816 transform: translateY(-50%);
5817 -webkit-transition: 300ms;
5818 transition: 300ms;
5819 }
5820 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header .product-expander svg {
5821 width: 20px;
5822 height: 20px;
5823 }
5824 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header.ui-state-active .product-expander {
5825 -webkit-transform: translateY(-50%) rotate(180deg);
5826 transform: translateY(-50%) rotate(180deg);
5827 }
5828 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:first-of-type {
5829 border-top-left-radius: 5px;
5830 border-top-right-radius: 5px;
5831 }
5832 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:last-of-type {
5833 border-bottom-left-radius: 5px;
5834 border-bottom-right-radius: 5px;
5835 border-bottom: 1px solid #eee;
5836 }
5837 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-image a {
5838 display: block;
5839 text-decoration: none;
5840 line-height: 0;
5841 }
5842 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-image img {
5843 border-radius: 5px;
5844 width: 50px;
5845 max-width: 100%;
5846 height: auto;
5847 }
5848 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-title {
5849 font-size: 14px;
5850 font-weight: 500;
5851 }
5852 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-title a {
5853 text-decoration: none;
5854 }
5855 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .spacer {
5856 margin-left: auto;
5857 }
5858 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status {
5859 text-transform: capitalize;
5860 border-radius: 4px;
5861 background-color: #eee;
5862 padding: 3px 8px;
5863 }
5864 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-publish {
5865 background-color: #c3e6cb; /* Softer light green */
5866 color: #155724; /* Darker green */
5867 }
5868 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-draft {
5869 background-color: #d1ecf1; /* Light blue */
5870 color: #0c5460; /* Dark teal */
5871 }
5872 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-pending {
5873 background-color: #fff3cd; /* Light yellow */
5874 color: #856404; /* Dark yellow/brown */
5875 }
5876 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count {
5877 color: #fff;
5878 display: -webkit-box;
5879 display: -ms-flexbox;
5880 display: flex;
5881 -webkit-box-align: center;
5882 -ms-flex-align: center;
5883 align-items: center;
5884 background-color: #79b0f8;
5885 border-radius: 3px;
5886 padding: 3px 6px;
5887 gap: 5px;
5888 position: relative;
5889 opacity: 0.5;
5890 -webkit-transition: 300ms;
5891 transition: 300ms;
5892 }
5893 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:before {
5894 content: "";
5895 display: block;
5896 background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800px' height='800px' viewBox='0 0 305.002 305.002' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M152.502,0.001C68.412,0.001,0,68.412,0,152.501s68.412,152.5,152.502,152.5c84.089,0,152.5-68.411,152.5-152.5 S236.591,0.001,152.502,0.001z M152.502,280.001C82.197,280.001,25,222.806,25,152.501c0-70.304,57.197-127.5,127.502-127.5 c70.304,0,127.5,57.196,127.5,127.5C280.002,222.806,222.806,280.001,152.502,280.001z'%3E%3C/path%3E%3Cpath d='M218.473,93.97l-90.546,90.547l-41.398-41.398c-4.882-4.881-12.796-4.881-17.678,0c-4.881,4.882-4.881,12.796,0,17.678 l50.237,50.237c2.441,2.44,5.64,3.661,8.839,3.661c3.199,0,6.398-1.221,8.839-3.661l99.385-99.385 c4.881-4.882,4.881-12.796,0-17.678C231.269,89.089,223.354,89.089,218.473,93.97z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
5897 background-size: contain; /* Adjust as necessary */
5898 background-repeat: no-repeat; /* Adjust as necessary */
5899 width: 15px; /* Set width */
5900 height: 15px; /* Set height */
5901 }
5902 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:hover {
5903 opacity: 1;
5904 }
5905 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:hover .tooltip {
5906 visibility: visible;
5907 opacity: 1;
5908 }
5909 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-reviews-count {
5910 color: #8e8e8e;
5911 }
5912 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:hover {
5913 background-color: #f4f4f4;
5914 }
5915 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews) {
5916 cursor: auto;
5917 }
5918 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews) .product-expander {
5919 opacity: 0.2;
5920 }
5921 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews):hover {
5922 background-color: transparent;
5923 }
5924 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item.opened:hover {
5925 background-color: transparent;
5926 }
5927 .merchant-module-page-setting-field-warning {
5928 padding: 8px 10px;
5929 font-size: 14px;
5930 line-height: 1.6;
5931 color: #1D2327;
5932 border-radius: 4px;
5933 border: 1px solid #D72C0D;
5934 background-color: #FFF4F4;
5935 }
5936
5937 .merchant-module-page-setting-field-info {
5938 padding: 8px 10px;
5939 font-size: 14px;
5940 line-height: 1.6;
5941 color: #1D2327;
5942 border-radius: 4px;
5943 border: 1px solid #0d65d7;
5944 background-color: #e6effa;
5945 }
5946 .merchant-module-page-setting-field-info[data-id=shortcode_info] {
5947 margin-bottom: 0;
5948 }
5949
5950 .merchant-module-page-setting-field-divider {
5951 border-bottom: 1px solid #F0F0F1;
5952 }
5953 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
5954 font-size: 16px;
5955 }
5956
5957 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
5958 display: -webkit-box;
5959 display: -ms-flexbox;
5960 display: flex;
5961 grid-gap: 5px;
5962 -ms-flex-wrap: wrap;
5963 flex-wrap: wrap;
5964 margin-bottom: 15px;
5965 }
5966 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
5967 display: none;
5968 }
5969 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
5970 position: relative;
5971 display: -webkit-box;
5972 display: -ms-flexbox;
5973 display: flex;
5974 -webkit-box-align: center;
5975 -ms-flex-align: center;
5976 align-items: center;
5977 -webkit-box-pack: center;
5978 -ms-flex-pack: center;
5979 justify-content: center;
5980 border-radius: 4px;
5981 padding: 2px;
5982 border: 1px solid #eee;
5983 background-color: #fff;
5984 }
5985 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
5986 cursor: -webkit-grab;
5987 cursor: grab;
5988 width: 100%;
5989 height: 100%;
5990 max-height: 75px;
5991 -o-object-fit: cover;
5992 object-fit: cover;
5993 }
5994 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
5995 cursor: -webkit-grabbing;
5996 cursor: grabbing;
5997 }
5998 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
5999 cursor: pointer;
6000 position: absolute;
6001 z-index: 1;
6002 top: 5px;
6003 right: 5px;
6004 width: 16px;
6005 height: 16px;
6006 display: -webkit-box;
6007 display: -ms-flexbox;
6008 display: flex;
6009 -webkit-box-pack: center;
6010 -ms-flex-pack: center;
6011 justify-content: center;
6012 -webkit-box-align: center;
6013 -ms-flex-align: center;
6014 align-items: center;
6015 color: #fff;
6016 background-color: #c5280c;
6017 font-size: 14px;
6018 line-height: 1em;
6019 border-radius: 16px;
6020 opacity: 0;
6021 -webkit-transition: all 0.2s;
6022 transition: all 0.2s;
6023 }
6024 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
6025 opacity: 1;
6026 }
6027 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
6028 cursor: pointer;
6029 -webkit-user-select: none;
6030 -moz-user-select: none;
6031 -ms-user-select: none;
6032 user-select: none;
6033 display: -webkit-inline-box;
6034 display: -ms-inline-flexbox;
6035 display: inline-flex;
6036 padding: 0.4375rem 1rem;
6037 font-size: 0.875rem;
6038 font-weight: 600;
6039 line-height: 1.5;
6040 white-space: nowrap;
6041 text-transform: none;
6042 text-decoration: none;
6043 color: #212b36;
6044 background-color: #fff;
6045 border: 1px solid #c4cdd5;
6046 border-radius: 0.25rem;
6047 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
6048 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
6049 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
6050 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
6051 }
6052 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
6053 outline: none;
6054 -webkit-box-shadow: none;
6055 box-shadow: none;
6056 }
6057 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
6058 visibility: visible !important;
6059 border: 1px dashed #ddd;
6060 background-color: #f9f9f9;
6061 border-radius: 4px;
6062 }
6063
6064 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
6065 display: -webkit-box;
6066 display: -ms-flexbox;
6067 display: flex;
6068 grid-gap: 5px;
6069 -ms-flex-wrap: wrap;
6070 flex-wrap: wrap;
6071 margin-bottom: 15px;
6072 }
6073 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
6074 display: none;
6075 }
6076 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop {
6077 position: relative;
6078 background: #F6F6F6;
6079 border: 1px solid #EAEAEB;
6080 border-radius: 5px;
6081 height: 150px;
6082 }
6083 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop .merchant-upload-button {
6084 display: -webkit-box;
6085 display: -ms-flexbox;
6086 display: flex;
6087 -webkit-box-orient: vertical;
6088 -webkit-box-direction: normal;
6089 -ms-flex-direction: column;
6090 flex-direction: column;
6091 -webkit-box-align: center;
6092 -ms-flex-align: center;
6093 align-items: center;
6094 -webkit-box-pack: center;
6095 -ms-flex-pack: center;
6096 justify-content: center;
6097 width: 100%;
6098 height: 100%;
6099 margin-top: 10px;
6100 border: none;
6101 background: no-repeat;
6102 outline: none;
6103 -webkit-box-shadow: none;
6104 box-shadow: none;
6105 }
6106 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop img {
6107 position: absolute;
6108 left: 50%;
6109 top: 50%;
6110 -webkit-transform: translate(-50%, -50%);
6111 transform: translate(-50%, -50%);
6112 margin-top: -15px;
6113 }
6114 .merchant-module-page-setting-field-upload .merchant-upload-image {
6115 position: relative;
6116 display: -webkit-box;
6117 display: -ms-flexbox;
6118 display: flex;
6119 -webkit-box-align: center;
6120 -ms-flex-align: center;
6121 align-items: center;
6122 -webkit-box-pack: center;
6123 -ms-flex-pack: center;
6124 justify-content: center;
6125 border-radius: 4px;
6126 padding: 2px;
6127 border: 1px solid #eee;
6128 background-color: #fff;
6129 }
6130 .merchant-module-page-setting-field-upload .merchant-upload-image img {
6131 cursor: -webkit-grab;
6132 cursor: grab;
6133 width: 100%;
6134 height: 100%;
6135 max-height: 75px;
6136 -o-object-fit: cover;
6137 object-fit: cover;
6138 }
6139 .merchant-module-page-setting-field-upload .merchant-upload-image i {
6140 cursor: pointer;
6141 position: absolute;
6142 z-index: 1;
6143 top: 5px;
6144 right: 5px;
6145 width: 16px;
6146 height: 16px;
6147 display: -webkit-box;
6148 display: -ms-flexbox;
6149 display: flex;
6150 -webkit-box-pack: center;
6151 -ms-flex-pack: center;
6152 justify-content: center;
6153 -webkit-box-align: center;
6154 -ms-flex-align: center;
6155 align-items: center;
6156 color: #fff;
6157 background-color: #c5280c;
6158 font-size: 14px;
6159 line-height: 1em;
6160 border-radius: 16px;
6161 opacity: 0;
6162 -webkit-transition: all 0.2s;
6163 transition: all 0.2s;
6164 }
6165 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
6166 opacity: 1;
6167 }
6168 .merchant-module-page-setting-field-upload .merchant-upload-button {
6169 cursor: pointer;
6170 -webkit-user-select: none;
6171 -moz-user-select: none;
6172 -ms-user-select: none;
6173 user-select: none;
6174 display: -webkit-inline-box;
6175 display: -ms-inline-flexbox;
6176 display: inline-flex;
6177 padding: 0.4375rem 1rem;
6178 font-size: 0.875rem;
6179 font-weight: 600;
6180 line-height: 1.5;
6181 white-space: nowrap;
6182 text-transform: none;
6183 text-decoration: none;
6184 color: #212b36;
6185 background-color: #fff;
6186 border: 1px solid #c4cdd5;
6187 border-radius: 0.25rem;
6188 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
6189 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
6190 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
6191 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
6192 }
6193 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
6194 outline: none;
6195 -webkit-box-shadow: none;
6196 box-shadow: none;
6197 }
6198
6199 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
6200 display: -webkit-box;
6201 display: -ms-flexbox;
6202 display: flex;
6203 -webkit-box-pack: start;
6204 -ms-flex-pack: start;
6205 justify-content: flex-start;
6206 }
6207 .merchant-module-page-setting-field-switcher input {
6208 display: none;
6209 }
6210 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
6211 margin-left: 0;
6212 background: #3858E9;
6213 }
6214 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
6215 right: 1px;
6216 }
6217 .merchant-module-page-setting-field-switcher .toggle-switch {
6218 float: right;
6219 position: relative;
6220 width: 36px;
6221 margin-top: 2px;
6222 -webkit-user-select: none;
6223 -moz-user-select: none;
6224 -ms-user-select: none;
6225 user-select: none;
6226 }
6227 .merchant-module-page-setting-field-switcher .toggle-switch-label {
6228 position: relative;
6229 display: inline-block;
6230 overflow: hidden;
6231 cursor: pointer;
6232 border-radius: 20px;
6233 padding: 0;
6234 margin: 0;
6235 width: 36px;
6236 }
6237 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
6238 display: block;
6239 width: 200%;
6240 margin-left: -100%;
6241 background: #c8c8c8;
6242 height: 18px;
6243 }
6244 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
6245 display: block;
6246 width: 12px;
6247 height: 12px;
6248 margin: 3px;
6249 background-color: #fff;
6250 position: absolute;
6251 top: 0;
6252 bottom: 0;
6253 right: 18px;
6254 border-radius: 20px;
6255 -webkit-transition: all 0.1s ease-in 0s;
6256 transition: all 0.1s ease-in 0s;
6257 }
6258
6259 .merchant-module-alert {
6260 position: fixed;
6261 top: 0;
6262 left: 0;
6263 right: 0;
6264 bottom: 0;
6265 z-index: 99999;
6266 display: -webkit-box;
6267 display: -ms-flexbox;
6268 display: flex;
6269 -webkit-box-pack: center;
6270 -ms-flex-pack: center;
6271 justify-content: center;
6272 -webkit-box-align: center;
6273 -ms-flex-align: center;
6274 align-items: center;
6275 background-color: rgba(0, 0, 0, 0.6);
6276 opacity: 0;
6277 visibility: hidden;
6278 -webkit-user-select: none;
6279 -moz-user-select: none;
6280 -ms-user-select: none;
6281 user-select: none;
6282 pointer-events: none;
6283 -webkit-transition: all 0.2s;
6284 transition: all 0.2s;
6285 }
6286 .merchant-module-alert.merchant-show {
6287 -webkit-user-select: auto;
6288 -moz-user-select: auto;
6289 -ms-user-select: auto;
6290 user-select: auto;
6291 pointer-events: auto;
6292 opacity: 1;
6293 visibility: visible;
6294 }
6295
6296 .merchant-module-alert-wrapper {
6297 display: -webkit-box;
6298 display: -ms-flexbox;
6299 display: flex;
6300 -webkit-box-orient: vertical;
6301 -webkit-box-direction: normal;
6302 -ms-flex-direction: column;
6303 flex-direction: column;
6304 width: 640px;
6305 max-width: 90%;
6306 border-radius: 4px;
6307 background-color: #fff;
6308 }
6309
6310 .merchant-module-alert-header {
6311 display: -webkit-box;
6312 display: -ms-flexbox;
6313 display: flex;
6314 -webkit-box-align: center;
6315 -ms-flex-align: center;
6316 align-items: center;
6317 -webkit-box-pack: justify;
6318 -ms-flex-pack: justify;
6319 justify-content: space-between;
6320 padding: 20px 30px;
6321 }
6322 .merchant-module-alert-header strong {
6323 font-size: 18px;
6324 line-height: 1em;
6325 }
6326 .merchant-module-alert-header a {
6327 position: relative;
6328 right: -5px;
6329 display: -webkit-box;
6330 display: -ms-flexbox;
6331 display: flex;
6332 color: #212121;
6333 text-decoration: none;
6334 -webkit-transition: all 0.2s;
6335 transition: all 0.2s;
6336 }
6337 .merchant-module-alert-header a:hover {
6338 opacity: 0.6;
6339 }
6340 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
6341 outline: none;
6342 -webkit-box-shadow: none;
6343 box-shadow: none;
6344 }
6345 .merchant-module-alert-header i {
6346 font-size: 32px;
6347 line-height: 1em;
6348 width: auto;
6349 height: auto;
6350 }
6351
6352 .merchant-module-alert-content {
6353 display: -webkit-box;
6354 display: -ms-flexbox;
6355 display: flex;
6356 -webkit-box-orient: vertical;
6357 -webkit-box-direction: normal;
6358 -ms-flex-direction: column;
6359 flex-direction: column;
6360 grid-gap: 20px;
6361 padding: 0 30px 30px 30px;
6362 }
6363 .merchant-module-alert-content p {
6364 margin: 0;
6365 padding: 0;
6366 font-size: 15px;
6367 font-weight: 500;
6368 color: #757575;
6369 }
6370 .merchant-module-alert-content figure {
6371 display: -webkit-box;
6372 display: -ms-flexbox;
6373 display: flex;
6374 margin: 0;
6375 padding: 0;
6376 }
6377 .merchant-module-alert-content img {
6378 max-width: 100%;
6379 }
6380
6381 .merchant-module-alert-footer {
6382 display: -webkit-box;
6383 display: -ms-flexbox;
6384 display: flex;
6385 -webkit-box-pack: end;
6386 -ms-flex-pack: end;
6387 justify-content: flex-end;
6388 padding: 30px;
6389 }
6390 .merchant-module-alert-footer a {
6391 font-weight: bold;
6392 font-size: 14px;
6393 padding: 10px 15px;
6394 text-decoration: none;
6395 border-radius: 4px;
6396 color: #212121;
6397 border: 1px solid #e5e5e5;
6398 }
6399 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
6400 outline: none;
6401 -webkit-box-shadow: none;
6402 box-shadow: none;
6403 }
6404
6405 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
6406 pointer-events: none;
6407 opacity: 0.8;
6408 }
6409 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
6410 opacity: 0.5;
6411 }
6412 .merchant-module-page-setting-field-inner.disabled .merchant-range {
6413 opacity: 0.5;
6414 }
6415 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
6416 opacity: 0.5;
6417 }
6418
6419 /* Utils */
6420 .merchant-height-auto {
6421 height: auto;
6422 }
6423
6424 .merchant-admin-page__dashboard .merchant-top-bar {
6425 margin-bottom: 0;
6426 }
6427 .merchant-admin-page__dashboard .merchant-wrap {
6428 margin-top: 0;
6429 }
6430 .merchant-admin-page__dashboard .merchant-wrap .merchant-modules-header-heading {
6431 margin-top: 30px;
6432 }
6433 .merchant-admin-page .merchant-admin-footer-text-link {
6434 display: inline-block;
6435 padding-right: 5px;
6436 color: #3858E9;
6437 }
6438 .merchant-admin-page .merchant-admin-footer-text-link:hover, .merchant-admin-page .merchant-admin-footer-text-link:active, .merchant-admin-page .merchant-admin-footer-text-link:visited {
6439 color: #3858E9;
6440 }
6441
6442 .merchant-admin-page-module #wpfooter {
6443 display: none;
6444 }
6445 .merchant-admin-page-module #wpbody-content {
6446 padding-bottom: 30px;
6447 }
6448
6449 .merchant-module-footer-text {
6450 display: -webkit-box;
6451 display: -ms-flexbox;
6452 display: flex;
6453 grid-gap: 5px;
6454 -webkit-box-pack: center;
6455 -ms-flex-pack: center;
6456 justify-content: center;
6457 text-align: center;
6458 margin-top: 37px;
6459 }
6460 .merchant-module-footer-text i {
6461 color: #3858E9;
6462 }
6463
6464 /* Responsive */
6465 @media (max-width: 991px) {
6466 .merchant-wrap {
6467 display: -webkit-box;
6468 display: -ms-flexbox;
6469 display: flex;
6470 -webkit-box-orient: vertical;
6471 -webkit-box-direction: normal;
6472 -ms-flex-direction: column;
6473 flex-direction: column;
6474 grid-gap: 20px;
6475 }
6476 .merchant-modules-header-shortlinks {
6477 margin: 0;
6478 }
6479 .merchant-modules-header {
6480 -webkit-box-orient: vertical;
6481 -webkit-box-direction: normal;
6482 -ms-flex-direction: column;
6483 flex-direction: column;
6484 grid-gap: 20px;
6485 }
6486 .merchant-module-page-header-content {
6487 width: 100%;
6488 }
6489 .merchant-module-page-desc {
6490 max-width: none;
6491 }
6492 .merchant-module-page-header-placeholder {
6493 display: none;
6494 }
6495 .merchant-modules-header-image {
6496 display: none;
6497 }
6498 .merchant-modules-list {
6499 grid-template-columns: repeat(1, minmax(0, 1fr));
6500 }
6501 .merchant-modules-header-status {
6502 margin-bottom: 0;
6503 }
6504 .merchant-module-page-setting-box {
6505 -webkit-box-orient: vertical;
6506 -webkit-box-direction: normal;
6507 -ms-flex-direction: column;
6508 flex-direction: column;
6509 grid-gap: 20px;
6510 }
6511 .merchant-module-page-setting-title,
6512 .merchant-module-page-setting-fields {
6513 width: 100%;
6514 }
6515 .merchant-module-page-body {
6516 -webkit-box-orient: vertical;
6517 -webkit-box-direction: reverse;
6518 -ms-flex-direction: column-reverse;
6519 flex-direction: column-reverse;
6520 }
6521 .merchant-module-page-content {
6522 width: 100%;
6523 }
6524 .merchant-module-page-preview {
6525 margin-left: 0;
6526 margin-bottom: 20px;
6527 width: 100%;
6528 }
6529 }
6530 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area {
6531 margin-bottom: 0px;
6532 position: relative;
6533 }
6534 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field {
6535 background-color: #F0F0F0;
6536 border: none;
6537 border-radius: 3px;
6538 padding: 13px 0 13px 40px;
6539 width: 100%;
6540 }
6541 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-webkit-input-placeholder {
6542 font-size: 12px;
6543 }
6544 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-moz-placeholder {
6545 font-size: 12px;
6546 }
6547 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field:-ms-input-placeholder {
6548 font-size: 12px;
6549 }
6550 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-ms-input-placeholder {
6551 font-size: 12px;
6552 }
6553 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::placeholder {
6554 font-size: 12px;
6555 }
6556 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-icon {
6557 position: absolute;
6558 top: 50%;
6559 left: 15px;
6560 -webkit-transform: translateY(-50%);
6561 transform: translateY(-50%);
6562 }
6563 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching {
6564 margin-left: 10px;
6565 margin-right: 10px;
6566 font-style: italic;
6567 font-size: 11px;
6568 position: absolute;
6569 top: 13px;
6570 right: 0;
6571 color: #9d9d9d;
6572 display: none;
6573 }
6574 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching.active {
6575 display: inline;
6576 }
6577 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview {
6578 position: absolute;
6579 top: 100%;
6580 left: 0;
6581 right: 0;
6582 z-index: 10;
6583 background-color: #fff;
6584 border: 1px solid #ddd;
6585 padding: 0;
6586 margin: 0;
6587 height: 190px;
6588 overflow-y: scroll;
6589 display: none;
6590 }
6591 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li {
6592 cursor: pointer;
6593 }
6594 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style {
6595 padding-left: 15px;
6596 }
6597 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style:before {
6598 content: "";
6599 display: inline-block;
6600 width: 6px;
6601 height: 6px;
6602 border-radius: 50%;
6603 background-color: #d1d1d1;
6604 margin-right: 7px;
6605 }
6606 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li {
6607 border-radius: 4px;
6608 margin: 15px 0 15px;
6609 border: 1px solid #dfe1e1;
6610 }
6611 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li:last-child {
6612 margin-bottom: 0;
6613 }
6614 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul {
6615 padding: 0;
6616 margin: 0;
6617 }
6618 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li {
6619 padding: 5px 10px;
6620 margin: 0 -3px;
6621 min-height: 30px;
6622 display: -webkit-box;
6623 display: -ms-flexbox;
6624 display: flex;
6625 -webkit-box-pack: justify;
6626 -ms-flex-pack: justify;
6627 justify-content: space-between;
6628 -webkit-box-align: center;
6629 -ms-flex-align: center;
6630 align-items: center;
6631 border-bottom: 1px dotted #eee;
6632 position: relative;
6633 overflow: hidden;
6634 -webkit-user-select: none;
6635 -moz-user-select: none;
6636 -ms-user-select: none;
6637 user-select: none;
6638 -webkit-transition: 300ms;
6639 transition: 300ms;
6640 }
6641 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li:hover {
6642 background-color: #fafafa;
6643 }
6644 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li > span {
6645 margin-left: 3px;
6646 margin-right: 3px;
6647 }
6648 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img {
6649 width: 30px;
6650 -webkit-box-flex: 0;
6651 -ms-flex: 0 0 30px;
6652 flex: 0 0 30px;
6653 }
6654 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img img {
6655 width: 30px;
6656 height: 30px;
6657 border-radius: 4px;
6658 display: block;
6659 }
6660 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.data {
6661 -webkit-box-flex: 1;
6662 -ms-flex-positive: 1;
6663 flex-grow: 1;
6664 }
6665 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.type {
6666 font-size: 10px;
6667 color: #999;
6668 min-width: 40px;
6669 text-decoration: none;
6670 text-align: end;
6671 }
6672 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li del .amount {
6673 text-decoration: line-through;
6674 }
6675 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.info {
6676 font-size: 12px;
6677 font-style: italic;
6678 height: 18px;
6679 line-height: 18px;
6680 color: #999;
6681 background-color: #f1f1f1;
6682 text-decoration: none;
6683 padding: 0 6px;
6684 border-radius: 2px;
6685 margin-left: 3px;
6686 margin-right: 3px;
6687 }
6688 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li .remove {
6689 width: 30px;
6690 height: 30px;
6691 line-height: 28px;
6692 font-size: 15px;
6693 -webkit-box-flex: 0;
6694 -ms-flex: 0 0 30px;
6695 flex: 0 0 30px;
6696 border-radius: 50%;
6697 text-align: center;
6698 background-color: #f6f3f3;
6699 cursor: pointer;
6700 }
6701
6702 .merchant-image-picker label {
6703 position: relative;
6704 display: inline-block;
6705 margin-right: 10px;
6706 margin-bottom: 5px;
6707 }
6708 .merchant-image-picker label .tool-tip-text {
6709 visibility: hidden;
6710 opacity: 0;
6711 width: 120px;
6712 background-color: black;
6713 color: #fff;
6714 text-align: center;
6715 border-radius: 6px;
6716 padding: 5px 0;
6717 position: absolute;
6718 z-index: 1;
6719 top: -35px;
6720 left: 50%;
6721 margin-left: -60px;
6722 -webkit-transition: opacity 300ms;
6723 transition: opacity 300ms;
6724 }
6725 .merchant-image-picker label .tool-tip-text::after {
6726 content: "";
6727 position: absolute;
6728 top: 100%;
6729 left: 50%;
6730 margin-left: -5px;
6731 border-width: 5px;
6732 border-style: solid;
6733 border-color: black transparent transparent transparent;
6734 }
6735 .merchant-image-picker label:hover .tool-tip-text {
6736 visibility: visible;
6737 opacity: 1;
6738 }
6739 .merchant-image-picker input[type=radio] {
6740 display: none;
6741 clear: both;
6742 }
6743 .merchant-image-picker img {
6744 border: 2px solid #F0F0F1;
6745 border-radius: 4px;
6746 cursor: pointer;
6747 padding: 7px 3px;
6748 -webkit-transition: 300ms;
6749 transition: 300ms;
6750 }
6751 .merchant-image-picker input[type=radio]:checked + img {
6752 border: 2px solid #3858E9;
6753 }
6754
6755 .CodeMirror.cm-s-default {
6756 border-radius: 5px;
6757 border: 1px solid #f0f0f1;
6758 }
6759
6760 .merchant-module-page-settings.backup-restore-section {
6761 border-radius: 8px;
6762 }
6763 .merchant-module-page-settings.backup-restore-section .merchant-module-page-setting-box {
6764 max-width: 1200px;
6765 margin: 0 auto;
6766 }
6767 .merchant-module-page-settings.backup-restore-section section {
6768 background: white;
6769 border-radius: 8px;
6770 margin-bottom: 24px;
6771 }
6772 .merchant-module-page-settings.backup-restore-section section:last-child {
6773 margin-bottom: 0;
6774 }
6775 .merchant-module-page-settings.backup-restore-section section h3 {
6776 color: #23282d;
6777 position: relative;
6778 margin-block: 0 10px;
6779 }
6780 .merchant-module-page-settings.backup-restore-section section .form-field label {
6781 display: block;
6782 margin-bottom: 0.5rem;
6783 font-weight: 600;
6784 color: #23282d;
6785 }
6786 .merchant-module-page-settings.backup-restore-section section .form-field button {
6787 padding: 0.75rem 1.5rem;
6788 margin-right: 15px;
6789 border: 1px solid #3858e9;
6790 background-color: rgba(0, 0, 0, 0);
6791 color: #3858e9;
6792 border-radius: 4px;
6793 cursor: pointer;
6794 font-size: 0.9rem;
6795 font-weight: 500;
6796 -webkit-transition: all 0.2s ease-in-out;
6797 transition: all 0.2s ease-in-out;
6798 }
6799 .merchant-module-page-settings.backup-restore-section section .form-field button:hover {
6800 opacity: 0.8;
6801 }
6802 .merchant-module-page-settings.backup-restore-section section .form-field button:focus {
6803 background-color: rgba(0, 0, 0, 0);
6804 outline: 2px solid #3858e9;
6805 outline-offset: 2px;
6806 }
6807 .merchant-module-page-settings.backup-restore-section section .form-field button:disabled {
6808 opacity: 0.5;
6809 cursor: not-allowed;
6810 }
6811 .merchant-module-page-settings.backup-restore-section section .form-field button.download-button, .merchant-module-page-settings.backup-restore-section section .form-field button.restore-button {
6812 display: block;
6813 margin: 10px 0 0;
6814 }
6815 .merchant-module-page-settings.backup-restore-section section .form-field p.description {
6816 font-size: 0.875rem;
6817 color: #666;
6818 margin-top: 0.5rem;
6819 font-style: italic;
6820 }
6821 .merchant-module-page-settings.backup-restore-section section .form-field .backup-file-remove {
6822 color: #c5280c;
6823 border-radius: 50%;
6824 position: relative;
6825 top: 5px;
6826 right: 5px;
6827 cursor: pointer;
6828 }
6829 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status {
6830 font-size: 13px;
6831 font-weight: 600;
6832 vertical-align: middle;
6833 opacity: 0;
6834 -webkit-transition: opacity 0.2s ease;
6835 transition: opacity 0.2s ease;
6836 }
6837 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status.is-success {
6838 color: #46b450;
6839 opacity: 1;
6840 }
6841 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status.is-error {
6842 color: #dc3232;
6843 opacity: 1;
6844 }
6845 .merchant-module-page-settings.backup-restore-section section .error-message p {
6846 margin-bottom: 0;
6847 }
6848 @media (max-width: 768px) {
6849 .merchant-module-page-settings.backup-restore-section {
6850 padding: 1.5rem;
6851 }
6852 .merchant-module-page-settings.backup-restore-section section {
6853 padding: 1.5rem;
6854 }
6855 }
6856 .merchant-module-page-settings.backup-restore-section .merchant-dropzone {
6857 position: relative;
6858 border: 2px dashed #D6D6D6;
6859 border-radius: 8px;
6860 padding: 40px 20px;
6861 text-align: center;
6862 -webkit-transition: all 0.2s ease-in-out;
6863 transition: all 0.2s ease-in-out;
6864 cursor: pointer;
6865 }
6866 .merchant-module-page-settings.backup-restore-section .merchant-dropzone:hover, .merchant-module-page-settings.backup-restore-section .merchant-dropzone.drag-over {
6867 border-color: #3858E9;
6868 background-color: rgba(56, 88, 233, 0.03);
6869 }
6870 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.drag-over {
6871 border-style: solid;
6872 }
6873 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content {
6874 pointer-events: none;
6875 }
6876 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content .dashicons {
6877 font-size: 32px;
6878 width: 32px;
6879 height: 32px;
6880 color: #999;
6881 margin-bottom: 8px;
6882 }
6883 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content p {
6884 margin: 0 0 12px;
6885 color: #666;
6886 font-size: 14px;
6887 }
6888 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__browse {
6889 pointer-events: auto;
6890 padding: 8px 20px !important;
6891 margin: 0 !important;
6892 font-size: 13px !important;
6893 }
6894 .merchant-module-page-settings.backup-restore-section .merchant-dropzone .merchant-backup-file {
6895 position: absolute;
6896 top: 0;
6897 left: 0;
6898 width: 100%;
6899 height: 100%;
6900 opacity: 0;
6901 cursor: pointer;
6902 }
6903 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__loading {
6904 display: none;
6905 position: absolute;
6906 top: 0;
6907 left: 0;
6908 width: 100%;
6909 height: 100%;
6910 background: rgba(255, 255, 255, 0.9);
6911 border-radius: 8px;
6912 -webkit-box-orient: vertical;
6913 -webkit-box-direction: normal;
6914 -ms-flex-direction: column;
6915 flex-direction: column;
6916 -webkit-box-align: center;
6917 -ms-flex-align: center;
6918 align-items: center;
6919 -webkit-box-pack: center;
6920 -ms-flex-pack: center;
6921 justify-content: center;
6922 gap: 10px;
6923 z-index: 10;
6924 }
6925 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__loading p {
6926 margin: 0;
6927 color: #3858E9;
6928 font-size: 14px;
6929 font-weight: 500;
6930 }
6931 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-loading {
6932 pointer-events: none;
6933 }
6934 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-loading .merchant-dropzone__loading {
6935 display: -webkit-box;
6936 display: -ms-flexbox;
6937 display: flex;
6938 }
6939 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success {
6940 display: none;
6941 position: absolute;
6942 top: 0;
6943 left: 0;
6944 width: 100%;
6945 height: 100%;
6946 background: rgba(255, 255, 255, 0.95);
6947 border-radius: 8px;
6948 -webkit-box-orient: vertical;
6949 -webkit-box-direction: normal;
6950 -ms-flex-direction: column;
6951 flex-direction: column;
6952 -webkit-box-align: center;
6953 -ms-flex-align: center;
6954 align-items: center;
6955 -webkit-box-pack: center;
6956 -ms-flex-pack: center;
6957 justify-content: center;
6958 gap: 8px;
6959 z-index: 10;
6960 }
6961 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success .dashicons {
6962 font-size: 36px;
6963 width: 36px;
6964 height: 36px;
6965 color: #46b450;
6966 }
6967 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success p {
6968 margin: 0;
6969 color: #46b450;
6970 font-size: 14px;
6971 font-weight: 600;
6972 }
6973 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success {
6974 pointer-events: none;
6975 border-color: #46b450;
6976 background-color: rgba(70, 180, 80, 0.03);
6977 }
6978 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-dropzone__content,
6979 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-backup-file {
6980 visibility: hidden;
6981 }
6982 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-dropzone__success {
6983 display: -webkit-box;
6984 display: -ms-flexbox;
6985 display: flex;
6986 }
6987 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error {
6988 display: none;
6989 position: absolute;
6990 top: 0;
6991 left: 0;
6992 width: 100%;
6993 height: 100%;
6994 background: rgba(255, 255, 255, 0.95);
6995 border-radius: 8px;
6996 -webkit-box-orient: vertical;
6997 -webkit-box-direction: normal;
6998 -ms-flex-direction: column;
6999 flex-direction: column;
7000 -webkit-box-align: center;
7001 -ms-flex-align: center;
7002 align-items: center;
7003 -webkit-box-pack: center;
7004 -ms-flex-pack: center;
7005 justify-content: center;
7006 gap: 8px;
7007 z-index: 10;
7008 }
7009 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error .dashicons {
7010 font-size: 36px;
7011 width: 36px;
7012 height: 36px;
7013 color: #dc3232;
7014 }
7015 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error p {
7016 margin: 0;
7017 color: #dc3232;
7018 font-size: 14px;
7019 font-weight: 600;
7020 }
7021 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error {
7022 pointer-events: none;
7023 border-color: #dc3232;
7024 background-color: rgba(220, 50, 50, 0.03);
7025 }
7026 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-dropzone__content,
7027 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-backup-file {
7028 visibility: hidden;
7029 }
7030 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-dropzone__error {
7031 display: -webkit-box;
7032 display: -ms-flexbox;
7033 display: flex;
7034 }
7035
7036 .merchant-loading-spinner {
7037 display: inline-block;
7038 width: 20px;
7039 height: 20px;
7040 border: 4px solid rgba(0, 0, 0, 0.1);
7041 border-radius: 50%;
7042 border-top-color: #3D65E9;
7043 -webkit-animation: spin 1s ease-in-out infinite;
7044 animation: spin 1s ease-in-out infinite;
7045 vertical-align: middle;
7046 -webkit-transition: 300ms;
7047 transition: 300ms;
7048 opacity: 0;
7049 visibility: hidden;
7050 }
7051 .merchant-loading-spinner.show {
7052 opacity: 1;
7053 visibility: visible;
7054 }
7055 @-webkit-keyframes spin {
7056 0% {
7057 -webkit-transform: rotate(0deg);
7058 transform: rotate(0deg);
7059 }
7060 100% {
7061 -webkit-transform: rotate(360deg);
7062 transform: rotate(360deg);
7063 }
7064 }
7065 @keyframes spin {
7066 0% {
7067 -webkit-transform: rotate(0deg);
7068 transform: rotate(0deg);
7069 }
7070 100% {
7071 -webkit-transform: rotate(360deg);
7072 transform: rotate(360deg);
7073 }
7074 }