PluginProbe
ووسلام – همگام سازی ووکامرس و باسلام / 1.8.8
ووسلام – همگام سازی ووکامرس و باسلام v1.8.8
1.10.21 1.10.19 1.10.20 1.10.18 1.10.17 1.10.15 1.10.14 1.10.13 1.10.12 1.10.10 1.10.9 1.10.8 1.10.7 1.10.6 1.10.5 1.10.4 1.10.3 1.10.2 1.10.1 1.10.0 1.9.2 1.9.1 1.9.0 1.8.8 1.8.5 All 54 releases
sync-basalam / assets / css / style.css

style.css in ووسلام – همگام سازی ووکامرس و باسلام 1.8.8, at assets/css/style.css

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