@aaravpos/appointment-barber-booking 1.0.0

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 (26) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +100 -0
  3. package/dist/components/AppointmentBookingPlugin.d.ts +3 -0
  4. package/dist/components/BookingPluginContainer.d.ts +3 -0
  5. package/dist/components/common/Breadcrumb.d.ts +1 -0
  6. package/dist/components/common/CalendarOverlay.d.ts +7 -0
  7. package/dist/components/common/ChooseYourOutlet.d.ts +7 -0
  8. package/dist/components/common/MainLayout.d.ts +2 -0
  9. package/dist/components/common/ProfessionalSkeletonCard.d.ts +2 -0
  10. package/dist/components/common/ServiceSkeleton.d.ts +2 -0
  11. package/dist/components/common/Spinner.d.ts +2 -0
  12. package/dist/components/modals/ConsentModal.d.ts +3 -0
  13. package/dist/components/modals/PaymentModal.d.ts +17 -0
  14. package/dist/components/sidebar/Sidebar.d.ts +22 -0
  15. package/dist/components/steps/ConfirmPage.d.ts +2 -0
  16. package/dist/components/steps/DetailsPage.d.ts +2 -0
  17. package/dist/components/steps/ProfessionalServicePage.d.ts +1 -0
  18. package/dist/components/steps/ServiceProfessionalPage.d.ts +1 -0
  19. package/dist/components/steps/SuccessPage.d.ts +2 -0
  20. package/dist/components/steps/TimePage.d.ts +2 -0
  21. package/dist/components/steps/index.d.ts +2 -0
  22. package/dist/index.cjs +39 -0
  23. package/dist/index.d.ts +2 -0
  24. package/dist/index.js +19232 -0
  25. package/dist/styles.css +3850 -0
  26. package/package.json +81 -0
