PluginProbe
Booking Calendar / 11.9
Booking Calendar v11.9
11.9 11.8.4 11.8.3 11.8.2 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 All 205 releases
booking / includes / page-setup-wizard / _out / setup-wizard.css

setup-wizard.css in Booking Calendar 11.9, at includes/page-setup-wizard/_out/setup-wizard.css

1,752 lines 49.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 body.wpbc_setup_wizard_page {
3 overflow: hidden
4 }
5 .wpbc_setup_wizard {
6 --wpbc-wizard-green: #38a43f;
7 --wpbc-wizard-orange: #f0a133;
8 --wpbc-wizard-border: #d9dde3;
9 --wpbc-wizard-muted: #616b76;
10 --wpbc-wizard-canvas: #f6f7f9;
11 --wpbc-wizard-info-background: #f7fbff;
12 --wpbc-wizard-info-border: #60a5fa;
13 --wpbc-wizard-info-accent: #2563eb;
14 --wpbc-wizard-info-text: #172554;
15 --wpbc-wizard-info-copy: #1e3a5f;
16 --wpbc-wizard-warning-background: #fefbf7;
17 --wpbc-wizard-warning-border: #efd6b4;
18 --wpbc-wizard-warning-accent: #e6a347;
19 --wpbc-wizard-warning-text: #3b3532;
20 --wpbc-wizard-warning-icon: var(--wpbc-wizard-warning-text);
21 --wpbc-wizard-error-background: #fff5f5;
22 --wpbc-wizard-error-border: #fca5a5;
23 --wpbc-wizard-error-accent: #d63638;
24 --wpbc-wizard-error-text: #5a1b1b;
25 --wpbc-wizard-layer-busy-backdrop: 20000;
26 --wpbc-wizard-layer-busy-status: 20001;
27 --wpbc-wizard-layer-dialog: 30000;
28 position: fixed;
29 inset: 0;
30 z-index: 100000;
31 display: grid;
32 grid-template-rows: var(--wpbc_ui_top_nav__height,48px) minmax(0,1fr) 82px;
33 min-width: 320px;
34 background: var(--wpbc-wizard-canvas);
35 color: #20262e;
36 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
37 font-size: 16px;
38 line-height: 1.5
39 }
40 .wpbc_setup_wizard *,
41 .wpbc_setup_wizard ::after,
42 .wpbc_setup_wizard ::before {
43 box-sizing: border-box
44 }
45 .wpbc_setup_wizard__footer,
46 .wpbc_setup_wizard__header {
47 background: #fff
48 }
49 .wpbc_setup_wizard > .wpbc_setup_wizard__header {
50 position: relative;
51 top: auto;
52 z-index: 2;
53 width: 100%;
54 max-width: none;
55 min-height: var(--wpbc_ui_top_nav__height,48px);
56 padding: 0 5px;
57 border-bottom: 1px solid var(--wpbc-wizard-border)
58 }
59 .wpbc_setup_wizard__header .wpbc_ui_el__make_space {
60 -ms-flex: 1 1 auto;
61 flex: 1 1 auto
62 }
63 .wpbc_setup_wizard__mode-toolbar-preview {
64 position: relative;
65 display: -ms-flexbox;
66 display: flex;
67 min-width: 0;
68 -ms-flex-item-align: stretch;
69 align-self: stretch;
70 -ms-flex-align: center;
71 align-items: center
72 }
73 .wpbc_setup_wizard__mode-toolbar-preview .wpbc_booking_modes_selector {
74 -ms-flex: 0 1 auto;
75 flex: 0 1 auto;
76 margin-left: 0
77 }
78 .wpbc_setup_wizard__mode-toolbar-preview .wpbc_setup_wizard__mode-toolbar-toggle {
79 min-height: 30px;
80 border-radius: 4px;
81 font-size: 15px;
82 font-weight: 400;
83 white-space: nowrap
84 }
85 .wpbc_setup_wizard__mode-toolbar-preview .wpbc_setup_wizard__mode-toolbar-option.is-current {
86 font-weight: 600
87 }
88 .wpbc_setup_wizard__mode-toolbar-preview .wpbc_setup_wizard__mode-toolbar-option.is-current::after {
89 float: right;
90 margin-left: 18px;
91 content: "✓"
92 }
93 .wpbc_setup_wizard__mode-toolbar-preview.is-previewing .wpbc_setup_wizard__mode-toolbar-toggle {
94 animation: .62s ease-in-out 3 wpbc_setup_wizard_mode_toolbar_pulse
95 }
96 .wpbc_setup_wizard__mode-toolbar-tooltip {
97 position: absolute;
98 top: calc(100% + 9px);
99 left: 13px;
100 z-index: 100;
101 width: max-content;
102 max-width: min(340px,100vw - 32px);
103 padding: 10px 13px;
104 border-radius: 5px;
105 background: #1d2327;
106 box-shadow: 0 5px 18px rgba(29,35,39,.24);
107 color: #fff;
108 font-size: 13px;
109 line-height: 1.4;
110 opacity: 0;
111 pointer-events: none;
112 -ms-transform: translateY(-5px);
113 transform: translateY(-5px);
114 transition: opacity 160ms,transform 160ms,visibility 160ms;
115 visibility: hidden
116 }
117 .wpbc_setup_wizard__mode-toolbar-tooltip::before {
118 position: absolute;
119 top: -6px;
120 left: 24px;
121 width: 12px;
122 height: 12px;
123 background: #1d2327;
124 content: "";
125 -ms-transform: rotate(45deg);
126 transform: rotate(45deg)
127 }
128 .wpbc_setup_wizard__mode-toolbar-tooltip.is-visible {
129 opacity: 1;
130 -ms-transform: translateY(0);
131 transform: translateY(0);
132 visibility: visible
133 }
134 @keyframes wpbc_setup_wizard_mode_toolbar_pulse {
135 0% {
136 box-shadow: 0 0 0 0 rgba(34,113,177,.82);
137 box-shadow: 0 0 0 0 color-mix(in srgb,var(--wp-admin-theme-color,#2271b1) 82%,transparent);
138 transform: scale(1)
139 }
140 50% {
141 box-shadow: 0 0 0 7px rgba(34,113,177,.2);
142 box-shadow: 0 0 0 7px color-mix(in srgb,var(--wp-admin-theme-color,#2271b1) 20%,transparent);
143 transform: scale(1.025)
144 }
145 100% {
146 box-shadow: 0 0 0 0 rgba(34,113,177,0);
147 transform: scale(1)
148 }
149 }
150 .wpbc_setup_wizard > .wpbc_setup_wizard__header > .wpbc_setup_wizard__close {
151 display: -ms-inline-flexbox;
152 display: inline-flex;
153 width: 36px;
154 height: 36px;
155 -ms-flex-align: center;
156 align-items: center;
157 -ms-flex-pack: center;
158 justify-content: center;
159 -ms-flex-item-align: center;
160 align-self: center;
161 padding: 0;
162 border-top: 0;
163 border-bottom: 0;
164 border-radius: 50%;
165 color: #2c3338;
166 line-height: 1;
167 text-decoration: none
168 }
169 .wpbc_setup_wizard > .wpbc_setup_wizard__header > .wpbc_setup_wizard__close:focus-visible,
170 .wpbc_setup_wizard > .wpbc_setup_wizard__header > .wpbc_setup_wizard__close:hover {
171 border-top: 0;
172 border-bottom: 0;
173 background: #f0f0f1;
174 color: #1d2327
175 }
176 .wpbc_setup_wizard__close > .menu_icon {
177 display: -ms-inline-flexbox;
178 display: inline-flex;
179 width: 20px;
180 height: 20px;
181 -ms-flex-align: center;
182 align-items: center;
183 -ms-flex-pack: center;
184 justify-content: center;
185 line-height: 1
186 }
187 .wpbc_setup_wizard__close > .menu_icon::before {
188 display: block;
189 font-size: 20px;
190 line-height: 20px;
191 vertical-align: 0
192 }
193 .wpbc_setup_wizard__layout {
194 display: grid;
195 grid-template-columns: minmax(250px,280px) minmax(0,1fr);
196 min-height: 0;
197 overflow: hidden
198 }
199 .wpbc_setup_wizard__rail {
200 padding: 52px 42px;
201 border-right: 1px solid var(--wpbc-wizard-border);
202 background: #fff;
203 overflow-y: auto
204 }
205 .wpbc_setup_wizard__rail h2 {
206 margin: 0 0 28px;
207 font-size: 18px;
208 font-weight: 600;
209 line-height: 1.35
210 }
211 .wpbc_setup_wizard__steps {
212 margin: 0;
213 padding: 0;
214 list-style: none
215 }
216 .wpbc_setup_wizard__step {
217 position: relative;
218 display: -ms-flexbox;
219 display: flex;
220 min-height: 50px;
221 -ms-flex-align: start;
222 align-items: flex-start;
223 gap: 12px;
224 margin: 0
225 }
226 .wpbc_setup_wizard__step:not(:last-child)::after {
227 position: absolute;
228 top: 26px;
229 bottom: -2px;
230 left: 11px;
231 width: 2px;
232 background: #dcdcde;
233 content: ""
234 }
235 .wpbc_setup_wizard__step--complete:not(:last-child)::after {
236 background: var(--wpbc-wizard-green)
237 }
238 .wpbc_setup_wizard__step-marker {
239 position: relative;
240 z-index: 1;
241 display: -ms-inline-flexbox;
242 display: inline-flex;
243 width: 24px;
244 height: 24px;
245 -ms-flex: 0 0 24px;
246 flex: 0 0 24px;
247 -ms-flex-align: center;
248 align-items: center;
249 -ms-flex-pack: center;
250 justify-content: center;
251 border: 2px solid #c3c4c7;
252 border-radius: 50%;
253 background: #fff;
254 color: #fff;
255 font-size: 13px;
256 font-weight: 700
257 }
258 .wpbc_setup_wizard__step--complete .wpbc_setup_wizard__step-marker {
259 border-color: var(--wpbc-wizard-green);
260 background: var(--wpbc-wizard-green)
261 }
262 .wpbc_setup_wizard__step--current .wpbc_setup_wizard__step-marker {
263 border: 6px solid var(--wp-admin-theme-color,#2271b1)
264 }
265 .wpbc_setup_wizard__step--future {
266 min-height: 24px
267 }
268 .wpbc_setup_wizard__step--future .wpbc_setup_wizard__step-marker {
269 width: 12px;
270 height: 12px;
271 -ms-flex-preferred-size: 12px;
272 flex-basis: 12px;
273 margin: 6px;
274 border: 0;
275 background: #c3c4c7
276 }
277 .wpbc_setup_wizard__step-label {
278 padding-top: 2px;
279 color: var(--wpbc-wizard-muted)
280 }
281 .wpbc_setup_wizard__step-link {
282 appearance: none;
283 margin: 0;
284 padding: 2px 0 0;
285 border: 0;
286 background: 0 0;
287 box-shadow: none;
288 font: inherit;
289 line-height: inherit;
290 text-align: start;
291 cursor: pointer
292 }
293 .wpbc_setup_wizard__step-link:hover {
294 color: var(--wp-admin-theme-color,#2271b1);
295 text-decoration: underline;
296 text-underline-offset: 2px
297 }
298 .wpbc_setup_wizard__step--current .wpbc_setup_wizard__step-label {
299 color: var(--wp-admin-theme-color,#2271b1);
300 font-weight: 600
301 }
302 .wpbc_setup_wizard__rail-note {
303 max-width: 210px;
304 margin: 18px 0 0 36px;
305 color: var(--wpbc-wizard-muted);
306 font-size: 12px
307 }
308 .wpbc_setup_wizard__main {
309 display: -ms-flexbox;
310 display: flex;
311 -ms-flex-align: start;
312 align-items: flex-start;
313 -ms-flex-pack: center;
314 justify-content: center;
315 padding: 30px 46px 60px;
316 overflow-y: auto
317 }
318 .wpbc_setup_wizard__stage {
319 width: min(100%,1240px)
320 }
321 .wpbc_setup_wizard__stage--welcome {
322 width: min(100%,710px);
323 padding-top: 72px
324 }
325 .wpbc_setup_wizard__appearance-step,
326 .wpbc_setup_wizard__appearance-step > form,
327 .wpbc_setup_wizard__date-selection-form,
328 .wpbc_setup_wizard__date-selection-step,
329 .wpbc_setup_wizard__fixed-slots-step,
330 .wpbc_setup_wizard__fixed-slots-step > form,
331 .wpbc_setup_wizard__publish-step,
332 .wpbc_setup_wizard__publish-step > form,
333 .wpbc_setup_wizard__stage--appearance,
334 .wpbc_setup_wizard__stage--booking_experience,
335 .wpbc_setup_wizard__stage--booking_form_template,
336 .wpbc_setup_wizard__stage--booking_resources,
337 .wpbc_setup_wizard__stage--customer_journey,
338 .wpbc_setup_wizard__stage--date_selection,
339 .wpbc_setup_wizard__stage--days_off,
340 .wpbc_setup_wizard__stage--fixed_time_slots,
341 .wpbc_setup_wizard__stage--publish_integration,
342 .wpbc_setup_wizard__stage--review_setup,
343 .wpbc_setup_wizard__stage--services,
344 .wpbc_setup_wizard__stage--start_duration_times,
345 .wpbc_setup_wizard__stage--start_end_times,
346 .wpbc_setup_wizard__stage--working_hours,
347 .wpbc_setup_wizard__time-choices-step,
348 .wpbc_setup_wizard__time-choices-step > form {
349 width: min(100%,1240px);
350 max-width: none
351 }
352 .wpbc_setup_wizard__step-heading {
353 margin-bottom: 28px;
354 text-align: center
355 }
356 .wpbc_setup_wizard__step-content h1 {
357 margin: 0;
358 font-size: clamp(18px,3vw,36px);
359 font-weight: 600;
360 letter-spacing: -.025em;
361 line-height: 1.15
362 }
363 .wpbc_setup_wizard__lead {
364 margin: 12px 0 0;
365 color: var(--wpbc-wizard-muted);
366 font-size: 17px
367 }
368 .wpbc_setup_wizard__settings-hint {
369 display: -ms-flexbox;
370 display: flex;
371 width: 100%;
372 box-sizing: border-box;
373 -ms-flex-flow: row wrap;
374 flex-flow: row wrap;
375 -ms-flex-align: center;
376 align-items: center;
377 -ms-flex-pack: end;
378 justify-content: flex-end;
379 gap: 4px 6px;
380 margin: -16px 0 14px;
381 padding: 0 12px;
382 color: var(--wpbc-wizard-muted);
383 font-size: 12px;
384 line-height: 1.6
385 }
386 .wpbc_setup_wizard__settings-hint-message,
387 .wpbc_setup_wizard__settings-hint-path {
388 display: -ms-inline-flexbox;
389 display: inline-flex;
390 -ms-flex-flow: row wrap;
391 flex-flow: row wrap;
392 -ms-flex-align: center;
393 align-items: center;
394 gap: 6px
395 }
396 .wpbc_setup_wizard__settings-hint-path a {
397 color: var(--wp-admin-theme-color,#3858e9);
398 text-underline-offset: 2px
399 }
400 .wpbc_setup_wizard__settings-hint-path a:focus-visible {
401 border-radius: 2px;
402 box-shadow: 0 0 0 2px #fff,0 0 0 4px var(--wp-admin-theme-color,#3858e9);
403 outline: transparent solid 2px
404 }
405 .wpbc_setup_wizard__settings-hint-separator {
406 color: #8c8f94;
407 font-size: 17px;
408 line-height: 1
409 }
410 [dir=rtl] .wpbc_setup_wizard__settings-hint-separator {
411 -ms-transform: rotate(180deg);
412 transform: rotate(180deg)
413 }
414 .wpbc_setup_wizard__stage--booking_experience .wpbc_setup_wizard__lead > span {
415 display: block
416 }
417 .wpbc_setup_wizard__welcome .wpbc_setup_wizard__lead,
418 .wpbc_setup_wizard__welcome h1 {
419 text-align: center
420 }
421 .wpbc_setup_wizard__welcome .wpbc_setup_wizard__lead {
422 margin-top: 18px
423 }
424 .wpbc_setup_wizard__notice {
425 display: -ms-flexbox;
426 display: flex;
427 gap: 16px;
428 margin-top: 42px;
429 padding: 22px 24px;
430 border: 1px solid var(--wpbc-wizard-warning-border);
431 border-inline-start: 4px solid var(--wpbc-wizard-warning-accent);
432 border-radius: 5px;
433 background: var(--wpbc-wizard-warning-background);
434 box-shadow: 0 2px 8px rgba(25,35,45,.05);
435 color: var(--wpbc-wizard-warning-text)
436 }
437 .wpbc_setup_wizard__notice-icon {
438 display: -ms-inline-flexbox;
439 display: inline-flex;
440 width: 26px;
441 height: 26px;
442 -ms-flex: 0 0 26px;
443 flex: 0 0 26px;
444 -ms-flex-align: center;
445 align-items: center;
446 -ms-flex-pack: center;
447 justify-content: center;
448 border-radius: 50%;
449 background: var(--wpbc-wizard-warning-icon);
450 color: #fff;
451 font-weight: 700
452 }
453 .wpbc_setup_wizard__stage--welcome .wpbc_setup_wizard__notice-icon {
454 background: var(--wpbc-wizard-warning-accent)
455 }
456 .wpbc_setup_wizard__notice h2 {
457 margin: 0 0 5px;
458 font-size: 16px
459 }
460 .wpbc_setup_wizard__notice p {
461 margin: 0;
462 color: var(--wpbc-wizard-warning-text)
463 }
464 .wpbc_setup_wizard .wpbc_setup_wizard__message {
465 border: 1px solid transparent;
466 border-inline-start-width: 4px;
467 border-radius: 6px;
468 box-sizing: border-box;
469 padding: 10px
470 }
471 .wpbc_setup_wizard .wpbc_setup_wizard__message--info {
472 border-color: var(--wpbc-wizard-info-border);
473 border-inline-start-color: var(--wpbc-wizard-info-accent);
474 background: var(--wpbc-wizard-info-background);
475 color: var(--wpbc-wizard-info-text)
476 }
477 .wpbc_setup_wizard .wpbc_setup_wizard__message--info .menu_icon {
478 color: var(--wpbc-wizard-info-accent)
479 }
480 .wpbc_setup_wizard .wpbc_setup_wizard__message--warning {
481 border-color: var(--wpbc-wizard-warning-border);
482 border-inline-start-color: var(--wpbc-wizard-warning-accent);
483 background: var(--wpbc-wizard-warning-background);
484 color: var(--wpbc-wizard-warning-text)
485 }
486 .wpbc_setup_wizard .wpbc_setup_wizard__message--warning .menu_icon {
487 color: var(--wpbc-wizard-warning-icon)
488 }
489 .wpbc_setup_wizard .wpbc_setup_wizard__message--error {
490 border-color: var(--wpbc-wizard-error-border);
491 border-inline-start-color: var(--wpbc-wizard-error-accent);
492 background: var(--wpbc-wizard-error-background);
493 color: var(--wpbc-wizard-error-text)
494 }
495 .wpbc_setup_wizard .wpbc_setup_wizard__message--error .menu_icon {
496 color: var(--wpbc-wizard-error-accent)
497 }
498 .wpbc_setup_wizard__request-error {
499 position: sticky;
500 top: 0;
501 z-index: 20;
502 display: grid;
503 grid-template-columns: auto minmax(0,1fr) auto;
504 -ms-flex-align: start;
505 align-items: start;
506 gap: 12px;
507 margin: 0 0 20px;
508 padding: 14px 16px;
509 box-shadow: 0 4px 14px rgba(90,27,27,.12)
510 }
511 .wpbc_setup_wizard__request-error[hidden] {
512 display: none
513 }
514 .wpbc_setup_wizard__request-error > .menu_icon {
515 margin-top: 2px
516 }
517 .wpbc_setup_wizard__request-error h2,
518 .wpbc_setup_wizard__request-error p {
519 margin: 0
520 }
521 .wpbc_setup_wizard__request-error h2 {
522 font-size: 15px;
523 line-height: 1.4
524 }
525 .wpbc_setup_wizard__request-error-content > p {
526 margin-top: 3px
527 }
528 .wpbc_setup_wizard__request-error-reference {
529 font-size: 12px
530 }
531 .wpbc_setup_wizard__request-error-reference code {
532 color: inherit
533 }
534 .wpbc_setup_wizard__request-error-dismiss {
535 display: -ms-inline-flexbox;
536 display: inline-flex;
537 width: 30px;
538 height: 30px;
539 -ms-flex-align: center;
540 align-items: center;
541 -ms-flex-pack: center;
542 justify-content: center;
543 padding: 0;
544 border: 0;
545 border-radius: 4px;
546 background: 0 0;
547 cursor: pointer
548 }
549 .wpbc_setup_wizard__request-error-dismiss:focus-visible,
550 .wpbc_setup_wizard__request-error-dismiss:hover {
551 background: rgba(214,54,56,.1)
552 }
553 .wpbc_setup_wizard__inline-action {
554 min-height: 0;
555 padding: 0;
556 border: 0;
557 background: 0 0;
558 color: var(--wp-admin-theme-color,#2271b1);
559 font: inherit;
560 text-decoration: underline;
561 cursor: pointer
562 }
563 .wpbc_setup_wizard__content-panel {
564 padding: 36px 42px 28px;
565 border: 1px solid var(--wpbc-wizard-border);
566 border-radius: 6px;
567 background: #fff;
568 box-shadow: 0 2px 8px rgba(25,35,45,.05)
569 }
570 .wpbc_setup_wizard__field-grid {
571 display: grid;
572 grid-template-columns: repeat(2,minmax(0,1fr));
573 gap: 28px 34px
574 }
575 .wpbc_setup_wizard__field label {
576 display: block;
577 margin-bottom: 8px;
578 font-weight: 600
579 }
580 .wpbc_setup_wizard__field input[type=email],
581 .wpbc_setup_wizard__field input[type=text],
582 .wpbc_setup_wizard__field select {
583 width: 100%;
584 max-width: none;
585 min-height: 42px;
586 margin: 0;
587 padding: 6px 12px;
588 border-color: #aeb6bf;
589 border-radius: 4px;
590 background-color: #fff;
591 font-size: 16px
592 }
593 .wpbc_setup_wizard__field select {
594 padding-right: 32px
595 }
596 .wpbc_setup_wizard__field [aria-invalid=true] {
597 border-color: #d63638;
598 box-shadow: 0 0 0 1px #d63638
599 }
600 .wpbc_setup_wizard__field-error,
601 .wpbc_setup_wizard__field-help {
602 display: block;
603 margin-top: 6px;
604 font-size: 12px
605 }
606 .wpbc_setup_wizard__field-help {
607 color: var(--wpbc-wizard-muted)
608 }
609 .wpbc_setup_wizard__field-error {
610 color: #b32d2e;
611 font-weight: 600
612 }
613 .wpbc_setup_wizard__field-error--group {
614 text-align: center
615 }
616 .wpbc_setup_wizard__divider {
617 height: 1px;
618 margin: 28px 0 22px;
619 background: var(--wpbc-wizard-border)
620 }
621 .wpbc_setup_wizard__consent {
622 display: grid;
623 grid-template-columns: 20px minmax(0,1fr);
624 gap: 10px;
625 -ms-flex-align: start;
626 align-items: start
627 }
628 .wpbc_setup_wizard__consent input {
629 margin: 3px 0 0
630 }
631 .wpbc_setup_wizard__consent label {
632 color: #424b55;
633 font-size: 12px;
634 line-height: 1.74
635 }
636 .wpbc_setup_wizard__settings-note {
637 margin: 0;
638 color: var(--wpbc-wizard-muted);
639 font-size: 12px;
640 text-align: center
641 }
642 .wpbc_setup_wizard__experience-fieldset {
643 min-width: 0;
644 padding: 0;
645 border: 0;
646 margin: 0
647 }
648 .wpbc_setup_wizard__experience-grid {
649 display: grid;
650 grid-template-columns: repeat(3,minmax(0,1fr));
651 gap: 20px
652 }
653 .wpbc_setup_wizard__experience-card {
654 position: relative;
655 display: -ms-flexbox;
656 display: flex;
657 min-height: 475px;
658 -ms-flex-direction: column;
659 flex-direction: column;
660 padding: 24px 24px 28px;
661 border: 2px solid var(--wpbc-wizard-border);
662 border-radius: 7px;
663 background: #fff;
664 box-shadow: 0 2px 8px rgba(25,35,45,.04);
665 cursor: pointer;
666 transition: border-color 120ms,box-shadow 120ms,transform 120ms
667 }
668 .wpbc_setup_wizard__experience-card:hover {
669 border-color: #8fb7d9;
670 box-shadow: 0 5px 14px rgba(25,35,45,.09)
671 }
672 .wpbc_setup_wizard__experience-card:focus-within {
673 outline: 2px solid var(--wp-admin-theme-color,#2271b1);
674 outline-offset: 3px
675 }
676 .wpbc_setup_wizard__experience-card.is-selected {
677 border-color: var(--wp-admin-theme-color,#2271b1);
678 box-shadow: 0 0 0 1px var(--wp-admin-theme-color,#2271b1),0 5px 14px rgba(0,0,0,.08)
679 }
680 .wpbc_setup_wizard__card-topline {
681 display: -ms-flexbox;
682 display: flex;
683 min-height: 48px;
684 -ms-flex-align: start;
685 align-items: flex-start;
686 -ms-flex-pack: justify;
687 justify-content: space-between;
688 gap: 12px
689 }
690 .wpbc_setup_wizard__experience-choice {
691 display: -ms-flexbox;
692 display: flex;
693 min-width: 0;
694 -ms-flex-align: start;
695 align-items: flex-start;
696 gap: 12px
697 }
698 .wpbc_setup_wizard__radio-mark {
699 display: inline-block;
700 width: 22px;
701 height: 22px;
702 -ms-flex: 0 0 22px;
703 flex: 0 0 22px;
704 margin-top: 1px;
705 border: 2px solid #aab2bb;
706 border-radius: 50%;
707 background: #fff
708 }
709 .wpbc_setup_wizard__experience-card.is-selected .wpbc_setup_wizard__radio-mark {
710 border: 6px solid var(--wp-admin-theme-color,#2271b1)
711 }
712 .wpbc_setup_wizard__selected-badge {
713 display: -ms-inline-flexbox;
714 display: inline-flex;
715 -ms-flex: 0 0 auto;
716 flex: 0 0 auto;
717 -ms-flex-align: center;
718 align-items: center;
719 gap: 4px;
720 padding: 3px 9px;
721 border-radius: 999px;
722 background: #e8f3fb;
723 color: var(--wp-admin-theme-color-darker-20,#135e96);
724 font-size: 11px;
725 font-weight: 700
726 }
727 .wpbc_setup_wizard__selected-badge .menu_icon {
728 font-size: 14px;
729 line-height: 1
730 }
731 .wpbc_setup_wizard__selected-badge[hidden] {
732 display: none
733 }
734 .wpbc_setup_wizard__experience-title {
735 display: block;
736 min-width: 0;
737 font-size: 18px;
738 font-weight: 600;
739 line-height: 1.4;
740 margin-top: -.1em
741 }
742 .wpbc_setup_wizard__mode-card {
743 min-height: 520px
744 }
745 .wpbc_setup_wizard__mode-preview {
746 display: grid;
747 min-height: 188px;
748 grid-template-columns: minmax(0,1.15fr) minmax(95px,.85fr);
749 margin: 18px 0 20px;
750 border: 1px solid #cfd6dd;
751 border-radius: 5px;
752 overflow: hidden;
753 background: #fff;
754 box-shadow: 0 1px 2px rgba(29,35,39,.05)
755 }
756 .wpbc_setup_wizard__mode-preview-sidebar {
757 display: -ms-flexbox;
758 display: flex;
759 min-width: 0;
760 -ms-flex-direction: column;
761 flex-direction: column;
762 background: linear-gradient(160deg,#202832,#35404c);
763 color: #fff
764 }
765 .wpbc_setup_wizard__mode-preview-brand {
766 display: -ms-flexbox;
767 display: flex;
768 min-height: 52px;
769 -ms-flex-align: center;
770 align-items: center;
771 gap: 9px;
772 padding: 10px 13px;
773 border-bottom: 1px solid rgba(255,255,255,.08);
774 font-size: 11px
775 }
776 .wpbc_setup_wizard__mode-preview-logo {
777 -ms-flex: 0 0 22px;
778 flex: 0 0 22px
779 }
780 .wpbc_setup_wizard__mode-preview-brand > strong {
781 min-width: 0;
782 overflow: hidden;
783 text-overflow: ellipsis;
784 white-space: nowrap
785 }
786 .wpbc_setup_wizard__mode-preview-menu {
787 display: -ms-flexbox;
788 display: flex;
789 -ms-flex: 1 1 auto;
790 flex: 1 1 auto;
791 -ms-flex-direction: column;
792 flex-direction: column;
793 padding: 5px 0
794 }
795 .wpbc_setup_wizard__mode-preview-menu > span {
796 display: -ms-flexbox;
797 display: flex;
798 min-height: 31px;
799 -ms-flex-align: center;
800 align-items: center;
801 gap: 9px;
802 padding: 6px 13px;
803 font-size: 11px;
804 line-height: 1.25
805 }
806 .wpbc_setup_wizard__mode-preview-menu > span.is-active {
807 background: var(--wp-admin-theme-color,#2271b1);
808 font-weight: 600
809 }
810 .wpbc_setup_wizard__mode-preview-menu .menu_icon {
811 width: 17px;
812 -ms-flex: 0 0 17px;
813 flex: 0 0 17px;
814 font-size: 16px;
815 text-align: center
816 }
817 .wpbc_setup_wizard__mode-preview-canvas {
818 display: -ms-flexbox;
819 display: flex;
820 min-width: 0;
821 -ms-flex-direction: column;
822 flex-direction: column;
823 gap: 13px;
824 padding: 24px 16px;
825 background: linear-gradient(145deg,#fff,#f7f9fb)
826 }
827 .wpbc_setup_wizard__mode-preview-canvas > span {
828 display: block;
829 height: 10px;
830 border-radius: 999px;
831 background: #e0e5ea
832 }
833 .wpbc_setup_wizard__mode-preview-canvas > span:first-child {
834 width: 68%
835 }
836 .wpbc_setup_wizard__mode-preview-canvas > span:nth-child(2) {
837 width: 88%
838 }
839 .wpbc_setup_wizard__mode-preview-canvas > span:nth-child(3) {
840 width: 80%
841 }
842 .wpbc_setup_wizard__mode-preview-canvas > span:last-child {
843 width: 56%
844 }
845 .wpbc_setup_wizard__journey {
846 display: -ms-flexbox;
847 display: flex;
848 -ms-flex-align: stretch;
849 align-items: stretch;
850 -ms-flex-pack: center;
851 justify-content: center;
852 gap: 6px;
853 margin: 20px -10px 18px;
854 padding: 14px 10px;
855 border: 1px solid #e1e6eb;
856 border-radius: 5px;
857 background: #f5f7f9;
858 color: #3e4b57
859 }
860 .wpbc_setup_wizard__journey-step {
861 display: -ms-flexbox;
862 display: flex;
863 min-width: 0;
864 max-width: 180px;
865 -ms-flex: 1 1 0px;
866 flex: 1 1 0;
867 -ms-flex-direction: column;
868 flex-direction: column;
869 padding: 7px;
870 border: 1px solid #c9d1d9;
871 border-radius: 5px;
872 background: #fff;
873 box-shadow: 0 1px 2px rgba(29,35,39,.04);
874 font-size: 11px;
875 font-weight: 600;
876 line-height: 1.2;
877 text-align: start
878 }
879 .wpbc_setup_wizard__journey-step-title {
880 display: block;
881 min-height: 27px;
882 margin-bottom: 7px;
883 color: #20262e;
884 font-size: 11px;
885 font-weight: 700;
886 line-height: 1.2
887 }
888 .wpbc_setup_wizard__journey-preview {
889 display: -ms-flexbox;
890 display: flex;
891 -ms-flex: 1 1 auto;
892 flex: 1 1 auto;
893 -ms-flex-align: start;
894 align-items: flex-start;
895 -ms-flex-pack: center;
896 justify-content: center
897 }
898 .wpbc_setup_wizard__preview-calendar,
899 .wpbc_setup_wizard__preview-fields,
900 .wpbc_setup_wizard__preview-hero,
901 .wpbc_setup_wizard__preview-options,
902 .wpbc_setup_wizard__preview-people {
903 display: none;
904 width: 100%
905 }
906 .wpbc_setup_wizard__journey-step--property .wpbc_setup_wizard__preview-hero,
907 .wpbc_setup_wizard__journey-step--service .wpbc_setup_wizard__preview-hero {
908 display: -ms-flexbox;
909 display: flex
910 }
911 .wpbc_setup_wizard__preview-hero {
912 -ms-flex-direction: column;
913 flex-direction: column;
914 gap: 7px
915 }
916 .wpbc_setup_wizard__preview-hero > .menu_icon {
917 display: -ms-flexbox;
918 display: flex;
919 min-height: 55px;
920 -ms-flex-align: center;
921 align-items: center;
922 -ms-flex-pack: center;
923 justify-content: center;
924 border-radius: 4px;
925 background: linear-gradient(145deg,#e8f3fb,#f8fbfd);
926 color: var(--wp-admin-theme-color,#2271b1);
927 font-size: 34px;
928 line-height: 1
929 }
930 .wpbc_setup_wizard__preview-hero > .menu_icon::before {
931 font-size: 25px
932 }
933 .wpbc_setup_wizard__journey-step--property .wpbc_setup_wizard__preview-hero > .menu_icon {
934 color: #355f45
935 }
936 .wpbc_setup_wizard__preview-lines {
937 display: -ms-flexbox;
938 display: flex;
939 -ms-flex-direction: column;
940 flex-direction: column;
941 gap: 4px
942 }
943 .wpbc_setup_wizard__preview-bar,
944 .wpbc_setup_wizard__preview-lines > span {
945 display: block;
946 height: 5px;
947 border-radius: 999px;
948 background: #dfe4e9
949 }
950 .wpbc_setup_wizard__preview-lines > span:last-child {
951 width: 70%
952 }
953 .wpbc_setup_wizard__journey-step--providers .wpbc_setup_wizard__preview-people {
954 display: -ms-flexbox;
955 display: flex
956 }
957 .wpbc_setup_wizard__preview-people {
958 -ms-flex-direction: column;
959 flex-direction: column;
960 gap: 7px
961 }
962 .wpbc_setup_wizard__preview-people > span {
963 display: -ms-flexbox;
964 display: flex;
965 -ms-flex-align: center;
966 align-items: center;
967 gap: 5px
968 }
969 .wpbc_setup_wizard__preview-people .menu_icon {
970 display: -ms-inline-flexbox;
971 display: inline-flex;
972 width: 22px;
973 height: 22px;
974 -ms-flex: 0 0 22px;
975 flex: 0 0 22px;
976 -ms-flex-align: center;
977 align-items: center;
978 -ms-flex-pack: center;
979 justify-content: center;
980 border-radius: 50%;
981 background: #e8eef4;
982 color: #52606d;
983 font-size: 15px
984 }
985 .wpbc_setup_wizard__preview-people > span:first-child .menu_icon {
986 box-shadow: 0 0 0 2px var(--wp-admin-theme-color,#2271b1);
987 color: var(--wp-admin-theme-color-darker-20,#135e96)
988 }
989 .wpbc_setup_wizard__preview-people .wpbc_setup_wizard__preview-bar {
990 width: 52%
991 }
992 .wpbc_setup_wizard__journey-step--calendar .wpbc_setup_wizard__preview-calendar,
993 .wpbc_setup_wizard__journey-step--calendar-multiple .wpbc_setup_wizard__preview-calendar,
994 .wpbc_setup_wizard__journey-step--date-range .wpbc_setup_wizard__preview-calendar,
995 .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-calendar,
996 .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-calendar,
997 .wpbc_setup_wizard__journey-step--range-check-in .wpbc_setup_wizard__preview-calendar,
998 .wpbc_setup_wizard__journey-step--range-check-out .wpbc_setup_wizard__preview-calendar,
999 .wpbc_setup_wizard__journey-step--range-fixed-selected .wpbc_setup_wizard__preview-calendar,
1000 .wpbc_setup_wizard__journey-step--range-fixed-start .wpbc_setup_wizard__preview-calendar,
1001 .wpbc_setup_wizard__journey-step--range-flexible-end .wpbc_setup_wizard__preview-calendar,
1002 .wpbc_setup_wizard__journey-step--range-flexible-start .wpbc_setup_wizard__preview-calendar {
1003 display: grid
1004 }
1005 .wpbc_setup_wizard__preview-calendar {
1006 grid-template-columns: repeat(7,minmax(0,1fr));
1007 gap: 3px
1008 }
1009 .wpbc_setup_wizard__preview-calendar > span {
1010 aspect-ratio: 1;
1011 border-radius: 2px;
1012 background: #e9edf1
1013 }
1014 .wpbc_setup_wizard__journey-step--calendar .wpbc_setup_wizard__preview-calendar>span:nth-child(18),
1015 .wpbc_setup_wizard__journey-step--calendar-multiple .wpbc_setup_wizard__preview-calendar>span:nth-child(11),
1016 .wpbc_setup_wizard__journey-step--calendar-multiple .wpbc_setup_wizard__preview-calendar>span:nth-child(18),
1017 .wpbc_setup_wizard__journey-step--calendar-multiple .wpbc_setup_wizard__preview-calendar>span:nth-child(24),
1018 .wpbc_setup_wizard__journey-step--date-range .wpbc_setup_wizard__preview-calendar>span:nth-child(n+17):nth-child(-n+19) {
1019 background: var(--wp-admin-theme-color,#2271b1)
1020 }
1021 .wpbc_setup_wizard__journey-step--date-range .wpbc_setup_wizard__preview-calendar > span:nth-child(16) {
1022 background: linear-gradient(135deg,#e9edf1 0 49%,var(--wp-admin-theme-color,#2271b1) 50% 100%)
1023 }
1024 .wpbc_setup_wizard__journey-step--date-range .wpbc_setup_wizard__preview-calendar > span:nth-child(20) {
1025 background: linear-gradient(135deg,var(--wp-admin-theme-color,#2271b1) 0 49%,#e9edf1 50% 100%)
1026 }
1027 .wpbc_setup_wizard__journey-step--range-fixed-selected .wpbc_setup_wizard__preview-calendar > span:nth-child(n+16):nth-child(-n+19),
1028 .wpbc_setup_wizard__journey-step--range-fixed-start .wpbc_setup_wizard__preview-calendar > span:nth-child(16),
1029 .wpbc_setup_wizard__journey-step--range-flexible-end .wpbc_setup_wizard__preview-calendar > span:nth-child(16),
1030 .wpbc_setup_wizard__journey-step--range-flexible-end .wpbc_setup_wizard__preview-calendar > span:nth-child(21),
1031 .wpbc_setup_wizard__journey-step--range-flexible-start .wpbc_setup_wizard__preview-calendar > span:nth-child(16) {
1032 background: var(--wp-admin-theme-color,#2271b1)
1033 }
1034 .wpbc_setup_wizard__journey-step--range-check-in .wpbc_setup_wizard__preview-calendar > span:nth-child(n+17):nth-child(-n+19),
1035 .wpbc_setup_wizard__journey-step--range-check-out .wpbc_setup_wizard__preview-calendar > span:nth-child(n+17):nth-child(-n+19),
1036 .wpbc_setup_wizard__journey-step--range-fixed-start .wpbc_setup_wizard__preview-calendar > span:nth-child(n+17):nth-child(-n+19),
1037 .wpbc_setup_wizard__journey-step--range-flexible-end .wpbc_setup_wizard__preview-calendar > span:nth-child(n+17):nth-child(-n+20),
1038 .wpbc_setup_wizard__journey-step--range-flexible-start .wpbc_setup_wizard__preview-calendar > span:nth-child(17) {
1039 background: #9fc5df;
1040 background: color-mix(in srgb,var(--wp-admin-theme-color,#2271b1) 42%,#fff)
1041 }
1042 .wpbc_setup_wizard__journey-step--range-check-in .wpbc_setup_wizard__preview-calendar > span:nth-child(16),
1043 .wpbc_setup_wizard__journey-step--range-check-out .wpbc_setup_wizard__preview-calendar > span:nth-child(16) {
1044 background: linear-gradient(135deg,#e9edf1 0 49%,var(--wp-admin-theme-color,#2271b1) 50% 100%)
1045 }
1046 .wpbc_setup_wizard__journey-step--range-check-out .wpbc_setup_wizard__preview-calendar > span:nth-child(20) {
1047 background: linear-gradient(135deg,var(--wp-admin-theme-color,#2271b1) 0 49%,#e9edf1 50% 100%)
1048 }
1049 .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__journey-preview,
1050 .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__journey-preview {
1051 -ms-flex-direction: column;
1052 flex-direction: column;
1053 gap: 8px
1054 }
1055 .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-calendar,
1056 .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-calendar {
1057 gap: 2px
1058 }
1059 .wpbc_setup_wizard__journey-option-card[data-wpbc-customer-journey-id=first_start_last_end] .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-calendar,
1060 .wpbc_setup_wizard__journey-option-card[data-wpbc-customer-journey-id=first_start_last_end] .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-calendar {
1061 width: auto;
1062 max-width: 96px;
1063 margin-right: auto;
1064 margin-left: auto;
1065 margin-bottom: 8px
1066 }
1067 .wpbc_setup_wizard__journey-option-card[data-wpbc-customer-journey-id=first_start_last_end] .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-calendar > span,
1068 .wpbc_setup_wizard__journey-option-card[data-wpbc-customer-journey-id=first_start_last_end] .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-calendar > span {
1069 aspect-ratio: 1/1
1070 }
1071 .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-calendar > span,
1072 .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-calendar > span {
1073 aspect-ratio: auto;
1074 height: 9px
1075 }
1076 .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-calendar > span:nth-child(n+18):nth-child(-n+20),
1077 .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-calendar > span:nth-child(18) {
1078 background: var(--wp-admin-theme-color,#2271b1)
1079 }
1080 .wpbc_setup_wizard__journey-step--date-time .wpbc_setup_wizard__preview-options,
1081 .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-options,
1082 .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-options,
1083 .wpbc_setup_wizard__journey-step--times .wpbc_setup_wizard__preview-options {
1084 display: -ms-flexbox;
1085 display: flex
1086 }
1087 .wpbc_setup_wizard__preview-options {
1088 -ms-flex-direction: column;
1089 flex-direction: column;
1090 gap: 7px
1091 }
1092 .wpbc_setup_wizard__preview-fields > span,
1093 .wpbc_setup_wizard__preview-options > span {
1094 display: -ms-flexbox;
1095 display: flex;
1096 min-height: 25px;
1097 -ms-flex-align: center;
1098 align-items: center;
1099 gap: 6px;
1100 padding: 4px 6px;
1101 border: 1px solid #d8dee5;
1102 border-radius: 4px;
1103 background: #fff
1104 }
1105 .wpbc_setup_wizard__preview-options i {
1106 width: 11px;
1107 height: 11px;
1108 -ms-flex: 0 0 11px;
1109 flex: 0 0 11px;
1110 border: 2px solid #aab4bf;
1111 border-radius: 50%;
1112 background: #fff
1113 }
1114 .wpbc_setup_wizard__preview-options .wpbc_setup_wizard__preview-bar {
1115 width: 62%
1116 }
1117 .wpbc_setup_wizard__journey-step--date-time .wpbc_setup_wizard__preview-options > span:first-child,
1118 .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-options > span:last-child,
1119 .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-options > span:first-child,
1120 .wpbc_setup_wizard__journey-step--times .wpbc_setup_wizard__preview-options > span:nth-child(2) {
1121 border-color: var(--wp-admin-theme-color,#2271b1);
1122 box-shadow: 0 0 0 1px var(--wp-admin-theme-color,#2271b1)
1123 }
1124 .wpbc_setup_wizard__journey-step--date-time .wpbc_setup_wizard__preview-options > span:first-child i,
1125 .wpbc_setup_wizard__journey-step--date-time-end .wpbc_setup_wizard__preview-options > span:last-child i,
1126 .wpbc_setup_wizard__journey-step--date-time-start .wpbc_setup_wizard__preview-options > span:first-child i,
1127 .wpbc_setup_wizard__journey-step--times .wpbc_setup_wizard__preview-options > span:nth-child(2) i {
1128 border: 3px solid var(--wp-admin-theme-color,#2271b1)
1129 }
1130 .wpbc_setup_wizard__journey-step--details .wpbc_setup_wizard__preview-fields,
1131 .wpbc_setup_wizard__journey-step--guest-details .wpbc_setup_wizard__preview-fields {
1132 display: -ms-flexbox;
1133 display: flex
1134 }
1135 .wpbc_setup_wizard__preview-fields {
1136 -ms-flex-direction: column;
1137 flex-direction: column;
1138 gap: 6px
1139 }
1140 .wpbc_setup_wizard__preview-fields .menu_icon {
1141 -ms-flex: 0 0 auto;
1142 flex: 0 0 auto;
1143 color: #66717d;
1144 font-size: 14px
1145 }
1146 .wpbc_setup_wizard__preview-fields .wpbc_setup_wizard__preview-bar {
1147 width: 65%
1148 }
1149 .wpbc_setup_wizard__journey-arrow {
1150 display: -ms-inline-flexbox;
1151 display: inline-flex;
1152 width: 12px;
1153 -ms-flex: 0 0 12px;
1154 flex: 0 0 12px;
1155 -ms-flex-align: center;
1156 align-items: center;
1157 -ms-flex-pack: center;
1158 justify-content: center;
1159 color: #7a858f;
1160 font-size: 18px;
1161 line-height: 1
1162 }
1163 .wpbc_setup_wizard__card-copy {
1164 display: grid;
1165 grid-template-columns: 28px minmax(0,1fr);
1166 -ms-flex-align: start;
1167 align-items: start;
1168 gap: 12px;
1169 padding-top: 17px;
1170 border-top: 1px solid #e1e6eb;
1171 color: #535d67
1172 }
1173 .wpbc_setup_wizard__card-copy + .wpbc_setup_wizard__card-copy {
1174 margin-top: 17px
1175 }
1176 .wpbc_setup_wizard__card-copy > .menu_icon {
1177 color: #293746;
1178 font-size: 24px;
1179 line-height: 1
1180 }
1181 .wpbc_setup_wizard__card-copy-text,
1182 .wpbc_setup_wizard__card-copy-text span,
1183 .wpbc_setup_wizard__card-copy-text strong {
1184 display: block
1185 }
1186 .wpbc_setup_wizard__card-copy-text strong {
1187 margin-bottom: 5px;
1188 color: #20262e;
1189 font-size: 15px;
1190 font-weight: 700;
1191 line-height: 1.3
1192 }
1193 .wpbc_setup_wizard__card-copy-text span {
1194 font-size: 15px;
1195 line-height: 1.45
1196 }
1197 .wpbc_setup_wizard__journey-groups,
1198 .wpbc_setup_wizard__journey-option-list {
1199 display: grid;
1200 gap: 14px
1201 }
1202 .wpbc_setup_wizard__journey-groups {
1203 gap: 30px
1204 }
1205 .wpbc_setup_wizard__journey-group {
1206 min-width: 0
1207 }
1208 .wpbc_setup_wizard__journey-group--additional {
1209 margin-top: 8px;
1210 padding: 30px 18px 18px;
1211 border: 1px solid #f6f7f9;
1212 border-radius: 8px;
1213 background: #ebecef
1214 }
1215 .wpbc_setup_wizard__journey-group-heading {
1216 display: grid;
1217 gap: 4px;
1218 margin: 0 0 25px
1219 }
1220 .wpbc_setup_wizard__journey-group-heading h2,
1221 .wpbc_setup_wizard__journey-group-heading p {
1222 margin: 0
1223 }
1224 .wpbc_setup_wizard__journey-group-heading h2 {
1225 font-size: 19px;
1226 font-weight: 600;
1227 line-height: 1.35
1228 }
1229 .wpbc_setup_wizard__journey-group-heading p {
1230 color: var(--wpbc-wizard-muted);
1231 font-size: 13px
1232 }
1233 .wpbc_setup_wizard__journey-group--additional .wpbc_setup_wizard__journey-group-heading h2 {
1234 color: #3c4650
1235 }
1236 .wpbc_setup_wizard__journey-option-list {
1237 gap: 14px
1238 }
1239 .wpbc_setup_wizard__journey-option-card {
1240 display: grid;
1241 min-height: 0;
1242 grid-template-columns: minmax(245px,.9fr) minmax(500px,1.8fr) minmax(190px,.7fr);
1243 -ms-flex-align: stretch;
1244 align-items: stretch;
1245 gap: 22px;
1246 padding: 20px
1247 }
1248 .wpbc_setup_wizard__journey-option-card.is-additional {
1249 opacity: .7;
1250 transition: border-color 120ms,box-shadow 120ms,opacity 120ms
1251 }
1252 .wpbc_setup_wizard__journey-option-card.is-additional.is-selected,
1253 .wpbc_setup_wizard__journey-option-card.is-additional:focus-within,
1254 .wpbc_setup_wizard__journey-option-card.is-additional:hover {
1255 opacity: 1
1256 }
1257 .wpbc_setup_wizard__journey-option-card.is-additional.is-locked,
1258 .wpbc_setup_wizard__journey-option-card.is-locked {
1259 background: #f6f7f7;
1260 color: #646970;
1261 cursor: not-allowed;
1262 opacity: 1
1263 }
1264 .wpbc_setup_wizard__journey-option-card.is-locked:focus-within,
1265 .wpbc_setup_wizard__journey-option-card.is-locked:hover {
1266 border-color: var(--wpbc-wizard-border);
1267 box-shadow: none
1268 }
1269 .wpbc_setup_wizard__journey-option-card.is-locked .wpbc_setup_wizard__journey-option-best-for,
1270 .wpbc_setup_wizard__journey-option-card.is-locked .wpbc_setup_wizard__journey-option-summary,
1271 .wpbc_setup_wizard__journey-option-card.is-locked > .wpbc_setup_wizard__journey {
1272 opacity: .7
1273 }
1274 .wpbc_setup_wizard__journey-edition-badge {
1275 display: -ms-inline-flexbox;
1276 display: inline-flex;
1277 -ms-flex-align: center;
1278 align-items: center;
1279 -ms-flex-pack: center;
1280 justify-content: center;
1281 margin-inline-start: auto;
1282 padding: 2px 7px;
1283 border-radius: 999px;
1284 background: #f9d89c;
1285 color: #7a3e00;
1286 font-size: 10px;
1287 font-weight: 700;
1288 line-height: 1.35;
1289 white-space: nowrap
1290 }
1291 .wpbc_setup_wizard__journey-option-summary {
1292 position: relative;
1293 display: -ms-flexbox;
1294 display: flex;
1295 min-width: 0;
1296 -ms-flex-direction: column;
1297 flex-direction: column;
1298 -ms-flex-align: start;
1299 align-items: flex-start;
1300 -ms-flex-pack: center;
1301 justify-content: center;
1302 padding: 8px 0
1303 }
1304 .wpbc_setup_wizard__journey-option-description {
1305 display: block;
1306 margin: 10px 0 0 36px;
1307 color: var(--wpbc-wizard-muted);
1308 font-size: 14px;
1309 line-height: 1.45
1310 }
1311 .wpbc_setup_wizard__journey-option-card > .wpbc_setup_wizard__journey {
1312 min-width: 0;
1313 min-height: 150px;
1314 margin: 0;
1315 padding: 12px
1316 }
1317 .wpbc_setup_wizard__journey-option-card .wpbc_setup_wizard__journey-step {
1318 max-width: none
1319 }
1320 .wpbc_setup_wizard__journey-option-best-for {
1321 display: -ms-flexbox;
1322 display: flex;
1323 min-width: 0;
1324 -ms-flex-direction: column;
1325 flex-direction: column;
1326 -ms-flex-pack: center;
1327 justify-content: center;
1328 gap: 7px;
1329 padding: 18px 8px 18px 22px;
1330 border-left: 1px solid #e1e6eb;
1331 color: #535d67;
1332 font-size: 15px;
1333 line-height: 1.45
1334 }
1335 .wpbc_setup_wizard__journey-option-best-for strong {
1336 color: #20262e;
1337 font-size: 15px;
1338 font-weight: 700
1339 }
1340 .wpbc_setup_wizard__footer {
1341 display: grid;
1342 grid-template-columns: minmax(260px,50%) minmax(0,1fr);
1343 -ms-flex-align: center;
1344 align-items: center;
1345 border-top: 1px solid var(--wpbc-wizard-border)
1346 }
1347 .wpbc_setup_wizard__footer-primary,
1348 .wpbc_setup_wizard__footer-secondary {
1349 display: -ms-flexbox;
1350 display: flex;
1351 -ms-flex-align: center;
1352 align-items: center;
1353 gap: 10px;
1354 padding: 0 34px
1355 }
1356 .wpbc_setup_wizard__footer-secondary {
1357 -ms-flex-pack: start;
1358 justify-content: flex-start
1359 }
1360 .wpbc_setup_wizard__footer-primary {
1361 -ms-flex-direction: column;
1362 flex-direction: column;
1363 -ms-flex-align: end;
1364 align-items: flex-end;
1365 -ms-flex-pack: end;
1366 justify-content: flex-end
1367 }
1368 .wpbc_setup_wizard__footer-primary-actions {
1369 display: -ms-flexbox;
1370 display: flex;
1371 -ms-flex-align: center;
1372 align-items: center;
1373 -ms-flex-pack: end;
1374 justify-content: flex-end;
1375 gap: 10px
1376 }
1377 .wpbc_setup_wizard__footer-note {
1378 margin: 0;
1379 color: var(--wpbc-wizard-muted);
1380 font-size: 11px;
1381 line-height: 1.2
1382 }
1383 .wp-core-ui .wpbc_page .wpbc_setup_wizard__footer .button {
1384 display: -ms-inline-flexbox;
1385 display: inline-flex;
1386 height: auto;
1387 min-height: 44px;
1388 -ms-flex-align: center;
1389 align-items: center;
1390 -ms-flex-pack: center;
1391 justify-content: center;
1392 gap: 8px;
1393 padding: 8px 18px;
1394 font-size: 15px;
1395 line-height: 1.4
1396 }
1397 .wp-core-ui .wpbc_page .wpbc_setup_wizard__footer-secondary .button-link {
1398 min-height: 44px;
1399 padding: 8px 10px;
1400 color: var(--wpbc-wizard-muted);
1401 font-size: 14px;
1402 text-decoration: underline;
1403 text-underline-offset: 2px
1404 }
1405 .wp-core-ui .wpbc_page .wpbc_setup_wizard__footer-primary .button {
1406 padding-right: 20px;
1407 padding-left: 20px
1408 }
1409 .wpbc_setup_wizard__footer-primary .menu_icon {
1410 display: -ms-inline-flexbox;
1411 display: inline-flex;
1412 -ms-flex-align: center;
1413 align-items: center;
1414 -ms-flex-pack: center;
1415 justify-content: center;
1416 line-height: 1
1417 }
1418 .wpbc_setup_wizard__footer-primary .menu_icon::before {
1419 font-size: 16px;
1420 line-height: 1;
1421 vertical-align: 0
1422 }
1423 .wp-core-ui .wpbc_page .wpbc_setup_wizard__footer-secondary .button-link:focus,
1424 .wp-core-ui .wpbc_page .wpbc_setup_wizard__footer-secondary .button-link:hover {
1425 color: var(--wp-admin-theme-color-darker-20,#135e96)
1426 }
1427 .wpbc_setup_wizard__dialog-backdrop {
1428 position: fixed;
1429 inset: 0;
1430 z-index: var(--wpbc-wizard-layer-dialog);
1431 display: grid;
1432 place-items: center;
1433 padding: 24px;
1434 background: rgba(29,35,39,.62)
1435 }
1436 .wpbc_setup_wizard__dialog-backdrop[hidden] {
1437 display: none
1438 }
1439 .wpbc_setup_wizard__dialog {
1440 width: min(100%,500px);
1441 max-height: calc(100vh - 48px);
1442 overflow-y: auto;
1443 padding: 28px;
1444 border-radius: 8px;
1445 background: #fff;
1446 box-shadow: 0 16px 48px rgba(0,0,0,.25)
1447 }
1448 .wpbc_setup_wizard__dialog--with-details {
1449 width: min(100%,640px)
1450 }
1451 .wpbc_setup_wizard__dialog h2 {
1452 margin: 0 0 10px;
1453 font-size: 22px
1454 }
1455 .wpbc_setup_wizard__dialog p {
1456 margin: 0;
1457 color: var(--wpbc-wizard-muted)
1458 }
1459 .wpbc_setup_wizard__dialog-details {
1460 margin: 18px 0 0;
1461 padding-inline-start: 24px;
1462 color: #2c3338
1463 }
1464 .wpbc_setup_wizard__dialog-details li + li {
1465 margin-top: 10px
1466 }
1467 .wpbc_setup_wizard__dialog .wpbc_setup_wizard__dialog-note {
1468 margin-top: 18px;
1469 padding-top: 14px;
1470 border-top: 1px solid var(--wpbc-wizard-border);
1471 font-size: 13px
1472 }
1473 .wpbc_setup_wizard__dialog-actions {
1474 display: -ms-flexbox;
1475 display: flex;
1476 -ms-flex-pack: end;
1477 justify-content: flex-end;
1478 gap: 10px;
1479 margin-top: 26px
1480 }
1481 .wpbc_setup_wizard__status {
1482 position: absolute;
1483 width: 1px;
1484 height: 1px;
1485 padding: 0;
1486 border: 0;
1487 margin: -1px;
1488 overflow: hidden;
1489 clip: rect(0,0,0,0);
1490 white-space: nowrap
1491 }
1492 .wpbc_setup_wizard--busy::after {
1493 position: absolute;
1494 inset: 0;
1495 z-index: var(--wpbc-wizard-layer-busy-backdrop);
1496 background: rgba(246,247,247,.38);
1497 content: "";
1498 cursor: wait
1499 }
1500 .wpbc_setup_wizard__transition {
1501 position: absolute;
1502 inset: 0;
1503 z-index: var(--wpbc-wizard-layer-busy-status);
1504 display: none;
1505 place-items: center;
1506 padding: 24px;
1507 pointer-events: none
1508 }
1509 .wpbc_setup_wizard--busy .wpbc_setup_wizard__transition {
1510 display: grid
1511 }
1512 .wpbc_setup_wizard__transition-panel {
1513 display: -ms-inline-flexbox;
1514 display: inline-flex;
1515 min-height: 48px;
1516 -ms-flex-align: center;
1517 align-items: center;
1518 gap: 10px;
1519 padding: 10px 16px;
1520 border: 1px solid var(--wpbc-wizard-border);
1521 border-radius: 6px;
1522 background: #fff;
1523 box-shadow: 0 4px 18px rgba(29,35,39,.16);
1524 color: #1d2327;
1525 font-weight: 600
1526 }
1527 .wpbc_setup_wizard__transition-panel .spinner {
1528 float: none;
1529 margin: 0
1530 }
1531 .wpbc_setup_wizard :focus-visible {
1532 outline: 2px solid var(--wp-admin-theme-color,#2271b1);
1533 outline-offset: 2px
1534 }
1535 [dir=rtl] .wpbc_setup_wizard__rail {
1536 border-right: 0;
1537 border-left: 1px solid var(--wpbc-wizard-border)
1538 }
1539 [dir=rtl] .wpbc_setup_wizard__step:not(:last-child)::after {
1540 right: 11px;
1541 left: auto
1542 }
1543 [dir=rtl] .wpbc_setup_wizard__rail-note {
1544 margin-right: 36px;
1545 margin-left: 0
1546 }
1547 [dir=rtl] .wpbc_setup_wizard__field select {
1548 padding-right: 12px;
1549 padding-left: 32px
1550 }
1551 [dir=rtl] .wpbc_setup_wizard__mode-toolbar-preview .wpbc_setup_wizard__mode-toolbar-option.is-current::after {
1552 float: left;
1553 margin-right: 18px;
1554 margin-left: 0
1555 }
1556 [dir=rtl] .wpbc_setup_wizard__mode-toolbar-tooltip {
1557 right: 13px;
1558 left: auto
1559 }
1560 [dir=rtl] .wpbc_setup_wizard__mode-toolbar-tooltip::before {
1561 right: 24px;
1562 left: auto
1563 }
1564 [dir=rtl] .wpbc_setup_wizard__journey-arrow {
1565 -ms-transform: rotate(180deg);
1566 transform: rotate(180deg)
1567 }
1568 [dir=rtl] .wpbc_setup_wizard__journey-option-description {
1569 margin-right: 36px;
1570 margin-left: 0
1571 }
1572 [dir=rtl] .wpbc_setup_wizard__journey-option-best-for {
1573 padding-right: 22px;
1574 padding-left: 8px;
1575 border-right: 1px solid #e1e6eb;
1576 border-left: 0
1577 }
1578 @media screen and (max-width:1160px) {
1579 .wpbc_setup_wizard__main {
1580 padding-right: 28px;
1581 padding-left: 28px
1582 }
1583 .wpbc_setup_wizard__experience-grid {
1584 grid-template-columns: 1fr
1585 }
1586 .wpbc_setup_wizard__experience-card {
1587 min-height: 0
1588 }
1589 .wpbc_setup_wizard__journey-option-card {
1590 grid-template-columns: minmax(210px,.8fr) minmax(0,1.5fr)
1591 }
1592 .wpbc_setup_wizard__journey-option-best-for {
1593 grid-column: 1/-1;
1594 padding: 16px 0 0;
1595 border-top: 1px solid #e1e6eb;
1596 border-left: 0
1597 }
1598 [dir=rtl] .wpbc_setup_wizard__journey-option-best-for {
1599 padding: 16px 0 0;
1600 border-right: 0
1601 }
1602 }
1603 @media screen and (max-width:782px) {
1604 .wpbc_setup_wizard__settings-hint {
1605 -ms-flex-pack: center;
1606 justify-content: center;
1607 margin-top: -10px;
1608 padding-inline: 0;
1609 text-align: center
1610 }
1611 body.wpbc_setup_wizard_page {
1612 overflow: hidden
1613 }
1614 .wpbc_setup_wizard {
1615 grid-template-rows: var(--wpbc_ui_top_nav__height,48px) minmax(0,1fr) auto
1616 }
1617 .wpbc_setup_wizard__layout {
1618 grid-template-columns: 1fr;
1619 overflow-y: auto
1620 }
1621 .wpbc_setup_wizard__mode-toolbar-preview .wpbc_ui_el__divider {
1622 display: none
1623 }
1624 .wpbc_setup_wizard__mode-toolbar-tooltip {
1625 left: 0
1626 }
1627 [dir=rtl] .wpbc_setup_wizard__mode-toolbar-tooltip {
1628 right: 0;
1629 left: auto
1630 }
1631 .wpbc_setup_wizard__rail {
1632 padding: 16px 20px 80px;
1633 border-right: 0;
1634 border-bottom: 1px solid var(--wpbc-wizard-border)
1635 }
1636 [dir=rtl] .wpbc_setup_wizard__rail {
1637 border-left: 0
1638 }
1639 .wpbc_setup_wizard__rail h2 {
1640 margin-bottom: 12px;
1641 font-size: 15px
1642 }
1643 .wpbc_setup_wizard__steps {
1644 display: -ms-flexbox;
1645 display: flex;
1646 -ms-flex-align: center;
1647 align-items: center;
1648 gap: 8px
1649 }
1650 .wpbc_setup_wizard__step {
1651 min-height: 28px
1652 }
1653 .wpbc_setup_wizard__rail-note,
1654 .wpbc_setup_wizard__step-label,
1655 .wpbc_setup_wizard__step:not(:last-child)::after {
1656 display: none
1657 }
1658 .wpbc_setup_wizard__main {
1659 padding: 110px 16px 36px;
1660 overflow: visible
1661 }
1662 .wpbc_setup_wizard__stage--welcome {
1663 padding-top: 24px
1664 }
1665 .wpbc_setup_wizard__step-heading {
1666 margin-bottom: 22px
1667 }
1668 .wpbc_setup_wizard__content-panel {
1669 padding: 26px 22px 22px
1670 }
1671 .wpbc_setup_wizard__field-grid {
1672 grid-template-columns: 1fr;
1673 gap: 20px
1674 }
1675 .wpbc_setup_wizard__notice {
1676 margin-top: 30px;
1677 padding: 18px
1678 }
1679 .wpbc_setup_wizard__experience-grid {
1680 grid-template-columns: 1fr
1681 }
1682 .wpbc_setup_wizard__journey-option-card {
1683 grid-template-columns: 1fr;
1684 gap: 16px;
1685 padding: 18px
1686 }
1687 .wpbc_setup_wizard__journey-group--additional {
1688 padding: 24px 12px 12px
1689 }
1690 .wpbc_setup_wizard__journey-option-card > .wpbc_setup_wizard__journey {
1691 min-height: 0
1692 }
1693 .wpbc_setup_wizard__footer {
1694 display: -ms-flexbox;
1695 display: flex;
1696 -ms-flex-wrap: wrap;
1697 flex-wrap: wrap;
1698 gap: 8px;
1699 padding: 10px 14px
1700 }
1701 .wpbc_setup_wizard__footer-primary,
1702 .wpbc_setup_wizard__footer-secondary {
1703 -ms-flex: 1 1 auto;
1704 flex: 1 1 auto;
1705 padding: 0
1706 }
1707 .wpbc_setup_wizard__footer-secondary {
1708 -ms-flex-order: 2;
1709 order: 2;
1710 -ms-flex-pack: start;
1711 justify-content: flex-start
1712 }
1713 .wpbc_setup_wizard__footer-primary {
1714 -ms-flex-order: 1;
1715 order: 1;
1716 -ms-flex-pack: end;
1717 justify-content: flex-end
1718 }
1719 .wpbc_setup_wizard__footer-primary-actions {
1720 width: 100%
1721 }
1722 }
1723 @media screen and (max-width:480px) {
1724 .wpbc_setup_wizard__footer-primary,
1725 .wpbc_setup_wizard__footer-secondary {
1726 width: 100%;
1727 -ms-flex-pack: justify;
1728 justify-content: space-between
1729 }
1730 .wpbc_setup_wizard__journey {
1731 -ms-flex-wrap: wrap;
1732 flex-wrap: wrap
1733 }
1734 .wpbc_setup_wizard__journey-step {
1735 -ms-flex-preferred-size: 38%;
1736 flex-basis: 38%;
1737 max-width: none
1738 }
1739 .wpbc_setup_wizard__journey-arrow {
1740 display: none
1741 }
1742 }
1743 @media (prefers-reduced-motion:reduce) {
1744 .wpbc_setup_wizard *,
1745 .wpbc_setup_wizard ::after,
1746 .wpbc_setup_wizard ::before {
1747 scroll-behavior: auto!important;
1748 transition-duration: 0s!important;
1749 animation-duration: 0s!important;
1750 animation-iteration-count: 1!important
1751 }
1752 }