#bookingLoggedInHeader {
    text-align: right;
    margin-bottom: 1rem;
}
#userDropdown {
    transition: background-color 0.2s ease;
}

    #userDropdown:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

.user-chip-container {
    padding-right: 1rem;
}

.user-chip {
    font-size: 0.875rem;
    background-color: #f8f9fa;
    transition: box-shadow 0.2s;
}

    .user-chip:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .user-chip i {
        font-size: 1rem;
    }


.card {
    border: 1px solid rgb(28 95 168 / 29%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease-in-out;
}

.card-header {
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.card-body {
    padding: 1rem 1.25rem;
}

.card-footer {
    padding: 1rem;
    border-top: none;
}

.btn-outline-primary {
    border-width: 2px;
}









.card-header {
    font-weight: bold;
    font-size: 1.25rem;
}

.text-primary {
    font-weight: bold;
    color: #1c5fa8 !important;
}

.text-secondary {
    color: #6c757d !important;
}

.btn-prev, .btn-next {
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

    .btn-prev:hover, .btn-next:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

@media (min-width: 768px) {
    .hover-zoom:hover {
        transform: scale(1.03);
        border-color: #1c5fa8;
        box-shadow: 0 6px 20px rgba(28, 95, 168, 0.15);
    }
}



.error {
    display: none !important; /* Suppress native red outlines */
}

.booking-user-details-tab-content {
    margin-top: 0px !important;
}

#bookingDateTimeSelection {
    display: none;
}

#bookingUserDetailsSelection {
    display: none;
}

#bookingSummarySection {
    display: none;
}

#bookingThankYouSection {
    display: none;
    margin-bottom: 2.5rem;
}

@keyframes bounceSpinIn {
    0% {
        transform: scale(0.8) rotateY(-180deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.1) rotateY(20deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotateY(0deg);
    }
}


.icon-wrapper {
    width: 42px;
    height: 42px;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: bounceSpinIn 2s ease-out;
    transform-style: preserve-3d;

}

.booking-header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
}



@media (min-width: 768px) {
    .scrollable-products {
        display: none;
    }

    .products-list {
        display: flex;
    }
}

@media (max-width: 767.98px) {
    .booking-header {
        position: sticky;
        top: 0px;
        z-index: 20;
    }
    .products-list {
        display: none;
    }

    .scrollable-products {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding-left: 1rem;
        padding-right: 1rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
        .scrollable-products::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 100%;
            background: linear-gradient(to left, rgba(255,255,255,0.9), rgba(255,255,255,0));
            pointer-events: none;
            z-index: 2;
        }
        .scrollable-products .card {
            width: 90vw;
            max-width: 300px;
            margin-right: 1rem;
            scroll-snap-align: start;
            vertical-align: top;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: auto; /* Let JS control height */
        }
        .scrollable-products .card-text {
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
        }

        .scrollable-products .card-body {
            flex-grow: 1;
        }

        .scrollable-products .card-footer {
            margin-top: auto;
        }

    .products.row {
        flex-wrap: nowrap !important;
        margin: 0; /* Remove row-gutter for horizontal scroll */
    }

    .products .col-12 {
        flex: 0 0 auto;
        padding: 0;
    }
    .swipe-hint {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            opacity: 0.3;
        }

        50% {
            opacity: 0.9;
        }

        100% {
            opacity: 0.3;
        }
    }
}
/* Flex container for calendar */
.booking-calendar-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 1.5rem;
    margin-bottom: 3.5rem;
}

.btn-time-slot {
    border-radius: 25px;
}

    .btn-time-slot:hover {
        scale: 1.05;
        transition: 0.2s;
    }

/* Ensure the booking-date-time-area container is relatively positioned */
.booking-date-time-area {
    position: relative; /* This will allow absolute positioning of child elements like pagination */
}

