body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f4f8;
}

.booked {
    background-color: #fed7d7; /* Red-200 */
    cursor: pointer;
    border-left: 4px solid #f56565; /* Red-500 */
}

.available {
    background-color: #f0f4f8; /* Gray-100 */
    cursor: pointer;
}
.available:hover {
    background-color: #e2e8f0; /* Gray-200 */
}


.time-slot:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.calendar-cell {
    min-height: 120px;
    transition: all 0.2s;
}

.calendar-cell:hover {
    background-color: #e2e8f0;
}

.tab-active {
    border-bottom: 3px solid #4f46e5;
    color: #4f46e5;
    font-weight: 600;
}

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #cbd5e0;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.file-upload-label:hover {
    border-color: #4f46e5;
    background-color: #f3f4f6;
}

.file-preview {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.btn {
    transition: all 0.2s ease;
}

.btn:active {
    transform: scale(0.97);
}

.notification {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-100px);
    transition: all 0.3s ease-in-out;
    display: none;
}

.notification.show {
    transform: translateY(0);
    opacity: 1;
    display: block;
}

/* NEW: Styles for Week View Grid */
#weekGrid {
    height: calc(48 * 2rem); /* 48 slots (30-min) * 2rem height per slot */
}
.week-time-slot {
    height: 2rem; /* Each slot is 30 mins */
    border: 1px solid #e2e8f0;
}
.week-booking {
    position: absolute;
    left: calc(12.5% + 2px); /* 1/8th of the grid width + border*/
    right: 2px;
    background-color: #c3dafe;
    border: 1px solid #667eea;
    border-radius: 4px;
    padding: 4px;
    font-size: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
}
.week-booking:hover {
    border-color: #5a67d8;
    background-color: #a3bffa;
}


@media (max-width: 640px) {
    .calendar-cell {
        min-height: 80px;
    }

    .time-slot {
        padding: 0.5rem;
    }
    
    #bookingModal .bg-white,
    #confirmationModal .bg-white,
    #thankYouModal .bg-white {
        max-height: 95vh;
        overflow-y: auto;
    }
}