@happychef/reservation-sidebar 2.5.3 → 2.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.css +660 -789
  2. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1,805 +1,676 @@
1
- /* src/components/ReservationStepOne/css/valueSelector.css */
2
- .valueSelector_new-reservation-page .valueSelector_value-selector {
3
- display: flex;
4
- flex-direction: column;
5
- gap: 15px;
6
- margin-bottom: 20px;
7
- }
8
- .valueSelector_new-reservation-page .valueSelector_non-absolute {
9
- position: relative !important;
10
- }
11
- .valueSelector_new-reservation-page .valueSelector_non-absolute::before {
12
- background: none;
13
- }
14
- .valueSelector_new-reservation-page .valueSelector_predefined-values {
15
- display: flex;
16
- gap: 10px;
17
- }
18
- .valueSelector_new-reservation-page .valueSelector_predefined-value-button {
19
- flex: 1;
20
- padding: 10px;
21
- border: 1px solid #ccc;
22
- border-radius: var(--border-radius);
23
- background-color: var(--color-white);
24
- cursor: pointer;
25
- font-size: 1rem;
26
- transition: background-color 0.3s ease;
27
- }
28
- .valueSelector_new-reservation-page .valueSelector_predefined-value-button.valueSelector_active,
29
- .valueSelector_new-reservation-page .valueSelector_predefined-value-button:hover {
30
- background-color: var(--color-blue);
31
- color: var(--color-white);
32
- }
33
- .valueSelector_new-reservation-page .valueSelector_slider-container {
34
- display: flex;
35
- align-items: center;
36
- gap: 15px;
37
- }
38
- .valueSelector_new-reservation-page .valueSelector_slider {
39
- flex: 1;
40
- appearance: none;
41
- -webkit-appearance: none;
42
- height: 5px;
43
- background: #ddd;
44
- border-radius: 5px;
45
- outline: none;
46
- }
47
- .valueSelector_new-reservation-page .valueSelector_slider::-webkit-slider-thumb {
48
- -webkit-appearance: none;
49
- appearance: none;
50
- width: 20px;
51
- height: 20px;
52
- background: var(--color-blue);
53
- cursor: pointer;
54
- border-radius: 50%;
55
- }
56
- .valueSelector_new-reservation-page .valueSelector_value-input {
57
- width: 80px;
58
- padding: 10px;
59
- border: 1px solid #ccc;
60
- border-radius: var(--border-radius);
61
- font-size: 1rem;
62
- }
63
-
64
- /* src/components/ReservationStepOne/css/calendar.css */
65
- .calendar_new-reservation-page .calendar_calendar-container {
66
- position: relative;
67
- width: 100%;
68
- }
69
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-display {
70
- display: flex;
71
- align-items: center;
72
- justify-content: space-between;
73
- width: 100%;
74
- padding: 10px;
75
- background-color: #fff;
76
- border: #ccc 1px solid;
77
- cursor: pointer;
78
- user-select: none;
79
- text-align: left;
80
- border-radius: 5px;
81
- }
82
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-display span:first-child {
83
- flex-grow: 1;
84
- }
85
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar {
86
- position: absolute;
87
- z-index: 1000;
88
- width: 100%;
89
- background-color: rgba(255, 255, 255, 1);
90
- border: 1px solid #ccc;
91
- margin-top: 5px;
92
- padding: 10px;
93
- border-radius: 10px;
94
- animation: calendar_fadeInCalendar 0.3s ease-in-out;
95
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
96
- }
97
- @keyframes calendar_fadeInCalendar {
98
- from {
99
- opacity: 0;
100
- }
101
- to {
102
- opacity: 1;
103
- }
104
- }
105
- .calendar_new-reservation-page .calendar_calendar-container .calendar_availability-hold-btn {
106
- font-size: 10px;
107
- }
108
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header {
109
- display: flex;
110
- justify-content: space-between;
111
- align-items: center;
112
- margin-bottom: 10px;
113
- gap: 8px;
114
- flex-wrap: wrap;
115
- }
116
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header button {
117
- background-color: transparent;
118
- border: none;
119
- cursor: pointer;
120
- font-size: 18px;
121
- }
122
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header span {
123
- font-size: 15px;
124
- color: gray;
125
- font-weight: 500;
126
- }
127
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-weeks-wrapper {
128
- overflow: hidden;
129
- position: relative;
130
- width: 100%;
131
- }
132
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table {
133
- width: 100%;
134
- border-collapse: collapse;
135
- }
136
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table th,
137
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
138
- width: 14.28%;
139
- text-align: center;
140
- padding: 5px;
141
- }
142
- .calendar_calendar-container .calendar_calendar-table th {
143
- color: #666;
144
- font-weight: normal;
145
- padding-bottom: 10px;
146
- }
147
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
148
- vertical-align: middle;
149
- cursor: pointer;
150
- border: none;
151
- opacity: 1;
152
- position: relative;
153
- }
154
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_empty-day {
155
- cursor: default;
156
- }
157
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td:hover .calendar_day-square.calendar_available {
158
- transform: scale(1.05);
159
- }
160
- .calendar_new-reservation-page .calendar_calendar-container .calendar_day-square {
161
- position: relative;
162
- width: 38px;
163
- height: 38px;
164
- border-radius: 4px;
165
- display: inline-flex;
166
- align-items: center;
167
- justify-content: center;
168
- flex-direction: column;
169
- transition: all 0.2s ease;
170
- font-size: 16px;
171
- margin: 0 auto;
172
- }
173
- .calendar_new-reservation-page .calendar_calendar-container .calendar_day-number {
174
- line-height: 1;
175
- z-index: 2;
176
- }
177
- .calendar_new-reservation-page .calendar_calendar-container .calendar_available .calendar_day-square {
178
- background-color: #ccffcc;
179
- color: #006600;
180
- }
181
- .calendar_new-reservation-page .calendar_calendar-container .calendar_available:hover .calendar_day-square {
182
- background-color: #b3ffb3;
183
- }
184
- .calendar_new-reservation-page .calendar_calendar-container .calendar_available:active .calendar_day-square {
185
- background-color: #99ff99;
186
- }
187
- .calendar_new-reservation-page .calendar_calendar-container .calendar_unavailable .calendar_day-square {
188
- background-color: rgba(139, 0, 0, 0.13);
189
- color: darkred;
190
- }
191
- .calendar_new-reservation-page .calendar_calendar-container .calendar_gray-out .calendar_day-square {
192
- background-color: #e0e0e0;
193
- color: #999;
194
- cursor: not-allowed;
195
- }
196
- .calendar_new-reservation-page .calendar_calendar-container .calendar_selected .calendar_day-square {
197
- background-color: #006600;
198
- color: #ccffcc;
199
- }
200
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_unavailable,
201
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_gray-out {
202
- cursor: not-allowed;
203
- }
204
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_unavailable:hover .calendar_day-square,
205
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_gray-out:hover .calendar_day-square {
206
- transform: none;
207
- }
208
- .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
209
- border: none;
210
- }
211
- .calendar_new-reservation-page .calendar_calendar-container .calendar_arrow {
212
- margin-left: auto;
213
- color: gray;
214
- display: flex;
215
- align-items: center;
216
- }
217
- .calendar_new-reservation-page .calendar_calendar-container .calendar_available .calendar_availability-badge {
218
- background: #38a169;
219
- }
220
- .calendar_new-reservation-page .calendar_calendar-container .calendar_selected .calendar_availability-badge {
221
- background: #2d3748;
222
- }
223
- @media screen and (max-width: 900px) {
224
- .calendar_calendar-container .calendar_day-square {
225
- width: 35px !important;
226
- height: 35px !important;
227
- font-size: 15px !important;
228
- }
229
- .calendar_calendar-container .calendar_calendar-header span {
230
- font-size: 12px;
231
- }
232
- .calendar_new-reservation-page .calendar_calendar-container .calendar_availability-toggle-btn {
233
- padding: 5px 8px;
234
- font-size: 11px;
1
+ /* src/styles/reservationSidebar.css */
2
+
3
+ /* reservationSidebar.js */
4
+
5
+ .reservation-sidebar-component {
6
+ position: fixed;
7
+ top: 0;
8
+ right: -400px; /* Start off-screen */
9
+ width: 400px;
10
+ height: 100%;
11
+ background-color: #fff;
12
+ box-shadow: -2px 0 5px rgba(0,0,0,0.1);
13
+ z-index: var(--z-index-sidebar-reservation); /* Updated z-index */
14
+ display: flex;
15
+ flex-direction: column;
16
+ overflow-y: auto;
17
+ transition: right 0.3s ease-in-out;
18
+ }
19
+
20
+ .admin-title {
21
+ text-align: center;
22
+ margin-bottom: 30px;
23
+ }
24
+
25
+ .reservation-sidebar-component.open {
26
+ right: 0;
27
+ }
28
+
29
+ .reservation-sidebar-content {
30
+ padding: 20px;
31
+ padding-top: 60px; /* To make room for the close button */
32
+ }
33
+
34
+ .close-sidebar-button {
35
+ position: absolute;
36
+ top: 10px;
37
+ left: 10px;
38
+ background-color: transparent;
39
+ border: none;
40
+ cursor: pointer;
41
+ }
42
+
43
+ .close-sidebar-button svg {
44
+ color: #000;
45
+ }
46
+
47
+ .sidebar-section-one,
48
+ .sidebar-section-two {
49
+ margin-bottom: 20px;
50
+ }
51
+
52
+ .reservation-footer {
53
+ margin-top: auto;
54
+ }
55
+
56
+ .store-reservation-button {
57
+ width: 100%;
58
+ padding: 12px;
59
+ background-color: var(--color-blue);
60
+ color: #fff;
61
+ border: none;
62
+ border-radius: 5px;
63
+ cursor: pointer;
64
+ font-size: 1.1rem;
65
+ }
66
+
67
+ .open-sidebar-button {
68
+ position: fixed;
69
+ bottom: 20px;
70
+ right: 20px;
71
+ background-color: var(--color-blue);
72
+ color: #fff;
73
+ border: none;
74
+ border-radius: 50%;
75
+ width: 50px;
76
+ height: 50px;
77
+ cursor: pointer;
78
+ z-index: var(--z-index-modal) !important;
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .open-sidebar-button:hover {
83
+ background-color: var(--color-blue-hover-accent) !important;
84
+ }
85
+
86
+ .open-sidebar-button svg {
87
+ position: relative;
88
+ top: 2px;
89
+ }
90
+
91
+ @media screen and (max-width: 480px) {
92
+ .reservation-sidebar-component {
93
+ width: 100%;
94
+ }
95
+ }
96
+
97
+
98
+ .sidebar-section-personeel {
99
+ margin-bottom: 10px;
235
100
  }
236
- }
237
101
 
238
- /* src/components/ReservationStepOne/css/timeSelector.css */
239
- .timeSelector_new-reservation-page .timeSelector_time-selector-container {
240
- position: relative;
241
- }
242
- .timeSelector_new-reservation-page .timeSelector_time-display {
243
- display: flex;
244
- align-items: center;
245
- justify-content: space-between;
246
- width: 100%;
247
- padding: 10px;
248
- background-color: #fff;
249
- border: #ccc 1px solid;
250
- cursor: pointer;
251
- user-select: none;
252
- text-align: left;
253
- border-radius: 5px;
254
- }
255
- .timeSelector_new-reservation-page .timeSelector_time-display span:first-child {
256
- flex-grow: 1;
257
- }
258
- .timeSelector_new-reservation-page .timeSelector_time-selector {
259
- position: absolute;
260
- z-index: 1000;
261
- width: 100%;
262
- max-height: 300px;
263
- overflow-y: auto;
264
- background-color: rgba(255, 255, 255, 1);
265
- border: 1px solid #ccc;
266
- margin-top: 5px;
267
- padding: 10px;
268
- border-radius: 10px;
269
- animation: timeSelector_fadeInTimeSelector 0.3s ease-in-out;
270
- top: 75px;
271
- }
272
- @keyframes timeSelector_fadeInTimeSelector {
273
- from {
274
- opacity: 0;
275
- }
276
- to {
277
- opacity: 1;
278
- }
279
- }
280
- .timeSelector_new-reservation-page .timeSelector_time-period {
281
- margin-bottom: 15px;
282
- }
283
- .timeSelector_new-reservation-page .timeSelector_time-period-label {
284
- font-weight: bold;
285
- margin-bottom: 5px;
286
- }
287
- .timeSelector_new-reservation-page .timeSelector_time-options {
288
- display: flex;
289
- flex-wrap: wrap;
290
- gap: 5px;
291
- }
292
- .timeSelector_new-reservation-page .timeSelector_time-option {
293
- padding: 8px 12px;
294
- background-color: #ccffcc;
295
- color: #006600;
296
- border-radius: 5px;
297
- cursor: pointer;
298
- transition: background-color 0.2s ease;
299
- }
300
- .timeSelector_new-reservation-page .timeSelector_time-option:hover {
301
- background-color: #b3ffb3;
302
- }
303
- .timeSelector_new-reservation-page .timeSelector_time-option.timeSelector_selected {
304
- background-color: #006600;
305
- color: #ccffcc;
306
- }
307
- .timeSelector_new-reservation-page .timeSelector_info-text {
308
- color: #666;
309
- font-style: italic;
310
- }
311
- .timeSelector_new-reservation-page .timeSelector_arrow {
312
- margin-left: auto;
313
- color: gray;
314
- display: flex;
315
- align-items: center;
316
- }
317
- @media screen and (max-width: 480px) {
318
- .timeSelector_new-reservation-page .timeSelector_time-option {
319
- padding: 6px 10px;
320
- font-size: 14px;
321
- }
322
- }
102
+ /* src/styles/newReservationAdmin.css */
103
+ /* newReservationAdmin.css */
104
+
105
+
106
+ .account-manage-title {
107
+ text-align: center;
108
+ margin-bottom: 30px;
109
+ }
110
+
111
+ .account-manage-container {
112
+ max-width: 800px;
113
+ margin: 0 auto;
114
+ }
115
+
116
+ .account-manage-form {
117
+ display: flex;
118
+ flex-direction: column;
119
+ gap: 15px;
120
+ }
121
+
122
+ .input-container {
123
+ position: relative;
124
+ }
125
+
126
+ .input-icon {
127
+ position: absolute;
128
+ top: 50%;
129
+ left: 10px;
130
+ transform: translateY(-50%);
131
+ color: #6c757d;
132
+ pointer-events: none;
133
+ }
134
+
135
+ .input-container input,
136
+ .input-container textarea {
137
+ width: 100%;
138
+ padding: 10px 10px 10px 35px;
139
+ border: 1px solid #ccc;
140
+ border-radius: 5px;
141
+ font-size: 1rem;
142
+ transition: border-color 0.3s ease;
143
+ }
144
+
145
+
146
+ .form-error {
147
+ color: #dc3545;
148
+ font-size: 0.9rem;
149
+ margin-top: 5px;
150
+ display: flex;
151
+ align-items: center;
152
+ gap: 5px;
153
+ }
154
+
155
+ .account-manage__button {
156
+ padding: 12px;
157
+ background-color: var(--color-blue);
158
+ color: #fff;
159
+ border: none;
160
+ border-radius: 5px;
161
+ cursor: pointer;
162
+ font-size: 1.1rem;
163
+ display: flex;
164
+ align-items: center;
165
+ justify-content: center;
166
+ gap: 10px;
167
+ transition: background-color 0.3s ease;
168
+ }
169
+
323
170
 
324
- /* src/components/ReservationStepOne/css/tableSelector.css */
325
- .tableSelector_new-reservation-page .tableSelector_table-selector-container {
326
- margin-top: 15px;
327
- padding: 10px;
328
- border: 1px solid #eee;
329
- border-radius: 4px;
330
- background-color: #f9f9f9;
331
- }
332
- .tableSelector_new-reservation-page .tableSelector_table-selector-label {
333
- display: block;
334
- margin-bottom: 10px;
335
- font-weight: bold;
336
- color: #333;
337
- font-size: 0.95rem;
338
- }
339
- .tableSelector_new-reservation-page .tableSelector_table-options {
340
- display: flex;
341
- flex-wrap: wrap;
342
- gap: 10px;
343
- }
344
- .tableSelector_new-reservation-page .tableSelector_table-option {
345
- display: inline-block;
346
- margin-right: 15px;
347
- margin-bottom: 5px;
348
- padding: 5px 8px;
349
- border: 1px solid #ccc;
350
- border-radius: 4px;
351
- background-color: #fff;
352
- transition: background-color 0.2s ease;
353
- }
354
- .tableSelector_new-reservation-page .tableSelector_table-option label {
355
- display: flex;
356
- align-items: center;
357
- cursor: pointer;
358
- font-size: 0.9rem;
359
- color: #555;
360
- }
361
- .tableSelector_new-reservation-page .tableSelector_table-option input[type=checkbox] {
362
- margin-right: 8px;
363
- cursor: pointer;
364
- accent-color: var(--primary-color, #006600);
365
- }
366
- .tableSelector_new-reservation-page .tableSelector_table-option:has(input[type=checkbox]:checked) {
367
- background-color: #e0f2e0;
368
- border-color: #006600;
369
- }
370
- .tableSelector_new-reservation-page .tableSelector_table-option:hover {
371
- background-color: #f0f0f0;
372
- }
373
- .tableSelector_new-reservation-page .tableSelector_info-text {
374
- margin-top: 10px;
375
- font-size: 0.85rem;
376
- color: #666;
377
- }
378
- .tableSelector_new-reservation-page .tableSelector_selected-tables-info {
379
- margin-top: 10px;
380
- font-style: italic;
381
- }
382
- .tableSelector_new-reservation-page .tableSelector_info-text.tableSelector_loading-tables {
383
- font-style: italic;
384
- color: #006600;
385
- }
171
+ /* src/components/FormField/formField.css */
172
+ /* src/components/FormField.css */
173
+ .new-reservation-page .form-group .magic-tooltip {
174
+ transition: transform 0.2s ease;
175
+ transform-origin: bottom right;
176
+ }
177
+
178
+ .new-reservation-page .form-group .magic-tooltip:hover {
179
+ transform: scale(1.05);
180
+ }
181
+
386
182
 
387
- /* src/components/ReservationStepOne/css/reservationMode.css */
388
- .reservationMode_new-reservation-page .reservationMode_form-row .reservationMode_field-label {
389
- display: block;
390
- margin-bottom: 6px;
391
- font-weight: 600;
392
- }
393
- .reservationMode_new-reservation-page .reservationMode_form-row .reservationMode_reservation-mode-buttons {
394
- margin-top: 0;
395
- }
396
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-buttons {
397
- display: flex;
398
- gap: 10px;
399
- margin-top: 10px;
400
- }
401
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
402
- flex: 1;
403
- padding: 10px;
404
- border: 1px solid #ccc;
405
- border-radius: var(--border-radius);
406
- background-color: var(--color-white);
407
- cursor: pointer;
408
- font-size: 1rem;
409
- transition: background-color 0.3s ease, color 0.3s ease;
410
- }
411
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-button.reservationMode_active,
412
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:hover {
413
- background-color: var(--color-blue);
414
- color: var(--color-white);
415
- }
416
- .reservationMode_new-reservation-page .reservationMode_reservation-modes-container {
417
- display: flex;
418
- flex-wrap: wrap;
419
- margin: 0 -5px;
420
- width: 100%;
421
- }
422
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
423
- flex: 0 0 calc(50% - 10px);
424
- margin: 5px;
425
- padding: 10px;
426
- box-sizing: border-box;
427
- text-align: center;
428
- border: 1px solid #ccc;
429
- background: #f7f7f7;
430
- cursor: pointer;
431
- }
432
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:nth-child(3) {
433
- flex: 0 0 100%;
434
- }
435
- .reservationMode_new-reservation-page .reservationMode_reservation-modes-container {
436
- display: flex;
437
- flex-wrap: wrap;
438
- margin: 0 -5px;
439
- width: 100%;
440
- }
441
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
442
- flex: 0 0 calc(50% - 10px);
443
- margin: 5px;
444
- padding: 10px;
445
- box-sizing: border-box;
446
- text-align: center;
447
- border: 1px solid #ccc;
448
- background: #f7f7f7;
449
- cursor: pointer;
450
- }
451
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-button.reservationMode_active,
452
- .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:hover {
453
- background-color: var(--color-blue);
454
- color: var(--color-white);
455
- }
456
- .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning {
457
- display: flex;
458
- align-items: flex-start;
459
- gap: 10px;
460
- margin: 15px 0;
461
- padding: 12px 15px;
462
- background-color: #fff3cd;
463
- border: 1px solid #ffeaa7;
464
- border-radius: var(--border-radius, 4px);
465
- border-left: 4px solid #e67e22;
466
- font-size: 0.9rem;
467
- line-height: 1.4;
468
- }
469
- .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-icon {
470
- color: #e67e22;
471
- font-size: 1.1rem;
472
- margin-top: 2px;
473
- flex-shrink: 0;
474
- }
475
- .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-text {
476
- color: #856404;
477
- margin: 0;
478
- }
479
- @media screen and (max-width: 480px) {
480
- .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning {
481
- margin: 10px 0;
482
- padding: 10px 12px;
483
- font-size: 0.85rem;
484
- }
485
- .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-icon {
486
- font-size: 1rem;
487
- }
488
- }
489
- .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component {
490
- position: fixed;
491
- top: 0;
492
- right: -400px;
493
- width: 400px;
494
- height: 100%;
495
- background-color: #fff;
496
- box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
497
- z-index: var(--z-index-sidebar-reservation);
498
- display: flex;
499
- flex-direction: column;
500
- overflow-y: auto;
501
- transition: right 0.3s ease-in-out;
502
- }
503
- .reservationMode_new-reservation-page .reservationMode_admin-title {
504
- text-align: center;
505
- margin-bottom: 30px;
506
- }
507
- .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component.reservationMode_open {
508
- right: 0;
509
- }
510
- .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-content {
511
- padding: 20px;
512
- padding-top: 60px;
513
- }
514
- .reservationMode_new-reservation-page .reservationMode_close-sidebar-button {
515
- position: absolute;
516
- top: 10px;
517
- left: 10px;
518
- background-color: transparent;
519
- border: none;
520
- cursor: pointer;
521
- }
522
- .reservationMode_new-reservation-page .reservationMode_close-sidebar-button svg {
523
- color: #000;
524
- }
525
- .reservationMode_new-reservation-page .reservationMode_sidebar-section-one,
526
- .reservationMode_new-reservation-page .reservationMode_sidebar-section-two {
527
- margin-bottom: 20px;
528
- }
529
- .reservationMode_new-reservation-page .reservationMode_reservation-footer {
530
- margin-top: auto;
531
- }
532
- .reservationMode_new-reservation-page .reservationMode_store-reservation-button {
533
- width: 100%;
534
- padding: 12px;
535
- background-color: var(--color-blue);
536
- color: #fff;
537
- border: none;
538
- border-radius: 5px;
539
- cursor: pointer;
540
- font-size: 1.1rem;
541
- }
542
- .reservationMode_new-reservation-page .reservationMode_open-sidebar-button {
543
- position: fixed;
544
- bottom: 20px;
545
- right: 20px;
546
- background-color: var(--color-blue);
547
- color: #fff;
548
- border: none;
549
- border-radius: 50%;
550
- width: 50px;
551
- height: 50px;
552
- cursor: pointer;
553
- z-index: var(--z-index-modal) !important;
554
- transition: all 0.3s ease;
555
- }
556
- .reservationMode_new-reservation-page .reservationMode_open-sidebar-button:hover {
557
- background-color: var(--color-blue-hover-accent) !important;
558
- }
559
- .reservationMode_new-reservation-page .reservationMode_open-sidebar-button svg {
560
- position: relative;
561
- top: 2px;
562
- }
563
- @media screen and (max-width: 480px) {
564
- .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component {
565
- width: 100%;
183
+ /* src/components/GiftcardSelection/giftcardSelection.css */
184
+ /* src/Pages/NewReservation/css/giftcardSelection.css */
185
+
186
+ .new-reservation-page .giftcard-selection {
187
+ margin-bottom: 20px;
188
+ }
189
+
190
+ .new-reservation-page .giftcard-options {
191
+ display: flex;
192
+ gap: 20px;
193
+ margin: 10px 0;
194
+ }
195
+
196
+ .new-reservation-page .giftcard-option {
197
+ display: flex;
198
+ align-items: center;
199
+ gap: 8px;
200
+ cursor: pointer;
201
+ }
202
+
203
+ .new-reservation-page .form-label {
204
+ font-weight: 500;
205
+ margin-bottom: 8px;
206
+ display: block;
207
+ }
208
+
209
+ .new-reservation-page .giftcard-option input[type="radio"] {
210
+ margin: 0;
211
+ cursor: pointer;
212
+ }
213
+
214
+ .new-reservation-page .giftcard-option label {
215
+ cursor: pointer;
566
216
  }
567
- }
568
- .reservationMode_new-reservation-page .reservationMode_sidebar-section-personeel {
569
- margin-bottom: 10px;
570
- }
571
217
 
572
- /* src/components/FormField/formField.css */
573
- .formField_new-reservation-page .formField_form-group .formField_magic-tooltip {
574
- transition: transform 0.2s ease;
575
- transform-origin: bottom right;
576
- }
577
- .formField_new-reservation-page .formField_form-group .formField_magic-tooltip:hover {
578
- transform: scale(1.05);
218
+ /* src/components/ZitplaatsSelection/zitplaatsSelection.css */
219
+ /* src/Pages/NewReservation/css/zitplaatsSelection.css */
220
+
221
+ .new-reservation-page .zitplaats-selection {
222
+ margin-bottom: 15px;
223
+ }
224
+
225
+ .new-reservation-page .zitplaats-selection select {
226
+ width: 100%;
227
+ padding: 10px;
228
+ border-radius: 4px;
229
+ border: 1px solid #ccc;
230
+ background-color: white;
579
231
  }
580
232
 
581
233
  /* src/components/ReservationStepTwo/reservationStepTwo.css */
582
- .reservationStepTwo_new-reservation-page .reservationStepTwo_name-fields {
583
- display: flex;
584
- gap: 20px;
585
- }
586
- .reservationStepTwo_input-container .reservationStepTwo_form-control {
587
- display: flex;
588
- align-items: center;
589
- justify-content: space-between;
590
- width: 100%;
591
- padding: 10px;
592
- background-color: #fff;
593
- border: #ccc 1px solid;
594
- cursor: pointer;
595
- -webkit-user-select: none;
596
- user-select: none;
597
- text-align: left;
598
- border-radius: 5px;
599
- font-size: 16px;
600
- }
234
+ /* Name Fields Container */
235
+ .new-reservation-page .name-fields {
236
+ display: flex;
237
+ gap: 20px;
238
+ }
239
+
240
+ .input-container .form-control { /* New reservation prefix can't be added here*/
241
+ display: flex;
242
+ align-items: center;
243
+ justify-content: space-between;
244
+ width: 100%;
245
+ padding: 10px;
246
+ background-color: #fff;
247
+ border: #ccc 1px solid;
248
+ cursor: pointer;
249
+ -webkit-user-select: none;
250
+ user-select: none;
251
+ text-align: left;
252
+ border-radius: 5px;
253
+ font-size: 16px;
254
+ }
601
255
 
602
256
  /* src/components/ReservationSummary/reservationSummary.css */
603
- .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_modal-title {
604
- margin-top: 0;
605
- margin-bottom: 20px;
606
- }
607
- .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details {
608
- list-style-type: none;
609
- padding: 0;
610
- margin: 0 0 20px 0;
611
- width: 100%;
612
- }
613
- .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details li {
614
- margin-bottom: 10px;
615
- font-size: 15px;
616
- align-items: left;
617
- text-align: left;
618
- }
619
- .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details li strong {
620
- font-weight: bold;
621
- }
622
- .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary {
623
- align-items: left;
624
- }
257
+ /* src/components/ReservationForm/css/reservationSummary.css */
258
+
259
+ .new-reservation-page .reservation-sidebar-component .reservation-summary .modal-title {
260
+ margin-top: 0;
261
+ margin-bottom: 20px;
262
+ }
263
+
264
+ .new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details {
265
+ list-style-type: none;
266
+ padding: 0;
267
+ margin: 0 0 20px 0;
268
+ width: 100%;
269
+ }
270
+
271
+ .new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li {
272
+ margin-bottom: 10px;
273
+ font-size: 15px;
274
+ align-items: left;
275
+ text-align: left;
276
+ }
277
+
278
+ .new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li strong {
279
+ font-weight: bold;
280
+ }
281
+
282
+ .new-reservation-page .reservation-sidebar-component .reservation-summary {
283
+ align-items: left;
284
+ }
285
+
625
286
 
626
- /* src/components/GiftcardSelection/giftcardSelection.css */
627
- .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-selection {
628
- margin-bottom: 20px;
629
- }
630
- .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-options {
631
- display: flex;
632
- gap: 20px;
633
- margin: 10px 0;
634
- }
635
- .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option {
636
- display: flex;
637
- align-items: center;
638
- gap: 8px;
639
- cursor: pointer;
640
- }
641
- .giftcardSelection_new-reservation-page .giftcardSelection_form-label {
642
- font-weight: 500;
643
- margin-bottom: 8px;
644
- display: block;
645
- }
646
- .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option input[type=radio] {
647
- margin: 0;
648
- cursor: pointer;
649
- }
650
- .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option label {
651
- cursor: pointer;
652
- }
287
+ /* src/components/ReservationStepOne/css/timeSelector.css */
288
+ /* src/components/NewReservation/css/timeSelector.css */
289
+
290
+ .new-reservation-page .time-selector-container {
291
+ position: relative;
292
+ }
293
+
294
+ .new-reservation-page .time-display {
295
+ display: flex;
296
+ align-items: center;
297
+ justify-content: space-between;
298
+ width: 100%;
299
+ padding: 10px;
300
+ background-color: #fff;
301
+ border: #ccc 1px solid;
302
+ cursor: pointer;
303
+ user-select: none;
304
+ text-align: left;
305
+ border-radius: 5px;
306
+ }
307
+
308
+ .new-reservation-page .time-display span:first-child {
309
+ flex-grow: 1;
310
+ }
311
+
312
+ .new-reservation-page .time-selector {
313
+ position: absolute;
314
+ z-index: 1000;
315
+ width: 100%;
316
+ max-height: 300px;
317
+ overflow-y: auto;
318
+ background-color: rgba(255, 255, 255, 1);
319
+ border: 1px solid #ccc;
320
+ margin-top: 5px;
321
+ padding: 10px;
322
+ border-radius: 10px;
323
+ animation: fadeInTimeSelector 0.3s ease-in-out;
324
+ top: 75px;
325
+ }
326
+
327
+ @keyframes fadeInTimeSelector {
328
+ from {
329
+ opacity: 0;
330
+ }
331
+ to {
332
+ opacity: 1;
333
+ }
334
+ }
335
+
336
+ .new-reservation-page .time-period {
337
+ margin-bottom: 15px;
338
+ }
339
+
340
+ .new-reservation-page .time-period-label {
341
+ font-weight: bold;
342
+ margin-bottom: 5px;
343
+ }
344
+
345
+ .new-reservation-page .time-options {
346
+ display: flex;
347
+ flex-wrap: wrap;
348
+ gap: 5px;
349
+ }
350
+
351
+ .new-reservation-page .time-option {
352
+ padding: 8px 12px;
353
+ background-color: #ccffcc; /* Green background for available times */
354
+ color: #006600;
355
+ border-radius: 5px;
356
+ cursor: pointer;
357
+ transition: background-color 0.2s ease;
358
+ }
359
+
360
+ .new-reservation-page .time-option:hover {
361
+ background-color: #b3ffb3;
362
+ }
363
+
364
+ .new-reservation-page .time-option.selected {
365
+ background-color: #006600;
366
+ color: #ccffcc;
367
+ }
368
+
369
+ .new-reservation-page .info-text {
370
+ color: #666;
371
+ font-style: italic;
372
+ }
373
+
374
+ .new-reservation-page .arrow {
375
+ margin-left: auto;
376
+ color: gray;
377
+ display: flex;
378
+ align-items: center;
379
+ }
380
+
381
+ @media screen and (max-width: 480px) {
382
+ .new-reservation-page .time-option {
383
+ padding: 6px 10px;
384
+ font-size: 14px;
385
+ }
386
+ }
387
+
653
388
 
654
- /* src/components/ZitplaatsSelection/zitplaatsSelection.css */
655
- .zitplaatsSelection_new-reservation-page .zitplaatsSelection_zitplaats-selection {
656
- margin-bottom: 15px;
657
- }
658
- .zitplaatsSelection_new-reservation-page .zitplaatsSelection_zitplaats-selection select {
659
- width: 100%;
660
- padding: 10px;
661
- border-radius: 4px;
662
- border: 1px solid #ccc;
663
- background-color: white;
389
+ /* src/components/ReservationStepOne/css/calendar.css */
390
+ /* calendar.css */
391
+ .new-reservation-page .calendar-container {
392
+ position: relative;
393
+ width: 100%;
394
+ }
395
+
396
+ .new-reservation-page .calendar-container .calendar-display {
397
+ display: flex;
398
+ align-items: center;
399
+ justify-content: space-between;
400
+ width: 100%;
401
+ padding: 10px;
402
+ background-color: #fff;
403
+ border: #ccc 1px solid;
404
+ cursor: pointer;
405
+ user-select: none;
406
+ text-align: left;
407
+ border-radius: 5px;
408
+ }
409
+
410
+ .new-reservation-page .calendar-container .calendar-display span:first-child {
411
+ flex-grow: 1;
412
+ }
413
+
414
+ .new-reservation-page .calendar-container .calendar {
415
+ position: absolute;
416
+ z-index: 1000;
417
+ width: 100%;
418
+ background-color: rgba(255, 255, 255, 1);
419
+ border: 1px solid #ccc;
420
+ margin-top: 5px;
421
+ padding: 10px;
422
+ border-radius: 10px;
423
+ animation: fadeInCalendar 0.3s ease-in-out;
424
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
425
+ }
426
+
427
+ @keyframes fadeInCalendar {
428
+ from {
429
+ opacity: 0;
430
+ }
431
+ to {
432
+ opacity: 1;
433
+ }
434
+ }
435
+
436
+ /* NEW: Beschikbaarheden press-and-hold button */
437
+ .new-reservation-page .calendar-container .availability-hold-btn {
438
+ font-size: 10px;
439
+ }
440
+
441
+
442
+ .new-reservation-page .calendar-container .calendar-header {
443
+ display: flex;
444
+ justify-content: space-between;
445
+ align-items: center;
446
+ margin-bottom: 10px;
447
+ gap: 8px;
448
+ flex-wrap: wrap;
449
+ }
450
+
451
+ .new-reservation-page .calendar-container .calendar-header button {
452
+ background-color: transparent;
453
+ border: none;
454
+ cursor: pointer;
455
+ font-size: 18px;
456
+ }
457
+
458
+ .new-reservation-page .calendar-container .calendar-header span {
459
+ font-size: 15px;
460
+ color: gray;
461
+ font-weight: 500;
462
+ }
463
+
464
+ .new-reservation-page .calendar-container .calendar-weeks-wrapper {
465
+ overflow: hidden;
466
+ position: relative;
467
+ width: 100%;
468
+ }
469
+
470
+ .new-reservation-page .calendar-container .calendar-table {
471
+ width: 100%;
472
+ border-collapse: collapse;
473
+ }
474
+
475
+ .new-reservation-page .calendar-container .calendar-table th,
476
+ .new-reservation-page .calendar-container .calendar-table td {
477
+ width: 14.28%;
478
+ text-align: center;
479
+ padding: 5px;
480
+ }
481
+
482
+ .calendar-container .calendar-table th {
483
+ color: #666;
484
+ font-weight: normal;
485
+ padding-bottom: 10px;
486
+ }
487
+
488
+ .new-reservation-page .calendar-container .calendar-table td {
489
+ vertical-align: middle;
490
+ cursor: pointer;
491
+ border: none;
492
+ opacity: 1;
493
+ position: relative; /* For badge positioning */
494
+ }
495
+
496
+ .new-reservation-page .calendar-container .calendar-table td.empty-day {
497
+ cursor: default;
498
+ }
499
+
500
+ .new-reservation-page .calendar-container .calendar-table td:hover .day-square.available {
501
+ transform: scale(1.05);
502
+ }
503
+
504
+ /* MINIMAL: Day square with clean layout */
505
+ .new-reservation-page .calendar-container .day-square {
506
+ position: relative;
507
+ width: 38px;
508
+ height: 38px;
509
+ border-radius: 4px;
510
+ display: inline-flex;
511
+ align-items: center;
512
+ justify-content: center;
513
+ flex-direction: column;
514
+ transition: all 0.2s ease;
515
+ font-size: 16px;
516
+ margin: 0 auto;
517
+ }
518
+
519
+ .new-reservation-page .calendar-container .day-number {
520
+ line-height: 1;
521
+ z-index: 2; /* Ensure number stays above background */
522
+ }
523
+
524
+ .new-reservation-page .calendar-container .available .day-square {
525
+ background-color: #ccffcc;
526
+ color: #006600;
527
+ }
528
+
529
+ .new-reservation-page .calendar-container .available:hover .day-square {
530
+ background-color: #b3ffb3;
531
+ }
532
+
533
+ .new-reservation-page .calendar-container .available:active .day-square {
534
+ background-color: #99ff99;
535
+ }
536
+
537
+ .new-reservation-page .calendar-container .unavailable .day-square {
538
+ background-color: rgba(139, 0, 0, 0.13);
539
+ color: darkred;
540
+ }
541
+
542
+ .new-reservation-page .calendar-container .gray-out .day-square {
543
+ background-color: #e0e0e0;
544
+ color: #999;
545
+ cursor: not-allowed;
546
+ }
547
+
548
+ .new-reservation-page .calendar-container .selected .day-square {
549
+ background-color: #006600;
550
+ color: #ccffcc;
551
+ }
552
+
553
+ .new-reservation-page .calendar-container .calendar-table td.unavailable,
554
+ .new-reservation-page .calendar-container .calendar-table td.gray-out {
555
+ cursor: not-allowed;
556
+ }
557
+
558
+ .new-reservation-page .calendar-container .calendar-table td.unavailable:hover .day-square,
559
+ .new-reservation-page .calendar-container .calendar-table td.gray-out:hover .day-square {
560
+ transform: none;
561
+ }
562
+
563
+ .new-reservation-page .calendar-container .calendar-table td {
564
+ border: none;
565
+ }
566
+
567
+ .new-reservation-page .calendar-container .arrow {
568
+ margin-left: auto;
569
+ color: gray;
570
+ display: flex;
571
+ align-items: center;
572
+ }
573
+
574
+ /* Only show badge for available dates with actual capacity */
575
+ .new-reservation-page .calendar-container .available .availability-badge {
576
+ background: #38a169;
577
+ }
578
+
579
+ .new-reservation-page .calendar-container .selected .availability-badge {
580
+ background: #2d3748;
581
+ }
582
+
583
+ @media screen and (max-width: 900px) {
584
+ .calendar-container .day-square {
585
+ width: 35px !important;
586
+ height: 35px !important;
587
+ font-size: 15px !important;
588
+ }
589
+
590
+ .calendar-container .calendar-header span {
591
+ font-size: 12px;
592
+ }
593
+
594
+ /* Make availability button more compact on mobile */
595
+ .new-reservation-page .calendar-container .availability-toggle-btn {
596
+ padding: 5px 8px;
597
+ font-size: 11px;
598
+ }
664
599
  }
665
600
 
666
- /* src/styles/reservationSidebar.css */
667
- .reservationSidebar_reservation-sidebar-component {
668
- position: fixed;
669
- top: 0;
670
- right: -400px;
671
- width: 400px;
672
- height: 100%;
673
- background-color: #fff;
674
- box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
675
- z-index: var(--z-index-sidebar-reservation);
676
- display: flex;
677
- flex-direction: column;
678
- overflow-y: auto;
679
- transition: right 0.3s ease-in-out;
680
- }
681
- .reservationSidebar_admin-title {
682
- text-align: center;
683
- margin-bottom: 30px;
684
- }
685
- .reservationSidebar_reservation-sidebar-component.reservationSidebar_open {
686
- right: 0;
687
- }
688
- .reservationSidebar_reservation-sidebar-content {
689
- padding: 20px;
690
- padding-top: 60px;
691
- }
692
- .reservationSidebar_close-sidebar-button {
693
- position: absolute;
694
- top: 10px;
695
- left: 10px;
696
- background-color: transparent;
697
- border: none;
698
- cursor: pointer;
699
- }
700
- .reservationSidebar_close-sidebar-button svg {
701
- color: #000;
702
- }
703
- .reservationSidebar_sidebar-section-one,
704
- .reservationSidebar_sidebar-section-two {
705
- margin-bottom: 20px;
706
- }
707
- .reservationSidebar_reservation-footer {
708
- margin-top: auto;
709
- }
710
- .reservationSidebar_store-reservation-button {
711
- width: 100%;
712
- padding: 12px;
713
- background-color: var(--color-blue);
714
- color: #fff;
715
- border: none;
716
- border-radius: 5px;
717
- cursor: pointer;
718
- font-size: 1.1rem;
719
- }
720
- .reservationSidebar_open-sidebar-button {
721
- position: fixed;
722
- bottom: 20px;
723
- right: 20px;
724
- background-color: var(--color-blue);
725
- color: #fff;
726
- border: none;
727
- border-radius: 50%;
728
- width: 50px;
729
- height: 50px;
730
- cursor: pointer;
731
- z-index: var(--z-index-modal) !important;
732
- transition: all 0.3s ease;
733
- }
734
- .reservationSidebar_open-sidebar-button:hover {
735
- background-color: var(--color-blue-hover-accent) !important;
736
- }
737
- .reservationSidebar_open-sidebar-button svg {
738
- position: relative;
739
- top: 2px;
740
- }
741
- @media screen and (max-width: 480px) {
742
- .reservationSidebar_reservation-sidebar-component {
743
- width: 100%;
744
- }
745
- }
746
- .reservationSidebar_sidebar-section-personeel {
747
- margin-bottom: 10px;
748
- }
601
+ /* src/components/ReservationStepOne/css/valueSelector.css */
602
+ /* Use the same CSS provided, adjusted for the value selector */
603
+
604
+ .new-reservation-page .value-selector {
605
+ display: flex;
606
+ flex-direction: column;
607
+ gap: 15px;
608
+ margin-bottom: 20px;
609
+ }
610
+
611
+ .new-reservation-page .non-absolute {
612
+ position: relative !important;
613
+ }
614
+
615
+ .new-reservation-page .non-absolute::before {
616
+ background: none;
617
+ }
618
+
619
+ .new-reservation-page .predefined-values {
620
+ display: flex;
621
+ gap: 10px;
622
+ }
623
+
624
+ .new-reservation-page .predefined-value-button {
625
+ flex: 1;
626
+ padding: 10px;
627
+ border: 1px solid #ccc;
628
+ border-radius: var(--border-radius);
629
+ background-color: var(--color-white);
630
+ cursor: pointer;
631
+ font-size: 1rem;
632
+ transition: background-color 0.3s ease;
633
+ }
634
+
635
+ .new-reservation-page .predefined-value-button.active,
636
+ .new-reservation-page .predefined-value-button:hover {
637
+ background-color: var(--color-blue);
638
+ color: var(--color-white);
639
+ }
640
+
641
+ .new-reservation-page .slider-container {
642
+ display: flex;
643
+ align-items: center;
644
+ gap: 15px;
645
+ }
646
+
647
+ .new-reservation-page .slider {
648
+ flex: 1;
649
+ appearance: none;
650
+ -webkit-appearance: none;
651
+ height: 5px;
652
+ background: #ddd;
653
+ border-radius: 5px;
654
+ outline: none;
655
+ }
656
+
657
+ .new-reservation-page .slider::-webkit-slider-thumb {
658
+ -webkit-appearance: none;
659
+ appearance: none;
660
+ width: 20px;
661
+ height: 20px;
662
+ background: var(--color-blue);
663
+ cursor: pointer;
664
+ border-radius: 50%;
665
+ }
666
+
667
+ .new-reservation-page .value-input {
668
+ width: 80px;
669
+ padding: 10px;
670
+ border: 1px solid #ccc;
671
+ border-radius: var(--border-radius);
672
+ font-size: 1rem;
673
+ }
674
+
675
+
749
676
 
750
- /* src/styles/newReservationAdmin.css */
751
- .newReservationAdmin_account-manage-title {
752
- text-align: center;
753
- margin-bottom: 30px;
754
- }
755
- .newReservationAdmin_account-manage-container {
756
- max-width: 800px;
757
- margin: 0 auto;
758
- }
759
- .newReservationAdmin_account-manage-form {
760
- display: flex;
761
- flex-direction: column;
762
- gap: 15px;
763
- }
764
- .newReservationAdmin_input-container {
765
- position: relative;
766
- }
767
- .newReservationAdmin_input-icon {
768
- position: absolute;
769
- top: 50%;
770
- left: 10px;
771
- transform: translateY(-50%);
772
- color: #6c757d;
773
- pointer-events: none;
774
- }
775
- .newReservationAdmin_input-container input,
776
- .newReservationAdmin_input-container textarea {
777
- width: 100%;
778
- padding: 10px 10px 10px 35px;
779
- border: 1px solid #ccc;
780
- border-radius: 5px;
781
- font-size: 1rem;
782
- transition: border-color 0.3s ease;
783
- }
784
- .newReservationAdmin_form-error {
785
- color: #dc3545;
786
- font-size: 0.9rem;
787
- margin-top: 5px;
788
- display: flex;
789
- align-items: center;
790
- gap: 5px;
791
- }
792
- .newReservationAdmin_account-manage__button {
793
- padding: 12px;
794
- background-color: var(--color-blue);
795
- color: #fff;
796
- border: none;
797
- border-radius: 5px;
798
- cursor: pointer;
799
- font-size: 1.1rem;
800
- display: flex;
801
- align-items: center;
802
- justify-content: center;
803
- gap: 10px;
804
- transition: background-color 0.3s ease;
805
- }