PluginProbe
ووسلام – همگام سازی ووکامرس و باسلام / 1.8.6
ووسلام – همگام سازی ووکامرس و باسلام v1.8.6
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.8.6, at assets/css/style.css

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