PluginProbe
Easy Hotel – Powerful Hotel Booking / 2.0.4
Easy Hotel – Powerful Hotel Booking v2.0.4
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.4, at admin/assets/css/admin.scss

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