PluginProbe
Easy Hotel – Powerful Hotel Booking / 2.0.2
Easy Hotel – Powerful Hotel Booking v2.0.2
2.0.8 2.0.7 2.0.6 2.0.5 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.9.9 1.9.8 1.9.7 1.9.6 1.9.5 1.9.4 1.9.3 1.9.2 1.8.1 1.8.2 1.8.3 1.8.4 1.8.5 1.8.6 1.8.7 1.8.8 All 110 releases
easy-hotel / admin / assets / css / admin.scss

admin.scss in Easy Hotel – Powerful Hotel Booking 2.0.2, at admin/assets/css/admin.scss

1,655 lines 37.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root {
2 --eshb-primary-color: #ab8965;
3 --eshb-success-color: #1ec734;
4 --eshb-danger-color: #e41749;
5 --eshb-primary-color-rgb: 171, 137, 101;
6 --eshb-dark-color: #181818;
7 --eshb-white-color: #ffffff;
8 --eshb-border-color: #ab8965;
9 }
10
11 .eshb-text-danger {
12 color: var(--eshb-danger-color);
13 }
14
15 .eshb-text-success {
16 color: var(--eshb-success-color);
17 }
18
19 .eshb_accomodation_page_easy-hotel-settings {
20 .notice {
21 display: none !important;
22 }
23
24 .csf-theme-light .csf-container {
25 border: none !important;
26 border-radius: 8px;
27 -webkit-box-shadow: 0 4px 40px rgba(0, 0, 0, .05);
28 box-shadow: 0 4px 40px rgba(0, 0, 0, .05);
29 overflow: hidden;
30
31 .csf-header-left {
32 background: url(../img/fav.svg);
33 background-repeat: no-repeat;
34 padding-left: 40px;
35 padding-bottom: 10px;
36 }
37 }
38 }
39
40 .csf-field {
41
42 input,
43 select,
44 textarea {
45 border-color: #e1dede;
46 }
47 }
48
49 .csf-field.hidden-metabox {
50 display: none;
51 }
52
53 .csf-field.hide-add-new {
54
55 .csf-repeater-add {
56 display: none;
57 }
58
59 .csf-repeater-helper {
60 display: none;
61 }
62 }
63
64 .has-inline-repeater-fields .csf-repeater-content {
65 display: flex;
66 gap: 16px;
67
68 >.csf-field {
69 display: flex;
70 flex-direction: column;
71
72 @media only screen and (max-width: 1024px) {
73 display: block;
74 }
75
76 .csf-title {
77 width: auto;
78 }
79
80 .csf-fieldset {
81 width: auto;
82 }
83 }
84
85 @media only screen and (max-width: 1024px) {
86 display: block;
87 }
88 }
89
90 .csf-field-heading-sm {
91 font-size: 15px;
92 }
93
94 .eshb-admin-notice {
95 background-color: #fff3cd;
96 color: #856404;
97 border: 1px solid #ffeeba;
98 border-radius: 4px;
99 font-family: Arial, sans-serif;
100 margin-right: 20px;
101 padding: 10px;
102
103 &.eshb-admin-notice-large {
104 font-size: 20px;
105 padding: 40px;
106 margin-top: 20px;
107 }
108 }
109
110 .inline-group-fields .csf-repeater-wrapper .csf-repeater-item {
111 display: flex;
112
113 .csf-repeater-content {
114 display: flex;
115
116 .csf-field {
117 display: flex;
118 flex-direction: column;
119 }
120 }
121
122 .csf-repeater-content {
123 .csf-title {
124 width: 100%;
125 }
126 }
127
128 .csf-repeater-helper {
129 width: auto;
130 align-content: center;
131 }
132 }
133
134 .easy-hotel-plugin-settings.csf-theme-light {
135 .csf-container {
136 max-width: 1350px;
137 margin: 0 auto;
138 }
139
140 .csf-header-inner,
141 .csf-nav-inline {
142 border-color: #f1f1f1;
143
144 h1 {
145 color: #222;
146 font-weight: 600;
147 }
148 }
149
150 .csf-wrapper {
151 overflow: hidden;
152 }
153
154 .csf-nav-inline {
155 padding: 30px;
156 background: #fff;
157
158 ul {
159 li {
160 border-radius: 3px;
161 overflow: hidden;
162 margin-right: 10px;
163 margin-bottom: 10px;
164
165 a {
166 color: #222;
167 background-color: #eaeaea;
168 padding: 11px 30px;
169 border: none !important;
170
171 &:hover {
172 color: #fff;
173 background-color: #4360ef;
174 }
175 }
176
177 .csf-active {
178 color: #fff;
179 background-color: #4360ef;
180 }
181 }
182 }
183 }
184
185 .csf-buttons .button {
186 padding: 6px 30px;
187 border: none !important;
188
189 &.csf-top-save {
190 background: #4360ef;
191 }
192 }
193 }
194
195 .eshb-notice {
196 padding: 10px;
197
198 &.notice {
199 border-left-color: #576AE3 !important;
200 padding: 10px;
201 }
202
203 padding: 5px !important;
204 display: flex;
205 flex-direction: row;
206 justify-content: flex-start;
207 align-items: center;
208 }
209
210 .eshb-notice .notice-logo {
211 padding: .8rem;
212 max-width: 110px;
213 max-height: 110px;
214 }
215
216 .eshb-notice .notice-right-container {
217 margin: .7rem .8rem .8rem;
218 }
219
220 .eshb-notice-action-buttons {
221 margin-top: 5px;
222 }
223
224 .eshb-notice-button {
225 background-color: #576AE3;
226 color: #fff;
227 display: inline-block;
228 text-decoration: none;
229 font-size: 13px;
230 margin: 0;
231 padding: 6px 10px;
232 cursor: pointer;
233 border-width: 1px;
234 border-style: solid;
235 -webkit-appearance: none;
236 border-radius: 3px;
237 white-space: nowrap;
238 box-sizing: border-box;
239 }
240
241 .eshb-notice-button:hover {
242 color: #fff;
243 }
244
245 .eshb-notice-action-buttons {
246 display: flex;
247 align-items: center;
248 gap: 5px;
249 }
250
251 .eshb-notice-widget-inner .feature-image {
252 max-width: 100%;
253 }
254
255 .eshb-notice-widget-inner .eshb-notice-button {
256 background-color: transparent;
257 }
258
259 #eshb-notice-emicon_pro_plugin_notice .eshb-notice-action-buttons {
260 margin-top: 10px;
261 }
262
263 .eshb_easy_hotel_usage_callback {
264 border: 1px solid #ededed;
265 border-radius: 10px;
266 margin-bottom: 50px;
267 padding: 30px;
268 }
269
270 .eshb_easy_hotel_help_support_callback {
271 margin-bottom: 50px;
272
273 .help-col-container {
274 display: flex;
275 gap: 30px;
276
277 .help-col {
278 width: 44%;
279 border: 1px solid #ededed;
280 padding: 30px;
281 border-radius: 20px;
282 box-shadow: 2px 2px 30px #ededed;
283
284 @media only screen and (max-width: 1024px) {
285 width: 100%;
286 }
287 }
288 }
289
290 .eshb-youtube-playlist {
291 display: flex;
292 max-width: 100%;
293 flex-wrap: wrap;
294 gap: 20px;
295
296 .eshb-video-player {
297 flex: 2 1 590px;
298 min-width: 500px;
299
300 iframe {
301 width: 100%;
302 height: 450px;
303 border: none;
304 }
305 }
306
307 .eshb-playlist-sidebar {
308 flex: 1 1 300px;
309 min-width: 250px;
310 max-height: 450px;
311 overflow-y: auto;
312 background: #f9f9f9;
313 border: 1px solid #ddd;
314
315 h3 {
316 margin: 0;
317 padding: 10px;
318 background: #eee;
319 font-size: 16px;
320 font-weight: bold;
321 }
322
323 .eshb-playlist-item {
324 display: flex;
325 align-items: flex-start;
326 gap: 10px;
327 padding: 8px;
328 border: none;
329 background: white;
330 cursor: pointer;
331 box-shadow: 3px 3px 3px #77777729;
332 transition: background 0.2s ease;
333
334 &:hover {
335 background: #f0f0f0;
336 }
337
338 img {
339 width: 120px !important;
340 height: 68px;
341 object-fit: cover;
342 }
343
344 .eshb-video-title {
345 flex: 1;
346 font-size: 14px;
347 font-weight: 500;
348 }
349 }
350 }
351 }
352
353
354 }
355
356 .order-status {
357 display: inline-flex;
358 line-height: 2.5em;
359 color: #454545;
360 background: #e5e5e5;
361 border-radius: 4px;
362 border-bottom: 1px solid rgba(0, 0, 0, .05);
363 margin: -.25em 0;
364 cursor: inherit !important;
365 white-space: nowrap;
366 max-width: 100%;
367 text-transform: capitalize;
368
369 span {
370 margin: 0 1em;
371 overflow: hidden;
372 text-overflow: ellipsis
373 }
374
375 &.status-completed {
376 background: #2a962a;
377 color: white
378 }
379
380 &.status-on-hold {
381 background: #f8dda7;
382 color: #573b00
383 }
384
385 &.status-failed {
386 background: #eba3a3;
387 color: #570000
388 }
389
390 &.status-processing {
391 background: #c6e1c6;
392 color: #2c4700
393 }
394
395 &.status-trash {
396 background: #eba3a3;
397 color: #550202
398 }
399
400 &.status-deposit-payment {
401 background: wheat;
402 }
403 }
404
405 .eshb-themes-addons-row {
406 display: grid;
407 grid-template-columns: repeat(2, 1fr);
408 gap: 100px;
409 margin-right: 20px;
410
411 @media (max-width: 991px) {
412 display: block;
413 }
414
415 .eshb-addons-action-button {
416 display: inline-flex;
417 align-items: center;
418 gap: 5px;
419 margin-right: 10px;
420 border-radius: 4px;
421 font-size: 14px;
422 font-weight: 500;
423 line-height: 40px;
424 padding: 0 20px;
425 text-decoration: none;
426 border: none;
427 background: #0039b6;
428 color: #fff;
429
430 &.view-all-btn {
431 margin: auto;
432 display: block;
433 width: fit-content;
434 }
435
436 &.eshb-action-btn-primary {
437 background-color: rgba(62, 98, 245, .1);
438 color: #3e62f5;
439
440 &:hover {
441 color: #ff408c;
442 }
443 }
444
445 &.eshb-action-btn-secondary {
446 background-color: rgba(255, 64, 140, .1);
447 color: #ff408c;
448
449 &:hover {
450 color: #0066bf;
451 }
452 }
453 }
454
455 .eshb-pro-addons-card-group {
456 display: grid;
457 gap: 1em;
458 margin-bottom: 30px;
459
460 .eshb-pro-addons-card {
461 background-color: #fff;
462 margin: 0;
463 display: flex;
464 flex-direction: column;
465 justify-content: space-between;
466 box-shadow: 0 5px 5px rgba(173, 180, 210, 0.05);
467 border-radius: 5px;
468 padding: 0;
469 position: relative;
470 overflow: hidden;
471
472 span.eshb-pro-addons-base {
473 background: #f9f9f9;
474 display: block;
475 font-size: 11px;
476 position: absolute;
477 left: -20px;
478 top: 9px;
479 transform: rotate(-45deg);
480 width: 78px;
481
482 span {
483 width: auto;
484 display: block;
485 padding: 2px 10px;
486 color: #fff;
487 text-align: center;
488
489 &.eshb-pro-base {
490 background: #93003f;
491 }
492
493 &.eshb-free-base {
494 background: #f59e0b;
495 }
496 }
497 }
498
499 .eshb-pro-addons-body {
500 display: flex;
501 gap: 15px;
502 padding: 1.5em;
503
504 .eshb-pro-addons-thumbnail {
505 overflow: hidden;
506 width: 250px;
507 height: 150px;
508 display: block;
509 text-align: center;
510 border-radius: 4px;
511
512 img {
513 width: 100%;
514 height: 100%;
515 object-fit: cover;
516 }
517 }
518
519 .eshb-pro-addons-content {
520 width: calc(100% - 245px);
521 display: flex;
522 flex-direction: column;
523 justify-content: center;
524 }
525
526 .eshb-pro-addons-name {
527 margin: 0;
528 }
529 }
530
531 .eshb-pro-addons-action {
532 display: flex;
533 align-items: center;
534 }
535
536 }
537 }
538 }
539
540
541 #eshb-license-activator {
542 .form-group {
543 display: inline-flex;
544 position: relative;
545 align-items: center;
546
547 button,
548 input[name="licnese_key"]="licnese_key""] {
549 max-width: 255px;
550 width: 255px;
551 border: 1px solid #c4c4c4;
552 padding: 8px 20px;
553 }
554
555 button {
556 max-width: unset;
557 width: unset;
558 }
559
560 .ajax-loader {
561 display: none;
562 position: absolute;
563 right: -45px;
564
565 img {
566 height: 50px;
567 }
568 }
569 }
570 }
571
572 body.rtl {
573 .csf-content {
574 margin-right: 0;
575 }
576 }
577
578 .eshb-booking-info-calendar {
579 --eshb-calendar-ical-completed-color: #97dfd4b5;
580 --eshb-calendar-completed-color: #cef093;
581 --eshb-calendar-pending-color: #fed24d;
582 --eshb-calendar-blocked-color: #ffd0d0;
583
584 .eshb-calendar-filter {
585 padding: 15px;
586 margin-bottom: 20px;
587 background: #fff;
588 gap: 20px;
589 display: flex;
590 justify-content: space-between;
591 margin-right: 15px;
592 width: auto;
593 position: relative;
594
595 @media (max-width: 767px) {
596 flex-direction: column;
597 }
598
599 .eshb-calendar-filter-form {
600 gap: 20px;
601 display: flex;
602 align-items: center;
603 flex-wrap: wrap;
604
605 .eshb-calendar-filter-options {
606 display: flex;
607 gap: 20px;
608 align-items: center;
609 flex-wrap: wrap;
610
611 #eshb-calendar-filter-period-wrapper {
612 display: flex;
613 align-items: center;
614 gap: 5px;
615
616 @media (max-width: 767px) {
617 >span {
618 display: none;
619 }
620 }
621 }
622 }
623
624 .eshb-calendar-filter-actions {
625 .button:nth-child(1) {
626 margin-right: 5px;
627 }
628 }
629
630 @media (max-width: 767px) {}
631 }
632
633 .eshb-calendar-legends {
634 display: flex;
635 gap: 10px;
636
637 .legend-item {
638 display: flex;
639 flex-direction: column;
640 align-items: center;
641 padding: 0 5px;
642 font-size: 12px;
643
644 &::before {
645 position: relative;
646 display: inline-block;
647 width: 15px;
648 height: 15px;
649 margin-right: 2px;
650 top: 3px;
651 content: "";
652 margin-bottom: 5px;
653 }
654
655 &.ical-complete {
656 &::before {
657 background-color: var(--eshb-calendar-ical-completed-color);
658 }
659 }
660
661 &.complete {
662 &::before {
663 background-color: var(--eshb-calendar-completed-color);
664 }
665 }
666
667 &.pending {
668 &::before {
669 background-color: var(--eshb-calendar-pending-color);
670 }
671 }
672
673 &.blocked {
674 &::before {
675 background-color: var(--eshb-calendar-blocked-color);
676 }
677 }
678 }
679 }
680
681 }
682
683 .eshb-booking-info-calendar-tables {
684 display: flex;
685 margin-right: 15px;
686 width: auto;
687 position: relative;
688
689 .eshb-accomodations-dates-table-wrapper {
690 overflow-x: auto;
691 position: relative;
692 max-width: 100%;
693 scroll-behavior: smooth;
694 }
695
696 table {
697 background: #fff;
698 border-collapse: collapse;
699 width: 100%;
700 table-layout: fixed;
701
702 &.eshb-accomodations-rooms-table {
703 position: absolute;
704 height: calc(100% - 13px);
705 width: 160px;
706
707 @media (max-width: 767px) {
708 height: calc(100% + 3px);
709 }
710 }
711
712 // overflow-y: auto;
713 >thead tr,
714 >tfoot tr {
715 height: 77px;
716 max-height: 77px;
717
718 th {
719 min-width: 45px;
720 width: 45px;
721 }
722 }
723
724 tr {
725 height: 100%;
726 }
727
728 th,
729 td {
730 height: inherit;
731 min-width: 40px;
732 border-collapse: collapse;
733 border: 1px solid #e3e3e3;
734 }
735
736 th {
737 font-size: 12px;
738
739 }
740
741 td {
742 height: 45px;
743
744 a {
745 text-decoration: none;
746 }
747
748 .room-info {
749 padding: 4px 15px;
750 }
751
752 &.booking-info-col {
753 vertical-align: baseline;
754 }
755
756 &.booking-info-col[colspan="1"]="1""] {
757 max-width: 40px;
758 min-width: 40px;
759 }
760
761 .booking-info {
762 margin: 1px;
763 display: flex;
764 flex-direction: column;
765 align-items: center;
766 padding: 3px 5px;
767 font-size: 12px;
768
769 &.ical-status-completed {
770 background: var(--eshb-calendar-ical-completed-color);
771 }
772
773 &.status-completed {
774 background: var(--eshb-calendar-completed-color);
775 }
776
777 &.status-blocked {
778 background: var(--eshb-calendar-blocked-color);
779 }
780
781 &.status-pending {
782 background: var(--eshb-calendar-pending-color)
783 }
784 }
785
786 }
787
788 .left-heading {
789 position: sticky;
790 left: 0;
791 z-index: 3;
792 box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
793 /* optional for visual effect */
794 width: 160px;
795 background-color: #fff;
796
797 div {
798 display: block;
799 height: 100%;
800 position: absolute;
801 left: 50%;
802 top: 50%;
803 transform: translate(-50%, -50%);
804 width: 100%;
805 align-content: center;
806 border-right: 2px solid #e3e3e3;
807 }
808 }
809
810 .table-heading {
811 font-size: 15px;
812 }
813 }
814
815
816
817 }
818 }
819
820 #eshb-booking-info-modal {
821 position: fixed;
822 width: 100%;
823 height: 100%;
824 z-index: 99999999 !important; // Increased z-index
825 display: none;
826 opacity: 1;
827 pointer-events: auto !important; // Ensure modal is interactive
828 visibility: visible;
829
830 .booking-info-modal-bg-overlay {
831 position: fixed;
832 top: 0;
833 right: 0;
834 bottom: 0;
835 left: 0;
836 width: 100%;
837 height: 100%;
838 background: rgba(0, 0, 0, 0.7);
839 z-index: 99999998 !important; // Background overlay should be just below modal
840 }
841
842 .booking-info-modal-main {
843 position: fixed;
844 background: #fff;
845 z-index: 99999999 !important; // Modal must be on top
846 left: 50%;
847 top: 50%;
848 transform: translate(-50%, -50%);
849 max-width: 100%;
850 width: 750px;
851 box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3); // Add shadow for better visibility
852
853 @media (max-width: 767px) {
854 width: 100%;
855 }
856
857 .booking-info-modal-header {
858 display: block;
859 position: relative;
860 height: auto;
861 background: #fcfcfc;
862 padding: 1em 1.5em;
863 border-bottom: 1px solid #ddd;
864
865 h2 {
866 padding: 0 !important;
867 margin: 0 !important;
868 font-size: 18px !important;
869 font-weight: 700 !important;
870 line-height: 1.5em !important;
871 }
872
873 .booking-info-modal-close {
874 cursor: pointer;
875 color: #777;
876 height: 54px;
877 width: 54px;
878 padding: 0;
879 position: absolute;
880 top: 0;
881 right: 0;
882 text-align: center;
883 border: 0;
884 border-left: 1px solid #ddd;
885 background-color: transparent;
886 transition: color .1s ease-in-out, background .1s ease-in-out;
887 border-radius: 0;
888 z-index: 99999999 !important; // Ensure close button is above all
889
890 &::before {
891 font: normal 22px/50px dashicons !important;
892 color: #666;
893 display: block;
894 content: "\f335";
895 }
896 }
897 }
898
899 .booking-info-modal-content {
900 padding: 0.5em 1.5em 2em;
901 overflow: auto;
902 max-height: 85vh;
903 }
904 }
905 }
906
907 .csf-field-group .csf-cloneable-item {
908 display: block;
909
910 .csf-cloneable-content {
911 display: none;
912 }
913
914 .csf-cloneable-alert {
915 display: none;
916 }
917 }
918
919 .daterangepicker {
920 --eshb-booked-bg-color: #bebcbb;
921 --eshb-active-bg-color: var(--eshb-primary-color);
922 --eshb-inrange-bg-color: var(--eshb-dark-color);
923
924 --eshb-booked-color: var(--eshb-dark-color);
925 --eshb-active-color: var(--eshb-white-color);
926 --eshb-inrange-color: var(--eshb-white-color);
927
928 /* Bootstrap Table Styles */
929 &.dropdown-menu {
930 z-index: 10000;
931 }
932
933 .calendar-table {
934 border: none;
935 }
936
937 .daterangepicker_input {
938 display: none;
939 }
940
941 .range_inputs button {
942 padding: 5px 20px;
943 cursor: pointer;
944 width: auto;
945
946 &.applyBtn {
947 background-color: var(--eshb-primary-color);
948 border: 1px solid var(--eshb-primary-color);
949 color: var(--eshb-white-color);
950
951 &:hover {
952 background-color: transparent;
953 color: var(--eshb-text-color);
954 border: 1px solid var(--eshb-primary-color);
955 }
956 }
957
958 &.cancelBtn {
959 background-color: transparent;
960 color: var(--eshb-text-color);
961 border: 1px solid var(--eshb-primary-color);
962
963 &:hover {
964 color: var(--eshb-white-color);
965 background-color: var(--eshb-primary-color);
966 border: 1px solid var(--eshb-primary-color);
967 }
968 }
969 }
970
971 table {
972 width: 100%;
973 margin-bottom: 1rem;
974 color: var(--eshb-text-color);
975 border-collapse: collapse;
976 border: none !important;
977 }
978
979 table th,
980 table td {
981 vertical-align: top;
982 padding: 3px;
983 background: transparent;
984 border-radius: 0px !important;
985 }
986
987 th.next.available:before {
988 content: "\f345";
989 font-family: 'dashicons';
990 }
991
992 th.prev.available:before {
993 content: "\f341";
994 font-family: 'dashicons';
995 }
996
997 thead:first-child tr:first-child th {
998 border-block-start: unset;
999 }
1000
1001 table {
1002 tr {
1003 display: block;
1004 margin-top: 8px;
1005 }
1006 }
1007
1008 td {
1009 text-decoration: none !important;
1010
1011 &:hover {
1012 background-color: var(--eshb-active-bg-color) !important;
1013 color: var(--eshb-active-color) !important;
1014 }
1015
1016 // Booked date styling
1017 &.booked-date {
1018 color: var(--eshb-booked-color) !important;
1019 background-color: var(--eshb-booked-bg-color) !important;
1020
1021 &.active {
1022 color: var(--eshb-booked-color) !important;
1023 background-color: var(--eshb-booked-bg-color) !important;
1024 }
1025
1026 &:hover {
1027 background-color: transparent;
1028 }
1029
1030
1031 }
1032
1033 // Checked-in booked
1034 &.checked-in-date {
1035 background-image: linear-gradient(135deg, transparent 50%, var(--eshb-booked-bg-color) 50%);
1036 color: var(--eshb-booked-color) !important;
1037 font-style: italic;
1038
1039 &.active,
1040 &:hover {
1041 background-color: var(--eshb-active-bg-color) !important;
1042 background-image: linear-gradient(135deg, transparent 50%, var(--eshb-booked-bg-color) 50%);
1043 color: var(--eshb-active-color) !important;
1044 }
1045 }
1046
1047 // Checked-out date
1048 &.checked-out-date {
1049 background-image: linear-gradient(135deg, var(--eshb-booked-bg-color) 50%, transparent 50%);
1050 font-style: italic;
1051 }
1052
1053 // Holiday styling
1054 &.holiday-date {
1055 color: rgb(255, 0, 0) !important;
1056
1057 &:hover {
1058 background-color: transparent;
1059 }
1060 }
1061
1062 &.start-date.active {
1063 background-color: var(--eshb-active-bg-color) !important;
1064 color: var(--eshb-active-color) !important;
1065 }
1066
1067 &.end-date.active,
1068 &.end-date.active:hover {
1069 background-color: var(--eshb-active-bg-color) !important;
1070 color: var(--eshb-active-color) !important;
1071 }
1072
1073
1074
1075 // Date range
1076 &.in-range {
1077 background-color: var(--eshb-inrange-bg-color);
1078 color: var(--eshb-active-color) !important;
1079 }
1080 }
1081 }
1082
1083 body.post-type-eshb_booking,
1084 body.post-type-eshb_payment {
1085 #post-body-content {
1086 margin-bottom: 0 !important;
1087 }
1088
1089 .page-title-action {
1090 display: none;
1091 }
1092
1093 .eshb-page-title-action {
1094 margin-top: -5px;
1095 vertical-align: middle;
1096 }
1097
1098 &.eshb-has-manual-booking {
1099 .page-title-action {
1100 display: inline-block !important;
1101 }
1102 }
1103
1104 #major-publishing-actions {
1105 padding: 10px 9px;
1106 #delete-action {
1107 margin-right: 10px;
1108 }
1109
1110 #publishing-action {
1111 float: left;
1112
1113 .spinner {
1114 float: right;
1115 }
1116 }
1117 }
1118
1119 .eshb-error-message {
1120 display: none;
1121 padding: 0 10px;
1122 }
1123
1124 .input-error {
1125 border: 1px solid var(--eshb-danger-color);
1126 }
1127 }
1128
1129 .has-required-notice {
1130 opacity: 0.5;
1131 pointer-events: none;
1132 }
1133
1134 #eshb_booking_metaboxes {
1135 .err-msg {
1136 margin: 5px 10px 5px -12px;
1137 color: var(--eshb-danger-color);
1138 }
1139
1140 .csf-field-text input {
1141 max-width: 250px;
1142 }
1143
1144 .booking-requirement-input .csf-fieldset {
1145 .csf--wrap {
1146 margin-right: 5px;
1147 }
1148
1149 .capacity-status {
1150 margin-top: 5px;
1151 }
1152 }
1153
1154 .booking_metaboxes-pricing-calculation-fields {
1155 background: #f9f9f9;
1156 min-height: 140px;
1157
1158 .cost-calculator-wrapper {
1159 .total-cost-label {
1160 display: flex;
1161 justify-content: space-between;
1162
1163 .eshb-booking-value {
1164 display: inline;
1165 }
1166 }
1167
1168 .eshb-booking-total-discounted-pricing {
1169 display: none;
1170 border-top: 1px dashed;
1171 padding-top: 15px;
1172 }
1173
1174 &.has-discounted-price {
1175 .eshb-booking-total-pricing {
1176 font-size: 16px;
1177 }
1178
1179 .eshb-booking-total-discounted-pricing {
1180 display: flex;
1181 font-size: 26px;
1182 }
1183 }
1184 }
1185 }
1186
1187 .eshb-customer-details-input-group {
1188 margin-top: 50px;
1189 max-width: fit-content;
1190
1191 .eshb-booking-form-customer-details {
1192 background: #fff;
1193 padding: 15px;
1194 box-shadow: 5px 5px 5px 9px #ededed59;
1195 border-radius: 10px;
1196 }
1197
1198 .eshb-form-group {
1199 display: flex;
1200 gap: 20px;
1201
1202 input {
1203 margin-bottom: 15px;
1204 width: 250px;
1205 }
1206
1207 select {
1208 margin-bottom: 15px;
1209 width: 250px;
1210 }
1211
1212 textarea {
1213 width: 100%;
1214 height: 80px;
1215 }
1216 }
1217
1218 button#confirm-booking-admin {
1219 padding: 4px 18px;
1220 margin-top: 15px;
1221 font-size: 14px;
1222 }
1223 }
1224
1225 .time-slots-metabox {
1226 display: none;
1227 }
1228
1229 .time-slots-wrapper {
1230 display: none;
1231
1232 .field-label {
1233 display: none;
1234 text-align: center;
1235 }
1236
1237 .eshb-form-group {
1238 display: contents;
1239 }
1240
1241 &.has-time-slots {
1242 display: block;
1243
1244 .field-label {
1245 display: block;
1246 }
1247
1248 .empty-slot-msg {
1249 display: none;
1250 }
1251 }
1252
1253 .eshb-form-group {
1254 display: flex;
1255 flex-wrap: wrap;
1256 justify-content: center;
1257 flex-direction: column;
1258 align-items: center;
1259 }
1260
1261 .time-slots {
1262 width: 100%;
1263 display: flex;
1264 flex-direction: column;
1265 gap: 6px;
1266 }
1267
1268 .eshb-time-slot {
1269 display: flex !important;
1270 align-items: center;
1271 margin: 0;
1272
1273 .eshb-times {
1274 display: flex;
1275 align-items: center;
1276 gap: 10px;
1277
1278 input {
1279 text-align: center;
1280
1281 &::-webkit-calendar-picker-indicator {
1282
1283 filter: brightness(0) invert(1);
1284 cursor: pointer;
1285 //background: url(../img/clock-icon.svg);
1286
1287 }
1288 }
1289 }
1290 }
1291 }
1292 }
1293
1294 .eshb-deposit-requests-metaboxes-inner {
1295 display: flex;
1296 flex-direction: column;
1297 gap: 15px;
1298
1299 .eshb-deposit-requests-metabox-item {
1300 display: flex;
1301 align-items: center;
1302 gap: 5px;
1303
1304 p {
1305 margin: 0;
1306 }
1307
1308 &:nth-last-child(1) {
1309 border-top: 1px solid #ededed;
1310 padding-top: 15px;
1311 }
1312 }
1313
1314 .ajax-loader {
1315 position: absolute;
1316 left: 0;
1317 width: 100%;
1318 height: 100%;
1319 display: none;
1320 align-items: center;
1321 justify-content: center;
1322 background: #fffffff2;
1323
1324 img {
1325 height: 50px;
1326 }
1327 }
1328
1329 p.form-status {
1330 display: contents;
1331 margin-bottom: 9px;
1332 }
1333 }
1334
1335 .eshb-plugin-page {
1336 #titlediv #title {
1337 border-color: #d4d2d2;
1338 }
1339
1340 .postbox {
1341 box-shadow: 0 4px 40px rgba(0, 0, 0, 0.05);
1342 border-radius: 10px;
1343 overflow: hidden;
1344 border: none;
1345
1346 .eshb-admin-notice {
1347 margin: auto;
1348 }
1349 }
1350
1351 .wp-list-table {
1352 width: 100%;
1353 border-collapse: collapse;
1354 background: #fff;
1355 border-radius: 5px;
1356 overflow: hidden;
1357 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
1358
1359 thead {
1360 background: #f5f7fa;
1361
1362 th {
1363 padding: 12px 16px;
1364 font-weight: 600;
1365 font-size: 14px;
1366 text-align: left;
1367 color: #333;
1368 border-bottom: 2px solid #e1e5eb;
1369 }
1370 }
1371
1372 tbody {
1373 tr {
1374 transition: background 0.2s ease;
1375
1376 &:nth-child(even) {
1377 background: #fafafa;
1378 }
1379
1380 &:hover {
1381 background: #f0f4ff;
1382 }
1383
1384 td {
1385 padding: 12px 16px;
1386 font-size: 14px;
1387 color: #444;
1388 border-bottom: 1px solid #eaeaea;
1389
1390 &:first-child {
1391 font-weight: 500;
1392 color: #222;
1393 width: 30%;
1394 }
1395
1396 &:last-child {
1397 color: #555;
1398 }
1399 }
1400 }
1401 }
1402 }
1403 }
1404
1405 // help & supports
1406 .eshb_easy_hotel_help_support_callback .eshb-help-support {
1407 padding: 24px 0 0 0;
1408 }
1409
1410 .eshb_easy_hotel_help_support_callback .eshb-help-support h2 {
1411 font-size: 32px;
1412 line-height: normal;
1413 }
1414
1415 .eshb_easy_hotel_help_support_callback .help-col-container {
1416 display: flex;
1417 flex-wrap: wrap;
1418 gap: 22px;
1419 margin-bottom: 32px;
1420 }
1421
1422 .eshb_easy_hotel_help_support_callback .help-col {
1423 background-color: #fff;
1424 border: 1px solid transparent;
1425 border-radius: 8px;
1426 box-shadow: 0 2px 3px 0 hsla(0, 0%, 51%, .1);
1427 padding: 24px;
1428 }
1429
1430 .eshb_easy_hotel_help_support_callback .help-col h3 {
1431 margin-top: 0;
1432 margin-bottom: 16px;
1433 font-size: 20px;
1434 font-weight: 700;
1435 color: #111;
1436 letter-spacing: 0.01em;
1437 }
1438
1439 .eshb_easy_hotel_help_support_callback .help-col .fa-facebook,
1440 .eshb_easy_hotel_help_support_callback .help-col .fa-youtube,
1441 .eshb_easy_hotel_help_support_callback .help-col .fa-linkedin {
1442 padding: 3px 5px;
1443 font-size: 20px;
1444 margin-right: 4px;
1445 }
1446
1447 .eshb_easy_hotel_help_support_callback .help-col p,
1448 .eshb_easy_hotel_help_support_callback .help-col ul {
1449 margin-bottom: 0.7em;
1450 }
1451
1452 .eshb_easy_hotel_help_support_callback .help-col ul {
1453 padding-left: 18px;
1454 }
1455
1456 .eshb_easy_hotel_help_support_callback .help-col a {
1457 display: inline-block;
1458 background: linear-gradient(90deg, #ab8965 0%, #70533a 100%);
1459 text-decoration: none;
1460 font-weight: 600;
1461 padding: 10px 22px;
1462 border-radius: 6px;
1463 margin-top: 10px;
1464 box-shadow: 0 1px 4px rgba(171, 137, 101, 0.08);
1465 transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
1466 font-size: 1em;
1467 }
1468
1469 .eshb_easy_hotel_help_support_callback .help-col a:hover {
1470 background: linear-gradient(90deg, #70533a 0%, #ab8965 100%);
1471 box-shadow: 0 4px 16px rgba(171, 137, 101, 0.18);
1472 transform: translateY(-2px) scale(1.04);
1473 text-decoration: none;
1474 }
1475
1476 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist {
1477 display: flex;
1478 flex-wrap: wrap;
1479 gap: 24px;
1480 }
1481
1482 .eshb_easy_hotel_help_support_callback .eshb-video-player {
1483 flex: 2 1 320px;
1484 min-width: 320px;
1485
1486 @media only screen and (max-width: 1024px) {
1487 flex: 1 !important;
1488 }
1489 }
1490
1491 .eshb_easy_hotel_help_support_callback .eshb-video-player iframe {
1492 width: 100%;
1493 min-height: 220px;
1494 border-radius: 8px;
1495
1496 @media only screen and (max-width: 1024px) {
1497 min-height: 160px;
1498 width: auto !important;
1499 }
1500 }
1501
1502 .eshb_easy_hotel_help_support_callback .eshb-playlist-sidebar {
1503 flex: 1 1 180px;
1504 min-width: 180px;
1505
1506 @media only screen and (max-width: 1024px) {
1507 flex: 1 !important;
1508 width: 100% !important;
1509 }
1510 }
1511
1512 .eshb_easy_hotel_help_support_callback .eshb-playlist-item {
1513 background: #f8f6f3;
1514 border: none;
1515 border-radius: 8px;
1516 padding: 8px;
1517 cursor: pointer;
1518 display: flex;
1519 align-items: center;
1520 gap: 10px;
1521 transition: background 0.15s;
1522 }
1523
1524 .eshb_easy_hotel_help_support_callback .eshb-playlist-item:hover {
1525 background: #f0e8df;
1526 }
1527
1528 @media (max-width: 900px) {
1529 .eshb_easy_hotel_help_support_callback .help-col-container {
1530 grid-template-columns: 1fr;
1531 gap: 18px;
1532 }
1533
1534 .eshb_easy_hotel_help_support_callback .help-col {
1535 min-width: 0;
1536 }
1537
1538 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist {
1539 flex-direction: column;
1540 }
1541 }
1542
1543 .eshb_easy_hotel_help_support_callback .eshb-social-icons a {
1544 display: inline-block;
1545 padding: 4px 7px;
1546 border-radius: 5px;
1547 margin-right: 6px;
1548 background: #4360ee;
1549 transition: background 0.15s;
1550 font-size: 20px;
1551 line-height: 1;
1552 color: #fff !important;
1553 }
1554
1555 .eshb_easy_hotel_help_support_callback .eshb-social-icons a:hover {
1556 background: #e6e6e6;
1557 }
1558
1559 .eshb_easy_hotel_help_support_callback .help-col .btn-docs {
1560 background: #e8f0fe;
1561 color: #4360ee;
1562 font-weight: 600;
1563 }
1564
1565 .eshb_easy_hotel_help_support_callback .help-col .btn-docs:hover {
1566 background: #4360ee;
1567 color: #fff;
1568 }
1569
1570 .eshb_easy_hotel_help_support_callback .help-col .btn-support {
1571 background: #eafaf1;
1572 color: #00bfae;
1573 font-weight: 600;
1574 }
1575
1576 .eshb_easy_hotel_help_support_callback .help-col .btn-support:hover {
1577 background: #00bfae;
1578 color: #fff;
1579 }
1580
1581 .eshb_easy_hotel_help_support_callback .help-col .btn-community {
1582 background: #fff3e0;
1583 color: #ff9800;
1584 font-weight: 600;
1585 }
1586
1587 .eshb_easy_hotel_help_support_callback .help-col .btn-community:hover {
1588 background: #ff9800;
1589 color: #fff;
1590 }
1591
1592 /* Dashicon backgrounds for Help & Support boxes */
1593 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg {
1594 display: inline-flex;
1595 align-items: center;
1596 justify-content: center;
1597 width: 38px;
1598 height: 38px;
1599 border-radius: 50%;
1600 margin-right: 10px;
1601 font-size: 22px;
1602 background: #e8f0fe;
1603 color: #4360ee;
1604 box-shadow: 0 1px 4px rgba(171, 137, 101, 0.06);
1605 }
1606
1607 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.docs {
1608 background: #e8f0fe;
1609 color: #4360ee;
1610 }
1611
1612 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.support {
1613 background: #eafaf1;
1614 color: #00bfae;
1615 }
1616
1617 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.community {
1618 background: #fff3e0;
1619 color: #ff9800;
1620 }
1621
1622 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg .dashicons {
1623 font-size: 22px;
1624 width: 22px;
1625 height: 22px;
1626 line-height: 1;
1627 }
1628
1629 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.follow {
1630 background: #f3e8fd;
1631 color: #8e24aa;
1632 }
1633
1634 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.video {
1635 background: #fdeaea;
1636 color: #ff0000;
1637 }
1638
1639 .eshb_easy_hotel_help_support_callback .help-col-video {
1640 width: 100%;
1641 max-width: -webkit-fill-available;
1642 background: #fff;
1643 border-radius: 14px;
1644 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
1645 padding: 32px 28px 24px 28px;
1646 margin-top: 32px;
1647 margin-bottom: 0;
1648 border: 1px solid #f0f0f0;
1649 }
1650
1651 @media (max-width: 900px) {
1652 .eshb_easy_hotel_help_support_callback .help-col-video {
1653 padding: 22px 10px 18px 10px;
1654 }
1655 }