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 / step-date-selection / _src / step-date-selection.css

step-date-selection.css in Booking Calendar 11.9, at includes/page-setup-wizard/step-date-selection/_src/step-date-selection.css

853 lines 19.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Setup Wizard Date Selection editor.
3 */
4 .wpbc_setup_wizard__date-selection-form {
5 display: grid;
6 gap: 14px;
7 }
8
9 .wpbc_setup_wizard__date-selection-modes,
10 .wpbc_setup_wizard__date-selection-preview,
11 .wpbc_setup_wizard__date-selection-settings,
12 .wpbc_setup_wizard__date-selection-changeover,
13 .wpbc_setup_wizard__date-selection-behavior,
14 .wpbc_setup_wizard__date-selection-legend {
15 margin: 0;
16 border: 1px solid var(--wpbc-wizard-border, #dcdcde);
17 border-radius: 7px;
18 background: #fff;
19 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
20 }
21
22 .wpbc_setup_wizard__date-selection-modes {
23 padding: 14px 16px 16px;
24 }
25
26 .wpbc_setup_wizard__date-selection-modes-heading {
27 display: flex;
28 align-items: center;
29 flex-wrap: wrap;
30 gap: 8px 12px;
31 }
32
33 .wpbc_setup_wizard__date-selection-compatibility-note {
34 display: inline-flex;
35 align-items: center;
36 gap: 5px;
37 color: var(--wpbc-wizard-muted, #646970);
38 font-size: 12px;
39 }
40
41 .wpbc_setup_wizard__date-selection-compatibility-note .menu_icon {
42 color: var(--wp-admin-theme-color, #2271b1);
43 }
44
45 .wpbc_setup_wizard__date-selection-journey-badge {
46 display: inline-flex;
47 min-width: 0;
48 max-width: 100%;
49 align-items: center;
50 padding: 3px 10px;
51 border-radius: 999px;
52 background: #e8f0fe;
53 color: #135e96;
54 font-size: 11px;
55 font-weight: 600;
56 line-height: 1.35;
57 overflow-wrap: anywhere;
58 white-space: normal;
59 }
60
61 .wpbc_setup_wizard__date-selection-modes > legend,
62 .wpbc_setup_wizard__date-selection-preview h2,
63 .wpbc_setup_wizard__date-selection-settings h2,
64 .wpbc_setup_wizard__date-selection-changeover h2,
65 .wpbc_setup_wizard__date-selection-behavior h2,
66 .wpbc_setup_wizard__date-selection-legend h2 {
67 margin: 0;
68 color: #1d2327;
69 font-size: 16px;
70 font-weight: 600;
71 line-height: 1.4;
72 }
73
74 .wpbc_setup_wizard__date-selection-mode-grid {
75 display: grid;
76 grid-template-columns: repeat(4, minmax(0, 1fr));
77 margin-top: 9px;
78 }
79
80 .wpbc_setup_wizard__date-selection-mode-option {
81 display: grid;
82 grid-template-rows: auto minmax(0, 1fr);
83 min-width: 0;
84 }
85
86 .wpbc_setup_wizard__date-selection-mode-card {
87 position: relative;
88 display: grid;
89 grid-template-columns: auto 92px minmax(0, 1fr);
90 min-width: 0;
91 min-height: 98px;
92 height: 100%;
93 align-items: center;
94 gap: 11px;
95 margin: 0;
96 padding: 10px 16px;
97 border-right: 1px solid #dcdcde;
98 background: #fff;
99 box-sizing: border-box;
100 cursor: pointer;
101 }
102
103 .wpbc_setup_wizard__date-selection-mode-option:first-child .wpbc_setup_wizard__date-selection-mode-card {
104 border-radius: 5px 0 0 5px;
105 }
106
107 .wpbc_setup_wizard__date-selection-mode-option:last-child .wpbc_setup_wizard__date-selection-mode-card {
108 border-right: 0;
109 border-radius: 0 5px 5px 0;
110 }
111
112 .wpbc_setup_wizard__date-selection-mode-card.is-selected {
113 background: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 5%, #fff);
114 box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color, #2271b1);
115 }
116
117 .wpbc_setup_wizard__date-selection-mode-card:focus-within {
118 outline: 2px solid var(--wp-admin-theme-color, #2271b1);
119 outline-offset: -2px;
120 }
121
122 .wpbc_setup_wizard__date-selection-mode-card.is-locked {
123 background: #f6f7f7;
124 color: #646970;
125 cursor: not-allowed;
126 }
127
128 .wpbc_setup_wizard__date-selection-mode-card.is-locked .wpbc_setup_wizard__date-selection-mode-icon,
129 .wpbc_setup_wizard__date-selection-mode-card.is-locked .wpbc_setup_wizard__date-selection-mode-copy {
130 opacity: 0.7;
131 }
132
133 .wpbc_setup_wizard__date-selection-mode-card > input {
134 align-self: center;
135 margin: 0;
136 }
137
138 .wpbc_setup_wizard__date-selection-mode-icon {
139 display: block;
140 align-self: start;
141 width: 92px;
142 min-height: 76px;
143 padding: 5px 7px;
144 border: 1px solid #c3c4c7;
145 border-radius: 4px;
146 background: #fff;
147 box-sizing: border-box;
148 }
149
150 .wpbc_setup_wizard__date-selection-mode-header {
151 display: flex;
152 align-items: center;
153 justify-content: space-between;
154 gap: 4px;
155 min-height: 12px;
156 margin: 0 0 6px;
157 }
158
159 .wpbc_setup_wizard__date-selection-mode-year {
160 display: block;
161 margin: 0;
162 color: #3c434a;
163 font-size: 10px;
164 font-weight: 600;
165 line-height: 1.2;
166 text-align: start;
167 }
168
169 .wpbc_setup_wizard__date-selection-mode-navigation {
170 display: inline-flex;
171 align-items: center;
172 gap: 1px;
173 color: #50575e;
174 line-height: 5px;
175 }
176
177 .wpbc_setup_wizard__date-selection-mode-navigation .menu_icon {
178 margin: 0;
179 }
180
181 .wpbc_setup_wizard__date-selection-mode-navigation .menu_icon::before {
182 font-size: 10px;
183 line-height: 5px;
184 }
185
186 .wpbc_setup_wizard__date-selection-mode-icon .wpbc_setup_wizard__preview-calendar {
187 width: 100%;
188 }
189
190 .wpbc_setup_wizard__date-selection-mode-copy {
191 display: grid;
192 align-self: start;
193 min-width: 0;
194 gap: 3px;
195 }
196
197 .wpbc_setup_wizard__date-selection-mode-copy strong {
198 display: inline-flex;
199 align-items: center;
200 gap: 4px;
201 font-size: 14px;
202 line-height: 1.35;
203 }
204
205 .wpbc_setup_wizard__date-selection-mode-copy .menu_icon::before {
206 font-size: 14px;
207 }
208
209 .wpbc_setup_wizard__date-selection-mode-badges {
210 display: flex;
211 min-width: 0;
212 min-height: 20px;
213 width: 100%;
214 align-items: flex-start;
215 justify-content: flex-end;
216 flex-wrap: wrap;
217 gap: 4px;
218 padding: 0 7px 5px;
219 box-sizing: border-box;
220 }
221
222 .wpbc_setup_wizard__date-selection-mode-badge {
223 display: inline-flex;
224 align-items: center;
225 max-width: 100%;
226 padding: 2px 7px;
227 border-radius: 999px;
228 box-sizing: border-box;
229 font-size: 10px;
230 font-weight: 600;
231 line-height: 1.25;
232 overflow-wrap: anywhere;
233 text-align: center;
234 white-space: normal;
235 }
236
237 .wpbc_setup_wizard__date-selection-mode-badge.is-best {
238 background: #dff4dc;
239 color: #116329;
240 }
241
242 .wpbc_setup_wizard__date-selection-mode-badge.is-supported {
243 background: #e8f0fe;
244 color: #135e96;
245 }
246
247 .wpbc_setup_wizard__date-selection-mode-badge.is-locked {
248 background: #e5e5e5;
249 color: #50575e;
250 }
251
252 .wpbc_setup_wizard__date-selection-review-journeys {
253 display: block;
254 margin: 12px 0 0 auto;
255 font-size: 12px;
256 }
257
258 .wpbc_setup_wizard__date-selection-mode-copy small,
259 .wpbc_setup_wizard__date-selection-preview-help,
260 .wpbc_setup_wizard__date-selection-settings-panel p,
261 .wpbc_setup_wizard__date-selection-locked-note {
262 color: var(--wpbc-wizard-muted, #646970);
263 font-size: 12px;
264 line-height: 1.45;
265 }
266
267 .wpbc_setup_wizard__date-selection-locked-note {
268 margin: 12px 0 0;
269 padding: 10px 12px;
270 border: 1px solid var(--wpbc-wizard-warning-border);
271 border-inline-start: 4px solid var(--wpbc-wizard-warning-accent);
272 border-radius: 6px;
273 background: var(--wpbc-wizard-warning-background);
274 color: var(--wpbc-wizard-warning-text);
275 }
276
277 .wpbc_setup_wizard__date-selection-settings :disabled,
278 .wpbc_setup_wizard__date-selection-changeover :disabled,
279 .wpbc_setup_wizard__date-selection-behavior :disabled,
280 .wpbc_setup_wizard__date-selection-legend :disabled {
281 cursor: not-allowed;
282 }
283
284 .wpbc_setup_wizard__date-selection-step [data-wpbc-date-selection-disabled-tooltip-active="1"],
285 .wpbc_setup_wizard__date-selection-step [data-wpbc-date-selection-disabled-tooltip-active="1"] .wpbc_ui__toggle_icon {
286 cursor: help;
287 }
288
289 .wpbc_setup_wizard__date-selection-step [data-wpbc-date-selection-disabled-tooltip-active="1"]:focus {
290 border-radius: 999px;
291 outline: 2px solid var(--wp-admin-theme-color, #2271b1);
292 outline-offset: 2px;
293 }
294
295 .wpbc_setup_wizard__edition-badge {
296 display: inline-flex;
297 align-items: center;
298 justify-content: center;
299 padding: 2px 7px;
300 border-radius: 999px;
301 background: #f9d89c;
302 color: #7a3e00;
303 font-size: 10px;
304 font-weight: 700;
305 white-space: nowrap;
306 }
307
308 .wpbc_setup_wizard__date-selection-workspace {
309 display: grid;
310 grid-template-columns: minmax(0, 1.9fr) minmax(330px, 1fr);
311 gap: 14px;
312 }
313
314 .wpbc_setup_wizard__date-selection-sidebar {
315 display: grid;
316 min-width: 0;
317 align-content: start;
318 gap: 14px;
319 }
320
321 .wpbc_setup_wizard__date-selection-preview {
322 position: sticky;
323 top: 0px;
324 align-self: start;
325 }
326
327 @media screen and (min-width: 1181px) {
328 .wpbc_setup_wizard[data-step="date_selection"] .wpbc_setup_wizard__main {
329 padding-top: 0;
330 }
331
332 .wpbc_setup_wizard__stage--date_selection {
333 padding-top: 30px;
334 }
335 }
336
337 .wpbc_setup_wizard__date-selection-preview,
338 .wpbc_setup_wizard__date-selection-settings {
339 padding: 18px 20px;
340 }
341
342 .wpbc_setup_wizard__date-selection-preview-help {
343 margin: 4px 0 12px;
344 }
345
346 .wpbc_setup_wizard__date-selection-calendar {
347 /*min-height: 430px;*/
348 padding: 8px;
349 /*border: 1px solid #dcdcde;*/
350 border-radius: 5px;
351 background: #fff;
352 overflow: auto;
353 }
354
355 .wpbc_setup_wizard__date-selection-calendar .wpbc_calendar_wraper,
356 .wpbc_setup_wizard__date-selection-calendar .wpbc_cal_container,
357 .wpbc_setup_wizard__date-selection-calendar .datepick-inline {
358 width: 100% !important;
359 max-width: 1023px !important;
360 }
361
362 .wpbc_setup_wizard__date-selection-calendar .wpbc_cal_container {
363 margin: 0 auto;
364 }
365
366 /* The configurable wizard legend below the calendar is authoritative here. */
367 .wpbc_setup_wizard__date-selection-calendar .wpbc_calendar_wraper > .block_hints {
368 display: none !important;
369 }
370
371 .wpbc_setup_wizard__date-selection-legend-preview {
372 display: flex;
373 flex-wrap: wrap;
374 align-items: center;
375 gap: 8px 16px;
376 margin-top: 12px;
377 }
378
379 .wpbc_setup_wizard__date-selection-legend-preview[hidden],
380 .wpbc_setup_wizard__date-selection-legend-preview [hidden] {
381 display: none;
382 }
383
384 .wpbc_setup_wizard__date-selection-legend-preview.is-vertical {
385 align-items: flex-start;
386 flex-direction: column;
387 }
388
389 .wpbc_setup_wizard__date-selection-legend-preview .block_hints {
390 display: block;
391 margin: 0;
392 }
393
394 .wpbc_setup_wizard__date-selection-legend-preview .wpdev_hint_with_text {
395 margin: 0;
396 }
397
398 .wpbc_setup_wizard__date-selection-settings {
399 display: flex;
400 min-width: 0;
401 flex-direction: column;
402 }
403
404 .wpbc_setup_wizard__date-selection-settings-heading {
405 display: flex;
406 align-items: center;
407 justify-content: space-between;
408 gap: 12px;
409 }
410
411 .wpbc_setup_wizard__date-selection-settings-heading h2 {
412 margin: 0;
413 }
414
415 .wpbc_setup_wizard__date-selection-settings-panel {
416 padding: 16px 0 0;
417 border-bottom: 0px solid #dcdcde;
418 font-size: 14px;
419 }
420
421 .wpbc_setup_wizard__date-selection-settings-panel[hidden],
422 .wpbc_setup_wizard__date-selection-changeover[hidden],
423 .wpbc_setup_wizard__date-selection-changeover-controls[hidden],
424 .wpbc_setup_wizard__date-selection-changeover-fields[hidden],
425 .wpbc_setup_wizard__date-selection-option[hidden] {
426 display: none;
427 }
428
429 .wpbc_setup_wizard__date-selection-number-intro {
430 margin: 0 0 10px;
431 }
432
433 .wpbc_setup_wizard__date-selection-number-grid {
434 display: grid;
435 grid-template-columns: repeat(2, minmax(0, 1fr));
436 gap: 12px;
437 }
438
439 .wpbc_setup_wizard__date-selection-number-field {
440 display: grid;
441 min-width: 0;
442 gap: 8px;
443 padding: 12px;
444 border: 1px solid #dcdcde;
445 border-radius: 5px;
446 background: #f6f7f7;
447 }
448
449 .wpbc_setup_wizard__date-selection-number-heading {
450 display: flex;
451 align-items: center;
452 justify-content: space-between;
453 gap: 12px;
454 }
455
456 .wpbc_setup_wizard__date-selection-number-heading label {
457 color: #1d2327;
458 font-weight: 600;
459 line-height: 1.35;
460 font-size: 12px;
461 }
462
463 .wpbc_setup_wizard__date-selection-number-heading input[type="number"] {
464 width: 76px;
465 min-width: 76px;
466 min-height: 36px;
467 margin: 0;
468 }
469
470 .wpbc_setup_wizard__date-selection-range {
471 width: 100%;
472 margin: 0;
473 accent-color: var(--wp-admin-theme-color, #2271b1);
474 }
475
476 .wpbc_setup_wizard__date-selection-number-help {
477 margin: 0;
478 }
479
480 .wpbc_setup_wizard__date-selection-weekdays {
481 display: grid;
482 gap: 8px;
483 margin-top: 14px;
484 }
485
486 .wpbc_setup_wizard__date-selection-weekdays > div {
487 display: grid;
488 grid-template-columns: repeat(7, minmax(0, 1fr));
489 gap: 6px;
490 }
491
492 .wpbc_setup_wizard__date-selection-weekdays .button {
493 min-width: 0;
494 padding: 0 5px;
495 text-align: center;
496 }
497
498 .wpbc_setup_wizard__date-selection-weekdays .button.is-selected {
499 border-color: var(--wp-admin-theme-color, #2271b1);
500 background: var(--wp-admin-theme-color, #2271b1);
501 color: #fff;
502 }
503
504 .wpbc_setup_wizard__date-selection-specific {
505 display: grid;
506 gap: 6px;
507 margin-top: 14px;
508 font-size: 12px;
509 line-height: 1.45;
510 }
511
512 .wpbc_setup_wizard__date-selection-specific > label {
513 color: #1d2327;
514 font-size: 12px;
515 font-weight: 600;
516 line-height: 1.35;
517 }
518
519 .wpbc_setup_wizard__date-selection-specific input[type="text"] {
520 width: 100%;
521 min-height: 36px;
522 margin: 0;
523 font-size: 13px;
524 }
525
526 .wpbc_setup_wizard__date-selection-specific-presets {
527 display: flex;
528 flex-wrap: wrap;
529 align-items: center;
530 gap: 2px 12px;
531 }
532
533 .wpbc_setup_wizard__date-selection-specific-presets .button-link {
534 min-height: 24px;
535 padding: 0;
536 font-size: 12px;
537 line-height: 1.4;
538 }
539
540 .wpbc_setup_wizard__date-selection-specific .wpbc_setup_wizard__field-help {
541 margin: 0;
542 font-size: 12px;
543 line-height: 1.45;
544 }
545
546 .wpbc_setup_wizard__date-selection-changeover {
547 display: grid;
548 gap: 12px;
549 padding: 18px 20px;
550 }
551
552 .wpbc_setup_wizard__date-selection-behavior,
553 .wpbc_setup_wizard__date-selection-legend {
554 display: grid;
555 gap: 12px;
556 padding: 18px 20px;
557 }
558
559 .wpbc_setup_wizard__date-selection-changeover.is-locked {
560 opacity: 0.7;
561 }
562
563 .wpbc_setup_wizard__date-selection-changeover-heading {
564 display: flex;
565 align-items: center;
566 gap: 8px;
567 }
568
569 .wpbc_setup_wizard__date-selection-changeover-toggle {
570 margin-left: auto;
571 }
572
573 .wpbc_setup_wizard__date-selection-changeover-visual {
574 box-sizing: border-box;
575 width: 100%;
576 max-width: 320px;
577 padding: 10px 12px;
578 border: 1px solid #dcdcde;
579 border-radius: 5px;
580 background: #f6f7f7;
581 }
582
583 .wpbc_setup_wizard__date-selection-changeover-visual .wpbc_setup_wizard__preview-calendar {
584 grid-template-columns: repeat(7, minmax(0, 1fr));
585 gap: 4px;
586 }
587
588 .wpbc_setup_wizard__date-selection-changeover-visual .wpbc_setup_wizard__preview-calendar > span {
589 min-height: 24px;
590 aspect-ratio: auto;
591 }
592
593 .wpbc_setup_wizard__date-selection-changeover-visual .wpbc_setup_wizard__preview-calendar > span:nth-child(-n+14),
594 .wpbc_setup_wizard__date-selection-changeover-visual .wpbc_setup_wizard__preview-calendar > span:nth-child(n+22) {
595 display: none;
596 }
597
598 .wpbc_setup_wizard__date-selection-changeover-help {
599 margin: -4px 0 0;
600 color: var(--wpbc-wizard-muted, #646970);
601 font-size: 12px;
602 line-height: 1.45;
603 }
604
605 .wpbc_setup_wizard__date-selection-changeover-controls {
606 display: grid;
607 gap: 10px;
608 padding: 12px;
609 border: 1px solid #cfe2f8;
610 border-radius: 5px;
611 background: #f5f9ff;
612 }
613
614 .wpbc_setup_wizard__date-selection-changeover-fields {
615 display: grid;
616 gap: 10px;
617 }
618
619 .wpbc_setup_wizard__date-selection-time-fields {
620 display: grid;
621 grid-template-columns: repeat(2, minmax(0, 1fr));
622 gap: 10px;
623 }
624
625 .wpbc_setup_wizard__date-selection-time-field {
626 display: grid;
627 min-width: 0;
628 gap: 5px;
629 color: #1d2327;
630 font-size: 12px;
631 font-weight: 600;
632 line-height: 1.4;
633 }
634
635 .wpbc_setup_wizard__date-selection-time-field select {
636 width: 100%;
637 min-width: 0;
638 font-weight: 400;
639 }
640
641 .wpbc_setup_wizard__date-selection-changeover-option {
642 display: flex;
643 align-items: center;
644 justify-content: space-between;
645 gap: 8px;
646 font-size: 12px;
647 line-height: 1.45;
648 }
649
650 .wpbc_setup_wizard__date-selection-changeover-option-toggle {
651 flex: 0 0 auto;
652 }
653
654 .wpbc_setup_wizard__date-selection-option {
655 display: flex;
656 min-width: 0;
657 align-items: center;
658 gap: 10px;
659 padding: 12px 0;
660 border-bottom: 0px solid #dcdcde;
661 }
662
663 .wpbc_setup_wizard__date-selection-option:last-of-type {
664 border-bottom: 0;
665 }
666
667 .wpbc_setup_wizard__date-selection-option > span:first-child {
668 display: grid;
669 min-width: 0;
670 gap: 3px;
671 }
672
673 .wpbc_setup_wizard__date-selection-option label,
674 .wpbc_setup_wizard__date-selection-legend-item-heading > label {
675 color: #1d2327;
676 font-size: 12px;
677 font-weight: 600;
678 line-height: 1.4;
679 }
680
681 .wpbc_setup_wizard__date-selection-option small,
682 .wpbc_setup_wizard__date-selection-section-heading small {
683 color: var(--wpbc-wizard-muted, #646970);
684 font-size: 12px;
685 line-height: 1.45;
686 }
687
688 .wpbc_setup_wizard__date-selection-option.is-locked {
689 opacity: 0.7;
690 }
691
692 .wpbc_setup_wizard__date-selection-option > .wpbc_setup_wizard__edition-badge {
693 margin-left: auto;
694 }
695
696 .wpbc_setup_wizard__date-selection-option-toggle {
697 flex: 0 0 auto;
698 margin-left: auto;
699 }
700
701 .wpbc_setup_wizard__date-selection-option > .wpbc_setup_wizard__edition-badge + .wpbc_setup_wizard__date-selection-option-toggle {
702 margin-left: 0;
703 }
704
705 .wpbc_setup_wizard__date-selection-section-heading {
706 display: flex;
707 align-items: center;
708 gap: 12px;
709 }
710
711 .wpbc_setup_wizard__date-selection-section-heading > span:first-child {
712 display: grid;
713 min-width: 0;
714 gap: 3px;
715 }
716
717 .wpbc_setup_wizard__date-selection-section-toggle {
718 flex: 0 0 auto;
719 margin-left: auto;
720 }
721
722 .wpbc_setup_wizard__date-selection-legend-settings {
723 display: grid;
724 gap: 12px;
725 }
726
727 .wpbc_setup_wizard__date-selection-legend-settings[hidden] {
728 display: none;
729 }
730
731 .wpbc_setup_wizard__date-selection-legend-grid {
732 display: grid;
733 grid-template-columns: repeat(2, minmax(0, 1fr));
734 gap: 10px;
735 }
736
737 .wpbc_setup_wizard__date-selection-legend-item {
738 display: grid;
739 min-width: 0;
740 gap: 8px;
741 padding: 10px;
742 border: 1px solid #dcdcde;
743 border-radius: 5px;
744 background: #f6f7f7;
745 }
746
747 .wpbc_setup_wizard__date-selection-legend-item-heading {
748 display: flex;
749 align-items: center;
750 justify-content: space-between;
751 gap: 8px;
752 }
753
754 .wpbc_setup_wizard__date-selection-legend-item input[type="text"] {
755 width: 100%;
756 min-width: 0;
757 min-height: 34px;
758 margin: 0;
759 font-size: 12px;
760 }
761
762 .wpbc_setup_wizard__date-selection-legend-options {
763 display: grid;
764 border-top: 1px solid #dcdcde;
765 }
766
767 @media screen and (max-width: 1180px) {
768 .wpbc_setup_wizard__date-selection-mode-grid {
769 grid-template-columns: repeat(2, minmax(0, 1fr));
770 }
771
772 .wpbc_setup_wizard__date-selection-mode-option:nth-child(2) .wpbc_setup_wizard__date-selection-mode-card {
773 border-right: 0;
774 }
775
776 .wpbc_setup_wizard__date-selection-mode-option:nth-child(-n+2) .wpbc_setup_wizard__date-selection-mode-card {
777 border-bottom: 1px solid #dcdcde;
778 }
779
780 .wpbc_setup_wizard__date-selection-workspace {
781 grid-template-columns: 1fr;
782 }
783
784 .wpbc_setup_wizard__date-selection-preview {
785 position: static;
786 }
787 }
788
789 @media screen and (max-width: 782px) {
790 .wpbc_setup_wizard__date-selection-mode-grid {
791 grid-template-columns: 1fr;
792 }
793
794 .wpbc_setup_wizard__date-selection-mode-card {
795 border-right: 0;
796 border-bottom: 1px solid #dcdcde;
797 }
798
799 .wpbc_setup_wizard__date-selection-mode-option:last-child .wpbc_setup_wizard__date-selection-mode-card {
800 border-bottom: 0;
801 }
802
803 .wpbc_setup_wizard__date-selection-preview,
804 .wpbc_setup_wizard__date-selection-settings,
805 .wpbc_setup_wizard__date-selection-changeover,
806 .wpbc_setup_wizard__date-selection-behavior,
807 .wpbc_setup_wizard__date-selection-legend {
808 padding: 14px;
809 }
810
811 .wpbc_setup_wizard__date-selection-number-grid {
812 grid-template-columns: 1fr;
813 }
814
815 .wpbc_setup_wizard__date-selection-time-fields {
816 grid-template-columns: 1fr;
817 }
818
819 .wpbc_setup_wizard__date-selection-legend-grid {
820 grid-template-columns: 1fr;
821 }
822 }
823
824 [dir="rtl"] .wpbc_setup_wizard__date-selection-mode-card {
825 border-right: 0;
826 border-left: 1px solid #dcdcde;
827 }
828
829 [dir="rtl"] .wpbc_setup_wizard__date-selection-mode-option:last-child .wpbc_setup_wizard__date-selection-mode-card {
830 border-left: 0;
831 }
832
833 [dir="rtl"] .wpbc_setup_wizard__date-selection-review-journeys {
834 margin-right: auto;
835 margin-left: 0;
836 }
837
838 [dir="rtl"] .wpbc_setup_wizard__date-selection-changeover-toggle {
839 margin-right: auto;
840 margin-left: 0;
841 }
842
843 [dir="rtl"] .wpbc_setup_wizard__date-selection-option-toggle,
844 [dir="rtl"] .wpbc_setup_wizard__date-selection-section-toggle,
845 [dir="rtl"] .wpbc_setup_wizard__date-selection-option > .wpbc_setup_wizard__edition-badge {
846 margin-right: auto;
847 margin-left: 0;
848 }
849
850 [dir="rtl"] .wpbc_setup_wizard__date-selection-option > .wpbc_setup_wizard__edition-badge + .wpbc_setup_wizard__date-selection-option-toggle {
851 margin-right: 0;
852 }
853