PluginProbe
Yatra – Travel Booking & Tour Operator Software / 3.0.9
Yatra – Travel Booking & Tour Operator Software v3.0.9
3.0.16 3.0.15 3.0.14 3.0.14.1 3.0.14.2 3.0.12 3.0.13 3.0.11 3.0.10 3.0.9 3.0.8 3.0.7 3.0.6 3.0.5 3.0.5.1 3.0.4 3.0.3 3.0.2.9 3.0.2.7 3.0.2.8 3.0.2.6 trunk 1.0.0 2.0.0 2.0.1 All 84 releases
yatra / assets / admin / css / setup-wizard-old.css

setup-wizard-old.css in Yatra – Travel Booking & Tour Operator Software 3.0.9, at assets/admin/css/setup-wizard-old.css

1,210 lines 26.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Yatra Setup Wizard Styles - Professional Redesign
3 * Modern, clean, and user-friendly design
4 *
5 * @package Yatra
6 */
7
8 /* CSS Variables for Design System */
9 :root {
10 --yatra-primary: #667eea;
11 --yatra-primary-dark: #5568d3;
12 --yatra-primary-light: #7c8ef0;
13 --yatra-secondary: #764ba2;
14 --yatra-success: #10b981;
15 --yatra-success-light: #d1fae5;
16 --yatra-warning: #f59e0b;
17 --yatra-danger: #ef4444;
18 --yatra-text-primary: #1e293b;
19 --yatra-text-secondary: #64748b;
20 --yatra-text-muted: #94a3b8;
21 --yatra-border: #e2e8f0;
22 --yatra-bg-primary: #ffffff;
23 --yatra-bg-secondary: #f8fafc;
24 --yatra-bg-tertiary: #f1f5f9;
25 --yatra-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
26 --yatra-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
27 --yatra-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
28 --yatra-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
29 --yatra-radius-sm: 6px;
30 --yatra-radius-md: 8px;
31 --yatra-radius-lg: 12px;
32 --yatra-radius-xl: 16px;
33 --yatra-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
34 }
35
36 /* Reset and Base Styles */
37 .yatra-setup {
38 margin: 0;
39 padding: 0;
40 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
41 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
42 min-height: 100vh;
43 position: relative;
44 overflow-x: hidden;
45 }
46
47 .yatra-setup::before {
48 content: '';
49 position: absolute;
50 top: 0;
51 left: 0;
52 right: 0;
53 bottom: 0;
54 background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0wIDQwTDQwIDBaTTQwIDQwTDAgMFoiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
55 opacity: 0.4;
56 pointer-events: none;
57 }
58
59 /* Wrapper */
60 .yatra-setup-wrapper {
61 max-width: 1000px;
62 margin: 0 auto;
63 padding: 40px 20px;
64 position: relative;
65 z-index: 1;
66 }
67
68 /* Logo */
69 .yatra-setup-logo {
70 text-align: center;
71 margin-bottom: 40px;
72 animation: fadeInDown 0.6s ease-out;
73 }
74
75 .yatra-setup-logo img {
76 max-width: 180px;
77 height: auto;
78 filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
79 transition: var(--yatra-transition);
80 }
81
82 .yatra-setup-logo img:hover {
83 transform: scale(1.05);
84 filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2));
85 }
86
87 @keyframes fadeInDown {
88 from {
89 opacity: 0;
90 transform: translateY(-20px);
91 }
92 to {
93 opacity: 1;
94 transform: translateY(0);
95 }
96 }
97
98 /* Steps Navigation - Modern Progress Bar */
99 .yatra-setup-steps {
100 display: flex;
101 justify-content: space-between;
102 list-style: none;
103 margin: 0 0 50px;
104 padding: 30px;
105 counter-reset: step;
106 position: relative;
107 background: rgba(255, 255, 255, 0.95);
108 border-radius: var(--yatra-radius-xl);
109 box-shadow: var(--yatra-shadow-xl);
110 backdrop-filter: blur(10px);
111 animation: fadeInUp 0.6s ease-out 0.2s both;
112 }
113
114 .yatra-setup-steps::before {
115 content: '';
116 position: absolute;
117 top: 50px;
118 left: 60px;
119 right: 60px;
120 height: 4px;
121 background: var(--yatra-bg-tertiary);
122 border-radius: 2px;
123 z-index: 0;
124 }
125
126 .yatra-setup-steps::after {
127 content: '';
128 position: absolute;
129 top: 50px;
130 left: 60px;
131 height: 4px;
132 background: linear-gradient(90deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
133 border-radius: 2px;
134 z-index: 1;
135 transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
136 }
137
138 .yatra-setup-steps li {
139 flex: 1;
140 text-align: center;
141 position: relative;
142 z-index: 2;
143 font-size: 13px;
144 font-weight: 500;
145 color: var(--yatra-text-muted);
146 transition: var(--yatra-transition);
147 }
148
149 .yatra-setup-steps li::before {
150 counter-increment: step;
151 content: counter(step);
152 display: flex;
153 align-items: center;
154 justify-content: center;
155 width: 48px;
156 height: 48px;
157 margin: 0 auto 12px;
158 background: var(--yatra-bg-primary);
159 border: 3px solid var(--yatra-border);
160 border-radius: 50%;
161 font-weight: 700;
162 font-size: 18px;
163 color: var(--yatra-text-muted);
164 transition: var(--yatra-transition);
165 box-shadow: var(--yatra-shadow-sm);
166 }
167
168 .yatra-setup-steps li.active::before {
169 background: linear-gradient(135deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
170 border-color: var(--yatra-primary);
171 color: #fff;
172 transform: scale(1.15);
173 box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
174 }
175
176 .yatra-setup-steps li.done::before {
177 background: var(--yatra-success);
178 border-color: var(--yatra-success);
179 color: #fff;
180 content: '✓';
181 font-size: 24px;
182 transform: scale(1.05);
183 box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
184 }
185
186 .yatra-setup-steps li.active {
187 color: var(--yatra-primary);
188 font-weight: 600;
189 }
190
191 .yatra-setup-steps li.done {
192 color: var(--yatra-success);
193 font-weight: 600;
194 }
195
196 .yatra-setup-steps li.done a {
197 color: var(--yatra-success);
198 text-decoration: none;
199 transition: var(--yatra-transition);
200 }
201
202 .yatra-setup-steps li.done a:hover {
203 color: var(--yatra-primary);
204 text-decoration: none;
205 }
206
207 @keyframes fadeInUp {
208 from {
209 opacity: 0;
210 transform: translateY(20px);
211 }
212 to {
213 opacity: 1;
214 transform: translateY(0);
215 }
216 }
217
218 /* Content Area - Modern Card Design */
219 .yatra-setup-content {
220 background: rgba(255, 255, 255, 0.98);
221 border: none;
222 border-radius: var(--yatra-radius-xl);
223 padding: 50px;
224 margin-bottom: 0;
225 box-shadow: var(--yatra-shadow-xl);
226 backdrop-filter: blur(10px);
227 animation: fadeInUp 0.6s ease-out 0.4s both;
228 position: relative;
229 overflow: hidden;
230 }
231
232 .yatra-setup-content::before {
233 content: '';
234 position: absolute;
235 top: 0;
236 left: 0;
237 right: 0;
238 height: 5px;
239 background: linear-gradient(90deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
240 }
241
242 .yatra-setup-step-content h2 {
243 margin: 0 0 12px;
244 font-size: 32px;
245 font-weight: 700;
246 color: var(--yatra-text-primary);
247 letter-spacing: -0.5px;
248 line-height: 1.2;
249 }
250
251 .yatra-setup-description {
252 font-size: 16px;
253 color: var(--yatra-text-secondary);
254 margin-bottom: 35px;
255 line-height: 1.6;
256 max-width: 700px;
257 }
258
259 /* Features Grid - Modern Cards */
260 .yatra-setup-features {
261 display: grid;
262 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
263 gap: 20px;
264 margin: 35px 0;
265 }
266
267 .yatra-setup-feature {
268 text-align: center;
269 padding: 25px 20px;
270 background: var(--yatra-bg-secondary);
271 border: 2px solid var(--yatra-border);
272 border-radius: var(--yatra-radius-lg);
273 transition: var(--yatra-transition);
274 position: relative;
275 overflow: hidden;
276 }
277
278 .yatra-setup-feature::before {
279 content: '';
280 position: absolute;
281 top: 0;
282 left: 0;
283 right: 0;
284 height: 3px;
285 background: linear-gradient(90deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
286 transform: scaleX(0);
287 transition: transform 0.3s ease;
288 }
289
290 .yatra-setup-feature:hover {
291 border-color: var(--yatra-primary);
292 transform: translateY(-4px);
293 box-shadow: var(--yatra-shadow-lg);
294 }
295
296 .yatra-setup-feature:hover::before {
297 transform: scaleX(1);
298 }
299
300 .yatra-setup-feature .dashicons {
301 font-size: 48px;
302 width: 48px;
303 height: 48px;
304 color: var(--yatra-primary);
305 margin-bottom: 15px;
306 transition: var(--yatra-transition);
307 }
308
309 .yatra-setup-feature:hover .dashicons {
310 transform: scale(1.1);
311 color: var(--yatra-secondary);
312 }
313
314 .yatra-setup-feature h3 {
315 font-size: 16px;
316 margin: 12px 0 8px;
317 color: var(--yatra-text-primary);
318 font-weight: 600;
319 }
320
321 .yatra-setup-feature p {
322 font-size: 14px;
323 color: var(--yatra-text-secondary);
324 margin: 0;
325 line-height: 1.5;
326 }
327
328 /* Form Table - Enhanced Layout */
329 .yatra-setup-content .form-table {
330 margin-top: 40px;
331 width: 100%;
332 }
333
334 .yatra-setup-content .form-table th {
335 padding: 20px 20px 20px 0;
336 width: 250px;
337 font-weight: 600;
338 font-size: 15px;
339 color: var(--yatra-text-primary);
340 vertical-align: top;
341 }
342
343 .yatra-setup-content .form-table td {
344 padding: 20px 10px;
345 }
346
347 .yatra-setup-content .form-table input[type="text"],
348 .yatra-setup-content .form-table input[type="number"],
349 .yatra-setup-content .form-table select {
350 width: 100%;
351 max-width: 400px;
352 }
353
354 .yatra-setup-content .form-table .description {
355 display: block;
356 margin-top: 8px;
357 font-size: 14px;
358 color: var(--yatra-text-muted);
359 font-style: normal;
360 line-height: 1.5;
361 }
362
363 /* Pages List */
364 .yatra-setup-pages-list {
365 margin: 30px 0;
366 }
367
368 .yatra-setup-page-item {
369 display: flex;
370 align-items: flex-start;
371 padding: 20px;
372 background: #f6f7f7;
373 border-radius: 4px;
374 margin-bottom: 15px;
375 }
376
377 .yatra-setup-page-item .dashicons {
378 font-size: 32px;
379 width: 32px;
380 height: 32px;
381 color: #2271b1;
382 margin-right: 15px;
383 flex-shrink: 0;
384 }
385
386 .yatra-setup-page-info h3 {
387 margin: 0 0 5px;
388 font-size: 16px;
389 color: #1d2327;
390 }
391
392 .yatra-setup-page-info p {
393 margin: 0 0 10px;
394 font-size: 14px;
395 color: #50575e;
396 }
397
398 .yatra-setup-page-info code {
399 background: #fff;
400 padding: 4px 8px;
401 border-radius: 3px;
402 font-size: 13px;
403 border: 1px solid #dcdcde;
404 }
405
406 /* Complete Step - Celebration Design */
407 .yatra-setup-complete-icon {
408 text-align: center;
409 margin-bottom: 30px;
410 animation: bounceIn 0.8s ease-out;
411 }
412
413 .yatra-setup-complete-icon .dashicons {
414 font-size: 80px;
415 width: 80px;
416 height: 80px;
417 color: var(--yatra-success);
418 filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.3));
419 }
420
421 @keyframes bounceIn {
422 0% {
423 opacity: 0;
424 transform: scale(0.3);
425 }
426 50% {
427 opacity: 1;
428 transform: scale(1.05);
429 }
430 70% {
431 transform: scale(0.9);
432 }
433 100% {
434 transform: scale(1);
435 }
436 }
437
438 .yatra-setup-next-steps {
439 display: grid;
440 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
441 gap: 20px;
442 margin: 35px 0;
443 }
444
445 .yatra-setup-next-step {
446 display: flex;
447 align-items: flex-start;
448 padding: 25px;
449 background: var(--yatra-bg-secondary);
450 border: 2px solid var(--yatra-border);
451 border-radius: var(--yatra-radius-lg);
452 transition: var(--yatra-transition);
453 position: relative;
454 overflow: hidden;
455 }
456
457 .yatra-setup-next-step::before {
458 content: '';
459 position: absolute;
460 top: 0;
461 left: 0;
462 width: 4px;
463 height: 100%;
464 background: linear-gradient(180deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
465 transform: scaleY(0);
466 transition: transform 0.3s ease;
467 }
468
469 .yatra-setup-next-step:hover {
470 border-color: var(--yatra-primary);
471 transform: translateX(4px);
472 box-shadow: var(--yatra-shadow-lg);
473 }
474
475 .yatra-setup-next-step:hover::before {
476 transform: scaleY(1);
477 }
478
479 .yatra-setup-next-step .dashicons {
480 font-size: 36px;
481 width: 36px;
482 height: 36px;
483 color: var(--yatra-primary);
484 margin-right: 18px;
485 flex-shrink: 0;
486 transition: var(--yatra-transition);
487 }
488
489 .yatra-setup-next-step:hover .dashicons {
490 transform: scale(1.1);
491 color: var(--yatra-secondary);
492 }
493
494 .yatra-setup-next-step-content h3 {
495 margin: 0 0 8px;
496 font-size: 17px;
497 font-weight: 600;
498 color: var(--yatra-text-primary);
499 }
500
501 .yatra-setup-next-step-content p {
502 margin: 0 0 12px;
503 font-size: 14px;
504 color: var(--yatra-text-secondary);
505 line-height: 1.6;
506 }
507
508 .yatra-setup-support {
509 text-align: center;
510 padding: 30px 20px;
511 background: #f6f7f7;
512 border-radius: 4px;
513 margin-top: 30px;
514 }
515
516 .yatra-setup-support h3 {
517 margin: 0 0 10px;
518 font-size: 18px;
519 color: #1d2327;
520 }
521
522 .yatra-setup-support p {
523 margin: 0;
524 font-size: 14px;
525 color: #50575e;
526 }
527
528 .yatra-setup-support a {
529 color: #2271b1;
530 text-decoration: none;
531 }
532
533 .yatra-setup-support a:hover {
534 text-decoration: underline;
535 }
536
537 /* Note - Modern Alert Design */
538 .yatra-setup-note {
539 padding: 18px 20px;
540 background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
541 border-left: 4px solid var(--yatra-warning);
542 border-radius: var(--yatra-radius-md);
543 margin: 25px 0;
544 font-size: 14px;
545 color: var(--yatra-text-primary);
546 line-height: 1.6;
547 box-shadow: var(--yatra-shadow-sm);
548 }
549
550 .yatra-setup-note strong {
551 color: var(--yatra-text-primary);
552 font-weight: 600;
553 }
554
555 /* Actions - Premium Button Design */
556 .yatra-setup-actions {
557 display: flex;
558 justify-content: center;
559 align-items: center;
560 gap: 20px;
561 padding: 35px 50px;
562 background: transparent;
563 border-top: none;
564 margin-top: 40px;
565 }
566
567 .yatra-setup-actions .button {
568 margin: 0;
569 padding: 16px 40px;
570 font-size: 16px;
571 font-weight: 600;
572 border-radius: var(--yatra-radius-lg);
573 transition: var(--yatra-transition);
574 text-decoration: none;
575 display: inline-flex;
576 align-items: center;
577 justify-content: center;
578 gap: 10px;
579 border: none;
580 cursor: pointer;
581 position: relative;
582 overflow: hidden;
583 }
584
585 .yatra-setup-actions .button::before {
586 content: '';
587 position: absolute;
588 top: 50%;
589 left: 50%;
590 width: 0;
591 height: 0;
592 border-radius: 50%;
593 background: rgba(255, 255, 255, 0.3);
594 transform: translate(-50%, -50%);
595 transition: width 0.6s, height 0.6s;
596 }
597
598 .yatra-setup-actions .button:hover::before {
599 width: 300px;
600 height: 300px;
601 }
602
603 .yatra-setup-actions .button-primary {
604 background: linear-gradient(135deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
605 color: #fff;
606 box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
607 }
608
609 .yatra-setup-actions .button-primary:hover {
610 transform: translateY(-3px);
611 box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
612 }
613
614 .yatra-setup-actions .button-large {
615 min-width: 180px;
616 }
617
618 .yatra-setup-actions .button:not(.button-primary) {
619 background: var(--yatra-bg-primary);
620 border: 2px solid var(--yatra-border);
621 color: var(--yatra-text-secondary);
622 box-shadow: var(--yatra-shadow-sm);
623 }
624
625 .yatra-setup-actions .button:not(.button-primary):hover {
626 background: var(--yatra-bg-secondary);
627 border-color: var(--yatra-primary);
628 color: var(--yatra-primary);
629 transform: translateY(-2px);
630 box-shadow: var(--yatra-shadow-md);
631 }
632
633 /* Theme Options - Premium Card Design */
634 .yatra-theme-options {
635 display: grid;
636 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
637 gap: 25px;
638 margin: 35px 0;
639 }
640
641 .yatra-theme-option {
642 background: var(--yatra-bg-primary);
643 border: 2px solid var(--yatra-border);
644 border-radius: var(--yatra-radius-lg);
645 overflow: hidden;
646 transition: var(--yatra-transition);
647 position: relative;
648 box-shadow: var(--yatra-shadow-md);
649 }
650
651 .yatra-theme-option:hover {
652 border-color: var(--yatra-primary);
653 box-shadow: var(--yatra-shadow-xl);
654 transform: translateY(-4px);
655 }
656
657 .yatra-theme-recommended {
658 border-color: var(--yatra-primary);
659 box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25);
660 }
661
662 .yatra-theme-badge {
663 position: absolute;
664 top: 20px;
665 right: 20px;
666 background: linear-gradient(135deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
667 color: #fff;
668 padding: 8px 16px;
669 border-radius: 20px;
670 font-size: 13px;
671 font-weight: 700;
672 display: flex;
673 align-items: center;
674 gap: 6px;
675 z-index: 1;
676 box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
677 animation: pulse 2s ease-in-out infinite;
678 }
679
680 @keyframes pulse {
681 0%, 100% {
682 box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
683 }
684 50% {
685 box-shadow: 0 4px 20px rgba(102, 126, 234, 0.6);
686 }
687 }
688
689 .yatra-theme-badge .dashicons {
690 font-size: 18px;
691 width: 18px;
692 height: 18px;
693 }
694
695 .yatra-theme-preview {
696 width: 100%;
697 height: 220px;
698 overflow: hidden;
699 background: var(--yatra-bg-tertiary);
700 display: flex;
701 align-items: center;
702 justify-content: center;
703 position: relative;
704 }
705
706 .yatra-theme-preview::after {
707 content: '';
708 position: absolute;
709 bottom: 0;
710 left: 0;
711 right: 0;
712 height: 60px;
713 background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
714 pointer-events: none;
715 }
716
717 .yatra-theme-preview img {
718 width: 100%;
719 height: 100%;
720 object-fit: cover;
721 transition: var(--yatra-transition);
722 }
723
724 .yatra-theme-option:hover .yatra-theme-preview img {
725 transform: scale(1.05);
726 }
727
728 .yatra-theme-no-preview {
729 display: flex;
730 align-items: center;
731 justify-content: center;
732 width: 100%;
733 height: 100%;
734 color: #a7aaad;
735 }
736
737 .yatra-theme-no-preview .dashicons {
738 font-size: 64px;
739 width: 64px;
740 height: 64px;
741 }
742
743 .yatra-theme-details {
744 padding: 25px;
745 }
746
747 .yatra-theme-details h3 {
748 margin: 0 0 12px;
749 font-size: 20px;
750 font-weight: 700;
751 color: var(--yatra-text-primary);
752 }
753
754 .yatra-theme-description {
755 font-size: 15px;
756 color: var(--yatra-text-secondary);
757 margin-bottom: 18px;
758 line-height: 1.6;
759 }
760
761 .yatra-theme-features {
762 list-style: none;
763 margin: 20px 0;
764 padding: 0;
765 }
766
767 .yatra-theme-features li {
768 display: flex;
769 align-items: center;
770 gap: 10px;
771 padding: 8px 0;
772 font-size: 14px;
773 color: var(--yatra-text-secondary);
774 transition: var(--yatra-transition);
775 }
776
777 .yatra-theme-features li:hover {
778 color: var(--yatra-text-primary);
779 padding-left: 5px;
780 }
781
782 .yatra-theme-features .dashicons {
783 color: var(--yatra-success);
784 font-size: 20px;
785 width: 20px;
786 height: 20px;
787 }
788
789 .yatra-theme-status {
790 display: inline-flex;
791 align-items: center;
792 gap: 8px;
793 padding: 10px 18px;
794 border-radius: 20px;
795 font-size: 14px;
796 font-weight: 600;
797 margin-top: 18px;
798 }
799
800 .yatra-theme-active {
801 background: var(--yatra-success-light);
802 color: var(--yatra-success);
803 border: 2px solid var(--yatra-success);
804 }
805
806 .yatra-theme-installed {
807 background: rgba(102, 126, 234, 0.1);
808 color: var(--yatra-primary);
809 border: 2px solid var(--yatra-primary);
810 }
811
812 .yatra-theme-install-option {
813 display: flex;
814 align-items: center;
815 gap: 12px;
816 margin-top: 20px;
817 padding: 16px;
818 background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
819 border: 2px solid var(--yatra-primary);
820 border-radius: var(--yatra-radius-md);
821 cursor: pointer;
822 transition: var(--yatra-transition);
823 }
824
825 .yatra-theme-install-option:hover {
826 background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
827 transform: translateX(4px);
828 }
829
830 .yatra-theme-install-option input[type="checkbox"] {
831 margin: 0;
832 width: 22px;
833 height: 22px;
834 }
835
836 .yatra-theme-install-option span {
837 font-weight: 600;
838 font-size: 15px;
839 color: var(--yatra-primary);
840 }
841
842 /* Sample Data Card - Premium Design */
843 .yatra-setup-sample-data {
844 margin: 35px 0;
845 }
846
847 .yatra-setup-card {
848 background: var(--yatra-bg-primary);
849 border: 2px solid var(--yatra-border);
850 border-radius: var(--yatra-radius-lg);
851 overflow: hidden;
852 box-shadow: var(--yatra-shadow-lg);
853 transition: var(--yatra-transition);
854 }
855
856 .yatra-setup-card:hover {
857 box-shadow: var(--yatra-shadow-xl);
858 transform: translateY(-2px);
859 }
860
861 .yatra-setup-card-header {
862 background: linear-gradient(135deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
863 color: #fff;
864 padding: 20px 25px;
865 display: flex;
866 align-items: center;
867 gap: 12px;
868 position: relative;
869 overflow: hidden;
870 }
871
872 .yatra-setup-card-header::before {
873 content: '';
874 position: absolute;
875 top: -50%;
876 right: -10%;
877 width: 200px;
878 height: 200px;
879 background: rgba(255, 255, 255, 0.1);
880 border-radius: 50%;
881 }
882
883 .yatra-setup-card-header .dashicons {
884 font-size: 32px;
885 width: 32px;
886 height: 32px;
887 position: relative;
888 z-index: 1;
889 }
890
891 .yatra-setup-card-header h3 {
892 margin: 0;
893 font-size: 20px;
894 font-weight: 700;
895 color: #fff;
896 position: relative;
897 z-index: 1;
898 }
899
900 .yatra-setup-card-body {
901 padding: 30px;
902 }
903
904 .yatra-setup-card-body > p {
905 font-size: 15px;
906 line-height: 1.6;
907 margin-bottom: 20px;
908 color: var(--yatra-text-secondary);
909 }
910
911 .yatra-sample-data-includes {
912 list-style: none;
913 margin: 25px 0;
914 padding: 0;
915 display: grid;
916 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
917 gap: 15px;
918 }
919
920 .yatra-sample-data-includes li {
921 display: flex;
922 align-items: center;
923 gap: 10px;
924 font-size: 14px;
925 color: var(--yatra-text-secondary);
926 padding: 8px;
927 background: var(--yatra-bg-secondary);
928 border-radius: var(--yatra-radius-sm);
929 transition: var(--yatra-transition);
930 }
931
932 .yatra-sample-data-includes li:hover {
933 background: var(--yatra-bg-tertiary);
934 padding-left: 12px;
935 }
936
937 .yatra-sample-data-includes .dashicons {
938 color: var(--yatra-success);
939 font-size: 20px;
940 width: 20px;
941 height: 20px;
942 }
943
944 .yatra-checkbox-label {
945 display: flex;
946 align-items: center;
947 gap: 14px;
948 padding: 18px 20px;
949 background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
950 border: 2px solid var(--yatra-primary);
951 border-radius: var(--yatra-radius-md);
952 cursor: pointer;
953 margin-top: 25px;
954 transition: var(--yatra-transition);
955 }
956
957 .yatra-checkbox-label:hover {
958 background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
959 transform: translateX(4px);
960 box-shadow: var(--yatra-shadow-md);
961 }
962
963 .yatra-checkbox-label input[type="checkbox"] {
964 margin: 0;
965 width: 22px;
966 height: 22px;
967 }
968
969 .yatra-checkbox-label span {
970 font-weight: 600;
971 font-size: 16px;
972 color: var(--yatra-primary);
973 }
974
975 /* Premium Features - Stunning Showcase */
976 .yatra-setup-premium-features {
977 margin: 35px 0;
978 padding: 35px;
979 background: linear-gradient(135deg, var(--yatra-primary) 0%, var(--yatra-secondary) 100%);
980 border-radius: var(--yatra-radius-xl);
981 color: #fff;
982 box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
983 position: relative;
984 overflow: hidden;
985 }
986
987 .yatra-setup-premium-features::before {
988 content: '';
989 position: absolute;
990 top: -50%;
991 right: -20%;
992 width: 400px;
993 height: 400px;
994 background: rgba(255, 255, 255, 0.05);
995 border-radius: 50%;
996 }
997
998 .yatra-premium-heading {
999 display: flex;
1000 align-items: center;
1001 gap: 12px;
1002 font-size: 24px;
1003 margin: 0 0 10px;
1004 color: #fff;
1005 font-weight: 700;
1006 position: relative;
1007 z-index: 1;
1008 }
1009
1010 .yatra-premium-heading .dashicons {
1011 font-size: 32px;
1012 width: 32px;
1013 height: 32px;
1014 }
1015
1016 .yatra-premium-description {
1017 font-size: 16px;
1018 margin-bottom: 25px;
1019 opacity: 0.95;
1020 line-height: 1.6;
1021 position: relative;
1022 z-index: 1;
1023 }
1024
1025 .yatra-premium-features-grid {
1026 display: grid;
1027 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
1028 gap: 18px;
1029 margin: 30px 0;
1030 position: relative;
1031 z-index: 1;
1032 }
1033
1034 .yatra-premium-feature {
1035 background: rgba(255, 255, 255, 0.12);
1036 padding: 20px;
1037 border-radius: var(--yatra-radius-lg);
1038 backdrop-filter: blur(10px);
1039 border: 1px solid rgba(255, 255, 255, 0.2);
1040 transition: var(--yatra-transition);
1041 }
1042
1043 .yatra-premium-feature:hover {
1044 background: rgba(255, 255, 255, 0.2);
1045 transform: translateY(-4px);
1046 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
1047 }
1048
1049 .yatra-premium-feature .dashicons {
1050 font-size: 36px;
1051 width: 36px;
1052 height: 36px;
1053 margin-bottom: 12px;
1054 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
1055 }
1056
1057 .yatra-premium-feature h4 {
1058 margin: 0 0 8px;
1059 font-size: 16px;
1060 color: #fff;
1061 font-weight: 700;
1062 }
1063
1064 .yatra-premium-feature p {
1065 margin: 0;
1066 font-size: 14px;
1067 opacity: 0.9;
1068 line-height: 1.5;
1069 }
1070
1071 .yatra-premium-cta {
1072 text-align: center;
1073 margin-top: 30px;
1074 position: relative;
1075 z-index: 1;
1076 }
1077
1078 .yatra-premium-cta .button {
1079 background: #fff;
1080 color: var(--yatra-primary);
1081 border: none;
1082 font-size: 17px;
1083 font-weight: 700;
1084 padding: 16px 40px;
1085 display: inline-flex;
1086 align-items: center;
1087 gap: 10px;
1088 transition: var(--yatra-transition);
1089 border-radius: 30px;
1090 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
1091 }
1092
1093 .yatra-premium-cta .button:hover {
1094 background: #f8f9fa;
1095 transform: translateY(-3px) scale(1.05);
1096 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
1097 }
1098
1099 .yatra-premium-cta .dashicons {
1100 font-size: 20px;
1101 width: 20px;
1102 height: 20px;
1103 }
1104
1105 .yatra-premium-note {
1106 margin-top: 15px;
1107 font-size: 14px;
1108 opacity: 0.9;
1109 }
1110
1111 /* Form Inputs - Modern Design */
1112 .yatra-setup-content input[type="text"],
1113 .yatra-setup-content input[type="number"],
1114 .yatra-setup-content select {
1115 padding: 12px 16px;
1116 font-size: 15px;
1117 border: 2px solid var(--yatra-border);
1118 border-radius: var(--yatra-radius-md);
1119 transition: var(--yatra-transition);
1120 background: var(--yatra-bg-primary);
1121 color: var(--yatra-text-primary);
1122 width: 100%;
1123 max-width: 400px;
1124 }
1125
1126 .yatra-setup-content input[type="text"]:focus,
1127 .yatra-setup-content input[type="number"]:focus,
1128 .yatra-setup-content select:focus {
1129 border-color: var(--yatra-primary);
1130 outline: none;
1131 box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
1132 background: var(--yatra-bg-primary);
1133 }
1134
1135 .yatra-setup-content input[type="checkbox"] {
1136 width: 20px;
1137 height: 20px;
1138 cursor: pointer;
1139 accent-color: var(--yatra-primary);
1140 }
1141
1142 .yatra-setup-content label {
1143 cursor: pointer;
1144 font-size: 15px;
1145 color: var(--yatra-text-secondary);
1146 transition: var(--yatra-transition);
1147 }
1148
1149 .yatra-setup-content label:hover {
1150 color: var(--yatra-text-primary);
1151 }
1152
1153 /* Responsive Design */
1154 @media screen and (max-width: 768px) {
1155 .yatra-setup-wrapper {
1156 padding: 20px 15px;
1157 }
1158
1159 .yatra-setup-content {
1160 padding: 30px 20px;
1161 }
1162
1163 .yatra-setup-step-content h2 {
1164 font-size: 26px;
1165 }
1166
1167 .yatra-setup-steps {
1168 font-size: 12px;
1169 }
1170
1171 .yatra-setup-steps li::before {
1172 width: 30px;
1173 height: 30px;
1174 line-height: 30px;
1175 font-size: 14px;
1176 }
1177
1178 .yatra-setup-features,
1179 .yatra-setup-next-steps,
1180 .yatra-theme-options,
1181 .yatra-premium-features-grid {
1182 grid-template-columns: 1fr;
1183 }
1184
1185 .yatra-setup-content .form-table th {
1186 display: block;
1187 width: 100%;
1188 padding-bottom: 5px;
1189 }
1190
1191 .yatra-setup-content .form-table td {
1192 display: block;
1193 padding-top: 5px;
1194 }
1195
1196 .yatra-setup-actions {
1197 padding: 15px 20px;
1198 }
1199
1200 .yatra-setup-actions .button {
1201 display: block;
1202 width: 100%;
1203 margin: 5px 0;
1204 }
1205
1206 .yatra-sample-data-includes {
1207 grid-template-columns: 1fr;
1208 }
1209 }
1210