/* Minimalist Scroll Animations */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Utility to delay stagger animations */
        .delay-100 {
            transition-delay: 100ms;
        }

        .delay-200 {
            transition-delay: 200ms;
        }

        .delay-300 {
            transition-delay: 300ms;
        }

        /* Modal specific styles */
        .modal-glass {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .modal-in {
            animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes modalIn {
            0% {
                opacity: 0;
                transform: scale(0.95);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Custom styles for toggles */
        input:checked~.toggle-bg {
            background-color: #14b8a6;
        }

        /* teal-500 */
        input:checked~.dot {
            transform: translateX(100%);
        }

        /* Flatpickr Customization for VandiPilot */
        .flatpickr-calendar {
            font-family: 'Outfit', sans-serif !important;
            background: #ffffff !important;
            border: none !important;
            box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
            border-radius: 1.5rem !important;
            padding: 16px !important;
            width: 320px !important;
            z-index: 9999 !important;
        }

        /* Hide the native pointer arrows for a cleaner floating look */
        .flatpickr-calendar::before,
        .flatpickr-calendar::after {
            display: none !important;
        }

        /* Center Flatpickr on ALL screens and add dark backdrop overlay */
        .flatpickr-calendar.open {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            /* 0.9 scale reduces the overall size as requested */
            transform: translate(-50%, -50%) scale(0.9) !important;
            display: block !important;
            /* Ensure it appears above the dark backdrop below */
            z-index: 9999 !important;
        }

        /* Dimming backdrop specifically for the active calendar */
        body:has(.flatpickr-calendar.open)::after {
            content: '';
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(4px);
            z-index: 9998;
        }

        .flatpickr-innerContainer {
            padding-bottom: 8px;
        }

        .flatpickr-months {
            margin-bottom: 12px !important;
            padding: 8px 16px !important;
            border-bottom: 1px solid #f1f5f9;
        }

        .flatpickr-months .flatpickr-month {
            height: 48px !important;
            background: transparent !important;
            color: #0f172a !important;
            fill: #0f172a !important;
        }

        .flatpickr-current-month {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 12px;
            padding: 0 !important;
            height: 100% !important;
            font-size: 18px !important;
        }

        /* Modernize the Month text label */
        .flatpickr-current-month .cur-month {
            font-weight: 800 !important;
            color: #0f172a !important;
            font-family: 'Outfit', sans-serif !important;
            font-size: 20px !important;
            margin: 0 !important;
            padding: 0 !important;
            transition: color 0.3s ease;
        }

        .flatpickr-current-month .cur-month:hover {
            color: #14b8a6 !important;
        }

        /* Fully Stylized Year Input */
        .flatpickr-current-month .numInputWrapper {
            border-radius: 12px;
            background: #f8fafc;
            padding: 4px 12px;
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
            width: auto !important;
            min-width: 80px;
            display: flex;
            align-items: center;
        }

        .flatpickr-current-month .numInputWrapper:hover,
        .flatpickr-current-month .numInputWrapper:focus-within {
            background: #f1f5f9;
            box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
        }

        .flatpickr-current-month input.cur-year {
            font-weight: 700 !important;
            color: #14b8a6 !important;
            font-family: 'Outfit', sans-serif !important;
            font-size: 18px !important;
            background: transparent !important;
            outline: none !important;
            box-shadow: none !important;
        }

        .flatpickr-months .flatpickr-prev-month,
        .flatpickr-months .flatpickr-next-month {
            fill: #64748b !important;
            height: 40px !important;
            width: 40px !important;
            padding: 10px !important;
            border-radius: 12px !important;
            background: #f8fafc !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            top: 12px !important;
        }

        .flatpickr-months .flatpickr-prev-month {
            left: 12px !important;
        }

        .flatpickr-months .flatpickr-next-month {
            right: 12px !important;
        }

        .flatpickr-months .flatpickr-prev-month:hover,
        .flatpickr-months .flatpickr-next-month:hover {
            background: #14b8a6 !important;
            fill: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.2);
        }

        span.flatpickr-weekday {
            color: #94a3b8 !important;
            font-weight: 600 !important;
            font-size: 0.85rem !important;
        }

        .flatpickr-day {
            border-radius: 12px !important;
            color: #334155 !important;
            font-weight: 500 !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
            border: 2px solid transparent !important;
            margin: 2px 0 !important;
        }

        .flatpickr-day:hover {
            background: #f0fdfa !important;
            color: #0d9488 !important;
            font-weight: 700 !important;
            transform: scale(1.05);
        }

        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange,
        .flatpickr-day.selected.inRange,
        .flatpickr-day.startRange.inRange,
        .flatpickr-day.endRange.inRange,
        .flatpickr-day.selected:focus,
        .flatpickr-day.startRange:focus,
        .flatpickr-day.endRange:focus,
        .flatpickr-day.selected:hover,
        .flatpickr-day.startRange:hover,
        .flatpickr-day.endRange:hover,
        .flatpickr-day.selected.prevMonthDay,
        .flatpickr-day.startRange.prevMonthDay,
        .flatpickr-day.endRange.prevMonthDay,
        .flatpickr-day.selected.nextMonthDay,
        .flatpickr-day.startRange.nextMonthDay,
        .flatpickr-day.endRange.nextMonthDay {
            background: #14b8a6 !important;
            border-color: #14b8a6 !important;
            color: white !important;
            font-weight: 700 !important;
            box-shadow: 0 4px 14px 0 rgba(20, 184, 166, 0.39) !important;
            transform: scale(1.05);
        }

        .flatpickr-day.today {
            border-color: #2dd4bf !important;
            font-weight: 700 !important;
        }

        .flatpickr-day.today:hover {
            background: #f0fdfa !important;
            color: #0d9488 !important;
        }

        /* Time Picker Modernization */
        .flatpickr-time {
            border-top: 1px dashed #e2e8f0 !important;
            max-height: none !important;
            height: auto !important;
            padding: 20px 12px 12px 12px !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            overflow: visible !important;
            background: #f8fafc;
            border-radius: 0 0 1.5rem 1.5rem;
            margin: 0 -16px -16px -16px;
        }

        .flatpickr-time .numInputWrapper {
            height: 56px !important;
            width: 80px !important;
            flex: none !important;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
        }

        .flatpickr-time .numInputWrapper:hover,
        .flatpickr-time .numInputWrapper:focus-within {
            border-color: #14b8a6;
            box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.15);
            transform: translateY(-2px);
        }

        .flatpickr-time input.flatpickr-hour,
        .flatpickr-time input.flatpickr-minute {
            font-weight: 800 !important;
            color: #0f172a !important;
            font-size: 26px !important;
            background: transparent !important;
            margin: 0 !important;
            padding: 0 !important;
            height: 56px !important;
            line-height: 56px !important;
            transition: color 0.3s ease;
        }

        .flatpickr-time input:hover,
        .flatpickr-time input:focus {
            color: #14b8a6 !important;
        }

        .flatpickr-time .flatpickr-time-separator {
            color: #cbd5e1 !important;
            font-weight: 800 !important;
            font-size: 28px !important;
            width: 20px !important;
            height: 56px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: none !important;
            margin: 0 4px !important;
        }

        .flatpickr-time .flatpickr-am-pm {
            font-weight: 800 !important;
            color: #0d9488 !important;
            background: #ffffff !important;
            border-radius: 16px !important;
            margin-left: 8px !important;
            height: 56px !important;
            width: 70px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            flex: none !important;
            border: 1px solid #14b8a6 !important;
            font-size: 16px !important;
        }

        .flatpickr-time .flatpickr-am-pm:hover,
        .flatpickr-time .flatpickr-am-pm:focus {
            background: #14b8a6 !important;
            color: white !important;
            box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.2) !important;
            transform: translateY(-2px);
        }

        /* Customizing up/down arrows for inputs */
        .numInputWrapper span {
            border: none !important;
            width: 24px !important;
            opacity: 0;
            transition: all 0.2s ease !important;
            background: #f1f5f9;
        }

        .numInputWrapper:hover span {
            opacity: 1;
        }

        .numInputWrapper span.arrowUp {
            border-top-right-radius: 16px !important;
            border-bottom: 1px solid #e2e8f0 !important;
        }

        .numInputWrapper span.arrowDown {
            border-bottom-right-radius: 16px !important;
        }

        .numInputWrapper span:hover {
            background: #14b8a6 !important;
        }

        .numInputWrapper span.arrowUp:after {
            border-bottom-color: #64748b !important;
        }

        .numInputWrapper span.arrowDown:after {
            border-top-color: #64748b !important;
        }

        .numInputWrapper span:hover.arrowUp:after {
            border-bottom-color: white !important;
        }

        .numInputWrapper span:hover.arrowDown:after {
            border-top-color: white !important;
        }