PluginProbe
Easy Hotel – Powerful Hotel Booking / trunk
Easy Hotel – Powerful Hotel Booking vtrunk
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.css

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

2,450 lines 64.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 /* =========================================================================
3 Easy Hotel – Admin Dashboard
4 Scoped under .eshb-dashboard-wrap so nothing leaks to other admin pages.
5 ========================================================================= */
6 .eshb-dashboard-wrap {
7 --eshb-d-bg: #f4f5f8;
8 --eshb-d-card: #ffffff;
9 --eshb-d-navy1: #143055;
10 --eshb-d-navy2: #0b2138;
11 --eshb-d-blue: #3b62f6;
12 --eshb-d-blue-soft: #e7edff;
13 --eshb-d-text: #1f2a44;
14 --eshb-d-muted: #8a93a6;
15 --eshb-d-border: #eef0f4;
16 --eshb-d-green: #1faa5b;
17 --eshb-d-red: #e8536b;
18 --eshb-d-amber: #f0a020;
19 --eshb-d-radius: 14px;
20 --eshb-d-shadow: 0 6px 24px rgba(20, 33, 61, 0.06);
21 margin: 10px 20px 0 2px;
22 color: var(--eshb-d-text);
23 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
24 }
25 .eshb-dashboard-wrap * {
26 box-sizing: border-box;
27 }
28 .eshb-dashboard-wrap .eshb-dash-shell {
29 background: var(--eshb-d-bg);
30 border-radius: 16px;
31 overflow: hidden;
32 }
33 .eshb-dashboard-wrap {
34 /* ------------------------------------------------------------- content */
35 }
36 .eshb-dashboard-wrap .eshb-dash-content {
37 min-width: 0;
38 padding: 20px 24px 28px;
39 }
40 .eshb-dashboard-wrap {
41 /* --------------------------------------------------------------- stats */
42 }
43 .eshb-dashboard-wrap .eshb-dash-stats {
44 display: grid;
45 grid-template-columns: repeat(5, 1fr);
46 gap: 18px;
47 margin-bottom: 22px;
48 }
49 .eshb-dashboard-wrap .eshb-dash-stat-card {
50 background: var(--eshb-d-card);
51 border-radius: var(--eshb-d-radius);
52 box-shadow: var(--eshb-d-shadow);
53 padding: 18px;
54 display: flex;
55 gap: 14px;
56 align-items: flex-start;
57 }
58 .eshb-dashboard-wrap .eshb-dash-stat-icon {
59 flex: 0 0 46px;
60 width: 46px;
61 height: 46px;
62 border-radius: 12px;
63 display: inline-flex;
64 align-items: center;
65 justify-content: center;
66 }
67 .eshb-dashboard-wrap .eshb-dash-stat-icon .dashicons {
68 font-size: 22px;
69 width: 22px;
70 height: 22px;
71 }
72 .eshb-dashboard-wrap .eshb-dash-stat-icon.accent-blue {
73 background: #e7edff;
74 color: #3b62f6;
75 }
76 .eshb-dashboard-wrap .eshb-dash-stat-icon.accent-orange {
77 background: #fff0db;
78 color: #f0a020;
79 }
80 .eshb-dashboard-wrap .eshb-dash-stat-icon.accent-green {
81 background: #def2e4;
82 color: #1faa5b;
83 }
84 .eshb-dashboard-wrap .eshb-dash-stat-icon.accent-purple {
85 background: #efe8fd;
86 color: #7b5cf0;
87 }
88 .eshb-dashboard-wrap .eshb-dash-stat-icon.accent-teal {
89 background: #e2eefc;
90 color: #3a93e0;
91 }
92 .eshb-dashboard-wrap .eshb-dash-stat-icon.accent-red {
93 background: #fde7ea;
94 color: #e8536b;
95 }
96 .eshb-dashboard-wrap .eshb-dash-stat-icon.accent-gray {
97 background: #eef0f4;
98 color: #6b7385;
99 }
100 .eshb-dashboard-wrap .eshb-dash-stat-body {
101 display: flex;
102 flex-direction: column;
103 gap: 2px;
104 min-width: 0;
105 }
106 .eshb-dashboard-wrap .eshb-dash-stat-label {
107 font-size: 13px;
108 color: var(--eshb-d-muted);
109 }
110 .eshb-dashboard-wrap .eshb-dash-stat-value {
111 font-size: 26px;
112 font-weight: 700;
113 color: var(--eshb-d-text);
114 line-height: 1.2;
115 }
116 .eshb-dashboard-wrap .eshb-dash-stat-delta {
117 display: inline-flex;
118 align-items: center;
119 gap: 2px;
120 font-size: 12px;
121 font-weight: 500;
122 min-height: 16px;
123 }
124 .eshb-dashboard-wrap .eshb-dash-stat-delta .dashicons {
125 font-size: 14px;
126 width: 14px;
127 height: 14px;
128 }
129 .eshb-dashboard-wrap .eshb-dash-stat-delta.is-up {
130 color: var(--eshb-d-green);
131 }
132 .eshb-dashboard-wrap .eshb-dash-stat-delta.is-down {
133 color: var(--eshb-d-red);
134 }
135 .eshb-dashboard-wrap .eshb-dash-stat-delta.is-muted {
136 color: var(--eshb-d-muted);
137 }
138 .eshb-dashboard-wrap {
139 /* ---------------------------------------------------------------- grid */
140 }
141 .eshb-dashboard-wrap .eshb-dash-grid {
142 display: grid;
143 grid-template-columns: repeat(12, 1fr);
144 gap: 18px;
145 align-items: stretch;
146 grid-template-areas: "cal cal cal cal cal qa qa qa tr tr tr tr" "rb rb rb rb rb rb rb rb st st st st" "ar ar ar ar ar ar dp dp dp dp dp dp" "av av av av av av av av av av av av";
147 }
148 .eshb-dashboard-wrap .eshb-card-calendar {
149 grid-area: cal;
150 }
151 .eshb-dashboard-wrap .eshb-card-actions {
152 grid-area: qa;
153 }
154 .eshb-dashboard-wrap .eshb-card-trend {
155 grid-area: tr;
156 }
157 .eshb-dashboard-wrap .eshb-card-recent {
158 grid-area: rb;
159 }
160 .eshb-dashboard-wrap .eshb-dash-card-stack {
161 grid-area: st;
162 display: flex;
163 flex-direction: column;
164 gap: 18px;
165 }
166 .eshb-dashboard-wrap {
167 /* Cards stretch to fill their grid cell; content grows to fill the card
168 so no blank white space is left at the bottom. */
169 }
170 .eshb-dashboard-wrap .eshb-dash-card {
171 background: var(--eshb-d-card);
172 border-radius: var(--eshb-d-radius);
173 box-shadow: var(--eshb-d-shadow);
174 padding: 20px;
175 display: flex;
176 flex-direction: column;
177 }
178 .eshb-dashboard-wrap .eshb-dash-card-head {
179 display: flex;
180 align-items: center;
181 justify-content: space-between;
182 margin-bottom: 16px;
183 }
184 .eshb-dashboard-wrap .eshb-dash-card-head h3 {
185 margin: 0;
186 font-size: 16px;
187 font-weight: 600;
188 color: var(--eshb-d-text);
189 }
190 .eshb-dashboard-wrap .eshb-dash-card-head h3 small {
191 font-weight: 400;
192 font-size: 13px;
193 color: var(--eshb-d-muted);
194 }
195 .eshb-dashboard-wrap .eshb-dash-link {
196 font-size: 13px;
197 color: var(--eshb-d-blue);
198 text-decoration: none;
199 font-weight: 500;
200 }
201 .eshb-dashboard-wrap .eshb-dash-link:hover {
202 text-decoration: underline;
203 }
204 .eshb-dashboard-wrap .eshb-dash-dropdown {
205 position: relative;
206 }
207 .eshb-dashboard-wrap .eshb-dash-pill {
208 display: inline-flex;
209 align-items: center;
210 gap: 4px;
211 font-size: 12px;
212 color: #5b6577;
213 background: #fff;
214 border: 1px solid var(--eshb-d-border);
215 border-radius: 8px;
216 padding: 6px 10px;
217 cursor: pointer;
218 line-height: 1.4;
219 transition: border-color 0.15s ease, background 0.15s ease;
220 }
221 .eshb-dashboard-wrap .eshb-dash-pill:hover {
222 border-color: #d6dcef;
223 }
224 .eshb-dashboard-wrap .eshb-dash-pill .dashicons {
225 font-size: 14px;
226 width: 14px;
227 height: 14px;
228 transition: transform 0.15s ease;
229 }
230 .eshb-dashboard-wrap .eshb-dash-dropdown-menu {
231 position: absolute;
232 top: calc(100% + 6px);
233 right: 0;
234 min-width: 130px;
235 margin: 0;
236 padding: 6px;
237 list-style: none;
238 background: #fff;
239 border: 1px solid var(--eshb-d-border);
240 border-radius: 10px;
241 box-shadow: 0 10px 30px rgba(20, 33, 61, 0.12);
242 opacity: 0;
243 visibility: hidden;
244 transform: translateY(-4px);
245 transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
246 z-index: 20;
247 }
248 .eshb-dashboard-wrap .eshb-dash-dropdown-menu li {
249 margin: 0;
250 }
251 .eshb-dashboard-wrap .eshb-dash-dropdown-menu button {
252 display: block;
253 width: 100%;
254 text-align: left;
255 border: none;
256 background: transparent;
257 color: #4a5468;
258 font-size: 13px;
259 padding: 8px 12px;
260 border-radius: 7px;
261 cursor: pointer;
262 }
263 .eshb-dashboard-wrap .eshb-dash-dropdown-menu button:hover {
264 background: var(--eshb-d-bg);
265 }
266 .eshb-dashboard-wrap .eshb-dash-dropdown-menu button.is-active {
267 background: var(--eshb-d-blue-soft);
268 color: var(--eshb-d-blue);
269 font-weight: 600;
270 }
271 .eshb-dashboard-wrap .eshb-dash-dropdown.is-open .eshb-dash-dropdown-menu {
272 opacity: 1;
273 visibility: visible;
274 transform: translateY(0);
275 }
276 .eshb-dashboard-wrap .eshb-dash-dropdown.is-open .eshb-dash-pill .dashicons {
277 transform: rotate(180deg);
278 }
279 .eshb-dashboard-wrap {
280 /* ------------------------------------------------------------ calendar */
281 }
282 .eshb-dashboard-wrap .eshb-dash-cal-legend {
283 display: flex;
284 gap: 14px;
285 }
286 .eshb-dashboard-wrap .eshb-dash-cal-legend .legend {
287 display: inline-flex;
288 align-items: center;
289 gap: 6px;
290 font-size: 12px;
291 color: #5b6577;
292 }
293 .eshb-dashboard-wrap .eshb-dash-cal-legend .legend::before {
294 content: "";
295 width: 11px;
296 height: 11px;
297 border-radius: 3px;
298 display: inline-block;
299 }
300 .eshb-dashboard-wrap .eshb-dash-cal-legend .legend.booked::before {
301 background: #5ec27e;
302 }
303 .eshb-dashboard-wrap .eshb-dash-cal-legend .legend.available::before {
304 background: #e3e7ee;
305 }
306 .eshb-dashboard-wrap .eshb-dash-cal-legend .legend.blocked::before {
307 background: #ef8b8b;
308 }
309 .eshb-dashboard-wrap .eshb-dash-cal-nav {
310 display: flex;
311 align-items: center;
312 justify-content: center;
313 gap: 18px;
314 margin-bottom: 8px;
315 }
316 .eshb-dashboard-wrap .eshb-dash-cal-nav .eshb-cal-title {
317 font-size: 15px;
318 font-weight: 600;
319 }
320 .eshb-dashboard-wrap .eshb-dash-cal-nav button {
321 border: none;
322 background: transparent;
323 cursor: pointer;
324 color: #6b7385;
325 padding: 4px;
326 border-radius: 6px;
327 line-height: 0;
328 }
329 .eshb-dashboard-wrap .eshb-dash-cal-nav button:hover {
330 background: var(--eshb-d-bg);
331 }
332 .eshb-dashboard-wrap .eshb-dash-cal-nav button .dashicons, .eshb-dashboard-wrap .eshb-dash-cal-nav button.dashicons {
333 font-size: 18px;
334 }
335 .eshb-dashboard-wrap .eshb-dash-calendar {
336 flex: 1 1 auto;
337 display: flex;
338 flex-direction: column;
339 }
340 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-row {
341 display: grid;
342 grid-template-columns: repeat(7, 1fr);
343 }
344 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-row:not(.eshb-cal-head) {
345 flex: 1 1 auto;
346 }
347 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-head .eshb-cal-cell {
348 font-size: 12px;
349 color: var(--eshb-d-muted);
350 font-weight: 500;
351 padding: 6px 0;
352 text-align: center;
353 min-height: auto;
354 }
355 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-cell {
356 min-height: 40px;
357 display: flex;
358 align-items: center;
359 justify-content: center;
360 border: 1px solid #f1f3f7;
361 margin: -0.5px;
362 font-size: 13px;
363 position: relative;
364 }
365 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-cell.is-muted {
366 color: #c4cad6;
367 background: #fcfcfd;
368 }
369 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-cell.is-day .eshb-cal-num {
370 width: 30px;
371 height: 30px;
372 display: inline-flex;
373 align-items: center;
374 justify-content: center;
375 border-radius: 8px;
376 }
377 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-cell.is-booked {
378 background: #def2e4;
379 }
380 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-cell.is-booked .eshb-cal-num {
381 color: #1f8a4c;
382 font-weight: 600;
383 }
384 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-cell.is-blocked {
385 background: #fde2e2;
386 }
387 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-cell.is-blocked .eshb-cal-num {
388 color: #d65656;
389 font-weight: 600;
390 }
391 .eshb-dashboard-wrap .eshb-dash-calendar .eshb-cal-cell.is-today .eshb-cal-num {
392 background: var(--eshb-d-blue);
393 color: #fff;
394 font-weight: 600;
395 }
396 .eshb-dashboard-wrap {
397 /* ------------------------------------------------------- quick actions */
398 }
399 .eshb-dashboard-wrap .eshb-dash-actions {
400 display: flex;
401 flex-direction: column;
402 justify-content: space-between;
403 gap: 7px;
404 flex: 1 1 auto;
405 }
406 .eshb-dashboard-wrap .eshb-dash-action {
407 display: flex;
408 align-items: center;
409 gap: 12px;
410 padding: 8px 10px;
411 border: 1px solid var(--eshb-d-border);
412 border-radius: 10px;
413 text-decoration: none;
414 color: var(--eshb-d-text);
415 transition: border-color 0.15s ease, box-shadow 0.15s ease;
416 }
417 .eshb-dashboard-wrap .eshb-dash-action:hover {
418 border-color: #d6dcef;
419 box-shadow: 0 4px 12px rgba(20, 33, 61, 0.05);
420 }
421 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-icon {
422 flex: 0 0 30px;
423 width: 30px;
424 height: 30px;
425 border-radius: 9px;
426 display: inline-flex;
427 align-items: center;
428 justify-content: center;
429 font-size: 18px;
430 }
431 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-icon.accent-blue {
432 background: #e7edff;
433 color: #3b62f6;
434 }
435 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-icon.accent-green {
436 background: #def2e4;
437 color: #1faa5b;
438 }
439 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-icon.accent-purple {
440 background: #efe8fd;
441 color: #7b5cf0;
442 }
443 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-icon.accent-orange {
444 background: #fff0db;
445 color: #f0a020;
446 }
447 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-icon.accent-red {
448 background: #fde7ea;
449 color: #e8536b;
450 }
451 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-icon.accent-teal {
452 background: #e2eefc;
453 color: #3a93e0;
454 }
455 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-icon.accent-gray {
456 background: #eef0f4;
457 color: #6b7385;
458 }
459 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-label {
460 flex: 1 1 auto;
461 font-size: 14px;
462 font-weight: 500;
463 }
464 .eshb-dashboard-wrap .eshb-dash-action .eshb-dash-action-arrow {
465 color: #b6bdca;
466 font-size: 16px;
467 }
468 .eshb-dashboard-wrap {
469 /* --------------------------------------------------------------- trend */
470 }
471 .eshb-dashboard-wrap .eshb-dash-trend {
472 width: 100%;
473 flex: 1 1 auto;
474 display: flex;
475 min-height: 220px;
476 }
477 .eshb-dashboard-wrap .eshb-dash-trend .eshb-trend-svg {
478 width: 100%;
479 height: 100%;
480 min-height: 220px;
481 display: block;
482 }
483 .eshb-dashboard-wrap .eshb-dash-trend .eshb-trend-grid {
484 stroke: #eef1f6;
485 stroke-width: 1;
486 }
487 .eshb-dashboard-wrap .eshb-dash-trend .eshb-trend-axis {
488 fill: #9aa3b4;
489 font-size: 10px;
490 }
491 .eshb-dashboard-wrap .eshb-dash-trend .eshb-trend-line {
492 stroke: #3b62f6;
493 stroke-width: 2.5;
494 stroke-linejoin: round;
495 stroke-linecap: round;
496 }
497 .eshb-dashboard-wrap {
498 /* ------------------------------------------------------------- recent */
499 }
500 .eshb-dashboard-wrap .eshb-dash-table-wrap {
501 overflow-x: auto;
502 flex: 1 1 auto;
503 }
504 .eshb-dashboard-wrap .eshb-dash-table {
505 width: 100%;
506 height: 100%;
507 border-collapse: collapse;
508 }
509 .eshb-dashboard-wrap .eshb-dash-table thead th {
510 text-align: left;
511 font-size: 12px;
512 font-weight: 600;
513 color: var(--eshb-d-muted);
514 padding: 10px 14px;
515 border-bottom: 1px solid var(--eshb-d-border);
516 white-space: nowrap;
517 }
518 .eshb-dashboard-wrap .eshb-dash-table tbody td {
519 padding: 14px;
520 font-size: 13px;
521 color: #4a5468;
522 border-bottom: 1px solid #f4f6fa;
523 white-space: nowrap;
524 }
525 .eshb-dashboard-wrap .eshb-dash-table tbody tr:last-child td {
526 border-bottom: none;
527 }
528 .eshb-dashboard-wrap .eshb-dash-table tbody tr:hover td {
529 background: #fafbff;
530 }
531 .eshb-dashboard-wrap .eshb-dash-table .eshb-dash-booking-id {
532 color: var(--eshb-d-blue);
533 text-decoration: none;
534 font-weight: 600;
535 }
536 .eshb-dashboard-wrap .eshb-dash-table .eshb-dash-booking-id:hover {
537 text-decoration: underline;
538 }
539 .eshb-dashboard-wrap .eshb-dash-table .eshb-dash-empty {
540 text-align: center;
541 color: var(--eshb-d-muted);
542 padding: 28px 14px;
543 }
544 .eshb-dashboard-wrap .eshb-dash-badge {
545 display: inline-block;
546 padding: 4px 12px;
547 border-radius: 20px;
548 font-size: 12px;
549 font-weight: 600;
550 }
551 .eshb-dashboard-wrap .eshb-dash-badge.status-completed, .eshb-dashboard-wrap .eshb-dash-badge.status-confirmed {
552 background: #e4f7ec;
553 color: #16a34a;
554 }
555 .eshb-dashboard-wrap .eshb-dash-badge.status-pending, .eshb-dashboard-wrap .eshb-dash-badge.status-deposit-payment, .eshb-dashboard-wrap .eshb-dash-badge.status-on-hold {
556 background: #fff3df;
557 color: #d98a00;
558 }
559 .eshb-dashboard-wrap .eshb-dash-badge.status-processing {
560 background: #e7edff;
561 color: #3b62f6;
562 }
563 .eshb-dashboard-wrap .eshb-dash-badge.status-cancelled, .eshb-dashboard-wrap .eshb-dash-badge.status-refunded, .eshb-dashboard-wrap .eshb-dash-badge.status-failed {
564 background: #fde7ea;
565 color: #ef4444;
566 }
567 .eshb-dashboard-wrap {
568 /* --------------------------------------------------------------- rooms */
569 }
570 .eshb-dashboard-wrap .eshb-dash-rooms {
571 display: flex;
572 flex-direction: column;
573 justify-content: center;
574 gap: 22px;
575 flex: 1 1 auto;
576 }
577 .eshb-dashboard-wrap .eshb-dash-room {
578 display: flex;
579 align-items: center;
580 gap: 16px;
581 }
582 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-name {
583 flex: 0 0 130px;
584 width: 130px;
585 display: inline-flex;
586 align-items: center;
587 gap: 10px;
588 font-size: 14px;
589 font-weight: 500;
590 color: var(--eshb-d-text);
591 }
592 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-icon {
593 display: inline-flex;
594 align-items: center;
595 justify-content: center;
596 color: var(--eshb-d-blue);
597 flex: 0 0 auto;
598 }
599 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-icon svg {
600 width: 20px;
601 height: 20px;
602 }
603 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-label {
604 white-space: nowrap;
605 overflow: hidden;
606 text-overflow: ellipsis;
607 }
608 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-bar {
609 flex: 1 1 auto;
610 height: 9px;
611 border-radius: 6px;
612 background: #edf0f4;
613 overflow: hidden;
614 }
615 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-bar span {
616 display: block;
617 height: 100%;
618 border-radius: 6px;
619 }
620 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-bar span.is-high {
621 background: #4cbf6f;
622 }
623 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-bar span.is-mid {
624 background: #f0a020;
625 }
626 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-bar span.is-low {
627 background: #e8536b;
628 }
629 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-count {
630 flex: 0 0 auto;
631 font-size: 13px;
632 color: var(--eshb-d-muted);
633 white-space: nowrap;
634 text-align: right;
635 }
636 .eshb-dashboard-wrap .eshb-dash-room .eshb-dash-room-count .eshb-dash-room-count-num {
637 color: var(--eshb-d-text);
638 font-weight: 600;
639 }
640 .eshb-dashboard-wrap {
641 /* -------------------------------------------------------------- upsell */
642 }
643 .eshb-dashboard-wrap .eshb-dash-upsell {
644 background: linear-gradient(135deg, #f1ecff 0%, #eaf0ff 100%);
645 text-align: left;
646 position: relative;
647 flex: 1 1 auto;
648 justify-content: center;
649 }
650 .eshb-dashboard-wrap .eshb-dash-upsell .eshb-dash-upsell-lock {
651 color: #8a78d6;
652 font-size: 22px;
653 margin-bottom: 6px;
654 }
655 .eshb-dashboard-wrap .eshb-dash-upsell h4 {
656 margin: 0 0 8px;
657 font-size: 16px;
658 color: var(--eshb-d-text);
659 }
660 .eshb-dashboard-wrap .eshb-dash-upsell p {
661 margin: 0 0 16px;
662 font-size: 13px;
663 line-height: 1.6;
664 color: #5b6577;
665 }
666 .eshb-dashboard-wrap .eshb-dash-upsell .eshb-dash-upsell-btn {
667 display: inline-block;
668 background: #7b5cf0;
669 color: #fff;
670 text-decoration: none;
671 font-weight: 600;
672 font-size: 13px;
673 padding: 10px 18px;
674 border-radius: 8px;
675 width: -moz-fit-content;
676 width: fit-content;
677 }
678 .eshb-dashboard-wrap .eshb-dash-upsell .eshb-dash-upsell-btn:hover {
679 background: #6a49e0;
680 }
681
682 /* --------------------------------------------------------------- responsive */
683 @media (max-width: 1280px) {
684 .eshb-dashboard-wrap .eshb-dash-stats {
685 grid-template-columns: repeat(3, 1fr);
686 }
687 .eshb-dashboard-wrap .eshb-dash-grid {
688 grid-template-areas: "cal cal cal cal cal cal qa qa qa qa qa qa" "tr tr tr tr tr tr tr tr tr tr tr tr" "rb rb rb rb rb rb rb rb rb rb rb rb" "st st st st st st st st st st st st" "ar ar ar ar ar ar ar ar ar ar ar ar" "dp dp dp dp dp dp dp dp dp dp dp dp" "av av av av av av av av av av av av";
689 }
690 }
691 @media (max-width: 782px) {
692 .eshb-dashboard-wrap {
693 margin: 10px 10px 0;
694 }
695 .eshb-dashboard-wrap .eshb-dash-content {
696 padding: 16px;
697 }
698 .eshb-dashboard-wrap .eshb-dash-stats {
699 grid-template-columns: repeat(2, 1fr);
700 }
701 .eshb-dashboard-wrap .eshb-dash-grid {
702 grid-template-columns: 100%;
703 grid-template-areas: "cal" "qa" "tr" "rb" "st" "ar" "dp" "av";
704 }
705 }
706 /* =========================================================================
707 Easy Hotel – Dashboard front desk panels (arriving, departing, availability)
708 Same tokens and card shell as _dashboard.scss; only the pieces that did not
709 exist yet are defined here.
710 ========================================================================= */
711 .eshb-dashboard-wrap .eshb-card-arrivals {
712 grid-area: ar;
713 }
714 .eshb-dashboard-wrap .eshb-card-departures {
715 grid-area: dp;
716 }
717 .eshb-dashboard-wrap .eshb-card-availability {
718 grid-area: av;
719 }
720 .eshb-dashboard-wrap {
721 /* -------------------------------------------------------- card head bits
722 Scoped to the new cards: the existing heads keep the plain inline h3 they
723 were designed with. */
724 }
725 .eshb-dashboard-wrap .eshb-dash-movement .eshb-dash-card-head h3,
726 .eshb-dashboard-wrap .eshb-card-availability .eshb-dash-card-head h3 {
727 display: flex;
728 align-items: center;
729 gap: 9px;
730 }
731 .eshb-dashboard-wrap .eshb-dash-head-icon {
732 flex: 0 0 28px;
733 width: 28px;
734 height: 28px;
735 border-radius: 9px;
736 display: inline-flex;
737 align-items: center;
738 justify-content: center;
739 font-size: 17px;
740 }
741 .eshb-dashboard-wrap .eshb-dash-head-icon.accent-blue {
742 background: #e7edff;
743 color: #3b62f6;
744 }
745 .eshb-dashboard-wrap .eshb-dash-head-icon.accent-green {
746 background: #def2e4;
747 color: #1faa5b;
748 }
749 .eshb-dashboard-wrap .eshb-dash-head-icon.accent-purple {
750 background: #efe8fd;
751 color: #7b5cf0;
752 }
753 .eshb-dashboard-wrap .eshb-dash-head-icon.accent-orange {
754 background: #fff0db;
755 color: #f0a020;
756 }
757 .eshb-dashboard-wrap .eshb-dash-count {
758 display: inline-flex;
759 align-items: center;
760 justify-content: center;
761 min-width: 26px;
762 height: 22px;
763 padding: 0 7px;
764 border-radius: 7px;
765 background: var(--eshb-d-blue-soft);
766 color: var(--eshb-d-blue);
767 font-size: 12px;
768 font-weight: 700;
769 }
770 .eshb-dashboard-wrap .eshb-dash-head-tools {
771 display: flex;
772 align-items: center;
773 gap: 10px;
774 flex-wrap: wrap;
775 }
776 .eshb-dashboard-wrap {
777 /* --------------------------------------------------------------- search */
778 }
779 .eshb-dashboard-wrap .eshb-dash-search {
780 position: relative;
781 }
782 .eshb-dashboard-wrap .eshb-dash-search input[type=search] {
783 width: 190px;
784 height: 34px;
785 margin: 0;
786 padding: 0 30px 0 12px;
787 border: 1px solid var(--eshb-d-border);
788 border-radius: 8px;
789 background: #fff;
790 color: var(--eshb-d-text);
791 font-size: 13px;
792 line-height: 1.4;
793 box-shadow: none;
794 }
795 .eshb-dashboard-wrap .eshb-dash-search input[type=search]:focus {
796 border-color: #c3cef8;
797 box-shadow: 0 0 0 2px var(--eshb-d-blue-soft);
798 outline: none;
799 }
800 .eshb-dashboard-wrap .eshb-dash-search .eshb-dash-search-clear {
801 position: absolute;
802 top: 50%;
803 right: 4px;
804 transform: translateY(-50%);
805 border: none;
806 background: transparent;
807 color: #9aa3b4;
808 cursor: pointer;
809 padding: 2px;
810 line-height: 0;
811 font-size: 16px;
812 }
813 .eshb-dashboard-wrap .eshb-dash-search .eshb-dash-search-clear:hover {
814 color: var(--eshb-d-red);
815 }
816 .eshb-dashboard-wrap .eshb-dash-search .eshb-dash-search-clear[hidden] {
817 display: none;
818 }
819 .eshb-dashboard-wrap {
820 /* ------------------------------------------------------- day switch */
821 }
822 .eshb-dashboard-wrap .eshb-dash-segment {
823 display: inline-flex;
824 align-items: center;
825 gap: 2px;
826 padding: 3px;
827 border: 1px solid var(--eshb-d-border);
828 border-radius: 9px;
829 background: #fff;
830 }
831 .eshb-dashboard-wrap .eshb-dash-segment button {
832 border: none;
833 background: transparent;
834 color: #5b6577;
835 font-size: 12px;
836 font-weight: 500;
837 padding: 6px 12px;
838 border-radius: 7px;
839 cursor: pointer;
840 line-height: 1.4;
841 transition: background 0.15s ease, color 0.15s ease;
842 }
843 .eshb-dashboard-wrap .eshb-dash-segment button:hover {
844 background: var(--eshb-d-bg);
845 }
846 .eshb-dashboard-wrap .eshb-dash-segment button.is-active {
847 background: var(--eshb-d-blue);
848 color: #fff;
849 }
850 .eshb-dashboard-wrap {
851 /* ---------------------------------------------------- movement panels */
852 }
853 .eshb-dashboard-wrap .eshb-dash-movement .eshb-dash-card-head {
854 flex-wrap: wrap;
855 gap: 12px;
856 }
857 .eshb-dashboard-wrap .eshb-dash-movement .eshb-dash-table-wrap {
858 min-height: 120px;
859 }
860 .eshb-dashboard-wrap {
861 /* -------------------------------------------------- availability form */
862 }
863 .eshb-dashboard-wrap .eshb-dash-availability-form {
864 display: flex;
865 align-items: flex-end;
866 flex-wrap: wrap;
867 gap: 12px;
868 }
869 .eshb-dashboard-wrap .eshb-dash-field {
870 display: flex;
871 flex-direction: column;
872 gap: 5px;
873 min-width: 0;
874 }
875 .eshb-dashboard-wrap .eshb-dash-field.eshb-dash-field--sm {
876 width: 96px;
877 flex: 0 0 96px;
878 }
879 .eshb-dashboard-wrap .eshb-dash-field input {
880 height: 38px;
881 margin: 0;
882 padding: 0 12px;
883 border: 1px solid var(--eshb-d-border);
884 border-radius: 9px;
885 background: #fff;
886 color: var(--eshb-d-text);
887 font-size: 13px;
888 line-height: 1.4;
889 box-shadow: none;
890 min-height: 38px;
891 }
892 .eshb-dashboard-wrap .eshb-dash-field input:focus {
893 border-color: #c3cef8;
894 box-shadow: 0 0 0 2px var(--eshb-d-blue-soft);
895 outline: none;
896 }
897 .eshb-dashboard-wrap .eshb-dash-field-label {
898 font-size: 12px;
899 font-weight: 500;
900 color: var(--eshb-d-muted);
901 }
902 .eshb-dashboard-wrap .eshb-dash-btn {
903 display: inline-flex;
904 align-items: center;
905 gap: 6px;
906 height: 38px;
907 padding: 0 18px;
908 border: none;
909 border-radius: 9px;
910 background: var(--eshb-d-blue);
911 color: #fff;
912 font-size: 13px;
913 font-weight: 600;
914 cursor: pointer;
915 transition: background 0.15s ease;
916 }
917 .eshb-dashboard-wrap .eshb-dash-btn:hover {
918 background: #2f52dd;
919 }
920 .eshb-dashboard-wrap .eshb-dash-btn:disabled {
921 opacity: 0.6;
922 cursor: default;
923 }
924 .eshb-dashboard-wrap .eshb-dash-btn .dashicons {
925 font-size: 16px;
926 width: 16px;
927 height: 16px;
928 }
929 .eshb-dashboard-wrap {
930 /* ----------------------------------------------- availability results */
931 }
932 .eshb-dashboard-wrap .eshb-dash-availability-summary {
933 margin: 16px 0 0;
934 font-size: 13px;
935 color: #5b6577;
936 }
937 .eshb-dashboard-wrap .eshb-dash-availability-summary[hidden] {
938 display: none;
939 }
940 .eshb-dashboard-wrap .eshb-dash-availability-result {
941 display: flex;
942 flex-direction: column;
943 gap: 2px;
944 margin-top: 8px;
945 }
946 .eshb-dashboard-wrap .eshb-dash-availability-result:empty {
947 display: none;
948 }
949 .eshb-dashboard-wrap .eshb-dash-availability-result .eshb-dash-empty {
950 text-align: center;
951 color: var(--eshb-d-muted);
952 font-size: 13px;
953 padding: 18px 14px;
954 }
955 .eshb-dashboard-wrap .eshb-dash-avail-row {
956 display: flex;
957 align-items: center;
958 gap: 16px;
959 padding: 12px 4px;
960 border-bottom: 1px solid #f4f6fa;
961 }
962 .eshb-dashboard-wrap .eshb-dash-avail-row:last-child {
963 border-bottom: none;
964 }
965 .eshb-dashboard-wrap .eshb-dash-avail-row.is-out {
966 opacity: 0.6;
967 }
968 .eshb-dashboard-wrap .eshb-dash-avail-row .eshb-dash-avail-name {
969 flex: 1 1 auto;
970 min-width: 0;
971 font-size: 14px;
972 font-weight: 500;
973 overflow: hidden;
974 text-overflow: ellipsis;
975 white-space: nowrap;
976 }
977 .eshb-dashboard-wrap .eshb-dash-avail-row .eshb-dash-avail-name a {
978 color: var(--eshb-d-text);
979 text-decoration: none;
980 }
981 .eshb-dashboard-wrap .eshb-dash-avail-row .eshb-dash-avail-name a:hover {
982 color: var(--eshb-d-blue);
983 }
984 .eshb-dashboard-wrap .eshb-dash-avail-row .eshb-dash-avail-count,
985 .eshb-dashboard-wrap .eshb-dash-avail-row .eshb-dash-avail-sleeps {
986 flex: 0 0 auto;
987 font-size: 13px;
988 color: var(--eshb-d-muted);
989 white-space: nowrap;
990 }
991 .eshb-dashboard-wrap .eshb-dash-avail-row .eshb-dash-badge {
992 flex: 0 0 auto;
993 min-width: 112px;
994 text-align: center;
995 }
996 .eshb-dashboard-wrap .eshb-dash-badge.is-ok {
997 background: #e4f7ec;
998 color: #16a34a;
999 }
1000 .eshb-dashboard-wrap .eshb-dash-badge.is-full {
1001 background: #fde7ea;
1002 color: #ef4444;
1003 }
1004 .eshb-dashboard-wrap .eshb-dash-badge.is-small {
1005 background: #fff3df;
1006 color: #d98a00;
1007 }
1008
1009 /* --------------------------------------------------------------- responsive */
1010 @media (max-width: 782px) {
1011 .eshb-dashboard-wrap .eshb-dash-search input[type=search] {
1012 width: 140px;
1013 }
1014 .eshb-dashboard-wrap .eshb-dash-avail-row {
1015 flex-wrap: wrap;
1016 gap: 8px;
1017 }
1018 .eshb-dashboard-wrap .eshb-dash-avail-row .eshb-dash-avail-name {
1019 flex: 1 1 100%;
1020 }
1021 }
1022 :root {
1023 --eshb-primary-color: #ab8965;
1024 --eshb-success-color: #1ec734;
1025 --eshb-danger-color: #e41749;
1026 --eshb-primary-color-rgb: 171, 137, 101;
1027 --eshb-dark-color: #181818;
1028 --eshb-white-color: #ffffff;
1029 --eshb-border-color: #ab8965;
1030 }
1031
1032 .eshb-text-danger {
1033 color: var(--eshb-danger-color);
1034 }
1035
1036 .eshb-text-success {
1037 color: var(--eshb-success-color);
1038 }
1039
1040 .eshb_accomodation_page_easy-hotel-settings .notice {
1041 display: none !important;
1042 }
1043 .eshb_accomodation_page_easy-hotel-settings .csf-theme-light .csf-container {
1044 border: none !important;
1045 border-radius: 8px;
1046 box-shadow: 0 4px 40px rgba(0, 0, 0, 0.05);
1047 overflow: hidden;
1048 }
1049 .eshb_accomodation_page_easy-hotel-settings .csf-theme-light .csf-container .csf-header-left {
1050 background: url(../img/fav.svg);
1051 background-repeat: no-repeat;
1052 padding-left: 40px;
1053 padding-bottom: 10px;
1054 }
1055
1056 .csf-field input,
1057 .csf-field select,
1058 .csf-field textarea {
1059 border-color: #e1dede;
1060 }
1061 .csf-field .wp-picker-container {
1062 width: auto;
1063 }
1064 .csf-field .wp-picker-container .wp-color-result.button {
1065 width: 140px;
1066 }
1067
1068 .csf-field.hidden-metabox {
1069 display: none;
1070 }
1071
1072 .csf-field.hide-add-new .csf-repeater-add {
1073 display: none;
1074 }
1075 .csf-field.hide-add-new .csf-repeater-helper {
1076 display: none;
1077 }
1078
1079 .has-inline-repeater-fields .csf-repeater-content {
1080 display: flex;
1081 gap: 16px;
1082 }
1083 .has-inline-repeater-fields .csf-repeater-content > .csf-field {
1084 display: flex;
1085 flex-direction: column;
1086 }
1087 @media only screen and (max-width: 1024px) {
1088 .has-inline-repeater-fields .csf-repeater-content > .csf-field {
1089 display: block;
1090 }
1091 }
1092 .has-inline-repeater-fields .csf-repeater-content > .csf-field .csf-title {
1093 width: auto;
1094 }
1095 .has-inline-repeater-fields .csf-repeater-content > .csf-field .csf-fieldset {
1096 width: auto;
1097 }
1098 @media only screen and (max-width: 1024px) {
1099 .has-inline-repeater-fields .csf-repeater-content {
1100 display: block;
1101 }
1102 }
1103
1104 .csf-field-heading-sm {
1105 font-size: 15px;
1106 }
1107
1108 .eshb-admin-notice {
1109 background-color: #fff3cd;
1110 color: #856404;
1111 border: 1px solid #ffeeba;
1112 border-radius: 4px;
1113 font-family: Arial, sans-serif;
1114 margin-right: 20px;
1115 padding: 10px;
1116 }
1117 .eshb-admin-notice.eshb-admin-notice-large {
1118 font-size: 20px;
1119 padding: 40px;
1120 margin-top: 20px;
1121 }
1122
1123 .inline-group-fields .csf-repeater-wrapper .csf-repeater-item {
1124 display: flex;
1125 }
1126 .inline-group-fields .csf-repeater-wrapper .csf-repeater-item .csf-repeater-content {
1127 display: flex;
1128 }
1129 .inline-group-fields .csf-repeater-wrapper .csf-repeater-item .csf-repeater-content .csf-field {
1130 display: flex;
1131 flex-direction: column;
1132 }
1133 .inline-group-fields .csf-repeater-wrapper .csf-repeater-item .csf-repeater-content .csf-title {
1134 width: 100%;
1135 }
1136 .inline-group-fields .csf-repeater-wrapper .csf-repeater-item .csf-repeater-helper {
1137 width: auto;
1138 align-content: center;
1139 }
1140
1141 .easy-hotel-plugin-settings.csf-theme-light .csf-container {
1142 max-width: 1350px;
1143 margin: 0 auto;
1144 }
1145 .easy-hotel-plugin-settings.csf-theme-light .csf-header-inner,
1146 .easy-hotel-plugin-settings.csf-theme-light .csf-nav-inline {
1147 border-color: #f1f1f1;
1148 }
1149 .easy-hotel-plugin-settings.csf-theme-light .csf-header-inner h1,
1150 .easy-hotel-plugin-settings.csf-theme-light .csf-nav-inline h1 {
1151 color: #222;
1152 font-weight: 600;
1153 }
1154 .easy-hotel-plugin-settings.csf-theme-light .csf-wrapper {
1155 overflow: hidden;
1156 }
1157 .easy-hotel-plugin-settings.csf-theme-light .csf-nav-inline {
1158 padding: 30px;
1159 background: #fff;
1160 }
1161 .easy-hotel-plugin-settings.csf-theme-light .csf-nav-inline ul li {
1162 border-radius: 3px;
1163 overflow: hidden;
1164 margin-right: 10px;
1165 margin-bottom: 10px;
1166 }
1167 .easy-hotel-plugin-settings.csf-theme-light .csf-nav-inline ul li a {
1168 color: #222;
1169 background-color: #eaeaea;
1170 padding: 11px 30px;
1171 border: none !important;
1172 }
1173 .easy-hotel-plugin-settings.csf-theme-light .csf-nav-inline ul li a:hover {
1174 color: #fff;
1175 background-color: #4360ef;
1176 }
1177 .easy-hotel-plugin-settings.csf-theme-light .csf-nav-inline ul li .csf-active {
1178 color: #fff;
1179 background-color: #4360ef;
1180 }
1181 .easy-hotel-plugin-settings.csf-theme-light .csf-buttons .button {
1182 padding: 6px 30px;
1183 border: none !important;
1184 }
1185 .easy-hotel-plugin-settings.csf-theme-light .csf-buttons .button.csf-top-save {
1186 background: #4360ef;
1187 }
1188
1189 .eshb-notice {
1190 padding: 10px;
1191 }
1192 .eshb-notice.notice {
1193 border-left-color: #576AE3 !important;
1194 padding: 10px;
1195 }
1196 .eshb-notice {
1197 padding: 5px !important;
1198 display: flex;
1199 flex-direction: row;
1200 justify-content: flex-start;
1201 align-items: center;
1202 }
1203
1204 .eshb-notice .notice-logo {
1205 padding: 0.8rem;
1206 max-width: 110px;
1207 max-height: 110px;
1208 }
1209
1210 .eshb-notice .notice-right-container {
1211 margin: 0.7rem 0.8rem 0.8rem;
1212 }
1213
1214 .eshb-notice-action-buttons {
1215 margin-top: 5px;
1216 }
1217
1218 .eshb-notice-button {
1219 background-color: #576AE3;
1220 color: #fff;
1221 display: inline-block;
1222 text-decoration: none;
1223 font-size: 13px;
1224 margin: 0;
1225 padding: 6px 10px;
1226 cursor: pointer;
1227 border-width: 1px;
1228 border-style: solid;
1229 -webkit-appearance: none;
1230 border-radius: 3px;
1231 white-space: nowrap;
1232 box-sizing: border-box;
1233 }
1234
1235 .eshb-notice-button:hover {
1236 color: #fff;
1237 }
1238
1239 .eshb-notice-action-buttons {
1240 display: flex;
1241 align-items: center;
1242 gap: 5px;
1243 }
1244
1245 .eshb-notice-widget-inner .feature-image {
1246 max-width: 100%;
1247 }
1248
1249 .eshb-notice-widget-inner .eshb-notice-button {
1250 background-color: transparent;
1251 }
1252
1253 #eshb-notice-emicon_pro_plugin_notice .eshb-notice-action-buttons {
1254 margin-top: 10px;
1255 }
1256
1257 .eshb_easy_hotel_usage_callback {
1258 border: 1px solid #ededed;
1259 border-radius: 10px;
1260 margin-bottom: 50px;
1261 padding: 30px;
1262 }
1263
1264 .eshb_easy_hotel_help_support_callback {
1265 margin-bottom: 50px;
1266 }
1267 .eshb_easy_hotel_help_support_callback .help-col-container {
1268 display: flex;
1269 gap: 30px;
1270 }
1271 .eshb_easy_hotel_help_support_callback .help-col-container .help-col {
1272 width: 44%;
1273 border: 1px solid #ededed;
1274 padding: 30px;
1275 border-radius: 20px;
1276 box-shadow: 2px 2px 30px #ededed;
1277 }
1278 @media only screen and (max-width: 1024px) {
1279 .eshb_easy_hotel_help_support_callback .help-col-container .help-col {
1280 width: 100%;
1281 }
1282 }
1283 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist {
1284 display: flex;
1285 max-width: 100%;
1286 flex-wrap: wrap;
1287 gap: 20px;
1288 }
1289 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist .eshb-video-player {
1290 flex: 2 1 590px;
1291 min-width: 500px;
1292 }
1293 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist .eshb-video-player iframe {
1294 width: 100%;
1295 height: 450px;
1296 border: none;
1297 }
1298 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist .eshb-playlist-sidebar {
1299 flex: 1 1 300px;
1300 min-width: 250px;
1301 max-height: 450px;
1302 overflow-y: auto;
1303 background: #f9f9f9;
1304 border: 1px solid #ddd;
1305 }
1306 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist .eshb-playlist-sidebar h3 {
1307 margin: 0;
1308 padding: 10px;
1309 background: #eee;
1310 font-size: 16px;
1311 font-weight: bold;
1312 }
1313 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist .eshb-playlist-sidebar .eshb-playlist-item {
1314 display: flex;
1315 align-items: flex-start;
1316 gap: 10px;
1317 padding: 8px;
1318 border: none;
1319 background: white;
1320 cursor: pointer;
1321 box-shadow: 3px 3px 3px rgba(119, 119, 119, 0.1607843137);
1322 transition: background 0.2s ease;
1323 }
1324 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist .eshb-playlist-sidebar .eshb-playlist-item:hover {
1325 background: #f0f0f0;
1326 }
1327 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist .eshb-playlist-sidebar .eshb-playlist-item img {
1328 width: 120px !important;
1329 height: 68px;
1330 -o-object-fit: cover;
1331 object-fit: cover;
1332 }
1333 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist .eshb-playlist-sidebar .eshb-playlist-item .eshb-video-title {
1334 flex: 1;
1335 font-size: 14px;
1336 font-weight: 500;
1337 }
1338
1339 .order-status {
1340 display: inline-flex;
1341 line-height: 2.5em;
1342 color: #454545;
1343 background: #e5e5e5;
1344 border-radius: 4px;
1345 border-bottom: 1px solid rgba(0, 0, 0, 0.05);
1346 margin: -0.25em 0;
1347 cursor: inherit !important;
1348 white-space: nowrap;
1349 max-width: 100%;
1350 text-transform: capitalize;
1351 }
1352 .order-status span {
1353 margin: 0 1em;
1354 overflow: hidden;
1355 text-overflow: ellipsis;
1356 }
1357 .order-status.status-completed {
1358 background: #2a962a;
1359 color: white;
1360 }
1361 .order-status.status-on-hold {
1362 background: #f8dda7;
1363 color: #573b00;
1364 }
1365 .order-status.status-failed {
1366 background: #eba3a3;
1367 color: #570000;
1368 }
1369 .order-status.status-processing {
1370 background: #c6e1c6;
1371 color: #2c4700;
1372 }
1373 .order-status.status-trash {
1374 background: #eba3a3;
1375 color: #550202;
1376 }
1377 .order-status.status-deposit-payment {
1378 background: wheat;
1379 }
1380
1381 .eshb-themes-addons-row {
1382 display: grid;
1383 grid-template-columns: repeat(2, 1fr);
1384 gap: 100px;
1385 margin-right: 20px;
1386 }
1387 @media (max-width: 991px) {
1388 .eshb-themes-addons-row {
1389 display: block;
1390 }
1391 }
1392 .eshb-themes-addons-row .eshb-addons-action-button {
1393 display: inline-flex;
1394 align-items: center;
1395 gap: 5px;
1396 margin-right: 10px;
1397 border-radius: 4px;
1398 font-size: 14px;
1399 font-weight: 500;
1400 line-height: 40px;
1401 padding: 0 20px;
1402 text-decoration: none;
1403 border: none;
1404 background: #0039b6;
1405 color: #fff;
1406 }
1407 .eshb-themes-addons-row .eshb-addons-action-button.view-all-btn {
1408 margin: auto;
1409 display: block;
1410 width: -moz-fit-content;
1411 width: fit-content;
1412 }
1413 .eshb-themes-addons-row .eshb-addons-action-button.eshb-action-btn-primary {
1414 background-color: rgba(62, 98, 245, 0.1);
1415 color: #3e62f5;
1416 }
1417 .eshb-themes-addons-row .eshb-addons-action-button.eshb-action-btn-primary:hover {
1418 color: #ff408c;
1419 }
1420 .eshb-themes-addons-row .eshb-addons-action-button.eshb-action-btn-secondary {
1421 background-color: rgba(255, 64, 140, 0.1);
1422 color: #ff408c;
1423 }
1424 .eshb-themes-addons-row .eshb-addons-action-button.eshb-action-btn-secondary:hover {
1425 color: #0066bf;
1426 }
1427 .eshb-themes-addons-row .eshb-pro-addons-card-group {
1428 display: grid;
1429 gap: 1em;
1430 margin-bottom: 30px;
1431 }
1432 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card {
1433 background-color: #fff;
1434 margin: 0;
1435 display: flex;
1436 flex-direction: column;
1437 justify-content: space-between;
1438 box-shadow: 0 5px 5px rgba(173, 180, 210, 0.05);
1439 border-radius: 5px;
1440 padding: 0;
1441 position: relative;
1442 overflow: hidden;
1443 }
1444 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card span.eshb-pro-addons-base {
1445 background: #f9f9f9;
1446 display: block;
1447 font-size: 11px;
1448 position: absolute;
1449 left: -20px;
1450 top: 9px;
1451 transform: rotate(-45deg);
1452 width: 78px;
1453 }
1454 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card span.eshb-pro-addons-base span {
1455 width: auto;
1456 display: block;
1457 padding: 2px 10px;
1458 color: #fff;
1459 text-align: center;
1460 }
1461 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card span.eshb-pro-addons-base span.eshb-pro-base {
1462 background: #93003f;
1463 }
1464 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card span.eshb-pro-addons-base span.eshb-free-base {
1465 background: #f59e0b;
1466 }
1467 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card .eshb-pro-addons-body {
1468 display: flex;
1469 gap: 15px;
1470 padding: 1.5em;
1471 }
1472 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card .eshb-pro-addons-body .eshb-pro-addons-thumbnail {
1473 overflow: hidden;
1474 width: 250px;
1475 height: 150px;
1476 display: block;
1477 text-align: center;
1478 border-radius: 4px;
1479 }
1480 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card .eshb-pro-addons-body .eshb-pro-addons-thumbnail img {
1481 width: 100%;
1482 height: 100%;
1483 -o-object-fit: cover;
1484 object-fit: cover;
1485 }
1486 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card .eshb-pro-addons-body .eshb-pro-addons-content {
1487 width: calc(100% - 245px);
1488 display: flex;
1489 flex-direction: column;
1490 justify-content: center;
1491 }
1492 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card .eshb-pro-addons-body .eshb-pro-addons-name {
1493 margin: 0;
1494 }
1495 .eshb-themes-addons-row .eshb-pro-addons-card-group .eshb-pro-addons-card .eshb-pro-addons-action {
1496 display: flex;
1497 align-items: center;
1498 }
1499
1500 #eshb-license-activator .form-group {
1501 display: inline-flex;
1502 position: relative;
1503 align-items: center;
1504 }
1505 #eshb-license-activator .form-group button,
1506 #eshb-license-activator .form-group input[name=licnese_key] {
1507 max-width: 255px;
1508 width: 255px;
1509 border: 1px solid #c4c4c4;
1510 padding: 8px 20px;
1511 }
1512 #eshb-license-activator .form-group button {
1513 max-width: unset;
1514 width: unset;
1515 line-height: normal;
1516 }
1517 #eshb-license-activator .form-group .ajax-loader {
1518 display: none;
1519 position: absolute;
1520 right: -45px;
1521 }
1522 #eshb-license-activator .form-group .ajax-loader img {
1523 height: 50px;
1524 }
1525
1526 body.rtl .csf-content {
1527 margin-right: 0;
1528 }
1529
1530 .eshb-booking-info-calendar {
1531 --eshb-calendar-ical-completed-color: #97dfd4b5;
1532 --eshb-calendar-completed-color: #cef093;
1533 --eshb-calendar-pending-color: #fed24d;
1534 --eshb-calendar-deposit-color: #f5deb3;
1535 --eshb-calendar-blocked-color: #ffd0d0;
1536 }
1537 .eshb-booking-info-calendar .eshb-calendar-filter {
1538 padding: 15px;
1539 margin-bottom: 20px;
1540 background: #fff;
1541 gap: 20px;
1542 display: flex;
1543 justify-content: space-between;
1544 margin-right: 15px;
1545 width: auto;
1546 position: relative;
1547 }
1548 @media (max-width: 767px) {
1549 .eshb-booking-info-calendar .eshb-calendar-filter {
1550 flex-direction: column;
1551 }
1552 }
1553 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-filter-form {
1554 gap: 20px;
1555 display: flex;
1556 align-items: center;
1557 flex-wrap: wrap;
1558 }
1559 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-filter-form .eshb-calendar-filter-options {
1560 display: flex;
1561 gap: 20px;
1562 align-items: center;
1563 flex-wrap: wrap;
1564 }
1565 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-filter-form .eshb-calendar-filter-options #eshb-calendar-filter-period-wrapper {
1566 display: flex;
1567 align-items: center;
1568 gap: 5px;
1569 }
1570 @media (max-width: 767px) {
1571 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-filter-form .eshb-calendar-filter-options #eshb-calendar-filter-period-wrapper > span {
1572 display: none;
1573 }
1574 }
1575 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-filter-form .eshb-calendar-filter-actions .button:nth-child(1) {
1576 margin-right: 5px;
1577 }
1578 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-legends {
1579 display: flex;
1580 gap: 10px;
1581 }
1582 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-legends .legend-item {
1583 display: flex;
1584 flex-direction: column;
1585 align-items: center;
1586 padding: 0 5px;
1587 font-size: 12px;
1588 }
1589 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-legends .legend-item::before {
1590 position: relative;
1591 display: inline-block;
1592 width: 15px;
1593 height: 15px;
1594 margin-right: 2px;
1595 top: 3px;
1596 content: "";
1597 margin-bottom: 5px;
1598 }
1599 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-legends .legend-item.ical-complete::before {
1600 background-color: var(--eshb-calendar-ical-completed-color);
1601 }
1602 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-legends .legend-item.complete::before {
1603 background-color: var(--eshb-calendar-completed-color);
1604 }
1605 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-legends .legend-item.pending::before {
1606 background-color: var(--eshb-calendar-pending-color);
1607 }
1608 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-legends .legend-item.deposit-payment::before {
1609 background-color: var(--eshb-calendar-deposit-color);
1610 }
1611 .eshb-booking-info-calendar .eshb-calendar-filter .eshb-calendar-legends .legend-item.blocked::before {
1612 background-color: var(--eshb-calendar-blocked-color);
1613 }
1614 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables {
1615 display: flex;
1616 margin-right: 15px;
1617 width: auto;
1618 position: relative;
1619 }
1620 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables .eshb-accomodations-dates-table-wrapper {
1621 overflow-x: auto;
1622 position: relative;
1623 max-width: 100%;
1624 scroll-behavior: smooth;
1625 }
1626 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table {
1627 background: #fff;
1628 border-collapse: collapse;
1629 width: 100%;
1630 table-layout: fixed;
1631 }
1632 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table.eshb-accomodations-rooms-table {
1633 position: absolute;
1634 height: calc(100% - 13px);
1635 width: 160px;
1636 }
1637 @media (max-width: 767px) {
1638 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table.eshb-accomodations-rooms-table {
1639 height: calc(100% + 3px);
1640 }
1641 }
1642 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table > thead tr,
1643 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table > tfoot tr {
1644 height: 77px;
1645 max-height: 77px;
1646 }
1647 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table > thead tr th,
1648 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table > tfoot tr th {
1649 min-width: 45px;
1650 width: 45px;
1651 }
1652 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table tr {
1653 height: 100%;
1654 }
1655 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table th,
1656 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td {
1657 height: inherit;
1658 min-width: 40px;
1659 border-collapse: collapse;
1660 border: 1px solid #e3e3e3;
1661 }
1662 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table th {
1663 font-size: 12px;
1664 }
1665 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td {
1666 height: 45px;
1667 }
1668 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td a {
1669 text-decoration: none;
1670 }
1671 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td .room-info {
1672 padding: 4px 15px;
1673 }
1674 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td.booking-info-col {
1675 vertical-align: baseline;
1676 }
1677 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td.booking-info-col[colspan="1"] {
1678 max-width: 40px;
1679 min-width: 40px;
1680 }
1681 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td .booking-info {
1682 margin: 1px;
1683 display: flex;
1684 flex-direction: column;
1685 align-items: center;
1686 padding: 3px 5px;
1687 font-size: 12px;
1688 }
1689 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td .booking-info.ical-status-completed {
1690 background: var(--eshb-calendar-ical-completed-color);
1691 }
1692 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td .booking-info.status-completed {
1693 background: var(--eshb-calendar-completed-color);
1694 }
1695 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td .booking-info.status-blocked {
1696 background: var(--eshb-calendar-blocked-color);
1697 }
1698 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td .booking-info.status-pending {
1699 background: var(--eshb-calendar-pending-color);
1700 }
1701 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table td .booking-info.status-deposit-payment {
1702 background: var(--eshb-calendar-deposit-color);
1703 }
1704 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table .left-heading {
1705 position: sticky;
1706 left: 0;
1707 z-index: 3;
1708 box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
1709 /* optional for visual effect */
1710 width: 160px;
1711 background-color: #fff;
1712 }
1713 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table .left-heading div {
1714 display: block;
1715 height: 100%;
1716 position: absolute;
1717 left: 50%;
1718 top: 50%;
1719 transform: translate(-50%, -50%);
1720 width: 100%;
1721 align-content: center;
1722 border-right: 2px solid #e3e3e3;
1723 }
1724 .eshb-booking-info-calendar .eshb-booking-info-calendar-tables table .table-heading {
1725 font-size: 15px;
1726 }
1727
1728 #eshb-booking-info-modal {
1729 position: fixed;
1730 width: 100%;
1731 height: 100%;
1732 z-index: 99999999 !important;
1733 display: none;
1734 opacity: 1;
1735 pointer-events: auto !important;
1736 visibility: visible;
1737 }
1738 #eshb-booking-info-modal .booking-info-modal-bg-overlay {
1739 position: fixed;
1740 top: 0;
1741 right: 0;
1742 bottom: 0;
1743 left: 0;
1744 width: 100%;
1745 height: 100%;
1746 background: rgba(0, 0, 0, 0.7);
1747 z-index: 99999998 !important;
1748 }
1749 #eshb-booking-info-modal .booking-info-modal-main {
1750 position: fixed;
1751 background: #fff;
1752 z-index: 99999999 !important;
1753 left: 50%;
1754 top: 50%;
1755 transform: translate(-50%, -50%);
1756 max-width: 100%;
1757 width: 750px;
1758 box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
1759 }
1760 @media (max-width: 767px) {
1761 #eshb-booking-info-modal .booking-info-modal-main {
1762 width: 100%;
1763 }
1764 }
1765 #eshb-booking-info-modal .booking-info-modal-main .booking-info-modal-header {
1766 display: block;
1767 position: relative;
1768 height: auto;
1769 background: #fcfcfc;
1770 padding: 1em 1.5em;
1771 border-bottom: 1px solid #ddd;
1772 }
1773 #eshb-booking-info-modal .booking-info-modal-main .booking-info-modal-header h2 {
1774 padding: 0 !important;
1775 margin: 0 !important;
1776 font-size: 18px !important;
1777 font-weight: 700 !important;
1778 line-height: 1.5em !important;
1779 }
1780 #eshb-booking-info-modal .booking-info-modal-main .booking-info-modal-header .booking-info-modal-close {
1781 cursor: pointer;
1782 color: #777;
1783 height: 54px;
1784 width: 54px;
1785 padding: 0;
1786 position: absolute;
1787 top: 0;
1788 right: 0;
1789 text-align: center;
1790 border: 0;
1791 border-left: 1px solid #ddd;
1792 background-color: transparent;
1793 transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
1794 border-radius: 0;
1795 z-index: 99999999 !important;
1796 }
1797 #eshb-booking-info-modal .booking-info-modal-main .booking-info-modal-header .booking-info-modal-close::before {
1798 font: normal 22px/50px dashicons !important;
1799 color: #666;
1800 display: block;
1801 content: "\f335";
1802 }
1803 #eshb-booking-info-modal .booking-info-modal-main .booking-info-modal-content {
1804 padding: 0.5em 1.5em 2em;
1805 overflow: auto;
1806 max-height: 85vh;
1807 }
1808
1809 .csf-field-group .csf-cloneable-item {
1810 display: block;
1811 }
1812 .csf-field-group .csf-cloneable-item .csf-cloneable-content {
1813 display: none;
1814 }
1815 .csf-field-group .csf-cloneable-item .csf-cloneable-alert {
1816 display: none;
1817 }
1818
1819 .daterangepicker {
1820 --eshb-booked-bg-color: #bebcbb;
1821 --eshb-active-bg-color: var(--eshb-primary-color);
1822 --eshb-inrange-bg-color: var(--eshb-dark-color);
1823 --eshb-booked-color: var(--eshb-dark-color);
1824 --eshb-active-color: var(--eshb-white-color);
1825 --eshb-inrange-color: var(--eshb-white-color);
1826 /* Bootstrap Table Styles */
1827 }
1828 .daterangepicker.dropdown-menu {
1829 z-index: 10000;
1830 }
1831 .daterangepicker .calendar-table {
1832 border: none;
1833 }
1834 .daterangepicker .daterangepicker_input {
1835 display: none;
1836 }
1837 .daterangepicker .range_inputs button {
1838 padding: 5px 20px;
1839 cursor: pointer;
1840 width: auto;
1841 }
1842 .daterangepicker .range_inputs button.applyBtn {
1843 background-color: var(--eshb-primary-color);
1844 border: 1px solid var(--eshb-primary-color);
1845 color: var(--eshb-white-color);
1846 }
1847 .daterangepicker .range_inputs button.applyBtn:hover {
1848 background-color: transparent;
1849 color: var(--eshb-text-color);
1850 border: 1px solid var(--eshb-primary-color);
1851 }
1852 .daterangepicker .range_inputs button.cancelBtn {
1853 background-color: transparent;
1854 color: var(--eshb-text-color);
1855 border: 1px solid var(--eshb-primary-color);
1856 }
1857 .daterangepicker .range_inputs button.cancelBtn:hover {
1858 color: var(--eshb-white-color);
1859 background-color: var(--eshb-primary-color);
1860 border: 1px solid var(--eshb-primary-color);
1861 }
1862 .daterangepicker table {
1863 width: 100%;
1864 margin-bottom: 1rem;
1865 color: var(--eshb-text-color);
1866 border-collapse: collapse;
1867 border: none !important;
1868 }
1869 .daterangepicker table th,
1870 .daterangepicker table td {
1871 vertical-align: top;
1872 padding: 3px;
1873 background: transparent;
1874 border-radius: 0px !important;
1875 }
1876 .daterangepicker th.next.available:before {
1877 content: "\f345";
1878 font-family: "dashicons";
1879 }
1880 .daterangepicker th.prev.available:before {
1881 content: "\f341";
1882 font-family: "dashicons";
1883 }
1884 .daterangepicker thead:first-child tr:first-child th {
1885 border-block-start: unset;
1886 }
1887 .daterangepicker table tr {
1888 display: block;
1889 margin-top: 8px;
1890 }
1891 .daterangepicker td {
1892 text-decoration: none !important;
1893 }
1894 .daterangepicker td:hover {
1895 background-color: var(--eshb-active-bg-color) !important;
1896 color: var(--eshb-active-color) !important;
1897 }
1898 .daterangepicker td.booked-date {
1899 color: var(--eshb-booked-color) !important;
1900 background-color: var(--eshb-booked-bg-color) !important;
1901 }
1902 .daterangepicker td.booked-date.active {
1903 color: var(--eshb-booked-color) !important;
1904 background-color: var(--eshb-booked-bg-color) !important;
1905 }
1906 .daterangepicker td.booked-date:hover {
1907 background-color: transparent;
1908 }
1909 .daterangepicker td.checked-in-date {
1910 background-image: linear-gradient(135deg, transparent 50%, var(--eshb-booked-bg-color) 50%);
1911 color: var(--eshb-booked-color) !important;
1912 font-style: italic;
1913 }
1914 .daterangepicker td.checked-in-date.active, .daterangepicker td.checked-in-date:hover {
1915 background-color: var(--eshb-active-bg-color) !important;
1916 background-image: linear-gradient(135deg, transparent 50%, var(--eshb-booked-bg-color) 50%);
1917 color: var(--eshb-active-color) !important;
1918 }
1919 .daterangepicker td.checked-out-date {
1920 background-image: linear-gradient(135deg, var(--eshb-booked-bg-color) 50%, transparent 50%);
1921 font-style: italic;
1922 }
1923 .daterangepicker td.holiday-date {
1924 color: rgb(255, 0, 0) !important;
1925 }
1926 .daterangepicker td.holiday-date:hover {
1927 background-color: transparent;
1928 }
1929 .daterangepicker td.start-date.active {
1930 background-color: var(--eshb-active-bg-color) !important;
1931 color: var(--eshb-active-color) !important;
1932 }
1933 .daterangepicker td.end-date.active, .daterangepicker td.end-date.active:hover {
1934 background-color: var(--eshb-active-bg-color) !important;
1935 color: var(--eshb-active-color) !important;
1936 }
1937 .daterangepicker td.in-range {
1938 background-color: var(--eshb-inrange-bg-color);
1939 color: var(--eshb-active-color) !important;
1940 }
1941
1942 body.post-type-eshb_booking #post-body-content,
1943 body.post-type-eshb_payment #post-body-content {
1944 margin-bottom: 0 !important;
1945 }
1946 body.post-type-eshb_booking .page-title-action,
1947 body.post-type-eshb_payment .page-title-action {
1948 display: none;
1949 }
1950 body.post-type-eshb_booking .eshb-page-title-action,
1951 body.post-type-eshb_payment .eshb-page-title-action {
1952 margin-top: -5px;
1953 vertical-align: middle;
1954 }
1955 body.post-type-eshb_booking.eshb-has-manual-booking .page-title-action,
1956 body.post-type-eshb_payment.eshb-has-manual-booking .page-title-action {
1957 display: inline-block !important;
1958 }
1959 body.post-type-eshb_booking #major-publishing-actions,
1960 body.post-type-eshb_payment #major-publishing-actions {
1961 padding: 10px 9px;
1962 }
1963 body.post-type-eshb_booking #major-publishing-actions #delete-action,
1964 body.post-type-eshb_payment #major-publishing-actions #delete-action {
1965 margin-right: 10px;
1966 }
1967 body.post-type-eshb_booking #major-publishing-actions #publishing-action,
1968 body.post-type-eshb_payment #major-publishing-actions #publishing-action {
1969 float: left;
1970 }
1971 body.post-type-eshb_booking #major-publishing-actions #publishing-action .spinner,
1972 body.post-type-eshb_payment #major-publishing-actions #publishing-action .spinner {
1973 float: right;
1974 }
1975 body.post-type-eshb_booking .eshb-error-message,
1976 body.post-type-eshb_payment .eshb-error-message {
1977 display: none;
1978 padding: 0 10px;
1979 }
1980 body.post-type-eshb_booking .input-error,
1981 body.post-type-eshb_payment .input-error {
1982 border: 1px solid var(--eshb-danger-color);
1983 }
1984
1985 .has-required-notice {
1986 opacity: 0.5;
1987 pointer-events: none;
1988 }
1989
1990 #eshb_booking_metaboxes .err-msg {
1991 margin: 5px 10px 5px -12px;
1992 color: var(--eshb-danger-color);
1993 }
1994 #eshb_booking_metaboxes .csf-field-text input {
1995 max-width: 250px;
1996 }
1997 #eshb_booking_metaboxes .booking-requirement-input .csf-fieldset .csf--wrap {
1998 margin-right: 5px;
1999 }
2000 #eshb_booking_metaboxes .booking-requirement-input .csf-fieldset .capacity-status {
2001 margin-top: 5px;
2002 }
2003 #eshb_booking_metaboxes .booking_metaboxes-pricing-calculation-fields {
2004 background: #f9f9f9;
2005 min-height: 140px;
2006 }
2007 #eshb_booking_metaboxes .booking_metaboxes-pricing-calculation-fields .cost-calculator-wrapper .total-cost-label {
2008 display: flex;
2009 justify-content: space-between;
2010 }
2011 #eshb_booking_metaboxes .booking_metaboxes-pricing-calculation-fields .cost-calculator-wrapper .total-cost-label .eshb-booking-value {
2012 display: inline;
2013 }
2014 #eshb_booking_metaboxes .booking_metaboxes-pricing-calculation-fields .cost-calculator-wrapper .eshb-booking-total-discounted-pricing {
2015 display: none;
2016 border-top: 1px dashed;
2017 padding-top: 15px;
2018 }
2019 #eshb_booking_metaboxes .booking_metaboxes-pricing-calculation-fields .cost-calculator-wrapper.has-discounted-price .eshb-booking-total-pricing {
2020 font-size: 16px;
2021 }
2022 #eshb_booking_metaboxes .booking_metaboxes-pricing-calculation-fields .cost-calculator-wrapper.has-discounted-price .eshb-booking-total-discounted-pricing {
2023 display: flex;
2024 font-size: 26px;
2025 }
2026 #eshb_booking_metaboxes .eshb-customer-details-input-group {
2027 margin-top: 50px;
2028 max-width: -moz-fit-content;
2029 max-width: fit-content;
2030 }
2031 #eshb_booking_metaboxes .eshb-customer-details-input-group .eshb-booking-form-customer-details {
2032 background: #fff;
2033 padding: 15px;
2034 box-shadow: 5px 5px 5px 9px rgba(237, 237, 237, 0.3490196078);
2035 border-radius: 10px;
2036 }
2037 #eshb_booking_metaboxes .eshb-customer-details-input-group .eshb-form-group {
2038 display: flex;
2039 gap: 20px;
2040 }
2041 #eshb_booking_metaboxes .eshb-customer-details-input-group .eshb-form-group input {
2042 margin-bottom: 15px;
2043 width: 250px;
2044 }
2045 #eshb_booking_metaboxes .eshb-customer-details-input-group .eshb-form-group select {
2046 margin-bottom: 15px;
2047 width: 250px;
2048 }
2049 #eshb_booking_metaboxes .eshb-customer-details-input-group .eshb-form-group textarea {
2050 width: 100%;
2051 height: 80px;
2052 }
2053 #eshb_booking_metaboxes .eshb-customer-details-input-group button#confirm-booking-admin {
2054 padding: 4px 18px;
2055 margin-top: 15px;
2056 font-size: 14px;
2057 }
2058 #eshb_booking_metaboxes .time-slots-metabox {
2059 display: none;
2060 }
2061 #eshb_booking_metaboxes .time-slots-wrapper {
2062 display: none;
2063 }
2064 #eshb_booking_metaboxes .time-slots-wrapper .field-label {
2065 display: none;
2066 text-align: center;
2067 }
2068 #eshb_booking_metaboxes .time-slots-wrapper .eshb-form-group {
2069 display: contents;
2070 }
2071 #eshb_booking_metaboxes .time-slots-wrapper.has-time-slots {
2072 display: block;
2073 }
2074 #eshb_booking_metaboxes .time-slots-wrapper.has-time-slots .field-label {
2075 display: block;
2076 }
2077 #eshb_booking_metaboxes .time-slots-wrapper.has-time-slots .empty-slot-msg {
2078 display: none;
2079 }
2080 #eshb_booking_metaboxes .time-slots-wrapper .eshb-form-group {
2081 display: flex;
2082 flex-wrap: wrap;
2083 justify-content: center;
2084 flex-direction: column;
2085 align-items: center;
2086 }
2087 #eshb_booking_metaboxes .time-slots-wrapper .time-slots {
2088 width: 100%;
2089 display: flex;
2090 flex-direction: column;
2091 gap: 6px;
2092 }
2093 #eshb_booking_metaboxes .time-slots-wrapper .eshb-time-slot {
2094 display: flex !important;
2095 align-items: center;
2096 margin: 0;
2097 }
2098 #eshb_booking_metaboxes .time-slots-wrapper .eshb-time-slot .eshb-times {
2099 display: flex;
2100 align-items: center;
2101 gap: 10px;
2102 }
2103 #eshb_booking_metaboxes .time-slots-wrapper .eshb-time-slot .eshb-times input {
2104 text-align: center;
2105 }
2106 #eshb_booking_metaboxes .time-slots-wrapper .eshb-time-slot .eshb-times input::-webkit-calendar-picker-indicator {
2107 filter: brightness(0) invert(1);
2108 cursor: pointer;
2109 }
2110
2111 .eshb-deposit-requests-metaboxes-inner {
2112 display: flex;
2113 flex-direction: column;
2114 gap: 15px;
2115 }
2116 .eshb-deposit-requests-metaboxes-inner .eshb-deposit-requests-metabox-item {
2117 display: flex;
2118 align-items: center;
2119 gap: 5px;
2120 }
2121 .eshb-deposit-requests-metaboxes-inner .eshb-deposit-requests-metabox-item p {
2122 margin: 0;
2123 }
2124 .eshb-deposit-requests-metaboxes-inner .eshb-deposit-requests-metabox-item:nth-last-child(1) {
2125 border-top: 1px solid #ededed;
2126 padding-top: 15px;
2127 }
2128 .eshb-deposit-requests-metaboxes-inner .ajax-loader {
2129 position: absolute;
2130 left: 0;
2131 width: 100%;
2132 height: 100%;
2133 display: none;
2134 align-items: center;
2135 justify-content: center;
2136 background: rgba(255, 255, 255, 0.9490196078);
2137 }
2138 .eshb-deposit-requests-metaboxes-inner .ajax-loader img {
2139 height: 50px;
2140 }
2141 .eshb-deposit-requests-metaboxes-inner p.form-status {
2142 display: contents;
2143 margin-bottom: 9px;
2144 }
2145
2146 .eshb-plugin-page #titlediv #title {
2147 border-color: #d4d2d2;
2148 }
2149 .eshb-plugin-page .postbox {
2150 box-shadow: 0 4px 40px rgba(0, 0, 0, 0.05);
2151 border-radius: 10px;
2152 overflow: hidden;
2153 border: none;
2154 }
2155 .eshb-plugin-page .postbox .eshb-admin-notice {
2156 margin: auto;
2157 }
2158 .eshb-plugin-page .wp-list-table {
2159 width: 100%;
2160 border-collapse: collapse;
2161 background: #fff;
2162 border-radius: 5px;
2163 overflow: hidden;
2164 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
2165 }
2166 .eshb-plugin-page .wp-list-table thead {
2167 background: #f5f7fa;
2168 }
2169 .eshb-plugin-page .wp-list-table thead th {
2170 padding: 12px 16px;
2171 font-weight: 600;
2172 font-size: 14px;
2173 text-align: left;
2174 color: #333;
2175 border-bottom: 2px solid #e1e5eb;
2176 }
2177 .eshb-plugin-page .wp-list-table tbody tr {
2178 transition: background 0.2s ease;
2179 }
2180 .eshb-plugin-page .wp-list-table tbody tr:nth-child(even) {
2181 background: #fafafa;
2182 }
2183 .eshb-plugin-page .wp-list-table tbody tr:hover {
2184 background: #f0f4ff;
2185 }
2186 .eshb-plugin-page .wp-list-table tbody tr td {
2187 padding: 12px 16px;
2188 font-size: 14px;
2189 color: #444;
2190 border-bottom: 1px solid #eaeaea;
2191 }
2192 .eshb-plugin-page .wp-list-table tbody tr td:first-child {
2193 font-weight: 500;
2194 color: #222;
2195 width: 30%;
2196 }
2197 .eshb-plugin-page .wp-list-table tbody tr td:last-child {
2198 color: #555;
2199 }
2200
2201 .eshb_easy_hotel_help_support_callback .eshb-help-support {
2202 padding: 24px 0 0 0;
2203 }
2204
2205 .eshb_easy_hotel_help_support_callback .eshb-help-support h2 {
2206 font-size: 32px;
2207 line-height: normal;
2208 }
2209
2210 .eshb_easy_hotel_help_support_callback .help-col-container {
2211 display: flex;
2212 flex-wrap: wrap;
2213 gap: 22px;
2214 margin-bottom: 32px;
2215 }
2216
2217 .eshb_easy_hotel_help_support_callback .help-col {
2218 background-color: #fff;
2219 border: 1px solid transparent;
2220 border-radius: 8px;
2221 box-shadow: 0 2px 3px 0 hsla(0, 0%, 51%, 0.1);
2222 padding: 24px;
2223 }
2224
2225 .eshb_easy_hotel_help_support_callback .help-col h3 {
2226 margin-top: 0;
2227 margin-bottom: 16px;
2228 font-size: 20px;
2229 font-weight: 700;
2230 color: #111;
2231 letter-spacing: 0.01em;
2232 }
2233
2234 .eshb_easy_hotel_help_support_callback .help-col .fa-facebook,
2235 .eshb_easy_hotel_help_support_callback .help-col .fa-youtube,
2236 .eshb_easy_hotel_help_support_callback .help-col .fa-linkedin {
2237 padding: 3px 5px;
2238 font-size: 20px;
2239 margin-right: 4px;
2240 }
2241
2242 .eshb_easy_hotel_help_support_callback .help-col p,
2243 .eshb_easy_hotel_help_support_callback .help-col ul {
2244 margin-bottom: 0.7em;
2245 }
2246
2247 .eshb_easy_hotel_help_support_callback .help-col ul {
2248 padding-left: 18px;
2249 }
2250
2251 .eshb_easy_hotel_help_support_callback .help-col a {
2252 display: inline-block;
2253 background: linear-gradient(90deg, #ab8965 0%, #70533a 100%);
2254 text-decoration: none;
2255 font-weight: 600;
2256 padding: 10px 22px;
2257 border-radius: 6px;
2258 margin-top: 10px;
2259 box-shadow: 0 1px 4px rgba(171, 137, 101, 0.08);
2260 transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
2261 font-size: 1em;
2262 }
2263
2264 .eshb_easy_hotel_help_support_callback .help-col a:hover {
2265 background: linear-gradient(90deg, #70533a 0%, #ab8965 100%);
2266 box-shadow: 0 4px 16px rgba(171, 137, 101, 0.18);
2267 transform: translateY(-2px) scale(1.04);
2268 text-decoration: none;
2269 }
2270
2271 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist {
2272 display: flex;
2273 flex-wrap: wrap;
2274 gap: 24px;
2275 }
2276
2277 .eshb_easy_hotel_help_support_callback .eshb-video-player {
2278 flex: 2 1 320px;
2279 min-width: 320px;
2280 }
2281 @media only screen and (max-width: 1024px) {
2282 .eshb_easy_hotel_help_support_callback .eshb-video-player {
2283 flex: 1 !important;
2284 }
2285 }
2286
2287 .eshb_easy_hotel_help_support_callback .eshb-video-player iframe {
2288 width: 100%;
2289 min-height: 220px;
2290 border-radius: 8px;
2291 }
2292 @media only screen and (max-width: 1024px) {
2293 .eshb_easy_hotel_help_support_callback .eshb-video-player iframe {
2294 min-height: 160px;
2295 width: auto !important;
2296 }
2297 }
2298
2299 .eshb_easy_hotel_help_support_callback .eshb-playlist-sidebar {
2300 flex: 1 1 180px;
2301 min-width: 180px;
2302 }
2303 @media only screen and (max-width: 1024px) {
2304 .eshb_easy_hotel_help_support_callback .eshb-playlist-sidebar {
2305 flex: 1 !important;
2306 width: 100% !important;
2307 }
2308 }
2309
2310 .eshb_easy_hotel_help_support_callback .eshb-playlist-item {
2311 background: #f8f6f3;
2312 border: none;
2313 border-radius: 8px;
2314 padding: 8px;
2315 cursor: pointer;
2316 display: flex;
2317 align-items: center;
2318 gap: 10px;
2319 transition: background 0.15s;
2320 }
2321
2322 .eshb_easy_hotel_help_support_callback .eshb-playlist-item:hover {
2323 background: #f0e8df;
2324 }
2325
2326 @media (max-width: 900px) {
2327 .eshb_easy_hotel_help_support_callback .help-col-container {
2328 grid-template-columns: 1fr;
2329 gap: 18px;
2330 }
2331 .eshb_easy_hotel_help_support_callback .help-col {
2332 min-width: 0;
2333 }
2334 .eshb_easy_hotel_help_support_callback .eshb-youtube-playlist {
2335 flex-direction: column;
2336 }
2337 }
2338 .eshb_easy_hotel_help_support_callback .eshb-social-icons a {
2339 display: inline-block;
2340 padding: 4px 7px;
2341 border-radius: 5px;
2342 margin-right: 6px;
2343 background: #4360ee;
2344 transition: background 0.15s;
2345 font-size: 20px;
2346 line-height: 1;
2347 color: #fff !important;
2348 }
2349
2350 .eshb_easy_hotel_help_support_callback .eshb-social-icons a:hover {
2351 background: #e6e6e6;
2352 }
2353
2354 .eshb_easy_hotel_help_support_callback .help-col .btn-docs {
2355 background: #e8f0fe;
2356 color: #4360ee;
2357 font-weight: 600;
2358 }
2359
2360 .eshb_easy_hotel_help_support_callback .help-col .btn-docs:hover {
2361 background: #4360ee;
2362 color: #fff;
2363 }
2364
2365 .eshb_easy_hotel_help_support_callback .help-col .btn-support {
2366 background: #eafaf1;
2367 color: #00bfae;
2368 font-weight: 600;
2369 }
2370
2371 .eshb_easy_hotel_help_support_callback .help-col .btn-support:hover {
2372 background: #00bfae;
2373 color: #fff;
2374 }
2375
2376 .eshb_easy_hotel_help_support_callback .help-col .btn-community {
2377 background: #fff3e0;
2378 color: #ff9800;
2379 font-weight: 600;
2380 }
2381
2382 .eshb_easy_hotel_help_support_callback .help-col .btn-community:hover {
2383 background: #ff9800;
2384 color: #fff;
2385 }
2386
2387 /* Dashicon backgrounds for Help & Support boxes */
2388 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg {
2389 display: inline-flex;
2390 align-items: center;
2391 justify-content: center;
2392 width: 38px;
2393 height: 38px;
2394 border-radius: 50%;
2395 margin-right: 10px;
2396 font-size: 22px;
2397 background: #e8f0fe;
2398 color: #4360ee;
2399 box-shadow: 0 1px 4px rgba(171, 137, 101, 0.06);
2400 }
2401
2402 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.docs {
2403 background: #e8f0fe;
2404 color: #4360ee;
2405 }
2406
2407 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.support {
2408 background: #eafaf1;
2409 color: #00bfae;
2410 }
2411
2412 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.community {
2413 background: #fff3e0;
2414 color: #ff9800;
2415 }
2416
2417 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg .dashicons {
2418 font-size: 22px;
2419 width: 22px;
2420 height: 22px;
2421 line-height: 1;
2422 }
2423
2424 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.follow {
2425 background: #f3e8fd;
2426 color: #8e24aa;
2427 }
2428
2429 .eshb_easy_hotel_help_support_callback .eshb-dashicon-bg.video {
2430 background: #fdeaea;
2431 color: #ff0000;
2432 }
2433
2434 .eshb_easy_hotel_help_support_callback .help-col-video {
2435 width: 100%;
2436 max-width: -webkit-fill-available;
2437 background: #fff;
2438 border-radius: 14px;
2439 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
2440 padding: 32px 28px 24px 28px;
2441 margin-top: 32px;
2442 margin-bottom: 0;
2443 border: 1px solid #f0f0f0;
2444 }
2445
2446 @media (max-width: 900px) {
2447 .eshb_easy_hotel_help_support_callback .help-col-video {
2448 padding: 22px 10px 18px 10px;
2449 }
2450 }