/* Center the swiper pagination within the booking-date-time-area */
.swiper-timeslots-pagination {
    position: absolute; /* Position it relative to the nearest positioned ancestor (booking-date-time-area) */
    bottom: 20px; /* You can adjust this value to control vertical placement */
    left: 50% !important;
    transform: translateX(-50%); /* Centers the element horizontally */
    width: auto; /* Ensure it doesn't extend beyond its container */
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    bottom: unset !important;
    margin-top: 15px;
}
/* Positioning for next/prev buttons */
.swiper-button-next,
.swiper-button-prev {
    background-color: transparent; /* Keep background transparent to avoid design changes */
    color: inherit; /* Ensure button color inherits from the theme */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 40px; /* Add margin to align with radio buttons */
    position: absolute;
    top: 40%; /* Center vertically, adjust with margin-top for alignment */
    transform: translateY(-50%);
    z-index: 10;
}

/* Align the next button on the right */
.swiper-button-next {
    right: 10px;
}

/* Align the prev button on the left */
.swiper-button-prev {
    left: 10px;
}

@media (max-width: 1200px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
}


/* Ensure it doesn't overlap other content on mobile */
@media (max-width: 768px) {
    .swiper-timeslots-pagination {
        bottom: 10px; /* You can adjust this value for mobile if necessary */
        width: auto; /* Adjust width to prevent overlap on small screens */
    }
}

/* Adjustments for flatpickr calendar on all screen sizes */
.flatpickr-calendar#createBooking-datePicker {
    width: 100% !important; /* Let it adjust to the available container width */
    max-width: 36.5rem !important; /* Max width to prevent it from getting too large */
}

#createBooking-datePicker .flatpickr-day:hover {
    scale: 1.05;
    transition: 0.2s;
    border-style: solid;
    border-color: #1c5fa8;
}
/* Adjustments for day container inside flatpickr */
#createBooking-datePicker .flatpickr-days,
#createBooking-datePicker .flatpickr-months,
#createBooking-datePicker .flatpickr-innerContainer,
#createBooking-datePicker .flatpickr-rContainer {
    width: 100% !important;
    max-width: 35rem !important; /* Keep a reasonable max width for larger screens */
    font-size: 1rem !important; /* Use relative font size */
}

/* Flatpickr day width */
#createBooking-datePicker .flatpickr-day {
    max-width: 4.5rem !important; /* Ensure buttons are reasonably sized */
    border-radius: 50rem !important;
    margin-bottom: 5px;
}

#createBooking-datePicker .flatpickr-disabled {
    background: lightgray !important;
    opacity: 0.5 !important;
}

#createBooking-datePicker .selected {
    background: #1c5fa8 !important;
    color: white !important;
}

#createBooking-datePicker .prevMonthDay {
    opacity: 0.5 !important;
}

#createBooking-datePicker .nextMonthDay {
    opacity: 0.5 !important;
}

/* Flatpickr day container adjustments */
#createBooking-datePicker .dayContainer {
    min-width: 100% !important; /* Take full width */
    max-width: 100% !important; /* Keep it fluid */
}

/* Flatpickr day width */
#createBooking-datePicker .flatpickr-weekdaycontainer {
    padding: 0rem 0rem 0 !important;
}


/* Media queries for smaller screens */
@media (max-width: 768px) {
    .flatpickr-calendar#createBooking-datePicker {
        width: 90% !important; /* Shrink calendar for smaller screens */
    }

    #createBooking-datePicker .flatpickr-day {
        max-width: 3rem !important; /* Adjust day buttons for mobile */
    }

    #createBooking-datePicker .dayContainer {
        width: 100% !important;
    }

    .swiper-timeslots-pagination {
        width: 100% !important;
    }

    /* Hide booking summary area on mobile */
    .booking-summary-area {
        display: none !important; /* Hides the booking summary on screens smaller than 768px */
    }

    /* Adjustments for day container inside flatpickr */
    #createBooking-datePicker .flatpickr-days,
    #createBooking-datePicker .flatpickr-months,
    #createBooking-datePicker .flatpickr-innerContainer,
    #createBooking-datePicker .flatpickr-rContainer {
        font-size: 0.8rem !important;
    }
}