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

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

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