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

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

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