/*
 * style.css: Custom Styles
 * This file is used to add or override Tailwind styles for the Apple-inspired design.
 */

body {
    /* Ensures smooth scrolling across the page */
    scroll-behavior: smooth;
}

/* Styles for calendar days */
.day {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px; /* Fixed height for days */
    font-weight: 500;
    border-radius: 8px; /* Softer borders */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.day.selected {
    background-color: theme('colors.apple-blue');
    color: white;
    font-weight: 700;
    box-shadow: theme('boxShadow.md');
}

.day.current-month {
    color: theme('colors.apple-dark');
}

.day.other-month {
    color: theme('colors.gray.400'); /* Lighter color for days outside current month */
}

.day.today {
    border: 2px solid theme('colors.apple-blue');
    background-color: theme('colors.apple-blue.100'); /* Very light blue for today */
    color: theme('colors.apple-dark');
}

.day.disabled {
    background-color: theme('colors.gray.200');
    color: theme('colors.gray.500');
    cursor: not-allowed;
    text-decoration: line-through;
}

.day.disabled:hover {
    background-color: theme('colors.gray.200'); /* Prevent hover color change for disabled days */
}

/* Styles for time slots */
.time-slot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    background-color: theme('colors.white');
    border: 1px solid theme('colors.gray.300');
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    font-weight: 500;
    color: theme('colors.apple-dark');
    box-shadow: theme('boxShadow.sm');
}

.time-slot:hover {
    background-color: theme('colors.apple-blue.50'); /* A touch of blue on hover */
    border-color: theme('colors.apple-blue');
}

.time-slot.selected {
    background-color: theme('colors.apple-blue');
    color: rgb(79, 124, 220);
    border-color: theme('colors.apple-blue');
    font-weight: 600;
    box-shadow: theme('boxShadow.md');
}

.time-slot.unavailable {
    background-color: theme('colors.gray.100');
    color: theme('colors.gray.500');
    cursor: not-allowed;
    border-color: theme('colors.gray.200');
    text-decoration: line-through;
}

.time-slot.unavailable:hover {
    background-color: theme('colors.gray.100'); /* Prevent hover color change for unavailable slots */
}