@aaravpos/appointment-booking-plugin 3.0.5 → 4.0.2

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.
Files changed (5) hide show
  1. package/dist/components/sidebar/OrderSidebar.d.ts +1 -2
  2. package/dist/index.cjs +30 -30
  3. package/dist/index.js +5008 -5024
  4. package/package.json +75 -80
  5. package/dist/styles.css +0 -3886
package/dist/styles.css DELETED
@@ -1,3886 +0,0 @@
1
- /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
- @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap");
3
- :root {
4
- --toastify-color-light: #fff;
5
- --toastify-color-dark: #121212;
6
- --toastify-color-info: #3498db;
7
- --toastify-color-success: #07bc0c;
8
- --toastify-color-warning: #f1c40f;
9
- --toastify-color-error: hsl(6, 78%, 57%);
10
- --toastify-color-transparent: rgba(255, 255, 255, 0.7);
11
- --toastify-icon-color-info: var(--toastify-color-info);
12
- --toastify-icon-color-success: var(--toastify-color-success);
13
- --toastify-icon-color-warning: var(--toastify-color-warning);
14
- --toastify-icon-color-error: var(--toastify-color-error);
15
- --toastify-container-width: fit-content;
16
- --toastify-toast-width: 320px;
17
- --toastify-toast-offset: 16px;
18
- --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
19
- --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
20
- --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
21
- --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
22
- --toastify-toast-background: #fff;
23
- --toastify-toast-padding: 14px;
24
- --toastify-toast-min-height: 64px;
25
- --toastify-toast-max-height: 800px;
26
- --toastify-toast-bd-radius: 6px;
27
- --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
28
- --toastify-font-family: sans-serif;
29
- --toastify-z-index: 9999;
30
- --toastify-text-color-light: #757575;
31
- --toastify-text-color-dark: #fff;
32
- --toastify-text-color-info: #fff;
33
- --toastify-text-color-success: #fff;
34
- --toastify-text-color-warning: #fff;
35
- --toastify-text-color-error: #fff;
36
- --toastify-spinner-color: #616161;
37
- --toastify-spinner-color-empty-area: #e0e0e0;
38
- --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
39
- --toastify-color-progress-dark: #bb86fc;
40
- --toastify-color-progress-info: var(--toastify-color-info);
41
- --toastify-color-progress-success: var(--toastify-color-success);
42
- --toastify-color-progress-warning: var(--toastify-color-warning);
43
- --toastify-color-progress-error: var(--toastify-color-error);
44
- --toastify-color-progress-bgo: 0.2;
45
- }
46
- .Toastify__toast-container {
47
- z-index: var(--toastify-z-index);
48
- -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
49
- position: fixed;
50
- width: var(--toastify-container-width);
51
- box-sizing: border-box;
52
- color: #fff;
53
- display: flex;
54
- flex-direction: column;
55
- }
56
- .Toastify__toast-container--top-left {
57
- top: var(--toastify-toast-top);
58
- left: var(--toastify-toast-left);
59
- }
60
- .Toastify__toast-container--top-center {
61
- top: var(--toastify-toast-top);
62
- left: 50%;
63
- transform: translateX(-50%);
64
- align-items: center;
65
- }
66
- .Toastify__toast-container--top-right {
67
- top: var(--toastify-toast-top);
68
- right: var(--toastify-toast-right);
69
- align-items: end;
70
- }
71
- .Toastify__toast-container--bottom-left {
72
- bottom: var(--toastify-toast-bottom);
73
- left: var(--toastify-toast-left);
74
- }
75
- .Toastify__toast-container--bottom-center {
76
- bottom: var(--toastify-toast-bottom);
77
- left: 50%;
78
- transform: translateX(-50%);
79
- align-items: center;
80
- }
81
- .Toastify__toast-container--bottom-right {
82
- bottom: var(--toastify-toast-bottom);
83
- right: var(--toastify-toast-right);
84
- align-items: end;
85
- }
86
- .Toastify__toast {
87
- --y: 0px;
88
- position: relative;
89
- touch-action: none;
90
- width: var(--toastify-toast-width);
91
- min-height: var(--toastify-toast-min-height);
92
- box-sizing: border-box;
93
- margin-bottom: 1rem;
94
- padding: var(--toastify-toast-padding);
95
- border-radius: var(--toastify-toast-bd-radius);
96
- box-shadow: var(--toastify-toast-shadow);
97
- max-height: var(--toastify-toast-max-height);
98
- font-family: var(--toastify-font-family);
99
- z-index: 0;
100
- display: flex;
101
- flex: 1 auto;
102
- align-items: center;
103
- word-break: break-word;
104
- }
105
- @media only screen and (max-width: 480px) {
106
- .Toastify__toast-container {
107
- width: 100vw;
108
- left: env(safe-area-inset-left);
109
- margin: 0;
110
- }
111
- .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
112
- top: env(safe-area-inset-top);
113
- transform: translateX(0);
114
- }
115
- .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
116
- bottom: env(safe-area-inset-bottom);
117
- transform: translateX(0);
118
- }
119
- .Toastify__toast-container--rtl {
120
- right: env(safe-area-inset-right);
121
- left: initial;
122
- }
123
- .Toastify__toast {
124
- --toastify-toast-width: 100%;
125
- margin-bottom: 0;
126
- border-radius: 0;
127
- }
128
- }
129
- .Toastify__toast-container[data-stacked='true'] {
130
- width: var(--toastify-toast-width);
131
- }
132
- @media only screen and (max-width: 480px) {
133
- .Toastify__toast-container[data-stacked='true'] {
134
- width: 100vw;
135
- }
136
- }
137
- .Toastify__toast--stacked {
138
- position: absolute;
139
- width: 100%;
140
- transform: translate3d(0, var(--y), 0) scale(var(--s));
141
- transition: transform 0.3s;
142
- }
143
- .Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
144
- transition: opacity 0.1s;
145
- }
146
- .Toastify__toast--stacked[data-collapsed='false'] {
147
- overflow: visible;
148
- }
149
- .Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
150
- opacity: 0;
151
- }
152
- .Toastify__toast--stacked:after {
153
- content: '';
154
- position: absolute;
155
- left: 0;
156
- right: 0;
157
- height: calc(var(--g) * 1px);
158
- bottom: 100%;
159
- }
160
- .Toastify__toast--stacked[data-pos='top'] {
161
- top: 0;
162
- }
163
- .Toastify__toast--stacked[data-pos='bot'] {
164
- bottom: 0;
165
- }
166
- .Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
167
- transform-origin: top;
168
- }
169
- .Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
170
- transform-origin: bottom;
171
- }
172
- .Toastify__toast--stacked:before {
173
- content: '';
174
- position: absolute;
175
- left: 0;
176
- right: 0;
177
- bottom: 0;
178
- height: 100%;
179
- transform: scaleY(3);
180
- z-index: -1;
181
- }
182
- .Toastify__toast--rtl {
183
- direction: rtl;
184
- }
185
- .Toastify__toast--close-on-click {
186
- cursor: pointer;
187
- }
188
- .Toastify__toast-icon {
189
- margin-inline-end: 10px;
190
- width: 22px;
191
- flex-shrink: 0;
192
- display: flex;
193
- }
194
- .Toastify--animate {
195
- animation-fill-mode: both;
196
- animation-duration: 0.5s;
197
- }
198
- .Toastify--animate-icon {
199
- animation-fill-mode: both;
200
- animation-duration: 0.3s;
201
- }
202
- .Toastify__toast-theme--dark {
203
- background: var(--toastify-color-dark);
204
- color: var(--toastify-text-color-dark);
205
- }
206
- .Toastify__toast-theme--light {
207
- background: var(--toastify-color-light);
208
- color: var(--toastify-text-color-light);
209
- }
210
- .Toastify__toast-theme--colored.Toastify__toast--default {
211
- background: var(--toastify-color-light);
212
- color: var(--toastify-text-color-light);
213
- }
214
- .Toastify__toast-theme--colored.Toastify__toast--info {
215
- color: var(--toastify-text-color-info);
216
- background: var(--toastify-color-info);
217
- }
218
- .Toastify__toast-theme--colored.Toastify__toast--success {
219
- color: var(--toastify-text-color-success);
220
- background: var(--toastify-color-success);
221
- }
222
- .Toastify__toast-theme--colored.Toastify__toast--warning {
223
- color: var(--toastify-text-color-warning);
224
- background: var(--toastify-color-warning);
225
- }
226
- .Toastify__toast-theme--colored.Toastify__toast--error {
227
- color: var(--toastify-text-color-error);
228
- background: var(--toastify-color-error);
229
- }
230
- .Toastify__progress-bar-theme--light {
231
- background: var(--toastify-color-progress-light);
232
- }
233
- .Toastify__progress-bar-theme--dark {
234
- background: var(--toastify-color-progress-dark);
235
- }
236
- .Toastify__progress-bar--info {
237
- background: var(--toastify-color-progress-info);
238
- }
239
- .Toastify__progress-bar--success {
240
- background: var(--toastify-color-progress-success);
241
- }
242
- .Toastify__progress-bar--warning {
243
- background: var(--toastify-color-progress-warning);
244
- }
245
- .Toastify__progress-bar--error {
246
- background: var(--toastify-color-progress-error);
247
- }
248
- .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
249
- background: var(--toastify-color-transparent);
250
- }
251
- .Toastify__close-button {
252
- color: #fff;
253
- position: absolute;
254
- top: 6px;
255
- right: 6px;
256
- background: transparent;
257
- outline: none;
258
- border: none;
259
- padding: 0;
260
- cursor: pointer;
261
- opacity: 0.7;
262
- transition: 0.3s ease;
263
- z-index: 1;
264
- }
265
- .Toastify__toast--rtl .Toastify__close-button {
266
- left: 6px;
267
- right: unset;
268
- }
269
- .Toastify__close-button--light {
270
- color: #000;
271
- opacity: 0.3;
272
- }
273
- .Toastify__close-button > svg {
274
- fill: currentColor;
275
- height: 16px;
276
- width: 14px;
277
- }
278
- .Toastify__close-button:hover, .Toastify__close-button:focus {
279
- opacity: 1;
280
- }
281
- @keyframes Toastify__trackProgress {
282
- 0% {
283
- transform: scaleX(1);
284
- }
285
- 100% {
286
- transform: scaleX(0);
287
- }
288
- }
289
- .Toastify__progress-bar {
290
- position: absolute;
291
- bottom: 0;
292
- left: 0;
293
- width: 100%;
294
- height: 100%;
295
- z-index: 1;
296
- opacity: 0.7;
297
- transform-origin: left;
298
- }
299
- .Toastify__progress-bar--animated {
300
- animation: Toastify__trackProgress linear 1 forwards;
301
- }
302
- .Toastify__progress-bar--controlled {
303
- transition: transform 0.2s;
304
- }
305
- .Toastify__progress-bar--rtl {
306
- right: 0;
307
- left: initial;
308
- transform-origin: right;
309
- border-bottom-left-radius: initial;
310
- }
311
- .Toastify__progress-bar--wrp {
312
- position: absolute;
313
- overflow: hidden;
314
- bottom: 0;
315
- left: 0;
316
- width: 100%;
317
- height: 5px;
318
- border-bottom-left-radius: var(--toastify-toast-bd-radius);
319
- border-bottom-right-radius: var(--toastify-toast-bd-radius);
320
- }
321
- .Toastify__progress-bar--wrp[data-hidden='true'] {
322
- opacity: 0;
323
- }
324
- .Toastify__progress-bar--bg {
325
- opacity: var(--toastify-color-progress-bgo);
326
- width: 100%;
327
- height: 100%;
328
- }
329
- .Toastify__spinner {
330
- width: 20px;
331
- height: 20px;
332
- box-sizing: border-box;
333
- border: 2px solid;
334
- border-radius: 100%;
335
- border-color: var(--toastify-spinner-color-empty-area);
336
- border-right-color: var(--toastify-spinner-color);
337
- animation: Toastify__spin 0.65s linear infinite;
338
- }
339
- @keyframes Toastify__bounceInRight {
340
- from, 60%, 75%, 90%, to {
341
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
342
- }
343
- from {
344
- opacity: 0;
345
- transform: translate3d(3000px, 0, 0);
346
- }
347
- 60% {
348
- opacity: 1;
349
- transform: translate3d(-25px, 0, 0);
350
- }
351
- 75% {
352
- transform: translate3d(10px, 0, 0);
353
- }
354
- 90% {
355
- transform: translate3d(-5px, 0, 0);
356
- }
357
- to {
358
- transform: none;
359
- }
360
- }
361
- @keyframes Toastify__bounceOutRight {
362
- 20% {
363
- opacity: 1;
364
- transform: translate3d(-20px, var(--y), 0);
365
- }
366
- to {
367
- opacity: 0;
368
- transform: translate3d(2000px, var(--y), 0);
369
- }
370
- }
371
- @keyframes Toastify__bounceInLeft {
372
- from, 60%, 75%, 90%, to {
373
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
374
- }
375
- 0% {
376
- opacity: 0;
377
- transform: translate3d(-3000px, 0, 0);
378
- }
379
- 60% {
380
- opacity: 1;
381
- transform: translate3d(25px, 0, 0);
382
- }
383
- 75% {
384
- transform: translate3d(-10px, 0, 0);
385
- }
386
- 90% {
387
- transform: translate3d(5px, 0, 0);
388
- }
389
- to {
390
- transform: none;
391
- }
392
- }
393
- @keyframes Toastify__bounceOutLeft {
394
- 20% {
395
- opacity: 1;
396
- transform: translate3d(20px, var(--y), 0);
397
- }
398
- to {
399
- opacity: 0;
400
- transform: translate3d(-2000px, var(--y), 0);
401
- }
402
- }
403
- @keyframes Toastify__bounceInUp {
404
- from, 60%, 75%, 90%, to {
405
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
406
- }
407
- from {
408
- opacity: 0;
409
- transform: translate3d(0, 3000px, 0);
410
- }
411
- 60% {
412
- opacity: 1;
413
- transform: translate3d(0, -20px, 0);
414
- }
415
- 75% {
416
- transform: translate3d(0, 10px, 0);
417
- }
418
- 90% {
419
- transform: translate3d(0, -5px, 0);
420
- }
421
- to {
422
- transform: translate3d(0, 0, 0);
423
- }
424
- }
425
- @keyframes Toastify__bounceOutUp {
426
- 20% {
427
- transform: translate3d(0, calc(var(--y) - 10px), 0);
428
- }
429
- 40%, 45% {
430
- opacity: 1;
431
- transform: translate3d(0, calc(var(--y) + 20px), 0);
432
- }
433
- to {
434
- opacity: 0;
435
- transform: translate3d(0, -2000px, 0);
436
- }
437
- }
438
- @keyframes Toastify__bounceInDown {
439
- from, 60%, 75%, 90%, to {
440
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
441
- }
442
- 0% {
443
- opacity: 0;
444
- transform: translate3d(0, -3000px, 0);
445
- }
446
- 60% {
447
- opacity: 1;
448
- transform: translate3d(0, 25px, 0);
449
- }
450
- 75% {
451
- transform: translate3d(0, -10px, 0);
452
- }
453
- 90% {
454
- transform: translate3d(0, 5px, 0);
455
- }
456
- to {
457
- transform: none;
458
- }
459
- }
460
- @keyframes Toastify__bounceOutDown {
461
- 20% {
462
- transform: translate3d(0, calc(var(--y) - 10px), 0);
463
- }
464
- 40%, 45% {
465
- opacity: 1;
466
- transform: translate3d(0, calc(var(--y) + 20px), 0);
467
- }
468
- to {
469
- opacity: 0;
470
- transform: translate3d(0, 2000px, 0);
471
- }
472
- }
473
- .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
474
- animation-name: Toastify__bounceInLeft;
475
- }
476
- .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
477
- animation-name: Toastify__bounceInRight;
478
- }
479
- .Toastify__bounce-enter--top-center {
480
- animation-name: Toastify__bounceInDown;
481
- }
482
- .Toastify__bounce-enter--bottom-center {
483
- animation-name: Toastify__bounceInUp;
484
- }
485
- .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
486
- animation-name: Toastify__bounceOutLeft;
487
- }
488
- .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
489
- animation-name: Toastify__bounceOutRight;
490
- }
491
- .Toastify__bounce-exit--top-center {
492
- animation-name: Toastify__bounceOutUp;
493
- }
494
- .Toastify__bounce-exit--bottom-center {
495
- animation-name: Toastify__bounceOutDown;
496
- }
497
- @keyframes Toastify__zoomIn {
498
- from {
499
- opacity: 0;
500
- transform: scale3d(0.3, 0.3, 0.3);
501
- }
502
- 50% {
503
- opacity: 1;
504
- }
505
- }
506
- @keyframes Toastify__zoomOut {
507
- from {
508
- opacity: 1;
509
- }
510
- 50% {
511
- opacity: 0;
512
- transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
513
- }
514
- to {
515
- opacity: 0;
516
- }
517
- }
518
- .Toastify__zoom-enter {
519
- animation-name: Toastify__zoomIn;
520
- }
521
- .Toastify__zoom-exit {
522
- animation-name: Toastify__zoomOut;
523
- }
524
- @keyframes Toastify__flipIn {
525
- from {
526
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
527
- animation-timing-function: ease-in;
528
- opacity: 0;
529
- }
530
- 40% {
531
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
532
- animation-timing-function: ease-in;
533
- }
534
- 60% {
535
- transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
536
- opacity: 1;
537
- }
538
- 80% {
539
- transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
540
- }
541
- to {
542
- transform: perspective(400px);
543
- }
544
- }
545
- @keyframes Toastify__flipOut {
546
- from {
547
- transform: translate3d(0, var(--y), 0) perspective(400px);
548
- }
549
- 30% {
550
- transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
551
- opacity: 1;
552
- }
553
- to {
554
- transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
555
- opacity: 0;
556
- }
557
- }
558
- .Toastify__flip-enter {
559
- animation-name: Toastify__flipIn;
560
- }
561
- .Toastify__flip-exit {
562
- animation-name: Toastify__flipOut;
563
- }
564
- @keyframes Toastify__slideInRight {
565
- from {
566
- transform: translate3d(110%, 0, 0);
567
- visibility: visible;
568
- }
569
- to {
570
- transform: translate3d(0, var(--y), 0);
571
- }
572
- }
573
- @keyframes Toastify__slideInLeft {
574
- from {
575
- transform: translate3d(-110%, 0, 0);
576
- visibility: visible;
577
- }
578
- to {
579
- transform: translate3d(0, var(--y), 0);
580
- }
581
- }
582
- @keyframes Toastify__slideInUp {
583
- from {
584
- transform: translate3d(0, 110%, 0);
585
- visibility: visible;
586
- }
587
- to {
588
- transform: translate3d(0, var(--y), 0);
589
- }
590
- }
591
- @keyframes Toastify__slideInDown {
592
- from {
593
- transform: translate3d(0, -110%, 0);
594
- visibility: visible;
595
- }
596
- to {
597
- transform: translate3d(0, var(--y), 0);
598
- }
599
- }
600
- @keyframes Toastify__slideOutRight {
601
- from {
602
- transform: translate3d(0, var(--y), 0);
603
- }
604
- to {
605
- visibility: hidden;
606
- transform: translate3d(110%, var(--y), 0);
607
- }
608
- }
609
- @keyframes Toastify__slideOutLeft {
610
- from {
611
- transform: translate3d(0, var(--y), 0);
612
- }
613
- to {
614
- visibility: hidden;
615
- transform: translate3d(-110%, var(--y), 0);
616
- }
617
- }
618
- @keyframes Toastify__slideOutDown {
619
- from {
620
- transform: translate3d(0, var(--y), 0);
621
- }
622
- to {
623
- visibility: hidden;
624
- transform: translate3d(0, 500px, 0);
625
- }
626
- }
627
- @keyframes Toastify__slideOutUp {
628
- from {
629
- transform: translate3d(0, var(--y), 0);
630
- }
631
- to {
632
- visibility: hidden;
633
- transform: translate3d(0, -500px, 0);
634
- }
635
- }
636
- .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
637
- animation-name: Toastify__slideInLeft;
638
- }
639
- .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
640
- animation-name: Toastify__slideInRight;
641
- }
642
- .Toastify__slide-enter--top-center {
643
- animation-name: Toastify__slideInDown;
644
- }
645
- .Toastify__slide-enter--bottom-center {
646
- animation-name: Toastify__slideInUp;
647
- }
648
- .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
649
- animation-name: Toastify__slideOutLeft;
650
- animation-timing-function: ease-in;
651
- animation-duration: 0.3s;
652
- }
653
- .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
654
- animation-name: Toastify__slideOutRight;
655
- animation-timing-function: ease-in;
656
- animation-duration: 0.3s;
657
- }
658
- .Toastify__slide-exit--top-center {
659
- animation-name: Toastify__slideOutUp;
660
- animation-timing-function: ease-in;
661
- animation-duration: 0.3s;
662
- }
663
- .Toastify__slide-exit--bottom-center {
664
- animation-name: Toastify__slideOutDown;
665
- animation-timing-function: ease-in;
666
- animation-duration: 0.3s;
667
- }
668
- @keyframes Toastify__spin {
669
- from {
670
- transform: rotate(0deg);
671
- }
672
- to {
673
- transform: rotate(360deg);
674
- }
675
- }
676
- :root {
677
- --PhoneInput-color--focus: #03b2cb;
678
- --PhoneInputInternationalIconPhone-opacity: 0.8;
679
- --PhoneInputInternationalIconGlobe-opacity: 0.65;
680
- --PhoneInputCountrySelect-marginRight: 0.35em;
681
- --PhoneInputCountrySelectArrow-width: 0.3em;
682
- --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
683
- --PhoneInputCountrySelectArrow-borderWidth: 1px;
684
- --PhoneInputCountrySelectArrow-opacity: 0.45;
685
- --PhoneInputCountrySelectArrow-color: currentColor;
686
- --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
687
- --PhoneInputCountrySelectArrow-transform: rotate(45deg);
688
- --PhoneInputCountryFlag-aspectRatio: 1.5;
689
- --PhoneInputCountryFlag-height: 1em;
690
- --PhoneInputCountryFlag-borderWidth: 1px;
691
- --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
692
- --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
693
- --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
694
- }
695
- .PhoneInput {
696
- display: flex;
697
- align-items: center;
698
- }
699
- .PhoneInputInput {
700
- flex: 1;
701
- min-width: 0;
702
- }
703
- .PhoneInputCountryIcon {
704
- width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
705
- height: var(--PhoneInputCountryFlag-height);
706
- }
707
- .PhoneInputCountryIcon--square {
708
- width: var(--PhoneInputCountryFlag-height);
709
- }
710
- .PhoneInputCountryIcon--border {
711
- background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
712
- box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
713
- }
714
- .PhoneInputCountryIconImg {
715
- display: block;
716
- width: 100%;
717
- height: 100%;
718
- }
719
- .PhoneInputInternationalIconPhone {
720
- opacity: var(--PhoneInputInternationalIconPhone-opacity);
721
- }
722
- .PhoneInputInternationalIconGlobe {
723
- opacity: var(--PhoneInputInternationalIconGlobe-opacity);
724
- }
725
- .PhoneInputCountry {
726
- position: relative;
727
- align-self: stretch;
728
- display: flex;
729
- align-items: center;
730
- margin-right: var(--PhoneInputCountrySelect-marginRight);
731
- }
732
- .PhoneInputCountrySelect {
733
- position: absolute;
734
- top: 0;
735
- left: 0;
736
- height: 100%;
737
- width: 100%;
738
- z-index: 1;
739
- border: 0;
740
- opacity: 0;
741
- cursor: pointer;
742
- }
743
- .PhoneInputCountrySelect[disabled], .PhoneInputCountrySelect[readonly] {
744
- cursor: default;
745
- }
746
- .PhoneInputCountrySelectArrow {
747
- display: block;
748
- content: '';
749
- width: var(--PhoneInputCountrySelectArrow-width);
750
- height: var(--PhoneInputCountrySelectArrow-width);
751
- margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
752
- border-style: solid;
753
- border-color: var(--PhoneInputCountrySelectArrow-color);
754
- border-top-width: 0;
755
- border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
756
- border-left-width: 0;
757
- border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
758
- transform: var(--PhoneInputCountrySelectArrow-transform);
759
- opacity: var(--PhoneInputCountrySelectArrow-opacity);
760
- }
761
- .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
762
- opacity: 1;
763
- color: var(--PhoneInputCountrySelectArrow-color--focus);
764
- }
765
- .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
766
- box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
767
- }
768
- .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
769
- opacity: 1;
770
- color: var(--PhoneInputCountrySelectArrow-color--focus);
771
- }
772
- :root {
773
- --canvas-bg: #fff;
774
- --btn-bg: #d7263d;
775
- --btn-text: #ffffff;
776
- --btn-bg-hover: #1f2937;
777
- --btn-text-hover: #ffffff;
778
- --app-bg: #fafaf8;
779
- --app-link: #385b5a;
780
- --app-text: #e09898;
781
- --app-bg-hover: #4c6f6e;
782
- --app-text-hover: #ffffff;
783
- --font-heading: "Bebas Neue", sans-serif;
784
- --font-body: "DM Sans", sans-serif;
785
- --font-mono: "DM Mono", monospace;
786
- }
787
- @layer base {
788
- body {
789
- font-family: var(--font-body);
790
- background: var(--canvas);
791
- color: var(--copy);
792
- }
793
- }
794
- .PhoneInput input.PhoneInputInput {
795
- border: 0px !important;
796
- outline: 0px !important;
797
- }
798
- .success-pulse {
799
- animation: pulseBrand 2s ease infinite;
800
- }
801
- .arravpos-error-box {
802
- padding: 16px;
803
- color: #ef4444;
804
- }
805
- .arravpos-m0 {
806
- margin: 0px !important;
807
- }
808
- .aaravpos-center-items {
809
- display: flex;
810
- align-items: center;
811
- justify-content: center;
812
- }
813
- .aaravpos-overflow-hidden {
814
- overflow: hidden;
815
- }
816
- .aaravpos-text-bold {
817
- font-weight: 600;
818
- color: #000;
819
- }
820
- .aaravpos-tab-enabled {
821
- cursor: pointer;
822
- }
823
- .aaravpos-tab-disabled {
824
- cursor: not-allowed;
825
- opacity: 0.5;
826
- pointer-events: none;
827
- }
828
- .arravpos-container {
829
- background-color: #fff;
830
- padding: 16px;
831
- width: 100%;
832
- box-sizing: border-box;
833
- margin: 0 auto;
834
- height: 700px;
835
- }
836
- .aaravpos-margin-top-20 {
837
- margin-top: 20px;
838
- }
839
- .aaravpos-margin-bottom-20 {
840
- margin-bottom: 20px !important;
841
- }
842
- .aaravpos-tp-10 {
843
- margin-top: 10px;
844
- }
845
- .aaravpos-mt-auto {
846
- margin-top: auto;
847
- }
848
- .aaravpos-count {
849
- position: absolute;
850
- top: -5px;
851
- left: -14px;
852
- background: var(--btn-bg, #000);
853
- color: var(--btn-text, #fff);
854
- border-radius: 50%;
855
- height: 22px;
856
- width: 22px;
857
- display: flex;
858
- align-items: center;
859
- justify-content: center;
860
- font-size: 10px;
861
- }
862
- .aaravpos-btn {
863
- gap: 8px;
864
- padding: 8px 16px;
865
- border: none;
866
- background: var(--btn-bg, #000);
867
- color: var(--btn-text, #fff);
868
- font-size: 12px;
869
- font-weight: 700;
870
- text-transform: uppercase;
871
- letter-spacing: 1.5px;
872
- cursor: pointer;
873
- transition: all 0.2s ease;
874
- border-radius: 6px;
875
- position: absolute;
876
- bottom: 15px;
877
- z-index: 50;
878
- display: flex;
879
- align-items: center;
880
- justify-content: center;
881
- left: 50%;
882
- transform: translateX(-50%);
883
- width: max-content;
884
- display: none;
885
- }
886
- .aaravpos-btn:hover, .aaravpos-form-btn:hover {
887
- background: var(--btn-bg-hover, #222);
888
- color: var(--btn-text-hover, #fff);
889
- }
890
- .aaravpos-form-btn {
891
- gap: 8px;
892
- padding: 8px 16px;
893
- border: none;
894
- background: var(--btn-bg, #000);
895
- color: var(--btn-text, #fff);
896
- font-size: 12px;
897
- font-weight: 700;
898
- text-transform: uppercase;
899
- letter-spacing: 1.5px;
900
- cursor: pointer;
901
- transition: all 0.2s ease;
902
- border-radius: 6px;
903
- display: flex;
904
- align-items: center;
905
- justify-content: center;
906
- width: max-content;
907
- margin-top: 22px;
908
- }
909
- .aaravpos-divider {
910
- height: 1px;
911
- background: var(--border-color, #d4d4d4);
912
- margin: 2px 0px;
913
- }
914
- .aaravpos-btn:disabled {
915
- opacity: 0.7;
916
- cursor: not-allowed;
917
- }
918
- .aaravpos-btn-content {
919
- display: flex;
920
- align-items: center;
921
- justify-content: center;
922
- gap: 8px;
923
- }
924
- .aaravpos-mb-10 {
925
- margin-bottom: 10px;
926
- }
927
- .aaravpos-padding-btn {
928
- padding: 9px 8px !important;
929
- }
930
- .aaravpos-cart-btn {
931
- display: flex;
932
- align-items: center;
933
- justify-content: center;
934
- height: 40px;
935
- width: 40px;
936
- border: 1px solid #e5e7eb;
937
- background: #ffffff;
938
- cursor: pointer;
939
- outline: none;
940
- flex-shrink: 0;
941
- border-radius: 100%;
942
- position: relative;
943
- }
944
- .aaravpos-count {
945
- position: absolute;
946
- top: -5px;
947
- left: -14px;
948
- background: var(--btn-bg);
949
- @supports (color: color-mix(in lab, red, red)) {
950
- background: color-mix(in srgb, var(--btn-bg) 80%, transparent);
951
- }
952
- color: var(--btn-text);
953
- border-radius: 50%;
954
- height: 22px;
955
- width: 22px;
956
- display: flex;
957
- align-items: center;
958
- justify-content: center;
959
- font-size: 12px;
960
- }
961
- .aaravpos-layout {
962
- height: 700px;
963
- display: flex;
964
- flex-direction: column;
965
- background: var(--canvas, #ffffff);
966
- color: var(--copy, #000000);
967
- overflow: hidden;
968
- }
969
- .aaravpos-layout-content {
970
- flex: 1;
971
- position: relative;
972
- max-height: 700px;
973
- }
974
- .aaravpos-layout-page {
975
- height: 700px;
976
- }
977
- .aaravpos-title {
978
- font-size: 22px;
979
- font-weight: 600;
980
- text-transform: uppercase;
981
- letter-spacing: -0.025em;
982
- color: #111827;
983
- margin-bottom: 6px;
984
- line-height: 1.1;
985
- margin-top: 0px;
986
- }
987
- .aaravpos-main-layout {
988
- display: flex;
989
- flex-direction: column;
990
- height: 700px;
991
- }
992
- .aaravpos-layout-wrapper {
993
- flex: 1;
994
- display: grid;
995
- grid-template-columns: 1fr;
996
- overflow: hidden;
997
- position: relative;
998
- }
999
- .aaravpos-main-content {
1000
- padding: 16px;
1001
- position: relative;
1002
- min-width: 0;
1003
- }
1004
- .aaravpos-mobile-button {
1005
- position: absolute;
1006
- bottom: 12px;
1007
- left: 0;
1008
- right: 0;
1009
- z-index: 50;
1010
- padding: 0 16px;
1011
- display: flex;
1012
- align-items: center;
1013
- justify-content: center;
1014
- }
1015
- .aaravpos-sidebar {
1016
- flex-direction: column;
1017
- background: var(--surface-bg, #FFFFFF);
1018
- border: 1px solid rgba(0, 0, 0, 0.1);
1019
- padding: 16px 16px 14px;
1020
- position: fixed;
1021
- top: 10px;
1022
- right: 10px;
1023
- bottom: 10px;
1024
- width: 315px;
1025
- transform: translateX(360px);
1026
- transition: transform 0.3s ease;
1027
- background: #fff;
1028
- z-index: 1024;
1029
- border-radius: 8px;
1030
- display: flex;
1031
- }
1032
- .aaravpos-sidebar.open {
1033
- transform: translateX(0);
1034
- }
1035
- .aaravpos-sidebar-mobile {
1036
- position: fixed;
1037
- inset: 0;
1038
- height: 100vh;
1039
- background: #ffffff;
1040
- border-radius: 16px 16px 0 0;
1041
- display: flex;
1042
- flex-direction: column;
1043
- animation: aaravposFadeIn 0.25s ease;
1044
- z-index: 999;
1045
- }
1046
- .aaravpos-sidebar-mobile-content {
1047
- flex: 1;
1048
- overflow-y: auto;
1049
- padding: 16px;
1050
- }
1051
- .aaravpos-outlet-divider {
1052
- width: 56px;
1053
- height: 2px;
1054
- background: var(--btn-bg);
1055
- border-radius: 999px;
1056
- }
1057
- .aaravpos-header {
1058
- display: flex;
1059
- flex-direction: column;
1060
- justify-content: space-between;
1061
- gap: 16px;
1062
- margin-bottom: 10px;
1063
- }
1064
- .aaravpos-search-wrapper {
1065
- position: relative;
1066
- width: 100%;
1067
- display: flex;
1068
- align-items: center;
1069
- }
1070
- .aaravpos-search-icon {
1071
- position: absolute;
1072
- left: 12px;
1073
- top: 50%;
1074
- transform: translateY(-50%);
1075
- color: #9ca3af;
1076
- display: flex;
1077
- align-items: center;
1078
- justify-content: center;
1079
- pointer-events: none;
1080
- }
1081
- .aaravpos-search-actions {
1082
- position: absolute;
1083
- right: 12px;
1084
- top: 50%;
1085
- transform: translateY(-50%);
1086
- display: flex;
1087
- align-items: center;
1088
- gap: 8px;
1089
- }
1090
- .aaravpos-search-clear {
1091
- border: none;
1092
- background: transparent;
1093
- color: #9ca3af;
1094
- cursor: pointer;
1095
- transition: all 0.3s ease;
1096
- display: flex;
1097
- align-items: center;
1098
- justify-content: center;
1099
- padding: 0;
1100
- }
1101
- .aaravpos-search-clear:hover {
1102
- color: #000000;
1103
- }
1104
- .aaravpos-outlet-list-wrapper {
1105
- padding-top: 8px;
1106
- padding-bottom: 8px;
1107
- height: 610px;
1108
- overflow: auto;
1109
- scrollbar-width: none;
1110
- }
1111
- .aaravpos-outlet-list-wrapper::-webkit-scrollbar {
1112
- display: none;
1113
- }
1114
- .aaravpos-outlet-grid {
1115
- display: grid;
1116
- grid-template-columns: 1fr;
1117
- gap: 16px;
1118
- padding-bottom: 50px;
1119
- }
1120
- .aaravpos-empty-state {
1121
- display: flex;
1122
- align-items: center;
1123
- justify-content: center;
1124
- padding: 80px 0;
1125
- }
1126
- .aaravpos-empty-content {
1127
- text-align: center;
1128
- }
1129
- .aaravpos-empty-title {
1130
- font-size: 20px;
1131
- font-weight: 600;
1132
- color: #1f2937;
1133
- margin-bottom: 8px;
1134
- }
1135
- .aaravpos-empty-text {
1136
- font-size: 14px;
1137
- color: #6b7280;
1138
- }
1139
- .aaravpos-outlet-card {
1140
- position: relative;
1141
- display: flex;
1142
- flex-direction: column;
1143
- justify-content: space-between;
1144
- overflow: hidden;
1145
- border-radius: 6px;
1146
- border: 1px solid #e5e7eb;
1147
- background: #ffffff;
1148
- cursor: pointer;
1149
- transition: all 0.3s ease;
1150
- }
1151
- .aaravpos-outlet-card:hover {
1152
- border-color: #d1d5db;
1153
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
1154
- }
1155
- .aaravpos-outlet-card.selected {
1156
- border-color: var(--btn-bg-hover);
1157
- background: #ffffff;
1158
- box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
1159
- }
1160
- .aaravpos-outlet-card.closed {
1161
- border-color: #fca5a5;
1162
- background: rgba(254, 242, 242, 0.5);
1163
- }
1164
- .aaravpos-outlet-card-top {
1165
- display: flex;
1166
- align-items: flex-start;
1167
- justify-content: flex-end;
1168
- position: absolute;
1169
- right: 0px;
1170
- }
1171
- .aaravpos-outlet-card-content {
1172
- padding: 14px;
1173
- }
1174
- .aaravpos-outlet-card-inner {
1175
- flex: 1;
1176
- }
1177
- .aaravpos-outlet-card-title {
1178
- font-size: 18px;
1179
- font-weight: 600;
1180
- text-transform: uppercase;
1181
- letter-spacing: -0.025em;
1182
- color: #111827;
1183
- overflow: hidden;
1184
- display: -webkit-box;
1185
- line-clamp: 1;
1186
- -webkit-line-clamp: 1;
1187
- -webkit-box-orient: vertical;
1188
- margin-bottom: 0px;
1189
- margin-top: 0px;
1190
- }
1191
- .aaravpos-outlet-card-address {
1192
- margin-top: 4px;
1193
- font-size: 14px;
1194
- color: #737373;
1195
- word-break: break-word;
1196
- min-height: 40px;
1197
- overflow: hidden;
1198
- display: -webkit-box;
1199
- line-clamp: 1;
1200
- -webkit-line-clamp: 2;
1201
- -webkit-box-orient: vertical;
1202
- margin-bottom: 0px;
1203
- }
1204
- .aaravpos-status-badge {
1205
- display: inline-flex;
1206
- align-items: center;
1207
- padding: 1px 6px;
1208
- font-size: 9px;
1209
- font-weight: 700;
1210
- text-transform: uppercase;
1211
- letter-spacing: 0.12em;
1212
- border: 1px solid;
1213
- border-top-right-radius: 6px;
1214
- border-bottom-left-radius: 6px;
1215
- }
1216
- .aaravpos-status-open {
1217
- background: #ecfdf5;
1218
- color: #047857;
1219
- border-color: #a7f3d0;
1220
- }
1221
- .aaravpos-status-closed {
1222
- background: #fee2e2;
1223
- color: #f87171;
1224
- border-color: #fecaca;
1225
- }
1226
- .aaravpos-mobile-stepper {
1227
- display: flex;
1228
- align-items: center;
1229
- flex-direction: row;
1230
- gap: 4px;
1231
- font-weight: 600;
1232
- }
1233
- .aaravpos-mobile-back-btn {
1234
- display: flex;
1235
- align-items: center;
1236
- font-size: 20px;
1237
- margin-right: 4px;
1238
- cursor: pointer;
1239
- border: none;
1240
- background: transparent;
1241
- color: #000000;
1242
- padding: 0;
1243
- }
1244
- .aaravpos-mobile-back-btn:disabled {
1245
- color: #d1d5db;
1246
- cursor: not-allowed;
1247
- }
1248
- .aaravpos-mobile-step-label {
1249
- display: flex;
1250
- align-items: center;
1251
- flex-direction: row;
1252
- font-size: 16px;
1253
- font-weight: 500;
1254
- }
1255
- .aaravpos-desktop-stepper {
1256
- display: none;
1257
- }
1258
- .aaravpos-desktop-back-btn {
1259
- display: flex;
1260
- align-items: center;
1261
- justify-content: center;
1262
- height: 40px;
1263
- width: 40px;
1264
- border: 1px solid #e5e7eb;
1265
- background: #ffffff;
1266
- cursor: pointer;
1267
- outline: none;
1268
- flex-shrink: 0;
1269
- border-radius: 100%;
1270
- overflow: hidden;
1271
- }
1272
- .aaravpos-desktop-back-btn:hover {
1273
- background: #f3f4f6;
1274
- }
1275
- .aaravpos-step-nav {
1276
- display: grid;
1277
- grid-template-columns: repeat(5, 1fr);
1278
- width: 100%;
1279
- overflow: hidden;
1280
- }
1281
- .aaravpos-step-btn {
1282
- position: relative;
1283
- height: 40px;
1284
- display: flex;
1285
- align-items: center;
1286
- justify-content: center;
1287
- gap: 8px;
1288
- text-transform: uppercase;
1289
- letter-spacing: 1px;
1290
- font-size: 11px;
1291
- font-weight: 600;
1292
- transition: all 0.3s ease;
1293
- border: none;
1294
- border-bottom: 2px solid transparent;
1295
- background: transparent;
1296
- }
1297
- .aaravpos-step-btn.clickable {
1298
- cursor: pointer;
1299
- }
1300
- .aaravpos-step-btn.disabled {
1301
- cursor: not-allowed;
1302
- opacity: 0.5;
1303
- pointer-events: none;
1304
- }
1305
- .aaravpos-step-btn.active {
1306
- border-bottom-color: var(--btn-bg);
1307
- color: #000000;
1308
- }
1309
- .aaravpos-step-btn.inactive {
1310
- color: rgba(0, 0, 0, 0.6);
1311
- }
1312
- .aaravpos-step-btn.inactive:hover {
1313
- color: #000000;
1314
- }
1315
- .aaravpos-step-icon.active {
1316
- color: var(--btn-bg);
1317
- }
1318
- .aaravpos-step-icon.inactive {
1319
- color: var(--btn-bg-hover);
1320
- }
1321
- .aaravpos-navbar-form {
1322
- display: flex;
1323
- flex-direction: row;
1324
- justify-content: space-between;
1325
- }
1326
- .aaravpos-page-title {
1327
- font-size: 22px;
1328
- font-weight: 900;
1329
- text-transform: uppercase;
1330
- letter-spacing: -0.025em;
1331
- color: #111827;
1332
- padding-top: 0px;
1333
- line-height: 1.1;
1334
- margin-bottom: 0px;
1335
- margin-top: 0px;
1336
- }
1337
- .aaravpos-sub-title {
1338
- font-size: 14px;
1339
- color: rgba(0, 0, 0, 0.6);
1340
- margin-bottom: 10px;
1341
- line-height: 1.5;
1342
- margin-top: 0px;
1343
- }
1344
- .aaravpos-topbar {
1345
- display: flex;
1346
- flex-direction: column;
1347
- justify-content: space-between;
1348
- gap: 16px;
1349
- margin-bottom: 12px;
1350
- border-bottom: 1px solid rgba(0, 0, 0, 0.4);
1351
- }
1352
- .aaravpos-tab-group {
1353
- display: flex;
1354
- align-items: flex-end;
1355
- gap: 32px;
1356
- }
1357
- .aaravpos-tab-btn {
1358
- padding-bottom: 8px;
1359
- border: none;
1360
- border-bottom: 2px solid transparent;
1361
- background: transparent;
1362
- font-size: 12px;
1363
- font-weight: 600;
1364
- text-transform: uppercase;
1365
- letter-spacing: 2px;
1366
- cursor: pointer;
1367
- transition: all 0.3s ease;
1368
- }
1369
- .aaravpos-tab-btn.active {
1370
- color: var(--btn-bg, #000);
1371
- border-bottom-color: var(--btn-bg, #000);
1372
- }
1373
- .aaravpos-tab-btn.inactive {
1374
- color: rgba(0, 0, 0, 0.4);
1375
- }
1376
- .aaravpos-tab-btn.inactive:hover {
1377
- color: #000;
1378
- }
1379
- .aaravpos-search-box {
1380
- position: relative;
1381
- width: 100%;
1382
- }
1383
- .aaravpos-search-icon {
1384
- position: absolute;
1385
- left: 12px;
1386
- top: 50%;
1387
- transform: translateY(-50%);
1388
- color: #9ca3af;
1389
- }
1390
- .aaravpos-search-input {
1391
- width: 100%;
1392
- padding: 8px 40px 8px 36px;
1393
- border: 1px solid rgba(0, 0, 0, 0.3);
1394
- border-radius: 6px;
1395
- font-size: 14px;
1396
- outline: none;
1397
- transition: all 0.3s ease;
1398
- }
1399
- .aaravpos-search-input:focus {
1400
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
1401
- }
1402
- .aaravpos-search-clear {
1403
- position: absolute;
1404
- right: 12px;
1405
- top: 50%;
1406
- transform: translateY(-50%);
1407
- border: none;
1408
- background: transparent;
1409
- color: #9ca3af;
1410
- cursor: pointer;
1411
- transition: all 0.3s ease;
1412
- }
1413
- .aaravpos-search-clear:hover {
1414
- color: #000;
1415
- }
1416
- .aaravpos-supercategory-wrapper {
1417
- display: flex;
1418
- flex-wrap: nowrap;
1419
- gap: 8px;
1420
- width: 100%;
1421
- overflow-x: auto;
1422
- margin-bottom: 12px;
1423
- scrollbar-width: none;
1424
- }
1425
- .aaravpos-supercategory-wrapper::-webkit-scrollbar {
1426
- display: none;
1427
- }
1428
- .aaravpos-supercategory-btn {
1429
- min-width: fit-content;
1430
- padding: 6px;
1431
- border: 1px solid rgba(0, 0, 0, 0.3);
1432
- background: #ffffff;
1433
- text-align: left;
1434
- cursor: pointer;
1435
- transition: all 0.3s ease;
1436
- font-size: 14px;
1437
- border-radius: 4px;
1438
- }
1439
- .aaravpos-supercategory-btn:hover {
1440
- border-color: rgba(0, 0, 0, 0.5);
1441
- }
1442
- .aaravpos-supercategory-btn.active {
1443
- border-color: rgba(0, 0, 0, 0.4);
1444
- background: rgba(0, 0, 0, 0.8);
1445
- color: #fff;
1446
- }
1447
- .aaravpos-supercategory-btn.active .aaravpos-supercategory-count {
1448
- color: #fff;
1449
- }
1450
- .aaravpos-subcategory-btn {
1451
- min-width: fit-content;
1452
- padding: 6px;
1453
- border: 1px solid rgba(0, 0, 0, 0.3);
1454
- background: #ffffff;
1455
- text-align: left;
1456
- cursor: pointer;
1457
- transition: all 0.3s ease;
1458
- font-size: 12px;
1459
- border-radius: 4px;
1460
- }
1461
- .aaravpos-subcategory-btn:hover {
1462
- border-color: rgba(0, 0, 0, 0.5);
1463
- }
1464
- .aaravpos-subcategory-btn.active {
1465
- border: 1px solid var(--app-bg);
1466
- background: var(--app-bg);
1467
- @supports (color: color-mix(in lab, red, red)) {
1468
- background: color-mix(in srgb, var(--app-bg) 10%, transparent);
1469
- }
1470
- color: var(--app-bg);
1471
- }
1472
- .aaravpos-subcategory-btn.active .aaravpos-subcategory-count {
1473
- color: #fff;
1474
- }
1475
- .aaravpos-supercategory-title {
1476
- margin-top: 0px;
1477
- font-size: 14px;
1478
- font-weight: 500;
1479
- margin-bottom: 0px;
1480
- }
1481
- .aaravpos-supercategory-count {
1482
- font-size: 10px;
1483
- font-weight: 600;
1484
- text-transform: uppercase;
1485
- letter-spacing: 1px;
1486
- color: rgba(0, 0, 0, 0.6);
1487
- margin-bottom: 0px;
1488
- margin-top: 6px;
1489
- }
1490
- .aaravpos-services-wrapper {
1491
- overflow-y: auto;
1492
- padding-bottom: 30px;
1493
- scrollbar-width: none;
1494
- -ms-overflow-style: none;
1495
- height: 418px;
1496
- }
1497
- .aaravpos-services-wrapper::-webkit-scrollbar {
1498
- display: none;
1499
- }
1500
- .aaravpos-services-grid {
1501
- display: grid;
1502
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
1503
- gap: 12px;
1504
- }
1505
- .aaravpos-service-card {
1506
- position: relative;
1507
- border: 1px solid rgba(0, 0, 0, 0.3);
1508
- border-radius: 6px;
1509
- padding: 8px;
1510
- cursor: pointer;
1511
- background: #ffffff;
1512
- transition: all 0.25s ease;
1513
- overflow: hidden;
1514
- }
1515
- .aaravpos-service-card:hover {
1516
- border-color: rgba(0, 0, 0, 0.6);
1517
- }
1518
- .aaravpos-service-card.active {
1519
- border-color: var(--btn-bg);
1520
- background: rgba(0, 0, 0, 0.03);
1521
- }
1522
- .aaravpos-tax-badge, .aaravpos-consent-badge {
1523
- position: absolute;
1524
- top: 0;
1525
- font-size: 9px;
1526
- padding: 2px 8px;
1527
- color: #fff;
1528
- }
1529
- .aaravpos-tax-badge {
1530
- left: 0;
1531
- background: #15803d;
1532
- border-radius: 0 0 6px 0;
1533
- }
1534
- .aaravpos-consent-badge {
1535
- right: 0;
1536
- background: rgba(0, 0, 0, 0.8);
1537
- border-radius: 0 0 0 6px;
1538
- }
1539
- .aaravpos-service-title {
1540
- font-size: 14px;
1541
- font-weight: 700;
1542
- margin-top: 0px;
1543
- margin-bottom: 4px;
1544
- text-transform: uppercase;
1545
- overflow: hidden;
1546
- text-overflow: ellipsis;
1547
- white-space: nowrap;
1548
- margin-top: 12px;
1549
- }
1550
- .aaravpos-service-description-wrapper {
1551
- position: relative;
1552
- }
1553
- .aaravpos-service-description {
1554
- font-size: 12px;
1555
- font-weight: 600;
1556
- color: rgba(0, 0, 0, 0.45);
1557
- text-transform: uppercase;
1558
- overflow: hidden;
1559
- text-overflow: ellipsis;
1560
- white-space: nowrap;
1561
- margin: 5px 0px;
1562
- }
1563
- .aaravpos-service-tooltip {
1564
- position: absolute;
1565
- display: none;
1566
- top: 20px;
1567
- left: 0;
1568
- z-index: 10;
1569
- width: 208px;
1570
- padding: 8px;
1571
- font-size: 12px;
1572
- background: #f5f5f5;
1573
- border-radius: 6px;
1574
- }
1575
- .aaravpos-service-description-wrapper:hover .aaravpos-service-tooltip {
1576
- display: block;
1577
- }
1578
- .aaravpos-service-price {
1579
- display: flex;
1580
- justify-content: space-between;
1581
- align-items: center;
1582
- margin-top: 8px;
1583
- margin-bottom: 8px;
1584
- font-size: 14px;
1585
- font-weight: 600;
1586
- color: rgba(0, 0, 0, 0.6);
1587
- }
1588
- .aaravpos-service-price-right {
1589
- display: flex;
1590
- align-items: center;
1591
- font-family: monospace;
1592
- }
1593
- .aaravpos-service-actions {
1594
- display: flex;
1595
- align-items: center;
1596
- justify-content: flex-start;
1597
- margin-top: 6px;
1598
- border: 1px solid #d1d5db;
1599
- width: fit-content;
1600
- border-radius: 4px;
1601
- }
1602
- .aaravpos-service-action-btn {
1603
- width: 40px;
1604
- height: 32px;
1605
- border: none;
1606
- background: transparent;
1607
- display: flex;
1608
- align-items: center;
1609
- justify-content: center;
1610
- cursor: pointer;
1611
- transition: background 0.2s ease;
1612
- overflow: hidden;
1613
- }
1614
- .aaravpos-service-action-btn:hover {
1615
- background: #f5f5f4;
1616
- }
1617
- .aaravpos-service-action-btn.plus {
1618
- background: rgba(0, 0, 0, 0.8);
1619
- color: white;
1620
- border-top-right-radius: 4px;
1621
- border-bottom-right-radius: 4px;
1622
- }
1623
- .aaravpos-service-action-btn.plus:hover {
1624
- background: rgba(0, 0, 0, 0.9);
1625
- }
1626
- .aaravpos-service-qty {
1627
- width: 40px;
1628
- height: 32px;
1629
- border-left: 1px solid #d1d5db;
1630
- border-right: 1px solid #d1d5db;
1631
- display: flex;
1632
- align-items: center;
1633
- justify-content: center;
1634
- font-size: 14px;
1635
- font-weight: 600;
1636
- }
1637
- .aaravpos-skeleton-card {
1638
- position: relative;
1639
- height: 134px;
1640
- overflow: hidden;
1641
- border-radius: 4px;
1642
- background: #e0e0e0;
1643
- }
1644
- .aaravpos-skeleton-shimmer {
1645
- position: absolute;
1646
- top: 0;
1647
- left: -100%;
1648
- width: 100%;
1649
- height: 100%;
1650
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
1651
- animation: aaravpos-shimmer 1.2s infinite;
1652
- }
1653
- .aaravpos-available-badge {
1654
- display: flex;
1655
- align-items: center;
1656
- justify-content: center;
1657
- gap: 8px;
1658
- margin: 12px 0px 0px 0px;
1659
- }
1660
- .aaravpos-available-dot {
1661
- width: 6px;
1662
- height: 6px;
1663
- border-radius: 999px;
1664
- background: #15803d;
1665
- flex-shrink: 0;
1666
- }
1667
- .aaravpos-available-text {
1668
- font-size: 11px;
1669
- font-weight: 600;
1670
- color: #166534;
1671
- letter-spacing: 0.2px;
1672
- text-align: center;
1673
- margin: 0px;
1674
- }
1675
- .aaravpos-no-staff {
1676
- font-size: 14px;
1677
- font-weight: 600;
1678
- color: rgba(var(--btn-bg-rgb, 0, 0, 0), 0.9);
1679
- }
1680
- .aaravpos-staff-grid {
1681
- display: grid;
1682
- grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
1683
- gap: 12px;
1684
- }
1685
- .aaravpos-display-flex {
1686
- display: flex;
1687
- align-items: center;
1688
- gap: 12px;
1689
- }
1690
- .aaravpos-pro-card {
1691
- border: 2px solid rgba(0, 0, 0, 0.15);
1692
- border-radius: 6px;
1693
- padding: 10px;
1694
- background: #ffffff;
1695
- cursor: pointer;
1696
- transition: all 0.25s ease;
1697
- }
1698
- .aaravpos-pro-card:hover {
1699
- border-color: rgba(var(--btn-bg, 0, 0, 0), 0.5);
1700
- }
1701
- .aaravpos-pro-card.active {
1702
- border-color: rgba(var(--btn-bg, 0, 0, 0), 0.04);
1703
- background: rgba(var(--btn-bg, 0, 0, 0), 0.05);
1704
- }
1705
- .aaravpos-pro-image {
1706
- width: 48px;
1707
- height: 48px;
1708
- border-radius: 8px;
1709
- object-fit: cover;
1710
- border: 1px solid rgba(0, 0, 0, 0.1);
1711
- }
1712
- .aaravpos-pro-avatar {
1713
- width: 48px;
1714
- height: 48px;
1715
- border-radius: 8px;
1716
- display: flex;
1717
- align-items: center;
1718
- justify-content: center;
1719
- color: #ffffff;
1720
- font-size: 18px;
1721
- font-weight: 700;
1722
- }
1723
- .aaravpos-pro-info {
1724
- display: flex;
1725
- flex-direction: column;
1726
- }
1727
- .aaravpos-pro-name {
1728
- font-size: 16px;
1729
- font-weight: 600;
1730
- text-transform: uppercase;
1731
- }
1732
- .aaravpos-pro-type {
1733
- font-size: 12px;
1734
- color: #6b7280;
1735
- text-transform: uppercase;
1736
- margin: 0px;
1737
- }
1738
- .aaravpos-order-sidebar {
1739
- display: flex;
1740
- flex-direction: column;
1741
- justify-content: space-between;
1742
- }
1743
- .aaravpos-order-header {
1744
- padding: 0px 0px 8px 0px;
1745
- border-bottom: 1px solid #d1d5db;
1746
- position: relative;
1747
- }
1748
- .aaravpos-order-title {
1749
- font-size: 16px;
1750
- font-weight: 900;
1751
- text-transform: uppercase;
1752
- letter-spacing: -0.5px;
1753
- margin-bottom: 0px;
1754
- margin-top: 0px;
1755
- display: flex;
1756
- justify-content: space-between;
1757
- align-items: center;
1758
- }
1759
- .aaravpos-order-subtitle {
1760
- font-size: 12px;
1761
- font-weight: 600;
1762
- color: rgba(0, 0, 0, 0.4);
1763
- text-transform: uppercase;
1764
- overflow: hidden;
1765
- text-overflow: ellipsis;
1766
- white-space: nowrap;
1767
- margin-bottom: 0px;
1768
- margin-top: 0px;
1769
- }
1770
- .aaravpos-order-body {
1771
- padding: 12px 0px 0px 0px;
1772
- }
1773
- .aaravpos-order-section-title {
1774
- font-size: 14px;
1775
- font-weight: 600;
1776
- margin: 0px;
1777
- color: rgba(0, 0, 0, 0.4);
1778
- text-transform: uppercase;
1779
- overflow: hidden;
1780
- text-overflow: ellipsis;
1781
- white-space: nowrap;
1782
- }
1783
- .aaravpos-order-list {
1784
- overflow-y: auto;
1785
- padding: 0px;
1786
- scrollbar-width: none;
1787
- -ms-overflow-style: none;
1788
- margin: 4px 0px;
1789
- }
1790
- .aaravpos-pro-order-list, .aaravpos-pro-order-list-pro, .aaravpos-pro-order-list-single {
1791
- height: calc(100dvh - 270px);
1792
- overflow-y: auto;
1793
- scrollbar-width: none;
1794
- -ms-overflow-style: none;
1795
- padding: 0px;
1796
- margin: 4px 0px;
1797
- }
1798
- .aaravpos-order-list::-webkit-scrollbar, .aaravpos-pro-order-list::-webkit-scrollbar, .aaravpos-pro-order-list-pro::-webkit-scrollbar, .aaravpos-pro-order-list-pro::-webkit-scrollbar, .aaravpos-pro-order-list-single::-webkit-scrollbar, .aaravpos-pro-order-list-single::-webkit-scrollbar {
1799
- display: none;
1800
- }
1801
- .aaravpos-pro-order-list-pro {
1802
- height: calc(100dvh - 250px);
1803
- }
1804
- .aaravpos-pro-order-list-single {
1805
- height: calc(100dvh - 210px);
1806
- }
1807
- .aaravpos-order-item {
1808
- display: flex;
1809
- flex-direction: column;
1810
- align-items: flex-start;
1811
- justify-content: flex-start;
1812
- padding: 8px 0;
1813
- border-bottom: 1px dotted #9ca3af;
1814
- }
1815
- .aaravpos-order-item:last-child {
1816
- border-bottom: none;
1817
- }
1818
- .aaravpos-order-service-name {
1819
- font-size: 14px;
1820
- font-weight: 500;
1821
- text-transform: uppercase;
1822
- display: -webkit-box;
1823
- -webkit-line-clamp: 1;
1824
- -webkit-box-orient: vertical;
1825
- overflow: hidden;
1826
- margin: 0px;
1827
- }
1828
- .aaravpos-main-text {
1829
- width: 100%;
1830
- }
1831
- .aaravpos-order-details {
1832
- width: 100%;
1833
- display: grid;
1834
- gap: 4px;
1835
- grid-template-columns: repeat(3, 1fr);
1836
- align-items: center;
1837
- margin-top: 4px;
1838
- }
1839
- .aaravpos-order-detail {
1840
- display: flex;
1841
- align-items: center;
1842
- gap: 4px;
1843
- font-size: 12px;
1844
- font-weight: 500;
1845
- color: rgba(0, 0, 0, 0.6);
1846
- margin: 0px;
1847
- }
1848
- .aaravpos-order-detail.center {
1849
- justify-content: center;
1850
- }
1851
- .aaravpos-order-detail.right {
1852
- justify-content: flex-end;
1853
- gap: 0px;
1854
- }
1855
- .aaravpos-order-footer {
1856
- padding-top: 5px;
1857
- }
1858
- .aaravpos-order-subtotal {
1859
- display: flex;
1860
- justify-content: space-between;
1861
- align-items: flex-end;
1862
- margin-bottom: 4px;
1863
- }
1864
- .aaravpos-order-subtotal-label {
1865
- font-size: 16px;
1866
- font-weight: 600;
1867
- color: rgba(0, 0, 0, 0.6);
1868
- text-transform: capitalize;
1869
- }
1870
- .aaravpos-order-subtotal-price {
1871
- font-size: 18px;
1872
- display: flex;
1873
- align-items: center;
1874
- font-family: monospace;
1875
- font-weight: 600;
1876
- }
1877
- .aaravpos-common-btn {
1878
- width: 100%;
1879
- margin-top: 10px;
1880
- padding: 12px 8px;
1881
- border: none;
1882
- background: var(--btn-bg);
1883
- color: var(--btn-text, #ffffff);
1884
- font-size: 12px;
1885
- font-weight: 700;
1886
- font-family: var(--font-dm-sans);
1887
- text-transform: uppercase;
1888
- letter-spacing: 1.5px;
1889
- cursor: pointer;
1890
- transition: all 0.2s ease;
1891
- border-radius: 6px;
1892
- }
1893
- .aaravpos-common-btn:hover, .aaravpos-cart-btn:hover {
1894
- background: var(--btn-bg-hover);
1895
- color: var(--btn-text-hover, #ffffff);
1896
- }
1897
- .aaravpos-common-btn:disabled {
1898
- opacity: 0.7;
1899
- cursor: not-allowed;
1900
- }
1901
- .aaravpos-common-btn-content {
1902
- display: flex;
1903
- align-items: center;
1904
- justify-content: center;
1905
- gap: 8px;
1906
- }
1907
- .aaravpos-order-label {
1908
- font-size: 14px;
1909
- font-weight: 600;
1910
- margin: 6px 0;
1911
- color: rgba(0, 0, 0, 0.4);
1912
- text-transform: uppercase;
1913
- }
1914
- .aaravpos-pro-image {
1915
- width: 40px;
1916
- height: 40px;
1917
- border-radius: 8px;
1918
- object-fit: cover;
1919
- border: 1px solid rgba(0, 0, 0, 0.1);
1920
- }
1921
- .aaravpos-pro-avatar {
1922
- width: 40px;
1923
- height: 40px;
1924
- border-radius: 8px;
1925
- color: #fff;
1926
- display: flex;
1927
- align-items: center;
1928
- justify-content: center;
1929
- font-weight: 600;
1930
- }
1931
- .aaravpos-pro-info {
1932
- overflow: hidden;
1933
- flex: 1;
1934
- min-width: 0;
1935
- }
1936
- .aaravpos-pro-name {
1937
- font-size: 14px;
1938
- font-weight: 700;
1939
- text-transform: uppercase;
1940
- margin: 0px 0px 5px 0px;
1941
- overflow: hidden;
1942
- text-overflow: ellipsis;
1943
- white-space: nowrap;
1944
- }
1945
- .aaravpos-pro-type {
1946
- font-size: 12px;
1947
- color: #6b7280;
1948
- text-transform: uppercase;
1949
- white-space: nowrap;
1950
- overflow: hidden;
1951
- text-overflow: ellipsis;
1952
- }
1953
- .aaravpos-summary-row {
1954
- display: flex;
1955
- justify-content: space-between;
1956
- align-items: center;
1957
- margin-bottom: 6px;
1958
- font-size: 14px;
1959
- font-weight: 600;
1960
- color: #374151;
1961
- }
1962
- .aaravpos-summary-label {
1963
- display: block;
1964
- }
1965
- .aaravpos-summary-value {
1966
- display: flex;
1967
- align-items: center;
1968
- font-family: monospace;
1969
- }
1970
- .aaravpos-consent-box {
1971
- margin-bottom: 12px;
1972
- padding: 8px;
1973
- background: #fefce8;
1974
- border: 1px solid #fde68a;
1975
- border-radius: 4px;
1976
- }
1977
- .aaravpos-consent-text {
1978
- font-size: 12px;
1979
- font-weight: 500;
1980
- color: #854d0e;
1981
- }
1982
- .aaravpos-consent-progress {
1983
- width: 100%;
1984
- height: 6px;
1985
- margin-top: 4px;
1986
- background: #e5e7eb;
1987
- border-radius: 9999px;
1988
- overflow: hidden;
1989
- }
1990
- .aaravpos-consent-progress-bar {
1991
- height: 100%;
1992
- background: #ca8a04;
1993
- border-radius: 9999px;
1994
- transition: width 0.3s ease;
1995
- }
1996
- .aaravpos-tip-input-wrapper {
1997
- overflow: hidden;
1998
- }
1999
- .aaravpos-tip-input {
2000
- width: 100%;
2001
- padding: 8px 12px;
2002
- margin-bottom: 12px;
2003
- border: 1px solid #d1d5db;
2004
- border-radius: 4px;
2005
- font-size: 14px;
2006
- outline: none;
2007
- box-sizing: border-box;
2008
- transition: border-color 0.2s ease;
2009
- }
2010
- .aaravpos-tip-input:focus {
2011
- border-color: #9ca3af;
2012
- }
2013
- .aaravpos-tip-title {
2014
- margin-top: 16px;
2015
- margin-bottom: 8px;
2016
- font-size: 10px;
2017
- font-weight: 700;
2018
- text-transform: uppercase;
2019
- letter-spacing: 1.5px;
2020
- }
2021
- .aaravpos-tip-options {
2022
- display: flex;
2023
- gap: 4px;
2024
- margin-bottom: 8px;
2025
- }
2026
- .aaravpos-tip-btn {
2027
- padding: 6px;
2028
- border: 1px solid var(--btn-bg-hover);
2029
- border-radius: 4px;
2030
- background: #fff;
2031
- font-size: 12px;
2032
- text-align: center;
2033
- cursor: pointer;
2034
- transition: all 0.2s ease;
2035
- }
2036
- .aaravpos-tip-btn-flex {
2037
- flex: 1;
2038
- }
2039
- .aaravpos-tip-btn-fixed {
2040
- flex: none;
2041
- width: 64px;
2042
- }
2043
- .aaravpos-tip-btn-active {
2044
- background: var(--btn-bg);
2045
- border-color: var(--btn-bg);
2046
- color: #fff;
2047
- }
2048
- .aaravpos-date-time {
2049
- display: flex;
2050
- justify-content: space-between;
2051
- align-items: center;
2052
- gap: 12px;
2053
- font-size: 14px;
2054
- font-weight: 700;
2055
- margin-top: 10px;
2056
- }
2057
- .aaravpos-date-time-label {
2058
- color: #111827;
2059
- }
2060
- .aaravpos-date-time-value {
2061
- color: var(--btn-bg);
2062
- font-weight: 700;
2063
- }
2064
- .aaravpos-date-time-empty {
2065
- color: var(--text-muted);
2066
- font-weight: 500;
2067
- }
2068
- .aaravpos-sidebar-close-btn {
2069
- width: 28px;
2070
- height: 28px;
2071
- padding: 4px;
2072
- border: none;
2073
- border-radius: 6px;
2074
- background: transparent;
2075
- cursor: pointer;
2076
- font-size: 20px;
2077
- transition: all 0.2s ease;
2078
- position: absolute;
2079
- top: -4px;
2080
- right: 0;
2081
- display: flex;
2082
- align-items: center;
2083
- justify-content: center;
2084
- }
2085
- .aaravpos-sidebar-close-btn:hover {
2086
- background: rgba(0, 0, 0, 0.05);
2087
- }
2088
- .aaravpos-date-modal-overlay {
2089
- position: fixed;
2090
- inset: 0;
2091
- z-index: 1026;
2092
- display: flex;
2093
- align-items: center;
2094
- justify-content: center;
2095
- min-height: calc(100dvh - 56px);
2096
- background: rgba(14, 14, 14, 0.55);
2097
- backdrop-filter: blur(4px);
2098
- }
2099
- .aaravpos-date-modal {
2100
- width: 320px;
2101
- max-width: 95vw;
2102
- max-height: 90vh;
2103
- display: flex;
2104
- flex-direction: column;
2105
- background: var(--canvas-bg);
2106
- border-radius: 12px;
2107
- overflow: hidden;
2108
- box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
2109
- animation: aaravposPopIn 0.2s ease;
2110
- }
2111
- .aaravpos-date-modal-header {
2112
- position: sticky;
2113
- top: 0;
2114
- z-index: 10;
2115
- display: flex;
2116
- align-items: center;
2117
- justify-content: space-between;
2118
- padding: 10px 16px;
2119
- background: var(--canvas-bg);
2120
- border-bottom: 1px solid var(--border-color);
2121
- }
2122
- .aaravpos-date-modal-title {
2123
- font-size: 22px;
2124
- font-weight: 700;
2125
- letter-spacing: 1px;
2126
- text-transform: uppercase;
2127
- margin: 0px;
2128
- }
2129
- .aaravpos-date-close-btn {
2130
- width: 32px;
2131
- height: 32px;
2132
- display: flex;
2133
- align-items: center;
2134
- justify-content: center;
2135
- border: none;
2136
- border-radius: 999px;
2137
- background: var(--surface-bg);
2138
- color: var(--text-muted);
2139
- cursor: pointer;
2140
- transition: all 0.2s ease;
2141
- }
2142
- .aaravpos-date-close-btn:hover {
2143
- background: var(--red-color);
2144
- color: var(--btn-bg-hover);
2145
- }
2146
- .aaravpos-date-modal-body {
2147
- overflow-y: auto;
2148
- padding: 10px 15px 15px 15px;
2149
- }
2150
- .aaravpos-date-nav {
2151
- display: flex;
2152
- align-items: center;
2153
- justify-content: space-between;
2154
- margin-bottom: 16px;
2155
- }
2156
- .aaravpos-date-nav-btn {
2157
- border: none;
2158
- background: transparent;
2159
- font-size: 18px;
2160
- cursor: pointer;
2161
- transition: all 0.2s ease;
2162
- }
2163
- .aaravpos-date-nav-btn:hover {
2164
- color: var(--red-color);
2165
- }
2166
- .aaravpos-date-nav-btn:disabled {
2167
- opacity: 0.3;
2168
- cursor: not-allowed;
2169
- }
2170
- .aaravpos-date-month-label {
2171
- font-size: 14px;
2172
- font-weight: 600;
2173
- }
2174
- .aaravpos-calendar-grid {
2175
- display: grid;
2176
- grid-template-columns: repeat(7, 1fr);
2177
- gap: 6px;
2178
- }
2179
- .aaravpos-calendar-weekday {
2180
- padding: 4px 0;
2181
- text-align: center;
2182
- font-size: 10px;
2183
- font-weight: 600;
2184
- text-transform: uppercase;
2185
- color: var(--text-muted);
2186
- }
2187
- .aaravpos-calendar-day {
2188
- height: 34px;
2189
- width: 34px;
2190
- display: flex;
2191
- align-items: center;
2192
- justify-content: center;
2193
- border-radius: 999px;
2194
- font-size: 12px;
2195
- font-family: monospace;
2196
- transition: all 0.15s ease;
2197
- }
2198
- .aaravpos-calendar-day-active {
2199
- cursor: pointer;
2200
- }
2201
- .aaravpos-calendar-day-active:hover {
2202
- background: var(--btn-bg-hover);
2203
- color: var(--btn-text-hover);
2204
- }
2205
- .aaravpos-calendar-day-today {
2206
- outline: 1.5px solid var(--border-color);
2207
- outline-offset: 1px;
2208
- }
2209
- .aaravpos-calendar-day-selected {
2210
- background: var(--btn-bg);
2211
- color: #fff;
2212
- }
2213
- .aaravpos-calendar-day-disabled {
2214
- opacity: 0.4;
2215
- cursor: not-allowed;
2216
- }
2217
- .aaravpos-calendar-day {
2218
- position: relative;
2219
- }
2220
- .aaravpos-calendar-day-disabled {
2221
- background: rgba(0, 0, 0, 0.03);
2222
- cursor: not-allowed;
2223
- opacity: 0.6;
2224
- }
2225
- .aaravpos-calendar-day-slash {
2226
- position: absolute;
2227
- inset: 0;
2228
- display: flex;
2229
- align-items: center;
2230
- justify-content: center;
2231
- pointer-events: none;
2232
- }
2233
- .aaravpos-calendar-day-slash::after {
2234
- content: "";
2235
- width: 140%;
2236
- height: 1.5px;
2237
- background: var(--app-bg);
2238
- transform: rotate(-45deg);
2239
- }
2240
- .aaravpos-calendar-day-text {
2241
- position: relative;
2242
- z-index: 2;
2243
- }
2244
- .arravpos-date-card-disabled {
2245
- position: relative;
2246
- opacity: 0.6;
2247
- cursor: not-allowed;
2248
- overflow: hidden;
2249
- }
2250
- .arravpos-date-disabled-slash {
2251
- position: absolute;
2252
- top: 50%;
2253
- left: -20%;
2254
- width: 140%;
2255
- height: 2px;
2256
- background: #111;
2257
- transform: rotate(-45deg);
2258
- z-index: 1;
2259
- }
2260
- .arravpos-date-unavailable {
2261
- font-size: 8px;
2262
- font-weight: 700;
2263
- margin-top: 2px;
2264
- }
2265
- .aaravpos-professional-skeleton {
2266
- position: relative;
2267
- height: 82px;
2268
- overflow: hidden;
2269
- border-radius: 4px;
2270
- background: #e0e0e0;
2271
- }
2272
- .aaravpos-professional-skeleton::before {
2273
- content: "";
2274
- position: absolute;
2275
- top: 0;
2276
- left: -100%;
2277
- width: 100%;
2278
- height: 100%;
2279
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
2280
- animation: aaravposShimmer 1.2s infinite;
2281
- }
2282
- .aaravpos-spinner-wrapper {
2283
- display: flex;
2284
- align-items: center;
2285
- justify-content: center;
2286
- }
2287
- .aaravpos-spinner {
2288
- width: 40px;
2289
- height: 40px;
2290
- border: 4px solid var(--btn-bg-hover);
2291
- border-top-color: transparent;
2292
- border-radius: 50%;
2293
- animation: aaravposSpin 0.8s linear infinite;
2294
- }
2295
- .aaravpos-calendar-grid .cal-avail.cal-selected:after {
2296
- background: #fff9;
2297
- }
2298
- .aaravpos-calendar-grid .cal-avail:after {
2299
- content: "";
2300
- background: var(--color-brand-green);
2301
- border-radius: 50%;
2302
- width: 3px;
2303
- height: 3px;
2304
- position: absolute;
2305
- bottom: 2px;
2306
- left: 50%;
2307
- transform: translate(-50%);
2308
- }
2309
- .aaravpos-empty-services {
2310
- grid-column: 1/-1;
2311
- display: flex;
2312
- flex-direction: column;
2313
- align-items: center;
2314
- justify-content: center;
2315
- padding: 24px;
2316
- text-align: center;
2317
- border: 1px dashed rgba(0, 0, 0, 0.2);
2318
- border-radius: 8px;
2319
- height: 160px;
2320
- }
2321
- .aaravpos-empty-services-title {
2322
- margin-bottom: 8px;
2323
- font-size: 18px;
2324
- font-weight: 600;
2325
- color: #111827;
2326
- }
2327
- .aaravpos-empty-services-text {
2328
- max-width: 500px;
2329
- font-size: 14px;
2330
- line-height: 1.5;
2331
- color: rgba(0, 0, 0, 0.5);
2332
- }
2333
- .arravpos-details-section {
2334
- margin-top: 20px;
2335
- }
2336
- .arravpos-details-scroll {
2337
- overflow-y: auto;
2338
- padding-bottom: 30px;
2339
- scrollbar-width: none;
2340
- height: 565px;
2341
- }
2342
- .arravpos-details-scroll::-webkit-scrollbar {
2343
- display: none;
2344
- }
2345
- .arravpos-details-grid {
2346
- display: grid;
2347
- grid-template-columns: 1fr;
2348
- gap: 16px;
2349
- }
2350
- .arravpos-form-group {
2351
- display: flex;
2352
- flex-direction: column;
2353
- width: 100%;
2354
- }
2355
- .arravpos-form-label {
2356
- font-size: 12px;
2357
- font-weight: 600;
2358
- color: #4b5563;
2359
- margin-bottom: 6px;
2360
- display: flex;
2361
- align-items: center;
2362
- gap: 4px;
2363
- }
2364
- .arravpos-required {
2365
- color: #ef4444;
2366
- }
2367
- .arravpos-input-wrapper {
2368
- position: relative;
2369
- width: 100%;
2370
- }
2371
- .arravpos-custom-input {
2372
- border: 1px solid #d1d5db;
2373
- border-radius: 4px;
2374
- padding: 10px 12px;
2375
- font-size: 14px;
2376
- outline: none;
2377
- transition: all 0.3s ease;
2378
- background-color: #ffffff;
2379
- }
2380
- .arravpos-custom-input:focus, .arravpos-custom-input input:focus {
2381
- border-color: black;
2382
- }
2383
- .arravpos-error-text {
2384
- margin-top: 6px;
2385
- font-size: 13px;
2386
- color: #ef4444;
2387
- }
2388
- .arravpos-autofill-text {
2389
- margin-top: 6px;
2390
- font-size: 12px;
2391
- color: #6b7280;
2392
- display: flex;
2393
- align-items: center;
2394
- gap: 4px;
2395
- }
2396
- .arravpos-clear-text {
2397
- color: #dc2626;
2398
- cursor: pointer;
2399
- font-weight: 500;
2400
- }
2401
- .arravpos-loader-wrapper {
2402
- position: absolute;
2403
- right: 10px;
2404
- top: 50%;
2405
- transform: translateY(-50%);
2406
- z-index: 999;
2407
- }
2408
- .arravpos-loader {
2409
- width: 16px;
2410
- height: 16px;
2411
- border: 2px solid #d1d5db;
2412
- border-top-color: #000000;
2413
- border-radius: 50%;
2414
- animation: arravpos-spin 0.8s linear infinite;
2415
- }
2416
- .arravpos-booking-wrapper {
2417
- width: 100%;
2418
- max-width: 100%;
2419
- }
2420
- .arravpos-outlet-info {
2421
- display: flex;
2422
- align-items: center;
2423
- gap: 12px;
2424
- padding: 12px;
2425
- border-radius: 4px;
2426
- margin-bottom: 4px;
2427
- border: 1px solid #e5e7eb;
2428
- }
2429
- .arravpos-outlet-logo {
2430
- width: 40px;
2431
- height: 40px;
2432
- border-radius: 4px;
2433
- overflow: hidden;
2434
- flex-shrink: 0;
2435
- display: flex;
2436
- align-items: center;
2437
- justify-content: center;
2438
- }
2439
- .arravpos-outlet-logo-img {
2440
- width: 100%;
2441
- height: 100%;
2442
- object-fit: cover;
2443
- }
2444
- .arravpos-outlet-content {
2445
- flex: 1;
2446
- min-width: 0;
2447
- }
2448
- .arravpos-outlet-name {
2449
- font-size: 14px;
2450
- font-weight: 600;
2451
- color: #111827;
2452
- margin: 0;
2453
- line-height: 1.4;
2454
- }
2455
- .arravpos-outlet-address {
2456
- font-size: 12px;
2457
- color: rgba(0, 0, 0, 0.7);
2458
- margin-top: 2px;
2459
- line-height: 1.5;
2460
- word-break: break-word;
2461
- }
2462
- .arravpos-booking-scroll {
2463
- overflow-y: auto;
2464
- scrollbar-width: none;
2465
- height: 495px;
2466
- padding-bottom: 15px;
2467
- }
2468
- .arravpos-booking-scroll::-webkit-scrollbar {
2469
- display: none;
2470
- }
2471
- .arravpos-booking-grid {
2472
- display: flex;
2473
- gap: 28px;
2474
- justify-content: space-between;
2475
- }
2476
- .arravpos-booking-column {
2477
- width: 100%;
2478
- min-width: 0;
2479
- }
2480
- .arravpos-appointment-header {
2481
- display: flex;
2482
- align-items: center;
2483
- gap: 12px;
2484
- }
2485
- .arravpos-appointment-content {
2486
- flex: 1;
2487
- min-width: 0;
2488
- }
2489
- .arravpos-appointment-name {
2490
- font-size: 14px;
2491
- font-weight: 600;
2492
- color: #111827;
2493
- margin: 0;
2494
- }
2495
- .arravpos-appointment-services {
2496
- font-size: 12px;
2497
- color: #6b7280;
2498
- margin-top: 2px;
2499
- overflow: hidden;
2500
- text-overflow: ellipsis;
2501
- white-space: nowrap;
2502
- margin-bottom: 0px;
2503
- }
2504
- .arravpos-appointment-price {
2505
- font-family: monospace;
2506
- font-weight: 600;
2507
- font-size: 15px;
2508
- color: #111827;
2509
- white-space: nowrap;
2510
- align-items: center;
2511
- display: flex;
2512
- flex-direction: row;
2513
- }
2514
- .arravpos-appointment-date {
2515
- display: flex;
2516
- align-items: center;
2517
- gap: 8px;
2518
- margin-top: 12px;
2519
- padding-top: 12px;
2520
- border-top: 1px solid #e5e7eb;
2521
- }
2522
- .arravpos-appointment-date-text {
2523
- font-size: 14px;
2524
- font-weight: 600;
2525
- color: #111827;
2526
- }
2527
- .arravpos-success-wrapper {
2528
- overflow-y: auto;
2529
- scrollbar-width: none;
2530
- height: 700px;
2531
- }
2532
- .arravpos-success-wrapper::-webkit-scrollbar {
2533
- display: none;
2534
- }
2535
- .arravpos-success-motion {
2536
- display: flex;
2537
- flex-direction: column;
2538
- height: 668px;
2539
- align-items: center;
2540
- justify-content: center;
2541
- background: var(--canvas);
2542
- text-align: center;
2543
- padding: 16px;
2544
- }
2545
- .arravpos-success-icon {
2546
- width: 34px;
2547
- height: 34px;
2548
- background: var(--btn-bg);
2549
- color: var(--btn-text);
2550
- border-radius: 9999px;
2551
- flex-shrink: 0;
2552
- display: flex;
2553
- align-items: center;
2554
- justify-content: center;
2555
- font-size: 36px;
2556
- margin-bottom: 24px;
2557
- }
2558
- .arravpos-success-title {
2559
- font-family: "Bebas Neue", sans-serif;
2560
- font-size: 20px;
2561
- margin-bottom: 8px;
2562
- }
2563
- .arravpos-success-description {
2564
- font-size: 14px;
2565
- color: var(--muted);
2566
- margin-bottom: 10px;
2567
- line-height: 1.625;
2568
- margin-top: 0px;
2569
- }
2570
- .arravpos-success-content {
2571
- width: 100%;
2572
- max-width: 570px;
2573
- }
2574
- .arravpos-success-card {
2575
- background: #ffffff;
2576
- border-radius: 6px;
2577
- text-align: left;
2578
- margin-bottom: 10px;
2579
- padding: 10px;
2580
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
2581
- height: 400px;
2582
- overflow-x: scroll;
2583
- scrollbar-width: none;
2584
- -ms-overflow-style: none;
2585
- }
2586
- .arravpos-success-row {
2587
- display: flex;
2588
- justify-content: space-between;
2589
- padding-top: 8px;
2590
- padding-bottom: 8px;
2591
- border-bottom: 1px solid #f3f4f6;
2592
- }
2593
- .arravpos-success-row-first {
2594
- padding-top: 0;
2595
- }
2596
- .arravpos-total-row {
2597
- display: flex;
2598
- justify-content: space-between;
2599
- padding-top: 16px;
2600
- padding-bottom: 0;
2601
- }
2602
- .arravpos-label {
2603
- color: #4b5563;
2604
- font-size: 14px;
2605
- font-weight: 700;
2606
- }
2607
- .arravpos-services-label {
2608
- color: #6b7280;
2609
- font-size: 14px;
2610
- font-weight: 700;
2611
- }
2612
- .arravpos-value {
2613
- font-size: 14px;
2614
- font-weight: 500;
2615
- color: #1f2937;
2616
- }
2617
- .arravpos-price {
2618
- display: flex;
2619
- flex-direction: row;
2620
- align-items: center;
2621
- color: #1f2937;
2622
- font-weight: 600;
2623
- }
2624
- .arravpos-total-price {
2625
- display: flex;
2626
- flex-direction: row;
2627
- align-items: center;
2628
- color: var(--red);
2629
- font-weight: 600;
2630
- }
2631
- .arravpos-services-header {
2632
- align-items: center;
2633
- }
2634
- .arravpos-services-list {
2635
- padding-top: 8px;
2636
- padding-bottom: 8px;
2637
- border-bottom: 1px solid #f3f4f6;
2638
- color: #4b5563;
2639
- font-size: 14px;
2640
- font-weight: 700;
2641
- white-space: pre-wrap;
2642
- overflow-y: auto;
2643
- max-height: 23vh;
2644
- }
2645
- .arravpos-service-row {
2646
- display: flex;
2647
- justify-content: space-between;
2648
- font-size: 14px;
2649
- padding-top: 6px;
2650
- padding-bottom: 6px;
2651
- }
2652
- .arravpos-service-name {
2653
- color: #374151;
2654
- }
2655
- .arravpos-service-price {
2656
- color: #111827;
2657
- display: flex;
2658
- flex-direction: row;
2659
- align-items: center;
2660
- }
2661
- .arravpos-more-services {
2662
- text-align: center;
2663
- font-size: 12px;
2664
- color: #6b7280;
2665
- margin-top: 8px;
2666
- display: flex;
2667
- flex-direction: row;
2668
- align-items: center;
2669
- justify-content: center;
2670
- gap: 4px;
2671
- }
2672
- .arravpos-show-btn {
2673
- color: #2563eb;
2674
- font-size: 12px;
2675
- font-weight: 500;
2676
- cursor: pointer;
2677
- background: transparent;
2678
- border: none;
2679
- }
2680
- .arravpos-show-btn-inner {
2681
- display: flex;
2682
- flex-direction: row;
2683
- align-items: center;
2684
- gap: 4px;
2685
- }
2686
- .arravpos-book-btn {
2687
- background: var(--btn-bg);
2688
- color: var(--btn-text);
2689
- border: 1px solid var(--btn-bg);
2690
- padding: 8px 28px;
2691
- cursor: pointer;
2692
- font-size: 14px;
2693
- width: 100%;
2694
- display: flex;
2695
- flex-direction: row;
2696
- align-items: center;
2697
- justify-content: center;
2698
- gap: 8px;
2699
- text-transform: uppercase;
2700
- letter-spacing: 0.05em;
2701
- border-radius: 4px;
2702
- transition: all 0.3s ease;
2703
- }
2704
- .arravpos-book-btn:hover {
2705
- color: var(--btn-text-hover);
2706
- border-color: var(--btn-bg-hover);
2707
- background: var(--btn-bg-hover);
2708
- }
2709
- .arravpos-payment-overlay {
2710
- position: fixed;
2711
- inset: 0;
2712
- display: flex;
2713
- align-items: center;
2714
- justify-content: center;
2715
- background-color: rgba(0, 0, 0, 0.4);
2716
- z-index: 1025;
2717
- padding: 16px;
2718
- }
2719
- .arravpos-payment-form {
2720
- width: 100%;
2721
- margin: auto;
2722
- display: flex;
2723
- align-items: center;
2724
- justify-content: center;
2725
- }
2726
- .aaravpos-modal {
2727
- background: #fff;
2728
- border-radius: 16px;
2729
- width: 100%;
2730
- max-width: 100%;
2731
- padding: 24px;
2732
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
2733
- box-sizing: border-box;
2734
- }
2735
- .arravpos-payment-header {
2736
- display: flex;
2737
- justify-content: space-between;
2738
- margin-bottom: 20px;
2739
- }
2740
- .arravpos-payment-title {
2741
- font-size: 18px;
2742
- font-weight: 600;
2743
- color: #111827;
2744
- margin: 0px;
2745
- }
2746
- .arravpos-payment-amount {
2747
- display: flex;
2748
- flex-direction: row;
2749
- align-items: center;
2750
- font-weight: 600;
2751
- color: #111827;
2752
- }
2753
- .arravpos-payment-fields {
2754
- display: flex;
2755
- flex-direction: column;
2756
- gap: 16px;
2757
- }
2758
- .arravpos-payment-label {
2759
- font-size: 12px;
2760
- font-weight: 600;
2761
- color: #4b5563;
2762
- display: flex;
2763
- margin-bottom: 4px;
2764
- }
2765
- .arravpos-payment-required {
2766
- color: #ef4444;
2767
- }
2768
- .arravpos-payment-input {
2769
- width: 100%;
2770
- padding: 10px 12px;
2771
- border: 1px solid red;
2772
- border-radius: 2px;
2773
- font-size: 14px;
2774
- outline: none;
2775
- transition: border-color 0.2s ease;
2776
- }
2777
- .arravpos-payment-input:focus {
2778
- border-color: var(--red);
2779
- }
2780
- .arravpos-payment-error {
2781
- color: #ef4444;
2782
- font-size: 14px;
2783
- margin-top: 4px;
2784
- }
2785
- .arravpos-payment-grid {
2786
- display: grid;
2787
- grid-template-columns: repeat(2, minmax(0, 1fr));
2788
- gap: 16px;
2789
- }
2790
- .arravpos-payment-btn-grid {
2791
- display: grid;
2792
- grid-template-columns: repeat(2, minmax(0, 1fr));
2793
- gap: 16px;
2794
- margin-top: 20px;
2795
- }
2796
- .arravpos-payment-cancel-btn {
2797
- padding: 10px 16px;
2798
- cursor: pointer;
2799
- border-radius: 6px;
2800
- border: none;
2801
- background: linear-gradient(to right, #ef4444, #dc2626);
2802
- color: #ffffff;
2803
- }
2804
- .arravpos-payment-submit-btn {
2805
- padding: 8px 16px;
2806
- border-radius: 6px;
2807
- cursor: pointer;
2808
- border: none;
2809
- background: #16a34a;
2810
- color: #ffffff;
2811
- transition: opacity 0.2s ease;
2812
- }
2813
- .arravpos-payment-submit-btn:disabled {
2814
- opacity: 0.5;
2815
- cursor: not-allowed;
2816
- }
2817
- .arravpos-consent-overlay {
2818
- position: fixed;
2819
- inset: 0;
2820
- z-index: 1025;
2821
- display: flex;
2822
- align-items: center;
2823
- justify-content: center;
2824
- background-color: rgba(0, 0, 0, 0.4);
2825
- padding: 16px;
2826
- }
2827
- .arravpos-consent-backdrop {
2828
- position: fixed;
2829
- inset: 0;
2830
- background-color: rgba(0, 0, 0, 0.6);
2831
- }
2832
- .arravpos-consent-modal {
2833
- position: relative;
2834
- z-index: 10;
2835
- width: 90%;
2836
- max-height: 95vh;
2837
- overflow-y: auto;
2838
- background-color: #ffffff;
2839
- border-radius: 12px;
2840
- padding: 16px;
2841
- }
2842
- .arravpos-consent-header {
2843
- display: flex;
2844
- justify-content: space-between;
2845
- margin-bottom: 10px;
2846
- }
2847
- .arravpos-consent-title {
2848
- font-size: 16px;
2849
- font-weight: 600;
2850
- color: #111827;
2851
- margin: 0px;
2852
- }
2853
- .arravpos-consent-close-btn {
2854
- color: #9ca3af;
2855
- cursor: pointer;
2856
- border: none;
2857
- background: transparent;
2858
- transition: color 0.2s ease;
2859
- }
2860
- .arravpos-consent-close-btn:hover {
2861
- color: #4b5563;
2862
- }
2863
- .arravpos-consent-content-wrapper {
2864
- max-height: 42vh;
2865
- }
2866
- .arravpos-consent-content-box {
2867
- border: 1px solid #e5e7eb;
2868
- border-radius: 6px;
2869
- padding: 16px;
2870
- background-color: #f9fafb;
2871
- }
2872
- .arravpos-consent-content {
2873
- color: #374151;
2874
- white-space: pre-wrap;
2875
- overflow-y: auto;
2876
- max-height: 30vh;
2877
- }
2878
- .arravpos-consent-checkbox-label {
2879
- display: flex;
2880
- gap: 8px;
2881
- align-items: center;
2882
- margin-top: 12px;
2883
- border-color: #e5e7eb;
2884
- }
2885
- .arravpos-consent-checkbox {
2886
- width: 18px;
2887
- height: 18px;
2888
- color: #ef4444;
2889
- background-color: #f3f4f6;
2890
- border: 1px solid #d1d5db;
2891
- border-radius: 4px;
2892
- }
2893
- .arravpos-consent-checkbox-text {
2894
- font-size: 14px;
2895
- font-weight: 500;
2896
- color: #374151;
2897
- }
2898
- .arravpos-consent-typed-wrapper {
2899
- margin-top: 16px;
2900
- }
2901
- .arravpos-consent-input-label {
2902
- display: block;
2903
- margin-bottom: 8px;
2904
- font-size: 14px;
2905
- font-weight: 500;
2906
- color: #374151;
2907
- }
2908
- .arravpos-consent-required {
2909
- color: #ef4444;
2910
- }
2911
- .arravpos-consent-input {
2912
- width: 100%;
2913
- padding: 8px 12px;
2914
- border-radius: 6px;
2915
- outline: none;
2916
- }
2917
- .arravpos-consent-input-normal {
2918
- border: 1px solid #d1d5db;
2919
- }
2920
- .arravpos-consent-input-error {
2921
- border: 1px solid #ef4444;
2922
- }
2923
- .arravpos-consent-helper-text {
2924
- margin-top: 4px;
2925
- font-size: 12px;
2926
- color: #6b7280;
2927
- }
2928
- .arravpos-consent-error {
2929
- font-size: 14px;
2930
- color: #ef4444;
2931
- }
2932
- .arravpos-consent-signature-wrapper {
2933
- margin-top: 16px;
2934
- }
2935
- .arravpos-consent-signature-canvas {
2936
- width: 100%;
2937
- height: 136px;
2938
- overflow: hidden;
2939
- border: 1px solid #d1d5db;
2940
- border-radius: 6px;
2941
- background-color: #ffffff;
2942
- }
2943
- .arravpos-consent-error-signature {
2944
- margin-top: 4px;
2945
- margin-bottom: 4px;
2946
- }
2947
- .arravpos-consent-signature-actions {
2948
- display: flex;
2949
- justify-content: space-between;
2950
- margin-top: 8px;
2951
- }
2952
- .arravpos-consent-clear-btn {
2953
- display: flex;
2954
- flex-direction: row;
2955
- align-items: center;
2956
- gap: 4px;
2957
- padding: 4px 8px;
2958
- font-size: 14px;
2959
- color: #4b5563;
2960
- cursor: pointer;
2961
- border: 1px solid #d1d5db;
2962
- border-radius: 6px;
2963
- background: transparent;
2964
- }
2965
- .arravpos-consent-clear-btn:hover {
2966
- color: #1f2937;
2967
- }
2968
- .arravpos-consent-email-label {
2969
- display: flex;
2970
- gap: 8px;
2971
- align-items: center;
2972
- cursor: pointer;
2973
- font-size: 14px;
2974
- }
2975
- .arravpos-consent-email-checkbox {
2976
- width: 16px;
2977
- height: 16px;
2978
- accent-color: var(--btn-bg);
2979
- background-color: #f3f4f6;
2980
- border: 1px solid #d1d5db;
2981
- border-radius: 4px;
2982
- }
2983
- .arravpos-consent-email-text {
2984
- font-size: 14px;
2985
- color: #374151;
2986
- }
2987
- .arravpos-consent-footer {
2988
- display: flex;
2989
- justify-content: flex-end;
2990
- gap: 12px;
2991
- margin-top: 20px;
2992
- }
2993
- .arravpos-consent-cancel-btn {
2994
- padding: 8px 16px;
2995
- border: 1px solid #d1d5db;
2996
- border-radius: 6px;
2997
- background: transparent;
2998
- color: #374151;
2999
- cursor: pointer;
3000
- transition: color 0.2s ease;
3001
- }
3002
- .arravpos-consent-cancel-btn:hover {
3003
- color: #111827;
3004
- }
3005
- .arravpos-consent-submit-btn {
3006
- display: flex;
3007
- align-items: center;
3008
- gap: 8px;
3009
- padding: 8px 16px;
3010
- border: none;
3011
- border-radius: 6px;
3012
- transition: all 0.2s ease;
3013
- }
3014
- .arravpos-consent-submit-disabled {
3015
- background-color: #d1d5db;
3016
- color: #4b5563;
3017
- cursor: not-allowed;
3018
- }
3019
- .arravpos-consent-submit-active {
3020
- background-color: var(--btn-bg);
3021
- color: #ffffff;
3022
- cursor: pointer;
3023
- }
3024
- .arravpos-consent-submit-active:hover {
3025
- background-color: var(--btn-bg-hover);
3026
- }
3027
- .arravpos-date-wrapper {
3028
- margin-top: 8px;
3029
- margin-bottom: 14px;
3030
- display: flex;
3031
- flex-direction: row;
3032
- flex-wrap: wrap;
3033
- }
3034
- .arravpos-date-strip {
3035
- display: flex;
3036
- align-items: stretch;
3037
- gap: 6px;
3038
- overflow-x: auto;
3039
- overflow-y: hidden;
3040
- scrollbar-width: none;
3041
- -webkit-overflow-scrolling: touch;
3042
- scroll-behavior: smooth;
3043
- }
3044
- .arravpos-date-strip::-webkit-scrollbar {
3045
- display: none;
3046
- }
3047
- .arravpos-date-card {
3048
- flex-shrink: 0;
3049
- display: flex;
3050
- flex-direction: column;
3051
- align-items: center;
3052
- min-width: 26px;
3053
- min-height: 50px;
3054
- padding: 6px 8px;
3055
- border-radius: 2px;
3056
- cursor: pointer;
3057
- transition: all 150ms ease;
3058
- user-select: none;
3059
- border: 1px solid transparent;
3060
- }
3061
- .arravpos-date-card-active {
3062
- background-color: var(--btn-bg);
3063
- color: var(--btn-text);
3064
- border-color: var(--btn-bg);
3065
- }
3066
- .arravpos-date-card-default:hover {
3067
- color: var(--btn-text-hover);
3068
- border-color: var(--btn-bg-hover);
3069
- background-color: var(--btn-bg-hover);
3070
- }
3071
- .arravpos-date-week {
3072
- font-size: 10px;
3073
- text-transform: uppercase;
3074
- margin-bottom: 4px;
3075
- line-height: 1;
3076
- font-weight: 500;
3077
- }
3078
- .arravpos-date-day {
3079
- font-family: monospace;
3080
- font-size: 18px;
3081
- line-height: 1;
3082
- font-weight: 500;
3083
- }
3084
- .arravpos-date-today {
3085
- margin-top: 6px;
3086
- font-size: 8px;
3087
- color: var(--red);
3088
- font-weight: 700;
3089
- line-height: 1;
3090
- }
3091
- .arravpos-calendar-btn {
3092
- margin-left: 16px;
3093
- padding: 8px;
3094
- font-size: 14px;
3095
- font-weight: 600;
3096
- display: flex;
3097
- flex-direction: column;
3098
- align-items: center;
3099
- justify-content: center;
3100
- gap: 6px;
3101
- border-radius: 2px;
3102
- cursor: pointer;
3103
- transition: all 150ms ease;
3104
- min-width: 50px;
3105
- user-select: none;
3106
- background-color: var(--btn-bg);
3107
- color: #ffffff;
3108
- border: none;
3109
- }
3110
- .arravpos-selected-professional {
3111
- display: flex;
3112
- align-items: center;
3113
- gap: 12px;
3114
- margin-bottom: 10px;
3115
- padding: 12px;
3116
- background-color: var(--surface);
3117
- border: 1px solid rgb(0 0 0 / 10%);
3118
- border-radius: 2px;
3119
- flex-wrap: wrap;
3120
- }
3121
- .arravpos-selected-professional-image {
3122
- width: 40px;
3123
- height: 40px;
3124
- border-radius: 9999px;
3125
- object-fit: cover;
3126
- flex-shrink: 0;
3127
- }
3128
- .arravpos-selected-professional-avatar {
3129
- width: 40px;
3130
- height: 40px;
3131
- border-radius: 9999px;
3132
- background-color: #111111;
3133
- color: #ffffff;
3134
- display: flex;
3135
- align-items: center;
3136
- justify-content: center;
3137
- flex-shrink: 0;
3138
- }
3139
- .arravpos-selected-professional-content {
3140
- flex: 1;
3141
- min-width: 0;
3142
- }
3143
- .arravpos-selected-professional-name {
3144
- font-size: 14px;
3145
- font-weight: 600;
3146
- margin: 0px 0px 4px;
3147
- }
3148
- .arravpos-selected-professional-services {
3149
- font-size: 12px;
3150
- color: var(--muted);
3151
- overflow: hidden;
3152
- text-overflow: ellipsis;
3153
- white-space: nowrap;
3154
- margin: 0px;
3155
- }
3156
- .arravpos-scroll-area {
3157
- overflow-y: auto;
3158
- padding-bottom: 30px;
3159
- scrollbar-width: none;
3160
- max-height: 440px;
3161
- position: relative;
3162
- }
3163
- .arravpos-scroll-area::-webkit-scrollbar {
3164
- display: none;
3165
- }
3166
- .arravpos-loader-wrapper {
3167
- display: flex;
3168
- align-items: center;
3169
- justify-content: center;
3170
- width: 100%;
3171
- height: 100%;
3172
- }
3173
- .arravpos-loader {
3174
- width: 32px;
3175
- height: 32px;
3176
- border-radius: 9999px;
3177
- border: 3px solid var(--btn-bg);
3178
- border-top-color: transparent;
3179
- animation: arravpos-spin 1s linear infinite;
3180
- }
3181
- .arravpos-slot-icon {
3182
- color: #fb923c;
3183
- }
3184
- .arravpos-slot-section {
3185
- margin-bottom: 16px;
3186
- border: 1px solid rgb(0 0 0 / 10%);
3187
- border-radius: 2px;
3188
- overflow: hidden;
3189
- }
3190
- .arravpos-slot-section-header {
3191
- display: flex;
3192
- align-items: center;
3193
- justify-content: space-between;
3194
- padding: 8px 10px;
3195
- cursor: pointer;
3196
- background-color: var(--surface);
3197
- transition: background-color 0.2s ease;
3198
- }
3199
- .arravpos-slot-section-header:hover {
3200
- background-color: rgba(var(--btn-bg), 0.08);
3201
- }
3202
- .arravpos-slot-section-title {
3203
- display: flex;
3204
- align-items: center;
3205
- gap: 8px;
3206
- font-size: 12px;
3207
- font-weight: 700;
3208
- text-transform: uppercase;
3209
- letter-spacing: 1.2px;
3210
- color: rgba(0, 0, 0, 0.8);
3211
- }
3212
- .arravpos-slot-section-arrow {
3213
- transition: transform 0.2s ease;
3214
- }
3215
- .arravpos-slot-section-arrow-open {
3216
- transform: rotate(180deg);
3217
- }
3218
- .arravpos-slot-section-content {
3219
- padding: 12px;
3220
- border-top: 1px solid rgb(0 0 0 / 10%);
3221
- background-color: #ffffff;
3222
- }
3223
- .arravpos-slot-grid {
3224
- display: grid;
3225
- grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
3226
- gap: 8px;
3227
- }
3228
- .arravpos-slot-card {
3229
- display: flex;
3230
- flex-direction: column;
3231
- align-items: center;
3232
- justify-content: center;
3233
- padding: 12px;
3234
- gap: 4px;
3235
- border: 1px solid rgb(0 0 0 / 10%);
3236
- border-radius: 2px;
3237
- transition: all 0.2s ease;
3238
- }
3239
- .arravpos-slot-card-default {
3240
- background-color: #ffffff;
3241
- cursor: pointer;
3242
- }
3243
- .arravpos-slot-card-default:hover {
3244
- color: var(--btn-bg);
3245
- border-color: var(--btn-bg);
3246
- }
3247
- .arravpos-slot-card-selected {
3248
- background-color: #fff8f8;
3249
- color: var(--btn-bg);
3250
- border-color: rgb(0 0 0 / 10%);
3251
- cursor: pointer;
3252
- }
3253
- .arravpos-slot-card-disabled {
3254
- background-color: #f3f4f6;
3255
- color: #9ca3af;
3256
- cursor: not-allowed;
3257
- }
3258
- .arravpos-slot-time {
3259
- font-family: monospace;
3260
- font-size: 14px;
3261
- }
3262
- .arravpos-slot-status {
3263
- font-size: 10px;
3264
- }
3265
- .aaravpos-staff-wrapper {
3266
- overflow-y: auto;
3267
- padding-bottom: 40px;
3268
- scrollbar-width: none;
3269
- -ms-overflow-style: none;
3270
- height: 540px;
3271
- }
3272
- .aaravpos-staff-wrapper::-webkit-scrollbar {
3273
- display: none;
3274
- }
3275
- .arravpos-profile-image {
3276
- width: 40px;
3277
- height: 40px;
3278
- border-radius: 9999px;
3279
- object-fit: cover;
3280
- flex-shrink: 0;
3281
- }
3282
- .arravpos-profile-avatar {
3283
- width: 40px;
3284
- height: 40px;
3285
- border-radius: 9999px;
3286
- background-color: #000000;
3287
- color: #ffffff;
3288
- display: flex;
3289
- align-items: center;
3290
- justify-content: center;
3291
- flex-shrink: 0;
3292
- }
3293
- .arravpos-card-box {
3294
- background-color: #ffffff;
3295
- border: 1px solid var(--btn-bg);
3296
- border-radius: 2px;
3297
- padding: 16px;
3298
- margin-bottom: 8px;
3299
- font-size: 14px;
3300
- }
3301
- .arravpos-section-label {
3302
- margin-top: 20px;
3303
- margin-bottom: 8px;
3304
- font-size: 10px;
3305
- font-weight: 700;
3306
- text-transform: uppercase;
3307
- letter-spacing: 1.5px;
3308
- color: rgba(0, 0, 0, 0.7);
3309
- }
3310
- .arravpos-select-card {
3311
- display: flex;
3312
- flex-direction: row;
3313
- align-items: center;
3314
- gap: 12px;
3315
- padding: 12px;
3316
- border-radius: 2px;
3317
- cursor: pointer;
3318
- margin-bottom: 8px;
3319
- border: 1px solid;
3320
- }
3321
- .arravpos-select-card-default {
3322
- border-color: var(--border);
3323
- background-color: transparent;
3324
- }
3325
- .arravpos-select-card-active {
3326
- border-color: var(--red);
3327
- background-color: rgba(255, 0, 0, 0.05);
3328
- }
3329
- .arravpos-select-check {
3330
- margin-left: auto;
3331
- display: flex;
3332
- align-items: center;
3333
- justify-content: center;
3334
- flex-shrink: 0;
3335
- }
3336
- .arravpos-date-nav-btn {
3337
- flex-shrink: 0;
3338
- width: 34px;
3339
- background-color: rgb(242, 240, 236);
3340
- border: 1px solid rgb(222, 218, 212);
3341
- padding: 8px;
3342
- border-radius: 2px;
3343
- cursor: pointer;
3344
- font-size: 14px;
3345
- color: var(--muted);
3346
- display: flex;
3347
- align-items: center;
3348
- justify-content: center;
3349
- align-self: stretch;
3350
- transition: all 150ms ease;
3351
- }
3352
- .arravpos-date-nav-btn:hover {
3353
- border-color: var(--red);
3354
- color: var(--red);
3355
- background-color: rgba(215, 38, 61, 0.12);
3356
- }
3357
- .aaravpos-loading-container {
3358
- display: flex;
3359
- align-items: center;
3360
- justify-content: center;
3361
- height: 700px;
3362
- }
3363
- .aaravpos-loading-text {
3364
- font-size: 14px;
3365
- color: #222;
3366
- }
3367
- .aaravpos-error-container {
3368
- display: flex;
3369
- flex-direction: column;
3370
- align-items: center;
3371
- justify-content: center;
3372
- height: 700px;
3373
- padding: 20px;
3374
- text-align: center;
3375
- }
3376
- .aaravpos-error-text {
3377
- color: #dc2626;
3378
- margin-bottom: 16px;
3379
- font-size: 14px;
3380
- font-weight: 500;
3381
- }
3382
- .aaravpos-book-btn {
3383
- display: flex;
3384
- align-items: center;
3385
- gap: 8px;
3386
- padding: 12px 28px;
3387
- background: var(--btn-bg);
3388
- color: var(--btn-text);
3389
- border: 1px solid var(--btn-bg);
3390
- border-radius: 4px;
3391
- cursor: pointer;
3392
- text-transform: uppercase;
3393
- letter-spacing: 0.5px;
3394
- font-size: 16px;
3395
- transition: all 0.2s ease;
3396
- }
3397
- .aaravpos-book-btn:hover {
3398
- background: var(--btn-bg-hover);
3399
- border-color: var(--btn-bg-hover);
3400
- color: var(--btn-text-hover);
3401
- }
3402
- .aaravpos-form-control {
3403
- display: flex;
3404
- flex-direction: column;
3405
- }
3406
- .aaravpos-loader-wrapper {
3407
- display: flex;
3408
- align-items: center;
3409
- justify-content: center;
3410
- height: 610px;
3411
- }
3412
- .aaravpos-loader {
3413
- width: 24px;
3414
- height: 24px;
3415
- border: 4px solid #e5e5e5;
3416
- border-top-color: var(--btn-bg);
3417
- border-radius: 50%;
3418
- animation: aaravpos-spin 0.8s linear infinite;
3419
- }
3420
- @media (min-width: 640px) {
3421
- .custom-container {
3422
- padding-left: 32px;
3423
- padding-right: 32px;
3424
- }
3425
- .aaravpos-title {
3426
- font-size: 28px;
3427
- }
3428
- .aaravpos-outlet-grid {
3429
- grid-template-columns: repeat(2, 1fr);
3430
- }
3431
- .aaravpos-modal {
3432
- max-width: 32rem;
3433
- }
3434
- }
3435
- @media (max-width: 768px) {
3436
- .arravpos-select-card {
3437
- gap: 10px;
3438
- padding: 10px;
3439
- }
3440
- .aaravpos-common-btn {
3441
- padding: 14px 8px;
3442
- font-size: 12px;
3443
- }
3444
- .aaravpos-date-modal {
3445
- height: fit-content;
3446
- border-radius: 12px;
3447
- }
3448
- .aaravpos-date-modal-title {
3449
- font-size: 18px;
3450
- }
3451
- .aaravpos-calendar-grid {
3452
- gap: 8px;
3453
- }
3454
- .arravpos-date-nav-btn svg {
3455
- width: 18px;
3456
- height: 18px;
3457
- }
3458
- .arravpos-date-strip {
3459
- gap: 5px;
3460
- }
3461
- .arravpos-date-week {
3462
- font-size: 9px;
3463
- }
3464
- .arravpos-date-day {
3465
- font-size: 20px;
3466
- }
3467
- .arravpos-date-today {
3468
- font-size: 7px;
3469
- }
3470
- .arravpos-select-check svg {
3471
- width: 18px;
3472
- height: 18px;
3473
- }
3474
- .arravpos-card-box {
3475
- padding: 14px;
3476
- font-size: 13px;
3477
- }
3478
- .arravpos-calendar-btn {
3479
- font-size: 12px;
3480
- }
3481
- .arravpos-outlet-info {
3482
- padding: 10px;
3483
- }
3484
- .arravpos-outlet-logo {
3485
- width: 36px;
3486
- height: 36px;
3487
- }
3488
- .arravpos-appointment-header {
3489
- align-items: flex-start;
3490
- }
3491
- .arravpos-appointment-price {
3492
- font-size: 14px;
3493
- }
3494
- .arravpos-appointment-services {
3495
- white-space: normal;
3496
- display: -webkit-box;
3497
- -webkit-line-clamp: 2;
3498
- line-clamp: 2;
3499
- -webkit-box-orient: vertical;
3500
- }
3501
- .aaravpos-page-title {
3502
- font-size: 16px;
3503
- }
3504
- .aaravpos-topbar {
3505
- gap: 10px;
3506
- }
3507
- .aaravpos-btn-content {
3508
- gap: 4px;
3509
- }
3510
- .aaravpos-margin-top-20 {
3511
- margin-top: 14px;
3512
- }
3513
- .aaravpos-mobile-step-label {
3514
- font-size: 18px;
3515
- }
3516
- .aaravpos-outlet-card-title {
3517
- font-size: 16px;
3518
- }
3519
- .aaravpos-title {
3520
- font-size: 18px;
3521
- }
3522
- .aaravpos-outlet-grid {
3523
- gap: 10px;
3524
- grid-template-columns: repeat(2, 1fr);
3525
- }
3526
- }
3527
- @media (min-width: 768px) {
3528
- .arravpos-section-label {
3529
- margin-top: 18px;
3530
- font-size: 9px;
3531
- letter-spacing: 1.3px;
3532
- }
3533
- .arravpos-profile-avatar {
3534
- width: 36px;
3535
- height: 36px;
3536
- font-size: 14px;
3537
- }
3538
- .arravpos-profile-image {
3539
- width: 36px;
3540
- height: 36px;
3541
- }
3542
- .aaravpos-desktop-stepper {
3543
- display: flex;
3544
- align-items: center;
3545
- gap: 16px;
3546
- width: 100%;
3547
- }
3548
- .aaravpos-services-wrapper.standalone {
3549
- height: calc(100dvh - 300px);
3550
- }
3551
- .aaravpos-services-wrapper.standalone {
3552
- height: calc(100dvh - 300px);
3553
- }
3554
- .aaravpos-mobile-button {
3555
- display: none;
3556
- }
3557
- .aaravpos-sidebar-mobile-content {
3558
- padding-left: 24px;
3559
- padding-right: 24px;
3560
- }
3561
- .aaravpos-order-list {
3562
- height: calc(100dvh - 240px);
3563
- }
3564
- .aaravpos-pro-order-list {
3565
- height: calc(100dvh - 380px);
3566
- }
3567
- .aaravpos-pro-order-list-pro {
3568
- height: calc(100dvh - 295px);
3569
- }
3570
- .arravpos-details-grid {
3571
- grid-template-columns: repeat(2, 1fr);
3572
- gap: 20px;
3573
- }
3574
- .aaravpos-modal {
3575
- max-width: 36rem;
3576
- }
3577
- }
3578
- @media (max-width:543px) {
3579
- .aaravpos-services-grid {
3580
- grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
3581
- }
3582
- .aaravpos-service-actions {
3583
- width: 100%;
3584
- overflow: hidden;
3585
- }
3586
- .aaravpos-service-action-btn, .aaravpos-service-action-btn.plus {
3587
- flex-shrink: 0;
3588
- }
3589
- .aaravpos-service-qty {
3590
- flex: 1;
3591
- }
3592
- .arravpos-date-strip {
3593
- display: flex;
3594
- align-items: center;
3595
- justify-content: space-between;
3596
- gap: 10px;
3597
- }
3598
- .arravpos-date-wrapper {
3599
- justify-content: space-between;
3600
- flex: 1;
3601
- }
3602
- }
3603
- @media (max-width: 480px) {
3604
- .arravpos-date-nav-btn svg {
3605
- width: 16px;
3606
- height: 16px;
3607
- }
3608
- .arravpos-date-strip {
3609
- gap: 4px;
3610
- }
3611
- .arravpos-date-card {
3612
- min-height: 38px;
3613
- min-width: 20px;
3614
- }
3615
- .arravpos-calendar-btn {
3616
- margin-left: 0px;
3617
- padding: 6px;
3618
- }
3619
- .arravpos-date-week {
3620
- font-size: 8px;
3621
- margin-bottom: 3px;
3622
- }
3623
- .arravpos-date-day {
3624
- font-size: 18px;
3625
- }
3626
- .arravpos-date-today {
3627
- margin-top: 4px;
3628
- font-size: 6px;
3629
- }
3630
- .arravpos-select-check svg {
3631
- width: 16px;
3632
- height: 16px;
3633
- }
3634
- .arravpos-select-card {
3635
- gap: 8px;
3636
- padding: 8px;
3637
- }
3638
- .arravpos-section-label {
3639
- margin-top: 16px;
3640
- font-size: 8px;
3641
- letter-spacing: 1.1px;
3642
- }
3643
- .arravpos-card-box {
3644
- padding: 12px;
3645
- font-size: 12px;
3646
- }
3647
- .arravpos-profile-image {
3648
- width: 32px;
3649
- height: 32px;
3650
- }
3651
- .arravpos-profile-avatar {
3652
- width: 32px;
3653
- height: 32px;
3654
- font-size: 12px;
3655
- }
3656
- .arravpos-outlet-name {
3657
- font-size: 13px;
3658
- }
3659
- .arravpos-outlet-address {
3660
- font-size: 11px;
3661
- }
3662
- .arravpos-appointment-name {
3663
- font-size: 13px;
3664
- }
3665
- .arravpos-appointment-date-text {
3666
- font-size: 13px;
3667
- }
3668
- .aaravpos-date-modal {
3669
- width: 290px;
3670
- }
3671
- .aaravpos-calendar-day {
3672
- height: 24px;
3673
- width: 24px;
3674
- }
3675
- .aaravpos-service-title {
3676
- font-size: 12px;
3677
- }
3678
- .aaravpos-service-description {
3679
- font-size: 10px;
3680
- }
3681
- }
3682
- @media (max-width: 418px) {
3683
- .arravpos-date-nav-btn {
3684
- width: 26px;
3685
- }
3686
- .arravpos-date-card {
3687
- min-width: 22px;
3688
- padding: 6px 4px;
3689
- }
3690
- }
3691
- @media (min-width: 991px) {
3692
- .aaravpos-sidebar {
3693
- display: block;
3694
- }
3695
- .aaravpos-layout-wrapper {
3696
- grid-template-columns: minmax(0, 1fr) 360px;
3697
- }
3698
- .aaravpos-sidebar-mobile {
3699
- display: none;
3700
- }
3701
- .aaravpos-form-btn {
3702
- display: none;
3703
- }
3704
- }
3705
- @media (max-width: 991px) {
3706
- .aaravpos-sidebar {
3707
- display: none;
3708
- }
3709
- .aaravpos-btn {
3710
- display: block;
3711
- }
3712
- }
3713
- @media (min-width: 1024px) {
3714
- .arravpos-date-strip {
3715
- gap: 6px;
3716
- }
3717
- .custom-container {
3718
- padding-left: 64px;
3719
- padding-right: 64px;
3720
- }
3721
- .arravpos-consent-modal {
3722
- width: 60%;
3723
- }
3724
- .arravpos-scroll-area {
3725
- padding-bottom: 16px;
3726
- }
3727
- .arravpos-consent-title {
3728
- font-size: 20px;
3729
- }
3730
- .aaravpos-header {
3731
- flex-direction: row;
3732
- align-items: center;
3733
- }
3734
- .aaravpos-search-wrapper {
3735
- max-width: 240px;
3736
- }
3737
- .aaravpos-outlet-grid {
3738
- grid-template-columns: repeat(3, 1fr);
3739
- }
3740
- .aaravpos-services-title {
3741
- font-size: 36px;
3742
- }
3743
- .aaravpos-services-topbar {
3744
- flex-direction: row;
3745
- align-items: flex-end;
3746
- gap: 32px;
3747
- }
3748
- .aaravpos-topbar {
3749
- flex-direction: row;
3750
- align-items: flex-end;
3751
- gap: 32px;
3752
- }
3753
- .arravpos-details-scroll {
3754
- padding-bottom: 16px;
3755
- }
3756
- }
3757
- @media (max-width: 1024px) {
3758
- .aaravpos-navbar-form {
3759
- flex-direction: column;
3760
- margin-bottom: 10px;
3761
- }
3762
- .aaravpos-barber-sidebar {
3763
- display: none;
3764
- }
3765
- .arravpos-booking-grid {
3766
- flex-direction: column;
3767
- gap: 20px;
3768
- }
3769
- }
3770
- @media (min-width: 1280px) {
3771
- .aaravpos-title {
3772
- font-size: 32px;
3773
- }
3774
- .aaravpos-outlet-grid {
3775
- grid-template-columns: repeat(4, 1fr);
3776
- }
3777
- }
3778
- @media (min-width: 1536px) {
3779
- .aaravpos-outlet-grid {
3780
- grid-template-columns: repeat(5, 1fr);
3781
- }
3782
- }
3783
- @keyframes aaravpos-shimmer {
3784
- 0% {
3785
- left: -100%;
3786
- }
3787
- 100% {
3788
- left: 100%;
3789
- }
3790
- }
3791
- @keyframes fadeUp {
3792
- from {
3793
- opacity: 0;
3794
- transform: translateY(8px);
3795
- }
3796
- to {
3797
- opacity: 1;
3798
- transform: translateY(0);
3799
- }
3800
- }
3801
- @keyframes slotIn {
3802
- from {
3803
- opacity: 0;
3804
- transform: translateY(6px);
3805
- }
3806
- to {
3807
- opacity: 1;
3808
- transform: translateY(0);
3809
- }
3810
- }
3811
- @keyframes popIn {
3812
- from {
3813
- opacity: 0;
3814
- transform: scale(0.95) translateY(10px);
3815
- }
3816
- to {
3817
- opacity: 1;
3818
- transform: scale(1) translateY(0);
3819
- }
3820
- }
3821
- @keyframes pulseBrand {
3822
- 0%, 100% {
3823
- box-shadow: 0 0 0 16px color-mix(in srgb, var(--app-bg) 12%, transparent);
3824
- }
3825
- 50% {
3826
- box-shadow: 0 0 0 24px color-mix(in srgb, var(--app-bg) 6%, transparent);
3827
- }
3828
- }
3829
- @keyframes aaravposFadeIn {
3830
- from {
3831
- opacity: 0;
3832
- transform: translateY(6px);
3833
- }
3834
- to {
3835
- opacity: 1;
3836
- transform: translateY(0);
3837
- }
3838
- }
3839
- @keyframes aaravposFadeIn {
3840
- from {
3841
- opacity: 0;
3842
- transform: translateY(12px);
3843
- }
3844
- to {
3845
- opacity: 1;
3846
- transform: translateY(0);
3847
- }
3848
- }
3849
- @keyframes aaravposPopIn {
3850
- from {
3851
- opacity: 0;
3852
- transform: scale(0.96);
3853
- }
3854
- to {
3855
- opacity: 1;
3856
- transform: scale(1);
3857
- }
3858
- }
3859
- @keyframes aaravposShimmer {
3860
- 100% {
3861
- left: 100%;
3862
- }
3863
- }
3864
- @keyframes aaravposSpin {
3865
- from {
3866
- transform: rotate(0deg);
3867
- }
3868
- to {
3869
- transform: rotate(360deg);
3870
- }
3871
- }
3872
- @keyframes arravpos-spin {
3873
- to {
3874
- transform: rotate(360deg);
3875
- }
3876
- }
3877
- @keyframes arravpos-spin {
3878
- to {
3879
- transform: rotate(360deg);
3880
- }
3881
- }
3882
- @keyframes aaravpos-spin {
3883
- to {
3884
- transform: rotate(360deg);
3885
- }
3886
- }