@asksable/site-connector 0.1.1 → 0.1.3

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