package/dist/styles.css ADDED
@@ -0,0 +1,3850 @@
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: #2e5a59;
779
+ --app-link: #385b5a;
780
+ --app-text: #f5f5f5;
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-overflow-hidden {
809
+ overflow: hidden;
810
+ }
811
+ .aaravpos-text-bold {
812
+ font-weight: 600;
813
+ color: #000;
814
+ }
815
+ .aaravpos-tab-enabled {
816
+ cursor: pointer;
817
+ }
818
+ .aaravpos-tab-disabled {
819
+ cursor: not-allowed;
820
+ opacity: 0.5;
821
+ pointer-events: none;
822
+ }
823
+ .arravpos-container {
824
+ background-color: #fff;
825
+ padding: 16px;
826
+ width: 100%;
827
+ box-sizing: border-box;
828
+ margin: 0 auto;
829
+ height: 700px;
830
+ }
831
+ .aaravpos-margin-top-20 {
832
+ margin-top: 20px;
833
+ }
834
+ .aaravpos-margin-bottom-20 {
835
+ margin-bottom: 20px !important;
836
+ }
837
+ .aaravpos-mt-auto {
838
+ margin-top: auto;
839
+ }
840
+ .aaravpos-btn {
841
+ gap: 8px;
842
+ padding: 8px 16px;
843
+ border: none;
844
+ background: var(--btn-bg, #000);
845
+ color: var(--btn-text, #fff);
846
+ font-size: 12px;
847
+ font-weight: 700;
848
+ text-transform: uppercase;
849
+ letter-spacing: 1.5px;
850
+ cursor: pointer;
851
+ transition: all 0.2s ease;
852
+ border-radius: 6px;
853
+ position: absolute;
854
+ bottom: 15px;
855
+ z-index: 50;
856
+ display: flex;
857
+ align-items: center;
858
+ justify-content: center;
859
+ left: 50%;
860
+ transform: translateX(-50%);
861
+ width: max-content;
862
+ display: none;
863
+ }
864
+ .aaravpos-btn:hover {
865
+ background: var(--btn-bg-hover, #222);
866
+ color: var(--btn-text-hover, #fff);
867
+ }
868
+ .aaravpos-divider {
869
+ height: 1px;
870
+ background: var(--border-color, #d4d4d4);
871
+ margin: 2px 0px;
872
+ }
873
+ .aaravpos-btn:disabled {
874
+ opacity: 0.7;
875
+ cursor: not-allowed;
876
+ }
877
+ .aaravpos-btn-content {
878
+ display: flex;
879
+ align-items: center;
880
+ justify-content: center;
881
+ gap: 8px;
882
+ }
883
+ .aaravpos-tp-10 {
884
+ margin-top: 10px;
885
+ }
886
+ .aaravpos-mb-10 {
887
+ margin-bottom: 10px;
888
+ }
889
+ .aaravpos-padding-btn {
890
+ padding: 9px 8px !important;
891
+ }
892
+ .aaravpos-layout {
893
+ height: 700px;
894
+ display: flex;
895
+ flex-direction: column;
896
+ background: var(--canvas, #ffffff);
897
+ color: var(--copy, #000000);
898
+ overflow: hidden;
899
+ }
900
+ .aaravpos-layout-content {
901
+ flex: 1;
902
+ position: relative;
903
+ max-height: 700px;
904
+ }
905
+ .aaravpos-layout-page {
906
+ height: 700px;
907
+ }
908
+ .aaravpos-title {
909
+ font-size: 22px;
910
+ font-weight: 600;
911
+ text-transform: uppercase;
912
+ letter-spacing: -0.025em;
913
+ color: #111827;
914
+ margin-bottom: 6px;
915
+ line-height: 1.1;
916
+ margin-top: 0px;
917
+ }
918
+ .aaravpos-main-layout {
919
+ display: flex;
920
+ flex-direction: column;
921
+ height: 700px;
922
+ }
923
+ .aaravpos-layout-wrapper {
924
+ flex: 1;
925
+ display: grid;
926
+ grid-template-columns: 1fr;
927
+ overflow: hidden;
928
+ position: relative;
929
+ }
930
+ .aaravpos-main-content {
931
+ padding: 16px;
932
+ position: relative;
933
+ min-width: 0;
934
+ }
935
+ .aaravpos-mobile-button {
936
+ position: absolute;
937
+ bottom: 12px;
938
+ left: 0;
939
+ right: 0;
940
+ z-index: 50;
941
+ padding: 0 16px;
942
+ display: flex;
943
+ align-items: center;
944
+ justify-content: center;
945
+ }
946
+ .aaravpos-sidebar {
947
+ flex-direction: column;
948
+ background: var(--surface-bg, #ffffff);
949
+ border: 1px solid rgba(0, 0, 0, 0.1);
950
+ padding: 16px 16px 14px;
951
+ overflow: hidden;
952
+ position: fixed;
953
+ top: 10px;
954
+ right: 10px;
955
+ bottom: 10px;
956
+ width: 315px;
957
+ transform: translateX(360px);
958
+ transition: transform 0.3s ease;
959
+ background: #fff;
960
+ z-index: 1024;
961
+ border-radius: 8px;
962
+ display: flex;
963
+ }
964
+ .aaravpos-layout-wrapper.with-sidebar .aaravpos-sidebar {
965
+ transform: translateX(0);
966
+ }
967
+ .aaravpos-sidebar-mobile {
968
+ position: fixed;
969
+ z-index: 999;
970
+ inset: 0;
971
+ height: 100vh;
972
+ background: #ffffff;
973
+ border-radius: 16px 16px 0 0;
974
+ display: flex;
975
+ flex-direction: column;
976
+ animation: aaravposFadeIn 0.25s ease;
977
+ }
978
+ .aaravpos-sidebar-mobile-content {
979
+ flex: 1;
980
+ position: fixed;
981
+ inset: 0;
982
+ padding: 16px;
983
+ overflow-y: auto;
984
+ }
985
+ .aaravpos-outlet-divider {
986
+ width: 56px;
987
+ height: 2px;
988
+ background: var(--btn-bg);
989
+ border-radius: 999px;
990
+ }
991
+ .aaravpos-header {
992
+ display: flex;
993
+ flex-direction: column;
994
+ justify-content: space-between;
995
+ gap: 16px;
996
+ margin-bottom: 10px;
997
+ }
998
+ .aaravpos-search-wrapper {
999
+ position: relative;
1000
+ width: 100%;
1001
+ display: flex;
1002
+ align-items: center;
1003
+ }
1004
+ .aaravpos-search-icon {
1005
+ position: absolute;
1006
+ left: 12px;
1007
+ top: 50%;
1008
+ transform: translateY(-50%);
1009
+ color: #9ca3af;
1010
+ display: flex;
1011
+ align-items: center;
1012
+ justify-content: center;
1013
+ pointer-events: none;
1014
+ }
1015
+ .aaravpos-search-actions {
1016
+ position: absolute;
1017
+ right: 12px;
1018
+ top: 50%;
1019
+ transform: translateY(-50%);
1020
+ display: flex;
1021
+ align-items: center;
1022
+ gap: 8px;
1023
+ }
1024
+ .aaravpos-search-clear {
1025
+ border: none;
1026
+ background: transparent;
1027
+ color: #9ca3af;
1028
+ cursor: pointer;
1029
+ transition: all 0.3s ease;
1030
+ display: flex;
1031
+ align-items: center;
1032
+ justify-content: center;
1033
+ padding: 0;
1034
+ }
1035
+ .aaravpos-search-clear:hover {
1036
+ color: #000000;
1037
+ }
1038
+ .aaravpos-outlet-list-wrapper {
1039
+ padding-top: 8px;
1040
+ padding-bottom: 8px;
1041
+ height: 610px;
1042
+ overflow: auto;
1043
+ scrollbar-width: none;
1044
+ }
1045
+ .aaravpos-outlet-list-wrapper::-webkit-scrollbar {
1046
+ display: none;
1047
+ }
1048
+ .aaravpos-outlet-grid {
1049
+ display: grid;
1050
+ grid-template-columns: 1fr;
1051
+ gap: 16px;
1052
+ padding-bottom: 50px;
1053
+ }
1054
+ .aaravpos-empty-state {
1055
+ display: flex;
1056
+ align-items: center;
1057
+ justify-content: center;
1058
+ padding: 80px 0;
1059
+ }
1060
+ .aaravpos-empty-content {
1061
+ text-align: center;
1062
+ }
1063
+ .aaravpos-empty-title {
1064
+ font-size: 20px;
1065
+ font-weight: 600;
1066
+ color: #1f2937;
1067
+ margin-bottom: 8px;
1068
+ }
1069
+ .aaravpos-empty-text {
1070
+ font-size: 14px;
1071
+ color: #6b7280;
1072
+ }
1073
+ .aaravpos-outlet-card {
1074
+ position: relative;
1075
+ display: flex;
1076
+ flex-direction: column;
1077
+ justify-content: space-between;
1078
+ overflow: hidden;
1079
+ border-radius: 6px;
1080
+ border: 1px solid #e5e7eb;
1081
+ background: #ffffff;
1082
+ cursor: pointer;
1083
+ transition: all 0.3s ease;
1084
+ }
1085
+ .aaravpos-outlet-card:hover {
1086
+ border-color: #d1d5db;
1087
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
1088
+ }
1089
+ .aaravpos-outlet-card.selected {
1090
+ border-color: var(--btn-bg-hover);
1091
+ background: #ffffff;
1092
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
1093
+ }
1094
+ .aaravpos-outlet-card.closed {
1095
+ border-color: #fca5a5;
1096
+ background: rgba(254, 242, 242, 0.5);
1097
+ }
1098
+ .aaravpos-outlet-card-top {
1099
+ display: flex;
1100
+ align-items: flex-start;
1101
+ justify-content: flex-end;
1102
+ position: absolute;
1103
+ right: 0px;
1104
+ }
1105
+ .aaravpos-outlet-card-content {
1106
+ padding: 14px;
1107
+ }
1108
+ .aaravpos-outlet-card-inner {
1109
+ flex: 1;
1110
+ }
1111
+ .aaravpos-outlet-card-title {
1112
+ font-size: 18px;
1113
+ font-weight: 600;
1114
+ text-transform: uppercase;
1115
+ letter-spacing: -0.025em;
1116
+ color: #111827;
1117
+ overflow: hidden;
1118
+ display: -webkit-box;
1119
+ line-clamp: 1;
1120
+ -webkit-line-clamp: 1;
1121
+ -webkit-box-orient: vertical;
1122
+ margin-bottom: 0px;
1123
+ margin-top: 0px;
1124
+ }
1125
+ .aaravpos-outlet-card-address {
1126
+ margin-top: 4px;
1127
+ font-size: 14px;
1128
+ color: #737373;
1129
+ word-break: break-word;
1130
+ min-height: 40px;
1131
+ overflow: hidden;
1132
+ display: -webkit-box;
1133
+ line-clamp: 1;
1134
+ -webkit-line-clamp: 2;
1135
+ -webkit-box-orient: vertical;
1136
+ margin-bottom: 0px;
1137
+ }
1138
+ .aaravpos-status-badge {
1139
+ display: inline-flex;
1140
+ align-items: center;
1141
+ padding: 1px 6px;
1142
+ font-size: 9px;
1143
+ font-weight: 700;
1144
+ text-transform: uppercase;
1145
+ letter-spacing: 0.12em;
1146
+ border: 1px solid;
1147
+ border-top-right-radius: 6px;
1148
+ border-bottom-left-radius: 6px;
1149
+ }
1150
+ .aaravpos-status-open {
1151
+ background: #ecfdf5;
1152
+ color: #047857;
1153
+ border-color: #a7f3d0;
1154
+ }
1155
+ .aaravpos-status-closed {
1156
+ background: #fee2e2;
1157
+ color: #f87171;
1158
+ border-color: #fecaca;
1159
+ }
1160
+ .aaravpos-mobile-stepper {
1161
+ display: flex;
1162
+ align-items: center;
1163
+ flex-direction: row;
1164
+ gap: 4px;
1165
+ font-weight: 600;
1166
+ }
1167
+ .aaravpos-mobile-back-btn {
1168
+ display: flex;
1169
+ align-items: center;
1170
+ font-size: 20px;
1171
+ margin-right: 8px;
1172
+ cursor: pointer;
1173
+ border: none;
1174
+ background: transparent;
1175
+ color: #000000;
1176
+ padding: 0;
1177
+ }
1178
+ .aaravpos-mobile-back-btn:disabled {
1179
+ color: #d1d5db;
1180
+ cursor: not-allowed;
1181
+ }
1182
+ .aaravpos-mobile-step-label {
1183
+ display: flex;
1184
+ align-items: center;
1185
+ flex-direction: row;
1186
+ font-size: 16px;
1187
+ font-weight: 500;
1188
+ }
1189
+ .aaravpos-desktop-stepper {
1190
+ display: none;
1191
+ }
1192
+ .aaravpos-desktop-back-btn {
1193
+ display: flex;
1194
+ align-items: center;
1195
+ justify-content: center;
1196
+ height: 40px;
1197
+ width: 40px;
1198
+ border: 1px solid #e5e7eb;
1199
+ background: #ffffff;
1200
+ cursor: pointer;
1201
+ outline: none;
1202
+ flex-shrink: 0;
1203
+ border-radius: 100%;
1204
+ overflow: hidden;
1205
+ }
1206
+ .aaravpos-desktop-back-btn:hover {
1207
+ background: #f3f4f6;
1208
+ }
1209
+ .aaravpos-step-nav {
1210
+ display: grid;
1211
+ grid-template-columns: repeat(5, 1fr);
1212
+ width: 100%;
1213
+ overflow: hidden;
1214
+ }
1215
+ .aaravpos-step-btn {
1216
+ position: relative;
1217
+ height: 40px;
1218
+ display: flex;
1219
+ align-items: center;
1220
+ justify-content: center;
1221
+ gap: 8px;
1222
+ text-transform: uppercase;
1223
+ letter-spacing: 1px;
1224
+ font-size: 11px;
1225
+ font-weight: 600;
1226
+ transition: all 0.3s ease;
1227
+ border: none;
1228
+ border-bottom: 2px solid transparent;
1229
+ background: transparent;
1230
+ }
1231
+ .aaravpos-step-btn.clickable {
1232
+ cursor: pointer;
1233
+ }
1234
+ .aaravpos-step-btn.disabled {
1235
+ cursor: not-allowed;
1236
+ opacity: 0.5;
1237
+ pointer-events: none;
1238
+ }
1239
+ .aaravpos-step-btn.active {
1240
+ border-bottom-color: var(--btn-bg);
1241
+ color: #000000;
1242
+ }
1243
+ .aaravpos-step-btn.inactive {
1244
+ color: rgba(0, 0, 0, 0.6);
1245
+ }
1246
+ .aaravpos-step-btn.inactive:hover {
1247
+ color: #000000;
1248
+ }
1249
+ .aaravpos-step-icon.active {
1250
+ color: var(--btn-bg);
1251
+ }
1252
+ .aaravpos-step-icon.inactive {
1253
+ color: var(--btn-bg-hover);
1254
+ }
1255
+ .aaravpos-navbar-form {
1256
+ display: flex;
1257
+ flex-direction: row;
1258
+ justify-content: space-between;
1259
+ }
1260
+ .aaravpos-page-title {
1261
+ font-size: 22px;
1262
+ font-weight: 900;
1263
+ text-transform: uppercase;
1264
+ letter-spacing: -0.025em;
1265
+ color: #111827;
1266
+ padding-top: 0px;
1267
+ line-height: 1.1;
1268
+ margin-bottom: 0px;
1269
+ margin-top: 0px;
1270
+ }
1271
+ .aaravpos-sub-title {
1272
+ font-size: 14px;
1273
+ color: rgba(0, 0, 0, 0.6);
1274
+ margin-bottom: 10px;
1275
+ line-height: 1.5;
1276
+ margin-top: 0px;
1277
+ }
1278
+ .aaravpos-topbar {
1279
+ display: flex;
1280
+ flex-direction: column;
1281
+ justify-content: space-between;
1282
+ gap: 16px;
1283
+ margin-bottom: 12px;
1284
+ border-bottom: 1px solid rgba(0, 0, 0, 0.4);
1285
+ }
1286
+ .aaravpos-tab-group {
1287
+ display: flex;
1288
+ align-items: flex-end;
1289
+ gap: 32px;
1290
+ }
1291
+ .aaravpos-tab-btn {
1292
+ padding-bottom: 8px;
1293
+ border: none;
1294
+ border-bottom: 2px solid transparent;
1295
+ background: transparent;
1296
+ font-size: 12px;
1297
+ font-weight: 600;
1298
+ text-transform: uppercase;
1299
+ letter-spacing: 2px;
1300
+ cursor: pointer;
1301
+ transition: all 0.3s ease;
1302
+ }
1303
+ .aaravpos-tab-btn.active {
1304
+ color: var(--btn-bg, #000);
1305
+ border-bottom-color: var(--btn-bg, #000);
1306
+ }
1307
+ .aaravpos-tab-btn.inactive {
1308
+ color: rgba(0, 0, 0, 0.4);
1309
+ }
1310
+ .aaravpos-tab-btn.inactive:hover {
1311
+ color: #000;
1312
+ }
1313
+ .aaravpos-search-box {
1314
+ position: relative;
1315
+ width: 100%;
1316
+ }
1317
+ .aaravpos-search-icon {
1318
+ position: absolute;
1319
+ left: 12px;
1320
+ top: 50%;
1321
+ transform: translateY(-50%);
1322
+ color: #9ca3af;
1323
+ }
1324
+ .aaravpos-search-input {
1325
+ width: 100%;
1326
+ padding: 8px 40px 8px 36px;
1327
+ border: 1px solid rgba(0, 0, 0, 0.3);
1328
+ border-radius: 6px;
1329
+ font-size: 14px;
1330
+ outline: none;
1331
+ transition: all 0.3s ease;
1332
+ }
1333
+ .aaravpos-search-input:focus {
1334
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
1335
+ }
1336
+ .aaravpos-search-clear {
1337
+ position: absolute;
1338
+ right: 12px;
1339
+ top: 50%;
1340
+ transform: translateY(-50%);
1341
+ border: none;
1342
+ background: transparent;
1343
+ color: #9ca3af;
1344
+ cursor: pointer;
1345
+ transition: all 0.3s ease;
1346
+ }
1347
+ .aaravpos-search-clear:hover {
1348
+ color: #000;
1349
+ }
1350
+ .aaravpos-supercategory-wrapper {
1351
+ display: flex;
1352
+ flex-wrap: nowrap;
1353
+ gap: 8px;
1354
+ width: 100%;
1355
+ overflow-x: auto;
1356
+ margin-bottom: 12px;
1357
+ scrollbar-width: none;
1358
+ }
1359
+ .aaravpos-supercategory-wrapper::-webkit-scrollbar {
1360
+ display: none;
1361
+ }
1362
+ .aaravpos-supercategory-btn {
1363
+ min-width: fit-content;
1364
+ padding: 7px;
1365
+ border: 1px solid rgba(0, 0, 0, 0.3);
1366
+ background: #ffffff;
1367
+ text-align: left;
1368
+ cursor: pointer;
1369
+ transition: all 0.3s ease;
1370
+ font-size: 14px;
1371
+ border-radius: 4px;
1372
+ }
1373
+ .aaravpos-supercategory-btn:hover {
1374
+ border-color: rgba(0, 0, 0, 0.5);
1375
+ }
1376
+ .aaravpos-supercategory-btn.active {
1377
+ border-color: rgba(0, 0, 0, 0.4);
1378
+ background: rgba(0, 0, 0, 0.8);
1379
+ color: #fff;
1380
+ }
1381
+ .aaravpos-supercategory-btn.active .aaravpos-supercategory-count {
1382
+ color: #fff;
1383
+ }
1384
+ .aaravpos-subcategory-btn {
1385
+ min-width: fit-content;
1386
+ padding: 6px;
1387
+ border: 1px solid rgba(0, 0, 0, 0.3);
1388
+ background: #ffffff;
1389
+ text-align: left;
1390
+ cursor: pointer;
1391
+ transition: all 0.3s ease;
1392
+ font-size: 12px;
1393
+ border-radius: 4px;
1394
+ }
1395
+ .aaravpos-subcategory-btn:hover {
1396
+ border-color: rgba(0, 0, 0, 0.5);
1397
+ }
1398
+ .aaravpos-subcategory-btn.active {
1399
+ border: 1px solid var(--app-bg);
1400
+ background: var(--app-bg);
1401
+ @supports (color: color-mix(in lab, red, red)) {
1402
+ background: color-mix(in srgb, var(--app-bg) 10%, transparent);
1403
+ }
1404
+ color: var(--app-bg);
1405
+ }
1406
+ .aaravpos-subcategory-btn.active .aaravpos-subcategory-count {
1407
+ color: #fff;
1408
+ }
1409
+ .aaravpos-supercategory-title {
1410
+ margin-top: 0px;
1411
+ font-size: 14px;
1412
+ font-weight: 500;
1413
+ margin-bottom: 0px;
1414
+ }
1415
+ .aaravpos-supercategory-count {
1416
+ font-size: 10px;
1417
+ font-weight: 600;
1418
+ text-transform: uppercase;
1419
+ letter-spacing: 1px;
1420
+ color: rgba(0, 0, 0, 0.6);
1421
+ margin-bottom: 0px;
1422
+ margin-top: 6px;
1423
+ }
1424
+ .aaravpos-services-wrapper {
1425
+ overflow-y: auto;
1426
+ padding-bottom: 30px;
1427
+ scrollbar-width: none;
1428
+ -ms-overflow-style: none;
1429
+ height: 418px;
1430
+ }
1431
+ .aaravpos-services-wrapper::-webkit-scrollbar {
1432
+ display: none;
1433
+ }
1434
+ .aaravpos-services-grid {
1435
+ display: grid;
1436
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
1437
+ gap: 12px;
1438
+ }
1439
+ .aaravpos-service-card {
1440
+ position: relative;
1441
+ border: 1px solid rgba(0, 0, 0, 0.3);
1442
+ border-radius: 6px;
1443
+ padding: 8px;
1444
+ cursor: pointer;
1445
+ background: #ffffff;
1446
+ transition: all 0.25s ease;
1447
+ }
1448
+ .aaravpos-service-card:hover {
1449
+ border-color: rgba(0, 0, 0, 0.6);
1450
+ }
1451
+ .aaravpos-service-card.active {
1452
+ border-color: var(--btn-bg);
1453
+ background: rgba(0, 0, 0, 0.03);
1454
+ }
1455
+ .aaravpos-tax-badge, .aaravpos-consent-badge {
1456
+ position: absolute;
1457
+ top: 0;
1458
+ font-size: 9px;
1459
+ padding: 2px 8px;
1460
+ color: #fff;
1461
+ }
1462
+ .aaravpos-tax-badge {
1463
+ left: 0;
1464
+ background: #15803d;
1465
+ border-radius: 0 0 6px 0;
1466
+ }
1467
+ .aaravpos-consent-badge {
1468
+ right: 0;
1469
+ background: rgba(0, 0, 0, 0.8);
1470
+ border-radius: 0 0 0 6px;
1471
+ }
1472
+ .aaravpos-service-title {
1473
+ font-size: 14px;
1474
+ font-weight: 700;
1475
+ margin-top: 0px;
1476
+ margin-bottom: 4px;
1477
+ text-transform: uppercase;
1478
+ overflow: hidden;
1479
+ text-overflow: ellipsis;
1480
+ white-space: nowrap;
1481
+ margin-top: 12px;
1482
+ }
1483
+ .aaravpos-service-description-wrapper {
1484
+ position: relative;
1485
+ }
1486
+ .aaravpos-service-description {
1487
+ font-size: 12px;
1488
+ font-weight: 600;
1489
+ color: rgba(0, 0, 0, 0.45);
1490
+ text-transform: uppercase;
1491
+ overflow: hidden;
1492
+ text-overflow: ellipsis;
1493
+ white-space: nowrap;
1494
+ margin: 5px 0px;
1495
+ }
1496
+ .aaravpos-service-tooltip {
1497
+ position: absolute;
1498
+ display: none;
1499
+ top: 20px;
1500
+ left: 0;
1501
+ z-index: 10;
1502
+ width: 208px;
1503
+ padding: 8px;
1504
+ font-size: 12px;
1505
+ background: #f5f5f5;
1506
+ border-radius: 6px;
1507
+ }
1508
+ .aaravpos-service-description-wrapper:hover .aaravpos-service-tooltip {
1509
+ display: block;
1510
+ }
1511
+ .aaravpos-service-price {
1512
+ display: flex;
1513
+ justify-content: space-between;
1514
+ align-items: center;
1515
+ margin-top: 8px;
1516
+ margin-bottom: 8px;
1517
+ font-size: 14px;
1518
+ font-weight: 600;
1519
+ color: rgba(0, 0, 0, 0.6);
1520
+ }
1521
+ .aaravpos-service-price-right {
1522
+ display: flex;
1523
+ align-items: center;
1524
+ font-family: monospace;
1525
+ }
1526
+ .aaravpos-service-actions {
1527
+ display: flex;
1528
+ align-items: center;
1529
+ justify-content: flex-start;
1530
+ margin-top: 6px;
1531
+ border: 1px solid #d1d5db;
1532
+ width: fit-content;
1533
+ }
1534
+ .aaravpos-service-action-btn {
1535
+ width: 40px;
1536
+ height: 32px;
1537
+ border: none;
1538
+ background: transparent;
1539
+ display: flex;
1540
+ align-items: center;
1541
+ justify-content: center;
1542
+ cursor: pointer;
1543
+ transition: background 0.2s ease;
1544
+ }
1545
+ .aaravpos-service-action-btn:hover {
1546
+ background: #f5f5f4;
1547
+ }
1548
+ .aaravpos-service-action-btn.plus {
1549
+ background: rgba(0, 0, 0, 0.8);
1550
+ color: white;
1551
+ }
1552
+ .aaravpos-service-action-btn.plus:hover {
1553
+ background: rgba(0, 0, 0, 0.9);
1554
+ }
1555
+ .aaravpos-service-qty {
1556
+ width: 40px;
1557
+ height: 32px;
1558
+ border-left: 1px solid #d1d5db;
1559
+ border-right: 1px solid #d1d5db;
1560
+ display: flex;
1561
+ align-items: center;
1562
+ justify-content: center;
1563
+ font-size: 14px;
1564
+ font-weight: 600;
1565
+ }
1566
+ .aaravpos-skeleton-card {
1567
+ position: relative;
1568
+ height: 134px;
1569
+ overflow: hidden;
1570
+ border-radius: 4px;
1571
+ background: #e0e0e0;
1572
+ }
1573
+ .aaravpos-skeleton-shimmer {
1574
+ position: absolute;
1575
+ top: 0;
1576
+ left: -100%;
1577
+ width: 100%;
1578
+ height: 100%;
1579
+ background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
1580
+ animation: aaravpos-shimmer 1.2s infinite;
1581
+ }
1582
+ .aaravpos-professional-wrapper {
1583
+ overflow-y: auto;
1584
+ scrollbar-width: none;
1585
+ -ms-overflow-style: none;
1586
+ height: 585px;
1587
+ }
1588
+ .aaravpos-professional-label {
1589
+ font-size: 11px;
1590
+ font-weight: 700;
1591
+ color: #c1121f;
1592
+ margin-top: 0px;
1593
+ margin-bottom: 8px;
1594
+ text-transform: uppercase;
1595
+ }
1596
+ .aaravpos-professional-description {
1597
+ max-width: 360px;
1598
+ }
1599
+ .aaravpos-professional-description p {
1600
+ font-size: 10px;
1601
+ line-height: 1.5;
1602
+ letter-spacing: 1px;
1603
+ text-transform: uppercase;
1604
+ color: #555555;
1605
+ margin: 0;
1606
+ }
1607
+ .aaravpos-professional-grid {
1608
+ display: grid;
1609
+ grid-template-columns: repeat(5, 1fr);
1610
+ gap: 34px;
1611
+ }
1612
+ .aaravpos-professional-header {
1613
+ display: flex;
1614
+ justify-content: space-between;
1615
+ gap: 16px;
1616
+ margin-bottom: 10px;
1617
+ }
1618
+ .aaravpos-professional-card {
1619
+ background: #f6f6f6;
1620
+ border: 1px solid #ececec;
1621
+ padding: 16px;
1622
+ transition: all 0.3s ease;
1623
+ cursor: pointer;
1624
+ }
1625
+ .aaravpos-professional-card:hover {
1626
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
1627
+ }
1628
+ .aaravpos-professional-card.active {
1629
+ border-color: rgba(var(--btn-bg), 0.08);
1630
+ }
1631
+ .aaravpos-professional-image-wrapper {
1632
+ width: 100%;
1633
+ height: 180px;
1634
+ overflow: hidden;
1635
+ background: #111111;
1636
+ margin-bottom: 18px;
1637
+ }
1638
+ .aaravpos-professional-image {
1639
+ width: 100%;
1640
+ height: 100%;
1641
+ object-fit: cover;
1642
+ }
1643
+ .aaravpos-professional-avatar {
1644
+ width: 100%;
1645
+ height: 100%;
1646
+ display: flex;
1647
+ align-items: center;
1648
+ justify-content: center;
1649
+ font-size: 60px;
1650
+ color: #ffffff;
1651
+ font-weight: 800;
1652
+ }
1653
+ .aaravpos-professional-rating {
1654
+ font-size: 9px;
1655
+ font-weight: 600;
1656
+ color: #111111;
1657
+ margin: 0px;
1658
+ }
1659
+ .aaravpos-professional-name {
1660
+ font-size: 16px;
1661
+ line-height: 1;
1662
+ font-weight: 900;
1663
+ color: #111111;
1664
+ text-transform: uppercase;
1665
+ margin-top: 6px;
1666
+ margin-bottom: 6px;
1667
+ }
1668
+ .aaravpos-professional-role {
1669
+ font-size: 10px;
1670
+ font-weight: 700;
1671
+ color: #c1121f;
1672
+ text-transform: uppercase;
1673
+ letter-spacing: 1px;
1674
+ margin-top: 0px;
1675
+ margin-bottom: 14px;
1676
+ }
1677
+ .aaravpos-professional-btn {
1678
+ width: 100%;
1679
+ height: 32px;
1680
+ border: 1px solid var(--btn-bg);
1681
+ background: transparent;
1682
+ color: var(--btn-bg);
1683
+ font-size: 11px;
1684
+ font-weight: 700;
1685
+ letter-spacing: 2px;
1686
+ text-transform: uppercase;
1687
+ transition: all 0.3s ease;
1688
+ }
1689
+ .aaravpos-professional-btn:hover {
1690
+ background: var(--btn-bg-hover);
1691
+ color: var(--btn-text-hover);
1692
+ border-color: var(--btn-bg-hover);
1693
+ }
1694
+ .aaravpos-available-badge {
1695
+ display: flex;
1696
+ align-items: center;
1697
+ gap: 8px;
1698
+ margin-bottom: 20px;
1699
+ }
1700
+ .aaravpos-available-dot {
1701
+ width: 6px;
1702
+ height: 6px;
1703
+ border-radius: 999px;
1704
+ background: #15803d;
1705
+ flex-shrink: 0;
1706
+ }
1707
+ .aaravpos-available-text {
1708
+ font-size: 11px;
1709
+ font-weight: 600;
1710
+ color: #166534;
1711
+ margin: 0;
1712
+ }
1713
+ .aaravpos-no-staff {
1714
+ font-size: 14px;
1715
+ font-weight: 600;
1716
+ color: #111111;
1717
+ }
1718
+ .aaravpos-order-sidebar {
1719
+ display: flex;
1720
+ flex-direction: column;
1721
+ justify-content: space-between;
1722
+ }
1723
+ .aaravpos-order-header {
1724
+ padding: 0px 0px 8px 0px;
1725
+ border-bottom: 1px solid #d1d5db;
1726
+ }
1727
+ .aaravpos-order-title {
1728
+ font-size: 16px;
1729
+ font-weight: 900;
1730
+ text-transform: uppercase;
1731
+ letter-spacing: -0.5px;
1732
+ margin-bottom: 0px;
1733
+ margin-top: 0px;
1734
+ display: flex;
1735
+ justify-content: space-between;
1736
+ align-items: center;
1737
+ }
1738
+ .aaravpos-order-subtitle {
1739
+ font-size: 12px;
1740
+ font-weight: 600;
1741
+ color: rgba(0, 0, 0, 0.4);
1742
+ text-transform: uppercase;
1743
+ overflow: hidden;
1744
+ text-overflow: ellipsis;
1745
+ white-space: nowrap;
1746
+ margin-bottom: 0px;
1747
+ margin-top: 0px;
1748
+ }
1749
+ .aaravpos-order-section-title {
1750
+ font-size: 13px;
1751
+ font-weight: 600;
1752
+ margin: 0px;
1753
+ color: rgba(0, 0, 0, 0.4);
1754
+ text-transform: uppercase;
1755
+ overflow: hidden;
1756
+ text-overflow: ellipsis;
1757
+ white-space: nowrap;
1758
+ }
1759
+ .aaravpos-order-list {
1760
+ overflow-y: auto;
1761
+ padding: 0px;
1762
+ scrollbar-width: none;
1763
+ -ms-overflow-style: none;
1764
+ margin: 4px 0px;
1765
+ }
1766
+ .aaravpos-pro-order-list {
1767
+ height: calc(100dvh - 270px);
1768
+ overflow-y: auto;
1769
+ scrollbar-width: none;
1770
+ -ms-overflow-style: none;
1771
+ padding: 0px;
1772
+ margin: 4px 0px;
1773
+ }
1774
+ .aaravpos-order-list::-webkit-scrollbar, .aaravpos-pro-order-list::-webkit-scrollbar {
1775
+ display: none;
1776
+ }
1777
+ .aaravpos-order-item {
1778
+ display: flex;
1779
+ flex-direction: column;
1780
+ align-items: flex-start;
1781
+ justify-content: flex-start;
1782
+ padding: 8px 0;
1783
+ border-bottom: 1px dotted #9ca3af;
1784
+ }
1785
+ .aaravpos-order-item:last-child {
1786
+ border-bottom: none;
1787
+ }
1788
+ .aaravpos-order-service-name {
1789
+ font-size: 14px;
1790
+ font-weight: 500;
1791
+ text-transform: uppercase;
1792
+ display: -webkit-box;
1793
+ -webkit-line-clamp: 1;
1794
+ line-clamp: 1;
1795
+ -webkit-box-orient: vertical;
1796
+ overflow: hidden;
1797
+ margin: 0px;
1798
+ }
1799
+ .aaravpos-order-details {
1800
+ width: 100%;
1801
+ display: grid;
1802
+ gap: 4px;
1803
+ grid-template-columns: repeat(3, 1fr);
1804
+ align-items: center;
1805
+ margin-top: 4px;
1806
+ }
1807
+ .aaravpos-order-detail {
1808
+ display: flex;
1809
+ align-items: center;
1810
+ gap: 4px;
1811
+ font-size: 12px;
1812
+ font-weight: 500;
1813
+ color: rgba(0, 0, 0, 0.6);
1814
+ margin: 0px;
1815
+ }
1816
+ .aaravpos-order-detail.center {
1817
+ justify-content: center;
1818
+ }
1819
+ .aaravpos-order-detail.right {
1820
+ justify-content: flex-end;
1821
+ gap: 0px;
1822
+ }
1823
+ .aaravpos-order-footer {
1824
+ padding-top: 5px;
1825
+ }
1826
+ .aaravpos-order-subtotal {
1827
+ display: flex;
1828
+ justify-content: space-between;
1829
+ align-items: flex-end;
1830
+ margin-bottom: 4px;
1831
+ }
1832
+ .aaravpos-order-subtotal-label {
1833
+ font-size: 16px;
1834
+ font-weight: 600;
1835
+ color: rgba(0, 0, 0, 0.6);
1836
+ text-transform: capitalize;
1837
+ }
1838
+ .aaravpos-order-subtotal-price {
1839
+ font-size: 18px;
1840
+ display: flex;
1841
+ align-items: center;
1842
+ font-family: monospace;
1843
+ font-weight: 600;
1844
+ }
1845
+ .aaravpos-common-btn {
1846
+ width: 100%;
1847
+ margin-top: 10px;
1848
+ padding: 12px 8px;
1849
+ border: none;
1850
+ background: var(--btn-bg);
1851
+ color: var(--btn-text, #ffffff);
1852
+ font-size: 12px;
1853
+ font-weight: 700;
1854
+ font-family: var(--font-dm-sans);
1855
+ text-transform: uppercase;
1856
+ letter-spacing: 1.5px;
1857
+ cursor: pointer;
1858
+ transition: all 0.2s ease;
1859
+ border-radius: 6px;
1860
+ }
1861
+ .aaravpos-common-btn:hover {
1862
+ background: var(--btn-bg-hover);
1863
+ color: var(--btn-text-hover, #ffffff);
1864
+ }
1865
+ .aaravpos-common-btn:disabled {
1866
+ opacity: 0.7;
1867
+ cursor: not-allowed;
1868
+ }
1869
+ .aaravpos-common-btn-content {
1870
+ display: flex;
1871
+ align-items: center;
1872
+ justify-content: center;
1873
+ gap: 8px;
1874
+ }
1875
+ .aaravpos-order-label {
1876
+ font-size: 14px;
1877
+ font-weight: 600;
1878
+ margin: 6px 0;
1879
+ color: rgba(0, 0, 0, 0.4);
1880
+ text-transform: uppercase;
1881
+ }
1882
+ .aaravpos-display-flex {
1883
+ display: flex;
1884
+ align-items: center;
1885
+ gap: 12px;
1886
+ }
1887
+ .aaravpos-pro-card {
1888
+ border: 2px solid rgba(0, 0, 0, 0.15);
1889
+ border-radius: 6px;
1890
+ padding: 8px;
1891
+ background: #ffffff;
1892
+ cursor: pointer;
1893
+ transition: all 0.25s ease;
1894
+ }
1895
+ .aaravpos-pro-image {
1896
+ width: 40px;
1897
+ height: 40px;
1898
+ border-radius: 8px;
1899
+ object-fit: cover;
1900
+ border: 1px solid rgba(0, 0, 0, 0.1);
1901
+ }
1902
+ .aaravpos-pro-avatar {
1903
+ width: 40px;
1904
+ height: 40px;
1905
+ border-radius: 8px;
1906
+ color: #fff;
1907
+ display: flex;
1908
+ align-items: center;
1909
+ justify-content: center;
1910
+ font-weight: 600;
1911
+ }
1912
+ .aaravpos-pro-info {
1913
+ overflow: hidden;
1914
+ }
1915
+ .aaravpos-pro-name {
1916
+ font-size: 14px;
1917
+ font-weight: 700;
1918
+ text-transform: uppercase;
1919
+ white-space: nowrap;
1920
+ overflow: hidden;
1921
+ text-overflow: ellipsis;
1922
+ margin: 0px;
1923
+ }
1924
+ .aaravpos-pro-type {
1925
+ font-size: 12px;
1926
+ color: #6b7280;
1927
+ text-transform: uppercase;
1928
+ white-space: nowrap;
1929
+ overflow: hidden;
1930
+ text-overflow: ellipsis;
1931
+ margin: 0px;
1932
+ }
1933
+ .aaravpos-summary-row {
1934
+ display: flex;
1935
+ justify-content: space-between;
1936
+ align-items: center;
1937
+ margin-bottom: 6px;
1938
+ font-size: 14px;
1939
+ font-weight: 600;
1940
+ color: #374151;
1941
+ }
1942
+ .aaravpos-summary-label {
1943
+ display: block;
1944
+ }
1945
+ .aaravpos-summary-value {
1946
+ display: flex;
1947
+ align-items: center;
1948
+ font-family: monospace;
1949
+ }
1950
+ .aaravpos-consent-box {
1951
+ margin-bottom: 12px;
1952
+ padding: 8px;
1953
+ background: #fefce8;
1954
+ border: 1px solid #fde68a;
1955
+ border-radius: 4px;
1956
+ }
1957
+ .aaravpos-consent-text {
1958
+ font-size: 12px;
1959
+ font-weight: 500;
1960
+ color: #854d0e;
1961
+ }
1962
+ .aaravpos-consent-progress {
1963
+ width: 100%;
1964
+ height: 6px;
1965
+ margin-top: 4px;
1966
+ background: #e5e7eb;
1967
+ border-radius: 9999px;
1968
+ overflow: hidden;
1969
+ }
1970
+ .aaravpos-consent-progress-bar {
1971
+ height: 100%;
1972
+ background: #ca8a04;
1973
+ border-radius: 9999px;
1974
+ transition: width 0.3s ease;
1975
+ }
1976
+ .aaravpos-tip-input-wrapper {
1977
+ overflow: hidden;
1978
+ }
1979
+ .aaravpos-tip-input {
1980
+ width: 100%;
1981
+ padding: 8px 12px;
1982
+ margin-bottom: 12px;
1983
+ border: 1px solid #d1d5db;
1984
+ border-radius: 4px;
1985
+ font-size: 14px;
1986
+ outline: none;
1987
+ box-sizing: border-box;
1988
+ transition: border-color 0.2s ease;
1989
+ }
1990
+ .aaravpos-tip-input:focus {
1991
+ border-color: #9ca3af;
1992
+ }
1993
+ .aaravpos-tip-title {
1994
+ margin-top: 16px;
1995
+ margin-bottom: 8px;
1996
+ font-size: 10px;
1997
+ font-weight: 700;
1998
+ text-transform: uppercase;
1999
+ letter-spacing: 1.5px;
2000
+ }
2001
+ .aaravpos-tip-options {
2002
+ display: flex;
2003
+ gap: 4px;
2004
+ margin-bottom: 8px;
2005
+ }
2006
+ .aaravpos-tip-btn {
2007
+ padding: 6px 8px;
2008
+ border: 1px solid var(--btn-bg-hover);
2009
+ border-radius: 4px;
2010
+ background: #fff;
2011
+ font-size: 12px;
2012
+ text-align: center;
2013
+ cursor: pointer;
2014
+ transition: all 0.2s ease;
2015
+ }
2016
+ .aaravpos-tip-btn-flex {
2017
+ flex: 1;
2018
+ }
2019
+ .aaravpos-tip-btn-fixed {
2020
+ flex: none;
2021
+ width: 64px;
2022
+ }
2023
+ .aaravpos-tip-btn-active {
2024
+ background: var(--btn-bg);
2025
+ border-color: var(--btn-bg);
2026
+ color: #fff;
2027
+ }
2028
+ .aaravpos-date-time {
2029
+ display: flex;
2030
+ justify-content: space-between;
2031
+ align-items: center;
2032
+ gap: 12px;
2033
+ font-size: 14px;
2034
+ font-weight: 700;
2035
+ }
2036
+ .aaravpos-date-time-label {
2037
+ color: #111827;
2038
+ }
2039
+ .aaravpos-date-time-value {
2040
+ color: var(--btn-bg);
2041
+ font-weight: 700;
2042
+ }
2043
+ .aaravpos-date-time-empty {
2044
+ color: var(--text-muted);
2045
+ font-weight: 500;
2046
+ }
2047
+ .aaravpos-sidebar-close-btn {
2048
+ display: block;
2049
+ width: auto;
2050
+ padding: 2px 6px;
2051
+ border: none;
2052
+ border-radius: 6px;
2053
+ background: transparent;
2054
+ cursor: pointer;
2055
+ font-size: 30px;
2056
+ transition: all 0.2s ease;
2057
+ }
2058
+ .aaravpos-sidebar-close-btn:hover {
2059
+ background: rgba(0, 0, 0, 0.05);
2060
+ }
2061
+ .aaravpos-date-modal-overlay {
2062
+ position: fixed;
2063
+ inset: 0;
2064
+ z-index: 1026;
2065
+ display: flex;
2066
+ align-items: center;
2067
+ justify-content: center;
2068
+ min-height: calc(100dvh - 56px);
2069
+ background: rgba(14, 14, 14, 0.55);
2070
+ backdrop-filter: blur(4px);
2071
+ }
2072
+ .aaravpos-date-modal {
2073
+ width: 320px;
2074
+ max-width: 95vw;
2075
+ max-height: 90vh;
2076
+ display: flex;
2077
+ flex-direction: column;
2078
+ background: var(--canvas-bg);
2079
+ border-radius: 12px;
2080
+ overflow: hidden;
2081
+ box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
2082
+ animation: aaravposPopIn 0.2s ease;
2083
+ }
2084
+ .aaravpos-date-modal-header {
2085
+ position: sticky;
2086
+ top: 0;
2087
+ z-index: 10;
2088
+ display: flex;
2089
+ align-items: center;
2090
+ justify-content: space-between;
2091
+ padding: 10px 16px;
2092
+ background: var(--canvas-bg);
2093
+ border-bottom: 1px solid var(--border-color);
2094
+ }
2095
+ .aaravpos-date-modal-title {
2096
+ font-size: 22px;
2097
+ font-weight: 700;
2098
+ letter-spacing: 1px;
2099
+ text-transform: uppercase;
2100
+ margin: 0px;
2101
+ }
2102
+ .aaravpos-date-close-btn {
2103
+ width: 32px;
2104
+ height: 32px;
2105
+ display: flex;
2106
+ align-items: center;
2107
+ justify-content: center;
2108
+ border: none;
2109
+ border-radius: 999px;
2110
+ background: var(--surface-bg);
2111
+ color: var(--text-muted);
2112
+ cursor: pointer;
2113
+ transition: all 0.2s ease;
2114
+ }
2115
+ .aaravpos-date-close-btn:hover {
2116
+ background: var(--red-color);
2117
+ color: var(--btn-bg-hover);
2118
+ }
2119
+ .aaravpos-date-modal-body {
2120
+ overflow-y: auto;
2121
+ padding: 10px 15px 15px 15px;
2122
+ }
2123
+ .aaravpos-date-nav {
2124
+ display: flex;
2125
+ align-items: center;
2126
+ justify-content: space-between;
2127
+ margin-bottom: 16px;
2128
+ }
2129
+ .aaravpos-date-nav-btn {
2130
+ border: none;
2131
+ background: transparent;
2132
+ font-size: 18px;
2133
+ cursor: pointer;
2134
+ transition: all 0.2s ease;
2135
+ }
2136
+ .aaravpos-date-nav-btn:hover {
2137
+ color: var(--red-color);
2138
+ }
2139
+ .aaravpos-date-nav-btn:disabled {
2140
+ opacity: 0.3;
2141
+ cursor: not-allowed;
2142
+ }
2143
+ .aaravpos-date-month-label {
2144
+ font-size: 14px;
2145
+ font-weight: 600;
2146
+ }
2147
+ .aaravpos-calendar-grid {
2148
+ display: grid;
2149
+ grid-template-columns: repeat(7, 1fr);
2150
+ gap: 6px;
2151
+ }
2152
+ .aaravpos-calendar-weekday {
2153
+ padding: 4px 0;
2154
+ text-align: center;
2155
+ font-size: 10px;
2156
+ font-weight: 600;
2157
+ text-transform: uppercase;
2158
+ color: var(--text-muted);
2159
+ }
2160
+ .aaravpos-calendar-day {
2161
+ height: 34px;
2162
+ width: 34px;
2163
+ display: flex;
2164
+ align-items: center;
2165
+ justify-content: center;
2166
+ border-radius: 999px;
2167
+ font-size: 12px;
2168
+ font-family: monospace;
2169
+ transition: all 0.15s ease;
2170
+ }
2171
+ .aaravpos-calendar-day-active {
2172
+ cursor: pointer;
2173
+ }
2174
+ .aaravpos-calendar-day-active:hover {
2175
+ background: var(--btn-bg-hover);
2176
+ color: var(--btn-text-hover);
2177
+ }
2178
+ .aaravpos-calendar-day-today {
2179
+ outline: 1.5px solid var(--border-color);
2180
+ outline-offset: 1px;
2181
+ }
2182
+ .aaravpos-calendar-day-selected {
2183
+ background: var(--btn-bg);
2184
+ color: #fff;
2185
+ }
2186
+ .aaravpos-calendar-day-disabled {
2187
+ opacity: 0.4;
2188
+ cursor: not-allowed;
2189
+ }
2190
+ .aaravpos-calendar-day {
2191
+ position: relative;
2192
+ }
2193
+ .aaravpos-calendar-day-disabled {
2194
+ background: rgba(0, 0, 0, 0.03);
2195
+ cursor: not-allowed;
2196
+ opacity: 0.6;
2197
+ }
2198
+ .aaravpos-calendar-day-slash {
2199
+ position: absolute;
2200
+ inset: 0;
2201
+ display: flex;
2202
+ align-items: center;
2203
+ justify-content: center;
2204
+ pointer-events: none;
2205
+ }
2206
+ .aaravpos-calendar-day-slash::after {
2207
+ content: "";
2208
+ width: 140%;
2209
+ height: 1.5px;
2210
+ background: var(--app-bg);
2211
+ transform: rotate(-45deg);
2212
+ }
2213
+ .aaravpos-calendar-day-text {
2214
+ position: relative;
2215
+ z-index: 2;
2216
+ }
2217
+ .arravpos-date-card-disabled {
2218
+ position: relative;
2219
+ opacity: 0.6;
2220
+ cursor: not-allowed;
2221
+ overflow: hidden;
2222
+ }
2223
+ .arravpos-date-disabled-slash {
2224
+ position: absolute;
2225
+ top: 50%;
2226
+ left: -20%;
2227
+ width: 140%;
2228
+ height: 2px;
2229
+ background: #111;
2230
+ transform: rotate(-45deg);
2231
+ z-index: 1;
2232
+ }
2233
+ .arravpos-date-unavailable {
2234
+ font-size: 8px;
2235
+ font-weight: 700;
2236
+ margin-top: 2px;
2237
+ }
2238
+ .aaravpos-professional-skeleton {
2239
+ position: relative;
2240
+ height: 82px;
2241
+ overflow: hidden;
2242
+ border-radius: 4px;
2243
+ background: #e0e0e0;
2244
+ }
2245
+ .aaravpos-professional-skeleton::before {
2246
+ content: "";
2247
+ position: absolute;
2248
+ top: 0;
2249
+ left: -100%;
2250
+ width: 100%;
2251
+ height: 100%;
2252
+ background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
2253
+ animation: aaravposShimmer 1.2s infinite;
2254
+ }
2255
+ .aaravpos-spinner-wrapper {
2256
+ display: flex;
2257
+ align-items: center;
2258
+ justify-content: center;
2259
+ }
2260
+ .aaravpos-spinner {
2261
+ width: 40px;
2262
+ height: 40px;
2263
+ border: 4px solid var(--btn-bg-hover);
2264
+ border-top-color: transparent;
2265
+ border-radius: 50%;
2266
+ animation: aaravposSpin 0.8s linear infinite;
2267
+ }
2268
+ .aaravpos-calendar-grid .cal-avail.cal-selected:after {
2269
+ background: #fff9;
2270
+ }
2271
+ .aaravpos-calendar-grid .cal-avail:after {
2272
+ content: "";
2273
+ background: var(--color-brand-green);
2274
+ border-radius: 50%;
2275
+ width: 3px;
2276
+ height: 3px;
2277
+ position: absolute;
2278
+ bottom: 2px;
2279
+ left: 50%;
2280
+ transform: translate(-50%);
2281
+ }
2282
+ .aaravpos-empty-services {
2283
+ grid-column: 1/-1;
2284
+ display: flex;
2285
+ flex-direction: column;
2286
+ align-items: center;
2287
+ justify-content: center;
2288
+ padding: 24px;
2289
+ text-align: center;
2290
+ border: 1px dashed rgba(0, 0, 0, 0.2);
2291
+ border-radius: 8px;
2292
+ height: 160px;
2293
+ }
2294
+ .aaravpos-empty-services-title {
2295
+ margin-bottom: 8px;
2296
+ font-size: 18px;
2297
+ font-weight: 600;
2298
+ color: #111827;
2299
+ }
2300
+ .aaravpos-empty-services-text {
2301
+ max-width: 500px;
2302
+ font-size: 14px;
2303
+ line-height: 1.5;
2304
+ color: rgba(0, 0, 0, 0.5);
2305
+ }
2306
+ .arravpos-details-section {
2307
+ margin-top: 20px;
2308
+ }
2309
+ .arravpos-details-scroll {
2310
+ overflow-y: auto;
2311
+ padding-bottom: 30px;
2312
+ scrollbar-width: none;
2313
+ height: 565px;
2314
+ }
2315
+ .arravpos-details-scroll::-webkit-scrollbar {
2316
+ display: none;
2317
+ }
2318
+ .arravpos-details-grid {
2319
+ display: grid;
2320
+ grid-template-columns: 1fr;
2321
+ gap: 16px;
2322
+ }
2323
+ .arravpos-form-group {
2324
+ display: flex;
2325
+ flex-direction: column;
2326
+ width: 100%;
2327
+ }
2328
+ .arravpos-form-label {
2329
+ font-size: 12px;
2330
+ font-weight: 600;
2331
+ color: #4b5563;
2332
+ margin-bottom: 6px;
2333
+ display: flex;
2334
+ align-items: center;
2335
+ gap: 4px;
2336
+ }
2337
+ .arravpos-required {
2338
+ color: #ef4444;
2339
+ }
2340
+ .arravpos-input-wrapper {
2341
+ position: relative;
2342
+ width: 100%;
2343
+ }
2344
+ .arravpos-custom-input {
2345
+ border: 1px solid #d1d5db;
2346
+ border-radius: 4px;
2347
+ padding: 10px 12px;
2348
+ font-size: 14px;
2349
+ outline: none;
2350
+ transition: all 0.3s ease;
2351
+ background-color: #ffffff;
2352
+ }
2353
+ .arravpos-custom-input:focus, .arravpos-custom-input input:focus {
2354
+ border-color: black;
2355
+ }
2356
+ .arravpos-error-text {
2357
+ margin-top: 6px;
2358
+ font-size: 13px;
2359
+ color: #ef4444;
2360
+ }
2361
+ .arravpos-autofill-text {
2362
+ margin-top: 6px;
2363
+ font-size: 12px;
2364
+ color: #6b7280;
2365
+ display: flex;
2366
+ align-items: center;
2367
+ gap: 4px;
2368
+ }
2369
+ .arravpos-clear-text {
2370
+ color: #dc2626;
2371
+ cursor: pointer;
2372
+ font-weight: 500;
2373
+ }
2374
+ .arravpos-loader-wrapper {
2375
+ position: absolute;
2376
+ right: 10px;
2377
+ top: 50%;
2378
+ transform: translateY(-50%);
2379
+ z-index: 999;
2380
+ }
2381
+ .arravpos-loader {
2382
+ width: 16px;
2383
+ height: 16px;
2384
+ border: 2px solid #d1d5db;
2385
+ border-top-color: #000000;
2386
+ border-radius: 50%;
2387
+ animation: arravpos-spin 0.8s linear infinite;
2388
+ }
2389
+ .arravpos-booking-wrapper {
2390
+ width: 100%;
2391
+ max-width: 100%;
2392
+ }
2393
+ .arravpos-outlet-info {
2394
+ display: flex;
2395
+ align-items: center;
2396
+ gap: 12px;
2397
+ padding: 12px;
2398
+ border-radius: 4px;
2399
+ margin-bottom: 4px;
2400
+ border: 1px solid #e5e7eb;
2401
+ }
2402
+ .arravpos-outlet-logo {
2403
+ width: 40px;
2404
+ height: 40px;
2405
+ border-radius: 4px;
2406
+ overflow: hidden;
2407
+ flex-shrink: 0;
2408
+ display: flex;
2409
+ align-items: center;
2410
+ justify-content: center;
2411
+ }
2412
+ .arravpos-outlet-logo-img {
2413
+ width: 100%;
2414
+ height: 100%;
2415
+ object-fit: cover;
2416
+ }
2417
+ .arravpos-outlet-content {
2418
+ flex: 1;
2419
+ min-width: 0;
2420
+ }
2421
+ .arravpos-outlet-name {
2422
+ font-size: 14px;
2423
+ font-weight: 600;
2424
+ color: #111827;
2425
+ margin: 0;
2426
+ line-height: 1.4;
2427
+ }
2428
+ .arravpos-outlet-address {
2429
+ font-size: 12px;
2430
+ color: rgba(0, 0, 0, 0.7);
2431
+ margin-top: 2px;
2432
+ line-height: 1.5;
2433
+ word-break: break-word;
2434
+ }
2435
+ .arravpos-booking-scroll {
2436
+ overflow-y: auto;
2437
+ scrollbar-width: none;
2438
+ height: 495px;
2439
+ padding-bottom: 15px;
2440
+ }
2441
+ .arravpos-booking-scroll::-webkit-scrollbar {
2442
+ display: none;
2443
+ }
2444
+ .arravpos-booking-grid {
2445
+ display: flex;
2446
+ gap: 28px;
2447
+ justify-content: space-between;
2448
+ }
2449
+ .arravpos-booking-column {
2450
+ width: 100%;
2451
+ min-width: 0;
2452
+ }
2453
+ .arravpos-appointment-header {
2454
+ display: flex;
2455
+ align-items: center;
2456
+ gap: 12px;
2457
+ }
2458
+ .arravpos-appointment-content {
2459
+ flex: 1;
2460
+ min-width: 0;
2461
+ }
2462
+ .arravpos-appointment-name {
2463
+ font-size: 14px;
2464
+ font-weight: 600;
2465
+ color: #111827;
2466
+ margin: 0;
2467
+ }
2468
+ .arravpos-appointment-services {
2469
+ font-size: 12px;
2470
+ color: #6b7280;
2471
+ margin-top: 2px;
2472
+ overflow: hidden;
2473
+ text-overflow: ellipsis;
2474
+ white-space: nowrap;
2475
+ margin-bottom: 0px;
2476
+ }
2477
+ .arravpos-appointment-price {
2478
+ font-family: monospace;
2479
+ font-weight: 600;
2480
+ font-size: 15px;
2481
+ color: #111827;
2482
+ white-space: nowrap;
2483
+ align-items: center;
2484
+ display: flex;
2485
+ flex-direction: row;
2486
+ }
2487
+ .arravpos-appointment-date {
2488
+ display: flex;
2489
+ align-items: center;
2490
+ gap: 8px;
2491
+ margin-top: 12px;
2492
+ padding-top: 12px;
2493
+ border-top: 1px solid #e5e7eb;
2494
+ }
2495
+ .arravpos-appointment-date-text {
2496
+ font-size: 14px;
2497
+ font-weight: 600;
2498
+ color: #111827;
2499
+ }
2500
+ .arravpos-success-wrapper {
2501
+ overflow-y: auto;
2502
+ scrollbar-width: none;
2503
+ height: 700px;
2504
+ }
2505
+ .arravpos-success-wrapper::-webkit-scrollbar {
2506
+ display: none;
2507
+ }
2508
+ .arravpos-success-motion {
2509
+ display: flex;
2510
+ flex-direction: column;
2511
+ height: 668px;
2512
+ align-items: center;
2513
+ justify-content: center;
2514
+ background: var(--canvas);
2515
+ text-align: center;
2516
+ padding: 16px;
2517
+ }
2518
+ .arravpos-success-icon {
2519
+ width: 34px;
2520
+ height: 34px;
2521
+ background: var(--btn-bg);
2522
+ color: var(--btn-text);
2523
+ border-radius: 9999px;
2524
+ flex-shrink: 0;
2525
+ display: flex;
2526
+ align-items: center;
2527
+ justify-content: center;
2528
+ font-size: 36px;
2529
+ margin-bottom: 24px;
2530
+ }
2531
+ .arravpos-success-title {
2532
+ font-family: "Bebas Neue", sans-serif;
2533
+ font-size: 20px;
2534
+ margin-bottom: 8px;
2535
+ }
2536
+ .arravpos-success-description {
2537
+ font-size: 14px;
2538
+ color: var(--muted);
2539
+ margin-bottom: 10px;
2540
+ line-height: 1.625;
2541
+ margin-top: 0px;
2542
+ }
2543
+ .arravpos-success-content {
2544
+ width: 100%;
2545
+ max-width: 570px;
2546
+ }
2547
+ .arravpos-success-card {
2548
+ background: #ffffff;
2549
+ border-radius: 6px;
2550
+ text-align: left;
2551
+ margin-bottom: 10px;
2552
+ padding: 10px;
2553
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
2554
+ height: 400px;
2555
+ overflow-x: scroll;
2556
+ scrollbar-width: none;
2557
+ -ms-overflow-style: none;
2558
+ }
2559
+ .arravpos-success-row {
2560
+ display: flex;
2561
+ justify-content: space-between;
2562
+ padding-top: 8px;
2563
+ padding-bottom: 8px;
2564
+ border-bottom: 1px solid #f3f4f6;
2565
+ }
2566
+ .arravpos-success-row-first {
2567
+ padding-top: 0;
2568
+ }
2569
+ .arravpos-total-row {
2570
+ display: flex;
2571
+ justify-content: space-between;
2572
+ padding-top: 16px;
2573
+ padding-bottom: 0;
2574
+ }
2575
+ .arravpos-label {
2576
+ color: #4b5563;
2577
+ font-size: 14px;
2578
+ font-weight: 700;
2579
+ }
2580
+ .arravpos-services-label {
2581
+ color: #6b7280;
2582
+ font-size: 14px;
2583
+ font-weight: 700;
2584
+ }
2585
+ .arravpos-value {
2586
+ font-size: 14px;
2587
+ font-weight: 500;
2588
+ color: #1f2937;
2589
+ }
2590
+ .arravpos-price {
2591
+ display: flex;
2592
+ flex-direction: row;
2593
+ align-items: center;
2594
+ color: #1f2937;
2595
+ font-weight: 600;
2596
+ }
2597
+ .arravpos-total-price {
2598
+ display: flex;
2599
+ flex-direction: row;
2600
+ align-items: center;
2601
+ color: var(--red);
2602
+ font-weight: 600;
2603
+ }
2604
+ .arravpos-services-header {
2605
+ align-items: center;
2606
+ }
2607
+ .arravpos-services-list {
2608
+ padding-top: 8px;
2609
+ padding-bottom: 8px;
2610
+ border-bottom: 1px solid #f3f4f6;
2611
+ color: #4b5563;
2612
+ font-size: 14px;
2613
+ font-weight: 700;
2614
+ white-space: pre-wrap;
2615
+ overflow-y: auto;
2616
+ max-height: 23vh;
2617
+ }
2618
+ .arravpos-service-row {
2619
+ display: flex;
2620
+ justify-content: space-between;
2621
+ font-size: 14px;
2622
+ padding-top: 6px;
2623
+ padding-bottom: 6px;
2624
+ }
2625
+ .arravpos-service-name {
2626
+ color: #374151;
2627
+ }
2628
+ .arravpos-service-price {
2629
+ color: #111827;
2630
+ display: flex;
2631
+ flex-direction: row;
2632
+ align-items: center;
2633
+ }
2634
+ .arravpos-more-services {
2635
+ text-align: center;
2636
+ font-size: 12px;
2637
+ color: #6b7280;
2638
+ margin-top: 8px;
2639
+ display: flex;
2640
+ flex-direction: row;
2641
+ align-items: center;
2642
+ justify-content: center;
2643
+ gap: 4px;
2644
+ }
2645
+ .arravpos-show-btn {
2646
+ color: #2563eb;
2647
+ font-size: 12px;
2648
+ font-weight: 500;
2649
+ cursor: pointer;
2650
+ background: transparent;
2651
+ border: none;
2652
+ }
2653
+ .arravpos-show-btn-inner {
2654
+ display: flex;
2655
+ flex-direction: row;
2656
+ align-items: center;
2657
+ gap: 4px;
2658
+ }
2659
+ .arravpos-book-btn {
2660
+ background: var(--btn-bg);
2661
+ color: var(--btn-text);
2662
+ border: 1px solid var(--btn-bg);
2663
+ padding: 8px 28px;
2664
+ cursor: pointer;
2665
+ font-size: 14px;
2666
+ width: 100%;
2667
+ display: flex;
2668
+ flex-direction: row;
2669
+ align-items: center;
2670
+ justify-content: center;
2671
+ gap: 8px;
2672
+ text-transform: uppercase;
2673
+ letter-spacing: 0.05em;
2674
+ border-radius: 4px;
2675
+ transition: all 0.3s ease;
2676
+ }
2677
+ .arravpos-book-btn:hover {
2678
+ color: var(--btn-text-hover);
2679
+ border-color: var(--btn-bg-hover);
2680
+ background: var(--btn-bg-hover);
2681
+ }
2682
+ .arravpos-payment-overlay {
2683
+ position: fixed;
2684
+ inset: 0;
2685
+ display: flex;
2686
+ align-items: center;
2687
+ justify-content: center;
2688
+ background-color: rgba(0, 0, 0, 0.4);
2689
+ z-index: 1025;
2690
+ padding: 16px;
2691
+ }
2692
+ .arravpos-payment-form {
2693
+ width: 100%;
2694
+ margin: auto;
2695
+ display: flex;
2696
+ align-items: center;
2697
+ justify-content: center;
2698
+ }
2699
+ .aaravpos-modal {
2700
+ background: #fff;
2701
+ border-radius: 16px;
2702
+ width: 100%;
2703
+ max-width: 100%;
2704
+ padding: 24px;
2705
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
2706
+ box-sizing: border-box;
2707
+ }
2708
+ .arravpos-payment-header {
2709
+ display: flex;
2710
+ justify-content: space-between;
2711
+ margin-bottom: 20px;
2712
+ }
2713
+ .arravpos-payment-title {
2714
+ font-size: 18px;
2715
+ font-weight: 600;
2716
+ color: #111827;
2717
+ margin: 0px;
2718
+ }
2719
+ .arravpos-payment-amount {
2720
+ display: flex;
2721
+ flex-direction: row;
2722
+ align-items: center;
2723
+ font-weight: 600;
2724
+ color: #111827;
2725
+ }
2726
+ .arravpos-payment-fields {
2727
+ display: flex;
2728
+ flex-direction: column;
2729
+ gap: 16px;
2730
+ }
2731
+ .arravpos-payment-label {
2732
+ font-size: 12px;
2733
+ font-weight: 600;
2734
+ color: #4b5563;
2735
+ display: flex;
2736
+ margin-bottom: 4px;
2737
+ }
2738
+ .arravpos-payment-required {
2739
+ color: #ef4444;
2740
+ }
2741
+ .arravpos-payment-input {
2742
+ width: 100%;
2743
+ padding: 10px 12px;
2744
+ border: 1px solid red;
2745
+ border-radius: 2px;
2746
+ font-size: 14px;
2747
+ outline: none;
2748
+ transition: border-color 0.2s ease;
2749
+ }
2750
+ .arravpos-payment-input:focus {
2751
+ border-color: var(--red);
2752
+ }
2753
+ .arravpos-payment-error {
2754
+ color: #ef4444;
2755
+ font-size: 14px;
2756
+ margin-top: 4px;
2757
+ }
2758
+ .arravpos-payment-grid {
2759
+ display: grid;
2760
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2761
+ gap: 16px;
2762
+ }
2763
+ .arravpos-payment-btn-grid {
2764
+ display: grid;
2765
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2766
+ gap: 16px;
2767
+ margin-top: 20px;
2768
+ }
2769
+ .arravpos-payment-cancel-btn {
2770
+ padding: 10px 16px;
2771
+ cursor: pointer;
2772
+ border-radius: 6px;
2773
+ border: none;
2774
+ background: linear-gradient(to right, #ef4444, #dc2626);
2775
+ color: #ffffff;
2776
+ }
2777
+ .arravpos-payment-submit-btn {
2778
+ padding: 8px 16px;
2779
+ border-radius: 6px;
2780
+ cursor: pointer;
2781
+ border: none;
2782
+ background: #16a34a;
2783
+ color: #ffffff;
2784
+ transition: opacity 0.2s ease;
2785
+ }
2786
+ .arravpos-payment-submit-btn:disabled {
2787
+ opacity: 0.5;
2788
+ cursor: not-allowed;
2789
+ }
2790
+ .arravpos-consent-overlay {
2791
+ position: fixed;
2792
+ inset: 0;
2793
+ z-index: 1025;
2794
+ display: flex;
2795
+ align-items: center;
2796
+ justify-content: center;
2797
+ background-color: rgba(0, 0, 0, 0.4);
2798
+ padding: 16px;
2799
+ }
2800
+ .arravpos-consent-backdrop {
2801
+ position: fixed;
2802
+ inset: 0;
2803
+ background-color: rgba(0, 0, 0, 0.6);
2804
+ }
2805
+ .arravpos-consent-modal {
2806
+ position: relative;
2807
+ z-index: 10;
2808
+ width: 90%;
2809
+ max-height: 95vh;
2810
+ overflow-y: auto;
2811
+ background-color: #ffffff;
2812
+ border-radius: 12px;
2813
+ padding: 16px;
2814
+ }
2815
+ .arravpos-consent-header {
2816
+ display: flex;
2817
+ justify-content: space-between;
2818
+ margin-bottom: 10px;
2819
+ }
2820
+ .arravpos-consent-title {
2821
+ font-size: 16px;
2822
+ font-weight: 600;
2823
+ color: #111827;
2824
+ margin: 0px;
2825
+ }
2826
+ .arravpos-consent-close-btn {
2827
+ color: #9ca3af;
2828
+ cursor: pointer;
2829
+ border: none;
2830
+ background: transparent;
2831
+ transition: color 0.2s ease;
2832
+ }
2833
+ .arravpos-consent-close-btn:hover {
2834
+ color: #4b5563;
2835
+ }
2836
+ .arravpos-consent-content-wrapper {
2837
+ max-height: 42vh;
2838
+ }
2839
+ .arravpos-consent-content-box {
2840
+ border: 1px solid #e5e7eb;
2841
+ border-radius: 6px;
2842
+ padding: 16px;
2843
+ background-color: #f9fafb;
2844
+ }
2845
+ .arravpos-consent-content {
2846
+ color: #374151;
2847
+ white-space: pre-wrap;
2848
+ overflow-y: auto;
2849
+ max-height: 30vh;
2850
+ }
2851
+ .arravpos-consent-checkbox-label {
2852
+ display: flex;
2853
+ gap: 8px;
2854
+ align-items: center;
2855
+ margin-top: 12px;
2856
+ border-color: #e5e7eb;
2857
+ }
2858
+ .arravpos-consent-checkbox {
2859
+ width: 18px;
2860
+ height: 18px;
2861
+ color: #ef4444;
2862
+ background-color: #f3f4f6;
2863
+ border: 1px solid #d1d5db;
2864
+ border-radius: 4px;
2865
+ }
2866
+ .arravpos-consent-checkbox-text {
2867
+ font-size: 14px;
2868
+ font-weight: 500;
2869
+ color: #374151;
2870
+ }
2871
+ .arravpos-consent-typed-wrapper {
2872
+ margin-top: 16px;
2873
+ }
2874
+ .arravpos-consent-input-label {
2875
+ display: block;
2876
+ margin-bottom: 8px;
2877
+ font-size: 14px;
2878
+ font-weight: 500;
2879
+ color: #374151;
2880
+ }
2881
+ .arravpos-consent-required {
2882
+ color: #ef4444;
2883
+ }
2884
+ .arravpos-consent-input {
2885
+ width: 100%;
2886
+ padding: 8px 12px;
2887
+ border-radius: 6px;
2888
+ outline: none;
2889
+ }
2890
+ .arravpos-consent-input-normal {
2891
+ border: 1px solid #d1d5db;
2892
+ }
2893
+ .arravpos-consent-input-error {
2894
+ border: 1px solid #ef4444;
2895
+ }
2896
+ .arravpos-consent-helper-text {
2897
+ margin-top: 4px;
2898
+ font-size: 12px;
2899
+ color: #6b7280;
2900
+ }
2901
+ .arravpos-consent-error {
2902
+ font-size: 14px;
2903
+ color: #ef4444;
2904
+ }
2905
+ .arravpos-consent-signature-wrapper {
2906
+ margin-top: 16px;
2907
+ }
2908
+ .arravpos-consent-signature-canvas {
2909
+ width: 100%;
2910
+ height: 136px;
2911
+ overflow: hidden;
2912
+ border: 1px solid #d1d5db;
2913
+ border-radius: 6px;
2914
+ background-color: #ffffff;
2915
+ }
2916
+ .arravpos-consent-error-signature {
2917
+ margin-top: 4px;
2918
+ margin-bottom: 4px;
2919
+ }
2920
+ .arravpos-consent-signature-actions {
2921
+ display: flex;
2922
+ justify-content: space-between;
2923
+ margin-top: 8px;
2924
+ }
2925
+ .arravpos-consent-clear-btn {
2926
+ display: flex;
2927
+ flex-direction: row;
2928
+ align-items: center;
2929
+ gap: 4px;
2930
+ padding: 4px 8px;
2931
+ font-size: 14px;
2932
+ color: #4b5563;
2933
+ cursor: pointer;
2934
+ border: 1px solid #d1d5db;
2935
+ border-radius: 6px;
2936
+ background: transparent;
2937
+ }
2938
+ .arravpos-consent-clear-btn:hover {
2939
+ color: #1f2937;
2940
+ }
2941
+ .arravpos-consent-email-label {
2942
+ display: flex;
2943
+ gap: 8px;
2944
+ align-items: center;
2945
+ cursor: pointer;
2946
+ font-size: 14px;
2947
+ }
2948
+ .arravpos-consent-email-checkbox {
2949
+ width: 16px;
2950
+ height: 16px;
2951
+ accent-color: var(--btn-bg);
2952
+ background-color: #f3f4f6;
2953
+ border: 1px solid #d1d5db;
2954
+ border-radius: 4px;
2955
+ }
2956
+ .arravpos-consent-email-text {
2957
+ font-size: 14px;
2958
+ color: #374151;
2959
+ }
2960
+ .arravpos-consent-footer {
2961
+ display: flex;
2962
+ justify-content: flex-end;
2963
+ gap: 12px;
2964
+ margin-top: 20px;
2965
+ }
2966
+ .arravpos-consent-cancel-btn {
2967
+ padding: 8px 16px;
2968
+ border: 1px solid #d1d5db;
2969
+ border-radius: 6px;
2970
+ background: transparent;
2971
+ color: #374151;
2972
+ cursor: pointer;
2973
+ transition: color 0.2s ease;
2974
+ }
2975
+ .arravpos-consent-cancel-btn:hover {
2976
+ color: #111827;
2977
+ }
2978
+ .arravpos-consent-submit-btn {
2979
+ display: flex;
2980
+ align-items: center;
2981
+ gap: 8px;
2982
+ padding: 8px 16px;
2983
+ border: none;
2984
+ border-radius: 6px;
2985
+ transition: all 0.2s ease;
2986
+ }
2987
+ .arravpos-consent-submit-disabled {
2988
+ background-color: #d1d5db;
2989
+ color: #4b5563;
2990
+ cursor: not-allowed;
2991
+ }
2992
+ .arravpos-consent-submit-active {
2993
+ background-color: var(--btn-bg);
2994
+ color: #ffffff;
2995
+ cursor: pointer;
2996
+ }
2997
+ .arravpos-consent-submit-active:hover {
2998
+ background-color: var(--btn-bg-hover);
2999
+ }
3000
+ .arravpos-date-wrapper {
3001
+ margin-top: 8px;
3002
+ margin-bottom: 14px;
3003
+ display: flex;
3004
+ flex-direction: row;
3005
+ flex-wrap: wrap;
3006
+ }
3007
+ .arravpos-date-strip {
3008
+ display: flex;
3009
+ align-items: stretch;
3010
+ gap: 6px;
3011
+ overflow-x: auto;
3012
+ overflow-y: hidden;
3013
+ scrollbar-width: none;
3014
+ -webkit-overflow-scrolling: touch;
3015
+ scroll-behavior: smooth;
3016
+ }
3017
+ .arravpos-date-strip::-webkit-scrollbar {
3018
+ display: none;
3019
+ }
3020
+ .arravpos-date-card {
3021
+ flex-shrink: 0;
3022
+ display: flex;
3023
+ flex-direction: column;
3024
+ align-items: center;
3025
+ min-width: 26px;
3026
+ min-height: 50px;
3027
+ padding: 6px 8px;
3028
+ border-radius: 2px;
3029
+ cursor: pointer;
3030
+ transition: all 150ms ease;
3031
+ user-select: none;
3032
+ border: 1px solid transparent;
3033
+ }
3034
+ .arravpos-date-card-active {
3035
+ background-color: var(--btn-bg);
3036
+ color: var(--btn-text);
3037
+ border-color: var(--btn-bg);
3038
+ }
3039
+ .arravpos-date-card-default:hover {
3040
+ color: var(--btn-text-hover);
3041
+ border-color: var(--btn-bg-hover);
3042
+ background-color: var(--btn-bg-hover);
3043
+ }
3044
+ .arravpos-date-week {
3045
+ font-size: 10px;
3046
+ text-transform: uppercase;
3047
+ margin-bottom: 4px;
3048
+ line-height: 1;
3049
+ font-weight: 500;
3050
+ }
3051
+ .arravpos-date-day {
3052
+ font-family: monospace;
3053
+ font-size: 18px;
3054
+ line-height: 1;
3055
+ font-weight: 500;
3056
+ }
3057
+ .arravpos-date-today {
3058
+ margin-top: 6px;
3059
+ font-size: 8px;
3060
+ color: var(--red);
3061
+ font-weight: 700;
3062
+ line-height: 1;
3063
+ }
3064
+ .arravpos-calendar-btn {
3065
+ margin-left: 16px;
3066
+ padding: 8px;
3067
+ font-size: 14px;
3068
+ font-weight: 600;
3069
+ display: flex;
3070
+ flex-direction: column;
3071
+ align-items: center;
3072
+ justify-content: center;
3073
+ gap: 6px;
3074
+ border-radius: 2px;
3075
+ cursor: pointer;
3076
+ transition: all 150ms ease;
3077
+ min-width: 50px;
3078
+ user-select: none;
3079
+ background-color: var(--btn-bg);
3080
+ color: #ffffff;
3081
+ border: none;
3082
+ }
3083
+ .arravpos-selected-professional {
3084
+ display: flex;
3085
+ align-items: center;
3086
+ gap: 12px;
3087
+ margin-bottom: 10px;
3088
+ padding: 12px;
3089
+ background-color: var(--surface);
3090
+ border: 1px solid rgb(0 0 0 / 10%);
3091
+ border-radius: 2px;
3092
+ flex-wrap: wrap;
3093
+ }
3094
+ .arravpos-selected-professional-image {
3095
+ width: 40px;
3096
+ height: 40px;
3097
+ border-radius: 9999px;
3098
+ object-fit: cover;
3099
+ flex-shrink: 0;
3100
+ }
3101
+ .arravpos-selected-professional-avatar {
3102
+ width: 40px;
3103
+ height: 40px;
3104
+ border-radius: 9999px;
3105
+ background-color: #111111;
3106
+ color: #ffffff;
3107
+ display: flex;
3108
+ align-items: center;
3109
+ justify-content: center;
3110
+ flex-shrink: 0;
3111
+ }
3112
+ .arravpos-selected-professional-content {
3113
+ flex: 1;
3114
+ min-width: 0;
3115
+ }
3116
+ .arravpos-selected-professional-name {
3117
+ font-size: 14px;
3118
+ font-weight: 600;
3119
+ margin: 0px 0px 4px;
3120
+ }
3121
+ .arravpos-selected-professional-services {
3122
+ font-size: 12px;
3123
+ color: var(--muted);
3124
+ overflow: hidden;
3125
+ text-overflow: ellipsis;
3126
+ white-space: nowrap;
3127
+ margin: 0px;
3128
+ }
3129
+ .arravpos-scroll-area {
3130
+ overflow-y: auto;
3131
+ padding-bottom: 80px;
3132
+ scrollbar-width: none;
3133
+ max-height: 362px;
3134
+ position: relative;
3135
+ }
3136
+ .arravpos-scroll-area::-webkit-scrollbar {
3137
+ display: none;
3138
+ }
3139
+ .arravpos-loader-wrapper {
3140
+ display: flex;
3141
+ align-items: center;
3142
+ justify-content: center;
3143
+ width: 100%;
3144
+ height: 100%;
3145
+ }
3146
+ .arravpos-loader {
3147
+ width: 32px;
3148
+ height: 32px;
3149
+ border-radius: 9999px;
3150
+ border: 3px solid var(--btn-bg);
3151
+ border-top-color: transparent;
3152
+ animation: arravpos-spin 1s linear infinite;
3153
+ }
3154
+ .arravpos-slot-icon {
3155
+ color: #fb923c;
3156
+ }
3157
+ .arravpos-slot-section {
3158
+ margin-bottom: 16px;
3159
+ border: 1px solid rgb(0 0 0 / 10%);
3160
+ border-radius: 2px;
3161
+ overflow: hidden;
3162
+ }
3163
+ .arravpos-slot-section-header {
3164
+ display: flex;
3165
+ align-items: center;
3166
+ justify-content: space-between;
3167
+ padding: 8px 10px;
3168
+ cursor: pointer;
3169
+ background-color: var(--surface);
3170
+ transition: background-color 0.2s ease;
3171
+ }
3172
+ .arravpos-slot-section-header:hover {
3173
+ background-color: rgba(var(--btn-bg), 0.08);
3174
+ }
3175
+ .arravpos-slot-section-title {
3176
+ display: flex;
3177
+ align-items: center;
3178
+ gap: 8px;
3179
+ font-size: 12px;
3180
+ font-weight: 700;
3181
+ text-transform: uppercase;
3182
+ letter-spacing: 1.2px;
3183
+ color: rgba(0, 0, 0, 0.8);
3184
+ }
3185
+ .arravpos-slot-section-arrow {
3186
+ transition: transform 0.2s ease;
3187
+ }
3188
+ .arravpos-slot-section-arrow-open {
3189
+ transform: rotate(180deg);
3190
+ }
3191
+ .arravpos-slot-section-content {
3192
+ padding: 12px;
3193
+ border-top: 1px solid rgb(0 0 0 / 10%);
3194
+ background-color: #ffffff;
3195
+ }
3196
+ .arravpos-slot-grid {
3197
+ display: grid;
3198
+ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
3199
+ gap: 8px;
3200
+ }
3201
+ .arravpos-slot-card {
3202
+ display: flex;
3203
+ flex-direction: column;
3204
+ align-items: center;
3205
+ justify-content: center;
3206
+ padding: 12px;
3207
+ gap: 4px;
3208
+ border: 1px solid rgb(0 0 0 / 10%);
3209
+ border-radius: 2px;
3210
+ transition: all 0.2s ease;
3211
+ }
3212
+ .arravpos-slot-card-default {
3213
+ background-color: #ffffff;
3214
+ cursor: pointer;
3215
+ }
3216
+ .arravpos-slot-card-default:hover {
3217
+ color: var(--btn-bg);
3218
+ border-color: var(--btn-bg);
3219
+ }
3220
+ .arravpos-slot-card-selected {
3221
+ background-color: #fff8f8;
3222
+ color: var(--btn-bg);
3223
+ border-color: rgb(0 0 0 / 10%);
3224
+ cursor: pointer;
3225
+ }
3226
+ .arravpos-slot-card-disabled {
3227
+ background-color: #f3f4f6;
3228
+ color: #9ca3af;
3229
+ cursor: not-allowed;
3230
+ }
3231
+ .arravpos-slot-time {
3232
+ font-family: monospace;
3233
+ font-size: 14px;
3234
+ }
3235
+ .arravpos-slot-status {
3236
+ font-size: 10px;
3237
+ }
3238
+ .aaravpos-staff-wrapper {
3239
+ overflow-y: auto;
3240
+ padding-bottom: 40px;
3241
+ scrollbar-width: none;
3242
+ -ms-overflow-style: none;
3243
+ height: 540px;
3244
+ }
3245
+ .aaravpos-staff-wrapper::-webkit-scrollbar {
3246
+ display: none;
3247
+ }
3248
+ .arravpos-profile-image {
3249
+ width: 40px;
3250
+ height: 40px;
3251
+ border-radius: 9999px;
3252
+ object-fit: cover;
3253
+ flex-shrink: 0;
3254
+ }
3255
+ .arravpos-profile-avatar {
3256
+ width: 40px;
3257
+ height: 40px;
3258
+ border-radius: 9999px;
3259
+ background-color: #000000;
3260
+ color: #ffffff;
3261
+ display: flex;
3262
+ align-items: center;
3263
+ justify-content: center;
3264
+ flex-shrink: 0;
3265
+ }
3266
+ .arravpos-card-box {
3267
+ background-color: #ffffff;
3268
+ border: 1px solid var(--btn-bg);
3269
+ border-radius: 2px;
3270
+ padding: 16px;
3271
+ margin-bottom: 8px;
3272
+ font-size: 14px;
3273
+ }
3274
+ .arravpos-section-label {
3275
+ margin-top: 20px;
3276
+ margin-bottom: 8px;
3277
+ font-size: 10px;
3278
+ font-weight: 700;
3279
+ text-transform: uppercase;
3280
+ letter-spacing: 1.5px;
3281
+ color: rgba(0, 0, 0, 0.7);
3282
+ }
3283
+ .arravpos-select-card {
3284
+ display: flex;
3285
+ flex-direction: row;
3286
+ align-items: center;
3287
+ gap: 12px;
3288
+ padding: 12px;
3289
+ border-radius: 2px;
3290
+ cursor: pointer;
3291
+ margin-bottom: 8px;
3292
+ border: 1px solid;
3293
+ }
3294
+ .arravpos-select-card-default {
3295
+ border-color: var(--border);
3296
+ background-color: transparent;
3297
+ }
3298
+ .arravpos-select-card-active {
3299
+ border-color: var(--red);
3300
+ background-color: rgba(255, 0, 0, 0.05);
3301
+ }
3302
+ .arravpos-select-check {
3303
+ margin-left: auto;
3304
+ display: flex;
3305
+ align-items: center;
3306
+ justify-content: center;
3307
+ flex-shrink: 0;
3308
+ }
3309
+ .arravpos-date-nav-btn {
3310
+ flex-shrink: 0;
3311
+ width: 34px;
3312
+ background-color: rgb(242, 240, 236);
3313
+ border: 1px solid rgb(222, 218, 212);
3314
+ padding: 8px;
3315
+ border-radius: 2px;
3316
+ cursor: pointer;
3317
+ font-size: 14px;
3318
+ color: var(--muted);
3319
+ display: flex;
3320
+ align-items: center;
3321
+ justify-content: center;
3322
+ align-self: stretch;
3323
+ transition: all 150ms ease;
3324
+ }
3325
+ .arravpos-date-nav-btn:hover {
3326
+ border-color: var(--red);
3327
+ color: var(--red);
3328
+ background-color: rgba(215, 38, 61, 0.12);
3329
+ }
3330
+ .aaravpos-loading-container {
3331
+ display: flex;
3332
+ align-items: center;
3333
+ justify-content: center;
3334
+ height: 700px;
3335
+ }
3336
+ .aaravpos-loading-text {
3337
+ font-size: 14px;
3338
+ color: #222;
3339
+ }
3340
+ .aaravpos-error-container {
3341
+ display: flex;
3342
+ flex-direction: column;
3343
+ align-items: center;
3344
+ justify-content: center;
3345
+ height: 700px;
3346
+ padding: 20px;
3347
+ text-align: center;
3348
+ }
3349
+ .aaravpos-error-text {
3350
+ color: #dc2626;
3351
+ margin-bottom: 16px;
3352
+ font-size: 14px;
3353
+ font-weight: 500;
3354
+ }
3355
+ .aaravpos-book-btn {
3356
+ display: flex;
3357
+ align-items: center;
3358
+ gap: 8px;
3359
+ padding: 12px 28px;
3360
+ background: var(--btn-bg);
3361
+ color: var(--btn-text);
3362
+ border: 1px solid var(--btn-bg);
3363
+ border-radius: 4px;
3364
+ cursor: pointer;
3365
+ text-transform: uppercase;
3366
+ letter-spacing: 0.5px;
3367
+ font-size: 16px;
3368
+ transition: all 0.2s ease;
3369
+ }
3370
+ .aaravpos-book-btn:hover {
3371
+ background: var(--btn-bg-hover);
3372
+ border-color: var(--btn-bg-hover);
3373
+ color: var(--btn-text-hover);
3374
+ }
3375
+ .aaravpos-form-control {
3376
+ display: flex;
3377
+ flex-direction: column;
3378
+ }
3379
+ .aaravpos-loader-wrapper {
3380
+ display: flex;
3381
+ align-items: center;
3382
+ justify-content: center;
3383
+ height: 610px;
3384
+ }
3385
+ .aaravpos-loader {
3386
+ width: 24px;
3387
+ height: 24px;
3388
+ border: 4px solid #e5e5e5;
3389
+ border-top-color: var(--btn-bg);
3390
+ border-radius: 50%;
3391
+ animation: aaravpos-spin 0.8s linear infinite;
3392
+ }
3393
+ @media (min-width: 640px) {
3394
+ .custom-container {
3395
+ padding-left: 32px;
3396
+ padding-right: 32px;
3397
+ }
3398
+ .aaravpos-title {
3399
+ font-size: 28px;
3400
+ }
3401
+ .aaravpos-outlet-grid {
3402
+ grid-template-columns: repeat(2, 1fr);
3403
+ }
3404
+ .aaravpos-modal {
3405
+ max-width: 32rem;
3406
+ }
3407
+ }
3408
+ @media (max-width: 768px) {
3409
+ .arravpos-select-card {
3410
+ gap: 10px;
3411
+ padding: 10px;
3412
+ }
3413
+ .aaravpos-common-btn {
3414
+ padding: 14px 8px;
3415
+ font-size: 12px;
3416
+ }
3417
+ .aaravpos-date-modal {
3418
+ height: fit-content;
3419
+ border-radius: 12px;
3420
+ }
3421
+ .aaravpos-date-modal-title {
3422
+ font-size: 18px;
3423
+ }
3424
+ .aaravpos-calendar-grid {
3425
+ gap: 8px;
3426
+ }
3427
+ .arravpos-date-nav-btn svg {
3428
+ width: 18px;
3429
+ height: 18px;
3430
+ }
3431
+ .arravpos-date-strip {
3432
+ gap: 5px;
3433
+ }
3434
+ .arravpos-date-week {
3435
+ font-size: 9px;
3436
+ }
3437
+ .arravpos-date-day {
3438
+ font-size: 20px;
3439
+ }
3440
+ .arravpos-date-today {
3441
+ font-size: 7px;
3442
+ }
3443
+ .arravpos-select-check svg {
3444
+ width: 18px;
3445
+ height: 18px;
3446
+ }
3447
+ .arravpos-card-box {
3448
+ padding: 14px;
3449
+ font-size: 13px;
3450
+ }
3451
+ .arravpos-calendar-btn {
3452
+ font-size: 12px;
3453
+ }
3454
+ .arravpos-outlet-info {
3455
+ padding: 10px;
3456
+ }
3457
+ .arravpos-outlet-logo {
3458
+ width: 36px;
3459
+ height: 36px;
3460
+ }
3461
+ .arravpos-appointment-header {
3462
+ align-items: flex-start;
3463
+ }
3464
+ .arravpos-appointment-price {
3465
+ font-size: 14px;
3466
+ }
3467
+ .arravpos-appointment-services {
3468
+ white-space: normal;
3469
+ display: -webkit-box;
3470
+ -webkit-line-clamp: 2;
3471
+ line-clamp: 2;
3472
+ -webkit-box-orient: vertical;
3473
+ }
3474
+ .aaravpos-page-title {
3475
+ font-size: 16px;
3476
+ }
3477
+ .aaravpos-topbar {
3478
+ gap: 10px;
3479
+ }
3480
+ .aaravpos-btn-content {
3481
+ gap: 4px;
3482
+ }
3483
+ .aaravpos-margin-top-20 {
3484
+ margin-top: 14px;
3485
+ }
3486
+ .aaravpos-mobile-step-label {
3487
+ font-size: 14px;
3488
+ }
3489
+ .aaravpos-outlet-card-title {
3490
+ font-size: 16px;
3491
+ }
3492
+ .aaravpos-title {
3493
+ font-size: 18px;
3494
+ }
3495
+ .aaravpos-outlet-grid {
3496
+ gap: 10px;
3497
+ }
3498
+ }
3499
+ @media (min-width: 768px) {
3500
+ .arravpos-section-label {
3501
+ margin-top: 18px;
3502
+ font-size: 9px;
3503
+ letter-spacing: 1.3px;
3504
+ }
3505
+ .arravpos-profile-avatar {
3506
+ width: 36px;
3507
+ height: 36px;
3508
+ font-size: 14px;
3509
+ }
3510
+ .arravpos-profile-image {
3511
+ width: 36px;
3512
+ height: 36px;
3513
+ }
3514
+ .aaravpos-desktop-stepper {
3515
+ display: flex;
3516
+ align-items: center;
3517
+ gap: 16px;
3518
+ width: 100%;
3519
+ }
3520
+ .aaravpos-services-wrapper.standalone {
3521
+ height: calc(100dvh - 300px);
3522
+ }
3523
+ .aaravpos-services-wrapper.standalone {
3524
+ height: calc(100dvh - 300px);
3525
+ }
3526
+ .aaravpos-mobile-button {
3527
+ display: none;
3528
+ }
3529
+ .aaravpos-sidebar-mobile-content {
3530
+ padding-left: 24px;
3531
+ padding-right: 24px;
3532
+ }
3533
+ .aaravpos-order-list {
3534
+ height: calc(100dvh - 300px);
3535
+ }
3536
+ .aaravpos-pro-order-list {
3537
+ height: calc(100dvh - 380px);
3538
+ }
3539
+ .arravpos-details-grid {
3540
+ grid-template-columns: repeat(2, 1fr);
3541
+ gap: 20px;
3542
+ }
3543
+ .aaravpos-modal {
3544
+ max-width: 36rem;
3545
+ }
3546
+ }
3547
+ @media (max-width: 480px) {
3548
+ .arravpos-date-nav-btn {
3549
+ width: 23px;
3550
+ padding: 6px;
3551
+ }
3552
+ .arravpos-date-nav-btn svg {
3553
+ width: 16px;
3554
+ height: 16px;
3555
+ }
3556
+ .arravpos-date-strip {
3557
+ gap: 4px;
3558
+ }
3559
+ .arravpos-date-card {
3560
+ min-width: 24px;
3561
+ min-height: 38px;
3562
+ padding: 8px 4px;
3563
+ }
3564
+ .arravpos-calendar-btn {
3565
+ margin-left: 2px;
3566
+ padding: 6px;
3567
+ }
3568
+ .arravpos-date-week {
3569
+ font-size: 8px;
3570
+ margin-bottom: 3px;
3571
+ }
3572
+ .arravpos-date-day {
3573
+ font-size: 18px;
3574
+ }
3575
+ .arravpos-date-today {
3576
+ margin-top: 4px;
3577
+ font-size: 6px;
3578
+ }
3579
+ .arravpos-select-check svg {
3580
+ width: 16px;
3581
+ height: 16px;
3582
+ }
3583
+ .arravpos-select-card {
3584
+ gap: 8px;
3585
+ padding: 8px;
3586
+ }
3587
+ .arravpos-section-label {
3588
+ margin-top: 16px;
3589
+ font-size: 8px;
3590
+ letter-spacing: 1.1px;
3591
+ }
3592
+ .arravpos-card-box {
3593
+ padding: 12px;
3594
+ font-size: 12px;
3595
+ }
3596
+ .arravpos-profile-image {
3597
+ width: 32px;
3598
+ height: 32px;
3599
+ }
3600
+ .arravpos-profile-avatar {
3601
+ width: 32px;
3602
+ height: 32px;
3603
+ font-size: 12px;
3604
+ }
3605
+ .arravpos-outlet-name {
3606
+ font-size: 13px;
3607
+ }
3608
+ .arravpos-outlet-address {
3609
+ font-size: 11px;
3610
+ }
3611
+ .arravpos-appointment-name {
3612
+ font-size: 13px;
3613
+ }
3614
+ .arravpos-appointment-date-text {
3615
+ font-size: 13px;
3616
+ }
3617
+ .aaravpos-date-modal {
3618
+ width: 290px;
3619
+ }
3620
+ .aaravpos-calendar-day {
3621
+ height: 24px;
3622
+ width: 24px;
3623
+ }
3624
+ }
3625
+ @media (max-width: 543px) {
3626
+ .arravpos-date-wrapper {
3627
+ justify-content: space-between;
3628
+ }
3629
+ .aaravpos-services-grid {
3630
+ grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
3631
+ }
3632
+ }
3633
+ @media (min-width: 991px) {
3634
+ .aaravpos-sidebar {
3635
+ display: block;
3636
+ }
3637
+ .aaravpos-sidebar-close-btn {
3638
+ display: none;
3639
+ }
3640
+ .aaravpos-layout-wrapper.with-sidebar {
3641
+ grid-template-columns: minmax(0, 1fr) 360px;
3642
+ }
3643
+ }
3644
+ @media (max-width: 991px) {
3645
+ .aaravpos-sidebar {
3646
+ display: none;
3647
+ }
3648
+ .aaravpos-btn {
3649
+ display: block;
3650
+ }
3651
+ }
3652
+ @media (min-width: 1024px) {
3653
+ .arravpos-date-strip {
3654
+ gap: 6px;
3655
+ }
3656
+ .custom-container {
3657
+ padding-left: 64px;
3658
+ padding-right: 64px;
3659
+ }
3660
+ .arravpos-consent-modal {
3661
+ width: 60%;
3662
+ }
3663
+ .arravpos-scroll-area {
3664
+ padding-bottom: 16px;
3665
+ }
3666
+ .arravpos-consent-title {
3667
+ font-size: 20px;
3668
+ }
3669
+ .aaravpos-header {
3670
+ flex-direction: row;
3671
+ align-items: center;
3672
+ }
3673
+ .aaravpos-search-wrapper {
3674
+ max-width: 240px;
3675
+ }
3676
+ .aaravpos-outlet-grid {
3677
+ grid-template-columns: repeat(3, 1fr);
3678
+ }
3679
+ .aaravpos-services-title {
3680
+ font-size: 36px;
3681
+ }
3682
+ .aaravpos-services-topbar {
3683
+ flex-direction: row;
3684
+ align-items: flex-end;
3685
+ gap: 32px;
3686
+ }
3687
+ .aaravpos-topbar {
3688
+ flex-direction: row;
3689
+ align-items: flex-end;
3690
+ gap: 32px;
3691
+ }
3692
+ .arravpos-details-scroll {
3693
+ padding-bottom: 16px;
3694
+ }
3695
+ }
3696
+ @media (max-width: 1024px) {
3697
+ .aaravpos-navbar-form {
3698
+ flex-direction: column;
3699
+ margin-bottom: 10px;
3700
+ }
3701
+ .arravpos-booking-grid {
3702
+ flex-direction: column;
3703
+ gap: 20px;
3704
+ }
3705
+ }
3706
+ @media (min-width: 1280px) {
3707
+ .aaravpos-title {
3708
+ font-size: 32px;
3709
+ }
3710
+ .aaravpos-outlet-grid {
3711
+ grid-template-columns: repeat(4, 1fr);
3712
+ }
3713
+ }
3714
+ @media (min-width: 1536px) {
3715
+ .aaravpos-outlet-grid {
3716
+ grid-template-columns: repeat(5, 1fr);
3717
+ }
3718
+ }
3719
+ @media (max-width: 1500px) {
3720
+ .aaravpos-professional-grid {
3721
+ grid-template-columns: repeat(4, 1fr);
3722
+ }
3723
+ }
3724
+ @media (max-width: 1200px) {
3725
+ .aaravpos-professional-grid {
3726
+ grid-template-columns: repeat(3, 1fr);
3727
+ }
3728
+ }
3729
+ @media (max-width: 768px) {
3730
+ .aaravpos-professional-header {
3731
+ flex-direction: column;
3732
+ gap: 14px;
3733
+ }
3734
+ .aaravpos-professional-grid {
3735
+ grid-template-columns: repeat(2, 1fr);
3736
+ gap: 20px;
3737
+ }
3738
+ .aaravpos-professional-name {
3739
+ font-size: 20px;
3740
+ }
3741
+ }
3742
+ @media (max-width: 450px) {
3743
+ .aaravpos-professional-grid {
3744
+ grid-template-columns: 1fr;
3745
+ }
3746
+ }
3747
+ @keyframes aaravpos-shimmer {
3748
+ 0% {
3749
+ left: -100%;
3750
+ }
3751
+ 100% {
3752
+ left: 100%;
3753
+ }
3754
+ }
3755
+ @keyframes fadeUp {
3756
+ from {
3757
+ opacity: 0;
3758
+ transform: translateY(8px);
3759
+ }
3760
+ to {
3761
+ opacity: 1;
3762
+ transform: translateY(0);
3763
+ }
3764
+ }
3765
+ @keyframes slotIn {
3766
+ from {
3767
+ opacity: 0;
3768
+ transform: translateY(6px);
3769
+ }
3770
+ to {
3771
+ opacity: 1;
3772
+ transform: translateY(0);
3773
+ }
3774
+ }
3775
+ @keyframes popIn {
3776
+ from {
3777
+ opacity: 0;
3778
+ transform: scale(0.95) translateY(10px);
3779
+ }
3780
+ to {
3781
+ opacity: 1;
3782
+ transform: scale(1) translateY(0);
3783
+ }
3784
+ }
3785
+ @keyframes pulseBrand {
3786
+ 0%, 100% {
3787
+ box-shadow: 0 0 0 16px color-mix(in srgb, var(--app-bg) 12%, transparent);
3788
+ }
3789
+ 50% {
3790
+ box-shadow: 0 0 0 24px color-mix(in srgb, var(--app-bg) 6%, transparent);
3791
+ }
3792
+ }
3793
+ @keyframes aaravposFadeIn {
3794
+ from {
3795
+ opacity: 0;
3796
+ transform: translateY(6px);
3797
+ }
3798
+ to {
3799
+ opacity: 1;
3800
+ transform: translateY(0);
3801
+ }
3802
+ }
3803
+ @keyframes aaravposFadeIn {
3804
+ from {
3805
+ opacity: 0;
3806
+ transform: translateY(12px);
3807
+ }
3808
+ to {
3809
+ opacity: 1;
3810
+ transform: translateY(0);
3811
+ }
3812
+ }
3813
+ @keyframes aaravposPopIn {
3814
+ from {
3815
+ opacity: 0;
3816
+ transform: scale(0.96);
3817
+ }
3818
+ to {
3819
+ opacity: 1;
3820
+ transform: scale(1);
3821
+ }
3822
+ }
3823
+ @keyframes aaravposShimmer {
3824
+ 100% {
3825
+ left: 100%;
3826
+ }
3827
+ }
3828
+ @keyframes aaravposSpin {
3829
+ from {
3830
+ transform: rotate(0deg);
3831
+ }
3832
+ to {
3833
+ transform: rotate(360deg);
3834
+ }
3835
+ }
3836
+ @keyframes arravpos-spin {
3837
+ to {
3838
+ transform: rotate(360deg);
3839
+ }
3840
+ }
3841
+ @keyframes arravpos-spin {
3842
+ to {
3843
+ transform: rotate(360deg);
3844
+ }
3845
+ }
3846
+ @keyframes aaravpos-spin {
3847
+ to {
3848
+ transform: rotate(360deg);
3849
+ }
3850
+ }