PluginProbe
Booking Calendar / 10.15.7
Booking Calendar v10.15.7
11.8.1 11.8 11.7 11.6.1 11.6 11.5 11.4.3 11.4.2 11.4.1 11.4 11.3 11.2.1 11.2 11.1 11.0 10.15.7 10.15.6 10.1.3 10.10 10.10.1 10.10.2 10.11 10.11.2 10.11.3 10.11.4 All 201 releases
booking / css / client.css

client.css in Booking Calendar 10.15.7, at css/client.css

2,040 lines 63.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * @version 1.1
3 * @package: Booking Calendar — Front-End
4 * @author wpdevelop
5 * @site https://wpbookingcalendar.com/
6 * @email info@wpbookingcalendar.com
7 * @modified 2023-11-11, 2025-08-17
8 * (refactored: comments + dead rules removed)
9 */
10
11 /* ========================================================================== */
12 /* CSS Variables — shared tokens */
13 /* ========================================================================== */
14 :root {
15 --wpbc_form-button-light-size-height: 43px;
16 }
17
18 /* ========================================================================== */
19 /* Booking Form: global structure + variants */
20 /* What: layout scaffolding for form/calendar blocks and simple themes */
21 /* ========================================================================== */
22 /* “Form center” layout (Free) */
23 .wpbc_booking_form_structure.wpbc_form_center,
24 .wpbc_booking_form_structure.wpbc_form_center > .wpbc__form__div { /* FixIn: 8.8.3.10 */
25 display: flex;
26 flex-flow: column wrap;
27 justify-content: space-between;
28 align-items: center;
29 }
30 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_calendar,
31 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_form {
32 flex: 1 1 auto;
33 margin-bottom: 1em;
34 }
35 /* FixIn: 9.8.12.1 — sizing in “center” template */
36 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_calendar,
37 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_form {
38 width: Min(350px, 100%);
39 }
40 .wpbc_booking_form_structure.wpbc_form_center .wpdev-form-control-wrap {
41 display: flex;
42 }
43 .wpbc_booking_form_structure.wpbc_form_center .wpbc_times_selector,
44 .wpbc_booking_form_structure.wpbc_form_center .wpbc-form-element-checkbox {
45 max-width: Max(24em, 440px);
46 justify-content: flex-start;
47 }
48
49 @media (max-width: 782px) {
50 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_calendar .wpbc_change_over_triangle {
51 width: 100%;
52 }
53 .wpbc_booking_form_structure.wpbc_form_center .wpbc_times_selector,
54 .wpbc_booking_form_structure.wpbc_form_center .wpbc-form-element-checkbox {
55 max-width: 100%;
56 }
57 }
58
59 /* “Dark” variant — tweak text colors inside form area */
60 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form label {
61 color: #ddd;
62 }
63 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form input[type="text"],
64 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form input[type="email"],
65 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form textarea,
66 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form select {
67 color: #000;
68 }
69
70 /* “Form right” layout — calendar + form side‑by‑side (responsive) */
71 /* FixIn: 9.6.1.3, 9.6.2.6 */
72 .wpbc_booking_form_structure.wpbc_form_right {
73 width: 100%;
74 display: flex;
75 flex-flow: row wrap;
76 align-items: flex-start;
77 justify-content: flex-start;
78 }
79 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_calendar {
80 margin-right: 20px;
81 flex: 1 1 auto;
82 }
83 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form {
84 margin-top: -20px;
85 flex: 1 1 300px;
86 display: flex;
87 flex-flow: row wrap;
88 justify-content: flex-start;
89 align-items: flex-start;
90 }
91 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form > * {
92 margin: 15px 0;
93 flex: 0 1 100%;
94 }
95 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form .form-group.wpbc-form-element-rangetime,
96 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form .form-group.wpbc-form-element-textarea,
97 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form .form-group:last-child {
98 flex: 1 1 auto;
99 width: 100%;
100 }
101 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form .form-group.wpbc-form-element-textarea textarea {
102 width: 90%;
103 }
104
105 /* Form footer line wrap */
106 .wpbc_booking_form_footer {
107 clear: both;
108 width: 100%;
109 }
110
111
112 /* ========================================================================== */
113 /* Booking Form: general body + fields */
114 /* What: basic spacing, inputs, selects, and resources selector */
115 /* ========================================================================== */
116 form.booking_form {
117 text-align: left;
118 }
119
120 .booking_form .booking_form_div {
121 margin-left: auto;
122 margin-right: auto;
123 }
124
125 .booking_form .form-group {
126 margin: 15px 0;
127 }
128
129 /* Resource selector (drop‑down above the form) */
130 .resource_selection_div {
131 margin: 40px 0;
132 }
133 .resource_selection_div select {
134 margin: 0 1em;
135 }
136
137 /* Text-like controls */
138 .booking_form_div textarea,
139 .booking_form_div input[type="text"],
140 .booking_form_div input[type="email"],
141 .booking_form_div select {
142 border-color: #DFDFDF;
143 border-radius: 4px;
144 border-style: solid;
145 border-width: 1px;
146 vertical-align: baseline;
147 }
148
149 /* Time inputs (small width) */
150 .booking_form input.wpdev-validates-as-time {
151 width: 50px;
152 }
153
154 /* Buttons alignment */
155 .booking_form input[type="button"],
156 .booking_form input[type="submit"] {
157 width: auto;
158 vertical-align: middle;
159 }
160
161 /* Checkbox/Radio list spacing */
162 .booking_form .wpdev-checkbox .wpdev-list-item,
163 .booking_form .wpdev-radio .wpdev-list-item {
164 margin-right: 0.5em;
165 }
166
167 /* Focus ring for all focusable inputs */
168 /* FixIn: 9.6.2.5 */
169 .booking_form input[type="text"]:focus,
170 .booking_form input[type="password"]:focus,
171 .booking_form input[type="color"]:focus,
172 .booking_form input[type="date"]:focus,
173 .booking_form input[type="datetime"]:focus,
174 .booking_form input[type="datetime-local"]:focus,
175 .booking_form input[type="email"]:focus,
176 .booking_form input[type="month"]:focus,
177 .booking_form input[type="number"]:focus,
178 .booking_form input[type="search"]:focus,
179 .booking_form input[type="tel"]:focus,
180 .booking_form input[type="time"]:focus,
181 .booking_form input[type="url"]:focus,
182 .booking_form input[type="week"]:focus,
183 .booking_form input[type="checkbox"]:focus,
184 .booking_form input[type="radio"]:focus,
185 .booking_form select:focus,
186 .booking_form textarea:focus {
187 box-shadow: 0 0 2px #2d7eff;
188 outline: none;
189 border-color: #567cb8;
190 }
191
192 /* Disabled/Booked select options */
193 .booking_form_div select option.booked,
194 .booking_form_div select option:disabled {
195 color: #ddd;
196 }
197
198 /* Small selects (visitors count) */
199 .booking_form_div select.col-md-1 {
200 float: none;
201 padding: 2px 8px;
202 min-width: 4em;
203 }
204
205
206 /* ========================================================================== */
207 /* Buttons (front-end + payment form) */
208 /* What: generic button look; keep WordPress-like defaults */
209 /* ========================================================================== */
210 .wpbc-payment-form .btn,
211 .wpbc-payment-form .button,
212 .booking_form_div .btn,
213 .booking_form_div .button,
214 .booking_form_div .submit,
215 .booking_form_div .button-secondary {
216 background: #f7f7f7 none repeat scroll 0 0;
217 border-color: #ccc;
218 box-shadow: 0 1px 0 #eee;
219 color: #555;
220 vertical-align: top;
221 white-space: normal;
222 }
223
224 .booking_form_div .submit,
225 .booking_form_div .button,
226 .booking_form_div .button-primary,
227 .booking_form_div .button-secondary,
228 .booking_form_div .button-highlighted,
229 .booking_form_div #postcustomstuff .submit input {
230 border-style: solid;
231 border-width: 1px;
232 cursor: pointer;
233 font-size: 11px !important;
234 line-height: 16px;
235 padding: 2px 8px;
236 text-decoration: none;
237 font-weight: 600;
238 margin: 10px 0;
239 float: right;
240 border-radius: 11px;
241 -moz-box-sizing: content-box;
242 }
243
244 /* Fix overwrite issues by themes */
245 .booking_form_div input.btn-primary:hover {
246 background: #0044CC !important;
247 }
248
249 /* Pointer and disabled states */
250 .booking_form_div input[type="button"]:hover,
251 .wpbc-payment-form input[type="button"]:hover {
252 cursor: pointer !important;
253 }
254
255 .booking_form_div input[type="button"]:disabled:hover,
256 .wpbc-payment-form input[type="button"]:disabled:hover {
257 cursor: not-allowed !important;
258 }
259
260
261 /* ========================================================================== */
262 /* CAPTCHA */
263 /* What: layout for text captcha, image and input */
264 /* ========================================================================== */
265 .wpbc_text_captcha_container {
266 display: flex;
267 flex-flow: row wrap;
268 justify-content: flex-start;
269 align-items: flex-start;
270 }
271 .wpbc_container_booking_form .wpbc_bfb__field[data-type="captcha"] img.captcha_img,
272 .wpbc_container_booking_form .booking_form_div img.captcha_img {
273 vertical-align: middle;
274 box-shadow: none;
275 margin-left: 1em;
276 align-self: center;
277 }
278 .wpbc_container_booking_form .wpbc_bfb__field[data-type="captcha"] .captachinput,
279 .wpbc_container_booking_form .booking_form_div .captachinput {
280 width: 120px;
281 min-width: Min(120px, 100%);
282 max-width: 100%;
283 flex: 0 1 10em;
284 margin: 0;
285 }
286
287
288 /* ========================================================================== */
289 /* Generic separators + widget container */
290 /* What: hr styling and widget area tweaks */
291 /* ========================================================================== */
292 .booking_form_div hr {
293 margin: 0.5em 0;
294 border: none;
295 color: transparent;
296 background: #ececec;
297 height: 1.2px;
298 box-shadow: none;
299 width: 100%;
300 }
301
302 .widget_wpdev_booking {
303 width: 100%;
304 float: left;
305 margin: 5px 0;
306 }
307 .widget_wpdev_booking .booking_form input[type="radio"],
308 .widget_wpdev_booking .booking_form input[type="checkbox"] {
309 width: auto;
310 }
311
312
313 /* ========================================================================== */
314 /* Field wrapper + inline choice controls */
315 /* What: per‑field container sizing and checkbox/radio alignment */
316 /* ========================================================================== */
317
318 .wpdev-form-control-wrap {
319 display: inline-flex;
320 flex-flow: row wrap;
321 justify-content: flex-start;
322 align-items: center;
323 margin: 0.25em 0;
324 max-width: 100%;
325 width: 340px;
326 min-width: Min(8em, 100%);
327 }
328
329 @media (max-width: 782px) {
330 .wpdev-form-control-wrap {
331 display: flex;
332 width: 100%;
333 }
334 /* Keep checkboxes inline (avoid line breaks for small labels). */
335 .wpdev-form-control-wrap.wpbc_wrap_checkbox {
336 display: inline-flex;
337 width: auto; /* Avoids wrapping “Fee: [checkbox ...]” onto a new line */
338 }
339 }
340
341 /* Options groups (radio/checkbox lists) */
342 .wpdev-form-control-wrap .wpdev-radio,
343 .wpdev-form-control-wrap .wpdev-checkbox {
344 line-height: 100%;
345 }
346
347 .wpdev-form-control-wrap .wpdev-list-item {
348 display: inline-flex;
349 flex-flow: row wrap;
350 justify-content: flex-start;
351 align-items: center;
352 height: auto;
353 line-height: 2; /* FixIn: 10.3.0.3 */
354 }
355
356 .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item {
357 flex-flow: row nowrap;
358 }
359
360 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label,
361 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label:hover,
362 .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label,
363 .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label:hover {
364 display: inline-block;
365 }
366 .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label * {
367 vertical-align: baseline;
368 }
369
370 .wpdev-form-control-wrap .wpdev-list-item > * {
371 margin: auto;
372 }
373 .wpdev-form-control-wrap .wpdev-list-item label.wpdev-list-item-label {
374 margin-top: 0;
375 align-self: center;
376 }
377
378 /* Control alignment next to labels */
379 div.wpbc_container.wpbc_form .wpdev-form-control-wrap .wpdev-list-item input[type="checkbox"],
380 div.wpbc_container.wpbc_form .wpdev-form-control-wrap .wpdev-list-item input[type="radio"] {
381 margin: 0 0.1em; /* FixIn: 10.3.0.3 */
382 vertical-align: middle;
383 }
384 div.wpbc_container.wpbc_form .wpdev-form-control-wrap .wpdev-list-item input[type="checkbox"] {
385 margin-top: -2px;
386 }
387
388
389 /* ========================================================================== */
390 /* Legacy “Old Messages” (kept for compatibility) */
391 /* What: historic message styles used in some templates */
392 /* ========================================================================== */
393 .widget_wpdev_booking .booking_form .wpdev-help-message.wpdev-element-message {
394 font-size: 0.85em;
395 margin: 10px 4px 4px !important;
396 }
397 .widget_wpdev_booking .booking_form .wpdev-form-control-wrap .wpdev-help-message {
398 font-size: 0.85em;
399 margin: 2px 8px 2px 0 !important;
400 }
401
402 /* Messages during AJAX submission */
403 .submiting_content {
404 border: 1px solid #5C5;
405 font-size: 15px;
406 font-weight: 600;
407 height: 45px;
408 margin: 15px auto;
409 text-align: center;
410 width: 80%;
411 line-height: 1.5em;
412 padding: 10px 10% 14px !important;
413 }
414
415 /* Error look (Bootstrap-like) — FixIn: 8.7.11.10 */
416 .wpdevelop .alert-danger {
417 background-image: none;
418 background-color: #fff;
419 border-radius: 0 2px 2px 0;
420 border-width: 1px;
421 border-left: 4px solid #c23b3b;
422 }
423
424 /* Warning notes — FixIn: 9.6.2.4 */
425 .wpdev-help-message.alert.alert-warning,
426 .wpdev-help-message .alert.alert-warning {
427 color: #916c34;
428 background: #fff;
429 box-shadow: 0 0px 3px #e0e0e0;
430 border: 1px solid #ded1bc;
431 border-left: 3px solid #e09118;
432 border-radius: 2px;
433 margin: 2px 2px 2px 0px;
434 padding: 0.5em 1em;
435 vertical-align: top;
436 font-size: 0.9rem;
437 line-height: 1.4rem;
438 opacity: 1;
439 }
440 .booking_form .wpdev-checkbox .wpdev-help-message.alert.alert-warning {
441 line-height: inherit !important;
442 }
443
444 .wpdev-help-message.wpdev-element-message {
445 padding: 5px 5px 4px;
446 margin: 10px 2px;
447 vertical-align: middle;
448 display: inline-block;
449 }
450
451 /* Success/Thank-you note — FixIn: 9.6.2.3 */
452 .submiting_content.wpdev-help-message.alert.alert-warning.alert-success {
453 border: 1px solid #d5d5d5;
454 border-left: 5px solid #88b706;
455 background: #fff;
456 box-shadow: 0 1px 10px #ddd;
457 color: #707070;
458 padding: 11px 10px !important;
459 margin: auto;
460 height: auto;
461 font-size: 1.1em;
462 font-weight: 600;
463 line-height: 2em !important;
464 width: 94%;
465 }
466
467 /* Inline “form messages” row */
468 .form_bk_messages {
469 display: none;
470 float: left;
471 font-size: 14px;
472 font-weight: 600;
473 border: 1px solid #9DA;
474 background: #FEF9ED;
475 color: #555;
476 margin: 15px auto;
477 padding: 5px 10px;
478 text-align: center;
479 width: 100%;
480 clear: both;
481 }
482
483
484 /* ========================================================================== */
485 /* New Messages (current UX) */
486 /* What: message containers near fields and full-row notes */
487 /* ========================================================================== */
488 .wpbc_front_end__message_container_right,
489 .wpbc_front_end__message_container_left {
490 display: inline-flex;
491 flex-flow: row wrap;
492 justify-content: flex-start;
493 align-items: center;
494 margin: 10px 1em;
495 }
496 .wpbc__field .wpbc_front_end__message_container_right,
497 .wpbc__field .wpbc_front_end__message_container_left {
498 margin: 10px 1em 10px 0;
499 }
500 .wpbc_front_end__message_container_right .wpbc_front_end__message,
501 .wpbc_front_end__message_container_left .wpbc_front_end__message {
502 flex: 0 1 auto;
503 margin: 0;
504 line-height: 1.8em;
505 border-radius: 2px;
506 }
507
508 /* Hide icons for inline (near-field) messages */
509 .wpbc_front_end__message_container_right .wpbc_front_end__message .menu_icon,
510 .wpbc_front_end__message_container_left .wpbc_front_end__message .menu_icon {
511 display: none;
512 }
513
514 /* Inline warning/error variants */
515 .wpbc_front_end__message_container_right .wpbc_front_end__message.wpbc_fe_message_warning,
516 .wpbc_front_end__message_container_left .wpbc_front_end__message.wpbc_fe_message_warning {
517 border: none;
518 padding: 1px 20px 1px 0px;
519 color: var(--wpbc_form-label-error-color);
520 text-shadow: none;
521 box-shadow: none;
522 }
523 .wpbc_front_end__message_container_right .wpbc_front_end__message.wpbc_fe_message_error,
524 .wpbc_front_end__message_container_left .wpbc_front_end__message.wpbc_fe_message_error {
525 border-color: #dca7a7;
526 border-left-color: #c23b3b;
527 color: #a94442;
528 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
529 }
530
531 /* Full-row messages band */
532 .wpbc_front_end__message {
533 border-left: 4px solid #fff;
534 margin: 10px 0;
535 padding: 1px 20px 1px 10px;
536 line-height: 2.5em;
537 text-align: left;
538 border-top: 1px solid #d7d7d7;
539 border-right: 1px solid #d7d7d7;
540 border-bottom: 1px solid #d7d7d7;
541 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
542 display: inline-block;
543 }
544 .wpbc_fe_message_error.wpbc_front_end__message {
545 background: #ffffff;
546 }
547
548 /* Message icon spacing */
549 .wpbc_front_end__message i.menu_icon {
550 margin: 0 0.5em 0 0;
551 }
552
553 /* Standard message accent colors (left border & icons) */
554 .wpbc_front_end__message.wpbc_fe_message_info {
555 border-left-color: var( --wpbc_admin-theme-color, #00a0d2 );
556 }
557 .wpbc_front_end__message.wpbc_fe_message_success {
558 border-left-color: #46b450;
559 }
560 .wpbc_front_end__message.wpbc_fe_message_warning {
561 border-left-color: #e09118;
562 }
563 .wpbc_front_end__message.wpbc_fe_message_error {
564 border-left-color: #c23b3b;
565 }
566
567 .wpbc_front_end__message.wpbc_fe_message_info i.menu_icon {
568 color: #0084ad;
569 }
570 .wpbc_front_end__message.wpbc_fe_message_success i.menu_icon {
571 color: #00810b;
572 }
573 .wpbc_front_end__message.wpbc_fe_message_warning i.menu_icon {
574 color: #c17400;
575 }
576 .wpbc_front_end__message.wpbc_fe_message_error i.menu_icon {
577 color: #af5050;
578 }
579
580 /* “Alt” framed message style */
581 .wpbc_fe_message_alt.wpbc_front_end__message.wpbc_fe_message_info {
582 border: 2px solid var( --wpbc_admin-theme-color, #00a0d2 );
583 background: #fff;
584 border-left: 4px solid var( --wpbc_admin-theme-color, #00a0d2 );
585 box-shadow: 0 0 4px #cfcfcf;
586 }
587 .wpbc_fe_message_alt.wpbc_front_end__message.wpbc_fe_message_success {
588 border: 2px solid #00950d;
589 background: #fff;
590 border-left: 4px solid #00950d;
591 box-shadow: 0 0 4px #cfcfcf;
592 }
593 .wpbc_fe_message_alt.wpbc_front_end__message.wpbc_fe_message_warning {
594 border: 2px solid #c17400;
595 background: #fff;
596 border-left: 4px solid #e09118;
597 box-shadow: 0 0 4px #cfcfcf;
598 }
599 .wpbc_fe_message_alt.wpbc_front_end__message.wpbc_fe_message_error {
600 border: 2px solid #af5050;
601 background: #fff;
602 border-left: 4px solid #af5050;
603 box-shadow: 0 0 4px #cfcfcf;
604 }
605
606
607 /* ========================================================================== */
608 /* Misc helpers */
609 /* What: misc small rules: admin counter, popovers, tooltips, transforms */
610 /* ========================================================================== */
611
612 /* Booked Times title in tooltip */
613 .wpbc_booked_times_word {
614 font-weight: 600;
615 }
616
617 /* Garbage container (hidden) */
618 .booking_form_garbage {
619 display: none;
620 }
621
622 /* Help block spacing near inputs */
623 .wpdevelop .booking_form .help-block {
624 margin-bottom: 0;
625 margin-top: 0;
626 }
627
628 /* Admin bar booking count badge */
629 #wp-admin-bar-booking_options a span#booking-count {
630 background: #EEE;
631 border-radius: 10px;
632 color: #333;
633 display: inline;
634 font-size: 10px;
635 font-weight: 600;
636 padding: 2px 5px;
637 text-shadow: none;
638 }
639 #wp-admin-bar-booking_options a:hover span#booking-count {
640 background: #FFF;
641 color: #000;
642 }
643
644 /* Popover styles (Bootstrap-like) */
645 .wpdevelop.popover {
646 background: transparent;
647 border: none;
648 box-shadow: none;
649 width: auto !important;
650 z-index: 2147483647 !important;
651 }
652 .wpdevelop.popover.top .arrow {
653 border-top: 5px solid rgba(140, 140, 140, 0.8) !important;
654 }
655 .wpdevelop.popover.bottom .arrow {
656 border-bottom: 5px solid rgba(140, 140, 140, 0.8) !important;
657 }
658 .wpdevelop.popover.left .arrow {
659 border-left: 5px solid rgba(140, 140, 140, 0.8) !important;
660 }
661 .wpdevelop.popover.right .arrow {
662 border-right: 5px solid rgba(140, 140, 140, 0.8) !important;
663 }
664
665 .wpdevelop .popover-inner {
666 background: rgba(140, 140, 140, 0.8);
667 border-radius: 6px;
668 box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
669 overflow: hidden;
670 padding: 3px;
671 width: 150px;
672 color: #111;
673 }
674 .wpdevelop .popover-inner .popover-title {
675 background-color: #FFF;
676 border-bottom: 0;
677 border-radius: 3px 3px 0 0;
678 line-height: 1;
679 padding: 0;
680 font-size: 13px;
681 }
682 .wpdevelop .popover-inner .popover-content {
683 background-clip: padding-box;
684 background-color: #FFF;
685 border-radius: 0 0 3px 3px;
686 padding: 14px;
687 }
688 .wpdevelop .popover-content,
689 .wpdevelop .popover-content p,
690 .wpdevelop .popover-content ul,
691 .wpdevelop .popover-content ol {
692 color: #111;
693 }
694
695 /* Small tooltip text inside calendar */
696 .wpbc_calendar_tooltip_booking_details {
697 font-weight: normal !important;
698 font-size: 11px !important;
699 }
700
701 /* Loading / rotating icons + transforms */
702 .wpbc_animation_pause:before,
703 .wpbc_animation_pause {
704 animation-play-state: paused !important;
705 }
706
707 .wpbc_icn_autorenew::before,
708 .wpbc_spin,
709 .wpbc_spin:before {
710 -webkit-animation: spin 2s infinite linear;
711 -moz-animation: spin 2s infinite linear;
712 -o-animation: spin 2s infinite linear;
713 animation: spin 2s infinite linear;
714 }
715 @-moz-keyframes spin {
716 0% {
717 -moz-transform: rotate(0deg);
718 }
719 100% {
720 -moz-transform: rotate(359deg);
721 }
722 }
723 @-webkit-keyframes spin {
724 0% {
725 -webkit-transform: rotate(0deg);
726 }
727 100% {
728 -webkit-transform: rotate(359deg);
729 }
730 }
731 @-o-keyframes spin {
732 0% {
733 -o-transform: rotate(0deg);
734 }
735 100% {
736 -o-transform: rotate(359deg);
737 }
738 }
739 @keyframes spin {
740 0% {
741 -webkit-transform: rotate(0deg);
742 transform: rotate(0deg);
743 }
744 100% {
745 -webkit-transform: rotate(359deg);
746 transform: rotate(359deg);
747 }
748 }
749
750 .wpbc_rotate-90 {
751 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
752 -webkit-transform: rotate(90deg);
753 -moz-transform: rotate(90deg);
754 -ms-transform: rotate(90deg);
755 -o-transform: rotate(90deg);
756 transform: rotate(90deg);
757 }
758 .wpbc_rotate-180 {
759 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
760 -webkit-transform: rotate(180deg);
761 -moz-transform: rotate(180deg);
762 -ms-transform: rotate(180deg);
763 -o-transform: rotate(180deg);
764 transform: rotate(180deg);
765 }
766 .wpbc_rotate-270 {
767 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
768 -webkit-transform: rotate(270deg);
769 -moz-transform: rotate(270deg);
770 -ms-transform: rotate(270deg);
771 -o-transform: rotate(270deg);
772 transform: rotate(270deg);
773 }
774 .wpbc_flip-horizontal {
775 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
776 -webkit-transform: scale(-1, 1);
777 -moz-transform: scale(-1, 1);
778 -ms-transform: scale(-1, 1);
779 -o-transform: scale(-1, 1);
780 transform: scale(-1, 1);
781 }
782 .wpbc_flip-vertical {
783 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
784 -webkit-transform: scale(1, -1);
785 -moz-transform: scale(1, -1);
786 -ms-transform: scale(1, -1);
787 -o-transform: scale(1, -1);
788 transform: scale(1, -1);
789 }
790
791
792 /* ========================================================================== */
793 /* Mobile tweaks */
794 /* What: increase input sizes and stack side-by-side layouts */
795 /* ========================================================================== */
796 @media (max-width: 782px) {
797 .wpdevelop input[type="text"],
798 .wpdevelop input[type="email"],
799 .wpdevelop select {
800 font-size: 1.1em;
801 height: 36px; /* FixIn: 7.2.0.2 */
802 padding: 4px 8px;
803 }
804
805 /* FixIn: 8.0.1.5 — stack “form right” layout */
806 .wpbc_booking_form_structure.wpbc_form_right,
807 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_calendar,
808 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form {
809 width: 100%;
810 float: none;
811 margin-right: 0;
812 }
813 }
814
815 /* ========================================================================== */
816 /* Developer Hints (form hints) */
817 /* What: visual hints for developers inside forms */
818 /* ========================================================================== */
819
820 .booking_form .form-hints-dev {
821 margin: 1em 0;
822 border-bottom: 1px solid #eee;
823 }
824 .booking_form .form-hints-dev .dates-hints-dev {
825 padding: 2px 4px;
826 font-size: 85%;
827 color: #c7254e;
828 background-color: #f9f2f4;
829 border-radius: 2px;
830 }
831
832
833 /* ========================================================================== */
834 /* DEPRECATED LAYOUTS (kept for compatibility) */
835 /* What: older multi-column structures still used by some templates */
836 /* ========================================================================== */
837 /* 2‑column form with times — FixIn: 9.5.5.3 */
838 .wpbc_row {
839 display: flex;
840 flex-flow: row wrap;
841 justify-content: flex-start;
842 align-items: flex-start;
843 margin-top: 1em;
844 }
845 .wpbc_col {
846 flex: 0 1 1px;
847 margin-right: 4.1em;
848 }
849 .wpbc_col.wpbc_cal {
850 flex: 1 1 50%;
851 margin: 1em 0;
852 }
853 @media (max-width: 782px) {
854 .wpbc_col {
855 flex: 0 1 auto;
856 margin-right: 0;
857 min-width: 100%;
858 }
859 }
860 .wpbc_col.wpbc_times {
861 flex: 1 1 50%;
862 margin: 1em 0;
863 }
864 .wpbc_col.wpbc_cal > *,
865 .wpbc_col.wpbc_times > * {
866 width: 93%;
867 }
868
869 /* 2‑column general form — FixIn: 8.7.7.15 */
870 .wpbc_form_columns {
871 width: 99%;
872 margin-top: 1em;
873 }
874 .wpbc_form_columns .wpbc_form_row {
875 display: flex;
876 flex-flow: row wrap;
877 justify-content: space-between;
878 }
879 .wpbc_form_columns .wpbc_form_field {
880 flex: 1 1 14em;
881 display: flex;
882 flex-flow: row wrap;
883 justify-content: flex-start;
884 align-items: flex-start;
885 align-content: flex-start;
886 padding: 0 3% 0 0;
887 margin: 0.7em 0;
888 }
889 .wpbc_form_field.wpbc_cal_field {
890 display: block;
891 }
892 .wpbc_form_field.wpbc_cal_field > * {
893 max-width: 95%;
894 }
895 .wpbc_form_field.wpbc_cal_field .bk_calendar_frame {
896 margin: -0.75em 0 0;
897 }
898 @media (max-width: 782px) {
899 .wpbc_form_columns .wpbc_form_field {
900 flex: 1 1 100%
901 }
902 }
903 .wpbc_form_columns .wpbc_form_field label,
904 .wpbc_form_columns .wpbc_form_field label:hover {
905 flex: 0 1 auto;
906 margin-right: 2em;
907 display: flex;
908 flex-flow: column nowrap;
909 justify-content: center;
910 font-weight: 600;
911 }
912 .wpbc_form_columns .wpbc_form_field .wpdev-form-control-wrap {
913 width: 100%;
914 }
915 .booking_form .wpbc_form_columns .form-group .controls select,
916 .booking_form .wpbc_form_columns select,
917 .booking_form .wpbc_form_columns input[type="text"],
918 .booking_form .wpbc_form_columns input[type="email"] {
919 width: 95%;
920 }
921 .booking_form .wpbc_form_columns textarea {
922 width: 98%;
923 }
924
925 /* Field help / description: flex with small margin */
926 .booking_form .wpbc_field_description {
927 flex: 1 1 100%;
928 margin-block-start: 10px;
929 }
930 .wpbc_bfb__help,
931 .wpdev-form-control-wrap + .wpbc_field_description {
932 font-size:0.9em;
933 }
934 .wpdev-form-control-wrap.wpbc_wrap_checkbox + .wpbc_field_description{
935 margin-block-start:10px;
936 }
937 /* 3‑column general form — FixIn: 8.8.2.6 */
938 .wpbc_form_columns_general .wpbc_form_row_general {
939 display: flex;
940 flex-flow: row wrap;
941 justify-content: space-between;
942 }
943 .wpbc_form_columns_general .wpbc_form_field_general {
944 flex: 0 1 0;
945 display: flex;
946 flex-flow: row wrap;
947 justify-content: flex-start;
948 align-items: baseline;
949 padding: 0 2% 0 0;
950 }
951 .wpbc_form_columns_general .wpbc_form_field_general:nth-child(1) {
952 min-width: 341px;
953 flex: 0 1 auto;
954 }
955 @media (max-width: 782px) {
956 .wpbc_change_over_triangle {
957 width: 100%;
958 }
959 .wpbc_form_columns_general .wpbc_form_field_general:nth-child(1),
960 .wpbc_form_columns_general .wpbc_form_field_general:nth-child(2) {
961 min-width: 100%;
962 flex: 1 1 auto;
963 margin-bottom: 2em;
964 }
965 }
966 .wpbc_form_columns_general .wpbc_form_field_general:nth-child(2) {
967 flex: 1 1 0;
968 padding: 0;
969 }
970 .wpbc_debug {
971 margin-right: 2em;
972 }
973 .wpbc_debug:last-of-type {
974 float: none;
975 }
976
977
978 /* ================================================================================================================== */
979 /* == Booking Calendar — Front-End CSS (v9.8+) */
980 /* == Conservative cleanup: only dead rules removed, grouped, and documented */
981 /* ================================================================================================================== */
982
983 /* ========================================================================== */
984 /* Form Container & Grid — rows, fields, calendar blocks */
985 /* What: base structure for booking-form rows and fields */
986 /* ========================================================================== */
987 .wpbc_container_booking_form .bk_calendar_frame,
988 .wpbc_container_booking_form .block_hints {
989 margin-bottom: 5px;
990 }
991
992 .wpbc_container_booking_form .wpbc_calendar_wraper {
993 margin-bottom: 10px;
994 }
995
996 /* Overall container width & top spacing */
997 .wpbc_container_booking_form {
998 width: 99%;
999 margin-top: 1em;
1000 }
1001
1002 /* Unified row: flex layout with small gap */
1003 .wpbc_container_booking_form .wpbc__row {
1004 display: flex;
1005 flex-flow: row wrap;
1006 justify-content: space-between;
1007 align-items: flex-start;
1008 width: 100%;
1009 gap: 3%;
1010 }
1011
1012 /* Generic field column (except calendar field) */
1013 .wpbc_container_booking_form .wpbc__field:not(.wpbc__cal) {
1014 flex: 1 1 14em;
1015 display: flex;
1016 flex-flow: row wrap;
1017 justify-content: flex-start;
1018 align-items: flex-start;
1019 align-content: normal;
1020 margin: 0.7em 0;
1021 }
1022 .wpbc_container_booking_form .wpbc__field:first-child {
1023 padding-left: 0;
1024 }
1025 .wpbc_container_booking_form .wpbc__field:last-child {
1026 padding-right: 0;
1027 }
1028
1029 /* Calendar wrapper sizing inside field */
1030 .wpbc_container_booking_form .wpbc__field .wpbc_calendar_wraper {
1031 width: 100%;
1032 }
1033
1034 /* Stack fields on narrow screens. 10.15.1.2. */
1035 @media (max-width: 782px) {
1036 .wpbc_container_booking_form .wpbc__field:not(.wpbc__cal) {
1037 flex: 1 1 100% !important;
1038 padding: 0;
1039 }
1040 }
1041
1042 /* Spacer column element */
1043 .wpbc_container_booking_form .wpbc__spacer {
1044 flex: 0 1 auto;
1045 padding: 0;
1046 margin: 0;
1047 display: inline-block;
1048 }
1049
1050 /* Calendar field specifics */
1051 .wpbc__field.wpbc__cal > * {
1052 max-width: 100%;
1053 }
1054 .wpbc_bfb_form:has(:not(.wpbc__field)) .bk_calendar_frame,
1055 .wpbc__field .bk_calendar_frame {
1056 margin-top: calc(0.25em + 8px);
1057 }
1058 .wpbc__field.wpbc__cal .bk_calendar_frame {
1059 margin: -0.75em 0 0;
1060 }
1061
1062 /* Field labels: inline-flex with small gap */
1063 .wpbc_container_booking_form .wpbc__field label:not(.wpbc_static_text),
1064 .wpbc_container_booking_form .wpbc__field label:not(.wpbc_static_text):hover {
1065 flex: 0 1 auto;
1066 display: flex;
1067 flex-flow: row wrap;
1068 justify-content: flex-start;
1069 align-items: center;
1070 font-weight:600;
1071 gap: 0.2em;
1072 }
1073 .wpbc_container_booking_form .wpbc__field label:has(input[type="checkbox"]),
1074 .wpbc_container_booking_form .wpbc__field label:has(input[type="checkbox"]):hover {
1075 display: block;
1076 }
1077 /* Fixes for inline checkbox texts. Usually it is checkbox with links. */
1078 div div.wpbc_container.wpbc_form .wpbc__field label.wpbc_inline_checkbox * {
1079 padding: 0;
1080 margin: 0;
1081 }
1082 div.wpbc_container.wpbc_form .wpbc__field label.wpbc_inline_checkbox,
1083 div.wpbc_container.wpbc_form .wpbc__field label.wpbc_inline_checkbox:hover {
1084 font-weight: 400;
1085 }
1086 div.wpbc_container.wpbc_form .wpbc__field label.wpbc_inline_checkbox span,
1087 div.wpbc_container.wpbc_form .wpbc__field label.wpbc_inline_checkbox a {
1088 display: inline-flex;
1089 align-items: center;
1090 }
1091 div.wpbc_container.wpbc_form .wpbc__field label.wpbc_inline_checkbox * {
1092 vertical-align: baseline;
1093 }
1094
1095 /* Inputs inside field columns */
1096 .wpbc_container_booking_form .wpbc__field .wpdev-form-control-wrap {
1097 width: 100%;
1098 }
1099 .wpbc_container_booking_form .wpbc__field .wpdev-form-control-wrap.wpbc_wrap_radio,
1100 .wpbc_container_booking_form .wpbc__field .wpdev-form-control-wrap.wpbc_wrap_checkbox {
1101 align-self: center;
1102 }
1103
1104 .wpbc_container_booking_form .wpbc__field .form-group .controls select,
1105 .wpbc_container_booking_form .wpbc__field select,
1106 .wpbc_container_booking_form .wpbc__field input[type="text"],
1107 .wpbc_container_booking_form .wpbc__field input[type="email"] {
1108 width: 100%;
1109 }
1110
1111 .wpbc_container_booking_form .wpbc__field textarea,
1112 .wpbc_container_booking_form textarea {
1113 width: 100%;
1114 }
1115
1116 /* Inline row variant (fields in a single line) — FixIn: 9.8.8.1 */
1117 .wpbc_row_inline {
1118 display: flex;
1119 flex-flow: row wrap;
1120 justify-content: flex-start;
1121 align-items: flex-start;
1122 flex: 1 1 auto;
1123 }
1124 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline label {
1125 flex-flow: row wrap;
1126 justify-content: flex-start;
1127 align-items: center;
1128 flex: 1 1 auto;
1129 }
1130 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline .wpdev-form-control-wrap,
1131 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline label .wpdev-form-control-wrap {
1132 width: auto;
1133 margin: 0 5px;
1134 min-width: 1em;
1135 }
1136
1137 /* ========================================================================== */
1138 /* Calendar Next to Form — two-column helper */
1139 /* What: helper wrappers when calendar sits alongside the form */
1140 /* ========================================================================== */
1141 .wpbc_sections {
1142 display: flex;
1143 flex-flow: row wrap;
1144 justify-content: flex-start;
1145 align-items: flex-start;
1146 align-content: flex-start;
1147 }
1148 .wpbc_section_50 {
1149 flex: 1 1 48%;
1150 margin-bottom: 2em;
1151 }
1152 .wpbc_section_spacer {
1153 flex: 1 1 2%;
1154 }
1155 .wpbc_section_100 {
1156 flex: 0 1 96%;
1157 display: flex;
1158 flex-flow: row wrap;
1159 justify-content: flex-start;
1160 align-items: flex-start;
1161 margin-bottom: 1em;
1162 }
1163 .wpbc_section_100 span,
1164 .wpbc_section_100 p,
1165 .wpbc_section_100 .wpdev-form-control-wrap {
1166 flex: 1 1 100%;
1167 }
1168 .wpbc_section_100 .wpdev-form-control-wrap {
1169 display: flex;
1170 }
1171 .wpbc_container_booking_form .wpbc_section_100 textarea {
1172 flex: 1 1 100%;
1173 }
1174
1175
1176 /* ========================================================================== */
1177 /* Field Sizing — width & height defaults */
1178 /* What: sensible fixed/relative widths; line heights for selects/textarea */
1179 /* ========================================================================== */
1180 .wpbc_container_booking_form p {
1181 padding: 0.25em 0;
1182 }
1183
1184 /* Width defaults for inputs/select/textarea */
1185 .wpbc_container_booking_form select,
1186 .wpbc_container_booking_form input[type="text"],
1187 .wpbc_container_booking_form input[type="email"],
1188 .wpbc_container_booking_form textarea {
1189 max-width: Min(30em, 100%);
1190 width: 340px;
1191 min-width: Min(8em, 100%);
1192 }
1193
1194 /* In column layouts, ensure controls can stretch */
1195 .wpbc_container_booking_form .wpbc__field select,
1196 .wpbc_container_booking_form .wpbc__field input[type="text"],
1197 .wpbc_container_booking_form .wpbc__field input[type="email"],
1198 .wpbc_container_booking_form .wpbc__field textarea {
1199 max-width: 100%;
1200 }
1201
1202 /* Textareas with specific cols — allow auto width */
1203 .wpbc_container.wpbc_container_booking_form textarea[cols*="0"],
1204 .wpbc_container.wpbc_container_booking_form textarea[cols*="1"],
1205 .wpbc_container.wpbc_container_booking_form textarea[cols*="2"],
1206 .wpbc_container.wpbc_container_booking_form textarea[cols*="3"],
1207 .wpbc_container.wpbc_container_booking_form textarea[cols*="4"],
1208 .wpbc_container.wpbc_container_booking_form textarea[cols*="5"],
1209 .wpbc_container.wpbc_container_booking_form textarea[cols*="6"],
1210 .wpbc_container.wpbc_container_booking_form textarea[cols*="7"],
1211 .wpbc_container.wpbc_container_booking_form textarea[cols*="8"],
1212 .wpbc_container.wpbc_container_booking_form textarea[cols*="9"] {
1213 width: auto;
1214 }
1215
1216 /* Height/line-height for selects */
1217 .resource_selection_div select,
1218 .wpbc_container.wpbc_container_booking_form select {
1219 height: auto;
1220 font-size: 1rem;
1221 line-height: 2.4em;
1222 padding: 0 0.5em;
1223 }
1224 .resource_selection_div select option {
1225 line-height: 2.4em;
1226 padding: 0.5em 0.5em;
1227 outline: none;
1228 }
1229
1230 /* Textareas with row hints — allow auto height */
1231 .wpbc_container.wpbc_container_booking_form textarea[rows*="0"],
1232 .wpbc_container.wpbc_container_booking_form textarea[rows*="1"],
1233 .wpbc_container.wpbc_container_booking_form textarea[rows*="2"],
1234 .wpbc_container.wpbc_container_booking_form textarea[rows*="3"],
1235 .wpbc_container.wpbc_container_booking_form textarea[rows*="4"],
1236 .wpbc_container.wpbc_container_booking_form textarea[rows*="5"],
1237 .wpbc_container.wpbc_container_booking_form textarea[rows*="6"],
1238 .wpbc_container.wpbc_container_booking_form textarea[rows*="7"],
1239 .wpbc_container.wpbc_container_booking_form textarea[rows*="8"],
1240 .wpbc_container.wpbc_container_booking_form textarea[rows*="9"] {
1241 height: auto;
1242 }
1243
1244 /* Theme quirks: fix min heights in some WP themes (e.g., Twenty Five) */
1245 .is-layout-constrained .wpbc_form { /* FixIn: 10.14.2.1. */
1246 margin: 5px auto 0;
1247 max-width: Min(900px, 100%);
1248 font-size: 16px;
1249 font-weight: 400;
1250 padding: 0 10px;
1251 }
1252
1253 /* Narrow screens: table and field widths */
1254 @media (max-width: 670px) {
1255 div .wpbc_ideal_payment_table tr td {
1256 display: block;
1257 }
1258 div .wpbc_container_booking_form select,
1259 div .wpbc_container_booking_form input[type="text"],
1260 div .wpbc_container_booking_form input[type="email"],
1261 div .wpbc_container_booking_form textarea {
1262 max-width: 98%;
1263 width: 98%;
1264 border: 1px solid;
1265 }
1266 }
1267
1268
1269 /* ========================================================================== */
1270 /* Booking Form — “Simple / Wizard” variant */
1271 /* What: admin preview + front-end wizard behaviors */
1272 /* ========================================================================== */
1273
1274 /* Admin preview scaling */
1275 .wpbc_center_preview .bk_calendar_frame,
1276 .wpbc_center_preview .wpbc__form__div .bk_calendar_frame * {
1277 font-size: 14px;
1278 }
1279 .wpbc_center_preview,
1280 .wpbc_center_preview .wpbc__form__div * {
1281 font-size: 16px;
1282 line-height: 2;
1283 }
1284
1285 /* Add Booking (admin) */
1286 .add_booking_page_content,
1287 .add_booking_page_content p {
1288 font-size: 15px;
1289 line-height: 2;
1290 }
1291
1292 #wpbc-new-admin-page .wpbc_container.wpbc_form input.wpbc_button_light {
1293 font-size: 1.15em;
1294 line-height: 100%;
1295 min-height: var(--wpbc_form-button-light-size-height);
1296 }
1297
1298 /* Datepicker fine text */
1299 .datepick-inline .datepick-days-cell div.date-content-bottom,
1300 .datepick-inline .datepick-days-cell div.date-content-top {
1301 font-size: 0.7em;
1302 }
1303
1304 /* Simple form base width */
1305 .wpbc_booking_form_simple .wpbc__form__div {
1306 width: 100%;
1307 }
1308
1309 /* Wizard: center the calendar block — FixIn: 10.9.2.1 */
1310 .wpbc_booking_form_simple .wpbc_wizard_step .wpbc_r_calendar.wpbc__field label,
1311 .wpbc_booking_form_simple .wpbc_wizard_step .wpbc_r_calendar.wpbc__field .wpbc_calendar_wraper {
1312 display: flex;
1313 flex-flow: column nowrap;
1314 align-items: center;
1315 justify-content: flex-start;
1316 }
1317
1318 /* Wizard: legend alignment — FixIn: 10.9.2.1 */
1319 .wpbc_booking_form_simple .wpbc_wizard_step .wpbc_r_calendar.wpbc__field .block_hints {
1320 max-width: 550px;
1321 justify-content: space-around;
1322 }
1323
1324 /* Wizard: labels span full width in this layout */
1325 .wpbc_container_booking_form .wpbc_booking_form_simple .wpbc__field label {
1326 flex: 1 1 100%;
1327 line-height: 2.5;
1328 }
1329
1330 /* Near-field warning spacing */
1331 .wpbc_booking_form_simple .wpbc_front_end__message_container_right {
1332 margin: 10px 0;
1333 }
1334
1335
1336 /* ========================================================================== */
1337 /* Thank You — Confirmation section */
1338 /* What: post-booking message container, headings and layout */
1339 /* ========================================================================== */
1340 .wpbc_ty_hide {
1341 display: none !important;
1342 }
1343
1344 .wpbc_after_booking_thank_you_section {
1345 display: flex;
1346 flex-flow: column wrap;
1347 justify-content: flex-start;
1348 align-items: flex-start;
1349 max-width: 65rem;
1350 margin: auto;
1351 }
1352 .wpbc_after_booking_thank_you_section * {
1353 text-shadow: none;
1354 }
1355
1356 /* Lead “thank you” line */
1357 .wpbc_after_booking_thank_you_section .wpbc_ty__message {
1358 flex: 1 1 auto;
1359 padding: 0;
1360 margin: 30px 0 10px;
1361 font-size: 20px;
1362 font-weight: 400;
1363 }
1364
1365 /* Container + default text colors */
1366 .wpbc_after_booking_thank_you_section .wpbc_ty__container,
1367 .wpbc_after_booking_thank_you_section .wpbc_ty__container * {
1368 color: #444;
1369 }
1370
1371 /* Fix color issue for embedded PayPal iframe */
1372 .wpbc_after_booking_thank_you_section .wpbc_ty__container iframe {
1373 color: transparent;
1374 }
1375
1376 /* Confirmation card */
1377 .wpbc_after_booking_thank_you_section .wpbc_ty__container {
1378 flex: 1 1 100%;
1379 display: flex;
1380 flex-flow: column wrap;
1381 justify-content: flex-start;
1382 align-items: flex-start;
1383 box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 6px 0px;
1384 border: 1px solid rgb(204, 204, 204);
1385 border-radius: 2px;
1386 background: #FFF;
1387 color: #707070;
1388 padding: 10px 15px;
1389 box-sizing: border-box;
1390 margin: auto;
1391 font-size: 1rem;
1392 font-weight: 400;
1393 line-height: 2.2em;
1394 text-align: left;
1395 max-width: 100%;
1396 width: 100%;
1397 }
1398
1399 /* Header strip with booking ID */
1400 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__header {
1401 flex: 1 1 100%;
1402 border-left: 5px solid #88b706;
1403 padding: 5px 20px;
1404 font-size: 18px;
1405 width: 100%;
1406 margin-left: -10px;
1407 line-height: 36px;
1408 font-weight: 400;
1409 }
1410
1411 /* Two-column body */
1412 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content {
1413 flex: 1 1 100%;
1414 margin-top: 10px;
1415 width: 100%;
1416 display: flex;
1417 flex-flow: row wrap;
1418 justify-content: space-between;
1419 align-items: flex-start;
1420 word-break: normal;
1421 hyphens: none;
1422 }
1423
1424 /* Content blocks */
1425 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text {
1426 flex: 1 1 100%;
1427 word-break: break-word;
1428 padding: 10px 0;
1429 border-top: 1px solid #efefef;
1430 }
1431
1432 /* Optional 2-column content block */
1433 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text.wpbc_cols_2 {
1434 flex: 1 1 22em;
1435 width: 48%;
1436 margin-right: 1%;
1437 }
1438 @media (max-width: 670px) {
1439 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text.wpbc_cols_2 {
1440 flex: 1 1 100%;
1441 }
1442 }
1443
1444 /* Section headers and small headings */
1445 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .wpbc_ty__section_header {
1446 font-size: 18px;
1447 line-height: 2em;
1448 margin-bottom: 1.2em;
1449 }
1450 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text h4 {
1451 font-size: 18px;
1452 line-height: 1.8em;
1453 }
1454
1455 /* Costs section alignment */
1456 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .wpbc_ty__section_text_costs {
1457 text-align: right;
1458 padding: 0 2em;
1459 }
1460
1461 /* Coupon small note */
1462 .coupon_description_wrapper {
1463 font-size: 0.7em;
1464 font-weight: 400;
1465 margin-left: 0.8em;
1466 display: inline-flex;
1467 flex-flow: row wrap;
1468 justify-content: flex-start;
1469 align-items: center;
1470 }
1471 .wpbc_after_booking_thank_you_section .coupon_description_wrapper {
1472 font-size: 1em;
1473 }
1474
1475 /* Gateways area block */
1476 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text.wpbc_ty__content_gateways {
1477 flex: 1 1 100%;
1478 display: flex;
1479 flex-flow: row wrap;
1480 justify-content: space-around;
1481 align-items: flex-start;
1482 border-top: 0 solid #efefef;
1483 }
1484
1485
1486 /* ========================================================================== */
1487 /* Payment Gateways — layout & per-gateway buttons */
1488 /* What: gateway cards, iDEAL table, button skins (Stripe/PayPal variants) */
1489 /* ========================================================================== */
1490 .wpbc_ty__content_gateways .wpbc_ty__gateway {
1491 flex: 1 1 100%;
1492 margin: 0 5px 1em;
1493 display: flex;
1494 flex-flow: row wrap;
1495 justify-content: flex-start;
1496 align-items: flex-start;
1497 }
1498 .wpbc_ty__content_gateways .wpbc_ty__gateway.wpbc_col_auto_width {
1499 flex: 0 1 auto;
1500 }
1501
1502 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form {
1503 flex: 0 1 auto;
1504 min-width: 260px;
1505 display: flex;
1506 flex-flow: row wrap;
1507 justify-content: flex-start;
1508 align-items: flex-start;
1509 }
1510 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form form {
1511 flex: 1 1 100%;
1512 display: flex;
1513 flex-flow: column wrap;
1514 justify-content: flex-start;
1515 align-items: center;
1516 }
1517 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form .wpbc_button_gw {
1518 flex: 1 1 100%;
1519 display: flex;
1520 flex-flow: column wrap;
1521 justify-content: flex-start;
1522 align-items: center;
1523 width: 100%;
1524 }
1525
1526 /* Small footnote under PayPal button */
1527 .wpbc_paypal_fee {
1528 font-size: 0.68em;
1529 vertical-align: text-top;
1530 line-height: 1em;
1531 margin: 7px 0;
1532 }
1533
1534 /* iDEAL table formatting (FixIn: 10.6.1.1) */
1535 table.wpbc_ideal_payment_table {
1536 margin: 10px 0;
1537 width: 100%;
1538 border: none;
1539 }
1540 .wpbc_ideal_payment_table td {
1541 padding: 10px 0;
1542 border: none;
1543 }
1544 .wpbc_ideal_payment_table td label {
1545 font-weight: 600;
1546 }
1547
1548
1549 /* ========================================================================== */
1550 /* Buttons — generic lightweight button */
1551 /* What: neutral button baseline used across front-end */
1552 /* ========================================================================== */
1553 .wpbc_container.wpbc_form input.wpbc_button_light,
1554 .wpbc_container.wpbc_form input.wpbc_button_light:focus,
1555 .wpbc_container.wpbc_form input.wpbc_button_light:hover,
1556 .wpbc_container .wpbc_button_light,
1557 .wpbc_container .wpbc_button_light:focus,
1558 .wpbc_container .wpbc_button_light:hover,
1559 .wpbc_container.wpbc_container_booking_form .wpbc_button_light,
1560 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus,
1561 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover {
1562 font-size: clamp(1em, 1em + ((1vw - 0.2em) * 0.208), 1.125em);
1563 border: 2px solid #eeeeeeb5;
1564 box-shadow: 0 2px 10px 2px #ffffff54;
1565 background: #fdfdfd;
1566 color: #444444e0;
1567 border-radius: 0.375em;
1568 padding: 0 2.2em;
1569 line-height: calc(var(--wpbc_form-button-light-size-height) - 3px);
1570 text-decoration: none;
1571 cursor: pointer;
1572 outline: none;
1573 display: flex;
1574 flex-flow: row wrap;
1575 justify-content: center;
1576 align-items: center;
1577 margin: 0;
1578 height: var(--wpbc_form-button-light-size-height);
1579 box-sizing: border-box;
1580 text-shadow: none;
1581 /* word wraping */
1582 text-overflow: ellipsis;
1583 overflow: hidden;
1584 overflow-wrap: normal;
1585 height: auto;
1586 white-space: normal;
1587 hyphens: auto;
1588 }
1589
1590 /* Hover/focus emphasis */
1591 .wpbc_container.wpbc_form input.wpbc_button_light:focus,
1592 .wpbc_container.wpbc_form input.wpbc_button_light:hover,
1593 .wpbc_container .wpbc_button_light:focus,
1594 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus,
1595 .wpbc_container .wpbc_button_light:hover,
1596 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover {
1597 border: 2px solid rgb(77, 145, 205);
1598 }
1599
1600 /* Primary button */
1601 .wpbc_container.wpbc_container_booking_form .wpbc_button_light.button-primary {
1602 background: var(--wpbc_form-button-background-color, #066aab);
1603 color: #fff;
1604 }
1605 .wpbc_container.wpbc_container_booking_form .wpbc_button_light.button-primary:focus,
1606 .wpbc_container.wpbc_container_booking_form .wpbc_button_light.button-primary:hover {
1607 background: var(--wpbc_form-button-background-color, #066aab);
1608 color: #fff;
1609 border-color: #fff;
1610 box-shadow: 0 0 0px 2px var(--wpbc_form-button-background-color, #066aab);
1611 }
1612
1613 /* Disabled/active states */
1614 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:disabled,
1615 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:active,
1616 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:disabled:focus,
1617 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:disabled:hover {
1618 color: #ccc;
1619 border: 2px solid #eeeeeeb5;
1620 cursor: not-allowed;
1621 }
1622
1623 /* Danger variant */
1624 .wpbc_container.wpbc_container_booking_form .wpbc_button_light.wpbc_button_danger {
1625 background: #de605c;
1626 border-color: #de605c;
1627 color: #f7f7f7;
1628 text-shadow: 0 0px #ba5956;
1629 }
1630 .wpbc_container.wpbc_container_booking_form .wpbc_button_light.wpbc_button_danger:focus,
1631 .wpbc_container.wpbc_container_booking_form .wpbc_button_light.wpbc_button_danger:hover {
1632 background: #e65d59;
1633 color: #fff;
1634 border-color: #fff;
1635 box-shadow: 0 0 0px 2px #de605c;
1636 }
1637
1638
1639 /* ========================================================================== */
1640 /* Stripe — gateway button */
1641 /* ========================================================================== */
1642 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe * {
1643 color: #fff;
1644 }
1645 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe {
1646 background: 90% 50% / 80px auto no-repeat url("../inc/assets/stripe.svg"), #fff;
1647 background-color: rgb(77, 77, 77);
1648 padding-right: 130px;
1649 border: 2px solid rgb(77, 77, 77);
1650 color: #fff;
1651 }
1652 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom {
1653 background: 90% 50% / 80px auto no-repeat url("../../booking-calendar-com/inc/assets/stripe.svg"), #fff;
1654 background-color: rgb(77, 77, 77);
1655 }
1656 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus,
1657 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover {
1658 border: 2px solid #5f5f5f;
1659 background-color: #5f5f5f;
1660 }
1661
1662
1663 /* ========================================================================== */
1664 /* PayPal — gateway buttons (yellow/blue/silver/white/black) */
1665 /* ========================================================================== */
1666 /* Yellow/Silver/White base */
1667 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow,
1668 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver,
1669 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white {
1670 padding-right: 115px;
1671 background-color: #ffc439 !important;
1672 border: 2px solid #ffc439 !important;
1673 color: #2C2E2F;
1674 box-shadow: none;
1675 text-indent: -9999px;
1676 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_commerce.svg"), #ffc439 !important;
1677 min-width: 175px;
1678 }
1679 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow.wpbc_button_gw_bccom,
1680 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver.wpbc_button_gw_bccom,
1681 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white.wpbc_button_gw_bccom {
1682 background: 50% 50% / 80px auto no-repeat url("../../booking-calendar-com/inc/assets/paypal_commerce.svg"), #ffc439 !important;
1683 }
1684 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:focus,
1685 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:hover,
1686 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:focus,
1687 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:hover,
1688 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:focus,
1689 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:hover {
1690 background-color: #f2ba36;
1691 border-color: #f2ba36;
1692 box-shadow: 0 5px 10px #f0f0f8;
1693 color: #5f5f5f;
1694 }
1695
1696 /* Blue/Black base */
1697 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue,
1698 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black {
1699 padding-right: 115px;
1700 background-color: #009cde !important;
1701 border: 2px solid #009cde !important;
1702 color: #fff;
1703 box-shadow: none;
1704 text-indent: -9999px;
1705 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_white_full.svg"), #009cde !important;
1706 min-width: 175px;
1707 }
1708 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue.wpbc_button_gw_bccom,
1709 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black.wpbc_button_gw_bccom {
1710 background: 50% 50% / 80px auto no-repeat url("../../booking-calendar-com/inc/assets/paypal_white_full.svg"), #009cde !important;
1711 }
1712 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue:focus,
1713 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue:hover,
1714 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:focus,
1715 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:hover {
1716 background-color: #33b0e5;
1717 border-color: #33b0e5;
1718 box-shadow: 0 5px 10px #f0f0f8;
1719 color: #fff;
1720 }
1721
1722 /* Silver tweak (based on Yellow) */
1723 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver {
1724 background-color: #eee !important;
1725 border: 2px solid #eee !important;
1726 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_commerce.svg"), #eee !important;
1727 }
1728 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver.wpbc_button_gw_bccom {
1729 background: 50% 50% / 80px auto no-repeat url("../../booking-calendar-com/inc/assets/paypal_commerce.svg"), #eee !important;
1730 }
1731 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:focus,
1732 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:hover {
1733 background-color: #e2e2e2 !important;
1734 border-color: #e2e2e2 !important;
1735 }
1736
1737 /* White tweak (based on Yellow) */
1738 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white {
1739 background-color: #fff !important;
1740 border: 1px solid #2C2E2F !important;
1741 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_commerce.svg"), #fff !important;
1742 }
1743 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white.wpbc_button_gw_bccom {
1744 background: 50% 50% / 80px auto no-repeat url("../../booking-calendar-com/inc/assets/paypal_commerce.svg"), #fff !important;
1745 }
1746 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:focus,
1747 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:hover {
1748 background-color: #fff !important;
1749 border-color: #2C2E2F !important;
1750 }
1751
1752 /* Black tweak (based on Blue) */
1753 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black {
1754 background-color: #2c2e2f !important;
1755 border: 2px solid #2c2e2f !important;
1756 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_white_full.svg"), #2c2e2f !important;
1757 }
1758 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black.wpbc_button_gw_bccom {
1759 background: 50% 50% / 80px auto no-repeat url("../../booking-calendar-com/inc/assets/paypal_white_full.svg"), #2c2ef !important;
1760 }
1761 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:focus,
1762 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:hover {
1763 background-color: #565859 !important;
1764 border-color: #565859 !important;
1765 }
1766
1767
1768 /* ========================================================================== */
1769 /* PayPal Standard Checkout — container tweaks */
1770 /* ========================================================================== */
1771
1772 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form.paypal_std_co_div {
1773 text-align: left;
1774 clear: both;
1775 }
1776 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form.paypal_std_co_div .wpbc_paypal_fee {
1777 text-align: center;
1778 }
1779 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form.paypal_std_co_div .wpbc_paypal_std_co {
1780 padding: 0 2px;
1781 flex: 1 1 auto;
1782 }
1783
1784
1785 /* ========================================================================== */
1786 /* Dark Theme 1 — dark skins for messages, buttons, and containers */
1787 /* ========================================================================== */
1788
1789 .wpbc_theme_dark_1 .wpbc_front_end__message {
1790 background: transparent;
1791 box-shadow: 0 0px 3px #3b3b3b;
1792 color: #f74748 !important;
1793 border-top: 0 !important;
1794 border-right: 0 !important;
1795 border-bottom: 0 !important;
1796 }
1797 .wpbc_theme_dark_1 .wpbc_front_end__message.wpbc_fe_message_error {
1798 border-left-color: #c23b3b;
1799 background: #595959 !important;
1800 color: #b9b9b9 !important;
1801 }
1802
1803 /* Dark theme: thank-you section */
1804 .wpbc_theme_dark_1 .wpbc_after_booking_thank_you_section .wpbc_ty__message {
1805 color: #cdcdcd;
1806 }
1807 .wpbc_theme_dark_1 .wpbc_after_booking_thank_you_section .wpbc_ty__container * {
1808 color: #fff;
1809 }
1810
1811 /* Fix form field colors in confirmation window (iDEAL etc.) */
1812 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content input[type=text],
1813 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content select,
1814 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content textarea {
1815 color: var(--wpbc_form-field-text-color);
1816 }
1817
1818 .wpbc_ideal_payment_table td {
1819 vertical-align: middle;
1820 }
1821
1822 .wpbc_theme_dark_1 .wpbc_after_booking_thank_you_section .wpbc_ty__container {
1823 border: 1px solid rgb(0, 0, 0);
1824 background: #626262;
1825 color: #5f5f5f;
1826 box-shadow: 0 0px 3px #3b3b3b;
1827 }
1828
1829 /* Payment buttons in dark theme */
1830 .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light,
1831 .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light {
1832 box-shadow: 0 1px 5px #424242;
1833 border: 2px solid #525252;
1834 background-color: #4d4d4d;
1835 color: #fff;
1836 }
1837 .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light:focus,
1838 .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light:hover,
1839 .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light:focus,
1840 .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light:hover {
1841 box-shadow: 0 1px 5px #424242;
1842 border: 2px solid #5f5f5f;
1843 background-color: #5c5c5c;
1844 color: #fff;
1845 }
1846 .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:focus,
1847 .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:hover,
1848 .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:focus,
1849 .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:hover {
1850 box-shadow: 0 5px 10px #424242;
1851 }
1852 .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus,
1853 .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover,
1854 .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus,
1855 .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover {
1856 background-color: #4d4d4d;
1857 border-color: #4d4d4d;
1858 }
1859
1860 /* Dark theme: generic text colors */
1861 .wpbc_theme_dark_1 p,
1862 .wpbc_theme_dark_1 label {
1863 color: #989898;
1864 }
1865 .wpbc_theme_dark_1.wpbc_bfb__theme_scope select,
1866 .wpbc_theme_dark_1.wpbc_bfb__theme_scope textarea,
1867 .wpbc_theme_dark_1.wpbc_bfb__theme_scope input,
1868 .wpbc_theme_dark_1.wpbc_container select,
1869 .wpbc_theme_dark_1.wpbc_container textarea,
1870 .wpbc_theme_dark_1.wpbc_container input {
1871 color: #444;
1872 }
1873
1874
1875 /* ========================================================================== */
1876 /* Capacity Hints — tooltips and inline availability */
1877 /* What: availability chips & layout for [capacity_hint] shortcode */
1878 /* ========================================================================== */
1879
1880 .capacity_hint {
1881 align-self: baseline;
1882 margin: 0;
1883 }
1884 .capacity_hint .wpbc_chint__full_day_bookings,
1885 .capacity_hint.wpbc_chin_newline {
1886 flex: 1 1 100%;
1887 }
1888
1889 .wpbc_capacity_hint_container {
1890 display: flex;
1891 flex-flow: column nowrap;
1892 justify-content: flex-start;
1893 align-items: flex-start;
1894 width: 100%;
1895 }
1896 .booking_form_div .wpbc__form__div .wpbc_capacity_hint_container,
1897 .booking_form_div .wpbc__form__div .wpbc_capacity_hint_container * {
1898 font-size: 0.94em;
1899 line-height: 1.78;
1900 }
1901
1902 .wpbc_capacity_hint_container .wpbc_chint__datetime_container {
1903 flex: 1 1 auto;
1904 display: flex;
1905 flex-flow: row wrap;
1906 justify-content: flex-start;
1907 align-items: flex-start;
1908 width: 100%;
1909 }
1910
1911 /* Date line */
1912 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container {
1913 flex: 1 1 100%;
1914 display: flex;
1915 flex-flow: row wrap;
1916 justify-content: flex-start;
1917 align-items: flex-start;
1918 }
1919 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container .wpbc_chint__date {
1920 font-weight: 600;
1921 flex: 0 1 auto;
1922 }
1923 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container .wpbc_chint__date_divider {
1924 flex: 1 1 auto;
1925 display: none;
1926 }
1927
1928 /* Times line */
1929 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container {
1930 flex: 0 1 auto;
1931 display: flex;
1932 flex-flow: row wrap;
1933 justify-content: flex-start;
1934 align-items: flex-start;
1935 margin-right: 1em;
1936 }
1937
1938 /* Availability numbers */
1939 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container .wpbc_chint__availability {
1940 font-weight: 600;
1941 padding-left: 0.5em;
1942 }
1943 .wpbc_chint__availability {
1944 color: #890;
1945 }
1946 .availability_num_0 {
1947 color: #dc3400;
1948 }
1949 .availability_num_1,
1950 .availability_num_2 {
1951 color: #dc7100;
1952 }
1953 .availability_num_3,
1954 .availability_num_4,
1955 .availability_num_5 {
1956 color: currentColor;
1957 }
1958
1959 /* Chosen timeslot highlight */
1960 .wpbc_selected_timeslot {
1961 font-weight: 600;
1962 text-decoration: underline;
1963 text-decoration-style: dashed;
1964 }
1965
1966 /* Full-day hint compact layout */
1967 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container {
1968 margin: 0;
1969 line-height: unset;
1970 font-size: 0.85em;
1971 flex-flow: row wrap;
1972 }
1973 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container {
1974 flex: 0 1 auto;
1975 flex-flow: row nowrap;
1976 width: auto;
1977 }
1978 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container {
1979 flex: 0 1 auto;
1980 flex-flow: row nowrap;
1981 }
1982 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container .wpbc_chint__date_divider {
1983 flex: 0 1 auto;
1984 display: block;
1985 }
1986 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container .wpbc_chint__timeslot {
1987 display: none;
1988 }
1989 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container .wpbc_chint__timeslot_divider {
1990 display: none;
1991 }
1992
1993
1994 /* ========================================================================== */
1995 /* Misc — demo banner & wizard utilities */
1996 /* ========================================================================== */
1997
1998 .wpbc_message_in_live_demo {
1999 background: #ffffff;
2000 box-shadow: 0 1px 7px #c8c8c86e;
2001 text-align: left;
2002 border-left: 4px solid #9580aa;
2003 border-top: 1px solid #f0f0f0;
2004 border-right: 1px solid #f0f0f0;
2005 margin: 10px 0;
2006 line-height: 2;
2007 padding: 15px 20px;
2008 color: #444;
2009 border-radius: 8px;
2010 font-size: 18px;
2011 font-weight: 500;
2012 }
2013
2014 .wpbc_wizard_step_hidden {
2015 display: none;
2016 }
2017
2018
2019 /* // FixIn: 10.12.4.0. */
2020 .wpbc_logo_20_for_black {
2021 background-repeat: no-repeat;
2022 background-position: center;
2023 display: inline-block;
2024 vertical-align: top;
2025 background-size: 18px auto;
2026 width: 20px;
2027 height: 20px;
2028 margin-top: 6px;
2029 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTAgNTUwIj48cGF0aCBkPSJNMjc1IDE2Mi4zNmMtOTIuMzIgMC0xNjcuMTUgNzcuODItMTY3LjE1IDE3My44MVMxODIuNjkgNTA5Ljk5IDI3NSA1MDkuOTlzMTY3LjE1LTc3LjgyIDE2Ny4xNS0xNzMuODJTMzY3LjMxIDE2Mi4zNiAyNzUgMTYyLjM2Wm0wIDI2NC41M2MtNTAuMSAwLTkwLjcxLTQwLjYxLTkwLjcxLTkwLjcxczQwLjYxLTkwLjcxIDkwLjcxLTkwLjcxIDkwLjcxIDQwLjYxIDkwLjcxIDkwLjcxLTQwLjYxIDkwLjcxLTkwLjcxIDkwLjcxWiIgc3R5bGU9ImZpbGw6I2FhYTsiIGZpbGwtb3BhY2l0eT0iMC40IiAvPjxwYXRoIGQ9Ik0zNDAuNTMgMzk4LjkxYy0xNC44NSAxNS41MS0zNS4xNiAyNS43Ni01Ny44NCAyNy42Ni01NC44NyA0LjYtMTAxLjY0LTQxLjE0LTk4LjIzLTk2LjEgMi45NC00Ny40NCA0Mi4zNS04NS4wMSA5MC41NC04NS4wMSAyNC44NCAwIDQ3LjM0IDkuOTggNjMuNzIgMjYuMTYgNS44NiA1Ljc4IDE1LjI5IDUuNzMgMjEuMTEtLjA5bDM1LjE0LTM1LjE0YzUuNjktNS42OSA1LjktMTQuODcuNDMtMjAuNzctMzAuNDEtMzIuODMtNzMuMS01My4yNi0xMjAuNC01My4yNi05Mi4zMiAwLTE2Ny4xNSA3Ny44Mi0xNjcuMTUgMTczLjgxUzE4Mi42OSA1MDkuOTkgMjc1IDUwOS45OWM0OC40OSAwIDkyLjE1LTIxLjQ3IDEyMi42OC01NS43NiA1LjI5LTUuOTQgNS4wMi0xNC45Ny0uNi0yMC41OWwtMzUuMDUtMzUuMDVjLTUuOTgtNS45OC0xNS42Ny01Ljc5LTIxLjUxLjMyWiIgIHN0eWxlPSJmaWxsOiNjY2M7Ii8+PHBhdGggZD0iTTExMi41MyAyNjEuMjdjMTIuMzQtMzkuMDcgMzguMzItNzAuMDIgNzcuNzktOTcuMDQuOTItLjYzIDEuNDgtMS42NyAxLjQ4LTIuNzlWMTQuNzZjMC00LjI4LTMuNjgtNy43Ni04LjIyLTcuNzZoLTMuNzZjLTE4LjU2IDAtNzMuMTcgNDAuMy03MS43OSA2MC42MmwtLjE3IDE5Mi45MWMwIDIuNzQgMy44NiAzLjM0IDQuNjguNzNaIiAgc3R5bGU9ImZpbGw6I2NjYzsiLz48L3N2Zz4=') !important;
2030 }
2031 .wpbc_logo_30_for_white {
2032 display: inline-block;
2033 background-position: 0 1px;
2034 background-repeat: no-repeat;
2035 background-size: 30px auto;
2036 width: 30px;
2037 height: 30px;
2038 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTAgNTUwIj48cGF0aCBkPSJNMjc1IDE2Mi4zNmMtOTIuMzIgMC0xNjcuMTUgNzcuODItMTY3LjE1IDE3My44MVMxODIuNjkgNTA5Ljk5IDI3NSA1MDkuOTlzMTY3LjE1LTc3LjgyIDE2Ny4xNS0xNzMuODJTMzY3LjMxIDE2Mi4zNiAyNzUgMTYyLjM2Wm0wIDI2NC41M2MtNTAuMSAwLTkwLjcxLTQwLjYxLTkwLjcxLTkwLjcxczQwLjYxLTkwLjcxIDkwLjcxLTkwLjcxIDkwLjcxIDQwLjYxIDkwLjcxIDkwLjcxLTQwLjYxIDkwLjcxLTkwLjcxIDkwLjcxWiIgc3R5bGU9ImZpbGw6I2U1ZTVlNTsiIGZpbGwtb3BhY2l0eT0iMS4wIiAvPjxwYXRoIGQ9Ik0zNDAuNTMgMzk4LjkxYy0xNC44NSAxNS41MS0zNS4xNiAyNS43Ni01Ny44NCAyNy42Ni01NC44NyA0LjYtMTAxLjY0LTQxLjE0LTk4LjIzLTk2LjEgMi45NC00Ny40NCA0Mi4zNS04NS4wMSA5MC41NC04NS4wMSAyNC44NCAwIDQ3LjM0IDkuOTggNjMuNzIgMjYuMTYgNS44NiA1Ljc4IDE1LjI5IDUuNzMgMjEuMTEtLjA5bDM1LjE0LTM1LjE0YzUuNjktNS42OSA1LjktMTQuODcuNDMtMjAuNzctMzAuNDEtMzIuODMtNzMuMS01My4yNi0xMjAuNC01My4yNi05Mi4zMiAwLTE2Ny4xNSA3Ny44Mi0xNjcuMTUgMTczLjgxUzE4Mi42OSA1MDkuOTkgMjc1IDUwOS45OWM0OC40OSAwIDkyLjE1LTIxLjQ3IDEyMi42OC01NS43NiA1LjI5LTUuOTQgNS4wMi0xNC45Ny0uNi0yMC41OWwtMzUuMDUtMzUuMDVjLTUuOTgtNS45OC0xNS42Ny01Ljc5LTIxLjUxLjMyWiIgIHN0eWxlPSJmaWxsOiM1NTU7Ii8+PHBhdGggZD0iTTExMi41MyAyNjEuMjdjMTIuMzQtMzkuMDcgMzguMzItNzAuMDIgNzcuNzktOTcuMDQuOTItLjYzIDEuNDgtMS42NyAxLjQ4LTIuNzlWMTQuNzZjMC00LjI4LTMuNjgtNy43Ni04LjIyLTcuNzZoLTMuNzZjLTE4LjU2IDAtNzMuMTcgNDAuMy03MS43OSA2MC42MmwtLjE3IDE5Mi45MWMwIDIuNzQgMy44NiAzLjM0IDQuNjguNzNaIiAgc3R5bGU9ImZpbGw6IzU1NTsiLz48L3N2Zz4=') !important;
2039 }
2040