PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 2.3.0
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v2.3.0
2.3.2 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 All 60 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 2.3.0, at assets/css/admin/admin.css

6,878 lines 191.7 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 .toplevel_page_merchant {
1487 background-color: #F4F6F8;
1488 }
1489 .toplevel_page_merchant #wpbody-content > .updated,
1490 .toplevel_page_merchant #wpbody-content > .notice {
1491 display: none;
1492 }
1493
1494 .merchant-top-bar {
1495 display: -webkit-box;
1496 display: -ms-flexbox;
1497 display: flex;
1498 -webkit-box-align: center;
1499 -ms-flex-align: center;
1500 align-items: center;
1501 -webkit-box-pack: justify;
1502 -ms-flex-pack: justify;
1503 justify-content: space-between;
1504 background-color: #FFF;
1505 margin: 0 0 30px -20px;
1506 padding: 18px 20px;
1507 }
1508 .merchant-top-bar * {
1509 -webkit-box-sizing: border-box;
1510 box-sizing: border-box;
1511 }
1512 .merchant-top-bar * *:before,
1513 .merchant-top-bar * *:after {
1514 -webkit-box-sizing: border-box;
1515 box-sizing: border-box;
1516 }
1517 .merchant-top-bar .merchant-top-bar-infos {
1518 display: -webkit-box;
1519 display: -ms-flexbox;
1520 display: flex;
1521 -webkit-box-align: center;
1522 -ms-flex-align: center;
1523 align-items: center;
1524 }
1525 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item {
1526 position: relative;
1527 padding: 0 10px;
1528 }
1529 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item + .merchant-top-bar-info-item:before {
1530 content: "";
1531 position: absolute;
1532 top: 50%;
1533 left: 0;
1534 height: 17px;
1535 -webkit-transform: translateY(-50%);
1536 transform: translateY(-50%);
1537 border-left: 1px solid #F0F0F0;
1538 }
1539 .merchant-top-bar .merchant-version {
1540 font-size: 13px;
1541 line-height: 13px;
1542 color: #97A3B6;
1543 }
1544 .merchant-top-bar .merchant-version strong {
1545 position: relative;
1546 top: 1px;
1547 }
1548 .merchant-top-bar .merchant-version .merchant-badge {
1549 display: -webkit-inline-box;
1550 display: -ms-inline-flexbox;
1551 display: inline-flex;
1552 margin-left: 5px;
1553 font-size: 9px;
1554 line-height: 10px;
1555 }
1556 .merchant-top-bar .merchant-notifications {
1557 position: relative;
1558 display: -webkit-inline-box;
1559 display: -ms-inline-flexbox;
1560 display: inline-flex;
1561 -webkit-box-align: center;
1562 -ms-flex-align: center;
1563 align-items: center;
1564 -webkit-box-pack: center;
1565 -ms-flex-pack: center;
1566 justify-content: center;
1567 width: 27px;
1568 height: 27px;
1569 border: 1px solid #DFDFDF;
1570 border-radius: 35px;
1571 }
1572 .merchant-top-bar .merchant-notifications:focus {
1573 -webkit-box-shadow: none;
1574 box-shadow: none;
1575 }
1576 .merchant-top-bar .merchant-notifications .merchant-notifications-count {
1577 position: absolute;
1578 top: -8px;
1579 right: -7px;
1580 display: -webkit-box;
1581 display: -ms-flexbox;
1582 display: flex;
1583 -webkit-box-align: center;
1584 -ms-flex-align: center;
1585 align-items: center;
1586 -webkit-box-pack: center;
1587 -ms-flex-pack: center;
1588 justify-content: center;
1589 width: 16px;
1590 height: 16px;
1591 color: #FFF;
1592 background-color: #FA1212;
1593 border-radius: 35px;
1594 font-size: 10px;
1595 line-height: 1;
1596 }
1597 .merchant-top-bar .merchant-notifications.read .merchant-notifications-count {
1598 display: none;
1599 }
1600 .merchant-top-bar .merchant-website {
1601 display: -webkit-box;
1602 display: -ms-flexbox;
1603 display: flex;
1604 -webkit-box-align: center;
1605 -ms-flex-align: center;
1606 align-items: center;
1607 gap: 8px;
1608 font-size: 13px;
1609 line-height: 16px;
1610 color: #3858E9;
1611 text-decoration: none;
1612 }
1613
1614 /* Notifications Sidebar */
1615 .merchant-notifications-sidebar {
1616 position: fixed;
1617 top: 96px;
1618 right: 0;
1619 width: 100%;
1620 max-width: 500px;
1621 height: calc(100vh - 92px);
1622 background-color: #FFF;
1623 -webkit-box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1624 box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1625 opacity: 0;
1626 visibility: hidden;
1627 -webkit-transform: translate3d(100%, 0, 0);
1628 transform: translate3d(100%, 0, 0);
1629 -webkit-transition: ease transform 300ms, ease opacity 300ms;
1630 transition: ease transform 300ms, ease opacity 300ms;
1631 z-index: 1000;
1632 }
1633 .merchant-notifications-sidebar.opened {
1634 opacity: 1;
1635 visibility: visible;
1636 -webkit-transform: none;
1637 transform: none;
1638 }
1639 .merchant-notifications-sidebar.closing {
1640 opacity: 0;
1641 -webkit-transform: translate3d(100%, 0, 0);
1642 transform: translate3d(100%, 0, 0);
1643 }
1644 .merchant-notifications-sidebar .merchant-notifications-sidebar-close {
1645 position: absolute;
1646 top: 15px;
1647 right: 15px;
1648 -webkit-transition: ease opacity 300ms;
1649 transition: ease opacity 300ms;
1650 }
1651 .merchant-notifications-sidebar .merchant-notifications-sidebar-close:hover {
1652 opacity: 0.7;
1653 }
1654 .merchant-notifications-sidebar .merchant-notifications-sidebar-header {
1655 display: -webkit-box;
1656 display: -ms-flexbox;
1657 display: flex;
1658 -webkit-box-align: center;
1659 -ms-flex-align: center;
1660 align-items: center;
1661 gap: 10px;
1662 background-color: #EAEEF2;
1663 padding: 20px 22px;
1664 }
1665 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon {
1666 display: -webkit-box;
1667 display: -ms-flexbox;
1668 display: flex;
1669 -webkit-box-align: center;
1670 -ms-flex-align: center;
1671 align-items: center;
1672 -webkit-box-pack: center;
1673 -ms-flex-pack: center;
1674 justify-content: center;
1675 width: 40px;
1676 height: 40px;
1677 background-color: #FFF;
1678 border: 1px solid #EBEDEF;
1679 border-radius: 35px;
1680 }
1681 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon svg {
1682 position: relative;
1683 top: -2px;
1684 }
1685 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content h3 {
1686 font-size: 16px;
1687 line-height: 26px;
1688 font-weight: 600;
1689 color: #3858E9;
1690 margin: 0;
1691 }
1692 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content p {
1693 font-size: 13px;
1694 line-height: 18px;
1695 color: #757575;
1696 margin: 0;
1697 }
1698 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs {
1699 position: relative;
1700 }
1701 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs:after {
1702 content: "";
1703 position: absolute;
1704 bottom: -10px;
1705 left: 20px;
1706 width: calc(100% - 40px);
1707 border-bottom: 1px solid #F0F0F1;
1708 }
1709 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs + .merchant-notifications-sidebar-body {
1710 max-height: calc(100vh - 232px);
1711 }
1712 .merchant-notifications-sidebar .merchant-notifications-sidebar-body {
1713 padding: 20px;
1714 overflow-y: auto;
1715 max-height: calc(100vh - 230px);
1716 }
1717 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar {
1718 width: 5px;
1719 }
1720 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-track {
1721 background: #e2e2e2;
1722 }
1723 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-thumb {
1724 background-color: #CCC;
1725 }
1726
1727 /* Notifications (card) */
1728 .merchant-notification .merchant-notification-date {
1729 display: block;
1730 font-size: 13px;
1731 line-height: 18px;
1732 color: #757575;
1733 }
1734 .merchant-notification .merchant-notification-date + .merchant-notification-content {
1735 margin-top: 20px;
1736 }
1737 .merchant-notification .changelog-tag {
1738 display: inline-block;
1739 font-size: 10px;
1740 line-height: 18px;
1741 color: #FFF;
1742 padding: 0px 10px;
1743 background-color: #CCC;
1744 border-radius: 3px;
1745 text-transform: uppercase;
1746 font-weight: 600;
1747 margin-bottom: 5px;
1748 }
1749 .merchant-notification .changelog-tag.changelog-added {
1750 background-color: #73B189;
1751 }
1752 .merchant-notification .changelog-tag.changelog-changed {
1753 background-color: #F6CA45;
1754 }
1755 .merchant-notification .changelog-tag.changelog-fixed {
1756 background-color: #967BE3;
1757 }
1758 .merchant-notification .changelog-description {
1759 display: block;
1760 font-size: 13px;
1761 line-height: 21px;
1762 font-weight: 400;
1763 color: #757575;
1764 margin-top: 5px;
1765 }
1766 .merchant-notification .merchant-notification-content ul {
1767 margin: 0;
1768 }
1769 .merchant-notification .merchant-notification-content ul li {
1770 display: -webkit-box;
1771 display: -ms-flexbox;
1772 display: flex;
1773 -webkit-box-orient: vertical;
1774 -webkit-box-direction: normal;
1775 -ms-flex-direction: column;
1776 flex-direction: column;
1777 -webkit-box-align: start;
1778 -ms-flex-align: start;
1779 align-items: flex-start;
1780 font-size: 16px;
1781 line-height: 26px;
1782 font-weight: 600;
1783 color: #101517;
1784 }
1785 .merchant-notification .merchant-notification-content ul li + li {
1786 margin-top: 15px;
1787 padding-top: 15px;
1788 border-top: 1px solid #E7E7E7;
1789 }
1790 .merchant-notification + .merchant-notification {
1791 margin: 20px -20px 0px;
1792 padding: 20px 20px 0px;
1793 border-top: 1px solid #E7E7E7;
1794 }
1795
1796 .merchant-wrap {
1797 padding-left: 5px;
1798 padding-right: 5px;
1799 }
1800 .merchant-wrap * {
1801 -webkit-box-sizing: border-box;
1802 box-sizing: border-box;
1803 }
1804 .merchant-wrap * *:before,
1805 .merchant-wrap * *:after {
1806 -webkit-box-sizing: border-box;
1807 box-sizing: border-box;
1808 }
1809
1810 .merchant-modules-panel {
1811 display: -webkit-box;
1812 display: -ms-flexbox;
1813 display: flex;
1814 grid-gap: 20px;
1815 -webkit-box-orient: vertical;
1816 -webkit-box-direction: normal;
1817 -ms-flex-direction: column;
1818 flex-direction: column;
1819 }
1820
1821 .merchant-modules-header {
1822 display: -webkit-box;
1823 display: -ms-flexbox;
1824 display: flex;
1825 grid-gap: 30px;
1826 }
1827
1828 .merchant-modules-header-left,
1829 .merchant-modules-header-right {
1830 -webkit-box-flex: 1;
1831 -ms-flex: 1;
1832 flex: 1;
1833 display: -webkit-box;
1834 display: -ms-flexbox;
1835 display: flex;
1836 grid-gap: 10px;
1837 -webkit-box-orient: vertical;
1838 -webkit-box-direction: normal;
1839 -ms-flex-direction: column;
1840 flex-direction: column;
1841 -webkit-box-pack: center;
1842 -ms-flex-pack: center;
1843 justify-content: center;
1844 }
1845
1846 .merchant-admin-hand-icon {
1847 width: 24px;
1848 height: auto;
1849 margin-left: 7px;
1850 position: relative;
1851 top: 2px;
1852 }
1853
1854 .merchant-modules-header-heading {
1855 font-size: 24px;
1856 line-height: 34px;
1857 font-weight: 500;
1858 color: #101517;
1859 }
1860 .merchant-modules-header-heading__campaigns {
1861 margin-bottom: 20px;
1862 }
1863
1864 .merchant-modules-header-subheading {
1865 font-size: 16px;
1866 line-height: 1.35em;
1867 color: #7B7B7B;
1868 font-weight: 400;
1869 }
1870
1871 .merchant-modules-header-status {
1872 margin-top: 20px;
1873 margin-bottom: 40px;
1874 display: -webkit-box;
1875 display: -ms-flexbox;
1876 display: flex;
1877 grid-gap: 20px;
1878 }
1879
1880 .merchant-modules-header-status-box {
1881 display: -webkit-box;
1882 display: -ms-flexbox;
1883 display: flex;
1884 grid-gap: 10px;
1885 -webkit-box-orient: vertical;
1886 -webkit-box-direction: normal;
1887 -ms-flex-direction: column;
1888 flex-direction: column;
1889 -webkit-box-align: center;
1890 -ms-flex-align: center;
1891 align-items: center;
1892 padding: 20px;
1893 font-size: 14px;
1894 font-weight: 500;
1895 color: #101517;
1896 background-color: #fff;
1897 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
1898 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
1899 border-radius: 4px;
1900 }
1901 @media (min-width: 421px) {
1902 .merchant-modules-header-status-box {
1903 min-width: 175px;
1904 }
1905 }
1906 @media (max-width: 420px) {
1907 .merchant-modules-header-status-box {
1908 -webkit-box-flex: 1;
1909 -ms-flex: 1;
1910 flex: 1;
1911 }
1912 }
1913 .merchant-modules-header-status-box span {
1914 display: -webkit-box;
1915 display: -ms-flexbox;
1916 display: flex;
1917 grid-gap: 5px;
1918 -webkit-box-align: center;
1919 -ms-flex-align: center;
1920 align-items: center;
1921 }
1922 .merchant-modules-header-status-box strong {
1923 color: #101517;
1924 font-size: 40px;
1925 line-height: 1em;
1926 }
1927
1928 .merchant-modules-header-image {
1929 height: 100%;
1930 display: -webkit-box;
1931 display: -ms-flexbox;
1932 display: flex;
1933 -webkit-box-pack: center;
1934 -ms-flex-pack: center;
1935 justify-content: center;
1936 -webkit-box-align: end;
1937 -ms-flex-align: end;
1938 align-items: flex-end;
1939 }
1940 .merchant-modules-header-image svg {
1941 width: 300px;
1942 }
1943 @media (max-width: 1400px) {
1944 .merchant-modules-header-image img {
1945 max-width: 450px;
1946 margin-top: 20px;
1947 }
1948 }
1949
1950 .merchant-modules-no-active-modules {
1951 padding-block: 40px;
1952 display: -webkit-box;
1953 display: -ms-flexbox;
1954 display: flex;
1955 -webkit-box-orient: vertical;
1956 -webkit-box-direction: normal;
1957 -ms-flex-direction: column;
1958 flex-direction: column;
1959 -webkit-box-align: center;
1960 -ms-flex-align: center;
1961 align-items: center;
1962 gap: 15px;
1963 }
1964 .merchant-modules-no-active-modules img {
1965 width: 350px;
1966 max-width: 100%;
1967 margin-bottom: 10px;
1968 }
1969 .merchant-modules-no-active-modules__text-big {
1970 font-size: 16px;
1971 font-weight: 500;
1972 color: #101517;
1973 }
1974 .merchant-modules-no-active-modules__text-small {
1975 color: #757575;
1976 font-size: 13px;
1977 }
1978 .merchant-modules-no-active-modules .merchant-module-page-button {
1979 width: 180px;
1980 margin-top: 5px;
1981 }
1982
1983 .merchant-modules-header-shortlinks {
1984 margin: 20px 0;
1985 padding: 0;
1986 list-style: none;
1987 display: -webkit-box;
1988 display: -ms-flexbox;
1989 display: flex;
1990 -webkit-box-orient: vertical;
1991 -webkit-box-direction: normal;
1992 -ms-flex-direction: column;
1993 flex-direction: column;
1994 border-radius: 4px;
1995 border: 2px solid #F0F0F1;
1996 background-color: #fff;
1997 }
1998 .merchant-modules-header-shortlinks li {
1999 margin: 0 15px;
2000 border-bottom: 1px solid #EFEFEF;
2001 }
2002 .merchant-modules-header-shortlinks li:last-child {
2003 border-bottom: none;
2004 margin-bottom: 5px;
2005 }
2006 .merchant-modules-header-shortlinks li:first-child {
2007 margin-top: 5px;
2008 }
2009 .merchant-modules-header-shortlinks a {
2010 font-size: 14px;
2011 display: -webkit-box;
2012 display: -ms-flexbox;
2013 display: flex;
2014 grid-gap: 8px;
2015 -webkit-box-align: center;
2016 -ms-flex-align: center;
2017 align-items: center;
2018 -webkit-box-pack: justify;
2019 -ms-flex-pack: justify;
2020 justify-content: space-between;
2021 color: #757575;
2022 text-decoration: none;
2023 padding: 10px 0;
2024 }
2025 .merchant-modules-header-shortlinks a:focus {
2026 outline: none;
2027 -webkit-box-shadow: none;
2028 box-shadow: none;
2029 }
2030 .merchant-modules-header-shortlinks a svg:first-of-type {
2031 width: 24px;
2032 }
2033 .merchant-modules-header-shortlinks span {
2034 -webkit-box-flex: 1;
2035 -ms-flex: 1;
2036 flex: 1;
2037 }
2038 .merchant-modules-header-shortlinks strong {
2039 color: #101517;
2040 font-weight: 500;
2041 }
2042
2043 .merchant-modules-box {
2044 display: -webkit-box;
2045 display: -ms-flexbox;
2046 display: flex;
2047 grid-gap: 20px;
2048 -webkit-box-orient: vertical;
2049 -webkit-box-direction: normal;
2050 -ms-flex-direction: column;
2051 flex-direction: column;
2052 padding: 20px;
2053 background-color: #fff;
2054 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2055 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2056 border-radius: 4px;
2057 }
2058
2059 .merchant-modules-box-heading {
2060 font-size: 20px;
2061 font-weight: 500;
2062 line-height: 30px;
2063 color: #101517;
2064 }
2065
2066 .merchant-modules-list {
2067 display: grid;
2068 grid-template-columns: repeat(3, minmax(0, 1fr));
2069 grid-gap: 20px;
2070 }
2071
2072 .merchant-modules-list-item {
2073 position: relative;
2074 display: -webkit-box;
2075 display: -ms-flexbox;
2076 display: flex;
2077 grid-gap: 10px;
2078 padding: 20px;
2079 text-decoration: none;
2080 border: 2px solid #F0F0F1;
2081 background-color: #fff;
2082 border-radius: 4px;
2083 -webkit-transition: all 0.2s;
2084 transition: all 0.2s;
2085 }
2086 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-icon,
2087 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-content {
2088 opacity: 0.5;
2089 }
2090 .merchant-modules-list-item:hover {
2091 -webkit-box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
2092 box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
2093 }
2094 .merchant-modules-list-item:focus {
2095 outline: none;
2096 -webkit-box-shadow: none;
2097 box-shadow: none;
2098 }
2099
2100 .merchant-badge {
2101 color: #99A5B8;
2102 padding: 3px 6px;
2103 border: 1px solid #DFDFDF;
2104 border-radius: 2px;
2105 font-weight: 700;
2106 }
2107 .merchant-badge.merchant-badge-pro {
2108 color: #3858e9;
2109 border-color: #3858e9;
2110 }
2111
2112 .merchant-pro-badge.merchant-pro-tooltip {
2113 position: relative;
2114 }
2115 .merchant-pro-badge.merchant-pro-tooltip:before {
2116 content: attr(data-tooltip-message);
2117 position: absolute;
2118 right: -30px;
2119 bottom: calc(100% + 11px);
2120 color: #FFF;
2121 font-size: 11px;
2122 line-height: 16px;
2123 padding: 3px 6px;
2124 background-color: #1E1E1E;
2125 white-space: nowrap;
2126 opacity: 0;
2127 visibility: hidden;
2128 -webkit-transform: translate3d(0, 6px, 0);
2129 transform: translate3d(0, 6px, 0);
2130 -webkit-transition: ease opacity 300ms, ease transform 300ms;
2131 transition: ease opacity 300ms, ease transform 300ms;
2132 z-index: 2;
2133 }
2134 .merchant-pro-badge.merchant-pro-tooltip:after {
2135 content: "";
2136 position: absolute;
2137 bottom: calc(100% + 3px);
2138 right: 10px;
2139 width: 0;
2140 height: 0;
2141 border-style: solid;
2142 border-width: 4px 4px 4px 4px;
2143 border-color: #1E1E1E transparent transparent transparent;
2144 opacity: 0;
2145 visibility: hidden;
2146 -webkit-transform: translate3d(0, 6px, 0);
2147 transform: translate3d(0, 6px, 0);
2148 -webkit-transition: ease opacity 300ms, ease transform 300ms;
2149 transition: ease opacity 300ms, ease transform 300ms;
2150 z-index: 2;
2151 }
2152 .merchant-pro-badge.merchant-pro-tooltip:hover:before, .merchant-pro-badge.merchant-pro-tooltip:hover:after {
2153 opacity: 1;
2154 visibility: visible;
2155 -webkit-transform: translate3d(0, 0, 0);
2156 transform: translate3d(0, 0, 0);
2157 }
2158
2159 .merchant-modules-list-item-badge-wrapper {
2160 position: absolute;
2161 top: 20px;
2162 right: 20px;
2163 }
2164
2165 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge {
2166 padding: 3px 7px;
2167 color: #FFF;
2168 border: 1px solid #212121;
2169 background-color: #212121;
2170 border-radius: 3px;
2171 font-size: 10px;
2172 line-height: 1.2;
2173 font-weight: 400;
2174 display: -webkit-inline-box;
2175 display: -ms-inline-flexbox;
2176 display: inline-flex;
2177 top: -2px;
2178 text-transform: uppercase;
2179 }
2180 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge:before {
2181 font-weight: 400;
2182 text-transform: none;
2183 }
2184
2185 .merchant-modules-list-item-woo-required .merchant-pro-badge {
2186 padding: 1px 2px;
2187 color: #674399;
2188 border: 1px solid #674399;
2189 border-radius: 3px;
2190 font-size: 9px;
2191 line-height: 1.2;
2192 font-weight: 700;
2193 display: -webkit-inline-box;
2194 display: -ms-inline-flexbox;
2195 display: inline-flex;
2196 top: -2px;
2197 }
2198 .merchant-modules-list-item-woo-required .merchant-pro-badge:before {
2199 font-weight: 400;
2200 }
2201 .merchant-modules-list-item-woo-required + .merchant-modules-list-item-upsell {
2202 right: 53px;
2203 }
2204
2205 .merchant-modules-list-item-icon {
2206 display: -webkit-box;
2207 display: -ms-flexbox;
2208 display: flex;
2209 }
2210 .merchant-modules-list-item-icon svg {
2211 width: 18px;
2212 height: 26px;
2213 fill: #787C82;
2214 }
2215 .merchant-modules-list-item-icon svg.stroke-based {
2216 fill: none;
2217 stroke: #787C82;
2218 }
2219
2220 .merchant-modules-list-item-content {
2221 display: -webkit-box;
2222 display: -ms-flexbox;
2223 display: flex;
2224 grid-gap: 8px;
2225 -webkit-box-orient: vertical;
2226 -webkit-box-direction: normal;
2227 -ms-flex-direction: column;
2228 flex-direction: column;
2229 }
2230
2231 .merchant-modules-list-item-title {
2232 display: -webkit-box;
2233 display: -ms-flexbox;
2234 display: flex;
2235 -webkit-box-align: center;
2236 -ms-flex-align: center;
2237 align-items: center;
2238 grid-gap: 5px;
2239 font-size: 16px;
2240 line-height: 26px;
2241 font-weight: 500;
2242 color: #101517;
2243 }
2244
2245 .merchant-modules-indicator {
2246 width: 10px;
2247 height: 10px;
2248 border-radius: 10px;
2249 background-color: #3c8733;
2250 }
2251
2252 .merchant-modules-list-item-desc {
2253 color: #757575;
2254 font-size: 13px;
2255 line-height: 20px;
2256 max-width: 400px;
2257 }
2258
2259 .merchant-module-page {
2260 display: -webkit-box;
2261 display: -ms-flexbox;
2262 display: flex;
2263 }
2264
2265 .merchant-module-page-back a {
2266 display: -webkit-box;
2267 display: -ms-flexbox;
2268 display: flex;
2269 grid-gap: 5px;
2270 -webkit-box-align: center;
2271 -ms-flex-align: center;
2272 align-items: center;
2273 -webkit-transition: all 0.2s;
2274 transition: all 0.2s;
2275 text-decoration: none;
2276 color: #1D2327;
2277 font-weight: 500;
2278 }
2279 .merchant-module-page-back a:focus, .merchant-module-page-back a:active {
2280 -webkit-box-shadow: none;
2281 box-shadow: none;
2282 outline: none;
2283 }
2284
2285 .merchant-module-page-content {
2286 width: 50%;
2287 -webkit-box-flex: 1;
2288 -ms-flex: 1;
2289 flex: 1;
2290 display: -webkit-box;
2291 display: -ms-flexbox;
2292 display: flex;
2293 grid-gap: 20px;
2294 -webkit-box-orient: vertical;
2295 -webkit-box-direction: normal;
2296 -ms-flex-direction: column;
2297 flex-direction: column;
2298 }
2299
2300 .merchant-module-page-body {
2301 display: -webkit-box;
2302 display: -ms-flexbox;
2303 display: flex;
2304 }
2305
2306 .merchant-module-page-preview {
2307 width: 50%;
2308 margin-left: 20px;
2309 }
2310
2311 .merchant-module-page-body.has-preview .merchant-module-page-setting-box {
2312 -webkit-box-orient: vertical;
2313 -webkit-box-direction: normal;
2314 -ms-flex-direction: column;
2315 flex-direction: column;
2316 grid-gap: 20px;
2317 }
2318 .merchant-module-page-body.has-preview .merchant-module-page-setting-title,
2319 .merchant-module-page-body.has-preview .merchant-module-page-setting-fields {
2320 width: 100%;
2321 }
2322
2323 .merchant-module-page-ajax-form {
2324 -webkit-box-flex: 1;
2325 -ms-flex: 1;
2326 flex: 1;
2327 display: -webkit-box;
2328 display: -ms-flexbox;
2329 display: flex;
2330 grid-gap: 20px;
2331 -webkit-box-orient: vertical;
2332 -webkit-box-direction: normal;
2333 -ms-flex-direction: column;
2334 flex-direction: column;
2335 }
2336
2337 .merchant-module-page-header {
2338 display: -webkit-box;
2339 display: -ms-flexbox;
2340 display: flex;
2341 -webkit-box-align: center;
2342 -ms-flex-align: center;
2343 align-items: center;
2344 background-color: #fff;
2345 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2346 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2347 border-radius: 4px;
2348 }
2349
2350 .merchant-module-page-header-content {
2351 width: 100%;
2352 display: -webkit-box;
2353 display: -ms-flexbox;
2354 display: flex;
2355 grid-gap: 20px;
2356 -webkit-box-orient: vertical;
2357 -webkit-box-direction: normal;
2358 -ms-flex-direction: column;
2359 flex-direction: column;
2360 padding: 30px;
2361 }
2362
2363 .merchant-module-page-header-placeholder {
2364 width: 40%;
2365 display: -webkit-box;
2366 display: -ms-flexbox;
2367 display: flex;
2368 -ms-flex-item-align: end;
2369 align-self: flex-end;
2370 -webkit-box-pack: center;
2371 -ms-flex-pack: center;
2372 justify-content: center;
2373 margin: 40px 60px 0 60px;
2374 }
2375 .merchant-module-page-header-placeholder img {
2376 max-width: 100%;
2377 max-height: 300px;
2378 }
2379
2380 body.merchant-has-admin-preview .merchant-module-page-header-content {
2381 width: 100%;
2382 }
2383 body.merchant-has-admin-preview .merchant-module-page-header-placeholder {
2384 display: none;
2385 }
2386 body.merchant-has-admin-preview .merchant-module-page-desc {
2387 max-width: none;
2388 }
2389
2390 .merchant-module-page-heading {
2391 display: -webkit-box;
2392 display: -ms-flexbox;
2393 display: flex;
2394 grid-gap: 12px;
2395 }
2396
2397 .merchant-module-page-info {
2398 display: -webkit-box;
2399 display: -ms-flexbox;
2400 display: flex;
2401 grid-gap: 10px;
2402 -webkit-box-orient: vertical;
2403 -webkit-box-direction: normal;
2404 -ms-flex-direction: column;
2405 flex-direction: column;
2406 }
2407
2408 .merchant-module-page-title {
2409 font-size: 32px;
2410 line-height: 40px;
2411 font-weight: 500;
2412 color: #101517;
2413 display: -webkit-box;
2414 display: -ms-flexbox;
2415 display: flex;
2416 grid-gap: 15px;
2417 -webkit-box-align: center;
2418 -ms-flex-align: center;
2419 align-items: center;
2420 }
2421 .merchant-module-page-title svg {
2422 width: 28px;
2423 height: 28px;
2424 fill: #787C82;
2425 }
2426
2427 .merchant-module-page-desc {
2428 font-size: 18px;
2429 line-height: 28px;
2430 font-weight: normal;
2431 color: #757575;
2432 max-width: none;
2433 }
2434
2435 .merchant-module-page-actions {
2436 display: -webkit-box;
2437 display: -ms-flexbox;
2438 display: flex;
2439 grid-gap: 10px;
2440 -webkit-box-pack: justify;
2441 -ms-flex-pack: justify;
2442 justify-content: space-between;
2443 }
2444
2445 .merchant-module-page-actions-inner {
2446 display: -webkit-box;
2447 display: -ms-flexbox;
2448 display: flex;
2449 grid-gap: 15px;
2450 }
2451
2452 .merchant-module-page-button {
2453 cursor: pointer;
2454 display: -webkit-box;
2455 display: -ms-flexbox;
2456 display: flex;
2457 grid-gap: 7px;
2458 -webkit-box-pack: center;
2459 -ms-flex-pack: center;
2460 justify-content: center;
2461 -webkit-box-align: center;
2462 -ms-flex-align: center;
2463 align-items: center;
2464 padding: 14px 25px;
2465 font-size: 16px;
2466 line-height: 1em;
2467 font-weight: 500;
2468 -webkit-user-select: none;
2469 -moz-user-select: none;
2470 -ms-user-select: none;
2471 user-select: none;
2472 text-decoration: none;
2473 border-radius: 4px;
2474 color: #fff;
2475 border: 1px solid transparent;
2476 background-color: #3858E9;
2477 }
2478 .merchant-module-page-button.merchant-module-question-answer-button:disabled {
2479 cursor: not-allowed;
2480 background: rgba(239, 239, 239, 0.3);
2481 color: rgba(16, 16, 16, 0.3);
2482 border: 1px solid rgba(195, 195, 195, 0.3);
2483 }
2484 .merchant-module-page-button:focus, .merchant-module-page-button:hover {
2485 outline: none;
2486 -webkit-box-shadow: none;
2487 box-shadow: none;
2488 color: #fff;
2489 }
2490 .merchant-module-page-button svg {
2491 width: 8px;
2492 height: 8px;
2493 }
2494
2495 .merchant-module-deactivate {
2496 display: none;
2497 }
2498
2499 .merchant-module-action {
2500 position: relative;
2501 }
2502 .merchant-module-action.merchant-enabled .merchant-module-activate {
2503 display: none;
2504 }
2505 .merchant-module-action.merchant-enabled .merchant-module-deactivate {
2506 display: block;
2507 }
2508
2509 .merchant-module-deactivate-dropdown {
2510 cursor: pointer;
2511 position: absolute;
2512 top: 100%;
2513 left: 0;
2514 padding: 5px;
2515 white-space: nowrap;
2516 border-radius: 8px;
2517 background-color: #fff;
2518 font-size: 14px;
2519 line-height: 16px;
2520 margin: 0;
2521 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2522 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2523 opacity: 0;
2524 pointer-events: none;
2525 -webkit-transition: all 0.1s;
2526 transition: all 0.1s;
2527 }
2528 .merchant-module-deactivate-dropdown.merchant-show {
2529 opacity: 1;
2530 pointer-events: auto;
2531 margin-top: 10px;
2532 }
2533
2534 .merchant-module-dropdown {
2535 position: absolute;
2536 overflow: hidden;
2537 top: 100%;
2538 left: 0;
2539 min-width: 275px;
2540 white-space: nowrap;
2541 border-radius: 8px;
2542 background-color: #fff;
2543 font-size: 13px;
2544 line-height: 14px;
2545 margin: 0;
2546 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2547 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2548 opacity: 0;
2549 pointer-events: none;
2550 -webkit-transition: all 0.1s;
2551 transition: all 0.1s;
2552 z-index: 99;
2553 }
2554 .merchant-module-dropdown.merchant-show {
2555 opacity: 1;
2556 pointer-events: auto;
2557 margin-top: 10px;
2558 }
2559 .merchant-module-dropdown ul {
2560 margin: 0;
2561 padding: 0;
2562 list-style: none;
2563 display: -webkit-box;
2564 display: -ms-flexbox;
2565 display: flex;
2566 -webkit-box-orient: vertical;
2567 -webkit-box-direction: normal;
2568 -ms-flex-direction: column;
2569 flex-direction: column;
2570 }
2571 .merchant-module-dropdown ul li {
2572 cursor: pointer;
2573 position: relative;
2574 margin: 0;
2575 display: -webkit-box;
2576 display: -ms-flexbox;
2577 display: flex;
2578 -webkit-box-align: center;
2579 -ms-flex-align: center;
2580 align-items: center;
2581 -webkit-box-pack: justify;
2582 -ms-flex-pack: justify;
2583 justify-content: space-between;
2584 white-space: nowrap;
2585 padding: 15px 15px 0 15px;
2586 color: #202223;
2587 -webkit-transition: all 0.2s;
2588 transition: all 0.2s;
2589 }
2590 .merchant-module-dropdown ul li:before {
2591 content: "";
2592 position: absolute;
2593 z-index: 1;
2594 top: 0;
2595 left: 0;
2596 bottom: 0;
2597 width: 0;
2598 opacity: 0;
2599 -webkit-transition: all 0.2s;
2600 transition: all 0.2s;
2601 background-color: #3858E9;
2602 }
2603 .merchant-module-dropdown ul li:hover {
2604 background-color: #F2F7FE;
2605 }
2606 .merchant-module-dropdown ul li:hover:before {
2607 opacity: 1;
2608 width: 3px;
2609 }
2610 .merchant-module-dropdown ul li span {
2611 width: 100%;
2612 padding-bottom: 15px;
2613 border-bottom: 1px solid #eee;
2614 }
2615 .merchant-module-dropdown ul li:last-child span {
2616 border-bottom: none;
2617 }
2618 .merchant-module-dropdown.merchant-show {
2619 opacity: 1;
2620 pointer-events: auto;
2621 margin-top: 10px;
2622 }
2623
2624 .merchant-module-dropdown-close {
2625 cursor: pointer;
2626 }
2627
2628 .merchant-module-question-title {
2629 display: -webkit-box;
2630 display: -ms-flexbox;
2631 display: flex;
2632 grid-gap: 15px;
2633 -webkit-box-align: center;
2634 -ms-flex-align: center;
2635 align-items: center;
2636 -webkit-box-pack: justify;
2637 -ms-flex-pack: justify;
2638 justify-content: space-between;
2639 white-space: nowrap;
2640 padding: 15px 15px 5px 15px;
2641 font-size: 14px;
2642 line-height: 16px;
2643 color: #202223;
2644 font-weight: 500;
2645 }
2646 .merchant-module-question-title i {
2647 width: auto;
2648 height: auto;
2649 font-size: 24px;
2650 line-height: 1;
2651 }
2652
2653 .merchant-module-question-answer-title {
2654 display: none;
2655 grid-gap: 15px;
2656 -webkit-box-align: center;
2657 -ms-flex-align: center;
2658 align-items: center;
2659 -webkit-box-pack: justify;
2660 -ms-flex-pack: justify;
2661 justify-content: space-between;
2662 white-space: nowrap;
2663 padding: 15px;
2664 font-size: 14px;
2665 line-height: 16px;
2666 color: #202223;
2667 font-weight: 500;
2668 }
2669 .merchant-module-question-answer-title i {
2670 width: auto;
2671 height: auto;
2672 font-size: 20px;
2673 line-height: 1;
2674 }
2675 .merchant-module-question-answer-title.merchant-show {
2676 display: -webkit-box;
2677 display: -ms-flexbox;
2678 display: flex;
2679 }
2680
2681 .merchant-module-question-answer-form {
2682 padding: 5px 15px 15px 15px;
2683 display: -webkit-box;
2684 display: -ms-flexbox;
2685 display: flex;
2686 grid-gap: 10px;
2687 -webkit-box-orient: vertical;
2688 -webkit-box-direction: normal;
2689 -ms-flex-direction: column;
2690 flex-direction: column;
2691 }
2692 .merchant-module-question-answer-form textarea {
2693 width: 100%;
2694 height: 100px;
2695 padding: 12px;
2696 line-height: 1em;
2697 width: 100%;
2698 max-width: 100%;
2699 min-height: auto;
2700 border: 1px solid #D6D6D6;
2701 }
2702 .merchant-module-question-answer-form textarea:focus {
2703 outline: none;
2704 -webkit-box-shadow: none;
2705 box-shadow: none;
2706 border-color: #3858E9;
2707 }
2708 .merchant-module-question-answer-form button {
2709 -ms-flex-item-align: end;
2710 align-self: flex-end;
2711 padding: 8px 10px;
2712 font-size: 13px;
2713 font-weight: 400;
2714 }
2715
2716 .merchant-module-question-answer-thank-you-text {
2717 padding: 5px 15px 15px 15px;
2718 }
2719
2720 .merchant-module-question-thank-you-dropdown .merchant-module-question-answer-title {
2721 display: -webkit-box;
2722 display: -ms-flexbox;
2723 display: flex;
2724 }
2725
2726 .merchant-module-page-button-action-deactivate {
2727 border-radius: 8px;
2728 padding: 12px 16px;
2729 display: -webkit-box;
2730 display: -ms-flexbox;
2731 display: flex;
2732 justify-items: center;
2733 -webkit-box-align: center;
2734 -ms-flex-align: center;
2735 align-items: center;
2736 text-decoration: none;
2737 color: #d82c0d;
2738 }
2739 .merchant-module-page-button-action-deactivate:hover {
2740 background-color: #fff4f4;
2741 }
2742
2743 .merchant-module-page-button-deactivate {
2744 color: #3858E9;
2745 border-color: #3858E9;
2746 background-color: transparent;
2747 }
2748 .merchant-module-page-button-deactivate:focus, .merchant-module-page-button-deactivate:hover {
2749 color: #3858E9;
2750 }
2751 .merchant-module-page-button-deactivate.merchant-show .merchant-module-deactivate-dropdown {
2752 pointer-events: auto;
2753 }
2754
2755 .merchant-module-page-actions-links {
2756 display: -webkit-box;
2757 display: -ms-flexbox;
2758 display: flex;
2759 -webkit-box-align: center;
2760 -ms-flex-align: center;
2761 align-items: center;
2762 }
2763
2764 .merchant-module-page-link {
2765 display: -webkit-box;
2766 display: -ms-flexbox;
2767 display: flex;
2768 grid-gap: 5px;
2769 -webkit-box-pack: center;
2770 -ms-flex-pack: center;
2771 justify-content: center;
2772 -webkit-box-align: center;
2773 -ms-flex-align: center;
2774 align-items: center;
2775 padding: 10px;
2776 font-size: 13px;
2777 font-weight: 500;
2778 text-decoration: none;
2779 color: #3858E9;
2780 }
2781 .merchant-module-page-link span {
2782 text-decoration: underline;
2783 }
2784 .merchant-module-page-link:focus, .merchant-module-page-link:hover {
2785 outline: none;
2786 -webkit-box-shadow: none;
2787 box-shadow: none;
2788 color: #3858E9;
2789 }
2790
2791 body.merchant-module-disabled .merchant-module-page-link-preview {
2792 pointer-events: none;
2793 color: #CCC;
2794 }
2795 body.merchant-module-disabled .merchant-module-page-link-preview span {
2796 text-decoration: none;
2797 }
2798 body.merchant-module-disabled .merchant-module-page-link-preview svg path {
2799 fill: #CCC;
2800 }
2801
2802 .merchant-module-page-ajax-header {
2803 display: -webkit-box;
2804 display: -ms-flexbox;
2805 display: flex;
2806 -webkit-box-pack: justify;
2807 -ms-flex-pack: justify;
2808 justify-content: space-between;
2809 -webkit-box-align: center;
2810 -ms-flex-align: center;
2811 align-items: center;
2812 position: fixed;
2813 z-index: 10000;
2814 overflow: hidden;
2815 padding-left: 20px;
2816 padding-right: 20px;
2817 top: 32px;
2818 left: 160px;
2819 right: 0;
2820 height: 56px;
2821 opacity: 0;
2822 pointer-events: none;
2823 background-color: #1d2327;
2824 -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2825 transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2826 }
2827 .merchant-module-page-ajax-header.merchant-show {
2828 opacity: 1;
2829 pointer-events: auto;
2830 }
2831 .merchant-module-page-ajax-header.merchant-saving {
2832 -webkit-user-select: none;
2833 -moz-user-select: none;
2834 -ms-user-select: none;
2835 user-select: none;
2836 }
2837 .merchant-module-page-ajax-header.merchant-saving i {
2838 opacity: 1;
2839 }
2840 .merchant-module-page-ajax-header.merchant-saving span {
2841 opacity: 0;
2842 }
2843 .merchant-module-page-ajax-header.merchant-saving .merchant-module-page-ajax-buttons {
2844 -webkit-user-select: none;
2845 -moz-user-select: none;
2846 -ms-user-select: none;
2847 user-select: none;
2848 pointer-events: none;
2849 }
2850
2851 .merchant-module-page-ajax-notice {
2852 font-size: 14px;
2853 font-weight: 500;
2854 color: #e3e5e7;
2855 }
2856
2857 .merchant-module-page-ajax-buttons {
2858 display: -webkit-box;
2859 display: -ms-flexbox;
2860 display: flex;
2861 -webkit-box-align: center;
2862 -ms-flex-align: center;
2863 align-items: center;
2864 grid-gap: 15px;
2865 }
2866
2867 .merchant-module-save-button {
2868 position: relative;
2869 cursor: pointer;
2870 display: -webkit-box;
2871 display: -ms-flexbox;
2872 display: flex;
2873 -webkit-box-pack: center;
2874 -ms-flex-pack: center;
2875 justify-content: center;
2876 -webkit-box-align: center;
2877 -ms-flex-align: center;
2878 align-items: center;
2879 font-size: 14px;
2880 line-height: 16px;
2881 border: 0;
2882 border-radius: 4px;
2883 min-width: 60px;
2884 min-height: 36px;
2885 padding-left: 16px;
2886 padding-right: 16px;
2887 color: #fff;
2888 background-color: #3858E9;
2889 }
2890 .merchant-module-save-button i {
2891 position: absolute;
2892 width: auto;
2893 height: auto;
2894 font-size: 20px;
2895 opacity: 0;
2896 -webkit-animation: merchant-spin 1.5s infinite linear;
2897 animation: merchant-spin 1.5s infinite linear;
2898 }
2899
2900 .merchant-module-discard-button {
2901 cursor: pointer;
2902 display: -webkit-box;
2903 display: -ms-flexbox;
2904 display: flex;
2905 -webkit-box-pack: center;
2906 -ms-flex-pack: center;
2907 justify-content: center;
2908 -webkit-box-align: center;
2909 -ms-flex-align: center;
2910 align-items: center;
2911 font-size: 14px;
2912 line-height: 16px;
2913 min-width: 36px;
2914 min-height: 36px;
2915 color: #fff;
2916 text-decoration: none;
2917 }
2918 .merchant-module-discard-button:hover {
2919 color: #fff;
2920 opacity: 0.75;
2921 }
2922 .merchant-module-discard-button:focus {
2923 outline: none;
2924 -webkit-box-shadow: none;
2925 box-shadow: none;
2926 }
2927
2928 .merchant-module-page-preview-browser-top {
2929 background: #323232;
2930 display: -webkit-box;
2931 display: -ms-flexbox;
2932 display: flex;
2933 -webkit-box-align: center;
2934 -ms-flex-align: center;
2935 align-items: center;
2936 height: 45px;
2937 padding-left: 9px;
2938 }
2939
2940 .merchant-module-page-preview-browser-top-circle {
2941 background: #616161;
2942 width: 12px;
2943 height: 12px;
2944 border-radius: 50%;
2945 display: block;
2946 margin-left: 7px;
2947 }
2948
2949 .merchant-module-page-preview-browser {
2950 border-top-left-radius: 5px;
2951 border-top-right-radius: 5px;
2952 overflow: hidden;
2953 -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2954 box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2955 margin-bottom: -29px;
2956 display: -webkit-box;
2957 display: -ms-flexbox;
2958 display: flex;
2959 -webkit-box-orient: vertical;
2960 -webkit-box-direction: normal;
2961 -ms-flex-direction: column;
2962 flex-direction: column;
2963 }
2964
2965 .merchant-module-page-preview-browser-inner {
2966 -webkit-box-flex: 1;
2967 -ms-flex-positive: 1;
2968 flex-grow: 1;
2969 position: relative;
2970 display: block;
2971 }
2972
2973 .merchant-module-page-preview-box {
2974 overflow: hidden;
2975 position: sticky;
2976 top: 45px;
2977 }
2978
2979 .merchant-module-page-settings,
2980 .merchant-module-page-preview-box {
2981 display: -webkit-box;
2982 display: -ms-flexbox;
2983 display: flex;
2984 grid-gap: 30px;
2985 -webkit-box-orient: vertical;
2986 -webkit-box-direction: normal;
2987 -ms-flex-direction: column;
2988 flex-direction: column;
2989 padding: 30px;
2990 background-color: #fff;
2991 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
2992 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
2993 border-radius: 4px;
2994 }
2995
2996 .merchant-module-page-setting-box {
2997 display: -webkit-box;
2998 display: -ms-flexbox;
2999 display: flex;
3000 }
3001 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 {
3002 -webkit-box-orient: vertical;
3003 -webkit-box-direction: normal;
3004 -ms-flex-direction: column;
3005 flex-direction: column;
3006 grid-gap: 20px;
3007 }
3008 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-title,
3009 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-fields {
3010 width: 100%;
3011 }
3012
3013 .merchant-module-page-preview-title,
3014 .merchant-module-page-setting-title {
3015 margin-top: 0;
3016 padding-right: 50px;
3017 font-size: 20px;
3018 font-weight: 500;
3019 color: #2F2F2F;
3020 }
3021
3022 .merchant-module-page-setting-title {
3023 width: 40%;
3024 }
3025
3026 .merchant-module-page-setting-subtitle {
3027 margin-top: 20px;
3028 font-size: 13px;
3029 font-weight: 400;
3030 color: #757575;
3031 }
3032
3033 .merchant-module-page-setting-fields {
3034 display: -webkit-box;
3035 display: -ms-flexbox;
3036 display: flex;
3037 -webkit-box-orient: vertical;
3038 -webkit-box-direction: normal;
3039 -ms-flex-direction: column;
3040 flex-direction: column;
3041 width: 60%;
3042 padding: 30px;
3043 border-radius: 4px;
3044 border: 2px solid #F0F0F1;
3045 background-color: #fff;
3046 }
3047 .merchant-module-page-setting-fields > .merchant-module-page-setting-field:last-of-type {
3048 margin-bottom: 0;
3049 }
3050 .merchant-module-page-setting-fields > .merchant-module-page-setting-field:not(.merchant-hide):not(:has(~ .merchant-module-page-setting-field:not(.merchant-hide))) {
3051 margin-bottom: 0;
3052 }
3053
3054 .merchant-module-page-setting-field {
3055 display: -webkit-box;
3056 display: -ms-flexbox;
3057 display: flex;
3058 grid-gap: 10px;
3059 -webkit-box-orient: vertical;
3060 -webkit-box-direction: normal;
3061 -ms-flex-direction: column;
3062 flex-direction: column;
3063 margin-bottom: 24px;
3064 }
3065 .merchant-module-page-setting-field.merchant-show {
3066 display: -webkit-box;
3067 display: -ms-flexbox;
3068 display: flex;
3069 }
3070 .merchant-module-page-setting-field.merchant-hide {
3071 display: none;
3072 }
3073 .merchant-module-page-setting-field[data-id=shortcode_text] {
3074 margin-top: 24px;
3075 }
3076
3077 .merchant-module-page-setting-field-title {
3078 font-size: 14px;
3079 font-weight: 500;
3080 color: #2F2F2F;
3081 }
3082 .merchant-module-page-setting-field-title__has-upsell {
3083 gap: 7px !important;
3084 }
3085 .merchant-module-page-setting-field-title__has-upsell,
3086 .merchant-module-page-setting-field-title__has-upsell a span {
3087 display: -webkit-box;
3088 display: -ms-flexbox;
3089 display: flex;
3090 -webkit-box-align: center;
3091 -ms-flex-align: center;
3092 align-items: center;
3093 }
3094
3095 .merchant-module-page-setting-field-desc {
3096 font-size: 13px;
3097 font-weight: 400;
3098 color: #777;
3099 }
3100 .merchant-module-page-setting-field-desc-has-hidden-desc {
3101 display: -webkit-box;
3102 display: -ms-flexbox;
3103 display: flex;
3104 gap: 5px;
3105 }
3106 .merchant-module-page-setting-field-desc a {
3107 color: #3858E9;
3108 }
3109 .merchant-module-page-setting-field-desc a:focus {
3110 -webkit-box-shadow: none;
3111 box-shadow: none;
3112 }
3113
3114 .merchant-module-page-setting-field-hidden-desc {
3115 display: none;
3116 }
3117 .merchant-module-page-setting-field-hidden-desc-trigger {
3118 color: #3858E9;
3119 font-weight: 500;
3120 display: -webkit-box;
3121 display: -ms-flexbox;
3122 display: flex;
3123 -webkit-box-align: center;
3124 -ms-flex-align: center;
3125 align-items: center;
3126 white-space: nowrap;
3127 -webkit-user-select: none;
3128 -moz-user-select: none;
3129 -ms-user-select: none;
3130 user-select: none;
3131 cursor: pointer;
3132 gap: 3px;
3133 }
3134 .merchant-module-page-setting-field-hidden-desc-trigger img {
3135 margin-top: 2px;
3136 }
3137 .merchant-module-page-setting-field-hidden-desc-trigger.expanded img {
3138 -webkit-transform: rotate(180deg);
3139 transform: rotate(180deg);
3140 }
3141
3142 .merchant-license-form-wrapper .merchant-license-form {
3143 display: -webkit-box;
3144 display: -ms-flexbox;
3145 display: flex;
3146 -ms-flex-wrap: wrap;
3147 flex-wrap: wrap;
3148 grid-gap: 10px;
3149 }
3150 .merchant-license-form-wrapper .merchant-license-form input {
3151 width: 400px;
3152 max-width: 100%;
3153 padding-left: 38px;
3154 min-height: 40px;
3155 }
3156 .merchant-license-form-wrapper .merchant-license-form input::-webkit-input-placeholder {
3157 opacity: 0.75;
3158 }
3159 .merchant-license-form-wrapper .merchant-license-form input::-moz-placeholder {
3160 opacity: 0.75;
3161 }
3162 .merchant-license-form-wrapper .merchant-license-form input:-ms-input-placeholder {
3163 opacity: 0.75;
3164 }
3165 .merchant-license-form-wrapper .merchant-license-form input::-ms-input-placeholder {
3166 opacity: 0.75;
3167 }
3168 .merchant-license-form-wrapper .merchant-license-form input::placeholder {
3169 opacity: 0.75;
3170 }
3171 .merchant-license-form-wrapper .merchant-license-form button,
3172 .merchant-license-form-wrapper .merchant-license-form button:disabled {
3173 position: relative;
3174 display: -webkit-box;
3175 display: -ms-flexbox;
3176 display: flex;
3177 grid-gap: 2px;
3178 -webkit-box-align: center;
3179 -ms-flex-align: center;
3180 align-items: center;
3181 line-height: 1em;
3182 min-height: 36px;
3183 padding: 10px 40px !important;
3184 background-color: #3452da !important;
3185 color: #FFF !important;
3186 border-color: #3452da !important;
3187 }
3188 .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,
3189 .merchant-license-form-wrapper .merchant-license-form button:disabled:hover,
3190 .merchant-license-form-wrapper .merchant-license-form button:disabled:focus,
3191 .merchant-license-form-wrapper .merchant-license-form button:disabled:active {
3192 opacity: 0.8;
3193 }
3194 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate,
3195 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate {
3196 background-color: #d82c0d !important;
3197 border-color: #d82c0d !important;
3198 }
3199 .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,
3200 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:hover,
3201 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:focus,
3202 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:active {
3203 color: #FFF;
3204 }
3205 .merchant-license-form-wrapper .merchant-license-form button .merchant-license-loader,
3206 .merchant-license-form-wrapper .merchant-license-form button:disabled .merchant-license-loader {
3207 display: -webkit-inline-box;
3208 display: -ms-inline-flexbox;
3209 display: inline-flex;
3210 -webkit-box-align: center;
3211 -ms-flex-align: center;
3212 align-items: center;
3213 -webkit-box-pack: center;
3214 -ms-flex-pack: center;
3215 justify-content: center;
3216 -ms-flex-negative: 0;
3217 flex-shrink: 0;
3218 margin-right: 6px;
3219 font-size: 14px;
3220 width: 14px;
3221 height: 14px;
3222 -webkit-animation: merchant-spin 1.5s infinite linear;
3223 animation: merchant-spin 1.5s infinite linear;
3224 }
3225 .merchant-license-form-wrapper .merchant-license-key-input {
3226 position: relative;
3227 display: -webkit-box;
3228 display: -ms-flexbox;
3229 display: flex;
3230 }
3231 @media (max-width: 768px) {
3232 .merchant-license-form-wrapper .merchant-license-key-input {
3233 max-width: 100%;
3234 }
3235 }
3236 .merchant-license-form-wrapper .merchant-license-key-input i {
3237 position: absolute;
3238 z-index: 1;
3239 top: 50%;
3240 left: 14px;
3241 -webkit-transform: translateY(-50%);
3242 transform: translateY(-50%);
3243 margin-top: 1px;
3244 font-size: 20px !important;
3245 color: #5C5F62;
3246 }
3247
3248 .merchant-license-response-wrapper,
3249 .merchant-dashboard-license-success {
3250 display: block;
3251 margin-top: 10px;
3252 color: #757575;
3253 }
3254 .merchant-license-response-wrapper:empty,
3255 .merchant-dashboard-license-success:empty {
3256 margin-top: 0;
3257 }
3258 .merchant-license-response-wrapper span,
3259 .merchant-dashboard-license-success span {
3260 color: #0b890b;
3261 margin-left: 5px;
3262 }
3263
3264 .merchant-license-instruction {
3265 width: 360px;
3266 max-width: 100%;
3267 margin-top: 15px;
3268 }
3269 .merchant-license-instruction .ui-helper-reset {
3270 margin: 0;
3271 }
3272 .merchant-license-instruction-header {
3273 cursor: pointer;
3274 display: -webkit-box;
3275 display: -ms-flexbox;
3276 display: flex;
3277 -webkit-box-align: center;
3278 -ms-flex-align: center;
3279 align-items: center;
3280 gap: 5px;
3281 color: #3858e9;
3282 background-color: #e8ecff;
3283 padding: 7px 5px;
3284 }
3285 .merchant-license-instruction-content {
3286 display: -webkit-box;
3287 display: -ms-flexbox;
3288 display: flex;
3289 -webkit-box-orient: vertical;
3290 -webkit-box-direction: normal;
3291 -ms-flex-direction: column;
3292 flex-direction: column;
3293 gap: 3px;
3294 border: 1px solid #E8ECFF;
3295 padding: 10px;
3296 border-top: none;
3297 }
3298 .merchant-license-instruction-content li {
3299 color: #6D7175;
3300 font-size: 13px;
3301 position: relative;
3302 padding-left: 15px;
3303 }
3304 .merchant-license-instruction-content svg {
3305 position: absolute;
3306 left: 0;
3307 top: 6px;
3308 }
3309 .merchant-license-instruction-caret {
3310 margin-inline: auto 6px;
3311 margin-top: -3px;
3312 }
3313 .merchant-license-instruction .ui-accordion-header-collapsed .merchant-license-instruction-caret svg {
3314 -webkit-transform: rotate(180deg);
3315 transform: rotate(180deg);
3316 }
3317
3318 .merchant-datetime-field input,
3319 .merchant-module-page-setting-field-text input,
3320 .merchant-module-page-setting-field-url input,
3321 .merchant-module-page-setting-field-number input,
3322 .merchant-module-page-setting-field-text_readonly input {
3323 padding: 12px;
3324 line-height: 1.3em;
3325 width: 100%;
3326 max-width: 100%;
3327 min-height: auto;
3328 border: 1px solid #D6D6D6;
3329 }
3330 .merchant-datetime-field input:focus,
3331 .merchant-module-page-setting-field-text input:focus,
3332 .merchant-module-page-setting-field-url input:focus,
3333 .merchant-module-page-setting-field-number input:focus,
3334 .merchant-module-page-setting-field-text_readonly input:focus {
3335 outline: none;
3336 -webkit-box-shadow: none;
3337 box-shadow: none;
3338 border-color: #3858E9;
3339 }
3340
3341 .merchant-module-page-setting-field-textarea_multiline textarea,
3342 .merchant-module-page-setting-field-textarea textarea,
3343 .merchant-module-page-setting-field-textarea_code textarea {
3344 padding: 12px;
3345 line-height: 1.4;
3346 width: 100%;
3347 max-width: 100%;
3348 min-height: 120px;
3349 border: 1px solid #D6D6D6;
3350 }
3351 .merchant-module-page-setting-field-textarea_multiline textarea:focus,
3352 .merchant-module-page-setting-field-textarea textarea:focus,
3353 .merchant-module-page-setting-field-textarea_code textarea:focus {
3354 outline: none;
3355 -webkit-box-shadow: none;
3356 box-shadow: none;
3357 border-color: #3858E9;
3358 }
3359
3360 .merchant-module-page-setting-field-radio div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
3361 .merchant-module-page-setting-field-radio_alt div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
3362 .merchant-module-page-setting-field-checkbox div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
3363 .merchant-module-page-setting-field-checkbox_multiple div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode) {
3364 display: -webkit-box;
3365 display: -ms-flexbox;
3366 display: flex;
3367 -ms-flex-wrap: wrap;
3368 flex-wrap: wrap;
3369 grid-gap: 30px;
3370 }
3371 .merchant-module-page-setting-field-radio label,
3372 .merchant-module-page-setting-field-radio_alt label,
3373 .merchant-module-page-setting-field-checkbox label,
3374 .merchant-module-page-setting-field-checkbox_multiple label {
3375 display: -webkit-box;
3376 display: -ms-flexbox;
3377 display: flex;
3378 grid-gap: 12px;
3379 -webkit-box-align: center;
3380 -ms-flex-align: center;
3381 align-items: center;
3382 -webkit-user-select: none;
3383 -moz-user-select: none;
3384 -ms-user-select: none;
3385 user-select: none;
3386 }
3387 .merchant-module-page-setting-field-radio span,
3388 .merchant-module-page-setting-field-radio_alt span,
3389 .merchant-module-page-setting-field-checkbox span,
3390 .merchant-module-page-setting-field-checkbox_multiple span {
3391 font-size: 14px;
3392 font-weight: 400;
3393 color: #1D2327;
3394 }
3395 .merchant-module-page-setting-field-radio input,
3396 .merchant-module-page-setting-field-radio_alt input,
3397 .merchant-module-page-setting-field-checkbox input,
3398 .merchant-module-page-setting-field-checkbox_multiple input {
3399 -ms-flex-negative: 0;
3400 flex-shrink: 0;
3401 margin: 0;
3402 width: 20px;
3403 height: 20px;
3404 border: 1px solid #D6D6D6;
3405 background-color: #fff;
3406 display: -webkit-inline-box;
3407 display: -ms-inline-flexbox;
3408 display: inline-flex;
3409 -webkit-box-align: center;
3410 -ms-flex-align: center;
3411 align-items: center;
3412 -webkit-box-pack: center;
3413 -ms-flex-pack: center;
3414 justify-content: center;
3415 -webkit-transition: none;
3416 transition: none;
3417 -webkit-box-sizing: border-box;
3418 box-sizing: border-box;
3419 -webkit-box-shadow: none;
3420 box-shadow: none;
3421 }
3422 .merchant-module-page-setting-field-radio input:checked,
3423 .merchant-module-page-setting-field-radio_alt input:checked,
3424 .merchant-module-page-setting-field-checkbox input:checked,
3425 .merchant-module-page-setting-field-checkbox_multiple input:checked {
3426 -webkit-transition: none;
3427 transition: none;
3428 }
3429 .merchant-module-page-setting-field-radio input:checked::before,
3430 .merchant-module-page-setting-field-radio_alt input:checked::before,
3431 .merchant-module-page-setting-field-checkbox input:checked::before,
3432 .merchant-module-page-setting-field-checkbox_multiple input:checked::before {
3433 content: "";
3434 margin: 0;
3435 padding: 0;
3436 -webkit-box-sizing: border-box;
3437 box-sizing: border-box;
3438 -webkit-transition: none;
3439 transition: none;
3440 }
3441 .merchant-module-page-setting-field-radio input[type=checkbox],
3442 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
3443 .merchant-module-page-setting-field-checkbox input[type=checkbox],
3444 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox] {
3445 border-radius: 6px;
3446 }
3447 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
3448 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
3449 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus,
3450 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:focus {
3451 border-color: #fff;
3452 -webkit-box-shadow: 0 0 0 2px #3858E9;
3453 box-shadow: 0 0 0 2px #3858E9;
3454 }
3455 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
3456 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
3457 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked,
3458 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked {
3459 border-color: #fff;
3460 background-color: #3858E9;
3461 }
3462 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
3463 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
3464 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before,
3465 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked::before {
3466 width: 100%;
3467 height: 100%;
3468 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");
3469 background-repeat: no-repeat;
3470 background-position: 3px 4px;
3471 }
3472 .merchant-module-page-setting-field-radio input[type=radio],
3473 .merchant-module-page-setting-field-radio_alt input[type=radio],
3474 .merchant-module-page-setting-field-checkbox input[type=radio],
3475 .merchant-module-page-setting-field-checkbox_multiple input[type=radio] {
3476 border-radius: 100%;
3477 }
3478 .merchant-module-page-setting-field-radio input[type=radio]:focus,
3479 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
3480 .merchant-module-page-setting-field-checkbox input[type=radio]:focus,
3481 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:focus {
3482 border-color: #fff;
3483 -webkit-box-shadow: none;
3484 box-shadow: none;
3485 }
3486 .merchant-module-page-setting-field-radio input[type=radio]:checked,
3487 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
3488 .merchant-module-page-setting-field-checkbox input[type=radio]:checked,
3489 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked {
3490 border-color: #3858E9;
3491 background-color: #fff;
3492 -webkit-box-shadow: 0 0 0 1px #3858E9;
3493 box-shadow: 0 0 0 1px #3858E9;
3494 }
3495 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
3496 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
3497 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before,
3498 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked::before {
3499 width: 12px;
3500 height: 12px;
3501 border-radius: 12px;
3502 background-color: #3858E9;
3503 }
3504
3505 .merchant-module-page-setting-field-checkbox_multiple div {
3506 grid-gap: 0;
3507 }
3508 .merchant-module-page-setting-field-checkbox_multiple .merchant-module-page-setting-field-inner {
3509 display: -webkit-box;
3510 display: -ms-flexbox;
3511 display: flex;
3512 -webkit-box-orient: vertical;
3513 -webkit-box-direction: normal;
3514 -ms-flex-direction: column;
3515 flex-direction: column;
3516 gap: 15px !important;
3517 }
3518
3519 @media (max-width: 1300px) {
3520 .merchant-module-page-setting-field-radio div {
3521 grid-gap: 20px;
3522 }
3523 }
3524 .merchant-module-page-setting-field-radio span {
3525 opacity: 0.8;
3526 }
3527 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
3528 opacity: 1;
3529 }
3530
3531 .merchant-module-page-setting-field-radio_alt div {
3532 display: -webkit-box;
3533 display: -ms-flexbox;
3534 display: flex;
3535 grid-gap: 10px;
3536 -webkit-box-orient: vertical;
3537 -webkit-box-direction: normal;
3538 -ms-flex-direction: column;
3539 flex-direction: column;
3540 }
3541 .merchant-module-page-setting-field-radio_alt label span {
3542 font-size: 14px;
3543 font-weight: 400;
3544 color: #1D2327;
3545 }
3546 .merchant-module-page-setting-field-radio_alt p {
3547 margin: 0;
3548 color: #757575;
3549 }
3550 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
3551 grid-gap: 30px;
3552 -webkit-box-orient: vertical;
3553 -webkit-box-direction: normal;
3554 -ms-flex-direction: column;
3555 flex-direction: column;
3556 }
3557 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode > div {
3558 grid-gap: 5px;
3559 }
3560 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode label {
3561 -webkit-box-align: start;
3562 -ms-flex-align: start;
3563 align-items: flex-start;
3564 }
3565 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode p {
3566 margin-left: 32px;
3567 }
3568
3569 .merchant-module-page-setting-field-content {
3570 max-width: 60vw;
3571 }
3572 .merchant-module-page-setting-field-content a {
3573 color: #3858E9;
3574 }
3575 .merchant-module-page-setting-field-content a:focus {
3576 -webkit-box-shadow: none;
3577 box-shadow: none;
3578 }
3579 .merchant-module-page-setting-field-content .merchant-module-page-setting-field-inner:empty {
3580 display: none;
3581 }
3582
3583 .merchant-info-block,
3584 .merchant-tag-pre-orders {
3585 display: -webkit-box;
3586 display: -ms-flexbox;
3587 display: flex;
3588 grid-gap: 16px;
3589 }
3590 .merchant-info-block a,
3591 .merchant-tag-pre-orders a {
3592 display: -webkit-box;
3593 display: -ms-flexbox;
3594 display: flex;
3595 -webkit-box-align: center;
3596 -ms-flex-align: center;
3597 align-items: center;
3598 -webkit-box-pack: center;
3599 -ms-flex-pack: center;
3600 justify-content: center;
3601 margin: 0;
3602 padding: 8px 26px;
3603 font-size: 14px;
3604 line-height: 20px;
3605 -webkit-user-select: none;
3606 -moz-user-select: none;
3607 -ms-user-select: none;
3608 user-select: none;
3609 min-width: 145px;
3610 font-weight: 500;
3611 text-decoration: none;
3612 border-radius: 4px;
3613 color: #202223;
3614 border: 1px solid #C9CCCF;
3615 background-color: #fff;
3616 }
3617 .merchant-info-block a:focus, .merchant-info-block a:active,
3618 .merchant-tag-pre-orders a:focus,
3619 .merchant-tag-pre-orders a:active {
3620 outline: none;
3621 -webkit-box-shadow: none;
3622 box-shadow: none;
3623 }
3624 .merchant-info-block p,
3625 .merchant-tag-pre-orders p {
3626 display: -webkit-box;
3627 display: -ms-flexbox;
3628 display: flex;
3629 -webkit-box-orient: vertical;
3630 -webkit-box-direction: normal;
3631 -ms-flex-direction: column;
3632 flex-direction: column;
3633 -webkit-box-align: start;
3634 -ms-flex-align: start;
3635 align-items: flex-start;
3636 grid-gap: 16px;
3637 font-size: 14px;
3638 line-height: 20px;
3639 margin: 0;
3640 padding: 0;
3641 }
3642 .merchant-info-block p i,
3643 .merchant-tag-pre-orders p i {
3644 -ms-flex-negative: 0;
3645 flex-shrink: 0;
3646 }
3647
3648 .merchant-info-block {
3649 padding: 15px;
3650 border-radius: 4px;
3651 border: 1px solid #BABFC3;
3652 }
3653
3654 .merchant-module-page-setting-field-select select,
3655 .merchant-module-page-setting-field-select_ajax select,
3656 .merchant-module-page-setting-field-select_size_chart select {
3657 padding: 12px 20px 12px 12px;
3658 line-height: 1.3em;
3659 width: 100%;
3660 max-width: 100%;
3661 min-height: auto;
3662 border-radius: 6px;
3663 color: #2F2F2F;
3664 border: 1px solid #D6D6D6;
3665 }
3666 .merchant-module-page-setting-field-select select:hover,
3667 .merchant-module-page-setting-field-select_ajax select:hover,
3668 .merchant-module-page-setting-field-select_size_chart select:hover {
3669 color: #2F2F2F;
3670 }
3671 .merchant-module-page-setting-field-select select:focus,
3672 .merchant-module-page-setting-field-select_ajax select:focus,
3673 .merchant-module-page-setting-field-select_size_chart select:focus {
3674 outline: none;
3675 -webkit-box-shadow: none;
3676 box-shadow: none;
3677 border-color: #3858E9;
3678 }
3679 .merchant-module-page-setting-field-select select option,
3680 .merchant-module-page-setting-field-select_ajax select option,
3681 .merchant-module-page-setting-field-select_size_chart select option {
3682 color: #2F2F2F;
3683 }
3684 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
3685 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
3686 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
3687 height: 44px !important;
3688 border: solid #d6d6d6 1px;
3689 }
3690 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
3691 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
3692 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
3693 line-height: 41px !important;
3694 }
3695 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple,
3696 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple,
3697 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple {
3698 display: -webkit-box;
3699 display: -ms-flexbox;
3700 display: flex;
3701 -webkit-box-align: center;
3702 -ms-flex-align: center;
3703 align-items: center;
3704 border: solid #d6d6d6 1px;
3705 }
3706 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__rendered,
3707 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__rendered,
3708 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__rendered {
3709 padding: 5px 10px;
3710 }
3711 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice,
3712 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice,
3713 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice {
3714 margin-top: 6px;
3715 margin-bottom: 0;
3716 }
3717 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3718 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3719 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field {
3720 position: relative;
3721 top: 3px;
3722 margin-top: 0;
3723 }
3724 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-search__field,
3725 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-search__field,
3726 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-search__field {
3727 min-height: 0;
3728 border: none;
3729 }
3730 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--single,
3731 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--multiple,
3732 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--single,
3733 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--multiple,
3734 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--single,
3735 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--multiple {
3736 border-color: #3858E9;
3737 }
3738 .merchant-module-page-setting-field-select .select2-selection__arrow,
3739 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
3740 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
3741 height: 43px !important;
3742 }
3743
3744 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
3745 display: -webkit-box;
3746 display: -ms-flexbox;
3747 display: flex;
3748 grid-gap: 15px;
3749 }
3750 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
3751 width: 100%;
3752 }
3753 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
3754 width: 100px;
3755 }
3756
3757 .merchant-module-page-setting-field-choices input {
3758 display: none;
3759 }
3760 .merchant-module-page-setting-field-choices input:checked + figure {
3761 border-color: #3858E9;
3762 }
3763 .merchant-module-page-setting-field-choices input:disabled + figure {
3764 opacity: 0.5;
3765 cursor: not-allowed;
3766 }
3767 .merchant-module-page-setting-field-choices label {
3768 display: -webkit-box;
3769 display: -ms-flexbox;
3770 display: flex;
3771 position: relative;
3772 }
3773 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
3774 opacity: 1;
3775 visibility: visible;
3776 -webkit-transform: translate3d(-50%, 0, 0);
3777 transform: translate3d(-50%, 0, 0);
3778 }
3779 .merchant-module-page-setting-field-choices figure {
3780 display: -webkit-box;
3781 display: -ms-flexbox;
3782 display: flex;
3783 margin: 0;
3784 padding: 2px;
3785 border-radius: 4px;
3786 border: 2px solid transparent;
3787 }
3788 .merchant-module-page-setting-field-choices .merchant-tooltip {
3789 position: absolute;
3790 z-index: 10;
3791 left: 50%;
3792 bottom: calc(100% + 12px);
3793 padding: 3px 12px;
3794 font-size: 11px;
3795 white-space: nowrap;
3796 opacity: 0;
3797 visibility: hidden;
3798 -webkit-transform: translate3d(-50%, 6px, 0);
3799 transform: translate3d(-50%, 6px, 0);
3800 -webkit-transition: all 0.2s;
3801 transition: all 0.2s;
3802 border-radius: 3px;
3803 color: #f7f7f7;
3804 background-color: #212121;
3805 }
3806 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
3807 content: "";
3808 position: absolute;
3809 left: 50%;
3810 bottom: -12px;
3811 border: 6px solid transparent;
3812 border-top-color: #212121;
3813 -webkit-transform: translate3d(-50%, 0, 0);
3814 transform: translate3d(-50%, 0, 0);
3815 }
3816 .merchant-module-page-setting-field-choices .merchant-choices {
3817 display: -webkit-box;
3818 display: -ms-flexbox;
3819 display: flex;
3820 -ms-flex-wrap: wrap;
3821 flex-wrap: wrap;
3822 grid-gap: 10px;
3823 }
3824 .merchant-module-page-setting-field-choices .merchant-choices label {
3825 cursor: pointer;
3826 }
3827 .merchant-module-page-setting-field-choices .merchant-choices svg {
3828 width: 20px;
3829 height: 20px;
3830 }
3831
3832 .merchant-module-page-setting-field-buttons input {
3833 display: none;
3834 }
3835 .merchant-module-page-setting-field-buttons input:checked + span {
3836 color: #fff;
3837 background-color: #3858E9;
3838 }
3839 .merchant-module-page-setting-field-buttons label {
3840 display: -webkit-box;
3841 display: -ms-flexbox;
3842 display: flex;
3843 }
3844 .merchant-module-page-setting-field-buttons span {
3845 display: -webkit-box;
3846 display: -ms-flexbox;
3847 display: flex;
3848 -webkit-box-align: center;
3849 -ms-flex-align: center;
3850 align-items: center;
3851 -webkit-box-pack: center;
3852 -ms-flex-pack: center;
3853 justify-content: center;
3854 margin: 0;
3855 padding: 10px 15px;
3856 border-radius: 2px;
3857 -webkit-user-select: none;
3858 -moz-user-select: none;
3859 -ms-user-select: none;
3860 user-select: none;
3861 min-width: 120px;
3862 font-weight: 500;
3863 }
3864 .merchant-module-page-setting-field-buttons .merchant-buttons {
3865 display: -webkit-inline-box;
3866 display: -ms-inline-flexbox;
3867 display: inline-flex;
3868 padding: 3px;
3869 border: 1px solid #D6D6D6;
3870 border-radius: 4px;
3871 }
3872 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3873 text-decoration: underline;
3874 }
3875 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3876 text-decoration: line-through;
3877 }
3878 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3879 text-decoration: overline;
3880 }
3881
3882 .merchant-module-page-setting-field-buttons_content input,
3883 .merchant-module-page-setting-field-buttons_alt input {
3884 display: none;
3885 }
3886 .merchant-module-page-setting-field-buttons_content label,
3887 .merchant-module-page-setting-field-buttons_alt label {
3888 display: -webkit-box;
3889 display: -ms-flexbox;
3890 display: flex;
3891 cursor: pointer;
3892 }
3893 .merchant-module-page-setting-field-buttons_content label:hover,
3894 .merchant-module-page-setting-field-buttons_alt label:hover {
3895 position: relative;
3896 z-index: 10;
3897 }
3898 .merchant-module-page-setting-field-buttons_content label > span,
3899 .merchant-module-page-setting-field-buttons_alt label > span {
3900 display: -webkit-box;
3901 display: -ms-flexbox;
3902 display: flex;
3903 -webkit-box-align: center;
3904 -ms-flex-align: center;
3905 align-items: center;
3906 -webkit-box-pack: center;
3907 -ms-flex-pack: center;
3908 justify-content: center;
3909 margin: 0;
3910 padding: 10px 15px;
3911 -webkit-user-select: none;
3912 -moz-user-select: none;
3913 -ms-user-select: none;
3914 user-select: none;
3915 min-width: 120px;
3916 font-weight: 500;
3917 border-radius: 4px;
3918 border: 1px solid #D6D6D6;
3919 background-color: #fff;
3920 }
3921 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content,
3922 .merchant-module-page-setting-field-buttons_content .merchant-buttons,
3923 .merchant-module-page-setting-field-buttons_alt .merchant-buttons-content,
3924 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3925 display: -webkit-box;
3926 display: -ms-flexbox;
3927 display: flex;
3928 -ms-flex-wrap: wrap;
3929 flex-wrap: wrap;
3930 grid-gap: 5px;
3931 padding: 3px;
3932 }
3933
3934 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3935 color: #fff;
3936 background-color: #3858E9;
3937 }
3938
3939 .merchant-module-page-setting-field-buttons_content input:checked + span {
3940 color: inherit;
3941 border: 1px solid #3858E9;
3942 -webkit-box-shadow: 0 0 0 1px #3858e9 inset;
3943 box-shadow: 0 0 0 1px #3858e9 inset;
3944 }
3945 .merchant-module-page-setting-field-buttons_content label {
3946 -webkit-box-flex: 1;
3947 -ms-flex: 1;
3948 flex: 1;
3949 }
3950 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content {
3951 gap: 10px;
3952 }
3953 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content {
3954 display: -webkit-box;
3955 display: -ms-flexbox;
3956 display: flex;
3957 -webkit-box-align: center;
3958 -ms-flex-align: center;
3959 align-items: center;
3960 -webkit-box-pack: start;
3961 -ms-flex-pack: start;
3962 justify-content: flex-start;
3963 gap: 10px;
3964 -webkit-box-flex: 1;
3965 -ms-flex: 1;
3966 flex: 1;
3967 }
3968 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content > span {
3969 display: -webkit-box;
3970 display: -ms-flexbox;
3971 display: flex;
3972 -ms-flex-item-align: stretch;
3973 align-self: stretch;
3974 -webkit-box-orient: vertical;
3975 -webkit-box-direction: normal;
3976 -ms-flex-direction: column;
3977 flex-direction: column;
3978 gap: 5px;
3979 }
3980
3981 .merchant-animated-buttons .merchant-buttons {
3982 display: grid;
3983 grid-template-columns: repeat(5, 1fr);
3984 }
3985 .merchant-animated-buttons span {
3986 width: 100%;
3987 }
3988
3989 @media (max-width: 1470px) {
3990 .merchant-animated-buttons .merchant-buttons {
3991 grid-template-columns: repeat(3, 1fr);
3992 }
3993 }
3994 @media (max-width: 1050px) {
3995 .merchant-animated-buttons .merchant-buttons {
3996 grid-template-columns: repeat(2, 1fr);
3997 }
3998 }
3999 /* Sortable Field */
4000 .merchant-sortable {
4001 max-width: 300px;
4002 }
4003 .merchant-sortable ul.ui-sortable li {
4004 position: relative;
4005 overflow: hidden;
4006 padding: 0;
4007 color: #1E1E1E;
4008 border: 1px solid #ddd;
4009 border-radius: 2px;
4010 text-transform: capitalize;
4011 line-height: 36px;
4012 cursor: -webkit-grab;
4013 cursor: grab;
4014 }
4015 .merchant-sortable ul.ui-sortable li .dashicons {
4016 width: 36px;
4017 height: 36px;
4018 -ms-flex-preferred-size: 36px;
4019 flex-basis: 36px;
4020 display: -webkit-box;
4021 display: -ms-flexbox;
4022 display: flex;
4023 -webkit-box-pack: center;
4024 -ms-flex-pack: center;
4025 justify-content: center;
4026 -webkit-box-align: center;
4027 -ms-flex-align: center;
4028 align-items: center;
4029 text-align: center;
4030 -webkit-box-sizing: border-box;
4031 box-sizing: border-box;
4032 }
4033 .merchant-sortable ul.ui-sortable li .dashicons:before {
4034 font-size: 16px;
4035 line-height: 1em;
4036 }
4037 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
4038 float: left;
4039 padding: 0;
4040 margin: 0 10px 0 0;
4041 border: none;
4042 border-right: 1px solid #ddd;
4043 }
4044 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
4045 float: right;
4046 color: #3858E9;
4047 padding: 0;
4048 margin: 0 0 0 10px;
4049 border: none;
4050 border-left: 1px solid #ddd;
4051 }
4052 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
4053 cursor: pointer;
4054 }
4055 .merchant-sortable ul.ui-sortable li.invisible {
4056 color: #6E7780;
4057 border: 1px solid #CAD2F6;
4058 background-color: #EBEEFB;
4059 }
4060 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
4061 content: "\f530";
4062 }
4063
4064 /* Sortable Repeater Field */
4065 .merchant-group-field {
4066 padding: 30px 20px;
4067 border: 2px solid #F0F0F1;
4068 border-radius: 4px;
4069 margin-bottom: 20px;
4070 }
4071 .merchant-group-field .title-area {
4072 position: relative;
4073 }
4074 .merchant-group-field .title-area .merchant-module-page-setting-field-title {
4075 margin-bottom: 10px;
4076 }
4077 .merchant-group-field .title-area .field-status:not(.hidden) {
4078 border-radius: 15px;
4079 padding: 3px 8px;
4080 font-size: 12px;
4081 margin-left: 20px;
4082 }
4083 .merchant-group-field .title-area .field-status:not(.hidden).active {
4084 color: #04543F;
4085 background-color: #DEF7EC;
4086 }
4087 .merchant-group-field .title-area .field-status:not(.hidden).inactive {
4088 color: #723B14;
4089 background-color: #FDF6B2;
4090 }
4091 .merchant-group-field .title-area.accordion-style {
4092 padding-right: 40px;
4093 }
4094 .merchant-group-field .title-area.accordion-style .accordion-icon {
4095 position: absolute;
4096 top: 0;
4097 right: -7px;
4098 width: 40px;
4099 height: 40px;
4100 line-height: 40px;
4101 cursor: pointer;
4102 font-size: 17px;
4103 -webkit-transition: 300ms;
4104 transition: 300ms;
4105 }
4106 .merchant-group-field .title-area.accordion-style.ui-accordion-header-active .accordion-icon {
4107 -webkit-transform: rotate(180deg);
4108 transform: rotate(180deg);
4109 }
4110 .merchant-group-field .merchant-group-fields-container {
4111 padding-top: 20px;
4112 }
4113 .merchant-group-field .merchant-module-page-setting-field:last-child {
4114 margin-bottom: 0 !important;
4115 }
4116
4117 /* Sortable Repeater — Shared Base */
4118 .merchant-sortable-repeater-icons-control, .merchant-sortable-repeater-control {
4119 max-width: 100%;
4120 }
4121 .merchant-sortable-repeater-icons-control .sortable, .merchant-sortable-repeater-control .sortable {
4122 list-style-type: none;
4123 margin: 0;
4124 padding: 0;
4125 }
4126 .merchant-sortable-repeater-icons-control .sortable input[type=text], .merchant-sortable-repeater-control .sortable input[type=text] {
4127 width: 100%;
4128 margin: 0;
4129 border: 1px solid #D6D6D6;
4130 padding: 12px 8px;
4131 line-height: 1.3em;
4132 }
4133 .merchant-sortable-repeater-icons-control .sortable input[type=text]:focus, .merchant-sortable-repeater-control .sortable input[type=text]:focus {
4134 border-color: #3858E9;
4135 outline: none;
4136 -webkit-box-shadow: none;
4137 box-shadow: none;
4138 }
4139 .merchant-sortable-repeater-icons-control .sortable div.repeater, .merchant-sortable-repeater-control .sortable div.repeater {
4140 cursor: -webkit-grab;
4141 cursor: grab;
4142 margin-bottom: 7px;
4143 }
4144 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete,
4145 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete,
4146 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete {
4147 display: -webkit-box;
4148 display: -ms-flexbox;
4149 display: flex;
4150 -webkit-box-align: center;
4151 -ms-flex-align: center;
4152 align-items: center;
4153 -webkit-box-pack: center;
4154 -ms-flex-pack: center;
4155 justify-content: center;
4156 margin: 0;
4157 width: 44px;
4158 height: auto;
4159 font-size: 1.3em;
4160 line-height: 34px;
4161 color: #d4d4d4;
4162 background: #fff;
4163 padding: 0;
4164 vertical-align: top;
4165 margin-left: -1px;
4166 border: 1px solid #D6D6D6;
4167 text-decoration: none;
4168 }
4169 .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,
4170 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete .dashicons-no-alt,
4171 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete .dashicons-no-alt {
4172 width: 100%;
4173 text-decoration: none;
4174 margin: 0;
4175 font-weight: 600;
4176 color: #50575e;
4177 font-size: 1.1em;
4178 line-height: 34px;
4179 height: auto;
4180 }
4181 .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,
4182 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:hover,
4183 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:hover,
4184 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:focus,
4185 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:focus {
4186 outline: none;
4187 -webkit-box-shadow: none;
4188 box-shadow: none;
4189 }
4190 .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,
4191 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:hover .dashicons-no-alt,
4192 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:hover .dashicons-no-alt,
4193 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:focus .dashicons-no-alt,
4194 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:focus .dashicons-no-alt {
4195 color: #a7a7a7;
4196 }
4197 .merchant-sortable-repeater-icons-control .repeater, .merchant-sortable-repeater-control .repeater {
4198 display: -webkit-box;
4199 display: -ms-flexbox;
4200 display: flex;
4201 }
4202 .merchant-sortable-repeater-icons-control .repeater .dashicons-menu, .merchant-sortable-repeater-control .repeater .dashicons-menu {
4203 display: -webkit-box;
4204 display: -ms-flexbox;
4205 display: flex;
4206 -webkit-box-align: center;
4207 -ms-flex-align: center;
4208 align-items: center;
4209 -webkit-box-pack: center;
4210 -ms-flex-pack: center;
4211 justify-content: center;
4212 margin: 0;
4213 width: 44px;
4214 height: auto;
4215 font-size: 1.3em;
4216 line-height: 34px;
4217 background: #fff;
4218 padding: 0;
4219 vertical-align: top;
4220 margin-left: -1px;
4221 border: 1px solid #D6D6D6;
4222 }
4223 .merchant-sortable-repeater-icons-control .repeater .dashicons-menu:hover, .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
4224 color: #a7a7a7;
4225 }
4226 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-add, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add,
4227 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add,
4228 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add {
4229 color: #3858E9;
4230 border-color: #3858E9;
4231 background-color: transparent;
4232 margin-top: 10px;
4233 padding: 4px 19px;
4234 }
4235 .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,
4236 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add:hover,
4237 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add:hover,
4238 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add:focus,
4239 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add:focus {
4240 outline: none;
4241 -webkit-box-shadow: none;
4242 box-shadow: none;
4243 background-color: #ffffff;
4244 }
4245 .disable-sorting.merchant-sortable-repeater-icons-control .dashicons-menu, .disable-sorting.merchant-sortable-repeater-control .dashicons-menu {
4246 display: none;
4247 }
4248
4249 /* Sortable Repeater Field */
4250 .merchant-sortable-repeater-control .sortable input[type=text] {
4251 border-radius: 4px 0 0 4px;
4252 }
4253
4254 /* Sortable Repeater Icons Field */
4255 .merchant-sortable-repeater-icons-control .sortable input[type=text] {
4256 border-radius: 0;
4257 }
4258 .merchant-sortable-repeater-icons-control .repeater {
4259 position: relative;
4260 }
4261 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle {
4262 display: -webkit-box;
4263 display: -ms-flexbox;
4264 display: flex;
4265 -webkit-box-align: center;
4266 -ms-flex-align: center;
4267 align-items: center;
4268 -webkit-box-pack: center;
4269 -ms-flex-pack: center;
4270 justify-content: center;
4271 width: 44px;
4272 min-width: 44px;
4273 height: auto;
4274 padding: 0;
4275 margin: 0;
4276 border: 1px dashed #c4c4c4;
4277 border-radius: 0;
4278 background: #f9f9f9;
4279 cursor: pointer;
4280 -webkit-transition: border-color 0.2s ease, background-color 0.2s ease, border-style 0.2s ease;
4281 transition: border-color 0.2s ease, background-color 0.2s ease, border-style 0.2s ease;
4282 }
4283 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle:hover {
4284 border-color: #3858E9;
4285 border-style: solid;
4286 background-color: #f0f3ff;
4287 }
4288 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle.has-icon {
4289 border-color: #3858E9;
4290 border-style: solid;
4291 background-color: #EBEEFB;
4292 margin-right: 5px;
4293 }
4294 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle.has-icon svg {
4295 stroke: #3858E9;
4296 }
4297 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle .dashicons {
4298 font-size: 18px;
4299 width: 18px;
4300 height: 18px;
4301 color: #b0b0b0;
4302 -webkit-transition: color 0.2s ease;
4303 transition: color 0.2s ease;
4304 }
4305 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle:hover .dashicons {
4306 color: #3858E9;
4307 }
4308 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle svg {
4309 width: 18px;
4310 height: 18px;
4311 }
4312 .merchant-sortable-repeater-icons-control .merchant-icon-picker-dropdown {
4313 position: absolute;
4314 top: 100%;
4315 left: 0;
4316 z-index: 100;
4317 display: grid;
4318 grid-template-columns: repeat(auto-fill, 36px);
4319 gap: 4px;
4320 padding: 10px;
4321 background: #fff;
4322 border: 1px solid #D6D6D6;
4323 border-radius: 6px;
4324 -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
4325 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
4326 min-width: 220px;
4327 max-width: 260px;
4328 margin-top: 4px;
4329 }
4330 .merchant-sortable-repeater-icons-control .merchant-icon-option {
4331 display: -webkit-box;
4332 display: -ms-flexbox;
4333 display: flex;
4334 -webkit-box-align: center;
4335 -ms-flex-align: center;
4336 align-items: center;
4337 -webkit-box-pack: center;
4338 -ms-flex-pack: center;
4339 justify-content: center;
4340 width: 36px;
4341 height: 36px;
4342 padding: 0;
4343 border: 1px solid transparent;
4344 border-radius: 4px;
4345 background: transparent;
4346 cursor: pointer;
4347 -webkit-transition: border-color 0.15s ease, background-color 0.15s ease;
4348 transition: border-color 0.15s ease, background-color 0.15s ease;
4349 }
4350 .merchant-sortable-repeater-icons-control .merchant-icon-option:hover {
4351 border-color: #c5cff6;
4352 background-color: #f0f3ff;
4353 }
4354 .merchant-sortable-repeater-icons-control .merchant-icon-option.selected {
4355 border-color: #3858E9;
4356 background-color: #EBEEFB;
4357 -webkit-box-shadow: inset 0 0 0 1px #3858E9;
4358 box-shadow: inset 0 0 0 1px #3858E9;
4359 }
4360 .merchant-sortable-repeater-icons-control .merchant-icon-option svg {
4361 width: 18px;
4362 height: 18px;
4363 }
4364 .merchant-sortable-repeater-icons-control .merchant-icon-option .dashicons {
4365 font-size: 16px;
4366 width: 16px;
4367 height: 16px;
4368 color: #777;
4369 }
4370
4371 /* Flexible Content Field */
4372 .merchant-flexible-content-control {
4373 max-width: 100%;
4374 }
4375 .merchant-flexible-content-control .layout {
4376 position: relative;
4377 }
4378 .merchant-flexible-content-control .sortable {
4379 position: relative;
4380 list-style-type: none;
4381 margin: 0;
4382 padding: 0;
4383 }
4384 .merchant-flexible-content-control .sortable input[type=text] {
4385 width: 100%;
4386 margin: 0;
4387 border-radius: 0;
4388 border: 1px solid #D6D6D6;
4389 padding: 8px;
4390 line-height: 1.3em;
4391 }
4392 .merchant-flexible-content-control .sortable input[type=text]:focus {
4393 border-color: #3858E9;
4394 outline: none;
4395 -webkit-box-shadow: none;
4396 box-shadow: none;
4397 }
4398 .merchant-flexible-content-control .customize-control-flexible-content-move {
4399 display: none;
4400 cursor: -webkit-grab;
4401 cursor: grab;
4402 position: absolute;
4403 top: 19px;
4404 left: -22px;
4405 z-index: 999;
4406 }
4407 .merchant-flexible-content-control .customize-control-flexible-content-delete,
4408 .merchant-flexible-content-control .customize-control-flexible-content-duplicate {
4409 text-decoration: none;
4410 }
4411 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt,
4412 .merchant-flexible-content-control .customize-control-flexible-content-duplicate .dashicons-no-alt {
4413 width: 100%;
4414 text-decoration: none;
4415 margin: 0;
4416 font-weight: 600;
4417 color: #50575e;
4418 font-size: 1.1em;
4419 line-height: 34px;
4420 height: auto;
4421 }
4422 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus,
4423 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover,
4424 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus {
4425 outline: none;
4426 -webkit-box-shadow: none;
4427 box-shadow: none;
4428 }
4429 .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,
4430 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover .dashicons-no-alt,
4431 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus .dashicons-no-alt {
4432 color: #a7a7a7;
4433 }
4434 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover svg, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus svg,
4435 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover svg,
4436 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus svg {
4437 fill: #a7a7a7;
4438 }
4439 .merchant-flexible-content-control .customize-control-flexible-content-accordion {
4440 display: -webkit-box;
4441 display: -ms-flexbox;
4442 display: flex;
4443 -webkit-box-align: center;
4444 -ms-flex-align: center;
4445 align-items: center;
4446 -webkit-box-pack: end;
4447 -ms-flex-pack: end;
4448 justify-content: flex-end;
4449 margin: 0;
4450 width: 40px;
4451 height: auto;
4452 font-size: 1.5em;
4453 line-height: 34px;
4454 color: #50575e;
4455 background: #fff;
4456 padding: 0;
4457 vertical-align: top;
4458 cursor: pointer;
4459 }
4460 .merchant-flexible-content-control .customize-control-flexible-content-accordion svg {
4461 -webkit-transition: 300ms;
4462 transition: 300ms;
4463 -webkit-transform: rotate(180deg);
4464 transform: rotate(180deg);
4465 }
4466 .merchant-flexible-content-control .layout-header.ui-accordion-header-collapsed .customize-control-flexible-content-accordion svg {
4467 -webkit-transform: rotate(0deg);
4468 transform: rotate(0deg);
4469 }
4470 .merchant-flexible-content-control .merchant-flexible-content.empty {
4471 border: 2px dashed #dcdcde;
4472 min-height: 100px;
4473 margin-bottom: 10px;
4474 }
4475 .merchant-flexible-content-control.default-style .layout {
4476 background: white;
4477 border: 1px solid #c3c4c7;
4478 border-left: 3px solid #3858e9;
4479 }
4480 .merchant-flexible-content-control.default-style .layout .layout-header {
4481 padding: 15px 20px;
4482 }
4483 .merchant-flexible-content-control.default-style .layout .layout-body {
4484 padding: 15px 20px;
4485 }
4486 .merchant-flexible-content-control.default-style .layout .layout-body .layout-field:last-of-type .merchant-group-field {
4487 margin-bottom: 5px;
4488 }
4489 .merchant-flexible-content-control.table-style .layout .layout-header {
4490 padding-bottom: 8px;
4491 margin-bottom: 15px;
4492 }
4493 .merchant-flexible-content-control.table-style .layout .layout-body {
4494 -webkit-box-orient: horizontal;
4495 -webkit-box-direction: normal;
4496 -ms-flex-direction: row;
4497 flex-direction: row;
4498 }
4499 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
4500 display: none;
4501 }
4502 .merchant-flexible-content-control.has-accordion .layout-header {
4503 cursor: pointer;
4504 -webkit-user-select: none;
4505 -moz-user-select: none;
4506 -ms-user-select: none;
4507 user-select: none;
4508 }
4509 .merchant-flexible-content-control .layouts {
4510 display: none;
4511 }
4512 .merchant-flexible-content-control .layout {
4513 margin-bottom: 20px;
4514 }
4515 .merchant-flexible-content-control .layout .layout__inner {
4516 width: calc(100% + 60px);
4517 margin-left: -30px;
4518 padding-inline: 30px;
4519 }
4520 .merchant-flexible-content-control .layout .layout__inner:hover .customize-control-flexible-content-move {
4521 display: block;
4522 }
4523 .merchant-flexible-content-control .layout .layout-header {
4524 display: -webkit-box;
4525 display: -ms-flexbox;
4526 display: flex;
4527 -webkit-box-align: center;
4528 -ms-flex-align: center;
4529 align-items: center;
4530 border-bottom: 1px solid #f3f3f3;
4531 }
4532 .merchant-flexible-content-control .layout .layout-count {
4533 border-radius: 50%;
4534 width: 24px;
4535 height: 23px;
4536 border: 1px solid #949494;
4537 text-align: center;
4538 display: -webkit-box;
4539 display: -ms-flexbox;
4540 display: flex;
4541 -webkit-box-pack: center;
4542 -ms-flex-pack: center;
4543 justify-content: center;
4544 -webkit-box-orient: vertical;
4545 -webkit-box-direction: normal;
4546 -ms-flex-direction: column;
4547 flex-direction: column;
4548 font-size: 12px;
4549 font-weight: bold;
4550 margin-right: 10px;
4551 }
4552 .merchant-flexible-content-control .layout .layout-title {
4553 font-size: 14px;
4554 font-weight: bold;
4555 -webkit-box-flex: 1;
4556 -ms-flex: 1;
4557 flex: 1;
4558 }
4559 .merchant-flexible-content-control .layout .layout-status {
4560 display: -webkit-inline-box;
4561 display: -ms-inline-flexbox;
4562 display: inline-flex;
4563 -webkit-box-align: center;
4564 -ms-flex-align: center;
4565 align-items: center;
4566 cursor: pointer;
4567 padding: 2px 10px;
4568 border-radius: 10px;
4569 font-size: 11px;
4570 font-weight: 600;
4571 line-height: 1.4;
4572 margin-left: 10px;
4573 margin-right: 10px;
4574 text-transform: capitalize;
4575 white-space: nowrap;
4576 background-color: #f0f0f1;
4577 color: #757575;
4578 }
4579 .merchant-flexible-content-control .layout .layout-status--active {
4580 background-color: #e6f4ea;
4581 color: #1e7e34;
4582 }
4583 .merchant-flexible-content-control .layout .layout-toggle {
4584 display: -webkit-box;
4585 display: -ms-flexbox;
4586 display: flex;
4587 margin: 0;
4588 padding: 0;
4589 -webkit-box-pack: end;
4590 -ms-flex-pack: end;
4591 justify-content: flex-end;
4592 }
4593 .merchant-flexible-content-control .layout .layout-toggle span:hover {
4594 opacity: 0.6;
4595 }
4596 .merchant-flexible-content-control .layout .layout-body {
4597 display: -webkit-box;
4598 display: -ms-flexbox;
4599 display: flex;
4600 -webkit-box-orient: vertical;
4601 -webkit-box-direction: normal;
4602 -ms-flex-direction: column;
4603 flex-direction: column;
4604 }
4605 .merchant-flexible-content-control .layout .layout-actions {
4606 position: absolute;
4607 top: 15px;
4608 right: 22px;
4609 }
4610 .merchant-flexible-content-control .layout .layout-actions-has_accordion {
4611 right: 43px;
4612 }
4613 .merchant-flexible-content-control .layout .layout-actions-no_accordion {
4614 top: 0;
4615 right: 0;
4616 }
4617 .merchant-flexible-content-control .layout .layout-actions a:hover {
4618 opacity: 0.6;
4619 }
4620 .merchant-flexible-content-control .layout .layout-actions__toggle:focus {
4621 outline: none;
4622 -webkit-box-shadow: none;
4623 box-shadow: none;
4624 }
4625 .merchant-flexible-content-control .layout .layout-actions__inner {
4626 position: absolute;
4627 right: -5px;
4628 top: 25px;
4629 z-index: 99;
4630 font-size: 13px;
4631 padding: 7px 15px;
4632 min-width: 200px;
4633 background: #fff;
4634 border: 1px solid #DDDDDD;
4635 border-radius: 5px;
4636 }
4637 .merchant-flexible-content-control .layout .layout-actions__inner a {
4638 width: 100%;
4639 display: -webkit-box;
4640 display: -ms-flexbox;
4641 display: flex;
4642 padding: 10px 0;
4643 -webkit-box-align: center;
4644 -ms-flex-align: center;
4645 align-items: center;
4646 gap: 8px;
4647 }
4648 .merchant-flexible-content-control .layout .layout-actions__inner svg {
4649 width: 24px;
4650 height: 20px;
4651 }
4652 .merchant-flexible-content-control .layout .layout-actions__inner span {
4653 color: #1E1E1E;
4654 }
4655 .merchant-flexible-content-control .layout .layout-field.flex-grow {
4656 -webkit-box-flex: 1;
4657 -ms-flex-positive: 1;
4658 flex-grow: 1;
4659 }
4660 .merchant-flexible-content-control .layout .dashicons-menu {
4661 display: -webkit-box;
4662 display: -ms-flexbox;
4663 display: flex;
4664 -webkit-box-align: center;
4665 -ms-flex-align: center;
4666 align-items: center;
4667 -webkit-box-pack: center;
4668 -ms-flex-pack: center;
4669 justify-content: center;
4670 margin: 0;
4671 width: 40px;
4672 height: auto;
4673 font-size: 1.3em;
4674 line-height: 34px;
4675 background: #fff;
4676 padding: 0;
4677 vertical-align: top;
4678 margin-left: -1px;
4679 }
4680 .merchant-flexible-content-control .layout .dashicons-menu:hover {
4681 color: #a7a7a7;
4682 }
4683 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
4684 position: relative;
4685 display: inline-block;
4686 }
4687 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
4688 opacity: 0;
4689 visibility: hidden;
4690 position: absolute;
4691 background-color: #ffffff;
4692 border: 1px solid #c3c4c7;
4693 border-left: 3px solid #3858e9;
4694 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
4695 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
4696 width: 180px;
4697 bottom: 100%;
4698 display: -webkit-box;
4699 display: -ms-flexbox;
4700 display: flex;
4701 -webkit-box-orient: vertical;
4702 -webkit-box-direction: normal;
4703 -ms-flex-direction: column;
4704 flex-direction: column;
4705 left: 50%;
4706 -webkit-transform: translate(-50%, 10px);
4707 transform: translate(-50%, 10px);
4708 padding: 3px 3px 3px 5px;
4709 }
4710 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
4711 z-index: 10;
4712 opacity: 1;
4713 visibility: visible;
4714 -webkit-transform: translate(-50%, -15px);
4715 transform: translate(-50%, -15px);
4716 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
4717 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
4718 }
4719 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
4720 right: calc(50% - 12px);
4721 bottom: -14px;
4722 border-width: 14px 14px 0 15px;
4723 border-color: #c3c4c7 transparent transparent transparent;
4724 }
4725 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
4726 content: "";
4727 right: calc(50% - 10px);
4728 bottom: -12px;
4729 border-width: 12px 12px 0 13px;
4730 border-color: #ffffff transparent transparent transparent;
4731 }
4732 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
4733 position: absolute;
4734 z-index: -1;
4735 content: "";
4736 border-style: solid;
4737 -webkit-transition-duration: 0.3s;
4738 transition-duration: 0.3s;
4739 transition-property: -webkit-transform;
4740 -webkit-transition-property: -webkit-transform;
4741 transition-property: transform;
4742 transition-property: transform, -webkit-transform;
4743 }
4744 .merchant-flexible-content-control .customize-control-flexible-content-add {
4745 display: block;
4746 -ms-flex-negative: 0;
4747 flex-shrink: 0;
4748 padding: 10px;
4749 text-decoration: none;
4750 }
4751 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
4752 background: #f0f0f1;
4753 }
4754 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
4755 color: #3858E9;
4756 border-color: #3858E9;
4757 background-color: transparent;
4758 margin-bottom: 0;
4759 padding: 4px 19px;
4760 }
4761 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
4762 outline: none;
4763 -webkit-box-shadow: none;
4764 box-shadow: none;
4765 background-color: #ffffff;
4766 }
4767 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
4768 display: none;
4769 }
4770 .merchant-flexible-content-control .merchant-datetime-field input {
4771 padding: 12px !important;
4772 line-height: 1.3em;
4773 width: 100%;
4774 max-width: 100%;
4775 min-height: auto;
4776 border: 1px solid #d6d6d6;
4777 border-radius: 4px !important;
4778 }
4779 .merchant-flexible-content-control .merchant-datetime-field input:focus {
4780 outline: none;
4781 -webkit-box-shadow: none;
4782 box-shadow: none;
4783 border-color: #3858E9;
4784 }
4785
4786 .flexible-content-template {
4787 display: none;
4788 }
4789
4790 .merchant-module-page-setting-field-range .merchant-range {
4791 position: relative;
4792 width: 100%;
4793 width: 300px;
4794 display: -webkit-box;
4795 display: -ms-flexbox;
4796 display: flex;
4797 -webkit-box-align: center;
4798 -ms-flex-align: center;
4799 align-items: center;
4800 -webkit-box-pack: justify;
4801 -ms-flex-pack: justify;
4802 justify-content: space-between;
4803 }
4804 .merchant-module-page-setting-field-range input[type=range] {
4805 -webkit-appearance: none;
4806 -moz-appearance: none;
4807 appearance: none;
4808 width: calc(100% - 105px);
4809 height: 2px;
4810 border-radius: 5px;
4811 outline: none;
4812 padding: 0;
4813 margin: 0;
4814 background-color: #ddd;
4815 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
4816 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
4817 }
4818 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
4819 -webkit-appearance: none;
4820 appearance: none;
4821 width: 15px;
4822 height: 15px;
4823 border-radius: 50%;
4824 background: #3858E9;
4825 cursor: pointer;
4826 -webkit-transition: background 0.15s ease-in-out;
4827 transition: background 0.15s ease-in-out;
4828 }
4829 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
4830 background: #3858E9;
4831 }
4832 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
4833 background: #3858E9;
4834 }
4835 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
4836 width: 15px;
4837 height: 15px;
4838 border: 0;
4839 border-radius: 50%;
4840 background: #3858E9;
4841 cursor: pointer;
4842 -moz-transition: background 0.15s ease-in-out;
4843 transition: background 0.15s ease-in-out;
4844 }
4845 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
4846 background: #3858E9;
4847 }
4848 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
4849 background: #3858E9;
4850 }
4851 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
4852 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
4853 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
4854 }
4855 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
4856 border: 0;
4857 background: #d7dcdf;
4858 }
4859 .merchant-module-page-setting-field-range input[type=number] {
4860 padding: 12px 25px 12px 10px;
4861 line-height: 1.3em;
4862 width: 100%;
4863 max-width: 85px;
4864 min-height: auto;
4865 border: 1px solid #D6D6D6;
4866 }
4867 .merchant-module-page-setting-field-range input[type=number]:focus {
4868 outline: none;
4869 -webkit-box-shadow: none;
4870 box-shadow: none;
4871 border-color: #3858E9;
4872 }
4873 .merchant-module-page-setting-field-range .merchant-range-unit {
4874 color: #3858E9;
4875 position: absolute;
4876 z-index: 1;
4877 right: 10px;
4878 font-size: 11px;
4879 line-height: 1em;
4880 }
4881
4882 .merchant-module-page-setting-field-color input {
4883 padding: 0 10px;
4884 line-height: 1em;
4885 width: 100%;
4886 max-width: 254px;
4887 min-height: auto;
4888 border: 1px solid #D6D6D6;
4889 }
4890 .merchant-module-page-setting-field-color input:focus {
4891 outline: none;
4892 -webkit-box-shadow: none;
4893 box-shadow: none;
4894 border-color: #3858E9;
4895 }
4896 .merchant-module-page-setting-field-color .merchant-color {
4897 display: -webkit-box;
4898 display: -ms-flexbox;
4899 display: flex;
4900 grid-gap: 10px;
4901 }
4902 .merchant-module-page-setting-field-color .merchant-color-picker {
4903 cursor: pointer;
4904 width: 36px;
4905 height: 36px;
4906 border: 1px solid rgba(0, 0, 0, 0.1);
4907 border-radius: 4px;
4908 }
4909
4910 .merchant-module-page-settings-dimensions {
4911 display: -webkit-box;
4912 display: -ms-flexbox;
4913 display: flex;
4914 grid-gap: 10px;
4915 }
4916 .merchant-module-page-settings-dimensions > div {
4917 display: -webkit-box;
4918 display: -ms-flexbox;
4919 display: flex;
4920 -webkit-box-orient: vertical;
4921 -webkit-box-direction: normal;
4922 -ms-flex-direction: column;
4923 flex-direction: column;
4924 }
4925 .merchant-module-page-settings-dimensions label {
4926 color: gray;
4927 font-size: 12px;
4928 margin-top: 7px;
4929 }
4930 .merchant-module-page-settings-dimensions input {
4931 max-width: 70px;
4932 width: 100%;
4933 font-size: 12px;
4934 border: 1px solid #D6D6D6;
4935 }
4936
4937 .merchant-module-page-setting-field-wc_coupons .merchant-wc-coupon-selector select {
4938 width: 300px;
4939 min-height: auto;
4940 border: 1px solid #D6D6D6;
4941 padding: 12px;
4942 line-height: 1.3em;
4943 border-radius: 6px;
4944 color: #2F2F2F;
4945 border: 1px solid #D6D6D6;
4946 }
4947
4948 .merchant-module-page-settings-unit {
4949 margin-bottom: 10px;
4950 }
4951 .merchant-module-page-settings-unit select {
4952 font-size: 13px;
4953 border: 0;
4954 }
4955
4956 .merchant-module-page-settings-devices {
4957 display: -webkit-box;
4958 display: -ms-flexbox;
4959 display: flex;
4960 -webkit-column-gap: 10px;
4961 -moz-column-gap: 10px;
4962 column-gap: 10px;
4963 -webkit-box-pack: end;
4964 -ms-flex-pack: end;
4965 justify-content: flex-end;
4966 }
4967 .merchant-module-page-settings-devices button {
4968 border: 0;
4969 background: transparent;
4970 padding: 0;
4971 cursor: pointer;
4972 }
4973 .merchant-module-page-settings-devices button.active {
4974 color: #3858e9;
4975 }
4976 .merchant-module-page-settings-devices button:hover {
4977 color: #3858e9;
4978 }
4979 .merchant-module-page-settings-devices button i {
4980 font-size: 14px;
4981 line-height: 20px;
4982 width: auto;
4983 }
4984
4985 .merchant-module-page-settings-device-container:not(.active) {
4986 display: none;
4987 }
4988
4989 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
4990 max-width: 320px;
4991 }
4992 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
4993 margin-bottom: -30px;
4994 margin-top: 0;
4995 }
4996
4997 .review-photos-popup {
4998 position: fixed;
4999 top: 0;
5000 left: 0;
5001 bottom: 0;
5002 right: 0;
5003 display: -webkit-box;
5004 display: -ms-flexbox;
5005 display: flex;
5006 -webkit-box-pack: center;
5007 -ms-flex-pack: center;
5008 justify-content: center;
5009 -webkit-box-align: center;
5010 -ms-flex-align: center;
5011 align-items: center;
5012 -ms-flex-wrap: wrap;
5013 flex-wrap: wrap;
5014 z-index: 9992;
5015 padding: 50px;
5016 gap: 40px;
5017 overflow: scroll;
5018 visibility: hidden;
5019 opacity: 0;
5020 -webkit-transition: 300ms;
5021 transition: 300ms;
5022 }
5023 .review-photos-popup.active {
5024 visibility: visible;
5025 opacity: 1;
5026 }
5027 .review-photos-popup .overlay {
5028 position: fixed;
5029 top: 0;
5030 left: 0;
5031 bottom: 0;
5032 right: 0;
5033 background-color: rgba(0, 0, 0, 0.8);
5034 }
5035 .review-photos-popup .review-photo {
5036 z-index: 9993;
5037 -webkit-box-flex: 0;
5038 -ms-flex: 0 0 30%;
5039 flex: 0 0 30%;
5040 }
5041 .review-photos-popup .review-photo img {
5042 max-width: 100%;
5043 max-height: 300px;
5044 height: auto;
5045 display: block;
5046 margin: 0 auto;
5047 border: 2px solid #fff;
5048 border-radius: 5px;
5049 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5050 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5051 }
5052 .review-photos-popup.images-count-1 .review-photo {
5053 -webkit-box-flex: 0;
5054 -ms-flex: 0 0 100%;
5055 flex: 0 0 100%;
5056 }
5057 .review-photos-popup.images-count-1 .review-photo img {
5058 max-height: 400px;
5059 }
5060 .review-photos-popup.images-count-2 .review-photo {
5061 -webkit-box-flex: 0;
5062 -ms-flex: 0 0 46%;
5063 flex: 0 0 46%;
5064 }
5065 .review-photos-popup.images-count-2 .review-photo img {
5066 max-height: 400px;
5067 }
5068 @media (max-width: 768px) {
5069 .review-photos-popup {
5070 padding-top: 100px;
5071 }
5072 .review-photos-popup .review-photo {
5073 -webkit-box-flex: 0;
5074 -ms-flex: 0 0 100%;
5075 flex: 0 0 100%;
5076 }
5077 .review-photos-popup .review-photo img {
5078 max-height: 400px;
5079 }
5080 }
5081
5082 .merchant-btn-control {
5083 color: #3858e9;
5084 border: 1px solid #3858e9;
5085 background-color: rgba(0, 0, 0, 0);
5086 padding: 4px 19px;
5087 border-radius: 4px;
5088 font-size: 13px;
5089 line-height: 2.1;
5090 cursor: pointer;
5091 }
5092
5093 .merchant-reviews-selector * {
5094 -webkit-box-sizing: border-box;
5095 box-sizing: border-box;
5096 }
5097 .merchant-reviews-selector .star-rating {
5098 overflow: hidden;
5099 position: relative;
5100 height: 1.618em;
5101 line-height: 1.618;
5102 width: 5.3em;
5103 font-family: star;
5104 font-weight: 400;
5105 margin-left: auto;
5106 margin-right: auto;
5107 letter-spacing: 0;
5108 color: #ffa441;
5109 }
5110 .merchant-reviews-selector .star-rating::before {
5111 content: "SSSSS";
5112 opacity: 0.25;
5113 float: left;
5114 top: 0;
5115 left: 0;
5116 position: absolute;
5117 }
5118 .merchant-reviews-selector .star-rating span {
5119 overflow: hidden;
5120 float: left;
5121 top: 0;
5122 left: 0;
5123 position: absolute;
5124 padding-top: 1.5em;
5125 }
5126 .merchant-reviews-selector .star-rating span::before {
5127 content: "SSSSS";
5128 top: 0;
5129 position: absolute;
5130 left: 0;
5131 color: #ffa441;
5132 }
5133 .merchant-reviews-selector .overlay {
5134 position: fixed;
5135 top: 0;
5136 left: 0;
5137 width: 100%;
5138 height: 100%;
5139 background-color: rgba(0, 0, 0, 0.5);
5140 z-index: 9990;
5141 visibility: hidden;
5142 opacity: 0;
5143 -webkit-transition: 300ms;
5144 transition: 300ms;
5145 }
5146 .merchant-reviews-selector .overlay.active {
5147 visibility: visible;
5148 opacity: 1;
5149 }
5150 .merchant-reviews-selector .tooltip {
5151 position: absolute;
5152 min-width: 180px;
5153 right: calc(100% + 10px);
5154 background-color: #333;
5155 color: #fff;
5156 padding: 5px 10px;
5157 border-radius: 5px;
5158 font-size: 12px;
5159 visibility: hidden;
5160 opacity: 0;
5161 -webkit-transition: 300ms;
5162 transition: 300ms;
5163 top: 50%;
5164 -webkit-transform: translateY(-50%);
5165 transform: translateY(-50%);
5166 }
5167 .merchant-reviews-selector .tooltip:before {
5168 content: "";
5169 position: absolute;
5170 top: 50%;
5171 right: -7px;
5172 -webkit-transform: translateY(-50%);
5173 transform: translateY(-50%);
5174 width: 0;
5175 height: 0;
5176 border-top: 5px solid transparent;
5177 border-bottom: 5px solid transparent;
5178 border-left: 7px solid #333;
5179 }
5180 .merchant-reviews-selector .product-reviews {
5181 -ms-flex-preferred-size: 100%;
5182 flex-basis: 100%;
5183 }
5184 .merchant-reviews-selector .product-reviews .product-review {
5185 display: -webkit-box;
5186 display: -ms-flexbox;
5187 display: flex;
5188 gap: 15px;
5189 -webkit-box-align: center;
5190 -ms-flex-align: center;
5191 align-items: center;
5192 padding: 8px 15px;
5193 border-bottom: 2px solid #ffffff;
5194 -webkit-box-pack: start;
5195 -ms-flex-pack: start;
5196 justify-content: flex-start;
5197 -ms-flex-wrap: nowrap;
5198 flex-wrap: nowrap;
5199 -webkit-box-orient: horizontal;
5200 -webkit-box-direction: normal;
5201 -ms-flex-direction: row;
5202 flex-direction: row;
5203 border-top: none;
5204 background-color: #f4f4f4;
5205 min-height: 60px;
5206 }
5207 .merchant-reviews-selector .product-reviews .product-review:last-of-type {
5208 border-bottom: none;
5209 }
5210 .merchant-reviews-selector .product-reviews .product-review .product-review-add-checkbox {
5211 -webkit-box-flex: 0;
5212 -ms-flex: 0 0 20px;
5213 flex: 0 0 20px;
5214 }
5215 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image {
5216 display: none;
5217 }
5218 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image a {
5219 display: block;
5220 text-decoration: none;
5221 }
5222 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image a img {
5223 border-radius: 5px;
5224 width: 50px;
5225 height: auto;
5226 }
5227 .merchant-reviews-selector .product-reviews .product-review .product-review-product-name {
5228 display: none;
5229 }
5230 .merchant-reviews-selector .product-reviews .product-review .product-review-product-name a {
5231 text-decoration: none;
5232 }
5233 .merchant-reviews-selector .product-reviews .product-review .product-review-rating {
5234 -webkit-box-flex: 0;
5235 -ms-flex: 0 0 70px;
5236 flex: 0 0 70px;
5237 width: 70px;
5238 }
5239 .merchant-reviews-selector .product-reviews .product-review .product-review-status {
5240 -webkit-box-flex: 0;
5241 -ms-flex: 0 0 90px;
5242 flex: 0 0 90px;
5243 width: 90px;
5244 }
5245 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status {
5246 text-transform: capitalize;
5247 border-radius: 4px;
5248 background-color: #eee;
5249 padding: 3px 8px;
5250 display: inline-block;
5251 }
5252 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-approved {
5253 background-color: #c3e6cb; /* Softer light green */
5254 color: #155724; /* Darker green */
5255 }
5256 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-pending {
5257 background-color: #fff3cd; /* Light yellow */
5258 color: #856404; /* Dark yellow/brown */
5259 }
5260 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-unapproved {
5261 background-color: #f5c6cb; /* Light coral/pink */
5262 color: #721c24; /* Darker red */
5263 }
5264 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-spam {
5265 background-color: #f8d7da; /* Light red */
5266 color: #721c24; /* Dark red */
5267 }
5268 .merchant-reviews-selector .product-reviews .product-review .product-review-author {
5269 -webkit-box-flex: 0;
5270 -ms-flex: 0 0 90px;
5271 flex: 0 0 90px;
5272 width: 90px;
5273 }
5274 .merchant-reviews-selector .product-reviews .product-review .product-review-content {
5275 -webkit-box-flex: 0;
5276 -ms-flex: 0 0 40%;
5277 flex: 0 0 40%;
5278 }
5279 .merchant-reviews-selector .product-reviews .product-review .product-review-photos {
5280 -webkit-box-flex: 0;
5281 -ms-flex: 0 0 40px;
5282 flex: 0 0 40px;
5283 width: 40px;
5284 position: relative;
5285 }
5286 .merchant-reviews-selector .product-reviews .product-review .product-review-photos:hover .tooltip {
5287 visibility: visible;
5288 opacity: 1;
5289 }
5290 .merchant-reviews-selector .product-reviews .product-review .product-review-photos img {
5291 border-radius: 5px;
5292 width: 40px;
5293 height: auto;
5294 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5295 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5296 border: 2px solid #fff;
5297 display: block;
5298 }
5299 .merchant-reviews-selector .product-reviews .product-review .product-review-photos img.loading {
5300 -webkit-animation: loading 1500ms infinite;
5301 animation: loading 1500ms infinite;
5302 }
5303 .merchant-reviews-selector .product-reviews .product-review .product-review-photos .review-photo {
5304 position: relative;
5305 cursor: pointer;
5306 }
5307 .merchant-reviews-selector .product-reviews .product-review .product-review-photos .review-photo .count {
5308 -webkit-user-select: none;
5309 -moz-user-select: none;
5310 -ms-user-select: none;
5311 user-select: none;
5312 position: absolute;
5313 top: -8px;
5314 right: -8px;
5315 background-color: #000;
5316 color: #fff;
5317 padding: 0px 5px;
5318 border-radius: 50%;
5319 width: 18px;
5320 height: 18px;
5321 text-align: center;
5322 font-size: 11px;
5323 }
5324 .merchant-reviews-selector .product-reviews .product-review .product-review-date {
5325 -webkit-box-flex: 0;
5326 -ms-flex: 0 0 70px;
5327 flex: 0 0 70px;
5328 width: 70px;
5329 }
5330 .merchant-reviews-selector .product-reviews .product-review .product-review-edit a {
5331 text-decoration: none;
5332 color: #3858E9;
5333 }
5334 .merchant-reviews-selector .product-reviews .product-review .product-review-move,
5335 .merchant-reviews-selector .product-reviews .product-review .product-review-delete {
5336 display: none;
5337 }
5338 .merchant-reviews-selector .product-reviews .product-reviews-load-more {
5339 text-align: center;
5340 padding: 10px;
5341 }
5342 .merchant-reviews-selector .product-reviews .product-reviews-load-more button {
5343 display: inline-block;
5344 padding: 10px 20px;
5345 border-radius: 5px;
5346 text-decoration: none;
5347 outline: none;
5348 background: none;
5349 border: none;
5350 cursor: pointer;
5351 }
5352 .merchant-reviews-selector .product-reviews .product-reviews-load-more.loading {
5353 -webkit-animation: loading 1500ms infinite;
5354 animation: loading 1500ms infinite;
5355 }
5356 .merchant-reviews-selector .selected-reviews {
5357 padding: 0 0 15px;
5358 }
5359 .merchant-reviews-selector .selected-reviews .product-reviews {
5360 border: 1px solid #c9c7c7;
5361 border-radius: 4px;
5362 position: relative;
5363 }
5364 .merchant-reviews-selector .selected-reviews .product-reviews:empty {
5365 display: none;
5366 }
5367 .merchant-reviews-selector .selected-reviews .product-reviews .placeholder {
5368 background-color: #f0f0f0;
5369 border: 1px dashed #ccc;
5370 visibility: visible;
5371 width: 100%;
5372 }
5373 .merchant-reviews-selector .selected-reviews .product-reviews .product-review {
5374 background-color: #fff;
5375 border-bottom: 1px dotted #c9c7c7;
5376 position: relative;
5377 padding: 12px 20px;
5378 }
5379 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:first-of-type {
5380 border-top-left-radius: 4px;
5381 border-top-right-radius: 4px;
5382 }
5383 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:last-of-type {
5384 border-bottom: none;
5385 border-bottom-left-radius: 4px;
5386 border-bottom-right-radius: 4px;
5387 }
5388 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move,
5389 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete {
5390 display: block;
5391 position: absolute;
5392 background: none;
5393 border: none;
5394 cursor: pointer;
5395 color: #3858E9;
5396 width: 25px;
5397 height: 25px;
5398 padding: 0;
5399 margin: 0;
5400 top: 50%;
5401 -webkit-transform: translateY(-50%);
5402 transform: translateY(-50%);
5403 border-radius: 50%;
5404 padding-top: 2px;
5405 visibility: hidden;
5406 opacity: 0;
5407 -webkit-transition: 300ms;
5408 transition: 300ms;
5409 background-color: #d5d5d5;
5410 }
5411 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move svg,
5412 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete svg {
5413 width: 18px;
5414 height: 18px;
5415 }
5416 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:hover .product-review-move,
5417 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:hover .product-review-delete {
5418 visibility: visible;
5419 opacity: 1;
5420 }
5421 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete {
5422 right: -14px;
5423 }
5424 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete:hover {
5425 background-color: #ff7575;
5426 }
5427 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move {
5428 cursor: move;
5429 left: -14px;
5430 }
5431 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move:hover {
5432 background-color: #6f89ff;
5433 }
5434 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-content {
5435 -webkit-box-flex: 0;
5436 -ms-flex: none;
5437 flex: none;
5438 width: 140px;
5439 }
5440 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .spacer {
5441 margin-right: auto;
5442 }
5443 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-edit,
5444 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-photos,
5445 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-date,
5446 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-status,
5447 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-add-checkbox {
5448 display: none;
5449 }
5450 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-name,
5451 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-image {
5452 display: block;
5453 }
5454 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-image a img {
5455 width: 30px;
5456 }
5457 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-name {
5458 width: 120px;
5459 }
5460 @-webkit-keyframes loading {
5461 0% {
5462 opacity: 1;
5463 }
5464 50% {
5465 opacity: 0.2;
5466 }
5467 100% {
5468 opacity: 1;
5469 }
5470 }
5471 @keyframes loading {
5472 0% {
5473 opacity: 1;
5474 }
5475 50% {
5476 opacity: 0.2;
5477 }
5478 100% {
5479 opacity: 1;
5480 }
5481 }
5482 .merchant-reviews-selector .selector-popup {
5483 position: fixed;
5484 background-color: #fff;
5485 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5486 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
5487 border-radius: 5px;
5488 top: 50%;
5489 left: 50%;
5490 -webkit-transform: translate(-50%, -50%);
5491 transform: translate(-50%, -50%);
5492 width: 1000px;
5493 max-width: 100%;
5494 z-index: 9991;
5495 visibility: hidden;
5496 opacity: 0;
5497 -webkit-transition: 300ms;
5498 transition: 300ms;
5499 }
5500 .merchant-reviews-selector .selector-popup.active {
5501 visibility: visible;
5502 opacity: 1;
5503 }
5504 .merchant-reviews-selector .selector-popup .popup-content .popup-header {
5505 position: relative;
5506 border-bottom: 1px solid #eee;
5507 padding: 14px 50px 14px 24px;
5508 background-color: #f3f3f3;
5509 border-top-left-radius: 5px;
5510 border-top-right-radius: 5px;
5511 }
5512 .merchant-reviews-selector .selector-popup .popup-content .popup-header label {
5513 display: -webkit-box;
5514 display: -ms-flexbox;
5515 display: flex;
5516 -webkit-box-align: center;
5517 -ms-flex-align: center;
5518 align-items: center;
5519 }
5520 .merchant-reviews-selector .selector-popup .popup-content .popup-header label span {
5521 font-size: 16px;
5522 font-weight: 500;
5523 min-width: 120px;
5524 }
5525 .merchant-reviews-selector .selector-popup .popup-content .popup-header label input {
5526 margin-left: 10px;
5527 padding: 5px 10px;
5528 width: 100%;
5529 border: 1px solid #d6d6d6;
5530 outline: none;
5531 }
5532 .merchant-reviews-selector .selector-popup .popup-content .popup-header .close {
5533 position: absolute;
5534 top: 50%;
5535 right: 10px;
5536 cursor: pointer;
5537 display: block;
5538 padding: 10px;
5539 font-size: 23px;
5540 -webkit-transform: translateY(-50%);
5541 transform: translateY(-50%);
5542 }
5543 @-webkit-keyframes loadingAnimation {
5544 from {
5545 background-position: 200% 0;
5546 }
5547 to {
5548 background-position: -200% 0;
5549 }
5550 }
5551 @keyframes loadingAnimation {
5552 from {
5553 background-position: 200% 0;
5554 }
5555 to {
5556 background-position: -200% 0;
5557 }
5558 }
5559 .merchant-reviews-selector .selector-popup .popup-content .popup-header.loading::after {
5560 content: "";
5561 position: absolute;
5562 bottom: -2px;
5563 left: 0;
5564 width: 100%;
5565 height: 3px;
5566 background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, #3858e9), to(transparent));
5567 background: linear-gradient(to right, transparent 0%, #3858e9 50%, transparent 100%);
5568 background-size: 200% 100%;
5569 -webkit-animation: loadingAnimation 1.5s infinite linear;
5570 animation: loadingAnimation 1.5s infinite linear;
5571 }
5572 .merchant-reviews-selector .selector-popup .popup-content .popup-header.popup-error::after {
5573 content: "";
5574 position: absolute;
5575 bottom: -2px;
5576 left: 0;
5577 width: 100%;
5578 height: 3px;
5579 background-color: #d93232;
5580 -webkit-animation: loading 1.5s infinite linear;
5581 animation: loading 1.5s infinite linear;
5582 }
5583 .merchant-reviews-selector .selector-popup .popup-content .popup-body {
5584 height: 700px;
5585 overflow-y: auto;
5586 }
5587 .merchant-reviews-selector .selector-popup .popup-content .popup-body .products-search-results {
5588 padding: 24px;
5589 }
5590 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item {
5591 border-top: 1px solid #eee;
5592 border-left: 1px solid #eee;
5593 border-right: 1px solid #eee;
5594 -webkit-transition: 300ms;
5595 transition: 300ms;
5596 }
5597 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header {
5598 cursor: pointer;
5599 display: -webkit-box;
5600 display: -ms-flexbox;
5601 display: flex;
5602 gap: 25px;
5603 -ms-flex-wrap: wrap;
5604 flex-wrap: wrap;
5605 position: relative;
5606 width: 100%;
5607 padding: 10px 80px 10px 10px;
5608 -webkit-box-align: center;
5609 -ms-flex-align: center;
5610 align-items: center;
5611 }
5612 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header .product-expander {
5613 content: "";
5614 padding: 15px;
5615 display: block;
5616 position: absolute;
5617 right: 10px;
5618 top: 50%;
5619 -webkit-transform: translateY(-50%);
5620 transform: translateY(-50%);
5621 -webkit-transition: 300ms;
5622 transition: 300ms;
5623 }
5624 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header .product-expander svg {
5625 width: 20px;
5626 height: 20px;
5627 }
5628 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header.ui-state-active .product-expander {
5629 -webkit-transform: translateY(-50%) rotate(180deg);
5630 transform: translateY(-50%) rotate(180deg);
5631 }
5632 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:first-of-type {
5633 border-top-left-radius: 5px;
5634 border-top-right-radius: 5px;
5635 }
5636 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:last-of-type {
5637 border-bottom-left-radius: 5px;
5638 border-bottom-right-radius: 5px;
5639 border-bottom: 1px solid #eee;
5640 }
5641 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-image a {
5642 display: block;
5643 text-decoration: none;
5644 line-height: 0;
5645 }
5646 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-image img {
5647 border-radius: 5px;
5648 width: 50px;
5649 max-width: 100%;
5650 height: auto;
5651 }
5652 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-title {
5653 font-size: 14px;
5654 font-weight: 500;
5655 }
5656 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-title a {
5657 text-decoration: none;
5658 }
5659 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .spacer {
5660 margin-left: auto;
5661 }
5662 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status {
5663 text-transform: capitalize;
5664 border-radius: 4px;
5665 background-color: #eee;
5666 padding: 3px 8px;
5667 }
5668 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-publish {
5669 background-color: #c3e6cb; /* Softer light green */
5670 color: #155724; /* Darker green */
5671 }
5672 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-draft {
5673 background-color: #d1ecf1; /* Light blue */
5674 color: #0c5460; /* Dark teal */
5675 }
5676 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-pending {
5677 background-color: #fff3cd; /* Light yellow */
5678 color: #856404; /* Dark yellow/brown */
5679 }
5680 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count {
5681 color: #fff;
5682 display: -webkit-box;
5683 display: -ms-flexbox;
5684 display: flex;
5685 -webkit-box-align: center;
5686 -ms-flex-align: center;
5687 align-items: center;
5688 background-color: #79b0f8;
5689 border-radius: 3px;
5690 padding: 3px 6px;
5691 gap: 5px;
5692 position: relative;
5693 opacity: 0.5;
5694 -webkit-transition: 300ms;
5695 transition: 300ms;
5696 }
5697 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:before {
5698 content: "";
5699 display: block;
5700 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");
5701 background-size: contain; /* Adjust as necessary */
5702 background-repeat: no-repeat; /* Adjust as necessary */
5703 width: 15px; /* Set width */
5704 height: 15px; /* Set height */
5705 }
5706 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:hover {
5707 opacity: 1;
5708 }
5709 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:hover .tooltip {
5710 visibility: visible;
5711 opacity: 1;
5712 }
5713 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-reviews-count {
5714 color: #8e8e8e;
5715 }
5716 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:hover {
5717 background-color: #f4f4f4;
5718 }
5719 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews) {
5720 cursor: auto;
5721 }
5722 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews) .product-expander {
5723 opacity: 0.2;
5724 }
5725 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews):hover {
5726 background-color: transparent;
5727 }
5728 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item.opened:hover {
5729 background-color: transparent;
5730 }
5731 .merchant-module-page-setting-field-warning {
5732 padding: 8px 10px;
5733 font-size: 14px;
5734 line-height: 1.6;
5735 color: #1D2327;
5736 border-radius: 4px;
5737 border: 1px solid #D72C0D;
5738 background-color: #FFF4F4;
5739 }
5740
5741 .merchant-module-page-setting-field-info {
5742 padding: 8px 10px;
5743 font-size: 14px;
5744 line-height: 1.6;
5745 color: #1D2327;
5746 border-radius: 4px;
5747 border: 1px solid #0d65d7;
5748 background-color: #e6effa;
5749 }
5750 .merchant-module-page-setting-field-info[data-id=shortcode_info] {
5751 margin-bottom: 0;
5752 }
5753
5754 .merchant-module-page-setting-field-divider {
5755 border-bottom: 1px solid #F0F0F1;
5756 }
5757 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
5758 font-size: 16px;
5759 }
5760
5761 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
5762 display: -webkit-box;
5763 display: -ms-flexbox;
5764 display: flex;
5765 grid-gap: 5px;
5766 -ms-flex-wrap: wrap;
5767 flex-wrap: wrap;
5768 margin-bottom: 15px;
5769 }
5770 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
5771 display: none;
5772 }
5773 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
5774 position: relative;
5775 display: -webkit-box;
5776 display: -ms-flexbox;
5777 display: flex;
5778 -webkit-box-align: center;
5779 -ms-flex-align: center;
5780 align-items: center;
5781 -webkit-box-pack: center;
5782 -ms-flex-pack: center;
5783 justify-content: center;
5784 border-radius: 4px;
5785 padding: 2px;
5786 border: 1px solid #eee;
5787 background-color: #fff;
5788 }
5789 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
5790 cursor: -webkit-grab;
5791 cursor: grab;
5792 width: 100%;
5793 height: 100%;
5794 max-height: 75px;
5795 -o-object-fit: cover;
5796 object-fit: cover;
5797 }
5798 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
5799 cursor: -webkit-grabbing;
5800 cursor: grabbing;
5801 }
5802 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
5803 cursor: pointer;
5804 position: absolute;
5805 z-index: 1;
5806 top: 5px;
5807 right: 5px;
5808 width: 16px;
5809 height: 16px;
5810 display: -webkit-box;
5811 display: -ms-flexbox;
5812 display: flex;
5813 -webkit-box-pack: center;
5814 -ms-flex-pack: center;
5815 justify-content: center;
5816 -webkit-box-align: center;
5817 -ms-flex-align: center;
5818 align-items: center;
5819 color: #fff;
5820 background-color: #c5280c;
5821 font-size: 14px;
5822 line-height: 1em;
5823 border-radius: 16px;
5824 opacity: 0;
5825 -webkit-transition: all 0.2s;
5826 transition: all 0.2s;
5827 }
5828 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
5829 opacity: 1;
5830 }
5831 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
5832 cursor: pointer;
5833 -webkit-user-select: none;
5834 -moz-user-select: none;
5835 -ms-user-select: none;
5836 user-select: none;
5837 display: -webkit-inline-box;
5838 display: -ms-inline-flexbox;
5839 display: inline-flex;
5840 padding: 0.4375rem 1rem;
5841 font-size: 0.875rem;
5842 font-weight: 600;
5843 line-height: 1.5;
5844 white-space: nowrap;
5845 text-transform: none;
5846 text-decoration: none;
5847 color: #212b36;
5848 background-color: #fff;
5849 border: 1px solid #c4cdd5;
5850 border-radius: 0.25rem;
5851 -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);
5852 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);
5853 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);
5854 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);
5855 }
5856 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
5857 outline: none;
5858 -webkit-box-shadow: none;
5859 box-shadow: none;
5860 }
5861 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
5862 visibility: visible !important;
5863 border: 1px dashed #ddd;
5864 background-color: #f9f9f9;
5865 border-radius: 4px;
5866 }
5867
5868 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
5869 display: -webkit-box;
5870 display: -ms-flexbox;
5871 display: flex;
5872 grid-gap: 5px;
5873 -ms-flex-wrap: wrap;
5874 flex-wrap: wrap;
5875 margin-bottom: 15px;
5876 }
5877 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
5878 display: none;
5879 }
5880 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop {
5881 position: relative;
5882 background: #F6F6F6;
5883 border: 1px solid #EAEAEB;
5884 border-radius: 5px;
5885 height: 150px;
5886 }
5887 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop .merchant-upload-button {
5888 display: -webkit-box;
5889 display: -ms-flexbox;
5890 display: flex;
5891 -webkit-box-orient: vertical;
5892 -webkit-box-direction: normal;
5893 -ms-flex-direction: column;
5894 flex-direction: column;
5895 -webkit-box-align: center;
5896 -ms-flex-align: center;
5897 align-items: center;
5898 -webkit-box-pack: center;
5899 -ms-flex-pack: center;
5900 justify-content: center;
5901 width: 100%;
5902 height: 100%;
5903 margin-top: 10px;
5904 border: none;
5905 background: no-repeat;
5906 outline: none;
5907 -webkit-box-shadow: none;
5908 box-shadow: none;
5909 }
5910 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop img {
5911 position: absolute;
5912 left: 50%;
5913 top: 50%;
5914 -webkit-transform: translate(-50%, -50%);
5915 transform: translate(-50%, -50%);
5916 margin-top: -15px;
5917 }
5918 .merchant-module-page-setting-field-upload .merchant-upload-image {
5919 position: relative;
5920 display: -webkit-box;
5921 display: -ms-flexbox;
5922 display: flex;
5923 -webkit-box-align: center;
5924 -ms-flex-align: center;
5925 align-items: center;
5926 -webkit-box-pack: center;
5927 -ms-flex-pack: center;
5928 justify-content: center;
5929 border-radius: 4px;
5930 padding: 2px;
5931 border: 1px solid #eee;
5932 background-color: #fff;
5933 }
5934 .merchant-module-page-setting-field-upload .merchant-upload-image img {
5935 cursor: -webkit-grab;
5936 cursor: grab;
5937 width: 100%;
5938 height: 100%;
5939 max-height: 75px;
5940 -o-object-fit: cover;
5941 object-fit: cover;
5942 }
5943 .merchant-module-page-setting-field-upload .merchant-upload-image i {
5944 cursor: pointer;
5945 position: absolute;
5946 z-index: 1;
5947 top: 5px;
5948 right: 5px;
5949 width: 16px;
5950 height: 16px;
5951 display: -webkit-box;
5952 display: -ms-flexbox;
5953 display: flex;
5954 -webkit-box-pack: center;
5955 -ms-flex-pack: center;
5956 justify-content: center;
5957 -webkit-box-align: center;
5958 -ms-flex-align: center;
5959 align-items: center;
5960 color: #fff;
5961 background-color: #c5280c;
5962 font-size: 14px;
5963 line-height: 1em;
5964 border-radius: 16px;
5965 opacity: 0;
5966 -webkit-transition: all 0.2s;
5967 transition: all 0.2s;
5968 }
5969 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
5970 opacity: 1;
5971 }
5972 .merchant-module-page-setting-field-upload .merchant-upload-button {
5973 cursor: pointer;
5974 -webkit-user-select: none;
5975 -moz-user-select: none;
5976 -ms-user-select: none;
5977 user-select: none;
5978 display: -webkit-inline-box;
5979 display: -ms-inline-flexbox;
5980 display: inline-flex;
5981 padding: 0.4375rem 1rem;
5982 font-size: 0.875rem;
5983 font-weight: 600;
5984 line-height: 1.5;
5985 white-space: nowrap;
5986 text-transform: none;
5987 text-decoration: none;
5988 color: #212b36;
5989 background-color: #fff;
5990 border: 1px solid #c4cdd5;
5991 border-radius: 0.25rem;
5992 -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);
5993 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);
5994 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);
5995 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);
5996 }
5997 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
5998 outline: none;
5999 -webkit-box-shadow: none;
6000 box-shadow: none;
6001 }
6002
6003 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
6004 display: -webkit-box;
6005 display: -ms-flexbox;
6006 display: flex;
6007 -webkit-box-pack: start;
6008 -ms-flex-pack: start;
6009 justify-content: flex-start;
6010 }
6011 .merchant-module-page-setting-field-switcher input {
6012 display: none;
6013 }
6014 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
6015 margin-left: 0;
6016 background: #3858E9;
6017 }
6018 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
6019 right: 1px;
6020 }
6021 .merchant-module-page-setting-field-switcher .toggle-switch {
6022 float: right;
6023 position: relative;
6024 width: 36px;
6025 margin-top: 2px;
6026 -webkit-user-select: none;
6027 -moz-user-select: none;
6028 -ms-user-select: none;
6029 user-select: none;
6030 }
6031 .merchant-module-page-setting-field-switcher .toggle-switch-label {
6032 position: relative;
6033 display: inline-block;
6034 overflow: hidden;
6035 cursor: pointer;
6036 border-radius: 20px;
6037 padding: 0;
6038 margin: 0;
6039 width: 36px;
6040 }
6041 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
6042 display: block;
6043 width: 200%;
6044 margin-left: -100%;
6045 background: #c8c8c8;
6046 height: 18px;
6047 }
6048 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
6049 display: block;
6050 width: 12px;
6051 height: 12px;
6052 margin: 3px;
6053 background-color: #fff;
6054 position: absolute;
6055 top: 0;
6056 bottom: 0;
6057 right: 18px;
6058 border-radius: 20px;
6059 -webkit-transition: all 0.1s ease-in 0s;
6060 transition: all 0.1s ease-in 0s;
6061 }
6062
6063 .merchant-module-alert {
6064 position: fixed;
6065 top: 0;
6066 left: 0;
6067 right: 0;
6068 bottom: 0;
6069 z-index: 99999;
6070 display: -webkit-box;
6071 display: -ms-flexbox;
6072 display: flex;
6073 -webkit-box-pack: center;
6074 -ms-flex-pack: center;
6075 justify-content: center;
6076 -webkit-box-align: center;
6077 -ms-flex-align: center;
6078 align-items: center;
6079 background-color: rgba(0, 0, 0, 0.6);
6080 opacity: 0;
6081 visibility: hidden;
6082 -webkit-user-select: none;
6083 -moz-user-select: none;
6084 -ms-user-select: none;
6085 user-select: none;
6086 pointer-events: none;
6087 -webkit-transition: all 0.2s;
6088 transition: all 0.2s;
6089 }
6090 .merchant-module-alert.merchant-show {
6091 -webkit-user-select: auto;
6092 -moz-user-select: auto;
6093 -ms-user-select: auto;
6094 user-select: auto;
6095 pointer-events: auto;
6096 opacity: 1;
6097 visibility: visible;
6098 }
6099
6100 .merchant-module-alert-wrapper {
6101 display: -webkit-box;
6102 display: -ms-flexbox;
6103 display: flex;
6104 -webkit-box-orient: vertical;
6105 -webkit-box-direction: normal;
6106 -ms-flex-direction: column;
6107 flex-direction: column;
6108 width: 640px;
6109 max-width: 90%;
6110 border-radius: 4px;
6111 background-color: #fff;
6112 }
6113
6114 .merchant-module-alert-header {
6115 display: -webkit-box;
6116 display: -ms-flexbox;
6117 display: flex;
6118 -webkit-box-align: center;
6119 -ms-flex-align: center;
6120 align-items: center;
6121 -webkit-box-pack: justify;
6122 -ms-flex-pack: justify;
6123 justify-content: space-between;
6124 padding: 20px 30px;
6125 }
6126 .merchant-module-alert-header strong {
6127 font-size: 18px;
6128 line-height: 1em;
6129 }
6130 .merchant-module-alert-header a {
6131 position: relative;
6132 right: -5px;
6133 display: -webkit-box;
6134 display: -ms-flexbox;
6135 display: flex;
6136 color: #212121;
6137 text-decoration: none;
6138 -webkit-transition: all 0.2s;
6139 transition: all 0.2s;
6140 }
6141 .merchant-module-alert-header a:hover {
6142 opacity: 0.6;
6143 }
6144 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
6145 outline: none;
6146 -webkit-box-shadow: none;
6147 box-shadow: none;
6148 }
6149 .merchant-module-alert-header i {
6150 font-size: 32px;
6151 line-height: 1em;
6152 width: auto;
6153 height: auto;
6154 }
6155
6156 .merchant-module-alert-content {
6157 display: -webkit-box;
6158 display: -ms-flexbox;
6159 display: flex;
6160 -webkit-box-orient: vertical;
6161 -webkit-box-direction: normal;
6162 -ms-flex-direction: column;
6163 flex-direction: column;
6164 grid-gap: 20px;
6165 padding: 0 30px 30px 30px;
6166 }
6167 .merchant-module-alert-content p {
6168 margin: 0;
6169 padding: 0;
6170 font-size: 15px;
6171 font-weight: 500;
6172 color: #757575;
6173 }
6174 .merchant-module-alert-content figure {
6175 display: -webkit-box;
6176 display: -ms-flexbox;
6177 display: flex;
6178 margin: 0;
6179 padding: 0;
6180 }
6181 .merchant-module-alert-content img {
6182 max-width: 100%;
6183 }
6184
6185 .merchant-module-alert-footer {
6186 display: -webkit-box;
6187 display: -ms-flexbox;
6188 display: flex;
6189 -webkit-box-pack: end;
6190 -ms-flex-pack: end;
6191 justify-content: flex-end;
6192 padding: 30px;
6193 }
6194 .merchant-module-alert-footer a {
6195 font-weight: bold;
6196 font-size: 14px;
6197 padding: 10px 15px;
6198 text-decoration: none;
6199 border-radius: 4px;
6200 color: #212121;
6201 border: 1px solid #e5e5e5;
6202 }
6203 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
6204 outline: none;
6205 -webkit-box-shadow: none;
6206 box-shadow: none;
6207 }
6208
6209 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
6210 pointer-events: none;
6211 opacity: 0.8;
6212 }
6213 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
6214 opacity: 0.5;
6215 }
6216 .merchant-module-page-setting-field-inner.disabled .merchant-range {
6217 opacity: 0.5;
6218 }
6219 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
6220 opacity: 0.5;
6221 }
6222
6223 /* Utils */
6224 .merchant-height-auto {
6225 height: auto;
6226 }
6227
6228 .merchant-admin-page__dashboard .merchant-top-bar {
6229 margin-bottom: 0;
6230 }
6231 .merchant-admin-page__dashboard .merchant-wrap {
6232 margin-top: 0;
6233 }
6234 .merchant-admin-page__dashboard .merchant-wrap .merchant-modules-header-heading {
6235 margin-top: 30px;
6236 }
6237 .merchant-admin-page .merchant-admin-footer-text-link {
6238 display: inline-block;
6239 padding-right: 5px;
6240 color: #3858E9;
6241 }
6242 .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 {
6243 color: #3858E9;
6244 }
6245
6246 .merchant-admin-page-module #wpfooter {
6247 display: none;
6248 }
6249 .merchant-admin-page-module #wpbody-content {
6250 padding-bottom: 30px;
6251 }
6252
6253 .merchant-module-footer-text {
6254 display: -webkit-box;
6255 display: -ms-flexbox;
6256 display: flex;
6257 grid-gap: 5px;
6258 -webkit-box-pack: center;
6259 -ms-flex-pack: center;
6260 justify-content: center;
6261 text-align: center;
6262 margin-top: 37px;
6263 }
6264 .merchant-module-footer-text i {
6265 color: #3858E9;
6266 }
6267
6268 /* Responsive */
6269 @media (max-width: 991px) {
6270 .merchant-wrap {
6271 display: -webkit-box;
6272 display: -ms-flexbox;
6273 display: flex;
6274 -webkit-box-orient: vertical;
6275 -webkit-box-direction: normal;
6276 -ms-flex-direction: column;
6277 flex-direction: column;
6278 grid-gap: 20px;
6279 }
6280 .merchant-modules-header-shortlinks {
6281 margin: 0;
6282 }
6283 .merchant-modules-header {
6284 -webkit-box-orient: vertical;
6285 -webkit-box-direction: normal;
6286 -ms-flex-direction: column;
6287 flex-direction: column;
6288 grid-gap: 20px;
6289 }
6290 .merchant-module-page-header-content {
6291 width: 100%;
6292 }
6293 .merchant-module-page-desc {
6294 max-width: none;
6295 }
6296 .merchant-module-page-header-placeholder {
6297 display: none;
6298 }
6299 .merchant-modules-header-image {
6300 display: none;
6301 }
6302 .merchant-modules-list {
6303 grid-template-columns: repeat(1, minmax(0, 1fr));
6304 }
6305 .merchant-modules-header-status {
6306 margin-bottom: 0;
6307 }
6308 .merchant-module-page-setting-box {
6309 -webkit-box-orient: vertical;
6310 -webkit-box-direction: normal;
6311 -ms-flex-direction: column;
6312 flex-direction: column;
6313 grid-gap: 20px;
6314 }
6315 .merchant-module-page-setting-title,
6316 .merchant-module-page-setting-fields {
6317 width: 100%;
6318 }
6319 .merchant-module-page-body {
6320 -webkit-box-orient: vertical;
6321 -webkit-box-direction: reverse;
6322 -ms-flex-direction: column-reverse;
6323 flex-direction: column-reverse;
6324 }
6325 .merchant-module-page-content {
6326 width: 100%;
6327 }
6328 .merchant-module-page-preview {
6329 margin-left: 0;
6330 margin-bottom: 20px;
6331 width: 100%;
6332 }
6333 }
6334 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area {
6335 margin-bottom: 0px;
6336 position: relative;
6337 }
6338 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field {
6339 background-color: #F0F0F0;
6340 border: none;
6341 border-radius: 3px;
6342 padding: 13px 0 13px 40px;
6343 width: 100%;
6344 }
6345 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-webkit-input-placeholder {
6346 font-size: 12px;
6347 }
6348 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-moz-placeholder {
6349 font-size: 12px;
6350 }
6351 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field:-ms-input-placeholder {
6352 font-size: 12px;
6353 }
6354 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-ms-input-placeholder {
6355 font-size: 12px;
6356 }
6357 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::placeholder {
6358 font-size: 12px;
6359 }
6360 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-icon {
6361 position: absolute;
6362 top: 50%;
6363 left: 15px;
6364 -webkit-transform: translateY(-50%);
6365 transform: translateY(-50%);
6366 }
6367 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching {
6368 margin-left: 10px;
6369 margin-right: 10px;
6370 font-style: italic;
6371 font-size: 11px;
6372 position: absolute;
6373 top: 13px;
6374 right: 0;
6375 color: #9d9d9d;
6376 display: none;
6377 }
6378 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching.active {
6379 display: inline;
6380 }
6381 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview {
6382 position: absolute;
6383 top: 100%;
6384 left: 0;
6385 right: 0;
6386 z-index: 10;
6387 background-color: #fff;
6388 border: 1px solid #ddd;
6389 padding: 0;
6390 margin: 0;
6391 height: 190px;
6392 overflow-y: scroll;
6393 display: none;
6394 }
6395 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li {
6396 cursor: pointer;
6397 }
6398 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style {
6399 padding-left: 15px;
6400 }
6401 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style:before {
6402 content: "";
6403 display: inline-block;
6404 width: 6px;
6405 height: 6px;
6406 border-radius: 50%;
6407 background-color: #d1d1d1;
6408 margin-right: 7px;
6409 }
6410 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li {
6411 border-radius: 4px;
6412 margin: 15px 0 15px;
6413 border: 1px solid #dfe1e1;
6414 }
6415 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li:last-child {
6416 margin-bottom: 0;
6417 }
6418 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul {
6419 padding: 0;
6420 margin: 0;
6421 }
6422 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li {
6423 padding: 5px 10px;
6424 margin: 0 -3px;
6425 min-height: 30px;
6426 display: -webkit-box;
6427 display: -ms-flexbox;
6428 display: flex;
6429 -webkit-box-pack: justify;
6430 -ms-flex-pack: justify;
6431 justify-content: space-between;
6432 -webkit-box-align: center;
6433 -ms-flex-align: center;
6434 align-items: center;
6435 border-bottom: 1px dotted #eee;
6436 position: relative;
6437 overflow: hidden;
6438 -webkit-user-select: none;
6439 -moz-user-select: none;
6440 -ms-user-select: none;
6441 user-select: none;
6442 -webkit-transition: 300ms;
6443 transition: 300ms;
6444 }
6445 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li:hover {
6446 background-color: #fafafa;
6447 }
6448 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li > span {
6449 margin-left: 3px;
6450 margin-right: 3px;
6451 }
6452 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img {
6453 width: 30px;
6454 -webkit-box-flex: 0;
6455 -ms-flex: 0 0 30px;
6456 flex: 0 0 30px;
6457 }
6458 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img img {
6459 width: 30px;
6460 height: 30px;
6461 border-radius: 4px;
6462 display: block;
6463 }
6464 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.data {
6465 -webkit-box-flex: 1;
6466 -ms-flex-positive: 1;
6467 flex-grow: 1;
6468 }
6469 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.type {
6470 font-size: 10px;
6471 color: #999;
6472 min-width: 40px;
6473 text-decoration: none;
6474 text-align: end;
6475 }
6476 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li del .amount {
6477 text-decoration: line-through;
6478 }
6479 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.info {
6480 font-size: 12px;
6481 font-style: italic;
6482 height: 18px;
6483 line-height: 18px;
6484 color: #999;
6485 background-color: #f1f1f1;
6486 text-decoration: none;
6487 padding: 0 6px;
6488 border-radius: 2px;
6489 margin-left: 3px;
6490 margin-right: 3px;
6491 }
6492 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li .remove {
6493 width: 30px;
6494 height: 30px;
6495 line-height: 28px;
6496 font-size: 15px;
6497 -webkit-box-flex: 0;
6498 -ms-flex: 0 0 30px;
6499 flex: 0 0 30px;
6500 border-radius: 50%;
6501 text-align: center;
6502 background-color: #f6f3f3;
6503 cursor: pointer;
6504 }
6505
6506 .merchant-image-picker label {
6507 position: relative;
6508 display: inline-block;
6509 margin-right: 10px;
6510 margin-bottom: 5px;
6511 }
6512 .merchant-image-picker label .tool-tip-text {
6513 visibility: hidden;
6514 opacity: 0;
6515 width: 120px;
6516 background-color: black;
6517 color: #fff;
6518 text-align: center;
6519 border-radius: 6px;
6520 padding: 5px 0;
6521 position: absolute;
6522 z-index: 1;
6523 top: -35px;
6524 left: 50%;
6525 margin-left: -60px;
6526 -webkit-transition: opacity 300ms;
6527 transition: opacity 300ms;
6528 }
6529 .merchant-image-picker label .tool-tip-text::after {
6530 content: "";
6531 position: absolute;
6532 top: 100%;
6533 left: 50%;
6534 margin-left: -5px;
6535 border-width: 5px;
6536 border-style: solid;
6537 border-color: black transparent transparent transparent;
6538 }
6539 .merchant-image-picker label:hover .tool-tip-text {
6540 visibility: visible;
6541 opacity: 1;
6542 }
6543 .merchant-image-picker input[type=radio] {
6544 display: none;
6545 clear: both;
6546 }
6547 .merchant-image-picker img {
6548 border: 2px solid #F0F0F1;
6549 border-radius: 4px;
6550 cursor: pointer;
6551 padding: 7px 3px;
6552 -webkit-transition: 300ms;
6553 transition: 300ms;
6554 }
6555 .merchant-image-picker input[type=radio]:checked + img {
6556 border: 2px solid #3858E9;
6557 }
6558
6559 .CodeMirror.cm-s-default {
6560 border-radius: 5px;
6561 border: 1px solid #f0f0f1;
6562 }
6563
6564 .merchant-module-page-settings.backup-restore-section {
6565 border-radius: 8px;
6566 }
6567 .merchant-module-page-settings.backup-restore-section .merchant-module-page-setting-box {
6568 max-width: 1200px;
6569 margin: 0 auto;
6570 }
6571 .merchant-module-page-settings.backup-restore-section section {
6572 background: white;
6573 border-radius: 8px;
6574 margin-bottom: 24px;
6575 }
6576 .merchant-module-page-settings.backup-restore-section section:last-child {
6577 margin-bottom: 0;
6578 }
6579 .merchant-module-page-settings.backup-restore-section section h3 {
6580 color: #23282d;
6581 position: relative;
6582 margin-block: 0 10px;
6583 }
6584 .merchant-module-page-settings.backup-restore-section section .form-field label {
6585 display: block;
6586 margin-bottom: 0.5rem;
6587 font-weight: 600;
6588 color: #23282d;
6589 }
6590 .merchant-module-page-settings.backup-restore-section section .form-field button {
6591 padding: 0.75rem 1.5rem;
6592 margin-right: 15px;
6593 border: 1px solid #3858e9;
6594 background-color: rgba(0, 0, 0, 0);
6595 color: #3858e9;
6596 border-radius: 4px;
6597 cursor: pointer;
6598 font-size: 0.9rem;
6599 font-weight: 500;
6600 -webkit-transition: all 0.2s ease-in-out;
6601 transition: all 0.2s ease-in-out;
6602 }
6603 .merchant-module-page-settings.backup-restore-section section .form-field button:hover {
6604 opacity: 0.8;
6605 }
6606 .merchant-module-page-settings.backup-restore-section section .form-field button:focus {
6607 background-color: rgba(0, 0, 0, 0);
6608 outline: 2px solid #3858e9;
6609 outline-offset: 2px;
6610 }
6611 .merchant-module-page-settings.backup-restore-section section .form-field button:disabled {
6612 opacity: 0.5;
6613 cursor: not-allowed;
6614 }
6615 .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 {
6616 display: block;
6617 margin: 10px 0 0;
6618 }
6619 .merchant-module-page-settings.backup-restore-section section .form-field p.description {
6620 font-size: 0.875rem;
6621 color: #666;
6622 margin-top: 0.5rem;
6623 font-style: italic;
6624 }
6625 .merchant-module-page-settings.backup-restore-section section .form-field .backup-file-remove {
6626 color: #c5280c;
6627 border-radius: 50%;
6628 position: relative;
6629 top: 5px;
6630 right: 5px;
6631 cursor: pointer;
6632 }
6633 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status {
6634 font-size: 13px;
6635 font-weight: 600;
6636 vertical-align: middle;
6637 opacity: 0;
6638 -webkit-transition: opacity 0.2s ease;
6639 transition: opacity 0.2s ease;
6640 }
6641 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status.is-success {
6642 color: #46b450;
6643 opacity: 1;
6644 }
6645 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status.is-error {
6646 color: #dc3232;
6647 opacity: 1;
6648 }
6649 .merchant-module-page-settings.backup-restore-section section .error-message p {
6650 margin-bottom: 0;
6651 }
6652 @media (max-width: 768px) {
6653 .merchant-module-page-settings.backup-restore-section {
6654 padding: 1.5rem;
6655 }
6656 .merchant-module-page-settings.backup-restore-section section {
6657 padding: 1.5rem;
6658 }
6659 }
6660 .merchant-module-page-settings.backup-restore-section .merchant-dropzone {
6661 position: relative;
6662 border: 2px dashed #D6D6D6;
6663 border-radius: 8px;
6664 padding: 40px 20px;
6665 text-align: center;
6666 -webkit-transition: all 0.2s ease-in-out;
6667 transition: all 0.2s ease-in-out;
6668 cursor: pointer;
6669 }
6670 .merchant-module-page-settings.backup-restore-section .merchant-dropzone:hover, .merchant-module-page-settings.backup-restore-section .merchant-dropzone.drag-over {
6671 border-color: #3858E9;
6672 background-color: rgba(56, 88, 233, 0.03);
6673 }
6674 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.drag-over {
6675 border-style: solid;
6676 }
6677 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content {
6678 pointer-events: none;
6679 }
6680 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content .dashicons {
6681 font-size: 32px;
6682 width: 32px;
6683 height: 32px;
6684 color: #999;
6685 margin-bottom: 8px;
6686 }
6687 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content p {
6688 margin: 0 0 12px;
6689 color: #666;
6690 font-size: 14px;
6691 }
6692 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__browse {
6693 pointer-events: auto;
6694 padding: 8px 20px !important;
6695 margin: 0 !important;
6696 font-size: 13px !important;
6697 }
6698 .merchant-module-page-settings.backup-restore-section .merchant-dropzone .merchant-backup-file {
6699 position: absolute;
6700 top: 0;
6701 left: 0;
6702 width: 100%;
6703 height: 100%;
6704 opacity: 0;
6705 cursor: pointer;
6706 }
6707 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__loading {
6708 display: none;
6709 position: absolute;
6710 top: 0;
6711 left: 0;
6712 width: 100%;
6713 height: 100%;
6714 background: rgba(255, 255, 255, 0.9);
6715 border-radius: 8px;
6716 -webkit-box-orient: vertical;
6717 -webkit-box-direction: normal;
6718 -ms-flex-direction: column;
6719 flex-direction: column;
6720 -webkit-box-align: center;
6721 -ms-flex-align: center;
6722 align-items: center;
6723 -webkit-box-pack: center;
6724 -ms-flex-pack: center;
6725 justify-content: center;
6726 gap: 10px;
6727 z-index: 10;
6728 }
6729 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__loading p {
6730 margin: 0;
6731 color: #3858E9;
6732 font-size: 14px;
6733 font-weight: 500;
6734 }
6735 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-loading {
6736 pointer-events: none;
6737 }
6738 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-loading .merchant-dropzone__loading {
6739 display: -webkit-box;
6740 display: -ms-flexbox;
6741 display: flex;
6742 }
6743 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success {
6744 display: none;
6745 position: absolute;
6746 top: 0;
6747 left: 0;
6748 width: 100%;
6749 height: 100%;
6750 background: rgba(255, 255, 255, 0.95);
6751 border-radius: 8px;
6752 -webkit-box-orient: vertical;
6753 -webkit-box-direction: normal;
6754 -ms-flex-direction: column;
6755 flex-direction: column;
6756 -webkit-box-align: center;
6757 -ms-flex-align: center;
6758 align-items: center;
6759 -webkit-box-pack: center;
6760 -ms-flex-pack: center;
6761 justify-content: center;
6762 gap: 8px;
6763 z-index: 10;
6764 }
6765 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success .dashicons {
6766 font-size: 36px;
6767 width: 36px;
6768 height: 36px;
6769 color: #46b450;
6770 }
6771 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success p {
6772 margin: 0;
6773 color: #46b450;
6774 font-size: 14px;
6775 font-weight: 600;
6776 }
6777 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success {
6778 pointer-events: none;
6779 border-color: #46b450;
6780 background-color: rgba(70, 180, 80, 0.03);
6781 }
6782 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-dropzone__content,
6783 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-backup-file {
6784 visibility: hidden;
6785 }
6786 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-dropzone__success {
6787 display: -webkit-box;
6788 display: -ms-flexbox;
6789 display: flex;
6790 }
6791 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error {
6792 display: none;
6793 position: absolute;
6794 top: 0;
6795 left: 0;
6796 width: 100%;
6797 height: 100%;
6798 background: rgba(255, 255, 255, 0.95);
6799 border-radius: 8px;
6800 -webkit-box-orient: vertical;
6801 -webkit-box-direction: normal;
6802 -ms-flex-direction: column;
6803 flex-direction: column;
6804 -webkit-box-align: center;
6805 -ms-flex-align: center;
6806 align-items: center;
6807 -webkit-box-pack: center;
6808 -ms-flex-pack: center;
6809 justify-content: center;
6810 gap: 8px;
6811 z-index: 10;
6812 }
6813 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error .dashicons {
6814 font-size: 36px;
6815 width: 36px;
6816 height: 36px;
6817 color: #dc3232;
6818 }
6819 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error p {
6820 margin: 0;
6821 color: #dc3232;
6822 font-size: 14px;
6823 font-weight: 600;
6824 }
6825 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error {
6826 pointer-events: none;
6827 border-color: #dc3232;
6828 background-color: rgba(220, 50, 50, 0.03);
6829 }
6830 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-dropzone__content,
6831 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-backup-file {
6832 visibility: hidden;
6833 }
6834 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-dropzone__error {
6835 display: -webkit-box;
6836 display: -ms-flexbox;
6837 display: flex;
6838 }
6839
6840 .merchant-loading-spinner {
6841 display: inline-block;
6842 width: 20px;
6843 height: 20px;
6844 border: 4px solid rgba(0, 0, 0, 0.1);
6845 border-radius: 50%;
6846 border-top-color: #3D65E9;
6847 -webkit-animation: spin 1s ease-in-out infinite;
6848 animation: spin 1s ease-in-out infinite;
6849 vertical-align: middle;
6850 -webkit-transition: 300ms;
6851 transition: 300ms;
6852 opacity: 0;
6853 visibility: hidden;
6854 }
6855 .merchant-loading-spinner.show {
6856 opacity: 1;
6857 visibility: visible;
6858 }
6859 @-webkit-keyframes spin {
6860 0% {
6861 -webkit-transform: rotate(0deg);
6862 transform: rotate(0deg);
6863 }
6864 100% {
6865 -webkit-transform: rotate(360deg);
6866 transform: rotate(360deg);
6867 }
6868 }
6869 @keyframes spin {
6870 0% {
6871 -webkit-transform: rotate(0deg);
6872 transform: rotate(0deg);
6873 }
6874 100% {
6875 -webkit-transform: rotate(360deg);
6876 transform: rotate(360deg);
6877 }
6878 }