PluginProbe
Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits / 3.1.2
Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits v3.1.2
3.2.2 3.2.3 3.2.1 3.2.0 3.1.9 3.1.8 3.1.7 3.1.6 3.1.5 3.1.4 3.1.3 3.1.2 3.1.1 3.1.0 3.0.9 trunk 1.0.6 1.0.7 1.0.8 1.0.9 1.1.0 1.1.1 1.1.3 1.1.4 1.1.5 All 174 releases
master-addons / assets / css / admin / popup-builder / popup-builder.css

popup-builder.css in Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits 3.1.2, at assets/css/admin/popup-builder/popup-builder.css

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