@asksable/site-connector 0.1.1 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1188 @@
1
+ .bw {
2
+ --bw-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
3
+ --bw-bg: #ffffff;
4
+ --bw-text: #1a1a1a;
5
+ --bw-text-secondary: #6b6b6b;
6
+ --bw-text-muted: #999999;
7
+ --bw-border: #e8e8e8;
8
+ --bw-border-light: #f0f0f0;
9
+ --bw-radius: 8px;
10
+ --bw-radius-lg: 12px;
11
+ --bw-primary: #1a1a1a;
12
+ --bw-primary-text: #ffffff;
13
+ --bw-hover: #f8f8f8;
14
+ --bw-error-bg: #fef2f2;
15
+ --bw-error-text: #b91c1c;
16
+ --bw-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
17
+ --bw-shadow-badge: 0 1px 4px rgba(0, 0, 0, 0.12);
18
+ position: relative;
19
+ display: flex;
20
+ flex-direction: column;
21
+ width: 100%;
22
+ background: var(--bw-bg);
23
+ color: var(--bw-text);
24
+ font-family: var(--bw-font);
25
+ overflow: hidden;
26
+ }
27
+
28
+ .bw,
29
+ .bw * {
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ .bw *:focus,
34
+ .bw *:focus-visible {
35
+ outline: none;
36
+ }
37
+
38
+ @keyframes bw-shimmer {
39
+ 0% {
40
+ background-position: -200% 0;
41
+ }
42
+ 100% {
43
+ background-position: 200% 0;
44
+ }
45
+ }
46
+
47
+ .bw-skel {
48
+ border-radius: var(--bw-radius);
49
+ background: linear-gradient(90deg, var(--bw-border-light) 25%, var(--bw-border) 50%, var(--bw-border-light) 75%);
50
+ background-size: 200% 100%;
51
+ animation: bw-shimmer 1.5s ease infinite;
52
+ }
53
+
54
+ .bw-skel--title {
55
+ width: min(340px, 70%);
56
+ height: 32px;
57
+ }
58
+
59
+ .bw-skel--text {
60
+ width: 48%;
61
+ height: 14px;
62
+ margin-top: 14px;
63
+ }
64
+
65
+ .bw-skel--text-lg {
66
+ width: min(520px, 85%);
67
+ }
68
+
69
+ .bw-skel--card {
70
+ width: 100%;
71
+ height: 56px;
72
+ margin-bottom: 10px;
73
+ }
74
+
75
+ .bw-skel--calendar {
76
+ width: 100%;
77
+ height: 300px;
78
+ }
79
+
80
+ .bw-skel--input {
81
+ width: 100%;
82
+ height: 40px;
83
+ margin-bottom: 12px;
84
+ }
85
+
86
+ .bw-skel--textarea {
87
+ width: 100%;
88
+ height: 92px;
89
+ }
90
+
91
+ .bw-skel--slot {
92
+ height: 40px;
93
+ }
94
+
95
+ .bw-skel-list {
96
+ display: flex;
97
+ flex-direction: column;
98
+ gap: 0;
99
+ margin-top: 16px;
100
+ }
101
+
102
+ .bw-skel-slots {
103
+ margin-top: 8px;
104
+ }
105
+
106
+ .bw-skel-slots-grid {
107
+ display: grid;
108
+ grid-template-columns: repeat(4, 1fr);
109
+ gap: 10px;
110
+ }
111
+
112
+ .bw-skel-mobile {
113
+ display: none;
114
+ padding: 0 24px 24px;
115
+ }
116
+
117
+ .bw-loading,
118
+ .bw-empty {
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ min-height: 360px;
123
+ padding: 48px 20px;
124
+ color: var(--bw-text-muted);
125
+ font-size: 14px;
126
+ }
127
+
128
+ .bw-mobile-header,
129
+ .bw-topbar,
130
+ .bw-footer {
131
+ display: none;
132
+ }
133
+
134
+ .bw-topbar,
135
+ .bw-header,
136
+ .bw-body,
137
+ .bw-footer {
138
+ max-width: 1440px;
139
+ width: 100%;
140
+ margin: 0 auto;
141
+ }
142
+
143
+ .bw-header {
144
+ padding: 48px 48px 0;
145
+ }
146
+
147
+ .bw-header-row {
148
+ display: block;
149
+ }
150
+
151
+ .bw-title {
152
+ margin: 0;
153
+ font-size: 28px;
154
+ font-weight: 300;
155
+ letter-spacing: -1px;
156
+ color: var(--bw-text);
157
+ }
158
+
159
+ .bw-progress {
160
+ display: none;
161
+ }
162
+
163
+ .bw-title--mobile {
164
+ display: none;
165
+ }
166
+
167
+ .bw-description {
168
+ max-width: 620px;
169
+ margin: 14px 0 0;
170
+ font-size: 14px;
171
+ line-height: 1.6;
172
+ color: var(--bw-text-secondary);
173
+ }
174
+
175
+ .bw-body {
176
+ display: grid;
177
+ grid-template-columns: 22% 1fr 22%;
178
+ gap: 32px;
179
+ padding: 32px 48px 48px;
180
+ min-height: 0;
181
+ }
182
+
183
+ .bw-body-inner {
184
+ display: contents;
185
+ }
186
+
187
+ .bw-col {
188
+ display: flex;
189
+ flex-direction: column;
190
+ min-height: 0;
191
+ }
192
+
193
+ .bw-step-1 {
194
+ display: flex;
195
+ flex-direction: column;
196
+ flex: 1;
197
+ min-height: 0;
198
+ }
199
+
200
+ .bw-step-2 {
201
+ display: none;
202
+ }
203
+
204
+ .bw-label {
205
+ display: block;
206
+ margin-bottom: 10px;
207
+ font-size: 12px;
208
+ font-weight: 500;
209
+ color: var(--bw-text);
210
+ }
211
+
212
+ .bw-section-divider {
213
+ height: 1px;
214
+ margin: 12px 0;
215
+ background: var(--bw-border);
216
+ }
217
+
218
+ .bw-staff-dropdown {
219
+ position: relative;
220
+ margin-bottom: 10px;
221
+ }
222
+
223
+ .bw-staff-trigger {
224
+ display: flex;
225
+ align-items: center;
226
+ gap: 10px;
227
+ width: 100%;
228
+ padding: 9px 13px;
229
+ border: 2px solid var(--bw-border);
230
+ border-radius: var(--bw-radius);
231
+ background: transparent;
232
+ cursor: pointer;
233
+ text-align: left;
234
+ transition: border-color 250ms ease;
235
+ }
236
+
237
+ .bw-staff-trigger:hover,
238
+ .bw-staff-trigger.has-value {
239
+ border-color: var(--bw-primary);
240
+ }
241
+
242
+ .bw-staff-trigger-content,
243
+ .bw-staff-option {
244
+ display: flex;
245
+ align-items: center;
246
+ gap: 10px;
247
+ }
248
+
249
+ .bw-staff-trigger-content {
250
+ flex: 1;
251
+ min-width: 0;
252
+ }
253
+
254
+ .bw-staff-avatar {
255
+ display: flex;
256
+ flex-shrink: 0;
257
+ align-items: center;
258
+ justify-content: center;
259
+ width: 32px;
260
+ height: 32px;
261
+ border-radius: 999px;
262
+ background: var(--bw-border-light);
263
+ color: var(--bw-text-secondary);
264
+ }
265
+
266
+ .bw-staff-avatar svg,
267
+ .bw-staff-trigger-chevron svg,
268
+ .bw-month-btn svg,
269
+ .bw-cal-nav svg,
270
+ .bw-footer-back svg,
271
+ .bw-footer-next svg,
272
+ .bw-timezone svg,
273
+ .bw-check svg,
274
+ .bw-done-icon svg,
275
+ .bw-btn-primary svg,
276
+ .bw-confirm-btn svg {
277
+ width: 16px;
278
+ height: 16px;
279
+ }
280
+
281
+ .bw-staff-initials {
282
+ font-size: 12px;
283
+ font-weight: 600;
284
+ letter-spacing: 0.5px;
285
+ }
286
+
287
+ .bw-staff-trigger-info,
288
+ .bw-staff-option-info,
289
+ .bw-svc-info {
290
+ display: flex;
291
+ flex: 1;
292
+ min-width: 0;
293
+ flex-direction: column;
294
+ }
295
+
296
+ .bw-staff-trigger-name,
297
+ .bw-staff-option-name {
298
+ font-size: 13px;
299
+ font-weight: 500;
300
+ line-height: 1.3;
301
+ color: var(--bw-text);
302
+ }
303
+
304
+ .bw-staff-trigger-desc,
305
+ .bw-staff-option-desc {
306
+ font-size: 11px;
307
+ line-height: 1.3;
308
+ color: var(--bw-text-muted);
309
+ white-space: nowrap;
310
+ overflow: hidden;
311
+ text-overflow: ellipsis;
312
+ }
313
+
314
+ .bw-staff-trigger-chevron {
315
+ display: flex;
316
+ flex-shrink: 0;
317
+ color: var(--bw-text-secondary);
318
+ }
319
+
320
+ .bw-staff-overlay,
321
+ .bw-month-overlay {
322
+ position: fixed;
323
+ inset: 0;
324
+ z-index: 8;
325
+ border: 0;
326
+ background: transparent;
327
+ padding: 0;
328
+ }
329
+
330
+ .bw-staff-list,
331
+ .bw-month-list {
332
+ position: absolute;
333
+ z-index: 9;
334
+ display: flex;
335
+ flex-direction: column;
336
+ width: 100%;
337
+ padding: 4px;
338
+ border: 1px solid var(--bw-border);
339
+ border-radius: var(--bw-radius);
340
+ background: var(--bw-bg);
341
+ box-shadow: var(--bw-shadow);
342
+ }
343
+
344
+ .bw-staff-list {
345
+ top: calc(100% + 4px);
346
+ left: 0;
347
+ max-height: 232px;
348
+ overflow-y: auto;
349
+ -webkit-overflow-scrolling: touch;
350
+ }
351
+
352
+ .bw-staff-option {
353
+ width: 100%;
354
+ padding: 10px 12px;
355
+ border: 0;
356
+ border-radius: 6px;
357
+ background: transparent;
358
+ cursor: pointer;
359
+ text-align: left;
360
+ }
361
+
362
+ .bw-staff-option:hover,
363
+ .bw-staff-option.is-active {
364
+ background: var(--bw-hover);
365
+ }
366
+
367
+ .bw-svc-scroll {
368
+ display: grid;
369
+ grid-template-rows: 1fr;
370
+ }
371
+
372
+ .bw-svc-scroll-wrap {
373
+ min-height: 0;
374
+ max-height: 320px;
375
+ overflow-y: auto;
376
+ }
377
+
378
+ .bw-svc-scroll-inner {
379
+ display: flex;
380
+ flex-direction: column;
381
+ padding-bottom: 10px;
382
+ }
383
+
384
+ .bw-svc-row {
385
+ display: flex;
386
+ align-items: center;
387
+ gap: 10px;
388
+ width: 100%;
389
+ padding: 10px 12px;
390
+ border: 0;
391
+ border-radius: 6px;
392
+ background: transparent;
393
+ cursor: pointer;
394
+ text-align: left;
395
+ transition: background 150ms ease;
396
+ }
397
+
398
+ .bw-svc-row:hover {
399
+ background: var(--bw-hover);
400
+ }
401
+
402
+ .bw-check {
403
+ display: flex;
404
+ flex-shrink: 0;
405
+ align-items: center;
406
+ justify-content: center;
407
+ width: 18px;
408
+ height: 18px;
409
+ border: 1.5px solid #d0d0d0;
410
+ border-radius: 4px;
411
+ color: transparent;
412
+ transition: all 150ms ease;
413
+ }
414
+
415
+ .bw-check.is-checked {
416
+ border-color: var(--bw-primary);
417
+ background: var(--bw-primary);
418
+ color: var(--bw-primary-text);
419
+ }
420
+
421
+ .bw-check--lg {
422
+ width: 20px;
423
+ height: 20px;
424
+ border-radius: 5px;
425
+ }
426
+
427
+ .bw-svc-name {
428
+ font-size: 12px;
429
+ font-weight: 500;
430
+ line-height: 1.3;
431
+ color: var(--bw-text);
432
+ }
433
+
434
+ .bw-svc-meta {
435
+ font-size: 11px;
436
+ line-height: 1.3;
437
+ color: var(--bw-text-muted);
438
+ }
439
+
440
+ .bw-svc-desc {
441
+ font-size: 11px;
442
+ line-height: 1.4;
443
+ color: var(--bw-text-muted);
444
+ overflow: hidden;
445
+ text-overflow: ellipsis;
446
+ white-space: nowrap;
447
+ }
448
+
449
+ .bw-svc-price {
450
+ flex-shrink: 0;
451
+ font-size: 14px;
452
+ font-weight: 600;
453
+ color: var(--bw-text);
454
+ }
455
+
456
+ .bw-step-2-heading {
457
+ margin: 0;
458
+ font-size: 14px;
459
+ font-weight: 600;
460
+ color: var(--bw-text);
461
+ }
462
+
463
+ .bw-step-2-divider,
464
+ .bw-row-divider,
465
+ .bw-time-divider {
466
+ height: 1px;
467
+ background: var(--bw-border-light);
468
+ }
469
+
470
+ .bw-step-2-divider {
471
+ margin: 10px 0 4px;
472
+ }
473
+
474
+ .bw-svc-row--full {
475
+ gap: 12px;
476
+ padding: 14px 0;
477
+ border-radius: 0;
478
+ }
479
+
480
+ .bw-svc-row--full:hover {
481
+ background: transparent;
482
+ }
483
+
484
+ .bw-svc-row--full .bw-svc-name {
485
+ font-size: 14px;
486
+ }
487
+
488
+ .bw-svc-row--full .bw-svc-meta {
489
+ font-size: 12px;
490
+ }
491
+
492
+ .bw-col--center {
493
+ overflow-y: auto;
494
+ scrollbar-width: none;
495
+ }
496
+
497
+ .bw-col--center::-webkit-scrollbar {
498
+ display: none;
499
+ }
500
+
501
+ .bw-cal-card {
502
+ display: flex;
503
+ flex: 1;
504
+ flex-direction: column;
505
+ gap: 24px;
506
+ padding: 32px;
507
+ border: 1px solid var(--bw-border);
508
+ border-radius: var(--bw-radius);
509
+ }
510
+
511
+ .bw-cal-prompt,
512
+ .bw-no-slots,
513
+ .bw-no-services,
514
+ .bw-confirm-hint {
515
+ margin: 0;
516
+ font-size: 12px;
517
+ line-height: 1.5;
518
+ color: var(--bw-text-muted);
519
+ }
520
+
521
+ .bw-cal-prompt {
522
+ padding-top: 8px;
523
+ text-align: center;
524
+ }
525
+
526
+ .bw-cal-header {
527
+ display: flex;
528
+ align-items: center;
529
+ justify-content: space-between;
530
+ }
531
+
532
+ .bw-month-dropdown {
533
+ position: relative;
534
+ }
535
+
536
+ .bw-month-btn {
537
+ display: flex;
538
+ align-items: center;
539
+ gap: 6px;
540
+ padding: 4px 8px;
541
+ border: 0;
542
+ border-radius: 6px;
543
+ background: transparent;
544
+ cursor: pointer;
545
+ font-size: 15px;
546
+ font-weight: 500;
547
+ color: var(--bw-text);
548
+ }
549
+
550
+ .bw-month-btn:hover {
551
+ background: var(--bw-hover);
552
+ }
553
+
554
+ .bw-month-list {
555
+ top: calc(100% + 4px);
556
+ left: 0;
557
+ min-width: 160px;
558
+ max-height: 200px;
559
+ overflow-y: auto;
560
+ }
561
+
562
+ .bw-month-option {
563
+ padding: 8px 12px;
564
+ border: 0;
565
+ border-radius: 4px;
566
+ background: transparent;
567
+ cursor: pointer;
568
+ text-align: left;
569
+ white-space: nowrap;
570
+ font-size: 13px;
571
+ color: var(--bw-text);
572
+ }
573
+
574
+ .bw-month-option:hover,
575
+ .bw-month-option.is-active {
576
+ background: var(--bw-hover);
577
+ }
578
+
579
+ .bw-cal-navs {
580
+ display: flex;
581
+ align-items: center;
582
+ gap: 4px;
583
+ }
584
+
585
+ .bw-cal-nav {
586
+ display: flex;
587
+ align-items: center;
588
+ justify-content: center;
589
+ width: 28px;
590
+ height: 28px;
591
+ border: 0;
592
+ border-radius: 6px;
593
+ background: transparent;
594
+ color: var(--bw-text-muted);
595
+ cursor: pointer;
596
+ }
597
+
598
+ .bw-cal-nav:hover:not(:disabled) {
599
+ background: var(--bw-hover);
600
+ color: var(--bw-text);
601
+ }
602
+
603
+ .bw-cal-nav:disabled {
604
+ opacity: 0.3;
605
+ cursor: default;
606
+ }
607
+
608
+ .bw-cal-weekdays,
609
+ .bw-cal-grid {
610
+ display: grid;
611
+ grid-template-columns: repeat(7, 1fr);
612
+ }
613
+
614
+ .bw-cal-weekdays {
615
+ text-align: center;
616
+ }
617
+
618
+ .bw-cal-weekdays span {
619
+ padding: 6px 0;
620
+ font-size: 12px;
621
+ font-weight: 500;
622
+ color: var(--bw-text-muted);
623
+ }
624
+
625
+ .bw-cal-grid {
626
+ gap: 6px 0;
627
+ }
628
+
629
+ .bw-cal-day {
630
+ display: flex;
631
+ align-items: center;
632
+ justify-content: center;
633
+ height: 48px;
634
+ border: 0;
635
+ border-radius: 6px;
636
+ background: transparent;
637
+ color: var(--bw-text);
638
+ cursor: default;
639
+ font-size: 13px;
640
+ transition: background 300ms ease, color 300ms ease;
641
+ }
642
+
643
+ .bw-cal-day.is-outside {
644
+ visibility: hidden;
645
+ }
646
+
647
+ .bw-cal-day.is-available {
648
+ cursor: pointer;
649
+ }
650
+
651
+ .bw-cal-day.is-available:hover:not(.is-selected) {
652
+ background: var(--bw-hover);
653
+ }
654
+
655
+ .bw-cal-day.is-selected {
656
+ background: var(--bw-primary);
657
+ color: var(--bw-primary-text);
658
+ font-weight: 600;
659
+ }
660
+
661
+ .bw-cal-day.is-today:not(.is-selected) {
662
+ font-weight: 600;
663
+ }
664
+
665
+ .bw-cal-day.is-blocked,
666
+ .bw-cal-day.is-disabled {
667
+ color: var(--bw-border);
668
+ }
669
+
670
+ .bw-time-slots {
671
+ display: grid;
672
+ grid-template-columns: repeat(4, 1fr);
673
+ gap: 10px;
674
+ margin-top: 8px;
675
+ }
676
+
677
+ .bw-slot {
678
+ padding: 12px 0;
679
+ border: 1px solid var(--bw-border);
680
+ border-radius: var(--bw-radius);
681
+ background: transparent;
682
+ cursor: pointer;
683
+ text-align: center;
684
+ white-space: nowrap;
685
+ font-size: 13px;
686
+ color: var(--bw-text);
687
+ transition: all 150ms ease;
688
+ }
689
+
690
+ .bw-slot:hover {
691
+ border-color: var(--bw-text);
692
+ }
693
+
694
+ .bw-slot.is-active {
695
+ border-color: var(--bw-primary);
696
+ background: var(--bw-primary);
697
+ color: var(--bw-primary-text);
698
+ }
699
+
700
+ .bw-slot.is-pending {
701
+ opacity: 0.88;
702
+ }
703
+
704
+ .bw-timezone {
705
+ display: flex;
706
+ align-items: center;
707
+ justify-content: center;
708
+ gap: 6px;
709
+ margin-top: auto;
710
+ font-size: 12px;
711
+ color: var(--bw-text-muted);
712
+ }
713
+
714
+ .bw-right-inner,
715
+ .bw-form,
716
+ .bw-form-fields,
717
+ .bw-field,
718
+ .bw-summary-rows {
719
+ display: flex;
720
+ flex-direction: column;
721
+ }
722
+
723
+ .bw-form {
724
+ gap: 20px;
725
+ }
726
+
727
+ .bw-form-fields {
728
+ gap: 12px;
729
+ }
730
+
731
+ .bw-field {
732
+ gap: 4px;
733
+ }
734
+
735
+ .bw-field label {
736
+ font-size: 12px;
737
+ font-weight: 500;
738
+ color: var(--bw-text);
739
+ }
740
+
741
+ .bw-field input,
742
+ .bw-field textarea {
743
+ width: 100%;
744
+ padding: 10px 14px;
745
+ border: 1px solid var(--bw-border);
746
+ border-radius: 6px;
747
+ background: transparent;
748
+ color: var(--bw-text);
749
+ font-size: 13px;
750
+ transition: border-color 150ms ease;
751
+ }
752
+
753
+ .bw-field textarea {
754
+ min-height: 80px;
755
+ resize: none;
756
+ }
757
+
758
+ .bw-field input:focus,
759
+ .bw-field textarea:focus {
760
+ border-color: var(--bw-primary);
761
+ }
762
+
763
+ .bw-field input::placeholder,
764
+ .bw-field textarea::placeholder {
765
+ color: var(--bw-text-muted);
766
+ }
767
+
768
+ .bw-field--notes {
769
+ position: relative;
770
+ }
771
+
772
+ .bw-char-count {
773
+ position: absolute;
774
+ right: 12px;
775
+ bottom: 10px;
776
+ font-size: 10px;
777
+ color: var(--bw-text-muted);
778
+ }
779
+
780
+ .bw-required {
781
+ color: var(--bw-error-text);
782
+ font-weight: 400;
783
+ }
784
+
785
+ .bw-summary {
786
+ padding-top: 16px;
787
+ }
788
+
789
+ .bw-summary-title {
790
+ display: block;
791
+ margin-bottom: 12px;
792
+ font-size: 14px;
793
+ font-weight: 600;
794
+ color: var(--bw-text);
795
+ }
796
+
797
+ .bw-summary-rows {
798
+ gap: 8px;
799
+ }
800
+
801
+ .bw-summary-row {
802
+ display: flex;
803
+ align-items: baseline;
804
+ justify-content: space-between;
805
+ gap: 16px;
806
+ font-size: 13px;
807
+ }
808
+
809
+ .bw-summary-row span:first-child {
810
+ flex-shrink: 0;
811
+ color: var(--bw-text-muted);
812
+ }
813
+
814
+ .bw-summary-val {
815
+ min-width: 0;
816
+ overflow: hidden;
817
+ color: var(--bw-text);
818
+ text-align: right;
819
+ text-overflow: ellipsis;
820
+ white-space: nowrap;
821
+ }
822
+
823
+ .bw-summary-total span:first-child,
824
+ .bw-summary-total .bw-summary-val {
825
+ font-weight: 600;
826
+ color: var(--bw-text);
827
+ }
828
+
829
+ .bw-summary-row--hold {
830
+ margin-bottom: 2px;
831
+ }
832
+
833
+ .bw-summary-val--hold {
834
+ min-width: 0;
835
+ padding: 0;
836
+ border: 0;
837
+ background: transparent;
838
+ font-weight: 600;
839
+ font-variant-numeric: tabular-nums;
840
+ }
841
+
842
+ .bw-error {
843
+ padding: 10px 12px;
844
+ border-radius: var(--bw-radius);
845
+ background: var(--bw-error-bg);
846
+ color: var(--bw-error-text);
847
+ font-size: 12px;
848
+ line-height: 1.4;
849
+ }
850
+
851
+ .bw-confirm-btn,
852
+ .bw-footer-next,
853
+ .bw-btn-primary {
854
+ display: flex;
855
+ align-items: center;
856
+ justify-content: center;
857
+ gap: 10px;
858
+ border: 0;
859
+ background: var(--bw-primary);
860
+ color: var(--bw-primary-text);
861
+ cursor: pointer;
862
+ transition: opacity 150ms ease;
863
+ }
864
+
865
+ .bw-confirm-btn {
866
+ width: 100%;
867
+ height: 48px;
868
+ border-radius: var(--bw-radius);
869
+ font-size: 15px;
870
+ font-weight: 500;
871
+ }
872
+
873
+ .bw-confirm-btn:hover:not(:disabled),
874
+ .bw-footer-next:hover:not(:disabled),
875
+ .bw-btn-primary:hover {
876
+ opacity: 0.9;
877
+ }
878
+
879
+ .bw-confirm-btn:disabled,
880
+ .bw-footer-next:disabled {
881
+ opacity: 0.35;
882
+ cursor: default;
883
+ }
884
+
885
+ .bw-done {
886
+ display: flex;
887
+ flex-direction: column;
888
+ align-items: center;
889
+ gap: 16px;
890
+ padding: 80px 20px;
891
+ text-align: center;
892
+ }
893
+
894
+ .bw-done-icon {
895
+ display: flex;
896
+ align-items: center;
897
+ justify-content: center;
898
+ width: 56px;
899
+ height: 56px;
900
+ margin-bottom: 8px;
901
+ border-radius: 999px;
902
+ background: var(--bw-primary);
903
+ color: var(--bw-primary-text);
904
+ }
905
+
906
+ .bw-done-title {
907
+ margin: 0;
908
+ font-size: 28px;
909
+ font-weight: 300;
910
+ letter-spacing: -0.5px;
911
+ color: var(--bw-text);
912
+ }
913
+
914
+ .bw-done-text {
915
+ max-width: 400px;
916
+ margin: 0;
917
+ font-size: 15px;
918
+ line-height: 1.6;
919
+ color: var(--bw-text-secondary);
920
+ }
921
+
922
+ .bw-btn-primary {
923
+ padding: 14px 32px;
924
+ border-radius: var(--bw-radius);
925
+ font-size: 15px;
926
+ font-weight: 500;
927
+ }
928
+
929
+ @media (max-width: 1024px) {
930
+ .bw {
931
+ min-height: 80vh;
932
+ }
933
+
934
+ .bw-skel-desktop {
935
+ display: none;
936
+ }
937
+
938
+ .bw-skel-mobile {
939
+ display: block;
940
+ }
941
+
942
+ .bw-mobile-header {
943
+ display: block;
944
+ position: relative;
945
+ z-index: 102;
946
+ }
947
+
948
+ .bw-topbar {
949
+ display: flex;
950
+ justify-content: flex-end;
951
+ padding: 16px 24px 0;
952
+ }
953
+
954
+ .bw-header {
955
+ padding: 20px 24px 20px;
956
+ }
957
+
958
+ .bw-header-row {
959
+ display: flex;
960
+ align-items: flex-start;
961
+ justify-content: space-between;
962
+ gap: 16px;
963
+ }
964
+
965
+ .bw-progress {
966
+ display: flex;
967
+ flex: 0 0 auto;
968
+ align-items: center;
969
+ justify-content: flex-end;
970
+ gap: 8px;
971
+ width: 116px;
972
+ padding-top: 6px;
973
+ }
974
+
975
+ .bw-dot {
976
+ flex: 1 1 0;
977
+ width: auto;
978
+ min-width: 20px;
979
+ max-width: 28px;
980
+ height: 3px;
981
+ border-radius: 1.5px;
982
+ background: var(--bw-border);
983
+ transition: background 200ms ease;
984
+ }
985
+
986
+ .bw-dot.is-filled {
987
+ background: var(--bw-primary);
988
+ }
989
+
990
+ .bw-title {
991
+ font-size: 24px;
992
+ letter-spacing: -0.5px;
993
+ }
994
+
995
+ .bw-title--desktop {
996
+ display: none;
997
+ }
998
+
999
+ .bw-title--mobile {
1000
+ display: block;
1001
+ flex: 1 1 auto;
1002
+ min-width: 0;
1003
+ }
1004
+
1005
+ .bw-description {
1006
+ margin-top: 10px;
1007
+ font-size: 13px;
1008
+ }
1009
+
1010
+ .bw-body {
1011
+ display: flex;
1012
+ flex-direction: column;
1013
+ flex: 1;
1014
+ min-height: 0;
1015
+ padding: 0 24px;
1016
+ }
1017
+
1018
+ .bw-col {
1019
+ display: none;
1020
+ }
1021
+
1022
+ .bw-body[data-mobile-step="1"] .bw-col--left,
1023
+ .bw-body[data-mobile-step="2"] .bw-col--left,
1024
+ .bw-body[data-mobile-step="3"] .bw-col--center,
1025
+ .bw-body[data-mobile-step="4"] .bw-col--right {
1026
+ display: flex;
1027
+ }
1028
+
1029
+ .bw-body[data-mobile-step="1"] .bw-step-1 {
1030
+ display: flex;
1031
+ }
1032
+
1033
+ .bw-body[data-mobile-step="1"] .bw-step-2 {
1034
+ display: none;
1035
+ }
1036
+
1037
+ .bw-body[data-mobile-step="1"] .bw-service-picker {
1038
+ display: none;
1039
+ }
1040
+
1041
+ .bw-body[data-mobile-step="2"] .bw-step-1 {
1042
+ display: none;
1043
+ }
1044
+
1045
+ .bw-body[data-mobile-step="2"] .bw-step-2 {
1046
+ display: flex;
1047
+ flex-direction: column;
1048
+ }
1049
+
1050
+ .bw-body[data-mobile-step="2"] .bw-step-2-heading,
1051
+ .bw-body[data-mobile-step="2"] .bw-step-2-divider {
1052
+ display: none;
1053
+ }
1054
+
1055
+ .bw-svc-scroll {
1056
+ display: none;
1057
+ }
1058
+
1059
+ .bw-col--left,
1060
+ .bw-col--center,
1061
+ .bw-col--right {
1062
+ overflow: visible;
1063
+ }
1064
+
1065
+ .bw-cal-card {
1066
+ padding: 20px;
1067
+ }
1068
+
1069
+ .bw-cal-day {
1070
+ height: 44px;
1071
+ }
1072
+
1073
+ .bw-time-divider {
1074
+ display: block;
1075
+ margin: 4px 0;
1076
+ }
1077
+
1078
+ .bw-form .bw-summary,
1079
+ .bw-confirm-btn {
1080
+ display: none;
1081
+ }
1082
+
1083
+ .bw-footer {
1084
+ display: flex;
1085
+ flex-direction: column;
1086
+ gap: 20px;
1087
+ margin-top: auto;
1088
+ padding: 16px 24px 34px;
1089
+ border-top: 1px solid var(--bw-border-light);
1090
+ }
1091
+
1092
+ .bw-footer-summary {
1093
+ display: flex;
1094
+ flex-direction: column;
1095
+ gap: 12px;
1096
+ padding: 16px;
1097
+ border: 1px solid var(--bw-border);
1098
+ border-radius: var(--bw-radius);
1099
+ }
1100
+
1101
+ .bw-footer-summary .bw-summary-title {
1102
+ margin-bottom: 0;
1103
+ }
1104
+
1105
+ .bw-footer-btns {
1106
+ display: flex;
1107
+ align-items: center;
1108
+ gap: 10px;
1109
+ }
1110
+
1111
+ .bw-footer-back {
1112
+ display: flex;
1113
+ flex-shrink: 0;
1114
+ align-items: center;
1115
+ justify-content: center;
1116
+ width: 48px;
1117
+ height: 48px;
1118
+ border: 1px solid var(--bw-border);
1119
+ border-radius: var(--bw-radius-lg);
1120
+ background: transparent;
1121
+ color: var(--bw-text);
1122
+ cursor: pointer;
1123
+ }
1124
+
1125
+ .bw-footer-next {
1126
+ flex: 1;
1127
+ height: 48px;
1128
+ border-radius: var(--bw-radius-lg);
1129
+ font-size: 15px;
1130
+ font-weight: 500;
1131
+ }
1132
+ }
1133
+
1134
+ @media (max-width: 480px) {
1135
+ .bw-topbar {
1136
+ padding: 14px 20px 0;
1137
+ }
1138
+
1139
+ .bw-progress {
1140
+ width: 104px;
1141
+ gap: 6px;
1142
+ }
1143
+
1144
+ .bw-header {
1145
+ padding: 20px 20px 16px;
1146
+ }
1147
+
1148
+ .bw-body {
1149
+ padding: 0 20px;
1150
+ }
1151
+
1152
+ .bw-footer {
1153
+ padding: 12px 20px 28px;
1154
+ }
1155
+
1156
+ .bw-title {
1157
+ font-size: 22px;
1158
+ }
1159
+
1160
+ .bw-cal-card {
1161
+ gap: 16px;
1162
+ padding: 16px;
1163
+ }
1164
+
1165
+ .bw-cal-day {
1166
+ height: 40px;
1167
+ font-size: 12px;
1168
+ }
1169
+
1170
+ .bw-cal-weekdays span {
1171
+ font-size: 11px;
1172
+ }
1173
+
1174
+ .bw-slot {
1175
+ min-height: 40px;
1176
+ padding: 12px 0;
1177
+ font-size: 12px;
1178
+ }
1179
+
1180
+ .bw-field input,
1181
+ .bw-field textarea {
1182
+ font-size: 14px;
1183
+ }
1184
+
1185
+ .bw-summary-row {
1186
+ font-size: 12px;
1187
+ }
1188
+ }