/* Wizard Steps */
        .step {
            display: none;
        }

        .step.active {
            display: block;
        }

        /* FullCalendar Container */
        #calendar-container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 10px;
            border-radius: 8px;
        }

        /* 1) Remove all borders in the FullCalendar grid */
        .fc .fc-scrollgrid,
        .fc .fc-scrollgrid-sync-table,
        .fc .fc-scrollgrid-sync-table td,
        .fc .fc-scrollgrid-sync-table th,
        .fc .fc-daygrid-day-frame,
        .fc .fc-daygrid-day {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }

        .fc .fc-scrollgrid table {
            border-collapse: collapse !important;
            border: 0 !important;
        }

        /* 1) Base circle style for ALL day numbers */
        .fc-daygrid-day .fc-daygrid-day-number {
            width: 2.3em; /* ~30% bigger than 2em */
            height: 2.3em;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            border-radius: 50%;
            font-size: 1.3em;
            background-color: #f0f0f0; /* Default circle background */
            color: #000; /* Default text color */
        }

        /* Extra small devices (xs) - adjust if screen is 576px or less */
        @media (max-width: 576px) {
            .fc-daygrid-day .fc-daygrid-day-number {
                width: 1.7em;
                height: 1.7em;
                font-size: .9em;
            }
        }

        /* Small devices (sm) - screens between 577px and 768px */
        @media (min-width: 577px) {
            .fc-daygrid-day .fc-daygrid-day-number {
                width: 2em;
                height: 2em;
                font-size: 1.1em;
            }
        }


        /* 2) Blocked dates override */
        .fc-daygrid-day.blocked-date .fc-daygrid-day-number {
            background-color: #ccc !important;
            color: #666 !important;
            opacity: 0.7 !important;
            pointer-events: none;
        }

        /* 3) Available dates override */
        .fc-daygrid-day.available-day .fc-daygrid-day-number {
            background-color: #28a745 !important;
            color: #fff !important;
        }

        /* 4) Selected day override */
        .fc-daygrid-day.selected-date .fc-daygrid-day-number {
            background-color: #007bff !important;
            color: #fff !important;
            font-weight: bold;
        }

        /* Time Slot Button Styling */
        .time-slot-btn {
            margin: 5px;
            padding: 10px 20px;
            font-size: 16px;
            transition: all 0.3s ease-in-out;
            border-radius: 8px;
        }

        .time-slot-btn:hover {
            background-color: #0056b3 !important;
            color: white !important;
        }

        .time-slot-btn.selected {
            background-color: #007bff !important;
            color: white !important;
            font-weight: bold;
        }

        .fc-daygrid-day:not([data-date]) {
            background-color: white !important;
        }

        /* Override everything inside today's cell */
        .fc-day-today,
        .fc-day-today * {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        .fc .fc-day-today:not(.fc-popover) .fc-daygrid-day-number {
            background-color: #ccc !important;
            color: #666 !important;
            opacity: 0.7 !important;
            pointer-events: none;
        }

        .fc-daygrid-day .fc-daygrid-day-events {
            display: none !important;
        }

        /* Remove leftover borders from FullCalendar's default theme */
        .fc-theme-standard .fc-scrollgrid {
            border: none !important;
        }

        .fc-theme-standard td,
        .fc-theme-standard th {
            border: none !important;
        }

        #color-key {
            text-align: center;
            margin-top: 20px;
        }

        .calendar-key {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            display: inline-flex;
        }

        .calendar-key li {
            display: inline-flex;
            align-items: center;
        }

        .calendar-key .circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 5px;
        }

        /* Colors corresponding to your calendar's styling */
        .calendar-key .available {
            background-color: #28a745; /* Green for available */
        }

        .calendar-key .selected {
            background-color: #007bff; /* Blue for selected */
        }

        .calendar-key .unavailable {
            background-color: #ccc; /* Grey for unavailable */
        }

        .time-slot-grid {
            display: grid;
            /* Make two columns and enough rows for your times.
               For example, if you have 9 slots, 5 rows covers the first column. */
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(5, auto);
            grid-auto-flow: column; /* fill down the column first, then move to the next column */
            gap: 0.5rem; /* space between grid cells */
            max-width: 400px;
            margin: 20px;
        }

        .btn-primary:not(:disabled) {
            color: white;
        }

        .btn-primary:disabled {
            color: white;
            background-color: #737373; /* Grey for unavailable */
            border-color: #737373; /* Grey for unavailable */
        }