PluginProbe
ووسلام – همگام سازی ووکامرس و باسلام / 1.9.0
ووسلام – همگام سازی ووکامرس و باسلام v1.9.0
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 1.8.6 All 53 releases
sync-basalam / assets / css / style.css

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

7,760 lines 136.6 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 #_sync_basalam_is_gold_product_checkbox_field ,
1802 #basalam_gold_product_fields,
1803 #basalam_product_data > div:nth-child(2) > p > label {
1804 font-family: "PelakFA";
1805 }
1806
1807 input[type="number"]::-webkit-inner-spin-button,
1808 input[type="number"]::-webkit-outer-spin-button {
1809 -webkit-appearance: none;
1810 margin: 0;
1811 }
1812
1813 .vendor-info {
1814 background: white;
1815 padding: 24px;
1816 padding-top: 10px !important;
1817 border-radius: 16px;
1818 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
1819 border: 1px solid var(--basalam-gray-200);
1820 position: relative;
1821 overflow: hidden;
1822 }
1823
1824 .vendor-info-grid {
1825 display: grid;
1826 grid-template-columns: repeat(2, 1fr);
1827 gap: 5px;
1828 }
1829
1830 .info-item {
1831 padding: 16px;
1832 background: var(--basalam-gray-100);
1833 border-radius: 8px;
1834 transition: all 0.3s ease;
1835 -webkit-transition: all 0.3s ease;
1836 -moz-transition: all 0.3s ease;
1837 -ms-transition: all 0.3s ease;
1838 -o-transition: all 0.3s ease;
1839 }
1840
1841 .info-item:hover {
1842 background: var(--basalam-gray-200);
1843 transform: translateY(-2px);
1844 }
1845
1846 .info-label {
1847 color: var(--basalam-gray-600);
1848 font-size: 13px;
1849 margin-bottom: 8px;
1850 font-weight: 500;
1851 position: relative;
1852 padding-right: 12px;
1853 }
1854
1855 .info-label::before {
1856 content: "";
1857 position: absolute;
1858 right: 0;
1859 top: 50%;
1860 transform: translateY(-50%);
1861 width: 4px;
1862 height: 4px;
1863 background: var(--basalam-primary-color);
1864 border-radius: 50%;
1865 -webkit-border-radius: 50%;
1866 -moz-border-radius: 50%;
1867 -ms-border-radius: 50%;
1868 -o-border-radius: 50%;
1869 }
1870
1871 .info-value {
1872 color: var(--basalam-gray-800);
1873 font-size: 14px;
1874 font-weight: 600;
1875 }
1876
1877 .basalam-danger-zone {
1878 margin: 0;
1879 position: sticky;
1880 top: 50px;
1881 height: fit-content;
1882 }
1883
1884 .basalam-danger-zone .basalam-card::before {
1885 content: "";
1886 position: absolute;
1887 top: 0;
1888 right: 0;
1889 width: 100px;
1890 height: 100px;
1891 background: linear-gradient(135deg,
1892 var(--basalam-danger-color) 0%,
1893 transparent 60%);
1894 opacity: 0.1;
1895 border-radius: 0 16px 0 100px;
1896 }
1897
1898 .basalam-danger-zone .basalam-p {
1899 font-weight: 600;
1900 margin-bottom: 8px;
1901 }
1902
1903 .basalam-danger-zone .basalam-p__small {
1904 color: var(--basalam-gray-600);
1905 font-size: 13px;
1906 line-height: 1.5;
1907 margin-bottom: 16px;
1908 padding: 0;
1909 padding-bottom: 10px;
1910 }
1911
1912 .basalam-danger-button {
1913 background: var(--basalam-danger-color);
1914 color: white;
1915 border: none;
1916 border-radius: 8px;
1917 padding: 8px 16px;
1918 font-size: 13px;
1919 cursor: pointer;
1920 display: flex;
1921 align-items: center;
1922 gap: 8px;
1923 transition: all 0.2s ease;
1924 width: 100%;
1925 justify-content: center;
1926 -webkit-transition: all 0.2s ease;
1927 -moz-transition: all 0.2s ease;
1928 -ms-transition: all 0.2s ease;
1929 -o-transition: all 0.2s ease;
1930 }
1931
1932 .basalam-access-button {
1933 background: var(--basalam-primary-color);
1934 color: white;
1935 border: none;
1936 border-radius: 8px;
1937 padding: 8px 16px;
1938 font-size: 13px;
1939 cursor: pointer;
1940 display: flex;
1941 align-items: center;
1942 gap: 8px;
1943 transition: all 0.2s ease;
1944 width: auto;
1945 justify-content: center;
1946 -webkit-transition: all 0.2s ease;
1947 -moz-transition: all 0.2s ease;
1948 -ms-transition: all 0.2s ease;
1949 -o-transition: all 0.2s ease;
1950 -webkit-border-radius: 8px;
1951 -moz-border-radius: 8px;
1952 -ms-border-radius: 8px;
1953 -o-border-radius: 8px;
1954 }
1955
1956 .basalam-danger-button:hover {
1957 background: #d32f2f;
1958 transform: translateY(-1px);
1959 -webkit-transform: translateY(-1px);
1960 -moz-transform: translateY(-1px);
1961 -ms-transform: translateY(-1px);
1962 -o-transform: translateY(-1px);
1963 }
1964
1965 .basalam-danger-button .dashicons {
1966 font-size: 16px;
1967 width: 16px;
1968 height: 16px;
1969 }
1970
1971 @media (max-width: 1200px) {
1972 .basalam-info-container {
1973 grid-template-columns: 1fr;
1974 }
1975
1976 .vendor-info-grid {
1977 grid-template-columns: repeat(2, 1fr);
1978 }
1979
1980 .basalam-danger-zone {
1981 position: static;
1982 margin: 0 auto;
1983 max-width: 400px;
1984 width: 100%;
1985 }
1986 }
1987
1988 @media (max-width: 768px) {
1989 .vendor-info-grid {
1990 grid-template-columns: 1fr;
1991 gap: 12px;
1992 }
1993
1994 .info-item {
1995 padding: 12px;
1996 }
1997
1998 .basalam-danger-zone {
1999 max-width: 100%;
2000 }
2001 }
2002
2003 .vendor-info {
2004 background: white;
2005 padding: 24px;
2006 border-radius: 16px;
2007 margin-top: 20px;
2008 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
2009 border: 1px solid var(--basalam-gray-200);
2010 position: relative;
2011 overflow: hidden;
2012 }
2013
2014 .vendor-info::before {
2015 content: "";
2016 position: absolute;
2017 top: 0;
2018 right: 0;
2019 width: 150px;
2020 height: 150px;
2021 background: linear-gradient(135deg,
2022 var(--basalam-primary-color) 0%,
2023 transparent 60%);
2024 opacity: 0.1;
2025 border-radius: 0 16px 0 150px;
2026 }
2027
2028 .basalam-info-top-section {
2029 display: flex;
2030 gap: 24px;
2031 align-items: center;
2032 margin-bottom: 30px;
2033 position: relative;
2034 }
2035
2036 .basalam-info-top-section::after {
2037 content: "";
2038 position: absolute;
2039 bottom: -15px;
2040 right: 0;
2041 width: 100px;
2042 height: 3px;
2043 background: var(--basalam-primary-color);
2044 border-radius: 3px;
2045 }
2046
2047 .basalam-info-top-section img {
2048 height: 45px;
2049 transition: transform 0.3s ease;
2050 }
2051
2052 .basalam-info-top-section img:hover {
2053 transform: scale(1.05);
2054 }
2055
2056 .basalam-info-top-section h1 {
2057 padding: 0;
2058 margin: 0;
2059 font-size: 26px;
2060 font-weight: 600;
2061 color: var(--basalam-gray-800);
2062 }
2063
2064 .basalam-info-container {
2065 display: grid;
2066 grid-template-columns: 2fr 1fr;
2067 gap: 24px;
2068 margin-top: 20px;
2069 position: relative;
2070 align-items: start;
2071 }
2072
2073 .column-sync_basalam_status,
2074 .column-basalam_order {
2075 font-family: "PelakFa";
2076 font-size: 11px !important;
2077 width: 120px;
2078 text-align: center !important;
2079 }
2080
2081 .column-sync_basalam_status .dashicons {
2082 font-size: 20px;
2083 }
2084
2085 .column-sync_basalam_status {
2086 font-family: "PelakFa";
2087 font-size: 11px !important;
2088 width: 120px;
2089 text-align: center !important;
2090 }
2091
2092 .column-basalam_status .dashicons {
2093 font-size: 20px;
2094 }
2095
2096 #sync_basalam_single_product_manage_box .postbox-header h2 {
2097 font-family: "pelakFa" !important;
2098 }
2099
2100 .basalam-status-circle {
2101 display: inline-flex;
2102 align-items: center;
2103 justify-content: center;
2104 width: 15px;
2105 height: 15px;
2106 font-size: 10px;
2107 font-weight: bold;
2108 color: white;
2109 margin-right: 5px;
2110 border-radius: 10px;
2111 -webkit-border-radius: 10px;
2112 -moz-border-radius: 10px;
2113 -ms-border-radius: 10px;
2114 -o-border-radius: 10px;
2115 }
2116
2117 .basalam-notice-wc {
2118 max-width: 975px !important;
2119 margin: auto !important;
2120 border-radius: 8px !important;
2121 margin-top: 10px !important;
2122 -webkit-border-radius: ;
2123 -moz-border-radius: ;
2124 -ms-border-radius: ;
2125 -o-border-radius: ;
2126 }
2127
2128 .basalam_status_data_container {
2129 display: flex;
2130 gap: 10px;
2131 flex-wrap: wrap;
2132 justify-content: center;
2133 flex: 1;
2134 }
2135
2136 .basalam_settings_options {
2137 font-family: "PelakFA" !important;
2138 font-weight: bold;
2139 }
2140
2141 .basalam_status_data_item {
2142 display: flex;
2143 align-items: baseline;
2144 gap: 5px;
2145 }
2146
2147 .basalam_status_data_number {
2148 background: var(--basalam-primary-color);
2149 color: white;
2150 padding: 5px;
2151 border-radius: 5px;
2152 font-size: 12px;
2153 -webkit-border-radius: 5px;
2154 -moz-border-radius: 5px;
2155 -ms-border-radius: 5px;
2156 -o-border-radius: 5px;
2157 }
2158
2159 .order-status.status-bslm-wait-vendor,
2160 .order-status.status-bslm-rejected,
2161 .order-status.status-bslm-shipping,
2162 .order-status.status-bslm-preparation,
2163 .order-status.status-bslm-completed {
2164 background: var(--basalam-primary-color);
2165 color: white;
2166 font-family: "PelakFA";
2167 font-weight: 600;
2168 direction: ltr;
2169 }
2170
2171 #sync_basalam_single_product_manage_box>div.inside>button:nth-child(4) {
2172 background-color: var(--basalam-danger-hover);
2173 }
2174
2175 .basalam-input {
2176 width: 100%;
2177 padding: 8px;
2178 border: 1px solid #ddd;
2179 border-radius: 4px;
2180 }
2181
2182 .not-allowed {
2183 opacity: 0.5;
2184 cursor: not-allowed !important;
2185 }
2186
2187 @media screen and (min-width: 561px) and (max-width: 900px) {
2188 .basalam_status_data_container {
2189 flex-direction: row !important;
2190 flex: 1 1 100%;
2191 justify-content: center !important;
2192 gap: 20px !important;
2193 }
2194
2195 .basalam_status_data_item {
2196 flex: 0 1 calc(50% - 10px);
2197 min-width: 200px;
2198 }
2199 }
2200
2201 @media screen and (max-width: 600px) {
2202 #basalam-modal {
2203 left: 0 !important;
2204 right: 0 !important;
2205 }
2206
2207 #basalam-modal .basalam-action-card {
2208 margin: 2% auto !important;
2209 width: 95% !important;
2210 max-width: 100% !important;
2211 padding: 15px !important;
2212 padding-top: 35px !important;
2213 }
2214
2215 #basalam-modal .basalam-action-card .basalam-form-row,
2216 #basalam-modal section#sep-section .basalam-form-row {
2217 grid-template-columns: 1fr 1fr !important;
2218 gap: 10px !important;
2219 }
2220
2221 #basalam-modal .basalam-form-group {
2222 width: 100% !important;
2223 padding: 8px !important;
2224 }
2225
2226 #basalam-modal .basalam-form-group .basalam-label {
2227 font-size: 10px !important;
2228 }
2229
2230 #basalam-modal .basalam-form-group input,
2231 #basalam-modal .basalam-form-group select {
2232 font-size: 11px !important;
2233 padding: 6px !important;
2234 height: 32px !important;
2235 }
2236
2237 #basalam-modal .options_mapping_section {
2238 overflow-x: auto;
2239 -webkit-overflow-scrolling: touch;
2240 }
2241
2242 #basalam-modal .basalam-table {
2243 font-size: 10px !important;
2244 }
2245
2246 #basalam-modal .basalam-table th,
2247 #basalam-modal .basalam-table td {
2248 padding: 6px !important;
2249 font-size: 10px !important;
2250 }
2251
2252 #basalam-modal .basalam-table .basalam-primary-button {
2253 font-size: 10px !important;
2254 padding: 4px 8px !important;
2255 height: auto !important;
2256 min-width: 50px !important;
2257 }
2258
2259 #Basalam-map-option-form {
2260 flex-direction: column !important;
2261 width: 100% !important;
2262 gap: 8px !important;
2263 padding: 10px !important;
2264 margin-bottom: 15px !important;
2265 }
2266
2267 #Basalam-map-option-form label {
2268 width: 100% !important;
2269 text-align: right !important;
2270 margin-bottom: 2px !important;
2271 font-size: 11px !important;
2272 }
2273
2274 #Basalam-map-option-form input {
2275 width: 100% !important;
2276 margin-bottom: 8px !important;
2277 font-size: 11px !important;
2278 padding: 6px !important;
2279 }
2280
2281 #Basalam-map-option-form button {
2282 width: 100% !important;
2283 margin-top: 8px !important;
2284 width: 190px !important;
2285 font-size: 11px !important;
2286 height: 32px !important;
2287 }
2288
2289 .basalam-dashboard {
2290 padding: 10px;
2291 margin: 0 auto;
2292 }
2293
2294 .basalam-status-header {
2295 flex-direction: column;
2296 align-items: center;
2297 gap: 12px;
2298 text-align: center;
2299 }
2300
2301 .basalam-status-header .basalam-h {
2302 width: 100%;
2303 text-align: center;
2304 margin-bottom: 8px;
2305 }
2306
2307 .basalam-badge {
2308 margin: 0 auto;
2309 display: inline-block;
2310 }
2311
2312 .basalam_status_data_container {
2313 flex-direction: column;
2314 width: 100%;
2315 gap: 0px;
2316 }
2317
2318 .basalam_status_data_item {
2319 width: 100%;
2320 min-width: auto;
2321 flex-direction: row;
2322 padding: 7px;
2323 font-size: 12px;
2324 }
2325
2326 .basalam_status_data_item .basalam-p {
2327 font-size: 11px !important;
2328 }
2329
2330 .basalam-sync-status {
2331 flex-direction: column;
2332 padding: 12px;
2333 gap: 12px;
2334 }
2335
2336 .basalam-form-row {
2337 flex-direction: column;
2338 }
2339
2340 .basalam-form-group {
2341 width: 100%;
2342 }
2343
2344 .basalam-action-cards {
2345 grid-template-columns: 1fr;
2346
2347 margin: 0 auto;
2348 }
2349
2350 .basalam-action-card {
2351 width: 100%;
2352 }
2353
2354 .basalam-modal-content {
2355 width: 95%;
2356 margin: 15% auto;
2357 max-height: 90vh;
2358 overflow-y: auto;
2359 }
2360
2361 .basalam-action-buttons {
2362 flex-direction: column;
2363 }
2364
2365 #basalam-modal .basalam-action-card {
2366 width: 90%;
2367 max-height: 80vh;
2368 overflow-y: auto;
2369 }
2370 }
2371
2372 @media screen and (min-width: 601px) and (max-width: 900px) {
2373 #basalam-modal .basalam-action-card {
2374 width: 90% !important;
2375 max-width: 650px !important;
2376 }
2377
2378 #basalam-modal .basalam-action-card .basalam-form-row,
2379 #basalam-modal section#sep-section .basalam-form-row {
2380 grid-template-columns: 1fr 1fr !important;
2381 gap: 12px !important;
2382 }
2383
2384 .basalam-dashboard {
2385 margin-top: 20px;
2386 }
2387
2388 .basalam-sync-status {
2389 flex-wrap: wrap;
2390 justify-content: center;
2391 padding: 16px;
2392 }
2393
2394 .basalam-sync-status .basalam-p {
2395 flex: 1 1 100%;
2396 text-align: center;
2397 margin-bottom: 12px;
2398 }
2399
2400 .basalam-sync-status .Basalam-form {
2401 flex: 0 1 auto;
2402 }
2403
2404 .basalam-action-cards {
2405 grid-template-columns: repeat(2, 1fr);
2406 margin: 0 auto;
2407 }
2408
2409 .basalam-action-card {
2410 width: 100%;
2411 }
2412
2413 .basalam-form-row {
2414 flex-wrap: wrap;
2415 }
2416
2417 .basalam-form-group {
2418 width: calc(50% - 10px);
2419 flex: 0 0 auto;
2420 }
2421
2422 .basalam-status-header {
2423 justify-content: center;
2424 text-align: center;
2425 }
2426
2427 .basalam-status-header .basalam-h {
2428 flex: 1 1 100%;
2429 }
2430
2431 .basalam_status_data_container {
2432 flex: 1 1 100%;
2433 justify-content: space-around;
2434 }
2435
2436 .basalam_status_data_item {
2437 flex: 0 1 calc(50% - 10px);
2438 min-width: 200px;
2439 }
2440
2441 .basalam-modal-content {
2442 width: 70%;
2443 }
2444 }
2445
2446 @media screen and (min-width: 901px) and (max-width: 1200px) {
2447 .basalam-dashboard {
2448 max-width: 900px;
2449 }
2450
2451 .basalam-status-card,
2452 .basalam-header {
2453 max-width: 810px !important;
2454 }
2455
2456 .basalam-action-cards {
2457 grid-template-columns: repeat(3, 1fr);
2458 max-width: 900px;
2459 margin: 0 auto;
2460 }
2461
2462 .basalam-action-card {
2463 width: 100%;
2464 }
2465 }
2466
2467 .basalam-product-image {
2468 width: 120px;
2469 height: 120px;
2470 object-fit: cover;
2471 border-radius: 10px;
2472 margin-left: 20px;
2473 border: 1px solid #eee;
2474 }
2475
2476 .basalam-product-details {
2477 flex: 1;
2478 text-align: right !important;
2479 }
2480
2481 .basalam-product-title {
2482 text-align: right !important;
2483 padding-right: 0 !important;
2484 font-size: 18px;
2485 color: #333;
2486 }
2487
2488 .basalam-product-price {
2489 color: #666;
2490 margin: 0;
2491 }
2492
2493 .basalam-product-id {
2494 margin: 0;
2495 color: #999;
2496 }
2497
2498 .basalam--no-match {
2499 text-align: center;
2500 color: red;
2501 font-weight: bold;
2502 padding: 20px;
2503 }
2504
2505 .basalam-connect-btn {
2506 width: fit-content !important;
2507 height: fit-content !important;
2508 }
2509
2510 .basalam-st0 {
2511 fill: none;
2512 stroke: #ffffff;
2513 stroke-width: 2;
2514 stroke-linecap: round;
2515 stroke-linejoin: round;
2516 stroke-miterlimit: 10;
2517 }
2518
2519 .basalam--hidden {
2520 display: none;
2521 }
2522
2523 .basalam-table {
2524 border-collapse: collapse;
2525 width: 100%;
2526 margin: 20px 0;
2527 }
2528
2529 .options_mapping_section {
2530 width: 100%;
2531 overflow-x: auto;
2532 }
2533
2534 .options_mapping_section .basalam-table {
2535 min-width: 400px;
2536 }
2537
2538 .basalam-button-single-product-page,
2539 .basalam-action-button,
2540 .basalam-btn {
2541 margin-bottom: 10px !important;
2542 height: 30px;
2543 font-size: 10px;
2544 border-radius: 2px;
2545 background: var(--basalam-primary-color);
2546 -webkit-border-radius: 2px;
2547 -moz-border-radius: 2px;
2548 -ms-border-radius: 2px;
2549 -o-border-radius: 2px;
2550 }
2551
2552 .basalam-table th,
2553 .basalam-table td {
2554 border: 1px solid #ccc;
2555 padding: 8px 12px;
2556 font-size: 11px;
2557 }
2558
2559 .basalam-table th {
2560 background-color: #f4f4f4;
2561 }
2562
2563 .basalam-table td {
2564 font-size: 15px !important;
2565 font-weight: bold;
2566 }
2567
2568 #basalam_order_settings>div.postbox-header>h2,
2569 #basalam_order_info>div.postbox-header>h2 {
2570 font-family: "PelakFA";
2571 }
2572
2573 .basalam-order-info {
2574 text-align: right !important;
2575 }
2576
2577 .sync-checkbox-label {
2578 display: inline-block !important;
2579 }
2580
2581 #toplevel_page_sync_basalam>a>div.wp-menu-image.dashicons-before>img {
2582 padding: 5px 0 0;
2583 }
2584
2585 .basalam-info-trigger {
2586 display: inline-block;
2587 cursor: pointer;
2588 flex-shrink: 0;
2589 order: 2;
2590 }
2591
2592 .basalam-info-icon {
2593 width: 16px;
2594 height: 16px;
2595 opacity: 0.7;
2596 transition: all 0.2s ease;
2597 vertical-align: middle;
2598 border-radius: 50%;
2599 -webkit-transition: all 0.2s ease;
2600 -moz-transition: all 0.2s ease;
2601 -ms-transition: all 0.2s ease;
2602 -o-transition: all 0.2s ease;
2603 display: none;
2604 }
2605
2606 @media screen and (min-width: 1025px) {
2607 .basalam-info-icon {
2608 display: inline-block;
2609 }
2610 }
2611
2612 .basalam-info-icon:hover {
2613 opacity: 1;
2614 background-color: rgba(255, 92, 53, 0.1);
2615 transform: scale(1.1);
2616 }
2617
2618 .basalam-info-modal {
2619 position: fixed !important;
2620 top: 0 !important;
2621 left: 0 !important;
2622 width: 100vw !important;
2623 height: 100vh !important;
2624 z-index: 999999 !important;
2625 display: none;
2626 margin: 0 !important;
2627 padding: 0 !important;
2628 }
2629
2630 .basalam-info-modal-overlay {
2631 position: absolute !important;
2632 top: 0 !important;
2633 left: 0 !important;
2634 width: 100% !important;
2635 height: 100% !important;
2636 background: rgba(0, 0, 0, 0.5) !important;
2637 backdrop-filter: blur(2px);
2638 margin: 0 !important;
2639 padding: 0 !important;
2640 }
2641
2642 .basalam-info-modal-content {
2643 position: absolute !important;
2644 top: 50% !important;
2645 left: 50% !important;
2646 transform: translate(-50%, -50%) !important;
2647 background: white !important;
2648 border-radius: 12px !important;
2649 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
2650 max-width: 500px !important;
2651 width: 90% !important;
2652 max-height: 80vh !important;
2653 overflow: hidden !important;
2654 animation: basalam-modal-appear 0.3s ease-out !important;
2655 margin: 0 !important;
2656 padding: 0 !important;
2657 }
2658
2659 @keyframes basalam-modal-appear {
2660 from {
2661 opacity: 0;
2662 transform: translate(-50%, -50%) scale(0.8);
2663 }
2664
2665 to {
2666 opacity: 1;
2667 transform: translate(-50%, -50%) scale(1);
2668 }
2669 }
2670
2671 .basalam-info-modal-header {
2672 background: var(--basalam-primary-color);
2673 color: white;
2674 padding: 16px 20px;
2675 display: flex;
2676 justify-content: space-between;
2677 align-items: center;
2678 border-radius: 12px 12px 0 0;
2679 }
2680
2681 .basalam-info-modal-header h3 {
2682 margin: 0;
2683 font-family: PelakFA;
2684 font-size: 16px;
2685 font-weight: 600;
2686 }
2687
2688 .basalam-info-modal-close {
2689 background: none;
2690 border: none;
2691 color: white;
2692 font-size: 24px;
2693 cursor: pointer;
2694 padding: 0;
2695 width: 30px;
2696 height: 30px;
2697 display: flex;
2698 align-items: center;
2699 justify-content: center;
2700 border-radius: 50%;
2701 transition: background-color 0.2s ease;
2702 line-height: 1;
2703 }
2704
2705 .basalam-info-modal-close:hover {
2706 background-color: rgba(255, 255, 255, 0.2);
2707 }
2708
2709 .basalam-info-modal-body {
2710 padding: 20px;
2711 font-family: PelakFA;
2712 font-size: 14px;
2713 line-height: 1.7;
2714 color: var(--basalam-gray-700);
2715 text-align: right;
2716 direction: rtl;
2717 max-height: 60vh;
2718 overflow-y: auto;
2719 }
2720
2721 .basalam-info-modal-body::-webkit-scrollbar {
2722 width: 6px;
2723 }
2724
2725 .basalam-info-modal-body::-webkit-scrollbar-track {
2726 background: #f1f1f1;
2727 border-radius: 3px;
2728 }
2729
2730 .basalam-info-modal-body::-webkit-scrollbar-thumb {
2731 background: var(--basalam-primary-color);
2732 border-radius: 3px;
2733 }
2734
2735 .basalam-info-modal-body::-webkit-scrollbar-thumb:hover {
2736 background: var(--basalam-primary-hover);
2737 }
2738
2739 .basalam-info-modal.show {
2740 display: block !important;
2741 animation: basalam-modal-fade-in 0.3s ease-out;
2742 }
2743
2744 body>.basalam-info-modal {
2745 position: fixed !important;
2746 z-index: 2147483647 !important;
2747 }
2748
2749 .basalam-info-modal {
2750 transform: none !important;
2751 clip: none !important;
2752 clip-path: none !important;
2753 }
2754
2755 #wpwrap .basalam-info-modal,
2756 #wpadminbar~* .basalam-info-modal,
2757 .wp-admin .basalam-info-modal {
2758 position: fixed !important;
2759 top: 0 !important;
2760 left: 0 !important;
2761 width: 100vw !important;
2762 height: 100vh !important;
2763 z-index: 999999 !important;
2764 }
2765
2766 #wpwrap .basalam-info-modal-content,
2767 .wp-admin .basalam-info-modal-content {
2768 position: absolute !important;
2769 top: 50% !important;
2770 left: 50% !important;
2771 transform: translate(-50%, -50%) !important;
2772 }
2773
2774 @keyframes basalam-modal-fade-in {
2775 from {
2776 opacity: 0;
2777 }
2778
2779 to {
2780 opacity: 1;
2781 }
2782 }
2783
2784 .basalam-label-container {
2785 display: flex;
2786 align-items: center;
2787 justify-content: space-between;
2788 width: 100%;
2789 margin-bottom: 8px;
2790 }
2791
2792 .basalam-label-container .basalam-label {
2793 margin-bottom: 0 !important;
2794 /* display: flex !important; */
2795 align-items: center;
2796 flex: 1;
2797 justify-content: space-between;
2798 width: 100%;
2799 }
2800
2801 .basalam-label-text {
2802 flex: 1;
2803 text-align: right;
2804 order: 1;
2805 font-family: pelakFA;
2806 }
2807
2808 @media (max-width: 768px) {
2809 .basalam-info-modal-content {
2810 width: 95% !important;
2811 max-width: none !important;
2812 top: 50% !important;
2813 left: 50% !important;
2814 transform: translate(-50%, -50%) !important;
2815 margin: 0 !important;
2816 position: absolute !important;
2817 }
2818
2819 .basalam-info-modal-header {
2820 padding: 12px 16px !important;
2821 }
2822
2823 .basalam-info-modal-header h3 {
2824 font-size: 14px !important;
2825 }
2826
2827 .basalam-info-modal-body {
2828 padding: 16px !important;
2829 font-size: 13px !important;
2830 }
2831
2832 .basalam-label-container {
2833 flex-direction: row;
2834 justify-content: space-between;
2835 }
2836
2837 .basalam-label-text {
2838 text-align: right;
2839 }
2840
2841 .basalam-info-trigger {
2842 margin-left: 8px;
2843 margin-right: 0;
2844 }
2845 }
2846
2847 @media (pointer: coarse) {
2848 .basalam-info-trigger {
2849 -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
2850 }
2851 }
2852
2853 @media screen and (max-width: 768px) {
2854 .basalam-info-container {
2855 padding: 15px;
2856 }
2857
2858 .vendor-info {
2859 margin-bottom: 20px;
2860 }
2861
2862 .vendor-info-grid {
2863 grid-template-columns: 1fr;
2864 gap: 12px;
2865 }
2866
2867 .info-item {
2868 display: flex;
2869 justify-content: space-between;
2870 padding: 12px;
2871 background: #f9f9f9;
2872 border-radius: 8px;
2873 align-items: center;
2874 }
2875
2876 .info-label {
2877 font-weight: 600;
2878 color: #666;
2879 margin-left: 10px;
2880 }
2881
2882 .info-value {
2883 text-align: left;
2884 color: #333;
2885 }
2886
2887 .basalam-danger-zone {
2888 width: 100%;
2889 padding: 0 15px;
2890 }
2891
2892 .basalam-card {
2893 padding: 20px;
2894 margin: 0;
2895 }
2896
2897 .basalam-p {
2898 font-size: 11px;
2899 }
2900
2901 .basalam-p__small {
2902 font-size: 14px;
2903 line-height: 1.6;
2904 }
2905
2906 .basalam-danger-button {
2907 width: 100%;
2908 padding: 12px;
2909 font-size: 14px;
2910 }
2911
2912 .basalam-contact-container {
2913 display: flex;
2914 justify-content: center;
2915 gap: 15px;
2916 flex-wrap: wrap;
2917 }
2918
2919 .basalam-contact-btn {
2920 width: 60px;
2921 height: 60px;
2922 display: flex;
2923 align-items: center;
2924 justify-content: center;
2925 }
2926
2927 .basalam-contact-btn img {
2928 max-width: 35px !important;
2929 height: auto;
2930 }
2931 }
2932
2933 @media screen and (max-width: 480px) {
2934 .basalam-info-container {
2935 padding: 10px;
2936 }
2937
2938 .vendor-info {
2939 margin-bottom: 15px;
2940 }
2941
2942 .vendor-info-grid {
2943 gap: 10px;
2944 }
2945
2946 .info-item {
2947 flex-direction: column;
2948 align-items: flex-start;
2949 padding: 10px;
2950 }
2951
2952 .info-label {
2953 margin-bottom: 5px;
2954 margin-left: 0;
2955 font-size: 13px;
2956 }
2957
2958 .info-value {
2959 font-size: 14px;
2960 font-weight: 600;
2961 }
2962
2963 .basalam-danger-zone {
2964 padding: 0 10px;
2965 }
2966
2967 .basalam-card {
2968 padding: 15px;
2969 border-radius: 8px;
2970 }
2971
2972 .basalam-p {
2973 font-size: 12px;
2974 margin-bottom: 10px !important;
2975 }
2976
2977 .basalam-p__small {
2978 font-size: 10px;
2979 line-height: 1.5;
2980 margin: 12px 5px !important;
2981 }
2982
2983 .basalam-danger-button {
2984 padding: 10px;
2985 font-size: 13px;
2986 display: flex;
2987 align-items: center;
2988 justify-content: center;
2989 gap: 8px;
2990 }
2991
2992 .basalam-danger-button img {
2993 width: 16px;
2994 height: 16px;
2995 }
2996
2997 .Basalam-contact-us-section {
2998 margin-top: 15px;
2999 }
3000
3001 .basalam-contact-container {
3002 padding-top: 10px !important;
3003 gap: 10px;
3004 }
3005
3006 .basalam-contact-btn {
3007 width: 50px;
3008 height: 50px;
3009 border-radius: 10px;
3010 }
3011
3012 .basalam-contact-btn img {
3013 max-width: 30px !important;
3014 }
3015
3016 .basalam-contact-btn img[alt="help page"] {
3017 max-width: 50px !important;
3018 }
3019 }
3020
3021 @media screen and (max-width: 360px) {
3022 .basalam-info-container {
3023 padding: 8px;
3024 }
3025
3026 .info-item {
3027 padding: 8px;
3028 }
3029
3030 .info-label {
3031 font-size: 12px;
3032 }
3033
3034 .info-value {
3035 font-size: 13px;
3036 }
3037
3038 .basalam-card {
3039 padding: 12px;
3040 }
3041
3042 .basalam-px {
3043 font-size: 11px;
3044 }
3045
3046 .basalam-p__small {
3047 font-size: 10px;
3048 }
3049
3050 .basalam-danger-button {
3051 padding: 8px;
3052 font-size: 12px;
3053 }
3054
3055 .basalam-contact-btn {
3056 width: 45px;
3057 height: 45px;
3058 }
3059
3060 .basalam-contact-btn img {
3061 max-width: 25px !important;
3062 }
3063
3064 .basalam-contact-btn img[alt="help page"] {
3065 max-width: 40px !important;
3066 }
3067 }
3068
3069 @media screen and (max-width: 768px) {
3070 .basalam-info-container {
3071 display: flex;
3072 flex-direction: column;
3073 padding: 20px;
3074 width: 100%;
3075 box-sizing: border-box;
3076 }
3077
3078 .vendor-info {
3079 width: 100%;
3080 margin-bottom: 25px;
3081 }
3082
3083 .vendor-info-grid {
3084 display: flex;
3085 flex-direction: column;
3086 gap: 15px;
3087 width: 100%;
3088 }
3089
3090 .info-item {
3091 display: flex;
3092 justify-content: space-between;
3093 align-items: center;
3094 padding: 15px;
3095 background: #f8f9fa;
3096 border-radius: 10px;
3097 border: 1px solid #e9ecef;
3098 width: 100%;
3099 box-sizing: border-box;
3100 }
3101
3102 .info-label {
3103 font-weight: 600;
3104 color: #6c757d;
3105 font-size: 14px;
3106 }
3107
3108 .info-value {
3109 color: #212529;
3110 font-weight: 500;
3111 text-align: right;
3112 }
3113
3114 .basalam-danger-zone {
3115 width: 100%;
3116 padding: 0;
3117 }
3118
3119 .basalam-card {
3120 padding: 25px;
3121 margin: 0;
3122 width: 100%;
3123 box-sizing: border-box;
3124 }
3125
3126 .basalam-p__small {
3127 font-size: 10px;
3128 line-height: 1.7;
3129 }
3130
3131 .basalam-danger-button {
3132 width: 100%;
3133 padding: 10px 16px;
3134 }
3135
3136 .basalam-contact-container {
3137 display: flex;
3138 justify-content: center;
3139 gap: 20px;
3140 flex-wrap: nowrap;
3141 padding: 15px 0;
3142 }
3143
3144 .basalam-contact-btn {
3145 width: 65px;
3146 height: 65px;
3147 display: flex;
3148 align-items: center;
3149 justify-content: center;
3150 border-radius: 12px;
3151 }
3152
3153 .basalam-contact-btn img {
3154 max-width: 35px !important;
3155 height: auto;
3156 }
3157 }
3158
3159 @media screen and (max-width: 480px) {
3160 .basalam-info-container {
3161 display: flex;
3162 flex-direction: column;
3163 padding: 15px;
3164 width: 100%;
3165 min-height: 100vh;
3166 box-sizing: border-box;
3167 }
3168
3169 .vendor-info {
3170 width: 100%;
3171 margin-bottom: 20px;
3172 display: flex;
3173 flex-direction: column;
3174 }
3175
3176 .vendor-info>.basalam-p {
3177 font-size: 18px;
3178 margin-bottom: 15px !important;
3179 text-align: center !important;
3180 }
3181
3182 .vendor-info-grid {
3183 display: flex;
3184 flex-direction: column;
3185 gap: 12px;
3186 width: 100%;
3187 }
3188
3189 .info-item {
3190 display: flex;
3191 flex-direction: row;
3192 justify-content: space-between;
3193 align-items: center;
3194 padding: 12px 15px;
3195 background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
3196 border-radius: 8px;
3197 border: 1px solid #dee2e6;
3198 width: 100%;
3199 box-sizing: border-box;
3200 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
3201 }
3202
3203 .info-label {
3204 font-size: 13px;
3205 color: #6c757d;
3206 font-weight: 500;
3207 margin: 0;
3208 }
3209
3210 .info-value {
3211 font-size: 14px;
3212 font-weight: 600;
3213 color: #212529;
3214 text-align: right;
3215 }
3216
3217 .basalam-danger-zone {
3218 width: 100%;
3219 padding: 0;
3220 margin-top: auto;
3221 }
3222
3223 .basalam-card {
3224 padding: 20px;
3225 border-radius: 12px;
3226 background: #ffffff;
3227 border: 1px solid #dee2e6;
3228 width: 100%;
3229 box-sizing: border-box;
3230 display: flex;
3231 flex-direction: column;
3232 align-items: center;
3233 }
3234
3235 .basalam-card>.basalam-p:first-child {
3236 font-size: 16px;
3237 margin-bottom: 12px !important;
3238 text-align: center;
3239 }
3240
3241 .basalam-p__small {
3242 font-size: 13px;
3243 line-height: 1.6;
3244 margin: 12px 0 !important;
3245 text-align: center !important;
3246 }
3247
3248 .Basalam-form {
3249 width: 100%;
3250 display: flex;
3251 flex-direction: column;
3252 align-items: center;
3253 }
3254
3255 .basalam-danger-button {
3256 width: 100%;
3257 padding: 12px;
3258 font-size: 14px;
3259 display: flex;
3260 align-items: center;
3261 justify-content: center;
3262 gap: 8px;
3263 border-radius: 8px;
3264 margin-top: 10px;
3265 }
3266
3267 .basalam-danger-button img {
3268 width: 18px;
3269 height: 18px;
3270 }
3271
3272 .Basalam-contact-us-section {
3273 width: 100%;
3274 margin-top: 20px;
3275 }
3276
3277 .basalam-contact-container {
3278 display: flex;
3279 flex-direction: row;
3280 justify-content: center;
3281 align-items: center;
3282 gap: 15px;
3283 padding-top: 0 !important;
3284 width: 100%;
3285 }
3286
3287 .basalam-contact-btn {
3288 width: 55px;
3289 height: 55px;
3290 border-radius: 10px;
3291 display: flex;
3292 align-items: center;
3293 justify-content: center;
3294 transition: transform 0.2s ease;
3295 }
3296
3297 .basalam-contact-btn:active {
3298 transform: scale(0.95);
3299 -webkit-transform: ;
3300 -moz-transform: ;
3301 -ms-transform: ;
3302 -o-transform: ;
3303 }
3304
3305 .basalam-contact-btn img {
3306 max-width: 30px !important;
3307 height: auto;
3308 }
3309
3310 .basalam-contact-btn img[alt="help page"] {
3311 max-width: 45px !important;
3312 }
3313 }
3314
3315 @media screen and (max-width: 360px) {
3316 .basalam-info-container {
3317 padding: 12px;
3318 }
3319
3320 .vendor-info-grid {
3321 gap: 10px;
3322 }
3323
3324 .info-item {
3325 padding: 10px 12px;
3326 }
3327
3328 .info-label {
3329 font-size: 12px;
3330 }
3331
3332 .info-value {
3333 font-size: 13px;
3334 }
3335
3336 .basalam-card {
3337 padding: 15px;
3338 }
3339
3340 .basalam-card>.basalam-p:first-child {
3341 font-size: 15px;
3342 }
3343
3344 .basalam-p__small {
3345 font-size: 12px;
3346 }
3347
3348 .basalam-danger-button {
3349 padding: 10px;
3350 font-size: 13px;
3351 }
3352
3353 .basalam-danger-button img {
3354 width: 16px;
3355 height: 16px;
3356 }
3357
3358 .basalam-contact-container {
3359 gap: 12px;
3360 }
3361
3362 .basalam-contact-btn {
3363 width: 48px;
3364 height: 48px;
3365 }
3366
3367 .basalam-contact-btn img {
3368 max-width: 25px !important;
3369 }
3370
3371 .basalam-contact-btn img[alt="help page"] {
3372 max-width: 38px !important;
3373 }
3374 }
3375
3376 .basalam-info-container {
3377 display: flex;
3378 flex-direction: row;
3379 gap: 24px;
3380 max-width: 1400px;
3381 margin: 20px auto;
3382 padding: 20px;
3383 align-items: stretch;
3384 }
3385
3386 .vendor-info {
3387 flex: 1;
3388 background: white;
3389 padding: 24px;
3390 border-radius: 16px;
3391 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
3392 border: 1px solid var(--basalam-gray-200);
3393 margin: 0;
3394 min-height: 100%;
3395 }
3396
3397 .vendor-info-grid {
3398 display: grid;
3399 grid-template-columns: repeat(2, 1fr);
3400 gap: 12px;
3401 }
3402
3403 .info-item {
3404 padding: 14px;
3405 background: var(--basalam-gray-100);
3406 border-radius: 8px;
3407 transition: all 0.3s ease;
3408 }
3409
3410 .info-label {
3411 color: var(--basalam-gray-600);
3412 font-size: 13px;
3413 margin-bottom: 8px;
3414 font-weight: 500;
3415 position: relative;
3416 padding-right: 12px;
3417 }
3418
3419 .info-value {
3420 color: var(--basalam-gray-800);
3421 font-size: 14px;
3422 font-weight: 600;
3423 }
3424
3425 .basalam-danger-zone {
3426 width: 380px;
3427 margin: 0;
3428 min-height: 100%;
3429 display: flex;
3430 flex-direction: column;
3431 }
3432
3433 .basalam-card {
3434 background: white;
3435 padding: 24px;
3436 border-radius: 16px;
3437 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
3438 border: 1px solid var(--basalam-danger-color);
3439 height: auto;
3440 display: flex;
3441 flex-direction: column;
3442 gap: 12px;
3443 }
3444
3445 .basalam-contact-container {
3446 display: flex;
3447 justify-content: center;
3448 gap: 15px;
3449 padding: 12px 0;
3450 }
3451
3452 .basalam-contact-btn {
3453 width: 60px;
3454 height: 60px;
3455 display: flex;
3456 align-items: center;
3457 justify-content: center;
3458 border-radius: 12px;
3459 transition: transform 0.2s ease;
3460 }
3461
3462 .basalam-btn-contact__blue {
3463 background: #0088cc;
3464 }
3465
3466 .basalam-btn-contact__red {
3467 background: #e74c3c;
3468 }
3469
3470 .basalam-contact-btn:hover {
3471 transform: scale(1.05);
3472 }
3473
3474 @media screen and (max-width: 1024px) {
3475 .basalam-info-container {
3476 flex-direction: column;
3477 max-width: 100%;
3478 padding: 20px;
3479 align-items: center;
3480 }
3481
3482 .vendor-info {
3483 width: 100%;
3484 max-width: 700px;
3485 margin-bottom: 20px;
3486 min-height: auto;
3487 }
3488
3489 .basalam-danger-zone {
3490 width: 100%;
3491 max-width: 700px;
3492 margin: 0 auto;
3493 min-height: auto;
3494 }
3495 }
3496
3497 @media screen and (max-width: 768px) {
3498 .basalam-info-container {
3499 padding: 15px;
3500 margin: 10px auto;
3501 align-items: stretch;
3502 }
3503
3504 .vendor-info {
3505 padding: 20px;
3506 width: 100%;
3507 max-width: none;
3508 }
3509
3510 .vendor-info-grid {
3511 grid-template-columns: 1fr;
3512 gap: 10px;
3513 }
3514
3515 .info-item {
3516 display: flex;
3517 justify-content: space-between;
3518 align-items: center;
3519 padding: 12px;
3520 }
3521
3522 .info-label {
3523 margin-bottom: 0;
3524 font-size: 13px;
3525 }
3526
3527 .info-value {
3528 text-align: right;
3529 font-size: 14px;
3530 }
3531
3532 .basalam-danger-zone {
3533 width: 100%;
3534 max-width: none;
3535 }
3536
3537 .basalam-card {
3538 padding: 20px;
3539 width: 100%;
3540 }
3541 }
3542
3543 @media screen and (max-width: 480px) {
3544 .basalam-info-container {
3545 padding: 10px;
3546 margin: 0;
3547 min-height: 100vh;
3548 display: flex;
3549 flex-direction: column;
3550 align-items: stretch;
3551 }
3552
3553 .vendor-info {
3554 padding: 15px;
3555 border-radius: 12px;
3556 margin-bottom: 15px;
3557 width: 100%;
3558 box-sizing: border-box;
3559 }
3560
3561 .vendor-info>.basalam-p {
3562 font-size: 16px;
3563 margin-bottom: 12px !important;
3564 text-align: center !important;
3565 font-weight: bold;
3566 }
3567
3568 .vendor-info-grid {
3569 display: flex;
3570 flex-direction: column;
3571 gap: 8px;
3572 }
3573
3574 .info-item {
3575 display: flex;
3576 flex-direction: row;
3577 justify-content: space-between;
3578 align-items: center;
3579 padding: 10px 12px;
3580 background: linear-gradient(to right, #f8f9fa, #ffffff);
3581 border: 1px solid #e9ecef;
3582 border-radius: 6px;
3583 }
3584
3585 .info-label {
3586 font-size: 12px;
3587 color: #6c757d;
3588 padding-right: 8px;
3589 }
3590
3591 .info-label::before {
3592 width: 3px;
3593 height: 3px;
3594 }
3595
3596 .info-value {
3597 font-size: 13px;
3598 font-weight: 600;
3599 color: #212529;
3600 }
3601
3602 .basalam-danger-zone {
3603 width: 100%;
3604 margin-top: auto;
3605 padding: 0;
3606 box-sizing: border-box;
3607 }
3608
3609 .basalam-card {
3610 padding: 15px;
3611 border-radius: 10px;
3612 height: auto;
3613 width: 100%;
3614 box-sizing: border-box;
3615 }
3616
3617 .basalam-card>.basalam-p:first-child {
3618 font-size: 14px;
3619 text-align: center;
3620 margin-bottom: 10px !important;
3621 }
3622
3623 .basalam-p__small {
3624 font-size: 12px;
3625 line-height: 1.5;
3626 text-align: justify !important;
3627 margin: 10px 0 !important;
3628 }
3629
3630 .basalam-danger-button {
3631 width: 100%;
3632 padding: 10px;
3633 font-size: 13px;
3634 margin-top: 10px;
3635 }
3636
3637 .basalam-danger-button img {
3638 width: 16px;
3639 height: 16px;
3640 }
3641
3642 .Basalam-contact-us-section {
3643 margin-top: 15px;
3644 }
3645
3646 .basalam-contact-container {
3647 gap: 0px;
3648 padding: 10px 0;
3649 }
3650
3651 .basalam-contact-btn {
3652 width: 50px;
3653 height: 50px;
3654 border-radius: 8px;
3655 }
3656
3657 .basalam-contact-btn img {
3658 max-width: 28px !important;
3659 height: auto;
3660 }
3661
3662 .basalam-contact-btn img[alt="help page"] {
3663 max-width: 40px !important;
3664 }
3665
3666 center {
3667 display: block;
3668 width: 100%;
3669 }
3670 }
3671
3672 @media screen and (max-width: 360px) {
3673 .basalam-info-container {
3674 padding: 8px;
3675 align-items: stretch;
3676 }
3677
3678 .vendor-info {
3679 padding: 12px;
3680 width: 100%;
3681 }
3682
3683 .vendor-info>.basalam-p {
3684 font-size: 15px;
3685 }
3686
3687 .info-item {
3688 padding: 8px 10px;
3689 }
3690
3691 .info-label {
3692 font-size: 11px;
3693 }
3694
3695 .info-value {
3696 font-size: 12px;
3697 }
3698
3699 .basalam-card {
3700 padding: 12px;
3701 width: 100%;
3702 }
3703
3704 .basalam-danger-zone {
3705 width: 100%;
3706 }
3707
3708 .basalam-card>.basalam-p:first-child {
3709 font-size: 13px;
3710 }
3711
3712 .basalam-p__small {
3713 font-size: 11px;
3714 }
3715
3716 .basalam-danger-button {
3717 padding: 8px;
3718 font-size: 12px;
3719 }
3720
3721 .basalam-contact-btn {
3722 width: 45px;
3723 height: 45px;
3724 }
3725
3726 .basalam-contact-btn img {
3727 max-width: 24px !important;
3728 }
3729
3730 .basalam-contact-btn img[alt="help page"] {
3731 max-width: 35px !important;
3732 }
3733 }
3734
3735 .basalam-info-container,
3736 .basalam-info-container * {
3737 box-sizing: border-box;
3738 }
3739
3740 .admin-bar .basalam-info-container {
3741 margin-top: 32px;
3742 }
3743
3744 @media screen and (max-width: 782px) {
3745 .admin-bar .basalam-info-container {
3746 margin-top: 46px;
3747 }
3748 }
3749
3750 .basalam-switch {
3751 position: relative;
3752 display: inline-block;
3753 width: 50px;
3754 height: 24px;
3755 }
3756
3757 .basalam-switch input {
3758 opacity: 0;
3759 width: 0;
3760 height: 0;
3761 }
3762
3763 .basalam-slider {
3764 position: absolute;
3765 cursor: pointer;
3766 top: 0;
3767 left: 0;
3768 right: 0;
3769 bottom: 0;
3770 background-color: #ccc;
3771 transition: 0.4s;
3772 border-radius: 24px;
3773 }
3774
3775 .basalam-slider:before {
3776 position: absolute;
3777 content: "";
3778 height: 18px;
3779 width: 18px;
3780 left: 3px;
3781 bottom: 3px;
3782 background-color: white;
3783 transition: 0.4s;
3784 border-radius: 50%;
3785 }
3786
3787 .basalam-switch input:checked+.basalam-slider {
3788 background-color: var(--basalam-primary-color);
3789 }
3790
3791 .basalam-switch input:checked+.basalam-slider:before {
3792 transform: translateX(26px);
3793 }
3794
3795 .basalam-tasks-manual-container {
3796 transition: opacity 0.3s ease;
3797 }
3798
3799 .basalam-tasks-manual-input:disabled {
3800 background-color: #e9ecef !important;
3801 cursor: not-allowed !important;
3802 opacity: 0.6;
3803 }
3804
3805 .basalam-tasks-info {
3806 transition: all 0.3s ease;
3807 }
3808
3809 #quick-update-btn:hover {
3810 transform: translateY(-2px);
3811 box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3);
3812 }
3813
3814 #full-update-btn:hover {
3815 background: #34495e !important;
3816 transform: translateY(-2px);
3817 box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
3818 }
3819
3820 /* Utility classes for common inline styles */
3821 .basalam-flex {
3822 display: flex;
3823 }
3824
3825 .basalam-flex-center {
3826 display: flex;
3827 align-items: center;
3828 justify-content: center;
3829 }
3830
3831 .basalam-flex-start {
3832 display: flex;
3833 align-items: flex-start;
3834 }
3835
3836 .basalam-flex-end {
3837 display: flex;
3838 align-items: flex-end;
3839 }
3840
3841 .basalam-flex-between {
3842 display: flex;
3843 justify-content: space-between;
3844 }
3845
3846 .basalam-flex-col {
3847 display: flex;
3848 flex-direction: column;
3849 }
3850
3851 .basalam-gap-10 {
3852 gap: 10px;
3853 }
3854
3855 .basalam-gap-20 {
3856 gap: 20px;
3857 }
3858
3859 .basalam-gap-small {
3860 gap: 5px;
3861 }
3862
3863 .basalam-text-center {
3864 text-align: center;
3865 }
3866
3867 .basalam-text-right {
3868 text-align: right;
3869 }
3870
3871 .basalam-text-justify {
3872 text-align: justify;
3873 }
3874
3875 .basalam-relative {
3876 position: relative;
3877 }
3878
3879 .basalam-absolute {
3880 position: absolute;
3881 }
3882
3883 .basalam-fixed {
3884 position: fixed;
3885 }
3886
3887 .basalam-hidden {
3888 display: none;
3889 }
3890
3891 .basalam-block {
3892 display: block;
3893 }
3894
3895 .basalam-cursor-pointer {
3896 cursor: pointer;
3897 }
3898
3899 .basalam-cursor-not-allowed {
3900 cursor: not-allowed;
3901 }
3902
3903 .basalam-width-full {
3904 width: 100%;
3905 }
3906
3907 .basalam-width-fill {
3908 width: -webkit-fill-available;
3909 }
3910
3911 .basalam-max-width-400 {
3912 max-width: 400px;
3913 }
3914
3915 .basalam-max-width-500 {
3916 max-width: 500px;
3917 }
3918
3919 .basalam-margin-top-0 {
3920 margin-top: 0 !important;
3921 }
3922
3923 .basalam-margin-top-10 {
3924 margin-top: 10px;
3925 }
3926
3927 .basalam-margin-top-15 {
3928 margin-top: 15px;
3929 }
3930
3931 .basalam-margin-top-20 {
3932 margin-top: 20px;
3933 }
3934
3935 .basalam-margin-bottom-0 {
3936 margin-bottom: 0 !important;
3937 }
3938
3939 .basalam-margin-bottom-10 {
3940 margin-bottom: 10px;
3941 }
3942
3943 .basalam-margin-bottom-15 {
3944 margin-bottom: 15px;
3945 }
3946
3947 .basalam-margin-bottom-20 {
3948 margin-bottom: 20px;
3949 }
3950
3951 .basalam-padding-0 {
3952 padding: 0 !important;
3953 }
3954
3955 .basalam-padding-10 {
3956 padding: 10px;
3957 }
3958
3959 .basalam-padding-15 {
3960 padding: 15px;
3961 }
3962
3963 .basalam-padding-20 {
3964 padding: 20px;
3965 }
3966
3967 .basalam-bg-light {
3968 background-color: #f5f5f5;
3969 }
3970
3971 .basalam-bg-warning {
3972 background-color: #fff3cd;
3973 }
3974
3975 .basalam-bg-white {
3976 background-color: #fff;
3977 }
3978
3979 .basalam-bg-disabled {
3980 background-color: #ccc !important;
3981 }
3982
3983 .basalam-border-warning {
3984 border: 1px solid #ffc107;
3985 }
3986
3987 .basalam-border-radius {
3988 border-radius: 8px;
3989 }
3990
3991 .basalam-border-circle {
3992 border-radius: 50%;
3993 }
3994
3995 .basalam-font-small {
3996 font-size: 11px !important;
3997 }
3998
3999 .basalam-font-normal {
4000 font-size: 14px;
4001 }
4002
4003 .basalam-font-large {
4004 font-size: 20px;
4005 }
4006
4007 .basalam-font-bold {
4008 font-weight: bold;
4009 }
4010
4011 .basalam-text-warning {
4012 color: #856404;
4013 }
4014
4015 .basalam-text-danger {
4016 color: var(--basalam-danger-color);
4017 }
4018
4019 .basalam-text-muted {
4020 color: #666;
4021 }
4022
4023 .basalam-opacity-60 {
4024 opacity: 0.6;
4025 }
4026
4027 .basalam-transition {
4028 transition: all 0.3s ease;
4029 }
4030
4031 .basalam-shadow {
4032 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
4033 }
4034
4035 /* Specific positioning utilities */
4036 .basalam-top-10 {
4037 top: 10px;
4038 }
4039
4040 .basalam-left-10 {
4041 left: 10px;
4042 }
4043
4044 .basalam-right-15 {
4045 right: 15px;
4046 }
4047
4048 .basalam-z-index-high {
4049 z-index: 9999;
4050 }
4051
4052 /* Overflow utilities */
4053 .basalam-overflow-y-auto {
4054 overflow-y: auto;
4055 }
4056
4057 .basalam-overflow-hidden {
4058 overflow: hidden;
4059 }
4060
4061 /* Height utilities */
4062 .basalam-height-20 {
4063 height: 20px;
4064 }
4065
4066 .basalam-height-22 {
4067 height: 22px;
4068 }
4069
4070 .basalam-min-height-100 {
4071 min-height: 100%;
4072 }
4073
4074 /* Width utilities */
4075 .basalam-width-22 {
4076 width: 22px;
4077 }
4078
4079 .basalam-width-33 {
4080 width: 33%;
4081 }
4082
4083 .basalam-max-height-400 {
4084 max-height: 400px;
4085 }
4086
4087 .basalam-max-height-570 {
4088 max-height: 570px;
4089 }
4090
4091 /* Info icon styling */
4092 .basalam-info-icon-small {
4093 border: 1px solid;
4094 border-radius: 70%;
4095 width: 22px;
4096 height: 22px;
4097 top: 10px;
4098 left: 10px;
4099 }
4100
4101 /* Modal backdrop */
4102 .basalam-modal-backdrop {
4103 position: fixed;
4104 top: 0;
4105 left: 0;
4106 width: 100%;
4107 height: 100%;
4108 background: rgba(0, 0, 0, 0.5);
4109 z-index: 9999;
4110 align-items: center;
4111 justify-content: center;
4112 }
4113
4114 /* Flex container utilities */
4115 .basalam-flex-fill {
4116 display: flex;
4117 flex-direction: column;
4118 justify-content: space-between;
4119 align-items: center;
4120 height: 90%;
4121 width: -webkit-fill-available;
4122 }
4123
4124 .basalam-action-buttons-col {
4125 flex-direction: column;
4126 width: -webkit-fill-available;
4127 }
4128
4129 /* Grid utilities */
4130 .basalam-grid-2 {
4131 display: grid;
4132 grid-template-columns: 1fr 1fr;
4133 gap: 20px;
4134 width: 100%;
4135 max-width: 1080px;
4136 }
4137
4138 .basalam-grid-3 {
4139 display: grid;
4140 grid-template-columns: 1fr auto 1fr;
4141 gap: 15px;
4142 align-items: center;
4143 }
4144
4145 /* Form utilities */
4146 .basalam-form-margin-0 {
4147 margin: 0;
4148 }
4149
4150 .basalam-form-no-margin {
4151 margin-bottom: 0px !important;
4152 }
4153
4154 /* Badge styling */
4155 .basalam-badge-warning {
4156 background: #ffc107;
4157 color: #000;
4158 padding: 2px 8px;
4159 border-radius: 4px;
4160 font-weight: bold;
4161 }
4162
4163 /* Background variations */
4164 .basalam-bg-modal {
4165 background: #fff;
4166 margin: 5% auto;
4167 padding: 20px;
4168 width: 90%;
4169 max-width: 800px;
4170 max-height: 570px;
4171 position: relative;
4172 overflow-y: auto;
4173 padding-top: 40px;
4174 }
4175
4176 .basalam-bg-modal-white {
4177 background: #fff;
4178 padding: 30px;
4179 border-radius: 8px;
4180 max-width: 500px;
4181 width: 90%;
4182 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
4183 }
4184
4185 /* Pagination centering */
4186 .basalam-pagination-center {
4187 display: flex;
4188 flex-direction: row;
4189 justify-content: center;
4190 align-items: center;
4191 }
4192
4193 /* Notice flex styling */
4194 .basalam-notice-flex {
4195 display: flex;
4196 align-items: center;
4197 gap: 10px;
4198 }
4199
4200 .basalam-notice-flex-small {
4201 display: flex;
4202 gap: 10px;
4203 }
4204
4205 /* Center element styling */
4206 .basalam-center {
4207 margin-top: 20px;
4208 display: flex;
4209 justify-content: center;
4210 }
4211
4212 .basalam-center-margin {
4213 margin-top: 10px;
4214 }
4215
4216 /* Color specific utilities */
4217 .basalam-blue-link {
4218 color: #0770d9 !important;
4219 }
4220
4221 .basalam-gray-text {
4222 color: var(--basalam-gray-500);
4223 }
4224
4225 /* Display with margin */
4226 .basalam-display-block-margin {
4227 display: block;
4228 margin: 10px 0;
4229 }
4230
4231 /* Disabled cursor styling */
4232 .basalam-disabled-cursor {
4233 cursor: not-allowed;
4234 margin-bottom: 0 !important;
4235 }
4236
4237 /* Responsive flex */
4238 .basalam-flex-responsive {
4239 display: flex;
4240 margin-top: 13px !important;
4241 }
4242
4243 .basalam-flex-align-center {
4244 display: flex;
4245 align-items: center;
4246 }
4247
4248 .basalam-flex-align-center-width {
4249 display: flex;
4250 align-items: center;
4251 width: 100%;
4252 }
4253
4254 .basalam-flex-align-center-33 {
4255 display: flex;
4256 align-items: center;
4257 width: 33%;
4258 }
4259
4260 .basalam-flex-align-start-gap {
4261 display: flex;
4262 align-items: start;
4263 gap: 10px;
4264 }
4265
4266 /* Hidden elements */
4267 .basalam-element-hidden {
4268 display: none;
4269 margin-top: 15px;
4270 margin-bottom: 20px;
4271 }
4272
4273 /* Modal close button */
4274 .basalam-modal-close-abs {
4275 position: absolute;
4276 top: 10px;
4277 right: 15px;
4278 cursor: pointer;
4279 }
4280
4281 /* Image sizing */
4282 .basalam-img-20 {
4283 width: 20px;
4284 }
4285
4286 .basalam-img-22 {
4287 width: 22px;
4288 height: 20px;
4289 }
4290
4291 .basalam-img-20-margin {
4292 width: 20px;
4293 margin-left: 5px;
4294 }
4295
4296 /* Button width utilities */
4297 .basalam-btn-unset {
4298 width: unset;
4299 margin: 24px !important;
4300 }
4301
4302 .basalam-btn-danger {
4303 width: 100%;
4304 background-color: #dc3545;
4305 margin-bottom: 10px !important;
4306 }
4307
4308 .basalam-btn-no-margin {
4309 margin-bottom: 0px !important;
4310 }
4311
4312 .basalam-btn-fill {
4313 width: -webkit-fill-available;
4314 }
4315
4316 .basalam-btn-auto {
4317 width: auto;
4318 }
4319
4320 .basalam-btn-auto-margin {
4321 margin: 16px !important;
4322 text-align: justify;
4323 text-align: right !important;
4324 }
4325
4326 .basalam-btn-no-margin-bottom {
4327 margin-bottom: 0 !important;
4328 }
4329
4330 /* Button sizing */
4331 .basalam-btn-small {
4332 font-size: 11px !important;
4333 }
4334
4335 .basalam-btn-justify {
4336 text-align: justify;
4337 margin-top: 16px !important;
4338 }
4339
4340 /* Input utilities */
4341 .basalam-input-fill {
4342 max-width: -webkit-fill-available;
4343 margin-bottom: 10px;
4344 }
4345
4346 /* Center alignment utilities */
4347 .basalam-center-block {
4348 text-align: center;
4349 margin-top: 20px;
4350 margin-bottom: 20px;
4351 }
4352
4353 .basalam-center-margin-top {
4354 margin-top: 20px;
4355 }
4356
4357 /* Flex layout utilities */
4358 .basalam-layout-center {
4359 display: flex;
4360 justify-content: center;
4361 gap: 10px;
4362 margin-top: 20px;
4363 margin-bottom: 20px;
4364 }
4365
4366 .basalam-layout-between {
4367 display: flex;
4368 justify-content: space-between;
4369 gap: 10px;
4370 margin-bottom: 15px;
4371 margin-top: 15px;
4372 }
4373
4374 .basalam-layout-end {
4375 display: flex;
4376 justify-content: flex-end;
4377 margin-top: 15px;
4378 gap: 10px;
4379 }
4380
4381 /* Padding utilities */
4382 .basalam-padding-vertical {
4383 padding: 10px 0;
4384 font-size: 14px;
4385 text-align: justify;
4386 }
4387
4388 .basalam-padding-top {
4389 padding-top: 15px;
4390 font-size: 14px;
4391 font-weight: bold;
4392 text-align: justify;
4393 }
4394
4395 .basalam-padding-top-normal {
4396 padding-top: 15px;
4397 font-size: 14px;
4398 text-align: justify;
4399 }
4400
4401 .basalam-padding-top-12 {
4402 padding-top: 12px;
4403 }
4404
4405 .basalam-padding-top-20 {
4406 padding-top: 20px;
4407 font-size: 24px;
4408 color: var(--basalam-gray-500);
4409 }
4410
4411 .basalam-padding-box {
4412 padding: 15px;
4413 background: var(--basalam-gray-100);
4414 border-radius: 8px;
4415 text-align: center;
4416 font-family: PelakFA;
4417 }
4418
4419 .basalam-padding-justify {
4420 padding: 0;
4421 margin: 16px !important;
4422 text-align: justify;
4423 }
4424
4425 .basalam-padding-small {
4426 padding: 7px 5px;
4427 font-weight: bold;
4428 text-align: center;
4429 }
4430
4431 /* Opacity utilities */
4432 .basalam-opacity-1 {
4433 opacity: 1;
4434 }
4435
4436 .basalam-opacity-1-padding {
4437 opacity: 1;
4438 padding: 20px;
4439 }
4440
4441 /* Margin utilities */
4442 .basalam-margin-0 {
4443 margin: 0;
4444 }
4445
4446 .basalam-margin-0-8-0 {
4447 margin: 0 0 8px 0;
4448 font-size: 14px;
4449 color: #2c3e50;
4450 }
4451
4452 .basalam-margin-primary {
4453 margin: 0 0 8px 0;
4454 font-size: 14px;
4455 color: var(--basalam-primary-color);
4456 }
4457
4458 .basalam-margin-warning {
4459 margin: 0 0 10px 0;
4460 font-size: 14px;
4461 color: #856404;
4462 }
4463
4464 .basalam-margin-warning-header {
4465 margin: 0 0 15px 0;
4466 font-size: 16px;
4467 color: #856404;
4468 }
4469
4470 .basalam-margin-warning-text {
4471 margin: 0 0 8px 0;
4472 font-size: 14px;
4473 color: #856404;
4474 }
4475
4476 .basalam-margin-warning-justify {
4477 margin: 0;
4478 color: #856404;
4479 font-size: 13px;
4480 text-align: justify;
4481 line-height: 1.8;
4482 }
4483
4484 .basalam-margin-muted {
4485 margin: 0;
4486 font-size: 12px;
4487 color: #666;
4488 line-height: 1.5;
4489 }
4490
4491 .basalam-margin-10-0 {
4492 margin: 10px 0;
4493 }
4494
4495 .basalam-margin-20-0 {
4496 margin: 20px 0;
4497 }
4498
4499 .basalam-margin-bottom-16 {
4500 margin-bottom: 16px !important;
4501 text-align: right;
4502 }
4503
4504 .basalam-margin-bottom-8 {
4505 margin-bottom: 8px !important;
4506 }
4507
4508 .basalam-margin-left-10 {
4509 margin-left: 10px;
4510 padding: 0px 20px;
4511 }
4512
4513 .basalam-margin-left-8 {
4514 margin-left: 8px;
4515 }
4516
4517 .basalam-margin-right-10 {
4518 margin-right: 10px;
4519 padding: 0px 20px;
4520 }
4521
4522 .basalam-margin-top-0-family {
4523 margin-top: 0;
4524 font-family: "PelakFA" !important;
4525 }
4526
4527 #sync_basalam_comment {
4528 font-family: "PelakFA" !important;
4529 }
4530
4531 .basalam-margin-top-10-justify {
4532 margin-top: 10px;
4533 }
4534
4535 .basalam-margin-top-15-flex {
4536 margin-top: 15px;
4537 display: flex;
4538 gap: 10px;
4539 justify-content: flex-end;
4540 }
4541
4542 .basalam-margin-top-17 {
4543 margin-top: 17px !important;
4544 text-align: right !important;
4545 }
4546
4547 .basalam-margin-top-25-bottom-10 {
4548 margin-top: 25px;
4549 margin-bottom: 10px !important;
4550 }
4551
4552 /* Font size utilities */
4553 .basalam-font-15 {
4554 font-size: 15px;
4555 }
4556
4557 .basalam-font-16 {
4558 font-size: 16px;
4559 color: white;
4560 font-weight: bold;
4561 }
4562
4563 .basalam-font-20 {
4564 font-size: 20px;
4565 margin-top: 15px !important;
4566 }
4567
4568 .basalam-font-24 {
4569 font-size: 24px;
4570 color: var(--basalam-gray-500);
4571 }
4572
4573 .basalam-font-24-top {
4574 font-size: 20px;
4575 margin-top: 2px;
4576 color: #856404;
4577 }
4578
4579 .basalam-font-13-underline {
4580 color: #856404;
4581 font-weight: bold;
4582 text-decoration: underline;
4583 }
4584
4585 /* Description utilities */
4586 .basalam-description-justify {
4587 text-align: justify !important;
4588 }
4589
4590 .basalam-description-margin {
4591 margin-bottom: 20px;
4592 text-align: right;
4593 font-weight: bold;
4594 }
4595
4596 /* Background utilities */
4597 .basalam-bg-light-warning {
4598 background: #f5f5f5;
4599 padding: 15px;
4600 border-radius: 8px;
4601 margin-top: 15px;
4602 }
4603
4604 .basalam-bg-warning-section {
4605 background: #fff3cd;
4606 border: 1px solid #ffc107;
4607 border-radius: 8px;
4608 padding: 15px;
4609 margin-bottom: 20px;
4610 width: 90%;
4611 max-width: 1080px;
4612 }
4613
4614 .basalam-bg-warning-info {
4615 background: #fff3cd;
4616 padding: 20px;
4617 border-radius: 8px;
4618 margin-top: 15px;
4619 border: 1px solid #ffc107;
4620 }
4621
4622 .basalam-bg-warning-block {
4623 display: block;
4624 margin: 10px 0px 10px 0px;
4625 }
4626
4627 .basalam-bg-warning-gap {
4628 display: flex;
4629 gap: 10px;
4630 }
4631
4632 .basalam-bg-warning-gap-block {
4633 display: block;
4634 margin: 10px;
4635 }
4636
4637 /* Status styling */
4638 .basalam-status-info {
4639 padding: 0;
4640 font-size: 15px;
4641 }
4642
4643 .basalam-status-auto {
4644 display: flex;
4645 align-items: center;
4646 justify-content: space-between;
4647 padding: 1rem;
4648 background: #f0f6fc;
4649 border-radius: 8px;
4650 margin-bottom: 1rem;
4651 gap: 12px;
4652 width: 100%;
4653 flex-wrap: wrap;
4654 }
4655
4656 .basalam-status-auto-active {
4657 background: #edfaef;
4658 }
4659
4660 /* Modal utilities */
4661 .basalam-modal-settings {
4662 background: #fff;
4663 margin: 5% auto;
4664 padding: 20px;
4665 width: 90%;
4666 max-width: 800px;
4667 max-height: 570px;
4668 position: relative;
4669 overflow-y: auto;
4670 padding-top: 40px;
4671 }
4672
4673 .basalam-modal-settings-form {
4674 margin-bottom: 20px;
4675 }
4676
4677 /* Product image styling */
4678 .basalam-product-image-size {
4679 width: 22px;
4680 height: 20px;
4681 cursor: pointer;
4682 }
4683
4684 .basalam-product-image-info {
4685 width: 22px;
4686 height: 20px;
4687 cursor: pointer;
4688 }
4689
4690 /* Pagination styling */
4691 .basalam-pagination-flex {
4692 display: flex;
4693 flex-direction: row;
4694 justify-content: center;
4695 align-items: center;
4696 }
4697
4698 /* Onboarding step */
4699 .basalam-step-intro-opacity {
4700 opacity: 1;
4701 }
4702
4703 /* Step intro centering */
4704 .basalam-step-center {
4705 text-align: center;
4706 }
4707
4708 /* Onboarding description */
4709 .basalam-onboarding-desc {
4710 text-align: center;
4711 padding-top: 15px;
4712 font-size: 14px;
4713 text-align: justify;
4714 }
4715
4716 /* Additional utility classes for all inline styles found in templates */
4717
4718 /* More width utilities */
4719 .basalam-width-20 {
4720 width: 20px;
4721 }
4722
4723 .basalam-width-40 {
4724 width: 40px;
4725 }
4726
4727 .basalam-width-70 {
4728 width: 70px;
4729 }
4730
4731 .basalam-width-75 {
4732 width: 75%;
4733 }
4734
4735 /* More height utilities */
4736 .basalam-height-20-flex {
4737 height: 20px;
4738 flex: 1;
4739 padding: 20px 15px;
4740 background: #2c3e50;
4741 display: flex;
4742 align-items: center;
4743 justify-content: center;
4744 border-radius: 8px;
4745 transition: all 0.3s ease;
4746 }
4747
4748 .basalam-height-20-flex-primary {
4749 height: 20px;
4750 flex: 1;
4751 padding: 20px 15px;
4752 background: var(--basalam-primary-color);
4753 display: flex;
4754 align-items: center;
4755 justify-content: center;
4756 border-radius: 8px;
4757 transition: all 0.3s ease;
4758 }
4759
4760 /* More text alignment utilities */
4761 .basalam-text-center-margin {
4762 text-align: center;
4763 margin-top: 20px;
4764 }
4765
4766 .basalam-text-center-padding {
4767 text-align: center;
4768 padding: 20px;
4769 font-family: PelakFA;
4770 }
4771
4772 .basalam-text-right-flex {
4773 text-align: right;
4774 flex: 1;
4775 }
4776
4777 .basalam-text-right-bold {
4778 text-align: right;
4779 font-weight: bold;
4780 }
4781
4782 .basalam-text-right-margin {
4783 text-align: right;
4784 margin-bottom: 20px !important;
4785 }
4786
4787 /* More display utilities */
4788 .basalam-display-flex-center-row {
4789 display: flex;
4790 flex-direction: row;
4791 justify-content: center;
4792 align-items: center;
4793 }
4794
4795 .basalam-display-flex-gap-20 {
4796 display: flex;
4797 gap: 20px;
4798 }
4799
4800 .basalam-display-flex-gap-10-margin {
4801 display: flex;
4802 gap: 10px;
4803 margin-top: 20px;
4804 }
4805
4806 /* More margin utilities */
4807 .basalam-margin-warning-justify-10 {
4808 margin: 10px 0 0 0;
4809 font-size: 13px;
4810 color: #856404;
4811 }
4812
4813 .basalam-margin-primary-color {
4814 margin: 0 0 8px 0;
4815 font-size: 14px;
4816 color: var(--basalam-primary-color);
4817 }
4818
4819 .basalam-margin-dark-color {
4820 margin: 0 0 8px 0;
4821 font-size: 14px;
4822 color: #2c3e50;
4823 }
4824
4825 /* More font utilities */
4826 .basalam-font-15-white {
4827 font-weight: bold;
4828 font-size: 15px;
4829 color: white;
4830 }
4831
4832 .basalam-font-20-important {
4833 font-size: 20px;
4834 margin-top: 15px !important;
4835 }
4836
4837 .basalam-font-24-important {
4838 font-size: 20px;
4839 margin-top: 15px !important;
4840 }
4841
4842 .basalam-font-11-important {
4843 font-size: 11px !important;
4844 }
4845
4846 /* More background utilities */
4847 .basalam-bg-light-warning-margin {
4848 background: #f5f5f5;
4849 padding: 15px;
4850 border-radius: 8px;
4851 margin-top: 10px !important;
4852 }
4853
4854 .basalam-bg-warning-info-margin {
4855 background: #fff3cd;
4856 padding: 20px;
4857 border-radius: 8px;
4858 margin-top: 15px;
4859 border: 1px solid #ffc107;
4860 }
4861
4862 /* More positioning utilities */
4863 .basalam-absolute-info {
4864 position: absolute;
4865 top: 10px;
4866 left: 10px;
4867 border: 1px solid;
4868 border-radius: 70%;
4869 width: 22px;
4870 height: 22px;
4871 }
4872
4873 /* More cursor utilities */
4874 .basalam-cursor-pointer-margin {
4875 cursor: pointer;
4876 margin-left: 5px;
4877 }
4878
4879 .basalam-cursor-disabled-bg {
4880 cursor: not-allowed;
4881 background-color: #ccc !important;
4882 }
4883
4884 /* More max width utilities */
4885 .basalam-max-width-none {
4886 max-width: none;
4887 }
4888
4889 /* More display utilities */
4890 .basalam-display-flex-center {
4891 display: flex;
4892 align-items: center;
4893 }
4894
4895 .basalam-display-flex-start {
4896 display: flex;
4897 align-items: start;
4898 gap: 10px;
4899 }
4900
4901 /* Flex with width utilities */
4902 .basalam-flex-width-100 {
4903 display: flex;
4904 align-items: center;
4905 width: 100%;
4906 }
4907
4908 .basalam-flex-width-33 {
4909 display: flex;
4910 align-items: center;
4911 width: 33%;
4912 }
4913
4914 /* More opacity utilities */
4915 .basalam-opacity-1-20 {
4916 opacity: 1;
4917 padding: 20px;
4918 }
4919
4920 /* More padding utilities */
4921 .basalam-padding-0-15 {
4922 padding: 0;
4923 font-size: 15px;
4924 }
4925
4926 .basalam-padding-justify-16 {
4927 padding: 0;
4928 margin: 16px !important;
4929 text-align: justify;
4930 }
4931
4932 .basalam-padding-10-0 {
4933 padding: 10px 0;
4934 font-size: 14px;
4935 text-align: justify;
4936 }
4937
4938 .basalam-padding-top-12 {
4939 padding-top: 12px;
4940 }
4941
4942 .basalam-padding-top-bold {
4943 padding-top: 15px;
4944 font-size: 14px;
4945 font-weight: bold;
4946 text-align: justify;
4947 }
4948
4949 .basalam-padding-top-normal {
4950 padding-top: 15px;
4951 font-size: 14px;
4952 text-align: justify;
4953 }
4954
4955 /* Dynamic padding right */
4956 .basalam-padding-right-dynamic {
4957 padding-right: var(--paddingRight);
4958 }
4959
4960 /* Special display utilities */
4961 .basalam-display-block-10 {
4962 display: block;
4963 margin: 10px;
4964 }
4965
4966 .basalam-display-block-10-0 {
4967 display: block;
4968 margin: 10px 0px 10px 0px;
4969 }
4970
4971 /* Height utilities */
4972 .basalam-height-400-scroll {
4973 max-height: 400px;
4974 overflow-y: auto;
4975 border: 1px solid var(--basalam-gray-300);
4976 border-radius: 6px;
4977 }
4978
4979 /* Width with background utilities */
4980 .basalam-width-danger {
4981 width: 100%;
4982 background-color: #dc3545 !important;
4983 }
4984
4985 .basalam-width-danger-margin {
4986 width: 100%;
4987 background-color: #dc3545 !important;
4988 margin-top: 10px !important;
4989 }
4990
4991 .basalam-width-red-bg {
4992 width: -webkit-fill-available;
4993 background-color: red !important;
4994 margin-top: 10px !important;
4995 margin-bottom: 10px !important;
4996 }
4997
4998 .basalam-width-input {
4999 width: 100%;
5000 padding: 10px;
5001 border: 1px solid var(--basalam-gray-300);
5002 border-radius: 6px;
5003 font-family: PelakFA;
5004 }
5005
5006 /* Image width utilities */
5007 .basalam-img-20-inline {
5008 width: 20px;
5009 display: inline-block;
5010 }
5011
5012 .basalam-img-20-vertical {
5013 width: 20px;
5014 vertical-align: middle;
5015 margin-left: 5px;
5016 }
5017
5018 /* Button width utilities */
5019 .basalam-width-unset {
5020 width: unset;
5021 margin: 24px !important;
5022 }
5023
5024 .basalam-width-fill-no-margin {
5025 width: -webkit-fill-available;
5026 margin-bottom: 0px !important;
5027 }
5028
5029 /* Transform utilities */
5030 .basalam-transform-scale {
5031 transform: scale(1.2);
5032 }
5033
5034 /* Dynamic cursor utility */
5035 .basalam-dynamic-cursor {
5036 margin-bottom: 0 !important;
5037 }
5038
5039 /* Warning text styling */
5040 .basalam-warning-20 {
5041 color: #856404;
5042 font-size: 20px;
5043 margin-top: 2px;
5044 }
5045
5046 .basalam-warning-underline {
5047 color: #856404;
5048 font-weight: bold;
5049 text-decoration: underline;
5050 }
5051
5052 /* Additional utility classes for all remaining inline styles */
5053
5054 /* Accent color */
5055 .basalam-accent-primary {
5056 accent-color: var(--basalam-primary-color);
5057 }
5058
5059 /* More display utilities */
5060 .basalam-flex-center-gap-10 {
5061 align-items: center;
5062 display: flex;
5063 justify-content: center;
5064 gap: 10px;
5065 }
5066
5067 .basalam-flex-center-gap-4 {
5068 display: flex;
5069 align-items: center;
5070 gap: 4px;
5071 justify-content: center;
5072 }
5073
5074 .basalam-flex-col-gap-8 {
5075 display: flex;
5076 flex-direction: column;
5077 gap: 8px;
5078 }
5079
5080 .basalam-flex-wrap-gap-6 {
5081 display: flex;
5082 flex-wrap: wrap;
5083 gap: 6px;
5084 }
5085
5086 .basalam-flex-wrap-gap-8 {
5087 display: flex;
5088 flex-wrap: wrap;
5089 gap: 8px;
5090 }
5091
5092 .basalam-flex-gap-10 {
5093 display: flex;
5094 gap: 10px;
5095 }
5096
5097 .basalam-flex-margin-13 {
5098 display: flex;
5099 margin-top: 13px !important;
5100 }
5101
5102 /* Grid utilities */
5103 .basalam-grid-full {
5104 grid-column: 1 / -1;
5105 }
5106
5107 /* Color utilities */
5108 .basalam-color-success-bold {
5109 color: #00a884;
5110 font-size: 16px;
5111 font-weight: bold;
5112 }
5113
5114 .basalam-color-success {
5115 color: #00b67a;
5116 }
5117
5118 .basalam-color-danger-dark {
5119 color: #dc3232;
5120 }
5121
5122 .basalam-color-warning-dark {
5123 color: #f7a700;
5124 }
5125
5126 .basalam-color-brand {
5127 color: #ff5c35;
5128 font-size: 16px;
5129 font-weight: bold;
5130 }
5131
5132 .basalam-color-gray-dark {
5133 color: #2d3748;
5134 font-size: 14px;
5135 }
5136
5137 .basalam-color-gray-medium {
5138 color: #718096;
5139 font-size: 12px;
5140 }
5141
5142 .basalam-color-white {
5143 color: #fff;
5144 }
5145
5146 /* Font utilities */
5147 .basalam-font-10 {
5148 font-size: 10px;
5149 }
5150
5151 .basalam-font-12 {
5152 font-size: 12px;
5153 }
5154
5155 .basalam-font-pelak-12 {
5156 font-family: PelakFa;
5157 font-size: 12px !important;
5158 }
5159
5160 .basalam-font-17 {
5161 font-size: 17px;
5162 vertical-align: middle;
5163 }
5164
5165 /* Height utilities */
5166 .basalam-height-32 {
5167 height: 32px;
5168 }
5169
5170 .basalam-height-35 {
5171 height: 35px;
5172 }
5173
5174 /* More margin utilities */
5175 .basalam-margin-bottom-5 {
5176 margin-bottom: 5px;
5177 font-weight: bold;
5178 }
5179
5180 .basalam-margin-bottom-5-width {
5181 margin-bottom: 5px;
5182 width: 100%;
5183 }
5184
5185 .basalam-margin-top-8-flex {
5186 margin-top: 8px;
5187 display: flex;
5188 align-items: center;
5189 gap: 4px;
5190 }
5191
5192 .basalam-margin-top-10-gradient {
5193 margin-top: 10px;
5194 padding: 15px;
5195 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe266 100%);
5196 border-radius: 8px;
5197 border: 1px solid #ddd;
5198 }
5199
5200 /* Width utilities */
5201 .basalam-width-15 {
5202 width: 15px;
5203 }
5204
5205 .basalam-width-auto {
5206 width: auto;
5207 }
5208
5209 .basalam-width-full-margin-10 {
5210 width: 100%;
5211 margin: 10px 0;
5212 font-family: "PelakFA";
5213 }
5214
5215 .basalam-width-full-pelak {
5216 width: 100%;
5217 margin: 10px 0;
5218 font-family: "PelakFA";
5219 }
5220
5221 .basalam-width-full-pelak-no-margin {
5222 width: 100%;
5223 margin: 10px 0;
5224 font-family: "PelakFA";
5225 }
5226
5227 .basalam-width-full-margin-bottom-15 {
5228 width: 100%;
5229 margin-bottom: 15px !important;
5230 }
5231
5232 .basalam-width-full-margin-top-10 {
5233 width: 100%;
5234 margin-top: 10px;
5235 }
5236
5237 .basalam-width-full-margin-top-5 {
5238 width: 100%;
5239 margin-top: 5px;
5240 }
5241
5242 .basalam-width-full-primary {
5243 width: 100%;
5244 background: var(--basalam-primary-color);
5245 border: none;
5246 color: white;
5247 padding: 0px !important;
5248 cursor: pointer;
5249 }
5250
5251 .basalam-width-32 {
5252 width: 32%;
5253 text-align: right;
5254 margin-bottom: 10px;
5255 }
5256
5257 .basalam-width-max-80 {
5258 max-width: 80% !important;
5259 font-size: 12px;
5260 }
5261
5262 .basalam-min-width-0 {
5263 min-width: 0px;
5264 font-size: 13px;
5265 }
5266
5267 /* More display utilities */
5268 .basalam-display-block-margin-5 {
5269 display: block;
5270 margin-bottom: 5px;
5271 font-size: 12px;
5272 text-align: justify;
5273 margin-bottom: 5px !important;
5274 }
5275
5276 .basalam-display-block-margin-5-top {
5277 display: block;
5278 margin-bottom: 5px;
5279 margin-top: 5px;
5280 font-size: 12px;
5281 text-align: justify;
5282 margin-bottom: 5px !important;
5283 margin-top: 5px !important;
5284 }
5285
5286 .basalam-display-none-shadow {
5287 display: none;
5288 position: fixed;
5289 top: 50%;
5290 left: 50%;
5291 transform: translate(-50%, -50%);
5292 background: white;
5293 padding: 20px;
5294 border: 1px solid #ccc;
5295 z-index: 1000;
5296 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
5297 }
5298
5299 /* Dynamic display utilities */
5300 .basalam-display-dynamic-checked {
5301 display: var(--display-checked);
5302 }
5303
5304 .basalam-display-dynamic-yes {
5305 display: var(--display-yes);
5306 }
5307
5308 /* Text alignment with font size */
5309 .basalam-text-center-12 {
5310 text-align: center;
5311 font-size: 12px;
5312 }
5313
5314 .basalam-text-justify-12 {
5315 text-align: justify;
5316 font-size: 12px;
5317 }
5318
5319 /* Modal section styling */
5320 .basalam-modal-section {
5321 background: #fff;
5322 margin: 5% auto;
5323 padding: 20px;
5324 width: 90%;
5325 max-width: 800px;
5326 max-height: 570px;
5327 position: relative;
5328 overflow-y: auto;
5329 padding-top: 40px;
5330 }
5331
5332 /* Badge for status */
5333 .basalam-status-badge {
5334 background: #ffc107;
5335 color: #000;
5336 padding: 2px 8px;
5337 border-radius: 4px;
5338 font-weight: bold;
5339 }
5340
5341 /* Additional utility classes for inline styles found in templates */
5342 .basalam-skip-link {
5343 color: #0770d9 !important;
5344 display: flex;
5345 align-items: center;
5346 }
5347
5348 .basalam-input-max-width {
5349 max-width: -webkit-fill-available;
5350 margin-bottom: 10px;
5351 }
5352
5353 .basalam-token-paragraph {
5354 text-align: justify;
5355 margin-top: 16px !important;
5356 }
5357
5358 .basalam-token-button {
5359 width: unset;
5360 margin: 24px !important;
5361 }
5362
5363 .basalam-description-justify-important {
5364 text-align: justify !important;
5365 }
5366
5367 .basalam-action-card-relative {
5368 position: relative;
5369 }
5370
5371 .basalam-info-icon-absolute {
5372 position: absolute;
5373 top: 10px;
5374 left: 10px;
5375 border: 1px solid;
5376 border-radius: 70%;
5377 width: 22px;
5378 height: 22px;
5379 }
5380
5381 .basalam-info-cursor {
5382 width: 22px;
5383 height: 20px;
5384 cursor: pointer;
5385 }
5386
5387 .basalam-form-margin-0 {
5388 margin: 0;
5389 }
5390
5391 .basalam-width-fill-available {
5392 width: -webkit-fill-available;
5393 }
5394
5395 .basalam-btn-img-20 {
5396 width: 20px;
5397 }
5398
5399 .basalam-btn-img-20-vertical {
5400 width: 20px;
5401 vertical-align: middle;
5402 margin-left: 5px;
5403 }
5404
5405 .basalam-modal-hidden {
5406 display: none;
5407 }
5408
5409 .basalam-modal-max-width-400 {
5410 max-width: 400px;
5411 }
5412
5413 .basalam-modal-img-20 {
5414 width: 20px;
5415 }
5416
5417 .basalam-modal-font-20 {
5418 font-size: 20px;
5419 margin-top: 15px !important;
5420 }
5421
5422 .basalam-job-info-block {
5423 display: block;
5424 margin: 10px 0px 10px 0px;
5425 }
5426
5427 .basalam-warning-bg {
5428 background: #fff3cd;
5429 padding: 20px;
5430 border-radius: 8px;
5431 margin-top: 15px;
5432 border: 1px solid #ffc107;
5433 -webkit-border-radius: ;
5434 -moz-border-radius: ;
5435 -ms-border-radius: ;
5436 -o-border-radius: ;
5437 }
5438
5439 .basalam-warning-header {
5440 margin: 0 0 15px 0;
5441 font-size: 16px;
5442 color: #856404;
5443 }
5444
5445 .basalam-warning-text {
5446 margin: 0 0 10px 0;
5447 font-size: 14px;
5448 color: #856404;
5449 }
5450
5451 .basalam-warning-badge {
5452 background: #ffc107;
5453 color: #000;
5454 padding: 2px 8px;
5455 border-radius: 4px;
5456 font-weight: bold;
5457 }
5458
5459 .basalam-warning-justify-10 {
5460 margin: 10px 0 0 0;
5461 font-size: 13px;
5462 color: #856404;
5463 }
5464
5465 .basalam-onboarding-paragraph {
5466 padding-top: 15px;
5467 font-size: 14px;
5468 text-align: justify;
5469 }
5470
5471 .basalam-form-group-margin {
5472 margin: 10px 0;
5473 }
5474
5475 .basalam-checkbox-scale {
5476 transform: scale(1.2);
5477 }
5478
5479 .basalam-button-disabled-bg {
5480 cursor: not-allowed;
5481 background-color: #ccc !important;
5482 }
5483
5484 .basalam-danger-button-full {
5485 width: 100%;
5486 background-color: #dc3545 !important;
5487 margin-bottom: 10px !important;
5488 }
5489
5490 .basalam-danger-button-img {
5491 width: 20px;
5492 vertical-align: middle;
5493 margin-left: 5px;
5494 }
5495
5496 .basalam-modal-display-none {
5497 display: none;
5498 }
5499
5500 .basalam-margin-top-15-flex-end {
5501 margin-top: 15px;
5502 display: flex;
5503 justify-content: flex-end;
5504 gap: 10px;
5505 }
5506
5507 .basalam-info-text-right {
5508 text-align: right;
5509 font-weight: bold;
5510 }
5511
5512 .basalam-danger-text {
5513 color: var(--basalam-danger-color);
5514 }
5515
5516 .basalam-contact-padding-top {
5517 padding-top: 12px;
5518 }
5519
5520 .basalam-contact-img-40 {
5521 width: 40px;
5522 }
5523
5524 .basalam-contact-img-70 {
5525 width: 70px;
5526 }
5527
5528 .basalam-vendor-info-padding {
5529 padding-top: 10px !important;
5530 }
5531
5532 .basalam-page-description {
5533 text-align: justify !important;
5534 }
5535
5536 .basalam-accent-color {
5537 accent-color: var(--basalam-primary-color);
5538 }
5539
5540 /* Additional utility classes for category mapping page */
5541 .basalam-padding-box-center {
5542 padding: 15px;
5543 background: var(--basalam-gray-100);
5544 border-radius: 8px;
5545 text-align: center;
5546 font-family: PelakFA;
5547 }
5548
5549 .basalam-arrow-large {
5550 font-size: 24px;
5551 color: var(--basalam-gray-500);
5552 }
5553
5554 .basalam-margin-left-10 {
5555 margin-left: 10px;
5556 }
5557
5558 .basalam-margin-right-10 {
5559 margin-right: 10px;
5560 }
5561
5562 .basalam-padding-0-20 {
5563 padding: 0px 20px;
5564 }
5565
5566 .basalam-input-search {
5567 width: 100%;
5568 padding: 10px;
5569 border: 1px solid var(--basalam-gray-300);
5570 border-radius: 6px;
5571 font-family: PelakFA;
5572 }
5573
5574 .basalam-height-400-scroll {
5575 max-height: 400px;
5576 overflow-y: auto;
5577 border: 1px solid var(--basalam-gray-300);
5578 border-radius: 6px;
5579 }
5580
5581 .basalam-text-center-padding {
5582 text-align: center;
5583 padding: 20px;
5584 font-family: PelakFA;
5585 }
5586
5587 .basalam-margin-left-8 {
5588 margin-left: 8px;
5589 }
5590
5591 .basalam-margin-bottom-15 {
5592 margin-bottom: 15px;
5593 }
5594
5595 .basalam-padding-20 {
5596 padding: 20px;
5597 }
5598
5599 .basalam-margin-top-20 {
5600 margin-top: 20px;
5601 }
5602
5603 .basalam-cursor-pointer-margin {
5604 cursor: pointer;
5605 margin-left: 5px;
5606 }
5607
5608 .basalam-width-20-block {
5609 width: 20px;
5610 display: inline-block;
5611 }
5612
5613 .basalam-dynamic-padding-right {
5614 padding-right: var(--paddingRight);
5615 }
5616
5617 .basalam-opacity-1-padding {
5618 opacity: 1;
5619 padding: 20px;
5620 }
5621
5622 /* JavaScript template utility classes */
5623 .basalam-cursor-pointer-small {
5624 cursor: pointer;
5625 margin-left: 5px;
5626 }
5627
5628 .basalam-flex-1 {
5629 flex: 1;
5630 }
5631
5632 .basalam-display-none {
5633 display: none;
5634 }
5635
5636 /* Order tracking box utility classes */
5637 .basalam-font-12 {
5638 font-size: 12px;
5639 }
5640
5641 .basalam-text-justify-12 {
5642 text-align: justify;
5643 font-size: 12px;
5644 }
5645
5646 .basalam-margin-top-15 {
5647 margin-top: 15px;
5648 }
5649
5650 .basalam-margin-bottom-5 {
5651 margin-bottom: 5px;
5652 }
5653
5654 .basalam-margin-bottom-5-width {
5655 margin-bottom: 5px;
5656 width: 100%;
5657 }
5658
5659 .basalam-margin-top-5 {
5660 margin-top: 5px;
5661 }
5662
5663 .basalam-margin-top-10 {
5664 margin-top: 10px;
5665 }
5666
5667 .basalam-margin-10-0 {
5668 margin: 10px 0;
5669 }
5670
5671 .basalam-margin-bottom-15 {
5672 margin-bottom: 15px;
5673 }
5674
5675 .basalam-height-35 {
5676 height: 35px;
5677 }
5678
5679 .basalam-modal-popup {
5680 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
5681 display: none;
5682 position: fixed;
5683 top: 50%;
5684 left: 50%;
5685 transform: translate(-50%, -50%);
5686 background: white;
5687 padding: 20px;
5688 border: 1px solid #ccc;
5689 z-index: 1000;
5690 }
5691
5692 .basalam-modal-center-gap {
5693 align-items: center;
5694 display: flex;
5695 justify-content: center;
5696 gap: 10px;
5697 }
5698
5699 /* Additional utility classes for AdminUI inline styles */
5700
5701 /* Icon sizing */
5702 .basalom-icon-medium {
5703 font-size: 17px;
5704 vertical-align: middle;
5705 }
5706
5707 /* Modal display control */
5708 .basalam-modal-display-none {
5709 display: none;
5710 }
5711
5712 /* Modal header text */
5713 .basalam-modal-header-text {
5714 color: #fff;
5715 }
5716
5717 /* Flex containers with specific alignment */
5718 .basalam-input-container {
5719 display: flex;
5720 align-items: center;
5721 gap: 4px;
5722 justify-content: center;
5723 }
5724
5725 .basalam-flex-center-gap-4 {
5726 display: flex;
5727 align-items: center;
5728 gap: 4px;
5729 justify-content: center;
5730 }
5731
5732 .basalam-flex-center-vertical {
5733 display: flex;
5734 align-items: center;
5735 justify-content: space-around;
5736 }
5737
5738 .basalam-flex-end-gap-4 {
5739 display: flex;
5740 align-items: center;
5741 gap: 4px;
5742 justify-content: flex-end;
5743 }
5744
5745 /* Font sizes */
5746 .basalam-font-10 {
5747 font-size: 10px;
5748 }
5749
5750 .basalam-font-12 {
5751 font-size: 12px;
5752 }
5753
5754 .basalam-font-13 {
5755 font-size: 13px;
5756 }
5757
5758 .basalam-font-14 {
5759 font-size: 14px;
5760 }
5761
5762 .basalam-font-16 {
5763 font-size: 16px;
5764 }
5765
5766 .basalam-font-17 {
5767 font-size: 17px;
5768 }
5769
5770 /* Text alignment for selects */
5771 .basalam-select-center {
5772 text-align: center;
5773 font-size: 12px;
5774 }
5775
5776 /* Width utilities */
5777 .basalam-width-auto {
5778 width: auto;
5779 }
5780
5781 .basalam-max-width-80 {
5782 max-width: 80% !important;
5783 }
5784
5785 /* Margin utilities */
5786 .basalam-margin-top-8 {
5787 margin-top: 8px;
5788 }
5789
5790 /* Status icon colors */
5791 .basalam-status-success {
5792 color: #00b67a;
5793 }
5794
5795 .basalam-status-warning {
5796 color: #f7a700;
5797 }
5798
5799 .basalam-status-error {
5800 color: #dc3232;
5801 }
5802
5803 /* Button height utilities */
5804 .basalam-height-32 {
5805 height: 32px;
5806 }
5807
5808 /* Button width utilities */
5809 .basalam-button-auto {
5810 width: auto;
5811 }
5812
5813 .basalam-margin-auto {
5814 margin: auto !important;
5815 }
5816
5817 /* Table styling for unsync products */
5818 .basalam-table-unsync {
5819 border-collapse: collapse;
5820 max-width: 1005px;
5821 width: 100%;
5822 }
5823
5824 .basalam-table-header {
5825 background-color: #f4f4f4;
5826 color: #333;
5827 }
5828
5829 .basalam-table-padding {
5830 border: 1px solid #ddd;
5831 }
5832
5833 .basalam-table-cell-center {
5834 text-align: center;
5835 }
5836
5837 /* Product image in table */
5838 .basalam-product-img-table {
5839 border-radius: 4px;
5840 width: 60px;
5841 height: 60px;
5842 object-fit: cover;
5843 }
5844
5845 /* Button inside table */
5846 .basalam-button-table {
5847 width: unset;
5848 margin: auto !important;
5849 height: 35px;
5850 }
5851
5852 /* Link inside button */
5853 .basalam-link-small {
5854 font-size: 10px;
5855 }
5856
5857 /* Checkbox styling */
5858 .basalam-checkbox-custom {
5859 accent-color: var(--basalam-primary-color);
5860 }
5861
5862 /* Tasks info styling */
5863 .basalam-tasks-info-container {
5864 margin-top: 10px;
5865 padding: 15px;
5866 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe266 100%);
5867 border-radius: 8px;
5868 border: 1px solid #ddd;
5869 }
5870
5871 .basalam-tasks-info-flex {
5872 display: flex;
5873 flex-direction: column;
5874 gap: 8px;
5875 }
5876
5877 .basalam-tasks-info-item {
5878 display: flex;
5879 align-items: center;
5880 gap: 10px;
5881 }
5882
5883 .basalam-tasks-info-label {
5884 color: #2d3748;
5885 font-size: 14px;
5886 }
5887
5888 .basalam-tasks-info-value-primary {
5889 color: #ff5c35;
5890 font-size: 16px;
5891 font-weight: bold;
5892 }
5893
5894 .basalam-tasks-info-value-success {
5895 color: #00a884;
5896 font-size: 16px;
5897 font-weight: bold;
5898 }
5899
5900 .basalam-tasks-info-value-muted {
5901 color: #718096;
5902 font-size: 12px;
5903 }
5904
5905 /* Input width with font size */
5906 .basalam-input-max-width-80 {
5907 max-width: 80% !important;
5908 font-size: 12px;
5909 }
5910
5911 /* Form display control */
5912 .basalam-form-group-full {
5913 grid-column: 1 / -1;
5914 }
5915
5916 /* Two column row - for 50/50 split */
5917 .basalam-form-row-two-col {
5918 grid-template-columns: 1fr 1fr;
5919 }
5920
5921 /* Checkbox label styling */
5922 .basalam-checkbox-label {
5923 width: 32%;
5924 text-align: right;
5925 margin-bottom: 10px;
5926 }
5927
5928 /* Min width utility */
5929 .basalam-min-width-0 {
5930 min-width: 0px;
5931 }
5932
5933 /* Margin top 8px utility */
5934 .basalam-margin-top-8 {
5935 margin-top: 8px;
5936 }
5937
5938 /* Font utilities */
5939 .basalam-font-bold {
5940 font-weight: bold;
5941 font-family: PelakFA !important;
5942 }
5943
5944 /* Flex column utility */
5945 .basalam-flex-col {
5946 flex-direction: column;
5947 }
5948
5949 /* Table row styling */
5950 .basalam-table-row {
5951 background-color: #fff;
5952 border-bottom: 1px solid #ddd;
5953 }
5954
5955 /* Margin bottom 15px utility */
5956 .basalam-margin-bottom-15 {
5957 margin-bottom: 15px !important;
5958 }
5959
5960 /* Order tracking box specific styles */
5961 .basalam-label-block {
5962 display: block;
5963 margin-bottom: 5px;
5964 font-size: 12px;
5965 text-align: justify;
5966 margin-bottom: 5px !important;
5967 }
5968
5969 .basalam-label-block-margin {
5970 display: block;
5971 margin-bottom: 5px;
5972 margin-top: 5px;
5973 font-size: 12px;
5974 text-align: justify;
5975 margin-bottom: 5px !important;
5976 margin-top: 5px !important;
5977 }
5978
5979 .basalam-input-full {
5980 width: -webkit-fill-available !important;
5981 }
5982
5983 .basalam-input-full-margin {
5984 width: -webkit-fill-available !important;
5985 margin-bottom: 15px !important;
5986 }
5987
5988 .basalam-textarea-full {
5989 width: -webkit-fill-available !important;
5990 margin: 10px 0;
5991 font-family: "PelakFA";
5992 }
5993
5994 .basalam-input-number {
5995 width: -webkit-fill-available !important;
5996 margin: 10px 0;
5997 font-family: "PelakFA";
5998 }
5999
6000 .basalam-select-full {
6001 width: 100%;
6002 margin: 10px 0;
6003 font-family: "PelakFA";
6004 }
6005
6006 .basalam-select-full-margin {
6007 width: 100%;
6008 margin: 10px 0;
6009 font-family: "PelakFA";
6010 }
6011
6012 .basalam-popup-modal {
6013 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
6014 display: none;
6015 position: fixed;
6016 top: 50%;
6017 left: 50%;
6018 transform: translate(-50%, -50%);
6019 background: white;
6020 padding: 20px;
6021 border: 1px solid #ccc;
6022 z-index: 1000;
6023 }
6024
6025 .basalam-popup-center-gap {
6026 align-items: center;
6027 display: flex;
6028 justify-content: center;
6029 gap: 10px;
6030 }
6031
6032 .basalam-img-15 {
6033 width: 15px;
6034 }
6035
6036 .basalam-button-full-primary {
6037 width: 100%;
6038 background: var(--basalam-primary-color);
6039 border: none;
6040 color: white;
6041 padding: 0px !important;
6042 cursor: pointer;
6043 }
6044
6045 .basalam-font-pelak-12 {
6046 font-family: "PelakFA";
6047 font-size: 12px;
6048 }
6049
6050 .basalam-mobile-fields {
6051 display: none;
6052 }
6053
6054 .basalam-mobile-fields.show {
6055 display: block;
6056 }
6057
6058 /* Inline styles moved from JavaScript files */
6059 .basalam-loading-text {
6060 color: white;
6061 }
6062
6063 .basalam-attributes-header {
6064 margin-bottom: 10px;
6065 font-weight: bold;
6066 }
6067
6068 .basalam-attributes-container {
6069 display: flex;
6070 flex-wrap: wrap;
6071 gap: 6px;
6072 }
6073
6074 .basalam-copy-attr {
6075 color: white;
6076 cursor: pointer;
6077 background-color: var(--basalam-primary-color);
6078 border: none;
6079 padding: 4px 10px;
6080 border-radius: 3px;
6081 margin: 2px;
6082 font-size: 10px;
6083 display: flex;
6084 align-items: center;
6085 }
6086
6087 .basalam-categories-header {
6088 margin-bottom: 10px;
6089 font-weight: bold;
6090 }
6091
6092 .basalam-categories-container {
6093 display: flex;
6094 flex-wrap: wrap;
6095 gap: 8px;
6096 }
6097
6098 .basalam-category-label {
6099 border: 1px solid #00000036;
6100 padding: 7px;
6101 border-radius: 6px;
6102 width: -webkit-fill-available;
6103 }
6104
6105 .basalam-category-option {
6106 accent-color: var(--basalam-primary-color);
6107 }
6108
6109 .basalam-delete-option-auto {
6110 width: auto;
6111 }
6112
6113 .basalam-flex-gap-10 {
6114 display: flex;
6115 gap: 10px;
6116 }
6117
6118 /* Product Actions Container */
6119 .basalam-product-actions {
6120 align-items: center;
6121 }
6122
6123 /* View Button */
6124 .basalam-view-btn {
6125 display: inline-flex;
6126 align-items: center;
6127 justify-content: center;
6128 width: 63px;
6129 height: 25px;
6130 background-color: var(--basalam-gray-200);
6131 color: var(--basalam-gray-700);
6132 border-radius: 2px;
6133 text-decoration: none;
6134 transition: all 0.2s ease;
6135 -webkit-border-radius: 2px;
6136 -moz-border-radius: 2px;
6137 -ms-border-radius: 2px;
6138 -o-border-radius: 2px;
6139 }
6140
6141 .basalam-view-btn:hover {
6142 background-color: var(--basalam-gray-300);
6143 color: var(--basalam-gray-800);
6144 transform: translateY(-1px);
6145 }
6146
6147 .basalam-view-btn svg {
6148 width: 18px;
6149 height: 18px;
6150 }
6151
6152 .basalam-order-complete-status {
6153 display: flex;
6154 gap: 5px;
6155 align-items: center;
6156 }
6157
6158 .basalam-status-message {
6159 text-align: right !important;
6160 margin: 0;
6161 }
6162
6163 /* Tickets */
6164 .ticket-header-data {
6165 display: flex;
6166 align-items: center;
6167 justify-self: center;
6168 flex-direction: column;
6169 }
6170
6171 .ticket-header-information {
6172 display: flex;
6173 align-items: center;
6174 flex-direction: column;
6175 gap: 16px;
6176 text-align: center;
6177 }
6178
6179 .ticket-header-data-heading {
6180 text-align: center !important;
6181 }
6182
6183 .ticket-list {
6184 display: flex;
6185 flex-direction: column;
6186 gap: 8px;
6187 margin-top: 8px;
6188 width: 100%;
6189 max-width: 1080px !important;
6190 }
6191
6192 .ticket-card {
6193 background: #ffffff;
6194 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
6195 border-radius: 16px;
6196 -webkit-border-radius: 16px;
6197 -moz-border-radius: 16px;
6198 -ms-border-radius: 16px;
6199 -o-border-radius: 16px;
6200 width: 100%;
6201
6202 display: grid;
6203 grid-template-columns: 1fr;
6204 gap: 8px;
6205 padding: 12px;
6206 }
6207
6208 .ticket-card__field {
6209 display: flex;
6210 align-items: flex-start;
6211 justify-content: flex-start;
6212 gap: 4px;
6213 }
6214
6215 .ticket-card__field-label {
6216 font-weight: 600;
6217 color: var(--basalam-gray-800);
6218 font-size: 12px;
6219 }
6220
6221 .ticket-card__field-value {
6222 color: var(--basalam-gray-700);
6223 font-weight: 500;
6224 font-size: 12px;
6225 }
6226
6227 .ticket-card__field-status {
6228 border-radius: 8px;
6229 -webkit-border-radius: 8px;
6230 -moz-border-radius: 8px;
6231 -ms-border-radius: 8px;
6232 -o-border-radius: 8px;
6233 padding: 4px;
6234 }
6235
6236 .ticket-card__field-status--pending {
6237 background-color: #fff7e7;
6238 }
6239
6240 .ticket-card__field-status--closed {
6241 background-color: #faeff1;
6242 }
6243
6244 .ticket-card__field-status--answered {
6245 background-color: #ebf3e6;
6246 }
6247
6248 .ticket-card__field-status--review {
6249 background-color: #eaf3fa;
6250 }
6251
6252 .ticket-card__actions {
6253 display: flex;
6254 align-items: center;
6255 justify-content: flex-end;
6256 width: 100%;
6257 }
6258
6259 @media (min-width: 768px) {
6260 .ticket-header-data {
6261 display: flex;
6262 align-items: center;
6263 flex-direction: row;
6264 justify-content: space-between;
6265 width: 100%;
6266 }
6267
6268 .ticket-header-information {
6269 flex-direction: row;
6270 }
6271
6272 .ticket-header-data-heading {
6273 text-align: justify !important;
6274 }
6275
6276 .ticket-list {
6277 gap: 12px;
6278 }
6279
6280 .ticket-card {
6281 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
6282 gap: 12px;
6283 padding: 16px;
6284 }
6285
6286 .ticket-card__field {
6287 align-items: center;
6288 }
6289
6290 .ticket-card__field-label {
6291 display: none;
6292 }
6293
6294 .ticket-card__field-value {
6295 font-size: 14px !important;
6296 }
6297
6298 .ticket-card__field-status {
6299 padding: 8px;
6300 }
6301 }
6302
6303 /* Ticket pagination */
6304 .pagination {
6305 display: flex;
6306 align-items: center;
6307 justify-content: center;
6308 width: 100%;
6309 gap: 8px;
6310 }
6311
6312 .pagination-link {
6313 background-color: var(--basalam-primary-color);
6314 padding: 8px;
6315 text-decoration: none;
6316 border-radius: 8px;
6317 color: #ffff;
6318 -webkit-border-radius: 8px;
6319 -moz-border-radius: 8px;
6320 -ms-border-radius: 8px;
6321 -o-border-radius: 8px;
6322 font-size: 14px;
6323 width: 25px !important;
6324 text-align: center;
6325 transition: all 0.2s;
6326 }
6327
6328 .pagination-link--active {
6329 background: var(--basalam-gray-800);
6330 color: #fff !important;
6331 border-color: var(--basalam-gray-800);
6332 font-weight: 600;
6333 cursor: default;
6334 pointer-events: none;
6335 }
6336
6337 .pagination-link:hover {
6338 transform: translateY(-1px);
6339 -webkit-transform: translateY(-1px);
6340 -moz-transform: translateY(-1px);
6341 -ms-transform: translateY(-1px);
6342 -o-transform: translateY(-1px);
6343 color: #ffffff;
6344 background-color: var(--basalam-primary-hover);
6345 border: none;
6346 }
6347
6348 /* Create Ticket */
6349 .create-ticket {
6350 background-color: #ffffff;
6351 padding: 24px;
6352 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
6353 border-radius: 16px;
6354 -webkit-border-radius: 16px;
6355 -moz-border-radius: 16px;
6356 -ms-border-radius: 16px;
6357 -o-border-radius: 16px;
6358 width: 100%;
6359
6360 max-width: 768px;
6361 }
6362
6363 .create-ticket__form-container {
6364 margin-top: 24px;
6365 }
6366
6367 .create-ticket__inputs {
6368 display: flex;
6369 flex-direction: column;
6370 align-items: center;
6371 gap: 12px;
6372 }
6373
6374 .create-ticket__control {
6375 width: 100%;
6376 margin-top: 20px;
6377 display: flex;
6378 flex-direction: column;
6379 align-items: flex-start;
6380 justify-content: center;
6381 }
6382
6383 .create-ticket__input {
6384 font-weight: 600;
6385 width: 100% !important;
6386 max-width: 100% !important;
6387 }
6388
6389 .create-ticket__label {
6390 color: var(--basalam-gray-800);
6391 margin-bottom: 4px !important;
6392 }
6393
6394 .create-ticket__textarea {
6395 min-height: 102px;
6396 }
6397
6398 .create-ticket__extra-info {
6399 width: 100%;
6400 }
6401
6402 .create-ticket__extra-info-title {
6403 color: var(--basalam-gray-800);
6404 font-weight: 600;
6405 margin: 20px 0 8px !important;
6406 }
6407
6408 .ticket-access-grid {
6409 display: grid;
6410 grid-template-columns: 1fr;
6411 gap: 12px;
6412 width: 100%;
6413 }
6414
6415 .ticket-access-card {
6416 border: 1px solid var(--basalam-gray-300, #e5e7eb);
6417 background: #fafafa;
6418 border-radius: 12px;
6419 padding: 12px;
6420 }
6421
6422 .ticket-access-card__title {
6423 font-weight: 700;
6424 margin: 0 0 10px !important;
6425 color: var(--basalam-gray-800);
6426 }
6427
6428 .ticket-access-card .create-ticket__control {
6429 margin-top: 10px;
6430 }
6431
6432 .ticket-access-card .create-ticket__control:first-of-type {
6433 margin-top: 0;
6434 }
6435
6436 .create-ticket__submit {
6437 margin-top: 16px;
6438 width: 100%;
6439 }
6440
6441 @media (min-width: 768px) {
6442 .ticket-access-grid {
6443 grid-template-columns: 1fr 1fr;
6444 }
6445
6446 .create-ticket__submit {
6447 width: 128px;
6448 }
6449 }
6450
6451 /* Ticket items */
6452
6453 .ticket-items__answer {
6454 max-width: 768px;
6455 width: 100%;
6456 padding: 12px;
6457 background-color: #ffffff;
6458 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
6459 border-radius: 16px;
6460 -webkit-border-radius: 16px;
6461 -moz-border-radius: 16px;
6462 -ms-border-radius: 16px;
6463 -o-border-radius: 16px;
6464 }
6465
6466 .ticket-items__answer-header {
6467 display: flex;
6468 align-items: center;
6469 justify-content: space-between;
6470 margin-bottom: 16px;
6471 }
6472
6473 .ticket-items__answer-control {
6474 width: 100%;
6475 margin-top: 20px;
6476 display: flex;
6477 flex-direction: column;
6478 align-items: flex-start;
6479 justify-content: center;
6480 }
6481
6482 .ticket-items__answer-actions {
6483 margin-top: 12px;
6484 }
6485
6486 .ticket-items__answer-control-label {
6487 font-weight: 600;
6488 color: var(--basalam-gray-800);
6489 margin-bottom: 4px !important;
6490 }
6491
6492 .ticket-items__answer-input {
6493 font-weight: 600;
6494 width: 100% !important;
6495 max-width: 100% !important;
6496 min-height: 104px;
6497 }
6498
6499 .ticket-items__answer-closed {
6500 display: flex;
6501 align-items: center;
6502 gap: 10px;
6503 padding: 12px;
6504 border-radius: 10px;
6505 border: 1px solid #f1d3c9;
6506 background: #fff6f3;
6507 }
6508
6509 .ticket-items__answer-closed-icon {
6510 display: inline-flex;
6511 align-items: center;
6512 justify-content: center;
6513 color: var(--basalam-primary-color);
6514 flex-shrink: 0;
6515 }
6516
6517 .ticket-items__answer-closed-text {
6518 margin: 0 !important;
6519 color: var(--basalam-gray-800);
6520 text-align: right !important;
6521 }
6522
6523 .ticket-items {
6524 display: flex;
6525 flex-direction: column-reverse;
6526 gap: 16px;
6527 margin: 36px 0;
6528 max-width: 768px;
6529 width: 100%;
6530 }
6531
6532 .ticket-items__item {
6533 padding: 12px;
6534 background-color: #ffffff;
6535 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
6536
6537 border-radius: 16px;
6538 -webkit-border-radius: 16px;
6539 -moz-border-radius: 16px;
6540 -ms-border-radius: 16px;
6541 -o-border-radius: 16px;
6542 }
6543
6544 .ticket-items__item--admin {
6545 background-color: #fff3ef;
6546 box-shadow: 0 2px 8px rgba(255, 93, 40, 0.2);
6547 }
6548
6549 .ticket-items__item-stats {
6550 display: flex;
6551 align-items: center;
6552 justify-content: space-between;
6553 }
6554
6555 .ticket-items__item-name {
6556 font-size: 14px !important;
6557 font-weight: 600;
6558 text-align: right;
6559 color: var(--basalam-gray-800);
6560 }
6561
6562 .ticket-items__item-date {
6563 font-size: 12px !important;
6564 color: var(--basalam-gray-600);
6565 }
6566
6567 .ticket-items__item-content-wrapper {
6568 margin-top: 8px;
6569 }
6570
6571 .ticket-items__item-content {
6572 text-align: right;
6573 overflow-wrap: anywhere;
6574 color: var(--basalam-gray-700);
6575 white-space: pre-line;
6576 }
6577
6578 .ticket-items__item-actions {
6579 margin-top: 8px;
6580 display: flex;
6581 align-items: center;
6582 justify-content: flex-end;
6583 padding: 0 8px;
6584 }
6585
6586 .ticket-items__answer-submit {
6587 font-weight: 600;
6588 }
6589
6590 /* Ticket File Upload */
6591 .ticket-file-upload {
6592 display: flex;
6593 flex-direction: column;
6594 gap: 6px;
6595 }
6596
6597 .ticket-file-upload__input {
6598 display: none;
6599 }
6600
6601 .ticket-file-upload__label {
6602 font-family: "PelakFA";
6603 display: inline-flex;
6604 align-items: center;
6605 gap: 8px;
6606 cursor: pointer;
6607 padding: 8px 14px;
6608 border: 1.5px dashed var(--basalam-gray-400, #ccc);
6609 border-radius: 8px;
6610 color: var(--basalam-gray-600, #666);
6611 font-size: 13px;
6612 width: fit-content;
6613 transition: border-color 0.2s, color 0.2s;
6614 }
6615
6616 .ticket-file-upload__label:hover {
6617 border-color: var(--basalam-primary, #f97316);
6618 color: var(--basalam-primary, #f97316);
6619 }
6620
6621 .ticket-file-upload__previews {
6622 display: flex;
6623 flex-wrap: wrap;
6624 gap: 8px;
6625 margin-top: 4px;
6626 }
6627
6628 .ticket-file-upload__preview-item {
6629 font-family: "PelakFA";
6630 display: flex;
6631 align-items: center;
6632 gap: 8px;
6633 padding: 6px 10px;
6634 border-radius: 8px;
6635 border: 1px solid var(--basalam-gray-300, #ddd);
6636 background: #fafafa;
6637 max-width: 260px;
6638 position: relative;
6639 }
6640
6641 .ticket-file-upload__preview-item--loading {
6642 opacity: 0.7;
6643 }
6644
6645 .ticket-file-upload__preview-item--done {
6646 border-color: #86efac;
6647 background: #f0fdf4;
6648 }
6649
6650 .ticket-file-upload__preview-item--error {
6651 border-color: #fca5a5;
6652 background: #fff1f2;
6653 }
6654
6655 .ticket-file-upload__preview-img {
6656 width: 40px;
6657 height: 40px;
6658 object-fit: cover;
6659 border-radius: 4px;
6660 flex-shrink: 0;
6661 }
6662
6663 .ticket-file-upload__preview-info {
6664 display: flex;
6665 flex-direction: column;
6666 gap: 2px;
6667 overflow: hidden;
6668 }
6669
6670 .ticket-file-upload__preview-name {
6671 font-size: 12px;
6672 color: var(--basalam-gray-700, #444);
6673 white-space: nowrap;
6674 overflow: hidden;
6675 text-overflow: ellipsis;
6676 max-width: 140px;
6677 }
6678
6679 .ticket-file-upload__preview-status {
6680 font-size: 11px;
6681 color: var(--basalam-gray-500, #888);
6682 }
6683
6684 .ticket-file-upload__preview-item--done .ticket-file-upload__preview-status {
6685 color: #16a34a;
6686 }
6687
6688 .ticket-file-upload__preview-item--error .ticket-file-upload__preview-status {
6689 color: #dc2626;
6690 }
6691
6692 .ticket-file-upload__preview-remove {
6693 background: none;
6694 border: none;
6695 cursor: pointer;
6696 font-size: 16px;
6697 line-height: 1;
6698 color: var(--basalam-gray-500, #888);
6699 padding: 0 2px;
6700 margin-right: auto;
6701 flex-shrink: 0;
6702 }
6703
6704 .ticket-file-upload__preview-remove:hover {
6705 color: #dc2626;
6706 }
6707
6708 /* Ticket item file attachments */
6709 .ticket-items__item-files {
6710 display: flex;
6711 flex-wrap: wrap;
6712 gap: 8px;
6713 margin-top: 10px;
6714 }
6715
6716 .ticket-items__item-file-link {
6717 display: block;
6718 border-radius: 8px;
6719 overflow: hidden;
6720 border: 1px solid var(--basalam-gray-300, #ddd);
6721 transition: opacity 0.2s;
6722 }
6723
6724 .ticket-items__item-file-link:hover {
6725 opacity: 0.85;
6726 }
6727
6728 .ticket-items__item-file-img {
6729 display: block;
6730 width: 100px;
6731 height: 100px;
6732 object-fit: cover;
6733 }
6734
6735 @media (min-width: 786px) {
6736 .ticket-items__answer {
6737 padding: 20px;
6738 }
6739
6740 .ticket-items__item {
6741 padding: 20px;
6742 }
6743
6744 .ticket-items__item-name {
6745 font-size: 16px !important;
6746 }
6747
6748 .ticket-items__item-content {
6749 font-size: 14px !important;
6750 }
6751 }
6752
6753 .basalam-error-message {
6754 background-color: #f8d7da;
6755 color: #721c24;
6756 padding: 15px;
6757 border-radius: 5px;
6758 margin: 20px auto;
6759 text-align: center;
6760 max-width: fit-content;
6761 display: block;
6762 }
6763
6764 .basalam-stars {
6765 direction: ltr;
6766 unicode-bidi: bidi-override;
6767 }
6768
6769 .basalam-star {
6770 font-size: 28px;
6771 cursor: pointer;
6772 color: #f5a623;
6773 transition: color 0.2s;
6774 }
6775
6776 .basalam-star:hover {
6777 transform: scale(1.1);
6778 }
6779
6780 /* ============================================================
6781 TAB NAVIGATION FOR SETTINGS MODAL
6782 ============================================================ */
6783
6784 /* Modal Title */
6785 .basalam-modal-title {
6786 text-align: center;
6787 margin-bottom: 20px;
6788 color: var(--basalam-gray-800);
6789 font-size: 18px;
6790 padding-top: 10px;
6791 }
6792
6793 /* Tabs Navigation Container */
6794 .basalam-tabs-nav {
6795 display: flex;
6796 justify-content: center;
6797 gap: 8px;
6798 margin-top: 15px;
6799 margin-bottom: 25px;
6800 padding: 0 10px;
6801 border-bottom: 2px solid var(--basalam-gray-200);
6802 flex-wrap: wrap;
6803 }
6804
6805 /* Individual Tab Button */
6806 .basalam-tab-btn {
6807 display: flex;
6808 align-items: center;
6809 gap: 8px;
6810 padding: 12px 20px;
6811 background: transparent;
6812 border: none;
6813 border-bottom: 3px solid transparent;
6814 color: var(--basalam-gray-600);
6815 font-family: "PelakFA", sans-serif;
6816 font-size: 14px;
6817 font-weight: 500;
6818 cursor: pointer;
6819 transition: all 0.3s ease;
6820 margin-bottom: -2px;
6821 }
6822
6823 .basalam-tab-btn:hover {
6824 color: var(--basalam-primary-color);
6825 background: rgba(255, 92, 53, 0.05);
6826 border-top-left-radius: 10px;
6827 border-top-right-radius: 10px;
6828 }
6829
6830 .basalam-tab-btn.active {
6831 color: var(--basalam-primary-color);
6832 border-bottom-color: var(--basalam-primary-color);
6833 font-weight: 600;
6834 }
6835
6836 .basalam-tab-btn .dashicons {
6837 font-size: 18px;
6838 width: 18px;
6839 height: 18px;
6840 }
6841
6842 /* Tab Content */
6843 .basalam-tab-content {
6844 display: none;
6845 animation: fadeIn 0.3s ease-in-out;
6846 }
6847
6848 .basalam-tab-content.active {
6849 display: block;
6850 }
6851
6852 /* Tab Header */
6853 .basalam-tab-header {
6854 font-family: "PelakFA";
6855 display: flex;
6856 align-items: center;
6857 gap: 10px;
6858 margin-bottom: 20px;
6859 padding: 10px 15px;
6860 background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
6861 border-radius: 8px;
6862 border-right: 4px solid var(--basalam-primary-color);
6863 }
6864
6865 .basalam-tabs-nav button {
6866 font-weight: bold !important;
6867 }
6868
6869 .basalam-tab-header .dashicons {
6870 font-size: 24px;
6871 width: 24px;
6872 height: 24px;
6873 color: var(--basalam-primary-color);
6874 }
6875
6876 .basalam-tab-header h4 {
6877 margin: 0;
6878 color: var(--basalam-gray-800);
6879 font-size: 16px;
6880 }
6881
6882 /* Custom Fields Box */
6883 .basalam-custom-fields-box {
6884 margin-top: 20px;
6885 padding: 15px;
6886 background: #f9f9f9;
6887 border-radius: 8px;
6888 border: 1px solid var(--basalam-gray-200);
6889 }
6890
6891 /* Submit Section */
6892 .basalam-submit-section {
6893 margin-top: 30px;
6894 padding: 14px 10px 8px;
6895 position: sticky;
6896 bottom: 0;
6897 z-index: 20;
6898 }
6899
6900 .basalam-submit-section-hidden {
6901 display: none;
6902 }
6903
6904 /* Animation */
6905 @keyframes fadeIn {
6906 from {
6907 opacity: 0;
6908 transform: translateY(10px);
6909 -webkit-transform: translateY(10px);
6910 -moz-transform: translateY(10px);
6911 -ms-transform: translateY(10px);
6912 -o-transform: translateY(10px);
6913 }
6914
6915 to {
6916 opacity: 1;
6917 transform: translateY(0);
6918 }
6919 }
6920
6921 /* Responsive Tabs */
6922 @media screen and (max-width: 768px) {
6923 .basalam-tabs-nav {
6924 gap: 4px;
6925 }
6926
6927 .basalam-tab-btn {
6928 padding: 10px 12px;
6929 font-size: 12px;
6930 }
6931
6932 .basalam-tab-btn .dashicons {
6933 font-size: 16px;
6934 width: 16px;
6935 height: 16px;
6936 }
6937
6938 .basalam-tab-header h4 {
6939 font-size: 14px;
6940 }
6941 }
6942
6943 @media screen and (max-width: 480px) {
6944 .basalam-tabs-nav {
6945 flex-direction: column;
6946 gap: 5px;
6947 border-bottom: none;
6948 }
6949
6950 .basalam-tab-btn {
6951 border-bottom: none;
6952 border-right: 3px solid transparent;
6953 justify-content: flex-start;
6954 margin-bottom: 0;
6955 }
6956
6957 .basalam-tab-btn.active {
6958 border-bottom: none;
6959 border-right-color: var(--basalam-primary-color);
6960 background: rgba(255, 92, 53, 0.05);
6961 }
6962 }
6963
6964 .sync-basalam-pointer {
6965 border-radius: 12px;
6966 overflow: visible;
6967 max-width: 360px;
6968 }
6969
6970 .sync-basalam-pointer .wp-pointer-content {
6971 direction: rtl;
6972 text-align: right;
6973 background: #fff;
6974 border-radius: 12px;
6975 padding: 14px 14px 10px;
6976 color: var(--basalam-gray-700);
6977 font-family: "PelakFA", IRANSans, Tahoma, sans-serif;
6978 }
6979
6980 .sync-basalam-pointer .wp-pointer-content h3 {
6981 margin: 0 0 8px;
6982 padding: 0;
6983 background: transparent;
6984 border: none;
6985 color: var(--basalam-gray-800);
6986 font-family: "Morabba", "PelakFA", sans-serif;
6987 font-size: 20px;
6988 line-height: 1.4;
6989 }
6990
6991 .sync-basalam-pointer .sync-basalam-pointer-text {
6992 margin: 0 0 8px;
6993 color: var(--basalam-gray-700);
6994 font-size: 13px;
6995 font-weight: 600;
6996 line-height: 1.85;
6997 }
6998
6999 .sync-basalam-pointer .sync-basalam-pointer-text:last-child {
7000 margin-bottom: 0;
7001 }
7002
7003 .sync-basalam-pointer .wp-pointer-buttons {
7004 display: flex;
7005 gap: 8px;
7006 margin: 0;
7007 padding: 12px 14px 14px;
7008 }
7009
7010 .sync-basalam-pointer-title::before {
7011 display: none !important;
7012 }
7013
7014 .rtl .sync-basalam-pointer .wp-pointer-buttons {
7015 flex-direction: row-reverse;
7016 }
7017
7018 .sync-basalam-pointer .wp-pointer-buttons .button {
7019 min-height: 34px;
7020 line-height: 32px;
7021 border-radius: 8px;
7022 padding: 0 14px;
7023 margin: 0;
7024 font-family: "PelakFA", IRANSans, Tahoma, sans-serif;
7025 font-size: 12px;
7026 font-weight: 700;
7027 box-shadow: none;
7028 text-shadow: none;
7029 }
7030
7031 .sync-basalam-pointer .wp-pointer-buttons .button-primary {
7032 background: var(--basalam-primary-color);
7033 border-color: var(--basalam-primary-color);
7034 color: #fff;
7035 }
7036
7037 .sync-basalam-pointer .wp-pointer-buttons .button-primary:hover,
7038 .sync-basalam-pointer .wp-pointer-buttons .button-primary:focus {
7039 background: var(--basalam-primary-hover);
7040 border-color: var(--basalam-primary-hover);
7041 color: #fff;
7042 }
7043
7044 .sync-basalam-pointer .wp-pointer-buttons .button-secondary {
7045 background: var(--basalam-gray-100);
7046 border-color: var(--basalam-gray-300);
7047 color: var(--basalam-gray-700);
7048 }
7049
7050 .sync-basalam-pointer .wp-pointer-buttons .button-secondary:hover,
7051 .sync-basalam-pointer .wp-pointer-buttons .button-secondary:focus {
7052 background: var(--basalam-gray-200);
7053 border-color: var(--basalam-gray-400);
7054 color: var(--basalam-gray-800);
7055 }
7056
7057 .sync-basalam-pointer.wp-pointer-right .wp-pointer-arrow {
7058 border-left-color: var(--basalam-gray-300);
7059 }
7060
7061 .sync-basalam-pointer.wp-pointer-right .wp-pointer-arrow-inner {
7062 border-left-color: #fff;
7063 }
7064
7065 .sync-basalam-pointer.wp-pointer-left .wp-pointer-arrow {
7066 border-right-color: var(--basalam-gray-300);
7067 }
7068
7069 .sync-basalam-pointer.wp-pointer-left .wp-pointer-arrow-inner {
7070 border-right-color: #fff;
7071 }
7072
7073 .sync-basalam-pointer.wp-pointer-top .wp-pointer-arrow {
7074 border-bottom-color: var(--basalam-gray-300);
7075 }
7076
7077 .sync-basalam-pointer.wp-pointer-top .wp-pointer-arrow-inner {
7078 border-bottom-color: #fff;
7079 }
7080
7081 .sync-basalam-pointer.wp-pointer-bottom .wp-pointer-arrow {
7082 border-top-color: var(--basalam-gray-300);
7083 }
7084
7085 .sync-basalam-pointer.wp-pointer-bottom .wp-pointer-arrow-inner {
7086 border-top-color: #fff;
7087 }
7088
7089 #bulk-edit .sync-basalam-bulk-edit {
7090 display: none;
7091 }
7092
7093 #bulk-edit.sync-basalam-bulk-mode .sync-basalam-bulk-edit {
7094 display: block;
7095 }
7096
7097 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col-left,
7098 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col-center,
7099 #bulk-edit.sync-basalam-bulk-mode .inline-edit-group,
7100 #bulk-edit.sync-basalam-bulk-mode .inline-edit-tags-wrap,
7101 #bulk-edit.sync-basalam-bulk-mode #woocommerce-fields-bulk,
7102 #bulk-edit.sync-basalam-bulk-mode fieldset.inline-edit-col-right:not(.sync-basalam-bulk-edit),
7103 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col h4:not(.sync-basalam-bulk-edit__title),
7104 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col>label:not(.sync-basalam-bulk-edit__field),
7105 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col .inline-edit-group,
7106 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col .cat-checklist,
7107 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col .input-text-wrap,
7108 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col .textarea-wrap,
7109 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col .inline-edit-date,
7110 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col .inline-edit-categories-label,
7111 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col .inline-edit-tax,
7112 #bulk-edit.sync-basalam-bulk-mode .inline-edit-save .inline-edit-group {
7113 display: none !important;
7114 }
7115
7116 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col-right {
7117 width: 100%;
7118 float: none;
7119 }
7120
7121 #bulk-edit.sync-basalam-bulk-mode .inline-edit-col-right .inline-edit-col {
7122 margin-right: 0;
7123 width: 100%;
7124 }
7125
7126 #bulk-edit.sync-basalam-bulk-mode td {
7127 padding: 16px 20px !important;
7128 }
7129
7130 #bulk-edit.sync-basalam-bulk-mode .inline-edit-wrapper {
7131 display: block;
7132 }
7133
7134 #bulk-edit.sync-basalam-bulk-mode .inline-edit-save {
7135 margin-top: 14px;
7136 }
7137
7138 #bulk-edit.sync-basalam-bulk-mode .submit {
7139 display: flex;
7140 align-items: center;
7141 gap: 8px;
7142 justify-content: flex-start;
7143 flex-direction: row-reverse;
7144 }
7145
7146 #bulk-edit.sync-basalam-bulk-mode .submit .button {
7147 font-family: "PelakFA", IRANSans, Tahoma, sans-serif;
7148 min-height: 40px;
7149 border-radius: 10px;
7150 padding: 0 16px;
7151 }
7152
7153 .sync-basalam-bulk-edit__header {
7154 margin-bottom: 14px;
7155 padding-bottom: 12px;
7156 border-bottom: 1px solid #ffe3d8;
7157 }
7158
7159 .sync-basalam-bulk-edit__title {
7160 text-align: right !important;
7161 font-size: 22px !important;
7162 }
7163
7164 .sync-basalam-bulk-edit__desc {
7165 text-align: right !important;
7166 margin-top: 6px !important;
7167 color: var(--basalam-gray-600);
7168 }
7169
7170 .sync-basalam-bulk-edit__field {
7171 float: none !important;
7172 display: block;
7173 width: 100%;
7174 margin: 0 0 14px !important;
7175 }
7176
7177 .sync-basalam-bulk-edit__field .title {
7178 display: block;
7179 float: none !important;
7180 width: 100% !important;
7181 margin-bottom: 8px;
7182 padding: 0 !important;
7183 text-align: right !important;
7184 }
7185
7186 .sync-basalam-bulk-edit__field .basalam-label-container {
7187 margin-bottom: 8px;
7188 }
7189
7190 .sync-basalam-bulk-edit__field .basalam-label {
7191 display: flex !important;
7192 width: 100%;
7193 }
7194
7195 .sync-basalam-bulk-edit__field .basalam-label-text {
7196 font-size: 12px;
7197 font-weight: 700;
7198 color: var(--basalam-gray-700);
7199 }
7200
7201 .sync-basalam-bulk-edit__field select,
7202 .sync-basalam-bulk-edit__field input {
7203 width: 100% !important;
7204 max-width: 100% !important;
7205 min-height: 42px;
7206 box-sizing: border-box;
7207 }
7208
7209 .sync-basalam-bulk-edit__fields {
7210 display: flex;
7211 align-items: stretch;
7212 gap: 12px;
7213 }
7214
7215 .sync-basalam-bulk-edit__section {
7216 flex: 1 1 0;
7217 min-width: 0;
7218 display: flex;
7219 flex-direction: column;
7220 justify-content: flex-start;
7221 }
7222
7223 .sync-basalam-bulk-edit__divider {
7224 width: 1px;
7225 min-width: 1px;
7226 align-self: stretch;
7227 background: #ffd9cc;
7228 border-radius: 999px;
7229 }
7230
7231 .sync-basalam-bulk-type-fields {
7232 display: none;
7233 flex-direction: row;
7234 flex-wrap: nowrap;
7235 justify-content: stretch;
7236 width: 100%;
7237 gap: 12px;
7238 margin-top: 10px;
7239 align-items: end;
7240 }
7241
7242 .sync-basalam-bulk-mode .sync-basalam-bulk-type-fields {
7243 display: flex;
7244 }
7245
7246 .sync-basalam-bulk-type-fields .sync-basalam-bulk-edit__field {
7247 flex: 1 1 0;
7248 min-width: 0;
7249 margin-bottom: 0 !important;
7250 }
7251
7252 .sync-basalam-bulk-increase-value {
7253 display: none;
7254 margin-top: 10px !important;
7255 }
7256
7257 .sync-basalam-bulk-increase-value .basalam-input-container {
7258 justify-content: stretch;
7259 width: 100%;
7260 }
7261
7262 .sync-basalam-bulk-increase-value .percentage-input {
7263 flex: 1 1 0;
7264 }
7265
7266 .sync-basalam-bulk-increase-value .percentage-unit {
7267 min-width: 42px;
7268 text-align: center !important;
7269 }
7270
7271 .sync-basalam-bulk-increase-value .basalam-flex-end-gap-4 {
7272 justify-content: flex-end;
7273 }
7274
7275 .sync-basalam-bulk-edit__panel .basalam-input,
7276 .sync-basalam-bulk-edit__panel .basalam-select,
7277 .sync-basalam-bulk-edit__panel .sync-basalam-bulk-select {
7278 width: 100% !important;
7279 max-width: 100% !important;
7280 height: 44px !important;
7281 min-height: 44px !important;
7282 padding: 10px 14px !important;
7283 border: 1px solid var(--basalam-gray-300) !important;
7284 border-radius: 10px !important;
7285 background: #fff !important;
7286 color: var(--basalam-gray-800) !important;
7287 font-family: "PelakFA", IRANSans, Tahoma, sans-serif !important;
7288 font-size: 13px !important;
7289 font-weight: 600 !important;
7290 line-height: 1.6 !important;
7291 box-shadow: none !important;
7292 }
7293
7294 .sync-basalam-bulk-edit__panel .basalam-input::placeholder {
7295 color: var(--basalam-gray-500);
7296 font-weight: 500;
7297 }
7298
7299 .sync-basalam-bulk-edit__panel .basalam-input:focus,
7300 .sync-basalam-bulk-edit__panel .basalam-select:focus,
7301 .sync-basalam-bulk-edit__panel .sync-basalam-bulk-select:focus {
7302 outline: none !important;
7303 border-color: var(--basalam-primary-color) !important;
7304 box-shadow: 0 0 0 3px rgba(255, 92, 53, 0.12) !important;
7305 }
7306
7307 .sync-basalam-bulk-edit__panel input[type="number"]::-webkit-outer-spin-button,
7308 .sync-basalam-bulk-edit__panel input[type="number"]::-webkit-inner-spin-button {
7309 margin: 0;
7310 }
7311
7312 @media screen and (max-width: 782px) {
7313 #bulk-edit.sync-basalam-bulk-mode td {
7314 padding: 12px !important;
7315 }
7316
7317 #bulk-edit.sync-basalam-bulk-mode .submit {
7318 justify-content: stretch;
7319 flex-wrap: wrap;
7320 }
7321
7322 #bulk-edit.sync-basalam-bulk-mode .submit .button {
7323 width: 100%;
7324 justify-content: center;
7325 }
7326
7327 .sync-basalam-bulk-type-fields {
7328 flex-direction: column;
7329 }
7330
7331 .sync-basalam-bulk-edit__fields {
7332 flex-direction: column;
7333 }
7334
7335 .sync-basalam-bulk-edit__divider {
7336 width: 100%;
7337 min-width: 100%;
7338 min-height: 1px;
7339 }
7340
7341 #sync_basalam_like_alert {
7342 display: flex;
7343 flex-wrap: wrap;
7344 align-items: center;
7345 gap: 10px;
7346 padding: 12px !important;
7347 }
7348
7349 #sync_basalam_like_alert .basalam-p {
7350 flex: 0 0 100%;
7351 width: 100%;
7352 text-align: right !important;
7353 font-size: 12px !important;
7354 line-height: 1.8;
7355 }
7356
7357 #sync_basalam_like_alert .button,
7358 #sync_basalam_like_alert .button-primary {
7359 flex: 1 1 0;
7360 min-width: 0;
7361 min-height: 38px;
7362 padding: 0 8px;
7363 margin: 0;
7364 text-align: center;
7365 white-space: nowrap;
7366 }
7367 }
7368
7369 body.sync-basalam-announcement-open {
7370 overflow: hidden;
7371 }
7372
7373 .sync-basalam-announcement-root {
7374 position: fixed;
7375 left: 24px;
7376 top: 45px;
7377 z-index: 100002;
7378 direction: rtl;
7379 font-family: "PelakFA";
7380 }
7381
7382 .sync-basalam-announcement-trigger {
7383 width: 52px;
7384 height: 52px;
7385 border: 1px solid rgba(255, 255, 255, 0.55);
7386 border-radius: 16px;
7387 background: linear-gradient(145deg,
7388 rgba(255, 255, 255, 0.86),
7389 rgba(247, 250, 252, 0.72));
7390 backdrop-filter: blur(12px);
7391 box-shadow: 0 10px 24px rgba(45, 55, 72, 0.16);
7392 color: var(--basalam-primary-color);
7393 cursor: pointer;
7394 display: flex;
7395 align-items: center;
7396 justify-content: center;
7397 position: relative;
7398 z-index: 3;
7399 transition: transform 0.25s ease, box-shadow 0.25s ease;
7400 }
7401
7402 .sync-basalam-announcement-trigger:hover {
7403 transform: translateY(-2px);
7404 box-shadow: 0 14px 30px rgba(45, 55, 72, 0.22);
7405 -webkit-transform: translateY(-2px);
7406 -moz-transform: translateY(-2px);
7407 -ms-transform: translateY(-2px);
7408 -o-transform: translateY(-2px);
7409 }
7410
7411 .sync-basalam-announcement-trigger .dashicons {
7412 font-size: 24px;
7413 width: 24px;
7414 height: 24px;
7415 }
7416
7417 .sync-basalam-announcement-counter {
7418 position: absolute;
7419 top: -6px;
7420 left: -6px;
7421 min-width: 22px;
7422 height: 22px;
7423 border-radius: 999px;
7424 padding: 0 5px;
7425 background: var(--basalam-danger-color);
7426 color: #fff;
7427 border: 2px solid #fff;
7428 display: inline-flex;
7429 align-items: center;
7430 justify-content: center;
7431 font-size: 11px;
7432 line-height: 1;
7433 font-weight: 700;
7434 }
7435
7436 .sync-basalam-announcement-counter-hidden {
7437 display: none;
7438 }
7439
7440 .sync-basalam-announcement-overlay {
7441 position: fixed;
7442 inset: 0;
7443 z-index: 1;
7444 opacity: 0;
7445 visibility: hidden;
7446 pointer-events: none;
7447 transition: opacity 0.25s ease, visibility 0.25s ease;
7448 }
7449
7450 .sync-basalam-announcement-panel {
7451 position: fixed;
7452 left: 16px;
7453 top: 56px;
7454 width: min(420px, calc(100vw - 32px));
7455 height: calc(100vh - 72px);
7456 border-radius: 24px;
7457 background: linear-gradient(165deg,
7458 rgba(255, 255, 255, 0.86),
7459 rgba(237, 242, 247, 0.68));
7460 border: 1px solid rgba(255, 255, 255, 0.72);
7461 box-shadow: 0 22px 45px rgba(45, 55, 72, 0.2);
7462 backdrop-filter: blur(16px);
7463 transform: translateX(calc(-100% - 20px));
7464 transition: transform 0.28s ease;
7465 display: flex;
7466 flex-direction: column;
7467 overflow: hidden;
7468 z-index: 2;
7469 }
7470
7471 .sync-basalam-announcement-root.is-open .sync-basalam-announcement-panel {
7472 transform: translateX(0);
7473 }
7474
7475 .sync-basalam-announcement-root.is-open .sync-basalam-announcement-trigger {
7476 display: none;
7477 }
7478
7479 .sync-basalam-announcement-root.is-open .sync-basalam-announcement-overlay {
7480 opacity: 1;
7481 visibility: visible;
7482 pointer-events: auto;
7483 }
7484
7485 .sync-basalam-announcement-header {
7486 display: flex;
7487 align-items: center;
7488 justify-content: space-between;
7489 padding: 18px 18px 14px;
7490 border-bottom: 1px solid rgba(255, 255, 255, 0.72);
7491 }
7492
7493 .sync-basalam-announcement-title {
7494 margin: 0;
7495 font-family: "Morabba", "PelakFA", sans-serif;
7496 color: var(--basalam-gray-800);
7497 font-size: 25px;
7498 line-height: 1.2;
7499 }
7500
7501 .sync-basalam-announcement-subtitle {
7502 margin: 4px 0 0;
7503 color: var(--basalam-gray-600);
7504 font-size: 12px;
7505 font-weight: 600;
7506 }
7507
7508 .sync-basalam-announcement-close {
7509 width: 36px;
7510 height: 36px;
7511 border-radius: 10px;
7512 border: 1px solid var(--basalam-gray-300);
7513 background: rgba(255, 255, 255, 0.72);
7514 color: var(--basalam-gray-700);
7515 display: inline-flex;
7516 align-items: center;
7517 justify-content: center;
7518 cursor: pointer;
7519 }
7520
7521 .sync-basalam-announcement-list {
7522 flex: 1;
7523 overflow-y: auto;
7524 padding: 16px;
7525 display: flex;
7526 flex-direction: column;
7527 gap: 12px;
7528 }
7529
7530 .sync-basalam-announcement-card {
7531 display: grid;
7532 align-items: center;
7533 grid-template-columns: 92px minmax(0, 1fr);
7534 gap: 10px;
7535 padding: 10px;
7536 border-radius: 16px;
7537 background: rgba(255, 255, 255, 0.72);
7538 border: 1px solid rgba(255, 255, 255, 0.8);
7539 box-shadow: 0 8px 24px rgba(45, 55, 72, 0.08);
7540 }
7541
7542 .sync-basalam-announcement-card.sync-basalam-announcement-card-no-image {
7543 grid-template-columns: 1fr;
7544 }
7545
7546 .sync-basalam-announcement-card.is-unread {
7547 border-color: rgba(255, 92, 53, 0.3);
7548 }
7549
7550 .sync-basalam-announcement-card.is-seen {
7551 opacity: 0.9;
7552 }
7553
7554 .sync-basalam-announcement-image-wrap {
7555 width: 100%;
7556 aspect-ratio: 1 / 1;
7557 border-radius: 12px;
7558 overflow: hidden;
7559 background: rgba(237, 242, 247, 0.7);
7560 display: flex;
7561 align-items: center;
7562 justify-content: center;
7563 }
7564
7565 .sync-basalam-announcement-image {
7566 width: 100%;
7567 height: 100%;
7568 object-fit: fill;
7569 }
7570
7571 .sync-basalam-announcement-content {
7572 display: flex;
7573 flex-direction: column;
7574 justify-content: space-between;
7575 gap: 8px;
7576 }
7577
7578 .sync-basalam-announcement-text {
7579 text-align: justify;
7580 overflow: hidden;
7581 text-overflow: ellipsis;
7582 margin: 0;
7583 color: var(--basalam-gray-700);
7584 font-size: 12px;
7585 font-weight: 700;
7586 line-height: 1.8;
7587 }
7588
7589 .sync-basalam-announcement-link {
7590 color: var(--basalam-primary-color);
7591 text-decoration: none;
7592 font-size: 12px;
7593 font-weight: 700;
7594 align-self: flex-start;
7595 cursor: pointer;
7596 transition: color 0.2s ease, text-decoration-color 0.2s ease;
7597 }
7598
7599 .sync-basalam-announcement-link:hover,
7600 .sync-basalam-announcement-link:focus {
7601 color: var(--basalam-primary-hover);
7602 text-decoration: underline;
7603 text-decoration-thickness: 1px;
7604 text-underline-offset: 3px;
7605 }
7606
7607 .sync-basalam-announcement-footer {
7608 border-top: 1px solid rgba(255, 255, 255, 0.8);
7609 padding: 12px 16px 16px;
7610 display: flex;
7611 align-items: center;
7612 justify-content: space-between;
7613 gap: 8px;
7614 }
7615
7616 .sync-basalam-announcement-nav {
7617 min-width: 74px;
7618 min-height: 34px;
7619 border-radius: 10px;
7620 border: 1px solid var(--basalam-gray-300);
7621 background: rgba(255, 255, 255, 0.75);
7622 color: var(--basalam-gray-700);
7623 font-size: 12px;
7624 font-weight: 700;
7625 cursor: pointer;
7626 }
7627
7628 .sync-basalam-announcement-nav:disabled {
7629 opacity: 0.5;
7630 cursor: not-allowed;
7631 }
7632
7633 .sync-basalam-announcement-page {
7634 color: var(--basalam-gray-700);
7635 font-size: 12px;
7636 font-weight: 700;
7637 }
7638
7639 @media screen and (max-width: 782px) {
7640 .sync-basalam-announcement-root {
7641 left: 12px;
7642 top: 96px;
7643 }
7644
7645 .sync-basalam-announcement-panel {
7646 left: 8px;
7647 top: 64px;
7648 width: calc(100vw - 16px);
7649 height: calc(100vh - 74px);
7650 border-radius: 18px;
7651 }
7652
7653 .sync-basalam-announcement-card {
7654 grid-template-columns: 1fr;
7655 }
7656
7657 .sync-basalam-announcement-image-wrap {
7658 display: none;
7659 }
7660 }
7661
7662
7663 .sync-basalam-bulk-edit__field .basalam-label {
7664 display: flex !important;
7665 }
7666
7667 #sync-basalam-bulk-toggle-percentage {
7668 width: 5px !important;
7669 max-width: 5px !important;
7670 min-height: 5px !important;
7671 }
7672 ._sync_basalam_increase_price_value_field{
7673 font-family: pelakFa;
7674 }
7675
7676 .basalam-increase-price-field {
7677 display: grid;
7678 grid-template-columns: minmax(150px, max-content) minmax(220px, 1fr);
7679 align-items: start;
7680 column-gap: 16px;
7681 row-gap: 8px;
7682 width: 100%;
7683 }
7684
7685 .basalam-increase-price-field__label-section {
7686 grid-column: 1;
7687 justify-self: end;
7688 }
7689
7690 .basalam-increase-price-field__header {
7691 display: flex;
7692 align-items: center;
7693 justify-content: flex-end;
7694 gap: 6px;
7695 width: 100%;
7696 }
7697
7698 .basalam-increase-price-field__header label {
7699 margin: 0 !important;
7700 text-align: right;
7701 }
7702
7703 .basalam-increase-price-field__control-section {
7704 grid-column: 2;
7705 display: flex;
7706 flex-direction: column;
7707 align-items: stretch;
7708 gap: 8px;
7709 min-width: 0;
7710 }
7711
7712 .basalam-increase-price-field__input-row {
7713 justify-content: stretch;
7714 width: 100%;
7715 direction: rtl;
7716 }
7717
7718 .basalam-increase-price-field__input-row .percentage-input {
7719 flex: 1 1 0;
7720 min-width: 0;
7721 }
7722
7723 .basalam-increase-price-field__input-row .percentage-unit {
7724 min-width: 48px;
7725 text-align: center !important;
7726 }
7727
7728 .basalam-increase-price-field__toggle-row {
7729 display: flex;
7730 align-items: center;
7731 gap: 4px;
7732 direction: ltr;
7733 width: fit-content;
7734 margin-top: 2px;
7735 align-self: center;
7736 }
7737
7738 .basalam-increase-price-field__toggle-row label {
7739 direction: rtl;
7740 }
7741
7742 @media screen and (max-width: 782px) {
7743 .basalam-increase-price-field {
7744 grid-template-columns: 1fr;
7745 }
7746
7747 .basalam-increase-price-field__label-section,
7748 .basalam-increase-price-field__control-section {
7749 grid-column: 1;
7750 }
7751
7752 .basalam-increase-price-field__label-section {
7753 justify-self: stretch;
7754 }
7755
7756 .basalam-increase-price-field__header {
7757 justify-content: flex-start;
7758 }
7759 }
7760